/* =========================================================================
   FUTURE 2100 — Design System
   Institutional / systems-laboratory visual language.
   Restraint is the rule: hairlines, mono labels, structural diagrams.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --ink:        #07090B;
  --ink-1:      #0B0E11;
  --ink-2:      #101519;
  --ink-3:      #151B21;

  --line:       #1A2128;
  --line-2:     #263139;
  --line-3:     #38464F;

  --paper:      #E9E7E2;
  --paper-2:    #B9BDC0;
  --muted:      #778088;
  --muted-2:    #5A646C;

  /* Two signals: the inherited physical world, and the designed system. */
  --clay:       #C4703C;
  --signal:     #7FB5A9;
  --signal-dim: rgba(127, 181, 169, 0.14);
  --deep:       #6C8FB8;

  --max:   1280px;
  --gut:   clamp(20px, 5vw, 72px);
  --rule:  1px solid var(--line);

  --ff-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--signal); color: var(--ink); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

.d1 { font-size: clamp(40px, 7.6vw, 98px); line-height: 0.98; letter-spacing: -0.03em; }
.d2 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.025em; }
.d3 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.08; }
.d4 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }

.lede {
  font-size: clamp(17.5px, 1.9vw, 23px);
  line-height: 1.54;
  color: var(--paper-2);
  font-weight: 300;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

p { margin: 0 0 1.15em; max-width: 70ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; color: var(--paper); }

.label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.label--signal { color: var(--signal); }
.label--clay   { color: var(--clay); }

.mono { font-family: var(--ff-mono); font-size: 0.86em; letter-spacing: 0.02em; }
.dim { color: var(--muted); }
.bright { color: var(--paper); }

/* A single sentence given the weight of a thesis. */
.statement {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  max-width: 20ch;
  margin: 0;
}
.statement--wide { max-width: 27ch; }
.statement em { font-style: italic; color: var(--signal); }
.statement .was { color: var(--muted-2); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: 780px; }
.mid { max-width: 980px; }

.section { padding-block: clamp(68px, 10vw, 150px); position: relative; }
.section--ruled { border-top: var(--rule); }
.section--tint { background: var(--ink-1); }

.sec-head { display: grid; gap: clamp(18px, 3vw, 30px); margin-bottom: clamp(36px, 5vw, 68px); }
.sec-head .lede { margin-top: 4px; }

@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 170px minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .sec-head--split > .label { padding-top: 12px; }
}

.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 759px) { .g4 { gap: 14px; } }

.stack-lg > * + * { margin-top: clamp(28px, 4vw, 52px); }
.stack-md > * + * { margin-top: clamp(18px, 2.4vw, 28px); }

hr.rule { border: 0; border-top: var(--rule); margin: clamp(40px, 6vw, 80px) 0; }

/* ---------- 5. Navigation ---------- */
/* Above .index so the Close control stays reachable while the overlay is open. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: 62px;
  display: flex; align-items: center;
  background: rgba(7, 9, 11, 0.84);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.mark {
  font-family: var(--ff-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
}
.mark__dot { width: 6px; height: 6px; border: 1px solid var(--signal); border-radius: 50%; flex: none; }

/* The nav carries many destinations, so the links are a horizontal scroller
   that sits between the fixed mark (left) and the fixed Index button (right).
   Every item stays reachable at any width — you scroll the strip sideways —
   and the Index overlay remains the full overview. */
.nav__links {
  display: flex; align-items: center; gap: 22px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-block: 4px;
}

/* The edge fades say "there is more this way". They are applied per edge, and
   only when something is actually hidden on that edge.

   They used to be unconditional. That was invisible while the strip always
   overflowed, but the moment it fits — which it now does on a wide screen,
   with four links moved into the overflow group — the left ramp simply eats
   the first letter of the first word. A fade that marks nothing is not a hint,
   it is damage.

   main.js sets these classes from scrollLeft. Without JavaScript no class is
   set, so there is no mask and nothing is ever clipped; the strip still
   scrolls. That is the right way round for the failure. */
.nav__links.has-l {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
}
.nav__links.has-r {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.nav__links.has-l.has-r {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a { flex: none; }
.mark { flex: none; }
.nav__toggle { flex: none; }
/* On very small screens the strip can get cramped next to the mark and button,
   so give the links a little more room by tightening the gap. */
@media (max-width: 620px) { .nav__links { gap: 16px; } .nav__inner { gap: 14px; } }
.nav__links a {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  transition: color .22s var(--ease); white-space: nowrap;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--paper); }

/* ---- The overflow group ----------------------------------------------------

   Twelve links made the strip something to scroll rather than read, so the four
   least-trafficked sit behind this. It is a <details>, not a scripted menu:
   navigation on this site works before any JavaScript runs, and <details>
   already gives click, Enter/Space and the right announcement for free.
   Escape and click-away are NOT native to it — main.js adds them, and their
   absence costs a reader one extra click rather than costing them access.

   It is a sibling of .nav__links rather than a child, because that strip is
   overflow-x:auto and would clip an absolutely positioned panel. */
.navmore { position: relative; flex: none; }

.navmore > summary {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  cursor: pointer; list-style: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .22s var(--ease);
}
.navmore > summary::-webkit-details-marker { display: none; }
.navmore > summary:hover,
.navmore[open] > summary,
.navmore.is-here > summary { color: var(--paper); }

/* The caret is drawn rather than typed so it inherits colour and sits on the
   optical centre; it turns to point at the panel it opened. */
.navmore > summary::after {
  content: ''; width: 5px; height: 5px; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s var(--ease);
}
.navmore[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* A dot marks the group when the page you are on lives inside it — the same
   job .is-active does for a visible link. */
.navmore.is-here > summary::before {
  content: ''; width: 4px; height: 4px; flex: none; border-radius: 50%;
  background: var(--signal);
}

.navmore__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 190px; display: grid; gap: 2px; padding: 8px;
  background: rgba(7, 9, 11, 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: var(--rule); border-color: var(--line-2); border-radius: 3px;
  box-shadow: 0 18px 40px -22px #000;
}
.navmore__panel a {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-2);
  padding: 9px 11px; border-radius: 2px; white-space: nowrap;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.navmore__panel a:hover { color: var(--paper); background: rgba(127, 181, 169, 0.08); }
.navmore__panel a.is-active { color: var(--paper); background: var(--signal-dim); }

/* Narrow screens: the mark, the strip, this and the Index button compete for
   one line. Tighten the control rather than reducing it to a bare caret — a
   lone chevron beside the Index button reads as decoration, and the word is
   the only thing that says it opens something. The strip beside it already
   scrolls, so the space is better taken from there. */
@media (max-width: 520px) {
  .navmore > summary { letter-spacing: 0.1em; gap: 5px; }
  .navmore__panel { min-width: 164px; }
}

.nav__toggle {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-2); background: none; border: var(--rule); border-radius: 2px;
  padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.nav__toggle:hover { border-color: var(--line-3); color: var(--paper); }
.nav__toggle:hover { box-shadow: 0 0 22px -8px var(--signal); }
/* Index glyph: a 3x3 field of points — the site's many destinations, drawn.
   Brightens to signal on hover; rotates into a compact mark while the overlay
   is open (the button text already reads "Close", this only confirms it). */
.nav__ic {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5px;
  width: 14px; height: 14px; flex: none;
  transition: transform .45s var(--ease);
}
.nav__ic i {
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: currentColor; align-self: center; justify-self: center;
  transition: transform .4s var(--ease), background .25s var(--ease);
}
.nav__toggle:hover .nav__ic i { background: var(--signal); }
.nav__toggle:hover .nav__ic i:nth-child(5) { transform: scale(1.55); }
.nav__toggle[aria-expanded="true"] .nav__ic { transform: rotate(45deg) scale(.94); }
.nav__toggle[aria-expanded="true"] .nav__ic i { background: var(--signal); }

/* Full index overlay: eleven destinations without crowding the bar. */
.index {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .34s var(--ease), visibility .34s;
  overflow-y: auto;
  padding-top: 62px;
}
.index.is-open { opacity: 1; visibility: visible; }
.index__grid { display: grid; gap: 0; border-top: var(--rule); }
@media (min-width: 760px) { .index__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .index__grid { grid-template-columns: repeat(3, 1fr); } }

.index__item {
  display: block; padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: var(--rule);
  transition: background .25s var(--ease);
}
@media (min-width: 760px) {
  .index__item { padding-inline: clamp(14px, 2vw, 26px); border-right: var(--rule); }
  .index__item:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1100px) {
  .index__item:nth-child(2n) { border-right: var(--rule); }
  .index__item:nth-child(3n) { border-right: 0; }
}
.index__item:hover { background: var(--ink-1); }
.index__item .num { font-family: var(--ff-mono); font-size: 10px; color: var(--muted-2); letter-spacing: .18em; }
.index__item h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 6px; }
.index__item p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.index__item:hover h3, .index__item.is-active h3 { color: var(--signal); }

/* ---------- 6. Hero ---------- */
.hero { position: relative; padding-top: clamp(130px, 20vh, 210px); padding-bottom: clamp(70px, 11vw, 140px); overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; z-index: 0; }
.hero__fade { position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to bottom, rgba(7,9,11,0), var(--ink)); z-index: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; }
.hero h1 .line { display: block; }
.hero h1 .line--2 { color: var(--muted); }
.hero__sub { margin-top: clamp(26px, 3.6vw, 42px); max-width: 46ch; }

/* Interior page header */
.phead { padding-top: clamp(118px, 16vh, 180px); padding-bottom: clamp(44px, 7vw, 90px); }
.phead .label { margin-bottom: 22px; }
.phead .lede { margin-top: clamp(22px, 3vw, 36px); max-width: 52ch; }

/* ---------- 7. Diagram system ---------- */
.diagram {
  border: var(--rule); background: var(--ink-1);
  padding: clamp(22px, 3.2vw, 42px);
  position: relative; border-radius: 2px;
}
.diagram__cap {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 20px; display: block; line-height: 1.7;
}

/* Vertical flow chain */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
.flow .node {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-2);
  border: var(--rule); background: var(--ink-2);
  padding: 12px 15px; border-radius: 2px;
  text-align: center;
}
.flow .node--head { color: var(--paper); border-color: var(--line-2); }
.flow .node--term { color: var(--paper); }
.flow .link { height: 26px; position: relative; flex: none; }
.flow .link::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; width: 1px;
  background: var(--line-2); transform: translateX(-50%);
}
.flow .link::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 5px solid var(--line-3); transform: translateX(-50%);
}
.flow--legacy .node--term { border-color: var(--clay); color: var(--clay); }
.flow--future .node--term { border-color: var(--signal); color: var(--signal); }

/* Two flows compared */
.compare { display: grid; gap: 0; border: var(--rule); border-radius: 2px; overflow: hidden; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { padding: clamp(22px, 3vw, 38px); background: var(--ink-1); }
.compare__col + .compare__col { border-top: var(--rule); }
@media (min-width: 860px) { .compare__col + .compare__col { border-top: 0; border-left: var(--rule); } }
.compare__col--future { background: var(--ink-2); }
.compare__title { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; }
.compare__col--legacy .compare__title { color: var(--clay); }
.compare__col--future .compare__title { color: var(--signal); }

/* Layer stack */
.layers { border: var(--rule); border-radius: 2px; overflow: hidden; }
.layer {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 0;
  border-bottom: var(--rule); background: var(--ink-1);
  transition: background .3s var(--ease);
}
.layer:last-child { border-bottom: 0; }
.layer:hover { background: var(--ink-2); }
.layer__n {
  font-family: var(--ff-mono); font-size: 10px; color: var(--muted-2);
  display: flex; align-items: center; justify-content: center;
  border-right: var(--rule);
}
.layer__b { padding: clamp(16px, 2vw, 24px) clamp(16px, 2.4vw, 30px); }
.layer__b h4 { font-family: var(--ff-sans); font-weight: 500; font-size: 14.5px; letter-spacing: .01em; color: var(--paper); margin-bottom: 5px; }
.layer__b p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
.layer:hover .layer__b h4 { color: var(--signal); }

/* Inherited-process pairs: old thing, and the digital thing it became */
.pairs { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.pairs li {
  border-bottom: var(--rule);
  padding: clamp(13px, 1.6vw, 18px) 0;
  display: grid; grid-template-columns: minmax(0,1fr); gap: 4px;
}
@media (min-width: 640px) {
  .pairs li { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 clamp(24px, 6vw, 90px); align-items: baseline; }
}
.pairs .from {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clay);
}
.pairs .to {
  font-size: 15.5px; color: var(--paper-2); position: relative; padding-left: 22px;
}
.pairs .to::before {
  content: "\2192"; position: absolute; left: 0; top: 0;
  font-family: var(--ff-mono); font-size: 13px; color: var(--muted-2);
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-2); border: var(--rule); background: var(--ink-1);
  padding: 7px 11px; border-radius: 2px;
}
.chips--signal li { border-color: rgba(127,181,169,.35); color: var(--signal); }

/* Horizontal causal chain. The connector is its own element so that a wrapped
   row begins with an arrow — reading as a continuation rather than as a stray
   mark in the margin. */
.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.chain li { display: flex; align-items: center; }
.chain li::before {
  content: "\2192"; flex: none;
  width: clamp(22px, 2.4vw, 38px); text-align: center;
  font-family: var(--ff-mono); font-size: 12px; color: var(--muted-2);
}
.chain li:first-child::before { content: none; }
.chain li > span {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-2); border: var(--rule); background: var(--ink-1);
  padding: 11px 15px; border-radius: 2px; white-space: nowrap;
}
.chain li:last-child > span { color: var(--signal); border-color: rgba(127,181,169,.4); }

/* Arrow list: things the system should make possible */
.arrows { list-style: none; margin: 0; padding: 0; }
.arrows li {
  position: relative; padding: 10px 0 10px 28px;
  border-bottom: var(--rule); font-size: 15.5px; color: var(--paper-2); line-height: 1.55;
}
.arrows li:first-child { border-top: var(--rule); }
.arrows li::before {
  content: "\2192"; position: absolute; left: 0; top: 10px;
  font-family: var(--ff-mono); font-size: 12px; color: var(--signal);
}
.arrows--muted li { color: var(--muted); }
.arrows--muted li::before { content: "\2014"; color: var(--muted-2); }

/* Convergence row */
.converge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.converge .term {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: var(--rule); background: var(--ink-1); padding: 10px 14px; border-radius: 2px; color: var(--paper-2);
}
.converge .plus { font-family: var(--ff-mono); color: var(--muted-2); font-size: 13px; }

/* Accumulation stack */
.accum { display: flex; flex-direction: column; gap: 6px; }
.accum .row {
  display: flex; align-items: center; gap: 14px;
  border: var(--rule); background: var(--ink-1); padding: 13px 16px; border-radius: 2px;
}
.accum .row .k { font-family: var(--ff-mono); font-size: 10px; color: var(--muted-2); width: 26px; flex: none; }
.accum .row .v { font-size: 14.5px; color: var(--paper-2); }
.accum .row .bar { margin-left: auto; height: 2px; background: var(--signal); opacity: .5; flex: none; border-radius: 1px; }
.accum .sum {
  margin-top: 10px; border: 1px solid var(--signal); background: var(--signal-dim);
  padding: 16px; border-radius: 2px; text-align: center;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal);
}

/* The loop diagram */
.loop { display: block; width: 100%; height: auto; }
.loop .ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.loop .arc { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; }
.loop .dot { fill: var(--ink); stroke: var(--line-3); stroke-width: 1; }
.loop .dot-on { fill: var(--signal); }
.loop text { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; fill: var(--paper-2); }
.loop text.ctr { fill: var(--muted-2); }

/* ---------- 8. Cards ---------- */
.card {
  border: var(--rule); background: var(--ink-1); border-radius: 2px;
  padding: clamp(20px, 2.6vw, 30px);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
  display: block; height: 100%;
}
a.card:hover {
  border-color: rgba(127,181,169,.34); background: var(--ink-2);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(127,181,169,.06);
}
.card h3 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 0; }
.card .label { margin-bottom: 16px; }
a.card:hover h3 { color: var(--signal); }

.eco__name { font-family: var(--ff-display); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.02em; line-height: 1.05; }
.eco__not { font-size: 12.5px; color: var(--clay); font-family: var(--ff-mono); letter-spacing: .05em; margin: 12px 0 3px; }
.eco__is  { font-size: 12.5px; color: var(--signal); font-family: var(--ff-mono); letter-spacing: .05em; margin-bottom: 14px; }
.eco__scope { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 18px 0 0; }
.eco__scope li { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: var(--rule); padding: 5px 8px; border-radius: 2px; }
.eco__scope li.is-core { color: var(--signal); border-color: rgba(127,181,169,.35); }

/* Numbered principles */
.principles { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.principles li { border-bottom: var(--rule); padding: clamp(20px, 2.6vw, 30px) 0; display: grid; gap: 10px; }
@media (min-width: 800px) { .principles li { grid-template-columns: 88px minmax(0,1fr); gap: 0 40px; align-items: start; } }
.principles .n { font-family: var(--ff-mono); font-size: 10px; color: var(--muted-2); letter-spacing: .18em; padding-top: 7px; }
.principles h3 { font-size: clamp(19px, 2vw, 25px); margin-bottom: 8px; }
.principles p { color: var(--muted); font-size: 15px; margin: 0; }

/* Contrast table */
.contrast { display: grid; gap: 0; border: var(--rule); border-radius: 2px; overflow: hidden; }
@media (min-width: 760px) { .contrast { grid-template-columns: 1fr 1fr; } }
.contrast__h { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 20px; border-bottom: var(--rule); background: var(--ink-2); }
.contrast__side { background: var(--ink-1); }
.contrast__side + .contrast__side { border-top: var(--rule); }
@media (min-width: 760px) { .contrast__side + .contrast__side { border-top: 0; border-left: var(--rule); } }
.contrast ul { list-style: none; margin: 0; padding: 18px 20px; }
.contrast li { font-size: 14.5px; color: var(--muted); padding: 7px 0 7px 22px; position: relative; line-height: 1.5; }
.contrast li::before { position: absolute; left: 0; top: 7px; font-family: var(--ff-mono); font-size: 12px; }
.contrast__side--a .contrast__h { color: var(--clay); }
.contrast__side--a li::before { content: "\2014"; color: var(--clay); }
.contrast__side--b .contrast__h { color: var(--signal); }
.contrast__side--b li::before { content: "\2192"; color: var(--signal); }

/* Thesis block */
.thesis {
  border-left: 2px solid var(--signal); padding: 6px 0 6px clamp(20px, 3vw, 36px);
  margin: clamp(30px, 4vw, 56px) 0;
}
.thesis p { font-family: var(--ff-display); font-size: clamp(21px, 2.6vw, 31px); line-height: 1.26; letter-spacing: -.02em; color: var(--paper); max-width: 29ch; }
.thesis--clay { border-left-color: var(--clay); }

/* Definition rows */
.defs { border-top: var(--rule); margin: 0; }
.defs__row { border-bottom: var(--rule); padding: clamp(18px, 2.4vw, 26px) 0; display: grid; gap: 8px; }
@media (min-width: 820px) { .defs__row { grid-template-columns: 270px minmax(0,1fr); gap: 0 48px; } }
.defs__row dt { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); padding-top: 4px; }
.defs__row dd { margin: 0; color: var(--muted); font-size: 15px; }

/* Disclosure note */
/* The qualifier beside a version number. Set quieter than the number it
   corrects, because it is a caveat and not the fact — but present, because a
   bare "v1" next to the words "version history" claims a past that is not
   there yet. */
.vnote { color: var(--muted); font-size: 0.86em; letter-spacing: 0; white-space: nowrap; }

.note { border: 1px dashed var(--line-2); border-radius: 2px; padding: clamp(18px, 2.4vw, 28px); }
.note .label { margin-bottom: 12px; }
.note p { font-size: 14.5px; color: var(--muted); }

/* Links */
.link-arrow {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--signal); gap: 14px; }
.link-arrow::after { content: "\2192"; }

/* Pager */
.pager { border-top: var(--rule); display: grid; gap: 0; }
@media (min-width: 760px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { padding: clamp(28px, 4vw, 48px) 0; display: block; transition: background .3s var(--ease); }
.pager a + a { border-top: var(--rule); }
@media (min-width: 760px) {
  .pager a { padding-inline: clamp(16px, 2.4vw, 32px); }
  .pager a + a { border-left: var(--rule); border-top: 0; text-align: right; }
}
.pager a:hover { background: var(--ink-1); }
.pager .label { margin-bottom: 10px; }
.pager h3 { font-size: clamp(22px, 2.6vw, 32px); }
.pager a:hover h3 { color: var(--signal); }

/* ---------- 9. Footer ---------- */
.footer { border-top: var(--rule); background: var(--ink-1); padding-block: clamp(50px, 7vw, 90px) 34px; }
.footer__top { display: grid; gap: clamp(36px, 5vw, 56px); }
@media (min-width: 960px) { .footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); } }
.footer__wordmark { font-family: var(--ff-display); font-size: clamp(38px, 6vw, 74px); line-height: .96; letter-spacing: -.03em; }
.footer__wordmark span { display: block; color: var(--muted-2); }
.footer__claim { margin-top: 22px; font-size: 14.5px; color: var(--muted); max-width: 38ch; }
.footer__cols { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__cols h4 { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; font-weight: 500; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; }
.footer__cols li { margin-bottom: 9px; }
.footer__cols a { font-size: 14px; color: var(--paper-2); transition: color .22s var(--ease); }
.footer__cols a:hover { color: var(--signal); }
.footer__bar {
  margin-top: clamp(44px, 6vw, 72px); padding-top: 22px; border-top: var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between;
}
.footer__bar p { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted-2); margin: 0; text-transform: uppercase; }

/* ---------- 10. Motion ---------- */
.has-js .reveal { opacity: 0; transform: translateY(20px); filter: blur(7px); transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.has-js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 11. Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--signal); color: var(--ink); padding: 10px 16px; border-radius: 2px;
  font-family: var(--ff-mono); font-size: 12px; transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
body.is-locked { overflow: hidden; }

/* ---------- 12. Thought experiments ----------
   The only motion in the site that is not scroll-reveal. Justified because the
   interaction IS the argument: the visitor performs the reasoning instead of
   reading its conclusion. Everything here degrades to readable prose with
   JavaScript off — the enhanced state is opt-in via .is-live, added by script. */

.texp { border: var(--rule); border-radius: 2px; background: var(--ink-2); }
.texp__setup { padding: clamp(22px, 3vw, 38px); border-bottom: var(--rule); }
.texp__setup p { margin: 0; }
.texp__setup p + p { margin-top: 16px; }
.texp__ask {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 18px;
}
.texp__opts { display: grid; gap: 0; }
@media (min-width: 900px) { .texp__opts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.texp__opt { border-bottom: var(--rule); }
.texp__opt:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .texp__opt { border-bottom: 0; border-right: var(--rule); }
  .texp__opt:last-child { border-right: 0; }
}

.texp__choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--paper-2);
  padding: clamp(20px, 2.6vw, 30px);
  font-family: var(--ff-sans); font-weight: 300; font-size: 15px; line-height: 1.55;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.texp__choice .texp__n {
  display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px;
}
.texp:not(.is-live) .texp__choice { cursor: default; }
.texp.is-live .texp__choice:hover { background: rgba(255,255,255,.022); color: var(--paper); }
.texp.is-live .texp__opt.is-chosen .texp__choice { background: var(--signal-dim); color: var(--paper); }
.texp.is-live .texp__opt.is-chosen .texp__n { color: var(--signal); }

.texp__out { padding: 0 clamp(20px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px); }
.texp__verdict {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 12px; color: var(--clay);
}
.texp__out--redesign .texp__verdict { color: var(--signal); }
.texp__out p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.texp.is-live .texp__out { display: none; }
.texp.is-live .texp__opt.is-chosen .texp__out { display: block; }

.texp__after { border-top: var(--rule); padding: clamp(22px, 3vw, 34px); }
.texp__after p { margin: 0; font-size: 15.5px; color: var(--paper-2); }
.texp__after p + p { margin-top: 14px; }
.texp.is-live .texp__after { display: none; }
.texp.is-live.is-answered .texp__after { display: block; }
.texp__again {
  margin-top: 20px; background: none; border: var(--rule); border-radius: 2px;
  color: var(--muted); cursor: pointer; padding: 9px 15px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.texp__again:hover { color: var(--signal); border-color: rgba(127,181,169,.4); }
.texp:not(.is-live) .texp__again { display: none; }

/* ---- Conversion model: the same capability, into an environment you edit ---- */
/* Hidden until script confirms it works; the static comparison is the fallback. */
.conv { display: none; border: var(--rule); border-radius: 2px; background: var(--ink-2); }
.has-conv .conv { display: block; }
.conv__head { padding: clamp(20px, 2.6vw, 30px); border-bottom: var(--rule); }
.conv__head p { margin: 0; font-size: 14.5px; color: var(--muted); }
.conv__conds { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.conv__cond {
  background: none; cursor: pointer; border: var(--rule); border-radius: 2px;
  padding: 9px 14px; color: var(--paper-2);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em;
  transition: color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.conv__cond[aria-pressed="true"] { border-color: rgba(127,181,169,.42); color: var(--paper); }
.conv__cond[aria-pressed="false"] { color: var(--muted-2); opacity: .62; text-decoration: line-through; }
.conv__cond:hover { border-color: var(--line-2); }

.conv__stages { padding: clamp(22px, 3vw, 34px); display: grid; gap: 0; }
@media (min-width: 760px) { .conv__stages { grid-template-columns: repeat(4, 1fr); gap: 0 10px; } }
.conv__stage { border-top: 2px solid var(--line); padding: 14px 0 0; }
@media (max-width: 759px) { .conv__stage + .conv__stage { margin-top: 14px; } }
.conv__stage h4 {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 8px; font-weight: 500; color: var(--muted-2);
}
.conv__stage p { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.55; }
.conv__stage.is-reached { border-top-color: var(--signal); }
.conv__stage.is-reached h4 { color: var(--signal); }
.conv__stage.is-reached p { color: var(--muted); }
.conv__stage.is-broken { border-top-color: var(--clay); }
.conv__stage.is-broken h4 { color: var(--clay); }
.conv__stage.is-broken p { color: var(--paper-2); }

.conv__read { border-top: var(--rule); padding: clamp(20px, 2.6vw, 30px); }
.conv__read p { margin: 0; font-size: 15px; color: var(--paper-2); line-height: 1.6; }
.conv__read .conv__label {
  display: block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px;
}
.has-conv .conv-fallback { display: none; }

/* ---------- 13. Hero creed and buttons ----------
   The creed states human purpose; the lede underneath carries the intellectual
   thesis. Serif, restrained, not a marketing banner — it appears here, once on
   About, and nowhere else. */
.hero__creed {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(22px, 3.1vw, 38px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--paper);
  max-width: 34ch;
  /* Founder request: the creed breathes and slowly shifts through colour — a
     soft, "heavenly" pulse cycling yellow → green → teal → blue → violet → red.
     Kept slow and smooth on purpose: never a harsh strobe (that reads cheap and
     is a seizure risk). Disabled entirely under reduced-motion below. */
  animation: creedGlow 20s linear infinite, creedBreath 3.8s ease-in-out infinite;
  will-change: color, opacity;
}
@keyframes creedGlow {
  0%,100% { color: #E9C766; text-shadow: 0 0 24px rgba(233,199,102,.45); }
  16%     { color: #6FB07A; text-shadow: 0 0 24px rgba(111,176,122,.45); }
  33%     { color: #7FB5A9; text-shadow: 0 0 24px rgba(127,181,169,.45); }
  50%     { color: #6C8FB8; text-shadow: 0 0 24px rgba(108,143,184,.45); }
  66%     { color: #B57EDC; text-shadow: 0 0 24px rgba(181,126,220,.45); }
  83%     { color: #D9584C; text-shadow: 0 0 26px rgba(217,88,76,.5); }
}
@keyframes creedBreath {
  0%,100% { opacity: 1; }
  50%     { opacity: .6; }
}
.hero__creed::before {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--signal); margin-bottom: clamp(18px, 2.2vw, 26px);
}
@media (prefers-reduced-motion: reduce) {
  /* Founder wants the creed to keep its colour pulse even here. It is a slow,
     smooth cycle with no fast flashing, so it stays within safe limits — hence
     it is deliberately exempted from the global reduced-motion switch-off. */
  .hero__creed {
    animation: creedGlow 20s linear infinite, creedBreath 3.8s ease-in-out infinite !important;
  }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 4vw, 44px); }
.btn {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 2px; border: 1px solid var(--signal);
  background: var(--signal-dim); color: var(--signal);
  transition: background .25s var(--ease), color .25s var(--ease),
              box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--signal); color: var(--ink); box-shadow: 0 0 30px -6px rgba(127,181,169,.55); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-2); background: none; color: var(--paper-2); }
.btn--ghost:hover { border-color: var(--paper-2); background: none; color: var(--paper); }

/* ---------- 14. Assumption tests ---------- */
.tally { display: grid; gap: 0; border: var(--rule); border-radius: 2px; overflow: hidden; }
@media (min-width: 720px) { .tally { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.tally__row {
  display: flex; align-items: baseline; gap: 12px;
  padding: clamp(18px, 2.2vw, 26px); background: var(--ink-1);
  border-bottom: var(--rule);
}
.tally__row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .tally__row { border-bottom: 0; border-right: var(--rule); }
  .tally__row:last-child { border-right: 0; }
}
.tally__row--total { background: var(--ink-2); }
.tally__n { font-family: var(--ff-display); font-size: clamp(30px, 3.6vw, 46px); line-height: 1; color: var(--paper); }
.tally__s { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tally__note { margin-top: 20px; font-size: 14px; color: var(--muted-2); max-width: 68ch; }

/* Status colours carry meaning: clay where a claim is still inherited belief,
   signal once evidence has moved it. */
.s-under-investigation { color: var(--clay); }
.s-evidence-collected, .s-experiment-in-progress { color: var(--deep); }
.s-challenged { color: var(--clay); }
.s-supported, .s-partially-supported, .s-updated { color: var(--signal); }
.s-rejected { color: var(--muted-2); }

.tfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 38px); }
.tfilter {
  background: none; border: var(--rule); border-radius: 2px; cursor: pointer;
  padding: 9px 14px; color: var(--muted);
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tfilter:hover { color: var(--paper-2); border-color: var(--line-2); }
.tfilter.is-on { color: var(--signal); border-color: rgba(127,181,169,.45); }

.tgrid { display: grid; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 860px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
.tcard {
  display: block; border: var(--rule); border-radius: 2px; background: var(--ink-1);
  padding: clamp(22px, 2.8vw, 32px);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tcard:hover {
  background: var(--ink-2); border-color: rgba(127,181,169,.3);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(127,181,169,.06);
}
.tcard__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tcard__id, .tcard__status {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.tcard__id { color: var(--muted-2); }
.tcard__topic {
  margin: 22px 0 6px; font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.tcard h3 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25; margin: 0; color: var(--paper); }
.tcard__meta { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 22px 0 0; }
.tcard__meta dt { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.tcard__meta dd { margin: 4px 0 0; font-size: 14px; color: var(--paper-2); }
.tcard__pos { margin: 20px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.tmeta { display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px); margin: clamp(28px, 3.5vw, 44px) 0 0; }
.tmeta dt { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.tmeta dd { margin: 6px 0 0; font-size: 15px; color: var(--paper-2); }

.tversions { border-left: 2px solid var(--line-2); padding-left: clamp(18px, 2.4vw, 28px); margin-top: clamp(26px, 3vw, 38px); }
.tversion { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 0 16px; }
.tversion__v { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; color: var(--signal); }
.tversion__date { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted-2); margin: 0 0 8px; }
.tversion p:not(.tversion__date) { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 15. Provider registry table ---------- */
.ptable-wrap { overflow-x: auto; border: var(--rule); border-radius: 2px; }
.ptable { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--ink-1); }
.ptable th {
  text-align: left; padding: 14px 16px; border-bottom: var(--rule); background: var(--ink-2);
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500; white-space: nowrap;
}
.ptable td { padding: 14px 16px; border-bottom: var(--rule); font-size: 14px; color: var(--paper-2); vertical-align: middle; }
.ptable tr:last-child td { border-bottom: 0; }
.pcap { font-size: 14.5px; color: var(--paper); }
.pmono { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pstate { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.pstate.is-auth { color: var(--clay); }
.plevel { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.plevel.l-0, .plevel.l-1 { color: var(--clay); }
.plevel.l-2, .plevel.l-3 { color: var(--deep); }
.plevel.l-4, .plevel.l-5 { color: var(--signal); }

/* ---------- 16. Publication card ---------- */
.pub {
  display: block; border: var(--rule); border-radius: 2px; background: var(--ink-1);
  padding: clamp(24px, 3vw, 36px);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pub:hover {
  background: var(--ink-2); border-color: rgba(127,181,169,.34);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(127,181,169,.06);
}
.pub__meta { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pub__no, .pub__fmt {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.pub__no { color: var(--signal); }
.pub__fmt { color: var(--muted-2); }
.pub h3 {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.16;
  margin: clamp(20px, 2.4vw, 28px) 0 0; color: var(--paper);
}
.pub__sub { margin: 14px 0 0; font-size: clamp(15px, 1.7vw, 17.5px); color: var(--paper-2); line-height: 1.5; max-width: 60ch; }
.pub__abs { margin: 20px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.62; max-width: 72ch; }
.pub__dl {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal);
}
.pub:hover .pub__dl { color: var(--paper); }

/* ---------- 17. Index modules ----------
   The lower half of the Index overlay. Named for actions, never statuses —
   a status label is a title somebody wears. Present only on pages that carry
   a specific claim; their absence elsewhere is the design. */
.index__modules { border-top: var(--rule); margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(24px, 3vw, 34px); }
.index__modhead {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 clamp(16px, 2vw, 22px);
}
.index__modgrid { display: grid; gap: 10px; }
@media (min-width: 720px) { .index__modgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.imod {
  display: block; border: var(--rule); border-radius: 2px; background: var(--ink-1);
  padding: clamp(16px, 2vw, 22px);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.imod:hover { background: var(--ink-2); border-color: rgba(127,181,169,.4); }
.imod__action {
  display: block; font-family: var(--ff-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--signal);
}
.imod__note { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.index__modfoot {
  margin: clamp(18px, 2.2vw, 26px) 0 0; font-size: 12.5px; color: var(--muted-2);
  line-height: 1.6; max-width: 76ch;
}

/* ---------- 18. Premium polish ----------
   Motion and depth added on top of the restrained base. All of it is on-brand:
   signal-tinted, low-amplitude, gone under reduced-motion. Nothing decorative
   competes with reading; these only reward attention and confirm state. */

/* Ambient signal glow behind the hero headline — depth, not decoration. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 6%; left: 2%; width: 62%; height: 78%;
  background: radial-gradient(closest-side, rgba(127,181,169,.09), transparent 70%);
}

/* The brand mark quietly signals — a single outward pulse, like a node on the
   field finding a neighbour. */
.mark__dot { position: relative; }
.mark__dot::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--signal); border-radius: 50%;
  opacity: 0; animation: markPulse 4.2s var(--ease) infinite;
}
@keyframes markPulse {
  0%        { opacity: .5; transform: scale(1); }
  70%, 100% { opacity: 0;  transform: scale(2.6); }
}

/* Index overlay: destinations settle in with a short stagger when it opens. */
.index__item { opacity: 0; transform: translateY(14px); }
.index.is-open .index__item {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .25s var(--ease);
}
.index.is-open .index__item:nth-child(1)  { transition-delay: .05s; }
.index.is-open .index__item:nth-child(2)  { transition-delay: .09s; }
.index.is-open .index__item:nth-child(3)  { transition-delay: .13s; }
.index.is-open .index__item:nth-child(4)  { transition-delay: .17s; }
.index.is-open .index__item:nth-child(5)  { transition-delay: .21s; }
.index.is-open .index__item:nth-child(6)  { transition-delay: .25s; }
.index.is-open .index__item:nth-child(7)  { transition-delay: .29s; }
.index.is-open .index__item:nth-child(8)  { transition-delay: .33s; }
.index.is-open .index__item:nth-child(9)  { transition-delay: .37s; }
.index.is-open .index__item:nth-child(10) { transition-delay: .41s; }
.index.is-open .index__item:nth-child(11) { transition-delay: .45s; }
.index.is-open .index__item:nth-child(12) { transition-delay: .49s; }
/* A signal edge grows on the hovered destination. */
.index__item { position: relative; }
.index__item::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0;
  background: var(--signal); transform: translateY(-50%);
  transition: height .3s var(--ease);
}
.index__item:hover::before { height: 62%; }

/* Pager panels lift on hover, matching the cards. */
.pager a { transition: background .3s var(--ease); }
.pager a:hover { background: var(--ink-1); box-shadow: inset 0 0 0 1px rgba(127,181,169,.08); }

@media (prefers-reduced-motion: reduce) {
  .index__item { opacity: 1; transform: none; }
  .mark__dot::after { animation: none; }
}

/* ---------- 19. Advanced UI ----------
   Reading progress, a section rail, cross-page transitions, and diagrams that
   draw themselves in. Each degrades cleanly: no JS or reduced-motion leaves the
   page fully readable and static. */

/* Reading-progress line, above the nav hairline. */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
  background: transparent; pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--signal), var(--deep));
  box-shadow: 0 0 10px rgba(127,181,169,.55);
}

/* Section rail: one dot per section, current one lit. Built by script, wide
   screens only, and it names the section on hover. */
.srail {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: none; flex-direction: column; gap: 13px;
}
@media (min-width: 1200px) { .srail.is-ready { display: flex; } }
.srail a {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line-3); position: relative;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.srail a:hover { border-color: var(--signal); transform: scale(1.3); }
.srail a.is-active { background: var(--signal); border-color: var(--signal); }
.srail a::after {
  content: attr(data-label); position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%); white-space: nowrap;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-2); background: rgba(7,9,11,.86); padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.srail a:hover::after { opacity: 1; }

/* Cross-document view transitions — a quiet crossfade between pages. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .4s; animation-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* Draw-on-scroll. Gated behind .has-draw (added by script) so the default and
   reduced-motion states are fully drawn and visible. */
.has-draw .flow .link::before { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .55s var(--ease); }
.has-draw .flow.is-drawn .link::before { transform: translateX(-50%) scaleY(1); }
.has-draw .flow .link::after { opacity: 0; transition: opacity .3s var(--ease) .4s; }
.has-draw .flow.is-drawn .link::after { opacity: 1; }
.has-draw .js-draw { stroke-dashoffset: var(--len, 0); transition: stroke-dashoffset 1.2s var(--ease); }
.has-draw .js-draw.is-drawn { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .srail { display: none !important; }
  @view-transition { navigation: none; }
}

/* ---------- 20. Assumption Lab ----------
   Reuses the assumption-test card, filter and chain components. Adds the extra
   research statuses (meaning-carrying but neutral — never true/false) and the
   private, client-side "Test my assumption" form. */
.s-sources-identified, .s-research-in-progress, .s-interpretations-differ { color: var(--deep); }
.s-evidence-inconclusive { color: var(--clay); }
.s-draft, .s-archived { color: var(--muted-2); }

.tma { border: var(--rule); border-radius: 2px; background: var(--ink-1); padding: clamp(20px, 3vw, 34px); }
.tma__q { display: block; margin: 0; }
.tma > .tma__q { margin-bottom: clamp(18px, 2.4vw, 26px); }
.tma__label { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.tma textarea, .tma select {
  width: 100%; box-sizing: border-box;
  background: var(--ink-2); color: var(--paper);
  border: var(--rule); border-radius: 2px; padding: 11px 13px;
  font-family: var(--ff-sans); font-weight: 300; font-size: 15px; line-height: 1.5;
  resize: vertical;
}
.tma textarea::placeholder { color: var(--muted-2); }
.tma textarea:focus, .tma select:focus { outline: 2px solid var(--signal); outline-offset: 2px; border-color: var(--line-3); }
.tma select { appearance: none; -webkit-appearance: none; }
.tma__grid { display: grid; gap: clamp(16px, 2.2vw, 22px); }
@media (min-width: 760px) { .tma__grid { grid-template-columns: 1fr 1fr; } }
.tma__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
.tma__actions .btn { cursor: pointer; }
.tma__privacy { margin: 20px 0 0; font-size: 13px; color: var(--muted); line-height: 1.65; }

.trace { border: var(--rule); border-radius: 2px; background: var(--ink-2); padding: clamp(20px, 3vw, 32px); }
.trace__row { border-top: var(--rule); padding: 16px 0; display: grid; gap: 6px; }
.trace__row:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 720px) { .trace__row { grid-template-columns: 170px minmax(0, 1fr); gap: 0 32px; align-items: start; } }
.trace__k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); padding-top: 3px; }
.trace__v { color: var(--paper-2); font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.trace__v.is-empty { color: var(--muted-2); font-style: italic; }
.trace__foot { margin: 22px 0 0; border-top: var(--rule); padding-top: 20px; font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ---------- 21. Language switch ----------
   Only the challenge page carries it. Logical properties are used across the
   site's shared components, so Urdu and Arabic flip from the one dir
   attribute rather than a second stylesheet. */
.langs {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: clamp(26px, 4vw, 40px);
  padding-bottom: clamp(22px, 3.4vw, 32px);
  border-bottom: var(--rule);
}
.lang {
  background: none; border: var(--rule); border-radius: 2px;
  color: var(--muted); cursor: pointer;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em;
  padding: 8px 13px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lang:hover { color: var(--paper-2); border-color: var(--line-2); }
.lang[aria-pressed="true"] { color: var(--signal); border-color: rgba(127,181,169,.45); background: var(--signal-dim); }
/* Each button sits in its own script so a reader finds their language
   without reading English first. */
.lang[data-lang="hi"] { font-family: "Noto Sans Devanagari", system-ui, sans-serif; }
.lang[data-lang="ur"] { font-family: "Noto Nastaliq Urdu", system-ui, sans-serif; font-size: 12px; }
.lang[data-lang="ar"] { font-family: "Noto Naskh Arabic", system-ui, sans-serif; font-size: 12px; }
.lang[data-lang="bn"] { font-family: "Noto Sans Bengali", system-ui, sans-serif; }
.lang[data-lang="zh"] { font-family: "Noto Sans SC", system-ui, sans-serif; letter-spacing: .12em; }
.lang[data-lang="ru"] { font-family: "IBM Plex Sans", system-ui, sans-serif; }

/* Per-script families and leading. Nastaliq needs far more room than Latin. */
[lang="hi"] { --ff-display: "Noto Serif Devanagari", Georgia, serif; --ff-sans: "Noto Sans Devanagari", system-ui, sans-serif; }
[lang="bn"] { --ff-display: "Noto Serif Bengali", Georgia, serif; --ff-sans: "Noto Sans Bengali", system-ui, sans-serif; }
/* Newsreader carries no Cyrillic, so Russian headings would silently fall back
   to whatever serif the device happens to have. Noto Serif covers it. */
[lang="ru"] { --ff-display: "Noto Serif", Georgia, serif; --ff-sans: "IBM Plex Sans", system-ui, sans-serif; }
/* Han characters carry far more ink per glyph than Latin; the display sizes
   that suit Newsreader are too tight here, so the headings get room. */
[lang="zh"] { --ff-display: "Noto Serif SC", Georgia, serif; --ff-sans: "Noto Sans SC", system-ui, sans-serif; }
[lang="zh"] .d1, [lang="zh"] .d2, [lang="zh"] .d3 { letter-spacing: .02em; line-height: 1.35; }
[lang="zh"] p, [lang="zh"] dd { line-height: 1.95; }
[lang="bn"] p, [lang="bn"] dd { line-height: 1.9; }
[lang="ru"] .d1, [lang="ru"] .d2 { letter-spacing: -0.01em; }
[lang="ur"] { --ff-display: "Noto Nastaliq Urdu", serif; --ff-sans: "Noto Nastaliq Urdu", system-ui, sans-serif; line-height: 2.4; }
[lang="ar"] { --ff-display: "Noto Naskh Arabic", serif; --ff-sans: "Noto Naskh Arabic", system-ui, sans-serif; line-height: 2; }
[lang="ur"] .d1, [lang="ur"] .d2, [lang="ur"] .d3,
[lang="ar"] .d1, [lang="ar"] .d2, [lang="ar"] .d3 { letter-spacing: 0; line-height: 1.75; }
[lang="ur"] .lede, [lang="ur"] .thesis p { line-height: 2.2; }

/* The shared diagram and text components use physical left/right in places.
   These flip the ones the challenge page actually uses. */
[dir="rtl"] .thesis { border-left: 0; border-right: 2px solid var(--signal); padding-left: 0; padding-right: clamp(16px, 2.6vw, 26px); }
[dir="rtl"] .arrows li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .arrows li::before { left: auto; right: 0; }
[dir="rtl"] .note { text-align: right; }

/* Ten languages is more chips than five. They wrap, and on a narrow screen the
   row must not become the page. */
@media (max-width: 560px) {
  .langs { gap: 6px; margin-bottom: clamp(20px, 3vw, 28px); padding-bottom: clamp(16px, 2.6vw, 22px); }
  .lang { padding: 7px 10px; font-size: 10.5px; }
}

/* ---------- 22. The challenge page ----------
   Everything here is driven by what the passage argues, not by a house style
   applied on top of it. Written with logical properties throughout, because
   two of the ten languages read right to left and none of this may assume a
   left edge. */

/* --- The opening ---------------------------------------------------- */

.phead--challenge { padding-block-end: clamp(48px, 7vw, 96px); }


.open__h {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(42px, 8.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin-block: clamp(20px, 3vw, 34px) 0;
  max-width: 15ch;
  text-wrap: balance;
  color: var(--paper);
}

/* The claim is the page's thesis in two clauses. A hairline carries the eye
   from the headline into it, so the turn between the clauses is met rather
   than stumbled on. */
.open__claim {
  position: relative;
  margin-block-start: clamp(30px, 4.2vw, 52px);
  padding-block-start: clamp(26px, 3.4vw, 38px);
  max-width: 46ch;
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.48;
  color: var(--paper-2);
  text-wrap: pretty;
}
.open__claim::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(48px, 7vw, 92px); height: 1px; background: var(--signal);
  opacity: .75;
}

.lead-in::first-letter { }
.lead-in { font-size: clamp(16.5px, 1.35vw, 18.5px); }

/* --- The seven lowered definitions ---------------------------------- */

/* The component's whole job is to make one move visible seven times: a name
   that still stands, and underneath it the smaller thing the name was
   reduced to. The reduction is inset and dimmer than the term on purpose —
   that indent is the argument. */
.lowered { margin: clamp(34px, 5vw, 60px) 0 0; padding: 0; }

.lowered__row {
  padding-block: clamp(26px, 3.4vw, 40px);
  border-block-start: var(--rule);
  transition: background .45s var(--ease);
}
.lowered__row:last-child { border-block-end: var(--rule); }

.lowered__term {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(24px, 3.3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin: 0;
  transition: color .45s var(--ease);
}

.lowered__was {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.9vw, 24px);
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  /* The inset is the lowering. It is the same on every row. */
  padding-inline-start: clamp(18px, 3.4vw, 54px);
  max-width: 74ch;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.72;
  text-wrap: pretty;
  transition: color .45s var(--ease);
}

/* The identical mark on all seven rows. Section four then says out loud what
   this has already shown: it is one structure, repeated. */
.lowered__mark {
  flex: none;
  position: relative;
  inline-size: clamp(16px, 2.2vw, 30px);
  block-size: 1.72em;
}
.lowered__mark::before {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  inline-size: 1px; block-size: .72em;
  background: var(--clay); opacity: .55;
  transition: opacity .45s var(--ease), block-size .45s var(--ease);
}
.lowered__mark::after {
  content: ""; position: absolute;
  inset-block-start: .72em; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px;
  background: var(--clay); opacity: .28;
  transition: opacity .45s var(--ease);
}

@media (hover: hover) {
  .lowered__row:hover { background: rgba(196, 112, 60, 0.035); }
  .lowered__row:hover .lowered__was { color: var(--paper-2); }
  .lowered__row:hover .lowered__mark::before { opacity: 1; block-size: 1em; }
  .lowered__row:hover .lowered__mark::after { opacity: .6; }
}

@media (min-width: 900px) {
  /* Wide enough to set the name against the reduction rather than above it.
     The name column is fixed, so all seven align and the repetition reads. */
  .lowered__row {
    display: grid;
    grid-template-columns: minmax(150px, 22%) 1fr;
    gap: clamp(20px, 3vw, 46px);
    align-items: start;
  }
  .lowered__was { margin-block-start: .38em; }
}

/* --- The convergence chain ------------------------------------------ */

.chain--wrap { gap: 10px 0; }
.chain--wrap li > span { white-space: normal; max-inline-size: 30ch; }
.chain--wrap li > span.is-end { color: var(--clay); border-color: rgba(196,112,60,.42); }

/* --- Pull quotes ------------------------------------------------------ */

/* Two lines in the passage carry it. They are set as statements, not as
   decorated paragraphs: display type, room around them, and a single rule
   that marks where the argument turns. */
/* The measure sits on the <p>, not here: `ch` is resolved against the
   font-size of the element the rule is on, and this wrapper is set in body
   text while its child is display scale. A measure on the wrapper silently
   collapses the quote to a fraction of its intended width. */
.thesis--major {
  margin-block: clamp(40px, 5.5vw, 80px) 0;
  padding-inline-start: clamp(20px, 3.2vw, 40px);
  padding-block: clamp(6px, 1vw, 12px);
  border-inline-start: 2px solid var(--signal);
  border-block: 0;
}
.thesis--major p {
  max-width: 22ch;
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(25px, 3.9vw, 48px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
/* The closing question is the one thing on the page addressed to the reader,
   so it is the one thing that carries the clay signal instead of the teal. */
.thesis--ask { border-inline-start-color: var(--clay); }
.thesis--ask p { max-width: 26ch; font-style: italic; font-size: clamp(22px, 3.2vw, 40px); }

/* --- Boundaries ------------------------------------------------------- */

/* A list of what the page refuses to claim. Drawn as a bounded field, because
   that is what it is: the edge the argument stops at. */
.limits {
  list-style: none;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px);
  border: var(--rule);
  border-radius: 2px;
  background: rgba(10, 13, 16, 0.4);
  max-width: 78ch;
  display: grid;
  gap: clamp(13px, 1.7vw, 19px);
}
.limits li {
  position: relative;
  padding-inline-start: 30px;
  color: var(--muted);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.62;
  text-wrap: pretty;
}
/* A struck mark, not a bullet: each line is a claim withheld. */
.limits li::before {
  content: ""; position: absolute;
  inset-block-start: .72em; inset-inline-start: 0;
  inline-size: 15px; block-size: 1px;
  background: var(--muted-2);
}

/* --- Per-script adjustments ------------------------------------------ */

/* Latin display sizes are tuned to Newsreader. The other scripts carry more
   ink per glyph and need their own leading, or the headline sets solid. */
[lang="zh"] .open__h, [lang="zh"] .thesis--major p { line-height: 1.26; letter-spacing: .01em; }
[lang="zh"] .lowered__term { line-height: 1.3; letter-spacing: .01em; }
[lang="ur"] .open__h { line-height: 1.7; }
[lang="ur"] .thesis--major p { line-height: 1.9; }
[lang="ur"] .lowered__term { line-height: 1.6; }
[lang="ar"] .open__h, [lang="ar"] .thesis--major p { line-height: 1.4; }
[lang="ar"] .lowered__term { line-height: 1.35; }
[lang="hi"] .open__h, [lang="bn"] .open__h { line-height: 1.22; }
[lang="hi"] .lowered__term, [lang="bn"] .lowered__term { line-height: 1.32; }
/* Italic is a Latin convention; the other scripts have no true italic and a
   browser would synthesise a slant. */
[lang="zh"] .thesis--ask p, [lang="ar"] .thesis--ask p,
[lang="ur"] .thesis--ask p, [lang="bn"] .thesis--ask p,
[lang="hi"] .thesis--ask p, [lang="ru"] .thesis--ask p { font-style: normal; }
/* Measures set in characters are calibrated to Latin; scripts that pack more
   meaning per character need fewer of them, not the same count. Each one goes
   on the element that carries the type — a `ch` measure is resolved against
   the font-size of the element the rule is on, so putting one on a wrapper set
   in body text collapses display type to a fraction of its width. */
[lang="zh"] .open__claim { max-width: 24ch; }
[lang="zh"] .open__h { max-width: 11ch; }
[lang="zh"] .thesis--major p { max-width: 16ch; }
[lang="zh"] .ask .thesis--ask p { max-width: 20ch; }

/* ---------- 23. The challenge page: light and depth ----------
   The page argues about a failure, so none of this is allowed to make it look
   like a product. What it adds is room, a light source, and one piece of
   motion that carries the thesis. Everything below degrades to plain readable
   type with no script, no canvas and no motion. */

/* --- The opening field ------------------------------------------------ */

.field { position: relative; isolation: isolate; overflow: hidden; }
.field__body { position: relative; z-index: 2; }

.field__canvas {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  z-index: 0; display: block;
  pointer-events: none;
}

/* Type never sits on a moving point. The veil is heaviest where the words are
   and clears toward the far edge, so the field is present without competing. */
.field__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 92% at 18% 46%, var(--ink) 30%, rgba(7,9,11,.82) 52%, rgba(7,9,11,.18) 84%, rgba(7,9,11,0) 100%),
    linear-gradient(to bottom, rgba(7,9,11,.55) 0%, rgba(7,9,11,0) 26%, rgba(7,9,11,0) 72%, var(--ink) 100%);
}
[dir="rtl"] .field__veil {
  background:
    radial-gradient(120% 92% at 82% 46%, var(--ink) 30%, rgba(7,9,11,.82) 52%, rgba(7,9,11,.18) 84%, rgba(7,9,11,0) 100%),
    linear-gradient(to bottom, rgba(7,9,11,.55) 0%, rgba(7,9,11,0) 26%, rgba(7,9,11,0) 72%, var(--ink) 100%);
}

/* Room. The opening is the one place on the site that is allowed to be mostly
   empty, and the emptiness is doing the work. */
.phead--challenge {
  padding-block: clamp(56px, 11vh, 132px) clamp(72px, 12vh, 150px);
  min-block-size: min(88vh, 860px);
  display: flex; align-items: center;
}
.phead--challenge > .wrap { inline-size: 100%; }

/* A light behind the headline rather than on it: the type stays the same ink
   it is everywhere else, and the ground under it lifts. */
.open { position: relative; }
.open::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -22%; inset-inline-start: -14%;
  inline-size: 78%; block-size: 150%;
  background: radial-gradient(60% 50% at 30% 42%, rgba(127,181,169,.085), rgba(127,181,169,0) 72%);
  pointer-events: none;
}

.open__h { position: relative; }
.open__h::after {
  /* A single held breath of light at the end of the line. */
  content: ""; position: absolute;
  inset-block-end: .22em; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px;
  background: linear-gradient(to right, rgba(127,181,169,.28), rgba(127,181,169,0) 62%);
  opacity: 0; transform: scaleX(.2); transform-origin: left;
  transition: opacity 1.4s var(--ease) .5s, transform 1.8s var(--ease) .5s;
}
[dir="rtl"] .open__h::after { transform-origin: right; background: linear-gradient(to left, rgba(127,181,169,.28), rgba(127,181,169,0) 62%); }
.has-js .open__h.is-in::after { opacity: 1; transform: scaleX(1); }

/* --- The mark that draws itself --------------------------------------- */

/* The stroke grows downward as the row arrives, so the lowering happens in
   front of the reader rather than having already happened. With no script the
   row simply arrives drawn, which says the same thing more quietly. */
.has-js .lowered__mark::before { block-size: 0; }
.has-js .lowered.is-in .lowered__mark::before { block-size: .72em; }
.has-js .lowered__mark::before { transition: block-size .9s var(--ease), opacity .45s var(--ease); }
.has-js .lowered__mark::after { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .35s, opacity .45s var(--ease); }
[dir="rtl"] .has-js .lowered__mark::after { transform-origin: right; }
.has-js .lowered.is-in .lowered__mark::after { transform: scaleX(1); }

/* Each row a beat behind the one above, so the seven read as a sequence of the
   same event rather than one block of seven. */
.has-js .lowered.is-in .lowered__row:nth-child(1) .lowered__mark::before { transition-delay: .05s; }
.has-js .lowered.is-in .lowered__row:nth-child(2) .lowered__mark::before { transition-delay: .13s; }
.has-js .lowered.is-in .lowered__row:nth-child(3) .lowered__mark::before { transition-delay: .21s; }
.has-js .lowered.is-in .lowered__row:nth-child(4) .lowered__mark::before { transition-delay: .29s; }
.has-js .lowered.is-in .lowered__row:nth-child(5) .lowered__mark::before { transition-delay: .37s; }
.has-js .lowered.is-in .lowered__row:nth-child(6) .lowered__mark::before { transition-delay: .45s; }
.has-js .lowered.is-in .lowered__row:nth-child(7) .lowered__mark::before { transition-delay: .53s; }

/* --- The question, given ground --------------------------------------- */

/* One sentence, one screen, nothing else on it. The page has spent six
   sections describing a situation; this is where it turns and asks. */
.ask {
  position: relative;
  min-block-size: min(72vh, 680px);
  display: flex; align-items: center;
  border-block-start: var(--rule);
  border-block-end: var(--rule);
  background:
    radial-gradient(76% 58% at 50% 50%, rgba(196,112,60,.055), rgba(196,112,60,0) 70%),
    var(--ink-1);
  padding-block: clamp(64px, 10vh, 120px);
}
.ask > .wrap { inline-size: 100%; }
.ask .thesis--ask {
  margin-block: 0;
  border-inline-start-width: 3px;
}
.ask .thesis--ask p {
  max-width: 30ch;
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.16;
}

/* --- Rhythm ------------------------------------------------------------ */

/* More air between sections than the rest of the site carries. This page is
   read straight through, not scanned, and the pauses are part of the reading. */
#challenge-doc .section { padding-block: clamp(62px, 9vh, 128px); }

@media (max-width: 720px) {
  .phead--challenge { min-block-size: auto; padding-block: clamp(30px, 6vh, 56px) clamp(48px, 8vh, 80px); }
  .ask { min-block-size: auto; padding-block: clamp(56px, 9vh, 84px); }
  .ask .thesis--ask p { max-width: none; }
}

/* Under reduced motion nothing animates and nothing is hidden waiting to. */
@media (prefers-reduced-motion: reduce) {
  .has-js .open__h::after { opacity: 1; transform: none; transition: none; }
  .has-js .lowered__mark::before { block-size: .72em; transition: none; }
  .has-js .lowered__mark::after { transform: none; transition: none; }
}