/* Aleten design system. Single source for every page.
   Extracted from the per-page <style> blocks so 90+ documents stop
   carrying their own copy of it. */


/* ══════════════════════════════════════════════════════════════
   Tokens

   No radius, no shadow, no blur. Depth comes from hairlines, flat
   fill and paper. Motion is deterministic: it snaps into a known
   position. No spring, no overshoot, no float, nothing looping.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#faf9f6;
  --bg-alt:#f2f0ea;
  --surface:#ffffff;
  --ink:#12110f;
  --ink-2:#3d3a35;
  --muted:#6f6b63;
  --line:#e2ded4;
  --line-strong:#cdc7b9;
  --accent:#c4562b;
  --accent-ink:#a5451f;
  --accent-wash:#f6e9e1;
  --proof:#a3282a;          /* reserved: failure states and stated limits only */
  --grain:.03;

  /* Aleten type system: display (grotesque), math (humanist serif), data (mono) */
  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* deterministic motion: one duration for state, one curve for travel */
  --t:110ms;
  --e:linear;
  --snap:cubic-bezier(.2,0,0,1);

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
}
:root[data-theme="dark"]{
  --bg:#0e0d0c;
  --bg-alt:#161513;
  --surface:#171614;
  --ink:#f4f2ec;
  --ink-2:#d3cfc6;
  --muted:#9b968c;
  --line:#292724;
  --line-strong:#3a3733;
  --accent:#e8794c;
  --accent-ink:#f0906a;
  --accent-wash:#241a15;
  --proof:#e0645c;
  --grain:.05;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* Paper, not glass. A fixed grain over the whole sheet, at the threshold of
   visibility, so the page reads as stock rather than as a screen. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}

img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ── shared type ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);flex:none}

h2.sec-title{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.08;
  letter-spacing:-.028em;
  font-weight:600;
  max-width:20ch;
}
.lede{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.6;
  color:var(--muted);
  max-width:62ch;
}
.note{font-size:14px;line-height:1.55;color:var(--muted);max-width:56ch;margin-top:12px}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color var(--t) var(--e),color var(--t) var(--e)}
.note a:hover{color:var(--accent);border-color:var(--accent)}

.sec{padding-block:clamp(58px,9vw,132px)}
.sec-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px 40px;margin-bottom:clamp(30px,4.5vw,60px);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t) var(--e),border-color var(--t) var(--e),color var(--t) var(--e);
}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}

/* ══════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--e);
}
.site-head[data-stuck="true"]{border-bottom-color:var(--line)}
/* A reading rule, not a decoration: how far through the page you are.
   Tracks scroll exactly, so it carries no easing of its own. */
.head-rule{
  position:absolute;inset-inline:0;bottom:-1px;height:1px;
  background:var(--accent);
  transform:scaleX(var(--read,0));transform-origin:left center;
}
.head-in{display:flex;align-items:center;gap:28px;height:68px;position:relative}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:var(--ink)}
.brand-mark{width:30px;height:24px;flex:none}
.brand-name{font-size:19px;font-weight:600;letter-spacing:-.03em}

.nav{display:flex;align-items:center;gap:4px;margin-inline-start:8px}
.nav a{
  text-decoration:none;font-size:14.5px;color:var(--ink-2);
  padding:8px 12px;letter-spacing:-.01em;
  transition:color var(--t) var(--e),background var(--t) var(--e);
}
.nav a:hover{color:var(--ink);background:var(--bg-alt)}

.head-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid transparent;color:var(--muted);
  transition:color var(--t) var(--e),background var(--t) var(--e),border-color var(--t) var(--e);
}
.icon-btn:hover{color:var(--ink);background:var(--bg-alt);border-color:var(--line)}
.icon-btn svg{width:17px;height:17px}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="light"] .i-moon{display:block}

.nav-toggle{display:none}
@media (max-width:1040px){
  .nav{
    display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--bg);border-block:1px solid var(--line);
    padding:8px var(--gut) 20px;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:hover{background:none}
  .nav-toggle{display:grid}
  .head-cta{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,80px);align-items:center;
  padding-block:clamp(48px,10vw,124px);
}
@media (max-width:980px){.hero-in{grid-template-columns:1fr;gap:48px}}

.hero h1{
  font-size:clamp(40px,6.2vw,80px);
  line-height:1.02;
  letter-spacing:-.038em;
  font-weight:600;
  max-width:15ch;
  margin-block:22px 26px;
}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.nb{white-space:nowrap}
.hero .lede{font-size:clamp(17px,1.8vw,20px);color:var(--ink-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero-meta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
}
@media (max-width:560px){.hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* flex columns with the value pushed down keep every figure on one baseline,
   however many lines its label wraps to */
.hero-meta div{display:flex;flex-direction:column;padding-block:2px}
.hero-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.hero-meta dd{margin:0;padding-top:8px;margin-top:auto;font-size:19px;font-weight:600;letter-spacing:-.02em}

/* ══════════════════════════════════════════════════════════════
   The collation mark

   Four identical 4x2 bars, each stepped 2 units right and 2 down, so the
   centre line runs at a true 45 degrees. On load it collates: each bar
   arrives from the position of the one before it and snaps into sequence,
   then the diagonal is drawn corner to corner. Once, then still.

   The control below it swaps two bars out of order, which is what a wrong
   gathering looks like on a real book: the diagonal no longer runs true.
   The meaning is written in the caption, so the interaction demonstrates
   it rather than hiding it.
   ══════════════════════════════════════════════════════════════ */
.mark-demo{
  display:block;width:100%;max-width:400px;margin-inline:auto;padding:0;
  text-align:start;
}
.figure-mark{width:100%}
.figure-mark .bar rect{
  fill:var(--ink);
  transition:transform 140ms var(--snap),fill var(--t) var(--e);
}
.figure-mark .guide{stroke:var(--line-strong);stroke-width:1;fill:none}
.figure-mark .accent{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-dasharray:3 4}

/* the delay selectors must outrank the shorthand above, which resets
   animation-delay to 0, or all four bars seat at the same instant */
.figure-mark .bar rect{animation:seat 180ms var(--snap) backwards}
.figure-mark .bar rect.b1{animation-delay:40ms}
.figure-mark .bar rect.b2{animation-delay:130ms}
.figure-mark .bar rect.b3{animation-delay:220ms}
.figure-mark .bar rect.b4{animation-delay:310ms}
@keyframes seat{
  0%{transform:translate(-80px,-80px);opacity:0}
  1%{opacity:1}
  100%{transform:translate(0,0);opacity:1}
}
.figure-mark .wipe{
  transform-origin:0 0;
  animation:wipe 210ms var(--snap) 500ms backwards;
}
@keyframes wipe{from{transform:scaleX(0)}}

/* out of sequence: bars three and four change places, the diagonal stops
   running true, and the two that are wrong take the reserved red */
.mark-demo:focus-visible .b3,.mark-demo.broken .b3{transform:translateX(80px);fill:var(--proof)}
.mark-demo:focus-visible .b4,.mark-demo.broken .b4{transform:translateX(-80px);fill:var(--proof)}
.mark-demo:focus-visible .accent,.mark-demo.broken .accent{opacity:0}
/* hover cannot be withdrawn on a touch screen, so it is gated on a real pointer.
   Tap is handled by the .broken class, which clears itself. */
@media (hover:hover){
  .mark-demo:hover .b3{transform:translateX(80px);fill:var(--proof)}
  .mark-demo:hover .b4{transform:translateX(-80px);fill:var(--proof)}
  .mark-demo:hover .accent{opacity:0}
}
.figure-mark .accent{transition:opacity var(--t) var(--e)}

.mark-note{
  font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
}
.mark-note b{color:var(--ink-2);font-weight:400}

/* ══════════════════════════════════════════════════════════════
   Announcements
   ══════════════════════════════════════════════════════════════ */
.featured{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.grid-ann{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:28px 24px}
.ann{display:flex;flex-direction:column;gap:14px}
.ann h3{font-size:22px;line-height:1.22;letter-spacing:-.026em;font-weight:600}
.ann p{font-size:14.5px;color:var(--muted);line-height:1.58}

.thumb{
  aspect-ratio:16/10;border:1px solid var(--line);
  overflow:hidden;position:relative;background:var(--surface);
}
.thumb svg{width:100%;height:100%}

/* ══════════════════════════════════════════════════════════════
   Development log
   ══════════════════════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  font-size:13px;letter-spacing:-.005em;padding:7px 14px;
  border:1px solid var(--line-strong);color:var(--muted);
  transition:color var(--t) var(--e),border-color var(--t) var(--e),background var(--t) var(--e);
}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* Hairlines are drawn per card rather than by the grid background, so a row
   that does not fill completely leaves no empty coloured cell. */
.grid-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px}
.card{
  box-shadow:0 0 0 1px var(--line);
  background:var(--bg);padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:14px;
}
.card[hidden]{display:none}
.card-meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.tag{color:var(--accent-ink);font-weight:600}
.card h3{font-size:19px;line-height:1.28;letter-spacing:-.022em;font-weight:600}
.card p{font-size:14.5px;color:var(--muted);line-height:1.58}
.card .ver{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* struck, never deleted: the superseded figure stays on the page */
.struck{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.struck s{
  color:var(--proof);text-decoration-line:line-through;
  text-decoration-color:var(--proof);text-decoration-thickness:1px;
}

/* ══════════════════════════════════════════════════════════════
   Ackren, formats
   ══════════════════════════════════════════════════════════════ */
.products{background:var(--bg-alt);border-block:1px solid var(--line)}
.grid-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.product{
  background:var(--bg);border:1px solid var(--line);
  padding:26px 26px;display:flex;flex-direction:column;gap:12px;
}
/* column-reverse puts the status chip above the name, so a long label never
   competes with the title for the same line. */
.product-top{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line-strong);color:var(--muted);
  white-space:nowrap;
}
.chip-new{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}
.product h3{font-size:21px;letter-spacing:-.028em;font-weight:600}
.product p{font-size:14.5px;color:var(--muted);line-height:1.58}
.spec{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 20px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.spec b{color:var(--ink);font-weight:600}

/* The fold diagram names the format: folio is one fold, quarto two, octavo
   three. Drawn complete by default. When it first enters view the folds are
   struck in order, once, which is the only way the naming explains itself. */
.fold-fig{width:104px;height:auto;margin-bottom:4px}
.fold-fig .sheet{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.fold-fig .fold{
  stroke:var(--accent);stroke-width:1;fill:none;stroke-dasharray:3 4;
  transform-box:fill-box;transform-origin:center;
}
.fold-fig.played .f1{animation:fold-y 150ms var(--snap) backwards}
.fold-fig.played .f2{animation:fold-x 150ms var(--snap) 160ms backwards}
.fold-fig.played .f3{animation:fold-y 150ms var(--snap) 320ms backwards}
@keyframes fold-y{from{transform:scaleY(0)}}
@keyframes fold-x{from{transform:scaleX(0)}}
.fold-fig .gather{fill:none;stroke:var(--line-strong);stroke-width:1}
.fold-fig .gather-top{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}

/* ══════════════════════════════════════════════════════════════
   Research
   ══════════════════════════════════════════════════════════════ */
.research-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,72px)}
@media (max-width:900px){.research-in{grid-template-columns:1fr}}
.pillars{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pillars li{
  font-size:13px;padding:6px 13px;border:1px solid var(--line-strong);
  color:var(--ink-2);
}
.papers li{border-top:1px solid var(--line)}
.papers li:last-child{border-bottom:1px solid var(--line)}
/* Rows, not links. Nothing here is a page yet, so nothing here is clickable. */
.papers .row{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:22px 4px;
}
.p-date{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.p-title{font-size:16.5px;line-height:1.4;letter-spacing:-.018em;font-weight:500}
.p-state{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:640px){
  .papers .row{grid-template-columns:1fr;gap:6px}
  .p-state{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Limits
   ══════════════════════════════════════════════════════════════ */
.safety{background:var(--ink);color:var(--bg);border-block:1px solid var(--ink)}
:root[data-theme="dark"] .safety{background:var(--bg-alt);color:var(--ink);border-color:var(--line)}
.safety .eyebrow{color:rgba(250,249,246,.62)}
.safety .lede{color:rgba(250,249,246,.7)}
.safety .note{color:rgba(250,249,246,.56)}
:root[data-theme="dark"] .safety .eyebrow,
:root[data-theme="dark"] .safety .lede,
:root[data-theme="dark"] .safety .note{color:var(--muted)}
.safety-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:900px){.safety-in{grid-template-columns:1fr}}
.commit{border-top:1px solid rgba(250,249,246,.16);padding-block:20px;display:grid;grid-template-columns:32px 1fr;gap:18px}
.commit:last-child{border-bottom:1px solid rgba(250,249,246,.16)}
:root[data-theme="dark"] .commit,
:root[data-theme="dark"] .commit:last-child{border-color:var(--line)}
.commit .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.commit h3{font-size:17px;letter-spacing:-.02em;font-weight:600;margin-bottom:6px}
.commit p{font-size:14.5px;line-height:1.6;color:rgba(250,249,246,.64)}
:root[data-theme="dark"] .commit p{color:var(--muted)}

/* ══════════════════════════════════════════════════════════════
   Work
   ══════════════════════════════════════════════════════════════ */
.careers-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
@media (max-width:820px){.careers-in{grid-template-columns:1fr;justify-items:start}}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.roles li{
  font-size:13px;padding:7px 14px;border:1px solid var(--line-strong);
  color:var(--ink-2);
}

/* ══════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════ */
.site-foot{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:clamp(42px,6vw,76px) 28px}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:36px 28px;padding-bottom:44px;
}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{font-size:14px;color:var(--muted);max-width:38ch;margin-top:14px}
.foot-brand .greek{font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.foot-col h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:14px;
}
.foot-col li+li{margin-top:9px}
.foot-col a{font-size:14px;text-decoration:none;color:var(--ink-2);transition:color var(--t) var(--e)}
.foot-col a:hover{color:var(--accent)}
.foot-bar{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;
  font-size:13px;color:var(--muted);
}
.disclosure{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.foot-bar .pending{margin-inline-start:auto;max-width:46ch}

/* ══════════════════════════════════════════════════════════════
   Small screens

   Single column throughout, so the work here is reach and density
   rather than layout: full-width actions, targets a thumb can hit,
   and less air between sections on a screen that is all scrolling.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  html{scroll-padding-top:72px}
  .head-in{height:60px}

  /* actions span the column instead of sitting as ragged pills */
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:28px}
  .hero-cta .btn,.careers-in>.btn{width:100%}
  .careers-in>.btn{margin-top:4px}
  .btn{padding-block:15px;white-space:normal}

  .hero h1{max-width:none}
  .hero-meta{margin-top:40px;padding-top:22px;gap:16px 20px}

  /* the mark is a figure here, not the other half of a spread */
  .mark-demo{max-width:296px}
  .mark-note{font-size:11.5px;line-height:1.8;margin-top:16px}

  .card{padding:24px 22px 26px}
  .card-meta{font-size:11px}
  .ann h3{font-size:20px}
  .product{padding:24px 22px}

  /* keep the version visible: it moves beside the date rather than away */
  .papers .row{grid-template-columns:1fr auto;gap:8px 12px;padding:20px 2px}
  .p-date{grid-column:1}
  .p-state{grid-column:2;display:block;justify-self:end}
  .p-title{grid-column:1/-1}

  /* two columns of links halves the height of the footer */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding-bottom:34px}
  .foot-brand{grid-column:1/-1}
  .foot-bar{gap:10px 20px}
  .foot-bar .pending{margin-inline-start:0;max-width:none}

  /* reach: 44px on the controls, and well clear of the 24px floor on links */
  .crumb .wrap{padding-block:9px}
  .crumb a{display:inline-block;padding-block:6px}
  .icon-btn{width:44px;height:44px}
  .filters button{min-height:44px;padding-inline:16px}
  .brand{padding-block:7px}
  .foot-col a{display:inline-block;padding-block:9px}
  .foot-col li+li{margin-top:0}
}

/* The same reach on any device driven by a finger rather than a cursor,
   including tablets wide enough to miss the breakpoint above. */
@media (pointer:coarse){
  .crumb .wrap{padding-block:9px}
  .crumb a{display:inline-block;padding-block:6px}
  .icon-btn{width:44px;height:44px}
  .filters button{min-height:44px;padding-inline:16px}
  .nav a{padding-block:15px}
  .brand{padding-block:7px}
  .foot-col a{display:inline-block;padding-block:9px}
  .foot-col li+li{margin-top:0}
}

/* The assembled state is always the end state, so nothing is lost. Cancelling
   the sequenced animations outright matters more than shortening them: with a
   near-zero duration the staggered delays would still hold the mark in its
   start position, bars at opacity 0, for the length of the stagger. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
  .figure-mark .bar rect,.figure-mark .wipe,.fold-fig .fold{animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .site-head,.mark-demo,.figure-mark,.filters,.careers,.icon-btn{display:none}
  body{background:#fff;color:#000}
  body::after{display:none}
  .sec{padding-block:24px}
}
/* ── language selector ───────────────────────────────────────── */
.langsel{position:relative;flex:none}
.langsel>summary{
  list-style:none;cursor:pointer;height:36px;padding:0 9px;
  display:flex;align-items:center;gap:7px;
  border:1px solid transparent;color:var(--muted);
  transition:color .15s linear,background .15s linear,border-color .15s linear;
}
.langsel>summary::-webkit-details-marker{display:none}
.langsel>summary::marker{content:""}
.langsel>summary:hover,.langsel[open]>summary{
  color:var(--ink);background:var(--bg-alt,rgba(125,120,110,.1));
  border-color:var(--line);
}
.langsel>summary svg{width:16px;height:16px;flex:none}
.langsel .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;font-weight:500}
.langsel-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:70;
  min-width:198px;background:var(--bg);border:1px solid var(--line-strong);
  padding:4px 0 5px;
}
.langsel-menu h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0;padding:9px 14px 7px;
}
.langsel-menu ul{margin:0;padding:0;list-style:none}
.langsel-menu a{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:8px 14px;text-decoration:none;font-size:14.5px;
  color:var(--ink-2,var(--ink));
  transition:color .15s linear,background .15s linear;
}
.langsel-menu a:hover{color:var(--ink);background:var(--bg-alt,rgba(125,120,110,.1))}
.langsel-menu a[aria-current]{color:var(--accent-ink,var(--accent))}
.langsel-menu .code{color:var(--muted)}
.langsel-menu a[aria-current] .code{color:var(--accent)}
.langsel-foot{margin-top:40px;display:flex}
@media print{.langsel{display:none}}

/* ── link affordances ────────────────────────────────────────── */
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
  padding-bottom:2px;border-bottom:1px solid var(--line-strong);
  transition:border-color .15s ease,color .15s ease;
}
.arrow-link:hover{color:var(--accent);border-color:var(--accent)}
.arrow-link svg{width:12px;height:12px;flex:none}

/* ── job advert additions ─────────────────────────────────────── */
:root{--proof:#a3282a}
:root[data-theme="dark"]{--proof:#f0716f}

.role-hero{border-bottom:1px solid var(--line)}
.role-hero-in{padding-block:clamp(56px,8vw,104px)}
.role-hero h1{
  font-size:clamp(34px,5.4vw,66px);line-height:1.03;letter-spacing:-.036em;
  font-weight:600;max-width:18ch;margin-block:20px 22px;
}
.role-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.role-hero .lede{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);max-width:60ch}
.role-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.body-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px)}
@media (max-width:900px){.body-in{grid-template-columns:1fr;gap:22px}}
.body-in .lede-2{font-size:clamp(15.5px,1.4vw,17px);line-height:1.62;color:var(--ink-2);max-width:64ch}

/* the work: hairline rows, numbered, on the light ground */
.spec-list{margin:0}
.spec-list li{
  display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:baseline;
  border-top:1px solid var(--line);padding:22px 4px;
}
.spec-list li:last-child{border-bottom:1px solid var(--line)}
.spec-list .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);padding-top:3px}
.spec-list h3{font-size:17px;line-height:1.32;letter-spacing:-.02em;font-weight:600;margin-bottom:6px}
.spec-list p{font-size:14.5px;color:var(--muted);line-height:1.58;max-width:64ch}

/* reserved limits box: proof-red left rule, used once per page, never decorative */
.limitbox{border-left:2px solid var(--proof);padding:4px 0 4px 18px;margin-top:26px}
.limitbox h3{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--proof);margin-bottom:8px;
}
.limitbox p{font-size:14.5px;color:var(--ink-2);line-height:1.62;max-width:64ch}

/* hub: role cards, per-card hairline so a short last row leaves no empty cell */
.grid-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px}
.role-card{
  box-shadow:0 0 0 1px var(--line);background:var(--bg);padding:28px 26px 28px;
  display:flex;flex-direction:column;gap:12px;
}
.role-card h3{font-size:20px;line-height:1.24;letter-spacing:-.026em;font-weight:600}
.role-card p{font-size:14.5px;color:var(--muted);line-height:1.56}
.role-card .arrow-link{margin-top:auto}

/* ══════════════════════════════════════════════════════════════
   Detail pages: breadcrumb, prose, pager, index cards
   ══════════════════════════════════════════════════════════════ */
.crumb{border-bottom:1px solid var(--line);background:var(--bg)}
.crumb .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block:13px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.crumb a{text-decoration:none;color:var(--muted);transition:color var(--t) var(--e)}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{color:var(--line-strong)}
.crumb [aria-current]{color:var(--ink-2)}

.prose .lede-2+.lede-2{margin-top:17px}
.prose .limitbox{margin-top:28px}
.struck-inline{color:var(--proof);text-decoration-color:var(--proof);text-decoration-thickness:1px}

.pager-sec{padding-block:0!important;border-top:1px solid var(--line)}
.pager{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pager-link{
  display:flex;flex-direction:column;gap:8px;padding:30px 4px;text-decoration:none;
  transition:background var(--t) var(--e),padding var(--t) var(--e);
}
.pager-link+.pager-link{border-left:1px solid var(--line);padding-inline-start:26px}
.pager-link:hover{background:var(--bg-alt)}
.pager-dir{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pager-title{font-size:17px;line-height:1.32;letter-spacing:-.02em;font-weight:500}
.pager-link:hover .pager-title{color:var(--accent)}
@media (max-width:640px){
  .pager{grid-template-columns:1fr}
  .pager-link+.pager-link{border-left:0;border-top:1px solid var(--line);padding-inline-start:4px}
}

/* hub grids: per-card hairline, so a short last row leaves no empty cell */
.grid-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px}
.idx-card{
  box-shadow:0 0 0 1px var(--line);background:var(--bg);
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:13px;
  text-decoration:none;transition:background var(--t) var(--e);
}
.idx-card:hover{background:var(--surface)}
.idx-card h3{font-size:19px;line-height:1.28;letter-spacing:-.022em;font-weight:600;transition:color var(--t) var(--e)}
.idx-card:hover h3{color:var(--accent)}
.idx-card p{font-size:14.5px;color:var(--muted);line-height:1.56}
.idx-card .arrow-link{margin-top:auto;align-self:flex-start;border-bottom-color:transparent}
.idx-card:hover .arrow-link{color:var(--accent);border-bottom-color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   Index: cards that are now real links, and job cards
   ══════════════════════════════════════════════════════════════ */
a.card,a.ann{text-decoration:none}
a.card:hover,a.card:focus-visible{background:var(--surface)}
a.card:hover h3,a.card:focus-visible h3{color:var(--accent)}
a.ann:hover h3,a.ann:focus-visible h3{color:var(--accent)}
a.ann:hover .thumb{border-color:var(--line-strong)}
a.product{text-decoration:none;transition:border-color var(--t) var(--e)}
a.product:hover{border-color:var(--line-strong)}
a.product:hover h3{color:var(--accent)}
.papers a.row{text-decoration:none;transition:background var(--t) var(--e),padding var(--t) var(--e)}
.papers a.row:hover{background:var(--bg-alt);padding-inline:10px}
.papers a.row:hover .p-title{color:var(--accent)}
a.commit{text-decoration:none}
a.commit:hover h3{color:var(--accent)}

.grid-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;margin-top:34px}
.job-card{
  box-shadow:0 0 0 1px var(--line);background:var(--bg);
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:11px;
  text-decoration:none;transition:background var(--t) var(--e);
}
.job-card:hover{background:var(--surface)}
.job-card h3{font-size:18px;line-height:1.28;letter-spacing:-.022em;font-weight:600;transition:color var(--t) var(--e)}
.job-card:hover h3{color:var(--accent)}
.job-card p{font-size:14px;color:var(--muted);line-height:1.55}
.job-terms{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:4px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}

/* filter result count, announced rather than merely shown */
.filter-count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;
}
.idx-card .card-meta{flex-wrap:wrap}
.idx-card .ver{
  margin-top:auto;padding-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.idx-card .ver+.arrow-link{margin-top:14px}
.job-terms span+span::before{content:"·";margin-inline-end:9px;color:var(--line-strong)}

/* ══════════════════════════════════════════════════════════════
   Rendering cost

   Sections below the fold are not laid out until they are close to
   the viewport. contain-intrinsic-size holds the last measured height
   so the scrollbar does not jump, and `auto` keeps find-in-page and
   in-page anchors working.
   ══════════════════════════════════════════════════════════════ */
.sec,.pager-sec{content-visibility:auto;contain-intrinsic-size:auto 640px}
.hero,.role-hero,.crumb,.site-head{content-visibility:visible}
@media print{.sec,.pager-sec{content-visibility:visible}}

/* carried from the job-advert stylesheet: the static mark on pages that do
   not run the collation sequence */
.figure-mark .bar{fill:var(--ink)}
.ck-when{display:block;margin-top:5px;font-size:13.5px;color:var(--muted)}
.foot-cookies{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color var(--t) var(--e),border-color var(--t) var(--e);
}
.foot-cookies:hover{color:var(--accent);border-color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   Figures and spec tables on detail pages
   ══════════════════════════════════════════════════════════════ */
.dtable{
  width:100%;border-collapse:collapse;margin-bottom:34px;
  font-variant-numeric:tabular-nums;
}
.dtable caption{
  text-align:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-bottom:12px;
}
.dtable th,.dtable td{text-align:start;padding:13px 14px 13px 0;border-top:1px solid var(--line);font-weight:400}
.dtable thead th{
  border-top:0;border-bottom:1px solid var(--line-strong);padding-top:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.dtable tbody th{font-size:14.5px;color:var(--ink-2);width:44%}
.dtable tbody td{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dtable td.basis{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:400;text-align:end;padding-right:0;
}
@media (max-width:640px){
  .dtable tbody th{width:auto;font-size:14px}
  .dtable td.basis{font-size:10px}
}

.figure{margin:0}
.figure svg{width:100%;height:auto;overflow:visible}
.figure .fig-lab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  fill:var(--muted);
}
.figure .fig-val{font-family:var(--mono);font-size:11px;fill:var(--ink);font-weight:600}
.figure figcaption{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--muted);max-width:62ch;
}

/* ══════════════════════════════════════════════════════════════
   Say that a card is a link
   ══════════════════════════════════════════════════════════════ */
.go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color var(--t) var(--e),gap var(--t) var(--e);
}
.go svg{width:11px;height:11px;flex:none}
a:hover .go,a:focus-visible .go{color:var(--accent)}
.card .ver+.go{padding-top:10px}
.papers .row .go{margin:0;padding:0}
.commit .go{padding-top:12px}
.more-wrap{display:flex;justify-content:center;padding-top:38px}