/* document.css — sheet layout, rails, redaction, chips.
   Total sheet count lives here, once. Renumbering the document is a
   one-value change; the footer rail and TOC both read it. */

:root { --total: "11"; }

/* ═══ Cover ═══════════════════════════════════════════════════════════
   One viewport. Classification, name, document-control block, contents. */

/* Fills the viewport, but stops stretching once the content has the room
   it needs — otherwise a tall window pulls the auto margins apart and
   leaves a void in the middle of the cover. */
.cover {
  min-block-size: min(100svh, 54rem);
  padding: var(--space-4) var(--edge) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  max-inline-size: 68rem;
  margin-inline: auto;
  position: relative;
}

.cover-class {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stamp);
  border-block-end: var(--hair) solid var(--stamp);
  padding-block-end: var(--space-1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cover h1 { margin-block-end: var(--space-2); }

.cover-doctype {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Document control block — the cover's payload */
.control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  border-block-start: var(--hair) solid var(--rule);
  padding-block-start: var(--space-3);
}
@media (min-width: 62rem) {
  .control { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 34rem) {
  .kv { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--space-3); }
}
.kv dt {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-block: 3px 0;
  align-self: baseline;
}
.kv dd {
  font-size: var(--t-s);
  padding-block: 0 3px;
  min-inline-size: 0;
  overflow-wrap: break-word;
}
@media (min-width: 34rem) {
  .kv dt,
  .kv dd { padding-block: 3px; border-block-start: var(--hair) solid var(--rule); }
  .kv dt:first-of-type,
  .kv dd:first-of-type { border-block-start: 0; }
}
.kv a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-faint); }
.kv a:hover { text-decoration-color: var(--ink); }

/* RECEIVED stamp — the only animated element on the page */
.stamp {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-end: var(--edge);
  border: 2px solid var(--stamp);
  color: var(--stamp);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: var(--lh-tight);
  transform: rotate(-7deg);
  opacity: .8;
  animation: stamp-in 380ms var(--ease) both;
}
.stamp span { display: block; font-weight: 400; letter-spacing: .08em; }
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-7deg) scale(1.6); }
  to   { opacity: .8; transform: rotate(-7deg) scale(1); }
}
@media (max-width: 48rem) {
  .stamp { position: static; align-self: flex-start; transform: rotate(-2deg); animation-name: none; }
}

/* Contents list on the cover */
.contents { margin-block-start: var(--space-2); }
.contents ol { columns: 4; column-gap: var(--space-4); font-size: var(--t-xs); }
@media (max-width: 62rem) { .contents ol { columns: 2; } }
@media (max-width: 34rem) { .contents ol { columns: 1; } }
.contents li { break-inside: avoid; display: flex; gap: var(--space-2); padding-block: 2px; }
.contents a { text-decoration: none; border-block-end: var(--hair) solid var(--rule); }
.contents a:hover { border-block-end-color: var(--ink); }
.contents .n { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-faint); flex: none; }

/* ═══ Document body — rail + content ═════════════════════════════════ */

.doc {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--edge);
  padding-block-end: var(--space-16);
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr) and lets
     min-content push the grid wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 60rem) {
  .doc { grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--space-8); }
}

/* ── Left rail ───────────────────────────────────────────────────────*/
.rail {
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  background: var(--paper);
  z-index: var(--z-rail);
  padding-block: var(--space-2);
}
@media (min-width: 60rem) {
  .rail {
    inset-block-start: var(--space-4);
    max-block-size: calc(100vh - var(--space-12));
    overflow-y: auto;
    padding-block: 0;
  }
}

.rail-ref {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-block-end: var(--space-1);
  border-block-end: var(--hair) solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Progress hairline — scaled by JS, harmless when JS is off (stays 0) */
.rail-progress {
  block-size: 2px;
  background: var(--rule);
  margin-block: var(--space-1) var(--space-2);
  overflow: hidden;
}
.rail-progress i {
  display: block;
  block-size: 100%;
  background: var(--ink-muted);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform var(--dur) linear;
}

.toc { display: flex; flex-direction: column; }
@media (max-width: 59.99rem) {
  .toc {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-2);
    scrollbar-width: none;
    padding-block-end: var(--space-1);
  }
  .toc::-webkit-scrollbar { display: none; }
  .rail-progress { margin-block: var(--space-1); }
}

.toc a {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding-block: 5px;
  display: flex;
  gap: var(--space-1);
  white-space: nowrap;
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--space-1);
  transition: color var(--dur) var(--ease);
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-inline-start-color: var(--ink); }
@media (max-width: 59.99rem) {
  .toc a { border-inline-start: 0; border-block-end: 2px solid transparent; padding-inline: 0; }
  .toc a[aria-current="true"] { border-block-end-color: var(--ink); }
  .toc .t { display: none; }
}

/* ═══ Sheets ══════════════════════════════════════════════════════════
   Each sheet is a grid: mono label gutter, then content. */

.body { counter-reset: sheet; }

.sheet {
  counter-increment: sheet;
  padding-block: var(--space-8);
  border-block-start: var(--hair) solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.sheet:first-child { border-block-start: 0; }
@media (min-width: 48rem) {
  .sheet {
    grid-template-columns: var(--gutter-w) minmax(0, 1fr);
    column-gap: var(--space-4);
  }
  .sheet > * { grid-column: 2; }
  .sheet > .sheet-num { grid-column: 1; grid-row: 1; }
}

.sheet-num {
  font-family: var(--font-mono);
  font-size: var(--t-m);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}
.sheet-num::before { content: counter(sheet, decimal-leading-zero); }

.sheet-head { margin-block-end: var(--space-3); }
.sheet-head h2 { margin-block-end: var(--space-1); }
.sheet-head .sub {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lead { font-size: var(--t-m); line-height: var(--lh-body); }

/* Per-sheet footer — hidden on screen (the fixed rail does this job),
   restored in print where a running footer is expected. */
.sheet-foot { display: none; }

/* ── Scope grid ──────────────────────────────────────────────────────*/
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 48rem) { .cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.cols h3 {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  border-block-end: var(--hair) solid var(--rule);
  padding-block-end: var(--space-1);
  margin-block-end: var(--space-2);
}
.cols li {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  padding-block: 3px;
  padding-inline-start: var(--space-2);
  position: relative;
}
.cols li::before { content: "·"; position: absolute; inset-inline-start: 3px; color: var(--mark); }

/* ── Entries: engagements, history ───────────────────────────────────*/
.entry { padding-block: var(--space-3); border-block-start: var(--hair) solid var(--rule); }
.entry:first-of-type { border-block-start: 0; padding-block-start: 0; }

.entry-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-1);
}
.entry-h h3 { font-size: var(--t-base); font-weight: 600; }
.entry-h .meta {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The engagement parameter strip — mono, reads as a report header block */
.params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-muted);
  margin-block-end: var(--space-2);
  align-items: baseline;
}
/* A label and its value are one unit — they must never wrap apart. */
.params .pair {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}
.params .k {
  color: var(--ink-faint);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}

.entry ul { margin-block-start: var(--space-1); }
.entry li {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  max-inline-size: var(--measure);
  padding-inline-start: var(--space-2);
  position: relative;
  padding-block: 3px;
}
.entry li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--mark);
}
/* :not(.sev) so a severity assertion is not overridden by the generic
   emphasis rule — .entry li strong (0,1,2) would otherwise outrank .sev. */
.entry li strong:not(.sev) { color: var(--ink); }

/* ── Tables ──────────────────────────────────────────────────────────*/
.tbl { font-size: var(--t-xs); }
.tbl caption { text-align: left; margin-block-end: var(--space-2); }
.tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-block-end: var(--hair) solid var(--ink-faint);
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  vertical-align: bottom;
}
.tbl td {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-block-end: var(--hair) solid var(--rule);
  vertical-align: top;
  color: var(--ink-muted);
}
.tbl td:first-child { color: var(--ink); }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* Revision numbers are an index, not a measurement — keep the column to
   the width of its content instead of letting it claim a third of the row. */
.tbl--rev th:first-child,
.tbl--rev td:first-child { inline-size: 5ch; text-align: left; }
.tbl a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-faint); }
.tbl a:hover { text-decoration-color: var(--ink); }

/* ═══ Redaction ═══════════════════════════════════════════════════════
   The withheld text is NOT in the DOM. The bar is an empty element of
   fixed width; expanding it reveals only metadata already published
   elsewhere on this page (sector, engagement type, scale). A reader who
   inspects the DOM finds nothing withheld, because nothing is. */

.redact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  vertical-align: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
  border: 0;
}
.redact-bar {
  display: inline-block;
  inline-size: 7.5rem;
  block-size: .85em;
  background: var(--redact);
  border: var(--hair) solid var(--stamp);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  flex: none;
}
.redact-note {
  color: var(--ink-faint);
  white-space: nowrap;
  max-inline-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-inline-size var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.redact:hover .redact-note,
.redact:focus-visible .redact-note,
.redact[aria-expanded="true"] .redact-note {
  max-inline-size: 22rem;
  opacity: 1;
}

/* ═══ Severity chips ══════════════════════════════════════════════════
   --critical is asserted here and nowhere else. */

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  border: var(--hair) solid currentColor;
  padding: 1px var(--space-1);
  color: var(--ink-muted);
  white-space: nowrap;
  vertical-align: baseline;
}
.chip[data-severity="high"] { color: var(--critical); }
.chip .vec {
  max-inline-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-inline-size var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.chip:hover .vec,
.chip:focus-visible .vec,
.chip[aria-expanded="true"] .vec { max-inline-size: 28rem; opacity: 1; }

/* Severity asserted in prose, where no numeric score is published */
.sev { color: var(--critical); font-weight: 600; }

/* ═══ Closed state ════════════════════════════════════════════════════*/
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--closed);
}
.status::before {
  content: "";
  inline-size: var(--space-1);
  block-size: var(--space-1);
  background: currentColor;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.entry .status { margin-block-start: var(--space-1); }

.note {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-block-start: var(--space-3);
}

/* ═══ Fixed footer rail ═══════════════════════════════════════════════*/
.doc-foot {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-footer);
  background: var(--paper);
  border-block-start: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.doc-foot-in {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding: var(--space-1) var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.doc-foot .mid { color: var(--stamp); }
@media (max-width: 34rem) { .doc-foot .mid { display: none; } }

/* Sheet counter, written by CSS so it is correct with JS disabled.
   JS overwrites textContent with the scrolled position. */
.sheet-count::after { content: "Sheet 1 of " var(--total); }
.sheet-count[data-live]::after { content: none; }

/* ═══ Controls ════════════════════════════════════════════════════════*/
.controls { display: flex; gap: var(--space-2); align-items: center; }
.ctl {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  border: var(--hair) solid var(--rule);
  padding: 2px var(--space-1);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ctl:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 48rem) { .ctl.opt { display: none; } }

/* ═══ Shortcut dialog ═════════════════════════════════════════════════*/
.shortcuts {
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-4);
  max-inline-size: 30rem;
  inline-size: calc(100% - var(--space-4));
  margin: auto;
}
.shortcuts::backdrop { background: rgb(0 0 0 / .6); }
.shortcuts h2 { font-size: var(--t-l); margin-block-end: var(--space-2); }
.shortcuts dl { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-1) var(--space-2); font-size: var(--t-xs); }
.shortcuts dt { font-family: var(--font-mono); color: var(--ink-muted); }
.shortcuts .close { margin-block-start: var(--space-3); }

kbd {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  border: var(--hair) solid var(--rule);
  padding: 0 4px;
}

/* ═══ Contact — CTA hierarchy ═════════════════════════════════════════*/
.cta-primary {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  margin-block-end: var(--space-4);
  transition: opacity var(--dur) var(--ease);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.cta-primary:hover { opacity: .85; }
.cta-primary .big { font-size: var(--t-m); font-weight: 600; }
.cta-primary .small {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  opacity: .8;
}

.cta-secondary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-block-end: var(--space-4); }
@media (min-width: 34rem) { .cta-secondary { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.cta-secondary div { border-block-start: var(--hair) solid var(--rule); padding-block-start: var(--space-1); }
.cta-secondary a { font-size: var(--t-m); text-decoration: none; border-block-end: var(--hair) solid transparent; }
.cta-secondary a:hover { border-block-end-color: var(--ink); }

.cta-tertiary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  border-block-start: var(--hair) solid var(--rule);
  padding-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.cta-tertiary a { color: var(--ink-muted); text-decoration: none; border-block-end: var(--hair) solid var(--rule); }
.cta-tertiary a:hover { color: var(--ink); border-block-end-color: var(--ink); }
.cta-tertiary [aria-disabled="true"] {
  color: var(--ink-faint);
  border-block-end-style: dotted;
  cursor: not-allowed;
}

.signoff {
  margin-block-start: var(--space-6);
  border-block-start: var(--hair) solid var(--stamp);
  padding-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ═══ Instrumentation (sheet 09) ══════════════════════════════════════
   Written at build time by scripts/build-instrumentation.mjs.

   The heatmap is achromatic by construction: its five levels sit on the
   ink ramp, so the graph introduces no chromatic event and --critical
   stays reserved for asserting a severity. */

.inst-block { border-block-start: var(--hair) solid var(--rule); padding-block: var(--space-3); }
.inst-block:first-of-type { border-block-start: 0; padding-block-start: 0; }
.inst-block h3 {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: var(--space-1);
}
/* .sub is mono only under .sheet-head; restate it here rather than widening
   that selector, which would catch every .sub on the page. */
.inst-block .sub {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-2);
}

.heatmap {
  display: block;
  inline-size: 100%;
  max-inline-size: 44rem;
  block-size: auto;
  margin-block: var(--space-2) var(--space-3);
  overflow: visible;
}
.heatmap rect {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.heatmap .hm-0 { fill: var(--rule); }
.heatmap .hm-1 { fill: var(--ink-faint); }
.heatmap .hm-2 { fill: var(--ink-muted); }
.heatmap .hm-3 { fill: var(--stamp); }
.heatmap .hm-4 { fill: var(--ink); }
.heatmap .hm-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  fill: var(--ink-faint);
}

.inst-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-inline-size: 32rem;
}
@media (min-width: 34rem) { .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); } }
.inst-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  border-block-start: var(--hair) solid var(--rule);
  padding-block: 3px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}
.inst-field .k { color: var(--ink-muted); letter-spacing: var(--track-wide); text-transform: uppercase; }
.inst-field .v { color: var(--ink); }

/* The caption that stops a sparse graph reading as inactivity. */
.note-body {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  max-inline-size: var(--measure);
  margin-block-start: var(--space-2);
}

/* ═══ Unfilled fields ═════════════════════════════════════════════════
   A placeholder must never be mistakeable for content. These read as
   empty fields on a form: faint, mono, dashed. They are deliberately
   visible rather than hidden — the gap is the point until it is filled. */
.todo {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  border-block-end: var(--hair) dashed var(--ink-faint);
  font-weight: 400;
}
h3.todo { letter-spacing: var(--track-wide); text-transform: uppercase; }

/* ═══ Research artifacts ══════════════════════════════════════════════*/
.artifact {
  border-block-start: var(--hair) solid var(--rule);
  padding-block: var(--space-3);
  display: grid;
  gap: var(--space-1);
}
.artifact:first-of-type { border-block-start: 0; padding-block-start: 0; }
.artifact-shot {
  background: var(--surface);
  border: var(--hair) dashed var(--rule);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  max-inline-size: 28rem;
  margin-block-start: var(--space-1);
}

/* Touch targets */
@media (pointer: coarse) {
  .toc a, .cta-tertiary a, .kv a { min-block-size: 44px; align-items: center; }
  .redact, .chip { min-block-size: 32px; }
}