/* =====================================================================
   TraceLab — case file TL-02
   Visual mode: evidence dossier with annotated source fragments.

   Nothing here is shared with the Wayfold case study except the small
   global portfolio navigation (.gnav), which Master Instruction §14
   names as the one permitted shared element. Every other rule in this
   file is written for this project: a bound sheet, ruled folio heads,
   numbered exhibits with overlaid callouts, 1:1 source fragments, a
   left-hand cross-reference margin, and a chain-of-custody ledger.
   No gradient, no shadow, no pill, no device frame.
   ===================================================================== */

/* ---- Fonts: self-hosted, no network request ------------------------ */
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('assets/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('assets/fonts/source-serif-4-latin-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- Tokens -------------------------------------------------------- */
:root {
  /* The product's own five, unchanged. */
  --paper: #faf8f2;
  --ink: #171717;
  --blue: #2d52f3;
  --oxblood: #7a3040;
  --line: #d9d4c9;

  /* Case-file extensions. */
  --desk: #e7e1d4;
  --sheet: #faf8f2;
  --sheet-2: #f3f0e6;
  --ink-2: #3d3b36;
  --ink-3: #5b574e;
  --line-2: #c4bdad;
  --tint-blue: rgba(45, 82, 243, 0.05);
  --tint-ox: rgba(122, 48, 64, 0.05);

  --f-read: 'Source Serif 4 Variable', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Geist Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad-x: 84px;
  --margin-w: 208px;
  --gutter: 48px;
}

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

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-read);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img,
video { display: block; max-width: 100%; }

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

code, kbd {
  font-family: var(--f-mono);
  font-size: 0.86em;
  color: var(--ink-2);
}
kbd {
  border: 1px solid var(--line-2);
  padding: 0 4px;
  border-radius: 2px;
}

b, strong { font-weight: 600; }

/* Quoted product copy: the case study never paraphrases a UI string. */
.q { color: var(--ink-2); }
.q::before { content: '\201C'; }
.q::after { content: '\201D'; }

/* ---- Global portfolio navigation (the one shared element) ---------- */
.gnav {
  background: var(--ink);
  color: var(--paper);
}
.gnav__in {
  max-width: 1260px;
  margin: 0 auto;
  padding: 11px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.gnav__mark { font-weight: 600; }
.gnav__here { color: #cfcac0; }
.gnav__here b { color: var(--paper); font-weight: 500; }

/* ---- The sheet ----------------------------------------------------- */
/* The binding edge is a real border, not a background image: axe cannot
   compute a contrast ratio for anything sitting under an ancestor that
   carries a background image, and a page that reports 774 indeterminate
   contrast nodes has not been measured. */
.sheet {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  background: var(--sheet);
  border-left: 40px solid var(--sheet-2);
  border-right: 1px solid var(--line-2);
  overflow: hidden;
}
.cover,
.folio {
  border-left: 1px solid var(--line);
  margin-left: -1px;
}

/* ---- Cover sheet --------------------------------------------------- */
.cover {
  padding: 56px var(--pad-x) 52px;
  border-bottom: 2px solid var(--ink);
}
.cover__stamp {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 12px;
}
.cover__stamp b { color: var(--oxblood); font-weight: 500; }

.cover__title { margin-top: 34px; }
.cover h1 {
  font-family: var(--f-read);
  font-weight: 600;
  font-size: clamp(58px, 8.2vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0;
}
.cover__subject {
  font-family: var(--f-read);
  font-style: italic;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.3;
  color: var(--ink-2);
  margin-top: 14px;
}
.cover__lead {
  margin-top: 30px;
  max-width: 62ch;
  font-size: 18.5px;
  line-height: 1.6;
}

/* Docket: a form, not a strip of four cards. */
.docket {
  margin-top: 40px;
  border-top: 1px solid var(--ink);
}
.docket__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.docket dt {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.docket dd {
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
}

/* Index of exhibits: dot leaders, the way a file lists what is in it. */
.register {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
}
.register__head {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.leaders li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.leaders a {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-ui);
  font-size: 14.5px;
}
.leaders a span {
  flex: 0 1 auto;
  min-width: 0;
}
.leaders a::after {
  content: '';
  flex: 1 1 auto;
  height: 0;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
  min-width: 12px;
}
.leaders a:hover span,
.leaders a:focus-visible span { color: var(--blue); }
.leaders b {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.leaders--ex b { color: var(--blue); }

/* ---- Folios -------------------------------------------------------- */
.folio { padding: 0 var(--pad-x) 8px; }
.folio + .folio { border-top: 1px solid var(--line-2); }

.folio__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0 10px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.folio__id {
  background: var(--ink);
  color: var(--paper);
  padding: 3px 9px 2px;
}
.folio__subject { color: var(--ink-2); letter-spacing: 0.08em; }
.folio__sheet {
  margin-left: auto;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.folio--flag .folio__id { background: var(--oxblood); }

.folio__cols {
  display: grid;
  grid-template-columns: var(--margin-w) minmax(0, 1fr);
  gap: var(--gutter);
  padding: 34px 0 10px;
}

/* The margin apparatus: cross-references, not handwriting. Each entry
   ties itself to the body column with a leader rule across the gutter. */
.margin { position: relative; }
.ref {
  position: relative;
  padding: 9px 0 16px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-ui);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.ref::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 100%;
  width: var(--gutter);
  height: 0;
  border-top: 1px solid var(--line);
}
.ref b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ref code { font-size: 11.5px; color: var(--ink-3); }
.ref--flag { border-top-color: var(--oxblood); }
.ref--flag b { color: var(--oxblood); }
.ref--pass { border-top-color: var(--blue); }
.ref--pass b { color: var(--blue); }

/* ---- Body typography ----------------------------------------------- */
.body { max-width: 760px; }
.body h2 {
  font-family: var(--f-read);
  font-weight: 600;
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin-bottom: 18px;
}
.body h2 + .lead { margin-top: 0; }
.body h3 {
  font-family: var(--f-read);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin-top: 34px;
  margin-bottom: 10px;
  max-width: 34ch;
}
.body p { max-width: 66ch; }
.body p + p { margin-top: 14px; }
.body h2 + p,
.body h3 + p { margin-top: 0; }
.lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}
.small {
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.body .small { max-width: 72ch; }

/* Three commitments — numbered in roman, ruled, not a card row. */
.tenets {
  margin: 26px 0 8px;
  border-top: 1px solid var(--ink);
}
.tenets li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tenets__n {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
  padding-top: 5px;
}
.tenets p { max-width: 60ch; font-size: 16px; }

.pull {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--blue);
  font-family: var(--f-read);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 52ch;
}

/* ---- Exhibits ------------------------------------------------------ */
.exhibit {
  margin: 30px 0 42px;
  border: 1px solid var(--line-2);
  background: #fffdf8;
}
.exhibit__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--sheet-2);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.exhibit__id {
  color: var(--paper);
  background: var(--blue);
  padding: 3px 8px 2px;
  letter-spacing: 0.1em;
}
.exhibit__name {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.exhibit__meta {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0.02em;
}
.exhibit__meta code { font-size: 11px; }

/* The plate is mounted with a border rather than padding, so a mark's
   percentage offsets resolve against the image box itself. */
.exhibit__plate {
  position: relative;
  border: 16px solid var(--sheet-2);
  background: var(--sheet-2);
}
.exhibit__plate img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
}

/* Callout marks: squares, numbered, keyed to the list beneath. */
.mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  outline: 2px solid rgba(250, 248, 242, 0.92);
}

.keys {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* The number is taken out of flow so the key stays one run of text: a
   grid or flex parent would make every <b> and <span> in the sentence a
   track of its own. */
.keys li {
  position: relative;
  padding-left: 35px;
  max-width: 92ch;
}
.keys__n {
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}
.keys b { color: var(--ink); }

/* ---- Fragments: crops of the same captures, at 1:1 -----------------
   The crop is painted as a background at the capture's own CSS width, so
   one pixel of the product is one pixel here. Painted rather than an
   offset <img> because an image positioned outside a clipping window
   keeps its full client rect, and axe then calls every caption under it
   indeterminate. The window carries the alternative text instead. */
.fragment { margin: 24px 0 8px; }
.fragment__win {
  width: min(var(--w), 100%);
  height: var(--h);
  border: 1px solid var(--ink);
  background-color: var(--paper);
  background-image: var(--src);
  background-repeat: no-repeat;
  background-size: var(--nat) auto;
  background-position: var(--sx) var(--sy);
}
.fragment figcaption {
  margin-top: 10px;
  max-width: 68ch;
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}
.fragment figcaption b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ---- Chain of custody ---------------------------------------------- */
.chainwrap { padding: 8px 0 34px; }
.chain__title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
}
.chain__title--dep { margin-top: 34px; }

.chain {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.chain__step {
  padding: 14px 16px 18px 0;
  border-right: 1px solid var(--line);
}
.chain__step--last { border-right: 0; padding-right: 0; }
.chain__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.chain__n {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  border: 1px solid var(--line-2);
  padding: 1px 5px 0;
}
.chain__out {
  margin-top: 10px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.chain__out b { color: var(--ink); font-weight: 600; }
.chain__t {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  padding: 1px 5px 0;
  margin-right: 6px;
  vertical-align: 1px;
}
.chain__return {
  margin-top: 14px;
  padding: 12px 16px 12px 0;
  border-top: 1px dashed var(--line-2);
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 96ch;
}
.chain__return b { color: var(--ink); }
.chain__t--back { background: var(--blue); }

.departures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
}
.dep {
  border-top: 2px dashed var(--oxblood);
  padding: 12px 0 8px;
}
.dep__from {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.dep__name {
  font-family: var(--f-read);
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0 8px;
}
.dep p {
  font-family: var(--f-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dep p + p { margin-top: 8px; }
.dep__exits {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--ink-3) !important;
  font-size: 12.5px !important;
}
.dep__exits span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 6px;
}
.dep__exits b { color: var(--ink); }

/* ---- The take ------------------------------------------------------ */
.exhibit--motion .motion { padding: 16px; background: var(--sheet-2); }
.motion video {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  background: var(--paper);
}
.spec {
  margin-top: 14px;
  border-top: 1px solid var(--line-2);
}
.spec > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.spec dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.spec dd {
  font-family: var(--f-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- Tables -------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 8px;
  font-family: var(--f-ui);
  font-size: 14px;
}
caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
th[scope='col'] {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
  padding: 0 10px 8px;
  vertical-align: bottom;
}
th[scope='col']:first-child,
tbody th[scope='row'],
tbody td:first-child { padding-left: 0; }
tbody th[scope='row'] {
  text-align: left;
  font-weight: 400;
  color: var(--ink);
}
tbody th[scope='row'],
tbody td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  vertical-align: top;
  line-height: 1.5;
}
tfoot th[scope='row'],
tfoot td {
  padding: 10px 10px;
  border-top: 1px solid var(--ink);
  font-weight: 600;
  text-align: left;
}
.num {
  text-align: right;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.bad, .bad { color: var(--oxblood); font-weight: 500; }
td.good, .good { color: var(--ink); font-weight: 600; }
.row--flag th[scope='row'],
.row--flag td { background: var(--tint-ox); }
.scores tbody tr:last-child th,
.scores tbody tr:last-child td { border-bottom: 1px solid var(--ink); }

.matrix tfoot td { font-family: var(--f-mono); text-align: right; }
.runs th[scope='row'] {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 132px;
  padding-top: 11px;
}
.stack th[scope='row'] {
  font-family: var(--f-ui);
  font-weight: 600;
  width: 168px;
}
.stack td { color: var(--ink-2); }
.ratios th[scope='row'] { color: var(--ink-2); }

/* Detector strip: six figures, five of them zero. */
.detectors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 24px 0 14px;
}
.detectors > div {
  padding: 12px 12px 14px 0;
  border-right: 1px solid var(--line);
}
.detectors > div:last-child { border-right: 0; }
.detectors dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
  /* two lines of label so every figure sits on the same baseline */
  min-height: 2.8em;
}
.detectors dd {
  font-family: var(--f-mono);
  font-size: 34px;
  line-height: 1.1;
  margin-top: 6px;
}
.detectors dd.held { color: var(--oxblood); }

/* ---- Standing weaknesses ------------------------------------------- */
.standing {
  margin-top: 16px;
  border-top: 1px solid var(--line-2);
}
.standing li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 84ch;
}
.standing li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 12px;
  height: 1px;
  background: var(--oxblood);
}
.standing b { color: var(--ink); }

/* ---- Affidavit ----------------------------------------------------- */
.affidavit {
  border: 1px solid var(--ink);
  padding: 20px 24px 22px;
  margin: 8px 0 12px;
  background: var(--tint-blue);
}
.affidavit__head {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.affidavit p { max-width: 74ch; font-size: 16px; }
.affidavit p + p { margin-top: 12px; }

/* ---- Specimens ----------------------------------------------------- */
.specimen {
  margin: 18px 0 26px;
  border: 1px solid var(--line-2);
  background: #fffdf8;
}
.specimen__head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--sheet-2);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.specimen__path { color: var(--ink); }
.specimen__note {
  margin-left: auto;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
}
/* The excerpt soft-wraps rather than scrolling sideways: a line wider than
   its scroller keeps a client rect wider than its scroller, which makes
   axe call the block's own contrast indeterminate. Wrapped, the page
   reports a measured ratio for every run of type on it. */
.specimen pre {
  margin: 0;
  padding: 16px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  tab-size: 2;
}
.specimen code { font-size: inherit; color: inherit; }
.specimen .c { color: var(--ink-3); }

/* ---- Endsheet ------------------------------------------------------ */
.endsheet {
  max-width: 1260px;
  margin: 0 auto;
  background: var(--ink);
  color: #ded9cf;
  padding: 40px var(--pad-x) 34px;
}
.endsheet__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid #3a3a37;
}
.endsheet__head {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a8a29a;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid #3a3a37;
}
.endsheet__block p {
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.6;
}
.endsheet code { color: #cfcac0; }
.disclosure {
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #cfcac0;
}

/* ---- Access to the running build ----------------------------------- */
/* Published beside the case file at prototype/. Kept in the same bound-sheet
   grammar as the exhibits: a ruled block, a mono label, square corners. */
.custody {
  margin: 0 0 42px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--blue);
  background: var(--tint-blue);
  padding: 24px 28px 22px;
}
.custody__label {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.custody__h {
  margin: 0 0 12px;
  font-family: var(--f-read);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.custody__line {
  margin: 0 0 18px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.custody p:last-child { margin-bottom: 0; }
.custody__cta {
  display: inline-block;
  padding: 11px 20px;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.custody__cta:hover { background: var(--ink); }
.custody__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.custody__spec { margin-top: 22px; border-top-color: var(--line-2); }
.custody__spec > div { border-bottom-color: var(--line-2); }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --pad-x: 56px; --margin-w: 176px; --gutter: 36px; }
  .sheet { border-left-width: 18px; }
  .chain__step { padding-right: 12px; }
}

@media (max-width: 960px) {
  :root { --pad-x: 40px; }
  body { font-size: 16.5px; }

  .register { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .docket__row { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }

  /* The margin apparatus rides above the body and drops its leaders. */
  .folio__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .margin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
  }
  .ref { padding-bottom: 12px; }
  .ref::after { display: none; }
  .body { max-width: none; }

  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain__step {
    padding: 14px 16px 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .chain__step:nth-child(2n) { border-right: 0; }
  .chain__step--last { border-right: 0; }

  .departures { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dep { margin-bottom: 4px; }

  .detectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detectors > div:nth-child(3n) { border-right: 0; }
  .detectors > div:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .detectors dd { font-size: 28px; }

  .endsheet__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .keys li { max-width: none; }
  .spec > div { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 700px) {
  :root { --pad-x: 22px; }
  .sheet { border-left-width: 0; }
  .cover { padding-top: 36px; }
  .folio__head { flex-wrap: wrap; gap: 8px 12px; }
  .folio__sheet { margin-left: 0; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain__step { border-right: 0; padding-right: 0; }
  .detectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detectors > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .detectors > div:nth-child(2n) { border-right: 0; }
  .exhibit__meta { margin-left: 0; }
  .custody { padding: 20px 18px 18px; }
  .custody__h { font-size: 19px; }
  .keys li { padding-left: 29px; }
  .keys__n, .mark { width: 20px; height: 20px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}