/* ==========================================================================
   Human Anatomy — Reference Edition
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

/* Self-hosted latin subsets. Google Fonts was a render-blocking third-party
   request on every load; these are ~120 KB total and same-origin, so they are
   covered by the site's own cache headers and leak nothing to another host.
   Archivo is the variable cut, so one file serves 300–700. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Archivo-300-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper:        #eae4d6;
  --card-bg:      #f7f2e7;

  /* Ink */
  --ink:          #1c1917;
  --ink-body:     #4a443c;
  --ink-note:     #5c5449;
  --ink-label:    #6f6558;
  /* Was #8a8073, which measured 3.06:1 on the paper — the source-line and
     colophon text failed AA. This is a pre-existing fault carried over from
     the original design, not a dark-mode artefact. */
  --ink-caption:  #665d51;
  /* The rail's *inactive* tone. An earlier audit read this as passing because
     it sampled the first rail item while that item was current — and current
     items are accent-coloured. Inactive was 2.98:1 the whole time. */
  --ink-rail:     #6a6053;

  /* Accent */
  --accent:       #8f1d14;
  --accent-hi:    #b8332a;

  /* Reversed (hero) */
  --rev-ink:      #f4f1e9;
  --rev-body:     #d3ccbd;
  --rev-accent:   #e0655a;
  --rev-mono:     #c3bbab;
  --rev-hint:     #b0a696;

  /* Plate family — DELIBERATELY CONSTANT ACROSS LIGHT AND DARK.
     The plates are engravings on pale stock and the diagrams are dark line
     work. Inverting them would either destroy the artwork or make the
     diagram labels vanish, so every surface that sits *on* a plate keeps its
     own ink. In dark mode these read as lit specimen cards. */
  --plate-bg:         #f6f1e6;
  --plate-ink:        #1c1917;
  --plate-ink-soft:   #5c5449;
  /* #8a8073 measured 3.44:1 on the plate ground — under AA for the 8–9px
     diagram labels, in light mode as well as dark. */
  --plate-ink-mute:   #6f6558;
  --plate-ink-faint:  rgba(28, 25, 23, .3);
  --plate-hatch:      rgba(28, 25, 23, .38);
  --plate-mid:        rgba(28, 25, 23, .5);
  --plate-dot:        rgba(28, 25, 23, .78);
  --plate-rule:       rgba(28, 25, 23, .15);
  --plate-rule-strong: rgba(28, 25, 23, .22);
  --plate-card:       rgba(247, 242, 231, .97);
  --plate-card-edge:  rgba(28, 25, 23, .34);
  --plate-accent:     #8f1d14;

  /* Rules & shadows */
  --rule:         rgba(28, 25, 23, .15);
  --rule-mid:     rgba(28, 25, 23, .18);
  --rule-strong:  rgba(28, 25, 23, .22);
  --rule-card:    rgba(28, 25, 23, .34);
  --shadow-plate: 0 18px 46px rgba(28, 25, 23, .15);
  --shadow-card:  0 10px 26px rgba(28, 25, 23, .18);

  /* Type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Chrome — page surfaces that DO invert in dark mode */
  --scrim-top:    rgba(234, 228, 214, .97);
  --scrim-mid:    rgba(234, 228, 214, .86);
  --scrim-zero:   rgba(234, 228, 214, 0);
  --rail-bg:      rgba(234, 228, 214, .86);
  --rail-edge:    rgba(28, 25, 23, .13);
  --wash-a:       #100c0a;
  --wash-b:       rgba(20, 12, 10, .92);
  --wash-c:       rgba(120, 22, 15, .22);
  --wash-d:       rgba(15, 11, 9, .42);
  --glow-a:       rgba(165, 142, 98, .13);
  --glow-b:       rgba(122, 100, 66, .10);
  --edition:      #857a6b;
  --step-on:      rgba(246, 241, 230, .7);
  --card-shadow-deep: rgba(20, 15, 12, .4);
  --overlay-scrim: rgba(20, 15, 12, .58);
  --on-accent:    #f7f2e7;
  --accent-edge:  rgba(143, 29, 20, .38);
  --accent-edge-strong: rgba(143, 29, 20, .45);
  --accent-wash:  rgba(143, 29, 20, .07);
  --mark-bg:      rgba(143, 29, 20, .18);

  --masthead-h:   54px;
  --rail-w:       clamp(40px, 5vw, 60px);

  /* Section rhythm */
  --pad-top:      clamp(74px, 10vh, 104px);
  --pad-right:    clamp(18px, 4vw, 56px);
  --pad-bottom:   clamp(36px, 6vh, 64px);
  --pad-left:     clamp(52px, 6vw, 92px);
  --col-gap:      clamp(26px, 4vw, 72px);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(120% 90% at 18% 8%, var(--glow-a), var(--scrim-zero) 62%),
    radial-gradient(100% 80% at 84% 88%, var(--glow-b), var(--scrim-zero) 58%);
  background-attachment: fixed;
  font-family: var(--font-body);
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, dl, dd, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; }

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--masthead-h);
  padding: 0 clamp(14px, 3vw, 32px) 0 calc(var(--rail-w) + clamp(12px, 1.6vw, 20px));
  background: linear-gradient(180deg,
    var(--scrim-top) 0%,
    var(--scrim-mid) 62%,
    var(--scrim-zero) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.masthead__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.masthead__mark,
.masthead__edition {
  font-family: var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.masthead__mark {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  color: var(--accent);
}
.masthead__edition {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--edition);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reading-level toggle */
.toggle {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--rule-strong);
}

.toggle__btn {
  border: 0;
  padding: 7px 11px;
  min-height: 30px;
  background: transparent;
  color: var(--ink-label);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.toggle__btn + .toggle__btn { border-left: 1px solid var(--rule-strong); }
.toggle__btn:hover { color: var(--ink); }
.toggle__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Section rail --------------------------------------------------------- */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 55;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  border-right: 1px solid var(--rail-edge);
  background: var(--scrim-mid);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rail__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  text-decoration: none;
  color: var(--ink-rail);
  transition: color .3s ease;
}
.rail__link:hover { color: var(--ink); }
.rail__link[aria-current="true"] { color: var(--accent); }

.rail__num {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .08em;
}

/* Name is exposed to assistive tech and on hover, never in the static layout */
.rail__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: hover) and (min-width: 700px) {
  .rail__link { position: relative; }
  .rail__link .rail__name {
    position: absolute;
    left: calc(100% + 8px);
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 8px;
    overflow: visible;
    clip-path: none;
    background: var(--card-bg);
    border: 1px solid var(--rule-card);
    box-shadow: var(--shadow-card);
    font: 500 9px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .rail__link:hover .rail__name,
  .rail__link:focus-visible .rail__name { opacity: 1; }
}

/* --- Scroller & sections -------------------------------------------------- */

/* Sections align flush with the viewport top; their own top padding
   (>= 74px) clears the 54px masthead floating above them. */

.hero,
.system,
.sources {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
}

.system,
.sources { border-top: 1px solid var(--rule); }

/* Snap only where sections reliably fit the viewport. On stacked/short
   layouts a section is taller than the screen, and snapping traps scroll. */
@media (min-width: 860px) and (min-height: 620px) {
  html { scroll-snap-type: y proximity; }
  [data-sec] { scroll-snap-align: start; }
}

/* --- 00 Hero -------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(40px, 7vh, 80px) clamp(56px, 8vw, 132px);
}

/* Bled 30px past the top and bottom edges so the parallax shift can never
   expose a seam between the plate panel and the paper behind it. */
.hero__plate {
  position: absolute;
  inset: -30px 0 -30px auto;
  width: min(54%, 640px);
  background: var(--plate-bg);
  will-change: transform;
}

.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(96deg,
    var(--wash-a) 0%,
    var(--wash-a) 40%,
    var(--wash-b) 50%,
    var(--wash-c) 72%,
    var(--wash-d) 100%);
}

.hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 30px);
  width: min(620px, 100%);
}

.hero__eyebrow,
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.hero__class,
.hero__count,
.hero__meta span {
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.hero__class {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--rev-accent);
}
.hero__count {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--rev-mono);
}

.hero__title {
  font: 400 clamp(46px, 9.5vw, 132px)/.92 var(--font-display);
  letter-spacing: -.02em;
  color: var(--rev-ink);
  text-wrap: balance;
}

.hero__lede {
  max-width: 56ch;
  font: 400 clamp(15px, 1.3vw, 19px)/1.6 var(--font-body);
  color: var(--rev-body);
  text-wrap: pretty;
}

.hero__meta {
  gap: 10px 26px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
}
.hero__meta span {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .16em;
  color: var(--rev-hint);
}

.hero__hint {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--rev-accent), transparent);
  animation: hint-drop 2.4s ease-in-out infinite;
}

@media (min-width: 860px) {
  .hero__body { max-width: 52%; }
}

/* Below the two-column breakpoint the copy spans the full width, so it would
   otherwise run off the dark side of the wash and onto the bare plate. Lay a
   vertical scrim under it and keep the designed horizontal wash on top. */
@media (max-width: 859px) {
  .hero__wash {
    background:
      linear-gradient(180deg,
        rgba(16, 12, 10, .45) 0%,
        rgba(16, 12, 10, .82) 42%,
        rgba(16, 12, 10, .95) 100%),
      linear-gradient(96deg,
        var(--wash-a) 0%,
        var(--wash-a) 40%,
        var(--wash-b) 50%,
        var(--wash-c) 72%,
        var(--wash-d) 100%);
  }
}

@media (max-width: 520px) {
  .masthead__edition { display: none; }
}

/* --- Contents ------------------------------------------------------------- */

.contents {
  padding: clamp(46px, 7vh, 76px) var(--pad-right) clamp(46px, 7vh, 76px) var(--pad-left);
  border-top: 1px solid var(--rule);
}

.contents__head {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.contents__cols {
  display: grid;
  gap: 4px clamp(24px, 5vw, 72px);
  max-width: 1100px;
}
@media (min-width: 780px) {
  .contents__cols { grid-template-columns: 1fr 1fr; align-items: start; }
}

.contents__list { margin: 0; padding: 0; list-style: none; }

.contents__group {
  padding: 14px 0 8px;
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-caption);
  border-bottom: 1px solid var(--rule);
}
.contents__group--gap { padding-top: 26px; }

.contents__list a {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 2px 10px;
  padding: 11px 4px 11px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background .25s ease;
}
.contents__list a:hover { background: var(--accent-wash); }

.contents__n {
  grid-row: span 2;
  font: 500 9px/1.9 var(--font-mono);
  letter-spacing: .14em;
  color: var(--ink-caption);
  transition: color .25s ease;
}
.contents__list a:hover .contents__n { color: var(--accent); }

.contents__name {
  font: 400 clamp(17px, 1.6vw, 21px)/1.2 var(--font-display);
  color: var(--ink);
}

.contents__note {
  font: 400 12.5px/1.45 var(--font-body);
  color: var(--ink-label);
  text-wrap: pretty;
}

.contents__hint {
  margin: clamp(20px, 3vh, 30px) 0 0;
  font: 400 10px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-caption);
}
.contents__hint kbd {
  font: 500 10px/1 var(--font-mono);
  border: 1px solid var(--rule-strong);
  padding: 3px 5px;
  color: var(--ink-label);
}

/* --- 01–06 System sections ------------------------------------------------ */

.system {
  display: grid;
  gap: var(--col-gap);
  align-items: center;
}

@media (min-width: 860px) {
  .system { grid-template-columns: 1fr 1fr; }
  /* Prose stays first in the DOM for reading order; desktop flips it right. */
  .system--flip .system__prose { order: 2; }
}

.system__prose {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 26px);
  min-width: 0;
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.eyebrow__system {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow__latin {
  font: 400 italic 14px/1 var(--font-display);
  color: var(--ink-label);
}

.badge {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 4px 7px;
}

.system__title {
  font: 400 clamp(30px, 4.2vw, 58px)/1.04 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.system__text {
  max-width: 52ch;
  font: 400 clamp(14.5px, 1.15vw, 17px)/1.68 var(--font-body);
  color: var(--ink-body);
  text-wrap: pretty;
}

/* Reading-level registers */
[data-reading="plain"]    .system__text[data-register="clinical"] { display: none; }
[data-reading="clinical"] .system__text[data-register="plain"]    { display: none; }

/* Key figures */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  border-top: 1px solid var(--rule-mid);
  padding-top: 16px;
}

.figures__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.figures__value {
  font: 400 clamp(24px, 2.6vw, 38px)/1 var(--font-mono);
  letter-spacing: -.03em;
  color: var(--ink);
}

.figures__label {
  margin: 0;
  font: 500 9px/1.35 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-label);
}

.source {
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-caption);
}

/* --- Plates --------------------------------------------------------------- */

.plate-wrap {
  position: relative;
  min-width: 0;
}

.plate {
  position: relative;
  aspect-ratio: 4 / 5;
  width: min(100%, calc(54svh * .8));
  margin-inline: auto;
  background: var(--plate-bg);
  border: 1px solid var(--plate-rule-strong);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
  will-change: transform;
}

.plate--bare {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.plate__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.plate__img.is-loaded { opacity: 1; }

/* Scanned plates usually carry a white page ground, which reads as a bright
   card sitting on the cream stock. Multiply drops it into the paper so the
   line work looks printed on it. The hero is excluded — it sits under the
   dark wash and needs its own tonality. */
.plate:not(.plate--bare) .plate__img {
  mix-blend-mode: multiply;
}

/* Whole-figure and landscape plates sit inside the frame with a paper margin
   rather than being cropped to fill it. */
.plate__img--contain {
  inset: 5%;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* Empty state: an engraved-paper placeholder, not a broken box. */
.plate__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12%;
  text-align: center;
}
/* Author `display` beats the UA rule for [hidden], so restate it — otherwise
   the hatch and brief show through any plate with a transparent background. */
.plate__placeholder[hidden] { display: none; }
.plate__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(28, 25, 23, .055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(28, 25, 23, .045) 0 1px, transparent 1px 11px);
}
.plate__placeholder::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(28, 25, 23, .14);
}
.plate__placeholder span {
  position: relative;
  max-width: 26ch;
  font: 400 10px/1.7 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plate-ink-mute);
  text-wrap: balance;
}

.plate__credit {
  display: block;
  margin-top: 6px;
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-caption);
}
.plate__credit a { color: inherit; }

.plate-wrap__caption {
  display: block;
  margin-top: 9px;
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-caption);
}

/* --- Hotspot annotations -------------------------------------------------- */

.hotspot {
  position: absolute;
  top: var(--y);
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hotspot--left  { left: var(--x);  flex-direction: row;         text-align: left; }
.hotspot--right { right: var(--x); flex-direction: row-reverse; text-align: right; }

.hotspot:hover,
.hotspot:focus-visible,
.hotspot.is-active { z-index: 6; }

.hotspot__dot {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--plate-dot);
  animation: pulse-ring 3s ease-in-out infinite;
  transition: background .3s ease;
}
/* Enlarged pointer target around the 9px dot */
.hotspot__dot::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}

.hotspot__leader {
  flex: 0 0 auto;
  width: clamp(14px, 3vw, 40px);
  height: 1px;
  background: var(--plate-mid);
}

.hotspot__card {
  width: min(58%, 188px);
  padding: 8px 11px;
  background: var(--plate-card);
  border: 1px solid var(--plate-card-edge);
  box-shadow: var(--shadow-card);
}

/* Cards and leaders never take pointer input — only the dot is the target,
   so an invisible card can't swallow hovers meant for the plate. */
.hotspot__leader,
.hotspot__card {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.hotspot__index {
  display: block;
  margin-bottom: 5px;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--plate-accent);
}
.hotspot__name {
  display: block;
  font: 600 12px/1.25 var(--font-body);
  color: var(--plate-ink);
}
.hotspot__note {
  display: block;
  margin-top: 4px;
  font: 400 11px/1.42 var(--font-body);
  color: var(--plate-ink-soft);
}

/* Annotation patterns: resting state of every marker on the page. */
[data-annotations="leaders"] .hotspot__leader,
[data-annotations="leaders"] .hotspot__card { opacity: 1; }

[data-annotations="dim"] .hotspot__leader,
[data-annotations="dim"] .hotspot__card { opacity: .34; }

[data-annotations="leaders"] .hotspot__dot,
[data-annotations="dim"]     .hotspot__dot { background: var(--plate-accent); }

/* Engaged state, in every pattern. */
.hotspot:hover .hotspot__leader,
.hotspot:hover .hotspot__card,
.hotspot:focus-visible .hotspot__leader,
.hotspot:focus-visible .hotspot__card,
.hotspot.is-active .hotspot__leader,
.hotspot.is-active .hotspot__card { opacity: 1; }

.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot,
.hotspot.is-active .hotspot__dot { background: var(--plate-accent); }

/* --- 07 Sources ----------------------------------------------------------- */

.sources {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
}

.sources__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 22px);
  max-width: 820px;
}

.sources__title {
  font: 400 clamp(28px, 4vw, 54px)/1.05 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.sources__lede {
  max-width: 56ch;
  font: 400 clamp(14.5px, 1.15vw, 17px)/1.68 var(--font-body);
  color: var(--ink-body);
  text-wrap: pretty;
}

.biblio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  max-width: 1100px;
  border-top: 1px solid var(--rule-strong);
}

.biblio__item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.biblio__num {
  flex: 0 0 auto;
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .14em;
  color: var(--accent);
}

.biblio__ref {
  font: 400 13px/1.55 var(--font-body);
  color: var(--ink-body);
}
.biblio__ref cite {
  font-style: italic;
  color: var(--ink);
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-caption);
}

.colophon a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-edge);
}
.colophon a:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}

.colophon__top {
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-edge-strong);
  padding-bottom: 2px;
}
.colophon__top:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}

/* --- Search --------------------------------------------------------------- */

.search-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 9px 6px 11px;
  min-height: 30px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-label);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.search-trigger:hover { color: var(--ink); border-color: var(--rule-card); }
.search-trigger kbd {
  font: 500 9px/1 var(--font-mono);
  color: var(--ink-caption);
  border: 1px solid var(--rule);
  padding: 3px 5px;
}

/* A modal <dialog>: reset the UA's centred, auto-sized, bordered box and let
   it fill the viewport so the dimmed area is part of the dialog itself. */
.search[open] {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(48px, 12vh, 130px) clamp(14px, 4vw, 32px) 24px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.search::backdrop {
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.search__panel {
  position: relative;
  width: min(660px, 100%);
  max-height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--rule-card);
  box-shadow: 0 30px 80px var(--card-shadow-deep);
}

.search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--rule-mid);
}

.search__prompt {
  font: 500 14px/1 var(--font-mono);
  color: var(--accent);
}

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 17px 0;
  font: 400 16px/1.2 var(--font-body);
  color: var(--ink);
  outline: none;
}
.search__input::placeholder { color: var(--ink-caption); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__close {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  background: none;
  padding: 5px 7px;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--ink-caption);
  cursor: pointer;
}
.search__close:hover { color: var(--ink); }

.search__status {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-caption);
  min-height: 27px;
}

.search__results {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search__empty {
  padding: 22px 16px;
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--ink-label);
}

.search__result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.search__result.is-active { background: var(--accent-wash); }
.search__result.is-active .search__kind { color: var(--accent); }

.search__kind {
  flex: 0 0 4.6rem;
  font: 500 8.5px/1.6 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-caption);
}

.search__body { min-width: 0; }

.search__label {
  display: block;
  font: 600 13.5px/1.35 var(--font-body);
  color: var(--ink);
}

.search__detail {
  display: block;
  margin-top: 2px;
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-label);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search mark {
  background: var(--mark-bg);
  color: inherit;
  padding: 0 1px;
}

@media (max-width: 560px) {
  .search-trigger span { display: none; }
  .search-trigger { padding: 6px 9px; }
  .search__kind { flex-basis: 3.6rem; }
}

/* --- Sense of scale ------------------------------------------------------- */

/* Bars are drawn strictly in proportion to their values, so a comparison
   can't flatter itself. The site quantity is accent, the familiar object ink. */

.scale {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--rule-mid);
  padding-top: 14px;
}

.scale__head {
  margin: 0 0 2px;
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.scale__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) 1fr auto;
  align-items: center;
  gap: 10px;
}

.scale__label {
  font: 400 10.5px/1.35 var(--font-body);
  color: var(--ink-label);
}

.scale__track {
  position: relative;
  height: 7px;
  background: rgba(28, 25, 23, .08);
  overflow: hidden;
}

.scale__fill {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(28, 25, 23, .42);
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}
.scale__row[data-accent] .scale__fill { background: var(--accent); }

.scale__val {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
}

.scale__note {
  margin: 4px 0 0;
  font: 400 11.5px/1.6 var(--font-body);
  color: var(--ink-label);
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .scale__row { grid-template-columns: 1fr auto; }
  .scale__track { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .scale__fill { transition: none; }
}

/* --- Connections ---------------------------------------------------------- */

/* Content-driven height rather than the 100svh of a system section: six cards
   will always exceed a viewport, and snapping is `proximity`, so a tall
   section is not a problem here. */
.connections {
  padding: var(--pad-top) var(--pad-right) clamp(56px, 9vh, 96px) var(--pad-left);
  border-top: 1px solid var(--rule);
}

.connections__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 22px);
  max-width: 880px;
  margin-bottom: clamp(34px, 5vh, 60px);
}

.connections__title {
  margin: 0;
  font: 400 clamp(28px, 4vw, 54px)/1.05 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.connections__lede {
  margin: 0;
  max-width: 62ch;
  font: 400 clamp(14.5px, 1.15vw, 17px)/1.68 var(--font-body);
  color: var(--ink-body);
  text-wrap: pretty;
}

.links {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 1240px;
}
@media (min-width: 900px) {
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.link {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--rule-strong);
  background: var(--card-bg);
  min-width: 0;
}

/* System chips double as cross-links, so a connection is a way into either
   system it joins rather than a dead end. */
.link__systems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--rule-strong);
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-label);
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.chip:hover {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: var(--accent-wash);
}
.chip__n { color: var(--accent); }

/* Card diagrams sit on the plate ground and use the plate token family, so
   they stay legible in dark mode for the same reason the engravings do. */
.link__dgm {
  background: var(--plate-bg);
  border: 1px solid var(--plate-rule-strong);
  padding: 10px 12px;
  margin-bottom: 2px;
}

.mini { display: block; width: 100%; height: auto; }

.mini text {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--plate-ink-mute);
}
.mini__label--key { fill: var(--plate-ink); font-weight: 500; }
/* A presentation attribute cannot win against `.mini text`, so anchoring
   overrides have to come through classes. */
/* These have to out-specify `.mini text` (0,1,1) — a bare class is (0,1,0)
   and silently loses, so the overrides never applied.

   The unit opt-out is not cosmetic: `text-transform: uppercase` maps the
   micro sign to Greek capital Mu, which paints as "MM" and turns micrometres
   into millimetres. Any label carrying a case-sensitive unit must opt out. */
.mini text.mini__label--unit  { text-transform: none; letter-spacing: .04em; }
.mini text.mini__label--start { text-anchor: start; }
.mini text.mini__label--end   { text-anchor: end; }

.mini__base  { fill: none; stroke: var(--plate-rule-strong); stroke-width: 1; }
.mini__quiet { fill: none; stroke: var(--plate-ink-faint); stroke-width: 1; color: var(--plate-ink-faint); }
.mini__ink   { fill: none; stroke: var(--plate-ink); stroke-width: 1.2; }
.mini__key   { fill: none; stroke: var(--plate-accent); stroke-width: 1.8; stroke-linecap: round; color: var(--plate-accent); }
.mini__nerve { fill: none; stroke: var(--plate-accent); stroke-width: 1.4; color: var(--plate-accent); }
.mini__dot   { fill: var(--plate-accent); stroke: none; }
.mini__cut   { stroke: var(--plate-bg); stroke-width: 4; }

.link__title {
  margin: 0;
  font: 400 clamp(20px, 2vw, 27px)/1.18 var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

.link__text {
  margin: 0;
  font: 400 14px/1.62 var(--font-body);
  color: var(--ink-body);
  text-wrap: pretty;
}

.link__figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 2px 0 0;
  border-top: 1px solid var(--rule-mid);
  padding-top: 13px;
}

.link__value {
  flex: 0 0 auto;
  font: 400 clamp(22px, 2.2vw, 30px)/1 var(--font-mono);
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.link__value sup { font-size: .58em; }

.link__unit {
  font-size: .5em;
  letter-spacing: .06em;
  color: var(--ink-label);
  margin-left: 2px;
}

.link__label {
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-label);
}

.link .source { margin-top: auto; padding-top: 4px; }

/* --- Part break ----------------------------------------------------------- */

.part-break {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(70px, 12vh, 130px) var(--pad-right) clamp(70px, 12vh, 130px) var(--pad-left);
  border-top: 1px solid var(--rule);
  text-align: center;
  align-items: center;
}

.part-break__label {
  margin: 0;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.part-break__title {
  margin: 0;
  font: 400 clamp(30px, 5vw, 66px)/1.04 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.part-break__note {
  margin: 0;
  max-width: 60ch;
  font: 400 clamp(13.5px, 1.05vw, 15.5px)/1.7 var(--font-body);
  color: var(--ink-label);
  text-wrap: pretty;
}

/* --- Conditions ----------------------------------------------------------- */

.condition {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  gap: var(--col-gap);
  align-items: center;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
  border-top: 1px solid var(--rule);
}

@media (min-width: 860px) {
  .condition {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "prose mech" "flags mech";
    align-content: center;
  }
  .condition .system__prose { grid-area: prose; align-self: end; }
  .condition .mechanism     { grid-area: mech; }
  .condition .redflags      { grid-area: flags; align-self: start; }

  .condition--flip {
    grid-template-areas: "mech prose" "mech flags";
  }
}

/* --- Mechanism diagram ---------------------------------------------------- */

.mechanism {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.mechanism__figure {
  margin: 0;
  background: var(--plate-bg);
  border: 1px solid var(--plate-rule-strong);
  box-shadow: var(--shadow-plate);
  padding: 14px 14px 10px;
}

.mechanism__caption {
  display: block;
  margin-top: 8px;
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plate-ink-mute);
}

.dgm { display: block; width: 100%; height: auto; }

.dgm text { font-family: var(--font-mono); text-anchor: middle; }

.dgm__base { fill: none; stroke: var(--plate-rule-strong); stroke-width: 1; }
.dgm__axis {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--plate-ink-mute);
  text-anchor: start;
}
.dgm__axis--end { text-anchor: end; }

/* Every layer sits quiet until its step is current. */
.dgm__layer {
  fill: none;
  stroke: var(--plate-ink-faint);
  stroke-width: 1;
  opacity: .38;
  transition: opacity .45s ease, stroke .45s ease;
}
.dgm__layer.is-current { opacity: 1; stroke: var(--plate-ink); }

.dgm__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--plate-ink);
  stroke: none;
}
.dgm__label--sm { font-size: 8.5px; }
.dgm__label--rot { font-size: 8px; }
.dgm__mute {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--plate-ink-mute);
  stroke: none;
}

.dgm__hatch, .dgm__gyri { stroke: var(--plate-hatch); stroke-width: .8; }
.dgm__vessel, .dgm__nerve, .dgm__tube, .dgm__cord { stroke-width: 1.2; }
.dgm__arrow { stroke-width: 1.4; stroke-dasharray: 4 3; color: var(--plate-accent); }

.is-current .dgm__vessel,
.is-current .dgm__nerve,
.is-current .dgm__arrow,
.is-current .dgm__stretch { stroke: var(--plate-accent); }

.is-current .dgm__node,
.is-current .dgm__virus,
.is-current .dgm__focus { fill: var(--plate-accent); stroke: var(--plate-accent); }

.dgm__node, .dgm__virus, .dgm__focus { fill: var(--plate-mid); }
.dgm__focus { fill: none; stroke-width: 1.6; }
.dgm__stretch { stroke-dasharray: 5 4; }

/* Congestion: the veins actually swell when the step is reached. */
.dgm__vein { transition: transform .55s cubic-bezier(.2, .7, .2, 1); transform-origin: center; transform-box: fill-box; }
.is-current .dgm__vein { transform: scale(1.32); fill: rgba(143, 29, 20, .14); }

/* --- Mechanism steps ------------------------------------------------------ */

.mechanism__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-mid);
}

.mechanism__step {
  display: flex;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--rule);
  font: 400 13px/1.55 var(--font-body);
  color: var(--ink-label);
  cursor: pointer;
  opacity: .5;
  transition: opacity .35s ease, color .35s ease, background .35s ease;
}
.mechanism__step:hover { opacity: .8; }
.mechanism__step.is-current {
  opacity: 1;
  color: var(--ink-body);
  background: var(--step-on);
}
.mechanism__step b { color: var(--ink); font-weight: 600; }

.mechanism__n {
  flex: 0 0 auto;
  font: 500 9px/1.9 var(--font-mono);
  letter-spacing: .14em;
  color: var(--ink-caption);
  transition: color .35s ease;
}
.mechanism__step.is-current .mechanism__n { color: var(--accent); }

/* --- Red flags ------------------------------------------------------------ */

.redflags {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
  min-width: 0;
}

.redflags__head {
  margin: 0 0 8px;
  font: 500 9.5px/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.redflags__list {
  margin: 0;
  padding: 0 0 0 15px;
  font: 400 12.5px/1.6 var(--font-body);
  color: var(--ink-body);
}
.redflags__list li { margin-bottom: 3px; }

.redflags__src {
  margin: 9px 0 0;
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-caption);
}

/* --- Depth ---------------------------------------------------------------- */

/* Registering these as typed properties is what lets the tilt transition
   smoothly back to rest. Untyped custom properties animate as strings, i.e.
   they snap. Unsupported browsers just skip the easing. */
@property --rx   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --ry   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

.plate-wrap { perspective: 1400px; }

/* Parallax writes --py, the tilt writes --rx/--ry/--lift, and they compose
   here rather than overwriting each other on the style attribute. */
.plate,
.hero__plate {
  transform:
    translate3d(0, var(--py, 0px), var(--lift, 0px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
}

/* No `preserve-3d` here: the plate clips with `overflow: hidden`, which forces
   a flat grouping context regardless. The tilt still reads correctly because
   the perspective comes from .plate-wrap and applies to the plate as a whole —
   a sheet of paper turning, which is the intended effect anyway. */
.plate:not(.plate--bare) {
  transition:
    --rx .5s cubic-bezier(.2, .7, .2, 1),
    --ry .5s cubic-bezier(.2, .7, .2, 1),
    --lift .5s cubic-bezier(.2, .7, .2, 1),
    box-shadow .5s cubic-bezier(.2, .7, .2, 1);
}

/* While the pointer is driving it, easing would only add lag. */
.plate.is-tilting {
  transition: box-shadow .5s cubic-bezier(.2, .7, .2, 1);
}

.plate:not(.plate--bare):hover {
  box-shadow:
    0 34px 70px rgba(28, 25, 23, .26),
    0 4px 14px rgba(28, 25, 23, .10);
}

/* --- Enlarge affordance --------------------------------------------------- */

.plate.is-openable::after {
  content: "Click to enlarge";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  padding: 5px 9px;
  background: rgba(28, 25, 23, .82);
  color: #f3eee2;
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.plate.is-openable:hover::after { opacity: 1; }

/* The keyboard route to the same thing. */
.plate-enlarge {
  display: inline-block;
  margin-top: 6px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent-edge-strong);
  color: var(--accent);
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.plate-enlarge:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(44px, 7vh, 76px) clamp(16px, 4vw, 56px);
  background: rgba(18, 14, 12, .93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--plate-bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform-origin: center;
  will-change: transform;
  cursor: zoom-in;
}
.lightbox[data-zoomed="true"] .lightbox__img { cursor: grab; }
.lightbox[data-zoomed="true"] .lightbox__img:active { cursor: grabbing; }

.lightbox__caption,
.lightbox__hint {
  flex: 0 0 auto;
  max-width: 80ch;
  margin: 0;
  text-align: center;
  font: 400 9.5px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b0a696;
}
.lightbox__hint { color: #7d7367; }

.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vh, 22px);
  right: clamp(12px, 3vw, 28px);
  padding: 8px 12px;
  background: none;
  border: 1px solid rgba(243, 238, 226, .3);
  color: #f3eee2;
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lightbox__close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Cursors -------------------------------------------------------------- */

/*
  A specimen reticle rather than an arrow — it reads as a dissection pointer
  and marks its own hotspot, which is honest about where the click lands.

  Every cursor is drawn twice: a wide near-black halo underneath, a fine cream
  core on top. That is what keeps it legible on the cream paper AND on the
  near-black hero, where a single-tone cursor would vanish over one or the
  other. The accent dot sits at the exact hit point.

  Mouse only. Coarse pointers have no cursor to style, and every rule carries
  a keyword fallback in case the SVG is refused.
*/

@media (hover: hover) and (pointer: fine) {

  /* Default — fine crosshair with a gap at the centre for precision. */
  body {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M12 1.5V8.5M12 15.5V22.5M1.5 12H8.5M15.5 12H22.5' stroke='%231c1917' stroke-width='2.9' opacity='.75'/%3E%3Cpath d='M12 1.5V8.5M12 15.5V22.5M1.5 12H8.5M15.5 12H22.5' stroke='%23f3eee2' stroke-width='1.5'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%238f1d14' stroke='%23f3eee2' stroke-width='.9'/%3E%3C/svg%3E")
      12 12, crosshair;
  }

  /* Actionable — the reticle gains a ring, echoing the marker pulse. */
  a,
  button,
  .hotspot,
  .rail__link,
  .toggle__btn,
  [role="button"] {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M14 1.5V7M14 21V26.5M1.5 14H7M21 14H26.5' stroke='%231c1917' stroke-width='2.9' opacity='.75'/%3E%3Ccircle cx='14' cy='14' r='5.4' stroke='%231c1917' stroke-width='2.9' opacity='.75'/%3E%3Cpath d='M14 1.5V7M14 21V26.5M1.5 14H7M21 14H26.5' stroke='%23f3eee2' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='5.4' stroke='%23f3eee2' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='1.8' fill='%238f1d14' stroke='%23f3eee2' stroke-width='.9'/%3E%3C/svg%3E")
      14 14, pointer;
  }

  /* Plates — registration marks, as though framing a specimen. */
  .plate,
  .hero__plate {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M4.5 10V4.5H10M22 4.5H27.5V10M27.5 22V27.5H22M10 27.5H4.5V22M16 11.5V14M16 18V20.5M11.5 16H14M18 16H20.5' stroke='%231c1917' stroke-width='2.9' opacity='.75'/%3E%3Cpath d='M4.5 10V4.5H10M22 4.5H27.5V10M27.5 22V27.5H22M10 27.5H4.5V22M16 11.5V14M16 18V20.5M11.5 16H14M18 16H20.5' stroke='%23f3eee2' stroke-width='1.45'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.3' fill='%238f1d14'/%3E%3C/svg%3E")
      16 16, crosshair;
  }

  /* Prose keeps the I-beam — citations and figures are meant to be copied. */
  .masthead__title,
  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero__meta,
  .eyebrow,
  .system__title,
  .system__text,
  .figures,
  .source,
  .sources__title,
  .sources__lede,
  .biblio,
  .plate-wrap__caption,
  .colophon {
    cursor: text;
  }
}

/* --- Motion --------------------------------------------------------------- */

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(143, 29, 20, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(143, 29, 20, .05); }
}

@keyframes hint-drop {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Reveal-on-scroll is opt-in: without JS every section renders in place. */
[data-js][data-motion="full"] [data-reveal],
[data-js][data-motion="reveal-only"] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
              transform .8s cubic-bezier(.2, .7, .2, 1);
}

[data-js] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-js] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .plate,
  .hero__plate { transform: none !important; }
  .plate.is-openable::after { transition: none; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .masthead, .rail, .skip-link, .hero__hint { display: none; }
  .hero, .system, .sources { min-height: 0; padding: 24px 0; page-break-inside: avoid; }
  .hero__wash { background: none; }
  .hero__title, .hero__lede, .hero__class, .hero__count, .hero__meta span { color: var(--ink); }
  .hotspot__leader, .hotspot__card { opacity: 1 !important; }
  body { background: #fff; }
}

/* --- Dark mode ------------------------------------------------------------ */

/*
  Driven entirely by the reader's OS setting. Only the page family flips; the
  plate family above is deliberately left alone, so the engravings and the
  diagram line work stay legible on their pale stock and read as lit specimen
  cards against the dark ground. Inverting them would either wreck the
  artwork or make every diagram label disappear.

  The ground is a warm near-black rather than pure black — this is a paper
  design, and #000 would read as a different product. The accent lifts from
  #8f1d14 to #d2544a, because the deep oxblood fails contrast on a dark field.
*/

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #17130f;
    --card-bg:      #221c17;

    --ink:          #ede6d8;
    --ink-body:     #c4bbab;
    --ink-note:     #b3aa99;
    --ink-label:    #9c9382;
    /* Measured against the *card* ground (--card-bg), not the page: cards are
       lighter, so #8b8272 dropped to 4.44:1 on a connection card's source
       line while still passing on the page behind it. */
    --ink-caption:  #918879;
    /* Not darker than the light-mode rail — on a dark ground the dimmest step
       of the scale still has to clear AA at 9px. */
    --ink-rail:     #8b8272;

    /* #d2544a measured 4.49:1 here, just under AA. This is the hero's
       reversed accent, already in the palette, and clears it comfortably. */
    --accent:       #e0655a;
    --accent-hi:    #ef8074;
    --on-accent:    #1a1512;

    --rule:         rgba(237, 230, 216, .12);
    --rule-mid:     rgba(237, 230, 216, .16);
    --rule-strong:  rgba(237, 230, 216, .2);
    --rule-card:    rgba(237, 230, 216, .28);
    --shadow-plate: 0 18px 46px rgba(0, 0, 0, .55);
    --shadow-card:  0 10px 26px rgba(0, 0, 0, .5);

    --scrim-top:    rgba(23, 19, 15, .97);
    --scrim-mid:    rgba(23, 19, 15, .86);
    --scrim-zero:   rgba(23, 19, 15, 0);
    --rail-bg:      rgba(23, 19, 15, .86);
    --rail-edge:    rgba(237, 230, 216, .1);
    --glow-a:       rgba(150, 122, 74, .1);
    --glow-b:       rgba(120, 96, 60, .08);
    --edition:      #8b8272;
    --step-on:      rgba(237, 230, 216, .06);
    --card-shadow-deep: rgba(0, 0, 0, .7);
    --overlay-scrim: rgba(6, 4, 3, .72);
    --accent-edge:  rgba(224, 101, 90, .42);
    --accent-edge-strong: rgba(224, 101, 90, .5);
    --accent-wash:  rgba(224, 101, 90, .1);
    --mark-bg:      rgba(224, 101, 90, .26);
  }
}