/* Daimon · demiurge.pro
   Nocturne, per design/DESIGN_SPEC.md §2. Colour is emission light whose chroma is
   driven by one variable, --sat, which main.js derives from the page's own vitality. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
/* metric-matched fallback so the swap does not re-flow the condensed headlines */
@font-face {
  font-family: "ArchivoFallback";
  src: local("Arial Narrow"), local("ArialNarrow"), local("Roboto Condensed"), local("Arial");
  size-adjust: 92%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dmmono-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dmmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* live state (main.js writes these) */
  --sat: 0;          /* 0..1 colour saturation of the whole world */
  --glow: .1;        /* 0..1 */
  --hush: 0;         /* 0..1 the reveal stilling the noise */
  --ca: .31;         /* px, chromatic aberration offset */
  --caA: 0;          /* 0..1 fringe strength */
  --neb: 0;          /* 0..1 ambient nebula alpha */
  --wDaimon: 426;    /* Direct */
  --wdth: 74.2%;

  /* Nocturne tokens, spec §2.6 */
  --bg: oklch(.085 calc(.003 + .012 * var(--sat)) 285);
  --surface: oklch(.13 calc(.005 + .010 * var(--sat)) 285);
  --line: #2d2d32;
  --fg: #eaebef;
  --muted: #aeb1b9;
  --faint: #878a92;
  --accent: oklch(.90 calc(.075 * var(--sat)) 222);   /* starlight */
  --soft: oklch(.78 calc(.13 * var(--sat)) 188);      /* OIII teal */
  --hot: oklch(.64 calc(.23 * var(--sat)) 14);        /* H-alpha */
  --nebHot: oklch(.50 calc(.20 * var(--sat)) 18);
  --nebSoft: oklch(.55 calc(.11 * var(--sat)) 195);

  --display: "Archivo", "ArchivoFallback", "Arial Narrow", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #020203;
  color: var(--fg);
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 360;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3, .hero__reply, .say, .uc__answer, .entry__claim, .lede, .fade__line { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in oklch, var(--hot) 55%, transparent); color: #fff; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.mono { font-family: var(--mono); font-weight: 300; font-stretch: normal; }
.visually-hidden, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 10px 14px; background: var(--surface); }

/* chromatic aberration on display type: the Nocturne colour bleed */
.ab {
  text-shadow:
    calc(var(--ca) * -1px) 0 oklch(.64 .23 14 / calc(var(--caA) * .7)),
    calc(var(--ca) * 1px) 0 oklch(.78 .13 188 / calc(var(--caA) * .7));
}

/* ── the sky ─────────────────────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.neb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: calc(var(--neb) * (1 - var(--hush))); will-change: opacity; }
.neb--hot {
  width: 90vmax; height: 90vmax; left: -38vmax; bottom: -52vmax;
  background: radial-gradient(closest-side, var(--nebHot), transparent 70%);
}
.neb--soft {
  width: 80vmax; height: 80vmax; right: -36vmax; top: 18vh;
  background: radial-gradient(closest-side, var(--nebSoft), transparent 70%);
}
.grain {
  position: absolute; inset: -64px;
  background-image: var(--noise, none);
  background-size: 256px 256px;
  opacity: calc(.07 * (1 - var(--hush)));
  mix-blend-mode: screen;
  animation: jitter .5s steps(2) infinite;
}
@keyframes jitter { 0% { transform: translate(0, 0); } 50% { transform: translate(-37px, 23px); } 100% { transform: translate(19px, -41px); } }

main, .nav, .foot { position: relative; z-index: 1; }
main { overflow-x: clip; }
.sky { overflow: hidden; }

/* ── nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--gutter);
  padding-top: max(20px, env(safe-area-inset-top));
  background: linear-gradient(#020203cc, #02020300);
}
.wordmark {
  font-family: var(--display); font-stretch: 70%; font-weight: 520; font-size: 21px;
  letter-spacing: .01em; text-decoration: none;
}
.chapters { display: flex; gap: 6px; opacity: 0; transition: opacity .8s; }
.nav.past .chapters, html:not(.js) .chapters { opacity: 1; }
.chapters a {
  position: relative; display: block; padding: 10px 6px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.chapters a::before {
  content: ""; display: block; width: 22px; height: 1px; background: currentColor; transition: width .5s var(--ease), background-color .5s;
}
.chapters a span { position: absolute; left: 6px; top: 22px; opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.chapters a:hover span, .chapters a:focus-visible span, .chapters a.is-on span { opacity: 1; transform: none; }
.chapters a.is-on { color: var(--fg); }
.chapters a.is-on::before { width: 44px; background: linear-gradient(90deg, var(--hot), var(--soft)); }
.chip, .badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 10px var(--soft); animation: blink 3.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 860px) { .chapters { display: none; } }

/* ── shared chapter layout ───────────────────────────────── */
.chapter {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(120px, 20vh, 240px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px);
  align-items: center; min-height: 100vh;
}
.eyebrow {
  margin: 0 0 28px; font-family: var(--mono); font-weight: 400; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b { font-weight: 400; color: var(--hot); margin-right: 14px; transition: color 1s; }
h2 {
  margin: 0; font-weight: 340; font-stretch: 72%;
  font-size: clamp(44px, 6vw, 92px); line-height: .98; letter-spacing: -.012em;
}
.lede { margin: 32px 0 0; max-width: 34ch; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.caption { margin: 28px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--faint); letter-spacing: .02em; max-width: 52ch; }

/* reveal: composed state is the default; hidden only while JS runs and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
  html.js .reveal.in { opacity: 1; transform: none; filter: none; }
  html.js .reveal + .reveal { transition-delay: .15s; }
}

/* ── hero ────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: 84px var(--gutter) 96px; text-align: center;
}
.hero__stage { display: flex; flex-direction: column; align-items: center; }
.orb {
  position: relative; width: clamp(200px, 26vmin, 300px); aspect-ratio: 1; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; margin-bottom: clamp(28px, 4vh, 48px);
}
.orb canvas { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; }
.orb:focus-visible { outline-offset: 12px; border-radius: 50%; }
.hero__title {
  margin: 0; font-weight: 300; font-stretch: 70%;
  font-size: clamp(50px, 7.4vw, 112px); line-height: .94; letter-spacing: -.02em;
}
/* lede, live transcript and the Daimon's reply share one slot, so speaking never moves the page */
.hero__slot { display: grid; margin: 24px auto 0; width: min(100%, 46ch); min-height: 6.4em; }
.hero__slot > * { grid-area: 1 / 1; align-self: start; margin: 0; transition: opacity .7s var(--ease), filter .7s var(--ease); }
.hero__lede { justify-self: center; max-width: 38ch; color: var(--muted); font-size: clamp(17px, 1.35vw, 19px); }
.hero__slot.speaking .hero__lede, .hero__slot.replied .hero__lede { opacity: 0; filter: blur(4px); }
.transcript { font-size: 13.5px; line-height: 1.7; color: var(--muted); border-left: 1px solid var(--line); padding-left: 14px; text-align: left; opacity: 0; }
.hero__slot.speaking .transcript { opacity: 1; }
.transcript i { font-style: normal; animation: word .14s linear both; }
@keyframes word { from { opacity: 0; } }
.hero__reply {
  justify-self: center; max-width: 22ch; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12;
  font-weight: 426; font-stretch: 74.2%; opacity: 0; filter: blur(3px);
}
.hero__slot.replied .transcript { opacity: 0; }
.hero__slot.replied .hero__reply { opacity: 1; filter: none; transition-delay: .5s; }
.hero__hint { margin: 22px 0 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); transition: opacity .6s; }
.hero__hint.busy { opacity: .25; }
.scrollcue { position: absolute; bottom: 32px; left: 50%; width: 1px; height: 56px; overflow: hidden; translate: -50% 0; }
.scrollcue span { position: absolute; inset: 0; background: linear-gradient(transparent, var(--muted)); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ── thesis ──────────────────────────────────────────────── */
.thesis { height: 320vh; position: relative; }
.thesis__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); gap: .1em;
}
.thesis__line {
  margin: 0; font-weight: 320; font-stretch: 68%;
  font-size: clamp(38px, 6vw, 96px); line-height: 1.02; letter-spacing: -.018em;
}
.thesis__line:nth-child(2) { padding-left: 6vw; }
.thesis__line:nth-child(3) { margin-top: .35em; }
.thesis__line:nth-child(4) { padding-left: 6vw; }
.w { display: inline-block; white-space: pre; will-change: filter, opacity; }
.w::before { content: attr(data-w); }
.thesis__line[data-line="2"] .w { color: var(--accent); }
.thesis__line[data-line="3"] .w { color: var(--hot); }

/* ── 01 talk ─────────────────────────────────────────────── */
.convo { position: relative; padding-left: clamp(0px, 3vw, 48px); }
.convo__you {
  margin: 0 0 40px; padding-left: 18px; border-left: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.7; color: var(--muted); max-width: 52ch;
}
.convo__daimon { display: grid; min-height: 4.2em; }
.say {
  grid-area: 1 / 1; margin: 0; max-width: 22ch;
  font-size: clamp(30px, 3.4vw, 50px); line-height: var(--lead, 1.16);
  font-weight: var(--wDaimon); font-stretch: var(--wdth);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s;
}
.convo[data-stance="soft"] .say[data-say="soft"],
.convo[data-stance="direct"] .say[data-say="direct"],
.convo[data-stance="raw"] .say[data-say="raw"] { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
html:not(.js) .say { position: static; opacity: 1; visibility: visible; }
html:not(.js) .convo__daimon { gap: 24px; }
.convo[data-stance="soft"] { --wDaimon: 330; --wdth: 80%; --lead: 1.25; }
.convo[data-stance="direct"] { --wDaimon: 426; --wdth: 74.2%; --lead: 1.18; }
.convo[data-stance="raw"] { --wDaimon: 562; --wdth: 66.1%; --lead: 1.1; }
.convo.cut .convo__daimon { animation: glitch .28s steps(1) both; }
@keyframes glitch {
  0%   { clip-path: inset(0 0 62% 0); transform: translateX(-12px) skewX(-7deg); text-shadow: -7px 0 var(--hot), 7px 0 var(--soft); }
  17%  { clip-path: inset(40% 0 22% 0); transform: translateX(9px); }
  34%  { clip-path: inset(70% 0 0 0); transform: translateX(-5px); text-shadow: -5px 0 var(--hot), 9px 0 var(--soft); }
  51%  { clip-path: inset(12% 0 55% 0); transform: translateX(15px) skewX(4deg); }
  68%  { clip-path: inset(0 0 0 0); transform: translateX(-3px); text-shadow: none; }
  85%, 100% { clip-path: none; transform: none; }
}
.stance { display: inline-flex; margin-top: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; }
.stance button {
  border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 10px 20px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: background-color .4s, color .4s;
}
.stance button:hover { color: var(--fg); }
.stance button[aria-pressed="true"] { background: var(--fg); color: #050507; font-weight: 400; }

/* ── 02 shape: the four territories, built on scroll ──────── */
:root {
  /* one emission line per territory; chroma never drops to grey so the map always reads */
  --c-mind: oklch(.86 calc(.06 + .08 * var(--sat)) 228);
  --c-body: oklch(.70 calc(.09 + .15 * var(--sat)) 16);
  --c-work: oklch(.84 calc(.07 + .10 * var(--sat)) 80);
  --c-people: oklch(.80 calc(.06 + .10 * var(--sat)) 182);
}
.terrs { position: relative; height: 640vh; }
.terrs__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; max-width: var(--maxw); margin: 0 auto;
  padding: 88px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px); align-items: center;
}
.tsteps { display: grid; }
.tstep { grid-area: 1 / 1; align-self: center; }
.tstep h3 { margin: 0; font-weight: 340; font-stretch: 70%; font-size: clamp(48px, 5.6vw, 88px); line-height: .98; letter-spacing: -.012em; color: var(--c, var(--fg)); }
.tstep p { margin: 22px 0 0; max-width: 34ch; color: var(--muted); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
.tstep .lede { margin-top: 32px; }
.tstep em { font-style: normal; color: var(--fg); }
.tstep q { display: inline-block; margin-top: 26px; padding-left: 14px; border-left: 1px solid var(--c, var(--line)); font-size: 14px; line-height: 1.6; color: var(--fg); quotes: "“" "”"; }
html.js .tstep { opacity: 0; visibility: hidden; transform: translateY(14px); filter: blur(5px); transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease), visibility 0s .5s; }
html.js .tstep.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .8s var(--ease) .12s, transform .9s var(--ease) .12s, filter .8s var(--ease) .12s; }
html:not(.js) .tsteps { gap: 56px; }
html:not(.js) .tstep { grid-area: auto; }
.tindex { list-style: none; margin: 52px 0 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.tindex li { position: relative; padding-top: 12px; transition: color .5s; }
.tindex li::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.25); transition: transform .7s var(--ease); }
.tindex li.done { color: var(--muted); }
.tindex li.on { color: var(--fg); }
.tindex li.on::before { transform: scaleX(1); }
html:not(.js) .tindex { display: none; }
.terrs__fig { margin: 0; justify-self: center; width: min(100%, 78vh, 700px); aspect-ratio: 1; }
.tsvg { width: 100%; height: 100%; overflow: visible; }
.t-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.t-axis { stroke: #1d1d22; stroke-width: 1; }
.t-ringlabel { fill: var(--fg); font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: #020203; stroke-width: 6px; stroke-linejoin: round; }
.t-label { font-family: var(--display); font-stretch: 74%; font-size: 18px; font-weight: 420; text-anchor: middle; }
.t-ray { stroke-width: 1.4; stroke-linecap: round; }
.t-form { fill: none; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 calc(2px + 6px * var(--glow)) var(--soft)); }
.t-ghost { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 5; }
.t-star-core { fill: #fff; }
.t-star-ring { fill: none; stroke-width: .9; }
@media (max-width: 960px) {
  .terrs__pin { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 4px; padding-top: 72px; }
  .terrs__fig { width: min(100%, 44svh); }
  .tstep h3, .tstep h2 { font-size: 40px; }
  .tstep p { margin-top: 12px; font-size: 16px; }
  .tstep .lede { margin-top: 14px; }
  .tstep q { margin-top: 12px; font-size: 13px; }
  .tindex { margin-top: 22px; gap: 12px; }
  .terrs .eyebrow { margin-bottom: 12px; }
}

/* ── 03 undercode · the hush ─────────────────────────────── */
.undercode {
  display: block; position: relative; max-width: none; min-height: 230vh; padding: 18vh var(--gutter);
  background: #000;
  /* no hard lip: the void fades in and out of the sky, inside its own padding so the pinned text never dims */
  -webkit-mask-image: linear-gradient(transparent, #000 18vh, #000 calc(100% - 18vh), transparent);
          mask-image: linear-gradient(transparent, #000 18vh, #000 calc(100% - 18vh), transparent);
}
.uc__inner { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 88px 0 40px; }
.undercode .eyebrow { margin-bottom: 14px; }
.uc__pulse {
  position: sticky; top: calc(50vh - 310px); margin: 0 auto -620px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(.5 .2 18 / .55), oklch(.5 .2 18 / 0) 72%);
  opacity: 0; transform: scale(.92); pointer-events: none;
}
.uc__meta { margin: 0 0 28px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.uc__formula {
  margin: 0; font-weight: 360; font-stretch: 74%;
  font-size: clamp(30px, min(4.2vw, 6.4vh), 64px); line-height: 1.06; letter-spacing: -.012em; max-width: 21ch;
}
.ph { display: block; text-wrap: balance; }
.ph + .ph { margin-top: .12em; }
@media (prefers-reduced-motion: no-preference) {
  html.js .uc__formula .ph { opacity: 0; filter: blur(3px); text-shadow: -6px 0 #f73060, 6px 0 #25d2c7; transition: opacity .9s var(--ease), filter .9s var(--ease), text-shadow .9s var(--ease); }
  html.js .uc__formula .ph.on { opacity: 1; filter: none; text-shadow: 0 0 transparent, 0 0 transparent; }
  html.js .undercode .verdict, html.js .undercode .uc__note { opacity: 0; transform: translateY(8px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  html.js .undercode.done .verdict, html.js .undercode.done .uc__note { opacity: 1; transform: none; }
}
.verdict { display: flex; gap: 12px; margin-top: 44px; flex-wrap: wrap; }
.verdict button {
  min-width: 120px; padding: 15px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid #3a3a41; background: transparent;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg);
  transition: border-color .4s, background-color .4s, color .4s, box-shadow .6s;
}
.verdict button:hover { border-color: var(--fg); }
.verdict button[aria-pressed="true"] { background: var(--fg); color: #000; box-shadow: 0 0 40px oklch(.64 .23 14 / .35); }
.uc__answer { min-height: 2.5em; margin: 26px 0 0; max-width: 30ch; font-size: clamp(22px, 2.2vw, 30px); font-stretch: 74%; font-weight: 400; line-height: 1.22; }
.uc__note { margin: 20px 0 0; max-width: 58ch; font-size: 12.5px; line-height: 1.7; color: var(--faint); }

/* ── 04 spiral ───────────────────────────────────────────── */
.spiralfig { position: relative; display: grid; place-items: center; min-height: 620px; }
.spiralsvg { position: absolute; inset: -14% -10%; width: 120%; height: 128%; overflow: visible; }
#spiralPath { fill: none; stroke: var(--line); stroke-width: 1; }
#spiralHead { fill: #fff; filter: drop-shadow(0 0 6px var(--soft)); }
.practice {
  position: relative; width: min(100%, 400px); padding: 32px 30px 28px;
  background: color-mix(in oklch, var(--surface) 52%, transparent);
  border: 1px solid #ffffff14; border-radius: 8px;
  -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: 0 40px 120px -40px #000;
  transition: opacity .3s, transform .3s;
}
.practice.gone { opacity: 0; transform: scale(.98); }
.practice__meta { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.practice h3 { margin: 14px 0 26px; font-weight: 440; font-stretch: 72%; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.04; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { position: relative; padding-left: 16px; border-left: 1px solid var(--line); font-size: 18px; line-height: 1.3; font-stretch: 80%; }
.steps li:nth-child(odd) { border-left-color: var(--soft); }
.steps span { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.turnbtn {
  margin-top: 28px; width: 100%; padding: 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fg); background: transparent; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .4s, color .4s, box-shadow .6s;
}
.turnbtn:hover { background: var(--fg); color: #000; box-shadow: 0 0 calc(10px + 40px * var(--glow)) color-mix(in oklch, var(--soft) 40%, transparent); }

/* ── 05 portrait ─────────────────────────────────────────── */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.entry {
  position: relative; padding: 26px 96px 26px 0; border-top: 1px solid var(--line); outline: none;
  transition: opacity .6s, filter .6s;
}
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry__claim { margin: 0; font-size: clamp(22px, 2.3vw, 32px); font-stretch: 74%; font-weight: 380; line-height: 1.15; }
.entry__claim::after { content: "↳"; margin-left: 10px; font-family: var(--mono); font-size: .45em; color: var(--soft); vertical-align: super; }
.entry__src {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  font-size: 13px; line-height: 1.6; color: var(--muted);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s, margin .6s var(--ease);
}
.entry__src q { quotes: "“" "”"; }
.entry__src time { color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.entry:hover .entry__src, .entry:focus-within .entry__src, .entry.open .entry__src { max-height: 6em; opacity: 1; margin-top: 12px; }
html:not(.js) .entry__src { max-height: none; opacity: 1; margin-top: 12px; }
.entry__erase {
  position: absolute; right: 0; top: 30px; border: 0; background: none; cursor: pointer; padding: 6px 0;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .3s, color .3s;
}
.entry:hover .entry__erase, .entry:focus-within .entry__erase { opacity: 1; }
.entry__erase:hover { color: var(--hot); }
@media (hover: none) { .entry__erase { opacity: 1; } }
.entry.erased { opacity: .0; filter: blur(8px); pointer-events: none; }
.entry.restored { animation: restore 1.2s var(--ease); }
@keyframes restore { from { opacity: 0; filter: blur(8px); } }

/* ── 06 fade ─────────────────────────────────────────────── */
.fade { height: 300vh; position: relative; }
.fade__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px;
}
.fade__orb { width: min(40vw, 70vh, 560px); aspect-ratio: 1; justify-self: center; }
@media (max-width: 860px) {
  .fade__pin { grid-template-columns: 1fr; align-content: center; gap: 0; }
  .fade__orb { grid-row: 1; width: min(62vw, 30svh); margin-bottom: 8px; }
}
.fade__title { font-size: clamp(56px, 9.6vw, 156px); font-weight: 300; font-stretch: 66%; line-height: .92; letter-spacing: -.02em; }
.fade__line { margin: 0; max-width: 36ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: var(--muted); }
.fade__line[data-fl="0"] { margin-top: 48px; }
.fade__line + .fade__line { margin-top: 10px; }
.fade__rule { margin: 40px 0 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
@media (prefers-reduced-motion: no-preference) {
  html.js .fade__line, html.js .fade__rule { opacity: 0; transition: opacity .8s var(--ease); }
  html.js .fade__line.on, html.js .fade__rule.on { opacity: 1; }
}

/* ── skins ───────────────────────────────────────────────── */
.skins { position: relative; padding: clamp(120px, 18vh, 220px) 0; }
.skins .chapter__head { max-width: var(--maxw); margin: 0 auto 40px; padding: 0 var(--gutter); }
.skins::before {
  content: ""; position: absolute; inset: 20% 0 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 50% at 50% 60%, color-mix(in srgb, var(--skin, transparent) 22%, transparent), transparent 70%);
  transition: background .8s;
}
.deck {
  display: flex; gap: clamp(20px, 2.4vw, 40px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 40px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 56px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scrollbar-width: none; outline: none; perspective: 1400px;
}
.deck::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; width: clamp(210px, min(19vw, 30vh), 270px); margin: 0; scroll-snap-align: start; }
.card__img {
  position: relative; aspect-ratio: 600 / 1296; border-radius: 13.5% / 6.25%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .6s var(--ease), box-shadow .6s;
  box-shadow: 0 30px 80px -30px #000, 0 0 0 1px #ffffff10;
}
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: opacity .7s var(--ease); }
.card__img img.alt { opacity: 0; }
.card:hover .card__img, .card.is-on .card__img { box-shadow: 0 40px 100px -30px color-mix(in srgb, var(--tint) 45%, #000), 0 0 0 1px #ffffff1a; }
.card:hover .card__img img.alt, .card.is-on .card__img img.alt { opacity: 1; }
.card figcaption { margin-top: 20px; font-stretch: 74%; font-weight: 420; font-size: 22px; letter-spacing: .005em; color: var(--muted); transition: color .5s; }
.card:hover figcaption, .card.is-on figcaption { color: var(--fg); }

/* ── not ─────────────────────────────────────────────────── */
.nots { max-width: var(--maxw); margin: 0 auto; padding: clamp(100px, 16vh, 200px) var(--gutter); }
.notlist { list-style: none; margin: 40px 0 0; padding: 0; }
.notlist li { position: relative; padding: 12px 0; border-bottom: 1px solid #17171b; outline: none; cursor: default; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 8px 48px; align-items: center; }
.notlist s {
  position: relative; justify-self: start; text-decoration: none;
  font-size: clamp(38px, 6vw, 88px); font-weight: 300; font-stretch: 66%; line-height: 1.02; letter-spacing: -.015em; color: var(--muted);
  transition: color .5s;
}
.notlist s::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 47%; height: 2px;
  background: linear-gradient(90deg, var(--hot), var(--soft));
  transform-origin: left; transform: scaleX(var(--strike, 1)); transition: transform 1.2s var(--ease);
}
html.js .notlist li:not(.in) s::after { --strike: 0; }
.notlist li:nth-child(2) s::after { transition-delay: .08s; }
.notlist li:nth-child(3) s::after { transition-delay: .16s; }
.notlist li:nth-child(4) s::after { transition-delay: .24s; }
.notlist li:nth-child(5) s::after { transition-delay: .32s; }
.notlist span {
  color: var(--muted); font-size: 17px; line-height: 1.5;
  opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s var(--ease), color .5s;
}
.notlist li:hover s, .notlist li:focus-visible s { color: var(--fg); }
.notlist li:hover span, .notlist li:focus-visible span, .notlist li.open span { opacity: 1; transform: none; color: var(--fg); }
html:not(.js) .notlist span { opacity: 1; transform: none; }
@media (hover: none), (max-width: 860px) {
  .notlist li { grid-template-columns: 1fr; padding: 16px 0 18px; }
  .notlist span { opacity: 1; transform: none; }
}

/* ── close ───────────────────────────────────────────────── */
.close { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--gutter); }
.close__orb { width: 240px; height: 240px; margin-bottom: 8px; }
.close__title { margin: 0; font-size: clamp(48px, 7.6vw, 120px); font-weight: 300; font-stretch: 68%; line-height: .96; letter-spacing: -.02em; }
.close .lede { margin-inline: auto; text-align: center; }
.close__cta { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.badge { padding: 15px 24px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }
.badge--ghost { color: var(--faint); border-style: dashed; }

/* ── footer ──────────────────────────────────────────────── */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid #17171b; display: grid; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--faint);
}
.foot p { margin: 0; }
.foot b { font-weight: 400; color: var(--muted); }
.foot a { color: var(--muted); text-underline-offset: 3px; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .chapter { grid-template-columns: 1fr; min-height: 0; gap: 64px; }
  .convo { padding-left: 0; }
  .shapefig { margin-bottom: 64px; }
  .spiralfig { min-height: 520px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .chip__long { display: none; }
  .hero__title { font-size: 58px; }
  .thesis__line:nth-child(2), .thesis__line:nth-child(4) { padding-left: 0; }
  .terr__name { font-size: 18px; }
  .terr__said { font-size: 11.5px; }
  .terr { max-width: 12ch; }
  .shapefig { margin-top: 40px; }
  .terr[data-t="mind"], .terr[data-t="body"] { top: -10%; }
  .terr[data-t="people"], .terr[data-t="work"] { bottom: -8%; }
  .legend { bottom: -96px; }
  .entry { padding-right: 0; }
  .entry__erase { position: static; margin-top: 10px; }
  .verdict button { min-width: 0; flex: 1; padding: 14px 10px; }
  .practice { padding: 26px 22px 22px; }
  .uc__pulse { width: 420px; height: 420px; top: calc(50vh - 210px); margin-bottom: -420px; }
}

/* ── reduced motion: composed, still ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .dot, .scrollcue span { animation: none; }
  .convo.cut .convo__daimon { animation: none; }
  .thesis { height: auto; }
  .thesis__pin { position: static; height: auto; padding-block: 160px; }
  .fade { height: auto; }
  .fade__pin { position: static; height: auto; padding-block: 160px; }
  .undercode { min-height: 0; }
  .uc__inner { position: static; }
  .uc__pulse { display: none; }
  .card__img { transform: none !important; }
}