/* ============================================================
   Equilibrium Engine — guided exploration
   Themeable: [data-theme=dark|light]  [data-world=keep|night]
   Tokens implemented from design_tokens.json
   ============================================================ */

/* ---------- THEME TOKENS ---------- */
:root[data-theme="dark"]{
  --bg-base:#0a0e1a; --bg-inset:#0c1120; --bg-surface:#121a2c;
  --bg-elevated:#162034; --bg-panel:#141c30;
  --text-primary:#e8edf7; --text-secondary:#aeb8d0; --text-muted:#7a86a2; --text-faint:#5e6a89;
  --border-hairline:#243049; --border-strong:#364361; --border-focus:#5aa2ff;
  --accent-blue:#5aa2ff; --accent-blue-soft:#8fc0ff;
  --accent-orange:#ff8a4d; --accent-orange-soft:#ffb482;
  --ink:#cdd6e8;                /* sketch linework on dark */
  --ink-faint:#5d6a88;
  --glow-blue:0 0 24px rgba(90,162,255,.35);
  --glow-orange:0 0 24px rgba(255,138,77,.35);
  --glow-ambient:0 0 120px rgba(90,162,255,.10);
  --card-shadow:0 1px 0 rgba(255,255,255,.04), 0 14px 44px rgba(0,0,0,.45);
  --demo-shadow:inset 0 0 0 1px var(--border-strong), 0 24px 70px rgba(0,0,0,.55);
  --paper-texture:0;            /* signal grid opacity */
  --grid-stroke:rgba(120,150,210,.05);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg-base:#f5f7fb; --bg-inset:#eef1f7; --bg-surface:#ffffff;
  --bg-elevated:#ffffff; --bg-panel:#fbfcff;
  --text-primary:#1c2230; --text-secondary:#465065; --text-muted:#6e7789; --text-faint:#828c9f;
  --border-hairline:#dde2ec; --border-strong:#c4ccda; --border-focus:#2f6fd0;
  --accent-blue:#2f6fd0; --accent-blue-soft:#5b8fde;
  --accent-orange:#cf6a1a; --accent-orange-soft:#e08a3e;
  --ink:#3a4456;                /* graphite linework on paper */
  --ink-faint:#aab2c2;
  --glow-blue:none; --glow-orange:none; --glow-ambient:none;
  --card-shadow:0 1px 2px rgba(28,34,48,.06), 0 8px 24px rgba(28,34,48,.06);
  --demo-shadow:inset 0 0 0 1px var(--border-strong), 0 18px 44px rgba(28,34,48,.10);
  --grid-stroke:rgba(60,80,120,.06);
  color-scheme:light;
}

/* ---------- TYPE / SPACE TOKENS ---------- */
:root{
  --font-display:'Cormorant Garamond','Marcellus','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1080px; --prose:720px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-reveal:560ms; --dur-theme:260ms; --dur-draw:1200ms; --stagger:80ms; --pulse:900ms;
  --section-gap:clamp(80px,13vh,168px);
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-base); color:var(--text-primary);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease);
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}
::selection{background:color-mix(in oklab,var(--accent-blue) 32%, transparent); color:var(--text-primary);}

/* ambient signal-grid texture on dark; faint paper on light */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-stroke) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-stroke) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 80%);
  opacity:.9;
}
:root[data-theme="dark"] body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 22% 12%, rgba(90,162,255,.10), transparent 70%),
    radial-gradient(55% 38% at 82% 30%, rgba(255,138,77,.07), transparent 70%);
}

/* ---------- LAYOUT ---------- */
main{position:relative; z-index:1;}
.scene{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  padding-block:var(--section-gap);
}
.scene--tight{padding-block:clamp(48px,7vh,90px);}
.prose{max-width:var(--prose);}
.center{margin-left:auto; margin-right:auto;}

/* eyebrow / scene index */
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-muted); display:flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--border-strong);}
.eyebrow .num{color:var(--accent-blue);}

/* headings */
h1,h2,h3{font-weight:400; margin:0; letter-spacing:.01em; text-wrap:balance;}
.display{
  font-family:var(--font-display); font-weight:400; line-height:1.04;
  font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:.005em;
}
.h2{font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1; font-weight:400;}
.h3{font-family:var(--font-display); font-size:1.45rem; line-height:1.2;}
p{margin:0 0 1.1rem; color:var(--text-secondary); text-wrap:pretty;}
p strong, .body strong{color:var(--text-primary); font-weight:600;}
.lead{font-size:1.18rem; color:var(--text-secondary); line-height:1.62;}
em{font-style:italic; color:var(--text-primary);}
.accent-b{color:var(--accent-blue);} .accent-o{color:var(--accent-orange);}
.mono{font-family:var(--font-mono);}

/* ============================================================
   HEADER  (Scene 0)
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px clamp(18px,4vw,40px);
  background:color-mix(in oklab,var(--bg-base) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--border-hairline);
  transition:background var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;}
.brand svg{width:30px; height:30px; flex:none; color:var(--ink);}
.brand .wm{display:flex; flex-direction:column; line-height:1; min-width:0;}
.brand .wm b{
  font-family:var(--font-display); font-weight:500; font-size:1.06rem; letter-spacing:.14em;
  color:var(--text-primary); white-space:nowrap;
}
.brand .wm span{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--text-muted); margin-top:3px;
}
.topbar-actions{display:flex; align-items:center; gap:10px;}

/* segmented toggle (theme + world share the shell) */
.seg{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--bg-surface); border:1px solid var(--border-hairline); border-radius:999px;
  transition:background var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease);
}
.seg button{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:0; background:transparent; color:var(--text-muted);
  font-size:.82rem; font-weight:500; padding:6px 12px; border-radius:999px;
  letter-spacing:.01em; transition:color 180ms var(--ease), background 180ms var(--ease);
  white-space:nowrap;
}
.seg button .ic{font-size:.95rem; line-height:1;}
.seg button[aria-pressed="true"]{
  color:var(--text-primary); background:var(--bg-elevated);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18);
}
:root[data-theme="light"] .seg button[aria-pressed="true"]{box-shadow:0 1px 3px rgba(28,34,48,.12);}
.seg.mode button[data-mode-btn="keep"][aria-pressed="true"]{color:var(--accent-orange);}
.seg.mode button[data-mode-btn="night"][aria-pressed="true"]{color:var(--accent-blue);}
.seg-label{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); margin-right:2px; align-self:center;
}
.repo-link{
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); text-decoration:none;
  padding:6px 8px; border-radius:8px; transition:color 160ms;
}
.repo-link:hover{color:var(--text-primary);}

/* focus visibility */
:focus-visible{outline:2px solid var(--border-focus); outline-offset:3px; border-radius:4px;}

/* ============================================================
   BUTTONS / CTAs
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none;
  font-size:.95rem; font-weight:500; padding:13px 22px; border-radius:999px;
  border:1px solid transparent; transition:transform 200ms var(--ease), box-shadow 240ms var(--ease),
    background 200ms, color 200ms, border-color 200ms;
}
.btn .arr{transition:transform 240ms var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn-primary{
  background:var(--accent-blue); color:#08111f; border-color:var(--accent-blue);
  box-shadow:var(--glow-blue);
}
:root[data-theme="light"] .btn-primary{color:#fff;}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 0 32px rgba(90,162,255,.5);}
:root[data-theme="light"] .btn-primary:hover{box-shadow:0 8px 22px rgba(47,111,208,.25);}
.btn-ghost{
  background:transparent; color:var(--text-primary); border-color:var(--border-strong);
}
.btn-ghost:hover{border-color:var(--accent-blue); color:var(--accent-blue); transform:translateY(-1px);}

/* small text link with arrow */
.tlink{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em; color:var(--accent-blue);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 180ms, gap 180ms;
}
.tlink:hover{border-color:var(--accent-blue); gap:11px;}

/* ============================================================
   HERO (Scene 1)
   ============================================================ */
.hero{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
  max-width:1180px; margin:0 auto; padding:clamp(40px,7vh,96px) 28px clamp(56px,9vh,120px);
  min-height:calc(100vh - 64px);
}
.hero-copy{max-width:560px;}
.hero h1{margin-bottom:22px;}
.hero .lead{margin-bottom:30px; max-width:30ch;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px;}
.hero-micro{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; color:var(--text-muted);}
.hero-micro b{color:var(--text-secondary); font-weight:500;}

.hero-visual{position:relative; display:flex; justify-content:center; align-items:center;}
.hero-visual .glowwrap{position:relative; width:100%; max-width:560px;}
:root[data-theme="dark"] .hero-visual .glowwrap::before{
  content:""; position:absolute; inset:-8%; border-radius:50%;
  background:radial-gradient(circle at 28% 50%, rgba(90,162,255,.18), transparent 55%),
             radial-gradient(circle at 74% 46%, rgba(255,138,77,.14), transparent 55%);
  filter:blur(20px); z-index:0;
}
.hero-visual img{position:relative; z-index:1; width:100%;}
.hero-img-dark{display:block;}
.hero-img-light{display:none;}
:root[data-theme="light"] .hero-img-dark{display:none;}
:root[data-theme="light"] .hero-img-light{display:block;}

/* scroll cue */
.scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0 auto; width:max-content; color:var(--text-muted);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
}
.scrollcue .line{width:1px; height:46px; background:linear-gradient(var(--accent-blue),transparent);}
@media (prefers-reduced-motion:no-preference){
  .scrollcue .line{animation:cuepulse 2.4s var(--ease) infinite;}
}
@keyframes cuepulse{0%,100%{opacity:.35; transform:scaleY(.7);}50%{opacity:1; transform:scaleY(1);}}

/* ============================================================
   FIGURE / SVG DIAGRAM FRAMES
   ============================================================ */
.figure{margin:38px 0 0;}
.figure svg{width:100%; height:auto; display:block; overflow:visible;}
.figcap{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; color:var(--text-muted);
  margin-top:14px; display:flex; gap:10px; align-items:baseline;
}
.figcap .k{color:var(--accent-blue);}

/* shared svg markers (in #ee-defs) themed via CSS */
marker.ah path{fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
marker.ah.ink path{stroke:var(--ink);}
marker.ah.blue path{stroke:var(--accent-blue);}
marker.ah.orange path{stroke:var(--accent-orange);}
marker.ah.muted path{stroke:var(--ink-faint);}

/* hand-drawn sketch stroke defaults for inline svg */
.sketch{color:var(--ink);}
.sketch .stroke{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.sketch .thin{stroke-width:1; opacity:.7;}
.sketch .axis{stroke:var(--ink-faint); stroke-width:1; }
.sketch .grid{stroke:var(--ink-faint); stroke-width:.6; opacity:.5;}
.sketch .blue{stroke:var(--accent-blue);}
.sketch .orange{stroke:var(--accent-orange);}
.sketch .fill-blue{fill:var(--accent-blue);}
.sketch .fill-orange{fill:var(--accent-orange);}
.sketch .lbl{fill:var(--text-muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;}
.sketch .lbl-ink{fill:var(--text-secondary);}
.sketch .t-strong{fill:var(--accent-orange); font-weight:600;}
.sketch .t-mid{fill:var(--accent-orange); opacity:.78;}
.sketch .t-soft{fill:var(--text-muted);}
.sketch .t-faint{fill:var(--text-faint);}
.sketch .threshold{stroke:var(--accent-orange); stroke-width:1.2; stroke-dasharray:5 5; opacity:.85;}
.sketch .node{fill:var(--bg-base); stroke:currentColor; stroke-width:1.5;}
:root[data-theme="dark"] .sketch{filter:drop-shadow(0 0 .4px rgba(255,255,255,.15));}

/* ============================================================
   EMBEDDED DEMO BEZEL
   ============================================================ */
.demoframe{margin:36px 0 0;}
.demoframe .bezel-cap{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-muted); margin-bottom:10px;
  flex-wrap:wrap;
}
.demoframe .bezel-cap .t{display:flex; align-items:center; gap:9px;}
.demoframe .bezel-cap .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-orange); box-shadow:var(--glow-orange);}
.bezel{
  padding:10px; border-radius:16px; background:var(--bg-surface);
  border:1px solid var(--border-strong); box-shadow:var(--demo-shadow);
  transition:background var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease);
}
.bezel iframe{
  width:100%; height:560px; border:0; border-radius:9px; background:var(--bg-inset);
  display:block;
}
.bezel.tall iframe{height:660px;}

/* ============================================================
   SPLIT MOMENT highlight pill (Scene 2)
   ============================================================ */
.pin{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px;
  background:var(--bg-surface); border:1px dashed var(--border-strong);
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-secondary); margin-top:6px;
}
.pin .tack{width:8px; height:8px; border-radius:50%; background:var(--accent-blue);}
.pathlabels{display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:22px;}
.pathlabel{display:flex; gap:12px; align-items:flex-start; max-width:300px;}
.pathlabel .bar{width:3px; align-self:stretch; border-radius:2px; flex:none;}
.pathlabel.left .bar{background:var(--accent-blue);}
.pathlabel.right .bar{background:var(--accent-orange);}
.pathlabel .ttl{font-weight:600; color:var(--text-primary); font-size:.95rem;}
.pathlabel .sub{font-size:.86rem; color:var(--text-muted);}
.pathlabel em{font-style:italic;}

/* ============================================================
   CALLOUTS (Scene 3)
   ============================================================ */
.callouts{display:grid; gap:14px; margin-top:30px;}
@media(min-width:720px){.callouts{grid-template-columns:1fr 1fr;}}
.callout{
  padding:16px 18px; border-radius:14px; background:var(--bg-surface);
  border:1px solid var(--border-hairline); box-shadow:var(--card-shadow);
}
.callout .tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-orange); margin-bottom:7px;
}
.callout.slow .tag{color:var(--accent-blue);}
.callout p{margin:0; font-size:.94rem; color:var(--text-secondary);}

/* ============================================================
   ADVANCED EXPANDABLE (Scene 4)
   ============================================================ */
.advanced{
  margin-top:30px; border:1px solid var(--border-hairline); border-radius:14px;
  background:var(--bg-surface); overflow:hidden;
}
.advanced summary{
  cursor:pointer; list-style:none; padding:16px 20px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.84rem; color:var(--text-secondary);
}
.advanced summary::-webkit-details-marker{display:none;}
.advanced summary .chev{
  width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform 220ms var(--ease); color:var(--text-muted);
}
.advanced[open] summary .chev{transform:rotate(45deg);}
.advanced summary .pilltag{
  margin-left:auto; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); border:1px solid var(--border-hairline); padding:3px 9px; border-radius:999px;
}
.advanced .adv-body{padding:0 20px 20px;}
.advanced pre{
  font-family:var(--font-mono); font-size:.82rem; line-height:1.7; color:var(--text-secondary);
  background:var(--bg-inset); border:1px solid var(--border-hairline); border-radius:10px;
  padding:16px 18px; overflow-x:auto; margin:6px 0 14px;
}
.advanced pre b{color:var(--accent-blue); font-weight:600;}
.advanced pre .o{color:var(--accent-orange);}
.advanced .adv-body p{font-size:.9rem; margin:0;}

/* ============================================================
   THEME-SWAPPED RASTER ART (diagrams, logo, world scenes)
   ============================================================ */
.themeimg{position:relative;}
.themeimg img{width:100%; height:auto; display:block;}
.themeimg .t-light{display:none;}
:root[data-theme="light"] .themeimg .t-dark{display:none;}
:root[data-theme="light"] .themeimg .t-light{display:block;}

/* header brand mark — head-in-loop emblem, theme-swapped */
.brand-mark{display:inline-flex; width:36px; height:32px; flex:none; align-items:center;}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.brand-mark .t-light{display:none;}
:root[data-theme="light"] .brand-mark .t-dark{display:none;}
:root[data-theme="light"] .brand-mark .t-light{display:block;}

/* world-proof as themed + world-skinned scene art (4 combinations) */
.worldproof.scene-art{
  aspect-ratio:16/9; background-repeat:no-repeat; background-position:center;
  background-size:contain; background-color:var(--bg-inset);
  transition:background-color var(--dur-theme) var(--ease);
}
:root[data-theme="dark"][data-world="keep"]  .worldproof.scene-art{background-image:url(assets/world_proof-keep-dark.webp);}
:root[data-theme="dark"][data-world="night"] .worldproof.scene-art{background-image:url(assets/world_proof-night-dark.webp);}
:root[data-theme="light"][data-world="keep"] .worldproof.scene-art{background-image:url(assets/world_proof-keep-light.webp);}
:root[data-theme="light"][data-world="night"].worldproof.scene-art,
:root[data-theme="light"][data-world="night"] .worldproof.scene-art{background-image:url(assets/world_proof-night-light.webp);}

/* ============================================================
   SCENARIO EXPLORER (Scene 6) + reusable placeholder slot
   ============================================================ */
/* ph-slot in a scenario card — match height of illustrated card images */
.scenario .ph-slot{aspect-ratio:1/1; min-height:unset;}
.scenario-img{overflow:hidden; border-bottom:1px solid var(--border-hairline);}
.scenario-img img{width:100%; height:auto; display:block; transition:transform 400ms var(--ease);}
.scenario:hover .scenario-img img{transform:scale(1.03);}

.scenario-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:42px;}
@media(min-width:760px){.scenario-grid{grid-template-columns:1fr 1fr;}}
.scenario{
  position:relative; display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:18px; background:var(--bg-surface); border:1px solid var(--border-hairline);
  box-shadow:var(--card-shadow);
  transition:transform 340ms var(--ease), border-color 340ms var(--ease), box-shadow 340ms var(--ease);
}
.scenario:hover{transform:translateY(-5px); border-color:var(--border-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 26px 60px rgba(0,0,0,.5);}
:root[data-theme="light"] .scenario:hover{box-shadow:0 16px 40px rgba(28,34,48,.13);}
.scenario-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:7px;}
.scenario h3{font-family:var(--font-display); font-size:1.5rem; line-height:1.12;}
.scenario .hook{color:var(--text-secondary); font-size:.98rem; margin:0;}
.scenario .cta{
  margin-top:8px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.82rem; color:var(--accent-blue);
}
.scenario .cta .arr{transition:transform 240ms var(--ease);}
.scenario:hover .cta .arr{transform:translateX(4px);}

/* wide rectangle card — the live playground (image shown at full height) */
.scenario.wide{grid-column:1 / -1; flex-direction:row; align-items:stretch;}
.scenario.wide .wide-img{position:relative; flex:0 0 42%; overflow:hidden; border-right:1px solid var(--border-hairline);}
.scenario.wide .wide-img img{width:100%; height:auto; transition:transform 500ms var(--ease);}
.scenario.wide .wide-img .t-light{display:none;}
:root[data-theme="light"] .scenario.wide .wide-img .t-dark{display:none;}
:root[data-theme="light"] .scenario.wide .wide-img .t-light{display:block;}
.scenario.wide:hover .wide-img img{transform:scale(1.04);}
.scenario.wide .scenario-body{flex:1; justify-content:center; gap:10px; padding:26px 28px;}
.live-chip{display:inline-flex; align-items:center; gap:8px; width:max-content;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-orange); padding:4px 11px; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--accent-orange) 45%,transparent);
  background:color-mix(in oklab,var(--accent-orange) 8%,transparent);}
.live-chip i{width:7px; height:7px; border-radius:50%; background:var(--accent-orange); box-shadow:var(--glow-orange);}
.lang-chip{display:inline-flex; align-items:center; gap:7px; width:max-content;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-blue); padding:3px 10px; border-radius:999px; margin-bottom:2px;
  border:1px solid color-mix(in oklab,var(--accent-blue) 42%,transparent);
  background:color-mix(in oklab,var(--accent-blue) 8%,transparent);}
@media (prefers-reduced-motion:no-preference){
  .live-chip i{animation:livepulse 1.8s var(--ease) infinite;}
  @keyframes livepulse{0%,100%{opacity:.5;}50%{opacity:1;}}
}
@media(max-width:760px){
  .scenario.wide{flex-direction:column; min-height:0;}
  .scenario.wide .wide-img{flex:none; height:170px; border-right:0; border-bottom:1px solid var(--border-hairline);}
}

/* reusable reserved-image placeholder slot (brief's striped + monospace style) */
.ph-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; text-align:center; padding:26px 22px; min-height:188px; aspect-ratio:16/10;
  background-color:var(--bg-inset);
  background-image:repeating-linear-gradient(135deg, var(--border-hairline) 0 1px, transparent 1px 13px);
  border-bottom:1px solid var(--border-hairline); overflow:hidden;
}
.ph-slot .ph-fill{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity var(--dur-theme) var(--ease);
}
.ph-slot.filled .ph-fill{opacity:1;}
.ph-slot.filled .ph-tag,.ph-slot.filled .ph-art,.ph-slot.filled .ph-file,.ph-slot.filled .ph-note{display:none;}
.ph-slot .ph-tag{
  position:absolute; top:12px; left:12px; font-family:var(--font-mono);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  border:1px dashed var(--border-strong); padding:4px 9px; border-radius:999px;
}
.ph-slot .ph-art{width:60px; height:60px; color:var(--ink); opacity:.85;}
.ph-slot .ph-art svg{width:100%; height:100%;}
.ph-slot .ph-file{font-family:var(--font-mono); font-size:.76rem; color:var(--text-secondary); word-break:break-all;}
.ph-slot .ph-note{font-family:var(--font-mono); font-size:.64rem; color:var(--text-faint); max-width:32ch; line-height:1.5;}
.scenario:hover .ph-slot .ph-art{color:var(--accent-blue); transition:color 340ms var(--ease);}

/* big placeholder on subpages */
.ph-slot--big{aspect-ratio:16/8; min-height:300px; border:1px solid var(--border-strong); border-radius:16px;}
.ph-slot--big .ph-art{width:84px; height:84px;}
.ph-slot--big .ph-file{font-size:.9rem;}
.ph-slot--big .ph-note{font-size:.72rem; max-width:48ch;}

/* ============================================================
   FIELD NOTES (Scene 7)
   ============================================================ */
.fieldnotes{margin-top:34px; border-top:1px solid var(--border-hairline);}
.fnote{
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:baseline;
  padding:20px 4px; border-bottom:1px solid var(--border-hairline);
}
.fnote .ttl{font-family:var(--font-display); font-size:1.18rem; color:var(--text-primary); grid-column:2;}
.fnote .tagcol{grid-row:1 / span 2; align-self:start; padding-top:5px;}
.fnote .desc{grid-column:2; color:var(--text-muted); font-size:.92rem; margin:0;}
.tag-chip{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.tag-chip.built{color:var(--accent-blue); border:1px solid color-mix(in oklab,var(--accent-blue) 40%,transparent); background:color-mix(in oklab,var(--accent-blue) 9%,transparent);}
.tag-chip.aspir{color:var(--accent-orange); border:1px solid color-mix(in oklab,var(--accent-orange) 40%,transparent); background:color-mix(in oklab,var(--accent-orange) 9%,transparent);}

/* ============================================================
   WORLD PROOF (Scene 8)
   ============================================================ */
.proofline{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px; margin-bottom:8px;
  font-family:var(--font-mono); font-size:.8rem; color:var(--text-secondary);
}
.proofline .swap{color:var(--accent-orange);}
:root[data-world="night"] .proofline .swap{color:var(--accent-blue);}

.worldproof{
  position:relative; margin-top:34px; border-radius:16px; overflow:hidden;
  border:1px solid var(--border-strong); background:var(--bg-inset);
  aspect-ratio:16/8; box-shadow:var(--card-shadow);
}
.worldproof.has-art{aspect-ratio:723/250; background:var(--bg-inset);}
.worldproof .proof-art{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px;}
/* reserved raster slot — externally generated images drop in by filename */
.worldproof .slot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--dur-theme) var(--ease);}
.worldproof .slot-img.show{opacity:1;}
.worldproof .placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background-image:repeating-linear-gradient(135deg, var(--border-hairline) 0 1px, transparent 1px 13px);
  color:var(--text-muted); text-align:center; padding:24px;
}
.worldproof .placeholder .ph-glyph{width:64px; height:64px; color:var(--ink); opacity:.8;}
.worldproof .placeholder .fname{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:var(--text-secondary);}
.worldproof .placeholder .phn{font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint); max-width:42ch;}
.worldproof .badge{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:color-mix(in oklab,var(--bg-base) 70%,transparent);
  border:1px solid var(--border-strong); backdrop-filter:blur(6px);
}
.worldproof .badge .k{color:var(--accent-orange);}
:root[data-world="night"] .worldproof .badge .k{color:var(--accent-blue);}
.worldproof .tie{
  position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:3;
  background:repeating-linear-gradient(var(--border-strong) 0 6px, transparent 6px 12px); opacity:.6;
}

/* cast table */
.casttable{margin-top:34px; width:100%; border-collapse:collapse; font-size:.92rem;}
.casttable th,.casttable td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--border-hairline); vertical-align:top;}
.casttable th{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); font-weight:500;
}
.casttable td.who{font-family:var(--font-display); font-size:1.12rem; color:var(--text-primary); white-space:nowrap;}
.casttable td.role{color:var(--text-secondary);}
.casttable td.role .worldfade{color:var(--text-primary);}
.casttable td.line{color:var(--text-muted); font-size:.86rem;}
.casttable .rolehead .active{color:var(--accent-orange);}
:root[data-world="night"] .casttable .rolehead .active{color:var(--accent-blue);}

/* ============================================================
   CLOSE / FOOTER (Scene 9)
   ============================================================ */
.close{text-align:center;}
.close .onesentence{
  font-family:var(--font-display); font-weight:300; font-size:clamp(1.4rem,2.8vw,2.1rem);
  line-height:1.4; color:var(--text-primary); max-width:30ch; margin:0 auto 36px; text-wrap:balance;
}
.close .onesentence em{font-style:italic;}
.honesty{
  max-width:60ch; margin:0 auto 40px; padding:20px 24px; border-radius:14px;
  background:var(--bg-surface); border:1px solid var(--border-hairline);
  font-size:.92rem; color:var(--text-muted); line-height:1.7;
}
.honesty strong{color:var(--text-secondary);}
.close-ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:46px;}
.footer-mark{width:54px; height:54px; margin:0 auto 18px; color:var(--ink); opacity:.85;}
.footer-logo{width:min(260px,64%); margin:0 auto 26px;}
.footer-logo img{width:100%; height:auto; display:block;}
.footer-logo .logo-light{display:none;}
:root[data-theme="light"] .footer-logo .logo-dark{display:none;}
:root[data-theme="light"] .footer-logo .logo-light{display:block;}
.meta{font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint); letter-spacing:.03em;}
.meta a{color:var(--text-muted); text-decoration:none; border-bottom:1px solid var(--border-hairline);}
.meta a:hover{color:var(--text-primary);}
.meta .sep{margin:0 10px; opacity:.5;}

/* divider */
.scene-rule{border:0; border-top:1px solid var(--border-hairline); max-width:var(--maxw); margin:0 auto;}

/* ============================================================
   FINALE — the last scene: both worlds, one signal
   ============================================================ */
.finale{text-align:center;}
.finale .eyebrow{justify-content:center;}
.finale .eyebrow::before{display:none;}
.finale-visual{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  max-width:860px; margin:36px auto 0;
  border-radius:18px; overflow:hidden; border:1px solid var(--border-strong);
  background:#06080f; box-shadow:var(--card-shadow);
}
.finale-visual img.fv-img{width:100%; height:auto; object-fit:unset; display:block;}
.finale-visual .fv-seam{
  position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:2;
  background:linear-gradient(to bottom, transparent, rgba(143,192,255,.6) 30%, rgba(255,180,130,.6) 70%, transparent);
}
.finale-visual .fv-signal{position:absolute; inset:0; z-index:2; pointer-events:none;}
.finale-visual .fv-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:96px; height:96px; border-radius:50%;
  background:rgba(7,10,18,.78); border:1px solid rgba(143,192,255,.28);
  display:grid; place-items:center;
  box-shadow:0 14px 50px rgba(0,0,0,.5);
}
.finale-visual .fv-mark img{width:62px; display:block;}
.finale-visual .fv-tag{
  position:absolute; bottom:14px; z-index:3; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(238,243,252,.85); text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.finale-visual .fv-tag.k{left:0; right:50%; color:rgba(34,40,54,.8); text-shadow:0 1px 8px rgba(255,255,255,.6);}
.finale-visual .fv-tag.n{left:50%; right:0;}
.finale-words{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.5; text-wrap:balance;
  color:var(--text-primary); max-width:36ch; margin:48px auto 0;
  display:grid; gap:26px;
}
.finale-words .fw-turn{color:var(--accent-orange);}
.finale-words .fw-last{font-style:italic;}
.finale-words .fw-quiet{color:var(--text-secondary);}
.finale-cta{
  margin:40px 0 0; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center;
}
@media (max-width:680px){
  .finale-words{font-size:1.18rem;}
}

/* ============================================================
   SCROLL REVEAL  (visible by default; hidden only when JS arms it,
   so the page always renders if JS / IntersectionObserver fail)
   ============================================================ */
.reveal{opacity:1; transform:none;}
html.js-reveal .reveal{opacity:0; transform:translateY(26px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);}
html.js-reveal .reveal.in{opacity:1; transform:none;}
html.js-reveal .reveal.d1{transition-delay:80ms;}
html.js-reveal .reveal.d2{transition-delay:160ms;}
html.js-reveal .reveal.d3{transition-delay:240ms;}

/* world cross-fade */
.worldfade{transition:opacity 130ms var(--ease);}
body.world-fading .worldfade{opacity:0;}

/* threshold pulse (Scene 3) */
.pulse-target{transform-box:fill-box; transform-origin:center;}
/* draw-once on signal paths : full line visible by default, animates only when armed */
.draw{stroke-dasharray:var(--len,1200); stroke-dashoffset:0;}
@media (prefers-reduced-motion:no-preference){
  html.js-reveal .scene3.in .pulse-target{animation:thpulse var(--pulse) var(--ease) .5s 1 both;}
  @keyframes thpulse{
    0%{filter:drop-shadow(0 0 0 rgba(255,138,77,0));}
    40%{filter:drop-shadow(0 0 10px rgba(255,138,77,.9));}
    100%{filter:drop-shadow(0 0 2px rgba(255,138,77,.3));}
  }
  html.js-reveal .scene.in .draw{animation:draw var(--dur-draw) var(--ease) both;}
  html.js-reveal .scene.in .draw.dl2{animation-delay:.35s;}
  @keyframes draw{from{stroke-dashoffset:var(--len,1200);}to{stroke-dashoffset:0;}}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .scrollcue .line{animation:none !important;}
}

/* journey rail — fixed signal dots showing progress through the walk */
.rail{
  position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:6px;
}
.rail a{
  display:flex; align-items:center; gap:10px; text-decoration:none; padding:5px 6px;
  border-radius:8px; color:var(--text-faint);
}
.rail .rn{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; width:18px; text-align:right;
  transition:color 200ms var(--ease);
}
.rail .rl{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; white-space:nowrap;
  opacity:0; transform:translateX(-4px); transition:opacity 200ms var(--ease), transform 200ms var(--ease);
}
.rail a:hover .rl, .rail a.active .rl{opacity:1; transform:none;}
.rail a:hover{color:var(--text-secondary);}
.rail a.active{color:var(--accent-blue);}
.rail a.active .rn{color:var(--accent-blue);}
@media (max-width:1240px){.rail{display:none;}}

/* inline world-flip button (scene 07 proof) */
.flipworld{
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; white-space:nowrap;
  color:var(--accent-blue); background:transparent;
  border:1px dashed color-mix(in oklab,var(--accent-blue) 55%, transparent);
  border-radius:999px; padding:7px 14px;
  transition:background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.flipworld:hover{
  background:color-mix(in oklab,var(--accent-blue) 10%, transparent);
  border-style:solid; transform:translateY(-1px);
}
.flipworld:focus-visible{outline:2px solid var(--border-focus); outline-offset:3px;}

/* eyebrow world suffix */
.eyebrow .worldfade{color:var(--accent-orange);}
:root[data-world="night"] .eyebrow .worldfade{color:var(--accent-blue);}

/* ============================================================
   GATEWAY — full-screen world selection (index only)
   ============================================================ */
html.gate-done #gateway{display:none;}
html.gate-open body{overflow:hidden;}
#gateway{
  position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:1fr 1fr;
  background:#06080f;
}
.gate-side{
  position:relative; border:0; padding:0; margin:0; cursor:pointer; overflow:hidden;
  background:#06080f; display:block; min-height:0;
  transition:filter 480ms var(--ease);
}
.gate-side img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  display:block; user-select:none;
  transition:transform 1200ms var(--ease), filter 480ms var(--ease);
}
/* readability scrim toward the centre seam + bottom */
.gate-side::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,6,12,0) 55%, rgba(4,6,12,.55) 100%);
}
.gate-keep::after{background:
  linear-gradient(to left, rgba(4,6,12,.38), rgba(4,6,12,0) 38%),
  linear-gradient(to bottom, rgba(4,6,12,0) 60%, rgba(4,6,12,.5) 100%);}
.gate-night::after{background:
  linear-gradient(to right, rgba(4,6,12,.38), rgba(4,6,12,0) 38%),
  linear-gradient(to bottom, rgba(4,6,12,0) 60%, rgba(4,6,12,.5) 100%);}

/* hover: brighten chosen world, dim the other */
@media (hover:hover){
  .gate-side:hover img{transform:scale(1.035);}
  .gate-keep:hover img{filter:brightness(1.07);}
  .gate-night:hover img{filter:brightness(1.12) saturate(1.08);}
  #gateway:has(.gate-keep:hover) .gate-night img{filter:brightness(.55) saturate(.8);}
  #gateway:has(.gate-night:hover) .gate-keep img{filter:brightness(.55) saturate(.85);}
}
.gate-side:focus-visible{outline:3px solid var(--accent-blue); outline-offset:-3px;}

/* world name etched low on each half */
.gate-name{
  position:absolute; bottom:30px; left:0; right:0; pointer-events:none;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(238,243,252,.92); text-shadow:0 1px 10px rgba(0,0,0,.7);
  display:flex; justify-content:center; gap:8px;
}
.gate-keep .gate-name .ic{color:#ffb482;}
.gate-night .gate-name .ic{color:#8fc0ff;}

/* seam: the signal thread tying the two skins together */
.gate-seam{
  position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(143,192,255,.65) 30%, rgba(255,180,130,.65) 70%, transparent);
  box-shadow:0 0 18px rgba(120,170,255,.35);
}

/* central question */
.gate-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  width:min(560px, calc(100vw - 48px)); padding:34px 30px 26px; border-radius:20px;
  background:rgba(7,10,18,.55); border:1px solid rgba(143,192,255,.14);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.gate-eyebrow{
  margin:0; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(174,184,208,.85);
}
.gate-q{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.25; color:#eef3fc; text-wrap:balance;
}
.gate-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px;}
.gate-btn{
  cursor:pointer; border-radius:999px; padding:13px 24px; font-size:.95rem; font-weight:500;
  font-family:var(--font-body); letter-spacing:.01em; border:1px solid transparent;
  transition:transform 220ms var(--ease), box-shadow 260ms var(--ease), filter 220ms;
}
.gate-btn:hover{transform:translateY(-2px);}
.gate-btn:focus-visible{outline:2px solid #8fc0ff; outline-offset:3px;}
.gate-btn-keep{
  background:#f2ede2; color:#2a2f3c; border-color:#f2ede2;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
.gate-btn-keep:hover{box-shadow:0 10px 32px rgba(255,180,130,.3);}
.gate-btn-night{
  background:rgba(13,20,38,.9); color:#cfe2ff; border-color:rgba(90,162,255,.55);
  box-shadow:0 0 22px rgba(90,162,255,.3);
}
.gate-btn-night:hover{box-shadow:0 0 34px rgba(90,162,255,.55);}
.gate-note{
  margin:2px 0 0; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em;
  color:rgba(122,134,162,.95);
}

/* dismiss */
#gateway.closing{opacity:0; transform:scale(1.02); pointer-events:none;
  transition:opacity 680ms var(--ease), transform 680ms var(--ease);}

/* entrance (subtle) */
@media (prefers-reduced-motion:no-preference){
  html.gate-open .gate-center{animation:gatein 900ms var(--ease) 150ms both;}
  @keyframes gatein{from{opacity:0; transform:translate(-50%,-46%);}to{opacity:1; transform:translate(-50%,-50%);}}
}
@media (prefers-reduced-motion:reduce){
  #gateway.closing{transition:none;}
  .gate-side, .gate-side img{transition:none;}
}

/* mobile: stack the worlds */
@media (max-width:720px){
  #gateway{grid-template-columns:1fr; grid-template-rows:1fr 1fr;}
  .gate-side img{object-position:center 22%;}
  .gate-seam{left:0; right:0; top:50%; bottom:auto; width:auto; height:1px;
    background:linear-gradient(to right, transparent, rgba(143,192,255,.65) 30%, rgba(255,180,130,.65) 70%, transparent);}
  .gate-keep::after,.gate-night::after{background:linear-gradient(to bottom, rgba(4,6,12,0) 45%, rgba(4,6,12,.5) 100%);}
  .gate-name{bottom:14px;}
  .gate-center{padding:24px 20px 20px; gap:13px;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:left; min-height:auto; gap:30px; padding-top:38px;}
  .hero-visual{order:-1;}
  .hero-visual .glowwrap{max-width:400px;}
  .hero .lead{max-width:46ch;}
}
@media (max-width:680px){
  body{font-size:16px;}
  .topbar{flex-wrap:wrap; gap:10px; padding:12px 16px;}
  .topbar-actions{width:100%; justify-content:space-between; gap:8px; flex-wrap:wrap;}
  .seg-label{display:none;}
  .seg button{padding:6px 10px; font-size:.78rem;}
  .scene{padding-left:20px; padding-right:20px;}
  .bezel iframe{height:460px;}
  .casttable .line{display:none;}
  .fnote{grid-template-columns:1fr; gap:8px;}
  .fnote .tagcol{grid-row:auto; grid-column:1;}
  .fnote .ttl,.fnote .desc{grid-column:1;}
}
@media (max-width:420px){
  .brand .wm span{letter-spacing:.3em;}
  .repo-link{display:none;}
}

/* ============================================================
   THE OPEN GATE (open source + the author)
   ============================================================ */
.og-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:36px; margin-top:40px; align-items:start;}
.og-ways{border-top:1px solid var(--border-hairline);}
.ogway{display:flex; gap:18px; padding:19px 4px; border-bottom:1px solid var(--border-hairline); align-items:baseline;}
.ogway > .k{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; color:var(--text-faint); padding-top:4px;}
.ogway .ttl{font-family:var(--font-display); font-size:1.14rem; color:var(--text-primary); display:block; margin-bottom:5px;}
.ogway p{margin:0; color:var(--text-muted); font-size:.9rem; line-height:1.6;}
.og-art{border:1px solid var(--border-strong); border-radius:16px; aspect-ratio:4/5; min-height:0;}
.ph-slot .img-light{display:none;}
:root[data-theme="light"] .ph-slot .img-light{display:block;}
:root[data-theme="light"] .ph-slot .img-dark{display:none;}
.og-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
.og-honesty{margin-top:18px; font-size:.84rem; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:.01em;}

.authorcard{
  margin-top:58px; display:grid; grid-template-columns:128px 1fr; gap:26px; align-items:start;
  padding:28px; border:1px solid var(--border-hairline); border-radius:18px; background:var(--bg-inset);
}
.authorcard .portrait{
  position:relative; width:128px; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:1px solid var(--border-strong);
  background-image:repeating-linear-gradient(135deg, var(--border-hairline) 0 1px, transparent 1px 11px);
  display:flex; align-items:center; justify-content:center;
}
.authorcard .portrait .mono-mark{font-family:var(--font-display); font-size:2.1rem; color:var(--text-faint); letter-spacing:.06em;}
.authorcard .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%;}
.authorcard .portrait img:not([src]){display:none;}
/* theme-paired portrait: neon on dark, pencil sketch on light */
.authorcard .portrait .img-light{display:none;}
:root[data-theme="light"] .authorcard .portrait .img-light{display:block;}
:root[data-theme="light"] .authorcard .portrait .img-dark{display:none;}
.authorcard .a-eyebrow{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin:0 0 8px;}
.authorcard .a-name{font-family:var(--font-display); font-size:1.5rem; color:var(--text-primary); margin:0 0 10px;}
.authorcard .a-bio{margin:0 0 12px; color:var(--text-muted); font-size:.94rem; line-height:1.65; max-width:62ch;}
.authorcard .a-bio--lead{color:var(--text-secondary); font-size:1.04rem; margin-bottom:14px;}
.authorcard .a-cadence{
  font-family:var(--font-mono); font-size:.82rem; line-height:1.95; color:var(--text-secondary);
  border-left:2px solid var(--border-strong); padding-left:15px; margin:0 0 16px; max-width:62ch;
}
.authorcard .a-cadence em{font-style:normal; color:var(--accent-orange);}
.authorcard .a-bio em{font-style:italic; color:var(--text-primary);}
.authorcard .a-links{display:flex; gap:18px; flex-wrap:wrap;}
@media (max-width:760px){
  .og-grid{grid-template-columns:1fr;}
  .og-art{aspect-ratio:16/10;}
  .authorcard{grid-template-columns:1fr;}
}

/* ============================================================
   SEO content pages (about / docs) + crawlable site footer nav
   ============================================================ */
.doclist{margin:.4rem 0 1.1rem; padding-left:1.15rem; color:var(--text-secondary);}
.doclist li{margin:.45rem 0; line-height:1.55;}
.sitefoot{max-width:var(--maxw); margin:0 auto; padding:clamp(36px,6vh,72px) 28px 48px; position:relative; z-index:1;}
.sitenav{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  padding-top:22px; border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
}
.sitenav a{color:var(--text-muted); text-decoration:none; transition:color 150ms var(--ease);}
.sitenav a:hover{color:var(--accent-blue);}
.sitefoot-tag{text-align:center; color:var(--text-faint); font-size:.8rem; line-height:1.5; margin:14px auto 0; max-width:52ch;}