/* ============================================================================
   THE THREAD WITHIN — founding.css
   ----------------------------------------------------------------------------
   The shared editorial stylesheet for the *private* Founding experience:

       /founding              Founding Invitation   (founding/index.html)
       /founding/patrons      Founding Patron        (founding/patrons.html)
       /founding/media-kit    Media Kit              (founding/media-kit.html)

   This is a separate experience from the product mockup (root index.html /
   css/styles.css). It intentionally does NOT touch that file. To guarantee the
   two never drift, the design tokens below are a *verbatim mirror* of the
   :root block in css/styles.css.

       >>> If a token ever changes in css/styles.css, change it here too. <<<

   The page reads like the first unpublished issue of the publication: one long,
   calm editorial scroll. Everything is token-based, mobile-first, and carries a
   print stylesheet at the bottom so "Export → PDF" from the browser produces a
   clean, paginated document (the website *is* the deck / patron kit / press kit).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (mirror of css/styles.css :root — keep in sync)
   --------------------------------------------------------------------------- */
:root{
  --charcoal:#2B2622;
  --ivory:#F5F0E8;
  --ivory-deep:#EDE6D9;
  --terracotta:#B5775E;
  --sage:#8A9A82;
  --gold:#C2A878;
  --gold-bright:#D8BC8C;
  --ink:#3A332C;
  --muted:#7A6F63;
  --line:rgba(43,38,34,.14);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --maxw:1120px;     /* full editorial width */
  --readw:680px;     /* prose measure — matches the issue reader */
}

/* ---------------------------------------------------------------------------
   2. BASE / RESET / TYPOGRAPHY  (mirrors the product's base rules)
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:var(--body);font-weight:400;line-height:1.7;
  font-size:17px;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;letter-spacing:.002em}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------------------------------------------------------------------------
   3. SHARED UTILITIES
   --------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.read{max-width:var(--readw);margin:0 auto;padding:0 28px}

/* Eyebrow / kicker — the small uppercase label, a brand signature */
.label{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--terracotta)}
.label.sage{color:var(--sage)}
.label.gold{color:#a98a5f}
.label.kicker{display:block;margin-bottom:20px}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* Italic terracotta emphasis word — recurring typographic signature */
em,.em{font-style:italic;color:var(--terracotta)}
.mission em,.mission .em,.dark-block em,.dark-block .em{color:var(--gold-bright)}

/* Buttons — identical language to the product */
.btn{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--charcoal);background:var(--charcoal);color:var(--ivory);
  border-radius:0;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.btn:hover{background:transparent;color:var(--charcoal)}
.btn.ghost{background:transparent;color:var(--charcoal)}
.btn.ghost:hover{background:var(--charcoal);color:var(--ivory)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.btn.gold:hover{background:transparent;color:var(--charcoal)}
.btn.light{border-color:rgba(245,240,232,.5);background:transparent;color:var(--ivory)}
.btn.light:hover{background:var(--ivory);color:var(--charcoal);border-color:var(--ivory)}

/* ---------------------------------------------------------------------------
   4. THE THREE-LOGO SYSTEM
   ---------------------------------------------------------------------------
   Lauren's finalized marks:
     • Editorial masthead  → hero            (.masthead)
     • TW monogram         → throughout/nav  (.monogram)
     • Masthead + tagline  → footer signature(.masthead.with-tagline)

   Built here in live brand type + SVG so they are crisp at any size and print
   sharp. To swap in the exact PNG artwork, drop files into /assets/logos/ and
   replace the relevant block with the commented <img> hook in the HTML.
   --------------------------------------------------------------------------- */

/* Masthead — "The Thread" (charcoal) + "Within" (terracotta italic) + swash */
.masthead{display:inline-flex;flex-direction:column;align-items:center;line-height:.92;text-align:center}
.masthead .mh-the,
.masthead .mh-thread{font-family:var(--display);font-weight:500;color:var(--charcoal);
  font-size:clamp(46px,11vw,104px);letter-spacing:.005em;display:block}
.masthead .mh-within{font-family:var(--display);font-style:italic;font-weight:500;color:var(--terracotta);
  font-size:clamp(40px,9.4vw,90px);display:block;margin-top:.02em}
/* the terracotta swash beneath the wordmark */
.masthead .mh-swash{width:clamp(150px,30vw,300px);height:auto;margin-top:14px;color:var(--terracotta)}
.masthead .mh-tagline{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);margin-top:18px}
.masthead .mh-tagline-rule{width:34px;height:1px;background:var(--terracotta);margin:14px auto 0}
/* compact masthead (footer / inline) */
.masthead.sm .mh-the,.masthead.sm .mh-thread{font-size:clamp(30px,6vw,40px)}
.masthead.sm .mh-within{font-size:clamp(26px,5.2vw,34px)}
.masthead.sm .mh-swash{width:150px}
/* real masthead logo art (replaces the type+swash reproduction) */
.masthead-img{display:block;height:auto}
.fhero .masthead-img{width:clamp(300px,62vw,560px);margin:0 auto}
.ffoot .masthead-img{width:clamp(220px,42vw,300px);margin:0 auto}

/* TW monogram — serif T over W with the terracotta thread woven between */
.monogram{display:inline-block;width:42px;height:42px;vertical-align:middle}
.monogram.lg{width:96px;height:96px}

/* ---------------------------------------------------------------------------
   5. PRIVATE TOP BAR
   --------------------------------------------------------------------------- */
.fnav{position:sticky;top:0;z-index:60;background:rgba(245,240,232,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.fnav-in{max-width:var(--maxw);margin:0 auto;padding:13px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.fnav .mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--charcoal)}
.fnav .mark .wn{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.01em}
.fnav .privacy{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.fnav .privacy .dot{width:5px;height:5px;border-radius:50%;background:var(--terracotta)}
@media(max-width:620px){.fnav .privacy span.long{display:none}}

/* ---------------------------------------------------------------------------
   6. HERO  (the "arrival")
   --------------------------------------------------------------------------- */
.fhero{position:relative;overflow:hidden;padding:96px 0 84px;text-align:center}
.fhero-thread{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:120px;
  pointer-events:none;opacity:.9}
.fhero-in{position:relative;z-index:2;max-width:740px;margin:0 auto;padding:0 28px}
.fhero .eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:34px}
.fhero .masthead{margin:0 auto}
.fhero .invite{font-family:var(--display);font-style:italic;font-size:clamp(22px,3.4vw,30px);
  color:var(--ink);margin:40px auto 4px;line-height:1.4;max-width:560px}
.fhero .not-everyone{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-top:18px}
.fhero .believe{font-family:var(--display);font-size:clamp(22px,3.6vw,32px);line-height:1.42;
  color:var(--charcoal);max-width:600px;margin:46px auto 0}
.fhero .believe .em{font-style:italic;color:var(--terracotta)}
.scrollcue{margin-top:54px;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.scrollcue .arrow{font-size:18px;color:var(--gold);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------------------------------------------------------------------------
   7. SECTION SCAFFOLD  (editorial pacing)
   --------------------------------------------------------------------------- */
.fsection{padding:88px 0;position:relative}
.fsection.tight{padding:62px 0}
.fsection.center{text-align:center}
.fsection .sec-no{font-family:var(--display);font-size:18px;color:var(--gold);font-weight:500;
  letter-spacing:.1em;display:block;margin-bottom:14px}
.fsection h2{font-size:clamp(32px,5.4vw,54px);font-weight:400}
.fsection h2 em,.fsection h2 .em{font-style:italic;color:var(--terracotta)}
.fsection .dek{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.8vw,26px);
  color:var(--ink);line-height:1.4;margin:18px auto 0;max-width:600px}
.fsection.center .dek{margin-left:auto;margin-right:auto}
.fsection .body-lg{font-size:19px;line-height:1.74;color:var(--ink);max-width:var(--readw)}
.fsection.center .body-lg{margin-left:auto;margin-right:auto}
.fsection .body-lg.dropcap:first-letter{font-family:var(--display);font-size:74px;line-height:.78;
  float:left;margin:8px 12px 0 0;color:var(--terracotta);font-weight:500}

/* Dark editorial block — same role as the product's .mission / .print */
.dark-block{background:var(--charcoal);color:var(--ivory)}
.dark-block h2{color:var(--ivory)}
.dark-block h2 em,.dark-block h2 .em{color:var(--gold-bright)}
.dark-block p{color:rgba(245,240,232,.82)}
.dark-block .label{color:var(--gold)}
.dark-block .dek{color:rgba(245,240,232,.86)}
.tint-block{background:var(--ivory-deep)}

/* Pull quote / blessing line */
.fpull{font-family:var(--display);font-style:italic;font-size:clamp(26px,4vw,40px);line-height:1.34;
  color:var(--charcoal);max-width:780px;margin:0 auto;text-align:center}
.dark-block .fpull{color:var(--ivory)}
.dark-block .fpull .em{color:var(--gold-bright)}

/* Two-column editorial split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.lead{grid-template-columns:1.05fr .95fr}
@media(max-width:820px){.split,.split.lead{grid-template-columns:1fr;gap:34px}}

/* ---------------------------------------------------------------------------
   8. THE PROMISE  (checklist of how she should feel)
   --------------------------------------------------------------------------- */
.promise{display:grid;grid-template-columns:repeat(2,1fr);gap:0 50px;margin:40px auto 0;max-width:760px;text-align:left}
.promise li{list-style:none;display:flex;align-items:baseline;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--line);font-family:var(--display);font-size:22px}
.promise li .mk{color:var(--gold);font-size:15px;font-family:var(--body)}
@media(max-width:620px){.promise{grid-template-columns:1fr;gap:0}}

/* ---------------------------------------------------------------------------
   9. THE ANNUAL CONVERSATION  (twelve words)
   --------------------------------------------------------------------------- */
.calendar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:54px;
  background:var(--line);border:1px solid var(--line)}
.cal-cell{background:var(--ivory);padding:30px 22px;text-align:center;position:relative;min-height:150px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;transition:.3s}
.cal-cell:hover{background:#fff}
.cal-cell .mo{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.cal-cell .word{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);font-weight:500;
  color:var(--charcoal)}
.cal-cell.now{background:var(--charcoal)}
.cal-cell.now .mo{color:var(--gold)}
.cal-cell.now .word{color:var(--ivory);font-style:italic}
@media(max-width:780px){.calendar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.calendar{grid-template-columns:repeat(2,1fr)}.cal-cell{min-height:120px}}

/* ---------------------------------------------------------------------------
   10. THE READER  (who she is)
   --------------------------------------------------------------------------- */
.reader-card{background:var(--ivory-deep);border:1px solid var(--line);padding:40px 38px}
.reader-card .rl{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:18px}
.reader-traits{list-style:none;padding:0;margin:0}
.reader-traits li{padding:13px 0 13px 26px;position:relative;border-bottom:1px solid var(--line);
  font-size:16px;color:var(--ink)}
.reader-traits li:last-child{border-bottom:0}
.reader-traits li:before{content:"—";position:absolute;left:0;color:var(--gold);font-weight:600}

/* ---------------------------------------------------------------------------
   11. THE CONVERSATION  (anatomy / rhythm)
   --------------------------------------------------------------------------- */
.anatomy{margin-top:50px;border-top:1px solid var(--line)}
.anat-row{display:grid;grid-template-columns:54px 1fr;gap:24px;padding:30px 0;
  border-bottom:1px solid var(--line);align-items:start}
.anat-row .an{font-family:var(--display);font-size:26px;color:var(--gold);font-weight:500;line-height:1}
.anat-row h3{font-family:var(--display);font-size:27px;font-weight:500;margin-bottom:6px}
.anat-row p{font-size:15.5px;color:var(--muted);margin:0;max-width:560px}
@media(max-width:560px){.anat-row{grid-template-columns:1fr;gap:8px}}

/* The Thread's closing rhythm (Reflection / Prayer / Invitation) */
.formation{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.form-card{background:var(--ivory);border:1px solid var(--line);padding:30px 26px}
.dark-block .form-card{background:rgba(245,240,232,.05);border-color:rgba(245,240,232,.16)}
.form-card .fi{font-size:20px;color:var(--terracotta);margin-bottom:12px}
.form-card h4{font-family:var(--display);font-size:23px;font-weight:500;margin-bottom:8px}
.form-card p{font-size:14.5px;color:var(--muted);margin:0}
.dark-block .form-card p{color:rgba(245,240,232,.72)}
.dark-block .form-card h4{color:var(--ivory)}
@media(max-width:780px){.formation{grid-template-columns:1fr;gap:16px}}

/* ---------------------------------------------------------------------------
   12. THE DIGITAL EXPERIENCE  (real, interactive — not a screenshot)
   --------------------------------------------------------------------------- */
.experience{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.exp-card{background:var(--ivory);border:1px solid var(--line);padding:32px 26px}
.exp-card .ic{font-size:22px;color:var(--terracotta);margin-bottom:14px}
.exp-card h3{font-size:24px;margin-bottom:10px}
.exp-card p{font-size:15px;color:var(--muted);margin:0}
@media(max-width:820px){.experience{grid-template-columns:1fr;gap:16px}}

/* the small "phone" peek that links into a live issue */
.live-peek{display:grid;grid-template-columns:300px 1fr;gap:54px;align-items:center;margin-top:56px}
.peek-frame{border:10px solid var(--charcoal);border-radius:34px;overflow:hidden;
  box-shadow:0 30px 60px rgba(43,38,34,.22);background:var(--ivory);cursor:pointer;transition:.3s}
.peek-frame:hover{transform:translateY(-5px);box-shadow:0 38px 70px rgba(43,38,34,.28)}
.peek-shot{height:470px;display:flex;flex-direction:column;justify-content:center;text-align:center;
  padding:40px 26px;background:linear-gradient(170deg,#efe7d8,#e6dcc9);position:relative}
/* real issue cover art dropped into the frame (overlays the gradient fallback) */
.peek-shot .peek-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:2}
.peek-shot .peek-tap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:13px 14px;text-align:center;
  font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(transparent,rgba(43,38,34,.62));pointer-events:none}
.peek-shot .pe{font-family:var(--body);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:16px}
.peek-shot .pt{font-family:var(--display);font-size:40px;font-weight:400;line-height:1.05}
.peek-shot .pt em{font-style:italic;color:var(--terracotta)}
.peek-shot .pd{font-size:13px;color:var(--muted);font-style:italic;margin-top:18px}
.feature-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
.fleg{max-width:130px}
.fleg .gi{font-size:22px;color:var(--terracotta)}
.fleg .ln{font-family:var(--display);font-size:20px;margin:6px 0 3px}
.fleg .ld{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:820px){.live-peek{grid-template-columns:1fr;gap:30px;justify-items:center}
  .live-peek .peek-copy{text-align:center}}

/* ---------------------------------------------------------------------------
   13. QUARTERLY PRINT  (keepsake mockup — mirrors the product's .keepsake)
   --------------------------------------------------------------------------- */
.keepsake{aspect-ratio:5/6.5;background:linear-gradient(150deg,#c8a87f,#9c7e5d 55%,#7d6249);
  position:relative;box-shadow:0 30px 60px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;justify-content:space-between;padding:34px 30px}
.keepsake .km{font-family:var(--body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(43,38,34,.65)}
.keepsake .kt{font-family:var(--display);font-size:40px;font-weight:500;color:#2B2622;line-height:1.04}
.keepsake .kt em{font-style:italic;display:block;font-size:25px;color:#5c4732}
.keepsake .ksig{height:48px}
/* real cover art overlaying the keepsake mockup (falls back to the gradient if absent) */
.keepsake .keepsake-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:2}
@media(max-width:820px){.keepsake{max-width:300px;margin:0 auto}}

/* ---------------------------------------------------------------------------
   14. THE INVITATION CARDS  (Founding Voices / Founding Patrons)
   --------------------------------------------------------------------------- */
.offer{border:1px solid var(--line);background:var(--ivory);padding:46px 42px;position:relative}
.offer.feature{border:1.5px solid var(--charcoal);background:#fff}
.offer .flag{position:absolute;top:-12px;left:42px;background:var(--terracotta);color:var(--ivory);
  font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px}
.offer .ot{font-family:var(--display);font-size:30px;margin-bottom:6px}
.offer .od{font-size:15px;color:var(--muted);font-style:italic;font-family:var(--display);
  font-size:18px;margin-bottom:24px}
.offer ul{list-style:none;padding:0;margin:0 0 28px}
.offer li{font-size:15px;padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--line)}
.offer li:before{content:"—";position:absolute;left:0;color:var(--gold);font-weight:600}
.offer li:last-child{border-bottom:0}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:50px;align-items:stretch}
@media(max-width:820px){.offer-grid{grid-template-columns:1fr}}

/* tiers (patrons) */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.tier{border:1px solid var(--line);background:var(--ivory);padding:36px 30px;display:flex;flex-direction:column}
.tier.feature{border:1.5px solid var(--gold);background:#fff}
.tier .tn{font-family:var(--display);font-size:26px;margin-bottom:4px}
.tier .tp{font-family:var(--display);font-size:42px;font-weight:500;line-height:1;margin:6px 0 4px}
.tier .tp small{font-family:var(--body);font-size:13px;color:var(--muted)}
.tier .tx{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:20px}
.tier ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.tier li{font-size:14px;padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--line)}
.tier li:before{content:"—";position:absolute;left:0;color:var(--gold)}
.tier li:last-child{border-bottom:0}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   15. MEDIA KIT — fast facts + asset blocks
   --------------------------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:50px;
  background:var(--line);border:1px solid var(--line)}
.fact{background:var(--ivory);padding:34px 24px;text-align:center}
.fact .fn{font-family:var(--display);font-size:clamp(34px,5vw,52px);font-weight:500;color:var(--terracotta);
  line-height:1}
.fact .fl{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
@media(max-width:780px){.facts{grid-template-columns:repeat(2,1fr)}}

.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.asset{border:1px solid var(--line);background:var(--ivory);padding:30px 26px;text-align:center}
.asset .ap{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:var(--ivory-deep);border:1px solid var(--line)}
.asset h4{font-family:var(--display);font-size:21px;font-weight:500;margin-bottom:6px}
.asset p{font-size:13px;color:var(--muted);margin:0 0 14px}
@media(max-width:780px){.asset-grid{grid-template-columns:1fr}}

/* contact row */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.contact .ci{border-top:1px solid var(--line);padding-top:20px}
.contact .ci .cl{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact .ci .cv{font-family:var(--display);font-size:22px}
.contact .ci a{color:var(--terracotta);text-decoration:none}
@media(max-width:780px){.contact{grid-template-columns:1fr;gap:18px}}

/* ---------------------------------------------------------------------------
   16. THE CLOSE  (the invitation / blessing)
   --------------------------------------------------------------------------- */
.close{text-align:center;padding:110px 0}
.close .stir{font-family:var(--display);font-style:italic;font-size:clamp(26px,4.2vw,42px);
  line-height:1.4;max-width:720px;margin:0 auto;color:var(--ivory)}
.close .stir .em{color:var(--gold-bright)}
.close .write{font-family:var(--display);font-size:clamp(30px,5vw,48px);color:var(--ivory);
  margin-top:30px;line-height:1.2}
.close .write .em{color:var(--gold-bright);font-style:italic}
.close .cta-row{margin-top:48px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   17. FOOTER  (the script-signature masthead, "almost from Annette")
   --------------------------------------------------------------------------- */
.ffoot{background:var(--charcoal);color:rgba(245,240,232,.6);padding:72px 0 54px;text-align:center}
.ffoot .masthead .mh-the,.ffoot .masthead .mh-thread{color:var(--ivory)}
.ffoot .sign{font-family:var(--display);font-style:italic;font-size:20px;color:rgba(245,240,232,.7);
  margin-top:28px}
.ffoot .fmeta{letter-spacing:.16em;text-transform:uppercase;font-size:11px;margin-top:22px;
  color:rgba(245,240,232,.5)}
.ffoot a{color:var(--gold-bright);text-decoration:none}

/* thread divider between major movements */
.thread-div{display:block;margin:0 auto;width:1px;height:70px;
  background:linear-gradient(var(--gold),transparent)}

/* ===========================================================================
   18. PRINT  —  Export → PDF becomes the deck / patron kit / press kit
   ---------------------------------------------------------------------------
   Goal: a calm, paginated document. Backgrounds preserved, motion removed,
   each major section starts cleanly, nothing clipped.
   =========================================================================== */
@media print{
  @page{margin:14mm}
  html{scroll-behavior:auto}
  body{font-size:12pt;background:var(--ivory);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fnav,.scrollcue,.fhero-thread{display:none !important}
  .btn{display:none !important}              /* actions are meaningless on paper */
  .fhero{padding:30mm 0 18mm;page-break-after:always}
  .fsection{padding:14mm 0;page-break-inside:avoid}
  .dark-block,.tint-block{page-break-inside:avoid}
  .fsection h2,.anat-row,.cal-cell,.exp-card,.form-card,.offer,.tier,.fact,.asset{page-break-inside:avoid}
  .close{page-break-before:always}
  a[href]{text-decoration:none;color:inherit}
  .calendar,.facts{break-inside:avoid}
  /* keep animations still */
  *{animation:none !important;transition:none !important}
}