/*
   Quoin — the site for a baseline grid.

   Locked up like a printing forme: one 8px pitch, four inks (cyan, magenta,
   yellow, key) on paper, three typefaces — Archivo for display, Source Serif 4
   for reading, Courier Prime for measurement. Every distance below is a whole
   number of rows; the page argues for what it practises.
*/

:root {
  --pitch: 8px;
  /* inks */
  --k: #0F0F0E;          /* key */
  --paper: #F2F0E8;
  --white: #FFFFFF;
  --c: #00A6E0;          /* cyan */
  --m: #E5007D;          /* magenta */
  --y: #FFE400;          /* yellow */
  /* supporting neutrals */
  --faint: #8B897F;
  --rule: #C9C6BA;
  /* type */
  --s: "Source Serif 4", Georgia, serif;
  --m2: "Archivo", ui-sans-serif, sans-serif;
  --t: "Courier Prime", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/*
   Grid items may be narrower than their contents.

   A grid item's `min-width` is `auto`, which means a track never shrinks below
   its item's min-content width. One `pre` holding `npx quoin fit --design
   design.json` is 347px that will not fold, so the single-column track on a
   phone measured 395px against a 375px screen and the whole sheet hung 20px
   off the right edge.

   `overflow-x: hidden` on the root used to sit here and hide it. It hid the
   symptom in both directions: the page looked contained, and the next element
   to do the same thing would also look contained. The tables scroll in their
   own `.tscroll` boxes, the code blocks scroll in theirs, and nothing needs the
   root to clip for it.
*/
.spec, .mast__strip, .defect, .defect__side, .survey, .fit__body,
.holds, .findings, .ways, .colo { min-width: 0; }
.spec > *, .mast__strip > *, .defect > *, .defect__side > *, .survey > *,
.fit__body > *, .holds > *, .findings > *, .ways > *, .colo > * { min-width: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--k);
  font-family: var(--s);
  font-size: 16px;
  line-height: 24px;
}

.page { position: relative; }

/* The two overlays live inside .page so their grid stays anchored to the
   document, not the viewport — a grid that scrolls with the page is not the
   grid the page is set on. */
.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms linear;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(229, 0, 125, .35) 0 1px,
    transparent 1px var(--pitch)
  );
}
body.grid-on .grid-overlay { opacity: 1; }

.cursor-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 90;
  pointer-events: none;
  background: var(--c);
  opacity: 0;
  transition: opacity 200ms linear;
}
body.rule-live .cursor-rule { opacity: .5; }

/* ---------------------------------------------------------------- *
   Colour bar, trim marks, registration
* ---------------------------------------------------------------- */
/* Three rows tall, stated rather than inherited.

   The height used to come from `.bar__label`'s line box, which is the one thing
   in here that is hidden on a narrow screen. So hiding the caption collapsed
   the whole colour bar to the 1px of its own border, and the four inks the page
   is printed in disappeared on every phone. A strip whose height depends on the
   caption it can do without is not a strip, it is a caption. */
.bar {
  display: flex;
  align-items: stretch;
  height: 24px;
  background: var(--white);
  /* The rule is drawn, not laid out. A 1px border inside a 24px box leaves
     the swatches 23px, which is three rows less a pixel for every ink on
     the strip. A shadow puts the line on the bottom edge and costs the
     layout nothing. */
  box-shadow: 0 1px 0 var(--k);
}
.sw { width: 24px; flex: none; }
.sw-c  { background: var(--c); }
.sw-m  { background: var(--m); }
.sw-y  { background: var(--y); }
.sw-k  { background: var(--k); }
.sw-c2 { background: rgba(0, 166, 224, .5); }
.sw-m2 { background: rgba(229, 0, 125, .5); }
.sw-y2 { background: rgba(255, 228, 0, .5); }
.sw-k2 { background: rgba(15, 15, 14, .5); }
.sw-ov1 { background: var(--c); mix-blend-mode: multiply; }
.sw-ov2 { background: var(--m); mix-blend-mode: multiply; margin-left: -12px; }
.bar__fill { flex: 1; }
.bar__label {
  padding: 2px 12px;
  font-family: var(--t);
  font-size: 10px;
  line-height: 16px;
  color: var(--faint);
  letter-spacing: .1em;
  white-space: nowrap;
}
.bar__reg { position: relative; width: 24px; flex: none; border-left: 1px solid var(--k); }
.bar__reg i { position: absolute; background: var(--k); }
.bar__reg i:nth-child(1) { left: 50%; top: 0; bottom: 0; width: 1px; }
.bar__reg i:nth-child(2) { top: 50%; left: 0; right: 0; height: 1px; }
.bar__reg i:nth-child(3) {
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--k);
  border-radius: 50%;
  background: transparent;
}

/* ---------------------------------------------------------------- *
   Docket
* ---------------------------------------------------------------- */
.docket {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  background: var(--k);
  color: var(--paper);
  font-family: var(--t);
  font-size: 11px;
  line-height: 24px;
}
.docket__brand {
  padding: 4px 16px;
  background: var(--y);
  color: var(--k);
  font-family: var(--m2);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 13px;
}
.docket__cell { padding: 4px 16px; border-right: 1px solid #333; }
.docket__pitch { color: var(--c); }
.docket__mit { color: var(--m); }
.docket__actions { display: flex; margin-left: auto; }
.docket__actions button {
  font-family: var(--t);
  font-size: 11px;
  line-height: 24px;
  padding: 4px 16px;
  border: 0;
  border-left: 1px solid #333;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.docket__actions button:hover { background: rgba(255, 255, 255, .08); }
.docket__score { padding: 4px 16px; background: var(--m); color: #fff; }

/* ---------------------------------------------------------------- *
   The working specimen
* ---------------------------------------------------------------- */
.spec {
  display: grid;
  grid-template-columns: 1fr 456px;
  border-bottom: 8px solid var(--k);
}
.spec__sheet {
  position: relative;
  background: var(--white);
  border-right: 8px solid var(--k);
  padding: 32px 40px 40px;
}
.spec__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 166, 224, .5) 0 1px,
    transparent 1px 8px
  );
}
.spec__grid.on { opacity: 1; }
.spec__kicker {
  position: relative;
  margin: 0 0 24px;
  font-family: var(--t);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.spec__sheet [data-seat] { position: relative; margin: 0 0 24px; font-size: 17px; line-height: 24px; }
.spec__sheet [data-seat]:last-child { margin-bottom: 0; }
.spec__title {
  font-family: var(--m2);
  font-size: 31px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.spec__panel {
  background: var(--k);
  color: var(--paper);
  padding: 32px 32px 40px;
  display: flex;
  flex-direction: column;
}
.spec__eyebrow {
  margin: 0 0 8px;
  font-family: var(--t);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--y);
}
.bigscore {
  margin: 0;
  font-family: var(--m2);
  font-size: 152px;
  line-height: 144px;
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--c);
}
.spec__note { margin: 0 0 24px; font-family: var(--t); font-size: 12px; line-height: 24px; color: #9A988E; }
.spec__controls { display: grid; gap: 8px; margin-bottom: 24px; }
.btn-seat {
  font-family: var(--m2);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 24px;
  padding: 12px 16px;
  border: 0;
  background: var(--m);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.btn-seat:hover { background: #F23D97; }
.spec__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spec__duo button {
  font-family: var(--t);
  font-size: 12px;
  line-height: 16px;
  padding: 7px 12px;
  border: 1px solid #444;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.spec__duo button:hover { border-color: var(--paper); }
.spec__foot { margin: auto 0 0; font-family: var(--t); font-size: 11px; line-height: 16px; color: #7E7C73; }

/* ---------------------------------------------------------------- *
   Masthead, cropped
* ---------------------------------------------------------------- */
.mast { position: relative; background: var(--y); border-bottom: 8px solid var(--k); overflow: hidden; container-type: inline-size; }
.mast__title {
  margin: 0;
  padding: 24px 0 16px 24px;
  font-family: var(--m2);
  font-weight: 900;
  /* Sized to the sheet, not the viewport. The widest line ("ON A BASELINE GRID")
     measures ~10.6em in Archivo Black, so dividing the available width by 11
     leaves headroom and both rows sit fully on canvas from a phone up to a wall,
     never cropped by the sheet's overflow. */
  font-size: min(130px, calc((100cqw - 24px) / 11));
  /*
     Snapped, because a ratio on a fluid size cannot be on a grid.

     The size above is continuous in the container width, so a ratio leading is
     continuous too, and a two-line masthead whose height changes by fractions
     of a pixel as the window moves takes the whole page below it along. That is
     the largest single reason a correction measured at one width was wrong at
     the next one.

     round() snaps the computed leading to whole rows, so the height steps by
     8px instead of sliding. The type stays fluid; only its leading is discrete,
     which is the arrangement the README recommends and this page had not taken.
  */
  line-height: round(.95em, 8px);
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--k);
  /* out of register by default — a decision, not an accident */
  text-shadow: 3px -2px 0 var(--c), -3px 2px 0 var(--m);
}
body.reg-in .mast__title { text-shadow: none; }
.mast__strip { display: grid; grid-template-columns: 1fr 1fr 456px; border-top: 2px solid var(--k); }
.mast__strip { padding-bottom: 6px; }
.mast__strip p { margin: 0; padding: 16px 24px; border-right: 2px solid var(--k); font-size: 17px; line-height: 24px; }
.mast__fine { font-family: var(--t); font-size: 12px; line-height: 24px; border-right: 0; }

/* ---------------------------------------------------------------- *
   Plate headers
* ---------------------------------------------------------------- */
.platehead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: var(--k);
  color: var(--paper);
  padding: 8px 24px;
  /* Seven rows, stated. Three faces at three sizes aligned on their baselines
     make a row whose height is a fact about the fonts, not about the design,
     and it came out at 43px. */
  height: 56px;
}
.platehead__num { font-family: var(--m2); font-weight: 900; font-size: 40px; line-height: 40px; }
.platehead__num--c { color: var(--c); }
.platehead__num--m { color: var(--m); }
.platehead__num--y { color: var(--y); }
.platehead__title { margin: 0; font-family: var(--m2); font-weight: 800; font-size: 20px; letter-spacing: .08em; }
.platehead__fig { margin-left: auto; font-family: var(--t); font-size: 11px; color: #8B897F; white-space: nowrap; }

/* Inline measurement chips */
/* An inline run at a different size makes its line taller than the
   line-height says: its baseline sits lower inside its own box, and the
   line box is the union of the two. One pixel per wrapped line, which is
   how a table of five rows came out 41px tall against a 16px leading. A
   zero contributes no box of its own, so the parent's strut governs the
   line and the glyphs draw exactly where they did. */
code, kbd, samp { line-height: 0; }
.chip { font-family: var(--t); font-size: .85em; line-height: 0; background: var(--y); padding: 1px 3px; }
.chip--plain { background: none; }
.chip--m { background: none; color: var(--m); }

/* Tables scroll inside their own box, never the page. */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fit__side, .holds__cell, .survey__tablewrap { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- *
   Plate I — the defect
* ---------------------------------------------------------------- */
.defect { display: grid; grid-template-columns: 640px 1fr; border-bottom: 8px solid var(--k); }
.defect__figcell { position: relative; background: var(--white); border-right: 2px solid var(--k); padding: 40px 32px 32px; }
.linebox { margin: 0; }
.linebox__box {
  position: relative;
  height: 160px;
  border-top: 1px dashed var(--c);
  border-bottom: 1px dashed var(--c);
  background: rgba(0, 166, 224, .07);
}
.linebox__cap { position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: var(--m); }
.linebox__base { position: absolute; left: 0; right: 0; top: 120px; height: 2px; background: var(--k); }
.linebox__glyph { position: absolute; left: 24px; top: 24px; margin: 0; font-family: var(--s); font-size: 96px; line-height: 96px; }
.linebox__tag { position: absolute; right: 8px; margin: 0; font-family: var(--t); font-size: 10px; white-space: nowrap; }
.linebox__tag--top { top: 2px; color: var(--c); }
.linebox__tag--cap { top: 42px; color: var(--m); }
.linebox__tag--base { top: 122px; font-weight: 700; }
.linebox__dims { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; margin: 0; font-family: var(--t); font-size: 11px; color: var(--faint); }
.defect__caption { margin: 24px 0 0; font-family: var(--t); font-size: 12px; line-height: 16px; color: var(--faint); }
.defect__side { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.defect__lead { margin: 0; padding: 24px; border-right: 1px solid var(--rule); font-size: 16px; line-height: 24px; }
.defect__cells { padding: 24px; }
.kick { margin: 0 0 8px; font-family: var(--m2); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.kick--c { color: var(--c); }
.kick--m { color: var(--m); }
.defect__cells p { margin: 0 0 24px; font-size: 15px; line-height: 24px; }
.defect__cells p:last-child { margin-bottom: 0; }
.defect__banner {
  grid-column: span 2;
  margin: 0;
  padding: 14px 24px 16px;
  border-top: 2px solid var(--k);
  background: var(--c);
  color: #fff;
  font-family: var(--m2);
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- *
   Plate II — the survey
* ---------------------------------------------------------------- */
.survey { background: var(--y); border-bottom: 8px solid var(--k); display: grid; grid-template-columns: 1fr 480px; }
.survey__tablewrap { padding: 24px; border-right: 2px solid var(--k); overflow-x: auto; }
.t-survey, .t-fit {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--t);
  font-size: 12px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.t-survey thead th {
  font-family: var(--m2);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--k);
  border-bottom: 3px solid var(--k);
  padding: 2px 0 3px 16px;
  line-height: 16px;
  text-align: right;
}
.t-survey thead th.l, .t-fit thead th.l { text-align: left; }
.t-survey thead th:first-child { padding-left: 0; }
.t-survey thead th.wide { width: 300px; }
.t-survey tbody th[scope="row"] {
  text-align: left;
  font-family: var(--m2);
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  padding: 4px 16px 3px 0;
  border-bottom: 1px solid rgba(15, 15, 14, .25);
}
.t-survey tbody td { text-align: right; line-height: 24px; padding: 4px 0 3px 16px; border-bottom: 1px solid rgba(15, 15, 14, .25); }
.t-survey tbody td.l { text-align: left; }
.t-survey tbody tr:last-child th, .t-survey tbody tr:last-child td { border-bottom: 0; padding-bottom: 4px; }
.barcell { display: flex; align-items: center; gap: 12px; }
.track { flex: none; width: 200px; height: 8px; background: rgba(15, 15, 14, .14); }
.fill { display: block; height: 8px; background: var(--m); mix-blend-mode: multiply; }
.barcell b { font-weight: 700; }
.survey__big {
  margin: 0;
  padding: 24px;
  background: var(--m);
  color: #fff;
  font-family: var(--m2);
  font-weight: 900;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -.03em;
}
.survey__note { margin: 0; padding: 16px 24px 14px; border-bottom: 2px solid var(--k); font-family: var(--t); font-size: 13px; line-height: 24px; }
.survey__finding { margin: 0; padding: 16px 24px 14px; border-bottom: 2px solid var(--k); font-size: 15px; line-height: 24px; }
.survey__finding--last { border-bottom: 0; padding-bottom: 16px; }

/* ---------------------------------------------------------------- *
   Plate III — the fit
* ---------------------------------------------------------------- */
.fit { border-bottom: 8px solid var(--k); }
.fit__body { display: grid; grid-template-columns: 1fr 520px; background: var(--white); }
.fit__text { padding: 24px; border-right: 2px solid var(--k); }
.fit__text p { margin: 0 0 16px; font-size: 15px; line-height: 24px; }
.fit__lead { font-size: 19px; line-height: 32px; }
.formula { padding: 12px 16px; background: var(--c); color: #fff; font-family: var(--t); font-size: 15px; line-height: 24px; }
.t-fit caption {
  text-align: left;
  padding: 12px 24px;
  background: var(--k);
  color: #8B897F;
  font-family: var(--t);
  font-size: 11px;
  line-height: 16px;
}
.t-fit thead th {
  font-family: var(--m2);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  border-bottom: 3px solid var(--k);
  padding: 2px 12px 3px;
  line-height: 16px;
  text-align: right;
}
.t-fit thead th.l { text-align: left; }
.t-fit thead th:first-child { padding-left: 24px; }
.t-fit thead th:last-child { padding-right: 24px; }
.t-fit tbody th[scope="row"] {
  text-align: left;
  font-family: var(--m2);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  padding: 4px 12px 3px 24px;
  border-bottom: 1px solid var(--rule);
}
.t-fit tbody td { text-align: right; padding: 4px 0 3px 12px; border-bottom: 1px solid var(--rule); }
.t-fit tbody td:last-child { padding-right: 24px; }
.t-fit tbody tr:hover { background: var(--y); }
.t-fit .strong { font-weight: 700; }
.t-fit .faint { color: var(--faint); }
.t-fit .moved { color: var(--m); }
.fit__mod { margin: 0; padding: 16px 24px; font-family: var(--t); font-size: 12px; line-height: 16px; color: var(--faint); }
.fit__banner {
  margin: 0;
  padding: 24px;
  background: var(--m);
  color: #fff;
  font-family: var(--m2);
  font-weight: 900;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- *
   Plate IV — where a correction holds
* ---------------------------------------------------------------- */
.holds { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--paper); border-bottom: 8px solid var(--k); }
.holds__cell { padding: 24px; border-right: 1px solid var(--rule); }
.holds__cell:last-child { border-right: 0; }
.stat { margin: 0 0 16px; display: flex; align-items: baseline; gap: 16px; height: 80px; }
.stat__num { font-family: var(--m2); font-weight: 900; font-size: 72px; line-height: 64px; }
.stat__num--c { color: var(--c); }
.stat__num--m { color: var(--m); }
.stat__label { font-family: var(--t); font-size: 11px; line-height: 16px; color: var(--faint); }
.holds__body { margin: 0 0 16px; font-size: 15px; line-height: 24px; }
.holds__body--last { margin-bottom: 0; }
.t-csp { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--t); font-size: 11px; line-height: 16px; }
.t-csp thead th {
  font-family: var(--m2);
  font-size: 9px;
  letter-spacing: .1em;
  font-weight: 800;
  border-bottom: 2px solid var(--k);
  padding: 3px 8px 3px;
  text-align: right;
}
.t-csp thead th.l { text-align: left; }
.t-csp tbody th[scope="row"] { text-align: left; font-weight: 400; padding: 3px 8px 4px 0; border-bottom: 1px solid var(--rule); }
.t-csp tbody td { text-align: right; padding: 3px 0 4px 8px; border-bottom: 1px solid var(--rule); font-weight: 700; }
.t-csp .ok { color: var(--c); }
.t-csp .bad { color: var(--m); }

/* ---------------------------------------------------------------- *
   Plate V — found by building it
* ---------------------------------------------------------------- */
.findings { background: var(--k); color: var(--paper); display: grid; grid-template-columns: repeat(3, 1fr); }
.findings article { padding: 24px; border-right: 1px solid #2C2C29; }
.findings article:last-child { border-right: 0; }
[data-reveal] { opacity: 0; transform: translateY(10px); }
[data-reveal].is-in { transition: opacity 700ms cubic-bezier(.2, .6, .2, 1), transform 700ms cubic-bezier(.2, .6, .2, 1); opacity: 1; transform: translateY(0); }
.f-kick { margin: 0 0 16px; font-family: var(--m2); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.findings h3 { margin: 0 0 16px; font-family: var(--m2); font-size: 22px; line-height: 32px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.f-body { margin: 0 0 16px; font-family: var(--t); font-size: 12px; line-height: 16px; color: #A9A79D; }
.f-figs { margin: 0; padding-bottom: 6px; border-top: 2px solid var(--c); }
.f-figs div { display: flex; align-items: baseline; gap: 8px; height: 24px; line-height: 24px; border-bottom: 1px solid #2C2C29; }
.f-figs dt { font-family: var(--t); font-size: 11px; color: #8B897F; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-figs dd { margin: 0; flex: none; font-family: var(--m2); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--c); }

/* ---------------------------------------------------------------- *
   Plate VI — six ways in
* ---------------------------------------------------------------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 8px solid var(--k); background: var(--white); }
.ways article { padding: 24px; border-right: 1px solid var(--rule); }
.ways article:nth-child(3n) { border-right: 0; }
.ways h3 { margin: 0 0 16px; font-family: var(--m2); font-size: 15px; line-height: 24px; font-weight: 800; letter-spacing: .02em; }
.ways pre { margin: 0 0 16px; padding: 12px; background: var(--k); overflow-x: auto; }
.ways code { font-family: var(--t); font-size: 11px; line-height: 16px; color: var(--y); white-space: pre; }
.ways p { margin: 0; font-size: 15px; line-height: 24px; }
.ways p code { white-space: normal; background: var(--y); color: var(--k); padding: 1px 3px; font-size: .85em; line-height: 0; }

/* ---------------------------------------------------------------- *
   Colophon
* ---------------------------------------------------------------- */
.colo { display: grid; grid-template-columns: 1fr 1fr 1fr 320px; background: var(--k); color: var(--paper); }
.colo__cell, .colo__links {
  margin: 0;
  padding: 16px 24px;
  list-style: none;
  font-family: var(--t);
  font-size: 11px;
  line-height: 16px;
  color: #8B897F;
}
.colo__links { display: grid; gap: 0; align-content: start; }
/* Three rows each, so the link is a target and not just a line of text.
   These were 13px tall, which is under the 24px WCAG 2.2 asks for and a
   long way under the 44px every control on craighawkes.dev holds to. */
.colo__links a { display: block; line-height: 24px; }
.colo a { color: var(--y); text-decoration: none; }
.colo a:hover { text-decoration: underline; }
.colo__score {
  margin: 0;
  padding: 16px 24px;
  background: var(--c);
  color: var(--k);
  font-family: var(--m2);
  font-weight: 800;
  font-size: 15px;
  line-height: 16px;
}

/* ---------------------------------------------------------------- *
   Skip link, focus
* ---------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 4px 16px;
  background: var(--k);
  color: var(--paper);
  font-family: var(--t);
  font-size: 12px;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* ---------------------------------------------------------------- *
   Touch
* ---------------------------------------------------------------- */
/*
   A finger is not a cursor, and the rest of the site already knows it:
   craighawkes.dev puts 47 controls on a phone and not one is under 44px.
   This page had nine and eight of them were, three at 13px.

   The first attempt at this was a `@media (pointer: coarse)` block that added
   padding, and it was worse than the problem. The build seats the page with a
   fine pointer, so every correction it wrote was computed against a layout no
   phone ever renders: the page measured 100% in the harness and 7.3% on a
   touch profile at every width. A rule that changes geometry for some readers
   and not others needs the whole build to know about it.

   So the hit area is extended without moving anything. The controls below sit
   side by side, so a box that reaches past them vertically overlaps nothing,
   and the layout is the same on every pointer, which is the only way the one
   stylesheet the build measured stays true.
*/
.docket__actions button,
.spec__duo button { position: relative; }
.docket__actions button::after,
.spec__duo button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 48px;
  transform: translateY(-50%);
}

/* The colophon links stack, so an overlay would put each one's target over its
   neighbour. Six real rows instead, which the build measures like anything
   else and which reads as a list rather than a paragraph of links. */
.colo__links a { line-height: 48px; }



.docket :focus-visible, .spec__panel :focus-visible, .findings :focus-visible { outline-color: var(--y); }

/* ---------------------------------------------------------------- *
   Narrower than the forme: the sheet stacks, the inks stay
* ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .docket { flex-wrap: wrap; white-space: normal; overflow-x: visible; }
  .docket__actions { margin-left: 0; width: 100%; justify-content: flex-start; }

  .spec { grid-template-columns: 1fr; }
  .spec__sheet { border-right: 0; border-bottom: 8px solid var(--k); padding: 32px 24px 32px; }
  .bigscore { font-size: 96px; line-height: 88px; }

  .mast__strip { grid-template-columns: 1fr; }
  .mast__strip p { border-right: 0; border-bottom: 2px solid var(--k); padding-bottom: 14px; }
  .mast__strip p:last-child { border-bottom: 0; padding-bottom: 16px; }

  .platehead { flex-wrap: wrap; gap: 8px 16px; height: auto; min-height: 56px; padding-bottom: 16px; }
  .platehead__fig { margin-left: 0; width: 100%; white-space: normal; }

  .defect { grid-template-columns: 1fr; }
  .defect__figcell { border-right: 0; border-bottom: 2px solid var(--k); padding: 32px 24px 22px; }
  .defect__side { grid-template-columns: 1fr; }
  .defect__lead { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 23px; }
  .defect__banner { grid-column: span 1; font-size: 28px; line-height: 40px; }

  .survey { grid-template-columns: 1fr; }
  .survey__tablewrap { border-right: 0; border-bottom: 2px solid var(--k); padding-bottom: 22px; }
  .survey__big { font-size: 40px; line-height: 48px; }

  .fit__body { grid-template-columns: 1fr; }
  .fit__text { border-right: 0; border-bottom: 2px solid var(--k); padding-bottom: 22px; }
  .fit__banner { font-size: 40px; line-height: 48px; }

  .holds { grid-template-columns: 1fr; }
  .holds__cell { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 23px; }
  .holds__cell:last-child { border-bottom: 0; padding-bottom: 24px; }

  .findings { grid-template-columns: 1fr; }
  .findings article { border-right: 0; border-bottom: 1px solid #2C2C29; padding-bottom: 23px; }
  .findings article:last-child { border-bottom: 0; padding-bottom: 24px; }

  .ways { grid-template-columns: 1fr; }
  .ways article { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 23px; }
  .ways article:last-child { border-bottom: 0; padding-bottom: 24px; }

  .colo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .spec__sheet [data-seat] { font-size: 16px; }
  .spec__title { font-size: 26px; }
  /* density strip: drop the caption so swatches fit the screen */
  .bar__label { display: none; }
  /* masthead fallback: if container queries are unsupported, wrap instead of clip */
  .mast { overflow: visible; }
  .mast__title { white-space: normal; font-size: clamp(28px, 9.5vw, 44px); }
  .stat__num { font-size: 56px; line-height: 56px; }
  .survey__big { font-size: 32px; line-height: 40px; }
  .fit__banner { font-size: 32px; line-height: 40px; }
  .defect__banner { font-size: 24px; line-height: 32px; }
  .linebox__glyph { font-size: 64px; line-height: 64px; top: 40px; }

  /* Tables: shrink to sit on canvas, and scroll inside their box if they still can't */
  .t-survey { font-size: 11px; }
  .t-survey thead th.wide { width: auto; }
  .t-survey thead th { padding-left: 8px; padding-right: 0; }
  .t-survey thead th:first-child { padding-left: 0; }
  .t-survey tbody td { padding-left: 8px; padding-right: 0; }
  .t-survey tbody th[scope="row"] { padding-left: 0; padding-right: 8px; }
  .track { width: 88px; }
  .barcell { gap: 8px; }

  .t-fit { font-size: 11px; }
  .t-fit thead th, .t-fit tbody td { padding-left: 8px; padding-right: 8px; }
  .t-fit thead th:first-child, .t-fit tbody th[scope="row"] { padding-left: 12px; }
  .t-fit thead th:last-child, .t-fit tbody td:last-child { padding-right: 12px; }
  .t-fit .moved { white-space: normal; }

  .t-csp { font-size: 10px; }
  .t-csp thead th, .t-csp tbody td { padding-left: 6px; padding-right: 6px; }
  .t-csp tbody th[scope="row"] { white-space: normal; }

  .colo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-overlay, .cursor-rule, .spec__grid, [data-reveal] { transition: none; }
  [data-reveal] { opacity: 1; transform: none; }
}