/* Pensieve — landing page
   Display: Hedvig Letters Serif · Body: Satoshi
   Mobile-first; tablet ≥ 720px, header nav ≥ 860px, desktop ≥ 1024px. */

:root {
  color-scheme: light;

  --ink: #0B1017;
  --ink-raised: #0F161E;
  --ink-text: #1C2733;            /* long-form text on paper, a softened Ink */
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --slate: #536171;
  --mist: #B8C4CE;
  --signal: #C3B6ED;              /* lavender — accent on Ink */
  --signal-bright: #DAD1F7;
  --signal-deep: #5C3FAB;         /* violet — accent on Paper */
  --rule: #D8DEE5;
  --rule-dark: #34404D;
  --rule-dark-soft: rgba(184, 196, 206, 0.14);

  --font-display: "Hedvig Letters Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Satoshi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(80px, 10vw, 140px);
  --header-h: 64px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* long, soft landings for entrances */
  --dur: 200ms;

  /* Index column for numbered rows; capped so enlarged text keeps room to wrap. */
  --index-col: min(3rem, 18%);
}

@media (min-width: 860px) {
  :root { --header-h: 76px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html:has(.menu-sheet[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Hedvig Letters Serif has no usable ff/fi ligatures: "difference" breaks apart. */
  font-variant-ligatures: no-common-ligatures;
}

@media (min-width: 1024px) {
  body { font-size: 1.125rem; }
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 3px; }
[data-surface="dark"] :focus-visible,
.menu-sheet :focus-visible { outline-color: var(--signal); }
[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--ink); color: var(--white); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(22px, 2.4vw, 30px);
  margin-bottom: clamp(48px, 6.4vw, 96px);
  border-top: 1px solid var(--rule);
}
.section--dark .section-head { border-top-color: var(--rule-dark-soft); }

/* ---------- Type ---------- */

.display,
.heading,
.wordmark,
.stage__title,
.outcome__title,
.thesis__question,
.aim__subheading,
.policy__title,
.policy__row dd,
.menu-sheet__links a > span:first-child {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
}

/* Only breaks a word when it cannot fit on its own line (e.g. 200% text on 320px). */
.display,
.heading,
.stage__title,
.outcome__title,
.thesis__question,
.aim__subheading,
.policy__title,
.policy__row dd,
.contact__research p,
.label,
.eyebrow,
.menu-sheet__links a { overflow-wrap: anywhere; }

.display {
  font-size: clamp(2.875rem, 1.05rem + 5.4vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display__stop { color: var(--signal); }

.heading {
  max-width: 14em;
  font-size: clamp(2.125rem, 1.3rem + 2.7vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.heading--xl {
  font-size: clamp(2.75rem, 1.2rem + 4.8vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.label,
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6em; color: var(--slate); }
.label__index { color: var(--signal-deep); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.label__sep { color: var(--rule); }
[data-surface="dark"] .label { color: var(--mist); }
[data-surface="dark"] .label__index { color: var(--signal); }
[data-surface="dark"] .label__sep { color: var(--rule-dark); }

.intro {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--slate);
}

.prose { display: grid; gap: 1.1em; max-width: 36rem; color: var(--ink-text); }
.section--dark .prose { color: var(--mist); }

/* ---------- Actions ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(20px, 2.4vw, 32px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--ink:hover { box-shadow: 0 12px 28px -16px rgba(11, 16, 23, 0.6); }
  .btn--signal:hover { box-shadow: 0 12px 28px -16px rgba(92, 63, 171, 0.7); }
}
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn--compact { min-height: 44px; padding: 0 1.25rem; font-size: 0.875rem; }
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal:hover { background: var(--signal-bright); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #1D2833; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  transition: text-decoration-color var(--dur) var(--ease);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link__icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.text-link:hover .text-link__icon { transform: translateX(3px); }
.text-link--down:hover .text-link__icon { transform: translateY(2px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  color: var(--white);
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled[data-surface="dark"] {
  background: rgba(11, 16, 23, 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--rule-dark-soft);
}
.site-header[data-surface="light"] {
  color: var(--ink);
  background: rgba(250, 251, 252, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--rule);
}
.site-header[data-surface="light"]:not(.is-scrolled) { border-bottom-color: transparent; }
.site-header[data-surface="light"] .site-header__cta { background: var(--ink); color: var(--white); }
.site-header[data-surface="light"] .site-header__cta:hover { background: #1D2833; }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(24px, 3vw, 44px);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.015em;
  text-decoration: none;
}

/* The mark leads the wordmark in the header and the menu (not the footer's
   full-width wordmark). It switches to the Ink version on dark surfaces. */
.site-header .wordmark,
.menu-sheet .wordmark { gap: 0.4em; }
.site-header .wordmark::before,
.menu-sheet .wordmark::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  translate: 0 -0.05em;
  background: url("assets/brand/pensieve-mark-compact.svg") center / contain no-repeat;
}
.site-header[data-surface="dark"] .wordmark::before,
.menu-sheet .wordmark::before { background-image: url("assets/brand/pensieve-mark-compact-on-ink.svg"); }

.primary-nav ul { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2.6vw, 36px); }
.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0.84;
  transition: opacity var(--dur) var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover,
.primary-nav a[aria-current] { opacity: 1; }
.primary-nav a:hover::after,
.primary-nav a[aria-current]::after { transform: scaleX(1); }

.site-header__cta,
.menu-button { display: none; }

/* Without JS the header nav simply wraps beneath the wordmark on small screens. */
.js .primary-nav { display: none; }
.js .menu-button { display: inline-flex; }

.menu-button {
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.menu-button__icon {
  position: relative;
  width: 20px;
  height: 7px;
  border-block: 1px solid currentColor;
}

@media (min-width: 860px) {
  .js .primary-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .js .menu-button { display: none; }
}

/* ---------- Mobile menu sheet ---------- */

.menu-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 0 40px;
  border: 0;
  overflow-y: auto;
  background: var(--ink);
  color: var(--white);
}
.menu-sheet::backdrop { background: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .menu-sheet[open] { animation: sheet-in 220ms var(--ease) both; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.menu-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--rule-dark-soft);
}
.menu-sheet__close {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.menu-sheet__links { margin-top: 12px; }
.menu-sheet__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-dark-soft);
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu-sheet__index {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--signal);
}
.menu-sheet__links a[aria-current] .menu-sheet__index::before { content: "Current · "; color: var(--mist); }
.menu-sheet__cta { width: 100%; margin-top: 36px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(36px, 6vw, 88px) clamp(56px, 8vw, 120px);
}

.hero__copy { position: relative; z-index: 1; }

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--mist);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  margin-top: 0.7em; /* centred on the first line when the eyebrow wraps */
  background: var(--signal);
}

.hero .display { margin-top: clamp(24px, 3vw, 40px); }

.lede {
  max-width: 33rem;
  margin-top: clamp(24px, 2.8vw, 36px);
  font-size: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem);
  line-height: 1.6;
  color: var(--mist);
}

.hero .actions { margin-top: clamp(32px, 3.6vw, 48px); }

/* The hero's animation takes its right side; on phones it follows the copy and
   crops the comp's empty top and bottom margins. */
.hero__art {
  position: relative;
  margin-top: clamp(32px, 7vw, 56px);
  margin-inline: calc(-1 * var(--gutter));
}
.hero__art .anim__frame { aspect-ratio: 1 / 0.84; overflow: hidden; }
.hero__art .anim__stage { width: 100cqw; }
.hero__art .anim__toggle { right: var(--gutter); }

/* ---------- Animations ---------- */

/* A Lottie stage with the comp's aspect (--ratio = height / width) centred in
   whatever box the layout gives it. The still poster shows until the player is
   ready, and remains the image for reduced motion and no-JS visitors. */
.anim { position: relative; }

.anim__frame {
  container-type: size;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / var(--ratio, 1);
}

.anim__stage {
  position: relative;
  width: min(100cqw, 100cqh / var(--ratio, 1));
  aspect-ratio: 1 / var(--ratio, 1);
  container-type: inline-size;
}

.anim__poster,
.anim__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.anim__player { opacity: 0; }
.anim__player svg { display: block; }

.anim.is-live .anim__player { opacity: 1; }
.anim.is-live .anim__poster { opacity: 0; }

/* Requests enter and leave through feathered edges. */
.anim--feather .anim__poster,
.anim--feather .anim__player {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .anim__poster { animation: art-in 1200ms var(--ease) 100ms both; }
  .anim__poster,
  .anim__player { transition: opacity 900ms var(--ease); }
}
@keyframes art-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Annotations are positioned in comp units and appear once the stage has room. */
.anim__labels { display: none; }
@container (min-width: 420px) {
  .anim__labels { display: block; }
}
.anim__labels li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  max-width: 7.6em;
  font-size: clamp(9.5px, 1.5cqi, 11px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 196, 206, 0.64);
}
.anim__labels li.is-middle { transform: translateY(-50%); }
.anim__labels li.is-centre { max-width: none; white-space: nowrap; transform: translateX(-50%); }
.anim__labels li.is-end { max-width: none; white-space: nowrap; transform: translateX(-100%); }
.anim__labels li.is-middle.is-centre { transform: translate(-50%, -50%); }
.anim__labels li.is-wide { max-width: none; white-space: nowrap; }
.anim__labels li.is-middle.is-end { transform: translate(-100%, -50%); }
.anim--light .anim__labels li { color: var(--slate); }

.anim__toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule-dark-soft);
  border-radius: 50%;
  background: rgba(11, 16, 23, 0.6);
  color: var(--mist);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.anim__toggle[hidden] { display: none; }
.anim__toggle:hover { border-color: rgba(195, 182, 237, 0.55); color: var(--white); }
.anim__toggle svg { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.anim__icon-pause { fill: none; }
.anim__toggle[data-state="playing"] .anim__icon-play,
.anim__toggle[data-state="paused"] .anim__icon-pause { display: none; }

.anim--light .anim__toggle {
  border-color: var(--rule);
  background: rgba(250, 251, 252, 0.8);
  color: var(--slate);
}
.anim--light .anim__toggle:hover { border-color: var(--signal-deep); color: var(--signal-deep); }

/* A figure with an animation and a note beneath it. */
.figure-note {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
}
.figure-note::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border: 1px solid var(--signal-deep);
  border-radius: 50%;
}
[data-surface="dark"] .figure-note { color: var(--mist); }
[data-surface="dark"] .figure-note::before { border-color: var(--signal); }

/* ---------- Thesis ---------- */

.thesis__grid { row-gap: 56px; align-items: start; }
.thesis__prose { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); }

.thesis__aside {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.thesis__aside-label { color: var(--signal-deep); }
.thesis__question {
  max-width: 22em;
  margin-top: 16px;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.thesis__figure { max-width: 520px; margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Approach ---------- */

.approach__grid { row-gap: 48px; align-items: start; }

.stages { border-top: 1px solid var(--rule); }
.stage { border-bottom: 1px solid var(--rule); }
.stage__heading { font: inherit; }

.stage__trigger {
  display: grid;
  grid-template-columns: var(--index-col) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  width: 100%;
  min-height: 44px;
  padding: 26px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.stage__index {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  transition: color var(--dur) var(--ease);
}
.stage__title {
  font-size: clamp(1.4375rem, 1.2rem + 0.8vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.stage__icon {
  display: none;
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
  color: var(--slate);
  transition: color var(--dur) var(--ease);
}
.stage__icon::before,
.stage__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 240ms var(--ease);
}
.stage__icon::after { transform: rotate(90deg); }

.stage__trigger:hover .stage__index,
.stage__trigger:hover .stage__icon { color: var(--signal-deep); }

.stage__panel {
  display: grid;
  grid-template-rows: 1fr;
}
/* Transitions switch on only after the enhanced initial state is applied. */
.stages.is-ready .stage__panel { transition: grid-template-rows 240ms var(--ease), visibility 240ms; }
.stage__body { min-height: 0; overflow: hidden; }
.stage__body p {
  max-width: 32rem;
  padding: 0 0 30px calc(var(--index-col) + 12px);
  color: var(--slate);
}

.js .stage__icon { display: block; }
.js .stage:not(.is-open) .stage__panel { grid-template-rows: 0fr; visibility: hidden; }
.stage.is-open .stage__icon::after { transform: rotate(0deg); }
.stage.is-current .stage__index { color: var(--signal-deep); }

/* Loop diagram */
.loop-figure { display: none; }

.loop { width: 100%; height: auto; overflow: visible; }
.loop text { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.01em; }

.loop__arc,
.loop__head {
  fill: none;
  stroke: #B3BDC8;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur) var(--ease);
}
.loop__arc--feedback { stroke: var(--signal-deep); stroke-dasharray: 2 6; }
.loop__head--feedback { stroke: var(--signal-deep); }
.loop__feedback-label { fill: var(--signal-deep); }

.loop__dot,
.loop__halo {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), transform 240ms var(--ease), opacity 240ms var(--ease);
}
.loop__dot { fill: var(--paper); stroke: var(--slate); stroke-width: 1.2; }
.loop__halo { fill: none; stroke: var(--signal-deep); stroke-width: 1; opacity: 0; transform: scale(0.6); }
.loop__node text { fill: var(--slate); transition: fill var(--dur) var(--ease); }

.loop__numerals text {
  font-family: var(--font-display);
  font-size: 60px;
  letter-spacing: -0.02em;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.loop-figure[data-active="1"] [data-node="1"] .loop__dot,
.loop-figure[data-active="2"] [data-node="2"] .loop__dot,
.loop-figure[data-active="3"] [data-node="3"] .loop__dot,
.loop-figure[data-active="4"] [data-node="4"] .loop__dot { fill: var(--ink); stroke: var(--ink); transform: scale(1.3); }

.loop-figure[data-active="1"] [data-node="1"] .loop__halo,
.loop-figure[data-active="2"] [data-node="2"] .loop__halo,
.loop-figure[data-active="3"] [data-node="3"] .loop__halo,
.loop-figure[data-active="4"] [data-node="4"] .loop__halo { opacity: 0.6; transform: none; }

.loop-figure[data-active="1"] [data-node="1"] text,
.loop-figure[data-active="2"] [data-node="2"] text,
.loop-figure[data-active="3"] [data-node="3"] text,
.loop-figure[data-active="4"] [data-node="4"] text { fill: var(--ink); }

.loop-figure[data-active="2"] .loop__arc[data-into="2"],
.loop-figure[data-active="2"] .loop__head[data-into="2"],
.loop-figure[data-active="3"] .loop__arc[data-into="3"],
.loop-figure[data-active="3"] .loop__head[data-into="3"],
.loop-figure[data-active="4"] .loop__arc[data-into="4"],
.loop-figure[data-active="4"] .loop__head[data-into="4"] { stroke: var(--ink); }

.loop-figure[data-active="1"] [data-numeral="1"],
.loop-figure[data-active="2"] [data-numeral="2"],
.loop-figure[data-active="3"] [data-numeral="3"],
.loop-figure[data-active="4"] [data-numeral="4"] { opacity: 1; }

/* ---------- AIM ---------- */

.aim__subheading {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mist);
}
.section--dark .section-head { gap: clamp(18px, 2vw, 24px); }
.section--dark .section-head .heading + .aim__subheading { margin-top: -6px; }

.aim__grid { row-gap: 64px; align-items: start; }

.outcomes {
  margin: clamp(40px, 4.4vw, 56px) 0;
  border-top: 1px solid var(--rule-dark-soft);
}
.outcome {
  display: grid;
  grid-template-columns: var(--index-col) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.outcome__index {
  grid-row: 1;
  padding-top: 0.45em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}
.outcome__title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
}
.outcome__body { grid-column: 2; font-size: 1rem; color: var(--mist); }

/* Policy illustration */
.policy {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule-dark-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, #111922 0%, var(--ink-raised) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 48px 96px -48px rgba(0, 0, 0, 0.7);
}
.policy__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.policy__title { font-size: 1.375rem; line-height: 1.25; color: var(--white); }
.policy__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.policy__tag::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--signal);
  border-radius: 50%;
}

/* The flow uses subgrid so the rail and return path can span exact row edges. */
.policy__flow {
  --dot-y: 31px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  margin-top: 6px;
}
.policy__rows {
  display: grid;
  grid-column: 2;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
.policy__row { position: relative; padding: 20px 0; }
.policy__row + .policy__row { border-top: 1px solid var(--rule-dark-soft); }
.policy__row::before {
  content: "";
  position: absolute;
  top: calc(var(--dot-y) - 4.5px);
  left: calc(-20px - 4.5px);
  width: 9px; height: 9px;
  border: 1px solid var(--mist);
  border-radius: 50%;
  background: var(--ink-raised);
}
.policy__row--feedback::before {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(195, 182, 237, 0.12);
}
.policy__row dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.policy__row dd {
  margin-top: 6px;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.35;
  color: var(--white);
}
.policy__sep { color: var(--signal); }

.policy__rail,
.policy__return {
  grid-column: 1;
  grid-row: 1 / 4;
  margin-block: var(--dot-y) calc(-1 * var(--dot-y));
  pointer-events: none;
}
.policy__rail {
  justify-self: center;
  width: 1px;
  background: var(--rule-dark);
}
.policy__return {
  position: relative;
  justify-self: start;
  width: 15px;
  border: 1px dashed rgba(195, 182, 237, 0.5);
  border-right: 0;
  border-radius: 12px 0 0 12px;
}
.policy__return::after {
  content: "";
  position: absolute;
  top: -4.5px;
  right: -1px;
  border-left: 5px solid var(--signal);
  border-block: 4px solid transparent;
}

/* ---------- Contact ---------- */

.contact__grid { row-gap: 56px; align-items: end; }
.contact__grid--top { align-items: start; }
.contact__body {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-text);
}
.contact__primary .actions { margin-top: clamp(28px, 3vw, 40px); }
.contact__address {
  font-size: 0.9375rem;
  color: var(--signal-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  user-select: all;
}

.contact__research {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.contact__research p {
  max-width: 24em;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.contact__research .text-link { margin-top: 14px; color: var(--signal-deep); }

.review-note {
  display: inline-flex;
  margin-top: 56px;
  padding: 8px 16px;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--slate);
}
.review-note[hidden] { display: none; }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 56px clamp(14px, 1.8vw, 28px);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  overflow: clip;
}
.site-footer__grid {
  display: grid;
  gap: 32px;
  container-type: inline-size;
}
/* The brand block's children join the grid: the line of copy sits beside the
   links, and the wordmark closes the page at full width. */
.site-footer__brand { display: contents; }
.site-footer__brand p { color: var(--slate); }
.site-footer__brand .wordmark {
  order: 3;
  display: block;
  min-height: 0;
  margin-top: clamp(8px, 2vw, 32px);
  /* "Pensieve" measures 3.656em at this tracking. */
  font-size: calc(100cqi / 3.67);
  line-height: 0.74;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: var(--ink);
  transition: color 400ms var(--ease);
}
.site-footer__brand .wordmark:hover { color: var(--signal-deep); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-text);
  transition: color var(--dur) var(--ease);
}
.site-footer__nav a:hover,
.site-footer__nav a[aria-current] { color: var(--signal-deep); }
.site-footer__legal {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--slate);
}


/* ---------- Page heroes ---------- */

.display--page { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); }

.page-hero { padding-block: clamp(40px, 6vw, 96px) clamp(64px, 8vw, 120px); }
.page-hero__grid { row-gap: clamp(36px, 5vw, 56px); align-items: center; }
.page-hero .display { margin-top: clamp(20px, 2.6vw, 32px); }
.page-hero .actions { margin-top: clamp(28px, 3.2vw, 40px); }
.page-hero__art { width: 100%; max-width: 560px; }

[data-surface="light"] .eyebrow { color: var(--slate); }
[data-surface="light"] .eyebrow::before { background: var(--signal-deep); }
[data-surface="light"] .display__stop { color: var(--signal-deep); }
[data-surface="light"] .lede { color: var(--slate); }

/* ---------- Shared section layouts ---------- */

.split { row-gap: 48px; align-items: start; }

/* Two columns under matching rules, e.g. runtime and research. */
.duo { row-gap: 48px; }
.duo__col { padding-top: 24px; border-top: 1px solid var(--rule); }
.duo__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.section--dark .duo__col { border-top-color: var(--rule-dark-soft); }

.ticks { display: grid; gap: 14px; margin-top: 24px; max-width: 34rem; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-text); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 14px;
  height: 1px;
  background: var(--signal-deep);
}
.section--dark .ticks li { color: var(--mist); }
.section--dark .ticks li::before { background: var(--signal); }

/* Open, ruled rows in one to four columns. */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap);
  border-top: 1px solid var(--rule);
}
.card { padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule); }
.card__index {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}
.card__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.card__body { margin-top: 10px; max-width: 34rem; font-size: 1rem; color: var(--slate); }
.section--dark .cards,
.section--dark .card { border-color: var(--rule-dark-soft); }
.section--dark .card__index { color: var(--signal); }
.section--dark .card__body { color: var(--mist); }

.subhead {
  max-width: 24em;
  margin-top: clamp(64px, 8vw, 104px);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.014em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.subhead + * { margin-top: clamp(28px, 3.4vw, 40px); }

.scope-note { max-width: 40rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section--flush { padding-top: 0; }

/* Numbered steps on paper. */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: var(--index-col) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.step__index {
  grid-row: 1;
  padding-top: 0.4em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}
.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.step__body { grid-column: 2; font-size: 1rem; color: var(--slate); }

/* ---------- AIM page ---------- */

/* Levels of automation, chosen per workflow. */
.ladder { display: grid; }
.ladder__step { position: relative; padding: 0 0 30px 34px; }
.ladder__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border: 1px solid var(--slate);
  border-radius: 50%;
  background: var(--paper);
}
.ladder__step::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.5em + 15px);
  bottom: 4px;
  width: 1px;
  background: var(--rule);
}
.ladder__step:last-child { padding-bottom: 0; }
.ladder__step:last-child::after { display: none; }
.ladder__step:last-child::before { border-color: var(--signal-deep); background: var(--signal-deep); }
.ladder__index {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}
.ladder__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
}
.ladder__body { margin-top: 6px; max-width: 22rem; font-size: 1rem; color: var(--slate); }

.reference__figure { width: 100%; max-width: 620px; }

/* ---------- Numbered rules (Thesis) ---------- */

.rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap);
  border-top: 1px solid var(--rule);
}
.rule {
  display: grid;
  grid-template-columns: var(--index-col) minmax(0, 1fr);
  column-gap: 12px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.rule__index {
  padding-top: 0.4em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}
.rule__text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ---------- Blog ---------- */

.posts { border-top: 1px solid var(--rule); }
.post {
  position: relative;
  display: grid;
  row-gap: 12px;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.post__meta,
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.post__tag,
.article__tag { color: var(--signal-deep); }
.post__title {
  max-width: 22em;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.016em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.post__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur) var(--ease);
}
.post__title a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post__title a,
.post__title a:focus-visible { text-decoration-color: currentColor; }
.post__dek { max-width: 40rem; color: var(--slate); }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.article-head { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 4.4vw, 60px); }
.article-head__inner { max-width: 42rem; margin-inline: auto; }
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--slate);
  transition: color var(--dur) var(--ease);
}
.article__back:hover { color: var(--signal-deep); }
.article__back .text-link__icon { transform: rotate(180deg); }
.article__meta { margin-top: 16px; }
.article__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.026em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.article__dek {
  max-width: 36rem;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--ink-text);
}

.article-body { padding-block: clamp(36px, 4.4vw, 56px) clamp(80px, 9vw, 128px); border-top: 1px solid var(--rule); }
.flow { max-width: 42rem; margin-inline: auto; color: var(--ink-text); }
.flow > * + * { margin-top: 1.2em; }
.flow h2 {
  margin-top: 2.2em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9375rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.flow h2 + * { margin-top: 0.8em; }
.flow ul:not([class]),
.flow ol:not([class]) { display: grid; gap: 0.55em; padding-left: 1.3em; }
.flow li::marker { color: var(--signal-deep); }
.flow strong { font-weight: 500; color: var(--ink); }
.flow a:not(.text-link) {
  color: var(--signal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.callout {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--signal-deep);
}
.callout__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-deep);
}

.table-wrap { overflow-x: auto; }
.data {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.data th,
.data td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.data th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.data td:first-child { color: var(--ink); }

.flow .article-figure { margin-block: 2.4em; }
.article-figure__panel {
  padding: clamp(12px, 2vw, 24px);
  border-radius: 12px;
  background: var(--ink);
}

.falsify {
  margin-top: 3.2em;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.falsify h2 { margin-top: 0; }
.provenance { margin-top: 2em; font-size: 0.875rem; color: var(--slate); }

.article-nav {
  display: grid;
  gap: 16px;
  max-width: 42rem;
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.article-nav a { display: grid; gap: 4px; text-decoration: none; }
.article-nav span:first-child { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.article-nav span:last-child {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}
.article-nav a:hover span:last-child { text-decoration-color: currentColor; }

/* ---------- Tablet ≥ 720px ---------- */

@media (min-width: 720px) {
  .hero__art { width: min(100%, 620px); margin-inline: auto; }
  .hero__art .anim__frame { aspect-ratio: 1 / 1; overflow: visible; }
  .hero__art .anim__stage { width: min(100cqw, 100cqh); }
  .hero__art .anim__toggle { right: 0; }
  .loop-figure { display: block; width: 100%; max-width: 560px; justify-self: center; }

  .site-footer__grid { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer__legal,
  .site-footer__brand .wordmark { grid-column: 1 / -1; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-nav { grid-template-columns: 1fr 1fr; }
  .article-nav a:last-child:not(:first-child) { text-align: right; }
}

/* ---------- Hero split ≥ 960px ---------- */

@media (min-width: 960px) {
  .hero { --hero-pt: clamp(72px, 8vw, 128px); --hero-pb: clamp(88px, 9vw, 144px); padding-block: var(--hero-pt) var(--hero-pb); }
  .hero__grid { align-items: center; }
  .hero__copy { grid-column: 1 / span 7; grid-row: 1; }

  /* The animation takes the hero's right side at full height; the copy sets
     the height and the square stage centres within it. */
  .hero__art {
    grid-column: 7 / -1;
    grid-row: 1;
    align-self: stretch;
    width: auto;
    margin: calc(-1 * var(--hero-pt)) calc(-1 * var(--gutter)) calc(-1 * var(--hero-pb)) 0;
  }
  .hero__art .anim__frame {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
  }
  .hero__art .anim__toggle { right: var(--gutter); bottom: 28px; }

  .page-hero__copy { grid-column: 1 / span 6; grid-row: 1; }
  .page-hero__art { grid-column: 7 / -1; grid-row: 1; justify-self: end; }
  .page-hero--text .page-hero__copy { grid-column: 1 / span 9; }
}

/* ---------- Desktop ≥ 1024px ---------- */

@media (min-width: 1024px) {
  .thesis__prose { grid-column: 1 / span 6; }
  .thesis__aside {
    grid-column: 8 / -1;
    padding: 0 0 0 clamp(24px, 2.6vw, 40px);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .stages { grid-column: 1 / span 6; }
  .loop-figure {
    grid-column: 7 / -1;
    justify-self: end;
    width: 100%;
    position: sticky;
    top: calc(var(--header-h) + 48px);
  }

  .aim__copy { grid-column: 1 / span 6; }
  .policy { grid-column: 8 / -1; }

  .contact__primary { grid-column: 1 / span 6; }
  .contact__research,
  .contact__steps { grid-column: 8 / -1; }
  .contact__steps { align-self: start; }

  .split__main { grid-column: 1 / span 6; }
  .split__side { grid-column: 8 / -1; }
  .split--wide-side .split__main { grid-column: 1 / span 5; }
  .split--wide-side .split__side { grid-column: 7 / -1; }

  .duo__col:first-child { grid-column: 1 / span 6; }
  .duo__col:last-child { grid-column: 7 / -1; }

  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
  .ladder__step { padding: 34px 0 0; }
  .ladder__step::before { top: 0; }
  .ladder__step::after { top: 5px; left: 19px; right: calc(-1 * var(--gap) + 8px); bottom: auto; width: auto; height: 1px; }
  .ladder__step:last-child { padding-bottom: 0; }
}

/* Pin the policy card only where it fits comfortably within the viewport. */
@media (min-width: 1024px) and (min-height: 820px) {
  .policy { position: sticky; top: calc(var(--header-h) + 48px); }
}

/* ---------- Home ---------- */

/* The hero is the animation. The canvas fills the section and its ground runs
   behind the copy; paths.js keeps the map clear of each line of text and quiets
   the lines beneath it, so no wash is needed here. */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(640px, calc(100svh - var(--header-h)), 900px);
  overflow: clip;
  background:
    radial-gradient(60% 65% at 72% 36%, rgba(218, 209, 247, 0.1), rgba(218, 209, 247, 0) 70%),
    var(--paper);
  color: var(--ink);
}

/* The map layer: it holds the canvas so the scroll-out fade (below) and the
   canvas's entrance fade can run side by side. */
.paths {
  position: absolute;
  inset: 0;
}

.paths__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 56px), transparent);
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
  padding-block: clamp(48px, 8vw, 120px) clamp(28px, 4vw, 48px);
}

.home-hero__title {
  font-size: clamp(2.5rem, 1.1rem + 4.4vw, 5.5rem);
  line-height: 1;
}
/* Each sentence starts its own line; the longer one fits on one line from about
   650px up (it measures 12.74em), and wraps balanced below that. */
.line { display: block; }
.line__inner { display: block; }

.home-hero .lede {
  max-width: 31rem;
  margin-top: clamp(20px, 2.4vw, 32px);
  color: var(--ink-text);
}

.home-hero .actions { margin-top: clamp(28px, 3vw, 40px); }
.home-hero .text-link { color: var(--signal-deep); }

/* The pause control stays out of sight until reached by keyboard (WCAG 2.2.2),
   and sits outside the copy's grid so revealing it moves nothing. */
.home-hero__meta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(28px, 4vw, 48px);
}

.paths__toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(250, 251, 252, 0.86);
  color: var(--slate);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.paths__toggle[hidden] { display: none; }
.paths__toggle:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.paths__toggle:hover { border-color: var(--signal-deep); color: var(--signal-deep); }
.paths__toggle svg { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.paths__icon-pause { fill: none; }
.paths__toggle[data-state="playing"] .paths__icon-play,
.paths__toggle[data-state="paused"] .paths__icon-pause { display: none; }

/* Vision teaser: the hero's map seen later, at night, once remembered routes
   have raised the ground. The terrain sits on the right and fades out under
   the copy. On wide screens it hangs from the band's top edge, below where the
   hero's map ran off, so scrolling crosses one landscape. */
.home-thesis {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(96px, 12vw, 176px);
  background:
    radial-gradient(42% 60% at 82% 30%, rgba(195, 182, 237, 0.1), rgba(195, 182, 237, 0) 70%),
    var(--ink);
}

/* Below 1024px the copy stacks, so the band grows at the bottom and the terrain
   sits in that space, fading out before it reaches the text. */
.home-thesis__terrain {
  position: absolute;
  z-index: -1;
  inset: auto -16% -4% auto;
  width: max(600px, 124%);
  max-width: none;
  height: auto;
  --terrain-opacity: 0.85;
  opacity: var(--terrain-opacity);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 78%);
  mask-image: linear-gradient(to top, #000 40%, transparent 78%);
}

@media (max-width: 1023px) {
  .home-thesis { padding-bottom: calc(clamp(96px, 12vw, 176px) + clamp(180px, 38vw, 320px)); }
}

.home-thesis__grid {
  display: grid;
  gap: 24px var(--gap);
}

.home-thesis__title {
  max-width: 11em;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-thesis__body {
  max-width: 30rem;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--mist);
}

.home-thesis .text-link { margin-top: clamp(24px, 2.8vw, 32px); color: var(--signal); }

@media (min-width: 1024px) {
  .home-thesis__terrain {
    inset: 0 -4% auto auto;
    width: min(72%, 1180px);
    --terrain-opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  }
  .home-thesis__copy { max-width: 46rem; }
}

/* Principles: an Ink band of four rules, each with a glyph from the hero's marks. */
.principles {
  display: grid;
  gap: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px);
}

.principle {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-dark-soft);
}

.principle__glyph { width: 112px; height: auto; overflow: visible; margin-bottom: 12px; }

.principle__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.principle__body {
  max-width: 30em;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mist);
}

.principle__label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

@media (min-width: 720px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Glyphs use the hero's marks, recoloured for Ink. */
.g-faint { fill: none; stroke: var(--mist); stroke-opacity: 0.32; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.g-strong { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.g-strong--thin { stroke-width: 1.6; }
.g-fail { fill: var(--mist); fill-opacity: 0.6; }
.g-ok { fill: var(--signal); }
.g-ring { fill: none; stroke: var(--signal); stroke-opacity: 0.7; stroke-width: 1; }
.g-ring--faint { stroke-opacity: 0.35; }
.g-ring--grey { stroke: var(--mist); stroke-opacity: 0.5; }
.g-dash { stroke-dasharray: 2 2.5; }
.g-tick { fill: none; stroke: var(--signal); stroke-opacity: 0.6; stroke-width: 1; }
.g-bar { fill: var(--mist); fill-opacity: 0.45; }
.g-bar--on { fill: var(--signal); fill-opacity: 1; }
.g-axis { fill: none; stroke: var(--rule-dark); stroke-width: 1; }

/* ---------- Thesis ---------- */

.thesis-hero__title {
  max-width: 10.5em;
  font-size: clamp(2.75rem, 1.1rem + 5.2vw, 6rem);
}

.thesis-hero .lede { max-width: 36rem; color: var(--ink-text); }

.thesis-gap__prose {
  max-width: 40rem;
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.4375rem);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .thesis-gap__prose { grid-column: 4 / span 8; }
}

/* The loop: five steps on one rule; the last two carry the thesis. */
.cycle {
  display: grid;
  margin-bottom: clamp(64px, 8vw, 112px);
  border-top: 1px solid var(--rule);
}

.cycle__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  padding-block: 20px;
  border-bottom: 1px solid var(--rule);
}

.cycle__mark {
  grid-row: 1 / span 2;
  width: 11px;
  height: 11px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--mist);
}

.cycle__step--check .cycle__mark {
  background: var(--paper);
  border: 1px solid var(--slate);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--signal);
}

.cycle__step--key .cycle__mark {
  background: var(--signal-deep);
  box-shadow: 0 0 0 5px var(--signal-bright);
}

.cycle__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.cycle__text { color: var(--slate); line-height: 1.5; }
.cycle__step--key .cycle__name { color: var(--signal-deep); }

@media (min-width: 900px) {
  .cycle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 0;
  }
  .cycle__step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding: 0 24px 0 0;
    border-bottom: 0;
  }
  /* One continuous rule through the marks: the columns have no gap. */
  .cycle__step::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule);
  }
  .cycle__mark { position: relative; grid-row: auto; margin: 0 0 18px; }
}

.thesis__body {
  max-width: 30rem;
  margin-top: 14px;
  color: var(--ink-text);
}

/* The path: an intended sequence. */
.milestones {
  display: grid;
  gap: clamp(40px, 5vw, 56px) var(--gap);
}

.milestone {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.milestone--now { border-top: 2px solid var(--signal-deep); padding-top: 21px; }

.milestone__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 24px;
}

.milestone__index {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}

.milestone__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.milestone__body { max-width: 26em; color: var(--ink-text); }
.milestone .text-link { margin-top: 4px; color: var(--signal-deep); }

@media (min-width: 720px) {
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Contact */
.home-contact .heading { max-width: 12em; }
.home-contact .actions { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Entrances ---------- */

/* Hero, on load: the canvas fades up while each line of the title rises from
   behind its own edge, then the copy and actions follow. main.js adds
   .is-entered once the display face is ready (or after 700ms). If it never
   runs, the same sequence starts at 2.2s, so nothing stays hidden. */
@keyframes line-rise { from { transform: translateY(130%); } to { transform: none; } }
@keyframes line-rise-in { from { transform: translateY(130%); } to { transform: none; } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-now { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* The clip box reaches past the line box, so ascenders and descenders show.
     A grid parent keeps the offsetting margins from collapsing between lines. */
  .js .home-hero__title { display: grid; }
  .js .home-hero__title .line,
  .js [data-reveal-lines] .line {
    overflow: clip;
    padding-block: 0.12em 0.16em;
    margin-block: -0.12em -0.16em;
  }

  .js .home-hero__title .line__inner { animation: line-rise 1.2s var(--ease-out) 2.2s both; }
  .js .home-hero .lede,
  .js .home-hero .actions { animation: fade-rise 1s var(--ease-out) 2.5s both; }
  .js .home-hero .paths__canvas { animation: fade-in 1.8s ease 2s both; }

  .js.is-entered .home-hero__title .line__inner { animation-name: line-rise-in; animation-delay: 80ms; }
  .js.is-entered .home-hero__title .line + .line .line__inner { animation-delay: 200ms; }
  .js.is-entered .home-hero .lede { animation-name: fade-rise-in; animation-delay: 520ms; }
  .js.is-entered .home-hero .actions { animation-name: fade-rise-in; animation-delay: 660ms; }
  /* The map draws itself in from flat ground (paths.js), so the canvas only needs a short fade. */
  .js.is-entered .home-hero .paths__canvas { animation-name: fade-in-now; animation-delay: 0ms; animation-duration: 0.6s; }

  /* On scroll: main.js adds .reveal-ready, then .is-in as each element arrives. */
  .reveal-ready [data-reveal]:not(.is-in) { opacity: 0; }
  .reveal-ready [data-reveal].is-in { animation: fade-rise-in 1.1s var(--ease-out) calc(var(--delay, 0) * 1ms) both; }
  .reveal-ready [data-reveal-lines]:not(.is-in) .line__inner { transform: translateY(130%); }
  .reveal-ready [data-reveal-lines].is-in .line__inner { animation: line-rise-in 1.3s var(--ease-out) both; }
  .reveal-ready .site-footer__brand .wordmark:not(.is-in) { transform: translateY(45%); }
  .reveal-ready .site-footer__brand .wordmark.is-in { animation: mark-rise 1.6s var(--ease-out) both; }
}

@keyframes mark-rise { from { transform: translateY(45%); } to { transform: none; } }

/* Vision band, on scroll: the statement lights up word by word as it moves up
   the screen, and the terrain drifts a little slower than the page. Browsers
   without scroll-driven animations show both at rest. */
@keyframes illuminate { from { opacity: 0.16; } to { opacity: 1; } }
@keyframes terrain-drift {
  from { opacity: 0; translate: 0 0; }
  22% { opacity: var(--terrain-opacity); }
  to { opacity: var(--terrain-opacity); translate: 0 -8%; }
}
/* The hero's map fades as it scrolls away, while the terrain below fades in. */
@keyframes map-leave { to { opacity: 0.15; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-thesis__title { view-timeline: --vision block; }
    .home-thesis__title .word {
      animation: illuminate linear both;
      animation-timeline: --vision;
      animation-range: cover calc(6% + var(--i) * 3.5%) cover calc(16% + var(--i) * 3.5%);
    }
    .home-thesis__terrain {
      animation: terrain-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .home-hero .paths {
      animation: map-leave linear both;
      animation-timeline: view();
      animation-range: exit 25% exit 100%;
    }
  }
}

@media print {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-lines] .line__inner,
  .reveal-ready .site-footer__brand .wordmark { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}