/* ============ 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; }

/* 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; }
}