/* Government files viewer, restyled for "Dusk and Paper".
   The hero and the viewer's media stage stay on the night stage (black behind released media).
   The archive wall, program banners, dossier and drawer sit on paper, so released records read as paper.
   Tokens and primitives (.btn, .chips, .frame, .slate, .chyron, .paper) come from css/base.css.
   Note: the font shorthand resets font-stretch, so every width is set on the line after it. */
:root { --rh: 200px; --top-h: 60px; }
html { scroll-padding-top: calc(var(--top-h) + var(--bar-h, 150px) + 12px); }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
main.paper { display: flow-root; background: var(--bg); color: var(--fg); }
main.paper .btn.fill:hover { color: var(--paper-2); }   /* night text on the paper accent is 3.3:1; white is 5.7:1 */
code { font: inherit; font-weight: 600; }

/* solid night top bar: base.css's translucent one turns blue-grey over paper (and the blur is costly over a long wall) */
.top { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the Channels button reads as a nav item */
.nav .link-btn { padding: 22px 0 20px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--bone-2); cursor: pointer; white-space: nowrap; }
.nav .link-btn:hover { color: var(--bone); }
@media (max-width: 820px) {
  :root { --top-h: 0px; }
  .top { position: static; }   /* the instrument bar is the one sticky bar on small screens */
  .nav .link-btn { padding: 12px 0 10px; }
}

/* ---------- provenance tags: one hierarchy in ink; the stamp colour is for the contested marker only ---------- */
.t-official-release { --tc: var(--ink); }
.t-foia-mirror, .t-timeline-index { --tc: var(--ink-2); }
.t-contested { --tc: var(--stamp); }
.prov, .key b { display: inline-block; padding: 3px 8px; border: 1px solid var(--tc, var(--line)); border-radius: 2px; color: var(--tc, var(--fg-2)); font: 500 var(--t-small)/1.25 var(--ui); font-stretch: 88%; white-space: nowrap; vertical-align: middle; }
.viewer.t-official-release .v-id .prov, .prov.t-official-release, .key .t-official-release b { background: var(--tc); color: var(--bg); }
.viewer.t-timeline-index .v-id .prov, .prov.t-timeline-index, .key .t-timeline-index b { border-style: dashed; }
.viewer.t-contested .v-id .prov { --tc: var(--stamp); }   /* declared on the tag itself: --stamp is darker on paper */
.prov.sm { padding: 2px 6px; font-size: var(--pp-meta); }

/* ---------- thumbnails: as released, on a neutral placeholder; no tint, no filter ---------- */
.duo { position: relative; display: block; overflow: hidden; background: var(--rule-2); }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duo.paper img { object-position: top; }

/* ---------- hero: the Navy footage in a real-footage frame, beside the title (night stage) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(28px, 3.4vw, 64px) var(--gutter) clamp(36px, 4vw, 72px); }
.hero h1 { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: var(--t-display); }
.hero .lede { max-width: 46ch; margin: 0 0 clamp(20px, 2vw, 30px); }
.monitor-frame { width: 100%; max-width: 780px; justify-self: end; }
.monitor-frame .frame-img { aspect-ratio: 4 / 3; }   /* the footage is nearly square; base.css contains released footage, so it is pillarboxed, never cropped */
.monitor-frame .chyron a { color: var(--bone); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } .monitor-frame { justify-self: stretch; } }

/* ---------- program banner: a paper panel with the raised top edge ---------- */
.banner { margin: clamp(16px, 2vw, 32px) var(--gutter) 0; background: var(--bg); border: 1px solid var(--line); border-top: 6px solid var(--paper-2); border-radius: 2px; }
.banner-media { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 260px); gap: 8px; height: clamp(140px, 15vw, 220px); padding: clamp(14px, 1.6vw, 28px) clamp(16px, 1.8vw, 30px) 0; box-sizing: content-box; }
.banner-media.empty { display: none; }
.banner-media .duo { height: 100%; }
.banner-media .duo img { object-fit: contain; }
.banner-text { display: grid; gap: 14px; justify-items: start; padding: clamp(16px, 1.8vw, 30px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 500 var(--pp-meta)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); }
.crumbs a { color: var(--fg); }
.banner h1 { margin: 0; font-size: var(--t-display); }
.banner-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; font: 600 var(--pp-body)/1.3 var(--ui); font-stretch: 92%; font-variant-numeric: tabular-nums; }
.banner-meta span + span { color: var(--fg-2); font-weight: 500; }
.banner-meta .live { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.banner-meta .live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.summary { max-width: 64ch; margin: 2px 0 0; font: 400 var(--pp-body)/1.55 var(--serif); text-wrap: pretty; }
.sources, .children { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font: 500 var(--pp-body)/1.4 var(--ui); font-stretch: 94%; }
.sources small { color: var(--fg-2); font-size: var(--pp-meta); }
.children { gap: 8px; }
.children a { display: grid; padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); text-decoration: none; font-weight: 650; }
.children a small { font-weight: 400; color: var(--fg-2); }
.children a:hover { border-color: var(--fg-3); }
.note { max-width: 64ch; margin: 0; padding-left: 14px; border-left: 2px solid var(--accent); font: 400 var(--pp-body)/1.5 var(--serif); color: var(--fg-2); }

/* ---------- instrument bar: search, medium filter, files-per-year histogram ---------- */
.instruments { position: sticky; top: var(--top-h); z-index: 10; isolation: isolate; padding: 14px var(--gutter) 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.search { position: relative; flex: 0 1 320px; }
.search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; translate: 0 -50%; color: var(--fg-2); pointer-events: none; }
.search input { width: 100%; height: 36px; padding: 0 12px 0 38px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); color: var(--fg); font: 500 var(--pp-meta) var(--ui); }
.search input::placeholder { color: var(--fg-2); }
.search input:focus { border-color: var(--fg-2); }
fieldset.chips { min-width: 0; border: 0; }
.chips label { position: relative; }
.chips span { display: inline-flex; gap: 6px; align-items: baseline; }
.chips b { font-weight: 400; opacity: .9; font-variant-numeric: tabular-nums; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 3px; }   /* same ring as every other focus on paper */
.count { margin: 0 0 0 auto; font: 500 var(--pp-meta)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.hist { position: relative; margin-top: 22px; }
.bars { display: grid; grid-template-columns: repeat(80, 1fr); align-items: end; gap: 2px; height: 40px; }
.bar { height: calc(var(--h) * 100%); min-height: 1px; padding: 0; border: 0; background: var(--ink-2); cursor: pointer; }
.bar.nil { background: var(--rule); cursor: default; }
.bar:hover, .bar.on { background: var(--amber); }
.spans { position: relative; height: calc(var(--rows) * 6px + 4px); margin-top: 5px; }
.sp { position: absolute; top: calc(var(--row) * 6px); height: 3px; background: var(--ink-3); }
.sp::after { content: ''; position: absolute; inset: -3px 0; }
.sp:hover { background: var(--accent); }
.sp.on { background: var(--ink); }
.axis { position: relative; height: 16px; font: 500 var(--pp-meta)/1 var(--ui); font-stretch: 92%; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; translate: -50% 0; }
.hist-tip { position: absolute; top: -22px; width: 120px; margin: 0; text-align: center; font: 600 var(--pp-meta)/1.2 var(--ui); color: var(--fg); pointer-events: none; opacity: 0; transition: opacity .15s; }
.hist-tip.on { opacity: 1; }
@media (max-width: 700px) {
  :root { --rh: 128px; }
  .instruments { padding-block: 10px 8px; }
  .hist { display: none; }
  .search { flex-basis: 100%; }
  fieldset.chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .chips label { flex: none; white-space: nowrap; }
  .count { flex: 1 1 100%; margin: 0; font-size: var(--pp-meta); }
}

/* ---------- the wall: every file, grouped by year, on paper ---------- */
.wall { min-height: 60vh; padding: 0 var(--gutter) 40px; }
.yr { display: grid; grid-template-columns: clamp(116px, 12.5vw, 200px) minmax(0, 1fr); gap: 0 clamp(16px, 2vw, 32px); padding: 26px 0 30px; border-top: 1px solid var(--line); }
.yr:first-child { border-top: 0; }
.yr-h { position: sticky; top: calc(var(--top-h) + var(--bar-h, 150px) + 18px); align-self: start; }
.yr-h h2 { margin: 0; font-size: var(--pp-title); font-weight: 800; font-stretch: 70%; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.yr[data-year="Undated"] .yr-h h2 { font-size: var(--pp-title); }
.yr-h p { margin: 8px 0 0; font: 500 var(--pp-meta)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); }
.yr-progs { display: grid; gap: 2px; }
.yr-progs a { color: var(--fg); line-height: 1.25; }
@media (max-width: 700px) {
  .yr { grid-template-columns: minmax(0, 1fr); }
  .yr-h { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
  .yr-h h2, .yr[data-year="Undated"] .yr-h h2 { font-size: var(--pp-title); }
  .yr-h p { margin: 0; }
  .yr-progs { display: none; }
}

.tiles { display: flex; flex-wrap: wrap; gap: 18px 12px; }
.tiles .fill { flex: 999 1 0; }
.tile { flex: var(--ar) 1 calc(var(--ar) * var(--rh)); min-width: 0; display: block; color: var(--fg); text-decoration: none; }
.face { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--rule-2); }
.face .duo { position: absolute; inset: 0; }
.tile:hover .face { outline: 1px solid var(--ink-3); outline-offset: 2px; }
.tile:focus-visible { outline: none; }
.tile:focus-visible .face { outline: 2px solid var(--ember); outline-offset: 3px; }
.scrub { position: absolute; inset: 0; z-index: 2; background-repeat: no-repeat; opacity: 0; transition: opacity .15s; }
.tile:hover .scrub { opacity: 1; }
.badge { position: absolute; z-index: 3; left: 8px; top: 8px; padding: 3px 7px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-2); color: var(--ink); font: 500 var(--t-small)/1.2 var(--ui); font-stretch: 88%; }
.m-video .badge::before { content: ''; display: inline-block; margin-right: 5px; border: 4.5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); font: 700 var(--pp-body)/1.12 var(--ui); font-stretch: 78%; overflow-wrap: anywhere; }
.type small { font: 400 var(--pp-meta)/1.3 var(--ui); color: var(--ink-2); }
.t-contested .type { border-color: var(--stamp); }
.stamp { align-self: flex-start; margin-bottom: auto; padding: 2px 8px; border: 1.5px solid var(--stamp); border-radius: 2px; color: var(--stamp); font: 700 var(--pp-body)/1.2 var(--ui); font-stretch: 86%; white-space: nowrap; }
.cap { display: grid; gap: 1px; padding-top: 8px; }
.cap b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 600 var(--pp-body)/1.25 var(--ui); font-stretch: 94%; }
.cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--pp-meta)/1.3 var(--ui); font-stretch: 94%; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tile:hover .cap b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.none { display: grid; justify-items: start; gap: 16px; padding: 60px 0; font: 500 var(--pp-body)/1.4 var(--ui); color: var(--fg-2); }
.none p { margin: 0; }

/* ---------- footer: the key is the tags themselves ---------- */
.foot { display: grid; gap: 14px; max-width: none; padding: 40px var(--gutter) 60px; border-top: 1px solid var(--line); font: 400 var(--pp-meta)/1.5 var(--ui); font-stretch: 94%; color: var(--fg-2); }
.foot p { max-width: 90ch; margin: 0; }
.key { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px 28px; margin-bottom: 10px; }
.key p { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 10px; align-items: baseline; }
.key i { display: none; }

/* ---------- viewer: black stage, dossier on paper ---------- */
dialog { padding: 0; border: 0; }
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: #000; color: var(--bone);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 560px); }
.viewer:not([open]) { display: none; }
.viewer[open] { animation: v-in 400ms var(--ease); }
.viewer::backdrop { background: rgba(0, 0, 0, .7); }
@keyframes v-in { from { opacity: 0; } }
.v-stage { position: relative; display: grid; place-items: center; align-content: center; min-height: 0; overflow: hidden; background: #000; }
.v-stage > video, .lens > img { display: block; max-width: 100%; max-height: calc(100dvh - 60px); margin: auto; object-fit: contain; }
.v-stage > video { width: 100%; }
.v-stage iframe { display: block; width: 100%; height: 100dvh; border: 0; background: var(--paper-2); }
.v-stage:has(iframe) { place-items: stretch; }
.v-stage:has(iframe) .v-cap { display: none; }
.v-cap { margin: 0; padding: 10px 20px; font: 400 var(--t-small)/1.4 var(--ui); font-stretch: 86%; color: var(--bone-2); text-align: center; }
.lens { position: relative; cursor: zoom-in; }
.loupe { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none; opacity: 0; scale: .7; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--bone), 0 0 0 6px rgba(11, 15, 26, .35), 0 18px 40px rgba(0, 0, 0, .6); transition: opacity .18s, scale .25s var(--ease); }
.lens:hover .loupe { opacity: 1; scale: 1; }
.wave { position: relative; width: 92%; }
.wave img { display: block; width: 100%; }
.wave .prog { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(233, 228, 216, .14); border-right: 2px solid var(--bone); }
.wave + audio { width: 92%; margin-top: 18px; }
.page-poster { display: grid; justify-items: center; gap: 20px; padding: 28px; }
.page-poster img { max-height: 70dvh; max-width: 100%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.v-stage:has(> .ph) { grid-template-columns: minmax(0, 58ch); justify-content: center; justify-items: stretch; }
.ph { display: grid; gap: 12px; padding: 40px 32px; }
.ph .host { margin: 0; font: 800 var(--pp-title)/.92 var(--ui); font-stretch: 72%; letter-spacing: -.02em; color: var(--bone); overflow-wrap: anywhere; }
.ph h2 { margin: 0; font-size: var(--pp-subhead); font-weight: 650; font-stretch: 92%; }
.ph p { margin: 0; font: 400 var(--pp-body)/1.5 var(--serif); color: var(--bone-2); }
.ph a { overflow-wrap: anywhere; }
.ph + .btn { justify-self: start; margin: 0 32px 32px; }

/* contested: a paper slip on the stage, the one place the stamp colour appears in the viewer */
.redact { display: grid; gap: 14px; max-width: 54ch; margin: 24px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-top: 6px solid var(--paper-2); border-radius: 2px; background: var(--bg); color: var(--fg); }
.redact p { margin: 0; font: 400 var(--pp-body)/1.5 var(--serif); }
.big-stamp { justify-self: start; padding: 2px 12px; border: 2px solid var(--stamp); border-radius: 2px; color: var(--stamp); font: 800 var(--pp-title)/1.05 var(--ui); font-stretch: 74%; letter-spacing: -.01em; animation: stamp 120ms cubic-bezier(.2, .8, .2, 1) .2s both; }

.dossier { min-height: 0; overflow-y: auto; padding: 0 28px 40px; border-top: 6px solid var(--paper-2); background: var(--bg); color: var(--fg); scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.v-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; margin: 0 -28px; padding: 12px 18px 12px 28px; background: var(--bg); }
.v-pos { margin-right: auto; font: 500 var(--pp-meta)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.v-nav, .v-close { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: none; color: var(--fg); cursor: pointer; }
.v-nav svg, .v-close svg { width: 22px; height: 22px; }
.v-nav:hover, .v-close:hover { background: var(--rule-2); }
.v-nav[aria-disabled] { opacity: .25; pointer-events: none; }
.v-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 0; font: 500 var(--pp-meta)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.viewer[open] .v-id .prov { animation: stamp 120ms cubic-bezier(.2, .8, .2, 1) .3s both; }
.dossier h2 { margin: 12px 0 16px; font-size: var(--pp-section); font-weight: 800; font-stretch: 76%; line-height: .98; letter-spacing: -.015em; }
.desc p { margin: 0 0 1em; font: 400 var(--pp-body)/1.55 var(--serif); }
.dossier .note { margin: 0 0 18px; }
.dossier h3 { margin: 0 0 8px; font: 650 var(--pp-body)/1.3 var(--ui); font-stretch: 92%; color: var(--fg); }
.also { margin: 22px 0 0; }
.also ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 var(--pp-body)/1.45 var(--serif); }
.also ul:not(.pairs) li > a:first-child { margin-right: 4px; font: 650 var(--pp-body)/1.4 var(--ui); font-stretch: 94%; }
.also .pairs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.pairs a { display: grid; gap: 6px; text-decoration: none; color: var(--fg); font: 500 var(--pp-meta)/1.25 var(--ui); font-stretch: 94%; }
.pairs .duo { aspect-ratio: 4 / 3; }
.pairs .duo img { object-fit: contain; }
.pairs a > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dossier dl { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 8px 14px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font: 400 var(--pp-body)/1.4 var(--ui); font-stretch: 96%; }
.dossier dt { color: var(--fg-2); font-stretch: 90%; }
.dossier dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; overflow-y: auto; }   /* stacked: each row is as tall as its content and the dialog scrolls */
  .v-stage { min-height: 42dvh; padding-top: 56px; }
  .v-stage > video, .lens > img { max-height: 60dvh; }
  .v-stage iframe { height: 70dvh; }
  .dossier { overflow: visible; padding: 0 16px 40px; }
  /* the controls stay on the stage, at the top, so Close is always in reach */
  .viewer .v-bar { position: fixed; inset: 0 0 auto 0; margin: 0; padding: 6px 8px 6px 16px; background: #000; --fg: var(--bone); --fg-2: var(--bone-2); }
  .viewer .v-nav:hover, .viewer .v-close:hover { background: var(--night-2); }
  .dossier dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dossier dd { margin-bottom: 8px; }
}

/* ---------- channels drawer: on paper ---------- */
.drawer { width: min(440px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0 26px 30px; border-top: 6px solid var(--paper-2); background: var(--bg); color: var(--fg); overflow-y: auto; }
.drawer[open] { animation: d-in 400ms var(--ease); }
.drawer::backdrop { background: rgba(11, 15, 26, .6); }
@keyframes d-in { from { translate: 40px 0; opacity: 0; } }
.drawer .v-bar { margin: 0 -26px; padding: 14px 16px 14px 26px; }
.drawer h2 { margin: 0 auto 0 0; font-size: var(--pp-section); font-weight: 800; font-stretch: 76%; }
.drawer > p { margin: 0; font: 400 var(--pp-body)/1.5 var(--serif); color: var(--fg-2); }
.drawer ul { margin: 18px 0 0; padding: 0; list-style: none; }
.drawer li { padding: 14px 0; border-top: 1px solid var(--line); font: 400 var(--pp-body)/1.4 var(--serif); }
.drawer li > a { font: 650 var(--pp-body)/1.3 var(--ui); font-stretch: 94%; color: var(--fg); }
.drawer .host { font: 500 var(--pp-meta) var(--ui); color: var(--fg-2); }
.drawer li p { margin: 4px 0 0; }
.drawer .caution { color: var(--fg-2); font-style: italic; }

.empty { padding: 120px var(--gutter); color: var(--fg-2); }