:root {
  /* the accent slot is named --amber across the instrument pages;
     here it carries the bioreactor's blue */
  --amber: #5aa9ff;
  --amber-deep: #1d5a9e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`. Per spec a non-visible value on one axis forces the
     other to `auto`, so `overflow-x: hidden` here quietly made <body> a scroll
     container: scroll events then fire on body and never reach window, which
     kills every window-level scroll listener on the page — including the
     fallbacks that fill the reveals and the marks when IntersectionObserver
     does not deliver. `clip` blocks the same overflow without creating a
     scroll box. */
  overflow-x: clip;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

h1, h2 { font-weight: 600; letter-spacing: -0.035em; margin: 0; }

/* ---------- atmosphere ---------- */
.bg-glow, .grid-lines, .grain, .vignette {
  position: fixed; inset: 0; pointer-events: none;
}
.bg-glow {
  z-index: 0;
  background:
    radial-gradient(52% 40% at 50% 38%, color-mix(in srgb, var(--amber) 6%, transparent), transparent 72%),
    radial-gradient(90% 60% at 50% 110%, rgba(38, 62, 104, .18), transparent 70%);
}
.grid-lines {
  z-index: 0; opacity: .16;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(66% 56% at 50% 42%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(66% 56% at 50% 42%, #000 30%, transparent 100%);
}
/* fine film grain keeps the large dark areas from banding */
.grain {
  z-index: 45; opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.vignette {
  z-index: 44;
  box-shadow: inset 0 0 min(16vw, 190px) rgba(0, 0, 0, .38);
}

/* ---------- chrome ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 50; background: rgba(255, 255, 255, .045);
}
.progress-bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
}
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(18px, 3.2vw, 34px);
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.brand { color: var(--fg); font-weight: 500; }
.brand span { color: var(--amber); }
.topbar-meta { color: var(--dim); }
.topbar-meta span { color: var(--faint); margin: 0 .35em; }

/* ---------- intro ---------- */
.intro {
  position: relative; z-index: 2; min-height: 100vh;
  display: grid; place-content: center; text-align: center;
  padding: 6rem 2rem 3rem;
}
.eyebrow {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1.6rem;
}
.intro :is(h1, .intro-title) {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.02; margin-bottom: 1.6rem;
}
.intro :is(h1, .intro-title) span { color: var(--amber); }
.intro > p {
  max-width: 44ch; margin: 0 auto; text-align: left;
  color: var(--muted); font-size: 1rem; line-height: 1.7;
}

/* stat strip */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.6rem, 5vw, 4rem);
  margin: 3.4rem auto 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  max-width: 700px;
}
.stats div { text-align: center; }
.stats dt {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .5rem;
}
.stats dd {
  margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em;
}
.stats dd em { font-style: normal; color: var(--amber); font-size: .9rem; margin-left: .1em; }

.scroll-cue {
  margin-top: 3.2rem;
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 44px; margin: 14px auto 0;
  background: linear-gradient(var(--amber), transparent);
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop {
  0%, 100% { opacity: .2; transform: scaleY(.4); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* ---------- stage ---------- */
.stage { position: sticky; top: 0; height: 100vh; width: 100%; z-index: 1; }
#gl { display: block; width: 100%; height: 100%; }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* side panels */
.panel {
  position: absolute; top: 30%;
  width: min(27vw, 340px);
  transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.panel.show { opacity: 1; visibility: visible; }
.panel-l { left: clamp(20px, 4vw, 56px); }
.panel-r { right: clamp(20px, 4vw, 56px); text-align: right; }

/* staggered entrance for the copy */
.panel > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.panel.in > * { opacity: 1; transform: none; }
.panel.in > *:nth-child(1) { transition-delay: .02s }
.panel.in > *:nth-child(2) { transition-delay: .07s }
.panel.in > *:nth-child(3) { transition-delay: .12s }
.panel.in > *:nth-child(4) { transition-delay: .17s }

.tag {
  font-family: var(--mono); font-size: 2.3rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.1px var(--amber-deep);
  line-height: 1; margin-bottom: .55rem;
}
.pname {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  margin-bottom: .5rem; line-height: 1.14;
}
.prole {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1.2rem;
}
.pdesc { color: var(--muted); line-height: 1.78; font-size: .87rem; margin: 0; }

/* spec table */
.spec {
  border-top: 1px solid var(--line);
  padding: .6rem 0;
  display: flex; justify-content: flex-end;
  gap: 1.5rem; align-items: baseline;
}
.spec:last-child { border-bottom: 1px solid var(--line); }
.spec-k {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
}
.spec-v { font-size: .85rem; font-weight: 500; letter-spacing: -.012em; }

/* hero + finale cards */
.card {
  position: absolute; left: 50%; top: 7%;
  transform: translateX(-50%) translateY(8px);
  width: min(88vw, 560px); text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.card.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.card h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: .9rem; line-height: 1.1; }
.card p { color: var(--muted); line-height: 1.75; font-size: .92rem; margin: 0 auto; max-width: 48ch; }
.card .eyebrow { margin-bottom: 1rem; }

/* build-step caption, shown while the instrument goes back together */
.build {
  position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%) translateY(6px);
  width: min(88vw, 460px); text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.build.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.build-n {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .7rem;
}
.build h4 {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 600;
  letter-spacing: -.025em; margin: 0 0 .4rem;
}
.build p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }

/* six-condition legend on the array panel */
.legend { margin-top: 1.3rem; }
.legend-h {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .6rem;
}
.ch {
  display: flex; align-items: center; gap: .5rem;
  padding: .26rem 0; justify-content: flex-end;
}
.ch-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  box-shadow: 0 0 7px currentColor;
}
.ch.green .ch-dot { background: #4dff7a; color: #4dff7a; }
.ch.red   .ch-dot { background: #ff5f4a; color: #ff5f4a; }
.ch-name {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); width: 2.6rem; text-align: left;
}
.ch-bar {
  flex: 1; max-width: 74px; height: 3px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .09); overflow: hidden;
}
.ch-bar i { display: block; height: 100%; border-radius: var(--r-xs); background: currentColor; }
.ch.green .ch-bar { color: #4dff7a; }
.ch.red   .ch-bar { color: #ff5f4a; }
.ch-val {
  font-family: var(--mono); font-size: .62rem; color: var(--fg);
  width: 4.6rem; text-align: right;
}
.ch-val em { font-style: normal; color: var(--dim); font-size: .82em; margin-left: .18em; }
.legend-f {
  margin-top: .7rem; font-size: .68rem; line-height: 1.5;
  color: var(--dim); text-align: right;
}

/* index counter */
.counter {
  position: absolute; left: 50%; bottom: 46px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--dim); opacity: 0; transition: opacity .35s var(--ease);
}
.counter.show { opacity: 1; }
.counter b { color: var(--amber); font-weight: 600; }
.counter i { color: var(--faint); font-style: normal; margin: 0 .45em; }

/* progress rail */
.rail {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; gap: 7px; align-items: center;
  opacity: 0; transition: opacity .35s var(--ease);
  /* One dot per part, so the natural width scales with the part count and
     overflowed a phone at 15 parts. Cap it and let the dots shrink instead. */
  max-width: calc(100vw - 32px);
}
.rail.show { opacity: 1; }
.dot {
  width: 20px; flex: 0 1 20px; min-width: 5px;
  height: 2px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .13);
  transition: background .4s var(--ease), width .4s var(--ease);
}
.dot.done { background: rgba(90, 169, 255, .32); }
.dot.on { background: var(--amber); width: 34px; flex-basis: 34px; }

/* loader */
.loader {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
  transition: opacity .7s var(--ease);
}
.loader b { color: var(--amber); font-weight: 500; letter-spacing: .1em; }
.loader.hide { opacity: 0; pointer-events: none; }

.track { position: relative; z-index: 0; }

/* outro */
.outro {
  position: relative; z-index: 2; min-height: 60vh;
  display: grid; place-content: center; align-content: center; justify-items: center;
  text-align: center; padding: 6rem 2rem; gap: .4rem;
}
.outro-lead {
  max-width: 40ch; margin: 0 auto 1.8rem; text-align: left;
  color: var(--muted); font-size: 1.05rem; line-height: 1.72;
}
.outro-lead strong { color: var(--fg); font-weight: 600; }
.outro-meta {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--faint);
}

/* ══════════════════ technical record ══════════════════ */
.doc-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
  padding: 0 clamp(18px, 4vw, 48px) 6rem;
  border-top: 1px solid var(--line);
}

/* sticky contents rail */
.doc-nav {
  grid-column: 1;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-right: 2rem;
}
.doc-nav-label {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 1.1rem;
}
.doc-nav ol { list-style: none; margin: 0; padding: 0; }
.doc-nav li { margin-bottom: .7rem; }
.doc-nav a {
  display: flex; gap: .7rem; align-items: baseline;
  text-decoration: none; color: var(--dim);
  font-size: .8rem; line-height: 1.3;
  transition: color .25s var(--ease);
  border-left: 1px solid transparent; padding-left: .8rem;
  margin-left: -.8rem;
}
.doc-nav a b {
  font-family: var(--mono); font-size: .62rem; color: var(--faint);
  transition: color .25s var(--ease);
}
.doc-nav a:hover { color: var(--fg); }
.doc-nav a.on { color: var(--fg); border-left-color: var(--amber); }
.doc-nav a.on b { color: var(--amber); }

.doc { grid-column: 2; padding-top: 5rem; }

/* ---- document header ---- */
.doc-head { margin-bottom: 5rem; }
.doc-head h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.03; margin-bottom: 1.6rem;
}
.standfirst {
  font-size: 1.1rem; line-height: 1.62; color: var(--fg);
  margin: 0 0 1.4rem; font-weight: 350;
}
.doc-aim {
  color: var(--muted); line-height: 1.75; font-size: .95rem;
  margin: 0 0 2rem; padding-left: 1.1rem;
  border-left: 2px solid var(--line);
}
.status {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .82rem; line-height: 1.6; color: var(--muted);
  background: color-mix(in srgb, var(--amber) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 16%, transparent);
  border-radius: var(--r-xs); padding: .85rem 1rem;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none; margin-top: .5rem;
}

/* ---- part dividers ---- */
.part {
  margin: 7rem 0 3rem; padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.part:first-of-type { margin-top: 0; }
.part-mark {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem;
}
.part-mark span {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--faint);
}
.part-mark b {
  font-family: var(--mono); font-size: 1.1rem; color: var(--amber); font-weight: 600;
}
.part h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; }

/* ---- sections ---- */
.sec { margin-bottom: 3.4rem; }
.sec h3 {
  font-size: 1.42rem; font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 1.1rem; line-height: 1.3;
  display: flex; gap: .75rem; align-items: baseline;
}
.sec h3 i, .sec h4 i {
  font-family: var(--mono); font-style: normal;
  font-size: .72em; color: var(--amber); font-weight: 500;
  flex: none;
}
.sec h3 em, .sec h4 em { font-style: normal; color: var(--dim); font-weight: 400; }
.sec h4 {
  font-size: 1.1rem; font-weight: 600; margin: 2.2rem 0 .8rem;
  display: flex; gap: .7rem; align-items: baseline;
}
.sec h5 { font-size: .87rem; font-weight: 600; margin: 0 0 .4rem; }
.sec p {
  /* Body was .95rem/68ch, which measures 15.2px at 70 characters — small for
     long-form and at the top of the readable range. 1.06rem is about 17px, and
     because the cap is in ch it has to come down with it or the measure just
     stays where it was: 64ch lands near the 66-character optimum. */
  color: var(--muted); line-height: 1.8; font-size: 1.05rem;
  margin: 0 0 1.25rem; max-width: 64ch;
}
.sec p b, .sec li b { color: var(--fg); font-weight: 600; }
.sec li { font-size: 1.05rem; line-height: 1.8; }
.sec a { color: var(--amber); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.sec a:hover { border-bottom-color: var(--amber); }
.sec abbr { text-decoration: none; border-bottom: 1px dotted var(--dim); cursor: help; }
.lead-note {
  font-size: 1.02rem !important; color: var(--fg) !important;
  border-left: 2px solid var(--amber); padding-left: 1.1rem;
}
.fineprint { font-size: .85rem !important; color: var(--dim) !important; }

/* ---- pending value chip ---- */
.pending {
  display: inline-block; vertical-align: baseline;
  min-width: 4.4em; height: 1.05em;
  border: 1px dashed color-mix(in srgb, var(--amber) 42%, transparent);
  border-radius: var(--r-xs);
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--amber) 5%, transparent) 0 4px, transparent 4px 8px);
}
.pending.s { min-width: 2.4em; }
.pending.eq { min-width: 12em; height: 1.5em; }

/* ---- open item ---- */
.openitem {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 2px solid var(--amber-deep);
  border-radius: var(--r-xs); padding: .9rem 1.1rem;
  margin: 1.4rem 0; background: rgba(255,255,255,.017);
}
.openitem.tight { margin: .9rem 0 0; padding: .7rem .9rem; }
.openitem-tag {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); flex: none; margin-top: .28rem;
}
.openitem p, .openitem ul { margin: 0; font-size: .85rem !important; line-height: 1.65; }
.openitem ul { padding-left: 1.1rem; color: var(--muted); }
.openitem li { margin-bottom: .3rem; font-size: .85rem; line-height: 1.6; }

/* ---- blank slot ---- */
.blank-slot {
  border: 1px dashed rgba(255,255,255,.11);
  border-radius: var(--r-sm); min-height: 130px;
  display: grid; place-content: center;
  margin: 1.2rem 0;
  background: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.012) 0 8px, transparent 8px 16px);
}
.blank-slot::after {
  content: attr(data-label) " — to be written";
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}

/* ---- keynote ---- */
.keynote {
  display: flex; gap: 1.6rem; align-items: center;
  margin: 2rem 0; padding: 1.4rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(100deg, color-mix(in srgb, var(--amber) 6%, transparent), transparent 60%);
}
.keynote-fig {
  font-size: 2.6rem; font-weight: 650; letter-spacing: -.04em;
  color: var(--amber); line-height: 1; flex: none;
}
/* The unit suffix rides on the keynote's dark panel, so it cannot use the
   deep variant — that is tuned for white and lands near 2.9:1 here. Use
   --amber: the light theme already promotes it to --amber-deep. */
.keynote-fig em { font-style: normal; font-size: .38em; margin-left: .12em; color: var(--amber); }
.keynote p { margin: 0 !important; font-size: .9rem !important; }

/* ---- tables ---- */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 560px; }
table caption {
  text-align: left; font-family: var(--mono); font-size: .55rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--faint);
  padding-bottom: .7rem;
}
table th {
  text-align: left; font-family: var(--mono); font-size: .56rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  font-weight: 500; padding: .6rem .8rem; border-bottom: 1px solid var(--line);
}
table td {
  padding: .72rem .8rem; border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--muted); line-height: 1.5; vertical-align: top;
}
table tbody tr:hover td { background: rgba(255,255,255,.017); }
table td:first-child { color: var(--fg); font-weight: 500; }
table .num { text-align: right; white-space: nowrap; }
table tfoot td {
  border-bottom: none; border-top: 1px solid var(--line);
  color: var(--fg); font-weight: 600; padding-top: .9rem;
}
.compare tr.ours td { background: color-mix(in srgb, var(--amber) 5%, transparent); }
.compare tr.ours td:first-child { color: var(--amber); }

/* ---- spec card ---- */
.spec-card {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.3rem 1.5rem; margin: 1.8rem 0;
}
.spec-card-title {
  font-family: var(--mono); font-size: .56rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1rem;
}
.spec-card dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.6rem; margin: 0 0 1rem;
}
.spec-card dt {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  margin-bottom: .25rem;
}
.spec-card dd { margin: 0; font-size: .87rem; font-weight: 500; }
.spec-note { font-size: .84rem !important; color: var(--dim) !important; margin: 0 !important; }

/* ---- iterations ---- */
.iters { list-style: none; margin: 2rem 0; padding: 0; }
.iters li { display: flex; gap: 1.4rem; padding-bottom: 2.2rem; position: relative; }
.iters li::before {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 0;
  width: 1px; background: var(--line);
}
.iters li:last-child::before { display: none; }
.iter-n {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  color: var(--amber); flex: none;
  width: 35px; height: 35px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  display: grid; place-content: center;
  background: var(--bg); position: relative; z-index: 1;
}
.iter-body { flex: 1; min-width: 0; }
.iter-body h4 { margin: .35rem 0 .6rem; font-size: 1rem; }
.iter-cause { font-size: .87rem !important; color: var(--dim) !important; }

/* delta */
.delta {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem 1.2rem; margin: 1.1rem 0;
}
.delta > div { text-align: center; }
.delta span {
  display: block; font-family: var(--mono); font-size: .52rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  margin-bottom: .25rem;
}
.delta b { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; color: var(--muted); }
.delta b.good { color: var(--amber); }
.delta-arrow { color: var(--faint); font-size: 1.1rem; }
.delta p {
  flex: 1; min-width: 190px; margin: 0 !important;
  font-size: .78rem !important; color: var(--dim) !important; line-height: 1.55;
}

/* ---- callout ---- */
.callout {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.2rem 1.4rem; margin: 2rem 0;
  background: rgba(255,255,255,.017);
}
.callout h5 { color: var(--fg); font-size: .92rem; margin-bottom: .5rem; }
.callout h5 em { font-style: italic; color: var(--amber); }
.callout p { margin: 0 !important; font-size: .89rem !important; }
.callout.warn { border-color: color-mix(in srgb, var(--amber) 22%, transparent); background: color-mix(in srgb, var(--amber) 4.5%, transparent); }

/* ---- filter steps ---- */
.filter-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  margin: 1.6rem 0;
}
.filter-steps > div { background: var(--bg); padding: 1rem; }
.filter-steps b {
  display: block; font-family: var(--mono); font-size: .62rem;
  color: var(--amber); margin-bottom: .5rem;
}
.filter-steps p { margin: 0 !important; font-size: .82rem !important; line-height: 1.55; }

/* ---- protocol ---- */
.protocol { counter-reset: p; list-style: none; margin: 1.4rem 0; padding: 0; }
.protocol li {
  counter-increment: p; position: relative;
  padding-left: 2.4rem; margin-bottom: 1.5rem;
}
.protocol li::before {
  content: counter(p); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: .62rem; color: var(--amber);
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  display: grid; place-content: center;
}
.protocol p { margin: 0 !important; font-size: .9rem !important; }

/* ---- equation ---- */
.equation {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.3rem 1.5rem; margin: 1.4rem 0;
  background: rgba(255,255,255,.017);
  font-family: var(--mono);
}
.eq-lhs { font-size: 1.05rem; color: var(--fg); }
.eq-eq { color: var(--dim); }
.eq-range { font-size: .85rem !important; color: var(--dim) !important; }

/* ---- metrics ---- */
.metrics { display: flex; gap: 2.4rem; flex-wrap: wrap; margin: 1.2rem 0 1.4rem; }
.metrics > div { display: flex; align-items: baseline; gap: .55rem; }
.metrics span {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.metrics b { font-size: 1.15rem; font-weight: 600; }
.metrics em { font-style: normal; font-size: .72rem; color: var(--faint); }

/* ---- figures ---- */
.fig { margin: 2rem 0; }
.fig-slot {
  border: 1px dashed rgba(255,255,255,.11); border-radius: var(--r-sm);
  min-height: 230px; display: grid; place-content: center;
  background: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.012) 0 8px, transparent 8px 16px);
}
.fig-slot span {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.fig figcaption {
  font-size: .82rem; color: var(--dim); line-height: 1.6;
  padding-top: .8rem; max-width: 62ch;
}

/* ---- flow path ---- */
.flow { color: var(--fg); font-weight: 500; white-space: nowrap; }
.flow i { color: var(--amber); font-style: normal; margin: 0 .18em; }

/* ---- parameters ---- */
.params { display: grid; gap: 1rem; margin: 1.6rem 0; }
.param {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1.2rem 1.4rem;
}
.param.prio { border-color: color-mix(in srgb, var(--amber) 24%, transparent); background: color-mix(in srgb, var(--amber) 3.5%, transparent); }
.param-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap;
}
.param-head h4 { margin: 0; font-size: 1rem; }
.tag {
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: .22rem .5rem;
  /* `flex: none` here used to let a long tag ("Highest priority", widened by the
     .18em tracking) push past the page edge on a phone. Shrinkable, and allowed
     to wrap, so it can never be the widest thing on the page. */
  flex: 0 1 auto; max-width: 100%;
}
.tag.hot { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.param p { margin: 0 0 .7rem !important; font-size: .89rem !important; }
.param-note { color: var(--dim) !important; font-size: .84rem !important; }

/* ---- headline stats ---- */
.headline-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  margin: 1.8rem 0;
}
.headline-stats > div { background: var(--bg); padding: 1.2rem 1rem; text-align: center; }
.headline-stats b {
  display: block; font-size: 1.7rem; font-weight: 650;
  letter-spacing: -.04em; color: var(--amber); line-height: 1;
}
.headline-stats b em { font-style: normal; font-size: .45em; margin-left: .06em; }
.headline-stats span {
  display: block; margin-top: .5rem;
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}

/* ---- phases ---- */
.phases {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  margin: 1.6rem 0;
}
.phases > div { background: var(--bg); padding: .9rem 1rem; }
.phases span {
  display: block; font-family: var(--mono); font-size: .55rem;
  letter-spacing: .14em; color: var(--amber); margin-bottom: .35rem;
}
.phases b { font-size: .85rem; font-weight: 500; color: var(--muted); }

/* ---- limits ---- */
.limits { display: grid; gap: 1.4rem; margin: 1.4rem 0 1.6rem; }
.limits > div { padding-left: 1.1rem; border-left: 2px solid var(--line); }
.limits h4 { margin: 0 0 .45rem; font-size: .95rem; }
.limits p { margin: 0 !important; font-size: .89rem !important; }

/* ---- pull quote ---- */
.pull {
  margin: 2rem 0; padding: 1.6rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5;
  font-weight: 350; color: var(--fg); letter-spacing: -.015em;
}
.pull b { color: var(--amber); font-weight: 650; }

.doc-foot { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ---- condition matrix ---- */
.matrix {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  margin: 1.8rem 0;
}
.matrix > div { background: var(--bg); padding: .75rem .9rem; }
.mx-corner { background: var(--bg); }
.mx-h {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); text-align: center;
}
.mx-w {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .12em; color: var(--muted); white-space: nowrap;
}
.mx-w span { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.mx-w.green span { background: #4dff7a; color: #4dff7a; }
.mx-w.red span { background: #ff5f4a; color: #ff5f4a; }
.mx-c { text-align: center; }
.mx-dots { display: flex; gap: 4px; justify-content: center; margin-bottom: .4rem; }
.mx-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.mx-c.green .mx-dots i { background: #4dff7a; }
.mx-c.red .mx-dots i { background: #ff5f4a; }
.mx-c.low .mx-dots i { opacity: .28 }
.mx-c.mid .mx-dots i { opacity: .60 }
.mx-c.high .mx-dots i { opacity: 1; box-shadow: 0 0 8px currentColor; }
.mx-c.green.high .mx-dots i { color: #4dff7a }
.mx-c.red.high .mx-dots i { color: #ff5f4a }
.mx-v { font-family: var(--mono); font-size: .68rem; color: var(--fg); }
.mx-v em { font-style: normal; color: var(--dim); font-size: .8em; margin-left: .2em; }
.mx-note {
  grid-column: 1 / -1; text-align: center;
  font-size: .68rem; color: var(--dim);
}

/* ---- I² chart ---- */
#i2-chart { display: grid; gap: 1.4rem; }
.i2-panel {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem 1.1rem .4rem;
}
.i2-h {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem;
}
.i2-sw { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.i2-panel.green .i2-sw { background: #4dff7a; color: #4dff7a; }
.i2-panel.red .i2-sw { background: #ff5f4a; color: #ff5f4a; }
.i2-h b { margin-left: auto; color: var(--fg); font-weight: 600; }
.i2-h i { font-style: normal; color: var(--faint); }
svg.i2 { width: 100%; height: auto; display: block; overflow: visible; }
.i2-ax { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.i2-tick { fill: var(--dim); font-family: var(--mono); font-size: 9px; text-anchor: middle; }
.i2-unit { fill: var(--faint); font-family: var(--mono); font-size: 8px; text-anchor: end; }
.i2-band { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .07); }
.i2-band-l {
  font-family: var(--mono); font-size: 8.5px; text-anchor: middle;
  letter-spacing: .12em; text-transform: uppercase; fill: var(--dim);
}
.i2-dot.rej { fill: rgba(255, 255, 255, .14); }
.i2-panel.green .i2-dot.sel { fill: #4dff7a; }
.i2-panel.red .i2-dot.sel { fill: #ff5f4a; }
.i2-dot.sel.t0 { opacity: .42 }
.i2-dot.sel.t1 { opacity: .72 }
.i2-dot.sel.t2 { opacity: 1 }

/* misc */
.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--r-xs);
  margin-right: .5rem; vertical-align: -1px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.swatch.black { background: #16181b }
.swatch.grey { background: #6a6f77 }
.swatch.white { background: #d9dbdd }
ul.tight { margin: .4rem 0 .9rem; padding-left: 1.1rem; color: var(--muted); }
ul.tight li { font-size: .9rem; line-height: 1.7; margin-bottom: .2rem; }

/* ---------- mobile ---------- */
@media (max-width: 1100px) {
  /* Two separate traps here, both of which blew the page out to 560px wide on a
     390px phone — the width of the tables' `min-width` — dragging every fixed
     layer (topbar, progress bar, glow) out with it.

     1. A bare `1fr` is `minmax(auto, 1fr)`, and that `auto` minimum is
        min-content, which the tables set. The track must be `minmax(0, …)`.
     2. `margin: 0 auto` on a grid item makes it shrink-to-fit rather than
        stretch, and shrink-to-fit floors at min-content — so the item stayed
        560px even once the track was correct. The track now carries both the
        max-width and the centring, so the item can just stretch into it. */
  .doc-wrap { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .doc-nav { display: none; }
  .doc { grid-column: 1; min-width: 0; }
}

@media (max-width: 900px) {
  .topbar { font-size: .55rem; padding: 14px 16px; }
  .topbar-meta { display: none; }
  .panel {
    width: calc(100% - 32px);
    left: 16px; right: 16px; transform: none; text-align: left;
  }
  .panel-l { top: 6%; }
  .panel-r { top: 26%; text-align: left; }
  .spec { justify-content: flex-start; }
  .tag { font-size: 1.8rem; }
  .pdesc { font-size: .82rem; }
  .card { top: 7%; }
  .stats { gap: 1.4rem 2rem; }
  .stats dd { font-size: 1.3rem; }
  .counter { bottom: 40px; }

  .doc-wrap { padding-bottom: 4rem; }
  .doc { padding-top: 3rem; }
  .part { margin: 4.5rem 0 2.2rem; }
  .sec p, .sec li { font-size: 1rem; }
  .keynote { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .iters li { gap: 1rem; }
  .iters li::before { left: 15px; }
  .iter-n { width: 31px; height: 31px; font-size: .62rem; }
  .metrics { gap: 1.4rem; }
  .headline-stats b { font-size: 1.4rem; }
  .doc-head h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .standfirst { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; }
  .panel > * { transition: none; opacity: 1; transform: none; }
}

/* ---- photo frames ---- */
.frames {
  display: grid; gap: 1rem;
  /* capped, not 1fr — a lone portrait frame stretched to the full column runs
     most of a screen tall */
  grid-template-columns: repeat(auto-fit, minmax(220px, 330px));
  justify-content: start;
  margin: 1.6rem 0;
}
.frame { margin: 1.6rem 0; }
.frames .frame { margin: 0; }
.frame-img {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #0b0d10;
  /* the real photos are portrait phone shots, so portrait is the default —
     cropping them into a landscape box throws most of the device away */
  aspect-ratio: 3 / 4;
}
.frame-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.04);
  object-position: center 45%;
}
.frame.land .frame-img { aspect-ratio: 4 / 3; }
.frame.wide .frame-img { aspect-ratio: 16 / 9; }
.frame.square .frame-img { aspect-ratio: 1 / 1; }
/* a single feature photo should not run the full column height */
.frame.hero { max-width: 430px; margin-left: auto; margin-right: auto; }

/* empty state — a labelled slot, so a gap reads as deliberate */
.frame.empty .frame-img {
  border-style: dashed; border-color: rgba(255,255,255,.11);
  background: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.012) 0 8px, transparent 8px 16px);
  display: grid; place-content: center; text-align: center; padding: 1rem;
}
.frame.empty .frame-img::after {
  content: attr(data-label);
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); line-height: 1.9; max-width: 26ch;
}
.frame figcaption {
  padding-top: .65rem; font-size: .78rem; line-height: 1.6; color: var(--dim);
}
.frame figcaption b {
  color: var(--muted); font-weight: 600; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  margin-right: .5rem;
}
/* a frame sitting inside an iteration entry */
.iter-body .frames { margin: 1.1rem 0 .2rem; }
.iter-body .frame figcaption { font-size: .72rem; }

/* upload reminder for iGEM */
.frame-note {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-top: .3rem;
}

/* ---- back to the hardware hub ---- */
.brand.back {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; transition: color .3s var(--ease);
}
.brand.back i {
  font-style: normal; color: var(--amber);
  transition: transform .3s var(--ease);
}
.brand.back:hover i { transform: translateX(-3px); }
.topbar-meta a { color: inherit; text-decoration: none; }
.topbar-meta a:hover { color: var(--muted); }

/* ═══════════ elevation pass ═══════════ */

/* deeper base + a display type scale that commits */
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.038em; }
::selection { background: color-mix(in srgb, var(--amber) 30%, transparent); }

/* page hand-off, matching the hub. Exit only — see hub.css. */
body.leaving { opacity: 0; transition: opacity .32s var(--ease); }

/* the hero title gets real presence */
.intro :is(h1, .intro-title) { font-size: clamp(2.7rem, 8.4vw, 6rem); line-height: .96; }
.intro :is(h1, .intro-title) span { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--amber) 22%, transparent)); }

/* rules either side of the eyebrow, so it sits rather than floats */
.intro .eyebrow, .doc-head .eyebrow {
  display: flex; align-items: center; gap: .8rem; justify-content: center;
}
.doc-head .eyebrow { justify-content: flex-start; }
.intro .eyebrow::before, .intro .eyebrow::after {
  content: ""; height: 1px; width: clamp(18px, 4vw, 44px);
  background: linear-gradient(90deg, transparent, var(--line-2));
}
.intro .eyebrow::after { background: linear-gradient(90deg, var(--line-2), transparent); }

/* topbar hairline appears once you leave the hero */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
  opacity: 0; transition: opacity .5s var(--ease);
}
.topbar.stuck::after { opacity: 1; }

/* surfaces become objects: gradient hairline + layered shadow */
.spec-card, .callout, .param, .openitem, .i2-panel, .keynote, .equation, .frame-img {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.006));
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 16px 34px -28px rgba(0,0,0,.9);
}
.spec-card, .callout, .param, .i2-panel, .keynote { border-radius: var(--r-lg); }

/* stat strip: bigger figures, tighter */
.stats dd { font-size: clamp(1.5rem, 2.5vw, 1.95rem); letter-spacing: -.04em; }
.stats dd em { font-size: .55em; }

/* the part number in the HUD reads as a plate marking */
.tag { -webkit-text-stroke: 1.2px var(--amber-deep); opacity: .95; }

/* headline figures glow faintly, like the LEDs they describe */
.headline-stats b, .keynote-fig {
  text-shadow: 0 0 26px color-mix(in srgb, var(--amber) 26%, transparent);
}

/* photo frames sit on the page instead of floating on it */
.frame-img { border-radius: var(--r-md); overflow: hidden; }
.frame img { transition: transform .8s var(--ease-out), filter .6s var(--ease); }
.frame:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.06); }

/* contents rail: a travelling marker rather than a static tick */
.doc-nav a { position: relative; }
.doc-nav a::before {
  content: ""; position: absolute; left: -.8rem; top: 50%;
  width: 2px; height: 0; border-radius: var(--r-xs); background: var(--amber);
  transform: translateY(-50%);
  transition: height .45s var(--ease-out);
}
.doc-nav a.on::before { height: 1.1rem; }
.doc-nav a.on { border-left-color: transparent; }

/* tables breathe */
table tbody tr { transition: background .3s var(--ease); }

/* a hairline under every part divider */
.part { position: relative; }
.part::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 84px; height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
}

/* scrollbar, because it is on screen the whole time */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.09); border-radius: var(--r-md);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .frame:hover img { transform: none; }
}


/* ---- figure & table numbering ---------------------------------------- */
/* Numbers come from js/figures.js, in document order. The rule above the
   caption is what makes a figure read as a figure rather than a stray image. */
.frame figcaption {
  border-top: 1px solid var(--line);
  margin-top: .55rem;
}
.fignum {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
  margin-right: .1rem;
}
.fignum::after { content: "."; }
table caption .fignum { color: var(--amber); }

/* a cross-reference in the prose: "as ⟨Figure 4⟩ shows" */
a.xref {
  color: var(--amber); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
}
a.xref:hover { border-bottom-color: var(--amber); }
/* a reference whose target vanished should be loud in review, not silent */
a.xref-broken { color: #ff5f56; }
a.xref-broken::after { content: "[missing figure]"; }

/* ---- lightbox -------------------------------------------------------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
/* an affordance, so it is discoverable without hovering everything */
.zoomable::after {
  content: ""; position: absolute; right: .5rem; bottom: .5rem;
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: rgba(8,9,11,.66) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='white' stroke-width='2' stroke-linecap='round'>\
<circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4M11 8v6M8 11h6'/></svg>") center/15px no-repeat;
  opacity: 0; transition: opacity .25s var(--ease);
  pointer-events: none;
}
.zoomable:hover::after, .zoomable:focus-visible::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 54px);
  background: rgba(6,7,9,.93);
  backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .22s var(--ease);
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; }
.lb-fig {
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: .8rem;
  transform: scale(.985); transition: transform .22s var(--ease);
}
.lightbox.open .lb-fig { transform: none; }
.lb-fig img {
  min-height: 0; max-height: 78vh; width: auto; max-width: 100%;
  object-fit: contain; margin: 0 auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: default;
}
.lb-fig figcaption {
  font-size: .8rem; line-height: 1.6; color: var(--dim);
  max-width: 70ch; margin: 0 auto; text-align: center;
  border-top: 1px solid var(--line); padding-top: .6rem;
}
.lb-close {
  position: absolute; top: 14px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  color: var(--muted); font-size: 1.5rem; line-height: 1;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.lb-close:hover { background: rgba(255,255,255,.14); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-fig { transition: none; }
}


/* ---- per-part CAD download ------------------------------------------- */
/* Sits under the spec list in the walkthrough. Only printed parts carry a
   `cad` path in parts.js — a bought-in LED's mesh is a stand-in, not something
   anyone should fabricate from. */
.cad-dl {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .5rem .8rem;
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: rgba(255,255,255,.02);
  pointer-events: auto;      /* the HUD above it is click-through */
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease);
}
.cad-dl:hover, .cad-dl:focus-visible {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}
.cad-dl-i {
  width: 11px; height: 11px; flex: none;
  border-bottom: 1.5px solid currentColor;
  position: relative;
}
.cad-dl-i::before {
  content: ""; position: absolute; left: 50%; top: -1px;
  width: 1.5px; height: 7px; background: currentColor; transform: translateX(-50%);
}
.cad-dl-i::after {
  content: ""; position: absolute; left: 50%; top: 3px;
  width: 5px; height: 5px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}


/* ---- section map ------------------------------------------------------ */
/* Built by js/toc.js from the document's own parts. Doubles as the table of
   contents below 1100px, where the sticky rail is hidden. */
.doc-map {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0 0 4.5rem;
}
.map-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n t" ". s";
  column-gap: .75rem; row-gap: .5rem;
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.015);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease);
}
.map-card:hover, .map-card:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 34%, transparent);
  background: color-mix(in srgb, var(--amber) 4%, transparent);
  transform: translateY(-2px);
}
.map-n {
  grid-area: n;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  color: var(--amber); padding-top: .2em;
}
.map-t {
  grid-area: t;
  font-size: .92rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.012em;
}
.map-sub {
  grid-area: s;
  display: flex; flex-direction: column; gap: .28rem;
}
.map-sub > span {
  font-size: .72rem; line-height: 1.45; color: var(--dim);
  padding-left: .72rem; position: relative;
}
.map-sub > span::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 3px; height: 1px; background: var(--faint);
}
.map-more { color: var(--faint) !important; font-family: var(--mono);
            font-size: .6rem !important; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  .map-card { transition: none; }
  .map-card:hover, .map-card:focus-visible { transform: none; }
}


/* ---- heading levels ---------------------------------------------------
   These headings were h4/h5 sitting directly under an h2/h3, which skips a
   level and reads as a broken outline to a screen reader. They are promoted
   in the markup and aliased back to their original size here, so the outline
   is correct without the page changing. */
.callout h4 { color: var(--fg); font-size: .92rem; margin-bottom: .5rem; font-weight: 600; }
.callout h4 em { font-style: italic; color: var(--amber); }
.sec h3.minor {
  font-size: .95rem; font-weight: 600; margin: 2.2rem 0 .8rem;
  display: flex; gap: .7rem; align-items: baseline;
  letter-spacing: normal;
}
.iter-body h3.minor { margin: .35rem 0 .6rem; font-size: 1rem; display: block; }


/* ---- skip link & legal footer ----------------------------------------- */
/* Off-screen until focused, so a keyboard user's first Tab reaches the
   content rather than walking the whole navigation. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: .7rem 1.1rem;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--bg); color: var(--amber);
  border: 1px solid var(--amber); border-radius: 0 0 4px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.legal {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .72rem; line-height: 1.7; color: var(--faint);
  max-width: 70ch;
}
.legal p { margin: 0 0 .3rem; }
.legal a { color: var(--dim); }
.legal a:hover { color: var(--amber); }

/* ==== bioreactor page ================================================== */

/* ---- hero stage ---- */
.intro .lede {
  max-width: 62ch; margin: 1.6rem auto 0; text-align: left;
  color: var(--muted); line-height: 1.75; font-size: 1rem;
}
.stage {
  position: relative; width: min(1180px, 94vw); margin: 3rem auto 0;
  aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 15%, rgba(90,169,255,.07), transparent 70%);
  overflow: hidden;
}
.stage #gl { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.stage #gl:active { cursor: grabbing; }
.stage .loader {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim);
  background: var(--bg); transition: opacity .6s var(--ease);
}
.stage .loader.hide { opacity: 0; pointer-events: none; }
.stage-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--mono); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); pointer-events: none;
}
.legend-row {
  display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
  margin: 1.5rem auto 0; width: min(1180px, 94vw);
}
.lg {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.sw { width: 18px; height: 3px; border-radius: var(--r-xs); flex: none; }
.sw.lumen { background: #ff7e14; box-shadow: 0 0 10px #ff7e1466; }
.sw.shell { background: #18eb84; box-shadow: 0 0 10px #18eb8466; }
.sw.beam  { background: #ff8a1e; box-shadow: 0 0 10px #ff8a1e66; opacity: .6; }

/* ---- two-circuit cards ---- */
.circuits {
  display: grid; gap: 1rem; margin: 1.8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.circuit {
  padding: 1.2rem 1.3rem 1.4rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.015);
  position: relative; overflow: hidden;
}
.circuit::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
.circuit.lumen::before { background: linear-gradient(#ff7e14, #ff7e1400); }
.circuit.shell::before { background: linear-gradient(#18eb84, #18eb8400); }
.circuit-tag {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: .5rem;
}
.circuit.lumen .circuit-tag { color: #ff9c4a; }
.circuit.shell .circuit-tag { color: #3ddc8b; }
/* Both are tuned for the dark field and fall to 1.9:1 and 1.7:1 once the
   record turns light, where these tags actually live. */
body.doc-light .circuit.lumen .circuit-tag { color: #944e08; }
body.doc-light .circuit.shell .circuit-tag { color: #0f6b3f; }
.circuit h4 { margin: 0 0 .6rem; font-size: 1.02rem; }
.circuit p { margin: 0 0 .9rem !important; font-size: .87rem !important; color: var(--muted); line-height: 1.7; }
ul.mini { list-style: none; margin: 0; padding: 0; }
ul.mini li {
  font-size: .78rem; color: var(--dim); padding: .3rem 0;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem;
}
ul.mini li b { color: var(--fg); font-family: var(--mono); font-size: .72rem; font-weight: 500; }

/* ---- related-instrument strip ---- */
.rel-strip {
  display: grid; gap: .8rem; margin: 1.8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.rel-card {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.015);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.rel-card:hover, .rel-card:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 36%, transparent);
  background: color-mix(in srgb, var(--amber) 5%, transparent);
  transform: translateY(-2px);
}
.rel-card.is-self {
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}
.rel-n {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber);
}
.rel-card b { font-size: 1rem; letter-spacing: -.01em; }
.rel-note { font-size: .78rem; color: var(--dim); line-height: 1.5; }

/* ---- checklist ---- */
ul.checks { list-style: none; margin: 1.2rem 0; padding: 0; }
ul.checks li {
  position: relative; padding: .7rem 0 .7rem 1.7rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted); line-height: 1.7;
}
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
}
ul.checks li b { color: var(--fg); font-weight: 600; }

.sec-lede { color: var(--muted); font-size: .95rem; line-height: 1.75; max-width: 62ch; }
.iter-date {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .8rem;
}

@media (max-width: 900px) {
  .stage { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .rel-card { transition: none; }
  .rel-card:hover { transform: none; }
}

/* ---- interactive part picker ------------------------------------------ */
.stage { --pick: var(--amber); }

.pick-card {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  width: min(320px, calc(100% - 36px));
  padding: .95rem 1.05rem 1.05rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(8,12,18,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.75);
  animation: pickIn .28s var(--ease) both;
}
@keyframes pickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pick-card.flow-lumen { --pick: #ff9c4a; }
.pick-card.flow-shell { --pick: #3ddc8b; }
.pick-card.flow-both  { --pick: #5aa9ff; }
.pick-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(var(--pick), transparent);
}
.pick-role {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pick); margin-bottom: .35rem;
}
.pick-card b { display: block; font-size: 1rem; letter-spacing: -.015em; margin-bottom: .4rem; }
.pick-card p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.pick-link {
  display: inline-block; margin-top: .7rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pick); text-decoration: none;
}
.pick-link:hover { text-decoration: underline; }
.pick-clear {
  position: absolute; top: .7rem; right: .7rem;
  background: none; border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--dim); cursor: pointer;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .25rem .45rem;
}
.pick-clear:hover { color: var(--fg); border-color: var(--pick); }

/* the list beside the stage — the keyboard route to the same thing */
.pick-list {
  width: min(1180px, 94vw); margin: 1.2rem auto 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.pick-list-head {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
.pick-list-head span { color: var(--faint); letter-spacing: .12em; }
.pick-item {
  --pick: var(--amber);
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem;
  align-items: center; text-align: left;
  padding: .6rem .75rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.014); color: inherit;
  font: inherit;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.pick-item.flow-lumen { --pick: #ff9c4a; }
.pick-item.flow-shell { --pick: #3ddc8b; }
.pick-item.flow-both  { --pick: #5aa9ff; }
.pick-dot {
  width: 7px; height: 7px; border-radius: 50%; grid-row: 1 / 3;
  background: var(--pick); opacity: .5; transition: opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.pick-name { font-size: .84rem; font-weight: 600; letter-spacing: -.01em; }
.pick-role-sm { font-size: .68rem; color: var(--dim); line-height: 1.4; }
.pick-item:hover, .pick-item.is-hover, .pick-item:focus-visible {
  border-color: color-mix(in srgb, var(--pick) 42%, transparent);
  background: color-mix(in srgb, var(--pick) 6%, transparent);
  transform: translateY(-1px);
}
.pick-item.is-pinned {
  border-color: var(--pick);
  background: color-mix(in srgb, var(--pick) 11%, transparent);
}
.pick-item:hover .pick-dot, .pick-item.is-hover .pick-dot, .pick-item.is-pinned .pick-dot {
  opacity: 1; box-shadow: 0 0 10px var(--pick);
}

/* linked BOM rows */
table.bom tr.bom-linked { cursor: pointer; transition: background .25s var(--ease); }
table.bom tr.bom-linked td:first-child { position: relative; padding-left: 1rem; }
table.bom tr.bom-linked td:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: var(--r-xs); background: var(--amber);
  transition: height .25s var(--ease);
}
table.bom tr.bom-linked.is-hover, table.bom tr.bom-linked:hover { background: rgba(255,255,255,.035); }
table.bom tr.bom-linked.is-pinned { background: color-mix(in srgb, var(--amber) 10%, transparent); }
table.bom tr.bom-linked.is-hover td:first-child::before,
table.bom tr.bom-linked:hover td:first-child::before { height: 60%; }
table.bom tr.bom-linked.is-pinned td:first-child::before { height: 80%; }

@media (prefers-reduced-motion: reduce) {
  .pick-card { animation: none; }
  .pick-item { transition: none; }
  .pick-item:hover, .pick-item.is-hover { transform: none; }
}


/* A passage describing a procedure that has not been run yet. Marked so a
   reader can never mistake a planned method for a reported result — the page
   used to narrate this calibration in the past tense with every number blank. */
.planned {
  border-left: 2px solid var(--amber-deep);
  padding: .85rem 1.1rem; margin: 1.2rem 0;
  background: rgba(255, 255, 255, .017);
  border-radius: var(--r-xs);
}
.planned b {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}


/* ═══════════ Part 3 — design, build, test, learn ═══════════ */
/* A species name inside a heading, where <i> is the section number's style. */
.sp { font-style: italic; }

/* Each cycle reads as four labelled stages; the rule after the label keeps the
   stages apart without boxing every paragraph. */
.dbtl-h {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.5rem 0 .5rem;
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
}
.dbtl-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.iters.dbtl li { padding-bottom: 3rem; }
.iters.dbtl .iter-date { margin-bottom: .15rem; }

/* Drawings and gel images are shown whole, never cropped to a photo box. */
.frame.contain .frame-img { background: #f3f3ef; }
.frame.contain .frame-img img { object-fit: contain; filter: none; }
.frame.natural .frame-img { aspect-ratio: auto; background: #fff; }
.frame.natural .frame-img img { height: auto; object-fit: contain; filter: none; }

/* Small tables of readings: narrower than the bill of materials. */
table.readings { min-width: 480px; }


/* ═══════════ data charts (js/charts.js) ═══════════ */
.chart-fig {
  margin: 1.8rem 0 2rem;
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem .9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 20px 44px -30px rgba(0,0,0,.9);
  position: relative;
}
.chart-fig figcaption {
  font-size: .78rem; line-height: 1.6; color: var(--faint);
  margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--line);
}
body.doc-light .chart-fig { background: var(--bg-2); box-shadow: none; }

.bc { --bc-photo: var(--c-photometer); --bc-ref: #c3c9d2; --bc-reactor: var(--c-reactor); }
body.doc-light .bc { --bc-photo: #c96d0b; --bc-ref: #5b6573; --bc-reactor: #1d5a9e; }
.bc img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }

.bc-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; margin: 0 0 .55rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; color: var(--dim);
}
.bc-key { display: inline-flex; align-items: center; gap: .45rem; }
.bc-key em { font-style: normal; color: var(--faint); margin-left: .3rem; font-variant-numeric: tabular-nums; }
/* .bc scoping outranks the record's own `.doc i` colour, which otherwise greys every swatch */
.bc .bc-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; color: inherit; background: currentColor; flex: none; }
.bc .bc-key i.square { border-radius: 1px; }
.bc .bc-key i.open { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.bc .bc-key i.dash { width: 18px; height: 0; border-radius: 0; background: none; border-top: 1.5px dashed var(--dim); }
.bc-key.s-photo { color: var(--bc-photo); }
.bc-key.s-ref { color: var(--bc-ref); }
.bc-key.s-reactor { color: var(--bc-reactor); }
.bc-key.id { color: var(--dim); }

svg.bc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-tick { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
.bc-tick.x { text-anchor: middle; }
.bc-tick.y { text-anchor: end; }
.bc-ax {
  fill: var(--faint); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-anchor: middle; text-transform: uppercase;
}
.bc-id { stroke: var(--dim); stroke-width: 1.1; stroke-dasharray: 5 5; opacity: .8; }
.bc-fit { stroke-width: 1.4; opacity: .7; }
.bc-fit.s-photo { stroke: var(--bc-photo); }
.bc-fit.s-ref { stroke: var(--bc-ref); stroke-dasharray: 2 3; }
.bc-line { fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.bc-line.s-reactor { stroke: var(--bc-reactor); }
.bc-line.s-ref { stroke: var(--bc-ref); }
.bc-pt.s-photo { fill: var(--bc-photo); }
.bc-pt.s-ref { fill: var(--bc-ref); }
.bc-pt.s-reactor { fill: var(--bc-reactor); }
.bc-pt.open { fill: none; stroke-width: 1.6; }
.bc-pt.open.s-photo { stroke: var(--bc-photo); }
.bc-pt.open.s-ref { stroke: var(--bc-ref); }


/* ═══════════ OD600 run chart ═══════════ */
/* The photometer's continuous record, drawn by ../photometer/js/od600.js. Shared styling with the
   photometer page; the chart keeps the photometer's own colour here. */
.od-wrap {
  --amber: var(--c-photometer);
  margin: 1.8rem 0 2rem;
  border-radius: var(--r-lg); padding: 1.2rem 1.3rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 20px 44px -30px rgba(0,0,0,.9);
  position: relative;
}
.od-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 30%, transparent), rgba(255,255,255,.03) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.od-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.od-read { display: flex; gap: clamp(1.2rem, 4vw, 2.6rem); }
.od-read > div { display: flex; flex-direction: column; gap: .3rem; }
.od-read span {
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.od-read b {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.od-read b.hi { color: var(--amber); }
.od-read b.ph { font-size: 1.05rem; }
.od-read em { font-style: normal; color: var(--dim); font-size: .68rem; margin-left: .15em; }
.od-hint {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
svg.odc { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.od-grid line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.od-grid text, .od-xt {
  fill: var(--dim); font-family: var(--mono); font-size: 10px; text-anchor: middle;
}
.od-grid text { text-anchor: end; }
.od-ax {
  fill: var(--faint); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-anchor: middle; text-transform: uppercase;
}
.od-area { fill: url(#odFill); }
.od-band { fill: var(--amber); opacity: .17; }
.od-line { fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linejoin: round; }
.od-phase rect { fill: #fff; opacity: .014; }
.od-phase.p1 rect, .od-phase.p3 rect { opacity: .035; }
.od-phase text {
  fill: var(--dim); font-family: var(--mono); font-size: 9px;
  letter-spacing: .18em; text-anchor: middle; text-transform: uppercase;
}
.od-phase.p2 text { fill: var(--amber); }
.od-cursor line { stroke: rgba(255,255,255,.34); stroke-width: 1; stroke-dasharray: 3 3; }
.od-cursor circle { fill: var(--amber); stroke: var(--bg); stroke-width: 2; }
.od-hit { fill: transparent; cursor: crosshair; }
/* the pump failure, annotated on the trace (same as the photometer page) */
.od-event rect { fill: rgba(255, 95, 74, .13); }
.od-event line { stroke: #ff5f4a; stroke-width: 1.4; stroke-dasharray: 4 3; }
.od-event text {
  fill: #ff5f4a; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
body.doc-light .od-event rect { fill: rgba(193, 57, 42, .10); }
body.doc-light .od-event line { stroke: #c1392a; }
body.doc-light .od-event text { fill: #c1392a; }
@media (max-width: 620px) {
  .od-read b { font-size: 1.2rem; }
  .od-hint { display: none; }
}

/* The opening line is display type, not the document's heading: the instrument's name in the
   record below is the page's one h1. This keeps the line looking exactly as it did. */
.intro .intro-title { margin: 0; font-weight: 600; letter-spacing: -.045em; }


/* ═══════════ 2 Oct 2026 (night): the record brought to the v4 write-up ═══════════
   Everything below is for the document half only. Reverting it leaves the page as it
   was before that night (the markup it styles came in the same change). */

/* Inline tags in the record. The name `.tag` was first the hero HUD's outlined plate
   number (2.3rem, transparent fill, a 1.2px stroke); the record reused it for small
   chips and inherited the stroke at every width, and 1.8rem under 900px, which blew
   "Open" and "Highest priority" up to headline size on a phone. */
.doc .tag {
  -webkit-text-stroke: 0; opacity: 1; margin: 0; line-height: 1.4;
  font-size: .56rem; font-weight: 600; color: var(--dim);
  display: inline-block; vertical-align: .1em;
}
.doc .tag.hot { color: var(--amber); }
@media (max-width: 700px) { .doc .tag { font-size: 11px; } }

/* A heading's words are one flex item. The section number (`h3 > i`) is the only thing
   meant to sit apart; a species name in its own span used to split the line into
   columns and widen the word gaps ("How   B. subtilis   Is Contained"). */
.iter-body h4 { display: block; }

/* the circuit cards' spec rows: a label and a value, the value set right */
ul.mini li > span:last-child { text-align: right; }

/* Spec grids had no layout of their own, so every cell ran the full column with a
   2.2rem heading margin inside it. Side by side where there is room. */
.specgrid {
  display: grid; gap: .8rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.specgrid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.specgrid > div > h4 { margin: 0 0 .45rem; }
.specgrid > div > p { margin: 0 !important; font-size: .95rem; line-height: 1.68; max-width: none; }

/* ---- what is not written yet, inside the record ---- */
.iters li.unwritten .iter-n {
  border: 1px dashed var(--todo-line, #fdba8c); color: var(--todo-ink, #c2410c); background: var(--todo-bg, #fff3eb);
}
.iters.dbtl li.unwritten { padding-bottom: 1.5rem; }
.iters.dbtl.outline li.unwritten { padding-bottom: .9rem; }
.iters li.unwritten .iter-body h4 { color: var(--muted); }
.iters li.unwritten .iter-date { margin-bottom: .55rem; }
.iters li.unwritten div.todo { margin: .2rem 0 0; }
.iters.outline .iter-date { margin-bottom: 0; }
.iter-body > div.todo, .sec > div.todo { margin: 1.1rem 0 1.4rem; }

/* ---- Part 3: the cycle map ---- */
#dbtl-map { display: grid; gap: .5rem; margin: 1.6rem 0 .6rem; }
#dbtl-map .track {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: .5rem 1rem;
  align-items: start; padding: .8rem .95rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.015);
}
#dbtl-map .track-h {
  display: flex; align-items: baseline; gap: .55rem; padding-top: .28rem;
  font-size: .95rem; font-weight: 650; color: var(--fg);
  text-decoration: none; border: 0; letter-spacing: -.005em;
}
#dbtl-map .track-h i {
  font-style: normal; font-family: var(--mono); font-size: .74rem; font-weight: 600;
  color: var(--amber);
}
#dbtl-map .track-h:hover { color: var(--amber); }
#dbtl-map ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
#dbtl-map li { margin: 0; padding: 0; font-size: 1rem; line-height: 1.3; }
#dbtl-map li a {
  display: inline-flex; align-items: baseline; gap: .42rem;
  padding: .32rem .66rem .32rem .55rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, transparent);
  font-size: .82rem; font-weight: 500; color: var(--fg);
  text-decoration: none; white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
#dbtl-map li a b {
  font-family: var(--mono); font-size: .7rem; font-weight: 650; color: var(--amber);
}
#dbtl-map li a:hover, #dbtl-map li a:focus-visible {
  border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent);
}
#dbtl-map li.tk-todo a {
  border-style: dashed; border-color: var(--todo-line, #fdba8c); background: var(--todo-bg, #fff3eb); color: var(--todo-text, #9a3412);
}
#dbtl-map li.tk-todo a b { color: var(--todo-ink, #c2410c); }
#dbtl-map li.tk-todo a:hover, #dbtl-map li.tk-todo a:focus-visible { border-color: var(--todo-ink, #c2410c); }
#dbtl-map .tracks-key {
  display: flex; gap: 1.1rem; flex-wrap: wrap; margin: .25rem 0 0 .1rem !important;
  font-family: var(--mono); font-size: .62rem !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim) !important; max-width: none;
}
#dbtl-map .tk-k { display: inline-flex; align-items: center; gap: .45rem; }
#dbtl-map .tk-k::before {
  content: ""; width: 18px; height: 9px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}
#dbtl-map .tk-k.is-todo::before { border: 1px dashed var(--todo-line, #fdba8c); background: var(--todo-bg, #fff3eb); }
body.doc-light #dbtl-map .track { background: #f7f9fb; border-color: var(--hair); }
@media (max-width: 760px) {
  #dbtl-map .track { grid-template-columns: minmax(0, 1fr); }
  #dbtl-map .track-h { padding-top: 0; }
}
@media (max-width: 700px) {
  #dbtl-map li a { font-size: 13px; }
  #dbtl-map li a b { font-size: 11px; }
  #dbtl-map .tracks-key { font-size: 11px !important; letter-spacing: .06em; }
}

/* ---- 4.1 key specifications: a two-column table that fits a phone ---- */
table.specs { min-width: 0; table-layout: fixed; }
table.specs thead th:first-child { width: 26%; padding-left: 0; }
table.specs tbody th[scope="row"] {
  vertical-align: top; white-space: normal;
  padding: .78rem .8rem .78rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; line-height: 1.6; color: var(--fg);
}
table.specs td { font-size: .93rem; line-height: 1.6; padding: .78rem .8rem .78rem .2rem; }
body.doc-light table.specs td { color: var(--muted); }
@media (max-width: 700px) { table.specs tbody th[scope="row"] { font-size: 14px !important; letter-spacing: 0 !important; } }
/* a phone stacks each row: the name over its value, both the full width */
@media (max-width: 560px) {
  table.specs, table.specs tbody, table.specs tr, table.specs th, table.specs td { display: block; width: auto; }
  table.specs thead { display: none; }
  table.specs caption { display: block; }
  table.specs tbody th[scope="row"] { border-bottom: 0; padding: .8rem 0 .1rem; font-size: 15px !important; }
  table.specs td { padding: 0 0 .8rem; }
}

/* ---- 5.1 the size figure ---- */
.sizefig .size-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: .2rem auto .4rem; }
.size-svg text { font-family: var(--mono); font-size: 14px; fill: var(--fg); }
.size-svg .sz-num { font-weight: 600; }
.size-svg .sz-dim { fill: var(--dim); }
.size-svg .sz-side { font-size: 14px; font-weight: 650; letter-spacing: .12em; }
.size-svg .sz-side.lumen { fill: #ff9c4a; }
.size-svg .sz-side.shell { fill: #3ddc8b; }
.size-svg .sz-cell { fill: rgba(255, 126, 20, .13); stroke: #ff7e14; stroke-width: 1.6; }
.size-svg .sz-wall { fill: #39424e; stroke: #5d6876; stroke-width: 1; }
.size-svg .sz-prot { fill: #18eb84; }
.size-svg .sz-prot-l { fill: #3ddc8b; }
.size-svg .sz-dimline, .size-svg .sz-scale { stroke: var(--fg); stroke-width: 1.3; }
.size-svg .sz-scale { stroke-width: 2; }
body.doc-light .size-svg .sz-side.lumen { fill: #944e08; }
body.doc-light .size-svg .sz-side.shell, body.doc-light .size-svg .sz-prot-l { fill: #0f6b3f; }
body.doc-light .size-svg .sz-cell { fill: rgba(201, 109, 11, .11); stroke: #b45f06; }
body.doc-light .size-svg .sz-wall { fill: #cfd6de; stroke: #6b7684; }
body.doc-light .size-svg .sz-prot { fill: #17843f; }
@media (max-width: 700px) { .sizefig { padding-left: .5rem; padding-right: .5rem; } }

/* ---- 6.1: the reference instrument is listed apart from the parts ---- */
table.bom tbody.bom-ref td { border-top: 1px dashed var(--line-2); color: var(--dim); }
table.bom tbody.bom-ref td:first-child { font-weight: 500; }
table.bom tfoot tr.bom-sheet td { border-top: 0; padding-top: .35rem; font-weight: 500; color: var(--dim); }
@media (max-width: 700px) { .doc table.bom { min-width: 0; } }

/* ---- 6.2 the assembly draft ---- */
.asm {
  display: grid; grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr);
  gap: 1.1rem 1.6rem; align-items: start; margin: 1.2rem 0 1.5rem;
}
.asm-kit {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .85rem 1rem .6rem; background: rgba(255,255,255,.015);
}
body.doc-light .asm-kit { background: #f7f9fb; border-color: var(--hair); }
.asm-kit h5 {
  font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 .45rem;
}
.asm-kit ul { list-style: none; margin: 0; padding: 0; }
.asm-kit li {
  font-size: .86rem; line-height: 1.5; padding: .34rem 0; color: var(--muted);
  border-top: 1px solid var(--line);
}
.asm-kit li:first-child { border-top: 0; }
ol.asm-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; }
ol.asm-steps > li {
  counter-increment: st; position: relative;
  padding: 0 0 .85rem 2.5rem; font-size: 1rem; line-height: 1.7; color: var(--muted);
}
ol.asm-steps > li::before {
  content: counter(st); position: absolute; left: 0; top: .12rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
}
.callout.check h4 { margin: 0 0 .45rem; font-size: .95rem; }
@media (max-width: 760px) { .asm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .asm-kit h5 { font-size: 11px; }
  ol.asm-steps > li::before { font-size: 11px; }
}

/* ---- Part 8: the structural parts ---- */
.sparts {
  display: grid; gap: .8rem; margin: 1.4rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) { .sparts { grid-template-columns: minmax(0, 1fr); } }
.spart {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 1.1rem 1.05rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.015);
  color: inherit; text-decoration: none;
}
.sec a.spart { border-bottom: 1px solid var(--line); color: inherit; }
a.spart { transition: border-color .3s var(--ease), transform .3s var(--ease); }
a.spart:hover, a.spart:focus-visible { border-color: var(--amber); transform: translateY(-2px); }
body.doc-light .spart { background: #f7f9fb; border-color: var(--hair); }
body.doc-light .spart.is-todo { background: #fff; border-style: dashed; }
.spart-k {
  font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber);
}
.spart.is-todo .spart-k { color: var(--todo-ink, #c2410c); }
.sec .spart h4 { display: block; margin: 0; font-size: 1.05rem; }
.sec .spart p { margin: 0; font-size: .9rem; line-height: 1.6; }
.spart-go { position: absolute; right: 1rem; top: .9rem; color: var(--amber); font-size: 1.05rem; }
.nowrap { white-space: nowrap; }
@media (max-width: 700px) { .spart-k { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { a.spart, #dbtl-map li a { transition: none; } a.spart:hover { transform: none; } }

/* ---- phones: a caption's bold lead-in stays the size of its caption ----
   polish.css floors small labels at 11px on phones, and lists `figcaption b` and
   `.fignum` among them; wiki-align then raised captions to 15px, so on a phone the
   lead-in came out smaller than the sentence it leads. */
@media (max-width: 700px) {
  body.doc-light .doc-wrap figcaption > b,
  body.doc-light .doc-wrap figcaption > .fignum { font-size: inherit !important; }
}

/* Frames inside a cycle sat in 220–330px tracks, and a cycle's body (about 630px wide on a
   desktop) only fits one of those, so every pair of photos stacked at half width with the
   right half of the column empty. They now share the row. */
.iter-body .frames { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.iter-body .frames.duo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
@media (max-width: 620px) { .iter-body .frames.duo { grid-template-columns: minmax(0, 1fr); } }

/* A note on a reading sits under the number, not beside it: the reading cells do not wrap,
   so a label beside the value ran off the table. */
table.readings td.num:has(> .todo) { white-space: normal; }
table.readings td.num > .todo { display: block; width: fit-content; max-width: 11.5rem; margin: .3rem 0 0 auto; text-align: left; }
table.specs thead th + th { padding-left: .2rem; }

/* charts on a phone: they are now drawn at the width they are shown at, so these are real sizes */
@media (max-width: 700px) {
  .bc-tick { font-size: 11px; }
  .bc-ax { font-size: 11px; letter-spacing: .05em; }
  .bc-legend, .bc-key { font-size: 11px; }
  .iter-n { font-size: 11px; }
  .headline-stats b em { font-size: 11px; }
  .triple-jump button, .triple-play { font-size: 11px !important; }
  .map-n, .syswalk-step-n, .syswalk-rt, .syswalk-rsep { font-size: 11px !important; }
  #dbtl-map sub { font-size: 11px; }
}

/* `.iters li` was written for the cycles but matches every li inside a cycle too: a checklist
   inside a cycle became a flex row (a link split its sentence into three columns), took the
   cycles' 3rem spacing, drew the timeline's grey rule as its bullet, and lost the last bullet
   to `.iters li:last-child::before`. */
.iters li li { display: block; gap: 0; }
.iters.dbtl li li, .iters li ul.checks > li { padding: .7rem 0 .7rem 1.7rem; }
.iters li li::before { bottom: auto; background: none; }
.iters li li:last-child::before { display: block; }

@media (max-width: 700px) {
  .triple-label b { font-size: 11px !important; }
  .od-read em { font-size: 11px; }
}

/* The 400 h run chart is drawn 1000 units wide by the photometer's od600.js, and in a phone's
   column that left its labels at about 3px. On a phone it keeps a legible width and scrolls
   sideways instead; a swipe pans it, a tap still reads a point. */
@media (max-width: 700px) {
  #od-chart { overflow-x: auto; overscroll-behavior-x: contain; }
  #od-chart svg.odc:not([width]) { width: 720px; max-width: none; touch-action: pan-x pan-y; }
  #od-chart svg.odc:not([width]) :is(.od-grid text, .od-xt, .od-ax, .od-phase text, .od-event text) { font-size: 16px; }
  #od-chart svg.odc:not([width]) .od-ax { letter-spacing: .06em; }
  #od-chart svg.odc:not([width]) .od-phase text { letter-spacing: .08em; }
  .syswalk .syswalk-fig text.dim { font-size: 11.5px; }
}

/* the run chart's readout: a value and its unit on one line ("336.0 h"), not stacked */
.od-read > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .2em; }
.od-read > div > span { grid-column: 1 / -1; }
table.readings td.num:has(> .todo) { min-width: 9rem; }


/* ═══════════ 3 Oct 2026: fix pass after the content and design judges ═══════════
   Record only (body.doc-light), except where a rule says otherwise. Reverting this block and the four
   recoloured rules above (unwritten cycle numbers, outlined map chips, the key's swatch, unwritten part
   labels) puts the stylesheet back where the night's rebuild left it. */

/* ---- one accent: the team's leaf ----
   The record's labels (Design / Build / Test / Learn, cycle numbers, spec labels, map chips, tags, the rail)
   were drawn in the instrument's deep blue beside the team's leaf headings. The accent slot is remapped for the
   whole record, and handed back to the two drawings whose colours are physical: the system walk (the flow) and
   the 3D tour. Charts keep their own series colours (--bc-*, and the run chart's own --amber). */
body.doc-light .doc-wrap { --amber: var(--w-leaf-700, #23684a); }
body.doc-light .doc-wrap :is(.syswalk, .triple) { --amber: var(--amber-deep); }
body.doc-light .doc .openitem { border-left-color: var(--w-leaf-500, #4f9c6f); }

/* ---- Figure 1, the system walk, at a readable size on a desktop ----
   The sticky stage was a 380px column, so the schematic's labels drew at about 5px. The drawing now takes two
   thirds of the walk and runs into the empty right-hand margin (never past the viewport), and its caption sits
   under the whole walk instead of inside the stage. */
.syswalk-figure { margin: 0; }
.syswalk-figure > figcaption {
  margin: 1.4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.62; color: var(--fg); max-width: var(--w-measure, 62ch);
}
@media (min-width: 901px) {
  /* the narration keeps the reading column on the left; the pinned drawing takes the right, where it can run into
     the empty margin */
  .syswalk .syswalk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.6rem;
    margin-right: calc(-1 * clamp(0px, (100vw - 856px) / 2 - 24px, 300px));
  }
  .syswalk .syswalk-stage { grid-column: 2; grid-row: 1; }
  .syswalk .syswalk-steps { grid-column: 1; grid-row: 1; }
  .syswalk .syswalk-stage { padding: .9rem .7rem 2.6rem; }
  body.doc-light .syswalk .syswalk-fig { padding: 10px 18px 4px 10px; }   /* "product stream" runs past the drawing's own box */
  .syswalk .syswalk-fig text.dim { font-size: 12px; }
}
/* Phones: polish.css makes the stage static under 900px, and its readout, rail and corner ticks then anchored
   to the whole walk, so "07 / 08" printed over the last step. The stage anchors them again. */
@media (max-width: 900px) { .syswalk .syswalk-stage { position: relative; } }

/* ---- captions under their figures, as on the team wiki: now site-wide (polish.css's margin captions apply to the
   dark theme only since 3 Oct 2026), so this page's own override is gone. ---- */

/* ---- the 3D tour's label: the stage is always dark, so its text is always light ---- */
#triple .triple-label span { color: #eef2f6; }

/* ---- Figure 6, the Prototype II sketch: no taller than a screen ---- */
#fig-c2-sketch { max-width: 360px; }

/* ---- the 400 h run chart (photometer/js/od600.js, shared) ----
   od600.js now draws at the plot's own pixel width and marks its svg with a width attribute, so the type below is
   in real pixels. Its older version drew a fixed 1000-unit box scaled to fit (no width attribute), and for that one
   the labels have to be set large in drawing units. Either way they land at 11px or more. */
#od-chart svg.odc { color: var(--amber); }   /* the area under the line follows currentColor */
#od-chart svg.odc[width] :is(.od-grid text, .od-xt) { font-size: 12px; }
#od-chart svg.odc[width] .od-ax { font-size: 11.5px; letter-spacing: .1em; }
#od-chart svg.odc[width] .od-phase text { font-size: 11px; letter-spacing: .1em; }
#od-chart svg.odc[width] .od-event text { font-size: 11.5px; letter-spacing: .08em; }
#od-chart svg.odc:not([width]) :is(.od-grid text, .od-xt, .od-ax, .od-phase text, .od-event text) { font-size: 20px; }
@media (max-width: 560px) {
  .iter-body .od-wrap { padding-left: .7rem; padding-right: .7rem; }
  #od-chart .od-plot.narrow svg.odc[width] :is(.od-grid text, .od-xt) { font-size: 13px; }
  #od-chart .od-plot.narrow svg.odc[width] :is(.od-ax, .od-event text) { font-size: 12.5px; }
}
/* on paper the photometer's bright amber fails as text (1.7:1); its deep tone and a deeper red do not */
body.doc-light .od-wrap .od-read b.hi { color: #9a4a06; }
body.doc-light .odc .od-phase.p2 text { fill: #9a4a06; }
body.doc-light .odc .od-event text { fill: #a8321f; }

/* ---- table captions read as captions, not as 9px code ---- */
body.doc-light .doc-wrap .doc table caption {
  font-family: var(--sans); font-size: .875rem; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--fg); padding-bottom: .6rem;
}

/* ---- 6.1: the table's own foot gives the totals; the auto-summary printed "16450.00" and "0 / 11" above it ---- */
#sec61 .bom-summary { display: none; }
.doc .ref-note { color: var(--dim); font-size: .92em; white-space: nowrap; }

/* ---- the record's small labels: nothing under 11px at any width (the team wiki's smallest label is 11px) ---- */
body.doc-light .doc-wrap :is(.iter-date, .rel-n, .circuit-tag, .headline-stats span, .od-read span, .od-hint,
  .syswalk-step-n, .syswalk-readout, .asm-kit h5, .spart-k, .openitem-tag, .dbtl-h, .doc-nav-label, .tracks-key) {
  font-size: 11px; letter-spacing: .08em;
}
body.doc-light .doc-wrap .doc .tag { font-size: 11px; letter-spacing: .08em; }
body.doc-light .doc-wrap #dbtl-map .tracks-key { font-size: 11px !important; letter-spacing: .08em; }
body.doc-light .doc-wrap .specgrid h4 { font-size: 11px !important; letter-spacing: .08em; }
body.doc-light .doc-wrap :is(.iter-n, .bc-legend, .bc-key, .score-col li cite, .doc-nav a b, .part-mark span,
  .bom-count, .score-col > h4, .score-col > h5, .feature-tag, .headline-stats b em) { font-size: 11px; }
body.doc-light .doc-wrap .map-more { font-size: 11px !important; }
body.doc-light .doc-wrap :is(.bc-tick, .bc-ax) { font-size: 11px; }
#triple :is(.triple-label b, .triple-play, .triple-jump button) { font-size: 11px; }
body.doc-light .outro-meta { font-size: 11px; }
@media (max-width: 700px) {
  /* a cycle's date line reads as a sentence on a phone, not as three lines of spaced capitals */
  body.doc-light .doc-wrap .iter-date { text-transform: none; letter-spacing: .01em; font-family: var(--sans); font-size: 12.5px; }
}

/* ---- even spacing inside a cycle: "Design" sat on the date line, "Test" touched the photos ---- */
.iters .iter-body > h5.dbtl-h { margin-top: 1.6rem; }
.iters .iter-body > .iter-date + h5.dbtl-h { margin-top: 1rem; }

/* ---- one right edge: notes end where the prose ends, and text in a panel uses the panel ---- */
body.doc-light .doc-wrap div.todo { max-width: 67.5ch; }
body.doc-light .doc-wrap :is(aside.callout, .keynote, .param, .openitem, .circuit, .specgrid > div, .spart, .score-col) p { max-width: none; }

/* ---- notes that list several points ---- */
.doc div.todo ul { margin: .4rem 0 0; padding-left: 1.15rem; list-style: disc; }
.doc div.todo ul > li,
.iters.dbtl .iter-body div.todo ul > li {
  display: list-item; margin: 0 0 .4rem; padding: 0; border: 0;
  font-size: inherit; line-height: 1.6; color: inherit;
}
.doc div.todo ul > li::before, .iters .iter-body div.todo ul > li::before { content: none; display: none; }
.doc div.todo ul > li:last-child { margin-bottom: 0; }
.doc div.todo li > b { color: inherit; font-weight: 700; }

/* ---- 6.2: the assembly draft reads as a draft ---- */
.asm-draft { border-left: 2px dashed var(--todo-line, #fdba8c); padding-left: 1.2rem; margin: 1.6rem 0 1.4rem; }
.asm-draft > h4:first-of-type { margin-top: .4rem; }
.doc .asm-draft-tag {
  margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--todo-ink, #c2410c);
}
ol.asm-steps > li.asm-flag::before {
  color: var(--todo-ink, #c2410c); background: var(--todo-bg, #fff3eb);
  border: 1px dashed var(--todo-line, #fdba8c);
}
@media (max-width: 700px) { .asm-draft { padding-left: .85rem; } }

/* ---- the long engineering part: a way back to the cycle map at the end of each track ---- */
.doc .sec > p.to-map { margin: .2rem 0 0; font-size: .875rem; }

/* ---- Part 7: the two future concepts sit under 7.4 Future Plans ---- */
#sec74 > h4 { margin-top: 2.4rem; }

/* ---- contents rail: the part being read lists its own sections (built by js/doc.js from the h3s) ---- */
.doc-nav { overflow-y: auto; justify-content: safe center; scrollbar-width: none; }
.doc-nav::-webkit-scrollbar { display: none; }
.doc-nav ol.rail-sub { display: none; margin: .5rem 0 .15rem; padding-left: 1.6rem; }
.doc-nav li.open > ol.rail-sub { display: block; }
.doc-nav ol.rail-sub li { margin-bottom: .42rem; }
.doc-nav ol.rail-sub a { font-size: .76rem; gap: .5rem; min-width: 0; }
.doc-nav ol.rail-sub a b { flex: none; }
.doc-nav ol.rail-sub a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.doc-light .doc-nav li.open > a { color: var(--fg); }

/* ---- the record's phone headings: a number sits on the first line, and a title does not end on one word ---- */
body.doc-light .doc-wrap .sec > h3 { align-items: first baseline; text-wrap: balance; }
body.doc-light .doc-wrap :is(figcaption, .sec > p) { text-wrap: pretty; }

/* ---- contrast leftovers ---- */
/* a chart key's words are ink; its swatch carries the series colour (the photometer's key was 3.45:1) */
body.doc-light .bc .bc-key:is(.s-photo, .s-ref, .s-reactor) { color: var(--fg); }
body.doc-light .bc .bc-key.s-photo i { color: var(--bc-photo); }
body.doc-light .bc .bc-key.s-ref i { color: var(--bc-ref); }
body.doc-light .bc .bc-key.s-reactor i { color: var(--bc-reactor); }

/* ---- the keynote's "0 colonies" had no space ---- */
.keynote .keynote-fig em { margin-left: .4em; }

/* ---- readings tables on a phone: each row a small card, every value next to its name ---- */
@media (max-width: 560px) {
  .doc table.readings { min-width: 0; }
  .doc table.readings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc table.readings, .doc table.readings tbody, .doc table.readings tr { display: block; width: auto; }
  .doc table.readings caption { display: block; }
  .doc table.readings tbody tr {
    border: 1px solid var(--w-line, #e5e5e5); border-radius: 6px; padding: .55rem .8rem .5rem; margin-bottom: .6rem;
    background: var(--bg, #fff);
  }
  .doc table.readings td {
    display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .1rem .8rem; align-items: baseline;
    border: 0 !important; padding: .2rem 0; text-align: left; white-space: normal; min-width: 0 !important;
  }
  .doc table.readings td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--w-leaf-900, #14402b); }
  .doc table.readings td:first-child { display: block; font-weight: 650; color: var(--fg); padding: 0 0 .3rem; margin-bottom: .2rem; border-bottom: 1px solid var(--w-line, #e5e5e5) !important; }
  .doc table.readings td:first-child::before { content: none; }
  .doc table.readings td.num > .todo { grid-column: 2; margin: .25rem 0 0; max-width: none; }
  .doc .table-scroll:has(> table.readings) { overflow: visible; }
}

/* Phone text floor (house rule: no label under 11 px on a phone): the 3D tour's loop legend and the component
   picker's heading were 9.3 and 8.8 px. */
@media (max-width: 700px) {
  .legend-row .lg { font-size: 11px; letter-spacing: .1em; }
  .pick-list-head { font-size: 11px; letter-spacing: .14em; }
}


/* ═══════════ 8 Oct 2026: Figure 1 "The system, stage by stage", redrawn in the record's DBTL style ═══════════
   Owner: "make this diagram much better for bioreactor and change its style to match the dbtl cycles from other
   pages". The walk keeps its behaviour (../js/syswalk.js, unchanged: stages light up, passed ones stay dimly on). The
   stage is a DBTL band (leaf hairline, 4px leaf rule, leaf-50 wash, the kicker), the narration DBTL step chips with
   round numbered badges, and the drawing has real parts. Culture (lumen side) takes the bioreactor's deep blue, the
   harvest (shell side) leaf green; orange stays "not on record". Everything is scoped to #syswalk, which outranks
   polish.css and wiki-align.css (both load after this file). On a phone and a tablet the drawing pins under the back
   button and the narration scrolls beneath it. Delete this block (and restore the markup) to revert. */
#syswalk {
  --sw-c: #1d5a9e; --sw-c0: #f3f7fc; --sw-c1: #dbe7f6; --sw-c2: #a9c6e9;
  --sw-h: #23684a; --sw-h0: #f3f9f5; --sw-h1: #d6ebde;
  --sw-ink: #26323d; --sw-tx: #14402b; --sw-sub: #4a5560;
}
/* the stage: a DBTL band */
#syswalk .syswalk-stage {
  height: auto; top: 76px; justify-content: flex-start; padding: 1rem 1.1rem 1.15rem;
  background: linear-gradient(180deg, #f4f9f6, #fff 64%);
  border: 1px solid #cfe4d8; border-top: 4px solid #23684a; border-radius: .5rem; box-shadow: none;
}
#syswalk .syswalk-stage::before, #syswalk .syswalk-stage::after { content: none; }
#syswalk .syswalk-fig { margin: .75rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#syswalk .syswalk-fig svg { min-width: 0; width: 100%; height: auto; overflow: visible; }
/* the kicker: "STAGE 03 OF 08", then the stage's name in the heading face */
#syswalk .sw-kick, #syswalk .syswalk-readout {
  position: static; display: block; margin: 0; padding: 0; border: 0;
  font: 700 .8125rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #23684a;
}
#syswalk .syswalk-rn { font: inherit; letter-spacing: inherit; color: inherit; }
#syswalk .syswalk-rt { font-size: inherit; letter-spacing: inherit; font-weight: 600; color: #5f6b78; }
#syswalk .syswalk-rname, #syswalk .sw-static span {
  display: block; margin: .3rem 0 0; font: 800 1.25rem/1.2 var(--sans); letter-spacing: -.015em;
  text-transform: none; color: #14402b;
}
#syswalk[data-active] .sw-static, #syswalk:not([data-active]) .syswalk-readout, #syswalk:not([data-active]) .syswalk-rail { display: none; }
/* progress: eight segments, filled to the live stage */
#syswalk .syswalk-rail {
  position: relative; inset: auto; width: auto; height: 5px; margin: .65rem 0 0; border-radius: 0; overflow: hidden;
  background: #e3f0e8;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%);
}
#syswalk .syswalk-rail::after { inset: 0 auto 0 0; height: auto; width: max(0px, calc(var(--sw-progress, 0%) - 2px)); background: #23684a; transition: width .35s var(--ease-out); }

/* ---- the drawing ---- */
#syswalk .sw-svg text { font-family: var(--sans); font-size: 14.5px; font-weight: 650; letter-spacing: 0; text-transform: none; fill: var(--sw-tx); }
#syswalk .sw-svg .sw-s { font-size: 13.2px; font-weight: 450; fill: var(--sw-sub); }
#syswalk .sw-svg .sw-k { font-size: 13.2px; font-weight: 700; font-style: italic; fill: var(--sw-h); }
#syswalk .sw-svg .sw-out { font-weight: 800; fill: var(--sw-h); }
#syswalk .sw-svg .sw-zt { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
#syswalk .sw-svg .sw-zt.c { fill: var(--sw-c); }
#syswalk .sw-svg .sw-zt.h { fill: var(--sw-h); }
#syswalk .sw-svg .sw-zs { font-size: 13.2px; font-weight: 500; letter-spacing: 0; fill: var(--sw-sub); }
#syswalk .sw-svg .sh { display: none; }
#syswalk .sw-zone.c { fill: var(--sw-c0); }
#syswalk .sw-zone.h { fill: var(--sw-h0); }
#syswalk .sw-pt { fill: #fff; stroke: var(--sw-ink); stroke-width: 1.5; }
#syswalk .sw-wh { fill: #fff; }
#syswalk .sw-glass, #syswalk .sw-col { fill: none; stroke: var(--sw-ink); stroke-width: 1.6; }
#syswalk .sw-ink { fill: var(--sw-ink); }
#syswalk .sw-ln { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#syswalk .sw-ln.c, #syswalk .sw-tube.c { stroke: var(--sw-c); }
#syswalk .sw-ln.h, #syswalk .sw-tube.h { stroke: var(--sw-h); }
#syswalk .sw-tube { fill: none; stroke-width: 4.5; }
#syswalk .sw-pinch { stroke-width: 2.4; }
#syswalk .sw-ar.c { fill: var(--sw-c); }
#syswalk .sw-ar.h { fill: var(--sw-h); }
#syswalk .sw-fl { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0 11; opacity: 0; }
#syswalk .sw-liq { fill: var(--sw-c1); }
#syswalk .sw-cell { fill: none; stroke: var(--sw-c); stroke-width: 2.2; stroke-linecap: round; }
#syswalk .sw-dip { fill: none; stroke: var(--sw-c); stroke-width: 2.4; }
#syswalk .sw-cuv { fill: var(--sw-c1); stroke: var(--sw-c); stroke-width: 1.2; }
#syswalk .sw-cuv.h { fill: var(--sw-h1); stroke: var(--sw-h); }
#syswalk .sw-beam { fill: none; stroke: var(--sw-ink); stroke-width: 1.2; stroke-dasharray: 2 2; }
#syswalk .sw-arm { fill: none; stroke: var(--sw-ink); stroke-width: 1.4; stroke-linecap: round; }
#syswalk .sw-rl { stroke-width: 1.2; }
#syswalk .sw-rot { transform-box: view-box; }
#syswalk .sw-shell { fill: var(--sw-h1); }
#syswalk .sw-hdr { fill: var(--sw-c1); }
#syswalk .sw-fib { fill: var(--sw-c2); stroke: var(--sw-c); stroke-width: .8; }
#syswalk .sw-prot { fill: none; stroke: var(--sw-h); stroke-width: 2.6; stroke-linecap: round; }
#syswalk .sw-sheet { fill: none; stroke: var(--sw-ink); stroke-width: 1.1; }
/* the stage badges: the narration's numbers, in each circuit's colour (3, the membrane, belongs to both) */
#syswalk .sw-b { transform-box: fill-box; transform-origin: center; }
#syswalk .sw-b circle { fill: var(--sw-c); }
#syswalk .sw-b.h circle { fill: var(--sw-h); }
#syswalk .sw-b.m circle { fill: #14402b; }
#syswalk .sw-svg .sw-b text { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }

/* ---- the walk: not yet reached, passed (dimly on), live (lit and flowing) ---- */
#syswalk[data-active] .syswalk-fig [data-stage] { opacity: .14; transition: opacity .5s var(--ease-out); }
#syswalk[data-active] .syswalk-fig [data-stage].sw-past { opacity: .46; }
#syswalk[data-active] .syswalk-fig [data-stage].sw-live { opacity: 1; }
#syswalk[data-active] .sw-live .sw-fl { opacity: .95; animation: sw-run 1.1s linear infinite; }
#syswalk[data-active] .sw-live .sw-rot { animation: sw-spin 2.8s linear infinite; }
#syswalk[data-active] .sw-live .sw-b circle { paint-order: stroke; stroke: rgba(29, 90, 158, .22); stroke-width: 9; }
#syswalk[data-active] .sw-live .sw-b.h circle { stroke: rgba(35, 104, 74, .24); }
#syswalk[data-active] .sw-live .sw-b.m circle { stroke: rgba(20, 64, 43, .2); }
/* stage 8 is the whole system at once: everything lit, everything flowing */
#syswalk[data-active]:has(.syswalk-step.sw-live[data-stage="8"]) .syswalk-fig [data-stage] { opacity: 1; }
#syswalk[data-active]:has(.syswalk-step.sw-live[data-stage="8"]) .sw-fl { opacity: .95; animation: sw-run 1.1s linear infinite; }
#syswalk[data-active]:has(.syswalk-step.sw-live[data-stage="8"]) .sw-rot { animation: sw-spin 2.8s linear infinite; }
@keyframes sw-run { to { stroke-dashoffset: -22; } }
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* ---- the narration: DBTL step chips ---- */
#syswalk .syswalk-step { border-left: 0; padding: 1rem 0; transition: opacity .4s var(--ease-out); }
#syswalk[data-active] .syswalk-step { opacity: .4; }
#syswalk[data-active] .syswalk-step.sw-live { opacity: 1; }
#syswalk .sw-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; row-gap: .5rem;
  padding: .95rem 1.05rem 1.05rem; background: #fff; border: 1px solid var(--w-line, #e5e5e5); border-radius: .5rem;
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
#syswalk[data-active] .syswalk-step.sw-live .sw-card { border-color: #4f9c6f; background: linear-gradient(180deg, #f4f9f6, #fff 70%); }
#syswalk .syswalk-step-n {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: 0; border-radius: 50%;
  font: 700 .8125rem/1 var(--sans); letter-spacing: 0; color: #fff; background: var(--sw-c);
}
#syswalk .syswalk-step.h .syswalk-step-n { background: var(--sw-h); }
#syswalk .syswalk-step.m .syswalk-step-n, #syswalk .syswalk-step.all .syswalk-step-n { background: #14402b; }
#syswalk .syswalk-step h4 { margin: 0; font-size: 1.06rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #14402b; }
#syswalk .syswalk-step p { grid-column: 1 / -1; margin: 0; max-width: none; font-size: .97rem; line-height: 1.66; color: #262626; }

/* ---- phones and tablets: the drawing pins under the back button, the narration scrolls beneath it ----
   syswalk.js lights the step nearest mid-screen. With the drawing pinned over the top of the screen, mid-screen is
   just under it, so each step carries the drawing's height above its card (--sw-pad): the card is then centred in the
   space left below the drawing when its step goes live. Only while the walk runs ([data-active]). */
@media (max-width: 900px) {
  #syswalk .syswalk-grid { gap: .4rem; }
  #syswalk .syswalk-stage {
    position: sticky; top: 56px; z-index: 4; width: 100%; max-width: 540px; margin: 0 auto; box-sizing: border-box;
    padding: .6rem .7rem .55rem; box-shadow: 0 14px 22px -20px rgba(20, 64, 43, .6);
  }
  #syswalk { --sw-pad: calc(56px + 66px + min(100vw - 72px, 518px) * .7333); }
  #syswalk .syswalk-step { min-height: 0; padding: .7rem 0; }
  #syswalk[data-active] .syswalk-step { padding-top: var(--sw-pad); opacity: .4; }
  #syswalk[data-active] .syswalk-step.sw-live { opacity: 1; }
  #syswalk .syswalk-fig { margin-top: .5rem; }
  /* a white strip above the pinned drawing, under the back button, so the narration does not show through above
     it; the walk's top margin is taller than the strip, so before it pins nothing is covered */
  #syswalk { margin-top: 4.2rem; }
  #syswalk .syswalk-stage::before {
    content: ""; position: absolute; top: auto; right: auto; bottom: 100%; left: 50%; width: 100vw; height: 58px;
    margin: 0 0 4px -50vw; border: 0; border-radius: 0; background: #fff; pointer-events: none;
  }
}
@media (max-width: 700px) {
  #syswalk .syswalk-stage { width: auto; max-width: none; margin: 0 -12px; padding: .55rem .5rem .45rem; }
  #syswalk { --sw-pad: calc(56px + 46px + (100vw - 28px) * .7333); }
  #syswalk .syswalk-rname { display: none; }
  #syswalk .syswalk-rt { font-size: inherit !important; }
  #syswalk .syswalk-rail { margin-top: .45rem; }
  #syswalk .syswalk-fig { margin-top: .4rem; }
  #syswalk .sw-svg text, #syswalk .sw-svg .sw-s, #syswalk .sw-svg .sw-k, #syswalk .sw-svg .sw-zs { font-size: 19px; }
  #syswalk .sw-svg .sw-zt { font-size: 19px; letter-spacing: .04em; }
  #syswalk .sw-svg .sw-b text { font-size: 14.5px; }
  #syswalk .sw-svg .lo { display: none; }
  #syswalk .sw-svg .sh { display: inline; }
  #syswalk .sw-b { transform: scale(1.35); }
  #syswalk .syswalk-step-n { font-size: 12px !important; }
  #syswalk .sw-card { padding: .85rem .9rem .95rem; }
  #syswalk .syswalk-step p { font-size: 1rem; }
}
/* 2.5's two circuit cards, just above the drawing, take its colours (lumen blue, shell leaf), so the section codes
   its circuits one way. Their orange stripe was the record's last orange that did not mean "not on record". */
body.doc-light #sec25 .circuit.lumen::before { background: linear-gradient(#1d5a9e, rgba(29, 90, 158, 0)); }
body.doc-light #sec25 .circuit.shell::before { background: linear-gradient(#23684a, rgba(35, 104, 74, 0)); }
body.doc-light #sec25 .circuit.lumen .circuit-tag { color: #1d5a9e; }
body.doc-light #sec25 .circuit.shell .circuit-tag { color: #23684a; }
/* tablets: the narration takes the drawing's width, so nothing scrolls out beside the pinned drawing; and between a
   phone and a wide desktop the drawing renders at about 0.8-0.95, so its small type is set larger to stay at 11 px */
@media (min-width: 701px) and (max-width: 900px) { #syswalk .syswalk-steps { max-width: 540px; margin: 0 auto; } }
@media (min-width: 701px) and (max-width: 1200px) {
  #syswalk .sw-svg .sw-zt { font-size: 13.5px; }
  #syswalk .sw-svg .sw-s, #syswalk .sw-svg .sw-k, #syswalk .sw-svg .sw-zs { font-size: 13.6px; }
  #syswalk .sw-svg .sw-b text { font-size: 13.6px; }
}
/* the narrowest phones (360 px): the pinned drawing runs edge to edge, so its labels stay at 11 px or more */
@media (max-width: 374px) {
  #syswalk .syswalk-stage { margin: 0 -18px; border-left: 0; border-right: 0; border-radius: 0; padding: .55rem .35rem .45rem; }
  #syswalk { --sw-pad: calc(56px + 46px + (100vw - 8px) * .7333); }
}
@media (prefers-reduced-motion: reduce) {
  #syswalk .sw-fl, #syswalk .sw-rot { animation: none !important; }
  #syswalk .syswalk-rail::after, #syswalk .syswalk-step, #syswalk .sw-card, #syswalk .syswalk-fig [data-stage] { transition: none; }
}

/* 9 Oct 2026 polish: section numbers sit next to their titles, as on the photometer page
   (photometer/css/style.css, "section numbers sit next to their titles, not in a 59px column").
   ../css/polish.css gives `.sec h3 i` a 2.6em min-width, which left a wide gap ("3.1      Design")
   on this page only. Delete this block to revert. */
body.doc-light[data-instrument="bioreactor"] .doc-wrap section.sec > h3 { gap: 0; }
body.doc-light[data-instrument="bioreactor"] .doc-wrap section.sec > h3 > i { min-width: 0; }

/* 9 Oct 2026 polish: the hero lede's one link ("(5.1)", to the containment section) took the
   record's dark link colour and all but vanished on the dark hero. Same blue as the title's
   "what they secrete". Delete to revert. */
.intro .lede a { color: var(--amber); text-decoration-color: color-mix(in srgb, var(--amber) 55%, transparent); }