@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Type scale. Every font-size on the page comes from one of these. */
  --t-display: clamp(64px, 8.5vw, 140px);   /* hero title */
  --t-numeral: clamp(60px, 7vw, 108px);     /* belief numbers */
  --t-h1: clamp(48px, 5.5vw, 84px);         /* section titles */
  --t-h2: clamp(42px, 4.5vw, 72px);         /* belief headings */
  --t-statement: clamp(34px, 3.6vw, 56px);  /* pinned closing lines, Interface title */
  --t-landing: clamp(28px, 3vw, 44px);      /* landing lines, intro opener, phase titles */
  --t-lede: clamp(22px, 2.1vw, 32px);       /* scene headlines, counters, index links */
  --t-callout: clamp(20px, 1.9vw, 28px);    /* Candor lines in the day scene */
  --t-intro: clamp(18px, 1.5vw, 24px);      /* intro beats, hero dek, section intros */
  --t-body: 18px;
  --t-body-sm: 16px;                        /* buttons, scene lines */
  --t-small: 15px;                          /* glosses, index sub-links */
  --t-label: 12px;                          /* uppercase labels */
  --t-label-sm: 10px;
  --t-brand: 24px;
  --t-brand-sans: 20px;
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --ls-display: -.055em;
  --ls-tight: -.03em;
  --ls-label: .13em;
  --ink: #000000;
  --paper: #ffffff;
  --orb-base: #ededed;
  /* Fine monochrome film grain: one inline SVG tile (220px, stitched), reused on the Interface ground
     and inside every orb. Static; the alpha noise is stretched into an opaque grey so it reads as grain. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 2.5 -0.75 0 0 0 2.5 -0.75 0 0 0 2.5 -0.75 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --page: min(100% - 48px, 1480px);
  --measure: 760px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, "Times New Roman", serif;
  --sans: "Inter Variable", Inter, "Helvetica Neue", Helvetica, sans-serif;
}

/* ---------- Candor manifesto ---------- */
* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

a { color: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 100%;
  height: 4px;
  pointer-events: none;
}

.progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header {
  position: relative;
  z-index: 90;
  background: var(--paper);
}

.site-header__inner {
  width: var(--page);
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.section-code,
.bridge-label,
.phase-label {
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.header-brand {
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1;
}

.header-brand__name {
  font-family: var(--serif);
  font-size: var(--t-brand);
  letter-spacing: -.03em;
  text-decoration: none;
}

.header-brand__sep {
  font-family: var(--sans);
  font-size: var(--t-brand-sans);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.22);
}

.header-brand__section {
  font-family: var(--sans);
  font-size: var(--t-brand-sans);
  font-weight: 400;
  letter-spacing: -.01em;
  color: rgba(0, 0, 0, 0.42);
}

/* Liquid-glass pills, one family: the header's Index button (dark glass, it sits on paper) and the
   finale's Back to top (light glass, it sits on graphite). Shape, type, highlight and hover logic are
   shared here; each pill only sets its tokens. --pill-x / --pill-y let a pill be centred or lifted
   without fighting over `transform`. */
.glass-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--paper);
  box-shadow: inset 0 1px 0 var(--pill-highlight), var(--pill-shadow, 0 0 0 rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: var(--pill-filter);
  backdrop-filter: var(--pill-filter);
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--pill-x, 0px), var(--pill-y, 0px));
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.glass-pill:hover,
.glass-pill:focus-visible {
  --pill-y: -1px;
  background: var(--pill-bg-hover);
  border-color: var(--pill-border-hover);
  color: var(--paper);
  outline: 0;
}

.glass-pill:focus-visible { outline: 2px solid var(--pill-ring); outline-offset: 3px; }

.menu-button {
  --pill-bg: rgba(20, 20, 22, 0.78);
  --pill-bg-hover: rgba(20, 20, 22, 0.9);
  --pill-border: rgba(255, 255, 255, 0.14);
  --pill-border-hover: rgba(255, 255, 255, 0.14);
  --pill-highlight: rgba(255, 255, 255, 0.18);
  --pill-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  --pill-filter: blur(16px) saturate(1.2);
  --pill-ring: var(--ink);
  justify-self: end;
}

/* The hero group (title, dek, orb) is always centred vertically in the first viewport. */
.hero {
  width: var(--page);
  min-height: calc(100dvh - 72px);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) 0;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: 0;
  text-align: center;
  overflow: hidden;
}


.hero h1 {
  max-width: 1220px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: .83;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.hero__intro {
  max-width: 850px;
  margin: clamp(28px, 4vh, 48px) auto 0;
  font-size: var(--t-intro);
  line-height: 1.48;
  text-wrap: balance;
}

@property --orb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.voice-orb-stage {
  margin-top: clamp(28px, 5vh, 64px);
  display: grid;
  place-items: center;
}

.voice-orb {
  width: clamp(160px, 15vw, 220px);
  aspect-ratio: 1;
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--orb-base);
  isolation: isolate;
}

.voice-orb::before {
  content: "";
  grid-area: stack;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.voice-orb::before {
  background:
    conic-gradient(from calc(var(--orb-angle) * 2) at 25% 70%, var(--ink), transparent 20% 80%, var(--ink)),
    conic-gradient(from calc(var(--orb-angle) * 2) at 45% 75%, var(--paper), transparent 30% 60%, var(--paper)),
    conic-gradient(from calc(var(--orb-angle) * -3) at 80% 20%, var(--ink), transparent 40% 60%, var(--ink)),
    conic-gradient(from calc(var(--orb-angle) * 2) at 15% 5%, var(--paper), transparent 10% 90%, var(--paper)),
    conic-gradient(from var(--orb-angle) at 20% 80%, var(--ink), transparent 10% 90%, var(--ink)),
    conic-gradient(from calc(var(--orb-angle) * -2) at 85% 10%, var(--paper), transparent 20% 80%, var(--paper));
  box-shadow: inset var(--orb-base) 0 0 14px 4px;
  filter: blur(7px) contrast(2.35);
  animation: orb-rotate 18s linear infinite;
}

/* Grain inside the orb. A child rather than ::after because ::after is the cursor halo once the orb is
   awake; positioned so it paints above the filtered ::before, and clipped by its own radius so it stays
   a disc when the awake orb switches to overflow: visible. */
.voice-orb__grain {
  grid-area: stack;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--grain) 0 0 / 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.10;
  pointer-events: none;
}

@keyframes orb-rotate {
  to { --orb-angle: 360deg; }
}

.manifesto-nav {
  position: fixed;
  inset: 72px 0 auto;
  z-index: 80;
  min-height: calc(100vh - 72px);
  background: var(--paper);
  transform: translateY(-110%);
  transition: transform 260ms ease;
}

.manifesto-nav.is-open { transform: translateY(0); }

.manifesto-nav__inner {
  width: min(calc(100% - 48px), 760px);
  margin: 0 auto;
  padding: 42px 0 54px;
  display: block;
  max-height: calc(100vh - 72px);
  overflow: auto;
}

.manifesto-nav a {
  min-height: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: baseline;
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.25;
}

.index-number {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .12em;
}

.index-group { margin: 0; }

.index-sublist {
  margin: 2px 0 14px 58px;
  display: grid;
  gap: 0;
}

.manifesto-nav .index-sublist a {
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 5px 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.35;
}

.manifesto-nav .index-sublist .index-number {
  font-size: var(--t-label-sm);
}

.manifesto-nav a:hover,
.manifesto-nav a:focus-visible,
.manifesto-nav a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  outline: 0;
}

main { border-top: 0; }

.chapter {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(56px, 6.5vw, 104px) 0;
  scroll-margin-top: 88px;
}

main > .chapter:first-child { border-top: 0; }

.chapter-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 820px) minmax(80px, 1fr);
  column-gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.chapter-main { grid-column: 2; min-width: 0; }
.chapter-rail { grid-column: 1; grid-row: 1; }

.section-code {
  display: inline-block;
  padding-top: 0;
}

.chapter h2,
.chapter h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.chapter h2 {
  margin: 0 0 56px;
  font-size: var(--t-h1);
  line-height: .98;
}

.section-title {
  font-size: var(--t-h1) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
}

.chapter h3 {
  margin: 0 0 34px;
  font-size: var(--t-landing);
  line-height: 1.02;
}

.chapter p {
  max-width: var(--measure);
  margin: 0 0 28px;
}

.chapter p:last-child { margin-bottom: 0; }


.belief {
  min-height: 100vh;
  display: grid;
  align-items: center;
}

.belief-number {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: var(--t-numeral);
  font-weight: 400;
  line-height: .75;
  letter-spacing: -.07em;
}

.belief .chapter-main {
  padding-top: 4px;
}

.belief h2 { font-size: var(--t-h2); }

.beliefs-intro {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(56px, 6.5vw, 104px) 0 clamp(40px, 5vw, 72px);
  scroll-margin-top: 88px;
}

.beliefs-intro__inner {
  grid-column: 2;
  max-width: 820px;
  margin: 0;
}

.beliefs-intro h2 {
  margin: 0 0 38px;
  font-family: var(--serif);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
}

.beliefs-intro p {
  max-width: 720px;
  margin: 0;
  font-size: var(--t-intro);
  line-height: 1.5;
}

/* The last belief and the black Interface section breathe on both sides of the boundary. */
#belief-05 { padding-bottom: calc(clamp(56px, 6.5vw, 104px) + clamp(120px, 18vh, 220px)); }

/* Graphite ground, shared by the Interface and the finale sections: near-black with one soft, neutral
   light in the top-right, and film grain over it. Light and grain are fixed to the viewport, not the
   page, so they hold still under a pinned stage instead of sliding past it, and a section's padding
   carries the same ground with no seam. The grain sits at z-index -1 inside the isolated section:
   above the ground, below every piece of text. */
.graphite {
  position: relative;
  isolation: isolate;
  background: radial-gradient(60% 50% at 78% 12%, rgba(255, 255, 255, 0.10), transparent 70%) fixed, #111113;
  color: var(--paper);
}

.graphite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain) 0 0 / 220px 220px fixed;
  mix-blend-mode: soft-light;
  opacity: 0.14;
  pointer-events: none;
}

.bridge {
  width: 100%;
  padding: calc(clamp(72px, 10vw, 152px) + clamp(120px, 16vh, 200px)) max(24px, calc((100vw - min(100% - 48px, 1480px)) / 2)) clamp(72px, 10vw, 152px);
}

.bridge__inner {
  max-width: 1050px;
  margin: 0 auto;
}

/* Label, heading, first paragraph and the timeline share one pinned stage. */
.bridge__pin { height: 320dvh; }
.bridge__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  align-content: start;
  padding-top: clamp(32px, 5vh, 56px);
  gap: 0;
}

.bridge-label { display: block; margin-bottom: clamp(20px, 3vh, 32px); }

.bridge h2 {
  margin: 0 0 clamp(22px, 3.2vh, 34px);
  font-family: var(--serif);
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.bridge p {
  max-width: 720px;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
}


.phase {
  display: block;
  padding: clamp(68px, 8vw, 118px) 0 0;
}

.phase:first-of-type { padding-top: 0; }

.phase-label {
  position: static;
  margin-bottom: 24px;
}

.phase-copy { min-width: 0; max-width: 820px; }






/* Back to top: light glass, bottom-centre of the pinned finale stage. It is the last thing to appear;
   motion.js drives --cta (0..1) and data-on once the orb has settled. Without JS (or with reduced
   motion) it is simply there. */
.back-top {
  --pill-bg: rgba(255, 255, 255, 0.08);
  --pill-bg-hover: rgba(255, 255, 255, 0.14);
  --pill-border: rgba(255, 255, 255, 0.22);
  --pill-border-hover: rgba(255, 255, 255, 0.32);
  --pill-highlight: rgba(255, 255, 255, 0.25);
  --pill-filter: blur(18px) saturate(1.3);
  --pill-ring: var(--paper);
  --pill-x: -50%;
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3.5vh, 36px);
  min-height: 0;
  padding: 7px 13px;
  font-size: var(--t-label);
  opacity: var(--cta, 1);
}

.back-top[data-on="false"] { visibility: hidden; }

.reveal {
  clip-path: none;
  transform: none;
}

/* Opening narrative: the introduction as spoken beats, narrated by the orb */
.opening {
  --beat-gap: 30dvh;
  position: relative;
  width: 100%;
  scroll-margin-top: 88px;
}

.opening__track {
  position: relative;
  z-index: 1;
  width: var(--page);
  margin: 0 auto;
  padding: 10dvh 0 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: var(--beat-gap);
  align-items: start;
}

.opening__code {
  grid-row: 1;
  grid-column: 1 / span 3;
  margin-bottom: calc(var(--beat-gap) * -0.6);
}

.story-beat {
  position: relative;
  grid-row: var(--row, auto);
  grid-column: var(--column, 2) / span var(--span, 6);
  margin: 0;
  font-size: var(--t-intro);
  line-height: 1.55;
  text-wrap: pretty;
}

.story-beat[data-align="right"] { text-align: right; }

.story-beat--lead {
  font-family: var(--serif);
  font-size: var(--t-landing);
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Words are wrapped in spans by reveal.js and revealed at reading pace. */
.w { transition: opacity 0.18s linear; }

/* A reference the machine has to resolve, and its gloss in the margin. */
.ref {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.ref-note {
  position: absolute;
  z-index: 2;
  width: 13rem;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-small);
  font-style: italic;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.62);
  text-align: left;
  opacity: var(--note, 0);
  transform: translate3d(calc(var(--note-shift, -10px) * (1 - var(--note, 0))), 0, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.ref-note::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 10px 4px 0;
  background: currentColor;
  vertical-align: middle;
}

.story-beat[data-align="right"] .ref-note { text-align: right; }

.opening__pin {
  grid-row: 10;
  grid-column: 1 / -1;
  height: 150dvh;
  margin-top: calc(var(--beat-gap) * -0.7);
}

.opening__pin-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
}

.pinned-beat {
  grid-row: auto;
  grid-column: 1;
  max-width: 22ch;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-statement);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: center;
  opacity: var(--presence, 1);
  transform: translate3d(0, var(--lift, 0px), 0);
  filter: blur(var(--blur, 0px));
  will-change: opacity, transform, filter;
}

/* The orb returns once, above the closing line. */
.voice-orb--close {
  width: clamp(160px, 15vw, 220px);
  margin-bottom: clamp(48px, 7vh, 76px);
  opacity: var(--presence, 1);
  transform: scale(calc((0.88 + 0.12 * var(--presence, 1)) * var(--orb-zoom, 1)));
  will-change: opacity, transform;
}

.opening[data-motion="reduced"] .story-beat .w { opacity: 1 !important; }
.opening[data-motion="reduced"] .ref-note { opacity: 1; transform: none; position: static; display: block; margin-top: 8px; }
.opening[data-motion="reduced"] .pinned-beat,
.opening[data-motion="reduced"] .voice-orb--close { opacity: 1; transform: none; filter: none; }
.opening[data-motion="reduced"] .opening__pin { height: auto; padding: 12dvh 0; }
.opening[data-motion="reduced"] .opening__pin-stage { position: static; height: auto; padding: 0; }

/* ---- Page-wide motion: landing lines, glosses in the body, plan rail, the day, the bookend ---- */
/* Landing lines read in word by word (motion.js); a slight lift resolves as they complete. */
.landing {
  max-width: 26ch;
  margin-top: 48px !important;
  font-family: var(--serif);
  font-size: var(--t-landing);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  transform: translate3d(0, calc(14px * (1 - var(--progress, 1))), 0);
  will-change: transform;
}

.chapter-main p { position: relative; }
.chapter-main .ref-note {
  left: calc(100% + 32px);
  width: 13rem;
  font-size: var(--t-small);
}

/* The finale mirrors the introduction's close: a full-width pinned stage on the graphite ground (the
   section carries .graphite; the sticky stage always covers exactly the section's visible area).
   motion.js plays it in order over the pin's scroll: the last line reads in word by word (0-55%), then
   the orb settles in (55-90%, --presence on the orb), then Back to top appears (from 90%, --cta). */
.finale { position: relative; width: 100%; }
.finale__pin { height: 170dvh; }
.finale__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0 24px;
  text-align: center;
}
.finale .voice-orb--close {
  width: clamp(160px, 15vw, 220px);
  margin: clamp(48px, 7vh, 80px) 0 0;
}
.finale .landing--final {
  max-width: none;
  white-space: nowrap;
  margin: 0 !important;
  font-size: var(--t-statement);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: center;
}

#master-plan .chapter-rail { align-self: stretch; }
.plan-rail {
  position: sticky;
  top: 38vh;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  width: max-content;
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(0, 0, 0, 0.22);
}
.plan-rail li {
  position: relative;
  padding-left: 22px;
  transition: color 0.3s ease;
}
.plan-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
}
.plan-rail li[data-active="true"] { color: var(--ink); }
.plan-rail li[data-done="true"] { color: rgba(0, 0, 0, 0.55); }

/* The day: the timeline inside the pinned Interface stage. The line sits below the paragraph,
   the three moments hang from it with their dots exactly on the line, and the closing line follows. */
.day {
  --day-gap: 20px;
  margin: clamp(40px, 6vh, 72px) 0 0;
}
.day__line { position: relative; height: 1px; background: rgba(255, 255, 255, 0.18); }
.day__fill { position: absolute; inset: 0; background: var(--paper); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.day__thought {
  position: absolute;
  top: 50%;
  left: calc(var(--fill, 0) * 100%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}
.day__moments {
  position: relative;
  margin: var(--day-gap) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px);
}
.day__moment {
  position: relative;
  opacity: 0.28;
  transition: opacity 0.35s ease;
}
/* Node dot centred on the 1px line above. */
.day__moment::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--day-gap) - 0.5px);
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
}
.day__moment:nth-child(2) { text-align: center; }
.day__moment:nth-child(2)::before { left: 50%; margin-left: -3.5px; }
.day__moment:nth-child(3) { text-align: right; }
.day__moment:nth-child(3)::before { left: auto; right: 0; }
.day__moment[data-lit="true"] { opacity: 0.42; }
.day__moment[data-now="true"] { opacity: 1; }
.day__time {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.day__what {
  display: block;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: var(--t-callout);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.day__moment:nth-child(2) .day__what { margin: 0 auto; }
.day__moment:nth-child(3) .day__what { margin-left: auto; }
.bridge .day__close {
  max-width: 34ch;
  margin: clamp(40px, 6vh, 72px) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.2;
  letter-spacing: -.02em;
  transform: translate3d(0, calc(14px * (1 - var(--progress, 1))), 0);
}

/* The contrast: three products that never speak (Ramp-style scatter with a wire that dies)
   above one axis that carries the thought across the day (Grok-style hairline). */
.contrast { margin: clamp(64px, 9vh, 110px) 0 0; display: grid; }
.contrast__lane { grid-area: 1 / 1; opacity: var(--act, 0); transition: opacity 0.4s ease; }
.contrast__lane[data-on="false"] { pointer-events: none; }
.contrast__lane { position: relative; }
.contrast__lane--one { align-self: start; }

.contrast__lane--one { margin-top: 0; }
.contrast__tag {
  display: block;
  margin-bottom: clamp(18px, 2.6vh, 28px);
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--paper);
}

.scatter { position: relative; height: clamp(170px, 22vh, 220px); }
.wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire__seg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
  vector-effect: non-scaling-stroke;
}
.frags { margin: 0; padding: 0; list-style: none; }
.frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: min(17rem, 31%);
  opacity: 0.3;
  transition: opacity 0.35s ease;
}
.frag[data-lit="true"] { opacity: 0.42; }
.frag[data-now="true"] { opacity: 1; }
.frag__app {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.frag__again {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--paper);
}
.contrast__count {
  display: block;
  margin: calc(-1 * clamp(18px, 2.6vh, 28px) + 8px) 0 clamp(22px, 3.4vh, 36px);
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, 0.55);
  opacity: var(--show, 0);
  transition: opacity 0.3s ease;
}
.contrast__count b { font-weight: 400; color: var(--paper); }
.contrast__count--one { color: rgba(255, 255, 255, 0.8); }

/* Tick marks along the axis, Grok-style. */
.day__line--axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 7px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px calc(100% / 24));
  pointer-events: none;
}
.contrast .day { margin-top: 0; }
.contrast .day__what { font-size: var(--t-callout); }
.contrast .day__close { grid-area: 2 / 1; max-width: 44ch; margin-top: clamp(28px, 4.5vh, 56px); font-size: var(--t-callout); }

/* Short viewports: tighten the pinned Interface stage so it never overflows. */
@media (max-height: 780px) and (min-width: 681px) {
  .bridge-label { margin-bottom: 14px; }
  .bridge h2 { margin-bottom: 14px; font-size: var(--t-landing); }
  .bridge__stage p:not(.day__close) { font-size: var(--t-body-sm); line-height: 1.45; }
  .contrast { margin-top: 36px; }
  .scatter { height: 164px; }
  .bridge__stage { padding-top: 24px; }
  .contrast__tag { font-size: var(--t-brand-sans); margin-bottom: 14px; }
  .contrast__count { font-size: var(--t-brand-sans); margin: -6px 0 16px; }
  .contrast__lane--one { margin-top: 16px; }
  .contrast .day__what { font-size: var(--t-body-sm); }
  .contrast .day__close { margin-top: 16px; font-size: var(--t-body-sm); }
  .contrast__count { margin-top: 6px; }
}

/* Small liquid-glass cue at the foot of the pinned black stage. */
.keep-scrolling {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3.5vh, 36px);
  transform: translateX(-50%) translateY(calc(6px * (1 - var(--cue, 1))));
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  opacity: var(--cue, 1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.bridge__stage { position: sticky; }
html[data-motion="reduced"] .keep-scrolling { display: none; }

/* First load: the hero settles in slowly, and the orb comes to life last. */
@keyframes hero-settle {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes orb-wake {
  0% { opacity: 0; transform: scale(0.84); filter: blur(10px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.hero h1,
.hero .hero__intro,
.hero .voice-orb {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero h1 { animation: hero-settle 1.5s 0.25s both; }
.hero .hero__intro { animation: hero-settle 1.5s 0.65s both; }
.hero .voice-orb { animation: orb-wake 2.4s 1s both; }

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .hero__intro, .hero .voice-orb { opacity: 1; animation: none; }
}

/* The hero orb notices the cursor: it swells, leans its light toward the pointer, and a soft ring grows. */
.voice-orb {
  --orb-zoom: 1;
  --orb-lean-x: 0px;
  --orb-lean-y: 0px;
  --orb-ring: 0;
  will-change: transform;
}
.voice-orb[data-awake="true"] { overflow: hidden; }
.hero .voice-orb[data-awake="true"] {
  animation: none;
  opacity: 1;
  transform: scale(var(--orb-zoom));
}
/* Awake: the disc's own edge softens. At rest the mask ends exactly at the circle (hard edge, as
   designed); as the cursor nears, the mask's falloff widens so the edge feathers and the orb blends
   into the ground, on top of the existing lean and swell. No shadow, no ring. */
.voice-orb[data-awake="true"] {
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - 30% * var(--orb-ring)), transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - 30% * var(--orb-ring)), transparent 100%);
}
/* The light leans toward the pointer and swells a little, but the disc must not: the clip is counter-shifted
   and counter-scaled so that, after the transform, it lands exactly on the orb's own circle (the awake orb
   has overflow: visible for the halo, so a moving clip would leak a light crescent past the edge). */
.voice-orb[data-awake="true"]::before {
  --orb-swell: calc(1 + 0.05 * var(--orb-ring));
  border-radius: 50%;
  clip-path: circle(calc(50% / var(--orb-swell)) at calc(50% - var(--orb-lean-x) / var(--orb-swell)) calc(50% - var(--orb-lean-y) / var(--orb-swell)));
  box-shadow: inset var(--orb-base) 0 0 14px 4px;
  transform: translate3d(var(--orb-lean-x), var(--orb-lean-y), 0) scale(var(--orb-swell));
}

/* Phase titles in the master plan sit at the same size as the landing lines. */
.phase h3 {
  max-width: 26ch;
  margin: 0 0 24px;
  font-size: var(--t-landing);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.phase-label { white-space: nowrap; }


/* Principles (brand page): a pinned stage, one photograph per principle, switching as you scroll.
   Text sits on the photograph over a bottom-to-top black gradient, with film grain and a soft blur. */
.principles { padding-top: 0; padding-bottom: clamp(24px, 4vh, 48px); }
.principles__pin { height: 380dvh; }
.principles__stage {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100dvh;
  margin-left: calc(50% - 50vw);
  display: block;
}
.principles__head {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vh, 44px);
  left: max(24px, calc((100vw - var(--page)) / 2));
}
.principles .section-code { color: rgba(255, 255, 255, 0.72); }
.principles__head { display: flex; justify-content: space-between; align-items: baseline; }
.principles__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  isolation: isolate;
}
.principles__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(1.5px) saturate(0.9) contrast(1.02);
  transition: opacity 0.8s ease, transform 1.6s ease;
}
.principles__photo[data-active="true"] { opacity: 1; transform: scale(1); }
/* Black rising from the bottom, then grain over everything. */
.principles__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.92) 100%);
}
.principles__grain {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: grain-shift 0.7s steps(5) infinite;
}
/* Second, finer grain layer and a vignette. */
.principles__grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='120' height='120' filter='url(%23m)'/></svg>");
  background-size: 120px 120px;
  animation: grain-shift 1.1s steps(3) infinite reverse;
}
.principles__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
.principles__list {
  position: absolute;
  z-index: 3;
  left: max(24px, calc((100vw - var(--page)) / 2));
  right: max(24px, calc((100vw - var(--page)) / 2));
  bottom: clamp(32px, 7vh, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 150px;
  color: var(--paper);
}
.principle {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 96px);
  align-items: last baseline;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(4px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}
.principle[data-active="true"] { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.principle__img { display: none; }
.principle__num { grid-column: 1; align-self: end; font-family: var(--serif); font-size: var(--t-lede); letter-spacing: -.02em; color: rgba(255, 255, 255, 0.5); }
.principle__num b { font-weight: 400; color: var(--paper); }
.principle__title { grid-column: 1; grid-row: 2; margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-statement); line-height: 1.05; letter-spacing: -.03em; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25); }
.principle__text { grid-column: 2; grid-row: 2; max-width: 38ch; margin: 0; font-size: var(--t-intro); line-height: 1.5; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3); }

html[data-motion="reduced"] .principles__pin { height: auto; }
html[data-motion="reduced"] .principles__stage { position: static; height: auto; display: block; }
html[data-motion="reduced"] .principles__frame { display: none; }
html[data-motion="reduced"] .principles__list { position: static; min-height: 0; color: var(--ink); }
html[data-motion="reduced"] .principle { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 40px; }
html[data-motion="reduced"] .principle__num, html[data-motion="reduced"] .principle__text { color: inherit; }
html[data-motion="reduced"] .principles__grain { animation: none; }

/* Principles intro: a graphite, full-viewport slide whose paragraph reads in before the gallery begins. */
.principles__intro-pin { height: 190dvh; width: 100vw; margin-left: calc(50% - 50vw); }
.principles__intro {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-content: center;
  background: #000;
  color: var(--paper);
}
.principles__lead {
  max-width: 30ch;
  margin: 0;
  padding: 0 24px;
  font-family: var(--serif);
  font-size: var(--t-statement);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-align: center;
  text-wrap: balance;
}
.principles__intro .keep-scrolling { bottom: clamp(24px, 4vh, 40px); }
.principles__after { display: none; }
html[data-motion="reduced"] .principles__intro-pin { height: auto; }
html[data-motion="reduced"] .principles__intro { position: static; height: auto; padding: 96px 0; }

/* Vision and mission: one quiet chapter, the two statements large on the left, their copy on the right. */
.vm__grid { display: grid; gap: clamp(56px, 9vh, 120px); max-width: none; }
.vm__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
  scroll-margin-top: 88px;
}
.chapter .vm__statement {
  max-width: 16ch;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-statement);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.chapter .vm__copy { max-width: 36ch; margin: 0; padding-top: 0.6em; }
.vm__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

/* Vision and mission, option 3: two centred typographic statements, no rail, tighter spacing. */
.vm--stack.chapter { padding-top: clamp(40px, 5vh, 72px); padding-bottom: clamp(40px, 5vh, 72px); }
.vm--stack .chapter-grid { display: block; }
.vm--stack .chapter-rail { display: none; }
.vm--stack .vm__grid { gap: clamp(64px, 11vh, 140px); }
.vm--stack .vm__row { grid-template-columns: 1fr; row-gap: 22px; justify-items: center; text-align: center; }
.vm--stack .vm__row .vm__statement { max-width: 22ch; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.04em; }
.vm--stack .vm__row .vm__copy { max-width: 46ch; padding-top: 0; }
.vm--stack .vm__label { margin-bottom: 0; order: -1; }
.vm--stack .vm__copy .vm__label { display: none; }
.vm--stack .vm__row::before { content: attr(data-label); font-family: var(--sans); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(0, 0, 0, 0.45); }

/* Brand page variant: the whole grid centred. Label, then title, then copy, all on one axis. */
.layout-center .chapter { padding-top: clamp(64px, 9vh, 128px); padding-bottom: clamp(64px, 9vh, 128px); }
.layout-center .chapter-grid { display: grid; grid-template-columns: 1fr; justify-items: center; row-gap: 0; }
.layout-center .chapter-rail { grid-row: auto; margin-bottom: clamp(18px, 2.6vh, 28px); text-align: center; }
.layout-center .chapter-rail .section-code { color: rgba(0, 0, 0, 0.45); }
.layout-center .chapter-main { grid-column: auto; width: min(100%, 1040px); text-align: center; }
.layout-center .chapter-main .section-title { max-width: 24ch; margin-left: auto; margin-right: auto; }
.layout-center .section-title--name { max-width: none; white-space: nowrap; }
.layout-center .chapter-main p { margin-left: auto; margin-right: auto; max-width: 52ch; text-wrap: pretty; }
.layout-center .chapter-main .section-title { text-wrap: balance; }
.layout-center .vm__copy { text-wrap: pretty; }
.layout-center .chapter-main .landing { margin-left: auto; margin-right: auto; }
.layout-center .chapter-main .ref-note { position: static; display: block; margin: 8px auto 0; }
.layout-center .vm--stack .vm__row::before { margin-bottom: 4px; }
.layout-center .principles__head { left: 50%; transform: translateX(-50%); }
.layout-center .principles__list { text-align: center; }
.layout-center .principle { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; }
.layout-center .principle__num, .layout-center .principle__title, .layout-center .principle__text { grid-column: 1; grid-row: auto; max-width: 44ch; }
.layout-center .principle__title { margin-top: 0; }
.layout-center .principle__text { margin-top: 4px; }

/* Brand page: the character chapter fills a viewport and sits in its centre. */
.layout-center #character { min-height: 100dvh; display: grid; align-content: center; }

/* Site switch: the wordmark is a pill that turns to light glass on hover and opens a small menu. */
.header-brand { position: relative; }
.site-switch {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: -8px -14px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-switch:hover,
.site-switch:focus-visible,
.site-switch[aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  outline: 0;
}
.site-switch__chevron {
  align-self: center;
  margin-left: 2px;
  color: rgba(0, 0, 0, 0.42);
  transition: transform 0.25s ease;
}
.site-switch[aria-expanded="true"] .site-switch__chevron { transform: rotate(180deg); }
/* Open: the pill squares off its bottom and the menu continues it as the same surface. */
.site-switch[aria-expanded="true"] {
  position: relative;
  z-index: 96;
  border-radius: 22px 22px 0 0;
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.site-menu {
  position: absolute;
  z-index: 95;
  top: calc(100% + 8px);
  left: -14px;
  min-width: calc(100% + 28px);
  padding: 4px 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.6));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transform-origin: top center;
  animation: site-menu-in 0.18s ease;
}
.site-menu::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 8px 4px;
  background: rgba(0, 0, 0, 0.08);
}
@keyframes site-menu-in { from { opacity: 0; transform: scaleY(0.9); } to { opacity: 1; transform: none; } }
.site-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink);
  text-decoration: none;
}
.site-menu__item:hover, .site-menu__item:focus-visible { background: rgba(0, 0, 0, 0.05); outline: 0; }
.site-menu__item[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.site-menu__item:not([aria-current]) { color: rgba(0, 0, 0, 0.62); }

html[data-motion="reduced"] .w { opacity: 1 !important; }
html[data-motion="reduced"] .landing,
html[data-motion="reduced"] .day__close { opacity: 1; transform: none; filter: none; }
html[data-motion="reduced"] .bridge__pin { height: auto; }
html[data-motion="reduced"] .bridge__stage { position: static; height: auto; padding: 48px 0; }
html[data-motion="reduced"] .day__moment { opacity: 1; }
html[data-motion="reduced"] .day__fill { transform: none; }
html[data-motion="reduced"] .frag, html[data-motion="reduced"] .day__moment { opacity: 1; }
html[data-motion="reduced"] .contrast { display: block; }
html[data-motion="reduced"] .contrast__lane { --act: 1; }
html[data-motion="reduced"] .contrast__lane--one { margin-top: 40px; }
html[data-motion="reduced"] .wire__seg { --draw: 1; }
html[data-motion="reduced"] .contrast__count { --show: 1; }
html[data-motion="reduced"] .chapter-main .ref-note { opacity: 1; transform: none; position: static; display: block; margin-top: 8px; }
html[data-motion="reduced"] .finale__pin { height: auto; }
html[data-motion="reduced"] .finale__stage { position: static; height: auto; padding: clamp(96px, 14vh, 160px) 24px clamp(120px, 20vh, 220px); }
html[data-motion="reduced"] .finale .voice-orb--close { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  :root { --page: min(100% - 36px, 920px); }

  .chapter-main .ref-note { position: static; display: block; width: auto; margin-top: 8px; transform: none; }
  .plan-rail { display: none; }

  .chapter-grid {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 28px;
  }

  .chapter-main { grid-column: 2; }
  .chapter-rail { grid-column: 1; }
  .manifesto-nav__inner { display: block; }
}

@media (max-width: 680px) {
  :root { --page: calc(100% - 28px);
    --t-display: clamp(54px, 17vw, 80px);
    --t-h1: clamp(40px, 11vw, 56px);
    --t-h2: clamp(34px, 9vw, 46px);
    --t-statement: clamp(30px, 8vw, 40px);
    --t-landing: clamp(28px, 7.5vw, 36px);
    --t-lede: 22px;
    --t-callout: 20px;
    --t-intro: 18px;
    --t-body: 17px;
    --t-brand: 20px;
    --t-brand-sans: 17px;
    --t-numeral: 70px;
  }

  #belief-05 { padding-bottom: calc(56px + clamp(60px, 9vh, 110px)); }
  .bridge__pin { height: auto; }
  .bridge__stage { position: static; height: auto; }
  .keep-scrolling { display: none; }
  .day { margin: 56px 0 0; }
  .scatter { height: auto; }
  .wire { display: none; }
  .frags { display: grid; gap: 34px; }
  .frag__app { margin-bottom: 10px; }
  .contrast { margin-top: 56px; }
  .contrast__tag { margin-bottom: 10px; }
  .contrast__count { margin: 0 0 32px; }
  .frag { position: static; width: auto; opacity: 1; }
  .contrast { display: block; }
  .contrast__lane { --act: 1; }
  .contrast__lane--one { margin-top: 72px; }
  .frag, .day__moment { opacity: 1 !important; }
  .contrast__count { --show: 1; }
  .day__moments { grid-template-columns: 1fr; gap: 36px; margin-top: 0; }
  .day__time { margin-bottom: 12px; }
  .day__moment, .day__moment:nth-child(2), .day__moment:nth-child(3) { text-align: left; padding-top: 0; padding-left: 20px; }
  .day__moment::before, .day__moment:nth-child(2)::before, .day__moment:nth-child(3)::before { top: 10px; left: 0; right: auto; margin: 0; transform: none; }
  .day__moment:nth-child(2) .day__what, .day__moment:nth-child(3) .day__what { margin: 0; }
  .day__line { display: none; }
  .bridge .day__close { margin-top: 64px; text-align: left; }
  .finale__pin { height: 150dvh; }
  .finale .voice-orb--close { margin: 40px 0 0; }
  .finale .landing--final { white-space: normal; max-width: 12ch; }
  .finale .landing--final br { display: none; }

  .principles__list { bottom: 28px; left: 16px; right: 16px; }
  .principles__head { left: 16px; top: 20px; }
  .principle { display: block; }
  .principle__title { font-size: var(--t-landing); }
  .principle__text { max-width: none; margin-top: 12px; }

  .opening { --beat-gap: 9dvh; }
  .opening__track { display: block; padding-top: 10dvh; }
  .opening__code { display: block; margin: 0 0 28px; }
  .opening__track > .story-beat { margin: 0 0 var(--beat-gap); text-align: left; }
  .ref-note, .chapter-main .ref-note { display: none; }
  .ref { text-decoration: none; }
  .pinned-beat { max-width: 14ch; }
  .opening__pin { height: 115dvh; margin-top: 0; }
  .opening__pin-stage { padding-top: 0; }
  .voice-orb--close { width: 150px; }
  body { line-height: 1.58; }

  .site-header__inner {
    min-height: 60px;
    grid-template-columns: 1fr auto;
  }
  .manifesto-nav { inset: 60px 0 auto; }
  .header-brand { gap: 5px; }
  .manifesto-nav { min-height: calc(100vh - 60px); }

  .manifesto-nav__inner {
    width: calc(100% - 28px);
    max-height: calc(100vh - 60px);
    overflow: auto;
  }

  .manifesto-nav a { min-height: 0; padding: 7px 0; }
  .index-sublist { margin-left: 42px; }
  .manifesto-nav .index-sublist a { grid-template-columns: 42px minmax(0, 1fr); }

  .hero {
    min-height: calc(100svh - 60px);
  }

  .hero h1 {
    line-height: .87;
  }

  .hero__intro { margin: 24px auto 0; }
  .hero-break { display: none; }
  .voice-orb-stage { margin-top: 32px; }
  .voice-orb { width: 150px; }

  .chapter { padding: 56px 0; scroll-margin-top: 72px; }

  .chapter-grid { display: block; }
  .chapter-rail { margin-bottom: 38px; }
  .belief-number { margin-top: 12px; }
  .chapter h2 { margin-bottom: 38px; }
  .chapter p { margin-bottom: 24px; }

  .phase { display: block; padding: 68px 0 0; }
  .phase-label { position: static; margin-bottom: 26px; }

  .beliefs-intro { padding: 56px 0 40px; }
  .bridge { padding: calc(84px + clamp(60px, 8vh, 100px)) 20px 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { clip-path: none; transform: none; }
  .voice-orb::before { animation: none; }
}

/* ---------- DreamBench story stage ---------- */