/* Juan de Fuca Search and Rescue — web archive
   Colours are derived from the team badge; see assets/palette.md for the derivation
   and for the contrast ratios every pairing below was checked against.

   Order matters in a few places and is called out where it does. Sections:
   tokens · base · typography · layout · masthead · nav · hero · components ·
   timeline · incidents · browse · scrubber · search · footer · responsive · print */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* warm neutral ramp — built out from the paper and ink already in use.
     Not from the badge: body text must never depend on a brand colour. */
  --n-0:#FFFDFA;    /* card and figure ground */
  --n-50:#FAF8F4;   /* page */
  --n-100:#F4F1EA;  /* quiet fill, table heads, nav bar */
  --n-200:#E8E3D8;  /* stronger fill */
  --n-300:#D8D2C6;  /* rules and borders */
  --n-400:#B4AD9F;  /* dividers on tinted grounds */
  --n-500:#8A8478;  /* 3.5:1 on paper — UI and placeholder only, never body text */
  --n-600:#635D52;  /* 6.2:1 — secondary text */
  --n-700:#4A463E;  /* 8.9:1 — strong secondary text */
  --n-800:#2E2A24;
  --n-900:#1A1A1A;  /* 16.4:1 — body text */

  /* the badge indigo (#382A7B) with tints and shades, so it can do more than
     one job. Previously it only ever appeared at full strength. */
  --indigo-50:#F1EEF8;
  --indigo-100:#DED8EF;
  --indigo-400:#6B5CB0;
  --indigo-500:#4A3A94;
  --indigo-600:#382A7B;  /* the badge value */
  --indigo-800:#261B57;
  --indigo-900:#1C1442;

  /* remaining badge colours in use */
  --gold:#E7BC0D;    /* 1.7:1 on paper — a mark or a rule, never text on light */
  --sage:#C0D392;
  --sky:#60BEE4;     /* the map's watercourses */
  --green:#4D5F4B;   /* the map's trails */

  /* type */
  --display:"Newsreader","Iowan Old Style",Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-100:.72rem;
  --fs-200:.8rem;
  --fs-300:.875rem;
  --fs-400:1rem;
  --fs-500:clamp(1.05rem,.98rem + .3vw,1.18rem);
  --fs-600:clamp(1.2rem,1.09rem + .5vw,1.45rem);
  --fs-700:clamp(1.55rem,1.3rem + 1.2vw,2.15rem);
  --fs-800:clamp(1.7rem,1.25rem + 1.9vw,2.7rem);

  /* space */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4.5rem;

  --content-w:74rem;
  --radius:5px;
  --radius-lg:9px;
}

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--n-50);color:var(--n-900);
  font-family:var(--text);font-size:var(--fs-400);line-height:1.62;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:proportional-nums;
  /* The sticky header shrinks on scroll, and it sits in normal flow, so the
     document gets ~80px shorter. Scroll anchoring would "helpfully" move the
     scroll position by that same amount to hold the content still — which
     lands back across the threshold and makes the header flip state forever.
     Nothing else here depends on anchoring: images above the fold are already
     loaded, and nothing is injected after paint. */
  overflow-anchor:none;
}
img{max-width:100%;height:auto}
a{color:var(--indigo-600);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .14s ease,text-decoration-color .14s ease,text-decoration-thickness .14s ease}
/* replaces the old full-width sage wash, which flooded every hovered link */
a:hover{color:var(--indigo-500);text-decoration-thickness:2px;
  text-decoration-color:var(--gold)}
:focus-visible{outline:3px solid var(--indigo-600);outline-offset:2px;border-radius:2px}
/* outline-offset draws the ring outside the element, over whatever is behind
   it — so the ring has to contrast with the *parent's* background, not the
   control's. Indigo is 11:1 on paper but 1.0:1 on the indigo masthead, footer
   and era bands, where it vanished entirely. Gold is 8.4:1 there.
   WCAG 2.4.11 wants at least 3:1.
   Buttons are deliberately not in this list: .btn-primary sits on the hero's
   --n-100 and .btn-detail on a card, where gold would be the invisible one. */
.masthead :focus-visible,
footer.site :focus-visible,
.era-band :focus-visible{outline-color:var(--gold)}
::selection{background:var(--sage);color:var(--n-900)}
hr{border:0;border-top:1px solid var(--n-300);margin:var(--s-6) 0}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;
  font-variation-settings:"opsz" 40;
  letter-spacing:-.011em;text-wrap:balance}
h1{font-size:var(--fs-700);line-height:1.14;margin:0 0 var(--s-3);
  font-variation-settings:"opsz" 60}
h2{font-size:var(--fs-600);line-height:1.22;margin:var(--s-7) 0 var(--s-3);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--n-300)}
h3{font-size:var(--fs-500);line-height:1.3;margin:var(--s-5) 0 var(--s-2);
  font-variation-settings:"opsz" 20}
p{margin:0 0 var(--s-4)}

/* .narrow and .prose no longer narrow anything — they used to cap body copy at
   a ~66-character measure, which read as text stranded in half the page next
   to a wall of white space. Text now runs the full width of main
   (--content-w). The classes are kept, unchanged in build.py, so nothing had
   to move — they just carry no width rule any more. */

.lede{font-size:var(--fs-500);line-height:1.5;color:var(--n-700);
  margin:0 0 var(--s-5)}
.crumb{font-size:var(--fs-200);color:var(--n-600);margin:0 0 var(--s-4);
  letter-spacing:.01em}
.crumb a{color:var(--n-600);text-decoration-color:var(--n-400)}
.meta{font-size:var(--fs-200);color:var(--n-600);line-height:1.5}
.meta strong{color:var(--n-800);font-weight:600}
time,.tabular{font-variant-numeric:tabular-nums}

/* ── icons ──────────────────────────────────────────────────────────────── */
/* Phosphor Icons (MIT), inlined per page as a <symbol> sprite — see the icons
   section of build.py for why they are inlined rather than referenced.
   Sized in em so an icon always matches the text it sits beside, and coloured
   with currentColor so it inherits whatever its context sets — including white
   on the masthead and gold in the footer, with no per-context overrides. */
.ico{width:1em;height:1em;flex:none;fill:currentColor;
  vertical-align:-.135em;pointer-events:none}
/* a little optical air when an icon leads a label */
.ico-lead{margin-right:.45em}
.ico-sm{width:.85em;height:.85em;vertical-align:-.09em}
.ico-lg{width:1.25em;height:1.25em;vertical-align:-.2em}
/* muted by default in metadata rows, so icons support the text without
   competing with it */
.ico-quiet{color:var(--n-500)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;background:var(--n-100);padding:.1em .35em;border-radius:3px}

/* ── layout ─────────────────────────────────────────────────────────────── */
main{max-width:var(--content-w);margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-8)}
.wrap{max-width:var(--content-w);margin:0 auto;padding:0 var(--s-5)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:30}
/* deeper than the badge indigo so the nav bar and the page read as separate
   planes. White is 15.3:1 here and the gold is 8.4:1 — on this ground the gold
   is legal as text, which it is not on paper. */
.masthead{background:var(--indigo-800);color:#fff;padding:var(--s-4) var(--s-5);
  border-bottom:2px solid var(--gold);transition:padding .18s ease}
.masthead a{color:#fff}
.masthead a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.mh-in{max-width:var(--content-w);margin:0 auto;display:flex;gap:var(--s-4);
  align-items:center;flex-wrap:wrap}
/* The badge is a JPEG, so its white background is baked in and cannot be made
   transparent. It used to sit on an explicit white plate, which read as a
   sticker stuck onto the indigo. Clipping to the badge's own oval removes the
   white corners instead, and because the badge's outer ring is very close to
   the masthead indigo the mark now sits *in* the header rather than on it.
   ellipse() percentages are of the element box, so this tracks any size. */
.mh-logo{width:52px;height:auto;flex:none;
  clip-path:ellipse(47% 48% at 50% 50%);
  transition:width .18s ease}
.mh-t{display:flex;flex-direction:column;font-family:var(--display);
  font-size:1.5rem;line-height:1.12;
  font-variation-settings:"opsz" 32;letter-spacing:-.005em;margin:0;
  font-weight:400;transition:font-size .18s ease}
/* rendered as caps rather than authored as caps, so the underlying text stays
   normal title case for anyone copying it or using a screen reader */
.mh-t b{font-weight:600;text-transform:uppercase;letter-spacing:.01em}
/* "Historical Archive" set apart from the organisation's name, so the lockup
   says what this site is without the wordmark becoming one long run of words.
   Letter-spacing is lighter than a short single word would want, because
   "Historical Archive · 1948–2026" is a much longer string to track out. */
.mh-t-mark{display:block;font-family:var(--text);font-size:.56em;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  margin-top:.32em;max-height:1.4em;white-space:nowrap;
  transition:max-height .18s ease,opacity .18s ease,margin-top .18s ease}
.mh-t-dot{margin:0 .5em;opacity:.7}

.mh-home{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:#fff;
  border-radius:var(--radius);padding:.2rem .4rem;margin:-.2rem -.4rem}
/* scoped .masthead .mh-home so it outranks .masthead a:hover (0,2,1) — a bare
   .mh-home:hover (0,2,0) loses and the wordmark turns gold on hover */
.masthead .mh-home:hover,.masthead .mh-home:focus-visible{background:rgba(255,255,255,.09);
  color:#fff}
.mh-search{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;
  flex:0 1 22rem;min-width:11rem}
.mh-q{flex:1 1 auto;min-width:0;font:inherit;font-size:var(--fs-300);
  padding:.44rem .7rem;color:var(--n-900);background:#fff;
  border:1px solid transparent;border-radius:var(--radius);
  transition:padding .18s ease,font-size .18s ease,box-shadow .14s ease}
.mh-q::placeholder{color:var(--n-500)}
.mh-q:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mh-go{font:inherit;font-size:var(--fs-200);font-weight:600;letter-spacing:.02em;
  cursor:pointer;padding:.46rem .85rem;color:var(--indigo-900);background:var(--gold);
  border:1px solid var(--gold);border-radius:var(--radius);white-space:nowrap;
  transition:padding .18s ease,font-size .18s ease,background .14s ease}
.mh-go:hover,.mh-go:focus-visible{background:#fff;border-color:#fff}

/* ── nav ────────────────────────────────────────────────────────────────── */
nav.main{position:relative;background:var(--n-100);
  border-bottom:1px solid var(--n-300);padding:.4rem var(--s-5);
  transition:padding .18s ease}
nav.main ul{max-width:var(--content-w);margin:0 auto;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.1rem var(--s-5);font-size:var(--fs-300)}
nav.main a{text-decoration:none;padding:.35rem 0;display:inline-block;
  color:var(--indigo-600);font-weight:500;
  border-bottom:2px solid transparent}
nav.main a:hover{border-bottom-color:var(--n-400);color:var(--indigo-500)}
nav.main a[aria-current=page]{border-bottom-color:var(--gold);font-weight:600;
  color:var(--n-900)}

/* static keeps the <li> out of the containing-block chain so the panel spans
   the whole nav bar, not the width of the word "Browse" */
.nav-browse-li{position:static}
.nb-sum{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.34rem;
  padding:.35rem 0;font-size:var(--fs-300);font-weight:500;color:var(--indigo-600);
  border-bottom:2px solid transparent;-webkit-tap-highlight-color:transparent}
.nb-sum::-webkit-details-marker{display:none}
.nb-sum::marker{content:""}
.nb-sum:hover{border-bottom-color:var(--n-400)}
.nb-sum.in-section{font-weight:600;color:var(--n-900);border-bottom-color:var(--gold)}
/* the chevron leads the label, so it sits where the other nav items carry their
   icon and the row reads consistently. Its own margin matches .ico-lead. */
.nb-chev{width:.38rem;height:.38rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-.14em) rotate(45deg);
  transition:transform .16s ease;margin-right:.3em;flex:none}
.nav-browse[open] .nb-sum .nb-chev{transform:translateY(.06em) rotate(-135deg)}
.nav-panel{position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--n-0);border-top:1px solid var(--n-300);
  border-bottom:1px solid var(--n-300);box-shadow:0 18px 34px -12px rgba(26,20,66,.22);
  padding:var(--s-5) var(--s-5) var(--s-5)}
/* scoped under nav.main: .nb-grid is itself a <ul> inside nav.main, so the
   nav.main ul rules (0,1,2) would otherwise win and force flex — and
   display:none inside the mobile drawer */
nav.main .nb-grid{max-width:var(--content-w);margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.2rem var(--s-5);font-size:var(--fs-300);width:auto;flex-direction:row}
nav.main .nb-grid li{margin:0;width:auto}
/* all scoped under nav.main to outrank nav.main a (0,1,2) and
   nav.main a[aria-current=page] (0,2,2) */
nav.main .nav-panel a{display:block;padding:.6rem .7rem;border-radius:var(--radius);
  border-bottom:0;text-decoration:none;color:var(--n-900);font-weight:400}
nav.main .nav-panel a:hover,nav.main .nav-panel a:focus-visible{background:var(--indigo-50)}
nav.main .nav-panel a[aria-current=page]{background:var(--indigo-50);
  box-shadow:inset 3px 0 0 var(--gold);border-bottom:0;font-weight:400}
.nb-l{font-family:var(--display);font-weight:600;font-size:1.02rem;
  font-variation-settings:"opsz" 16;color:var(--indigo-600)}
.nb-n{color:var(--n-600);font-size:var(--fs-100);margin-left:.5rem;
  font-variant-numeric:tabular-nums}
.nb-d{display:block;color:var(--n-600);font-size:var(--fs-200);line-height:1.45;
  margin-top:.15rem}

/* compact header on scroll */
.site-head.is-compact .masthead{padding:.4rem var(--s-5)}
.site-head.is-compact .mh-logo{width:32px}
.site-head.is-compact .mh-t{font-size:.95rem}
.site-head.is-compact .mh-t-mark{max-height:0;opacity:0;margin-top:0;overflow:hidden}
.site-head.is-compact nav.main{padding:.25rem var(--s-5)}
.site-head.is-compact .mh-search{flex-basis:18rem}
.site-head.is-compact .mh-q,.site-head.is-compact .mh-go{padding:.28rem .6rem;
  font-size:var(--fs-200)}
.site-head.is-compact .mh-home{gap:var(--s-2)}

/* hamburger (mobile) */
.nav-toggle{display:none;align-items:center;gap:var(--s-2);background:none;border:0;
  color:var(--n-900);font:inherit;font-size:var(--fs-300);font-weight:600;
  padding:.4rem .2rem;cursor:pointer;margin-left:auto}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block;width:22px;height:2px;background:var(--indigo-600);border-radius:1px;
  transition:transform .18s ease,opacity .18s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle.is-open .nav-toggle-bars{background:transparent}
.nav-toggle.is-open .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.nav-toggle.is-open .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

/* ── hero (homepage only) ───────────────────────────────────────────────── */
.hero{background:var(--n-100);border-bottom:1px solid var(--n-300)}
.hero-in{max-width:var(--content-w);margin:0 auto;
  padding:clamp(1.5rem,3vw,2.5rem) var(--s-5) clamp(2rem,4.5vw,3.5rem)}
.hero-kicker{font-size:var(--fs-300);letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--indigo-600);margin:0 0 var(--s-4)}
.hero-kicker::after{content:"";display:block;width:3rem;height:2px;
  background:var(--gold);margin-top:var(--s-3)}
.hero-statement{font-family:var(--display);font-size:var(--fs-800);line-height:1.06;
  font-weight:500;font-variation-settings:"opsz" 72;
  letter-spacing:-.021em;margin:0 0 var(--s-5);
  /* text-wrap:balance does not fill the container — it finds the fewest lines
     the text needs and then evens their lengths, which for a long headline in
     a big font meant three short lines that all stopped well short of the
     right edge. This is the hero's own <h1>, so it also has to override the
     h1,h2,h3,h4 rule below, which sets balance for every heading on the site. */
  text-wrap:wrap;
  color:var(--n-900)}
.hero-statement em{font-style:normal;color:var(--indigo-600)}
.hero-claim{font-size:var(--fs-500);line-height:1.5;color:var(--n-700);
  margin:0 0 var(--s-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
  margin-top:var(--s-5)}
/* ── buttons ────────────────────────────────────────────────────────────── */
.btn-primary,.btn-ghost,.btn-detail{display:inline-flex;align-items:center;gap:.45rem;
  font:inherit;font-weight:600;letter-spacing:.01em;text-decoration:none;
  border-radius:var(--radius);white-space:nowrap;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{font-size:var(--fs-400);padding:.7rem 1.35rem;
  background:var(--indigo-600);color:#fff;border:1px solid var(--indigo-600)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--indigo-800);
  border-color:var(--indigo-800);color:#fff;text-decoration:none}
.btn-ghost{font-size:var(--fs-300);padding:.65rem 1.1rem;background:transparent;
  color:var(--indigo-600);border:1px solid var(--n-400)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--n-0);
  border-color:var(--indigo-600);text-decoration:none}
.btn-detail{font-size:var(--fs-200);padding:.42rem .85rem;
  background:transparent;color:var(--indigo-600);border:1px solid var(--n-300)}
.btn-detail:hover,.btn-detail:focus-visible{background:var(--indigo-600);
  border-color:var(--indigo-600);color:#fff;text-decoration:none}
.btn-reset{font:inherit;font-size:var(--fs-200);padding:.36rem .8rem;cursor:pointer;
  background:var(--n-0);border:1px solid var(--n-300);border-radius:var(--radius);
  color:var(--n-600);transition:background .15s ease,color .15s ease}
.btn-reset:hover{background:var(--n-100);color:var(--n-900)}

/* ── counts ─────────────────────────────────────────────────────────────── */
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:var(--s-4) var(--s-5);margin:var(--s-6) 0;padding:var(--s-5) 0;list-style:none;
  border-top:1px solid var(--n-300);border-bottom:1px solid var(--n-300)}
.counts li{font-size:var(--fs-200);color:var(--n-600);line-height:1.4}
/* the date-range item is much the widest value, so the display size has to be
   able to shrink or it wraps mid-range and knocks the row out of line */
.counts b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,1.1rem + .7vw,1.8rem);
  font-variation-settings:"opsz" 40;color:var(--indigo-600);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:.2rem;
  white-space:nowrap}

/* ── cards and grids ────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:var(--s-4)}
.card{border:1px solid var(--n-300);background:var(--n-0);border-radius:var(--radius-lg);
  padding:var(--s-4) var(--s-4) var(--s-5);
  transition:border-color .15s ease,box-shadow .15s ease}
.card:hover{border-color:var(--n-400);box-shadow:0 6px 18px -10px rgba(26,20,66,.22)}
.card h3{margin:0 0 var(--s-2);font-size:1.02rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.card p:last-child{margin-bottom:0}

/* the quiet secondary directory on the homepage */
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:var(--s-1) var(--s-5);list-style:none;padding:0;margin:var(--s-4) 0 0}
.doors a{display:block;padding:var(--s-3) var(--s-3) var(--s-3) 0;
  text-decoration:none;color:var(--n-900);border-bottom:1px solid var(--n-200)}
.doors a:hover{color:var(--indigo-600)}
.doors a:hover .door-l{text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--gold)}
.door-l{font-family:var(--display);font-weight:600;font-size:1.02rem;
  font-variation-settings:"opsz" 16;color:var(--indigo-600)}
.door-n{color:var(--n-600);font-size:var(--fs-100);margin-left:.5rem;
  font-variant-numeric:tabular-nums}
.door-d{display:block;color:var(--n-600);font-size:var(--fs-200);line-height:1.45;
  margin-top:.1rem}

ul.plain{list-style:none;padding:0;margin:var(--s-4) 0}
ul.plain li{padding:var(--s-3) 0;border-bottom:1px solid var(--n-200)}
ul.plain li:first-child{border-top:1px solid var(--n-200)}

/* ── tables ─────────────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:var(--fs-300);
  margin:var(--s-4) 0;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--n-200);
  vertical-align:top}
th{background:var(--n-100);font-weight:600;font-size:var(--fs-200);
  letter-spacing:.04em;text-transform:uppercase;color:var(--n-700);
  border-bottom:1px solid var(--n-300);position:sticky;top:0;z-index:1}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--n-0)}
td a{text-decoration:none}
td a:hover{text-decoration:underline;text-decoration-thickness:2px}
td.nowrap{white-space:nowrap}

/* ── article furniture ──────────────────────────────────────────────────── */
.citation{background:var(--n-100);border-left:3px solid var(--indigo-600);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s-4) var(--s-4);font-size:var(--fs-300);line-height:1.55;
  color:var(--n-800);margin:var(--s-4) 0}
.archivist{background:var(--indigo-50);border:1px solid var(--indigo-100);
  border-left:4px solid var(--indigo-400);border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s-4) var(--s-5);margin:var(--s-6) 0}
.archivist h3{margin:0 0 var(--s-2);font-family:var(--text);font-size:var(--fs-100);
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--indigo-600)}
.archivist p{margin:0}
.note{background:var(--n-100);border:1px solid var(--n-300);border-radius:var(--radius);
  padding:var(--s-4);font-size:var(--fs-300);line-height:1.55;color:var(--n-700);
  margin:var(--s-5) 0}
.note strong{color:var(--n-900)}

/* the page scan, treated as an exhibit rather than a bordered image */
figure{margin:var(--s-5) 0}
figure img{border:1px solid var(--n-300);background:#fff;display:block;
  border-radius:2px}
figcaption{font-size:var(--fs-200);color:var(--n-600);margin-top:var(--s-3);
  line-height:1.5}
.exhibit{margin:var(--s-6) 0;background:var(--n-100);border:1px solid var(--n-300);
  border-radius:var(--radius-lg);padding:var(--s-5)}
.exhibit img{margin:0 auto;box-shadow:0 4px 20px -8px rgba(26,20,66,.28)}
.exhibit figcaption{margin:var(--s-4) auto 0;padding-top:var(--s-3);
  border-top:1px solid var(--n-300)}

/* the masthead of a document page: what it is, where it came from, when */
.doc-head{margin:0 0 var(--s-6);padding-bottom:var(--s-4);
  border-bottom:2px solid var(--n-300)}
.doc-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  font-size:var(--fs-200);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--n-600);margin:0;font-variant-numeric:tabular-nums}
.doc-line a{color:var(--indigo-600);text-decoration:none}
.doc-line a:hover{text-decoration:underline;text-decoration-thickness:2px}
.doc-line .sep{color:var(--n-400)}
.doc-cite{margin:var(--s-3) 0 0;font-size:var(--fs-300);line-height:1.55;
  color:var(--n-700)}
.doc-cite .flag{vertical-align:baseline}

/* the "explore onward" block at the foot of every detail page */
.onward{margin:var(--s-7) 0 0;padding-top:var(--s-5);border-top:2px solid var(--n-300)}
.onward h2{font-size:var(--fs-100);letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--text);font-weight:700;color:var(--n-600);border:0;
  margin:0 0 var(--s-4);padding:0}
.onward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:var(--s-5)}
.onward h3{font-size:var(--fs-200);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--text);font-weight:600;color:var(--n-600);margin:0 0 var(--s-2)}
.onward ul{list-style:none;padding:0;margin:0;font-size:var(--fs-300)}
.onward li{padding:.2rem 0}
/* ul.plain gives every item a rule and a first-child top border; inside an
   onward column that reads as a table where a list is wanted */
.onward ul.plain{margin:0}
.onward ul.plain li{border:0;padding:.22rem 0}
.onward .meta{display:block}

/* ── flags ──────────────────────────────────────────────────────────────── */
.flag{display:inline-block;font-family:var(--text);font-size:var(--fs-100);
  letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:.16rem .5rem;border-radius:3px;vertical-align:.08em;white-space:nowrap;
  line-height:1.5}
.flag-ref{background:var(--gold);color:#2b2200}
.flag-unknown{background:var(--n-100);color:var(--n-700);border:1px solid var(--n-300)}
.flag-ok{background:var(--sage);color:#20301a}
.flag-era{background:var(--indigo-600);color:#fff}
.flag-warn{background:#8f2f2f;color:#fff}
.flag-soft{background:var(--n-100);border:1px solid var(--n-300);color:var(--n-700);
  font-weight:500;text-transform:none;letter-spacing:.02em}
a.flag{text-decoration:none;cursor:help;box-shadow:inset 0 -2px 0 rgba(0,0,0,.28)}
a.flag:hover,a.flag:focus-visible{box-shadow:inset 0 -3px 0 rgba(0,0,0,.55)}

.legend{margin:var(--s-4) 0}
.legend dt{margin-top:var(--s-4)}
.legend dt .flag{cursor:help}
.legend dd{margin:var(--s-2) 0 0;color:var(--n-700)}

/* ── timeline ───────────────────────────────────────────────────────────── */
.era-band{margin:var(--s-8) 0 var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--indigo-800);color:#fff;border-radius:var(--radius-lg);
  border-left:5px solid var(--gold)}
.era-band h2{border:0;margin:0;padding:0;color:#fff;font-size:var(--fs-600);
  font-variation-settings:"opsz" 36}
.era-band p{margin:var(--s-1) 0 0;font-size:var(--fs-200);
  color:rgba(255,255,255,.76);font-variant-numeric:tabular-nums}

.tl{list-style:none;padding:0;margin:0 0 0 .4rem;
  border-left:2px solid var(--n-300)}
.tl li{position:relative;margin:0 0 var(--s-5);padding:0 0 0 var(--s-5);
  scroll-margin-top:var(--sticky-offset,5.6rem)}
.tl li::before{content:"";position:absolute;left:-7px;top:.9rem;width:12px;height:12px;
  background:var(--n-50);border:2px solid var(--indigo-600);border-radius:50%}
.tl-card{background:var(--n-0);border:1px solid var(--n-300);border-radius:var(--radius-lg);
  padding:var(--s-4) var(--s-5);transition:border-color .15s ease,box-shadow .15s ease}
.tl-card:hover{border-color:var(--n-400);box-shadow:0 6px 18px -10px rgba(26,20,66,.22)}
.tl .d{display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:var(--fs-100);letter-spacing:.09em;text-transform:uppercase;
  color:var(--n-600);margin-bottom:var(--s-2)}
.tl-h{margin:0 0 var(--s-2);font-family:var(--display);font-size:1.14rem;
  font-weight:600;font-variation-settings:"opsz" 24;
  line-height:1.28;letter-spacing:-.008em;color:var(--n-900)}
.tl-h a{color:inherit;text-decoration:none}
.tl-h a:hover{text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--gold)}
.tl-desc{margin:0 0 var(--s-3);color:var(--n-700);font-size:var(--fs-300);
  line-height:1.58}
.tl-card .meta{margin:0;padding-top:var(--s-3);border-top:1px solid var(--n-200)}

/* ── incident cards ─────────────────────────────────────────────────────── */
/* .grid-inc must stay after .grid — both are single-class selectors, so this
   one only wins on source order. The inner min() keeps a card from overflowing
   a narrow phone. */
.grid-inc{grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr));
  gap:var(--s-4)}
.inc-card{display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5) var(--s-5) var(--s-4)}
/* the display:flex above beats the UA [hidden]{display:none}, so filtering
   needs this or hidden cards stay on screen */
.inc-card[hidden]{display:none}
.inc-when{margin:0;display:block;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:var(--fs-100);letter-spacing:.09em;text-transform:uppercase;
  color:var(--n-600)}
.inc-h{margin:0;font-family:var(--display);font-size:1.1rem;line-height:1.3;
  font-weight:600;font-variation-settings:"opsz" 24;letter-spacing:-.008em}
.inc-h a{color:var(--n-900);text-decoration:none}
.inc-h a:hover,.inc-h a:focus-visible{text-decoration:underline;
  text-decoration-thickness:2px;text-decoration-color:var(--gold)}
.inc-sum{margin:0;font-size:var(--fs-300);line-height:1.55;color:var(--n-700)}
.inc-meta{margin:0}
.inc-meta strong{color:var(--n-900);font-weight:600}
.inc-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:var(--s-1) 0 0;padding:0;
  list-style:none}
/* margin-top:auto pins the footer down so buttons line up across a row */
.inc-foot{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--n-200);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  flex-wrap:wrap}
.inc-foot .meta{font-size:var(--fs-100)}

/* ── browse / filter bar ────────────────────────────────────────────────── */
.filters,.browse{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;
  margin:var(--s-4) 0;font-size:var(--fs-300);padding:var(--s-3) var(--s-4);
  background:var(--n-100);border:1px solid var(--n-300);border-radius:var(--radius-lg)}
.filters label,.browse label{display:inline-flex;align-items:center;gap:var(--s-2);
  color:var(--n-700);font-size:var(--fs-200);letter-spacing:.02em}
.filters select,.filters input,.browse select,.browse input{font:inherit;
  font-size:var(--fs-300);padding:.36rem .5rem;color:var(--n-900);
  border:1px solid var(--n-300);background:var(--n-0);border-radius:var(--radius)}
/* the search icon sits inside the field, so it reads as part of the control
   rather than as another item in the filter row */
.browse-field{position:relative;display:inline-flex;align-items:center;
  flex:1 1 14rem;min-width:11rem}
.browse-field .ico{position:absolute;left:.55rem;pointer-events:none}
.browse-field .browse-q{width:100%;padding-left:1.9rem}
.browse-q{min-width:0}
.browse-q::placeholder{color:var(--n-500)}
/* the label already sets a gap; ico-lead's own margin would double it */
.filters label .ico-lead,.browse label .ico-lead{margin-right:0}
.f-count{margin-left:auto;font-variant-numeric:tabular-nums}

/* ── map ────────────────────────────────────────────────────────────────── */
/* Inline SVG drawn at build time from committed data. No tiles, no library, no
   third-party requests — so it works offline, with JavaScript off, and without
   telling anyone which incident a visitor is reading about. */
.mapwrap{margin:var(--s-5) 0;background:var(--n-100);border:1px solid var(--n-300);
  border-radius:var(--radius-lg);padding:var(--s-4) var(--s-4) var(--s-3)}
.map{display:block;width:100%;height:auto;max-height:34rem;
  background:var(--n-0);border-radius:var(--radius)}
.mapwrap.is-tall .map{max-height:none}

/* the coastline carries the whole shape of the region, so it is the one line
   allowed to be dark; everything else stays quieter than it */
.m-coast{fill:none;stroke:var(--n-600);stroke-width:1.1;
  stroke-linejoin:round;stroke-linecap:round}
.m-water{fill:none;stroke:var(--sky);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.m-trail{fill:none;stroke:var(--green);stroke-width:1.6;
  stroke-dasharray:5 3;stroke-linejoin:round;stroke-linecap:round}

/* radius scales with article count, so the map shows where the work actually
   happened rather than treating every place as equally significant */
.m-pin{fill:var(--indigo-600);fill-opacity:.72;stroke:var(--n-0);stroke-width:1.2;
  transition:fill-opacity .12s ease}
a:hover .m-pin,a:focus-visible .m-pin{fill-opacity:1;stroke-width:2}
.m-pin.is-focus{fill:var(--gold);fill-opacity:1;stroke:var(--indigo-900);stroke-width:2}
.map a:focus-visible{outline:2px solid var(--indigo-600);outline-offset:2px}

.m-lbl{font-family:var(--text);font-size:12px;font-weight:500;fill:var(--n-800);
  paint-order:stroke;stroke:var(--n-0);stroke-width:3.5;stroke-linejoin:round;
  pointer-events:none}
.m-lbl.is-focus{font-weight:700;fill:var(--indigo-900);font-size:14px}

.map-credit{margin:var(--s-3) 0 0;font-size:var(--fs-100);line-height:1.5}
.map-credit a{color:var(--n-700)}

/* a small locator beside the text on a place page */
.mapwrap.is-locator{margin:0 0 var(--s-5);padding:var(--s-3)}
.mapwrap.is-locator .map{max-height:15rem}
.mapwrap.is-locator .map-credit{margin-top:var(--s-2)}

/* zoom and pan, wired up by assets/map.js — none of this exists with JS off.
   pan-y keeps one-finger touch scrolling the page; two fingers move the map. */
.map-box{position:relative}
.map-box .map{touch-action:pan-y;cursor:grab}
.map-box .map a{cursor:pointer}
.map-box .map.is-pan,.map-box .map.is-pan a{cursor:grabbing}
.map-box .map:focus-visible{outline:2px solid var(--indigo-600);outline-offset:2px}
.map-ctl{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;
  gap:4px;z-index:2}
.map-btn{width:32px;height:32px;border:1px solid var(--n-300);border-radius:var(--radius);
  background:var(--n-0);color:var(--n-800);font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.1)}
.map-btn:hover{background:var(--n-100)}
.map-btn:disabled{opacity:.35;cursor:default}
.map-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(23,26,43,.5);color:var(--n-0);font-size:var(--fs-200);font-weight:500;
  text-align:center;padding:var(--s-3);border-radius:var(--radius);
  opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1}
.map-hint.show{opacity:1}

@media (max-width:640px){
  .mapwrap{padding:var(--s-3);margin-left:calc(-1 * var(--s-2));
    margin-right:calc(-1 * var(--s-2))}
  .m-lbl{font-size:15px}
}

/* ── lineage chart ──────────────────────────────────────────────────────── */
/* Overlapping name-span bars on the lineage page, built from the same records
   as the table beside it. Pure HTML/CSS: no JS, survives print. */
.lg-chart{margin:var(--s-5) 0;padding:var(--s-4);background:var(--n-100);
  border:1px solid var(--n-300);border-radius:var(--radius-lg)}
.lg-axis{position:relative;height:1.1rem}
.lg-yr{position:absolute;transform:translateX(-50%);font-size:var(--fs-100);
  color:var(--n-600);font-variant-numeric:tabular-nums}
.lg-row{display:block;padding:var(--s-2) 0 var(--s-1);text-decoration:none}
.lg-name{display:block;font-size:var(--fs-200);font-weight:500;color:var(--n-900);
  margin-bottom:3px}
.lg-row:hover .lg-name,.lg-row:focus-visible .lg-name{color:var(--indigo-800);
  text-decoration:underline}
.lg-years{font-weight:400;color:var(--n-600);font-size:var(--fs-100);
  font-variant-numeric:tabular-nums}
.lg-track{position:relative;display:block;height:14px}
.lg-grid{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--n-300);
  opacity:.7}
.lg-bar{position:absolute;top:2px;bottom:2px;border-radius:3px;
  background:var(--indigo-400);opacity:.5;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.lg-row:hover .lg-bar,.lg-row:focus-visible .lg-bar{opacity:.75}
/* the stretch with no organised team: an outline, not a name */
.lg-bar.is-unnamed{background:none;border:2px dashed var(--indigo-400);opacity:.8}
.lg-tick{position:absolute;top:4px;bottom:4px;width:2px;border-radius:1px;
  background:var(--indigo-800);
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
@media (max-width:640px){
  .lg-yr:nth-child(even){display:none}
}

/* ── year scrubber ──────────────────────────────────────────────────────── */
.yr-scrub-wrap{position:sticky;top:var(--site-head-h,0);z-index:20;
  background:var(--n-50);margin:0 0 var(--s-5)}
.yr-scrub{position:relative;border-bottom:1px solid var(--n-300);
  box-shadow:0 6px 12px -8px rgba(26,20,66,.25);padding:1.5rem 1.2rem .5rem}
.yr-bubble{position:absolute;top:.3rem;transform:translateX(-50%);
  background:var(--indigo-800);color:#fff;font-size:var(--fs-100);font-weight:600;
  letter-spacing:.04em;padding:.14rem .55rem;border-radius:3px;white-space:nowrap;
  pointer-events:none;font-variant-numeric:tabular-nums}
.yr-bubble::after{content:"";position:absolute;left:50%;top:100%;
  transform:translateX(-50%);border:4px solid transparent;
  border-top-color:var(--indigo-800)}
.yr-range{-webkit-appearance:none;appearance:none;width:100%;height:1.6rem;
  background:transparent;margin:0;display:block;position:relative;z-index:2}
.yr-range::-webkit-slider-runnable-track{height:3px;background:var(--n-300);border-radius:2px}
.yr-range::-moz-range-track{height:3px;background:var(--n-300);border-radius:2px}
.yr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;
  margin-top:-7px;border-radius:50%;background:var(--indigo-600);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--indigo-600);cursor:grab}
.yr-range::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:var(--indigo-600);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--indigo-600);cursor:grab}
.yr-range:active::-webkit-slider-thumb{cursor:grabbing}
.yr-ticks{position:relative;height:1.3rem;margin:.15rem 0 0}
.yr-tick{position:absolute;top:0;width:1px;height:5px;background:var(--n-300);
  transform:translateX(-.5px)}
.yr-tick-lbl{height:8px;background:var(--n-400)}
.yr-tick span{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-100);color:var(--n-600);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── search ─────────────────────────────────────────────────────────────── */
.searchbox{width:100%;max-width:34rem;font:inherit;padding:.7rem .85rem;
  border:1px solid var(--n-300);background:var(--n-0);border-radius:var(--radius);
  transition:border-color .14s ease}
.searchbox:focus{border-color:var(--indigo-600)}
mark{background:var(--gold);color:#2b2200;padding:0 .12em;border-radius:2px}
.snippet{font-size:var(--fs-300);color:var(--n-700)}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.site{border-top:2px solid var(--gold);background:var(--indigo-900);color:#fff;
  padding:var(--s-7) var(--s-5) var(--s-7);margin-top:var(--s-8);font-size:var(--fs-200)}
footer.site a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
footer.site a:hover{color:var(--gold);text-decoration-color:var(--gold)}
footer.site .f-in{max-width:var(--content-w);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-5) var(--s-6)}
footer.site h2{font-family:var(--text);color:var(--gold);border:0;padding:0;
  font-size:var(--fs-100);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin:0 0 var(--s-3)}
footer.site p{margin:0 0 var(--s-2);color:rgba(255,255,255,.82);line-height:1.55}
footer.site .flag{vertical-align:baseline}

/* ── external links to the publisher ────────────────────────────────────── */
.readorig{display:inline-block;margin-top:var(--s-2);font-weight:600}
.extlinks li{padding:var(--s-3) 0}
.extlinks .url{word-break:break-all;font-size:var(--fs-100);color:var(--n-600)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:820px){
  nav.main{display:flex;flex-wrap:wrap;align-items:center}
  .nav-toggle{display:flex}
  nav.main ul{display:none;width:100%;flex-direction:column;gap:0;
    padding-top:var(--s-2);flex-basis:100%}
  nav.main ul.open{display:flex}
  nav.main ul li{width:100%}
  nav.main a{display:block;padding:.65rem .2rem;border-bottom:1px solid var(--n-200)}
  nav.main a[aria-current=page]{border-bottom-color:var(--n-200);
    box-shadow:inset 3px 0 0 var(--gold)}
  .nav-browse-li{width:100%;position:static}
  /* the chevron leads on desktop, so it leads in the drawer too rather than
     being pushed to the far edge — the two should not disagree */
  .nb-sum{display:flex;justify-content:flex-start;width:100%;
    padding:.65rem .2rem;border-bottom:1px solid var(--n-200)}
  .nb-sum.in-section{border-bottom-color:var(--n-200);box-shadow:inset 3px 0 0 var(--gold)}
  /* inline in the drawer rather than a floating overlay */
  .nav-panel{position:static;background:transparent;box-shadow:none;
    border-top:0;border-bottom:1px solid var(--n-200);padding:.15rem 0 .45rem .9rem}
  nav.main .nb-grid{display:block;gap:0;width:100%}
  nav.main .nb-grid li{width:100%}
  nav.main .nav-panel a{padding:.5rem .3rem;border-bottom:0}
  .nb-d{font-size:var(--fs-100)}
}
@media (max-width:640px){
  html{font-size:16px}
  main{padding:var(--s-5) var(--s-4) var(--s-7)}
  .hero-in{padding:var(--s-6) var(--s-4) var(--s-5)}
  .hero-statement{max-width:none}
  .counts{gap:var(--s-3) var(--s-4)}
  .counts b{font-size:1.4rem}
  table{font-size:var(--fs-200)}
  .inc-card{padding:var(--s-4)}
  .inc-foot{align-items:stretch}
  .btn-detail{justify-content:center;flex:1 1 auto}
  .btn-primary{width:100%;justify-content:center}
  .filters,.browse{gap:var(--s-2);padding:var(--s-3)}
  .f-count{margin-left:0;flex-basis:100%}
  .exhibit{padding:var(--s-4)}
  .onward-grid{gap:var(--s-4)}
}
@media (max-width:560px){
  .yr-scrub{padding:1.3rem 1rem .4rem}
  .yr-tick span{font-size:.6rem}
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important}
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
  nav.main,.searchbox,.mh-search,.filters,.browse,.btn-detail,.btn-primary,
  .btn-ghost,.yr-scrub-wrap,.onward{display:none}
  body{background:#fff;font-size:11pt}
  .site-head{position:static}
  .masthead,footer.site,.era-band{background:#fff;color:#000;border-color:#000}
  .masthead a,footer.site a,.era-band h2,.era-band p,footer.site h2,footer.site p{color:#000}
  .hero{background:#fff;border-bottom:1px solid #000}
  .card,.tl-card,.exhibit{break-inside:avoid;box-shadow:none}
}