/* ============================================================
   GENERALISE: quantitative AI studio
   Design language: typeset rigor. A mathematical paper crossed
   with a precision instrument, restrained for B2B:
     · Source Serif 4 for display and every paragraph (it descends
       from Fournier's 18th-century French types); IBM Plex Sans
       for the interface; IBM Plex Mono for data and labels; KaTeX
       for math
     · the hero's equations are KaTeX HTML, pre-rendered into the
       page (fonts in assets/katex/) and numbered the way a paper
       numbers them; the footer's formula is TeX output outlined
       to SVG (assets/generalisation-error.svg)
     · Fig. 1 in the hero is a real plot: axes, ticks, labelled
       quantiles and a caption, drawn live as an online forecast
     · every page is paper and ink: flat fills, 1px rules (focus
       rings are 2 or 3px, the keycap's lower edge 2px), radii of
       8px or less (status dots are round), one blue accent family
       (--accent, --accent-2, --cta, --cta-hover) beside semantic
       red (misses, a down system) and green (live status, a sent
       brief), and a single elevation (--elev-1, a 1px contact
       shadow); there is no backdrop blur, and the four products
       share the one accent
     · CSS gradients only draw the graph-paper grid, the brace under
       the hero headline and the thesis figure's edge mask
     · eyebrows, metric labels and category tags are uppercase IBM
       Plex Mono; chips are Plex Mono in the case they are written
       in; headline figures use lining tabular numerals
     · kept from the earlier design: the thesis figure's bloom, its
       blue-to-violet curve and its soft glow (a canvas: its palette
       is the --tc-* tokens, and its curve colors are SPEC in app.js)
     · motion communicates state (Fig. 1 quickens while a visitor
       composes a brief); springs (linear()) settle surfaces
   Dual theme: LIGHT by default; DARK applied automatically via
   @media (prefers-color-scheme: dark), following the OS.
   ============================================================ */

/* Arrows, the infinity sign and lowercase Greek come from TeX: the text
   faces lack them, and the browser otherwise borrows each from a system
   font. The files are cut with pyftsubset: 12 glyphs of KaTeX_Main
   (1.6 KB each) and the 25 math-italic Greek letters of KaTeX_Math
   (3.6-3.8 KB each); unicode-range keeps each face off every other
   character, so a page downloads a file only when it uses one of them. */
@font-face {
  font-family: "TeX Symbols"; font-weight: 100 500; font-display: swap;
  src: url("/assets/katex/fonts/KaTeX_Main-Regular.symbols.woff2?v=2") format("woff2");
  unicode-range: U+2190-2199, U+21A9, U+221E, U+2200, U+2202;
}
@font-face {
  font-family: "TeX Symbols"; font-weight: 600 900; font-display: swap;
  src: url("/assets/katex/fonts/KaTeX_Main-Bold.symbols.woff2?v=2") format("woff2");
  unicode-range: U+2190-2199, U+21A9, U+221E, U+2200, U+2202;
}
@font-face {
  font-family: "TeX Symbols"; font-weight: 100 500; font-display: swap;
  src: url("/assets/katex/fonts/KaTeX_Math-Italic.greek.woff2") format("woff2");
  unicode-range: U+03B1-03C9;
}
@font-face {
  font-family: "TeX Symbols"; font-weight: 600 900; font-display: swap;
  src: url("/assets/katex/fonts/KaTeX_Math-BoldItalic.greek.woff2") format("woff2");
  unicode-range: U+03B1-03C9;
}

/* ---- Theme-agnostic tokens -------------------------------- */
:root {
  /* serif for display, grotesk for body, mono for data, KaTeX for math */
  --serif:   "TeX Symbols", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --display: var(--serif);
  --sans:    "TeX Symbols", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "TeX Symbols", "IBM Plex Mono", ui-monospace, monospace;
  --math:    KaTeX_Main, var(--serif);
  /* running text is set like a paper: the serif at its text optical size */
  --text:    var(--serif);

  /* solid CTA ink: white text passes AA on both (6.9:1 and 5.3:1) */
  --cta:       #2547E0;
  --cta-hover: #1C39C4;

  --maxw: 1400px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --sec: clamp(5rem, 11vw, 9.5rem);
  --r: 8px;

  /* Neural-Expressive motion: damped-spring easings. Beziers are the
     fallback; real linear() spring curves land via @supports below.
     soft = reveals (no perceptible overshoot) · snap = surfaces/hover
     (~6% progress overshoot) · pop = micro presses (crisp settle). */
  --spring-soft: cubic-bezier(.2,.7,.2,1);
  --spring-snap: cubic-bezier(.2,.7,.3,1);
  --spring-pop:  cubic-bezier(.2,.7,.3,1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-soft: linear(0, 0.0891, 0.2649, 0.4514, 0.6124, 0.7412, 0.8356, 0.901, 0.9436, 0.9707, 0.9868, 0.9956, 1.0001, 1.0021, 1.0026, 1.0024, 1.002, 1.0015, 1.0011, 1.0007, 1.0005, 1.0003, 1);
    --spring-snap: linear(0, 0.0954, 0.2893, 0.511, 0.7056, 0.8603, 0.9641, 1.027, 1.0559, 1.0628, 1.0564, 1.0441, 1.0302, 1.0181, 1.0085, 1.0021, 0.9982, 0.9964, 0.9961, 0.9965, 0.9973, 0.9981, 1);
    --spring-pop:  linear(0, 0.1172, 0.3465, 0.5948, 0.7972, 0.9427, 1.0265, 1.065, 1.0716, 1.0613, 1.0439, 1.0267, 1.0124, 1.0029, 0.9974, 0.9951, 0.9949, 0.9958, 1);
  }
}

/* ---- LIGHT (default) --------------------------------------
   Theme follows the OS setting (prefers-color-scheme); there is
   no manual toggle. Token roles (names kept stable across themes
   so component rules don't change): --ink = page surface,
   --ink-2 = alt band, --panel/-2 = raised surfaces, --bone =
   the one text colour (no grey text: hierarchy comes from size,
   weight, face and case; links and emphasis use --accent), --wash-* =
   subtle raised/hover fills, --fig-* = Fig. 1 plot palette. */
:root {
  --ink:      #F7F7FA;
  --ink-2:    #EEEEF4;
  --panel:    #FFFFFF;
  --panel-2:  #FFFFFF;

  --line:        rgba(22, 18, 52, 0.12);
  --line-2:      rgba(22, 18, 52, 0.06);
  --line-strong: rgba(22, 18, 52, 0.20);

  --wash-1: rgba(36, 28, 90, 0.03);
  --wash-2: rgba(36, 28, 90, 0.05);
  --wash-3: rgba(36, 28, 90, 0.07);
  --wash-4: rgba(36, 28, 90, 0.10);

  /* deep-indigo ink, tied to the blue/purple primary; strong contrast */
  --bone:  #131127;

  /* PRIMARY: deep blue, with only a hint of violet */
  --accent:     #2547E0;
  --accent-2:   #4B49E6;
  --accent-dim: rgba(37, 71, 224, 0.12);

  /* semantic: green = live, red = down. Each is 5.0:1 or more on --ink */
  --good: #087A54;
  --bad:  #C23542;

  /* the only shadow: a 1px contact edge under a raised plane */
  --elev-1: 0 1px 2px rgba(24, 20, 60, 0.08);

  /* Fig. 1 plot: ink for axes and data, blue ink for the model */
  --fig-axis:   rgba(19, 17, 39, 0.62);
  --fig-grid:   rgba(19, 17, 39, 0.075);
  --fig-label:  #131127;
  --fig-future: rgba(37, 71, 224, 0.035);
  --fig-band80: rgba(37, 71, 224, 0.11);
  --fig-band50: rgba(37, 71, 224, 0.15);
  --fig-edge:   rgba(37, 71, 224, 0.50);
  --fig-median: #2547E0;
  --fig-path:   rgba(37, 71, 224, 0.15);
  --fig-bar:    rgba(37, 71, 224, 0.34);
  --fig-line:   rgba(19, 17, 39, 0.42);
  --fig-obs:    #131127;
  --fig-miss:   #D6404D;
  --fig-cross:  rgba(19, 17, 39, 0.38);

  /* thesis "sampling bloom" canvas — point estimate → distribution */
  --tc-axis:       rgba(37, 71, 224, 0.50);
  --tc-point:      #2547E0;
  --tc-sample:     rgba(75, 73, 230, 0.62);
  --tc-bar:        rgba(75, 73, 230, 0.20);
  --tc-band:       rgba(75, 73, 230, 0.14);
  --tc-mean:       #2547E0;
  --tc-mean-glow:  rgba(37, 71, 224, 0.55);
  --tc-curve-lift: 1;

  color-scheme: light;
}

/* ---- DARK (applied automatically when the OS is in dark mode) ---- */
@media (prefers-color-scheme: dark) {
 :root {
  --ink:      #08070F;
  --ink-2:    #0C0B17;
  --panel:    #111022;
  --panel-2:  #16142B;

  --line:        rgba(186, 188, 255, 0.10);
  --line-2:      rgba(186, 188, 255, 0.055);
  --line-strong: rgba(186, 188, 255, 0.18);

  --wash-1: rgba(190, 188, 255, 0.018);
  --wash-2: rgba(190, 188, 255, 0.03);
  --wash-3: rgba(190, 188, 255, 0.05);
  --wash-4: rgba(190, 188, 255, 0.075);

  --bone:  #ECEBFA;

  /* PRIMARY: luminous deep blue, with only a hint of violet */
  --accent:     #5C7CFF;
  --accent-2:   #8580FF;
  --accent-dim: rgba(92, 124, 255, 0.16);

  --good: #34C98A;
  --bad:  #EF5B6B;

  --cta:       #3D5BF0;
  --cta-hover: #4F6BF5;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.50);

  --fig-axis:   rgba(236, 235, 250, 0.60);
  --fig-grid:   rgba(186, 188, 255, 0.085);
  --fig-label:  #ECEBFA;
  --fig-future: rgba(92, 124, 255, 0.05);
  --fig-band80: rgba(92, 124, 255, 0.15);
  --fig-band50: rgba(92, 124, 255, 0.19);
  --fig-edge:   rgba(128, 152, 255, 0.62);
  --fig-median: #8FA6FF;
  --fig-path:   rgba(128, 152, 255, 0.19);
  --fig-bar:    rgba(128, 152, 255, 0.42);
  --fig-line:   rgba(236, 235, 250, 0.42);
  --fig-obs:    #ECEBFA;
  --fig-miss:   #EF5B6B;
  --fig-cross:  rgba(236, 235, 250, 0.36);

  /* thesis "sampling bloom" canvas — point estimate → distribution */
  --tc-axis:       rgba(108, 140, 255, 0.52);
  --tc-point:      #6C8CFF;
  --tc-sample:     rgba(133, 128, 255, 0.70);
  --tc-bar:        rgba(133, 128, 255, 0.24);
  --tc-band:       rgba(133, 128, 255, 0.17);
  --tc-mean:       #C7D0FF;
  --tc-mean-glow:  #5C7CFF;
  --tc-curve-lift: 1.22;

  color-scheme: dark;
 }
}

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

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* faint coordinate grid: the page is graph paper */
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: center top, center top;
  background-attachment: fixed, fixed;
  transition: background-color .45s ease, color .45s ease;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--bone); }

img, svg { display: block; max-width: 100%; }

/* Type roles: the serif sets every paragraph a reader reads; Plex Sans sets
   the interface (navigation, buttons, the brief field, proof lines); Plex
   Mono sets data and labels. Source Serif 4 has a smaller x-height than the
   sans, so prose sizes run about 5% larger than the interface sizes. */
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.hero__lede, .section__sub, .thesis__body, .cap p, .feat__desc,
.step p, .pr p, .ethos__body p, .contact__sub, .fig__cap, .plate__cap,
.cs__cols p, .cs__cols li, .csp__cta p, .mth__intro, .mth__sec p, .mth__refs li {
  font-family: var(--text); letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }

/* keyboard focus: one ring in the accent, everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Shared bits ------------------------------------------ */
/* refined label: clean sans small-caps, never washed out */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow__num {
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0.15em 0.5em;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* emphasis in headings: serif italic in blue ink, like a defined
   term in a paper. .grad-text keeps its name for status.html. */
.grad-text,
.hero__title em,
.section__title em,
.thesis__statement em,
.contact__title em {
  color: var(--accent);
  font-style: italic;
}

/* buttons */
.btn {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.7em 1.3em; border-radius: 6px;
  border: 1px solid var(--line-strong);
  color: var(--bone); cursor: pointer;
  transition: transform .45s var(--spring-snap), background .25s, border-color .25s, color .25s;
}
.btn svg { transition: transform .45s var(--spring-snap); }
.btn:hover { transform: translateY(-1px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--grad { /* solid ink fill; the class name predates the flat style */
  background: var(--cta); color: #fff; border-color: transparent;
}
.btn--grad:hover { color: #fff; background: var(--cta-hover); }
.btn--lg { padding: 0.9em 1.5em; font-size: 0.98rem; }

/* status pill */
.status {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--bone); display: inline-flex; align-items: center; gap: 0.5em;
}
.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Nav --------------------------------------------------- */
/* the bar is the page's own paper, ruled off by a hairline that
   darkens once content scrolls beneath it */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background .35s, border-color .35s;
}
.nav.is-stuck { border-bottom-color: var(--line-strong); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0.95rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.55em; }
.brand__mark { flex: none; color: var(--accent); }
.brand__name {
  font-family: var(--sans); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -0.02em; color: var(--bone);
}
.brand__sys { font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: 0.1rem; }

/* top-level items: direct links + dropdown triggers */
.navitem { position: relative; }
.navitem__link, .navitem__btn {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.006em;
  color: var(--bone); padding: 0.55em 0.8em; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 0.32em;
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .2s, background .2s;
}
.navitem__link:hover, .navitem__btn:hover,
.navitem.is-open .navitem__btn { color: var(--bone); background: var(--wash-3); }
.navitem__chev { opacity: 0.65; transition: transform .25s ease; }
.navitem.is-open .navitem__chev { transform: rotate(180deg); }
.navitem__cta { display: none; }  /* in-drawer CTA — mobile only */

/* mega-menu panel */
.megamenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  width: min(30rem, 86vw); padding: 0.5rem; display: grid; gap: 0.1rem;
  background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: var(--elev-1);
  opacity: 0; transform: translateY(6px); transform-origin: top left; pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--spring-snap);
}
.navitem.is-open .megamenu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mm__link { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.7rem; border-radius: 4px; transition: background .2s; }
.mm__link:hover { background: var(--wash-2); }
/* icons are drawn in ink inside a hairline square, like a figure key */
.mm__ic {
  flex: none; width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center;
  color: var(--bone); border: 1px solid var(--line-strong);
  transition: color .2s, border-color .2s;
}
.mm__link:hover .mm__ic { color: var(--accent); border-color: var(--accent); }
.mm__ic svg { width: 18px; height: 18px; }
.mm__tx { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.mm__tx b { font-size: 0.92rem; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.35em; }
.mm__tx small { font-size: 0.8rem; font-weight: 400; line-height: 1.42; color: var(--bone); }

/* Industries: a two-column key of eight industries, numbered like table
   rows, under a lead link to Table 1 */
.mm__ic--n { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mm__link--all { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .megamenu--ind {
    --mmw: min(42rem, calc(100vw - 2rem));
    width: var(--mmw); grid-template-columns: 1fr 1fr;
    left: 50%; margin-left: calc(var(--mmw) / -2);
  }
  .mm__link--all { margin-bottom: 0.3rem; border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; }
}

/* hamburger — mobile only */
.nav__toggle {
  display: none; flex: none; width: 40px; height: 38px; border-radius: 6px; cursor: pointer;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: transparent; color: var(--bone);
  transition: background .2s, border-color .2s;
}
.nav__toggle:hover { background: var(--wash-3); }
.nav__bars { position: relative; width: 18px; height: 12px; }
.nav__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.nav__bars i:nth-child(1) { top: 0; }
.nav__bars i:nth-child(2) { top: 5px; }
.nav__bars i:nth-child(3) { top: 10px; }
.nav.is-open .nav__bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav.is-open .nav__bars i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.nav__right { display: flex; align-items: center; gap: 0.9rem; }

/* clickable "systems live" status pill → status page (hero / footer) */
a.status { transition: color .2s; }
a.status:hover { color: var(--bone); }
a.status:hover .status__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 26%, transparent); }

@media (max-width: 860px) {
  .nav__cta { display: none; }            /* bar CTA hidden; drawer CTA shows */
  .nav__toggle { display: inline-flex; }

  .nav.is-open { border-bottom-color: var(--line); }

  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.05rem;
    padding: 0.6rem var(--gut) 1.4rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line-strong);
    max-height: calc(100svh - 62px); overflow-y: auto;
  }
  .nav.is-open .nav__links { display: flex; }

  .navitem { width: 100%; }
  .navitem__btn { width: 100%; justify-content: space-between; font-size: 1rem; padding: 0.85em 0.6em; color: var(--bone); }
  .navitem__btn:hover, .navitem.is-open .navitem__btn { background: transparent; }
  .navitem__link { font-size: 1rem; padding: 0.85em 0.6em; }
  .navitem__chev { display: none; }

  /* megamenus are expanded inline within the drawer */
  .megamenu {
    position: static; width: auto; opacity: 1; transform: none; pointer-events: auto;
    display: grid; padding: 0 0 0.5rem 0.5rem; margin: -0.2rem 0 0.5rem 0.55rem;
    background: transparent;
    border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .mm__link { padding: 0.55rem 0.55rem; }
  .mm__ic { width: 30px; height: 30px; }

  .navitem__cta { display: inline-flex; justify-content: center; margin-top: 0.9rem; }
}

/* ---- Hero -------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7.25rem var(--gut) 4.5rem;
  max-width: var(--maxw); margin: 0 auto;
  isolation: isolate;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; width: 100%;
}
.hero__content { max-width: 38rem; }
@media (max-width: 1023px) {
  .hero { padding-top: 6.75rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__content { max-width: 40rem; }
}

.hero__title {
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(2.55rem, 1.35rem + 3.1vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  /* room for the underbrace and its label below the last line: the
     brace hangs ~0.37em under the line box, the label ~1.6rem more */
  margin-bottom: calc(0.37em + 2.7rem);
}

/* TeX's \underbrace under "generalises", annotated with the gap it
   closes: training error meeting error on unseen data. Each half is three mask pieces (a curl, a tip, and a
   rule between them), so the curls keep their shape at any width. */
.brace-word { position: relative; white-space: nowrap; }
.brace {
  --curl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0.7 0C0.7 3.6 2.6 5.3 7 5.3H10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --tip:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 5.3H3C7.4 5.3 10 6.9 10 11.4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  position: absolute; left: 0.03em; right: 0.02em; top: calc(100% - 0.02em);
  height: 0.24em; display: flex; color: var(--bone); pointer-events: none;
}
.brace::before, .brace::after {
  content: ""; flex: 1 1 50%; background: currentColor;
  -webkit-mask: var(--curl) left top / 0.2em 100% no-repeat,
                var(--tip) right top / 0.2em 100% no-repeat,
                linear-gradient(#000 0 0) 0.19em 0.092em / calc(100% - 0.38em) 0.028em no-repeat;
          mask: var(--curl) left top / 0.2em 100% no-repeat,
                var(--tip) right top / 0.2em 100% no-repeat,
                linear-gradient(#000 0 0) 0.19em 0.092em / calc(100% - 0.38em) 0.028em no-repeat;
}
.brace::after { transform: scaleX(-1); }
.brace__label {
  position: absolute; left: 50%; top: calc(100% + 0.3rem); transform: translateX(-50%);
  font-size: clamp(0.8rem, 0.72rem + 0.22vw, 0.95rem); font-style: normal; font-weight: 400;
  letter-spacing: 0; line-height: 1; color: var(--bone); white-space: nowrap;
}
.brace__label .katex { font-size: 1.12em; }

.hero__lede {
  max-width: 36rem; color: var(--bone);
  font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem); line-height: 1.5; font-weight: 400;
}
.hero__lede strong { color: var(--bone); font-weight: 600; }

/* the brief field: a labelled input with a square send key */
.prompt {
  position: relative; display: flex; align-items: center;
  margin-top: 2rem; max-width: 34rem; min-height: 3.25rem; padding: 0.3rem;
  border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); box-shadow: var(--elev-1);
  transition: border-color .2s, box-shadow .2s;
}
.prompt:focus-within,
.prompt.is-thinking {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--accent-dim), var(--elev-1);
}
.prompt.is-sent {
  border-color: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 16%, transparent), var(--elev-1);
}
/* field label, as on a form: "Brief", then "Email" once the brief is in */
.prompt__icon {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding: 0 0.8rem 0 0.65rem; margin-right: 0.85rem; border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
}
.prompt__icon::before { content: "Brief"; }
.prompt.is-await-email .prompt__icon::before { content: "Email"; }
@media (max-width: 480px) {
  .prompt__icon { display: none; }
  .prompt { padding-left: 0.85rem; }
}
/* 1rem is the floor: iOS zooms the page into any field set smaller than 16px */
.prompt__field {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; text-overflow: ellipsis;
  font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--bone); letter-spacing: -0.01em;
}
.prompt__field::placeholder { color: var(--bone); font-weight: 400; }
.prompt__send {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 6px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--cta);
  transition: background .2s, transform .2s var(--spring-pop);
}
.prompt__send svg { transition: transform .2s; }
.prompt__send:hover { background: var(--cta-hover); }
.prompt__send:hover svg { transform: translateX(2px); }
.prompt__send:active { transform: scale(0.95); }
.prompt__send:disabled { opacity: 0.5; cursor: default; }
.prompt__hint {
  margin-top: 0.75rem; font-family: var(--sans); font-size: 0.84rem; font-weight: 400;
  letter-spacing: -0.005em; color: var(--bone); display: inline-flex; align-items: center; gap: 0.55em;
}
.kbd {
  font-family: var(--mono); font-size: 0.74em; color: var(--bone);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: 0.1em 0.45em; line-height: 1;
}

.hero__sub { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.7rem; }
.hero__explore {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.006em; color: var(--bone);
  display: inline-flex; align-items: center; gap: 0.45em;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: color .2s, border-color .2s, gap .2s;
}
.hero__explore svg { transition: transform .2s; }
.hero__explore:hover { color: var(--accent-2); border-bottom-color: var(--accent); }
.hero__explore:hover svg { transform: translateX(3px); }

/* namesake, typeset: generalisation error as a colophon */
.hero__readout {
  position: absolute; right: var(--gut); bottom: 1.2rem; z-index: -1;
  font-size: 0.78rem; color: var(--bone);
}
@media (max-width: 1023px) { .hero__readout { display: none; } }

/* ---- Fig. 1: five problems in one panel ------------------------
   A plot panel with problem tabs, a head, the canvas, and per
   problem a stats strip, numbered equations and a caption. The
   picture is the no-JS frame of Fig. 1a; the canvas cross-fades in
   once app.js paints it. */
.fig {
  margin: 0; min-width: 0; container-type: inline-size;
  padding: clamp(0.95rem, 1.5vw, 1.3rem) clamp(1rem, 1.7vw, 1.45rem) clamp(1rem, 1.5vw, 1.25rem);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--elev-1);
}
.fig__head { display: flex; align-items: baseline; gap: 0.7rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); }
.fig__label { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.fig__title { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--bone); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fig__tag {
  margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
  border: 1px solid var(--line-strong); border-radius: 3px; padding: 0.18em 0.5em;
}
/* the one-row head needs about 322px; a narrower panel sets the title on
   its own row under the figure number and the tag */
@container (max-width: 360px) {
  .fig__head { display: grid; grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .fig__title { grid-row: 2; grid-column: 1 / -1; white-space: normal; }
}
.fig__plot { position: relative; aspect-ratio: 16 / 9; margin: 0.85rem 0 0.35rem; }
.fig__canvas, .fig__fallback, .fig__fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig__fallback img { object-fit: contain; }
.fig__canvas { opacity: 0; transition: opacity .5s ease; touch-action: pan-y; cursor: crosshair; }
.fig.has-canvas .fig__canvas { opacity: 1; }
.fig.has-canvas .fig__fallback { visibility: hidden; }

.fig__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fig__stats > div { padding: 0.5rem 0.75rem 0.55rem; border-left: 1px solid var(--line-2); min-width: 0; }
.fig__stats > div:first-child { border-left: 0; padding-left: 0; }
.fig__stats dt { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); }
.fig__stats dd { margin: 0.25rem 0 0; display: flex; align-items: baseline; gap: 0.32em; font-size: 0.92rem; color: var(--bone); white-space: nowrap; }
.fig__stats output { font-family: var(--mono); font-size: 0.84rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fig__eq-sign { font-family: var(--math); color: var(--bone); }
/* padding-inline: KaTeX ends the tag column with a 2px spacer that hangs
   past its box (.vlist-t2 margin-right: -2px), which would scroll the box */
.fig__eqs { margin-top: 0.15rem; padding-inline: 2px; font-size: 0.9rem; color: var(--bone); overflow-x: auto; overflow-y: hidden; }
.fig__eqs .katex-display { margin: 0.55em 0 0.45em; }
.fig__cap { font-size: 0.9rem; line-height: 1.5; color: var(--bone); }
.fig__cap b { font-weight: 600; color: var(--bone); }

/* the problem tabs: the selected tab's underline fills over --fig-dwell and
   app.js then opens the next tab; a visitor's pick (.is-manual), reduced
   motion, the pointer or focus on the figure, or an off-screen hero
   (.is-off) stops or holds that */
.fig { --fig-dwell: 11s; }
.fig__tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
html:not(.js) .fig__tabs { display: none; }
.fig__tab {
  position: relative; overflow: hidden; cursor: pointer;
  padding: 0.3rem 0.55rem 0.36rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: transparent; color: var(--bone);
  font-family: var(--sans); font-size: 0.76rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.003em;
  transition: border-color .2s, color .2s;
}
.fig__tab:hover { border-color: var(--accent); }
.fig__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fig__tab[aria-selected="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.fig__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform-origin: left;
  animation: fig-dwell var(--fig-dwell) linear both;
}
.fig:hover .fig__tab[aria-selected="true"]::after,
.fig:focus-within .fig__tab[aria-selected="true"]::after,
.fig.is-off .fig__tab[aria-selected="true"]::after { animation-play-state: paused; }
.fig.is-manual .fig__tab[aria-selected="true"]::after { animation: none; }
@keyframes fig-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .fig__tab[aria-selected="true"]::after { animation: none; }
}

/* the panels share one grid cell, so the figure keeps the height of the
   tallest and the hero never jumps when the tab changes */
.fig__panels { display: grid; }
.fig__panel { grid-area: 1 / 1; min-width: 0; }
.fig__panel:not(.is-active) { visibility: hidden; }
html:not(.js) .fig__panel:not(.is-active) { display: none; }
.fig__plot.is-in > * { animation: fig-in .3s ease both; }
@keyframes fig-in { from { opacity: 0; } }

/* Fig. 1c: the agentic RAG diagram, three columns that light up in order */
.dia { display: none; }
.fig[data-panel="rag"] .dia {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 0.8fr 1.5fr; gap: 0 1.1rem;
  overflow: hidden; color: var(--bone);
}
.fig[data-panel="rag"] .fig__canvas { visibility: hidden; }
.dia > div { min-width: 0; }
.dia__h {
  margin-bottom: 0.4rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.dia__h ~ .dia__h { margin-top: 0.75rem; }
.dia__q { font-family: var(--serif); font-style: italic; font-size: 0.86rem; line-height: 1.35; }
.dia__subs, .dia__top, .dia__ans { list-style: none; display: grid; gap: 0.34rem; }
.dia__subs li { display: flex; gap: 0.5em; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; line-height: 1.3; }
.dia__subs i { flex: none; font-family: var(--math); color: var(--accent); }
.dia__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.dia__grid i, .dia__key i {
  position: relative; display: block; aspect-ratio: 4 / 3;
  border: 1px solid var(--line-strong); border-radius: 2px;
  transition: background-color .3s, border-color .3s;
}
.dia__grid .is-d, .dia__key .is-d { background: var(--accent-dim); }
.dia__grid .is-k, .dia__key .is-k { border-color: var(--accent); }
.dia__grid .is-top { background: var(--accent); border-color: var(--accent); }
.dia__grid .is-top::after {
  content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.55rem; font-weight: 600; color: var(--ink);
}
.dia__key {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
  font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.dia__key i { width: 0.85rem; flex: none; }
.dia__key span + i { margin-left: 0.4rem; }
.dia__top li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45em; font-family: var(--sans); font-size: 0.72rem; line-height: 1.25; }
.dia__top b { font-family: var(--mono); font-size: 0.64rem; font-weight: 600; color: var(--accent); }
.dia__top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia__top li::after {
  content: ""; grid-column: 2; height: 2px; margin-top: 3px; width: calc(var(--s, 0) * 100%);
  background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .5s ease;
}
.dia__top li.is-on::after { transform: scaleX(1); }
.dia__ans li { font-family: var(--serif); font-size: 0.78rem; line-height: 1.32; }
.dia__ans sup { margin-left: 0.25em; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; color: var(--accent); }
.dia__ans .is-out span { text-decoration: line-through; text-decoration-color: var(--bad); }
.dia__ans .is-out sup { color: var(--bad); letter-spacing: 0.08em; text-transform: uppercase; }
.dia__q, .dia__subs li, .dia__top li, .dia__ans li { opacity: 0; transform: translateY(3px); transition: opacity .35s ease, transform .35s ease; }
.dia .is-on { opacity: 1; transform: none; }
@container (max-width: 520px) {
  .fig[data-panel="rag"] .dia { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 0 0.75rem; }
  .dia__b { display: none; }
  .dia__q { font-size: 0.78rem; }
  .dia__subs li { font-size: 0.62rem; }
  .dia__top li { font-size: 0.66rem; }
  .dia__ans li { font-size: 0.68rem; line-height: 1.25; }
  .dia__h { margin-bottom: 0.3rem; }
  .dia__h ~ .dia__h { margin-top: 0.5rem; }
  .dia__subs, .dia__top, .dia__ans { gap: 0.22rem; }
  .dia__top li::after { display: none; }
}
@media (max-width: 1023px) {
  .fig { margin-top: 1rem; }
}
/* the stats strip folds to 2 × 2 whenever the panel itself is narrow */
@container (max-width: 520px) {
  .fig__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .fig__stats > div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
  .fig__plot { aspect-ratio: 4 / 3; }
  .fig__eqs { font-size: 0.8rem; }
}

/* ---- Ticker ------------------------------------------------ */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--wash-1);
  overflow: hidden; white-space: nowrap;
  padding: 1.05rem 0;
}
.ticker__track { display: inline-flex; animation: marquee 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 400; letter-spacing: -0.006em;
  color: var(--bone); padding-right: 0; display: inline-flex; gap: 0.5rem; align-items: baseline;
}
.ticker__set b { color: var(--bone); font-family: var(--mono); font-weight: 500; font-size: 0.94em; font-variant-numeric: tabular-nums; padding-left: 1.6rem; }
.ticker__set i { color: var(--accent); font-style: normal; padding-left: 0.6rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---- Sections --------------------------------------------- */
.section {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sec) var(--gut);
  position: relative;
}
.section--alt {
  max-width: none;
  background: var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section--alt > * { max-width: calc(var(--maxw) - 2 * var(--gut)); margin-left: auto; margin-right: auto; }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .eyebrow { margin-bottom: 1.25rem; }
.section__title {
  font-family: var(--display); font-weight: 560;
  font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.35rem);
  line-height: 1.08; letter-spacing: -0.018em; max-width: 32ch;
  text-wrap: balance;
}
.section__sub {
  margin-top: 1.4rem; max-width: 60ch; color: var(--bone);
  font-size: 1.12rem; line-height: 1.55;
}
.br-lg { display: none; }
@media (min-width: 760px) { .br-lg { display: inline; } }

/* ---- Thesis ------------------------------------------------ */
.thesis__grid {
  display: grid; grid-template-columns: 1fr; max-width: 40rem; gap: clamp(1.1rem, 3vw, 1.8rem);
  align-items: start; position: relative; z-index: 2;
}
.thesis__statement {
  font-family: var(--display); font-weight: 560;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem);
  line-height: 1.07; letter-spacing: -0.02em;
}
.thesis__body { display: flex; flex-direction: column; gap: 1.2rem; color: var(--bone); padding-top: 0.6rem; }
.thesis__body p { font-size: 1.12rem; line-height: 1.58; }
@media (max-width: 820px) { .thesis__grid { grid-template-columns: 1fr; } }
.thesis { position: relative; isolation: isolate; overflow: hidden; }
.thesis__inner { position: relative; }
.thesis__bg {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  right: -4%; top: 50%; transform: translateY(-50%);
  width: min(58%, 46rem); height: auto; opacity: 0.95;
  -webkit-mask-image: radial-gradient(80% 94% at 56% 50%, #000 34%, transparent 80%);
          mask-image: radial-gradient(80% 94% at 56% 50%, #000 34%, transparent 80%);
}
.thesis__body strong { color: var(--bone); font-weight: 600; }

/* live "sampling bloom" canvas — sits exactly where the JPG does and
   inherits the same soft radial mask; the JPG is the no-JS / reduced-
   motion fallback and is cross-faded out once the canvas paints. */
.thesis__field {
  position: absolute; z-index: -1; pointer-events: none;
  right: -4%; top: 50%; transform: translateY(-50%);
  width: min(58%, 46rem); aspect-ratio: 16 / 9; height: auto;
  opacity: 0; transition: opacity 0.6s ease;
  -webkit-mask-image: radial-gradient(80% 94% at 56% 50%, #000 34%, transparent 80%);
          mask-image: radial-gradient(80% 94% at 56% 50%, #000 34%, transparent 80%);
}
/* animation: none as well, since the scroll-driven thesisDrift animation
   below sets opacity and would otherwise keep the JPG under the canvas */
.thesis.has-canvas .thesis__bg    { opacity: 0; animation: none; transition: opacity 0.6s ease; }
.thesis.has-canvas .thesis__field { opacity: 1; }

@media (max-width: 860px) {
  .thesis__inner { display: flex; flex-direction: column; }
  .thesis__bg { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 34rem; margin: 1.5rem auto 0; opacity: 0.95; }
  .thesis__field {
    position: relative; right: auto; top: auto; transform: none;
    width: 100%; max-width: 34rem; margin: 1.5rem auto 0;
  }
  .thesis.has-canvas .thesis__bg { position: absolute; }
}
/* scroll-driven: the uncertainty figure drifts into focus as the
   section crosses the viewport (desktop layout only — the keyframes
   bake in the desktop translateY(-50%) centring) */
@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .thesis__bg {
      animation: thesisDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 80%;
    }
  }
}
@keyframes thesisDrift {
  from { transform: translateY(-44%) scale(1.09); opacity: 0.55; }
  to   { transform: translateY(-50%) scale(1); opacity: 0.95; }
}

/* ---- Industries: Table 1 ----------------------------------
   Industries down the side, the four questions across the top,
   each head carrying the object its answer is (a distribution, a
   calibrated band, an entailment, a decision rule) in KaTeX. A
   marked cell names the public system where that decision runs.
   Hovering a cell lights its row and its column, like a ruler laid
   on a printed table. Below 1024px the table becomes one card per
   industry, and app.js shows one at a time behind the buttons. */
#industries { --tq-hl: color-mix(in srgb, var(--accent) 4%, var(--ink)); --tq-hl-2: color-mix(in srgb, var(--accent) 9%, var(--ink)); }
.tq-fig { margin: 0; }
.tq-wrap {
  border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden;
  background: var(--ink);
}
.tq { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tq th, .tq td { text-align: left; vertical-align: top; padding: 1rem 1.15rem; transition: background .2s, color .2s; }
.tq th + th, .tq th + td, .tq td + td { border-left: 1px solid var(--line-2); }
.tq tbody tr { border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.tq thead th { padding-top: 1.25rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line-strong); }
.tq__corner { width: 18%; }
.tq__k {
  display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.tq__corner .tq__k, .tq tfoot th .tq__k { color: var(--bone); }
.tq__q {
  display: block; margin-top: 0.45rem; font-family: var(--display); font-size: 1.14rem;
  font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--bone);
}
.tq__m { display: block; margin-top: 0.6rem; font-size: 0.86rem; color: var(--bone); white-space: nowrap; }
.tq tbody th {
  font-family: var(--display); font-size: 1.06rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.008em; color: var(--bone);
}
.tq tbody td { font-family: var(--text); font-size: 1rem; line-height: 1.45; color: var(--bone); }
/* the mark: a data point in the accent, then the system's name */
.tq__proof {
  display: flex; align-items: center; gap: 0.45em; width: max-content; margin-top: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--accent);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.tq__proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tq__proof:hover { border-bottom-color: var(--accent); }
.tq tfoot tr { border-top: 1px solid var(--line-strong); }
.tq tfoot th, .tq tfoot td { padding-top: 0.85rem; padding-bottom: 0.85rem; background: var(--wash-1); }
.tq__use {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.tq__use::after { content: " →"; }
.tq__use:hover { border-bottom-color: var(--accent); }
/* the ruler: row and column light up under a hovered cell; the cell itself, more */
@media (hover: hover) and (min-width: 1024px) {
  .tq tbody tr:hover > *,
  .tq:has(tbody td:nth-child(2):hover) tr > :nth-child(2),
  .tq:has(tbody td:nth-child(3):hover) tr > :nth-child(3),
  .tq:has(tbody td:nth-child(4):hover) tr > :nth-child(4),
  .tq:has(tbody td:nth-child(5):hover) tr > :nth-child(5) { background: var(--tq-hl); }
  .tq tbody td:hover { background: var(--tq-hl-2); color: var(--bone); }
  .tq tbody tr:hover > th { color: var(--accent); }
}
/* a row reached from the Industries menu */
.tq tbody tr:target > * { background: var(--tq-hl); }
.tq tbody tr:target > th { color: var(--accent); }
.tq-fig .plate__cap { margin-top: 0.9rem; max-width: 80ch; }
.tq-fig .plate__cap a { color: var(--accent); border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.tq-fig .plate__cap a:hover { border-bottom-color: var(--accent); }

/* industry buttons: narrow screens with JS only */
.tq-pick { display: none; scroll-margin-top: 5.5rem; }
@media (max-width: 1023px) {
  html.js .tq-pick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
  .tq-pick button {
    min-height: 2.3rem; padding: 0.4em 0.8em; border-radius: 3px; cursor: pointer;
    font-family: var(--mono); font-size: 0.76rem; font-weight: 500; color: var(--bone);
    background: transparent; border: 1px solid var(--line-strong);
    transition: color .2s, background .2s, border-color .2s;
  }
  .tq-pick button:hover { color: var(--bone); border-color: var(--bone); }
  .tq-pick button[aria-pressed="true"] { color: #fff; background: var(--cta); border-color: transparent; }

  /* the table as cards: one industry, its four answers under their questions */
  .tq, .tq tbody, .tq tfoot, .tq tr, .tq th, .tq td { display: block; }
  .tq thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tq tbody tr, .tq tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq tbody tr:first-child { border-top: 0; }
  .tq tbody tr + tr { border-top: 1px solid var(--line-strong); }
  html.js .tq tbody tr:not(.is-on) { display: none; }
  .tq th + th, .tq th + td, .tq td + td { border-left: 0; }
  .tq tbody th, .tq tfoot th { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .tq tbody th { font-size: 1.2rem; padding: 1.05rem 1.15rem; }
  .tq tbody td { border-top: 1px solid var(--line-2); }
  .tq tbody td:nth-of-type(even) { border-left: 1px solid var(--line-2); }
  .tq tbody td::before {
    content: attr(data-q); display: block; margin-bottom: 0.35rem;
    font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--bone);
  }
  .tq tbody tr:target > * { background: transparent; }
  .tq tfoot th { padding-bottom: 0.6rem; }
  .tq tfoot td { padding-top: 0.6rem; }
}
@media (max-width: 600px) {
  .tq tbody tr, .tq tfoot tr { grid-template-columns: minmax(0, 1fr); }
  .tq tbody td:nth-of-type(even) { border-left: 0; }
  .tq tfoot td { padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .tq tfoot td:last-child { padding-bottom: 0.9rem; }
}

/* ---- Capabilities ----------------------------------------- */
/* a ruled table of six cells: hairlines between, paper inside */
.cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line-strong); border-radius: var(--r);
  overflow: hidden;
}
.cap {
  background: var(--ink); padding: clamp(1.6rem, 2.5vw, 2.3rem);
  position: relative; transition: background .3s;
  min-height: 16rem; display: flex; flex-direction: column;
}
.cap:hover { background: var(--panel); }
.cap__idx {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--bone);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  position: absolute; top: 1.55rem; right: 1.55rem;
  transition: color .3s;
}
.cap:hover .cap__idx { color: var(--accent); }
/* glyph drawn in ink inside a hairline square, like a figure key */
.cap__glyph {
  flex: none; width: 44px; height: 44px; border-radius: 4px; margin-bottom: 1.35rem;
  display: grid; place-items: center; color: var(--bone);
  border: 1px solid var(--line-strong);
  transition: color .3s, border-color .3s;
}
.cap__glyph svg { width: 24px; height: 24px; overflow: visible; }
.cap:hover .cap__glyph { color: var(--accent); border-color: var(--accent); }
.cap h3 { font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.cap p { color: var(--bone); font-size: 1.03rem; line-height: 1.55; flex: 1; }
.cap__tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.cap__tags li {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.005em;
  color: var(--bone);
  padding: 0.32em 0.62em;
  border: 1px solid var(--line-strong); border-radius: 3px;
  transition: color .3s, border-color .3s;
}
.cap:hover .cap__tags li { color: var(--bone); }
/* deep-link targets from the Use-cases menu: clear the fixed nav, and
   ring the matched card in the accent so the landing is unmistakable */
.cap[id] { scroll-margin-top: 6rem; }
.cap:target {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

/* ---- Work / feature rows ---------------------------------- */
.work { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6.5rem); }
.feat {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center; position: relative;
}
.feat:nth-child(even) .feat__visual { order: 2; }

/* paired 2-up layout — breaks the zigzag after the first two rows */
.work__pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.work__pair .feat {
  grid-template-columns: 1fr !important;
  align-items: start; gap: 1.5rem;
}
.work__pair .feat:nth-child(even) .feat__visual { order: 0 !important; }
@media (max-width: 900px) {
  .work__pair { grid-template-columns: 1fr; }
}

/* "as of" line under the work heading: the figures below are dated */
.work__asof { font-family: var(--mono); font-size: 0.74rem; color: var(--bone); margin-top: -1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* a product screenshot set as a plate: hairline frame, an address bar
   in mono, and a numbered caption beneath */
.frame {
  border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--panel);
  box-shadow: var(--elev-1);
  transition: border-color .3s;
}
.feat:hover .frame { border-color: var(--accent); }
.frame__bar { display: flex; align-items: center; padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.frame__url {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--bone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
/* real product screenshot filling the plate (16:10 source, no crop) */
.frame__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* captions follow Fig. 1 in the hero: the label in bold, the text in mist */
.plate__cap { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.5; color: var(--bone); }
.plate__cap b { font-weight: 600; color: var(--bone); }

/* feature body */
.feat__body { display: flex; flex-direction: column; }
.feat__meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
/* labels across the site: small mono capitals */
.feat__idx { font-family: var(--mono); font-weight: 500; font-size: 0.82rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.feat__tag { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.feat__live { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.feat__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.65rem); line-height: 1.05; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.feat__pitch { font-family: var(--display); font-size: 1.3rem; color: var(--bone); margin: 0.8rem 0 0.7rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.008em; max-width: 34ch; text-wrap: balance; }
.feat__desc { color: var(--bone); font-size: 1.06rem; line-height: 1.55; max-width: 60ch; }
.feat__method { font-family: var(--sans); font-size: 0.86rem; font-weight: 400; color: var(--bone); line-height: 1.65; margin-top: 1rem; max-width: 50ch; }
.feat__method span { font-family: var(--mono); color: var(--accent); font-weight: 500; margin-right: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.84em; }
/* figures set as a ruled table row: rule above, rule below */
.feat__metrics { list-style: none; display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap; margin: 1.5rem 0; padding: 1.1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
/* equal cells, so a long label wraps inside its own column */
.feat__metrics li { flex: 1 1 0; min-width: 6.5rem; }
.feat__metrics b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.8rem; line-height: 1; letter-spacing: -0.015em; color: var(--bone); font-variant-numeric: lining-nums tabular-nums; }
.feat__metrics span { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; color: var(--bone); text-transform: uppercase; margin-top: 0.55em; display: block; }
.feat__actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.6rem; }
/* primary action: the solid ink button */
.cs-open {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.006em;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.55em; border-radius: 6px; border: 0; cursor: pointer;
  color: #fff; background: var(--cta);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s;
}
.cs-open:hover { color: #fff; background: var(--cta-hover); transform: translateY(-1px); }
/* secondary action: a ruled outline in ink */
.feat__visit {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.006em;
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.85em 1.4em; border-radius: 6px;
  color: var(--bone); border: 1px solid var(--line-strong);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s;
}
.feat__visit:hover { transform: translateY(-1px); border-color: var(--bone); }

/* shared chips: bordered mono labels */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--bone); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0.3em 0.62em; }

@media (max-width: 900px) {
  .feat, .feat:nth-child(even) { grid-template-columns: 1fr; gap: 1.75rem; }
  .feat:nth-child(even) .feat__visual { order: 0; }
}

/* ---- Case-study content (portfolio cards + /work/ pages) --
   Shared by the Selected Work cards and the standalone
   /work/<slug>/ case-study pages. (The old click-to-open modal
   was replaced by real, indexable pages.) */
.cs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.cs__eyebrow { width: 100%; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.6em; }
.cs__name { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.02em; margin: 0.4rem 0 0; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.cs__visit { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s; margin-left: auto; }
.cs__visit:hover { border-bottom-color: var(--accent); }
.cs__lede { font-family: var(--display); font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.45rem); font-weight: 400; line-height: 1.42; letter-spacing: -0.005em; color: var(--bone); margin: 1.3rem 0 2rem; max-width: 62ch; }
/* outcome figures as a ruled table row, the way a paper reports results */
.cs__outcomes { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3rem); padding: 1.2rem 0; margin: 0 0 2.2rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs__outcomes div { display: flex; flex-direction: column; }
.cs__outcomes b { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1; color: var(--bone); letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }
.cs__outcomes span { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); margin-top: 0.6em; }
/* the date the figures above were read, set like a table note */
.cs__asof { font-family: var(--mono); font-size: 0.74rem; color: var(--bone); margin: -1.5rem 0 2.2rem; }
.cs__asof a { color: inherit; border-bottom: 1px solid var(--line-strong); transition: color .2s, border-color .2s; }
.cs__asof a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.3rem, 3vw, 2.2rem) clamp(2rem, 5vw, 3.5rem); margin-bottom: 2rem; }
.cs__cols h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.cs__cols p, .cs__cols li { color: var(--bone); font-size: 1.02rem; line-height: 1.55; }
.cs__cols ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.cs__cols li { padding-left: 1.1rem; position: relative; }
/* list marker: a short ruled dash */
.cs__cols li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.5rem; height: 1px; background: var(--bone); }
.cs__cols b { color: var(--bone); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.cs__arch { font-family: var(--mono); font-size: 0.8rem; line-height: 1.9; color: var(--bone); }
@media (max-width: 680px) { .cs__cols { grid-template-columns: 1fr; } .cs__visit { margin-left: 0; width: 100%; } }

/* ---- For the enterprise ----------------------------------- */
.ent__proof { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; margin-top: 1.5rem; font-family: var(--sans); font-size: 0.86rem; font-weight: 500; color: var(--bone); }
.ent__proof span { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; font-size: 0.8em; margin-right: 0.3em; }
.ent__proof a { color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s; }
.ent__proof a:hover { border-bottom-color: var(--accent); }

/* ---- Engagement: scope → build & prove → deploy & run → learn, back to build ---- */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.step { background: var(--ink-2); padding: clamp(1.6rem, 3vw, 2.4rem); position: relative; transition: background .3s; }
/* a hovered step is ruled off in the accent: a 1px line, solid */
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent); opacity: 0; transition: opacity .3s;
}
.step:hover { background: var(--panel); }
.step:hover::before { opacity: 1; }
.step__k {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--accent);
  font-variant-numeric: tabular-nums;
  display: inline-flex; padding: 0.2em 0.55em; border: 1px solid var(--line-strong);
  border-radius: 3px; margin-bottom: 1.05rem;
  transition: background .3s, border-color .3s;
}
.step:hover .step__k { border-color: var(--accent); }
.step h3 { font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.55rem; }
.step p { color: var(--bone); font-size: 1.03rem; line-height: 1.55; }
/* step 04 closes the loop: a mono tag points back to step 02 */
.step__loop {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.1rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
@media (max-width: 1180px) { .steps { grid-template-columns: repeat(2, 1fr); } }

.engage__deploy {
  display: flex; align-items: center; gap: 0.9rem 1.1rem; flex-wrap: wrap;
  margin-top: clamp(1.4rem, 3vw, 2rem); padding: 1.05rem 1.3rem;
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.engage__label { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.chips--deploy li { font-size: 0.8rem; color: var(--bone); padding: 0.34em 0.8em; }
.engage__own { font-size: 0.92rem; color: var(--bone); margin-left: auto; }
.engage__own strong { color: var(--bone); font-weight: 600; }
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
  .engage__own { margin-left: 0; width: 100%; }
}

/* ---- Principles -------------------------------------------- */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pr { background: var(--ink-2); padding: clamp(1.6rem, 3vw, 2.6rem); position: relative; }
.pr__num {
  /* normal style: KaTeX_Math has only italic faces, so α and σ stay math italic,
     while ∂ and ∞ come from the upright KaTeX_Main face, as TeX sets them */
  font-family: KaTeX_Math, KaTeX_Main, var(--serif); font-style: normal; font-weight: 400; font-size: 2.1rem; color: var(--accent);
  display: block; margin-bottom: 1rem; line-height: 1;
}
.pr h3 { font-family: var(--display); font-size: 1.28rem; font-weight: 600; margin-bottom: 0.6rem; letter-spacing: -0.012em; }
.pr p { color: var(--bone); font-size: 1.05rem; line-height: 1.55; max-width: 54ch; }
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }

/* ---- Ethos ------------------------------------------------- */
.ethos__quote { max-width: 56rem; margin-bottom: 2.5rem; }
.ethos__quote blockquote {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.7rem); line-height: 1.24; letter-spacing: -0.012em;
  color: var(--bone);
  text-indent: -0.42em; /* hang the opening quote mark in the margin */
}
.ethos__quote figcaption { font-family: var(--sans); font-size: 0.86rem; font-weight: 500; color: var(--bone); margin-top: 1.4rem; }
.ethos__quote cite { font-family: var(--text); font-style: italic; font-weight: 400; font-size: 1.06em; }
.ethos__body { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 64rem; }
.ethos__body p { color: var(--bone); font-size: 1.12rem; line-height: 1.58; }
@media (max-width: 720px) { .ethos__body { grid-template-columns: 1fr; } }

/* ---- Contact ----------------------------------------------- */
.contact { text-align: center; }
.contact__inner { max-width: 46rem; margin: 0 auto; }
.contact .eyebrow { justify-content: center; margin-bottom: 1.6rem; }
.contact__title {
  font-family: var(--display); font-weight: 560; font-size: clamp(2.2rem, 1.3rem + 3.5vw, 4.2rem);
  line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance; /* never orphan a word — the title wraps evenly at any width */
}
.contact__sub { color: var(--bone); margin: 1.4rem auto 2.4rem; max-width: 52ch; font-size: 1.16rem; line-height: 1.55; text-wrap: balance; }
.contact__actions { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.contact .prompt { width: 100%; margin: 0 auto; text-align: left; }
.contact .prompt__hint a { color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.contact .prompt__hint a:hover { border-bottom-color: var(--accent); }

/* ---- Footer ------------------------------------------------ */
.footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) var(--gut) 2rem; position: relative; overflow: hidden; }
/* generalisation error, typeset by plain pdfTeX and outlined to SVG
   (pdftocairo -svg); the mask lets it take the theme's ink */
.footer__eq {
  font-size: clamp(1.2rem, 7vw, 4.8rem);
  height: 1.32em; /* the formula's TeX box: 13.2pt tall at 10pt */
  background: var(--bone); opacity: 0.05; margin-bottom: clamp(2rem,5vw,3.5rem);
  -webkit-mask: url("/assets/generalisation-error.svg") left center / auto 100% no-repeat;
          mask: url("/assets/generalisation-error.svg") left center / auto 100% no-repeat;
  max-width: var(--maxw); margin-left: auto; margin-right: auto; pointer-events: none; user-select: none;
}
.footer__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--line);
}
.footer__brand .brand { margin-bottom: 1rem; }
.footer__brand p { color: var(--bone); font-size: 0.95rem; max-width: 30ch; line-height: 1.6; }
.footer__col h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); margin-bottom: 1.1rem; }
.footer__col a { display: block; color: var(--bone); font-size: 0.95rem; padding: 0.3rem 0; transition: color .2s; }
.footer__col a:hover { color: var(--bone); }
.footer__bar {
  max-width: var(--maxw); margin: 1.6rem auto 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 400; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.footer__status { display: inline-flex; align-items: center; gap: 0.6em; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---- Reveal animation (progressive enhancement) -----------
   Content is VISIBLE by default. It is only hidden when JS is
   present (html.js), so a broken observer or a throttled render
   loop can never leave the page blank. A stalled-timeline
   fallback (html.no-anim, set from JS) snaps everything in. */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .85s var(--spring-soft); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: .08s; }
html.js .reveal[data-delay="2"] { transition-delay: .16s; }
html.js .reveal[data-delay="3"] { transition-delay: .24s; }
html.js .reveal[data-delay="4"] { transition-delay: .32s; }
html.js .reveal[data-delay="5"] { transition-delay: .40s; }
html.no-anim .reveal { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .status__dot { animation: none; }
  .megamenu, .navitem__chev, .nav__bars i { transition: none !important; }
  .ticker__track { animation: none; }
}

/* ============================================================
   CASE-STUDY PAGES  —  /work/<slug>/  (standalone, indexable)
   Reuses the .cs__* content classes (head/lede/outcomes/cols)
   from the portfolio section; adds page chrome + conversion.
   ============================================================ */
.csp { max-width: 960px; margin: 0 auto; padding: clamp(6.5rem, 5rem + 6vw, 9rem) var(--gut) clamp(3rem, 6vw, 5rem); }

/* sub-page nav CTA: the bar .nav__cta is hidden ≤860px (it relies on
   the mobile drawer, which sub-pages don't have) — this one stays. */
.csp-nav-cta { display: inline-flex; }

.csp__back {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  color: var(--bone); margin-bottom: 1.9rem; transition: color .2s, gap .2s;
}
.csp__back:hover { color: var(--bone); gap: 0.7em; }
.csp__back svg { transition: transform .2s; }

.csp__rule { height: 1px; border: 0; margin: 2.4rem 0 0; background: var(--line-strong); }

/* end-of-page conversion card: a ruled box on raised paper */
.csp__cta {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r); background: var(--panel);
}
.csp__cta h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); letter-spacing: -0.015em; color: var(--bone); }
.csp__cta p { color: var(--bone); margin: 0.7rem 0 1.4rem; max-width: 58ch; font-size: 1.06rem; line-height: 1.55; }

/* sibling case studies */
.csp__more { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); padding-top: 1.8rem; }
.csp__more h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); margin-bottom: 1.1rem; }
.csp__sib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.csp__sib--4 { grid-template-columns: repeat(2, 1fr); } /* use-case pages link 4 siblings → 2×2 */
.csp__sib a { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .2s, background .2s; }
.csp__sib a:hover { border-color: var(--accent); background: var(--panel); }
.csp__sib b { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--bone); letter-spacing: -0.01em; }
.csp__sib span { font-size: 0.82rem; color: var(--bone); line-height: 1.45; }
@media (max-width: 640px) { .csp__sib { grid-template-columns: 1fr; } }

/* ---- Methods page (/methods/) ----------------------------
   Deep-linkable model-family reference, numbered like the
   sections of a paper, with cited sources. */
.mth__intro { color: var(--bone); font-size: 1.08rem; line-height: 1.6; max-width: 64ch; margin: 0 0 1rem; }
.mth__intro strong { color: var(--bone); font-weight: 600; }

.mth__sec { scroll-margin-top: 5.5rem; border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 2.8rem); margin-top: clamp(2rem, 4vw, 2.8rem); }
.mth__sec__head { display: flex; align-items: baseline; gap: 0.85rem; }
.mth__k { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.mth__sec h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); letter-spacing: -0.015em; color: var(--bone); }
/* scoped under .mth__sec so the section's paragraph rule cannot resize it */
.mth__sec .mth__tagline { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0.55rem 0 1.1rem; }
.mth__sec p { color: var(--bone); font-size: 1.06rem; line-height: 1.62; max-width: 68ch; }
.mth__sec strong { color: var(--bone); font-weight: 600; }
/* citation marks: mono superscript numerals */
.mth__sec sup { font-family: var(--mono); font-size: 0.7em; font-weight: 500; color: var(--accent); padding-left: 0.08em; font-variant-numeric: tabular-nums; }
.mth__sec code { font-family: var(--mono); font-size: 0.86em; background: var(--wash-2); border: 1px solid var(--line); border-radius: 3px; padding: 0.08em 0.4em; color: var(--bone); }

.mth__applied { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-top: 1.3rem; }
.mth__applied span { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.mth__applied a { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s; }
.mth__applied a:hover { border-bottom-color: var(--accent); }

.mth__refs { margin-top: 1.5rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line-strong); border-radius: var(--r); }
.mth__refs__h { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); }
.mth__refs ol { margin: 0.7rem 0 0; padding-left: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mth__refs li { color: var(--bone); font-size: 0.93rem; line-height: 1.5; }
.mth__refs li::marker { font-family: var(--mono); color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.mth__refs a { color: var(--bone); font-weight: 600; border-bottom: 1px solid var(--line-strong); transition: border-color .2s, color .2s; }
.mth__refs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.mth__refs span { display: block; color: var(--bone); font-size: 0.8rem; margin-top: 0.15rem; }

/* ---- Effects layer (fx.js: Three.js and GLSL) ---------------
   WebGL2 only. The fixed paper canvas takes over the CSS grid once
   its first frame lands (html.fx-grid). Fig. 2 takes the place of the
   2D thesis canvas (.thesis.has-gl); Fig. 3 sits behind the contact
   section, masked so the copy stays clear. */
.fx-paper { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html.fx-grid body { background-image: none; }

/* the lens over a product plate carries its own reticle */
.fx-lens { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .16s ease; will-change: transform; }
.fx-lens.is-on { opacity: 1; }
.frame__screen.is-lensed { cursor: none; }

/* a figure label in the Fig. 1 manner: mono number, italic serif title */
.fx-cap { font-family: var(--text); font-style: normal; font-size: 0.86rem; color: var(--bone); white-space: nowrap; pointer-events: none; }
.fx-cap span { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); margin-right: 0.35em; }

/* Fig. 2 takes the 2D canvas's box; the mask is on the drawing, the label sits below */
.thesis__gl {
  display: none; position: absolute; z-index: -1; pointer-events: none;
  right: -4%; top: 50%; transform: translateY(-50%);
  width: min(60%, 48rem); aspect-ratio: 16 / 9;
}
.thesis__gl canvas, .thesis__gl .fx-ticks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(82% 96% at 54% 50%, #000 44%, transparent 84%);
          mask-image: radial-gradient(82% 96% at 54% 50%, #000 44%, transparent 84%);
}
.thesis__gl .fx-cap { position: absolute; top: 100%; right: 12%; margin-top: 0.2rem; }
.fx-tick { position: absolute; left: 0; top: 0; font-family: KaTeX_Main, var(--serif); font-size: 0.82rem; line-height: 1; color: var(--bone); white-space: nowrap; will-change: transform; }
.fx-tick i { font-family: KaTeX_Math, var(--serif); font-style: italic; }
.thesis.has-gl .thesis__gl { display: block; }
.thesis.has-gl .thesis__field { display: none; }
.thesis.has-gl .thesis__bg { position: absolute; opacity: 0; animation: none; }
@media (max-width: 860px) {
  .thesis__gl { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 36rem; margin: 1.5rem auto 2.2rem; }
  .thesis__gl .fx-cap { right: auto; left: 0; }
}

/* Fig. 3: lines only, strongest at the sides so the title and field stay clear */
.contact { position: relative; isolation: isolate; }
.fx-splane {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
.fx-splane canvas {
  /* an outer fade, with a clear hole behind the title and the lede */
  -webkit-mask-image: radial-gradient(ellipse 30% 24% at 50% 44%, transparent 35%, #000 100%), radial-gradient(ellipse 72% 76% at 50% 56%, #000 30%, transparent 82%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 30% 24% at 50% 44%, transparent 35%, #000 100%), radial-gradient(ellipse 72% 76% at 50% 56%, #000 30%, transparent 82%);
          mask-composite: intersect;
}
.fx-splane.is-on { opacity: 0.7; }
.fx-splane .fx-cap { position: absolute; right: var(--gut); bottom: 1.4rem; }
@media (max-width: 640px) { .fx-splane { display: none; } }

/* reading progress: a 1px rule along the bottom of the nav */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
      animation: navRead linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes navRead { to { transform: scaleX(1); } }