:root {
  --paper:      #FBFAF8;
  --paper-sunk: #F3F0EC;
  --ink:        #1B1D21;
  --ink-soft:   #3C4046;
  --muted:      #6A6D73;
  --faint:      #8E9096;
  --rule:       #DFDAD4;
  --rule-hair:  #EAE6E1;
  --accent:     #6F3E43;
  --accent-dim: #8A5A5F;
  --accent-wash:#F5EDED;
  --chip-bg:    #EFE7E7;

  --col: 42rem;
  --fs-body: 1.125rem;
  --lh-body: 1.75;

  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #16171A;
    --paper-sunk: #1D1F23;
    --ink:        #E8E6E2;
    --ink-soft:   #CFCCC7;
    --muted:      #9B9DA3;
    --faint:      #7C7E84;
    --rule:       #32353A;
    --rule-hair:  #26282C;
    --accent:     #C99095;
    --accent-dim: #AE787D;
    --accent-wash:#241C1E;
    --chip-bg:    #2A2124;
  }
}

:root[data-theme="dark"] {
  --paper:      #16171A;
  --paper-sunk: #1D1F23;
  --ink:        #E8E6E2;
  --ink-soft:   #CFCCC7;
  --muted:      #9B9DA3;
  --faint:      #7C7E84;
  --rule:       #32353A;
  --rule-hair:  #26282C;
  --accent:     #C99095;
  --accent-dim: #AE787D;
  --accent-wash:#241C1E;
  --chip-bg:    #2A2124;
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 50;
}
.progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .progress > i { transition: none; }
}

.shell {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.doc {
  width: 100%;
  max-width: min(100%, var(--col));
}

/* ---------- masthead: a service-record plate ---------- */

.plate {
  width: 100%;
  max-width: min(100%, var(--col));
  margin: clamp(3rem, 9vw, 6rem) 0 3.5rem;
}

.plate-eyebrow {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.plate-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 8.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

.plate-tag {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 1.1rem 0 0;
  text-wrap: balance;
}

.plate-sub {
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 1.5rem 0 0;
  max-width: 30rem;
  text-wrap: pretty;
}

.plate-meta {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.plate-meta > div {
  padding: .95rem 1.1rem .95rem 0;
  border-right: 1px solid var(--rule-hair);
}
.plate-meta > div:last-child { border-right: 0; }
.plate-meta dt {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 .4rem;
}
.plate-meta dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: .9375rem;
  letter-spacing: .01em;
}
.status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- table of contents rail ---------- */

.rail { display: none; }

@media (min-width: 68rem) {
  .shell {
    grid-template-columns: 13rem minmax(0, var(--col)) 8rem;
    justify-items: start;
    column-gap: 3rem;
    max-width: 74rem;
  }
  .plate, .doc { grid-column: 2; }
  .rail {
    display: block;
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 3rem;
    align-self: start;
    padding-top: .4rem;
  }
  .rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    border-left: 1px solid var(--rule);
  }
  .rail a {
    display: flex;
    gap: .6rem;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--faint);
    text-decoration: none;
    padding: .1rem 0 .1rem .85rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
  }
  .rail a:hover { color: var(--ink-soft); }
  .rail a.on {
    color: var(--accent);
    border-left-color: var(--accent);
  }
  .rail .rn { color: var(--rule); min-width: .9rem; font-family: var(--f-mono); font-size: .6875rem; padding-top: .2rem; }
  .rail a.on .rn { color: var(--accent-dim); }
}

/* ---------- TL;DR ---------- */

.tldr {
  background: var(--paper-sunk);
  border: 1px solid var(--rule-hair);
  border-radius: 2px;
  padding: 2.2rem 2rem 2.4rem;
  margin: 0 0 3.5rem;
}
.tldr-h {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding: 0;
  border: 0;
}
.tldr-lede {
  margin: .6rem 0 1.6rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.tldr-lede em { font-style: italic; }
.tldr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
.tldr-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0 .4rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.tldr-num {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--faint);
  padding-top: .12rem;
  font-variant-numeric: tabular-nums;
}
.tldr-label {
  font-weight: 600;
  color: var(--ink);
}
.tldr-body { grid-column: 2; }

/* ---------- headings ---------- */

h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -.014em;
  color: var(--ink);
  margin: 3.75rem 0 1.35rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  position: relative;
  text-wrap: balance;
}
.secnum {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: .7rem;
}
.secnum::before { content: "§ "; color: var(--faint); }

h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.3;
  color: var(--accent);
  margin: 2.5rem 0 .9rem;
  text-wrap: balance;
}

/* ---------- body copy ---------- */

.doc p {
  margin: 0 0 1.4rem;
  text-wrap: pretty;
}
.doc p strong { font-weight: 600; color: var(--ink); }
.doc em { font-style: italic; }

.numpara {
  display: grid;
  grid-template-columns: 1.85rem 1fr;
  align-items: baseline;
  margin: 0 0 1.4rem;
}
.np-num {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.np-label { font-weight: 600; color: var(--ink); }
.leadpara { margin: 0 0 1.4rem; }

.doclist {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.doclist li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink-soft);
}
.doclist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .4rem;
  height: 1px;
  background: var(--accent);
}
.doclist strong { color: var(--ink); font-weight: 600; }

/* ---------- quotes ---------- */

.pull {
  margin: 2.4rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--accent);
}
.pull p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.2vw, 1.375rem);
  line-height: 1.42;
  color: var(--accent);
  margin: 0;
  text-wrap: balance;
}

.speech {
  margin: 1.75rem 0;
  padding: .15rem 0 .15rem 1.25rem;
  border-left: 2px solid var(--rule);
}
.speech p {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- mandate spec ---------- */

.mandate {
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  border-top: 1px solid var(--rule-hair);
}
.spec-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: .5rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule-hair);
}
.mandate dt {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: .22rem;
}
.mandate dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- tables ---------- */

.tablewrap {
  overflow-x: auto;
  margin: 1.6rem 0 2rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
  min-width: 24rem;
}
thead th {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  padding: .8rem .9rem .8rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
tbody td {
  padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid var(--rule-hair);
  color: var(--ink-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
  padding-right: 1.4rem;
}
thead th:first-child, tbody td:first-child { width: 38%; }

/* ---------- figure ---------- */

.fig {
  margin: 2rem 0 2.4rem;
}
.fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule-hair);
  border-radius: 2px;
  background: #fff;
}
.fig figcaption {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--faint);
  margin-top: .7rem;
}

/* ---------- references ---------- */

.refs {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.refs li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .3rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.refnum {
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--accent-dim);
  font-variant-numeric: tabular-nums;
  padding-top: .12rem;
}

/* ---------- footer ---------- */

.colophon {
  width: 100%;
  max-width: var(--col);
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--faint);
}
.colophon strong { color: var(--ink-soft); font-weight: 500; }
@media (min-width: 68rem) {
  .colophon { grid-column: 2; }
}

a { color: var(--accent); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media print {
  .progress, .rail { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .shell { display: block; max-width: none; padding: 0; }
  h2 { break-after: avoid; }
  .tablewrap, .fig, .pull { break-inside: avoid; }
}
/* ---------- background line art ---------- */

.bg-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--accent);
  opacity: .05;
}
.bg-art svg {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-house {
  top: -30px;
  right: -70px;
  width: min(46vw, 540px);
  transform: rotate(-3deg);
}
.art-dial {
  bottom: 5%;
  left: -50px;
  width: 280px;
}
@media (max-width: 68rem) {
  .art-dial { display: none; }
  .art-house { width: 70vw; right: -18vw; }
}
.shell { position: relative; z-index: 1; }

/* ---------- motion ---------- */

html { scroll-behavior: smooth; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.plate > * {
  opacity: 0;
  animation: rise .7s cubic-bezier(.2, .6, .2, 1) forwards;
}
.plate > *:nth-child(1) { animation-delay: .05s; }
.plate > *:nth-child(2) { animation-delay: .15s; }
.plate > *:nth-child(3) { animation-delay: .25s; }
.plate > *:nth-child(4) { animation-delay: .35s; }
.plate > *:nth-child(5) { animation-delay: .45s; }

.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
}
.rv-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plate > * { animation: none; opacity: 1; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- multi-page additions ---------- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.5rem;
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar-home {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
}
.topbar-home:hover { color: var(--accent); }
.topbar-note { color: var(--faint); text-align: right; }

.ch-head {
  margin: clamp(2.5rem, 7vw, 4.25rem) 0 2.25rem;
}
.ch-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 6.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ch-lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 1.15rem 0 0;
  text-wrap: pretty;
}
.ch-head + h3 { margin-top: 0; }

.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3.75rem 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.pn a {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
}
.pn-next { grid-column: 2; text-align: right; }
.pn-dir {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.pn-title {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--ink);
}
.pn a:hover .pn-title { color: var(--accent); }

.tldr-list li { display: block; }
.tldr-link {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0 .4rem;
  color: inherit;
  text-decoration: none;
}
.tldr-link .tldr-body { grid-column: 2; }
.tldr-link:hover .tldr-label { color: var(--accent); }

.rail .on { color: var(--accent); border-left-color: var(--accent); }
.rail .on .rn { color: var(--accent-dim); }

@media (min-width: 68rem) {
  .shell--ch .rail { grid-row: 1; padding-top: 3.4rem; }
}

/* ---------- parting thoughts ---------- */

.ch-kicker {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .7rem;
}

.vig {
  margin: 2.4rem auto 2.6rem;
  max-width: 520px;
}
.vig svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vig .acc { stroke: var(--accent); }
.vig figcaption {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--faint);
  margin-top: .8rem;
  text-align: center;
}

.afterword {
  margin-top: 3.5rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--rule);
}
.afterword p {
  font-style: italic;
  color: var(--muted);
}

/* ---------- switchboard + timeline figures ---------- */

.fx { margin: 2.4rem 0 2.8rem; }
.fx svg { display: block; width: 100%; height: auto; }
.fx .col-h { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; fill: var(--ink-soft); }
.fx .route-h { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; fill: var(--ink-soft); }
.fx .route-h.acc { fill: var(--accent); }
.fx .note { font-family: var(--f-mono); font-size: 10px; letter-spacing: .5px; fill: var(--muted); font-style: italic; }
.fx .guide { stroke: var(--rule-hair); stroke-dasharray: 2 6; }
.fx .r-line { stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; }
.fx .r-line.acc { stroke: var(--accent); stroke-width: 3; }
.fx .r-line.opt { stroke: var(--accent-dim); stroke-width: 2; stroke-dasharray: 5 6; fill: none; }
.fx .dot { fill: var(--paper); stroke: var(--muted); stroke-width: 2; }
.fx .dot.acc { fill: var(--accent); stroke: var(--accent); }
.fx .rec { fill: none; stroke: var(--accent); stroke-width: 2; }
.fx .rec-t { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; fill: var(--accent); }
.fx figcaption { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; color: var(--faint); margin-top: .9rem; }
.fx .band-a { fill: var(--paper-sunk); }
.fx .band-b { fill: var(--chip-bg); }
.fx .band-c { fill: var(--accent-wash); }
.fx .band-edge { fill: none; stroke: var(--rule); stroke-width: 1; }
.fx .band-edge.acc { stroke: var(--accent); stroke-width: 2.5; }
.fx .axis { stroke: var(--rule); stroke-width: 1; }
.fx .band-t { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; fill: var(--muted); }
.fx .band-t.acc { fill: var(--accent); }

/* figure accent: ink (adapts to dark mode via tokens) */
.fx {
  --fig-acc: var(--ink);
  --fig-acc-dim: var(--ink-soft);
}
.fx .route-h.acc { fill: var(--fig-acc); }
.fx .r-line.acc { stroke: var(--fig-acc); }
.fx .r-line.opt { stroke: var(--fig-acc-dim); }
.fx .dot.acc { fill: var(--fig-acc); stroke: var(--fig-acc); }
.fx .rec { stroke: var(--fig-acc); }
.fx .rec-t { fill: var(--fig-acc); }
.fx .dot.acc-o { fill: var(--paper); stroke: var(--fig-acc); }
.fx .box { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; }
.fx .box-hh { fill: var(--paper-sunk); stroke: var(--fig-acc); stroke-width: 2; stroke-dasharray: 7 6; }
.fx .conn { stroke: var(--faint); stroke-width: 1.5; fill: none; }
.fx .t-h { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; fill: var(--ink-soft); }
.fx .t-b { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-soft); }
.fx .hh-t { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 2px; fill: var(--fig-acc); }
.fx .era-t { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .5px; fill: var(--ink-soft); }
.fx .edge-t { font-family: var(--f-mono); font-size: 11.5px; fill: var(--ink-soft); }
.fx .trace { stroke: var(--faint); stroke-width: 1.3; fill: none; }
.fx .tdot { fill: var(--paper); stroke: var(--faint); stroke-width: 1.3; }
.fx .grid-l { stroke: var(--rule-hair); stroke-width: 1; fill: none; }
.fx .box.acc { stroke: var(--fig-acc); }
.fx .trace.acc { stroke: var(--fig-acc); }
.fx .t-h.acc { fill: var(--fig-acc); }
.fx .t-s { font-family: var(--f-mono); font-size: 9.5px; fill: var(--ink-soft); }

/* ---------- contents strip (narrow screens) ---------- */

.topbar { justify-content: flex-start; }
.topbar-note { margin-left: auto; }
.toc-strip {
  position: relative;
  z-index: 2;
  padding: .65rem 1.5rem .75rem;
  border-bottom: 1px solid var(--rule-hair);
}
.toc-strip ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}
.toc-strip a {
  font-family: var(--f-display);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  gap: .32rem;
  white-space: nowrap;
}
.toc-strip a:hover { color: var(--accent); }
.toc-strip a.on { color: var(--accent); font-weight: 600; }
.toc-strip .rn { color: var(--faint); font-family: var(--f-mono); font-size: .6875rem; padding-top: .2rem; }
@media (min-width: 68rem) { .toc-strip { display: none; } }

.ch-mins {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 1rem 0 0;
}

.fx.vig-wide { max-width: 660px; margin-left: auto; margin-right: auto; }
.fx.vig-wide figcaption { text-align: center; }
.fx.vig-wide .note {
  fill: var(--ink-soft);
  font-weight: 600;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .8px;
}

/* publication back-link */
.pubbar{padding:.65rem 1.5rem;border-bottom:1px solid var(--rule,#d9d4ce);background:var(--paper,#faf9f7)}
.pubbar a{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;color:var(--ink-soft,#65686d);text-decoration:none}
.pubbar a:hover{color:var(--accent,#6f3e43)}