/* ============================================================
   Tanocrix — Entwurf III
   Stand-alone stylesheet. Does not touch styles.css.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JBMono.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* The third face, and the only one that is not ours. It sets quotations and
   nothing else: two voices from outside the company, 1847 and 1993, marked
   as not us speaking. Self-hosted like the other two, OFL like the other
   two, latin subset only, 44KB. Garamond rather than a Didone because the
   quotes sit on graphite as well as on silver, and a modern face's
   hairlines vanish on the dark ground at this size. */
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Italic.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Ground: the page is the black table the documents lie on. */
  --page:        #09090B;
  --gutter:      clamp(8px, 1.6vw, 22px);
  --radius:      clamp(12px, 1.6vw, 22px);
  --bar:         64px;

  /* Silver band — the sheet. */
  --sheet:       #EDEEF1;
  --sheet-sunk:  #E3E5E9;
  --ink:         #131519;   /* 15.0:1 on --sheet */
  --ink-2:       #52585F;   /*  5.9:1 on --sheet */
  --rule:        #C9CDD4;
  --rule-hard:   #131519;

  /* Graphite band — the same sheet, lights out. */
  --slab:        #121316;
  --slab-sunk:   #1A1C20;
  --chalk:       #EDEEF1;   /* 15.2:1 on --slab */
  --chalk-2:     #949BA5;   /*  6.1:1 on --slab */
  --rule-dark:   #2C2F35;

  /* The one accent. Pure, and only ever a field or a link on silver. */
  --blue:        #0000FF;
  --blue-press:  #0000C4;
  --blue-lit:    #5B7CFF;   /* the only blue allowed to carry text on graphite, 6.2:1 */

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --quote: "EB Garamond", Georgia, serif;

  --pad:  clamp(22px, 4.8vw, 88px);
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);

  /* The ceiling used to sit at 68px "per the German brief". The brief's real
     constraint is that Betriebserlaubnis must not overflow a narrow column,
     and the clamp's lower bound plus hyphens: auto already hold that. On a
     1512px screen 6.2vw computes to 94px and the old cap threw it away, so
     the display voice was reading two sizes smaller than the page allowed.
     Scale is what makes a page feel built rather than laid out. */
  --d1:  clamp(2.55rem, 6.6vw, 5.75rem);   /* 41px narrow, 92px wide */
  --d2:  clamp(1.75rem, 3.6vw, 3rem);
  --num: clamp(3rem, 8vw, 7rem);
  --micro: 0.6875rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: var(--gutter);
  background: var(--page);
  font-family: var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* The bar is inset by the gutter, and content scrolled up through that strip was
   painting sliced in half above it. Flood the strip with the page ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--gutter);
  background: var(--page);
  z-index: 79;
  pointer-events: none;
}

/* ---- Top bar ---------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

.topbar {
  position: fixed;
  inset: var(--gutter) var(--gutter) auto var(--gutter);
  /* Above the menu: the burger has to stay reachable to close it. */
  z-index: 80;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: clamp(18px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: rgba(14, 15, 18, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.24), 0 18px 44px -22px rgba(0,0,0,0.7);
}

/* The wordmark is the drawn logo, not Archivo set bold. It is masked rather
   than placed as an image so it still takes currentColor, which keeps the
   hover state and any inverted ground working, and so the file is fetched
   once instead of inlined into every page. The supplied artwork carries a
   metal gradient and a black plate; both are dropped here. This world bans
   gradient letterforms, and the letterforms are the brand while the metal
   is a finish, so the finish is kept for the social card and the flat cut
   of the same drawing is what the page uses. */
/* The mask sits on a child, not on the anchor. Masking the anchor itself
   made the whole hit area 111x20, which is a 20px tall tap target for the
   one control every page carries. */
.topbar-mark {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 10px;
  flex: none;
  color: var(--chalk);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.topbar-mark::before {
  content: "";
  display: block;
  width: 111px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("/logo-wordmark.svg") no-repeat left center / contain;
  mask: url("/logo-wordmark.svg") no-repeat left center / contain;
}
.topbar-mark:hover { color: #fff; }
/* The accessible name has to survive the mask, which paints no glyphs. */
.topbar-mark span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 720px) { .topbar-mark { width: 94px; height: 17px; } }

.topbar-act { display: flex; align-items: stretch; height: 100%; padding: 9px; gap: 8px; }

.topbar-cta {
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(18px, 2.2vw, 32px);
  border-radius: 3px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.topbar-cta:hover { background: var(--blue); color: #fff; }

.topbar-icon {
  appearance: none;
  width: 46px;
  border: 1px solid rgba(237, 238, 241, 0.22);
  border-radius: 3px;
  background: none;
  color: var(--chalk);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.topbar-icon:hover { border-color: rgba(237, 238, 241, 0.5); background: rgba(237, 238, 241, 0.06); }
.topbar-icon svg { width: 19px; height: 19px; }

.burger-lines { display: block; width: 19px; height: 13px; position: relative; }
.burger-lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 180ms var(--ease);
}
.burger-lines i:nth-child(1) { top: 0; }
.burger-lines i:nth-child(2) { top: 5.75px; }
.burger-lines i:nth-child(3) { top: 11.5px; }
[aria-expanded="true"] .burger-lines i:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
[aria-expanded="true"] .burger-lines i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger-lines i:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }

/* ---- Menu panel ------------------------------------------- */

.menu {
  position: fixed;
  inset: var(--gutter);
  z-index: 70;
  border-radius: var(--radius);
  background: var(--slab);
  color: var(--chalk);
  /* The card is inset by the gutter; this floods the rest of the viewport with
     the page black so no band shows through the strip around it. */
  box-shadow: 0 0 0 100vmax var(--page);
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--bar) + 22px) var(--pad) clamp(20px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
}
.menu[hidden] { display: none; }

.js .menu { opacity: 0; transform: translateY(-8px); }
.js .menu.open { opacity: 1; transform: none; transition: opacity 240ms var(--ease), transform 320ms var(--ease); }

.menu-find {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-dark);
}
.menu-find svg { width: 20px; height: 20px; flex: none; color: var(--chalk-2); }
.menu-find input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--chalk);
}
.menu-find input::placeholder { color: var(--chalk-2); font-weight: 500; }
.menu-find input:focus { outline: none; }
.menu-find:focus-within { border-bottom-color: var(--blue-lit); box-shadow: 0 1px 0 0 var(--blue-lit); }
.menu-find:focus-within svg { color: var(--blue-lit); }
/* The platform's own clear glyph is not in this world's icon language. */
.menu-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Quick entries, in the manner of a search overlay's popular searches. */
.menu-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-top: -12px;
}
.menu-quick[hidden] { display: none; }
.menu-quick > span {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--chalk-2);
  margin-right: 6px;
}
.menu-quick button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--chalk);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-dark);
  cursor: pointer;
  transition: text-decoration-color 180ms var(--ease);
}
.menu-quick button:hover { text-decoration-color: var(--blue); }

.menu-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
  /* Absorb the slack so the CTA and the footer both stay above the fold. */
  flex: 1 1 auto;
  align-content: start;
}
/* display:grid outranks the UA rule for the hidden attribute, so search would
   have drawn its results above the site map instead of in its place. */
.menu-cols[hidden] { display: none; }
.menu-col h4 {
  margin: 0 0 18px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--chalk-2);
}
.menu-col a {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--rule-dark);
  text-decoration: none;
  color: var(--chalk);
}
/* The text steps in on hover, not the row: transforming the children keeps the
   hairline still and keeps the move off the layout thread. */
.menu-col a b,
.menu-col a span { transition: transform 260ms var(--ease); }
.menu-col a b {
  display: block;
  font-size: clamp(1.125rem, 1.55vw, 1.4375rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.menu-col a span { display: block; margin-top: 5px; font-size: 0.75rem; line-height: 1.45; color: var(--chalk-2); }
.menu-col a:hover b,
.menu-col a:hover span { transform: translateX(10px); }
.menu-col a:hover b { color: #fff; }
.menu-col a:hover span { color: var(--chalk); }
.menu-col a[aria-current="page"] b { color: var(--blue-lit); }
.menu-col a[hidden] { display: none; }

/* Search results take the columns' place: the same hairline rows, plus the
   part of the site the entry sits in. */
.menu-hits-note {
  margin: -12px 0 0;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--chalk-2);
}
.menu-hits {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.menu-hits[hidden], .menu-hits-note[hidden] { display: none; }
.hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: clamp(20px, 2.6vw, 44px);
  padding: 13px 0;
  border-top: 1px solid var(--rule-dark);
  text-decoration: none;
  color: var(--chalk);
}
.hit b, .hit span { grid-column: 1; transition: transform 260ms var(--ease), color 180ms var(--ease); }
.hit b {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.hit span { margin-top: 5px; font-size: 0.8125rem; line-height: 1.5; color: var(--chalk-2); max-width: 62ch; }
.hit em {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-style: normal;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--chalk-2);
}
/* The matched word steps one rung up the tone ladder. It is not tinted: pure
   blue cannot carry a letterform on graphite, and blue-lit is not a marker. */
.hit mark { background: none; color: var(--chalk); font-weight: 600; }
.hit b mark { color: #fff; }
.hit:hover b, .hit[aria-selected="true"] b { color: #fff; }
.hit:hover span, .hit[aria-selected="true"] span { color: var(--chalk); }
.hit:hover b, .hit:hover span,
.hit[aria-selected="true"] b, .hit[aria-selected="true"] span { transform: translateX(10px); }
/* The keyboard row is named by aria-activedescendant, so it has to be seen. */
.hit[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--blue); }

/* Closes the panel instead of leaving it to trail off into dead space. */
.menu-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
.menu-cta-text { display: flex; flex-direction: column; gap: 7px; }
.menu-cta b { font-size: clamp(1.25rem, 2.4vw, 1.875rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.menu-cta-text > span { font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,0.88); max-width: 48ch; }
.menu-cta svg { width: 20px; height: 20px; flex: none; transition: transform 320ms var(--ease); }
.menu-cta:hover svg { transform: translateX(6px); }

.menu-foot {
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--chalk-2);
}
.menu-foot nav { display: flex; gap: 20px; }
.menu-foot a { text-decoration: none; }
.menu-foot a:hover { color: var(--chalk); }

.lang {
  appearance: none;
  border: 1px solid rgba(237, 238, 241, 0.24);
  background: none;
  border-radius: 3px;
  padding: 8px 13px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--chalk-2);
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.lang:hover { color: var(--chalk); border-color: rgba(237, 238, 241, 0.5); }

/* Sits directly under the field, at the field's own weight, and names a way out. */
.menu-empty {
  margin: -12px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--chalk-2);
}
.menu-empty b { color: var(--chalk); font-weight: 600; }
.menu-empty[hidden] { display: none; }

/* ---- Bands ------------------------------------------------ */

.band {
  position: relative;
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: clip;
  margin-bottom: var(--gutter);
}
.band:last-of-type { margin-bottom: 0; }
/* Deep links land below the fixed bar, not under it. */
.band { scroll-margin-top: calc(var(--bar) + var(--gutter) + 16px); }
/* The first band on a page sits under the fixed bar and has to clear it. */
.band-first { padding-top: calc(var(--bar) + clamp(26px, 3.4vw, 44px)); }

.band-sheet { background: var(--sheet); color: var(--ink); }
.band-slab  { background: var(--slab);  color: var(--chalk); }

/* Corner index: section identity top-left, live context top-right.
   Not an eyebrow — it sits in the frame, not above the heading. */
.band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: clamp(38px, 6vw, 88px);
}
.band-head span:last-child { text-align: right; font-weight: 500; }
.band-sheet .band-head { color: var(--ink-2); }
.band-sheet .band-head span:first-child { color: var(--ink); }
.band-slab  .band-head { color: var(--chalk-2); }
.band-slab  .band-head span:first-child { color: var(--chalk); }

/* ---- Display type ----------------------------------------- */

.display {
  margin: 0;
  font-size: var(--d1);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
  hyphens: auto;
}
.display-lg { font-size: clamp(2.75rem, 8.2vw, 7rem); }

h3 { margin: 0; }

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

/* The bar is fixed and full width; the corner index has to clear it. */
.hero {
  /* One screen, exactly. The 860px cap meant that on a tall display the
     hero stopped short and the next band peeked in under it, which reads as
     a mistake rather than as an invitation to scroll. svh so mobile browser
     chrome collapsing does not jump the layout. */
  min-height: calc(100svh - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--bar) + clamp(26px, 3.4vw, 44px));
}

.hero-mark {
  position: absolute;
  left: calc(var(--pad) * -0.06);
  bottom: -0.14em;
  margin: 0;
  font-size: clamp(9rem, 27vw, 24rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.72;
  color: rgba(19, 21, 25, 0.052);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero-top { position: relative; z-index: 2; }

.hero-title {
  position: relative;
  z-index: 2;
  margin: clamp(48px, 9vh, 104px) 0 0 auto;
  max-width: 15ch;
  text-align: right;
  hyphens: auto;
}

.hero-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: clamp(40px, 7vh, 92px);
  display: grid;
  grid-template-columns: minmax(240px, 27%) 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}

/* The blue field. This is the accent's whole job: a plate, never a letterform on graphite. */
.plate {
  background: var(--blue);
  color: #fff;
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(230px, 30vh, 320px);
}
/* The plate is a name, one claim and a status. It used to carry a third
   thing, a sentence of mechanism, which the platform and Haggarti pages
   both state at length one scroll away; here it only crowded the accent
   out of its own field. What is left is set large, because a field this
   colour exists to say one thing at the scale of the claim. */
/* Matched to the specificity of the three-selector .plate p rule below
   rather than shouted over with !important. */
.plate p.plate-claim,
.band-sheet .plate p.plate-claim,
.band-slab .plate p.plate-claim {
  margin: auto 0;
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.plate-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* The plate is the accent field; nothing outside it may recolour its text.
   .band-slab .duo p was winning on specificity and dropping this to 3.07:1. */
.plate p,
.band-slab .plate p,
.band-sheet .plate p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.plate p strong { color: #fff; font-weight: 700; }
.plate-foot { margin-top: auto; font-size: var(--micro); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

.hero-est {
  margin: 0;
  align-self: end;
  font-size: 0.75rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.hero-est b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }

.hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; }

.disc {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.disc-ring {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sheet);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 220ms var(--ease), transform 320ms var(--ease);
}
.disc:hover .disc-ring { background: var(--blue); transform: translateX(4px); }
.disc-ring svg { width: 15px; height: 15px; }
.disc-rev { order: -1; }

/* ---- Ledger: the numbers that are actually true ----------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(44px, 6vw, 76px);
}
.ledger-cell { border-top: 1.5px solid var(--rule-hard); padding-top: 14px; }
.ledger-n {
  display: block;
  font-size: var(--num);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.ledger-cell h3 { margin: 16px 0 5px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; }
.ledger-cell p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }

/* ---- Four-column micro grid ------------------------------- */

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(40px, 5.5vw, 72px);
}
.grid4 h4 {
  margin: 0 0 10px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.grid4 ul { margin: 0; padding: 0; list-style: none; }
.grid4 li { font-size: 0.8125rem; line-height: 1.6; }
.band-sheet .grid4 li { color: var(--ink-2); }
.band-slab  .grid4 li { color: var(--chalk-2); }
.grid4 li + li { margin-top: 2px; }
.grid4 .mono { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: -0.01em; }

/* ---- Process rows ----------------------------------------- */

.split {
  display: grid;
  /* German compounds need the room: "ohne Nachweis." must not orphan. */
  grid-template-columns: minmax(300px, 40%) 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.rows { border-bottom: 1px solid var(--rule-dark); }
.band-sheet .rows { border-color: var(--rule); }

.row {
  display: grid;
  grid-template-columns: 3.2rem minmax(7rem, 0.5fr) 1fr auto;
  gap: clamp(14px, 2vw, 30px);
  align-items: baseline;
  padding: clamp(18px, 2.1vw, 26px) 0;
  border-top: 1px solid var(--rule-dark);
  text-decoration: none;
  color: inherit;
}
.band-sheet .row { border-color: var(--rule); }
.row-n { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.band-slab .row-n { color: var(--chalk-2); }
.row h3 { font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 700; letter-spacing: -0.028em; }
.row p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.band-slab .row p { color: var(--chalk-2); }
.row-out {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.band-slab .row-out { color: var(--chalk-2); }

/* Blue chain plate under the process rows. */
.chain {
  margin-top: clamp(30px, 4vw, 54px);
  background: var(--blue);
  color: #fff;
  padding: clamp(24px, 3.2vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}
.chain-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(8px, 1.4vw, 18px);
  font-size: clamp(1.125rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.chain-seq svg { width: clamp(16px, 2vw, 26px); height: auto; flex: none; opacity: 0.72; }
.chain-note {
  margin: 0 0 0 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 34ch;
  color: rgba(255,255,255,0.88);
}

/* ---- Standards cards -------------------------------------- */

/* The standards run as a rail. The track is duplicated once by design-v3.js
   and the clone is aria-hidden, so the loop is seamless without the list
   being announced twice. It stops the moment a pointer or the keyboard
   enters it: anything that moves on its own for more than five seconds owes
   the reader a way to stop it, and a card you cannot hold still is a card
   you cannot read. */
.regime-rail {
  margin-top: clamp(30px, 4vw, 52px);
  overflow: hidden;
  /* the rail bleeds to the band's edges so cards enter and leave, rather
     than appearing and vanishing inside a boxed viewport */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.regimes {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  width: max-content;
  animation: regime-rail 52s linear infinite;
}
.regimes > .regime {
  flex: none;
  width: clamp(232px, 21vw, 300px);
  /* Height follows the content. As a locked square, the longer descriptions
     grew up past the card's centre and collided with the glyph. */
  aspect-ratio: auto;
  min-height: clamp(232px, 21vw, 300px);
}
.regime-rail:hover .regimes,
.regime-rail:focus-within .regimes { animation-play-state: paused; }
@keyframes regime-rail {
  to { transform: translateX(calc(-50% - clamp(5px, 0.6vw, 8px))); }
}

/* No motion means no conveyor: the rail becomes a row you push yourself. */
@media (prefers-reduced-motion: reduce) {
  .regime-rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask: none; mask: none; }
  .regimes { animation: none; }
  .regimes > .regime { scroll-snap-align: start; }
}

.regime {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  padding: clamp(14px, 1.5vw, 20px);
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--slab);
  color: var(--chalk);
}
.regime-blue { background: var(--blue); color: #fff; }
.regime-void { background: var(--sheet-sunk); color: var(--ink); outline: 1.5px solid var(--rule-hard); outline-offset: -1.5px; }

.regime-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Sized from the card's own width over the digit count, so a five-digit
     number does not overrun the card. That formula alone equalises glyph
     *width*, which is wrong the moment a number is short: § 87 and § 88
     came out at 92cqw and swallowed their cards. The cap equalises *height*
     instead, at what four digits produce, so short numbers are simply
     narrower rather than enormous. */
  font-size: clamp(3rem, 7vw, 6rem);
  font-size: min(calc(185cqw / var(--d, 4)), 36cqw);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.regime-void .regime-glyph { color: rgba(19,21,25,0.14); }

.regime-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.regime-tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  text-transform: uppercase;
  white-space: nowrap;
}
.regime-blue .regime-tag { background: rgba(255,255,255,0.22); }
.regime-void .regime-tag { background: var(--ink); color: var(--sheet); }
.regime-stat { font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; text-align: right; }

.regime-foot { position: relative; margin-top: auto; }
.regime-foot b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
/* A floor under the caption so all four titles sit on one line across the row. */
.regime-foot span { display: block; margin-top: 3px; min-height: 2.9em; font-size: 0.75rem; line-height: 1.45; opacity: 0.78; }

/* ---- Standards panel: all seven regimes, coverage and gaps ---- */

.regime-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(34px, 4.4vw, 56px); }
.regime-chip {
  appearance: none;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.regime-chip:hover { border-color: var(--rule-hard); color: var(--ink); }
.regime-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.regime-chip-flag {
  margin-left: 7px;
  font-size: var(--micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
}

.regime-panel { margin-top: clamp(26px, 3.2vw, 40px); }
.regime-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.regime-status {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.regime-status-mapped { background: var(--blue); color: #fff; }
.regime-status-unmapped { background: var(--ink); color: var(--sheet); }
.regime-scope { margin: 0; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

.regime-notice {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--sheet-sunk);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.regime-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(24px, 3vw, 36px);
}
.regime-col h3 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--rule-hard);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.regime-col ul { margin: 0; padding: 0; list-style: none; }
.regime-col li { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-2); padding: 8px 0; border-top: 1px solid var(--rule); }
.regime-col li:first-child { border-top: 0; padding-top: 0; }
/* The gaps column is the argument, so it is set as plainly as the coverage. */
.regime-col-gaps h3 { border-bottom-color: var(--ink-2); }
.regime-foot-note { margin: 20px 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--ink-2); }
.regime-source { margin: 18px 0 0; font-size: 0.75rem; color: var(--ink-2); }

/* ---- Closing band ----------------------------------------- */

.close-title { max-width: 13ch; }

.close-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  margin-top: clamp(30px, 4vw, 48px);
}
.close-act > p { margin: 0; max-width: 34ch; font-size: 0.8125rem; line-height: 1.55; color: var(--chalk-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 320ms var(--ease);
}
.pill:hover { background: #2323FF; transform: translateY(-2px); }
.pill:active { background: var(--blue-press); transform: none; }
.pill svg { width: 13px; height: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(26px, 3.4vw, 40px); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--chalk-2);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-lit); flex: none; }

/* Band aware: a page that ends on silver should not need a graphite coda
   just to make its footer visible. */
.band-sheet .foot { border-color: var(--rule); color: var(--ink-2); }
.band-sheet .foot-brand { color: var(--ink); }
.band-sheet .foot a:hover { color: var(--ink); }
/* The footer is a site map, not a strip of small print. One identity column
   holding the mark, the copyright and the language, then the whole site in
   named groups, each link at reading size rather than at the 12px every
   footer defaults to. A single row of links cannot say which of them belong
   together; four headed columns can. */
.foot {
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 64px);
  color: var(--chalk-2);
}
.foot-id { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.foot-brand {
  display: block;
  width: 118px;
  height: 21px;
  color: var(--chalk);
  background-color: currentColor;
  -webkit-mask: url("/logo-wordmark.svg") no-repeat left center / contain;
  mask: url("/logo-wordmark.svg") no-repeat left center / contain;
}
.foot-brand span {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.foot-copy { font-size: 0.8125rem; line-height: 1.6; margin: 0; }

.foot-col h4 {
  margin: 0 0 18px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--chalk-2);
}
.foot-col nav { display: flex; flex-direction: column; }
.foot a {
  font-size: 0.9375rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  color: var(--chalk-2);
  transition: color 180ms var(--ease);
  /* A 15px link is 20px tall; pad to a real target without moving the rhythm. */
  padding: 7px 0;
}
.foot a:hover { color: var(--chalk); }

@media (max-width: 1080px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-id { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot { grid-template-columns: 1fr; }
}

/* ---- Page-level components (subpages) --------------------- */

/* Section nav under the bar, the way a product page carries its own chapters. */
.pagenav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  /* Row gap has to clear the current item's underline, or a wrapped nav draws
     the blue rule under the link on the row below. */
  gap: 20px clamp(14px, 2vw, 30px);
  margin-bottom: clamp(46px, 7vw, 96px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.band-slab .pagenav { border-color: var(--rule-dark); }
.pagenav a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 12px;
  margin-bottom: -15px;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.band-slab .pagenav a { color: var(--chalk-2); }
.pagenav a:hover { color: var(--ink); }
.band-slab .pagenav a:hover { color: var(--chalk); }
.pagenav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue); }
.band-slab .pagenav a[aria-current="page"] { color: var(--chalk); border-bottom-color: var(--blue-lit); }

/* Giant page name left, the page's one claim right. */
.page-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 38%);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.page-hero .display { max-width: 16ch; }
.page-hero-claim {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.025em;
}
.band-sheet .page-hero-claim { color: var(--ink); }
.band-slab .page-hero-claim { color: var(--chalk); }
.page-hero-sub { margin: 18px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.band-slab .page-hero-sub { color: var(--chalk-2); }

/* A full-width hairline that separates chapters inside one band. */
.hr {
  height: 1px;
  border: 0;
  margin: clamp(46px, 6.5vw, 96px) 0;
  background: var(--rule);
}
.band-slab .hr { background: var(--rule-dark); }

/* Artifact left, argument right. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.duo-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.duo h3 {
  margin: 0 0 16px;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.duo p { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.band-slab .duo p { color: var(--chalk-2); }
.duo p:last-child { margin-bottom: 0; }

/* Two columns of large type: a heading that asks, a statement that answers. */
.stmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.stmt h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.stmt > p {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  max-width: 28ch;
}

/* Left rail label, content to the right. */
.rail {
  display: grid;
  grid-template-columns: minmax(140px, 18%) 1fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.rail > h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* An inline link that rules itself off, so it reads as a door. */
.arrowlink {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(320px, 100%);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease);
}
.band-slab .arrowlink { border-color: var(--rule-dark); }
.arrowlink svg { width: 16px; height: 16px; flex: none; transition: transform 320ms var(--ease); }
.arrowlink:hover { border-color: var(--blue); }
.band-slab .arrowlink:hover { border-color: var(--blue-lit); }
.arrowlink:hover svg { transform: translateX(6px); }

.arrowlinks { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 48px); }

/* A definition list for terminology pages. */
.defs { border-bottom: 1px solid var(--rule); }
.band-slab .defs { border-color: var(--rule-dark); }
.def {
  display: grid;
  grid-template-columns: minmax(180px, 26%) 1fr;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.band-slab .def { border-color: var(--rule-dark); }
.def dt { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -0.025em; }
.def dd { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.band-slab .def dd { color: var(--chalk-2); }
.def dd .mono { font-family: var(--mono); font-size: 0.8125rem; }

/* Long-form prose for the legal and documentation pages.
   The font-size lives here so the ch measure resolves in the size the text is
   actually set in; at the root's 16px, 72ch renders as an 82 character line. */
/* 59ch, not 72ch: the ch unit is the width of "0", which in Archivo runs about
   24% wider than the average glyph, so 72ch renders as 89 characters. This value
   was set by measuring rendered lines, not by reading the unit. */
.prose { max-width: 63ch; font-size: 0.875rem; }
.prose h2 { margin: clamp(38px, 4.6vw, 56px) 0 14px; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; letter-spacing: -0.03em; }
.prose h3 { margin: clamp(32px, 4vw, 48px) 0 12px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 0.875rem; line-height: 1.68; color: var(--ink-2); }
.band-slab .prose p, .band-slab .prose li { color: var(--chalk-2); }
.prose ul { margin: 0 0 14px; padding-left: 1.1em; }
.prose li { margin-bottom: 5px; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.band-slab .prose a { color: var(--blue-lit); }

/* ---- Focus ------------------------------------------------ */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.band-slab a:focus-visible,
.topbar a:focus-visible,
.topbar button:focus-visible,
.menu a:focus-visible,
.menu button:focus-visible,
.menu input:focus-visible { outline-color: var(--blue-lit); }

/* ---- One authored motion: the sheet is laid down ----------
   Headlines wipe up under a mask, rules draw left to right.
   Everything is visible by default; JS opts in. ------------- */

/* Insets stay non-negative: a negative percentage invalidates the whole
   declaration and the heading never uncovers. */
.js .reveal { padding-bottom: 0.1em; margin-bottom: -0.1em; clip-path: inset(0 0 100% 0); }
.js .reveal.in { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease); }

.js .draw { transform: scaleX(0); transform-origin: left center; }
.js .draw.in { transform: scaleX(1); transition: transform 760ms var(--ease); }

.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity 640ms var(--ease), transform 760ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .draw, .js .rise { clip-path: none; transform: none; opacity: 1; transition: none; }
}

/* A full-width door at the foot of a band: name, one line, arrow. Ruled
   above rather than boxed, so it reads as the band's last row and not as
   a card dropped into it. */
.jump {
  display: grid;
  grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr) 20px;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: baseline;
  margin-top: clamp(40px, 5.5vw, 76px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1.5px solid var(--rule-hard);
  text-decoration: none;
  color: inherit;
}
.band-slab .jump { border-top-color: var(--chalk-2); }
.jump-label { font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -0.025em; transition: color 180ms var(--ease); }
.jump-text { font-size: 0.875rem; line-height: 1.6; max-width: 58ch; color: var(--ink-2); }
.band-slab .jump-text { color: var(--chalk-2); }
.jump svg { width: 20px; height: 20px; align-self: center; transition: transform 320ms var(--ease), color 180ms var(--ease); }
.jump:hover .jump-label, .jump:hover svg { color: var(--blue); }
.band-slab .jump:hover .jump-label, .band-slab .jump:hover svg { color: var(--blue-lit); }
.jump:hover svg { transform: translateX(6px); }

@media (max-width: 720px) {
  .jump { grid-template-columns: 1fr 20px; row-gap: 8px; }
  .jump-text { grid-column: 1; }
}

/* ---- Menu: a navigation tree, not four equal columns -------
   The panel used to be four columns of equal weight, one of which
   repeated the page's own sections. Three problems: the groupings were
   arbitrary (the object graph filed under Produkt, the specification
   under Nachweis), a per-page column duplicated the register and the
   sticky index that already do that job better, and four columns of
   13px links gave a full viewport of graphite nothing to lead with.

   Now the left side is the navigation, set large, with real parents and
   children. Descriptions are gone from it: the field above searches all
   84 entries by description already, so the tree can be names only, which
   is what lets it be read rather than scanned. ------------- */

.menu-nav { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); }
.menu-group { border-top: 1px solid var(--rule-dark); padding-top: 16px; }
.menu-group > h4 {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--chalk-2);
}
.menu-tree { display: flex; flex-direction: column; }
.menu-tree a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--chalk);
  transition: color 180ms var(--ease);
}
.menu-tree a:hover { color: var(--blue-lit); }
.menu-tree a[aria-current="page"] { color: var(--blue-lit); }
/* A child, indented and hung off a drawn corner rather than a glyph, so
   the mark belongs to the same stroke language as every other icon here. */
.menu-tree .sub { padding-left: clamp(20px, 2.4vw, 34px); font-size: clamp(1.0625rem, 1.8vw, 1.4375rem); color: var(--chalk-2); }
.menu-tree .sub:hover { color: var(--blue-lit); }
.menu-tree .sub svg { width: 13px; height: 13px; flex: none; align-self: center; opacity: 0.6; }

/* The secondary column stays small: it is where you go, not what you read. */
.menu-side { display: flex; flex-direction: column; gap: 9px; }
.menu-side a {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--chalk-2);
  transition: color 180ms var(--ease);
}
.menu-side a:hover { color: var(--chalk); }

@media (max-width: 900px) {
  .menu-nav { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
}


/* ---- Sticky section index ----------------------------------
   Every page but the homepage carries one. The cover register says what a
   page contains; this says where in it you are, which is a different job and
   the reason both survive. It replaced a strip that was marked sticky in the
   markup and in a comment and had never been made to stick. -------- */
.pagenav-stick {
  position: sticky;
  top: calc(var(--bar) + var(--gutter));
  z-index: 60;
  margin: 0 0 var(--gutter);
  padding: 13px clamp(18px, 3vw, 34px);
  border: 0;
  border-radius: var(--radius);
  background: var(--slab);
  gap: 6px clamp(14px, 2vw, 28px);
  /* One row that scrolls, not a block that wraps. It inherits .pagenav's
     flex-wrap: wrap, and wrap beats overflow-x: auto — the strip never
     scrolled, it stacked. On a phone that made the index 136px on Haggarti
     and 202px on Schema, sitting under a 62px bar: a third of the screen
     was permanently navigation. It also left the scrollIntoView call in
     design-v3.js with nothing to scroll. */
  flex-wrap: nowrap;
  overflow-x: auto;
  /* So the chapter that call brings into view lands inset from the edge
     rather than flush against it. */
  scroll-padding-inline: clamp(18px, 3vw, 34px);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pagenav-stick::-webkit-scrollbar { display: none; }
.pagenav-stick a {
  padding: 0;
  margin: 0;
  border: 0;
  white-space: nowrap;
  color: var(--chalk-2);
}
.pagenav-stick a:hover { color: var(--chalk); }
.pagenav-stick a[aria-current="true"] { color: var(--blue-lit); font-weight: 600; }

/* ---- The cut: one band divided on the diagonal -------------
   Ontologie is what a thing is, Topologie is where it stands and which
   system said so. They are a pair, so the opening band is a pair: the
   sheet and the same sheet with the lights out, meeting on one slanted
   edge. No new colour, no gradient, no glass. The materials were already
   here; only the edge between them is new.

   Each half carries one plate of the other's ground, because neither axis
   is usable alone: a node that cannot say where it stands, and a place
   that is not itself a node, are both half a record.

   Geometry, and the reason it is written this way: the graphite edge runs
   from 66% at the top to 46% at the bottom, so silver is guaranteed only
   out to 46% and graphite only from 66% in. Text is placed inside those
   guarantees and the 20% the edge sweeps across is left empty. Sizing the
   columns to the average would put a line of prose on the wrong ground at
   one end of the band. -------------------------------------- */

.cut {
  position: relative;
  background: var(--sheet);
  color: var(--ink);
  overflow: clip;
  display: grid;
  grid-template-columns: 36fr 20fr 44fr;
  align-items: start;
  min-height: calc(100svh - var(--gutter) * 2);
}
.cut::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--slab);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 36% 100%);
  pointer-events: none;
}
.cut > * { position: relative; z-index: 1; }
/* Level, not offset. The two halves say the same kind of thing in the same
   order, so they are set as a matched pair and the diagonal alone carries
   the difference. */
.cut-yin { grid-column: 1; align-self: start; }
.cut-yang { grid-column: 3; align-self: start; color: var(--chalk); }

/* The way through sits in the corner the diagonal opens up: bottom right,
   on the dark half, so the ring inverts to chalk. */
.cut-act {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--chalk);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cut-act .disc-ring { background: var(--chalk); color: var(--slab); }
.cut-act:hover .disc-ring { background: var(--blue); color: #fff; transform: translateX(4px); }

.cut-label {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.cut-yin .cut-label { color: var(--ink-2); }
.cut-yang .cut-label { color: var(--chalk-2); }

/* The rhythm is the point here: tight inside a group, generous between
   them. The first pass ran heading, prose, list and plate at one interval
   and the whole half read as a single crammed block against an acre of
   empty ground. */
.cut h2 {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  hyphens: auto;
}
.cut p {
  margin: 0 0 0.9em;
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: 38ch;
}
.cut-yin p { color: var(--ink-2); }
.cut-yang p { color: var(--chalk-2); }
.cut ul {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: clamp(16px, 1.8vw, 22px) 0 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.75;
  border-top: 1px solid var(--rule);
}
.cut-yang ul { border-top-color: var(--rule-dark); }
.cut-yin ul { color: var(--ink-2); }
.cut-yang ul { color: var(--chalk-2); }

/* The man who put the word "Topologie" into print, defining it. No plate,
   no rule, no quotation ornament: it sits on the ground as type, which is
   the whole reason it can carry a different register from the prose around
   it without becoming another component. */
.cite {
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  max-width: 46ch;
}
/* The register shift is made from Archivo's own axes, light and widened
   and set loose, not from a faux italic or the nearest installed serif.
   A real quotation face would be a third font file and a third voice in a
   system that documents two; that is the user's call, not a default. */
.cite q {
  display: block;
  font-family: var(--quote);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.44;
  letter-spacing: 0;
  quotes: "\201E" "\201C";
}
.cut-yin .cite q { color: var(--ink); }
.cut-yang .cite q { color: var(--chalk); }
.cite cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cut-yin .cite cite { color: var(--ink-2); }
.cut-yang .cite cite { color: var(--chalk-2); }

/* ---- The facing-page spread -------------------------------
   The subpages are dossiers, and a dossier is read across a spread: the
   chapter title runs the full width at the head, then two pages sit under
   a drawn fold. Verso argues in continuous prose, recto itemises the
   mechanism. Nothing here is set narrower than it reads.

   This replaces .split on the subpages and is the reason it had to:
   .split gave its second column 60% of the band, .row then quartered that
   column, and .row p capped what survived at 46ch. Description text was
   landing at forty characters and stacking seven ragged lines against
   300px of dead sheet. The homepage keeps .split and .row, whose copy is
   two lines long and never hit the floor. ------------------- */

/* The chapter title spans the spread. A display heading in a half-page
   column fits thirteen characters per line at the 68px ceiling, which is
   what built the towers of orphaned words on every subpage. */
.chapter { margin-bottom: clamp(26px, 3.4vw, 44px); }
.chapter .display { max-width: 24ch; }
.chapter-lede {
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  max-width: 42ch;
}
.band-sheet .chapter-lede { color: var(--ink); }
.band-slab  .chapter-lede { color: var(--chalk); }

.spread {
  display: grid;
  /* Not 1fr 1fr. The verso carries one statement and the recto carries the
     whole mechanism, so an even fold left half the sheet empty. */
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  column-gap: clamp(34px, 5vw, 84px);
  align-items: start;
  padding-top: clamp(26px, 3.4vw, 44px);
  border-top: 1.5px solid var(--rule-hard);
  /* The fold. Drawn as a background rather than a border on the recto so it
     runs the height of the taller page instead of stopping at the shorter
     one. 38.27% is where the gutter's centre falls at this ratio. */
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 1px 100%;
  background-position: 38.27% 0;
  background-repeat: no-repeat;
}
.band-slab .spread { border-top-color: var(--chalk-2); background-image: linear-gradient(var(--rule-dark), var(--rule-dark)); }

/* Verso: the statement. Set in the claim voice, because a 15px sentence
   alone in a half-page column reads as an empty page rather than a quiet
   one. The size step against the recto is the spread's whole grammar. */
.spread-verso .lede {
  margin: 0 0 0.85em;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.028em;
  max-width: 24ch;
}
.band-sheet .spread-verso .lede { color: var(--ink); }
.band-slab  .spread-verso .lede { color: var(--chalk); }
.spread-verso p {
  margin: 0 0 1.05em;
  font-size: 0.875rem;
  line-height: 1.64;
  max-width: 46ch;
}
.spread-verso p:last-child { margin-bottom: 0; }
.band-sheet .spread-verso p { color: var(--ink-2); }
.band-slab  .spread-verso p { color: var(--chalk-2); }

/* Recto: the mechanism, one entry at a time, each hung off its own name.
   No number column and no mono cell stranded at the far margin; the field
   an entry produces is stated under the sentence that earns it. */
.stack { border-bottom: 1px solid var(--rule); }
.band-slab .stack { border-color: var(--rule-dark); }
.stack > * {
  display: grid;
  grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(18px, 2.1vw, 26px) 0;
  border-top: 1px solid var(--rule);
}
.band-slab .stack > * { border-color: var(--rule-dark); }
.stack:first-child > *:first-child { border-top: 0; padding-top: 0; }
.stack h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.025em;
  /* "Automatisierungspyramide" is one 24 character word with no break
     opportunity, and it ran straight into the prose column. Same fix the
     row grammar already needed for "Personenbezug". */
  hyphens: auto;
  overflow-wrap: break-word;
}
.stack p { margin: 0; font-size: 0.9375rem; line-height: 1.6; max-width: 56ch; }
.band-sheet .stack p { color: var(--ink-2); }
.band-slab  .stack p { color: var(--chalk-2); }
.stack-out {
  display: block;
  grid-column: 2;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
}
.band-sheet .stack-out { color: var(--ink-2); }
.band-slab  .stack-out { color: var(--chalk-2); }

/* The cover spread's register: what this page holds, said in the words the
   corner indexes already use. It replaces the tab strip, which named six
   sections without telling the reader what was in any of them. */
.register { border-bottom: 1px solid var(--rule); }
.band-slab .register { border-color: var(--rule-dark); }
.register a {
  display: grid;
  grid-template-columns: 2.4rem minmax(6.5rem, auto) 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: color 180ms var(--ease);
}
.band-slab .register a { border-color: var(--rule-dark); }
.register a:first-child { border-top: 0; padding-top: 0; }
.register-n { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; }
.register-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.register-note { font-size: 0.8125rem; line-height: 1.45; }
.band-sheet .register-n, .band-sheet .register-note { color: var(--ink-2); }
.band-slab  .register-n, .band-slab .register-note { color: var(--chalk-2); }
.register a:hover .register-name { color: var(--blue); }
.band-slab .register a:hover .register-name { color: var(--blue-lit); }

/* ---- Responsive ------------------------------------------- */

@media (max-width: 1080px) {
  /* .regimes is not in this list: it is a flex track, and setting
     grid-template-columns on it did nothing. Its narrow behaviour is the
     rail rule in the 720px block. */
  .ledger, .grid4, .menu-cols, .regime-cols { grid-template-columns: repeat(2, 1fr); }
  .hero-body { grid-template-columns: 1fr 1fr; }
  .hero-act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .split, .page-hero, .duo, .duo-wide, .stmt, .rail, .def { grid-template-columns: 1fr; }
  .page-hero .display, .stmt h2, .stmt > p { max-width: none; }
  /* The cut turns horizontal. A diagonal across a narrow column would put
     every line at a different width, which is the failure this whole pass
     was about. The slant survives as the dark half's own top edge, so it
     stays a cut rather than a stacked pair, and it no longer depends on a
     percentage of a band whose height now follows its content. */
  .cut { grid-template-columns: 1fr; min-height: 0; }
  .cut::before { display: none; }
  .cut-yin { grid-column: 1; padding-bottom: clamp(30px, 6vw, 56px); }
  .cut-yang {
    grid-column: 1;
    background: var(--slab);
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
    margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1);
    padding: clamp(52px, 11vw, 84px) var(--pad) var(--pad);
  }
  .cut p, .seed { max-width: none; }
  /* Pinned to the corner it collided with the citation the moment the dark
     half grew. Once the halves stack there is no corner to pin to. */
  .cut-act {
    position: static;
    margin-top: clamp(26px, 5vw, 40px);
    justify-content: flex-start;
  }

  /* One page wide: the fold has nothing left to divide, and the verso's
     passage is followed by the recto's list rather than set beside it. */
  .spread, .band-slab .spread { grid-template-columns: 1fr; row-gap: clamp(30px, 5vw, 48px); background-image: none; }
  .chapter .display, .chapter-lede, .spread-verso p, .spread-verso .lede, .stack p { max-width: none; }
  .row { grid-template-columns: 2.4rem 1fr; }
  .row p { grid-column: 2; max-width: none; }
  .row-out { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --bar: 62px; }
  .topbar-cta { padding: 0 16px; font-size: 0.875rem; }
  /* 44px minimum on both axes: these are the only two controls on the bar. */
  .topbar-icon { width: 44px; min-height: 44px; }
  .topbar-act { padding: 9px; gap: 6px; }
  .hero { min-height: 0; }
  .hero-title { max-width: none; text-align: left; margin-left: 0; }
  .hero-body { grid-template-columns: 1fr; }
  .menu-cols { grid-template-columns: 1fr; gap: 26px; }
  .menu-cta { flex-direction: column; align-items: flex-start; }
  /* One column: the section label drops under the entry it names. */
  .hit { grid-template-columns: 1fr; }
  .hit em { grid-column: 1; grid-row: auto; order: 1; justify-self: start; margin-top: 7px; }
  .pagenav { gap: 22px 20px; }
  .arrowlink { min-width: 100%; }
  .hero-act { flex-direction: column; align-items: flex-start; text-align: left; }
  /* .hero-est carries align-self:end for the grid; in this column flex
     container that resolves to the right edge. */
  .hero-act .hero-est { align-self: start; text-align: left; }
  .hero-mark { font-size: 7rem; bottom: auto; top: 42%; }
  .ledger, .grid4, .regime-cols { grid-template-columns: 1fr; }

  /* The conveyor stops being a conveyor. It pauses on :hover and
     :focus-within, and a phone has neither, so the standards ran past the
     reader at 52s a lap inside a 374px window holding 5842px of track,
     clipped on both sides, with no way to hold a card still. Same rail the
     reduced-motion branch already builds: a row you push yourself, one card
     at a time, with the next card's edge showing as the only honest signal
     that there is more. The seamless-loop clone is a duplicate list once
     nothing is looping, so it goes. */
  .regime-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain;
    -webkit-mask: none;
    mask: none;
  }
  .regimes { animation: none; }
  .regimes > .regime { scroll-snap-align: start; width: min(72vw, 300px); min-height: 230px; }
  .regimes > .regime[aria-hidden="true"] { display: none; }

  /* A fixed ratio squeezed the glyph onto its own label. Let the card find its
     height from its content and size the number down to clear the caption. */
  .regime { aspect-ratio: auto; min-height: 230px; }
  .regime-glyph { font-size: min(calc(96cqw / var(--d, 4)), 24cqw); top: 46%; }
  .regime-foot span { min-height: 0; }
  .chain-note { margin-left: 0; }
  .foot { flex-direction: column; }
  /* The ghost wordmark was clipped into unreadable grey fragments. */
  .hero-mark { display: none; }
  .stmt h2, .page-hero .display { font-size: clamp(1.875rem, 8.4vw, 2.375rem); }
  /* The note wraps to three lines beside a two-word name and the rows stop
     lining up; stack the register instead. */
  .register a { grid-template-columns: 2.2rem 1fr; row-gap: 5px; }
  .register-note { grid-column: 2; }
  /* A 7rem hanging head against a 1fr column of prose is two narrow columns
     at this width, which is the failure this whole system replaced. */
  .stack > * { grid-template-columns: 1fr; row-gap: 9px; }
  .stack-out { grid-column: 1; }
}

/* The corner index is a frame, and a frame needs two corners to sit in.
   Below this width there is one column, and the right-hand half — a whole
   sentence set uppercase at 0.11em — was landing as three ragged
   right-aligned lines of tracked-out caps above every chapter. Dropped to
   one column it reads as what it is: a caption under the section number. */
@media (max-width: 560px) {
  .band-head { display: block; }
  .band-head span:last-child {
    display: block;
    margin-top: 7px;
    text-align: left;
    letter-spacing: 0.06em;
  }
}

/* ============================================================
   Document mode — the subpages.
   The homepage keeps the black table and its inset cards. Every other page
   reads the way a product page does: one continuous light ground, full width,
   chapters separated by a hairline rather than by a change of card, and a
   display voice set light and large instead of tight and bold.
   ============================================================ */

.doc {
  --pagepad: clamp(22px, 5vw, 88px);
  background: var(--sheet);
  padding: 0;
}

.doc .topbar {
  position: sticky;
  inset: auto;
  top: 0;
  height: auto;
  min-height: var(--bar);
  padding: 0 var(--pagepad);
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  background: rgba(237, 238, 241, 0.88);
  box-shadow: none;
}
.doc .topbar-mark { color: var(--ink); }
.doc .topbar-cta { background: var(--ink); color: var(--sheet); }
.doc .topbar-cta:hover { background: var(--blue); color: #fff; }
.doc .topbar-icon { border-color: rgba(19,21,25,0.22); color: var(--ink); }
.doc .topbar-icon:hover { border-color: rgba(19,21,25,0.5); background: rgba(19,21,25,0.05); }
.doc .topbar a:focus-visible,
.doc .topbar button:focus-visible { outline-color: var(--blue); }
.doc body::before, .doc::before { display: none; }

/* Bands stop being cards. */
.doc .band,
.doc .band-sheet,
.doc .band-slab {
  background: none;
  color: var(--ink);
  border-radius: 0;
  margin: 0;
  overflow: visible;
  padding: clamp(56px, 8vw, 128px) var(--pagepad);
  border-top: 1px solid var(--rule);
}
.doc .band:first-of-type,
.doc .band-first,
.doc .hero { border-top: 0; padding-top: clamp(40px, 5vw, 72px); }

/* The one dark band is the close, the way a product page ends on its footer. */
.doc .band:last-of-type {
  background: var(--slab);
  color: var(--chalk);
  border-top: 0;
}
.doc .band:last-of-type .display,
.doc .band:last-of-type .band-head span:first-child { color: var(--chalk); }
.doc .band:last-of-type .band-head { color: var(--chalk-2); }

/* Display: large and light, not tight and bold. */
.doc .display {
  font-size: clamp(2.75rem, 7.4vw, 5.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.doc .page-hero { grid-template-columns: 1fr minmax(300px, 34%); gap: clamp(28px, 5vw, 96px); }
.doc .page-hero .display { max-width: 14ch; }
.doc .page-hero-claim { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.22; }

/* Section nav: the current chapter is ruled from above. */
.doc .pagenav { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(56px, 8vw, 120px); }
.doc .pagenav a {
  padding: 14px 0 0;
  margin: 0;
  border-bottom: 0;
  border-top: 2px solid transparent;
  font-size: 0.9375rem;
}
.doc .pagenav a[aria-current="page"] { border-top-color: var(--ink); color: var(--ink); }

/* Rules inside a band read as chapter breaks, not decoration. */
.doc .hr { margin: clamp(56px, 7vw, 104px) 0; background: var(--rule); }
.doc .band-head { color: var(--ink-2); margin-bottom: clamp(28px, 4vw, 56px); }
.doc .rows, .doc .row, .doc .defs, .doc .def { border-color: var(--rule); }
.doc .row h3, .doc .duo h3 { font-weight: 500; letter-spacing: -0.025em; }
/* The figures were heavier than the page title, which inverts the hierarchy. */
.doc .ledger-n { font-weight: 500; letter-spacing: -0.04em; }
.doc .ledger-cell { border-top-width: 1px; }
.doc .ledger-cell h3 { font-weight: 500; }
.doc .grid4 li, .doc .row p, .doc .duo p, .doc .def dd { color: var(--ink-2); }
.doc .row-n, .doc .row-out { color: var(--ink-2); }

@media (max-width: 720px) {
  .doc .topbar { padding: 0 var(--pagepad); }
  .doc .pagenav { gap: 16px 20px; }
}

/* Document mode, narrow. These follow the doc block, so they win over its
   own grid declarations the way the base responsive rules win over the base. */
@media (max-width: 1080px) {
  .doc .page-hero { grid-template-columns: 1fr; }
  .doc .page-hero .display { max-width: none; }
}
@media (max-width: 720px) {
  .doc .display { font-size: clamp(2.25rem, 10vw, 3rem); }
  .doc .band, .doc .band-sheet, .doc .band-slab { padding: clamp(44px, 11vw, 72px) var(--pagepad); }
}

/* ---- Mobile floor -----------------------------------------
   Two things a desktop layout gets away with and a phone does not:
   12px running text, and controls that are 30px tall. Verified at a real
   390px viewport, which Chrome's headless window-size cannot produce and an
   iframe can. ------------------------------------------------ */
@media (max-width: 720px) {
  /* Running text stops shrinking. The micro label keeps its size because it
     is a label, not something anyone reads a paragraph of. */
  .row p, .duo p, .def dd, .grid4 li, .stack p, .spread-verso p,
  .prose p, .prose li, .plate p, .chain-note, .og-caveat,
  .ledger-cell p, .regime-foot span, .register-note, .jump-text,
  .hero-est, .foot-copy, .regime-source { font-size: 0.875rem; line-height: 1.6; }

  /* Every control clears 44px. These were landing at 29 to 34. */
  .arrowlink, .regime-chip, .menu-side a, .foot a, .pagenav a, .disc,
  .menu-tree a, .register a, .skip {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .register a { display: grid; align-content: center; }
  .menu-tree a { align-items: baseline; }
  .foot-col nav a { padding: 11px 0; }

  /* A door set inside an 11px mono line is a 14px tap target. It cannot be
     given a min-height without opening a hole in the line it belongs to, so
     the target grows and the layout does not: padding out, margin back. */
  .stack-out a {
    display: inline-block;
    padding: 15px 0;
    margin: -15px 0;
  }
}