/* Hatchware Design v4 — immersive scroll experience */

:root {
  --paper: #E8E2D8;
  --paper-2: #F3EEE6;
  --ink: #10100E;
  --ink-soft: #5A534B;
  --ink-faint: #8A8278;
  --line: #CFC6B8;
  --amber: #B07A32;
  --amber-ink: #6F4A16;
  --night: #0A0908;
  --night-ink: #E8E2D8;
  --night-soft: #958C82;
  --night-line: rgba(232, 226, 216, 0.12);
  --depth: #1A120C;
  --resin-glow: rgba(176, 122, 50, 0.22);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.375rem;
  --text-pull: clamp(1.5rem, 3.2vw, 2.25rem);
  --text-display-sm: clamp(2rem, 4.5vw, 3.25rem);
  --text-display: clamp(2.75rem, 8vw, 5.5rem);
  --text-display-lg: clamp(2.5rem, 6vw, 4.5rem);

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --max: 72rem;
  --measure: 55ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 4rem;
  --stair-indent: 0.95ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Pointer + scroll driven (JS sets) */
  --mx: 50%;
  --my: 40%;
  --scroll-y: 0;
  --global-p: 0;
  --birth: 0;
  --px: 0px;
  --py: 0px;
  --resin-temp: 0.55;
  --layer-deep-w: 1;
  --layer-mid-w: 1;
  --layer-fg-w: 1;

  /* Temp-shifted amber (cooler → warmer) */
  --amber-live: color-mix(
    in srgb,
    #8A9BB0 calc((1 - var(--resin-temp)) * 42%),
    color-mix(in srgb, #D4923A calc(var(--resin-temp) * 55%), var(--amber))
  );
  --resin-glow-live: color-mix(
    in srgb,
    rgba(140, 170, 200, 0.2) calc((1 - var(--resin-temp)) * 50%),
    rgba(212, 146, 58, 0.28) calc(var(--resin-temp) * 70%)
  );
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-optical-sizing: auto;
  line-height: 1.65;
  color: var(--ink);
  background: var(--depth);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

/* —— Type —— */
.stair {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.stair > span { display: block; }
.stair > span:nth-child(n + 2) {
  padding-left: var(--stair-indent);
}
.stair--arc > span:nth-child(1) { padding-left: 0; }
.stair--arc > span:nth-child(2) { padding-left: 0.95ch; }
.stair--arc > span:nth-child(3) { padding-left: 1.9ch; }

.num {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  line-height: 1.4;
  padding-top: 0.3em;
}

/* —— Persistent depth field —— */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.field-deep {
  position: absolute;
  inset: -10%;
  opacity: calc(0.85 * var(--layer-deep-w, 1));
  background:
    radial-gradient(
      ellipse 90% 70% at var(--mx) var(--my),
      color-mix(in srgb, var(--amber-live) 18%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 120% 90% at 50% 30%,
      #2A1C12 0%,
      var(--depth) 45%,
      #0E0B09 100%
    );
  transition: opacity 0.35s var(--ease);
}

.field-mid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle 42vmin at calc(var(--mx) + 4%) calc(var(--my) - 6%),
      var(--resin-glow-live) 0%,
      transparent 70%
    );
  opacity: calc(0.85 * var(--layer-mid-w, 1));
  mix-blend-mode: screen;
  transition: opacity 0.35s var(--ease);
}

.resin-light {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  left: var(--mx);
  top: var(--my);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, #E8C27A calc(40% + var(--resin-temp) * 30%), #A8C4D8) 0%,
    color-mix(in srgb, var(--amber-live) 55%, transparent) 35%,
    transparent 68%
  );
  opacity: calc(0.9 * var(--layer-mid-w, 1));
  transition: left 0.45s var(--ease), top 0.45s var(--ease), opacity 0.6s var(--ease);
}

body.is-idle .resin-light {
  animation: resinDrift 14s ease-in-out infinite alternate;
}

@keyframes resinDrift {
  0%   { scale: 1; opacity: calc(0.88 * var(--layer-mid-w, 1)); }
  50%  { scale: 1.06; opacity: calc(0.95 * var(--layer-mid-w, 1)); }
  100% { scale: 1.02; opacity: calc(0.9 * var(--layer-mid-w, 1)); }
}

.orbs {
  position: absolute;
  inset: 0;
  opacity: var(--layer-fg-w, 1);
  transition: opacity 0.35s var(--ease);
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, #E8C27A calc(50% + var(--resin-temp) * 25%), #B8D0E0),
    color-mix(in srgb, var(--amber-live) 40%, transparent) 45%,
    transparent 70%
  );
  opacity: 0.55;
  animation: orbFloat var(--dur, 18s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(var(--dx, 12px), var(--dy, -18px), 0) scale(1.08); }
}

/* —— Nav —— */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--depth) 55%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: rgba(232, 226, 216, 0.08);
  background: color-mix(in srgb, var(--depth) 78%, transparent);
}
.nav.is-paper {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom-color: var(--line);
}
.nav.is-paper .brand,
.nav.is-paper .nav-link,
.nav.is-paper .nav-peek {
  color: var(--ink);
}
.nav.is-paper .nav-link,
.nav.is-paper .nav-peek {
  color: var(--ink-soft);
}
.nav.is-paper .nav-link:hover,
.nav.is-paper .nav-peek:hover {
  color: var(--amber-ink);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1;
}

.resin-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-live, var(--amber));
  box-shadow: 0 0 10px color-mix(in srgb, var(--amber-live, var(--amber)) 50%, transparent);
  flex-shrink: 0;
}
.resin-mark--lg {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--amber-live, var(--amber)) 55%, transparent);
}
.resin-mark.is-pulse {
  animation: resinPulse 1.2s var(--ease) 1 forwards;
}
@keyframes resinPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 50%, transparent); }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav-link,
.nav-peek {
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  color: var(--night-soft);
  letter-spacing: 0.02em;
}
.nav-link:hover,
.nav-peek:hover {
  color: var(--paper);
}
.nav-peek {
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 226, 216, 0.18);
  border-radius: 999px;
}
.nav-peek[aria-expanded="true"] {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
}

/* —— Side path A: Resin study panel —— */
.peek-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.peek {
  position: fixed;
  top: calc(var(--nav-h) + 0.75rem);
  right: var(--gutter);
  z-index: 70;
  width: min(24rem, calc(100vw - (var(--gutter) * 2)));
  max-height: calc(100vh - var(--nav-h) - 2rem);
  overflow: auto;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow:
    0 24px 60px rgba(10, 9, 8, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.peek[hidden],
.peek-scrim[hidden] { display: none !important; }

.peek-inner { padding: var(--space-6); }
.peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.peek-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.peek-close {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.peek-close:hover { color: var(--amber-ink); }
.peek-lead {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.peek-swatches {
  display: flex;
  gap: 0.55rem;
  margin-bottom: var(--space-5);
}
.swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(16, 16, 14, 0.12);
}
.swatch-paper { background: var(--paper); }
.swatch-amber {
  background: radial-gradient(circle at 35% 30%, #E8C27A, var(--amber-live, var(--amber)));
  box-shadow: 0 0 14px var(--resin-glow-live, var(--resin-glow));
}
.swatch-depth { background: var(--depth); }
.swatch-night { background: var(--night); }

.peek-study {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.peek-layers {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.peek-layers legend {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
  padding: 0 0.35rem;
}
.peek-ctrl {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.peek-ctrl input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  cursor: pointer;
}
.peek-temp-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  font-style: italic;
}
.peek-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  font-size: var(--text-xs);
  padding: var(--space-4);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
  border: 1px solid var(--line);
}
.peek-readout dt {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-ink);
  font-size: var(--text-2xs);
  margin-bottom: 0.15rem;
}
.peek-readout dd {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.peek-note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-style: italic;
  line-height: 1.55;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

/* —— Scene infrastructure —— */
main { position: relative; z-index: 1; }

.scene-track {
  height: calc(var(--scene-vh, 150) * 1vh);
  position: relative;
}

.scene-pin {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.pin-content {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  padding-top: calc(var(--nav-h) * 0.35);
  position: relative;
}

/* Paper wash over depth for readable mid scenes — S1 inherits birth */
.scene-s1 .scene-pin,
.scene-s2 .scene-pin,
.scene-s3 .scene-pin,
.scene-s4 .scene-pin {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 0%, transparent) 0%,
      color-mix(in srgb, var(--paper) 78%, transparent) 18%,
      color-mix(in srgb, var(--paper) 88%, transparent) 50%,
      color-mix(in srgb, var(--paper) 72%, transparent) 100%
    );
}

/* S1 birth-in: start closer to resin depth, clear into paper */
.scene-s1 .scene-pin {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--depth) calc((1 - var(--birth-in, 0)) * 55%), transparent) 0%,
      color-mix(in srgb, var(--paper) calc(20% + var(--birth-in, 0) * 68%), transparent) 22%,
      color-mix(in srgb, var(--paper) calc(40% + var(--birth-in, 0) * 48%), transparent) 55%,
      color-mix(in srgb, var(--paper) calc(30% + var(--birth-in, 0) * 42%), transparent) 100%
    );
}

.scene-s0 .scene-pin {
  background: transparent;
}

/* S0→S1 continuous birth wash */
.birth-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper) 70%, transparent) 55%,
      color-mix(in srgb, var(--paper) 88%, transparent) 100%
    );
  opacity: var(--birth-out, 0);
  z-index: 0;
}
.scene-s0 .pin-content { z-index: 1; }

.scene-pin--night,
.scene-s5 .scene-pin {
  background:
    radial-gradient(
      ellipse 80% 60% at var(--mx) var(--my),
      color-mix(in srgb, var(--amber-live, var(--amber)) 16%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, transparent 0%, var(--night) 35%, var(--night) 100%);
  color: var(--night-ink);
}

/* Progress vars set by JS per scene: --p 0→1 */
.scene { --p: 0; --birth-out: 0; --birth-in: 0; }

/* —— Parallax: CSS owns transform; JS only sets --px/--py —— */
[data-parallax] {
  --px: 0px;
  --py: 0px;
}

/* —— Mid-pin atmosphere (wisps + ticks + density) —— */
.pin-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.pin-content > :not(.pin-atmosphere) {
  position: relative;
  z-index: 1;
}

.wisp {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.75rem, 2vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--night-soft);
  opacity: calc(var(--wisp-a, 0) * 0.28);
  transform: translate3d(0, var(--wisp-y, 0px), 0);
  transition: opacity 0.2s linear;
}
.pin-atmosphere--paper .wisp {
  color: var(--ink-faint);
  opacity: calc(var(--wisp-a, 0) * 0.22);
}
.wisp[data-wisp="0"] { left: 4%; top: 18%; }
.wisp[data-wisp="1"] { right: 8%; top: 62%; }
.wisp[data-wisp="2"] { left: 18%; bottom: 14%; }

.pin-ticks {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  --tick-p: 0;
}
.pin-ticks span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--amber-live, var(--amber));
  opacity: 0.15;
}
.pin-atmosphere--paper .pin-ticks span {
  background: var(--amber);
}
.pin-ticks span:nth-child(1) { opacity: calc(0.12 + clamp(0, var(--tick-p) / 0.25, 1) * 0.55); }
.pin-ticks span:nth-child(2) { opacity: calc(0.12 + clamp(0, (var(--tick-p) - 0.2) / 0.25, 1) * 0.55); }
.pin-ticks span:nth-child(3) { opacity: calc(0.12 + clamp(0, (var(--tick-p) - 0.4) / 0.25, 1) * 0.55); }
.pin-ticks span:nth-child(4) { opacity: calc(0.12 + clamp(0, (var(--tick-p) - 0.6) / 0.25, 1) * 0.55); }
.pin-ticks span:nth-child(5) { opacity: calc(0.12 + clamp(0, (var(--tick-p) - 0.75) / 0.25, 1) * 0.55); }
.pin-ticks span:nth-child(6) { opacity: calc(0.12 + clamp(0, (var(--tick-p) - 0.88) / 0.2, 1) * 0.55); }

.resin-density {
  position: absolute;
  width: 48vmin;
  height: 48vmin;
  right: 2%;
  bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--resin-glow-live, var(--resin-glow)) 0%,
    color-mix(in srgb, var(--resin-glow-live, var(--resin-glow)) 35%, transparent) 42%,
    transparent 72%
  );
  opacity: calc(var(--density, 0.4) * 0.55);
  mix-blend-mode: screen;
}
.resin-density--soft {
  mix-blend-mode: multiply;
  opacity: calc(var(--density, 0.4) * 0.25);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--amber) 22%, transparent) 0%,
    transparent 70%
  );
}

/* —— S0 Atmosphere —— */
.s0-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.atmosphere-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night-soft);
  opacity: calc((1 - var(--p) * 1.2) * (1 - var(--birth-out, 0) * 0.5));
  transform:
    translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--p) * -20px), 0);
}

.atmosphere-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  opacity: calc((1 - var(--p) * 0.85) * (1 - var(--birth-out, 0) * 0.35));
  transform:
    translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--p) * -40px), 0)
    scale(calc(1 + var(--p) * 0.08));
}

.atmosphere-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--paper);
}

.atmosphere-hint {
  font-size: var(--text-xs);
  color: var(--night-soft);
  opacity: calc((0.7 - var(--p)) * (1 - var(--birth-out, 0)));
  letter-spacing: 0.04em;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* —— S1 Hero —— */
.s1-content { max-width: 40rem; }

.hero-title {
  font-size: var(--text-display);
  max-width: 14ch;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.hero-line {
  display: block;
  --emerge: clamp(0, calc((var(--p) - var(--emerge-start, 0)) / 0.28), 1);
  opacity: var(--emerge);
  transform:
    translate3d(
      0,
      calc((1 - var(--emerge)) * 28px),
      0
    );
}
.hero-line[data-emerge="0"] { --emerge-start: 0.02; }
.hero-line[data-emerge="1"] { --emerge-start: 0.14; padding-left: var(--stair-indent); }

.hero-sub {
  margin-top: var(--space-7);
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
  --emerge-y: calc((1 - clamp(0, calc((var(--p) - 0.32) / 0.25), 1)) * 16px);
  opacity: clamp(0, calc((var(--p) - 0.32) / 0.25), 1);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--emerge-y)), 0);
}

.hero-actions {
  margin-top: var(--space-9);
  --emerge-y: calc((1 - clamp(0, calc((var(--p) - 0.5) / 0.25), 1)) * 12px);
  opacity: clamp(0, calc((var(--p) - 0.5) / 0.25), 1);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--emerge-y)), 0);
}

.cta {
  display: inline-block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--amber-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--amber);
  padding-bottom: 0.15em;
  line-height: 1.3;
}
.cta:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cta--night {
  color: var(--amber);
  border-bottom-color: var(--amber);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.cta--night:hover {
  color: var(--night-ink);
  border-bottom-color: var(--night-ink);
}

/* —— S2 Stance —— */
.s2-content { max-width: 38rem; }

.pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: var(--text-pull);
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 28ch;
  color: var(--ink);
  margin-bottom: var(--space-7);
  --emerge-y: calc((1 - clamp(0, calc(var(--p) / 0.35), 1)) * 24px);
  opacity: clamp(0.15, calc(var(--p) * 2.2), 1);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--emerge-y)), 0);
}

.stance-body {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.7;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.scrub-line {
  margin-top: 1em;
  --scrub: 0;
  opacity: calc(0.12 + var(--scrub) * 0.88);
  clip-path: inset(0 calc((1 - var(--scrub)) * 100%) 0 0);
}
.scrub-line:first-child { margin-top: 0; }

/* —— S3 Capability chambers — continuous scrub —— */
.s3-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 40rem;
}

.chamber-kicker {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chamber-stage {
  position: relative;
  min-height: 12rem;
  display: grid;
  --chamber-p: 0;
  --chamber-local: 0;
}

.chamber-panel {
  --cw: 0;
  --cl: 0;
  grid-area: 1 / 1;
  opacity: var(--cw);
  transform:
    translate3d(
      0,
      calc((1 - var(--cw)) * 12px + (0.5 - var(--cl)) * 4px),
      0
    );
  pointer-events: none;
}
.chamber-panel.is-live {
  pointer-events: auto;
  z-index: 1;
}

.chamber-num {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--amber-ink);
  margin-bottom: var(--space-3);
}

.chamber-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: var(--text-display-sm);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.chamber-line {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.7;
}

.chamber-side { margin-top: var(--space-2); }

.chamber-expand {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--amber-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 60%, transparent);
  padding: 0.65rem 0.15rem;
  min-height: 44px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
}
.chamber-expand:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.chamber-expand[aria-expanded="true"] {
  color: var(--ink);
}

.chamber-detail {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper-2) 90%, transparent);
  max-height: min(48vh, 26rem);
  overflow: auto;
}
.chamber-detail[hidden] { display: none !important; }

.detail-beat {
  display: none;
  --detail-p: 0;
}
.detail-beat.is-active { display: block; }

.detail-beat h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.detail-vignette {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

/* Micro-scenes */
.micro-scene {
  margin-bottom: var(--space-4);
}
.micro-scrub-label {
  display: grid;
  gap: 0.3rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.micro-scrub-label input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  cursor: pointer;
}

.micro-ring {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.ring-svg { flex-shrink: 0; }
.ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 6;
}
.ring-prog {
  fill: none;
  stroke: var(--amber);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--detail-p, 0) * 100);
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset 0.08s linear;
}
.micro-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--amber-ink);
  letter-spacing: 0.04em;
}

.micro-layers {
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--space-2);
}
.m-layer {
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: var(--paper);
  opacity: 0.35;
  transform: translateX(calc((1 - var(--detail-p, 0)) * -8px));
}
.m-layer--tools {
  opacity: calc(0.3 + clamp(0, var(--detail-p, 0) / 0.4, 1) * 0.7);
}
.m-layer--agent {
  opacity: calc(0.3 + clamp(0, (var(--detail-p, 0) - 0.25) / 0.4, 1) * 0.7);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}
.m-layer--human {
  opacity: calc(0.3 + clamp(0, (var(--detail-p, 0) - 0.5) / 0.45, 1) * 0.7);
  background: color-mix(in srgb, var(--amber) 12%, var(--paper));
  border-color: var(--amber);
}

.micro-handoff {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-2);
}
.ho-step {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  opacity: 0.4;
}
.ho-step[data-ho="0"] {
  opacity: calc(0.35 + clamp(0, var(--detail-p, 0) / 0.35, 1) * 0.65);
  border-color: color-mix(in srgb, var(--amber) calc(var(--detail-p, 0) * 80%), var(--line));
  color: var(--ink);
}
.ho-step[data-ho="1"] {
  opacity: calc(0.35 + clamp(0, (var(--detail-p, 0) - 0.3) / 0.35, 1) * 0.65);
  color: var(--ink);
}
.ho-step[data-ho="2"] {
  opacity: calc(0.35 + clamp(0, (var(--detail-p, 0) - 0.6) / 0.4, 1) * 0.65);
  background: color-mix(in srgb, var(--amber) calc(clamp(0, (var(--detail-p, 0) - 0.6) / 0.4, 1) * 18%), transparent);
  border-color: var(--amber);
  color: var(--amber-ink);
}
.ho-arrow {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  opacity: 0.5;
}

.chamber-progress {
  display: flex;
  gap: 0.55rem;
  margin-top: var(--space-4);
}
.cp-dot {
  position: relative;
  width: 1.75rem;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
  --cp-fill: 0;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.cp-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(var(--cp-fill, 0));
  transform-origin: left center;
}
.cp-dot.is-active {
  background: color-mix(in srgb, var(--amber) 25%, var(--line));
  transform: scaleY(1.6);
}
.cp-dot.is-done {
  background: var(--amber-ink);
}
.cp-dot.is-done::after { transform: scaleX(1); }

/* —— S4 Engage —— */
.s4-content { max-width: 42rem; }

.engage-heading {
  font-size: var(--text-display-sm);
  margin-bottom: var(--space-4);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.engage-intro {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.engage-track {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 0.15rem;
}

.engage-fill {
  position: absolute;
  left: 0.35rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
  transform-origin: top center;
  overflow: hidden;
}
.engage-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleY(var(--engage-p, 0));
  transform-origin: top center;
  transition: transform 0.15s linear;
}

.engage-stage {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid transparent;
  opacity: 0.28;
  transform: translateX(-6px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.engage-stage:first-of-type { border-top: none; }

.engage-stage[data-state="active"] {
  opacity: 1;
  transform: translateX(0);
}
.engage-stage[data-state="complete"] {
  opacity: 0.72;
  transform: translateX(0);
}
.engage-stage[data-state="complete"] h3::after {
  content: " ·";
  color: var(--amber);
}

.engage-stage h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.engage-stage p {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 0.9875rem;
  line-height: 1.65;
}
.engage-stage[data-state="active"] .num {
  color: var(--amber-ink);
}

/* —— S5 Contact night —— */
.s5-content { max-width: 36rem; }

.contact-title {
  font-size: var(--text-display-lg);
  max-width: 12ch;
  margin-bottom: var(--space-8);
  color: var(--night-ink);
  --emerge-y: calc((1 - clamp(0, calc(var(--p) / 0.4), 1)) * 20px);
  opacity: clamp(0.2, calc(var(--p) * 2), 1);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--emerge-y)), 0);
}

.site-footer {
  margin-top: clamp(4rem, 10vw, 6rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--night-line);
  font-size: var(--text-xs);
  color: var(--night-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.site-footer a {
  color: var(--night-soft);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--night-ink);
  text-decoration: underline;
}
.site-footer .sep { opacity: 0.45; }

::selection {
  background: color-mix(in srgb, var(--amber) 28%, transparent);
  color: var(--ink);
}
.scene-s5 ::selection {
  background: color-mix(in srgb, var(--amber) 40%, transparent);
  color: var(--night-ink);
}

.layer-fg,
.layer-mid,
.layer-deep {
  /* transforms via CSS vars; avoid permanent will-change */
}

/* —— Reduced motion: static readable stacked page —— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .field-deep,
  .field-mid,
  .resin-light,
  .orbs {
    animation: none !important;
  }
  .resin-light {
    left: 50% !important;
    top: 40% !important;
    transition: none !important;
  }

  .scene-track {
    height: auto !important;
  }
  .scene-pin {
    position: relative !important;
    height: auto !important;
    min-height: auto;
    padding: clamp(3.5rem, 10vw, 6rem) 0;
  }

  .scene-s0 .scene-pin {
    min-height: 70vh;
    background: var(--depth);
  }
  .scene-s1 .scene-pin,
  .scene-s2 .scene-pin,
  .scene-s3 .scene-pin,
  .scene-s4 .scene-pin {
    background: var(--paper);
  }
  .scene-s5 .scene-pin {
    background: var(--night);
    min-height: 70vh;
  }

  .hero-line,
  .hero-sub,
  .hero-actions,
  .pull,
  .scrub-line,
  .contact-title,
  .atmosphere-label,
  .atmosphere-mark,
  .atmosphere-hint,
  .hero-title,
  .stance-body,
  .engage-heading,
  .cta--night {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .engage-stage {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .engage-fill::after {
    transform: scaleY(1) !important;
  }

  .chamber-panel {
    position: relative !important;
    grid-area: auto !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    margin-bottom: var(--space-8);
  }
  .chamber-stage {
    min-height: 0;
    display: block !important;
  }

  .chamber-detail,
  .chamber-detail[hidden] {
    display: block !important;
    max-height: none;
  }
  .detail-beat {
    display: block !important;
    margin-bottom: var(--space-6);
    --detail-p: 1 !important;
  }
  .chamber-expand { display: none; }
  .chamber-progress { display: none; }
  .pin-atmosphere { display: none; }
  .birth-wash { display: none; }

  .atmosphere-hint { display: none; }

  .peek {
    box-shadow: none;
  }
  .peek-scrim {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ring-prog {
    stroke-dashoffset: 0 !important;
  }
  .m-layer,
  .ho-step {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 540px) {
  .engage-stage {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.35rem 1rem;
  }
  .peek {
    right: var(--gutter);
    left: var(--gutter);
    width: auto;
  }
  .pin-ticks { display: none; }
}