/* CaraMare.org v3 · "Scenes": the paintings are the canvas.
   Type and buttons live inside the scenery; glass, gold hairlines, palette-tinted editorial type. */
:root{
  --dusk:#21131b; --dusk-2:#2c1822; --plum:#3b2340; --violet:#6d4a86; --lav:#c9b4e0;
  --coral:#e8735a; --ember:#d4562a; --rose:#e39aa4; --blush:#f5d5cf; --apricot:#f4b183;
  --gold:#c9a24e; --gold-l:#ecd391; --gold-d:#8c6a26;
  --cream:#fff8f0; --light:#f7ede8; --light-2:#dccbd4; --ink:#2a1e26; --muted:#6c5a5e; --line:#e7d6c2;
  --foil:linear-gradient(115deg,#9c7a33 0%,#f3dfa2 22%,#c9a24e 40%,#fff1c4 52%,#b08a3e 70%,#ecd391 100%);
  --sunset:linear-gradient(90deg,#f4b183,#e8735a 30%,#e39aa4 55%,#9b6fb4 80%,#3b2340);
  --glow:linear-gradient(110deg,#ffc58f 0%,#f28b6c 45%,#e59ab4 100%);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sc:'Cormorant SC','Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif; --script:'Pinyon Script','Brush Script MT',cursive;
  --parch:#f6efe4; --parch-2:#efe3d0; --wrap:1220px; --rad:22px;
  --glass-d:rgba(24,16,32,.46); --glass-l:rgba(255,248,240,.84);
  --hair:1px solid rgba(255,226,180,.28);
  --shadow:0 30px 60px -30px rgba(10,5,15,.7);
  --s:.5; --fgo:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dusk)}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.75;color:var(--light);background:transparent;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:#ffd2ad;text-decoration-color:rgba(236,211,145,.6);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;color:var(--cream);margin:0 0 .45em;letter-spacing:.005em}
h1{font-size:clamp(3rem,8vw,7.4rem)} h2{font-size:clamp(2rem,4vw,3.2rem);text-shadow:0 2px 18px rgba(10,5,15,.5)} h3{font-size:1.6rem;font-weight:600}
h2 em,h1 em{font-style:italic}
p{margin:0 0 1em}
.lead{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.45}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.section{padding:clamp(2.5rem,6vw,5rem) 0}
.center{text-align:center}
.muted{color:var(--muted)} .muted-light{color:var(--light-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--dusk);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
.script{font-family:var(--script);font-size:2rem;line-height:1.1;color:var(--rose);margin:0 0 .15em;font-weight:400}
.sc{font-family:var(--sc);letter-spacing:.14em}
.eyebrow,.chapter-no,.pl-no{font-family:var(--sc);font-variant:small-caps;text-transform:lowercase;letter-spacing:.26em;font-size:1.05rem;font-weight:600;color:var(--gold-l);margin:0 0 .5em;text-shadow:0 1px 10px rgba(10,5,15,.6)}
.chapter-no a{color:inherit}
.sep{color:var(--coral);font-size:.7em;vertical-align:.15em;margin:0 .35em}
.meta{font-size:.85rem;color:var(--light-2);margin:0 0 .4em;letter-spacing:.02em}
.badge{display:inline-block;font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(245,213,207,.92);color:#7d2f36;border:1px solid rgba(217,154,154,.9);padding:.15em .7em;border-radius:99px;vertical-align:middle;font-weight:500;text-shadow:none}
.badge.gold{background:#f8ecc9;color:#6d521b;border-color:var(--gold)}
.empty{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--light-2)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.tinted{background:linear-gradient(100deg,var(--t1,#ffd29a),var(--t2,#f59a8a));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 18px rgba(15,8,20,.55))}
.tinted a{color:inherit;-webkit-text-fill-color:transparent;text-decoration:none}
.display{font-size:clamp(3rem,7.4vw,6.8rem);line-height:.92;letter-spacing:-.01em;margin-bottom:.3em}
.ornament{display:flex;justify-content:center;color:var(--gold-l);margin:1rem auto 2rem;max-width:260px}
.ornament svg{width:100%;height:24px}

/* Buttons: gradient glow + glass */
.btn{display:inline-flex;align-items:center;gap:.5em;font:500 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:1.1em 1.8em;border-radius:999px;border:1px solid transparent;background:var(--dusk);color:var(--cream);text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .3s,background .3s,color .3s,filter .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(242,139,108,.6);color:#fff}
.btn.glow,.btn.gold{background:var(--glow);color:#2a1424;box-shadow:0 8px 30px -10px rgba(242,139,108,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.glow:hover,.btn.gold:hover{filter:brightness(1.07) saturate(1.1);color:#2a1424;box-shadow:0 14px 40px -10px rgba(242,139,108,1),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.ghost,.btn.glass-btn{background:rgba(255,248,240,.1);border:1px solid rgba(255,226,180,.55);color:var(--cream);backdrop-filter:blur(10px)}
.btn.ghost:hover,.btn.glass-btn:hover{background:rgba(255,248,240,.2)}
.btn.ghost-dark{background:transparent;color:var(--dusk);border-color:rgba(59,35,64,.45)}
.btn.ghost-dark:hover{background:rgba(59,35,64,.08);color:var(--dusk);box-shadow:none}
.danger-btn{background:#fff;border-color:#a8412f;color:#a8412f}.danger-btn:hover{background:#a8412f;color:#fff}
.link-arrow{font-family:var(--sc);font-size:1.15rem;letter-spacing:.16em;text-decoration:none;color:var(--gold-l);border-bottom:1px solid rgba(236,211,145,.5);padding-bottom:2px}
.link-arrow::after{content:" ⟶";color:var(--apricot)}
.link-arrow:hover{color:#fff}
.linkbtn{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}

/* Floating glass navigation */
.topnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;width:min(1200px,calc(100% - 24px));border-radius:999px;background:rgba(22,15,30,.18);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:var(--hair);transition:background .4s,box-shadow .4s}
.topnav.scrolled{background:rgba(22,15,30,.66);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 .6rem 0 1.1rem}
.brand{text-decoration:none;color:var(--cream);display:inline-flex;align-items:center;gap:.25em;margin:0}
.brand-mono{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid rgba(236,211,145,.7);border-radius:50%;font-family:var(--sc);font-size:.85rem;letter-spacing:.06em;color:var(--gold-l);margin-right:.4em}
.brand-script{font-family:var(--script);font-size:1.85rem;color:var(--rose);line-height:1}
.brand-serif{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:.06em;color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;padding:12px;cursor:pointer}
.burger span{width:24px;height:1.5px;background:var(--gold-l)}
.nav-toggle:focus-visible+.burger{outline:2px solid var(--gold)}
.sub>summary::-webkit-details-marker{display:none}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:0;align-items:center}
.nav-links a,.sub>summary{display:block;padding:.45rem .8rem;text-decoration:none;color:#f3e7ec;font-family:var(--sc);font-size:1.06rem;letter-spacing:.12em;cursor:pointer;list-style:none;border-radius:999px;transition:background .2s,color .2s}
.nav-links a:hover,.sub>summary:hover{background:rgba(255,248,240,.12);color:#fff}
.nav-links a[aria-current]{background:rgba(255,197,143,.2);color:#ffe0c4}
.sub>summary::after{content:" ▾";font-size:.75em;color:var(--apricot)}
.has-sub{position:relative}
.sub ul{list-style:none;margin:0;padding:.5rem;position:absolute;right:0;top:130%;background:rgba(22,15,30,.82);backdrop-filter:blur(16px);border:var(--hair);border-radius:18px;box-shadow:var(--shadow);min-width:190px}
@media (max-width:1000px){
  .burger{display:flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;background:rgba(22,15,30,.9);backdrop-filter:blur(18px);border:var(--hair);border-radius:22px;padding:.8rem;box-shadow:var(--shadow)}
  .nav-toggle:checked~.nav-links{display:flex}
  .sub ul{position:static;box-shadow:none;border:0;padding-left:1rem;background:none}
}

/* Page canvas: fixed painting + scrim; masked foreground copy in front of the hero title */
.canvas,.canvas-fg{position:fixed;inset:0;pointer-events:none;will-change:transform}
.canvas{z-index:-1;background:var(--dusk)}
.canvas-fg{z-index:2;opacity:var(--fgo);
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--fg) * 100% - 3%),#000 calc(var(--fg) * 100% + 6%));
  mask-image:linear-gradient(to bottom,transparent calc(var(--fg) * 100% - 3%),#000 calc(var(--fg) * 100% + 6%))}
.canvas img,.canvas-fg img{width:100%;height:100%;object-fit:cover;animation:kenburns 46s ease-in-out infinite alternate;transform-origin:55% 60%}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.11) translate(-1%,-.6%)}}
.canvas-scrim{position:absolute;inset:0;background:var(--dusk);opacity:var(--s)}
.canvas::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 22% 48%,rgba(32,15,22,.5),transparent 70%),linear-gradient(180deg,rgba(32,15,22,.45),transparent 22%,transparent 70%,rgba(32,15,22,.55))}

/* Everything after the hero floats above the foreground layer */
main>:not(.hero):not(.banner):not(.canvas):not(.canvas-fg){position:relative;z-index:3}
.footer{position:relative;z-index:3}

/* Hero (home) and chapter banners: type sits in the sky, sinking slightly behind the foreground */
.hero,.banner{color:#fff}
.hero-text,.banner-text{min-height:calc(var(--fg) * 100vh + 4vh);display:flex;flex-direction:column;justify-content:flex-end;padding-top:110px}
.hero h1,.banner h1{position:relative;z-index:1;margin:0;will-change:transform}
.hero .chapter-no,.hero .script,.banner .chapter-no,.banner .script{position:relative;z-index:3}
.hero-title{font-size:clamp(5rem,15vw,13rem);line-height:.82;font-weight:500;letter-spacing:-.01em}
.hero .script,.banner .script{color:var(--blush);font-size:clamp(2.2rem,4.4vw,3.6rem);text-shadow:0 2px 16px rgba(10,5,15,.7)}
.banner h1{font-size:clamp(3.2rem,9vw,8rem);line-height:.9;max-width:14ch}
.banner-sm h1{font-size:clamp(2.6rem,6.2vw,5.6rem);max-width:18ch}
.hero-sub,.banner-sub{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem;padding-top:1.6rem;padding-bottom:clamp(2rem,6vh,4rem)}
.hero-sub{min-height:calc(100vh - var(--fg) * 100vh - 4vh)}
.hero-sub>:first-child,.banner-sub>.tagline{flex:1 1 30rem}
.tagline{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.8rem);font-style:italic;max-width:36rem;color:#fff6ee;text-shadow:0 2px 16px rgba(10,5,15,.85),0 0 40px rgba(10,5,15,.5);margin:0}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin:1.4rem 0 0;width:100%}
.caption{margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.1rem;padding-right:1rem;border-right:1px solid rgba(236,211,145,.7);color:#f2e4dc;text-shadow:0 1px 10px rgba(10,5,15,.9);font-size:.78rem;line-height:1.35}
.caption .pl-no{font-size:.85rem;margin:0}
.pl-title{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#fff}
.pl-med{color:#e3d2da;font-size:.72rem;letter-spacing:.04em}
.scroll-cue{position:relative;z-index:3;display:block;margin:-1rem auto 2rem;width:26px;height:42px;border:1px solid var(--gold-l);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--gold-l);border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.banner-xs .banner-text{min-height:0;padding-top:130px}
.banner-xs h1{font-size:clamp(2.4rem,5vw,4rem)}
.banner-xs{padding-bottom:1rem}
.banner-xs .tagline{margin-top:.6rem}

/* Home scenes: sticky paintings that crossfade into one another */
.scene{margin-top:-26vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26vh);mask-image:linear-gradient(to bottom,transparent 0,#000 26vh)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--dusk)}
.stage .layer-img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.stage-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,15,22,.45) 0%,rgba(32,15,22,.12) 28%,rgba(32,15,22,.35) 65%,rgba(32,15,22,.82) 100%)}
.scene-inner{position:relative;margin-top:-100vh;min-height:135vh;padding:calc(26vh + 4rem) 0 9rem;display:flex;flex-direction:column;justify-content:center}
.scene-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 2rem;margin-bottom:-.9rem}
.scene-head .display{flex:1 1 100%;margin-bottom:0}
.scene-head.center{flex-direction:column;align-items:center;text-align:center;margin-bottom:2rem}
.scene-head .link-arrow{order:3;margin-bottom:1.6rem}
.scene-head .eyebrow{flex:1 1 100%}
.scene-about .stage-scrim{background:linear-gradient(90deg,rgba(32,15,22,.82) 0%,rgba(32,15,22,.55) 45%,rgba(32,15,22,.05) 80%),linear-gradient(180deg,rgba(32,15,22,.3),transparent 40%,rgba(32,15,22,.6))}
.about{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--wrap)}
.about-head,.about-copy{max-width:38rem}
.about-copy{color:#f4e9ea;text-shadow:0 1px 12px rgba(10,5,15,.6)}
.about-copy .lead{color:#fff4ec}
.scene-folio .stage{background:radial-gradient(ellipse at 15% 10%,rgba(232,115,90,.4),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(109,74,134,.6),transparent 55%),var(--dusk)}
.scene-folio .stage-scrim{display:none}
.scene-folio .scene-inner{min-height:120vh}
.scene-column .stage-scrim{background:linear-gradient(180deg,rgba(32,15,22,.7) 0%,rgba(32,15,22,.35) 45%,rgba(32,15,22,.1) 70%,rgba(32,15,22,.7) 100%)}
.scene-column .scene-inner{justify-content:flex-start;padding-top:calc(26vh + 6rem)}
.column-inner{max-width:var(--wrap)}
.column-inner .display{max-width:16ch}
.column-inner .lead{max-width:34rem;color:#fff3ea;text-shadow:0 2px 14px rgba(10,5,15,.7)}
.scene-interact .stage-scrim{background:linear-gradient(180deg,rgba(32,15,22,.65),rgba(32,15,22,.25) 45%,rgba(32,15,22,.8))}
.scene-newsletter .scene-inner{min-height:120vh}
.scene-newsletter .stage-scrim{background:linear-gradient(180deg,rgba(32,15,22,.4),rgba(32,15,22,.05) 40%,rgba(32,15,22,.6))}

/* Glass rows (horizontal, embedded in the scene) */
.glass-row{display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.5rem .2rem 1.5rem;scrollbar-width:thin;scrollbar-color:rgba(236,211,145,.5) transparent}
.glass-row>*{flex:0 0 clamp(280px,30vw,390px);scroll-snap-align:start}

/* Dark glass teasers */
.card,.interact,.thread-row a,.rec,.media-card{background:var(--glass-d);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);border:var(--hair);border-radius:var(--rad);box-shadow:var(--shadow);color:var(--light)}
.card{display:flex;flex-direction:column;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .4s}
.card:hover{transform:translateY(-8px);border-color:rgba(255,213,170,.6);box-shadow:0 40px 70px -30px rgba(10,5,15,.9),0 0 0 1px rgba(255,197,143,.15)}
.card-img{display:block;overflow:hidden;margin:10px 10px 0;border-radius:15px}
.card-img img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform 1s}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:1.1rem 1.4rem 1.5rem}
.card-body h3{font-size:1.7rem}
.card-body h3 a{text-decoration:none;color:#fff}
.card-body h3 a:hover{color:#ffd2ad}
.card-body p:last-child{margin:0;color:var(--light-2);font-size:.98rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}
.interact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem}
.interact{display:block;padding:2.1rem 1.9rem 1.8rem;text-decoration:none;position:relative;transition:transform .35s,background .35s,border-color .35s}
.interact:hover{transform:translateY(-6px);background:rgba(59,35,64,.6);border-color:rgba(255,213,170,.6);color:#fff}
.interact h3{color:#fff;font-size:2.2rem;margin-bottom:.3em}.interact .script{color:var(--rose)}
.interact p{margin:0;color:var(--light-2)}
.interact .go{position:absolute;right:1.6rem;top:1.8rem;color:var(--apricot);font-size:1.3rem;transition:transform .3s}
.interact:hover .go{transform:translateX(5px)}

/* Light glass reading surfaces */
.panel,.letter,.thread-op,.reply,.side,.tally,.newsletter,.substack-note,.flash,article.prose.section,.two-col>.prose,.lesson>.prose,.social-card{background:var(--glass-l);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.55);border-radius:var(--rad);box-shadow:var(--shadow);color:var(--ink);text-shadow:none}
.panel h1,.panel h2,.panel h3,.letter h2,.thread-op h2,.thread-op h3,.side h2,.tally h2,.newsletter h2,article.prose.section h2,article.prose.section h3,.two-col>.prose h2,.two-col>.prose h3,.lesson>.prose h2,.lesson>.prose h3,.social-card h3{color:var(--dusk);text-shadow:none}
.panel a,.letter a,.thread-op a,.reply a,.side a,.newsletter a,.substack-note a,article.prose.section a,.two-col>.prose a,.lesson>.prose a{color:var(--plum)}
.panel .meta,.letter .meta,.reply .meta,.side .meta,.tally .meta,.newsletter .meta,article.prose .meta{color:var(--muted)}
.panel .empty,.side .empty{color:var(--muted)}
.panel{padding:1.9rem}
.panel h2{font-size:1.9rem}
.sticky{position:sticky;top:96px}
.two-col{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.flash{max-width:var(--wrap);margin:1.4rem auto;padding:1rem 1.4rem;font-weight:500;width:calc(100% - 3rem);border-left:4px solid}
.flash.ok{border-left-color:#5d8a6a;color:#21402f}
.flash.err{border-left-color:var(--ember);color:#842f22}

/* Forms (inside light glass) */
.form{display:flex;flex-direction:column;gap:1rem}
.form label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--sc);font-size:1.02rem;letter-spacing:.1em;color:var(--plum)}
input,textarea,select{font:inherit;font-family:var(--sans);letter-spacing:0;font-size:1rem;color:var(--ink);background:rgba(255,255,255,.75);border:1px solid rgba(59,35,64,.18);border-radius:12px;padding:.8em .95em;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{border-color:var(--coral);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(242,139,108,.2)}
textarea{resize:vertical;min-height:6rem}
.form label.check{flex-direction:row;align-items:center;gap:.5rem}.check input{width:auto}
fieldset{border:1px solid rgba(59,35,64,.18);border-radius:14px;padding:.8rem 1rem}
legend{font-family:var(--sc);letter-spacing:.1em;padding:0 .4rem;color:var(--plum)}
.side-pick label{flex-direction:row;align-items:center;gap:.5rem;font-family:var(--sans);letter-spacing:0;color:var(--ink)}.side-pick input{width:auto}

/* Prose */
.prose{max-width:46rem}
article.prose.section{margin:2rem auto 0;padding:clamp(1.8rem,4vw,3.2rem)}
.center-prose{margin:0 auto;text-align:center}
.prose h2{margin-top:1.5em}.prose h3{margin-top:1.3em}
.prose blockquote{margin:1.6em 0;padding:.4em 1.4em;border-left:2px solid var(--coral);font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--plum)}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.3em 0}
.prose li::marker{color:var(--ember)}
.prose hr{border:0;height:1px;background:var(--sunset);margin:2.2em 0}
article.prose.section>p:first-of-type::first-letter,article.prose.section>.badge+p::first-letter{font-family:var(--serif);float:left;font-size:4.2em;line-height:.8;padding:.06em .12em 0 0;color:var(--ember)}
.signoff{font-size:2.4rem;margin-top:2rem;color:var(--ember)}
.two-col>.prose,.lesson>.prose{padding:clamp(1.6rem,3vw,2.4rem)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.chip{padding:.45rem 1.15rem;border:var(--hair);border-radius:999px;background:rgba(24,16,32,.4);backdrop-filter:blur(10px);text-decoration:none;font-family:var(--sc);letter-spacing:.12em;font-size:1rem;color:#f6e9ee}
.chip:hover,.chip[aria-current]{background:var(--glow);color:#2a1424;border-color:transparent}

/* Recommendations */
.rec-group{margin-bottom:3rem;scroll-margin-top:100px}
.rec-group h2{padding-bottom:.3em;border-bottom:1px solid rgba(236,211,145,.4);display:flex;align-items:center;gap:.6rem}
.rec-group h2::before{content:"❦";color:var(--apricot);font-size:.8em}
.rec-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.1rem}
.rec{display:flex;gap:1rem;padding:1.3rem 1.4rem;transition:transform .3s,border-color .3s}
.rec:hover{transform:translateY(-3px);border-color:rgba(255,213,170,.6)}
.rec-flower{font-size:1.5rem;color:var(--apricot);line-height:1}
.rec h3{font-size:1.45rem;margin:0 0 .3em}.rec h3 a{text-decoration:none;color:#fff}
.rec p{margin:0;color:var(--light-2);font-size:.96rem}
.topic{margin-top:1rem}

/* Learn */
.lesson-nav{padding-left:1.4em;margin:0 0 1rem}.lesson-nav li{margin:.5em 0}
.lesson-nav li::marker{color:var(--ember);font-family:var(--serif)}
.lesson-nav a[aria-current]{font-weight:600;color:var(--ember)}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem}

/* Media */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem}
.media-card{padding:1.5rem}
.media-card h3 a{text-decoration:none;color:#fff}
.embed{position:relative;overflow:hidden;margin:1rem 0;background:var(--dusk);border-radius:16px}
.embed.video{aspect-ratio:16/9}.embed.audio{height:180px}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.audio,.video-el{width:100%;margin:1rem 0}
.embed-empty{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:1rem 0;color:#f4ede4;text-align:center;padding:1rem;border-radius:16px;
  background:radial-gradient(circle at 50% 130%,rgba(242,139,108,.85) 0,rgba(122,58,76,.7) 35%,rgba(33,19,27,.6) 75%);border:var(--hair)}
.embed-empty .script{color:var(--gold-l);font-size:2.4rem}.embed-empty p{margin:0}

/* Ask: letters */
.letter{padding:1.8rem 2rem;margin-bottom:1.6rem;position:relative}
.letter::after{content:"";position:absolute;right:1.4rem;top:-12px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f08a6c,#a3333a 70%);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.letter-q{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--dusk)}
.letter-q .script{font-size:1.9rem;display:block;color:var(--ember)}
.letter-a{border-top:1px solid rgba(201,162,78,.5);padding-top:1rem;margin-top:.8rem}
.letter-a p:last-child{margin:0}

/* Debate */
.debate-intro{margin:0 auto 1.6rem;text-align:center;color:#f6eaea;text-shadow:0 1px 10px rgba(10,5,15,.7)}
.live{display:inline-flex;align-items:center;gap:.4rem}
.dot{width:10px;height:10px;border-radius:50%;background:#bbb;display:inline-block}
.dot.on{background:#ff7a50;box-shadow:0 0 0 0 rgba(255,122,80,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,122,80,0)}100%{box-shadow:0 0 0 0 rgba(255,122,80,0)}}
.tally{max-width:820px;margin:0 auto 2.8rem;padding:1.7rem 1.9rem}
.tally-labels{display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.35rem;color:var(--dusk);margin-bottom:.6rem}
.tally-bar{height:14px;border-radius:99px;background:linear-gradient(90deg,#e59ab4,#9b6fb4);overflow:hidden}
.tally-bar span{display:block;height:100%;background:linear-gradient(90deg,#ffc58f,#f28b6c);transition:width .7s cubic-bezier(.2,.7,.2,1);border-right:2px solid #fff}
.vote-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.vote-buttons form{margin:0}
.vote-buttons button[data-side=a]:not(.gold){background:linear-gradient(110deg,#f6a66f,#d4562a);color:#fff}
.vote-buttons button[data-side=b]:not(.gold){background:linear-gradient(110deg,#b58ad0,#6d4a86);color:#fff}
.tally .meta{color:var(--muted)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.8rem}
.side{padding:1.6rem;border-top:4px solid #f28b6c}
.side-b{border-top-color:#9b6fb4}
.side h2{font-size:1.75rem}
.arg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.argument{background:rgba(255,255,255,.7);border:1px solid rgba(59,35,64,.1);border-radius:14px;padding:1rem 1.15rem}
.argument p{margin:0 0 .5rem}
.arg-foot{display:flex;justify-content:space-between;align-items:center}
.argument .meta{color:var(--muted)}
.upvote{border:1px solid rgba(201,162,78,.7);border-radius:99px;background:#fff;padding:.2rem .85rem;cursor:pointer;font:inherit;font-size:.85rem;color:var(--plum)}
.upvote:hover{background:#fdf0dc}
.argue{max-width:820px;margin:0 auto}

/* ThinkTank */
.thread-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.thread-row a{display:block;padding:1.3rem 1.6rem;text-decoration:none;transition:transform .3s,border-color .3s}
.thread-row a:hover{transform:translateX(6px);border-color:rgba(255,213,170,.6);color:#fff}
.thread-row h3{margin:0 0 .3em;color:#fff}.thread-row p{margin:0 0 .3em;color:var(--light-2)}
.thread-op{padding:2.1rem;margin:0 0 2rem;max-width:none}
.thread h2{color:var(--cream)}
.replies{list-style:none;margin:0;padding:0}
.replies .replies{margin-left:clamp(.8rem,3vw,2rem);border-left:1px solid rgba(236,211,145,.5);padding-left:clamp(.6rem,2vw,1.2rem)}
.reply{padding:1rem 1.3rem;margin:0 0 1rem;border-radius:16px}
.reply.cara{background:linear-gradient(120deg,rgba(255,244,226,.9),rgba(253,232,232,.9));border-color:rgba(201,162,78,.7)}
.reply .prose{max-width:none}.reply .prose p:last-child{margin-bottom:.3rem}
.reply-head{margin-bottom:.3rem}
.reply-to summary{cursor:pointer;color:var(--plum);font-size:.85rem;margin:.2rem 0;font-family:var(--sc);letter-spacing:.12em}
.reply-to[open]{margin-bottom:.8rem}
.thread>.panel{margin:2rem 0}

/* Socials: postcards floating in the scene */
.postcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2rem}
.social-card{position:relative;display:block;padding:1.7rem 1.7rem 1.5rem;text-decoration:none;transition:transform .35s}
.tilt-l{transform:rotate(-1.2deg)} .tilt-r{transform:rotate(1deg)}
.social-card:hover{transform:rotate(0) translateY(-6px);color:var(--ink)}
.social-card h3{font-size:2rem;margin:0}
.social-card .script{color:var(--ember)}
.social-card .handle{font-weight:500;color:var(--plum);margin:0 0 .5rem}
.social-card p:not(.script):not(.handle){color:var(--muted);font-size:.95rem}
.sc-stamp{position:absolute;right:1rem;top:1.1rem;width:52px;height:60px;display:grid;place-items:center;font-family:var(--sc);font-weight:600;font-size:1.3rem;color:#fff;background:linear-gradient(160deg,#f28b6c,#9b6fb4);border-radius:6px;outline:2px dashed rgba(255,255,255,.8);outline-offset:-5px}
.social-card.is-placeholder{opacity:.72}
.social-card.is-placeholder .sc-stamp{background:linear-gradient(160deg,#b8b0a4,#8d8577)}

/* Newsletter */
.newsletter{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:clamp(1.6rem,4vw,3rem);max-width:1000px;margin:0 auto}
.nl-copy .script{font-size:2.4rem;color:var(--ember)}
.nl-copy p:last-child{margin:0;color:var(--muted)}
.nl-fields{display:flex;gap:.6rem;flex-wrap:wrap}
.nl-fields input[type=email]{flex:1 1 220px;border-radius:999px;padding-left:1.2em}
.substack-note{padding:1.1rem 1.6rem;margin-top:-1rem}
.substack-note p{margin:0}.substack-note .script{font-size:1.6rem;margin-right:.4rem;color:var(--ember)}

/* Folio gallery (the one place for gilded frames) */
.folio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.folio-controls{display:flex;align-items:center;gap:1rem}
.folio-btn{width:52px;height:52px;border-radius:50%;border:var(--hair);background:rgba(255,248,240,.08);backdrop-filter:blur(8px);color:var(--gold-l);font-size:1.3rem;cursor:pointer;transition:background .2s,color .2s}
.folio-btn:hover{background:var(--glow);color:#2a1424}
.folio-count{font-family:var(--sc);letter-spacing:.2em;color:var(--light-2);min-width:5.5em;text-align:center}
.folio-count b{color:var(--gold-l);font-weight:600}
.folio{display:flex;gap:clamp(1.4rem,3vw,2.6rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem max(1.5rem,calc((100vw - var(--wrap))/2 + 1.5rem)) 2.5rem;scrollbar-width:none;perspective:1400px;outline:none}
.folio::-webkit-scrollbar{display:none}
.folio-item{flex:0 0 clamp(250px,25vw,320px);scroll-snap-align:start;scroll-margin-left:max(1.5rem,calc((100vw - var(--wrap))/2 + 1.5rem));text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1.2rem;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.folio-item:hover,.folio-item:focus-visible{transform:translateY(-10px) rotateY(-5deg)}
.gilt{display:block;padding:11px;background:var(--foil);box-shadow:0 0 0 1px #6d521b,inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 6px rgba(140,106,38,.35),0 34px 50px -24px rgba(0,0,0,.85)}
.gilt-inner{display:block;padding:5px;background:#2a1e26;box-shadow:inset 0 0 0 1px rgba(236,211,145,.5)}
.gilt-inner img{aspect-ratio:4/5;object-fit:cover;width:100%}
.folio-placard{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--light);padding:.2rem 1rem;margin:0}
.folio-placard .pl-no{font-size:.8rem;letter-spacing:.22em;margin:0}
.folio-placard .script{font-size:1.65rem;margin:.1rem 0 0}
.folio-title{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:#fff;line-height:1.15}
.folio-era{font-family:var(--serif);font-style:italic;color:var(--light-2);font-size:1rem;line-height:1.3;margin-top:.15rem}
.folio-progress{height:2px;background:rgba(236,211,145,.2);position:relative;margin-top:.4rem;border-radius:2px}
.folio-progress span{position:absolute;left:0;top:0;bottom:0;width:11%;background:var(--glow);border-radius:2px}

/* Collection (credits) */
.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.5rem 2rem;margin:2rem 0 3rem}
.coll-item{margin:0;display:flex;flex-direction:column;gap:1rem}
.coll-item .gilt-inner img{aspect-ratio:16/10}
.center-prose .lead,.center-prose p{text-shadow:0 1px 12px rgba(10,5,15,.7)}

/* Footer: the last painting dissolves into dusk */
.footer{margin-top:-22vh;padding:22vh 0 1.6rem;color:#e6d9df;background:linear-gradient(180deg,rgba(33,19,27,0) 0,rgba(33,19,27,.85) 14vh,var(--dusk) 22vh)}
.foot-motto{text-align:center;padding:2.5rem 1.4rem 1rem}
.foot-motto .script{color:var(--rose);font-size:2.8rem;margin:0}
.foot-motto .sc{color:var(--gold-l);font-size:.95rem}
.footer a{color:#f4ede4;text-decoration:none}.footer a:hover{color:var(--gold-l)}
.footer .brand-serif{color:#fff}.footer .brand-script{color:var(--rose)}
.footer .muted{color:#bfb0bb}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;padding-top:1.5rem;border-top:1px solid rgba(236,211,145,.2)}
.footer ul{list-style:none;padding:0;margin:0}.footer li{margin:.35rem 0}
.foot-h{font-family:var(--sc);font-size:1.15rem;letter-spacing:.16em;color:var(--gold-l);margin-bottom:.6rem}
.foot-base{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.2rem;font-size:.85rem;color:#a99aa6}
.foot-base p{margin:0}
.sunset-rule{display:none}

/* Scroll reveal (JS adds .js-ready) */
.js-ready .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js-ready .reveal.in{opacity:1;transform:none}
.js-ready .card-grid>.card,.js-ready .glass-row>.card{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-ready .card-grid>.card.in,.js-ready .glass-row>.card.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .canvas img,.canvas-fg img,.scroll-cue span,.dot.on{animation:none!important}
  .js-ready .reveal,.js-ready .card-grid>.card,.js-ready .glass-row>.card{opacity:1!important;transform:none!important;transition:none!important}
  *{transition-duration:.01ms!important}
}

/* Admin (functionality unchanged; restyled to match) */
body.admin{background:var(--parch)}
body.admin::before{display:none}
.admin-top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:.8rem 1.4rem;background:var(--dusk);border-bottom:3px solid var(--gold)}
.admin-top .brand-serif{color:var(--cream)}
.admin-top nav{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.9rem;align-items:center}
.admin-top nav a,.admin-top .linkbtn{color:#efe4ea}
.admin-top nav a:hover{color:var(--gold-l)}
.admin-top small{font-family:var(--sans);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-l);margin-left:.4rem}
.admin-main{max-width:1000px;margin:0 auto;padding:2rem 1.4rem 4rem}
.admin-main .flash{width:100%}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;margin-bottom:2rem}
.tile{background:var(--cream);border:1px solid var(--line);padding:1.1rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.tile strong{font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--plum)}
.tile.hot{border-color:var(--coral);background:#fdf0ea}.tile.hot strong{color:var(--ember)}
.admin-table{width:100%;border-collapse:collapse;background:var(--cream);font-size:.95rem}
.admin-table th,.admin-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.admin-table th{background:var(--parch-2);font-weight:500;text-transform:capitalize}
.admin-form{background:var(--cream);padding:1.6rem;border:1px solid var(--line)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.inline{display:inline;margin:0}
.danger{margin-top:1.5rem}
.mod-item{background:var(--cream);border:1px solid var(--line);padding:1.2rem 1.4rem;margin-bottom:1rem}
.mod-item .form{margin:.6rem 0}
.login-body{min-height:100vh;display:grid;place-items:center;background:url(/art/thinktank-md.webp) center/cover,var(--dusk)}
.login-body::after{content:"";position:fixed;inset:0;background:rgba(33,19,27,.6);z-index:0}
.login{width:min(380px,92vw);display:flex;flex-direction:column;gap:1rem;z-index:1}
.login label{display:flex;flex-direction:column;gap:.35rem;font-weight:500}

body.admin{color:var(--ink)}
body.admin a{color:var(--plum)}
body.admin h1,body.admin h2,body.admin h3{color:var(--dusk);text-shadow:none}
body.admin .admin-top a,body.admin .admin-top .linkbtn{color:#efe4ea}
body.admin .meta{color:var(--muted)}
body.admin .chip{color:var(--plum);background:var(--cream);border-color:var(--gold)}
body.admin .chip[aria-current]{background:var(--dusk);color:var(--gold-l)}
body.admin .panel{background:var(--cream)}
body.admin .btn{border-radius:0}
.login-body .panel{background:var(--glass-l)}

/* Responsive */
@media (max-width:860px){
  .two-col,.newsletter,.footer-grid{grid-template-columns:1fr}
  .sides{grid-template-columns:1fr}
  .sticky{position:static}
  .banner-sub,.hero-sub{flex-direction:column;align-items:flex-start}
  .caption{align-items:flex-start;text-align:left;border-right:0;border-left:1px solid rgba(236,211,145,.7);padding:0 0 0 .8rem}
  .canvas::after{background:linear-gradient(180deg,rgba(32,15,22,.5),rgba(32,15,22,.15) 30%,rgba(32,15,22,.25) 55%,rgba(32,15,22,.7))}
  .scene-about .stage-scrim{background:linear-gradient(180deg,rgba(32,15,22,.4),rgba(32,15,22,.75) 50%,rgba(32,15,22,.85))}
}
@media (max-width:560px){
  .hero-title{font-size:clamp(4.4rem,22vw,6rem)}
  .hero .caption{display:none}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .card-grid,.media-grid,.rec-list{grid-template-columns:1fr}
  .folio-item{flex-basis:74vw}
  .glass-row>*{flex-basis:82vw}
  .folio-controls{width:100%;justify-content:space-between}
  .brand-mono{display:none}
  .display{font-size:clamp(2.8rem,13vw,4.2rem)}
  .scene{margin-top:-18vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18vh);mask-image:linear-gradient(to bottom,transparent 0,#000 18vh)}
  .scene-inner{padding-top:calc(18vh + 3rem)}
}

/* Local scrims: a soft pool of dusk behind type that sits directly on the painting */
.scene-head,.column-inner,.scene-head,.column-inner{position:relative}
.scene-head::before,.column-inner::before{content:"";position:absolute;z-index:-1;left:-8%;right:auto;width:min(900px,95%);top:-25%;bottom:-25%;background:radial-gradient(closest-side,rgba(32,15,22,.6) 0%,rgba(32,15,22,.35) 50%,transparent 100%);pointer-events:none}
.scene-head.center::before{left:50%;transform:translateX(-50%)}
.tinted{filter:drop-shadow(0 2px 2px rgba(15,8,20,.45)) drop-shadow(0 6px 26px rgba(15,8,20,.7))}
.scene-inner{min-height:115vh;padding-bottom:7rem}
.scene-inner{z-index:1}
.banner h1.long{font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:1;max-width:24ch}
@media (prefers-reduced-motion:reduce){.canvas img,.canvas-fg img{transform:scale(1.04)}}
.banner:has(h1.long) .banner-text{min-height:calc(var(--fg) * 100vh - 2vh)}
.canvas::after{background:radial-gradient(ellipse 62% 46% at 24% 60%,rgba(32,15,22,.58),rgba(32,15,22,.25) 55%,transparent 80%),linear-gradient(180deg,rgba(32,15,22,.45),transparent 22%,transparent 70%,rgba(32,15,22,.55))}
@media (max-width:860px){.canvas::after{background:linear-gradient(180deg,rgba(32,15,22,.5),rgba(32,15,22,.18) 28%,rgba(32,15,22,.45) 55%,rgba(32,15,22,.72))}}
.footer{margin-top:0;padding-top:14vh;background:linear-gradient(180deg,rgba(33,19,27,0) 0,rgba(33,19,27,.85) 9vh,var(--dusk) 14vh)}
body:has(.scene) .footer{margin-top:-22vh;padding-top:22vh;background:linear-gradient(180deg,rgba(33,19,27,0) 0,rgba(33,19,27,.85) 14vh,var(--dusk) 22vh)}
body.login-body{background:url(/art/thinktank-md.webp) center/cover,var(--dusk)}

/* ── v3.1 Brand: quiet old-world luxury on the paintings ──
   Gable-arch CM monogram, tracked display-serif wordmark with a script accent,
   wine & cream stationery, thin-ruled boxes, wax seals, arch-shaped image masks. */
:root{--wine:#5e1a2b;--wine-2:#7d2a3d;--wine-d:#3a0f1a;--cream-2:#f4ebdc;--fynbos:#4f6b45;
  --glass-l:rgba(246,238,224,.88);--rad:10px;--rule:1px solid rgba(201,162,78,.5)}
.brand-mono,.brand-script,.brand-serif{display:none}
.wordmark{display:inline-flex;align-items:center;gap:.75rem;color:var(--cream)}
.wm-mono{width:24px;height:32px;color:var(--gold-l);flex:none}
.wm-text{display:flex;flex-direction:column;line-height:1}
.wm-caps{font-family:var(--serif);font-weight:500;font-size:1.06rem;letter-spacing:.36em;text-transform:uppercase;color:var(--cream-2);margin-right:-.36em}
.wm-script{font-family:var(--script);font-size:.95rem;color:var(--blush);margin-top:.18rem;letter-spacing:.01em}
.wm-foot .wm-mono{width:30px;height:40px}.wm-foot .wm-caps{font-size:1.3rem}
.foot-mono{display:block;width:30px;height:40px;margin:0 auto .6rem;color:var(--gold-l)}

/* Hero lockup: monogram, script and tracked caps inside a double hairline box, sitting on the painting */
.lockup{position:relative;z-index:1;align-self:flex-start;display:inline-flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(1.3rem,2.6vw,2.2rem) clamp(1.4rem,4.2vw,3.8rem) clamp(1.4rem,2.6vw,2.2rem);
  border:1px solid rgba(246,236,220,.72);outline:1px solid rgba(246,236,220,.32);outline-offset:7px;will-change:transform;
  background:radial-gradient(closest-side,rgba(32,15,22,.38),rgba(32,15,22,.12) 70%,transparent)}
.lockup-mono{width:clamp(34px,3.4vw,50px);height:auto;color:var(--gold-l);margin-bottom:.4rem;filter:drop-shadow(0 2px 8px rgba(10,5,15,.6))}
.lockup .hero-script{order:1;font-size:clamp(1.6rem,2.8vw,2.5rem);margin:0 0 .1rem;color:var(--blush)}
.lockup .hero-title{order:2;margin:0}
.ht-caps{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,8vw,8rem);line-height:1;letter-spacing:.16em;margin-right:-.16em;text-transform:uppercase;
  color:var(--cream-2);text-shadow:0 2px 3px rgba(15,8,20,.35),0 8px 40px rgba(15,8,20,.65)}
.hero .chapter-no{margin-bottom:1rem}

/* Chapter banners: wordmark-style tracked caps instead of shouting display type */
.banner:not(.banner-sm):not(.banner-xs) h1:not(.long){text-transform:uppercase;font-weight:400;letter-spacing:.12em;font-size:clamp(2.7rem,7vw,6.6rem);line-height:.98;max-width:none}
.banner .chapter-no{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;padding:.35rem .9rem;border:1px solid rgba(236,211,145,.45)}
.banner-xs .chapter-no{border:0;padding:0}

/* Quieter type and ornament */
.eyebrow,.chapter-no,.pl-no{font-weight:500;letter-spacing:.3em;font-size:.95rem}
.display{font-weight:400}
.display em{font-weight:400}
.btn{font-size:.74rem;letter-spacing:.26em}
.btn.glow{box-shadow:0 8px 30px -12px rgba(242,139,108,.8),inset 0 0 0 1px rgba(255,255,255,.35)}
.btn.glass-btn,.btn.ghost{border-color:rgba(246,236,220,.6)}

/* Cream stationery panels with a thin gold inner rule */
.panel,.letter,.thread-op,.side,.tally,.newsletter,article.prose.section,.two-col>.prose,.lesson>.prose{outline:var(--rule);outline-offset:-9px}
.panel h1,.panel h2,.panel h3,.letter h2,.thread-op h2,.thread-op h3,.side h2,.tally h2,.newsletter h2,article.prose.section h2,article.prose.section h3,.two-col>.prose h2,.two-col>.prose h3,.lesson>.prose h2,.lesson>.prose h3{color:var(--wine)}
.panel a,.letter a,.thread-op a,.reply a,.side a,.newsletter a,.substack-note a,article.prose.section a,.two-col>.prose a,.lesson>.prose a{color:var(--wine-2)}
.form label,legend{color:var(--wine)}
.nl-copy .script,.substack-note .script{color:var(--wine-2)}
.btn.gold,.newsletter .btn.gold,.panel .btn.gold,.form .btn.gold{background:var(--wine);color:var(--cream-2);box-shadow:0 10px 24px -14px rgba(58,15,26,.9),inset 0 0 0 1px rgba(236,211,145,.45)}
.btn.gold:hover{background:var(--wine-2);color:#fff;filter:none}
.prose blockquote{border-left-color:var(--wine-2);color:var(--wine)}
article.prose.section>p:first-of-type::first-letter,article.prose.section>.badge+p::first-letter{color:var(--wine-2)}

/* Wax seals: newsletter (wine) and confirmations (fynbos green) */
.seal{display:block}
.seal-wine{--seal:#7a2235;--seal-hi:#b04f63;--seal-lo:#45101c}
.seal-fynbos{--seal:#4f6b45;--seal-hi:#86a476;--seal-lo:#283a24}
.newsletter{position:relative}
.nl-seal{position:absolute;width:clamp(64px,7vw,88px);top:-34px;right:clamp(14px,4vw,40px);transform:rotate(-9deg);filter:drop-shadow(0 8px 10px rgba(40,10,20,.45))}
.flash.ok{display:flex;align-items:center;gap:1rem;border-left:0;outline:var(--rule);outline-offset:-6px}
.flash.ok .flash-seal{width:46px;flex:none;filter:drop-shadow(0 4px 6px rgba(20,30,15,.35))}

/* Arch-shaped image masks: the folio plates open like Cape Dutch arches */
.folio-item .gilt,.folio-item .gilt-inner,.folio-item .gilt-inner img{border-radius:999px 999px 0 0}
.folio-item .gilt{padding:8px}
.folio-item .gilt-inner{padding:4px}
.folio-item .gilt-inner img{aspect-ratio:4/5.3}
.interact{border-radius:120px 120px var(--rad) var(--rad)}

@media (max-width:860px){
  .wm-script{display:none}
  .wm-caps{font-size:.98rem;letter-spacing:.28em;margin-right:-.28em}
}
@media (max-width:560px){
  .lockup{padding:1.1rem 1rem 1.2rem;outline-offset:5px}
  .ht-caps{font-size:clamp(2.1rem,10.4vw,3rem);letter-spacing:.1em;margin-right:-.1em}
  .banner:not(.banner-sm):not(.banner-xs) h1:not(.long){font-size:clamp(2.1rem,10vw,3rem);letter-spacing:.08em}
  .nl-seal{top:-26px}
}
/* v3.1 legibility refinements */
.banner .chapter-no,.hero .chapter-no{background:rgba(32,15,22,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--gold-l)}
.hero .chapter-no{display:inline-flex;align-self:flex-start;gap:.6rem;padding:.35rem .9rem;border:1px solid rgba(236,211,145,.45)}
.eyebrow{font-size:1.08rem;color:var(--gold-l)}
.banner:not(.banner-sm):not(.banner-xs) h1:not(.long){filter:drop-shadow(0 2px 2px rgba(15,8,20,.55)) drop-shadow(0 6px 30px rgba(15,8,20,.85))}
.interact{border-radius:72px 72px var(--rad) var(--rad);padding-top:2.8rem}
.interact .go{top:1.6rem;right:2.2rem}
@media (max-width:560px){
  .lockup{background:rgba(32,15,22,.4);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .hero .chapter-no{font-size:.82rem;letter-spacing:.22em}
}

/* ── v4: golden-hour warmth + legibility ── */
.canvas::before,.canvas-fg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(ellipse 80% 70% at 30% 35%,rgba(255,196,120,.38),rgba(255,160,110,.12) 55%,transparent 80%)}
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(ellipse 80% 70% at 35% 40%,rgba(255,196,120,.3),transparent 75%)}
.stage-scrim{z-index:2}
/* Painting placards: a small frosted label so they read on bright surf and sky */
.caption{background:rgba(32,15,22,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.55rem 1rem;border-radius:4px}
.caption .pl-med{color:#efdfd6}
/* Banner titles get their own pool of dusk on bright paintings (e.g. the sunlit forest) */
.banner-text{position:relative;z-index:auto}
.banner-text::before{content:"";position:absolute;z-index:0;left:-6%;bottom:-6vh;width:min(1000px,100%);height:min(56vh,520px);background:radial-gradient(closest-side,rgba(32,15,22,.62),rgba(32,15,22,.34) 55%,transparent);pointer-events:none}
.banner-text>*{position:relative}
.banner:not(.banner-sm):not(.banner-xs) h1:not(.long){background:none;-webkit-text-fill-color:var(--cream-2);color:var(--cream-2)}
/* Intro copy that sits directly under a banner */
.section>.lead,.section>p.center,.debate-intro{text-shadow:0 1px 12px rgba(20,8,14,.9)}
@media (max-width:560px){
  .lockup{background:rgba(32,15,22,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(246,236,220,.8)}
  .ht-caps{text-shadow:0 2px 10px rgba(15,8,20,.7)}
}
.hangs{display:block;margin-top:.35rem;font-family:var(--sc);letter-spacing:.14em;font-size:.82rem;color:var(--gold-l)}
.debate-intro{background:rgba(32,15,22,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1.1rem 1.6rem;border-radius:var(--rad);border:var(--hair);max-width:56rem;margin-left:auto;margin-right:auto}
.scene-about .wrap.about{margin-left:clamp(1.25rem,6vw,7rem);margin-right:auto}.scene-about .about-head,.scene-about .about-copy{max-width:32rem}