/* ==========================================================================
   Quantile Labs
   Derived from docs/design-plan.md. One hue, six steps. Emphasis is spent on
   limitations, not on claims.
   ========================================================================== */

/* Google Sans Flex, the typeface Google DeepMind publishes in. Variable on both
   weight (1–1000) and optical size (6–144); optical sizing is left to the browser. */
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/assets/fonts/google-sans-flex.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/assets/fonts/google-sans-flex-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.woff2) format('woff2')}

:root {
  /* Palette: a single violet hue in six steps. See design-plan.md §1. */
  --paper:  #F2F1F5;
  --vellum: #E4E2EA;
  --rule:   #C9C5D4;
  --slate:  #605A6E;
  --ink:    #201E28;
  --tail:   #56287A;
  --tail-lift: #B79BD6; /* the only tint permitted on ink surfaces */

  --display: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif;
  --body: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The measure opens up with the viewport: ~70ch on a laptop, ~95ch on a wide
     display, so the column fills the document grid instead of sitting in it. */
  --measure: clamp(34rem, 14rem + 42vw, 48rem);
  --shell: 1300px;
  --rail: 200px;
  --gap: clamp(32px, 5vw, 72px);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* The smallest comfortable touch target. Applied to link rows on coarse
     pointers, where a 20px line of text is not something a thumb can hit. */
  --tap: 44px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  /* The default grey flash is heavy over paper; tint it with the hue instead. */
  -webkit-tap-highlight-color: rgba(86, 40, 122, 0.12);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--tail); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--tail);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* --- typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.875rem); letter-spacing: -0.026em; }
h2 { font-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.6875rem); }
h3 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); letter-spacing: -0.008em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

/* Hover states live together at the foot of this file, behind a capability
   query. A touch browser has no hover to leave, so an unguarded :hover sticks
   to whatever was tapped last until something else is tapped. */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

strong { font-weight: 600; }

/* Mono is reserved for measurements, metadata, and labels. */
.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.num {
  font-family: var(--mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--measure);
}

/* --- layout --------------------------------------------------------------- */
/* The gutter never goes below the device's safe area, so a landscape phone does
   not run the text under the notch or the home indicator. */
.shell {
  --gutter: clamp(20px, 5vw, 56px);
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5);
  font-family: var(--display); font-size: 0.875rem;
  z-index: 10;
}
.skip:focus { left: var(--s5); top: var(--s5); }

/* The document grid: a metadata rail and a measured column, left-aligned so the
   page keeps a wide right margin and reads as a document, not a landing page. */
.doc {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* Running text is held to the measure. Tables and figures are data, not prose,
   and may use the whole column. */
.prose > *, .section > * { max-width: var(--measure); }
.prose > .section,
.prose > .table-wrap, .section > .table-wrap,
.prose > .fig, .section > .fig,
.prose > .rows, .section > .rows { max-width: none; }

.rail {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--slate);
}
.rail dl { display: grid; gap: var(--s4); }
.rail dt {
  font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate);
}
.rail dd { color: var(--ink); }

.rail--sticky { position: sticky; top: var(--s9); }

.rail__index { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.rail__index a {
  display: grid;
  grid-template-columns: 1.9em 1fr;
  gap: var(--s2);
  text-decoration: none;
  color: var(--slate);
  padding-block: 2px;
}
.rail__index span { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .rail--sticky { position: static; }
  .rail { padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
  .rail dl { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .rail__index { display: none; }
}

/* --- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s5);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s7);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__mark { width: 26px; height: 26px; flex: none; }

.masthead nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}
.masthead nav a {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  padding-block: 2px;
}
.masthead nav a[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--tail);
}

/* --- page header ---------------------------------------------------------- */
.page-head { padding-block: clamp(var(--s7), 8vw, var(--s9)) var(--s7); }
.page-head h1 { max-width: 24ch; }
.page-head .lede { margin-top: var(--s5); }
.page-head .label { display: block; margin-bottom: var(--s4); }

main { padding-bottom: var(--s10); }

/* --- prose ---------------------------------------------------------------- */
.prose > * + * { margin-top: var(--s5); }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s7); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15em; display: grid; gap: var(--s3); }
.prose li::marker { color: var(--slate); }
.prose a { text-decoration-color: var(--rule); }

.section {
  padding-top: var(--s7);
  margin-top: var(--s8);
}
.section:first-of-type { margin-top: 0; padding-top: 0; }
.section > * + * { margin-top: var(--s5); }
/* A section already opens with its own padding and margin. Without this, the
   heading that opens it adds the .prose h2 margin on top of both and the break
   comes to 176px — deliberate at 1300px, a hole at 390px. */
.section > *:first-child { margin-top: 0; }
.section > * + .limits { margin-top: var(--s6); }
.section > * + .table-wrap { margin-top: var(--s6); }

/* separates blocks by space alone — no drawn line */
.rule { border: 0; height: 0; margin-block: var(--s8); }

/* --- the hatch: "this is the part that matters" --------------------------- */
/* Used in exactly three places: the tail of Fig. 1, the limits block, and the
   "cannot claim" cells of the access table. Nowhere else. */
.hatch-swatch {
  display: inline-block;
  width: 1.4em; height: 0.72em;
  vertical-align: -0.02em;
  border: 1px solid var(--tail);
  background-image: repeating-linear-gradient(45deg, var(--tail) 0 1px, transparent 1px 6px);
}

.limits {
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--vellum);
  border-left: 2px solid var(--tail);
  background-image: repeating-linear-gradient(45deg, rgba(86, 40, 122, 0.09) 0 1px, transparent 1px 7px);
}
.limits__label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tail);
  display: block; margin-bottom: var(--s3);
}
/* The caveat is the heaviest text in the section it qualifies. */
.limits p {
  font-weight: 600;
  font-size: 1.02em;
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--measure);
}
.limits p + p { margin-top: var(--s3); }

/* --- figure --------------------------------------------------------------- */
.fig { margin-block: var(--s8); }
/* The head rule is held to the plot width so it reads as the figure's own frame
   and not as a section divider. */
.fig__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  max-width: 940px;
}
.fig__title { font-family: var(--display); font-size: 0.9375rem; font-weight: 500; }
.fig__plot { margin-top: var(--s5); max-width: 940px; }

.plot { width: 100%; height: auto; }
.plot__grid line { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.plot__axis { stroke: var(--slate); stroke-width: 1; }
.plot__hatch { stroke: var(--tail); stroke-width: 1; opacity: 0.55; }
.plot__tail-edge { stroke: var(--tail); stroke-width: 1; stroke-dasharray: 3 3; }
.plot__ecdf { fill: none; stroke: var(--slate); stroke-width: 1.5; }
.plot__ecdf--tail { stroke: var(--tail); stroke-width: 2.5; }
.plot__mean { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 4; }
.plot__tick, .plot__axis-title, .plot__note {
  font-family: var(--mono); font-size: 11px; fill: var(--slate);
}
.plot__axis-title { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.plot__note { font-size: 11.5px; fill: var(--ink); }
.plot__note--tail {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; fill: var(--tail);
}

.fig__caption { margin-top: var(--s5); max-width: var(--measure); }
.fig__key { font-weight: 600; }
.fig__swatch {
  display: inline-block; width: 1.4em; height: 0.72em;
  margin-right: 0.45em; vertical-align: -0.02em;
  border: 1px solid var(--tail);
  background-image: repeating-linear-gradient(45deg, var(--tail) 0 1px, transparent 1px 6px);
}
.fig__source {
  margin-top: var(--s3);
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate);
}
.fig__data { margin-top: var(--s5); }
.fig__data summary {
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate);
  cursor: pointer; width: fit-content;
}
.fig__data .table { margin-top: var(--s4); }

/* --- tables --------------------------------------------------------------- */
/* A table wider than the column scrolls. On a phone there is no scrollbar to
   tell you so, so the edge carries a shadow: two paper-coloured covers pinned to
   the content (background-attachment: local) sit over two shadows pinned to the
   box, and each shadow is revealed only once the content has scrolled off that
   side. Nothing is drawn when the table fits. */
.table-wrap {
  overflow-x: auto;
  margin-top: var(--s5);
  background-image:
    linear-gradient(to right, var(--paper) 40%, rgba(242, 241, 245, 0)),
    linear-gradient(to left,  var(--paper) 40%, rgba(242, 241, 245, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(32, 30, 40, 0.18), rgba(32, 30, 40, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(32, 30, 40, 0.18), rgba(32, 30, 40, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.table caption {
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate);
  text-align: left; padding-bottom: var(--s3);
}
.table th, .table td {
  text-align: left; vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.table thead th {
  font-family: var(--display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--slate);
  white-space: nowrap;
}
.table tbody th { font-family: var(--display); font-size: 0.875rem; font-weight: 500; }

/* Access-level table: the "cannot claim" row carries the hatch. */
.table--access td { min-width: 15ch; }
.table--access .cannot {
  background-image: repeating-linear-gradient(45deg, rgba(86, 40, 122, 0.1) 0 1px, transparent 1px 7px);
  padding-left: var(--s3);
  font-weight: 600;
}
.table--access tbody th { white-space: nowrap; }

/* --- findings ledger ------------------------------------------------------ */
/* A ruled ledger rather than a card grid: it looks deliberate at one entry and
   still scans at fifty. */
.ledger { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.entry { border-bottom: 1px solid var(--rule); padding-block: var(--s6); }
.entry__meta {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate);
  letter-spacing: 0.04em;
}
.entry__access { text-transform: uppercase; color: var(--tail); font-weight: 500; }
.entry__title { margin-top: var(--s3); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); }
.entry__title a { text-decoration: none; }
.entry__system { margin-top: var(--s2); color: var(--slate); font-size: 0.9375rem; }
.entry__finding { margin-top: var(--s4); max-width: var(--measure); }
.entry__links {
  margin-top: var(--s4); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-family: var(--mono); font-size: 0.75rem;
}
.entry__links a { color: var(--tail); }

.empty {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--tail);
  background: var(--vellum);
  padding: var(--s6);
  max-width: var(--measure);
}
.empty h2 { font-size: 1.0625rem; }
.empty p { margin-top: var(--s3); color: var(--ink); }
.empty .label { display: block; margin-bottom: var(--s3); color: var(--tail); }

/* --- definition rows (sectors, careers, contact routes) ------------------- */
.rows { display: grid; }
.row {
  padding-block: var(--s6);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { font-size: 1.1875rem; }
.row__what {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tail);
}
.row p { max-width: var(--measure); }

/* --- form ----------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); max-width: 34rem; margin-top: var(--s6); }
.field { display: grid; gap: var(--s2); }
.field > span {
  font-family: var(--display); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.01em;
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s3) var(--s4);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--tail);
}
.field textarea { resize: vertical; min-height: 6em; }
.field__hint { font-family: var(--mono); font-size: 0.75rem; color: var(--slate); }

.button {
  font-family: var(--display); font-size: 0.875rem; font-weight: 600;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: var(--s3) var(--s6);
  cursor: pointer;
  justify-self: start;
  min-height: var(--tap);
}

/* --- footer --------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s8) var(--s7);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--gap);
}
.foot h2 {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
}
.foot ul { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: var(--s3); }
.foot a { font-family: var(--display); font-size: 0.875rem; text-decoration: none; color: var(--ink); }
.foot__about { max-width: 30ch; font-size: 0.9375rem; color: var(--slate); margin-top: var(--s4); }
.foot__bottom {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5);
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate);
}

/* --- small screens -------------------------------------------------------- */
/* No hamburger. The four links fit if the header is banded rather than left to
   wrap raggedly: wordmark on its own line, nav below a hairline. The band is
   sized by the touch target rather than by padding, so the header buys its
   height back: the nav row IS the 44px target, with no padding around it. */
@media (max-width: 760px) {
  /* The upper half of the spacing scale compresses. A 64px break is a
     considered pause across a 1300px page and a hole down a 390px one, where
     the reader sees a third of a screen at a time. The small steps, which set
     the rhythm inside a block, are left alone. */
  :root {
    --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;
  }

  /* Clears the sticky header — measured, not guessed. */
  html { scroll-padding-top: 108px; }
  .masthead { padding-block: var(--s3) 0; }
  .masthead__inner { display: block; }
  .wordmark { font-size: 1rem; padding-block: var(--s1); }
  .wordmark__mark { width: 22px; height: 22px; }
  .masthead nav {
    margin-top: var(--s2);
    border-top: 1px solid var(--rule);
    padding-block: 0;
  }
  .masthead nav ul { gap: 0 var(--s5); }
  .masthead nav a {
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    position: relative;
    padding-block: 0;
  }
  /* The current-page rule belongs under the word, not at the foot of a 44px
     hit area, so it is drawn rather than borrowed from the box. */
  .masthead nav a[aria-current='page'] { box-shadow: none; }
  .masthead nav a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    border-bottom: 1px solid var(--tail);
  }

  .page-head { padding-block: var(--s7) var(--s6); }
  main { padding-bottom: var(--s8); }

  /* 11px mono is fine print in the hand. Metadata lifts one step so it stays
     readable without starting to compete with the text it labels. */
  .label, .limits__label, .row__what, .foot h2, .rail dt,
  .fig__data summary, .fig__source, .table caption, .field__hint,
  .entry__meta, .entry__links, .foot__bottom { font-size: 0.75rem; }
  .rail { font-size: 0.8125rem; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus.
     Anything smaller costs the reader a pinch to get back. */
  .field input, .field select, .field textarea { font-size: 1rem; }
  .form { gap: var(--s6); }

  /* 32px of side padding inside a 350px column leaves too little for the
     sentence the block exists to carry. */
  .limits { padding: var(--s5); }
  .empty { padding: var(--s5); }

  /* Stacking three groups of stacked links made the footer a very long scroll.
     Keep the grouping, but set each group's links inline under its heading:
     three short bands instead of eleven rows, and no orphaned column. */
  .foot { padding-block: var(--s7) var(--s6); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .foot__about { max-width: none; margin-top: var(--s3); }
  .foot ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin-top: var(--s3);
  }
  .foot__bottom { margin-top: var(--s6); }
}

/* The access table is a 3x3 of full sentences. At 350px it is 594px wide and
   has to be dragged sideways to be read, which is the worst way to present the
   one table on the site that bounds what we are allowed to claim. Below 640px
   it becomes what it always was in substance: three claims, each answered for
   three tiers. The column heading moves into each cell via data-tier. */
@media (max-width: 640px) {
  .table--access,
  .table--access caption,
  .table--access tbody,
  .table--access tr,
  .table--access tbody th,
  .table--access td { display: block; }

  .table--access thead { display: none; }

  .table--access tbody tr {
    border-top: 1px solid var(--rule);
    padding-block: var(--s5);
  }
  .table--access tbody tr:first-child { border-top: 1px solid var(--slate); }

  .table--access tbody th {
    white-space: normal;
    border-bottom: 0;
    padding: 0 0 var(--s4);
    font-size: 1rem;
    font-weight: 600;
  }

  .table--access td {
    min-width: 0;
    border-bottom: 0;
    padding: 0 0 var(--s4);
  }
  .table--access tr td:last-child { padding-bottom: 0; }

  .table--access td::before {
    content: attr(data-tier);
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: var(--s1);
  }
  /* The hatch still marks the cells we may not claim from. */
  .table--access .cannot { padding-left: var(--s3); padding-bottom: var(--s4); }
  .table--access .cannot::before { color: var(--tail); }
}

/* A thumb, not a cursor. Rows of links get a target you can actually hit; the
   vertical gap goes to zero because the targets now supply the separation. */
@media (pointer: coarse) {
  .foot ul a,
  .entry__links a,
  .rail__index a { min-height: var(--tap); display: inline-flex; align-items: center; }
  .foot ul { row-gap: 0; }
  .entry__links { row-gap: 0; }
  .fig__data summary { padding-block: var(--s2); }
}

/* A phone held sideways has around 390px of height. A sticky header costs a
   quarter of it, so it scrolls away with the rest of the page. */
@media (max-height: 520px) and (orientation: landscape) {
  .masthead { position: static; }
  html { scroll-padding-top: var(--s5); }
}

/* --- hover ---------------------------------------------------------------- */
/* Gathered here, and only for pointers that can leave an element. */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--tail); text-decoration-thickness: 2px; }
  .wordmark:hover { color: var(--tail); }
  .masthead nav a:hover { color: var(--ink); }
  .rail__index a:hover { color: var(--tail); }
  .entry__title a:hover { color: var(--tail); text-decoration: underline; }
  .foot a:hover { color: var(--tail); text-decoration: underline; }
  .fig__data summary:hover { color: var(--tail); }
  .button:hover { background: var(--tail); border-color: var(--tail); }
}

/* Touch has no hover to show intent with, so the press itself answers. */
.button:active { background: var(--tail); border-color: var(--tail); }

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

/* reference lines and annotation leaders in plots */
.plot__threshold { stroke: var(--tail); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.75; }
.plot__ref { font-family: var(--mono); font-size: 11px; fill: var(--slate); }
.plot__ref--tail { fill: var(--tail); font-weight: 500; }
.plot__leader { fill: none; stroke: var(--tail); stroke-width: 1; opacity: 0.6; }
.plot__cliff { stroke: var(--tail); stroke-width: 2.5; }

/* The ledger is a list of records, not prose: undo the prose list treatment. */
.prose .ledger { display: block; padding-left: 0; gap: 0; }
.prose .entry__links {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding-left: 0;
}

/* A horizontally scrolling table must be reachable by keyboard, so the wrapper
   is focusable. Suppress the focus ring when the pointer put focus there. */
.table-wrap:focus { outline: none; }
.table-wrap:focus-visible { outline: 2px solid var(--tail); outline-offset: 2px; }

/* --- Quantile Report block ------------------------------------------------ */
/* Every evaluation reports the same five figures plus the Gap Ratio. The home
   figure prints them so the page demonstrates the specification. */
.qr { margin-top: var(--s6); max-width: 40rem; }
.qr__head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
}
.qr__spec { font-family: var(--mono); font-size: 0.6875rem; color: var(--slate); }
.qr__table { margin-top: 0; font-size: 0.875rem; }
.qr__table tbody th {
  font-family: var(--mono); font-weight: 500; font-size: 0.8125rem;
  white-space: nowrap; width: 5rem;
}
.qr__table td:first-of-type { width: 6rem; text-align: right; padding-right: var(--s5); }
.qr__table td:last-child { color: var(--slate); }
.qr__gap th, .qr__gap td { border-bottom: 0; padding-top: var(--s4); font-weight: 600; }
.qr__gap th { color: var(--tail); }
.qr__gap td:last-child { color: var(--ink); }
.qr__gap { border-top: 1px solid var(--rule); }

.plot__mark { fill: var(--tail); }

/* Markdown-authored tables and inline code in findings, notes, and methods. */
.prose table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  margin-top: var(--s5);
}
.prose table th, .prose table td {
  text-align: left; vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.prose table thead th {
  font-family: var(--display); font-size: 0.8125rem; font-weight: 600;
  border-bottom: 1px solid var(--slate); white-space: nowrap;
}
code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--vellum); padding: 0.1em 0.3em;
}
.limits code { background: transparent; padding: 0; }
/* A status-only empty state carries no body copy, so drop the label's gap. */
.empty .label:last-child { margin-bottom: 0; }