/* ============================================================================
   THE THREAD WITHIN — styles.css
   ----------------------------------------------------------------------------
   Extracted verbatim from the original single-file mockup (index.html <style>).
   NOTHING has been redesigned. Same tokens, same rules, same order.

   Structure of this file (top → bottom):
     1. Design tokens (:root custom properties — palette, fonts, layout)
     2. Base / reset / typography
     3. Shared utilities (.wrap, .label, .btn, .rule)
     4. Top nav
     5. Landing view (hero, what, mission, pillars, how, pricing, print, peek, footer)
     6. Login view
     7. Dashboard view (library cards, print/gift panels, account)
     8. Issue reader view (cover, contents, features, media, soundtrack, quiet word)
     9. Contributor "slot" annotations
    10. Toast + gift modal
   ============================================================================ */

: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;
}
*{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%}
.view{display:none}
.view.active{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- shared ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.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}
.rule{height:1px;background:var(--line);border:0;margin:0}
.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.sm{padding:10px 18px;font-size:11px}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(245,240,232,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:.01em;cursor:pointer;display:flex;align-items:center;gap:11px}
.brand .mk{width:18px;height:18px;flex:0 0 18px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--ink);cursor:pointer}
.nav-links a:hover{color:var(--terracotta)}
@media(max-width:760px){.nav-links a.hide-m{display:none}.brand{font-size:19px}}

/* ============ LANDING ============ */
.hero{position:relative;padding:90px 0 70px;overflow:hidden}
.hero-thread{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:120px;pointer-events:none;opacity:.9}
.hero-in{position:relative;text-align:center;max-width:760px;margin:0 auto;padding:0 28px;z-index:2}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--terracotta);margin-bottom:26px}
.hero h1{font-size:clamp(46px,8vw,86px);font-weight:400;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.hero-cover{display:block;max-width:280px;width:60%;margin:32px auto 0;box-shadow:0 18px 46px rgba(0,0,0,.14)}
.hero .sub{font-family:var(--display);font-size:clamp(20px,3vw,27px);font-style:italic;color:var(--ink);margin:24px auto 6px;max-width:560px;line-height:1.4}
.hero .lede{font-size:17px;color:var(--muted);max-width:520px;margin:22px auto 36px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-meta{margin-top:40px;font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.hero-meta span{display:inline-flex;gap:8px;align-items:center}
.dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

.section{padding:80px 0}
.section.tight{padding:58px 0}
.center{text-align:center}
.kicker{display:block;margin-bottom:18px}
.h2{font-size:clamp(32px,5vw,50px);font-weight:400}
.h2 em{font-style:italic;color:var(--terracotta)}
.lead-p{font-size:19px;color:var(--ink);max-width:640px;margin:22px auto 0;line-height:1.6}

.mission{background:var(--charcoal);color:var(--ivory)}
.mission .label{color:var(--gold)}
.mission .h2{color:var(--ivory)}
.mission .h2 em{color:var(--gold-bright)}
.mission p{color:rgba(245,240,232,.8)}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mission-quote{font-family:var(--display);font-style:italic;font-size:clamp(24px,3.4vw,34px);line-height:1.32;color:var(--ivory)}
.mission-quote .gold{color:var(--gold-bright)}
@media(max-width:780px){.mission-grid{grid-template-columns:1fr;gap:34px}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:50px;border-top:1px solid var(--line)}
.pillar{display:flex;align-items:baseline;gap:20px;padding:26px 22px;border-bottom:1px solid var(--line)}
.pillar:nth-child(odd){border-right:1px solid var(--line)}
.pillar .num{font-family:var(--display);font-size:30px;color:var(--gold);font-weight:500;min-width:42px}
.pillar .pname{font-family:var(--display);font-size:25px;font-weight:500;flex:1}
.pillar .tension{font-family:var(--body);font-style:italic;font-size:14px;color:var(--muted)}
/* a lone final thread (odd count, e.g. the seventh) spans the full row so the grid stays balanced */
.pillars .pillar:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
@media(max-width:680px){.pillars{grid-template-columns:1fr}.pillar:nth-child(odd){border-right:0}.pillar{flex-wrap:wrap}}

/* how it works */
.how{background:var(--ivory-deep)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:50px}
.how-card{background:var(--ivory);padding:32px 26px;border:1px solid var(--line)}
.how-card .ic{font-size:22px;color:var(--terracotta);margin-bottom:14px}
.how-card h3{font-size:24px;margin-bottom:10px}
.how-card p{font-size:15px;color:var(--muted);margin:0}
@media(max-width:780px){.how-grid{grid-template-columns:1fr;gap:18px}}

/* immersive legend */
.legend{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.leg{text-align:center;max-width:130px}
.leg .gi{font-size:24px;color:var(--terracotta)}
.leg .ln{font-family:var(--display);font-size:21px;margin:6px 0 3px}
.leg .ld{font-size:12px;color:var(--muted);line-height:1.4}

/* pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:50px;align-items:stretch}
.plan{border:1px solid var(--line);background:var(--ivory);padding:42px 38px;display:flex;flex-direction:column}
.plan.feature{border:1.5px solid var(--charcoal);background:#fff;position:relative}
.plan .flag{position:absolute;top:-12px;left:38px;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}
.plan .pt{font-family:var(--display);font-size:28px;margin-bottom:6px}
.plan .pd{font-size:14px;color:var(--muted);margin-bottom:24px;min-height:42px}
.plan .price{font-family:var(--display);font-size:54px;font-weight:500;line-height:1}
.plan .price small{font-family:var(--body);font-size:15px;color:var(--muted);font-weight:400}
.plan .alt{font-size:13px;color:var(--muted);margin:8px 0 24px}
.plan ul{list-style:none;padding:0;margin:0 0 30px;flex:1}
.plan li{font-size:15px;padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
.plan li:before{content:"—";position:absolute;left:0;color:var(--gold);font-weight:600}
.plan li:last-child{border-bottom:0}
@media(max-width:780px){.pricing{grid-template-columns:1fr}}

/* print showcase */
.print{background:var(--charcoal);color:var(--ivory)}
.print .label{color:var(--gold)}
.print-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.print h2{color:var(--ivory);font-size:clamp(30px,4.4vw,46px)}
.print h2 em{font-style:italic;color:var(--gold-bright)}
.print p{color:rgba(245,240,232,.78)}
.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:780px){.print-grid{grid-template-columns:1fr;gap:30px}.keepsake{max-width:300px;margin:0 auto}}

/* sample peek */
.peek{text-align:center}
.peek-frame{margin:46px auto 0;max-width:340px;border:10px solid var(--charcoal);border-radius:34px;overflow:hidden;box-shadow:0 30px 60px rgba(43,38,34,.22);background:var(--ivory)}
.peek-shot{height:480px;overflow:hidden;position:relative;cursor:pointer}
.peek-shot .pcover{height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:40px 26px;background:linear-gradient(170deg,#efe7d8,#e6dcc9)}
/* real issue cover art dropped into the phone 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:42px;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:16px}

footer{background:var(--charcoal);color:rgba(245,240,232,.6);padding:54px 0 40px;font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot-in .brand{color:var(--ivory)}
footer .fmeta{letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ============ LOGIN ============ */
.auth{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:60px 24px;background:var(--ivory-deep)}
.auth-card{background:var(--ivory);border:1px solid var(--line);max-width:420px;width:100%;padding:48px 44px;text-align:center;position:relative;overflow:hidden}
.auth-card .athread{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.auth-card h2{font-size:34px;margin-bottom:6px}
.auth-card .as{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:30px;font-family:var(--display);font-size:17px}
.field{text-align:left;margin-bottom:18px}
.field label{display:block;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input{width:100%;padding:13px 15px;border:1px solid var(--line);background:#fff;font-family:var(--body);font-size:15px;color:var(--charcoal)}
.field input:focus{outline:none;border-color:var(--gold)}
.auth .btn{width:100%;justify-content:center;margin-top:6px}
.auth .demo{margin-top:22px;font-size:12px;color:var(--muted)}
.auth .demo a{color:var(--terracotta);cursor:pointer;text-decoration:underline}
.auth .toggle{margin-top:18px;font-size:13px;color:var(--muted)}
.auth .toggle a{color:var(--terracotta);cursor:pointer}

/* ============ DASHBOARD ============ */
.dash{background:var(--ivory-deep);min-height:calc(100vh - 130px);padding:48px 0 80px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.dash-head h1{font-size:clamp(34px,5vw,52px);font-weight:400}
.dash-head h1 em{font-style:italic;color:var(--terracotta)}
.dash-head .greet{font-size:14px;color:var(--muted);letter-spacing:.04em}
.dash-sub{font-size:15px;color:var(--muted);max-width:560px;margin-top:6px}
.dash-section-h{display:flex;align-items:center;gap:16px;margin:46px 0 22px}
.dash-section-h h2{font-size:24px;font-weight:500}
.dash-section-h .rule{flex:1}

.issues{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.issue-card{background:var(--ivory);border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:.25s;display:flex;flex-direction:column}
.issue-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(43,38,34,.13)}
.issue-card.locked{cursor:default;opacity:.62}
.issue-card.locked:hover{transform:none;box-shadow:none}
.ic-cover{aspect-ratio:1/1.18;padding:22px 20px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.ic-cover .icm{font-family:var(--body);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.ic-cover .name{font-family:var(--display);font-size:30px;font-weight:500;line-height:1;color:var(--charcoal)}
.ic-cover .word{font-family:var(--display);font-style:italic;font-size:18px;margin-top:4px}
.ic-foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag-live{color:var(--terracotta);font-weight:600}
.tag-lock{color:var(--muted)}
.tag-open{color:var(--sage);font-weight:600}
.ic-cover .badge{position:absolute;top:14px;right:14px;font-family:var(--body);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;background:var(--terracotta);color:var(--ivory)}
@media(max-width:900px){.issues{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.issues{grid-template-columns:repeat(2,1fr)}.ic-cover .name{font-size:24px}}

/* print + gift back-end panels */
.panels{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:14px}
.panel{border:1px solid var(--line);padding:34px 32px;background:var(--ivory)}
.panel.dark{background:var(--charcoal);color:var(--ivory)}
.panel.dark .label{color:var(--gold)}
.panel.dark p{color:rgba(245,240,232,.75)}
.panel h3{font-size:27px;margin:10px 0 8px}
.panel p{font-size:14px;color:var(--muted);margin-bottom:20px}
.panel .pprice{font-family:var(--display);font-size:34px}
.panel .pprice small{font-family:var(--body);font-size:13px;color:var(--muted)}
.panel.dark .pprice small{color:rgba(245,240,232,.6)}
.panel-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media(max-width:780px){.panels{grid-template-columns:1fr}}

.acct{margin-top:40px;border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.acct a{color:var(--terracotta);cursor:pointer}

/* ============ ISSUE READER ============ */
#issue-view{background:var(--ivory)}
.reader-bar{position:sticky;top:0;z-index:70;background:rgba(245,240,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.reader-bar-in{max-width:720px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.reader-back{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--ink);display:inline-flex;gap:7px;align-items:center;background:none;border:0}
.reader-back:hover{color:var(--terracotta)}
.reader-title{font-family:var(--display);font-size:18px}
.slot-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;border:1px solid var(--line);padding:7px 12px;background:none}
.slot-toggle.on{background:var(--sage);color:var(--ivory);border-color:var(--sage)}
.scroll-prog{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:80}

/* live thread down the spine of the issue */
.issue-thread{position:fixed;top:0;left:50%;transform:translateX(-50%);width:40px;height:100vh;pointer-events:none;z-index:5;opacity:.5;display:none}
@media(min-width:900px){.issue-thread{display:block}}

.reader{max-width:680px;margin:0 auto;padding:0 26px}
.issue-cover{text-align:center;padding:80px 0 64px;position:relative}
.issue-cover .ie{font-family:var(--body);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--terracotta);margin-bottom:22px}
.issue-cover h1{font-size:clamp(44px,9vw,72px);font-weight:400}
.issue-cover h1 em{font-style:italic;color:var(--terracotta)}
.issue-cover .iword{font-family:var(--display);font-style:italic;font-size:24px;color:var(--ink);margin-top:18px}
.issue-cover .imeta{margin-top:30px;font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.issue-section{padding:46px 0;border-top:1px solid var(--line)}
.issue-section .seclabel{margin-bottom:18px;display:block}
.issue-section h2{font-size:clamp(30px,6vw,44px);font-weight:400;margin-bottom:10px}
.issue-section h2 em{font-style:italic;color:var(--terracotta)}
.issue-section .dek{font-family:var(--display);font-style:italic;font-size:21px;color:var(--ink);line-height:1.4;margin-bottom:26px}
.issue-section p{font-size:18px;line-height:1.78}
.issue-section .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}
.pullquote{font-family:var(--display);font-style:italic;font-size:28px;line-height:1.34;color:var(--charcoal);border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:30px 0}

/* contents */
.contents{padding:40px 0;border-top:1px solid var(--line)}
.contents ol{list-style:none;counter-reset:c;padding:0;margin:18px 0 0}
.contents li{counter-increment:c;display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}
.contents li:hover .ct{color:var(--terracotta)}
.contents li:before{content:counter(c,decimal-leading-zero);font-family:var(--display);font-size:18px;color:var(--gold);min-width:30px}
.contents .ct{font-family:var(--display);font-size:22px;flex:1}
.contents .cp{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* photo plate */
.plate{aspect-ratio:3/2;background:linear-gradient(145deg,#e3d6c1,#cbb89c 60%,#b09877);margin:30px 0;display:flex;align-items:flex-end;padding:18px 20px;position:relative}
.plate .pcap{font-family:var(--body);font-size:11px;letter-spacing:.06em;color:rgba(43,38,34,.62)}
.plate.tall{aspect-ratio:4/5}
/* placeholder/real photography in a plate — toned to the brand (grayscale + warm duotone overlay) */
.plate.has-photo{position:relative;overflow:hidden}
.plate .plate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03) brightness(1.02);z-index:0}
.plate.has-photo:after{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;background:linear-gradient(155deg,rgba(181,119,94,.34),rgba(138,154,130,.18) 45%,rgba(43,38,34,.42))}
.plate.has-photo .pcap{position:relative;z-index:2;color:rgba(245,240,232,.92)}

/* immersive media controls inside issue */
.media{margin:26px 0;display:flex;flex-direction:column;gap:10px}
.audio-player{display:flex;align-items:center;gap:14px;background:var(--charcoal);color:var(--ivory);padding:14px 18px}
.audio-player .pp{width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,240,232,.4);background:none;color:var(--ivory);cursor:pointer;flex:0 0 38px;font-size:14px;display:flex;align-items:center;justify-content:center}
.audio-player .pp:hover{background:var(--gold);color:var(--charcoal);border-color:var(--gold)}
.audio-player .ainfo{flex:1;min-width:0}
.audio-player .at{font-family:var(--display);font-size:18px;line-height:1.1}
.audio-player .atrack{height:3px;background:rgba(245,240,232,.22);margin-top:8px;position:relative;border-radius:2px}
.audio-player .atrack i{position:absolute;left:0;top:0;height:100%;width:6%;background:var(--gold);border-radius:2px;transition:width .3s}
.audio-player .adur{font-family:var(--body);font-size:11px;letter-spacing:.08em;color:rgba(245,240,232,.65);white-space:nowrap}

.media-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--ivory);padding:11px 16px;font-family:var(--body);font-size:13px;text-decoration:none;color:var(--ink);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--terracotta);color:var(--terracotta)}
.chip .ci{font-size:15px;color:var(--terracotta)}
.chip:hover .ci{color:var(--terracotta)}
.chip.song:hover{border-color:var(--sage);color:var(--sage)}
.chip.song:hover .ci{color:var(--sage)}

.dream{background:var(--ivory-deep);border:1px solid var(--line);padding:24px 26px;margin:26px 0}
.dream .dl{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;display:flex;gap:8px;align-items:center}
.dream .dq{font-family:var(--display);font-style:italic;font-size:23px;line-height:1.36}

/* soundtrack list */
.tracklist{margin-top:20px}
.track{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none;color:inherit}
.track:hover .tn{color:var(--sage)}
.track .tnum{font-family:var(--display);font-size:16px;color:var(--gold);min-width:26px}
.track .tn{font-family:var(--display);font-size:20px;flex:1}
.track .ta{font-family:var(--body);font-size:13px;color:var(--muted)}
.track .tplay{font-size:13px;color:var(--sage)}

.quiet{text-align:center;padding:64px 0;border-top:1px solid var(--line)}
.quiet .verse{font-family:var(--display);font-style:italic;font-size:clamp(24px,4vw,32px);line-height:1.4;max-width:540px;margin:18px auto 0}
.quiet .ref{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:20px}

.issue-end{text-align:center;padding:50px 0 80px}
.issue-end .ee{font-family:var(--display);font-size:30px;font-style:italic;color:var(--terracotta);margin-bottom:24px}

/* contributor slot tags */
.slot-tag{display:none}
body.slots .slot-tag{display:inline-block;font-family:var(--body);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--sage);color:var(--ivory);padding:2px 7px;margin:0 0 6px;border-radius:2px}
body.slots .slotted{outline:1.5px dashed var(--sage);outline-offset:5px;border-radius:2px}
body.slots .slot-note{display:block;font-family:var(--body);font-size:12px;font-style:italic;color:var(--sage);margin-top:6px}
.slot-note{display:none}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--charcoal);color:var(--ivory);padding:15px 26px;font-family:var(--body);font-size:14px;letter-spacing:.02em;z-index:120;transition:.4s;box-shadow:0 16px 34px rgba(0,0,0,.3);max-width:88vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* gift modal */
.modal-bg{position:fixed;inset:0;background:rgba(43,38,34,.55);z-index:110;display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.open{display:flex}
.modal{background:var(--ivory);max-width:460px;width:100%;padding:42px 40px;position:relative;border:1px solid var(--line)}
.modal h3{font-size:30px;margin-bottom:6px}
.modal .ms{font-size:14px;color:var(--muted);margin-bottom:24px}
.modal .x{position:absolute;top:16px;right:18px;cursor:pointer;font-size:22px;color:var(--muted);background:none;border:0;line-height:1}

/* ============================================================================
   BLUEPRINT ADDITIONS  (additive only — nothing above is altered)
   ----------------------------------------------------------------------------
   The Conversation Blueprint's reading rhythm. Every Thread closes with
   Reflection · Prayer · Invitation · Quiet Word · Continue the Conversation,
   and every issue ends with "Carry This With You". These reuse the existing
   tokens and editorial measure so the design language is preserved exactly.
   ============================================================================ */

/* a centered scripture/verse block inside a section (the standalone Quiet Word) */
.iverse{text-align:center;padding:16px 0 6px}
.iverse-t{font-family:var(--display);font-style:italic;font-size:clamp(23px,4vw,30px);line-height:1.42;max-width:560px;margin:0 auto;color:var(--charcoal)}
.iverse-r{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* a Thread's closing rhythm */
.thread-close{margin:34px 0 6px;border-top:1px solid var(--line)}
.thread-close .tc-item{padding:22px 0;border-bottom:1px solid var(--line)}
.thread-close .tcl{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;gap:9px;align-items:center}
.thread-close .tcq{font-family:var(--display);font-style:italic;font-size:23px;line-height:1.4;color:var(--charcoal)}
.thread-close .tcp{font-size:17px;line-height:1.7;color:var(--ink);margin:0}
.thread-close .tc-scripture .tcv{font-family:var(--display);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink)}
.thread-close .tc-scripture .tcr{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.thread-close .tc-next{padding:20px 0 0;text-align:right}
.thread-close .tc-next a{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);text-decoration:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.thread-close .tc-next a .nt{font-family:var(--display);font-style:italic;font-size:19px;text-transform:none;letter-spacing:0;color:var(--charcoal)}
.thread-close .tc-next a:hover .nt{color:var(--terracotta)}

/* Carry This With You — the closing blessing */
.carry{text-align:center;padding:66px 0 12px;border-top:1px solid var(--line)}
.carry .carry-bless{font-family:var(--display);font-style:italic;font-size:clamp(26px,4.4vw,36px);line-height:1.36;max-width:600px;margin:20px auto 8px;color:var(--charcoal)}
.carry .carry-items{max-width:540px;margin:30px auto 0}
.carry .carry-i{padding:22px 0;border-top:1px solid var(--line)}
.carry .cil{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.carry .cit{font-family:var(--display);font-size:22px;line-height:1.4;color:var(--ink)}
.carry .cit-v{font-style:italic}
.carry .cir{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ============================================================================
   TEMPLATE ADDITIONS  (additive only — nothing above is altered)
   ----------------------------------------------------------------------------
   Homepage manifesto, issue intro, the founding-voices masthead (homepage +
   every issue), and the manifesto close. Reuses the existing tokens/measure.
   ============================================================================ */

/* homepage manifesto */
.manifesto{max-width:720px;margin:8px auto 0;text-align:left}
.manifesto .lead{font-family:var(--display);font-style:italic;font-size:clamp(22px,3vw,27px);line-height:1.45;color:var(--terracotta);margin:0 0 22px}
.manifesto p{font-size:18px;line-height:1.8;color:var(--ink);margin:0 0 18px}
.manifesto .pull{font-family:var(--display);font-style:italic;font-size:22px;color:var(--charcoal);text-align:center;margin-top:26px}

/* issue intro — short orientation at the top of every issue */
.issue-intro{text-align:center;padding:44px 0;border-top:1px solid var(--line)}
.issue-intro .seclabel{margin-bottom:16px;display:block}
.issue-intro h2{font-size:clamp(28px,5vw,40px);font-weight:400}
.issue-intro h2 em{font-style:italic;color:var(--terracotta)}
.issue-intro p{font-size:17px;line-height:1.7;color:var(--ink);max-width:560px;margin:14px auto 0}

/* founding-voices masthead — homepage + every issue (shared .contrib cards) */
.masthead{text-align:center;padding:60px 0 6px;border-top:1px solid var(--line)}
.masthead h2{font-size:clamp(28px,5vw,40px);font-weight:400}
.masthead h2 em{font-style:italic;color:var(--terracotta)}
.masthead .mh-intro{font-size:15px;color:var(--muted);max-width:520px;margin:14px auto 0}
.contribs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px 22px;margin:34px auto 0}
.contrib{text-align:center}
.contrib .av{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#e3d6c1,#cbb89c);color:var(--ivory);font-family:var(--display);font-size:34px;line-height:1;overflow:hidden;border:1px solid rgba(43,38,34,.10)}
.contrib .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03) brightness(1.02)}
.contrib.open .av{background:var(--ivory-deep);color:var(--gold);border:1px dashed var(--gold)}
.contrib .cn{font-family:var(--display);font-size:22px;line-height:1.05}
.contrib .cr{font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:7px 0 9px}
.contrib .cb{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:230px;margin:0 auto}
.contrib .cl{font-family:var(--body);font-size:12.5px;color:var(--terracotta);margin-top:9px;display:inline-block;text-decoration:none;border-bottom:1px solid rgba(181,119,94,.35)}
.contrib .cs{font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* manifesto close — the brand benediction that ends every issue */
.manifesto-close{text-align:center;padding:60px 0 10px;border-top:1px solid var(--line)}
.manifesto-close .seclabel{display:block;margin-bottom:14px}
.manifesto-close .mc-bless{font-family:var(--display);font-style:italic;font-size:clamp(24px,4vw,32px);line-height:1.4;max-width:560px;margin:0 auto 16px;color:var(--charcoal)}
.manifesto-close .mc-body{font-size:16px;line-height:1.7;color:var(--ink);max-width:520px;margin:0 auto 18px}
.manifesto-close .mc-sig{font-family:var(--display);font-style:italic;font-size:22px;color:var(--terracotta);margin:0 auto 6px}
.manifesto-close .mc-pull{font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}