/* ============================================================
   DAUGHTERS OF GRACE — grace1904.com
   ------------------------------------------------------------
   TYPE
   • Seasons Script — self-hosted, licensed (web formats shipped
     with the purchase). Wordmark and accents only, never body.
   • Detective - self-hosted, licensed (web formats shipped with
     the purchase). Carries headings AND body. 109 glyphs only:
     it has NO em dash, en dash, prime marks or accents, so the
     copy uses spaced hyphens and straight quotes throughout.
     Do not reintroduce em dashes; they render as blank boxes.
     The site loads no external fonts at all.
   ============================================================ */

@font-face{
  font-family:"Detective";
  src:url("../fonts/detective-webfont.woff2") format("woff2"),
      url("../fonts/detective-webfont.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Seasons Script";
  src:url("../fonts/seasons_script-webfont.woff2") format("woff2"),
      url("../fonts/seasons_script-webfont.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --font-script:"Seasons Script", cursive;
  --font-display:"Detective","American Typewriter",Georgia,serif;
  --font-body:"Detective","American Typewriter",Georgia,serif;

  /* palette — Vintage Charm
     Deep Denim #2F3E4E · Dusty Rose #B57A7F · Antique Cream #F1E8DB
     Sage Green #7B846D · Warm Taupe #8E7867
     Two darkened relatives (--ink-soft, --burgundy) exist because the
     source taupe and rose are too light for small text on cream —
     they'd fail contrast. Decorative use keeps the true values. */
  --sage:#7B846D;        /* Sage Green, as given            */
  --sage-deep:#2F3E4E;   /* Deep Denim — primary dark        */
  --sage-pale:#DED5C8;   /* cream, for type on denim         */
  --burgundy:#94595F;    /* Dusty Rose, darkened for text    */
  --rose:#B57A7F;        /* Dusty Rose, as given             */
  --rust:#8E7867;        /* Warm Taupe, as given             */
  --pale-denim:#B9C6D1;  /* Deep Denim, lightened            */
  --linen:#F8F2E9;       /* Antique Cream, lifted for pages  */
  --linen-deep:#F1E8DB;  /* Antique Cream, as given          */
  --ink:#2F3E4E;         /* Deep Denim                       */
  --ink-soft:#6B5949;    /* Warm Taupe, darkened for body    */
  --rule:rgba(47,62,78,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--linen);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.75;letter-spacing:.002em;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}

.script{font-family:var(--font-script);font-weight:400}
.eyebrow{
  font-family:var(--font-display);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);margin:0 0 14px;font-weight:400;
}

/* ---------- header / nav ---------- */
.masthead{background:var(--linen);border-bottom:1px solid var(--rule)}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:20px;padding-bottom:16px;flex-wrap:wrap;
}
.brand{text-decoration:none;line-height:1}
.brand .name{font-family:var(--font-script);font-size:34px;color:var(--sage-deep);display:block}
.brand .est{
  font-family:var(--font-display);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:2px;font-weight:400;
}
.mainnav{display:flex;gap:26px;flex-wrap:wrap}
.mainnav a{
  font-family:var(--font-display);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.mainnav a:hover,.mainnav a:focus-visible,.mainnav a[aria-current="page"]{border-bottom-color:var(--sage)}

/* ---------- arch: the signature shape (a doorway) ---------- */
.arch{
  border-radius:1000px 1000px 12px 12px / 420px 420px 12px 12px;
  overflow:hidden;background:var(--linen-deep);
}
.arch img{width:100%;height:100%;object-fit:cover}

/* ---------- hero ---------- */
.hero{padding:70px 0 78px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px);margin-bottom:22px}
.hero h1 .script{display:block;font-size:1.32em;color:var(--sage-deep);line-height:.95;margin-bottom:6px}
.hero p{font-size:21px;color:var(--ink-soft);max-width:44ch;margin:0 0 16px}
.hero .arch{aspect-ratio:3/4}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero .arch{max-width:340px;margin:0 auto}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-display);font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:15px 30px;border:1px solid var(--sage-deep);background:var(--sage-deep);
  color:var(--linen);cursor:pointer;transition:background .18s,color .18s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--sage-deep)}
.btn.ghost{background:transparent;color:var(--sage-deep)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--sage-deep);color:var(--linen)}
.btn+.btn{margin-left:10px}
@media(max-width:520px){.btn{display:block;text-align:center}.btn+.btn{margin:12px 0 0}}

/* ---------- sections ---------- */
section{padding:74px 0}
section.tint{background:var(--linen-deep)}
section.sage{background:var(--sage-deep);color:var(--sage-pale)}
section.sage h2{color:var(--linen)}
.section-head{text-align:center;max-width:620px;margin:0 auto 48px}
.section-head h2{font-size:clamp(31px,4.4vw,46px);margin-bottom:14px}
.section-head p{color:var(--ink-soft);margin:0}
section.sage .section-head p{color:var(--sage-pale)}

/* ---------- product grid ---------- */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px}
.product .arch{aspect-ratio:4/5;margin-bottom:20px}
.product h3{font-size:24px;margin-bottom:6px}
.product .price{
  font-family:var(--font-display);font-size:17px;color:var(--burgundy);
  letter-spacing:.06em;margin:0 0 10px;
}
.product p.desc{font-size:18px;color:var(--ink-soft);margin:0 0 16px}
.product .ph{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;
  background:var(--sage-pale);color:var(--sage-deep);padding:24px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- editorial blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .arch{aspect-ratio:1/1}
.split h2{font-size:clamp(28px,4vw,40px);margin-bottom:18px}
.split p{color:var(--ink-soft);margin:0 0 16px}
section.sage .split p{color:var(--sage-pale)}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:36px}}

.pullquote{
  font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);
  line-height:1.35;text-align:center;max-width:22ch;margin:0 auto;
}

/* ---------- prose (about / guide) ---------- */
.prose h2{font-size:clamp(27px,3.8vw,38px);margin:46px 0 16px}
.prose p{margin:0 0 20px;color:var(--ink-soft)}
.prose p.lead{font-size:23px;color:var(--ink)}

/* ---------- forms ---------- */
.formcard{background:var(--linen-deep);padding:38px 34px;border-top:3px solid var(--sage-deep)}
.field{margin-bottom:22px}
.field label{
  display:block;font-family:var(--font-display);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:7px;font-weight:400;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid rgba(47,62,78,.26);
  background:var(--linen);font-family:var(--font-body);font-size:18px;color:var(--ink);
  border-radius:2px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage);
}
.field .hint{font-size:15px;color:var(--ink-soft);margin:6px 0 0}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#C4BAAB;padding:62px 0 40px;font-size:18px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px}
footer h3{color:var(--linen);font-size:20px;margin-bottom:12px;font-weight:400}
footer .name{font-family:var(--font-script);font-size:34px;color:var(--linen);margin-bottom:8px}
footer p{margin:0 0 12px;max-width:42ch}
footer a{color:var(--pale-denim);text-decoration:none}
footer a:hover,footer a:focus-visible{text-decoration:underline;text-underline-offset:3px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
.legal{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  font-size:14px;letter-spacing:.04em;color:#94A2AF;
}
@media(max-width:760px){footer .cols{grid-template-columns:1fr;gap:32px}}

a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- logo ---------- */
.footer-logo{width:196px;height:auto;margin:0 0 18px}
.band-logo{width:150px;height:auto;margin:0 auto 30px;display:block;opacity:.92}
.page-logo{width:250px;height:auto;margin:0 auto 34px;display:block}
@media(max-width:560px){
  .footer-logo{width:168px}
  .page-logo{width:200px}
  .band-logo{width:126px}
}