/* ============ case drawer: folders on a desk blotter ============ */
  .drawer { margin-top: 40px; }

  /* the rail the folders hang from */
  .rail {
    display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 10px 12px 0; background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
    box-shadow: inset 0 -8px 12px -10px rgba(0,0,0,.9);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .rail::-webkit-scrollbar { height: 6px; }
  .rail::-webkit-scrollbar-thumb { background: var(--line); }
  .rail::-webkit-scrollbar-track { background: transparent; }
  .tab {
    flex: 0 0 auto; display: grid; gap: 4px; justify-items: start;
    padding: 9px 15px 10px; background: var(--bg); border: 1px solid var(--line); border-bottom: 0;
    color: var(--ink); font: 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer;
    transition: background .18s var(--ease-out, ease-out), color .18s var(--ease-out, ease-out), transform .18s var(--ease-out, ease-out);
  }
  .tab-code { font-variant-numeric: tabular-nums; }
  .tab-place { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
  .tab:hover { border-color: var(--glow); }
  .tab[aria-selected="true"] {
    background: var(--paper); border-color: var(--paper-line); color: var(--paper-ink);
    transform: translateY(-3px); padding-bottom: 13px;
  }
  .tab[aria-selected="true"] .tab-code { font-weight: 700; }
  .tab[aria-selected="true"] .tab-place { color: var(--paper-ink-dim); }

  /* the blotter: a photograph of dark leather, blended into the palette */
  .desk {
    position: relative;
    padding: clamp(20px, 3vw, 42px) clamp(18px, 3vw, 42px) clamp(62px, 8vw, 118px);
    background: var(--blotter) url("tex-blotter.jpg") center / cover no-repeat;
    background-blend-mode: soft-light; border: 1px solid var(--line);
  }
  .desk::before {
    content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(198,183,143,.14); pointer-events: none;
  }
  /* desk furniture, photographed and cut out (see postprocess.py). Sized and placed to sit in
     the blotter's margins: they may touch the sheet's edge, never its content.
     Every prop is drawn at one desk scale, 32px to the inch, measured on the object inside its
     frame (each PNG is trimmed to the alpha bbox + an 8px margin, so the CSS width is the frame,
     not the object): pencil 7in long, stamp 1.9in across the base, mug 3.6in across the body.
     Change one width and you break the agreement -- rescale from the inch figure, not by eye.
     The sheet itself is drawn at ~127px to the inch; the props are a deliberate miniature. */
  /* The pencil is the one prop on the sheet rather than the blotter: it lies in the print's
     figure, under the caption, in normal flow — so it grows the print's column instead of
     landing on the docket or the slip, however long the case's text is. */
  .pencil {
    display: block; width: 154px; height: auto; margin: 12px 10% 0 auto; rotate: -12deg;
    pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
  }
  .stampblock {
    position: absolute; left: 3.5%; bottom: 12px; z-index: 4; width: 106px; height: auto; rotate: -7deg;
    pointer-events: none; filter: drop-shadow(0 7px 9px rgba(0,0,0,.6));
  }
  .mug {
    position: absolute; right: 3.5%; bottom: 10px; z-index: 4; width: 159px; height: auto;
    pointer-events: none; filter: drop-shadow(0 9px 12px rgba(0,0,0,.65));
  }
  /* "while you were out" slip — lies on the sheet's reserved lower area, so it can never
     cover a line of the report, however short the case is */
  .slip {
    position: absolute; left: 30%; bottom: 18px; width: min(250px, 34%); z-index: 5; rotate: 2.5deg;
    background: var(--paper-2); color: var(--paper-ink); padding: 14px 16px 16px;
    box-shadow: 0 10px 16px -8px rgba(0,0,0,.62);
  }
  .slip h3 { font: 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink-dim); margin-bottom: 10px; }
  .slip p { font: 20px/1.3 var(--hand); color: #1e2c47; }
  .pin {
    position: absolute; top: -15px; left: 14px; width: 26px; height: auto; z-index: 6; rotate: 8deg;
    pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
  }

  /* the open folder */
  .folder {
    position: relative; z-index: 2; display: grid; align-items: start;
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) minmax(0, 19rem);
    gap: clamp(22px, 2.6vw, 44px);
    background: var(--paper-2) url("prop-ring.jpg") no-repeat left 6px bottom 6px / 195px;
    background-blend-mode: multiply; color: var(--paper-ink);
    border: 1px solid var(--paper-line); padding: clamp(24px, 2.6vw, 38px);
    padding-bottom: clamp(80px, 13vw, 210px);   /* room for the slip lying on the sheet */
    box-shadow: 0 10px 14px -10px rgba(0,0,0,.85), 0 2px 0 rgba(0,0,0,.45);
  }
  .folder::before {
    content: attr(data-tab); position: absolute; top: -23px; left: clamp(24px, 2.6vw, 38px);
    padding: 6px 16px 5px; background: var(--paper); border: 1px solid var(--paper-line); border-bottom: 0;
    font: 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink);
  }
  .folder .stamp, .record-sheet .stamp {
    position: absolute; top: 12px; right: 14px; z-index: 3; rotate: 8deg; padding: 4px 11px;
    border: 2px solid var(--stamp); color: var(--stamp); background: rgba(213,200,165,.5);
    font: 700 12px/1 var(--mono); letter-spacing: .2em; mix-blend-mode: multiply;
  }

  .docket { display: grid; gap: 9px; margin: 0; }
  .docket > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 10px; padding-bottom: 8px;
    border-bottom: 1px dotted rgba(36,39,31,.3); }
  .docket dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink-dim); }
  .docket dd { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }

  .sheet-body h3 { font: 400 clamp(1.3rem, 2.3vw, 1.8rem)/1.2 Georgia, serif; margin-bottom: 14px; }
  .sheet-body p { font-size: 15px; line-height: 1.62; max-width: 70ch; }
  .margin-note {
    margin-top: 20px; font: 18px/1.4 var(--hand); color: #24314f; rotate: -.7deg; max-width: 42ch;
  }
  .sourcing { margin-top: 22px; font-size: 11px; letter-spacing: .04em; color: var(--paper-ink-dim); }
  .sourcing a { color: #1c3a2c; text-underline-offset: 3px; }

  /* evidence print, clipped to the folder */
  .print { position: relative; margin: 0; }
  .print img:not(.clip, .pencil) { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 9px solid #0a0f10; filter: saturate(.72) contrast(1.06); }
  /* author display rules beat the hidden attribute — keep these two honest */
  .print img[hidden], .print figcaption[hidden] { display: none; }
  .no-frame[hidden] { display: none; }
  .print figcaption { margin-top: 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-dim); }
  /* the clip is the one prop not on the desk scale: it is read against the print it holds
     (~1.3in at the print's own scale), so it looks right on the photo and large next to the mug */
  .clip { position: absolute; top: -11px; left: -15px; z-index: 4; width: 66px; height: auto; rotate: 14deg;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
  .no-frame {
    aspect-ratio: 4/3; display: grid; place-content: center; gap: 10px; padding: 22px; text-align: center;
    border: 1px dashed rgba(74,76,58,.5); background: rgba(36,39,31,.05);
  }
  .no-frame b { font: 700 11px/1 var(--mono); letter-spacing: .2em; }
  .no-frame span { font-size: 11px; line-height: 1.5; color: var(--paper-ink-dim); max-width: 24ch; }

  /* redaction bars: the paper version — ink lifts on hover or focus */
  .redact { background: var(--paper-ink); color: transparent; padding: 0 3px; cursor: help; border-radius: 1px;
    transition: background .22s ease-out, color .22s ease-out; }
  .redact:hover, .redact:focus { background: rgba(36,39,31,.1); color: var(--paper-ink); }
  .folder :focus-visible, .rail :focus-visible { outline: 2px solid #1c2a44; outline-offset: 2px; }
  .rail :focus-visible { outline-color: var(--glow); }

  @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes press { from { opacity: 0; transform: scale(1.16) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(8deg); } }
  .folder > * { animation: settle .5s cubic-bezier(.16,1,.3,1) both; }
  .folder .stamp, .record-sheet .stamp { animation: press .38s cubic-bezier(.16,1,.3,1) .1s both; }
  .folder.swap > *, .folder.swap .stamp, .record-sheet.swap > *, .record-sheet.swap .stamp { animation: none; }
  .folder.swap { animation: settle .42s cubic-bezier(.16,1,.3,1) both; }

:root {
  --bg:#090e0e;
  --panel:#101817;
  --line:#2a3531;
  --ink:#d5dbd3;
  --dim:#a5b1a7;
  --glow:#b5d4b6;
  --stamp:#943d2c;
  --mono:"Courier New",monospace;
  --paper:#c6b78f;
  --paper-2:#d7cba8;
  --paper-line:#a89a74;
  --paper-ink:#24271f;
  --paper-ink-dim:#434635;
  --blotter:#0a100f;
  --hand:"Segoe Script","Bradley Hand",cursive;
  /* The page grid, defined once. .section is capped and centred, so its content
     edge is its centring offset plus its own gutter. Any full-bleed element —
     the header, the hero, the footer — that should line up with the body of the
     page uses --page-inset rather than the bare gutter, which only matches while
     the viewport is narrower than --page-max.
     Percentages throughout, never vw: vw includes the scrollbar and a padding
     percentage does not, and that difference is half a scrollbar of drift. It is
     the exact bug this replaced. */
  --page-max:1600px;
  --page-gutter:5.5%;
  --page-inset:calc(max(0px, (100% - var(--page-max)) / 2) + var(--page-gutter));
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  /* Every in-page target — #files, #method, #report, and each #record-/#case-
     deep link — now lands under a fixed header. This is the header's height
     plus a little air, not the 28px that was enough when it scrolled away. */
  scroll-padding-top:118px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4,p,figure {
  margin:0;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
button,input,textarea,select {
  font:inherit;
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
img {
  max-width:100%;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--glow);
  outline-offset:5px;
}
button:disabled {
  cursor:default;
}
button[hidden],[hidden] {
  display:none!important;
}
::selection {
  background:#b5d4b6;
  color:#090e0e;
}
.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;
}
.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  z-index:100;
  padding:12px;
  background:var(--glow);
  color:var(--bg);
}
.skip-link:focus {
  top:10px;
}
.site-header {
  /* fixed, not sticky. Sticky would return the header to the normal flow and
     push the hero down, and the hero being full-bleed *under* the header is the
     whole look. Fixed keeps it out of flow, so nothing below moves. */
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px var(--page-inset);
  gap:28px;
  border-bottom:1px solid #d5dbd324;
  background:linear-gradient(#090e0e70,transparent);
}
/* At the top the header floats over the hero image and barely exists. Once the
   page moves, it is over ordinary text and has to become a surface or the two
   sets of words overlap. nav.js sets this from an IntersectionObserver. */
.site-header.is-stuck {
  background:#090e0ef2;
  border-bottom-color:#d5dbd33d;
  backdrop-filter:blur(10px);
}
@supports not (backdrop-filter:blur(10px)) {
  .site-header.is-stuck {
    background:#070b0b;
  }
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  color:#f0eee2;
  font:700 18px/1.1 var(--mono);
  letter-spacing:.15em;
}
.brand-mark {
  font-size:40px;
  font-weight:400;
  line-height:1;
  color:var(--glow);
}
.brand small {
  display:block;
  font:9px/1.5 var(--mono);
  letter-spacing:.17em;
  margin-top:7px;
  color:#b5c0b4;
}
nav {
  display:flex;
  gap:32px;
  align-items:center;
}
nav a {
  font:12px/1.5 var(--mono);
  text-decoration:none;
  color:#e4e8dd;
}
nav a:hover {
  color:var(--glow);
  text-decoration:underline;
}
.menu-toggle {
  display:none;
}
.hero {
  min-height:760px;
  min-height:min(900px,100svh);
  position:relative;
  display:flex;
  align-items:center;
  padding:145px var(--page-inset) 140px;
  isolation:isolate;
}
.hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-3;
}
/* The still stays the hero's first paint; the loop lies over it and fades in only once it can
   play, so the video never blocks the page and a visitor who wants no motion never fetches it. */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-2;
  opacity:0;
  transition:opacity 1.4s ease-out;
}
.hero-video.playing {
  opacity:1;
}
.motion-toggle {
  border:1px solid #a4b6a460;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  padding:4px 9px;
  margin-left:10px;
}
.motion-toggle:hover {
  border-color:var(--glow);
  color:var(--glow);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#090e0ee6 0%,#090e0e87 42%,#090e0e08 82%),linear-gradient(0deg,var(--bg),transparent 30%,#090e0e25);
}
.hero-copy {
  max-width:870px;
}
.eyebrow {
  font:11px/1.7 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:20px;
}
.hero .eyebrow {
  color:#c8d9c7;
}
.signal {
  width:6px;
  height:6px;
  background:var(--glow);
  display:inline-block;
  margin:0 9px 2px 0;
  box-shadow:0 0 9px #b5d4b677;
}
h1 {
  font:400 clamp(3rem,6.6vw,6.5rem)/1.03 Georgia,serif;
  letter-spacing:-.045em;
  color:#f0eee3;
}
h1 em,h2 em {
  font-weight:400;
  color:var(--glow);
}
/* The two hero sentences size and colour independently. Relative to the h1's own clamp, so
   the headline stays fluid; tune live with index.html?tweak (assets/tweak.js). */
#hero-title .hero-line-1 { font-size:var(--hero-1-size,.54em); color:var(--hero-1-color,#f0eee3); }
#hero-title .hero-line-2 { font-size:var(--hero-2-size,.94em); color:var(--hero-2-color,var(--glow)); }
.hero-intro {
  font-size:18px;
  line-height:1.65;
  color:#e2e4db;
  margin-top:28px;
}
.hero-description {
  font-size:15px;
  color:#b8c3b9;
  max-width:440px;
  margin-top:12px;
}
.hero-actions {
  display:flex;
  gap:30px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:34px;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:14px 22px;
  min-height:48px;
  border:1px solid #8a9d89;
  background:transparent;
  color:var(--ink);
  font:12px/1.4 var(--mono);
  text-decoration:none;
  letter-spacing:.06em;
}
.btn:hover {
  background:#b5d4b616;
  border-color:var(--glow);
}
.btn.primary {
  background:var(--glow);
  color:#132017;
  border-color:var(--glow);
}
.btn.primary:hover {
  background:#d0e6ca;
}
.text-link {
  font:12px/1.6 var(--mono);
  text-decoration:none;
  border-bottom:1px solid #a4b6a460;
  padding-bottom:5px;
}
.text-link:hover {
  color:var(--glow);
}
.hero-bottom {
  position:absolute;
  bottom:26px;
  left:var(--page-inset);
  right:var(--page-inset);
  display:flex;
  justify-content:space-between;
  gap:18px;
  font:10px/1.5 var(--mono);
  letter-spacing:.12em;
  color:#b8c4b8;
}
.hero-bottom span:nth-child(2) {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.hero-bottom a {
  text-decoration:none;
}
.section {
  padding:90px var(--page-gutter);
  max-width:var(--page-max);
  margin:auto;
}
/* The header is position:absolute, which works because index.html opens on a
   full-height hero it can sit over. A page that opens straight into a section —
   timeline.html, findings.html — has nothing to overlay, so the header lands on
   top of that section's own eyebrow. Clear it here rather than per page: index
   is unaffected because its first child is .hero, not .section. */
main>.section:first-child {
  padding-top:132px;
}
@media (max-width:760px) {
  main>.section:first-child {
    padding-top:104px;
  }
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:36px;
}
.section-heading .eyebrow {
  margin-bottom:12px;
}
h2 {
  font:400 clamp(2rem,3.3vw,3.1rem)/1.15 Georgia,serif;
  letter-spacing:-.025em;
  color:#eae9df;
}
.section-heading>p {
  font-size:14px;
  color:var(--dim);
  max-width:320px;
}
.territories {
  padding-top:64px;
}
.territory-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.territory {
  position:relative;
  isolation:isolate;
  min-height:410px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  text-decoration:none;
  border:1px solid #ffffff18;
  padding:30px;
  transition:border-color .2s;
}
.territory:hover {
  border-color:var(--glow);
}
.territory>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .5s ease;
}
.territory:hover>img {
  transform:scale(1.035);
}
.land-territory>img {
  object-position:67% center;
}
.territory:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,#090e0ef5 0%,#090e0e70 53%,#090e0e10);
}
.territory>div {
  width:100%;
}
.territory .eyebrow {
  font-size:9px;
  color:#dae1d5;
  letter-spacing:.1em;
}
.territory h3 {
  font:400 52px/1.15 Georgia,serif;
  color:#f0eee2;
  display:flex;
  justify-content:space-between;
  margin:12px 0;
}
.territory h3 span {
  font:24px/1.8 Arial,sans-serif;
  color:#c6d7c4;
}
.territory p {
  font-size:14px;
  color:#d3dbcf;
}
.territory-count {
  display:block;
  font:10px/1.5 var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#c0ceb9;
  margin-top:22px;
}
.image-label {
  position:absolute;
  top:14px;
  right:14px;
  color:#edf0e6;
  background:#090e0eaa;
  padding:3px 7px;
  font:9px/1.6 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.archive {
  border-top:1px solid var(--line);
}
.archive-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.filters {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
/* The tier is the primary axis, so it takes a row of its own. This container was built for two
   children — one filter group and the search box — and the third one squeezed the three tier
   buttons into a 147px column stacked three deep while the sixteen sub-filters spread across
   857px, which put the hierarchy exactly backwards. */
.tier-filters {
  flex:1 0 100%;
}
.filters button {
  min-height:44px;
  padding:10px 16px;
  background:transparent;
  color:var(--dim);
  border:1px solid transparent;
  font:12px/1.5 var(--mono);
}
.filters button span {
  font-size:10px;
  color:#b7c4b8;
  margin-left:5px;
}
.filters button[aria-pressed=true] {
  background:#28382d;
  color:#e0ecdb;
  border-color:#668068;
}
.filters button:hover {
  border-color:#668068;
}
.search-label {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #5c6c61;
  min-width:270px;
}
.search-label>span[aria-hidden] {
  font-size:25px;
  color:var(--dim);
}
.search-label input {
  background:transparent;
  border:0;
  color:var(--ink);
  padding:10px 0;
  min-width:0;
  width:100%;
  font-size:13px;
}
input::placeholder,textarea::placeholder {
  color:#a0ada3;
  opacity:1;
}
.catalog-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:64px;
  font:10px/1.5 var(--mono);
  color:var(--dim);
  letter-spacing:.08em;
}
.quiet-button {
  border:0;
  background:transparent;
  color:var(--glow);
  font:11px/1.5 var(--mono);
  padding:10px;
}
.case-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:54px 30px;
}
/* One coherent archival stock, with the photographed edges held at their natural scale.
   The center alone stretches: long records cannot stretch the tab or folded corners.
   Keep filters on the paper layer so case photographs and ink retain their real colors. */
.case-card {
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  color:var(--paper-ink);
  /* One inset for every element on the folder's face. It lived in five separate declarations
     and the phone breakpoint only overrode two of them, so the ink walked off the paper. */
  --inset:38px;
  isolation:isolate;
  padding-bottom:62px;
  filter:drop-shadow(0 10px 8px #0006);
  transition:transform .22s cubic-bezier(.16,1,.3,1),filter .22s ease-out;
}
.case-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border:solid transparent;
  border-width:80px 44px 60px;
  border-image:url("folders/archival-folder-v2.webp") 200 110 150 fill / 80px 44px 60px / 0 stretch;
}
.case-card[data-territory="sky"]::before {
  filter:grayscale(.8) sepia(.12) hue-rotate(35deg) brightness(.95);
}
.case-card[data-territory="water"]::before {
  filter:sepia(.28) hue-rotate(42deg) saturate(.55) brightness(.94);
}
.case-card:hover,.case-card:focus-within {
  transform:translateY(-4px);
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.55));
}
.case-card:focus-within {
  outline:2px solid var(--glow);
  outline-offset:4px;
}
.marking {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 var(--inset);
  padding:82px 0 8px;
  border-bottom:2px solid var(--paper-ink);
  font:11px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.marking-file {
  position:absolute;
  top:47px;
  left:44px;
  width:calc((100% - 88px) * .358);
  text-align:center;
  font-size:11px;
  line-height:16px;
  letter-spacing:.09em;
  white-space:nowrap;
  font-weight:700;
}
.marking-rubric {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.marking-territory {
  flex:none;
  padding:1px 8px;
  border:1px solid var(--paper-ink);
  letter-spacing:.2em;
}
.jacket-body {
  position:relative;
  padding:18px var(--inset) 0;
}
/* the print, clipped and taped on rather than built in */
.jacket-print {
  position:relative;
  margin:0 0 20px;
  rotate:-.7deg;
}
.jacket-print img.frame {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#0a0f10;
  border:7px solid #f2ead4;
  box-shadow:0 8px 12px -8px rgba(0,0,0,.75);
  transition:transform .5s;
}
.case-card[data-case="CR-0029"] .jacket-print img.frame {
  object-position:68% center;
}
.case-card:hover .jacket-print img.frame {
  transform:scale(1.015);
}
.jacket-print img.clip {
  position:absolute;
  top:-15px;
  left:-10px;
  width:40px;
  height:auto;
  rotate:12deg;
  z-index:3;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));
}
.jacket-print img.tape {
  position:absolute;
  right:-16px;
  bottom:-12px;
  width:104px;
  height:auto;
  rotate:-19deg;
  z-index:3;
  opacity:.94;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.jacket-print figcaption {
  margin-top:7px;
  font:9px/1.5 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-ink-dim);
}
.case-card h3 {
  font:400 25px/1.15 Georgia,serif;
  margin-bottom:4px;
}
.case-title {
  font:11px/1.5 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-ink-dim);
  margin-bottom:14px;
}
/* the cover sheet: the fields the record already carries, typed into ruled boxes */
.jacket-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(53,50,34,.45);
  margin:0 0 14px;
}
.jacket-form>div {
  padding:7px 2px 8px;
  border-bottom:1px solid rgba(53,50,34,.28);
}
.jacket-form>div:nth-child(odd) {
  padding-right:12px;
  border-right:1px solid rgba(53,50,34,.28);
}
.jacket-form>div:nth-child(even) {
  padding-left:12px;
}
.jacket-form>div.wide {
  grid-column:1/-1;
  padding-inline:0;
  border-right:0;
}
.jacket-form dt {
  font:9px/1.6 var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-ink-dim);
}
.jacket-form dd {
  margin:0;
  font:12.5px/1.45 var(--mono);
  font-variant-numeric:tabular-nums;
}
.card-summary {
  font-size:14px;
  line-height:1.55;
  margin-bottom:16px;
}
/* a photographed rubber-stamp impression, sliced as a frame so the dry ink keeps its grain at
   any label width - the status itself stays CSS text, so every record's wording works */
.jacket-stamp {
  /* Struck on the paper at the foot of the file, not across the print: over a dark photograph
     the multiplied red ink went black and the status became unreadable. It stays in normal flow
     and wraps, because a status is free text - "TESTED · UNRECONCILED" sets 368px wide, which
     absolutely positioned would have hung off the side of a three-column card. */
  align-self:flex-end;
  max-width:calc(100% - var(--inset) * 2);
  margin:2px var(--inset) 14px;
  text-align:center;
  rotate:-6deg;
  padding:11px 20px 10px;
  border:13px solid transparent;
  border-image:url("prop-stampmark.png") 58 / 13px / 0 stretch;
  color:var(--stamp);
  mix-blend-mode:multiply;
  font:700 12px/1 var(--mono);
  letter-spacing:.2em;
  opacity:.9;
}
.card-note {
  font:16px/1.35 var(--hand);
  color:#24314f;
  rotate:-.6deg;
  margin:2px var(--inset) 12px;
}
.card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:auto var(--inset) 0;
  padding-top:11px;
  border-top:2px solid var(--paper-ink);
}
.card-footer small {
  font:9px/1.5 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-ink-dim);
}
.card-open {
  font:700 12px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-ink);
  text-decoration:none;
  white-space:nowrap;
  padding:8px 0;
}
/* the whole jacket is the target; the link keeps the accessible name */
.card-open:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
}
.case-card:hover .card-open {
  text-decoration:underline;
  text-underline-offset:4px;
}
.card-open:focus-visible {
  outline:none;
}
.case-card.selected {
  filter:drop-shadow(0 12px 12px #0009);
}
.case-card.selected .marking-territory {
  background:var(--paper-ink);
  color:#f2ead4;
}
.load-more {
  text-align:center;
  margin-top:36px;
}
/* Mirrors the meta row under the grid, so a filtered list has a control at its foot too. */
.bottom-meta {
  justify-content:flex-end;
  min-height:0;
  margin-top:14px;
}
.empty-state {
  padding:40px;
  border:1px dashed var(--line);
  color:var(--dim);
  margin:16px 0;
}
.reading-room {
  padding-top:86px;
  scroll-margin-top:30px;
}
.reading-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px;
}
.reading-heading .eyebrow {
  margin-bottom:6px;
}
.reading-heading h2 {
  font-size:30px;
}
.reader-tools {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.reader-tools button {
  background:transparent;
  border:1px solid #425248;
  color:#cdd8c7;
  padding:12px;
  font:10px/1.5 var(--mono);
  min-height:44px;
}
.reader-tools button:hover {
  background:#26352b;
}
.copy-status {
  font-size:12px;
  color:var(--dim);
}
.copy-status:not(:empty) {
  margin-bottom:24px;
}
.folder {
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  padding:65px 36px 40px;
  gap:32px;
  box-shadow:0 12px 35px #0005;
  background-size:170px;
}
.folder .stamp, .record-sheet .stamp {
  max-width:85%;
  line-height:1.4;
  font-size:10px;
  letter-spacing:.12em;
  top:15px;
  right:24px;
  rotate:3deg;
  position:absolute;
}
.folder-category {
  font:10px/1.5 var(--mono)!important;
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:14px;
  color:#48513f;
}
.sheet-body h3 {
  font-size:32px;
  line-height:1.15;
}
.sheet-body p {
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.7;
}
.sheet-body .margin-note {
  font:16px/1.6 var(--hand);
  margin-top:20px;
  rotate:0deg;
}
.sheet-body .sourcing {
  font:11px/1.7 var(--mono);
  margin-top:24px;
}
.sourcing a {
  overflow-wrap:anywhere;
}
.print {
  align-self:start;
}
.print img:not(.clip, .pencil) {
  aspect-ratio:4/3;
  object-fit:cover;
  height:auto;
  filter:none;
  border:7px solid #f0e6cb;
  box-shadow:0 4px 12px #24271f25;
}
.print figcaption {
  font:9px/1.6 var(--mono);
  letter-spacing:.05em;
}
.docket {
  grid-column:1/-1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 28px;
  font-family:var(--mono);
  border-top:1px solid #7b795266;
  padding-top:22px;
}
.docket>div {
  grid-template-columns:6rem minmax(0,1fr);
  gap:8px;
}
.docket dt {
  font-size:10px;
}
.docket dd {
  font-size:11px;
}
.slip {
  position:static;
  grid-column:1/-1;
  width:100%;
  max-width:100%;
  padding:18px 22px;
  rotate:-.5deg;
  background:#e4d9b7;
  border-left:2px solid #a99a6a;
  box-shadow:0 4px 8px #24271f15;
  margin:0;
}
.slip h4 {
  font:10px/1.5 var(--mono);
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:8px;
}
.slip p {
  font:16px/1.6 var(--hand);
}
.desk {
  padding:32px 28px 100px;
}
.redact {
  background:#24302710;
  color:inherit;
  border:0;
  border-bottom:1px dotted #646b4c;
  cursor:default;
  padding:0 2px;
  font:inherit;
  display:inline;
  transition:none;
}
.redact:hover,.redact:focus {
  background:#24302718;
  color:inherit;
}
.conceal .redact {
  background:#24271f;
  color:transparent;
  cursor:pointer;
  border-bottom-color:transparent;
}
.conceal .redact:hover,.conceal .redact:focus-visible,.conceal .redact.revealed {
  color:#24271f;
  background:#24302712;
}
.reader-footnote {
  color:var(--dim);
  font:11px/1.7 var(--mono);
  margin-top:22px;
}
.reader-footnote a {
  white-space:normal;
  color:var(--glow);
}
.method {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding-top:100px;
  padding-bottom:100px;
}
.method>div>p:not(.eyebrow),.report>div>p:not(.eyebrow) {
  max-width:470px;
  color:var(--dim);
  font-size:15px;
  margin-top:24px;
}
.method .text-link {
  display:inline-block;
  margin-top:26px;
}
.method-notes {
  display:grid;
  gap:26px;
}
.method-notes article {
  display:flex;
  gap:24px;
  padding-bottom:25px;
  border-bottom:1px solid var(--line);
}
.method-notes article>span {
  font:11px/1.6 var(--mono);
  color:#aab998;
}
.method-notes h3 {
  font:23px/1.3 Georgia,serif;
  color:#e1e6d9;
  margin-bottom:10px;
}
.method-notes p {
  font-size:14px;
  color:var(--dim);
}
.report {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  border-top:1px solid var(--line);
  background:linear-gradient(110deg,#14201980,transparent);
}
.report .privacy-note {
  padding:18px 0 0;
  border-top:1px solid var(--line);
  font:12px/1.8 var(--mono)!important;
}
.report form {
  display:grid;
  gap:21px;
}
.report label {
  display:grid;
  gap:9px;
  font:10px/1.6 var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#bfcdb9;
}
.report input,.report textarea,.report select {
  width:100%;
  max-width:100%;
  min-width:0;
  background:#101716;
  border:1px solid #455348;
  padding:13px;
  color:#e0e6d9;
  font:16px/1.5 Arial,sans-serif;
  border-radius:0;
}
.report textarea {
  resize:vertical;
  min-height:150px;
}
.report button {
  justify-self:start;
}
.form-status {
  font:12px/1.7 var(--mono);
  color:var(--glow);
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  border-top:1px solid var(--line);
  padding:36px var(--page-inset);
  font:10px/1.8 var(--mono);
  color:var(--dim);
}
footer .brand {
  font-size:14px;
}
footer .brand-mark {
  font-size:30px;
}
footer .brand small {
  font-size:8px;
}
@media(max-width:1050px) {
  .hero {
    min-height:760px;
  }
  .site-header {
    padding:25px var(--page-inset);
  }
  nav {
    gap:20px;
  }
  .territory {
    min-height:360px;
    padding:23px;
  }
  .territory .eyebrow {
    font-size:8px;
  }
  .territory p {
    font-size:13px;
  }
  .territory h3 {
    font-size:44px;
  }
  .case-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .section-heading {
    align-items:start;
  }
  .section-heading>p {
    max-width:230px;
  }
  .folder {
    padding:65px 24px 30px;
    gap:26px;
  }
  .sheet-body h3 {
    font-size:27px;
  }
  .docket {
    gap:10px 20px;
  }
  .reading-heading {
    align-items:flex-start;
  }
  .reader-tools {
    max-width:280px;
    justify-content:flex-end;
  }
  .method,.report {
    gap:6%;
  }
}
@media(max-width:700px) {
  .section {
    padding:60px 6%;
  }
  .site-header {
    padding:20px 6%;
    align-items:center;
  }
  .brand {
    font-size:15px;
    gap:10px;
  }
  .brand small {
    font-size:8px;
  }
  .brand-mark {
    font-size:32px;
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:16px;
    min-height:44px;
    padding:10px 0 10px 12px;
    background:transparent;
    border:0;
    color:#e0e6d9;
    font:12px/1.5 var(--mono);
  }
  nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#0c1513;
    border-bottom:1px solid #5b715d;
    padding:18px 6%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  nav.open {
    display:flex;
  }
  nav a {
    padding:14px 0;
  }
  body.menu-open .site-header {
    background:#0c1513;
  }
  .hero {
    min-height:760px;
    min-height:100svh;
    padding:160px 6% 120px;
    align-items:center;
  }
  .hero-image {
    object-position:58% center;
  }
  .hero::after {
    background:linear-gradient(90deg,#090e0edd,#090e0e66),linear-gradient(0deg,var(--bg),transparent 55%);
  }
  .hero .eyebrow {
    font-size:9px;
    max-width:260px;
    margin-bottom:24px;
    line-height:1.9;
  }
  h1 {
    font-size:clamp(2.65rem,8.8vw,4rem);
    line-height:1.08;
  }
  .hero-intro {
    font-size:16px;
    margin-top:24px;
  }
  .hero-description {
    font-size:14px;
    max-width:330px;
  }
  .desktop-break {
    display:none;
  }
  .hero-actions {
    gap:24px;
    margin-top:30px;
  }
  .hero-bottom {
    left:6%;
    right:6%;
    bottom:24px;
    flex-wrap:wrap;
    font-size:9px;
    row-gap:12px;
  }
  .hero-bottom span:nth-child(2) {
    order:3;
    width:100%;
  }
  .section-heading {
    display:block;
    margin-bottom:28px;
  }
  .section-heading>p {
    margin-top:20px;
    max-width:none;
  }
  .eyebrow {
    font-size:9px;
  }
  h2 {
    font-size:32px;
  }
  .territory-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .territory {
    min-height:330px;
    padding:27px;
  }
  .territory .eyebrow {
    font-size:10px;
  }
  .territory p {
    font-size:14px;
  }
  .territory h3 {
    font-size:48px;
  }
  .territory>img {
    object-position:center 40%;
  }
  .land-territory>img {
    object-position:65% 40%;
  }
  .archive-controls {
    display:block;
  }
  .filters {
    gap:3px;
    justify-content:space-between;
  }
  .filters button {
    padding:10px 9px;
    font-size:11px;
  }
  .filters button span {
    margin-left:2px;
    font-size:9px;
  }
  .search-label {
    min-width:0;
    margin-top:14px;
  }
  .search-label input {
    font-size:16px;
  }
  .case-grid {
    gap:20px;
    grid-template-columns:1fr;
  }
  .jacket-print img.frame {
    aspect-ratio:16/10;
  }
  .case-card {
    --inset:32px;
  }
  .case-card h3 {
    font-size:28px;
  }
  .catalog-meta {
    font-size:9px;
    letter-spacing:.02em;
    gap:10px;
  }
  .reading-room {
    padding-top:64px;
  }
  .reading-heading {
    display:block;
    margin-bottom:32px;
  }
  .reader-tools {
    margin-top:22px;
    justify-content:start;
    max-width:none;
    gap:8px;
  }
  .reader-tools button {
    font-size:9px;
  }
  .desk {
    padding:18px 10px 18px;
  }
  .desk:before,.stampblock,.pencil,.mug,.clip {
    display:none;
  }
  .folder {
    grid-template-columns:minmax(0,1fr);
    padding:65px 20px 24px;
    gap:26px;
  }
  .folder:before {
    left:20px;
  }
  .folder .stamp, .record-sheet .stamp {
    font-size:9px;
    right:18px;
    max-width:88%;
  }
  .print {
    grid-row:2;
  }
  .print img:not(.clip, .pencil) {
    aspect-ratio:4/3;
  }
  .sheet-body h3 {
    font-size:27px;
  }
  .sheet-body p {
    font-size:16px;
  }
  .docket {
    grid-template-columns:1fr;
  }
  .docket>div {
    grid-template-columns:5.3rem minmax(0,1fr);
  }
  .slip {
    rotate:0deg;
    padding:16px;
  }
  .slip p {
    font-size:15px;
  }
  .method,.report {
    grid-template-columns:1fr;
    gap:40px;
  }
  .method-notes h3 {
    font-size:23px;
  }
  .report .privacy-note {
    font-size:11px!important;
  }
  footer {
    padding:30px 6%;
    flex-wrap:wrap;
    justify-content:start;
    gap:26px;
  }
  footer p {
    width:100%;
    order:3;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .territory:hover>img,.case-card:hover .jacket-print img.frame {
    transform:none;
  }
}

/* A released record is typed, not photographed — the visual difference is the
   tier distinction (D1/D4), so do not give this card a figure. */
/* Paper background, so paper ink — the same pairing the sheet needs. Without the colour the
   card inherits the page's light text and the title, summary and every meta value land at
   1.41:1 against the stock. */
.record-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem;
  background: var(--paper, #f4efe4); color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.18);
  border-left: 4px solid rgba(0,0,0,.42); border-radius: 2px; font-size: .94rem; }
.record-card.selected { border-left-color: #8a2b1f; box-shadow: 0 0 0 2px rgba(138,43,31,.25); }
.record-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.record-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.record-media { border: 1px solid currentColor; border-radius: 2px; padding: .05rem .35rem; }
.record-meta { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; margin: 0; font-size: .82rem; }
.record-meta div { display: contents; }
.record-meta dt { opacity: .6; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.record-meta dd { margin: 0; }

/* The sheet is paper and takes the paper's ink. Without the colour it inherits the page's
   light-on-dark text, which lands at about 1.3:1 against this stock — the heading, the
   description and every docket value were unreadable. The lower band is reserved for the desk
   furniture, the way the folder reserves one: the props may touch the sheet's edge, never its
   content (see the prop comment in desk.css). */
.record-sheet { position: relative; padding: 2rem 2.2rem 150px; background: var(--paper, #f4efe4);
  color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.18); border-radius: 2px; max-width: 46rem; }
.record-sheet h3 { margin: .2rem 0 1rem; font-size: 1.5rem; line-height: 1.25; }
.record-description { white-space: pre-wrap; line-height: 1.6; }
.record-leaving { font-size: .8rem; color: var(--paper-ink-dim); font-style: italic; }
/* Below 700px the desk furniture is hidden (see the .pencil/.mug/.stampblock rule in the
   max-width:700px block above), so the sheet stops reserving a band for it. This has to sit
   after the base rule rather than beside that one — same specificity, and the later rule wins. */
@media (max-width: 700px) { .record-sheet { padding-bottom: 2rem; } }

/* The two bar tones live here as custom properties so the palette stays in the stylesheet, but
   site.js applies them inline — see the note there on why a class rule does not repaint. */
.ribbon { margin: 0 0 1.4rem; --bar-on: rgb(156,146,115); --bar-out: rgb(66,65,53); }
.ribbon-bars { width: 100%; height: 60px; display: block; }
/* The ribbon sits on the dark page, not on paper. These were originally a dark ink, which
   flattened to 1.19:1 against the blotter and left the whole histogram invisible. The two tones
   are now the archive's paper already flattened against the blotter, at roughly 78% and 30% —
   6.3:1 and 1.7:1 against the page, which keeps a deselected bar present without letting it
   compete. The rule below is the starting state before the first paint. */
.ribbon-bar { fill: var(--bar-on); transition: fill .15s ease; }
.ribbon-controls { display: grid; gap: .2rem; margin-top: .3rem; }
/* accent-color tints the native control instead of replacing it, so the keyboard and
   screen-reader behaviour that made a real <input type="range"> the right choice survives. */
.ribbon-controls input[type="range"] { width: 100%; accent-color: var(--glow); }
.ribbon-readout { margin: .3rem 0 0; font-size: .8rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .ribbon-bar { transition: none; } }

/* Hero signup. The field stands alone until it is touched; the button and the
   consent sentence appear on focus. Done with :focus-within rather than a JS
   class toggle, so it works the moment the field is reached by keyboard and
   cannot desync from the input's real state. :has() keeps it open once
   something has been typed — where :has is unsupported the panel simply closes
   again on blur, which is a lesser experience and not a broken one. */
.signup {
  margin-top:34px;
  max-width:440px;
}
.signup-row {
  display:flex;
  align-items:stretch;
  gap:10px;
}
.signup input {
  flex:1 1 auto;
  min-width:0;
  background:#0c1312cc;
  border:1px solid #455348;
  padding:13px 14px;
  min-height:48px;
  color:#e0e6d9;
  font:13px/1.4 var(--mono);
  letter-spacing:.04em;
  border-radius:0;
  backdrop-filter:blur(2px);
}
.signup input:hover {
  border-color:#6b7d6c;
}
.signup .btn {
  flex:0 0 auto;
  gap:10px;
  white-space:nowrap;
  /* Collapsed rather than display:none, so revealing it animates instead of
     snapping the row's width. overflow keeps the label from spilling out. */
  max-width:0;
  padding-inline:0;
  border-width:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-width .26s ease,padding .26s ease,opacity .2s ease;
}
.signup-consent,.signup-status {
  font:11px/1.6 var(--mono);
  letter-spacing:.05em;
  color:#b3bfb2;
  max-width:44ch;
  overflow:hidden;
  max-height:0;
  opacity:0;
  margin-top:0;
  transition:max-height .26s ease,opacity .2s ease,margin-top .26s ease;
}
.signup:focus-within .btn,
.signup:has(input:not(:placeholder-shown)) .btn {
  max-width:12rem;
  padding-inline:22px;
  border-width:1px;
  opacity:1;
  pointer-events:auto;
}
.signup:focus-within .signup-consent,
.signup:has(input:not(:placeholder-shown)) .signup-consent {
  max-height:6rem;
  opacity:1;
  margin-top:12px;
}
/* The status line is not part of the reveal — it has to be readable after the
   field has been blurred, which is exactly when a result arrives. */
.signup-status:not(:empty) {
  max-height:6rem;
  opacity:1;
  margin-top:10px;
  color:var(--glow);
}
.signup-status.is-error:not(:empty) {
  color:#e8a898;
}
.signup[data-state="done"] .signup-row,
.signup[data-state="done"] .signup-consent {
  /* Once it is done, the ask is over: the confirmation should not sit under an
     instruction to do the thing that has just been done. */
  display:none;
}
@media (prefers-reduced-motion:reduce) {
  .signup .btn,.signup-consent,.signup-status {
    transition:none;
  }
}
@media (max-width:560px) {
  .signup {
    max-width:none;
  }
  .signup-row {
    flex-wrap:wrap;
  }
  .signup:focus-within .btn,
  .signup:has(input:not(:placeholder-shown)) .btn {
    max-width:100%;
    width:100%;
  }
}

@media (max-width:760px) {
  html {
    scroll-padding-top:96px;
  }
}

/* Consent notice. A small card in the corner, not a bar across the page and not
   a modal over it: the page stays readable and scrollable while it is open,
   which is the whole of "unobtrusive". It does not trap focus for the same
   reason — aria-modal is false and the page behind stays operable. */
.consent {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:60;
  width:min(380px,calc(100vw - 40px));
  padding:18px 20px;
  background:#0c1413f5;
  border:1px solid #455348;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px #00000059;
}
@supports not (backdrop-filter:blur(10px)) {
  .consent {
    background:#0a1110;
  }
}
.consent-text {
  font:11px/1.7 var(--mono);
  letter-spacing:.04em;
  color:#b3bfb2;
  margin:0 0 14px;
}
.consent-text b {
  display:block;
  margin-bottom:6px;
  font-weight:400;
  color:var(--ink);
}
.consent-actions {
  display:flex;
  gap:10px;
}
/* Both answers are the same control. Equal width, weight, colour and hit area —
   a prominent Accept beside a faint Decline is not consent, and styling them
   apart here is the one change that would quietly break compliance. */
.consent-btn {
  flex:1 1 0;
  min-height:42px;
  padding:10px 14px;
  border:1px solid #8a9d89;
  background:transparent;
  color:var(--ink);
  font:11px/1.4 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.consent-btn:hover {
  background:#1a2420;
  border-color:var(--glow);
  color:var(--glow);
}
.consent-reopen {
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  font:11px/1.5 var(--mono);
  letter-spacing:.06em;
  text-decoration:underline;
  text-underline-offset:4px;
  opacity:.75;
}
.consent-reopen:hover {
  opacity:1;
  color:var(--glow);
}
@media (max-width:560px) {
  .consent {
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
  }
}

/* The doorway to the Back Room: one wide panel set apart below the three territories, in the
   Back Room's own cold blue so it reads as a different room (docs/back-room-feature-2026-10-10.md). */
.backroom-door a { position:relative; display:block; min-height:280px; overflow:hidden; color:#d3dae3; text-decoration:none; border:1px solid #263241; }
.backroom-door img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6); transition:filter .4s; }
.backroom-door a:hover img, .backroom-door a:focus-visible img { filter:brightness(.8); }
.backroom-door .image-label { position:absolute; right:14px; top:12px; z-index:1; }
.backroom-door div { position:relative; max-width:46ch; padding:40px; }
.backroom-door h2 { color:#d3dae3; }

/* Data charts and full evidence tables. */
.chart { margin: 32px 0 14px; }
.chart-plot { position: relative; }
.chart-svg {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 170px);
  overflow: visible;
}
.chart-bar { fill: var(--glow); fill-opacity: .72; }
.chart-bar-sub { fill: var(--paper); fill-opacity: .45; }
.chart-bar-red { fill: var(--stamp); fill-opacity: .85; }
.chart-band { fill: #ffffff08; }

.chart-axis {
  position: relative;
  height: 20px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.chart-axis span {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  font: 10px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--dim);
  white-space: nowrap;
}
.chart-axis span em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .04em;
  color: #6f7a71;
}
.chart-axis { height: 34px; }
.chart-mark {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 3px 8px;
  font: 10px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chart figcaption,
.chart-note {
  max-width: 62ch;
  font: 12px/1.7 var(--mono);
  letter-spacing: .02em;
  color: var(--dim);
  margin-top: 16px;
}
.chart-note { margin-bottom: 18px; }

/* --- tables --------------------------------------------------------------- */
.findings-table-wrap { overflow-x: auto; margin: 28px 0; }
.findings-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.findings-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 14px;
  font: 12px/1.7 var(--mono);
  color: var(--dim);
  max-width: 62ch;
}
.findings-table th,
.findings-table td {
  text-align: left;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.findings-table thead th {
  font: 10px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
  white-space: nowrap;
}
.findings-table tbody th { font-weight: 400; color: var(--ink); }
.findings-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.findings-table .note {
  font: 11px/1.6 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  width: 1%;
  white-space: nowrap;
}
.findings-table th.sr-only-text {
  /* Present for the table's own semantics, absent from the drawn column head. */
  font-size: 0;
  color: transparent;
}
.findings-table .row-accent th,
.findings-table .row-accent td { color: var(--glow); }
.findings-table .row-group th {
  padding-top: 24px;
  font: 10px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: transparent;
}
.findings-vocab { min-width: 320px; }
.findings-vocab .row-zero th,
.findings-vocab .row-zero td { color: #6f7a71; }

/* --- the absence list ------------------------------------------------------ */
.findings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: #0d1413;
}
.chip b {
  font-weight: 400;
  font-size: 13px;
  color: #6f7a71;
}
.chip i {
  font: 10px/1 var(--mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #56605a;
}
.chip-found { border-color: #3c4f43; background: #101c17; }
.chip-found b { color: var(--ink); }
.chip-found i { color: var(--glow); }


/* Illustrated field archive. Display typography and material treatments are
   isolated to this page; all evidence remains selectable HTML. */
.findings-page {
  --bg: #040e0c; --ink: #dbdfd2; --dim: #a9b5a4; --glow: #b1ccad;
  --line: #a3ac9250; --mono: 'Consolas','Liberation Mono','Courier New',monospace;
  --display: 'Baskerville','Baskerville Old Face','Times New Roman',serif;
  background: var(--bg); color: var(--ink); font-size: 16px; position: relative;
  background-image: url('findings-contours.svg'),url('findings-contours.svg'),radial-gradient(ellipse at 80% 25%,#31463414,transparent 60%),linear-gradient(#040e0c55,#040e0c66),url('findings/blotter-v2.webp');
  background-size: 230px 650px,300px 800px,100% 100%,100% 100%,1100px;
  background-position: -60px 230px,-110px bottom,center,center,center;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat,repeat;
}
.findings-page::before { content: ''; pointer-events: none; position: absolute; z-index: 0; inset: 0; opacity: .08; background: url('tex-blotter.jpg') center/1200px; mix-blend-mode: soft-light; }
.findings-page .site-header,.findings-main,.findings-footer { position: relative; }
.findings-page .site-header { position: sticky; max-width: 1300px; margin: auto; padding: 16px 38px; border: 0; gap: 30px; background: none; }
.findings-page .site-header.is-stuck { background: #090e0ef2; }
.findings-page .brand { font: 400 25px/1 var(--display); letter-spacing: .24em; gap: 16px; flex-shrink: 0; }
.findings-page .brand small { font: 9px/1.4 var(--mono); letter-spacing: .2em; color: #a4b39f; }
.seam-mark { width: 40px; height: 62px; fill: none; stroke: #dbdccd; stroke-width: 1.3; }
.findings-page #primary-nav { margin-left: auto; gap: 30px; }
.findings-page nav a { font: 13px/1.5 Arial,sans-serif; color: #bec7b7; }
.findings-page nav a[aria-current] { color: #eef0e5; }
.archive-search { width: 28px; height: 44px; display: grid; place-items: center; }
.archive-search svg { width: 21px; fill: none; stroke: var(--dim); stroke-width: 1.4; }
.findings-page .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; width: 44px; height: 44px; min-height: 44px; background: none; border: 0; }
.findings-page .menu-toggle span { width: 25px; height: 1px; background: var(--dim); }
.findings-page .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.findings-page .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.findings-main { max-width: 1224px; width: calc(100% - 76px); margin: auto; }
.findings-intro { display: grid; grid-template-columns: 1fr 1.08fr; gap: 15px; align-items: center; padding: 0 0 38px 34px; }
.findings-page .eyebrow { font: 12px/1.4 var(--mono); letter-spacing: .19em; text-transform: uppercase; color: #b2bea9; margin: 0 0 18px; }
.findings-intro h1 { font: 400 clamp(54px,7.3vw,91px)/.88 var(--display); letter-spacing: -.048em; color: #edeadd; margin: 0; }
.findings-intro h1 em { color: var(--glow); font-style: normal; }
.intro-deck { margin-top: 25px; font-size: 18px; line-height: 1.45; color: #d0d6c7; }
.intro-actions { display: flex; align-items: center; gap: 30px; margin-top: 28px; }
.archive-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 25px; background: linear-gradient(#b7d0adef,#a8c5a2eb),url('tex-manila.jpg') center/700px; color: #16271d; border: 1px solid #abc2a0; font: 700 11px/1.4 var(--mono); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; box-shadow: inset 0 0 14px #d7e4c51a,0 2px 8px #0003; transition: filter .15s; }
.archive-button:hover { filter: brightness(1.12); }
.archive-button span { font-size: 21px; line-height: .6; }
.method-link { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; padding: 10px 0 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.archival-photo { position: relative; isolation: isolate; }
.archival-photo img { width: 100%; height: 100%; object-fit: cover; }
.intro-photo { height: clamp(280px,36vw,450px); transform: rotate(-.7deg); margin-right: -12px; }
.intro-photo img { filter: sepia(.12) brightness(.73) contrast(1.16); object-position: center; }
.intro-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#04100db3,transparent 55%); pointer-events: none; }
.photo-note,.photo-coordinate { position: absolute; z-index: 1; font: 12px/1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c6cbbb; }
.photo-note { right: 11%; top: 13%; }
.intro-photo>.photo-note:not(.photo-note-left) { color: #182820; font-weight: 700; text-shadow: 0 0 12px #d3d2b450; }
.photo-note-left { left: 12%; top: 35%; }
.photo-coordinate { right: 8%; bottom: 13%; text-align: right; font-size: 9px; }
.photo-tape { position: absolute; z-index: 2; width: 30%; height: 30px; bottom: -6px; left: 18%; background: url('prop-tape.png') center / 100% 100%; opacity: .75; transform: rotate(.8deg); }
.findings-figures { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 4px 0 16px; border: 1px solid var(--line); background: #010a0730; }
.findings-figures li { position: relative; display: flex; flex-direction: column; padding: 28px 36px 24px; border-right: 1px solid var(--line); gap: 9px; }
.findings-figures li:last-child { border: 0; }
.findings-figures li::before { content: '+'; position: absolute; left: 10px; top: 9px; color: #a8b39b99; font: 23px/1 var(--mono); }
.findings-figures b { font: 400 clamp(56px,6.5vw,82px)/1 var(--display); letter-spacing: -.045em; color: #e7e7d9; }
.findings-figures li:nth-child(3) b { color: var(--glow); }
.findings-figures span { font: 700 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #cdd4c3; }
.findings-figures p { font-size: 14px; line-height: 1.3; color: #b6c0ae; }
.year-overview { border: 1px solid var(--line); padding: 21px 30px 12px; margin-bottom: 15px; background: linear-gradient(105deg,#03100c22,#06100c66); box-shadow: inset 0 0 55px #0003; }
.chart-heading { display: flex; justify-content: space-between; gap: 25px; margin-bottom: 12px; }
.chart-heading h2,.visual-label { font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .13em; font-weight: 400; color: #b8c3ad; }
.chart-heading p { font-size: 14px; margin-top: 3px; }
.chart-heading>span { font: 9px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.year-overview .chart { margin: 15px 6px 0 25px; }
.year-overview .chart-svg { height: 100px; }
.chart-grid { stroke: #83988230; stroke-width: 1; }
.chart-drawing { position: relative; }
.chart-y-label { position: absolute; right: calc(100% + 8px); font: 9px/1 var(--mono); color: var(--dim); transform: translateY(-50%); }
.year-overview .chart figcaption { font-size: 10px; max-width: none; margin: 5px 0 0; line-height: 1.5; color: #a4afa0; }
.chart-axis { height: 19px; }
.chart-axis span { font-size: 9px; }
.chart-mark { top: 6px; font-size: 9px; background: #0a1512; }
.finding-row { position: relative; display: grid; grid-template-columns: 43% 57%; align-items: center; border-top: 1px solid var(--line); padding: 23px 12px 0 32px; }
.finding-copy { padding-right: 28px; }
.finding-copy .eyebrow { font-size: 11px; margin: 0 0 8px; position: relative; }
.finding-copy .eyebrow::before { content: '+'; position: absolute; left: -28px; top: -2px; color: #a1ad997f; font-size: 16px; }
.finding-copy h2 { font: 400 clamp(30px,3.8vw,45px)/.95 var(--display); letter-spacing: -.038em; color: #e5e5d8; margin: 0 0 11px; }
.finding-copy>p:last-child { font: 14px/1.35 var(--mono); color: #b9c5ae; max-width: 44ch; }
.finding-visual { min-width: 0; padding-left: 12px; }
.finding-photo { height: 203px; transform: rotate(.4deg); }
.finding-photo img { object-position: center 25%; filter: grayscale(1) sepia(.2) brightness(1.08); clip-path: polygon(1% 0,100% 2%,99% 100%,0 97%); }
.finding-photo::before { content: ''; position: absolute; inset: 3% 3% -2% -3%; background: url('findings/lake-v2.webp') left center/cover; opacity: .8; z-index: -1; transform: rotate(-1deg); }
.finding-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#06100e33,transparent),url('tex-blotter.jpg') center/cover; opacity: .22; mix-blend-mode: screen; }
.finding-photo .photo-note { top: 15px; right: 25px; font-size: 11px; }
.crosshair { position: absolute; width: 65px; height: 65px; right: 14%; bottom: 5%; z-index: 1; }
.crosshair::before,.crosshair::after { content: ''; background: #b9c2b3aa; position: absolute; }
.crosshair::before { width: 1px; height: 100%; left: 50%; }
.crosshair::after { height: 1px; width: 100%; top: 50%; }
.finding-evidence { grid-column: 1/-1; margin: 4px 0 11px; min-width: 0; }
.finding-evidence>summary { width: max-content; font: 9px/1.5 var(--mono); letter-spacing: .09em; color: #a5b39c; text-transform: uppercase; cursor: pointer; padding: 7px 0; list-style: none; }
.finding-evidence>summary::-webkit-details-marker { display: none; }
.finding-evidence>summary span { margin-left: 10px; }
.finding-evidence[open]>summary span { display: inline-block; transform: rotate(45deg); }
.finding-evidence summary:hover { color: #f0f0df; }
summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 5px; }
.evidence-content { padding: 25px 0; max-width: 960px; }
.evidence-content>p { margin-bottom: 18px; max-width: 78ch; }
.evidence-content code { overflow-wrap: anywhere; font-size: 12px; }
.evidence-content .chart { margin: 28px 15px; }
.evidence-content .chart-axis { height: 36px; }
.findings-hedge { border-left: 2px solid var(--line); padding-left: 18px; font-size: 15px; color: var(--dim); }
.findings-cta { margin-top: 26px; }
.redaction-visual { padding: 15px 20px 12px 0; }
.redaction-visual .visual-label { font-size: 11px; margin-bottom: 20px; }
.comparison-row { display: grid; grid-template-columns: 115px 1fr; gap: 15px; align-items: center; margin: 12px 0; font: 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.comparison-track { background: #b7c5ae25; height: 25px; box-shadow: inset 0 2px 5px #0003; }
.comparison-fill { display: flex; align-items: center; justify-content: end; min-width: 36px; padding-right: 6px; height: 100%; background: linear-gradient(90deg,#adc7a4e8,#97b28feb),url('tex-manila.jpg') center/400px; color: #122218; border-radius: 0 3px 3px 0; }
.visual-footnote { font: 9px/1.5 var(--mono); color: #aab69e; margin-top: 14px; }
.file-stack { height: 196px; position: relative; overflow: hidden; }
.file-stack img { display: block; width: 100%; height: auto; filter: saturate(.58) brightness(.94); mask-image: linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent); }
.file-stack>span { position: absolute; top: 38%; left: 28%; transform: rotate(9deg); font: 700 17px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #30352c; }
.absence-visual { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; padding: 14px 25px; }
.absence-visual ul { list-style: none; padding: 0; margin: 0; }
.absence-visual li { display: flex; gap: 14px; align-items: center; margin: 9px 0; font: 12px/1.4 var(--mono); text-transform: uppercase; color: #aab09d; text-decoration: line-through; text-decoration-color: #acafa780; letter-spacing: .08em; }
.absence-visual li::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.corner-note { position: relative; font: 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: #aebba4; padding: 28px 20px; }
.absence-visual .corner-note { text-align: center; background: linear-gradient(var(--dim),var(--dim)) top left/15px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) top left/1px 15px no-repeat,linear-gradient(var(--dim),var(--dim)) bottom right/15px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) bottom right/1px 15px no-repeat; }
.coverage-visual { display: flex; align-items: center; gap: 12px; }
.coverage-visual img { width: 77%; height: 210px; object-fit: contain; margin-left: -16px; filter: saturate(.55) brightness(.95); mix-blend-mode: screen; mask-image: radial-gradient(ellipse at center,#000 43%,transparent 73%); }
.coverage-visual figcaption { font: 11px/1.8 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.coverage-visual small { display: block; font-size: 8px; letter-spacing: .04em; margin-top: 10px; color: #9ead94; }
.vocabulary-visual { display: grid; grid-template-columns: 1fr 125px; gap: 28px; padding: 10px 5px; }
.vocabulary-visual .visual-label { font-size: 10px; letter-spacing: .07em; }
.vocabulary-visual dl { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 65px; gap: 13px 0; font: 13px/1.3 var(--mono); text-transform: uppercase; }
.vocabulary-visual dd { border-left: 1px solid var(--line); text-align: right; margin: 0; padding-right: 15px; }
.vocabulary-visual .corner-note { border-left: 1px solid var(--line); }
.dossier-visual { position: relative; display: flex; align-items: center; gap: 30px; padding: 10px 18px 7px; isolation: isolate; }
.dossier-visual::before { content: ''; position: absolute; z-index: -1; inset: 10px 0 -3px 5px; background: url('findings/papers-v2.webp') center top/cover; filter: brightness(.34) saturate(.2); transform: rotate(1deg); }
.case-print { display: block; width: 61%; flex-shrink: 0; padding: 18px 20px 13px; color: #3e4032; text-decoration: none; background: linear-gradient(#d2c3a3db,#c4b38ed6),url('tex-manila.jpg') center/cover; transform: rotate(-1deg); box-shadow: -9px 9px 0 -3px #b9ad8eba; clip-path: polygon(0 0,99% 1%,100% 98%,2% 100%); }
.case-print span,.case-print small { display: block; font: 8px/1.5 var(--mono); letter-spacing: .04em; }
.case-print img { display: block; width: 100%; height: 127px; object-fit: cover; filter: sepia(.35) contrast(1.15) brightness(.8); margin: 10px 0; }
.case-print:hover { filter: brightness(1.1); }
.dossier-caption { font: 12px/1.8 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.dossier-caption b { font-weight: 400; color: #d8dccb; display: block; margin-bottom: 18px; }
.dossier-caption span { display: block; font-size: 10px; }
.findings-method { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 200px; gap: 8px 30px; padding: 25px 165px 22px 44px; margin-top: 2px; background: linear-gradient(#d9ccb0dc,#ccbea0d6),url('tex-manila.jpg') center/cover; color: #3b3e32; box-shadow: inset 0 0 35px #69593d4a; clip-path: polygon(0 .8%,99.7% 0,100% 99.4%,.2% 100%); }
.findings-method::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('findings/papers-v2.webp') 38% 62%/150% auto; mix-blend-mode: multiply; opacity: .17; pointer-events: none; }
.findings-method h2 { font: 400 27px/1.15 var(--display); text-transform: uppercase; letter-spacing: .07em; color: #353b2f; margin: 0 0 9px; }
.method-copy p { font: 15px/1.35 Arial,sans-serif; max-width: 73ch; }
.method-map { position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 125px; background: url('findings/coverage-v2.webp') 12% 50%/auto 140%; filter: grayscale(1) sepia(.25); opacity: .65; mix-blend-mode: multiply; border-left: 1px solid #7c7869; transform: rotate(-1deg) scaleY(1.05); }
.method-seal { grid-column: 2; grid-row: 1/3; align-self: center; justify-self: center; width: 143px; height: 143px; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed #626b5d9e; border-radius: 50%; transform: rotate(-17deg); font: 12px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .15em; color: #555f4c; }
.method-evidence { grid-column: 1/-1; }
.method-evidence summary { width: max-content; border: 1px solid #686d5c; font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 8px 22px; list-style: none; cursor: pointer; }
.method-evidence summary::-webkit-details-marker { display: none; }
.method-evidence summary span { margin-left: 15px; }
.method-evidence[open] .evidence-content { border-top: 1px solid #7c816e; margin-top: 20px; }
.findings-caveats { font: 12px/1.8 var(--mono); color: #464d3c; border-top: 1px solid #80866e; padding-top: 18px; }
.findings-method .text-link { color: #34432c; }
.go-deeper { position: relative; display: grid; grid-template-columns: 27% 1fr; padding: 30px 32px; align-items: center; isolation: isolate; }
.go-deeper::before { content: ''; position: absolute; inset: 0 -38px; z-index: -1; background: linear-gradient(90deg,#04100df0 0%,#04100de6 50%,#04100d35),url('findings/lake-v2.webp') right 58%/75% auto no-repeat; }
.field-motto { font: 10px/1.8 var(--mono); text-transform: uppercase; letter-spacing: .14em; border-right: 1px solid var(--line); width: 68%; }
.go-deeper h2 { font: 400 43px/1 var(--display); letter-spacing: -.035em; color: #e5e5d8; }
.go-deeper p:not(.field-motto) { margin: 5px 0 14px; font-size: 15px; }
.go-deeper .archive-button { padding: 12px 23px; font-size: 10px; }
.findings-page .findings-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1300px; margin: auto; padding: 24px 38px; border-top: 1px solid var(--line); background: none; }
.findings-footer .brand { font-size: 20px; }
.findings-footer .seam-mark { width: 28px; height: 44px; }
.findings-footer .brand small { font-size: 8px; }
.findings-footer nav { justify-content: end; gap: 24px; }
.findings-footer nav a { font-size: 11px; }
.findings-footer>p,.footer-motto { font: 8px/1.5 var(--mono); color: #a9b3a1; }
.footer-motto { text-align: right; text-transform: uppercase; letter-spacing: .12em; }
@media(min-width:701px) { .findings-page #primary-nav.open { position: absolute; right: 38px; left: auto; top: 80px; padding: 22px 30px; background: #0b1713; border: 1px solid var(--line); flex-direction: column; z-index: 15; min-width: 190px; align-items: stretch; gap: 22px; } }
@media(max-width:1050px) {
  .findings-page .site-header { gap: 20px; padding: 12px 28px; }
  .findings-page .brand { font-size: 21px; }
  .findings-page #primary-nav { gap: 23px; }
  .findings-main { width: calc(100% - 56px); }
  .findings-intro { padding-left: 24px; padding-bottom: 30px; }
  .intro-photo { height: clamp(270px,36vw,370px); }
  .intro-actions { gap: 23px; }
  .archive-button { padding: 14px 18px; font-size: 9px; }
  .intro-deck { font-size: 16px; margin-top: 22px; }
  .findings-figures li { padding: 25px 27px 20px; }
  .findings-figures span { font-size: 10px; }
  .findings-figures p { font-size: 13px; }
  .finding-row { padding-left: 25px; padding-top: 17px; }
  .finding-copy { padding-right: 22px; }
  .finding-copy>p:last-child { font-size: 12px; line-height: 1.3; }
  .finding-photo { height: 155px; }
  .file-stack { height: 145px; }
  .file-stack>span { font-size: 13px; }
  .absence-visual { padding: 10px; gap: 20px; }
  .absence-visual li { font-size: 10px; }
  .comparison-row { grid-template-columns: 95px 1fr; font-size: 10px; gap: 10px; }
  .redaction-visual .visual-label { font-size: 10px; }
  .vocabulary-visual { grid-template-columns: 1fr 90px; gap: 15px; }
  .vocabulary-visual dl { font-size: 11px; }
  .corner-note { font-size: 10px; padding: 20px 12px; }
  .coverage-visual figcaption { font-size: 10px; }
  .coverage-visual img { height: 180px; }
  .finding-evidence { margin-bottom: 6px; }
  .dossier-visual { gap: 22px; }
  .case-print { padding: 14px; }
  .case-print img { height: 95px; }
  .dossier-caption { font-size: 11px; }
  .findings-method { padding: 23px 110px 20px 35px; grid-template-columns: 1fr 125px; gap: 9px 20px; }
  .method-map { width: 80px; }
  .method-copy p { font-size: 13px; }
  .method-seal { width: 115px; height: 115px; font-size: 10px; }
  .go-deeper::before { inset-inline: -28px; }
}
@media(max-width:800px) and (min-width:701px) {
  .findings-page .site-header { gap: 12px; }
  .findings-page #primary-nav { gap: 18px; }
  .findings-page nav a { font-size: 11px; }
  .findings-intro { padding-left: 20px; grid-template-columns: 1fr 1.08fr; gap: 10px; }
  .findings-intro h1 { font-size: 55px; }
  .intro-actions { gap: 18px; }
  .intro-actions .archive-button { padding: 13px 14px; font-size: 8px; gap: 10px; }
  .method-link { font-size: 8px; }
  .intro-deck { font-size: 14px; }
  .photo-note { font-size: 10px; }
  .photo-coordinate { font-size: 8px; }
  .findings-figures li { padding: 24px 20px 18px 26px; }
  .findings-figures b { font-size: 53px; }
  .findings-figures span { font-size: 9px; }
  .findings-figures p { font-size: 12px; }
  .finding-copy h2 { font-size: 30px; }
  .finding-copy>p:last-child { font-size: 11px; }
  .finding-row { padding-top: 14px; }
  .finding-photo { height: 132px; }
  .file-stack { height: 130px; }
  .coverage-visual img { height: 155px; }
  .redaction-visual { padding-block: 7px; }
  .redaction-visual .visual-label { font-size: 9px; margin-bottom: 12px; }
  .comparison-track { height: 21px; }
  .comparison-row { margin-block: 8px; }
  .vocabulary-visual { padding-block: 0; }
  .vocabulary-visual dl { gap: 10px 0; margin-top: 16px; }
  .vocabulary-visual .visual-label { font-size: 9px; }
  .dossier-visual { padding-block: 3px; }
  .case-print img { height: 83px; }
  .year-overview { padding: 17px 22px 10px; }
  .year-overview .chart-svg { height: 83px; }
  .year-overview .chart { margin-top: 8px; }
  .chart-heading { margin-bottom: 7px; }
  .finding-evidence { margin-bottom: 8px; }
  .finding-evidence>summary { font-size: 8px; padding-block: 5px; }
  .findings-method h2 { font-size: 22px; }
  .method-copy p { font-size: 12px; }
}
@media(max-width:700px) {
  .findings-page .site-header { padding: 12px 20px; gap: 12px; }
  .findings-page .brand { font-size: 20px; gap: 10px; }
  .findings-page .brand small { font-size: 7px; }
  .seam-mark { width: 30px; height: 49px; }
  .archive-search { margin-left: auto; }
  .findings-page #primary-nav { margin: 0; gap: 0; padding: 15px 24px; }
  .findings-main { width: calc(100% - 36px); }
  .findings-intro { grid-template-columns: 1fr; padding: 26px 7px 28px; gap: 28px; }
  .findings-intro h1 { font-size: clamp(56px,13.5vw,82px); }
  .intro-deck { font-size: 16px; }
  .wide-break { display: none; }
  .intro-actions { gap: 18px; flex-wrap: wrap; }
  .intro-actions .archive-button { padding: 14px 12px; font-size: 9px; gap: 10px; white-space: nowrap; }
  .method-link { font-size: 9px; }
  .intro-photo { height: auto; aspect-ratio: 1.35; margin: 0 -3px 0 0; }
  .photo-note { font-size: 10px; }
  .photo-coordinate { font-size: 8px; }
  .findings-figures { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 12px; }
  .findings-figures li { padding: 22px 22px; }
  .findings-figures li:nth-child(2) { border-right: 0; }
  .findings-figures li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .findings-figures b { font-size: 59px; }
  .findings-figures span { font-size: 10px; }
  .findings-figures p { font-size: 12px; }
  .year-overview { padding: 18px 14px 14px; }
  .chart-heading h2 { font-size: 10px; }
  .chart-heading p { font-size: 12px; }
  .chart-heading>span { font-size: 8px; }
  .year-overview .chart { margin-left: 20px; margin-right: 6px; }
  .year-overview .chart-svg { height: 110px; }
  .year-overview .chart figcaption { font-size: 9px; }
  .chart-axis span { font-size: 8px; letter-spacing: 0; }
  .chart-mark { font-size: 8px; max-width: 60%; white-space: normal; text-align: center; }
  .finding-row { grid-template-columns: 1fr; padding: 24px 8px 0 24px; gap: 20px; }
  .finding-copy { padding-right: 5px; }
  .finding-copy h2 { font-size: 38px; margin-bottom: 12px; }
  .finding-copy>p:last-child { max-width: none; font-size: 14px; line-height: 1.4; }
  .finding-copy .eyebrow::before { left: -21px; }
  .finding-visual { padding-left: 0; }
  .finding-photo { height: 175px; }
  .finding-evidence { margin: -5px 0 12px; }
  .finding-evidence>summary { font-size: 10px; padding: 10px 0; }
  .evidence-content { font-size: 14px; }
  .findings-table { font-size: 12px; }
  .file-stack { height: 180px; }
  .file-stack>span { font-size: 13px; }
  .absence-visual { gap: 25px; }
  .absence-visual li { font-size: 12px; }
  .coverage-visual img { width: 74%; margin-left: -10px; }
  .coverage-visual figcaption { font-size: 9px; }
  .vocabulary-visual { grid-template-columns: 1fr 85px; gap: 12px; }
  .vocabulary-visual dl { font-size: 11px; }
  .dossier-visual { padding-inline: 8px; gap: 20px; }
  .case-print { width: 61%; max-width: 255px; }
  .case-print img { height: 110px; }
  .dossier-caption { font-size: 10px; }
  .dossier-caption span { font-size: 9px; }
  .findings-method { padding: 24px 32px 24px 24px; grid-template-columns: 1fr; gap: 16px; }
  .findings-method h2 { font-size: 24px; }
  .method-copy p { font-size: 14px; line-height: 1.5; }
  .method-seal { display: none; }
  .method-map { width: 15px; opacity: .3; }
  .go-deeper { grid-template-columns: 1fr; padding: 30px 15px; gap: 18px; }
  .go-deeper::before { inset: 0 -18px; background-size: auto,cover; }
  .field-motto { width: auto; border: 0; font-size: 9px; }
  .field-motto br { display: none; }
  .go-deeper h2 { font-size: 38px; }
  .go-deeper p:not(.field-motto) { font-size: 14px; }
  .findings-page .findings-footer { padding: 25px 22px; gap: 20px; grid-template-columns: 1fr; }
  .findings-footer nav { position: static; display: flex; flex-direction: row; justify-content: start; flex-wrap: wrap; padding: 0; border: 0; background: none; gap: 22px; }
  .findings-footer nav a { padding: 4px 0; }
  .findings-footer>p { order: initial; }
  .footer-motto { text-align: left; }
}
@media(prefers-reduced-motion:reduce) { .archive-button { transition: none; } }

/* Custom outlined inscription. Keep the wordmark crisp at header and footer sizes. */
.brand .brand-sigil { display: block; width: 48px; height: 64px; flex: 0 0 auto; object-fit: contain; }
/* The flex row centres the sigil on the whole wordmark block (letters, the dropped pin and the
   tagline), which sits it low. Lift it to centre on the letters; a share of its own height so
   it holds at every breakpoint. */
.brand .brand-sigil { translate: 0 -27%; }
.brand .brand-type { display: flex; flex-direction: column; align-items: flex-start; }
.brand .brand-wordmark { display: block; width: 255px; height: auto; max-width: none; }
.brand .brand-type small { font: 8px/1.5 'Consolas','Courier New',monospace; letter-spacing: .19em; margin-top: 7px; color: #b2bea8; white-space: nowrap; }
.brand { gap: 13px; }
.findings-page .brand { gap: 13px; }
footer .brand .brand-sigil { width: 37px; height: 49px; }
footer .brand .brand-wordmark { width: 215px; }
footer .brand .brand-type small { font-size: 7px; letter-spacing: .14em; }
@media(max-width:1050px) {
  .brand .brand-wordmark { width: 222px; }
  .brand .brand-sigil { width: 43px; height: 58px; }
  .brand .brand-type small { font-size: 7px; letter-spacing: .14em; }
}
@media(max-width:760px) {
  .brand .brand-wordmark { width: 190px; }
  .brand .brand-sigil { width: 35px; height: 51px; }
  .brand,.findings-page .brand { gap: 9px; }
  .brand .brand-type small { font-size: 6.5px; margin-top: 5px; letter-spacing: .11em; }
}
@media(max-width:360px) {
  .brand .brand-wordmark { width: 165px; }
  .brand .brand-sigil { width: 31px; height: 48px; }
  .brand .brand-type small { font-size: 6px; letter-spacing: .05em; }
}
/* Hovering anywhere on the logo (sigil or wordmark), keyboard focus or a tap lights the sigil
   alone in the archive's glow green; the wire wordmark stays unlit. A drop-shadow, not a
   box-shadow, so the glow follows the sigil's shape rather than its image frame.
   :active covers the touch press; on touch screens :hover also lands on tap. */
.brand .brand-sigil { transition: filter .25s ease; }
.brand:is(:hover, :focus-visible, :active) .brand-sigil {
  filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px rgba(125, 230, 150, .6));
}
@media (prefers-reduced-motion: reduce) { .brand .brand-sigil { transition: none; } }

/* Shared header controls across the archive and generated pages. */
.site-header .archive-search { width: 28px; min-width: 28px; height: 44px; display: grid; place-items: center; }
.site-header .archive-search svg { width: 21px; fill: none; stroke: var(--dim); stroke-width: 1.4; }
.site-header #primary-nav { margin-left: auto; gap: 18px; }
.site-header #primary-nav a { font: 13px/1.5 Arial,sans-serif; color: #bec7b7; }
.site-header #primary-nav a[aria-current] { color: #eef0e5; }
.site-header .menu-toggle { display: none; }
@media(max-width:1050px) {
  .site-header { padding: 12px 20px; gap: 12px; }
  .site-header .archive-search { margin-left: auto; }
  .site-header #primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 15px 24px; background: #0c1513; border-bottom: 1px solid #5b715d; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header #primary-nav.open { display: flex; }
  .site-header #primary-nav a { padding: 14px 0; }
  .site-header .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 10px; width: 44px; min-width: 44px; height: 44px; background: none; border: 0; }
  .site-header .menu-toggle span { width: 25px; height: 1px; background: var(--dim); }
  .site-header .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media(max-width:360px) {
  .site-header,.findings-page .site-header { padding: 12px; gap: 8px; }
  .site-header .brand-wordmark { width: 145px; }
}

/* Generated file pages (scripts/build-pages.mjs): the page heading, the breadcrumb and the lists
   below the desk. The desk, folder and record sheet themselves are site.css and desk.css. */
.file-page .reading-heading h1 { font-size: 30px; margin: 0; }
.file-crumbs { font: 12px/1.6 var(--mono, ui-monospace, monospace); letter-spacing: .06em; margin: 0 0 18px; }
.file-crumbs a { color: var(--glow); }
.file-intro { margin-bottom: 24px; }
.file-related { margin-top: 40px; }
.file-related h2 { font-size: 22px; margin-bottom: 12px; }
.file-related ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.file-related span { opacity: .7; font-size: .85em; }
.file-writeup, .file-see-also, .file-credit { margin-top: 24px; }
/* The long-form write-up under the folder (content/cases/<slug>.md). */
.file-longform { max-width: 70ch; margin-top: 48px; line-height: 1.7; }
.file-longform h2 { font-size: 26px; margin-bottom: 16px; }
.file-longform h3 { font-size: 19px; margin: 28px 0 10px; }
.file-longform p, .file-longform li { margin-bottom: 12px; }
.file-longform a { color: var(--glow); }

/* Revisions under a file (content/corrections.json), and the corrections log. */
.file-revisions { max-width: 70ch; margin-top: 40px; font-size: .95em; line-height: 1.6; }
.file-revisions h2 { font-size: 22px; margin-bottom: 10px; }
.file-revisions ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; }
.file-revisions a { color: var(--glow); }
.file-revisions time, .corrections-day h2 time { font-variant-numeric: tabular-nums; }
.file-revisions li time { opacity: .7; margin-right: 6px; }
.revision-kind { font-size: .75em; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-right: 6px; }
.corrections-day li p { margin: 4px 0 0; max-width: 70ch; line-height: 1.6; }

/* A source's Wayback Machine copy (content/archives.json). */
a.archived { font-size: max(.8em, 11px); opacity: .7; white-space: nowrap; }
a.archived:hover, a.archived:focus-visible { opacity: 1; }