/* D²CEBL — one stylesheet, whole site.
   Values transcribed from the design canvas "D2CEBL Styleguide" v58 (1789997810-4c77).
   Boards kept in design/boards/ for reference. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-var-latin.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: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-var-latin-italic.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var-latin.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;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* brand — unchanged */
  --blue: #0565E1;
  --blue-hover: #0450B4;
  --blue-pale: #C9DCF7;        /* second chart series, focus halo */
  --cta: #FFDA2E;
  --page: #FFFFFF;
  --band: #FAFCFF;

  /* neutral ramp — #000000 is not in this stylesheet */
  --ink: #0E1A25;              /* headlines */
  --body: #22303F;             /* body copy, 13.4:1 */
  --mid: #454C57;              /* deck, nav resting */
  --quiet: #5B6B7F;            /* captions, units, labels, 5.4:1 */
  --border: #CDD5DF;           /* borders, chart axis */
  --hair: #E1ECFB;             /* table rules, panel borders */

  --error: #B42318;            /* errors only */
  --placeholder: #8A97A6;

  /* type */
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* measures — prose 720, exhibits 1120 */
  --prose: 720px;
  --exhibit: 1120px;
  --gutter: 24px;
  --measure: 68ch;

  --radius-panel: 12px;
  --radius-button: 6px;
}

/* One breakpoint. Below it the 390 treatment; above it prose caps at 720
   and exhibits grow to 1120 — which is what the 1280 board already is.
   800 is where the single-gutter mobile measure reaches 68ch. */
@media (min-width: 800px) {
  :root { --gutter: clamp(32px, 10vw - 48px, 80px); }
}

/* ---------------------------------------------------------------- base */

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

/* The header is pinned and 77px tall including its rule, so every in-page
   anchor would otherwise land behind it. Exactly 77 and not a pixel more: the
   sections butt against each other, so any slack here is not white space, it is
   the bottom of the section above showing under the header. At 77 the target's
   top edge meets the header's bottom rule and its own top padding — 36 at 390,
   64 above it — becomes the gap over the heading, which is what the reader sees
   scrolling to the same place by hand. */
:target, [id] { scroll-margin-top: 77px; }

/* The scrollbar's width is reserved on every page, so a page too short to
   scroll does not sit 15px wider than the rest and jump sideways on arrival.
   Overlay scrollbars, and browsers without the property, are unaffected. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--body);
  background: var(--page);
}

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--page);
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: calc(var(--exhibit) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--prose); }

/* A full-bleed band: rules and tints reach both screen edges, content stays
   in the gutter. On desktop this is just a normal section. */
.band {
  background: var(--band);
  border-block: 1px solid var(--hair);
}

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

.h1 {
  margin: 0;
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.h2 {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h3 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ink);
}

.deck {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--mid);
  max-width: var(--prose);
}

.lbl {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}

.cap {
  font-size: 13px;
  line-height: 20px;
  color: var(--quiet);
}

.mono {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

p { margin: 0; font-size: 17px; line-height: 28px; max-width: var(--measure); }

/* The superscript 2 in D²CEBL. position:relative, not vertical-align,
   which would grow the line box. */
.sup {
  font-size: 0.5em;
  position: relative;
  top: -0.85em;
}

/* Links: underlined in prose, never in nav rows, footers and caption rows. */
.nolink { text-decoration: none; font-weight: 600; }

@media (min-width: 800px) {
  .h1 { font-size: 56px; line-height: 60px; letter-spacing: -0.022em; }
  .h2 { font-size: 28px; line-height: 34px; }
  .deck { margin-top: 24px; font-size: 20px; line-height: 30px; }
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: content-box;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--page);
  border-bottom: 1px solid var(--hair);
}

.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Full lockup: cap 26 at 390, cap 27 at 1280 — 182x52 and 189x54 on the boards. */
.logo-full { width: 182px; height: 52px; }

.site-nav { display: none; flex-grow: 1; gap: 30px; }

.site-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
}
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current='page'] { color: var(--blue); }

.btn-cta {
  display: inline-block;
  padding: 11px 18px;
  border-radius: var(--radius-button);
  background: var(--cta);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-cta:hover { color: var(--ink); }

.header-cta { display: none; }

/* The full header needs logo 189 + gap 40 + nav 367 + gap 40 + CTA 137 = 773,
   plus two 32px gutters: 837. Switching it on at the prose breakpoint of 800
   pushed the CTA off the right edge between 800 and 836. */
@media (min-width: 840px) {
  .site-nav { display: flex; }
  .header-cta { display: inline-block; }
  .logo-full { width: 189px; height: 54px; }
  .drawer { display: none; }
}

/* ---------------------------------------------------------------- drawer */
/* No JavaScript. <details> with one <summary> that becomes the close button
   when open; the panel carries its own 76px bar to match the header. */

.drawer { margin-left: auto; }

.drawer > summary {
  width: 44px;
  height: 44px;
  margin-right: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}
.drawer > summary::-webkit-details-marker { display: none; }

.drawer .icon-close { display: none; }

.drawer[open] > summary {
  position: fixed;
  top: 16px;
  right: var(--gutter);
  margin-right: -11px;
  z-index: 40;
}
.drawer[open] .icon-menu { display: none; }
.drawer[open] .icon-close { display: flex; }

.drawer-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--page);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer-bar {
  box-sizing: content-box;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--hair);
}

.drawer-nav a {
  display: block;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--hair);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.drawer-nav a[aria-current='page'] { color: var(--blue); }

.drawer-cta { padding: 28px var(--gutter) 0; }
.drawer-cta .btn-cta {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.drawer-legal {
  margin-top: auto;
  padding: 0 var(--gutter) 28px;
}
.drawer-legal .rule { border-top: 1px solid var(--hair); }
.drawer-legal .links { display: flex; align-items: center; gap: 24px; }
.drawer-legal a {
  padding: 12px 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
}

/* Lock the page behind the drawer. */
body:has(.drawer[open]) { overflow: hidden; }



/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: 0;
  padding-block: 28px 26px;
  background: var(--band);
  border-top: 1px solid var(--hair);
}

.site-footer .links { display: flex; align-items: center; gap: 24px; }
.site-footer .links a {
  padding: 11px 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
}
.site-footer .rule {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
}
.site-footer .copy { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--quiet); }

/* The marks sit at the right edge of the link band at both widths — not beside
   the links, and not centred in the band, which made a third alignment point
   with nothing to anchor to in a 28px row. They live outside .links on purpose:
   inside it they would collide at equal specificity with `.site-footer .links a`
   and its padding, which is this build's characteristic defect. */
.site-footer .socials { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.site-footer .socials a { display: inline-flex; align-items: center; padding: 12px 0; color: var(--blue); }
.site-footer .socials a:hover { color: var(--blue-hover); }
.site-footer .socials svg { display: block; }

@media (min-width: 800px) {
  .site-footer { padding-block: 34px; }
  .site-footer .wrap { display: flex; align-items: center; gap: 40px; }
  .site-footer .rule { margin: 0; padding: 0; border: 0; flex-grow: 1; }
  .site-footer .links { gap: 26px; }
  .site-footer .links a { padding: 0; font-size: 13px; line-height: 20px; }
  .site-footer .socials { gap: 16px; }
  .site-footer .socials a { padding: 0; }
  .site-footer .copy { margin: 0; }
}

/* ---------------------------------------------------------------- sections */

.section { padding-top: 36px; }
.section.bio { padding-top: 32px; }
.page-end { padding-bottom: 36px; }
.page-end-index { padding-bottom: 24px; }

@media (min-width: 800px) {
  .section { padding-top: 64px; }
  .section.bio { padding-top: 48px; }
  .page-end { padding-bottom: 64px; }
  .page-end-index { padding-bottom: 72px; }
}

/* The boards wrap the page head and the list in one padded block: the 24/32px
   is the gap down to the first rule, and the block's larger bottom padding sits
   below the list, not above it. */
.page-head { padding-block: 28px 24px; }
.page-h1 { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
.page-head .deck { margin-top: 12px; }
.crumb { font-size: 13px; line-height: 20px; font-weight: 600; }
.crumb a { text-decoration: none; }

@media (min-width: 800px) {
  .page-head { padding-block: 48px 32px; }
  .page-h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; }
  .page-head .deck { margin-top: 14px; }
}

.hero { padding-block: 32px 34px; }
@media (min-width: 800px) {
  .hero { padding-block: 76px 60px; }
  .hero .h1 { max-width: 880px; }
}

/* the D² / CE / BL name strip */
.namestrip { padding-block: 18px; }
.namestrip .row { display: flex; align-items: baseline; gap: 10px; }
.namestrip .key {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--blue);
  width: 30px;
}
.namestrip .val { font-size: 16px; line-height: 26px; color: var(--body); }
.namestrip .say { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--quiet); }

@media (min-width: 800px) {
  .namestrip { padding-block: 24px; }
  .namestrip .wrap { display: flex; align-items: baseline; gap: 44px; }
  .namestrip .key { font-size: 17px; width: auto; }
  .namestrip .val { font-size: 17px; }
  .namestrip .say { margin: 0 0 0 auto; font-size: 15px; line-height: 26px; }
}

/* ---------------------------------------------------------------- process steps */

.steps { margin-top: 26px; }
.step .num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.04em;
}
.step .name { margin-top: 2px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }
.step .desc { margin-top: 3px; font-size: 14px; line-height: 22px; color: var(--mid); }

/* Connector: rule plus arrowhead, at the boards' exact geometry. The rule has a
   fixed length and the box carries the gap above it, so the arrow lands where
   the board puts it instead of stretching to fill.
   Centre line sits at x=9, under the step numeral. */
.connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  height: 44px;
  padding-top: 10px;
}
.connector .rule { width: 1.5px; height: 18px; background: var(--border); }
.connector svg { display: block; margin-top: -1px; }
.connector.long { height: 72px; padding-top: 22px; }
.connector.long .rule { height: 30px; }

@media (min-width: 800px) {
  .steps { margin-top: 36px; }
  .step .name { font-size: 20px; line-height: 28px; }
  .step .desc { font-size: 15px; line-height: 24px; }
  .connector { height: 72px; padding-top: 16px; }
  .connector .rule { height: 36px; }
  .connector.long { height: 116px; padding-top: 34px; }
  .connector.long .rule { height: 56px; }
}

/* possible outcomes */
.outcomes {
  margin-inline: calc(var(--gutter) * -1);
  padding: 16px var(--gutter) 20px;
  border-block: 1px solid var(--border);
}
.outcomes ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 30px;
  color: var(--body);
}

@media (min-width: 800px) {
  .outcomes {
    margin-inline: 0;
    padding: 22px 26px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-panel);
  }
  .outcomes ul {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    font-size: 15px;
    line-height: 24px;
  }
  .outcomes li { width: 50%; }
}

/* ---------------------------------------------------------------- pull quote + cta */

.pullquote {
  margin-top: 22px;
  padding: 20px;
  background: var(--band);
  border-left: 3px solid var(--blue);
}
.pullquote .q { margin: 0; font-size: 18px; line-height: 29px; color: var(--ink); max-width: none; }
.pullquote .by { margin-top: 10px; font-size: 14px; line-height: 22px; color: var(--quiet); }
.pullquote .note { margin-top: 18px; font-size: 15px; line-height: 24px; color: var(--mid); }
.pullquote .btn-cta { display: block; margin-top: 18px; padding: 15px 0; font-size: 16px; line-height: 22px; text-align: center; }
.pullquote .nopressure { margin-top: 6px; text-align: center; font-size: 14px; line-height: 22px; color: var(--quiet); }

@media (min-width: 800px) {
  .pullquote { margin-top: 32px; padding: 22px 24px; }
  .pullquote .q { font-size: 19px; line-height: 30px; }
  .pullquote .note { margin-top: 20px; }
  .pullquote .cta-group { display: inline-block; margin-top: 18px; }
  .pullquote .btn-cta { margin-top: 0; padding: 12px 20px; font-size: 15px; line-height: normal; }
}

/* ---------------------------------------------------------------- stat treatment */

.stats {
  margin: 22px calc(var(--gutter) * -1) 0;
  padding: 20px var(--gutter);
  border-block: 1px solid var(--border);
}
.stat + .stat { margin-top: 20px; }
.stat .fig {
  display: inline-block;
  font-family: var(--mono);
  font-size: 36px;
  line-height: 42px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
}
.stat .fig:hover { color: var(--blue-hover); }
.stat .what { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--body); }
.stats .source { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); max-width: none; }
.stats .more { display: inline-block; padding-top: 14px; font-size: 14px; line-height: 22px; font-weight: 600; text-decoration: none; }

@media (min-width: 800px) {
  .stats {
    margin: 26px 0 0;
    padding: 26px 28px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-panel);
  }
  .stats .figs { display: flex; gap: 72px; }
  .stat + .stat { margin-top: 0; }
  .stat .fig { font-size: 40px; line-height: 44px; }
  .stat .what { margin-top: 8px; }
  .stats .source { margin-top: 22px; padding-top: 16px; }
  .stats .more { padding: 0; margin-top: 16px; }
}

/* ---------------------------------------------------------------- rows (projects, studies) */

.rows {
  margin: 20px calc(var(--gutter) * -1) 0;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--border);
}
/* On the index the list opens straight off the page head — the gap above the
   first rule is the page head's own bottom padding, 24 at 390 and 32 at 1280. */
.rows.rows-index { margin-top: 0; }
.rows.rows-studies { margin-top: 16px; }
.rows > * { border-bottom: 1px solid var(--hair); }
.rows > *:last-child { border-bottom-color: var(--border); }

.project { padding-block: 16px 14px; }
.project .name { font-size: 17px; line-height: 25px; font-weight: 600; text-decoration: none; }
.project .what { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--mid); }
.project dl { margin: 10px 0 0; }
.project .pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.project .pair + .pair { margin-top: 6px; }
.project dt { margin: 0; }
.project dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  text-align: right;
}
.project dd.plain { font-family: var(--sans); }

/* Where a project's figures come from. A caption row, so the link is blue and
   semibold with no underline; its padding widens the tap target without moving
   the line. */
.project .src { margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--quiet); }
.project .src a { padding-block: 12px; font-weight: 600; text-decoration: none; }

@media (min-width: 800px) {
  .rows { margin: 22px 0 0; padding-inline: 0; }
  .rows.rows-index { margin-top: 0; }
  .rows.rows-studies { margin-top: 20px; }
  .project { padding-block: 20px; }
  .project .name { line-height: 26px; flex-shrink: 0; }
  .project .head { display: flex; align-items: baseline; gap: 14px; }
  .project .what { margin: 0; line-height: 24px; }
  .project dl { margin-top: 14px; display: flex; gap: 0; }
  .project .pair { display: block; width: 280px; }
  /* A lone pair has no column to line up with, so it takes its content's width:
     TurboSpin's status is prose and wrapped at 280. */
  .project .pair:only-child { width: auto; }
  .project .pair + .pair { margin-top: 0; }
  .project dd { margin-top: 4px; font-size: 17px; line-height: 26px; text-align: left; }
}

/* A study row. The same component on the homepage and on the index — landing on
   a visually identical row is the strongest continuity signal there is. The
   index adds the evidence line and the dates. */
.study { position: relative; padding: 18px 0; }
.t-wrap { margin: 0; font-size: inherit; font-weight: inherit; }
.study .t {
  display: inline-block;
  margin: 6px 0;
  font-size: 19px;
  line-height: 27px;
  font-weight: 600;
  text-decoration: none;
}
/* the whole row is the click target */
.study .t::after { content: ""; position: absolute; inset: 0; }
.study:hover .t { color: var(--blue-hover); }
.study .res { margin: 0; font-size: 16px; line-height: 26px; color: var(--body); max-width: 820px; }
.study .res .mono { font-weight: 500; color: var(--ink); }
.study .ev { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--quiet); max-width: 820px; }
.study .ev .mono { font-weight: 400; color: var(--quiet); }
.study .dt { font-size: 13px; line-height: 20px; color: var(--quiet); white-space: nowrap; }
.study .dt-stacked { margin-top: 8px; }
/* The date stacks under the row by default — that is the homepage row. On the
   index at 1280 it moves onto the kicker's baseline at the right edge, which
   pays for the extra evidence line almost exactly. */
.study .meta .dt { display: none; }

@media (min-width: 800px) {
  .study { padding: 22px 0; }
  .study .t { margin: 6px 0 0; max-width: 820px; font-size: 20px; line-height: 28px; }
  .study .res { margin-top: 6px; font-size: 17px; line-height: 28px; }

  .rows-index .study .meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
  }
  .rows-index .study .meta .dt { display: block; }
  .rows-index .study .dt-stacked { display: none; }
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.section-head a { font-size: 14px; line-height: 22px; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------- bio */

.bio .linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- print */

@media print {
  .site-header, .drawer, .btn-cta { display: none; }
  body { color: #000; }
}

/* ---------------------------------------------------------------- article */
/* Prose sits centred at 720; exhibits break out to the full 1120. Below 800
   that becomes a change of register instead of width: prose keeps the gutter,
   exhibits run their rules to both screen edges. */

.article { padding-block: 20px 36px; }

.article > .wrap > * { max-width: var(--prose); margin-inline: auto; }
.article > .wrap > .exhibit { max-width: none; }

/* A result line written as a list of metrics: side by side with dots, a line
   breaking only between metrics; on phones one metric per line, no dots. */
.mt { white-space: nowrap; }

@media (max-width: 799px) {
  /* The exhibit's own rows carry the gutter, so it takes the negative margin
     and no padding — otherwise the gutter is applied twice over. */
  .article > .wrap > .exhibit { margin-inline: calc(var(--gutter) * -1); }
  .mt { display: block; }
  .sep { display: none; }
}

.art-head .crumb a { display: inline-block; padding: 12px 0; }
.art-head .kicker { margin-top: 2px; }
.art-h1 {
  margin: 6px 0 0;
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.art-head .deck { margin-top: 14px; }

.byline { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.by-name { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--body); }
/* Marty's LinkedIn beside his name. Inline, so the padding widens the tap
   target without growing the line; -3px centres the mark on the capitals. */
.by-in { margin-left: 2px; padding: 4px; text-decoration: none; }
.by-in svg { display: inline; vertical-align: -3px; }
.by-when { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.by-date { font-size: 13px; line-height: 20px; color: var(--quiet); }
/* The share control, on the byline row of a study. Two states, and the copied
   one drops the icon: at 390 the row has 102.86px of slack and the icon plus
   "Link copied" is 103.61, which does not overflow — it grows the row 16px and
   takes the rest of the article with it. Without the icon it is 84.61, so the
   control shrinks rather than grows, which is the safe direction.

   align-self is load-bearing: .byline is align-items:baseline, and an icon in
   an inline-flex control takes the row's baseline with it, measured at +2.5px. */
.copy-link {
  align-self: center;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--page);
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--mid);
  white-space: nowrap;
  cursor: pointer;
}
/* The script reveals it. An author `display` beats the UA's [hidden], so this
   has to say so explicitly — a defect this build has produced before. */
.copy-link[hidden] { display: none; }
.copy-link:hover { color: var(--ink); border-color: var(--quiet); }
.copy-link .copy-icon { display: block; flex-shrink: 0; }
/* No new colour: blue is already what the site uses for the interactive thing. */
.copy-link[data-state='copied'] { border-color: var(--blue); color: var(--blue); }
.copy-link[data-state='copied'] .copy-icon { display: none; }

.by-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--band);
  border: 1px solid var(--hair);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--mid);
}

/* prose flow — the boards group these in blocks 40px apart with 14px inside.
   Scoped to direct children so the Sources and figures headings, which live
   inside exhibits, keep their own spacing. */
.article > .wrap > h2 {
  margin-top: 36px;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.article > .wrap > h2 + p { margin-top: 12px; }
.article > .wrap > p { margin-top: 14px; }
/* Mono inherits its colour. Only the holes go grey — a measured figure keeps
   the weight of the thing it is reporting. */
.art-head .deck .mono { font-weight: 500; color: var(--ink); }
.article > .wrap > p .mono,
.sval .mono,
.callout .mono { color: var(--quiet); }

/* ---- Sources ---- */

.sources { margin-top: 30px; border-block: 1px solid var(--border); }
.sources-h {
  margin: 0;
  padding: 9px var(--gutter);
  background: var(--band);
  border-bottom: 1px solid var(--hair);
}
.sources-list { margin: 0; }
.srow { padding: 14px var(--gutter); border-bottom: 1px solid var(--hair); }
.srow:last-child { border-bottom: 0; }
.skey { line-height: 18px; }
.sval, .shole {
  margin: 3px 0 0;
  /* The known 75ch overflow: these cells are 15px, so the same pixel width
     carries more characters than body copy does. Capped at the settled 68. */
  max-width: var(--measure);
}
.sval { font-size: 15px; line-height: 22px; color: var(--body); }
.shole {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 22px;
  color: var(--quiet);
  overflow-wrap: anywhere;
}

/* ---- stat exhibit ---- */

.stats-exhibit { margin-top: 36px; border-block: 1px solid var(--border); }
.figs-h {
  margin: 0;
  padding: 16px var(--gutter) 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}
.fig-block { padding: 18px var(--gutter) 20px; border-bottom: 1px solid var(--hair); }
.fig { font-size: 36px; line-height: 40px; font-weight: 500; color: var(--ink); }
.fig-label { margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--body); }
.fig-note { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--quiet); }
.figs-support { padding: 16px var(--gutter) 18px; }
.sup-block { display: flex; justify-content: space-between; align-items: baseline; }
.sup-block + .sup-block { margin-top: 8px; }
/* The figure keeps its width and the label wraps instead: on a phone row a
   long label squeezed "8.4 s" to "8.4 / s" and "13 of 13" to "13 of / 13". */
.sup-fig { flex-shrink: 0; font-size: 17px; font-weight: 500; color: var(--body); }
.sup-vs { white-space: nowrap; }

/* ---- closing callout ---- */

.callout {
  margin-top: 36px;
  padding: 16px;
  background: var(--band);
  border-left: 3px solid var(--blue);
}
.callout ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.callout li, .callout-text { font-size: 16px; line-height: 26px; color: var(--body); }
.callout-text { margin: 0; }
/* Text after a box gets the space the box has above it. */
.article > .wrap > .callout + p { margin-top: 36px; }

@media (min-width: 800px) {
  .article { padding-block: 56px 64px; }

  .art-head .crumb a { padding: 0; }
  .art-head .kicker { margin-top: 18px; }
  .art-h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; }
  .art-head .deck { margin-top: 18px; }

  .byline {
    margin-top: 18px;
    padding-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .by-when { display: contents; }

  .article > .wrap > h2 { margin-top: 40px; font-size: 28px; line-height: 34px; }
  .article > .wrap > h2 + p { margin-top: 14px; }

  .sources {
    margin-top: 40px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-panel);
    overflow: hidden;
  }
  .sources-h { padding: 12px 20px; }
  .srow { display: flex; gap: 16px; padding: 12px 20px; }
  .skey { width: 220px; flex-shrink: 0; }
  .sval, .shole { margin: 0; flex-grow: 1; }

  .stats-exhibit { margin-top: 40px; border: 0; }
  .figs-h { padding: 0; margin-bottom: 18px; }
  .figs-lead { display: flex; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
  .fig-block { flex: 1; padding: 0; border: 0; }
  .fig { font-size: 40px; line-height: 44px; }
  /* 4 x 245 + 3 x 40 = 1100 needs a 1120 exhibit; below that they shrink
     rather than pushing the page into horizontal scroll. */
  .figs-support { display: flex; gap: 40px; padding: 22px 0 0; }
  .figs-support .sup-block { flex: 0 1 245px; min-width: 0; }
  .sup-block { width: 245px; }
  .sup-block + .sup-block { margin-top: 0; }
  .sup-label { display: block; order: 2; }
  .sup-fig { display: block; font-size: 22px; line-height: 28px; }
  /* flex-start, not the phone row's space-between: stretched to the row's
     height, space-between pushed every one-line label to the bottom whenever
     a neighbour's label wrapped. */
  .figs-support .sup-block { display: flex; flex-direction: column; justify-content: flex-start; }
  .figs-support .sup-label { margin-top: 2px; font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; }

  .callout { margin-top: 40px; padding: 20px 24px; }
  .callout ul { padding-left: 20px; }
  .callout li, .callout-text { font-size: 17px; line-height: 28px; }
  .article > .wrap > .callout + p { margin-top: 40px; }
}

/* ---------------------------------------------------------------- exhibits: table + chart */

.exhibit-title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}
.exhibit-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--quiet);
}
.exhibit-note a { font-weight: 600; text-decoration: none; }

/* ---- benchmark table ---- */
/* Variant-major stack below 800: one block per variant, four label/value rows,
   values right-aligned in mono on one edge. Drawn shorter than metric-major at
   both 4 and 8 variants, because metric-major repeats every variant name. */

.bench { margin: 36px 0 0; }
.bench .exhibit-title { padding: 0 var(--gutter) 12px; }
.bench table { width: 100%; border-collapse: collapse; }
.bench thead { display: none; }
.bench tbody, .bench th, .bench td { display: block; }
.bench tbody { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* The variant name and its endpoint are inline so they share one line box, as
   the board's single variant div does; each metric then takes a line of its own. */
.bench tr {
  display: block;
  padding: 16px var(--gutter) 14px;
  border-bottom: 1px solid var(--hair);
}
.bench tr:last-child { border-bottom: 0; }

.bench tr > th[scope='row'] {
  display: inline;
  margin-left: -3px;
  border-left: 3px solid transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--body);
  text-align: left;
}
.bench tr.lead > th[scope='row'] { border-left-color: var(--blue); font-weight: 600; color: var(--ink); }
.bench tbody .col-endpoint { display: inline; font-size: 14px; color: var(--mid); }
.bench td.num {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  padding: 0;
  color: var(--quiet);
}
/* Chrome's UA stylesheet gives <td> padding: 1px, which made every metric row
   2px taller than the board's <div>. Zero it and leave the mono at `normal`,
   as the board does. */
.bench td.num .mono { font-size: 15px; }
.bench .col-endpoint + td.num { margin-top: 8px; }

.bench .exhibit-note { padding: 12px var(--gutter) 0; }
.bench .exhibit-note a { display: inline-block; padding: 12px 0; }
.bench .exhibit-note > span { display: block; }

/* ---- chart ---- */

.chart { margin: 24px 0 0; padding: 20px 0; border-block: 1px solid var(--border); }
.chart .exhibit-title { padding: 0 var(--gutter) 16px; }
.chart-body { padding: 0 var(--gutter); }
.bar-row + .bar-row { margin-top: 16px; }
.bar-label { font-size: 14px; line-height: 20px; color: var(--mid); }
.bar-row.lead .bar-label { font-weight: 600; color: var(--ink); }
.bar-value { font-size: 15px; font-weight: 500; color: var(--body); }
.bar-row.lead .bar-value { color: var(--ink); }
.bar-track { margin-top: 6px; border-left: 1px solid var(--border); }
.bar { height: 24px; background: var(--blue-pale); }
.bar-row.lead .bar { background: var(--blue); }
.axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.axis .mono { font-size: 12px; color: var(--quiet); }
.chart .exhibit-note { padding: 16px var(--gutter) 0; }
.chart .exhibit-note a { display: inline-block; padding: 12px 0 0; }
.chart .exhibit-note > span { display: block; }

.callout-note { margin-top: 14px; font-size: 14px; line-height: 22px; color: var(--mid); }

@media (max-width: 799px) {
  /* label and value sit above the bar, bar full width beneath */
  .bar-row { display: block; position: relative; }
  .bar-row .bar-label, .bar-row .bar-value { display: inline-block; }
  .bar-row .bar-value { position: absolute; right: 0; top: 0; }
  .bar-row.axis-row { margin-top: 0; }
  .axis-row .bar-label, .axis-row .bar-value { display: none; }
}

/* Wide exhibits. The benchmark table's own grid is 1120 wide and the chart's
   label column is 200 of it, so both keep their narrow treatment until the
   exhibit is actually wide enough — which is what DECISIONS.md predicted when
   it said the desktop breakout takes over "somewhere above ~1100". */
@media (min-width: 1100px) {
  .bench { margin-top: 40px; }
  .bench .exhibit-title { padding: 0; margin-bottom: 14px; }
  .bench thead { display: table-header-group; }
  .bench tbody { display: table-row-group; border: 0; }
  .bench tr { display: table-row; padding: 0; border: 0; }
  .bench th, .bench td { display: table-cell; }

  /* The board fixes the column grid at 315/220/130/130/160/165. Left to
     table-layout:auto the grid comes from the cell text instead, which put
     Accuracy at 270px against p50's 90px and moved every time the data did. */
  .bench table { table-layout: fixed; }
  .bench thead th.col-variant { width: 315px; }
  .bench .col-endpoint { width: 220px; }
  .bench thead th.num:nth-child(3),
  .bench thead th.num:nth-child(4) { width: 130px; }
  .bench thead th.num:nth-child(5) { width: 160px; }

  .bench thead th {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: bottom;
  }
  .bench thead th.col-variant { padding-left: 15px; }
  .bench thead th.num { text-align: right; }

  .bench tbody th, .bench tbody td {
    padding: 14px 0;
    border-bottom: 1px solid var(--hair);
    vertical-align: baseline;
  }
  .bench tbody tr:last-child th, .bench tbody tr:last-child td { border-bottom: 0; }

  .bench tbody th[scope='row'] {
    display: table-cell;
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid transparent;
    font-size: 15px;
    line-height: 22px;
  }
  .bench tbody .col-endpoint { display: table-cell; font-size: 14px; line-height: 22px; }
  .bench td.num {
    display: table-cell;
    margin: 0;
    text-align: right;
    font-size: 15px;
    line-height: normal;
  }
  .bench .cell-label { display: none; }
  .bench .exhibit-note {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 0;
  }
  .bench .exhibit-note > span { display: inline; }
  .bench .exhibit-note a { padding: 0; }

  .chart {
    margin-top: 40px;
    padding: 24px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-panel);
  }
  .chart .exhibit-title { padding: 0; }
  .chart-body { padding: 16px 0 0; }
  .bar-row { display: flex; align-items: center; gap: 12px; }
  .bar-row + .bar-row { margin-top: 8px; }
  .bar-label { width: 200px; flex-shrink: 0; text-align: right; }
  .bar-track { flex: 1; margin-top: 0; display: flex; align-items: center; }
  .bar-value { width: 80px; flex-shrink: 0; }
  .axis { flex: 1; margin-top: 0; }
  .chart .exhibit-note {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 0 0;
  }
  .chart .exhibit-note > span { display: inline; }
  .chart .exhibit-note a { padding: 0; }
}

/* ---------------------------------------------------------------- contact */

.contact { padding-block: 28px 40px; }
.contact .prose { margin-inline: auto; }
.contact .deck { margin-top: 14px; }

.form { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.field-pair { display: flex; flex-direction: column; gap: 22px; }

.field .lbl { display: block; }
.lbl .optional {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--placeholder);
}

/* 16px input text also stops iOS zooming on focus; 24 + 12 + 12 + 2 = 50px,
   which is the floor every control on this page holds to. */
.in {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--body);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}
.in::placeholder { color: var(--placeholder); }

/* Fields do not jump on focus: the border turns blue and a halo grows outside
   it, rather than an outline at an offset. */
.in:focus-visible {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-pale);
}

/* Errors never rely on colour alone: the border thickens, the label turns, an
   icon appears and a sentence says what to do. :user-invalid fires only after
   the field has been interacted with, so nothing is red before it is earned. */
.err {
  display: none;
  margin-top: 6px;
  align-items: flex-start;
  gap: 7px;
  font-size: 14px;
  line-height: 20px;
  color: var(--error);
  max-width: none;
}
.err-icon { flex-shrink: 0; margin-top: 2px; }

/* The 2px border needs 1px off each padding so the field stays 50px and its
   neighbours do not shift. Only correct under border-box, which is global here.

   The second selector in each pair is the same state reached the other way: a
   visitor who hits Send on an empty form has interacted with nothing, so
   :user-invalid matches nothing. The script marks the attempt on the form and
   every rule below widens to :invalid for as long as it is marked. This is
   what replaces the browser's own bubble. */
.in:user-invalid,
.form[data-submitted] .in:invalid {
  border-color: var(--error);
  border-width: 2px;
  padding: 11px 13px;
}
/* Focused and invalid is not on the board. Keep both signals: the error border
   stays, the focus halo grows outside it. */
.in:user-invalid:focus-visible,
.form[data-submitted] .in:invalid:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--blue-pale);
}
.in:user-invalid + .err,
.form[data-submitted] .in:invalid + .err { display: flex; }
.field:has(.in:user-invalid) .lbl,
.form[data-submitted] .field:has(.in:invalid) .lbl { color: var(--error); }

/* honeypot */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* A box-shadow is dropped in forced-colors mode, and we removed the outline to
   stop the field jumping — so restore a real one there. */
@media (forced-colors: active) {
  .in:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

.submit-row { padding-top: 4px; }
.submit-row .btn-cta {
  display: block;
  width: 100%;
  padding: 15px 26px;
  border: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  text-align: center;
}
.submit-note {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--quiet);
}
.submit-note a { text-decoration: underline; }

/* the form is replaced, the page is not */
.form[hidden] { display: none; }
.sent[hidden] { display: none; }
.sent:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.send-error { display: flex; margin-top: 12px; }
.sent {
  margin-top: 40px;
  padding: 26px 28px;
  background: var(--band);
  border-left: 3px solid var(--blue);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sent-icon { flex-shrink: 0; margin-top: 4px; color: var(--blue); }
.sent-h { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.sent-p { margin: 8px 0 0; font-size: 17px; line-height: 28px; color: var(--body); max-width: none; }
/* The two holes are deliberately different: the reply time is the answer to
   the reader's question and takes ink; the phone number is the fallback and
   stays quiet, matching how it prints in the channel list below. */
.sent-p .mono { color: var(--quiet); }
.sent-p .t-answer { color: var(--ink); }
.sent-note { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--quiet); }

.channels { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--border); }
.channel-row { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.channel-val { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--quiet); }
.channel-val.plain { color: var(--body); }
.channel-val a { text-decoration: underline; }

.contact-quote { margin-top: 40px; padding: 22px 24px; }

@media (min-width: 800px) {
  .contact { padding-block: 56px 72px; }
  .field-pair { flex-direction: row; gap: 20px; }
  .field-pair .field { flex: 1; min-width: 0; }

  .submit-row { display: flex; align-items: center; gap: 20px; }
  .submit-row .btn-cta { width: auto; padding: 14px 26px; }
  .submit-note { display: inline; margin-top: 0; }

  .channel-row { margin-top: 20px; flex-direction: row; gap: 40px; }
  .channel { flex: 1; min-width: 0; }

  .contact-quote .q { font-size: 19px; line-height: 30px; }
}

/* ---------------------------------------------------------------- text page */
/* Terms and Privacy. Same design at two measures — but not the same numbers:
   the heading, the block rhythm and the page padding all step down at 390.
   The 404 does NOT use this shell; it only shares the outer frame. */

/* Same page padding as .contact — deliberately, both boards draw it. */
.textpage { padding-block: 28px 40px; }
.textpage .prose { margin-inline: auto; }

.dateline {
  margin-top: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
  line-height: 20px;
  color: var(--quiet);
}
.dateline .mono { color: var(--body); }

.text-body { margin-top: 30px; overflow-wrap: break-word; }

.text-body .sec {
  margin: 32px 0 12px;
  font-size: 19px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.text-body > :first-child { margin-top: 0; }
.text-body > .sec:first-child { margin-top: 0; }
.text-body .sec .n {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--quiet);
  margin-right: 10px;
}

.text-body p { margin: 0; font-size: 17px; line-height: 28px; color: var(--body); max-width: none; }
.text-body p + p { margin-top: 14px; }
.text-body :is(p, dd, li) .mono { font-size: 16px; color: var(--body); }
.text-body :is(p, dd, li) .mono.hole { color: var(--quiet); }

/* Run-in definitions: the term sits on the same line as its text, so both
   parts are inline and the <dl> supplies the structure rather than the look. */
/* The boards stop at one heading level and show no lists or prose links. A
   real privacy policy has all three, so the shell answers for them rather
   than falling back to UA defaults. */
.text-body h3 {
  margin: 22px 0 10px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
}
.text-body :is(ul, ol),
.article > .wrap > ul {
  /* Block only: the article's margin-inline:auto centres the column. */
  margin-block: 14px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.text-body li, .article > .wrap > ul > li { font-size: 17px; line-height: 28px; color: var(--body); }
/* Underlined inside prose, per the link rule. */
.text-body :is(p, dd, li) a { text-decoration: underline; }
/* A lone run-in stays a paragraph with a bold lead-in; make it read the same
   as one that got grouped into the list. */
.text-body p > strong:first-child { font-weight: 600; color: var(--ink); }

.run-in { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.run-in > div { font-size: 17px; line-height: 28px; color: var(--body); }
.run-in dt { display: inline; font-weight: 600; color: var(--ink); }
.run-in dd { display: inline; margin: 0; }

/* Grey rule, not blue: this is a where-to-write panel, not a claim. */
.contact-block {
  margin-top: 18px;
  padding: 20px 24px;
  background: var(--band);
  border-left: 3px solid var(--border);
}
.cb-name { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-line { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--body); }
.cb-line a { text-decoration: underline; }

@media (min-width: 800px) {
  .textpage { padding-block: 56px 72px; }
  .dateline { margin-top: 14px; padding-bottom: 28px; }
  .text-body { margin-top: 36px; }
  .text-body .sec { margin: 36px 0 14px; font-size: 20px; line-height: 28px; }
  .text-body > .sec:first-child { margin-top: 0; }
}

/* ---------------------------------------------------------------- 404 */
/* Not the text-page shell, but the same page padding: 28/40, and 56/72 from
   800. The board's 80/26 was drawn around an "Error 404" label; without it the
   headline sat 24px below Contact's, Terms' and Privacy's, and jumped on every
   visit from them. Now it lands where theirs does. */

.notfound { padding-block: 28px 40px; }
.notfound .prose { margin-inline: auto; }
.notfound .deck { margin-top: 14px; }
/* The lead-in sits with the rows it introduces, not with the sentence above. */
.notfound .try { margin-top: 32px; }

/* The route row is the studies-index row with the evidence and date lines taken
   out: same rule weights, same title tier, same whole-row target. It does not
   reuse .rows, which bleeds to the screen edges at 390 — these rules stop in
   the gutter, which is what both boards draw. */
.routes { margin-top: 12px; border-top: 1px solid var(--border); }

.route {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}
.route:last-child { border-bottom-color: var(--border); }
.route .t { display: block; font-size: 18px; line-height: 26px; font-weight: 600; }
.route:hover .t { color: var(--blue-hover); }

@media (min-width: 800px) {
  .notfound { padding-block: 56px 72px; }
  .notfound .try { margin-top: 40px; }
  .route { padding: 18px 0; }
}