:root{
  --cream:#F5F0EB;
  --cream-2:#ece2d3;
  --cream-3:#e6dac8;   /* deeper alternating ground (v2.1) */
  --ink:#2D2A26;
  --ink-2:#403a33;     /* secondary ink for display on deeper grounds (v2.1) */
  --ink-soft:#5b5247;
  --muted:#6b6256;
  --faint:#8a7d6c;
  --terra:#9B5B3A;
  --terra-soft:#b27a55; /* lighter terracotta for hairlines/accents (v2.1) */
  --rule:#d8cbb8;
  --measure:62ch;
  /* v2.1 depth system */
  --shadow-warm:18px 24px 60px -28px rgba(45,42,38,0.28);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --reveal-dist:18px;
  --space-section:72px;
  --space-section-lg:104px;
  --space-section-sm:48px;
  --fs-display:clamp(34px,5vw,52px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"EB Garamond",Garamond,Georgia,serif;
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
p{margin:0 0 1em}
a{color:inherit}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);
  padding:10px 16px;z-index:30;
}
.skip-link:focus{left:8px;top:8px}

/* ============================================================
   SHARED SHELL (v2) — header/nav + footer, injected by build.py.
   Inherits the v1 design tokens; adds only chrome.
   ============================================================ */

/* Header: a quiet horizontal bar. On the homepage it sits over the
   full-bleed hero (transparent); on deeper pages it gets a solid cream
   ground via the .has-solid-header body class (set per-template). */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
}
/* Over the hero, a soft top-to-clear cream wash keeps nav links legible where
   the image is bright (the window side), without darkening the hero. */
body:not(.has-solid-header) .site-header::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;
  background:linear-gradient(180deg, rgba(245,240,235,0.55) 0%, rgba(245,240,235,0) 100%);
  pointer-events:none;
}
body.has-solid-header .site-header{
  position:sticky;background:var(--cream);
  border-bottom:0.5px solid var(--rule);
}
.site-header__inner{
  max-width:1100px;margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
  font-variant:small-caps;letter-spacing:0.12em;font-size:19px;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}

.site-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{
  font-size:15px;letter-spacing:0.02em;text-decoration:none;color:var(--muted);
  padding:6px 2px;border-bottom:1.5px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--terra)}
/* Over the hero the nav sits on a warm LIGHT image, so links are dark ink with a
   soft light halo for legibility against the brightest (window) areas. */
body:not(.has-solid-header) .brand,
body:not(.has-solid-header) .site-nav a{
  color:var(--ink);
  text-shadow:0 1px 6px rgba(245,240,235,0.9), 0 0 2px rgba(245,240,235,0.9);
}
body:not(.has-solid-header) .site-nav a{color:var(--ink-soft)}
body:not(.has-solid-header) .site-nav a:hover{color:var(--ink)}
body:not(.has-solid-header) .site-nav a[aria-current="page"]{color:var(--ink)}
body:not(.has-solid-header) .site-nav__cta{text-shadow:none}

/* The header "Read it free" affordance — a quiet pill, distinct from the big
   terracotta .btn used in page bodies. */
.site-nav__cta{
  background:var(--terra) !important;color:var(--cream) !important;
  border:none !important;border-radius:999px;padding:8px 18px !important;
  letter-spacing:0.03em;
}
.site-nav__cta:hover{background:#864c2f !important}

.site-footer{
  text-align:center;padding:30px 20px;border-top:0.5px solid var(--rule);
  font-size:13px;color:var(--faint);margin-top:8px;
}
.site-footer a{color:var(--faint);text-decoration:none;border-bottom:1px solid #c8bba6}
.site-footer a:hover{color:var(--ink)}

@media (max-width:680px){
  .site-header__inner{padding:14px 18px;gap:14px;flex-wrap:wrap}
  .site-nav{gap:16px}
  .site-nav a{font-size:14px}
  .site-nav__cta{padding:7px 14px !important}
}

/* Sticky CTA */
.sticky-cta{
  position:fixed;top:14px;right:16px;z-index:15;
  background:var(--terra);color:var(--cream);
  font-size:15px;letter-spacing:0.04em;text-decoration:none;
  padding:9px 20px;border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(45,42,38,0.55);
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease,transform .35s ease;pointer-events:none;
}
.sticky-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* Buttons + links */
.btn{
  display:inline-block;background:#b5642f;color:var(--cream);  /* warmer golden-terracotta — more inviting than the muted --terra */
  font-size:18px;letter-spacing:0.03em;text-decoration:none;
  padding:14px 42px;border-radius:4px;
  transition:background .2s ease,transform .1s ease;
}
.btn:hover{background:#9c5328}
.btn:active{transform:scale(.985)}
.btn:focus-visible,.quiet:focus-visible,a:focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;border-radius:2px;
}
.quiet{color:var(--muted);text-decoration:none;border-bottom:1px solid #b9a890}
.quiet:hover{color:var(--ink)}
/* a gentle "coming soon" note — NOT a link (so it never dead-ends); swapped for a
   real Amazon <a> when the KDP listing is live (book-launch PRD Phase 15b). */
.soon{color:var(--faint);font-style:italic}

/* HERO (v2) — full-bleed background image + overlaid title.
   Replaces the v1 skinny cover-thumbnail hero. The cream-side scrim keeps the
   upper-left title zone legible without darkening the whole (lighter) image. */
.hero-bleed{
  position:relative;
  min-height:min(88vh,760px);
  background-image:url('assets/hero_bg.jpg');
  /* cup pushed well right so it clears the centered text column + has breathing room */
  background-size:cover;background-position:86% center;
  /* text sits in the UPPER third (pulled higher, off the cup which sits lower-right) */
  display:flex;align-items:flex-start;
  overflow:hidden;
}
/* Warm cream wash — kept LIGHT so the golden cup/window glow reads through (the
   original v2 warmth). Legibility for the centered text comes from a soft cream
   pool behind it (radial), NOT from veiling the whole image. Same cream family
   as .excerpt::before/.threshold. */
.hero-bleed::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 42% 32%,
      rgba(245,240,235,0.90) 0%,
      rgba(245,240,235,0.60) 40%,
      rgba(245,240,235,0.16) 66%,
      rgba(245,240,235,0) 84%),
    linear-gradient(100deg,
      rgba(245,240,235,0.82) 0%,
      rgba(245,240,235,0.54) 40%,
      rgba(245,240,235,0.18) 68%,
      rgba(245,240,235,0.04) 100%);
}
/* centered title column, pulled into the UPPER third (off the cup) */
.hero-bleed__inner{
  position:relative;z-index:1;
  max-width:660px;margin-inline:auto;
  padding:128px 24px 64px;  /* top room for the transparent header; anchors near the top */
  text-align:center;
}
/* title + question in the warm brown family (was near-black --ink) — softer, more inviting */
.hero-bleed .title{font-variant:small-caps;letter-spacing:0.14em;font-size:30px;font-weight:500;margin:0;color:#7a3f28}
.hero-bleed .subtitle{
  font-style:italic;color:var(--ink-soft);font-size:19px;line-height:1.5;
  margin:.5em auto 1.3em;max-width:38ch;
}
.hero-bleed .hero-q{
  font-weight:400;font-size:27px;line-height:1.36;margin:1.1em auto 18px;max-width:none;
  color:#6f4a36;  /* warm deep brown — inviting, not stark black */
}
.hero-bleed .hero-drop{font-style:italic;color:var(--ink-soft);font-size:17px;margin:0 auto 30px;line-height:1.6;max-width:44ch}
.hero-bleed .reassure{font-size:15px;color:var(--muted);margin-top:16px;line-height:1.6}

@media (max-width:680px){
  .hero-bleed{min-height:auto;background-position:center}
  /* lighter, warmer vertical wash — still enough cover for stacked text, but the
     cup glow reads through instead of a flat cream veil */
  .hero-bleed::before{
    background:linear-gradient(180deg,
      rgba(245,240,235,0.82) 0%,
      rgba(245,240,235,0.62) 50%,
      rgba(245,240,235,0.80) 100%);
  }
  .hero-bleed__inner{margin-inline:auto;padding:96px 22px 48px;max-width:none}
  .hero-bleed .title{font-size:25px}
  .hero-bleed .hero-q{font-size:25px}
}

/* HERO (v1 — retained for reference; not used by the v2 Home) */
.hero{text-align:center;padding:26px 28px 72px;max-width:760px;margin:0 auto}
.cover{
  width:300px;height:auto;margin:8px auto 30px;display:block;border-radius:3px;
  box-shadow:0 22px 50px -22px rgba(45,42,38,0.55);
}
.title{font-variant:small-caps;letter-spacing:0.14em;font-size:26px;margin:0}
.subtitle{font-style:italic;color:var(--ink-soft);font-size:17px;margin:.2em 0 1.4em}
.hero-q{
  font-weight:400;font-size:31px;line-height:1.34;margin:0 auto 18px;max-width:30ch;
}
.hero-drop{font-style:italic;color:var(--ink-soft);font-size:17px;margin:0 0 32px;line-height:1.6}
.reassure{font-size:15px;color:var(--muted);margin-top:18px;line-height:1.6}

/* Generic cream band */
.band{padding:60px 32px;text-align:center}
.band.cream{background:var(--cream)}
.narrow,.narrow-p{max-width:var(--measure);margin-left:auto;margin-right:auto}
.band p{margin-left:auto;margin-right:auto;max-width:var(--measure)}
.six{font-size:16px;letter-spacing:0.04em;color:var(--terra);margin-bottom:1.1em}
.links{font-size:15px;color:var(--muted);margin-top:1.2em}
.links a{color:var(--muted);text-decoration:none;border-bottom:1px solid #b9a890}
.links a:hover{color:var(--ink)}

/* EXCERPT over hands/bread image */
.excerpt{
  background-size:cover;background-position:center;
  padding:0;position:relative;
}
.excerpt::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(236,226,211,0.30) 0%, rgba(245,240,235,0.86) 46%, rgba(245,240,235,0.95) 100%);
}
.excerpt-inner{
  position:relative;max-width:600px;margin-left:auto;margin-right:6%;
  padding:64px 32px;text-align:left;
}
.label{font-variant:small-caps;letter-spacing:0.18em;font-size:13px;color:var(--terra);margin-bottom:1.2em}
blockquote{margin:0;border-left:2px solid #c7a988;padding-left:24px;font-size:18px;line-height:1.78}
blockquote .turn{font-style:italic;margin-top:.4em}
.cite{font-size:15px;color:var(--muted);margin:1.1em 0 1.6em}

/* PASSAGES — curated pull-quotes */
.passages .label.center{text-align:center;display:block;margin-bottom:2.2em}
.center{text-align:center}
.passage{margin:0 auto 2.6em;max-width:60ch;padding-bottom:2.6em;border-bottom:1px solid #e0d4c0}
.passage:last-of-type{border-bottom:none}
.passage blockquote{
  margin:0;font-size:22px;line-height:1.6;color:var(--ink);font-style:normal;
}
.passage figcaption{
  margin-top:1em;font-size:14px;letter-spacing:0.06em;color:var(--terra);
  font-variant:small-caps;
}
.passages .center .btn{margin-top:.6em}

/* DEEPER PAGES (v2) — How It Was Built + The Artifacts. Editorial, on cream,
   solid header. Reuses the band/passage system; adds a page header + a quiet
   source-list + titled cards for the tensions. */
.page-head{
  padding:96px 32px 8px;text-align:center;max-width:64ch;margin:0 auto;
}
.page-head h1{
  font-variant:small-caps;letter-spacing:0.08em;font-weight:400;font-size:34px;
  margin:0 0 .5em;color:var(--ink);
}
.page-head .standfirst{font-size:19px;color:var(--ink-soft);line-height:1.6;font-style:italic}

.section-label{
  font-variant:small-caps;letter-spacing:0.14em;font-size:14px;color:var(--terra);
  text-align:center;display:block;margin:0 0 1.4em;
}

/* quiet tradition→source list */
.sourcelist{max-width:52ch;margin:1.6em auto 0;list-style:none;padding:0}
.sourcelist li{
  padding:.55em 0;border-bottom:1px solid #e4d9c6;
  display:flex;justify-content:space-between;gap:18px;font-size:17px;
}
.sourcelist li:last-child{border-bottom:none}
.sourcelist .trad{color:var(--ink);font-variant:small-caps;letter-spacing:0.04em}
.sourcelist .src{color:var(--muted);font-style:italic;text-align:right}

/* titled cards (the 13 tensions, convergences) */
.cards{max-width:64ch;margin:1.6em auto 0;display:flex;flex-direction:column;gap:1.4em}
.card{
  background:#fbf8f3;border:1px solid var(--rule);border-radius:5px;padding:22px 26px;
}
.card h3{
  font-variant:small-caps;letter-spacing:0.05em;font-weight:500;font-size:17px;
  color:var(--terra);margin:0 0 .5em;
}
.card p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.card blockquote{margin:0;border-left:2px solid #c7a988;padding-left:18px;font-size:17px;line-height:1.7;color:var(--ink)}

/* convergence quoted moments */
.converge{max-width:62ch;margin:1.4em auto 0;display:flex;flex-direction:column;gap:1.8em}
.converge .pair{font-variant:small-caps;letter-spacing:0.06em;font-size:13px;color:var(--terra);margin-bottom:.5em;display:block}
.converge blockquote{margin:0;border-left:2px solid #c7a988;padding-left:20px;font-size:18px;line-height:1.72;color:var(--ink)}

@media (max-width:680px){
  .page-head{padding:72px 22px 4px}
  .page-head h1{font-size:28px}
  .sourcelist li{flex-direction:column;gap:2px}
  .sourcelist .src{text-align:left}
}

/* THE AGENTS RESPOND (v2) — the Home centerpiece. A faint cream-2 ground sets
   the chorus apart; each voice is a hairline-ruled block that breathes. */
.agents{
  background:var(--cream-2);
  padding:76px 32px;
}
.agents__intro{max-width:60ch;margin:0 auto 3em;text-align:center}
.agents__intro .label{display:block;margin-bottom:1.2em}
.agents__frame{font-style:italic;color:var(--ink-soft);font-size:18px;line-height:1.7}
.agents__lead{color:var(--muted);font-size:17px;margin-top:1.2em}
.agents__list{max-width:64ch;margin:0 auto;display:flex;flex-direction:column;gap:2.6em}
.voice{padding-top:2.6em;border-top:1px solid var(--rule)}
.voice:first-child{padding-top:0;border-top:none}
.voice__name{
  font-variant:small-caps;letter-spacing:0.1em;font-size:18px;color:var(--terra);
  margin:0 0 .7em;
}
.voice blockquote{
  margin:0;border-left:2px solid #c7a988;padding-left:24px;
  font-size:18px;line-height:1.78;color:var(--ink);
}
.voice em{font-style:italic}
.agents__more{text-align:center;margin:3em auto 0;max-width:60ch}
.agents__more a{color:var(--terra);text-decoration:none;border-bottom:1px solid #c7a07f}
.agents__more a:hover{color:#864c2f}

@media (max-width:680px){
  .agents{padding:56px 22px}
  .voice blockquote{font-size:17px;padding-left:18px}
}

/* THRESHOLD (softened) */
.threshold{
  background-size:cover;background-position:center;
  padding:88px 34px;text-align:center;
}
.threshold-inner{max-width:54ch;margin:0 auto}
.threshold h2{
  font-variant:small-caps;letter-spacing:0.1em;font-weight:400;font-size:23px;margin:0 0 1.1em;
}
.threshold .pull{font-style:italic;color:var(--terra);font-size:19px;line-height:1.7}

/* THE CODE — fork it (v2). A prominent inset "workshop door" block, not a footnote. */
.code-section{padding:64px 32px;text-align:center}
.code-card{
  max-width:640px;margin:0 auto;
  background:#fbf8f3;border:1px solid var(--rule);border-radius:6px;
  padding:40px 36px;
  box-shadow:0 18px 44px -28px rgba(45,42,38,0.45);
}
.code-card .label{display:block;margin-bottom:1.1em}
.code-card p{font-size:18px;line-height:1.7;margin:0 0 1.2em}
.code-card .repo{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:14px;color:var(--muted);word-break:break-all;
}
.code-card .btn{margin-top:.4em}

/* INVITATION */
.invite p:first-child{font-size:18px;line-height:1.78}
.subscribe{font-size:14px;color:var(--faint);margin-top:.6em}
.subscribe a{color:var(--faint);border-bottom:1px solid #c8bba6;text-decoration:none}

/* FOOTER */
footer{
  text-align:center;padding:26px 20px;border-top:0.5px solid var(--rule);
  font-size:13px;color:var(--faint);
}
footer a{color:var(--faint);text-decoration:none;border-bottom:1px solid #c8bba6}

/* (Scroll-reveal animation intentionally removed — a quiet literary page
   doesn't need it, and opacity:0-until-observed risks invisible content on
   slow/odd renderers. Content is always visible.) */

/* Mobile */
@media (max-width:680px){
  body{font-size:18px}
  .hero{padding:18px 22px 56px}
  .cover{width:240px}
  .hero-q{font-size:26px}
  .title{font-size:23px}
  .band{padding:48px 24px}
  .excerpt-inner{margin:0;max-width:none;padding:52px 24px}
  .excerpt::before{background:linear-gradient(180deg, rgba(245,240,235,0.62) 0%, rgba(245,240,235,0.92) 40%)}
  .threshold{padding:64px 26px}
  .sticky-cta{top:10px;right:10px;font-size:14px;padding:8px 16px}
}

/* ============================================================
   V2.1 VISUAL-DEPTH SYSTEM — section-treatment variety, type/whitespace
   hierarchy, warm grounds. Hand-built; extends the v2 tokens above.
   (Motion + the interactive six-voices live in the JS-armed blocks at the
   very bottom — content here is ALWAYS visible without JS.)
   ============================================================ */

/* §2 THE EXPERIMENT — prose + an experiment-at-a-glance stat strip */
.experiment{padding:var(--space-section) 32px;text-align:center}
.experiment > p{margin-left:auto;margin-right:auto;max-width:var(--measure)}
.stat-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;
  max-width:760px;margin:2.6em auto 0;padding-top:2em;
  border-top:1px solid var(--rule);
}
.stat{flex:0 1 auto;min-width:120px}
.stat__num{
  display:block;font-size:var(--fs-display);line-height:1;color:var(--terra);
  font-variant:lining-nums;letter-spacing:0.01em;
}
.stat__label{
  display:block;margin-top:.35em;font-variant:small-caps;letter-spacing:0.12em;
  font-size:13px;color:var(--ink-soft);
}

/* divider mark — a quiet beat between major shifts */
.rule-mark{
  border:0;width:100%;max-width:560px;margin:8px auto;padding:0;
  text-align:center;color:var(--terra-soft);
}
.rule-mark::before{
  content:"\00B7";display:inline-block;font-size:26px;line-height:1;
  position:relative;top:-2px;
}
.rule-mark::after{
  content:"";display:block;width:64px;height:1px;margin:6px auto 0;
  background:var(--terra-soft);opacity:.55;
}

/* §4 THE WEIGHT — editorial drop-cap essay register */
.essay{padding:var(--space-section) 32px;text-align:left}
.essay__inner{max-width:60ch;margin:0 auto}
.essay--dropcap .essay__inner > p:first-of-type::first-letter{
  float:left;font-size:3.4em;line-height:.82;padding:.04em .12em 0 0;
  color:var(--terra);font-weight:500;
}
.essay p{margin-bottom:1.1em}

/* §5 THE FIRE — feature pull-quote CARD (heavier than .passage) */
.quote-feature{padding:var(--space-section) 24px;display:flex;justify-content:center}
.quote-feature__card{
  position:relative;max-width:60ch;background:var(--cream-2);
  border:1px solid var(--rule);border-radius:2px;
  padding:3.2rem 2.4rem 2.4rem;box-shadow:var(--shadow-warm);
}
.quote-feature__card::before{
  content:"\201C";position:absolute;top:.18em;left:.32em;
  font-size:5.2em;line-height:1;color:var(--terra-soft);opacity:.5;
}
.quote-feature blockquote{
  margin:0;font-size:21px;line-height:1.7;color:var(--ink);position:relative;
}
.quote-feature figcaption{
  margin-top:1.2em;font-style:italic;color:var(--muted);font-size:17px;
}

/* §8 THE VOICES — deeper ground to set the centerpiece apart.
   Phase 7 ships the readable vertical list (reuses .voice from v2);
   Phase 8 layers the interactive tablist on top (.js-tabs). */
.voices{background:var(--cream-2);padding:var(--space-section-lg) 32px}
.voices__intro{max-width:60ch;margin:0 auto 2.6em;text-align:center}
.voices__intro .label{display:block;margin-bottom:1.1em}
.voices__lead{color:var(--muted);font-size:17px;margin-top:1em}

/* --- six-voices interactive tablist (v2.1) ---
   NO-JS DEFAULT: tabs hidden; ALL panels visible (the readable list, even
   inactive ones marked [hidden]). main.js adds .js-tabs to <html> only after
   wiring, which flips to the tabbed interaction. */
.voices__tabs{display:none}            /* meaningless without JS */
.voices__panels{max-width:64ch;margin:0 auto;display:flex;flex-direction:column;gap:2.6em}
.voices__panel{display:block}          /* visible by default... */
.voices__panel[hidden]{display:block}  /* ...even when [hidden] (no-JS fallback beats UA sheet) */

html.js-tabs .voices__tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;
  max-width:720px;margin:0 auto 2.4em;
}
html.js-tabs .voices__tab{
  font-family:inherit;font-size:16px;font-variant:small-caps;letter-spacing:0.08em;
  color:var(--ink-soft);background:transparent;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;
  min-height:44px;padding:6px 18px;transition:color .2s,border-color .2s,background .2s;
}
html.js-tabs .voices__tab:hover{color:var(--ink);border-color:var(--terra-soft)}
html.js-tabs .voices__tab.is-active{
  color:var(--cream);background:var(--terra);border-color:var(--terra);
}
html.js-tabs .voices__panels{display:block;max-width:64ch;margin:0 auto;min-height:1px}
html.js-tabs .voices__panel{display:none}
html.js-tabs .voices__panel[hidden]{display:none}
html.js-tabs .voices__panel.is-active{display:block;animation:voiceFade .25s var(--ease-out)}
@keyframes voiceFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* focus ring for tabs + links (terracotta) */
.voices__tab:focus-visible,.agents__more a:focus-visible,
.btn:focus-visible,.site-nav a:focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html.js-tabs .voices__panel.is-active{animation:none}
}

/* §11 THE CODE — tech-tinted feature card (bridges to the builder reader) */
.code-card--tech{
  border-top:2px solid var(--terra);
}
.code-card--tech .repo{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:0;color:var(--ink-soft);
  background:var(--cream-2);border:1px solid var(--rule);border-radius:2px;
  padding:.5em .8em;display:inline-block;
}

/* ---- For-Builders disclosures (How-It page, v2.1) ----
   Native <details>: keyboard + content-in-DOM for free. Content visible w/o JS
   (toggling works without JS; even closed, the text is in the markup). */
.builders{
  max-width:60ch;margin:2.4em auto 0;text-align:left;
  border-top:1px solid var(--rule);padding-top:1.2em;
}
.builders--center{margin-left:auto;margin-right:auto}
.builders__summary{
  cursor:pointer;list-style:none;
  font-variant:small-caps;letter-spacing:0.08em;font-size:15px;
  color:var(--terra);display:flex;align-items:center;gap:.6em;
}
.builders__summary::-webkit-details-marker{display:none}
.builders__summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;
  border-right:2px solid var(--terra-soft);border-bottom:2px solid var(--terra-soft);
  rotate:-45deg;transition:rotate .2s var(--ease-out);
}
.builders[open] > .builders__summary::before{rotate:45deg}
.builders__summary:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
.builders__body{margin-top:1.1em;color:var(--ink-soft)}
.builders__body p{font-size:17px;line-height:1.7}
.builders--center .builders__body{text-align:left}

.artifact{margin:1.2em 0}
blockquote.artifact{
  border-left:3px solid var(--terra-soft);margin:1.2em 0;padding:.2em 0 .2em 1.2em;
  font-style:italic;color:var(--ink);font-size:17px;line-height:1.7;
}
.artifact--code{
  background:#efe7da;border:1px solid var(--rule);border-radius:2px;
  padding:1em 1.1em;overflow-x:auto;max-width:100%;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre;
  font-style:normal;
}
.artifact--code code{font-family:inherit;display:inline-block;min-width:0}
/* the For-Builders body must let an overflow-x:auto code block scroll internally
   instead of pushing the page wide on mobile */
.builders,.builders__body{min-width:0}
.builders__body{max-width:100%;overflow-wrap:break-word}
.artifact__cap{
  font-size:14px;color:var(--muted);margin-top:.6em;
}
.artifact__cap code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--cream-2);padding:.1em .35em;border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  .builders__summary::before{transition:none}
}

/* hero scroll-cue chevron */
.hero-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:26px;height:26px;border:0;border-right:2px solid var(--terra-soft);
  border-bottom:2px solid var(--terra-soft);rotate:45deg;opacity:.6;
  background:none;pointer-events:none;
}

/* big-screen polish */
@media (min-width:900px){
  .stat-strip{gap:14px 64px}
}

/* mobile depth tweaks */
@media (max-width:680px){
  .experiment,.essay,.quote-feature,.voices{padding-left:22px;padding-right:22px}
  .voices{padding-top:64px;padding-bottom:64px}
  .quote-feature__card{padding:2.6rem 1.5rem 1.8rem}
  .essay--dropcap .essay__inner > p:first-of-type::first-letter{font-size:3em}
  .stat__num{font-size:38px}
  .hero-cue{display:none}
}

/* ============================================================
   MOTION LAYER — opt-in via .js-reveal (added by main.js ONLY when JS runs).
   DEFAULT (no JS / this file alone): .reveal has NO opacity/transform, so all
   content is visible. The reveal is armed only under the .js-reveal ancestor.
   (Phase 8 wires main.js to add .js-reveal + observe .is-in.)
   ============================================================ */
.reveal{}  /* intentionally empty — content visible by default (no-JS guard) */
.js-reveal .reveal{
  opacity:0;transform:translateY(var(--reveal-dist));
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change:opacity,transform;
}
.js-reveal .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js-reveal .reveal{opacity:1;transform:none;transition:none}
  .sticky-cta{transition:none}
}