/* Fonts are self-hosted rather than pulled from Google. Three reasons: no
   render-blocking third-party request, no third-party font request logging the
   IP of every EU reader, and the register's type is load-bearing enough that it
   should not depend on someone else's CDN. 164 KB total, cached for a year. */
@font-face { font-family: 'Plex Serif'; src: url('/assets/fonts/plex-serif-400.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Serif'; src: url('/assets/fonts/plex-serif-400i.woff2') format('woff2'); font-weight: 400; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Plex Serif'; src: url('/assets/fonts/plex-serif-600.woff2')  format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Serif'; src: url('/assets/fonts/plex-serif-700.woff2')  format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Cond';  src: url('/assets/fonts/plex-cond-600.woff2')   format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Cond';  src: url('/assets/fonts/plex-cond-700.woff2')   format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono';  src: url('/assets/fonts/plex-mono-400.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono';  src: url('/assets/fonts/plex-mono-500.woff2')   format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ============================================================
   Anomaly Registry
   The material of this subject is the printout: 1970s continuous-feed
   greenbar paper, machine type, and a human marking it up in red pen.
   Every colour below comes from that. Nothing here is atmospheric.
   ============================================================ */

/* ============================================================
   The register opens dark. This is a night archive: people read this material
   at one in the morning, and that is the actual reading condition rather than
   an edge case. The manila ledger is the reading-lamp alternative, offered
   rather than defaulted to.

   Dark grounds also let colour carry. The status inks below would be garish on
   white; here they sing, and they still clear WCAG AA.
   ============================================================ */

:root {
  --paper:      #1B1710;
  --bar:        #2C2519;
  --bar-hover:  #362D1F;
  --ink:        #EFE8D8;
  --ink-soft:   #B7AC94;
  --ink-faint:  #979182;
  --rule:       #443A2A;
  --rule-soft:  #332C20;
  --stamp:      #FF6A4D;
  --pen:        #7FB2FF;
  --signal:     #FFB454;

  --s-unsolved:  #FFC96B;
  --s-partially: #7FB2FF;
  --s-later:     #5FD9A0;
  --s-debunked:  #FF8A73;

  --serif: 'Plex Serif', Georgia, serif;
  --cond:  'Plex Cond', 'Helvetica Neue', sans-serif;
  --mono:  'Plex Mono', ui-monospace, monospace;

  --wide: 1180px;
  --prose: 40rem;

  color-scheme: dark;
}

/* The manila ledger. Chosen, not defaulted to. */
:root[data-theme="light"] {
  --paper:      #EAE1CE;   /* manila stock */
  --bar:        #DACFB4;   /* the ruled band */
  --bar-hover:  #D0C4A5;
  --ink:        #201B11;
  --ink-soft:   #4B4230;
  --ink-faint:  #5D5748;
  --rule:       #C3B392;
  --rule-soft:  #D3C7A9;
  --stamp:      #9B2A15;   /* the archivist's red pen */
  --pen:        #254DB1;
  --signal:     #8A5A08;

  --s-unsolved:  #6E5312;
  --s-partially: #254DB1;
  --s-later:     #266244;
  --s-debunked:  #A12F1F;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.prose-wrap { max-width: var(--prose); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--stamp); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Field labels: the vernacular of a form ---------- */
.label {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .72rem;
  color: var(--ink-faint);
}

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.masthead .wrap {
  display: flex; align-items: baseline; gap: 2rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--stamp); }

.nav { margin-left: auto; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--cond);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--stamp); }

/* ---------- Finding aid: the statement of scope ---------- */
.finding-aid { padding: 3.4rem 0 2.2rem; border-bottom: 1px solid var(--rule-soft); }
.finding-aid h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -.012em;
  margin: .45rem 0 1rem;
  max-width: 24ch;
}
.finding-aid p { max-width: 56ch; color: var(--ink-soft); margin: 0 0 .9rem; }
.finding-aid .tally {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 1.4rem;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
}
.finding-aid .tally b { font-weight: 500; color: var(--ink); }

/* ---------- The register: greenbar ---------- */
.register-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 2.6rem 0 .9rem;
}
.register-head h2 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .84rem;
  font-weight: 700;
  margin: 0;
}

.register {
  width: 100%;
  border-collapse: collapse;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  font-size: .95rem;
}
.register th {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .69rem;
  color: var(--ink-faint);
  text-align: left;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.register td {
  padding: .72rem .75rem;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule-soft);
}
/* This is the signature: the alternating bands of continuous-feed paper.
   Applied as a class, not nth-child, so that filtering can re-stripe the
   visible rows. With nth-child, hidden rows still count and the bands break. */
.register tbody tr.bar { background: var(--bar); }
.register tbody tr:hover { background: var(--bar-hover); }

.register .c-rec { width: 6.5rem; }
.register .c-era { width: 8rem; }
.register .c-status { width: 13.5rem; }

.rec {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: .02em;
  white-space: nowrap;
}
.era { font-family: var(--mono); font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }

.register .title a { text-decoration: none; font-weight: 600; }
.register .title a:hover { text-decoration: underline; text-decoration-color: var(--stamp); }
.register .title .hook {
  display: block;
  font-size: .86rem;
  color: var(--ink-soft);
  margin-top: .18rem;
  max-width: 62ch;
}
.register tr.pending .title { color: var(--ink-faint); font-weight: 600; }
.register tr.pending .pending-note {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .66rem;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  padding: .08rem .35rem;
  margin-left: .5rem;
  white-space: nowrap;
}

/* ---------- Status: ink, not UI ---------- */
.status {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .71rem;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .42rem;
}
.status::before {
  content: ""; width: .52rem; height: .52rem;
  background: currentColor; flex: none;
}
.status.s-unsolved            { color: var(--s-unsolved); }
.status.s-partially-explained { color: var(--s-partially); }
.status.s-later-explained     { color: var(--s-later); }
.status.s-debunked            { color: var(--s-debunked); }

/* ---------- The annotation. Used once, on the homepage. ----------
   The note must sit against the thing it annotates. Floated to the bottom of
   the table it reads as a stray red sentence; in the cell it reads as a hand
   in the margin, which is the whole idea. */
.annotated { position: relative; display: inline-block; }
.annot-svg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 168px; height: 44px;
  overflow: visible;
  pointer-events: none;
}
.annot-svg path {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: .85;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.1s .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.annot-note {
  display: block;
  font-family: var(--cond);
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--stamp);
  padding-left: .8rem;
  border-left: 1.5px solid var(--stamp);
  margin-top: 1.5rem;   /* clear the circle, which overhangs the status */
  opacity: 0;
  animation: fade .7s 1.4s ease forwards;
}
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .annot-svg path { animation: none; stroke-dashoffset: 0; }
  .annot-note { animation: none; opacity: 1; }
}

/* ---------- Filters ---------- */
.filters { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.filters a {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .7rem;
  text-decoration: none;
  padding: .3rem .6rem;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: var(--paper);
}
.filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Category grid ---------- */
.cats { padding: 3.2rem 0; border-top: 1px solid var(--rule-soft); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 1.2rem;
}
.cat-grid a {
  background: var(--paper);
  padding: 1.15rem 1.25rem 1.35rem;
  text-decoration: none;
  display: flex; flex-direction: column;
}
.cat-grid a:hover { background: var(--bar); }
.cat-grid h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  margin: .35rem 0 .4rem;
  line-height: 1.3;
}
.cat-grid p { font-size: .86rem; color: var(--ink-soft); margin: 0; }
.cat-grid .n { font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); }

/* ---------- Case page ---------- */
.case-head { padding: 2.6rem 0 1.6rem; border-bottom: 1.5px solid var(--ink); }
.case-head .rec { font-size: .88rem; }
.case-head h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: .5rem 0 1.1rem;
  max-width: 20ch;
}
.dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.1rem 1.6rem;
  margin-top: 1.4rem;
}
.dossier .field .label { display: block; margin-bottom: .22rem; }
.dossier .field .val { font-size: .92rem; line-height: 1.45; }
.dossier .field .val.mono { font-family: var(--mono); font-size: .82rem; }

.case-body { padding: 2.4rem 0 1rem; }
.case-body h2 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
}
.case-body h2:first-child { margin-top: 0; }
.case-body p { margin: 0 0 1.15rem; }
.case-body ul { margin: 0 0 1.15rem; padding-left: 1.1rem; }
.case-body li { margin-bottom: .55rem; }
.case-body strong { font-weight: 600; }

/* The correction section is the reason the site exists. Mark it. */
.case-body .correction {
  border-left: 2.5px solid var(--stamp);
  padding-left: 1.4rem;
  margin-left: -1.4rem;
}
.case-body .correction h2 { color: var(--stamp); border-bottom-color: var(--stamp); }

.case-body .sources { font-size: .9rem; }
.case-body .sources li { color: var(--ink-soft); }

.reviewed {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 2.6rem;
}

.related { padding: 2.4rem 0 3rem; border-top: 1px solid var(--rule-soft); }

/* ---------- Ads ---------- */
.ad { text-align: center; }
/* No min-height on the wrapper: GAM collapses the slot div when a slot goes
   unfilled, and a wrapper with a min-height would leave a 90px hole above the
   fold anyway. The label lives on the slot, so it collapses with it. */
.ad > div:not([style*="none"]) { margin: 2rem auto 2.4rem; }
.ad > div:not(:empty)::before {
  content: "Advertisement";
  display: block;
  font-family: var(--cond);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .4rem;
}

/* ---------- Forms ---------- */
.form { max-width: 34rem; }
.form label { display: block; margin-bottom: 1.1rem; }
.form .label { display: block; margin-bottom: .3rem; }
.form input[type=text], .form input[type=email], .form textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  padding: .6rem .7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.form input:focus, .form textarea:focus { border-color: var(--ink); outline: none; }
.form textarea { min-height: 9rem; resize: vertical; }
.form button {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .78rem;
  padding: .65rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.form button:hover { background: var(--stamp); border-color: var(--stamp); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border-left: 2.5px solid var(--s-later); padding: .8rem 0 .8rem 1.1rem; margin-bottom: 1.6rem; }
.notice.bad { border-left-color: var(--stamp); }

/* ---------- Footer ---------- */
.foot {
  border-top: 1.5px solid var(--ink);
  margin-top: 3rem;
  padding: 2.4rem 0 2.6rem;
  background: var(--bar);
}
.foot .wrap { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.foot .about { max-width: 42ch; }
.foot .about p { font-size: .88rem; color: var(--ink-soft); margin: .5rem 0 0; }
.foot .legal { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot .legal button {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  background: none; border: none; padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.foot .legal button:hover { color: var(--stamp); }
.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 2rem; padding-top: 1.2rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
}
.colophon a { color: var(--ink-soft); }

/* ---------- Modals ---------- */
dialog.modal {
  max-width: 46rem; width: calc(100% - 2rem);
  max-height: 82vh;
  padding: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
dialog.modal::backdrop { background: rgb(27 23 16 / .62); }  /* warm, matches the stock in both themes */
dialog.modal .m-head {
  position: sticky; top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 1.4rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
dialog.modal h2 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .84rem;
  font-weight: 700;
  margin: 0;
}
dialog.modal .m-close {
  background: none; border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--mono); font-size: .9rem; line-height: 1;
  padding: .3rem .55rem; color: var(--ink-soft);
}
dialog.modal .m-close:hover { border-color: var(--stamp); color: var(--stamp); }
dialog.modal .m-body { padding: 1.4rem; overflow-y: auto; }
dialog.modal .m-body p { font-size: .92rem; margin: 0 0 1rem; }
dialog.modal .m-body h3 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .75rem; margin: 1.6rem 0 .6rem; color: var(--ink-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .register thead { display: none; }
  .register, .register tbody, .register tr, .register td { display: block; width: 100%; }
  .register tr {
    border-bottom: 1px solid var(--rule);
    padding: .9rem .75rem;
  }
  .register td { border: none; padding: 0 0 .3rem; }
  .register .c-rec, .register .c-era, .register .c-status { width: auto; }
  .register td.c-era, .register td.c-status { display: inline-block; margin-right: 1rem; padding-top: .35rem; }
  .annot-svg { display: none; }
  .annot-note { max-width: none; margin-top: .6rem; }
  .case-body .correction { margin-left: 0; }
  .foot .legal { margin-left: 0; }
}


/* ---------- Theme toggle ---------- */
.theme-btn {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: .28rem .6rem;
  cursor: pointer;
  line-height: 1;
}
.theme-btn:hover { border-color: var(--stamp); color: var(--stamp); }
/* Default (dark) offers "Ledger". In light mode it offers "Dark" back. */
.theme-btn .to-dark   { display: none; }
.theme-btn .to-ledger { display: inline; }
:root[data-theme="light"] .theme-btn .to-dark   { display: inline; }
:root[data-theme="light"] .theme-btn .to-ledger { display: none; }


/* ============================================================
   SCREEN
   Instrument readings live on a screen; records live on paper. The hero and
   the map are always dark regardless of theme, because they are what the
   telescope and the map plotter saw. Everything below them follows the stock.
   ============================================================ */
.screen {
  --void:#100D08; --scr:#1B1710; --scr-band:#2C2519; --scr-rule:#443A2A;
  --scr-ink:#EFE8D8; --scr-soft:#B7AC94; --scr-faint:#979182;
  --signal:#FFB454; --scr-stamp:#FF6A4D;
  --v-unsolved:#FFC96B; --v-partially:#7FB2FF; --v-later:#5FD9A0; --v-debunked:#FF8A73;
  --v-partially:#7FB2FF; --v-later:#5FD9A0;
  background: var(--void);
  color: var(--scr-ink);
}

/* ---------- The hero: the Wow! signal, drawn from its own data ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 4.5rem 0 4rem;
  background: radial-gradient(120% 90% at 50% 0%, #1F1A11 0%, var(--void) 62%);
  border-bottom: 1px solid var(--scr-rule);
}
/* the sweep of a chart recorder, behind everything */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgb(255 180 84 / .035) 0 1px, transparent 1px 4px);
}
.hero .wrap { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; }

.chart { position: relative; }
.bars { display:flex; align-items:flex-end; gap:14px; height:250px; }
.b { flex:1; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.b .fill {
  width:100%; height:0;
  background: linear-gradient(to top, rgb(255 180 84 / .18), var(--signal));
  box-shadow: 0 0 26px rgb(255 180 84 / .30);
  transition: height 1.5s cubic-bezier(.16,1,.3,1);
}
.b .n { font-family:var(--mono); font-size:.68rem; color:var(--scr-faint);
        position:absolute; top:-1.25rem; opacity:0; transition:opacity .5s ease .9s; }
.b .c { font-family:var(--mono); font-size:2.15rem; font-weight:500;
        color:var(--scr-ink); margin-top:.55rem; letter-spacing:.06em; }
.baseline { height:1px; background:var(--scr-rule); }

.chart .ring { position:absolute; left:-26px; right:-26px; top:-14px; bottom:34px;
               pointer-events:none; overflow:visible; }
.chart .ring path {
  fill:none; stroke:var(--scr-stamp); stroke-width:2.4; stroke-linecap:round; opacity:.92;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation: draw 1.6s 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
.scrawl {
  font-family:var(--cond); font-weight:700; font-size:1.5rem; color:var(--scr-stamp);
  position:absolute; right:-30px; top:-52px; transform:rotate(-7deg); opacity:0;
  animation: pop .5s 2.8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes pop { from{opacity:0;transform:rotate(-7deg) scale(.6)} to{opacity:1;transform:rotate(-7deg) scale(1)} }

.hero h1 { font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem,4.4vw,3.4rem);
           line-height:1.08; letter-spacing:-.022em; margin:.7rem 0 1.2rem; color:var(--scr-ink); }
.hero h1 em { font-style:normal; color:var(--signal); }
.hero p { color:var(--scr-soft); font-size:1.03rem; max-width:44ch; margin:0 0 .9rem; }
.hero .label { color:var(--scr-faint); }

.facts { display:flex; gap:2rem; margin-top:1.7rem; flex-wrap:wrap; }
.facts div { border-left:2px solid var(--scr-rule); padding-left:.85rem; }
.facts b { display:block; font-family:var(--mono); font-size:1.35rem; color:var(--scr-ink); font-weight:500; }
.facts span { font-family:var(--cond); font-size:.67rem; text-transform:uppercase;
              letter-spacing:.1em; color:var(--scr-faint); }
.cta {
  display:inline-block; margin-top:1.9rem;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.78rem; color:var(--void); background:var(--signal);
  padding:.75rem 1.5rem; text-decoration:none; border:1px solid var(--signal);
}
.cta:hover { background:var(--scr-stamp); border-color:var(--scr-stamp); color:var(--scr-ink); }

/* ---------- The map ---------- */
.map-sec { padding:4rem 0 4.5rem; background:var(--scr); border-bottom:1px solid var(--scr-rule); }
.map-head { display:flex; justify-content:space-between; align-items:baseline;
            flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.map-head h2 { font-family:var(--serif); font-weight:600; font-size:1.7rem;
               margin:.3rem 0 .4rem; letter-spacing:-.01em; color:var(--scr-ink); }
.map-head .caveat { font-family:var(--mono); font-size:.76rem; color:var(--scr-faint); margin:0; }
.legend { display:flex; gap:1.1rem; flex-wrap:wrap; }
.legend span { font-family:var(--cond); font-weight:600; font-size:.66rem; text-transform:uppercase;
               letter-spacing:.08em; display:inline-flex; align-items:center; gap:.4rem; color:var(--scr-soft); }
.legend i { width:9px; height:9px; border-radius:50%; }
.map { position:relative; width:100%; aspect-ratio:2/1; background:var(--void);
       border:1px solid var(--scr-rule); overflow:hidden; }
.map svg { position:absolute; inset:0; width:100%; height:100%; }
.pin { cursor:pointer; }
.pin .halo { opacity:.22; animation:pulse 3.2s ease-in-out infinite; }
.pin .dot  { transition:r .18s ease; }
.pin:hover .dot { r:5.5; }
@keyframes pulse { 0%,100%{r:5;opacity:.22} 50%{r:11;opacity:.05} }
.tip { position:absolute; pointer-events:none; background:var(--void); border:1px solid var(--scr-rule);
       padding:.5rem .7rem; font-family:var(--cond); font-size:.72rem; color:var(--scr-ink);
       opacity:0; transition:opacity .15s; white-space:nowrap; letter-spacing:.03em; z-index:2; }
.tip b { display:block; font-family:var(--mono); font-size:.62rem; color:var(--scr-faint);
         font-weight:400; margin-bottom:.15rem; }

@media (prefers-reduced-motion: reduce) {
  .b .fill { transition:none; }
  .chart .ring path { animation:none; stroke-dashoffset:0; }
  .scrawl { animation:none; opacity:1; }
  .pin .halo { animation:none; }
  .b .n { transition:none; opacity:1; }
}
@media (max-width:900px) {
  .hero .wrap { grid-template-columns:1fr; gap:2.5rem; }
  .bars { height:170px; } .b .c { font-size:1.5rem; }
  .scrawl { right:0; top:-42px; font-size:1.2rem; }
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ============================================================
   FIGURES AND PHOTOGRAPHS
   A figure is an instrument reading, so it sits on the dark screen panel in
   both themes. A photograph is a document, so it sits on the paper.
   ============================================================ */
.fig-block { margin: 2.2rem 0 2.6rem; }
.fig-canvas {
  background: #100D08;
  border: 1px solid #443A2A;
  padding: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.fig-canvas svg { width: 100%; height: auto; max-width: 420px; }
.fig-canvas.photo { padding: 0; background: var(--bar); border-color: var(--rule); }
.fig-canvas.photo img { width: 100%; height: auto; display: block; }

.fig-block figcaption {
  margin-top: .7rem;
  font-family: var(--cond);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.fig-kind {
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .64rem; color: var(--signal);
  border: 1px solid currentColor; padding: .08rem .35rem; margin-right: .3rem;
}
.fig-cap { color: var(--ink-soft); }
.fig-credit a { color: var(--ink-faint); }
.fig-credit a:hover { color: var(--stamp); }

/* A withheld image is not a gap to hide. It is a finding, and it invites a
   reader to send us the source. */
.fig-block.withheld .fig-canvas {
  background: var(--bar); border-style: dashed; border-color: var(--rule);
  min-height: 8rem;
}
.withheld-note {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--ink-faint); margin: 0; text-align: center;
}
.fig-block.withheld .fig-kind { color: var(--s-debunked); }