/* ===========================================================================
   dominiquewu.com — "Reading Room"
   Blog-first personal site. Typography-led, no frameworks, no CDN, no trackers.
   Evolves the 2026-08-08 "white editorial, expensive quiet" language:
   serif display, electric-blue accent, generous air, AA contrast in both themes.
   =========================================================================== */

:root{
  /* --- light (default): warm-paper translation of the consider.digital system.
         All pairs computed AA 2026-08-15; raw amber fails on light ground, so the
         light accent is the solved darkened amber #886110 (5.25:1 on bg). --- */
  --bg:#faf8f2;
  --bg-warm:#f3efe4;      /* paper bands */
  --bg-sunk:#efe9dc;      /* deeper band */
  --ink:#1c1912;          /* 16.5:1 on bg */
  --ink-2:#4d4a3f;        /* 8.4:1 on bg */
  --ink-3:#676352;        /* 5.2:1 on bg, 4.98:1 on bg-sunk */
  --accent:#886110;       /* darkened amber — 5.25:1 on bg */
  --accent-soft:#f0e5cc;
  --moss:#3f6e49;         /* 5.6:1 on bg */
  --line:#e8e2d4;
  --line-2:#d5cebc;
  --ink-inv:#faf8f2;
  --band-bg:#0e1113;      /* the dark podcast band = the reference ground */
  --band-ink:#cfc8ba;
  --band-ink-2:#a29d90;
  --band-line:#2c2e29;
  --band-accent:#d9a441;
  --on-accent:#ffffff;   /* text on the accent — 5.58:1 on #886110 */

  --serif:'Iowan Old Style',Palatino,'Palatino Linotype',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --maxw:72rem;
  --measure:38rem;               /* ~65ch reading measure */
  --pad:clamp(22px,5vw,64px);
  --r:10px;
  --shadow:0 1px 2px rgba(16,16,20,.04),0 12px 32px -12px rgba(16,16,20,.10);
  --shadow-lg:0 2px 4px rgba(16,16,20,.06),0 28px 64px -20px rgba(16,16,20,.22);
}

/* --- dark: system preference, unless the user forced light --- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1113; --bg-warm:#13161a; --bg-sunk:#171a1f;
    --ink:#cfc8ba; --ink-2:#b5afa2; --ink-3:#8a8578;
    --accent:#d9a441; --accent-soft:#2a2415; --moss:#8fb896;
    --line:#282a24; --line-2:#3a3c35;
    --ink-inv:#14110b;
    --band-bg:#0a0c0f; --band-ink:#cfc8ba; --band-ink-2:#a29d90;
    --band-line:#2c2e29; --band-accent:#d9a441; --on-accent:#14110b;  /* 8.38:1 on #d9a441 */
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 64px -20px rgba(0,0,0,.75);
  }
}
/* --- dark: explicit toggle wins in both directions --- */
:root[data-theme="dark"]{
  --bg:#0e1113; --bg-warm:#13161a; --bg-sunk:#171a1f;
  --ink:#cfc8ba; --ink-2:#b5afa2; --ink-3:#8a8578;
  --accent:#d9a441; --accent-soft:#2a2415; --moss:#8fb896;
  --line:#282a24; --line-2:#3a3c35;
  --ink-inv:#14110b;
  --band-bg:#0a0c0f; --band-ink:#cfc8ba; --band-ink-2:#a29d90;
  --band-line:#2c2e29; --band-accent:#d9a441; --on-accent:#14110b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 64px -20px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1.05rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--ink-inv);padding:.6rem 1.1rem;border-radius:6px;z-index:200;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}

/* ============================ nav ============================ */
.navbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.navbar.scrolled{border-bottom-color:var(--line)}
nav{display:flex;gap:1.75rem;align-items:center;padding:1.05rem 0;flex-wrap:wrap}
nav .brand{
  font-family:var(--serif);font-size:1.22rem;letter-spacing:.005em;
  margin-right:auto;color:var(--ink);text-decoration:none;
}
nav .brand span{color:var(--accent)}
nav a:not(.brand):not(.nav-cta){
  color:var(--ink-2);text-decoration:none;font-size:.9rem;position:relative;padding:.2rem 0;
}
nav a:not(.brand):not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
nav a:not(.brand):not(.nav-cta):hover::after,
nav a[aria-current="page"]::after{transform:scaleX(1)}
nav a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  font-size:.85rem;text-decoration:none;color:var(--ink-inv);background:var(--ink);
  padding:.5rem .95rem;border-radius:100px;transition:opacity .2s ease;
}
.nav-cta:hover{opacity:.82}
.themetoggle{
  background:none;border:1px solid var(--line-2);border-radius:100px;
  width:34px;height:34px;cursor:pointer;color:var(--ink-2);
  display:grid;place-items:center;padding:0;font-size:.95rem;line-height:1;
}
.themetoggle:hover{color:var(--ink);border-color:var(--ink-3)}

/* ============================ type ============================ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(3rem,8vw,5.8rem);letter-spacing:-.028em}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.022em}
h3{font-size:1.3rem;line-height:1.3}
em{font-style:italic}
.eyebrow{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.4rem;
}
.lead{font-size:1.19rem;color:var(--ink-2);line-height:1.6;max-width:34rem}
.meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}

/* ============================ hero ============================ */
.hero{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden}
.hero h1{max-width:16ch;margin-bottom:1.5rem}
.hero h1 em{color:var(--accent);font-style:italic}
.hero .lead{margin-bottom:2.4rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}

/* — hero v5: full-bleed living cosmos — */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(560px,88vh,860px)}
.hero .cosmos{position:absolute;inset:0;width:100%;height:100%;display:none}
.js .hero.live .cosmos{display:block}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);width:100%}
.hero .lead,.hero h1{max-width:15ch}
.hero .lead{max-width:34rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.slimform{display:flex;gap:.6rem;max-width:30rem;margin-top:2.2rem}
.slimform input{flex:1 1 auto;min-width:0}
.slimform .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:560px){.slimform{flex-direction:column}}
.heroform .fineprint{max-width:44ch}
.js .nojs-only{display:none}
@media (prefers-reduced-motion:reduce){
  .js .hero.live .cosmos{display:none}
  .js .nojs-only{display:block}   /* calm static line-art instead */
}

/* line-masked headline reveal — pure CSS, runs with JS off */
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .line>span{display:block;transform:translateY(115%);
  animation:lineUp .9s cubic-bezier(.16,1,.3,1) both}
.hero h1 .line:nth-child(1)>span{animation-delay:.08s}
.hero h1 .line:nth-child(2)>span{animation-delay:.22s}
.hero h1 .line:nth-child(3)>span{animation-delay:.36s}
.hero .eyebrow{opacity:0;animation:fadeUp .7s ease .05s both}
.hero .lead,.hero .meta{opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .55s both}
.hero .heroform{opacity:0;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes lineUp{from{transform:translateY(115%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .line>span,.hero .eyebrow,.hero .lead,.hero .meta,.hero .heroform{animation:none;opacity:1;transform:none}
}

/* interactive constellation — canvas replaces the static SVG when JS runs */
.skyfield{position:relative}
.skyfield canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.js .skyfield.live canvas{display:block}
.js .skyfield.live .lineart{visibility:hidden}

/* signature motif — the constellation line, CSS/SVG only */
.lineart{width:100%;max-width:520px;height:auto;stroke:var(--accent);opacity:.55;overflow:visible}
.lineart .dot{fill:var(--accent);stroke:none}
.lineart path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw 2.4s cubic-bezier(.16,1,.3,1) forwards;
}
.lineart .dot{opacity:0;animation:pop .5s ease forwards}
.lineart .dot:nth-of-type(1){animation-delay:1.1s}
.lineart .dot:nth-of-type(2){animation-delay:1.4s}
.lineart .dot:nth-of-type(3){animation-delay:1.7s}
.lineart .dot:nth-of-type(4){animation-delay:2.0s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lineart path{stroke-dashoffset:0}
  .lineart .dot{opacity:1}
}

/* ============================ buttons ============================ */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.98rem;font-weight:500;
  background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--r);
  padding:.85rem 1.5rem;cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px var(--accent)}
.btn:active{transform:translateY(0)}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line-2);
}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none}
.btn-block{display:block;width:100%}

/* ============================ signup form ============================ */
.formcard{
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow);
}
.formcard.raised{box-shadow:var(--shadow-lg)}
.formcard h3{margin-bottom:.4rem}
.formcard .sub{color:var(--ink-2);font-size:.95rem;margin:0 0 1.3rem}
.formrow{display:flex;gap:.6rem;flex-wrap:wrap}
.formrow>*{flex:1 1 12rem}
label{display:block;font-size:.8rem;color:var(--ink-2);margin:0 0 .35rem;font-weight:500}
input[type=text],input[type=email]{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--bg-warm);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.75rem .9rem;
  transition:border-color .2s ease,background .2s ease;
}
input:focus{background:var(--bg);border-color:var(--accent);outline-offset:1px}
input::placeholder{color:var(--ink-3)}
.field{margin-bottom:.9rem}
.fineprint{font-size:.8rem;color:var(--ink-2);margin:1rem 0 0;line-height:1.55}
.fineprint a{color:var(--ink-2)}
.disclaimer{
  font-size:.75rem;color:var(--ink-3);margin:.9rem 0 0;line-height:1.5;
  padding-top:.9rem;border-top:1px solid var(--line);
}

/* ============================ trio / statements ============================ */
.band{padding:clamp(3.5rem,8vw,5.5rem) 0}
.band-warm{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.4rem;flex-wrap:wrap}
.section-head p{margin:.5rem 0 0;color:var(--ink-2);max-width:40ch}
.morelink{font-size:.9rem;text-decoration:none;color:var(--accent);white-space:nowrap}
.morelink:hover{text-decoration:underline}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:820px){.trio{grid-template-columns:1fr;gap:2rem}}
.trio .k{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.75rem;
}
.trio h3{margin-bottom:.5rem}
.trio p{margin:0;color:var(--ink-2);font-size:.97rem}

/* ============================ blog cards ============================ */
.postlist{display:grid;gap:0;border-top:1px solid var(--line)}
.post{
  display:grid;grid-template-columns:8.5rem 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding:1.9rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;
  transition:background .25s ease;
}
.post:hover{background:var(--bg-warm)}
.post:hover h3{color:var(--accent)}
@media (max-width:700px){.post{grid-template-columns:1fr;gap:.5rem}}
.post .meta{padding-top:.35rem}
.post h3{margin-bottom:.45rem;transition:color .2s ease}
.post p{margin:0;color:var(--ink-2);font-size:.97rem;max-width:56ch}
.post .tag{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:.2rem .5rem;border-radius:4px;margin-top:.7rem;
}

/* featured post — the top of the blog index */
.featured{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--bg-warm);border:1px solid var(--line);border-radius:16px;
  text-decoration:none;color:inherit;margin-bottom:3rem;
  transition:box-shadow .3s ease,transform .3s ease;
}
.featured:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.featured:hover h2{color:var(--accent)}
@media (max-width:820px){.featured{grid-template-columns:1fr}}
.featured h2{margin:.6rem 0 .7rem;transition:color .2s ease}
.featured p{color:var(--ink-2);margin:0}
.featured-art{
  aspect-ratio:16/11;border-radius:12px;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 20% 15%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%),
    linear-gradient(150deg, var(--bg-sunk), var(--bg));
  border:1px solid var(--line);overflow:hidden;
}
.featured-art svg{width:74%;height:auto;stroke:var(--accent);opacity:.7}
.featured-art svg circle{fill:var(--accent);stroke:none}

/* ============================ article ============================ */
.article{padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,7vw,5rem)}
.article-head{max-width:var(--measure);margin:0 auto clamp(2rem,5vw,3rem)}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:1.1rem}
.article-head .lead{font-size:1.15rem;max-width:none}
.byline{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.avatar{
  width:38px;height:38px;border-radius:100px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--serif);font-size:.95rem;flex:none;
}
.byline div{font-size:.87rem;color:var(--ink-2);line-height:1.4}
.byline b{display:block;color:var(--ink);font-weight:500}

.prose{max-width:var(--measure);margin:0 auto;font-size:1.09rem;line-height:1.78}
.prose p{margin:0 0 1.5rem}
.prose h2{font-size:1.75rem;margin:2.8rem 0 1rem}
.prose h3{font-size:1.25rem;margin:2.2rem 0 .8rem}
.prose ul,.prose ol{margin:0 0 1.5rem;padding-left:1.3rem}
.prose li{margin-bottom:.55rem}
.prose strong{font-weight:600}
.prose a{color:var(--accent);text-underline-offset:2px}
.prose blockquote{
  margin:2.2rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--ink);font-style:italic;
}
.prose blockquote p{margin:0}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.6rem 0}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-sunk);padding:.15em .4em;border-radius:4px}
.pull{
  margin:2.4rem 0;padding:1.5rem;background:var(--bg-warm);
  border:1px solid var(--line);border-radius:12px;font-size:.98rem;color:var(--ink-2);
}
.pull b{color:var(--ink)}

/* inline mid-article signup */
.inline-cta{
  max-width:var(--measure);margin:3rem auto;padding:1.6rem;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;background:var(--bg-warm);
}
.inline-cta h3{font-size:1.15rem;margin-bottom:.35rem}
.inline-cta p{margin:0 0 1.1rem;color:var(--ink-2);font-size:.94rem}

/* ============================ podcast band (secondary) ============================ */
.podband{background:var(--band-bg);color:var(--band-ink);padding:clamp(3.5rem,8vw,5.5rem) 0}
.podband h2,.podband h3{color:var(--band-ink)}
.podband .eyebrow{color:var(--band-accent)}
.podband .section-head p{color:var(--band-ink-2)}
.podband .morelink{color:var(--band-accent)}
.eplist{display:grid;gap:0;border-top:1px solid var(--band-line)}
.ep{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  padding:1.15rem 0;border-bottom:1px solid var(--band-line);
  text-decoration:none;color:inherit;transition:padding-left .25s ease;
}
.ep:hover{padding-left:.5rem}
.ep:hover .ep-title{color:var(--band-accent)}
.ep-num{font-family:var(--mono);font-size:.78rem;color:var(--band-ink-2);width:2.5rem}
.ep-title{font-family:var(--serif);font-size:1.1rem;transition:color .2s ease}
.ep-guest{display:block;font-family:var(--sans);font-size:.83rem;color:var(--band-ink-2);margin-top:.15rem}
.ep-play{
  width:34px;height:34px;border-radius:100px;border:1px solid var(--band-line);
  display:grid;place-items:center;flex:none;color:var(--band-ink-2);
}
.ep:hover .ep-play{border-color:var(--band-accent);color:var(--band-accent)}
@media (max-width:640px){.ep{grid-template-columns:auto 1fr;gap:.9rem}.ep-play{display:none}}
.sepnote{
  font-size:.78rem;color:var(--band-ink-2);margin-top:2rem;padding-top:1.2rem;
  border-top:1px solid var(--band-line);max-width:60ch;line-height:1.55;
}

/* ============================ subscribe band ============================ */
.subband{background:var(--bg-sunk);padding:clamp(3.5rem,8vw,5.5rem) 0;border-top:1px solid var(--line)}
.subgrid{display:grid;grid-template-columns:1fr minmax(0,26rem);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.subgrid{grid-template-columns:1fr}}
.subband h2{margin-bottom:.9rem;max-width:14ch}
.subband .lead{margin:0}
.proofline{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap}
.proofline div{font-size:.85rem;color:var(--ink-2)}
.proofline b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-weight:400}

/* ============================ expansion slots ============================ */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:820px){.slots{grid-template-columns:1fr}}
.slot{
  padding:1.5rem;border:1px dashed var(--line-2);border-radius:12px;
  text-decoration:none;color:inherit;transition:border-color .25s ease,background .25s ease;
}
.slot:hover{border-color:var(--accent);background:var(--bg-warm)}
.slot .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.slot h3{font-size:1.05rem;margin:.5rem 0 .3rem}
.slot p{margin:0;font-size:.9rem;color:var(--ink-2)}

/* ============================ footer ============================ */
footer{background:var(--bg);border-top:1px solid var(--line);padding:3.5rem 0 2.5rem;font-size:.87rem;color:var(--ink-2)}
.footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
@media (max-width:760px){.footgrid{grid-template-columns:1fr 1fr;gap:2rem}}
.foothead{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem;font-weight:400}
.footgrid ul{list-style:none;margin:0;padding:0}
.footgrid li{margin-bottom:.5rem}
.footgrid a{color:var(--ink-2);text-decoration:none}
.footgrid a:hover{color:var(--accent)}
.footbrand{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:0 0 .6rem}
.legal{border-top:1px solid var(--line);padding-top:1.6rem;font-size:.78rem;color:var(--ink-3);line-height:1.6}
.legal p{margin:0 0 .7rem;max-width:74ch}
.legal a{color:var(--ink-3)}

/* ============================ newsletter popup ============================ */
/* Disciplined by design: scroll-triggered only (never entry, never exit-intent),
   30-day dismissal memory, suppressed for known subscribers and on /newsletter. */
.pop-backdrop{
  position:fixed;inset:0;background:rgba(16,16,20,.45);backdrop-filter:blur(3px);
  z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.pop-backdrop.open{opacity:1;pointer-events:auto}
.pop{
  visibility:hidden;
  transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s .45s;
  position:fixed;z-index:101;left:50%;bottom:2rem;transform:translate(-50%,140%);
  width:min(30rem,calc(100vw - 2rem));
  background:var(--bg);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:1.7rem;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.pop.open{transform:translate(-50%,0);visibility:visible;transition-delay:0s,0s}
@media (prefers-reduced-motion:reduce){.pop{transition:none}}
.pop h3{font-size:1.35rem;margin-bottom:.45rem;padding-right:2rem}
.pop p.sub{color:var(--ink-2);font-size:.94rem;margin:0 0 1.2rem}
.pop-close{
  position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:100px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink-2);
  cursor:pointer;display:grid;place-items:center;font-size:1.1rem;line-height:1;padding:0;
}
.pop-close:hover{color:var(--ink);border-color:var(--ink-3)}
.pop .fineprint{font-size:.74rem}
.pop-dismiss{
  display:block;width:100%;margin-top:.7rem;background:none;border:none;
  font-family:inherit;font-size:.8rem;color:var(--ink-3);cursor:pointer;text-decoration:underline;
}
.pop-dismiss:hover{color:var(--ink-2)}

/* ============================ reveal-on-scroll ============================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.no-js .reveal{opacity:1;transform:none}

/* ============================ misc ============================ */
.tagrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.chip{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem .75rem;border:1px solid var(--line-2);border-radius:100px;
  color:var(--ink-2);text-decoration:none;transition:all .2s ease;
}
.chip:hover,.chip[aria-current="true"]{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.pagehead{padding:clamp(3rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem)}
.pagehead h1{margin-bottom:1rem}
.pagehead .lead{max-width:42rem}

/* ============================================================
   INTERACTION LAYER — added 2026-08-15 (founder: bold/awwwards)
   Everything below is enhancement: JS-off keeps full content,
   prefers-reduced-motion kills all of it.
   ============================================================ */

/* — oversized editorial index numbers on post lists — */
.post .idx{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;
  color:var(--ink-3);opacity:.7;transition:color .25s ease,opacity .25s ease;display:block;margin-top:.1rem}
.post:hover .idx{color:var(--accent);opacity:1}
@media (max-width:700px){.post .idx{font-size:1.6rem;display:inline-block;margin-right:.6rem}}

/* — staggered reveals (JS adds .in; children cascade) — */
.reveal{transition-delay:calc(var(--stagger,0)*90ms)}

/* — magnetic CTAs (JS moves them; this just smooths) — */
.btn,.nav-cta{will-change:transform}
.btn.mag{transition:transform .16s cubic-bezier(.3,1,.5,1),box-shadow .18s ease}

/* — podcast band: drifting starfield behind content — */
.podband{position:relative;overflow:hidden}
.podband .stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.podband .wrap{position:relative}

/* — episode hover: equalizer bars replace the play glyph — */
.ep-play{position:relative}
.ep .eq{display:none;gap:2.5px;align-items:flex-end;height:14px}
.ep .eq i{width:2.5px;background:var(--band-accent);border-radius:2px;height:30%}
.ep:hover .ep-play{border-color:var(--band-accent)}
.ep:hover .glyph{display:none}
.ep:hover .eq{display:flex}
.ep:hover .eq i{animation:eq .9s ease-in-out infinite}
.ep:hover .eq i:nth-child(2){animation-delay:.15s}
.ep:hover .eq i:nth-child(3){animation-delay:.3s}
.ep:hover .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
@media (prefers-reduced-motion:reduce){.ep:hover .eq i{animation:none;height:65%}}

/* — reading progress bar on articles — */
.readbar{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--accent);
  z-index:70;pointer-events:none}

/* — section rules that draw themselves in — */
.section-head{position:relative;padding-top:1.4rem}
.section-head::before{content:"";position:absolute;top:0;left:0;height:1.5px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.in-view .section-head::before,.section-head.in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.section-head::before{transform:scaleX(1)}}

/* — featured card: cursor-tracking tilt (JS drives the vars) — */
.featured{transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}

/* ============================================================
   SCENES v4 — full-width dioramas (consider.digital format).
   One ambient animation + one cursor interaction per scene.
   JS-off: fully drawn, static. Reduced-motion: static, no tints.
   ============================================================ */
.scenes{position:relative;background:var(--bg-warm);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color 1.1s ease}
.scenes-intro{padding:clamp(3rem,7vw,4.5rem) 0 0}
.scenes-hud{position:sticky;top:4.2rem;z-index:5;pointer-events:none;
  display:flex;justify-content:flex-end;height:0}
.scenes-hud span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);background:var(--bg);
  border:1px solid var(--line);border-radius:100px;padding:.45rem .9rem;
  transform:translateY(.5rem)}
.scene{padding:clamp(3rem,7vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.scene+.scene{border-top:1px solid var(--line)}
.scene-copy{max-width:38rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.scene .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.scene h3{font-family:var(--sans);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;margin-bottom:1rem;text-wrap:balance}
.scene p{margin:0;color:var(--ink-2);font-size:1.05rem;line-height:1.7}
.scene .art{width:100%}
.scene .art svg{width:100%;height:auto;display:block;overflow:visible}

/* strokes — the hero cosmos idiom: amber threads + node-dots along outlines */
.scene .art [data-d]{stroke:var(--accent);opacity:.4;fill:none;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round}
.scene .art .s2{stroke:var(--accent);opacity:.28;stroke-width:1}
.scene .art .dash{stroke:var(--accent);opacity:.8;stroke-dasharray:.012 .012}
/* constellation dots crawling slowly along every outline — fine star-grain,
   dash gaps in user units so spacing is uniform on every path length */
.scene .art .dots{fill:none;stroke:var(--accent);stroke-width:2.1;
  stroke-linecap:round;stroke-dasharray:.01 13;opacity:0;transition:opacity 1.4s ease .8s}
.scene .art .dots.sparse{stroke-width:2.8;stroke-dasharray:.01 22}
.scene.on .art .dots{opacity:.5;animation:crawl 120s linear infinite}
.scene.on .art .dots.sparse{opacity:.38;animation-duration:170s;animation-direction:reverse}
@keyframes crawl{to{stroke-dashoffset:-320}}
/* the whole diorama breathes, like the hero shapes */
.scene.on .art{animation:sceneBreathe 7s ease-in-out infinite}
@keyframes sceneBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.scene .art .lbl{font-family:var(--mono);font-size:15px;letter-spacing:.12em;
  fill:var(--ink-3);opacity:0;transition:opacity .8s ease .9s}
.scene.on .art .lbl{opacity:1}

/* draw-in (JS adds .on; --d per path staggers) */
.js .scene .art [data-d]{stroke-dasharray:1;stroke-dashoffset:1}
.js .scene .art .dash{stroke-dasharray:.012 .012}
.js .scene.on .art [data-d]{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s)}

/* — ambient: amber traveler dots (the reference's signature) — */
.scene .traveler{fill:var(--accent);opacity:0;offset-rotate:0deg}
.scene.on .traveler{opacity:1;animation:travel linear infinite;
  animation-duration:inherit}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}

/* — scene 02: pupils track the cursor; tail wags — */
.scene .socket{stroke:var(--accent);opacity:.45;fill:none;stroke-width:1.1}
.scene .pupil{fill:var(--accent);
  transform:translate(calc(var(--mx,0)*6px),calc(var(--my,0)*4px));
  transition:transform .12s ease-out}
.scene .tail{stroke:var(--accent);stroke-width:1.1;opacity:0;transform-box:fill-box;
  transform-origin:bottom right}
.scene.on .tail{opacity:.6;animation:wag 1.6s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(0deg)}50%{transform:rotate(14deg)}}

/* — scene 04: flame flickers, scan aims at the cursor — */
.scene .flame{stroke:var(--accent);transform-box:fill-box;transform-origin:50% 100%}
.scene.on .flame{animation:flick 1.1s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scaleY(1)}40%{transform:scaleY(1.08) skewX(-2deg)}70%{transform:scaleY(.94) skewX(2deg)}}
.scene .scan{transform-box:fill-box;transform-origin:left center;
  transform:rotate(calc(var(--mx,0)*4deg));transition:transform .2s ease-out}

/* — scene 05: spokes spin — */
.scene .spoke{stroke:var(--accent);opacity:.5;stroke-width:1.1;fill:none}
.scene .wheel{transform-box:view-box}
.scene.on .wheel{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* — scene 01/03: whole art leans gently with the cursor — */
.scene[data-num="01"] .art svg,.scene[data-num="03"] .art svg{
  transform:translateX(calc(var(--mx,0)*8px));transition:transform .25s ease-out}

@media (prefers-reduced-motion:reduce){
  .scene.on .art{animation:none}
  .scene.on .art .dots,.scene.on .art .dots.sparse{animation:none;opacity:.45}
  .js .scene .art [data-d]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .scene .art .dash{stroke-dasharray:.012 .012}
  .scene .art .lbl{opacity:1;transition:none}
  .scene.on .traveler,.scene.on .tail,.scene.on .flame,.scene.on .wheel{animation:none}
  .scene .traveler{opacity:0}
  .scene .pupil,.scene .scan,.scene[data-num="01"] .art svg,.scene[data-num="03"] .art svg{
    transform:none;transition:none}
  .scenes{transition:none}
}

/* — labeled theme toggle (Jobs pass: no glyph-only buttons) — */
.themetoggle{width:auto;height:auto;padding:.45rem .85rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}