/* Anomaly Registry stylesheet | build: vibrant-light | 2026-09-03
   If you load /assets/style.css directly and do NOT see this line,
   your browser or CDN is serving a cached copy, not this file. */
/* 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 Sans'; src: url('/assets/fonts/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/assets/fonts/plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/assets/fonts/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/assets/fonts/plex-sans-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:      #FFFFFF;
  --bar:        #F7F6FB;
  --bar-hover:  #F0EEF9;
  --raised:     #FFFFFF;
  --ink:        #0D0B18;
  --ink-soft:   #55516B;
  --ink-faint:  #5F5A75;
  --rule:       #E6E3F0;
  --rule-soft:  #F2F0F8;
  --stamp:      #9A3412;   /* text-safe accent; the vivid coral lives in --grad */
  --pen:        #4F46E5;
  --signal:     #B45309;

  --grad:       linear-gradient(135deg, #F0501F 0%, #F59E0B 100%);
  --grad-cool:  linear-gradient(135deg, #6D28D9 0%, #0891B2 100%);
  --glow:       0 1px 2px #0d0b1808, 0 12px 28px -14px #0d0b1826;
  --glow-hover: 0 1px 2px #0d0b180d, 0 20px 40px -16px #0d0b1833;

  --s-unsolved:  #92400E;
  --s-partially: #3730A3;
  --s-later:     #065F46;
  --s-debunked:  #9F1239;

  --c-sounds-signals:      #0E7490;
  --c-disappearances:      #6D28D9;
  --c-sky-atmospheric:     #1D4ED8;
  --c-ciphers-artifacts:   #92400E;
  --c-astronomical:        #4338CA;
  --c-physical-geological: #047857;
  --c-mass-collective:     #BE123C;

  --fig-bg:#FFFFFF; --fig-band:#F7F6FB; --fig-line:#DCD8EA;
  --fig-ink:#0D0B18; --fig-soft:#3F3B52; --fig-faint:#6B6683;
  --fig-signal:#B45309; --fig-stamp:#DC2626; --fig-gold:#A16207;
  --fig-blue:#3730A3; --fig-green:#047857; --fig-cyan:#0E7490;
  --fig-violet:#6D28D9; --fig-violet-2:#7C3AED; --fig-pink:#BE185D; --fig-salmon:#BE123C;

  --sans: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--sans);
  --cond:  var(--sans);
  --mono:  'Plex Mono', ui-monospace, monospace;

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

  --r:   14px;
  --r-s: 10px;

  color-scheme: light;
}




/* The manila ledger. Chosen, not defaulted to. */
:root[data-theme="dark"] {

  /* The neutral grey version read as careful but inert. The base now carries a
     blue-violet cast, surfaces lift instead of sitting flat, and the accent runs
     as a gradient rather than a single flat coral. */
  --paper:      #0A0912;
  --bar:        #14131F;
  --bar-hover:  #1C1A2B;
  --raised:     #17162385;
  --ink:        #F4F3FA;
  --ink-soft:   #ADAAC4;
  --ink-faint:  #8B87A6;
  --rule:       #2A2740;
  --rule-soft:  #1D1B2E;
  --stamp:      #FF6A4D;
  --pen:        #8B9CFF;
  --signal:     #FFB454;

  --grad:       linear-gradient(135deg, #FF6A4D 0%, #FFB454 100%);
  --grad-cool:  linear-gradient(135deg, #8B6BFF 0%, #22D3EE 100%);
  --glow:       0 0 0 1px #2A2740, 0 18px 40px -18px #00000099;
  --glow-hover: 0 0 0 1px #3A3557, 0 24px 50px -20px #000000BB;

  --s-unsolved:  #FFC24B;
  --s-partially: #8B9CFF;
  --s-later:     #3DE0A6;
  --s-debunked:  #FF7A93;

  /* One hue per category. It is not decoration: seven colours give the register
     a second axis a reader can navigate by, the way a status pill gives a first. */
  --c-sounds-signals:      #22D3EE;
  --c-disappearances:      #A78BFA;
  --c-sky-atmospheric:     #60A5FA;
  --c-ciphers-artifacts:   #FBBF24;
  --c-astronomical:        #818CF8;
  --c-physical-geological: #34D399;
  --c-mass-collective:     #FB7185;

  --fig-bg:#0A0912; --fig-band:#14131F; --fig-line:#2E2B47;
  --fig-ink:#F4F3FA; --fig-soft:#ADAAC4; --fig-faint:#8B87A6;
  --fig-signal:#FFB454; --fig-stamp:#FF6A4D; --fig-gold:#FFC24B;
  --fig-blue:#8B9CFF; --fig-green:#3DE0A6; --fig-cyan:#22D3EE;
  --fig-violet:#A78BFA; --fig-violet-2:#8B6BFF; --fig-pink:#FB7185; --fig-salmon:#FF7A93;

  color-scheme: dark;
}




*, *::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 is used on both spans and headings, so the heading margins have
   to be reset or the section spacing changes with the tag. */
h2.label, h3.label { margin: 0; }
.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: 1px solid var(--rule);
  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. */
/* The alternating greenbar bands are gone: they were the most "continuous-feed
   ledger" thing on the page. Rows are separated by a hairline instead and the
   hover does the work of showing which row you are on. */
.register tbody tr { border-top: 1px solid var(--rule-soft); }
.register tbody tr:first-child { border-top: none; }
.register tbody tr:hover { background: var(--bar); }

/* ---------- The whole row opens the record ----------
   The row already lit up on hover, which promises the row is the target. Only
   the title text was ever a link, so most of that lit-up surface was dead and
   the record read as unclickable. The anchor stays on the title, so the
   accessible name is the record title and keyboard order is unchanged; a
   stretched pseudo-element extends its hit area over the row. No JS, so it
   survives with scripting off. */
.register tbody tr { position: relative; }
.register tbody tr:has(.title a) { cursor: pointer; }
/* .bar is still toggled by the filter script; it no longer paints a band. */
.register .title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Keyboard parity: tabbing to the link lights the row exactly as hover does. */
.register tbody tr:has(.title a:focus-visible) { background: var(--bar-hover); }
/* The status pill and record number must stay above the stretched layer, or the
   row swallows text selection entirely. */
.register .rec, .register .era, .register .status { position: relative; z-index: 1; }

.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; }

/* The title carried no underline and the same colour as body text, so nothing
   on the row said "link". It now takes the house underline in rule colour, and
   the whole row's hover promotes it to the stamp colour. */
.register .title a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.register tbody tr:hover .title a,
.register .title a:hover { 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 ---------- */
/* A tinted chip rather than caps text with a hard square bullet. colour-mix
   lets one rule tint the background from the status colour, so the four states
   stay legible in both themes without eight more variables. */
.status {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .01em;
  font-size: .74rem;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .55rem .2rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.status::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  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 {
  border-radius: 999px;
  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); }

/* The "see all" link on the homepage is a destination, not a filter chip, so it
   reads as a link rather than another toggle in the same row of buttons. */
.filters a.see-all {
  border: none; background: none; padding: .3rem 0;
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.filters a.see-all::after { content: " \2192"; }
.filters a.see-all:hover { text-decoration-color: var(--stamp); }

.register-more {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-faint);
  margin: .9rem 0 0;
}
.register-more a { color: var(--ink-soft); }

/* ---------- Search over the register ----------
   100 records with no way to look one up by name was the widest usability gap
   on the site. It filters the rows already in the page, so there is no request
   and no result page to design. */
.register-search { padding: 2.6rem 0 0; }
.register-search .label { display: block; margin-bottom: .5rem; }
.register-search input[type="search"] {
  width: 100%;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: .7rem .9rem;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.register-search input[type="search"]::placeholder { color: var(--ink-faint); }
.register-search input[type="search"]:focus { border-color: var(--ink); border-left-color: var(--stamp); }
/* Never drop the ring outright: a mouse user does not see it, a keyboard user
   depends on it. Suppress only the plain :focus styling, keep :focus-visible. */
.register-search input[type="search"]:focus:not(:focus-visible) { outline: none; }
.search-none {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-soft);
  margin: .7rem 0 0;
}

/* ---------- Category grid ---------- */
.cats { padding: 3.2rem 0; border-top: 1px solid var(--rule-soft); }
.cat-grid {
  /* The tiles carry their own border and shadow now, so the old
     background-plus-1px-gap hairline trick is redundant, and with seven tiles in
     four columns it painted the empty eighth cell as a stray panel. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.cat-grid a {
  border-radius: var(--r);
  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,
.cat-grid h2 {
  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); }
.form input:focus:not(:focus-visible), .form textarea:focus:not(:focus-visible) { 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: 1px solid var(--rule);
  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; }
/* The colophon sits in its own .wrap, which is also a flex row, so without this
   it shrinks to its content and the rule above it stops short of the page. */
.foot .wrap > .colophon { flex: 1 1 100%; }
.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); }
/* ---------- Adjacent records ----------
   Two facing cards, so the register can be walked end to end. On the last
   record the "next" side is simply absent and the "previous" card stays left,
   which is why the empty branch emits a placeholder span. */
.recnav {
  display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between;
  padding: 2.4rem 0 0;
}
.recnav a {
  flex: 1 1 16rem;
  display: block;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  transition: border-color .15s ease, background .15s ease;
  background: var(--paper);
}
.recnav a:hover { border-color: var(--ink-faint); background: var(--bar); }
.recnav a.next { text-align: right; }
.recnav .dir {
  display: block;
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}
.recnav .rec {
  display: inline-block;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-faint);
  margin-right: .45rem;
}
.recnav a.next .rec { margin-right: 0; margin-left: .45rem; }
.recnav .t { font-weight: 600; }
.recnav a:hover .t { text-decoration: underline; text-decoration-color: var(--stamp); text-underline-offset: 3px; }

/* Copyright left, credit right, on one line. Below 640px they stack and centre,
   because side by side on a phone leaves each half on two cramped lines. */
.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; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1.5rem;
}
.colophon .credit { margin-left: auto; text-align: right; }
@media (max-width: 640px) {
  .colophon { flex-direction: column; align-items: center; text-align: center; }
  .colophon .credit { margin-left: 0; text-align: center; }
}
.colophon a { color: var(--ink-soft); }

/* ---------- Subscribe + captcha ---------- */
.subscribe {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.subscribe h2 {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 .5rem;
}
.subscribe > p { color: var(--ink-soft); max-width: 46ch; margin: 0 0 1.3rem; }

.form label.check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; color: var(--ink-soft);
}
.form label.check input { width: auto; margin-top: .18rem; flex: none; }
.form label.check span { font-size: .9rem; letter-spacing: 0; text-transform: none; }

/* The arithmetic challenge. The question is the label, so a screen reader
   announces it in the normal way rather than needing a separate description. */
.form label.captcha input { max-width: 7rem; }
.form label.captcha em {
  font-style: normal; color: var(--ink-faint);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  margin-left: .5rem;
}

/* ================= MORE COLOUR, LESS RESTRAINT =================
   Everything here exists to stop the page reading as careful and grey. The
   register still has to be readable at 113,000 words, so the energy goes into
   the furniture, the headings and the navigation rather than the body text. */

/* A soft colour wash behind the whole page instead of flat white. */
body {
  background:
    radial-gradient(60% 40% at 100% 0%, #FFE9DF 0%, transparent 55%),
    radial-gradient(50% 35% at 0% 8%,  #EFE6FF 0%, transparent 55%),
    var(--paper);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(60% 40% at 100% 0%, #FF6A4D14 0%, transparent 55%),
    radial-gradient(50% 35% at 0% 8%,  #8B6BFF16 0%, transparent 55%),
    var(--paper);
}

/* Display headings get real scale and a tighter set. */
.finding-aid h1, .case-head h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700;
}
.hero h2 { letter-spacing: -.03em; }

/* The category tiles become the most colourful thing on the page. */
.cat-grid a {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cat) 13%, var(--paper)) 0%,
                            var(--paper) 62%);
  border-color: color-mix(in srgb, var(--cat) 26%, var(--rule));
}
.cat-grid a::before { height: 5px; background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 40%, #FFB454)); }
.cat-grid a::after { opacity: .22; }
.cat-grid a:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--cat) 60%, transparent);
  border-color: color-mix(in srgb, var(--cat) 55%, var(--rule));
}
.cat-grid h3, .cat-grid h2 { font-size: 1.1rem; }

/* Section eyebrows become coloured chips rather than grey caps. */
.register-head .label, .cats .label, .map-head .label, .finding-aid .label, .case-head .label {
  display: inline-block;
  padding: .26rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stamp) 12%, transparent);
  color: var(--stamp);
  font-weight: 600;
}

/* Numbers are the site's currency, so let them be loud. */
.finding-aid .tally b { font-weight: 700; }

/* Navigation gets a moving underline instead of a static rule. */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

/* The masthead floats on the wash rather than sitting on a slab. */
.masthead {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* Figures sit on a card, not in a well. */
.fig-canvas { background: var(--fig-bg); border-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .cat-grid a:hover, .recnav a:hover, .cta:hover { transform: none; }
  .nav a::after { transition: none; }
}

/* ================= COLOUR AND DEPTH =================
   Everything below is what separates "restrained" from "inert". The previous
   pass was correct and quiet; this one keeps the structure and gives it a
   pulse: a signature gradient, one hue per category carried through the tiles
   and the register, and surfaces that lift instead of sitting flat. */

[data-cat="sounds-signals"] { --cat: var(--c-sounds-signals); }
.register tbody tr[data-category="sounds-signals"] { --cat: var(--c-sounds-signals); }
[data-cat="disappearances"] { --cat: var(--c-disappearances); }
.register tbody tr[data-category="disappearances"] { --cat: var(--c-disappearances); }
[data-cat="sky-atmospheric"] { --cat: var(--c-sky-atmospheric); }
.register tbody tr[data-category="sky-atmospheric"] { --cat: var(--c-sky-atmospheric); }
[data-cat="ciphers-artifacts"] { --cat: var(--c-ciphers-artifacts); }
.register tbody tr[data-category="ciphers-artifacts"] { --cat: var(--c-ciphers-artifacts); }
[data-cat="astronomical"] { --cat: var(--c-astronomical); }
.register tbody tr[data-category="astronomical"] { --cat: var(--c-astronomical); }
[data-cat="physical-geological"] { --cat: var(--c-physical-geological); }
.register tbody tr[data-category="physical-geological"] { --cat: var(--c-physical-geological); }
[data-cat="mass-collective"] { --cat: var(--c-mass-collective); }
.register tbody tr[data-category="mass-collective"] { --cat: var(--c-mass-collective); }

/* ---- The signature gradient, used sparingly so it stays a signal ---- */
.cta, .form button[type="submit"], .subscribe button[type="submit"] {
  background: var(--grad);
  color: #14121A;
  border: none;
  border-radius: 999px;
  padding: .8rem 1.5rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -12px #FF6A4D88;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cta:hover, .form button[type="submit"]:hover, .subscribe button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 16px 32px -12px #FF6A4DAA;
}

/* The eyebrow labels carry the accent instead of being another grey line. */
.label, .register-head .label, .map-head .label { color: var(--stamp); }
.finding-aid .label, .case-head .label { color: var(--stamp); }

/* The wordmark dot is the smallest place the gradient can live. */
.wordmark span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- Category colour, carried through ---- */
.cat-grid a {
  position: relative;
  background: var(--bar);
  border: 1px solid var(--rule);
  box-shadow: var(--glow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-grid a::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cat, var(--stamp));
}
.cat-grid a::after {
  content: "";
  position: absolute; right: -30%; top: -60%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: var(--cat, var(--stamp));
  opacity: .10; filter: blur(28px);
  pointer-events: none;
}
.cat-grid a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cat, var(--stamp)) 45%, var(--rule));
  box-shadow: var(--glow-hover);
}
.cat-grid .n { color: var(--cat, var(--ink-faint)); font-weight: 500; }

/* On a category page the heading takes its own hue. */
.finding-aid h1[data-cat] {
  background: linear-gradient(120deg, var(--cat), color-mix(in srgb, var(--cat) 45%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* In the register the record number carries the category, so the table gains a
   second readable axis without another column. */
.register .rec { color: var(--cat, var(--ink-faint)); }
.register tbody tr { transition: background .14s ease, box-shadow .14s ease; }
.register tbody tr:hover {
  background: var(--bar);
  box-shadow: inset 3px 0 0 var(--cat, var(--stamp));
}

/* ---- Surfaces that lift ---- */
.fig-canvas, .recnav a, dialog.modal, .register-search input[type="search"] {
  box-shadow: var(--glow);
}
.recnav a:hover { transform: translateY(-2px); box-shadow: var(--glow-hover); }
.subscribe {
  background: var(--bar);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1.8rem;
  box-shadow: var(--glow);
}

/* ---- Atmosphere behind the dark panels ---- */
.screen { position: relative; overflow: hidden; }
/* The wash now lives on .screen itself, so this only adds the soft vignette. */
.screen::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 120%, #00000010 0%, transparent 60%);
  pointer-events: none;
}
.screen > * { position: relative; }

/* Filter chips read as controls, not as more grey boxes. */
.filters a[aria-current] {
  background: var(--grad); color: #14121A; border-color: transparent;
  box-shadow: 0 8px 18px -10px #FF6A4D99;
}
.filters a:hover { border-color: color-mix(in srgb, var(--stamp) 55%, var(--rule)); color: var(--ink); }

/* Status chips: brighter, and the dot gets the glow. */
.status { background: color-mix(in srgb, currentColor 12%, transparent); font-weight: 600; }
.status::before { box-shadow: 0 0 10px currentColor; }

/* ================= THE FOLD =================
   The first screen. Its job is to say what this is, how big it is, and why it is
   different, and to show the drawings rather than describe them. */

/* Tight enough that the headline, the numbers, the claim and the call to
   action all sit above the fold on a laptop. A hero whose button you have
   to scroll to find is decoration. */
.fold { position: relative; overflow: hidden; padding: 2.6rem 0 3rem; }
.fold-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem; align-items: center;
}

.fold-eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stamp);
  padding: .3rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--stamp) 12%, transparent);
}
.fold h1 {
  margin: .8rem 0 0;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.04; letter-spacing: -.033em; font-weight: 700;
  max-width: 17ch;
  color: var(--scr-ink);
}
.fold h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fold-sub {
  margin: .85rem 0 0; max-width: 50ch;
  font-size: .97rem; line-height: 1.55; color: var(--scr-soft);
}

/* The numbers, as colour-coded chips. This is the fastest way to say "there is a
   lot here, and it is sorted". */
.fold-stats {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.fold-stats li {
  display: flex; align-items: baseline; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--chip, var(--scr-ink)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip, var(--scr-ink)) 30%, transparent);
}
.fold-stats b { font-family: var(--mono); font-weight: 700; font-size: .92rem; color: var(--chip, var(--scr-ink)); }
.fold-stats span { font-size: .74rem; color: var(--scr-soft); }
.fold-stats .s-all         { --chip: var(--scr-ink); }
.fold-stats .unsolved      { --chip: var(--v-unsolved); }
.fold-stats .partially-explained { --chip: var(--v-partially); }
.fold-stats .later-explained     { --chip: var(--v-later); }
.fold-stats .debunked      { --chip: var(--v-debunked); }

.fold-claim {
  margin: 1.05rem 0 0; max-width: 46ch;
  font-size: .97rem; font-weight: 600; line-height: 1.45;
  color: var(--scr-ink);
  padding-left: .9rem; border-left: 3px solid var(--stamp);
}

.fold-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.fold-cta .cta { margin-top: 0; }
.cta-ghost {
  display: inline-block; padding: .8rem 1.4rem; border-radius: 999px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; font-size: .78rem;
  color: var(--scr-ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--scr-ink) 28%, transparent);
  transition: border-color .18s ease, background .18s ease;
}
.cta-ghost:hover { border-color: var(--scr-ink); background: color-mix(in srgb, var(--scr-ink) 7%, transparent); }

/* ---- The fanned stack of drawings ---- */
.fold-stack { position: relative; min-height: 21rem; }
.fold-card {
  --cat: var(--stamp);
  position: absolute; left: 0; right: 0;
  display: block; text-decoration: none; color: inherit;
  background: var(--fig-bg);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, var(--rule));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--cat) 65%, transparent),
              0 2px 10px -4px #0000001f;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.fold-card-art { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.fold-card-art svg { position: absolute; inset: 10px 14px; width: calc(100% - 28px); height: calc(100% - 20px); }
.fold-card-foot {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .7rem .9rem .8rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper);
}
.fold-card-id { font-family: var(--mono); font-size: .7rem; color: var(--cat); }
.fold-card-title { font-size: .92rem; font-weight: 600; line-height: 1.25; }

/* Fanned so all three drawings are legible, not so the back two become slivers:
   the point of the stack is to show that the archive has range. */
.fold-card.fc0 { transform: rotate(-8deg) translate(-13%, -20%) scale(.82); z-index: 1; }
.fold-card.fc1 { transform: rotate(6deg)  translate(15%, -6%)   scale(.84); z-index: 2; }
.fold-card.fc2 { transform: rotate(-1.5deg) translate(0, 19%)   scale(.98); z-index: 3; }
.fold-card:hover { z-index: 5; }
.fold-card.fc0:hover { transform: rotate(-5deg) translate(-13%, -23%) scale(.86); }
.fold-card.fc1:hover { transform: rotate(3deg)  translate(15%, -9%)   scale(.88); }
.fold-card.fc2:hover { transform: rotate(0deg)  translate(0, 16%)     scale(1.02); }
.fold-card:focus-visible { outline: 3px solid var(--cat); outline-offset: 3px; z-index: 6; }

@media (max-width: 900px) {
  .fold-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .fold-stack { min-height: 20rem; margin-top: .5rem; }
  .fold-card.fc0 { transform: rotate(-5deg) translate(-3%, -8%) scale(.86); }
  .fold-card.fc1 { transform: rotate(3deg)  translate(6%, 6%)   scale(.88); }
  .fold-card.fc2 { transform: rotate(-1deg) translate(0, 20%)   scale(.98); }
}
@media (max-width: 560px) {
  /* Tighter so the headline, the numbers and the button are all reachable in
     one short scroll rather than three. */
  .fold { padding: 1.8rem 0 2.2rem; }
  .fold h1 { font-size: 1.95rem; max-width: none; }
  .fold-sub { font-size: .92rem; margin-top: .7rem; }
  .fold-claim { margin-top: .85rem; font-size: .92rem; }
  .fold-cta { margin-top: 1rem; }
  /* Fanning three cards in a phone's width just makes three unreadable slivers,
     so only the front card stays. */
  .fold-stack { min-height: 15rem; }
  .fold-card.fc0, .fold-card.fc1 { display: none; }
  .fold-card.fc2 { transform: none; position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-card { transition: none; }
  .fold-card:hover { transform: none; }
}

/* ================= RECORD CARDS =================
   The homepage's main unit. Each card leads with the record's own figure, which
   is the one thing this archive has that nothing else does, and which nobody saw
   until now because it lived below the fold of a case page. */

.rcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0 0;
}

.rcard {
  --cat: var(--stamp);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--glow);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.rcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat) 50%, var(--rule));
  box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--cat) 62%, transparent);
}
.rcard:focus-visible { outline: 3px solid var(--cat); outline-offset: 3px; }

/* The artwork. The figure is drawn on a 400-wide viewBox, so it is cropped to a
   band rather than letterboxed: the top of these drawings carries the title and
   the shape, which is the part worth showing at thumbnail size. */
.rcard-art {
  display: block; position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--cat) 16%, var(--fig-bg)) 0%,
                            var(--fig-bg) 70%);
  border-bottom: 1px solid var(--rule-soft);
}
/* Fit, do not fill. Cropping to a band cut the top off the drawings and lost the
   annotation, which is usually the most interesting part. The viewBox plus the
   default preserveAspectRatio letterboxes the figure inside the tinted panel. */
.rcard-art svg {
  position: absolute; inset: 8px 12px;
  width: calc(100% - 24px); height: calc(100% - 16px);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.rcard:hover .rcard-art svg { transform: scale(1.04); }

.rcard-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.rcard-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rcard-id { font-family: var(--mono); font-size: .72rem; color: var(--cat); font-weight: 500; }
.rcard-title { font-size: 1.12rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.rcard:hover .rcard-title { color: var(--cat); }
.rcard-hook { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.rcard-more {
  font-size: .78rem; font-weight: 600; color: var(--cat);
  margin-top: .25rem;
}
.rcard-more::after { content: " \2192"; transition: margin-left .2s ease; }
.rcard:hover .rcard-more::after { margin-left: .3rem; }

/* The lead card: the figure gets real space and the headline gets to shout. */
.feature-sec { padding-top: 1rem; }
.rcard-wide { flex-direction: row; align-items: stretch; }
.rcard-wide .rcard-art { flex: 1 1 56%; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--rule-soft); }
.rcard-wide .rcard-art { min-height: 17rem; }
.rcard-wide .rcard-art svg { inset: 14px 18px; width: calc(100% - 36px); height: calc(100% - 28px); }
.rcard-wide .rcard-body { flex: 1 1 44%; justify-content: center; padding: 2rem 2.2rem; gap: .7rem; }
.rcard-wide .rcard-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.03em; }
.rcard-wide .rcard-hook { font-size: 1.02rem; flex: 0; }
@media (max-width: 780px) {
  .rcard-wide { flex-direction: column; }
  .rcard-wide .rcard-art { flex: none; aspect-ratio: 16/8; border-right: none; border-bottom: 1px solid var(--rule-soft); }
  
  .rcard-wide .rcard-body { padding: 1.2rem 1.2rem 1.4rem; }
}

/* ---- Rails: three promises, each a different reason to click ---- */
.rail { padding-top: 2.8rem; }
.rail-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -.02em; margin: 0 0 .3rem;
}
.rail-head p { color: var(--ink-soft); margin: 0; max-width: 52ch; }
.rail-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .rcard, .rcard-art svg, .rcard-more::after { transition: none; }
  .rcard:hover { transform: none; }
  .rcard:hover .rcard-art svg { transform: none; }
}

/* ---------- Advertising ----------
   The "advertise here" caption sits beside the slot, never over it: overlaying
   a Google Ad Manager slot counts as invalid traffic and would also eat the
   click the advertiser paid for. */
.ad-unit { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.ad-pitch {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none; border: none; padding: .1rem .2rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.ad-pitch:hover { color: var(--stamp); text-decoration-color: var(--stamp); }

/* .foot .legal button already sets a colour, so this needs to match its
   specificity to win. The commercial link should read as the one that is
   not a legal notice. */
.foot .legal button.legal-advertise { color: var(--stamp); }
.foot .legal button.legal-advertise:hover { color: var(--ink); }

.ad-lede { font-size: 1.02rem; color: var(--ink); }

/* The figures, as a media kit would set them. */
.admetrics {
  list-style: none; margin: 1.4rem 0 .8rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(5, 1fr);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.admetrics li {
  background: var(--paper);
  padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.admetrics b {
  font-family: var(--mono);
  font-size: 1.5rem; font-weight: 500;
  color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.admetrics span {
  font-size: .74rem; color: var(--ink-faint);
  letter-spacing: .02em;
}
.admetrics-note { font-size: .82rem; color: var(--ink-faint); margin-top: 0; }
@media (max-width: 640px) {
  .admetrics { grid-template-columns: repeat(2, 1fr); }
  .admetrics b { font-size: 1.3rem; }
}

/* ---------- Modals ---------- */
dialog.modal {
  border-radius: var(--r);
  max-width: 46rem; width: calc(100% - 2rem);
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--rule);
  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; z-index: 2;   /* or the scrolling body paints over it */
  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 {
  border-radius: 999px;
  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); }
/* The button shows what it will switch TO. In the dark theme it offers a sun and
   "Light"; in the light theme a moon and "Dark". The old version said "Ledger",
   which is the site's own word for the light theme and told a first-time reader
   nothing, so the icon now carries the meaning and the word confirms it. */
.theme-btn { display: inline-flex; align-items: center; gap: .38rem; }
.theme-btn .ti { width: 13px; height: 13px; flex: none; }
.theme-btn .sun  { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.theme-btn .moon { fill: currentColor; stroke: none; }

.theme-btn .to-ledger, .theme-btn .sun { display: none; }
.theme-btn .to-dark { display: inline; }
.theme-btn .moon    { display: block; }
:root[data-theme="dark"] .theme-btn .to-ledger { display: inline; }
:root[data-theme="dark"] .theme-btn .sun      { display: block; }
:root[data-theme="dark"] .theme-btn .to-dark,
:root[data-theme="dark"] .theme-btn .moon     { 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.
   ============================================================ */
/* The hero and the map used to be a dark instrument panel in both themes, which
   is why the page read as dark the moment it loaded no matter what the rest of
   it was doing. They now follow the theme, and in the light theme they are the
   brightest thing on the page rather than the darkest. */
.screen {
  --void:#FFF4EC; --scr:#FFF9F4; --scr-band:#FFEEE2; --scr-rule:#F3D9C6; --scr-land:#FFE3D0;
  --scr-ink:#1A1024; --scr-soft:#4A3B57; --scr-faint:#6E5C7B;
  --signal:#E8590C; --scr-stamp:#E11D48;
  --v-unsolved:#92400E; --v-partially:#1D4ED8; --v-later:#065F46; --v-debunked:#9F1239;
  color: var(--scr-ink);
  background:
    radial-gradient(80% 120% at 8% 0%,  #FFD9C2 0%, transparent 58%),
    radial-gradient(70% 110% at 92% 6%, #E6D9FF 0%, transparent 60%),
    radial-gradient(90% 130% at 55% 100%, #FFE9B8 0%, transparent 62%),
    var(--void);
}

:root[data-theme="dark"] .screen {
  --void:#08070E; --scr:#0F0E16; --scr-band:#17161F; --scr-rule:#2C2940; --scr-land:#171620;
  --scr-ink:#F5F4FA; --scr-soft:#ADAAC4; --scr-faint:#8B87A6;
  --signal:#FFB454; --scr-stamp:#FF6A4D;
  --v-unsolved:#FFC96B; --v-partially:#8B9CFF; --v-later:#3DE0A6; --v-debunked:#FF8A73;
  background:
    radial-gradient(80% 120% at 8% 0%,  #FF6A4D1F 0%, transparent 58%),
    radial-gradient(70% 110% at 92% 6%, #8B6BFF22 0%, transparent 60%),
    var(--void);
}

/* ---------- The hero: the Wow! signal, drawn from its own data ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 4.5rem 0 4rem;
  /* This used to paint its own dark vignette, which sat on top of the themed
     panel and put a dark band across the top of the page on load. The wash now
     comes from .screen; the hero only adds a soft top highlight. */
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF66 0%, transparent 60%);
  border-bottom: 1px solid var(--scr-rule);
}
:root[data-theme="dark"] .hero {
  background: radial-gradient(120% 90% at 50% 0%, #1F1A2B 0%, transparent 62%);
}
/* 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 must carry a definite height. With align-items:flex-end the item is sized to
   its content, and a percentage height on .fill then resolves against auto, which
   computes to zero: the bars never drew at all. */
.b { flex:1; height:100%; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
/* The plot area, excluding the letter beneath it. The fill is positioned inside
   this rather than being a flex sibling of the letter: as a flex item it was
   shrunk to fit, which flattened the two tallest bars to the same height and
   lost the peak the copy is describing. */
.b .track { position:relative; flex:1 1 auto; width:100%; min-height:0; }
.b .fill {
  position:absolute; left:0; right:0; bottom:0;
  height: var(--h, 0%);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to top, #FF5C39, #FFB454);
  box-shadow: 0 8px 22px -8px #FF5C3999;
  transition: height 1.5s cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"] .b .fill {
  background: linear-gradient(to top, #FF6A4D66, #FFB454);
}
/* Bars and labels are at full value by default and the script only animates them,
   so the hero still reads with scripting off. */
.b .n { font-family:var(--mono); font-size:.68rem; color:var(--scr-faint);
        position:absolute; top:-1.25rem; opacity:1; 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,
.hero h2 { 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,
.hero h2 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.45rem; color:var(--signal); font-weight:700; }
.facts span { font-family:var(--cond); font-size:.67rem; text-transform:uppercase;
              letter-spacing:.1em; color:var(--scr-faint); }
/* In the light theme --void is a pale peach, so "dark text on the signal colour"
   quietly became pale text on orange and fell to 3.3:1. The button now uses the
   gradient with a fixed dark label, which clears AA against both stops. */
.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:#1A1024;
  background:var(--grad);
  padding:.8rem 1.6rem; text-decoration:none; border:none;
}
.cta:hover { color:#1A1024; }

/* ---------- 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-radius:var(--r);
       border:1px solid var(--scr-rule); overflow:hidden; }
.map svg { position:absolute; inset:0; width:100%; height:100%; }
/* The land outline. Without it the map was pins on an empty grid, which told a
   reader nothing: the whole point is being able to see that a record sits in the
   Urals or the mid-Pacific. Kept quiet so the pins stay the subject. */
.worldmap .land { fill:var(--scr-land, #241D13); stroke:var(--scr-rule); stroke-width:.6; }
.worldmap .graticule line { stroke:var(--scr-rule); stroke-width:1; opacity:.5; }

.pin { cursor:pointer; }
.pin:focus-visible { outline:2px solid var(--pen); outline-offset:2px; }
.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: var(--fig-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  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); }