/* ============================================================
   UMZI LABS LTD — bench.css
   Naming universe: laboratory optics and measurement.
   bench / reticle / crucible / assay / aliquot / titration /
   substrate / calibration / burette / grating / protocol /
   optic / filament / meniscus / tare / decant / pedestal
   Surface: light. Display: serif. Mono: heavy. Radius: zero.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour. Ratios measured against the surface each is used on.
     ink        on paper      16.07:1  AAA
     ink        on paper-alt  14.42:1  AAA
     ink-2      on paper       7.52:1  AAA
     ink-2      on paper-alt   6.75:1  AA
     mark       on paper       7.69:1  AAA
     mark       on paper-alt   6.90:1  AA
     mark-deep  on paper      10.07:1  AAA
     paper      on ink        16.07:1  AAA
     dim        on ink         8.62:1  AAA
     mark-lite  on ink         8.36:1  AAA  */
  --paper:      #F5F3EE;
  --paper-alt:  #EAE7DF;
  --paper-cut:  #E3DFD5;
  --white:      #FFFFFF;
  --ink:        #15181B;
  --ink-2:      #474F55;
  --dim:        #B9B4A8;
  --mark:       #8C2A1B;
  --mark-deep:  #6E2015;
  --mark-lite:  #E8A08F;
  --rule:       #CFC9BC;   /* decorative hairline only */
  --rule-firm:  #8F887B;   /* interactive borders, 3:1+ against paper */

  /* Type */
  --face-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --face-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-micro: 0.6875rem;
  --t-small: 0.8125rem;
  --t-body:  1.0625rem;
  --t-lead:  clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem);
  --t-h4:    1.0625rem;
  --t-h3:    clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --t-h2:    clamp(1.75rem, 1.38rem + 1.6vw, 2.6rem);
  --t-h1:    clamp(2.25rem, 1.55rem + 3.1vw, 4.15rem);

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* Radius system: zero. One token so nothing drifts. */
  --radius: 0;

  --measure: 34rem;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-display);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. Focus, always visible ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
}
.substrate a:focus-visible,
.substrate button:focus-visible { outline-color: var(--mark-lite); }

.shunt {
  position: absolute; left: var(--s4); top: -6rem; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5);
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
}
.shunt:focus { top: var(--s4); }

/* ---------- 4. Layout container ---------- */
.bench {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.bench--tight { max-width: 52rem; }
.bench--wide  { max-width: 86rem; }

/* ---------- 5. Type primitives ---------- */
.tare {
  display: block;
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mark);
  margin-bottom: var(--s4);
}
.substrate .tare { color: var(--mark-lite); }

h1, .t-h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2, .t-h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
h3, .t-h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.008em;
}
h4, .t-h4 {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-h4);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.decant {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38rem;
}
.substrate .decant { color: var(--dim); }

.prose-run > * + * { margin-top: var(--s5); }
.prose-run p { max-width: var(--measure); }

.footnote {
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}
.substrate .footnote { color: var(--dim); }

.stamp {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Body links */
.prose-run a, .protocol__body a, .decant a {
  color: var(--mark-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms ease;
}
.prose-run a:hover, .protocol__body a:hover, .decant a:hover {
  text-decoration-thickness: 3px;
}

/* Placeholder for facts that are genuinely not yet settled */
.tbc {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  background: var(--paper-cut);
  color: var(--mark-deep);
  border-bottom: 2px solid var(--mark);
  padding: 0.1em 0.4em;
}

/* ---------- 6. Actions ---------- */
.filament {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease;
}
.filament--solid {
  background: var(--ink);
  color: var(--paper);
}
.filament--solid:hover { background: var(--mark-deep); border-color: var(--mark-deep); }
.filament--bare {
  border-color: transparent;
  padding-inline: 0;
  color: var(--mark-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.filament--bare:hover { color: var(--ink); }
.filament:not(.filament--solid):not(.filament--bare):hover {
  background: var(--ink); color: var(--paper);
}
.substrate .filament { border-color: var(--paper); color: var(--paper); }
.substrate .filament--solid { background: var(--paper); color: var(--ink); }
.substrate .filament--solid:hover { background: var(--mark-lite); border-color: var(--mark-lite); }
.substrate .filament:not(.filament--solid):hover { background: var(--paper); color: var(--ink); }

.filament-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
}

/* ---------- 7. Divider ---------- */
.meniscus {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.meniscus--firm { border-top: 2px solid var(--ink); }

/* ---------- 8. Header: reticle ---------- */
.reticle {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
  z-index: 40;
}
.reticle__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 4.5rem;
}
.reticle__sight {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s3);
}
.reticle__glyph { width: 30px; height: 30px; flex: none; }
.reticle__word {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reticle__ways ul {
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.reticle__link {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.reticle__link:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.reticle__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--mark); }
.reticle__catch {
  display: none;
  background: transparent;
  border: 2px solid var(--ink);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  line-height: 0;
}
.reticle__bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
}
.reticle__bar + .reticle__bar { margin-top: 4px; }

@media (max-width: 47.99em) {
  .reticle__catch { display: block; }
  .reticle__ways {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    display: none;
  }
  .reticle__ways.is-open { display: block; }
  .reticle__ways ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) clamp(1.25rem, 4vw, 3.5rem) var(--s5);
  }
  .reticle__ways li + li { border-top: 1px solid var(--rule); }
  .reticle__link {
    display: block;
    padding: var(--s4) 0;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: var(--s3);
  }
  .reticle__link[aria-current="page"] { border-left-color: var(--mark); }
}

/* ---------- 9. Section rhythm ---------- */
.tier { padding-block: clamp(3.5rem, 7vw, var(--s9)); }
.tier--tight { padding-block: clamp(2.5rem, 5vw, var(--s8)); }
.tier--alt { background: var(--paper-alt); }
.tier--edged { border-top: 1px solid var(--rule); }

.section-lead { max-width: 44rem; margin-bottom: var(--s7); }
.section-lead p { margin-top: var(--s4); color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }

/* ================================================================
   LAYOUT FAMILY A — crucible.
   Asymmetric opening: 7/5 copy-and-photograph split with a
   statutory strip ruled off underneath.
   ================================================================ */
.crucible { padding-top: clamp(2.5rem, 5vw, var(--s8)); padding-bottom: 0; }
.crucible__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, var(--s8));
  align-items: start;
}
.crucible__copy { padding-bottom: var(--s7); }
.crucible__copy h1 { margin-bottom: var(--s5); }
.crucible__strip {
  margin-top: clamp(2rem, 5vw, var(--s7));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.crucible__fact {
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-left: 1px solid var(--rule);
  padding-left: var(--s5);
}
.crucible__fact:first-child { border-left: 0; padding-left: 0; }
.crucible__fact dt {
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mark);
  margin-bottom: var(--s2);
}
.crucible__fact dd { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* ================================================================
   LAYOUT FAMILY B — optic. Photograph as a ruled plate.
   ================================================================ */
.optic { margin: 0; }
.optic__frame {
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--paper-cut);
}
.optic__shot { width: 100%; height: auto; }
.optic__note {
  margin-top: var(--s3);
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.optic--plate .optic__frame { border-width: 2px; }
.optic--plate .optic__note {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s3);
}

/* ================================================================
   LAYOUT FAMILY C — assay.
   Sticky left heading against a stack of ruled rows with hanging
   monospace indices. Deliberately not a card grid.
   ================================================================ */
.assay__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, var(--s8));
  align-items: start;
}
.assay__head { position: sticky; top: var(--s6); }
.assay__head h2 { margin-bottom: var(--s4); }
.assay__head p { color: var(--ink-2); }
.assay__stack { border-top: 2px solid var(--ink); }

.aliquot {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.aliquot__index {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--mark);
  padding-top: 0.45rem;
}
.aliquot__body h3 { margin-bottom: var(--s3); }
.aliquot__body p { color: var(--ink-2); }
.aliquot__body p + p { margin-top: var(--s3); }
.aliquot__tags {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4);
}
.aliquot__tags li {
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--rule-firm);
  padding: 0.25rem var(--s3);
}

/* ================================================================
   LAYOUT FAMILY D — titration.
   A graduated horizontal axis of steps sharing one baseline rule,
   with tick marks. Collapses to a vertical ladder.
   ================================================================ */
.titration {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  margin-top: var(--s7);
}
.titration__step {
  padding: var(--s6) var(--s5) var(--s6) 0;
  border-right: 1px solid var(--rule);
  position: relative;
}
.titration__step:last-child { border-right: 0; padding-right: 0; }
.titration__step:not(:first-child) { padding-left: var(--s5); }
.titration__step::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 2.5rem; height: 6px;
  background: var(--mark);
}
.titration__step:not(:first-child)::before { left: 0; }
.titration__tick {
  display: block;
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mark);
  margin-bottom: var(--s3);
}
.titration__step h3 { font-size: 1.125rem; margin-bottom: var(--s3); }
.titration__step p { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }

@media (max-width: 61.99em) {
  .titration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titration__step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .titration__step:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 35.99em) {
  .titration { grid-template-columns: minmax(0, 1fr); }
  .titration__step { border-right: 0; padding-right: 0; padding-left: 0 !important; }
  .titration__step + .titration__step { border-top: 1px solid var(--rule); }
}

/* ================================================================
   LAYOUT FAMILY E — substrate.
   Full-bleed inverted band: one statement set large, with a
   two-up subordinate reading underneath.
   ================================================================ */
.substrate {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 7vw, var(--s9));
}
.substrate h2, .substrate h3 { color: var(--paper); }
.substrate__claim {
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 30ch;
  text-wrap: balance;
}
.substrate__pair {
  margin-top: clamp(2rem, 4vw, var(--s7));
  padding-top: var(--s6);
  border-top: 1px solid #3A4045;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, var(--s7));
}
.substrate__pair p { color: var(--dim); }
.substrate__pair h3 { font-size: 1.0625rem; margin-bottom: var(--s3); font-family: var(--face-mono); font-weight: 800; }
@media (max-width: 41.99em) { .substrate__pair { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================
   LAYOUT FAMILY F — caveat. A ruled box of explicit denials.
   ================================================================ */
.caveat {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: clamp(1.5rem, 4vw, var(--s7));
}
.caveat__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s2) var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.caveat__head h2 { font-size: var(--t-h3); }
.caveat__list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s4);
  color: var(--ink-2);
}
.caveat__list li + li { border-top: 1px solid var(--rule); }
.caveat__list li::before {
  content: "\00D7";
  font-family: var(--face-mono);
  font-weight: 800;
  color: var(--mark);
  line-height: 1.5;
}

/* ================================================================
   LAYOUT FAMILY G — calibration. Statutory facts as a ruled
   definition table, label column in heavy mono.
   ================================================================ */
.calibration {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.calibration__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s3) var(--s6);
  padding-block: var(--s5);
}
.calibration__row + .calibration__row { border-top: 1px solid var(--rule); }
.calibration__row dt {
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
  padding-top: 0.2rem;
}
.calibration__row dd { margin: 0; }
@media (max-width: 41.99em) {
  .calibration__row { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   LAYOUT FAMILY H — hail. Contact routes as a stacked ruled list
   with a wide left label, no cards.
   ================================================================ */
.hail { border-top: 2px solid var(--ink); }
.hail__route {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s4) var(--s7);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.hail__route h3 { margin-bottom: var(--s2); }
.hail__meta {
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mark);
}
.hail__body p { color: var(--ink-2); }
.hail__body p + p { margin-top: var(--s3); }
.hail__addr { font-style: normal; color: var(--ink-2); }
@media (max-width: 47.99em) {
  .hail__route { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10. Tables (grating) ---------- */
.grating__scroll {
  overflow-x: auto;
  border: 2px solid var(--ink);
  margin-block: var(--s5);
  -webkit-overflow-scrolling: touch;
}
.grating {
  min-width: 42rem;
  font-size: var(--t-small);
  line-height: 1.55;
  background: var(--white);
}
.grating caption {
  caption-side: top;
  text-align: left;
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-alt);
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--ink);
}
.grating th, .grating td {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.grating thead th {
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-alt);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.grating tbody th { font-weight: 600; color: var(--ink); }
.grating tbody tr:last-child th,
.grating tbody tr:last-child td { border-bottom: 0; }
.grating__hint {
  font-family: var(--face-mono); font-weight: 500;
  font-size: var(--t-micro); color: var(--ink-2);
  margin-top: calc(var(--s5) * -1 + var(--s2));
  margin-bottom: var(--s5);
}

/* ---------- 11. Legal documents: protocol + burette ---------- */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, var(--s8));
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, var(--s8));
}
@media (max-width: 61.99em) {
  .dossier { grid-template-columns: minmax(0, 1fr); }
}

.burette {
  position: sticky;
  top: var(--s5);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  border-top: 2px solid var(--ink);
  padding-top: var(--s4);
}
.burette__title {
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mark);
  margin-bottom: var(--s3);
}
.burette__list li + li { border-top: 1px solid var(--rule); }
.burette__link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s3) var(--s2) var(--s3) 0;
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-2);
  border-left: 3px solid transparent;
  padding-left: var(--s3);
  transition: color 120ms ease, border-color 120ms ease;
}
.burette__link:hover { color: var(--ink); border-left-color: var(--rule-firm); }
.burette__link.is-lit { color: var(--ink); font-weight: 800; border-left-color: var(--mark); }
.burette__no { color: var(--mark); font-weight: 800; }

@media (max-width: 61.99em) {
  .burette { position: static; max-height: none; overflow: visible; }
  .burette__list { column-count: 2; column-gap: var(--s6); }
  .burette__list li { break-inside: avoid; }
}
@media (max-width: 35.99em) {
  .burette__list { column-count: 1; }
}

.dossier__doc { min-width: 0; }
.dossier__head { border-bottom: 2px solid var(--ink); padding-bottom: var(--s5); margin-bottom: var(--s6); }
.dossier__head h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); margin-bottom: var(--s4); }
.dossier__dates {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
  margin-top: var(--s4);
}

.protocol { padding-top: var(--s7); scroll-margin-top: var(--s5); }
.protocol + .protocol { border-top: 1px solid var(--rule); }
.protocol__title {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s3);
  font-size: var(--t-h3);
  margin-bottom: var(--s5);
}
.protocol__no { color: var(--mark); font-family: var(--face-mono); font-weight: 800; font-size: 0.9em; padding-top: 0.15em; }
.protocol__body > * + * { margin-top: var(--s4); }
.protocol__body p { max-width: 40rem; }
.protocol__body h3 {
  font-family: var(--face-mono); font-weight: 800;
  font-size: 0.9375rem; letter-spacing: 0.02em;
  margin-top: var(--s6);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
}
.protocol__body h4 { font-size: 0.9375rem; margin-top: var(--s5); }
.protocol__body ul, .protocol__body ol { max-width: 40rem; }
.protocol__body ul li, .protocol__body ol li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s2);
}
.protocol__body ul li::before {
  content: "\2022";
  color: var(--mark); font-weight: 700;
}
.protocol__body ol { counter-reset: pitem; }
.protocol__body ol li { counter-increment: pitem; }
.protocol__body ol li::before {
  content: "(" counter(pitem, lower-alpha) ")";
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-micro); color: var(--mark);
  padding-top: 0.35em;
}
.protocol__body dl { max-width: 40rem; }
.protocol__body dt { font-weight: 600; margin-top: var(--s4); }
.protocol__body dd { margin: var(--s1) 0 0; color: var(--ink-2); }

.caution {
  border-left: 4px solid var(--mark);
  background: var(--paper-alt);
  padding: var(--s5);
  margin-block: var(--s5);
}
.caution p { max-width: 40rem; }
.caution p + p { margin-top: var(--s3); }
.caution__flag {
  display: block;
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mark-deep);
  margin-bottom: var(--s3);
}

.role-mark {
  display: inline-block;
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--mark);
  color: var(--mark-deep);
  padding: 0.15rem var(--s3);
  margin-bottom: var(--s4);
}

.backtop {
  display: inline-block;
  margin-top: var(--s7);
  font-family: var(--face-mono); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mark-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 12. Page opening for interior pages ---------- */
.opening {
  border-bottom: 2px solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, var(--s8)) clamp(2rem, 4vw, var(--s7));
}
.opening__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, var(--s7));
  align-items: end;
}
.opening h1 { margin-bottom: var(--s5); }
@media (max-width: 47.99em) {
  .opening__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 13. Footer: pedestal ---------- */
.pedestal {
  background: var(--ink);
  color: var(--dim);
  border-top: 6px solid var(--mark);
  padding-block: clamp(2.5rem, 5vw, var(--s8)) var(--s6);
  font-size: var(--t-small);
  line-height: 1.65;
}
.pedestal__cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(1.75rem, 4vw, var(--s7));
  padding-bottom: var(--s6);
  border-bottom: 1px solid #3A4045;
}
@media (max-width: 47.99em) {
  .pedestal__cols { grid-template-columns: minmax(0, 1fr); }
}
.pedestal__mark {
  font-family: var(--face-mono); font-weight: 800;
  font-size: 0.9375rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper);
  margin-bottom: var(--s4);
  display: block;
}
.pedestal__heading {
  font-family: var(--face-mono); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mark-lite);
  margin-bottom: var(--s4);
}
.pedestal__ways li + li { margin-top: var(--s3); }
.pedestal__ways a, .pedestal a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.pedestal__ways a:hover, .pedestal a:hover { color: var(--mark-lite); }
.pedestal__statutory { font-style: normal; }
.pedestal__statutory p + p { margin-top: var(--s3); }
.pedestal__base {
  padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  justify-content: space-between;
  font-family: var(--face-mono); font-weight: 500;
  font-size: var(--t-micro); letter-spacing: 0.04em;
}

/* ---------- 14. Motion inventory ----------
   1. Nav panel show/hide       — the panel belongs to the button pressed.
   2. Link and control hover    — confirms the pointer is on target.
   3. Section settle on entry   — paces long single-column pages so each
                                  band registers as one unit.
   4. Contents-rail highlight   — locates the reader in a long document.
   Nothing else moves. All of it is disabled under reduced-motion.
   ------------------------------------------------------------ */
.settle {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.settle.is-shown { opacity: 1; transform: none; }
.no-js .settle { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .settle { opacity: 1; transform: none; }
}

/* ---------- 15. Responsive collapse ---------- */
@media (max-width: 61.99em) {
  .assay__inner { grid-template-columns: minmax(0, 1fr); }
  .assay__head { position: static; }
}
@media (max-width: 55.99em) {
  .crucible__inner { grid-template-columns: minmax(0, 1fr); }
  .crucible__copy { padding-bottom: var(--s6); }
}
@media (max-width: 41.99em) {
  .crucible__fact { border-left: 0; padding-left: 0; }
  .crucible__fact + .crucible__fact { border-top: 1px solid var(--rule); }
  .aliquot { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .aliquot__index { padding-top: 0; }
  .grating { min-width: 36rem; }
}
@media (max-width: 25rem) {
  .protocol__title { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

@media print {
  .reticle, .burette, .shunt, .filament-set { display: none; }
  body { background: #fff; }
  .dossier { grid-template-columns: 1fr; }
}