/*
 * archive.css — styling for the meeting archive (docs/archive/).
 *
 * Matches the retro CRT/terminal identity of the site homepage: deep-purple
 * background with scanlines, amber phosphor accents, squared chrome. Drives
 * two page types built by .github/scripts/build_archive_html.py:
 *   - the filterable index (index.html)
 *   - the per-meeting brief (one <video_id>.html each)
 *
 * Topic chips take a phosphor color inline as `--c`, so the palette is
 * deterministic and needs no JS. Dark-only by design, like the homepage.
 *
 * One face: Zilla Slab, chrome and prose alike. It started as the reading
 * face for brief bodies only, with Courier Prime on the chrome; the split
 * read as two pages stapled together, so the chrome moved over too. A slab
 * was chosen deliberately over a book serif: it keeps the typewriter lineage
 * the CRT shell implies, where a serif on a dark ground reads as a chat UI.
 * Slab is the direction, not the specific face — swapping Zilla for another
 * slab means changing --read and the @font-face srcs below and nothing else.
 * See notes/archive-typography.md.
 *
 * Uppercase, letterspacing and the amber palette carry the terminal identity
 * now that the monospace does not. Tables keep tabular figures so columns
 * still line up.
 *
 * Zilla Slab is self-hosted (docs/assets/fonts/, SIL OFL, license alongside).
 * Google Fonts is deliberately not used: a blocked or slow request there
 * falls back silently, which is how the measure regressed unnoticed before.
 *
 * /ozyfax/ is untouched — the teletext edition is monospace by definition.
 */

@font-face {
  font-family: "Zilla Slab";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/zilla-slab-400.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/zilla-slab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/zilla-slab-400-italic.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #120920;
  --panel: #1a0f2e;
  --panel-dark: #0d0718;
  --amber: #f5a623;
  --tan: #c09050;
  --ink: #e2d6bc;
  /* The face, everywhere on this surface. Self-hosted; see the note above. */
  --read: "Zilla Slab", "Roboto Slab", "Bitter", Georgia, serif;
  /* Text column cap. 38rem lands near 70 characters in Zilla at 1.0625rem;
     the panel around it stays 60rem so the chrome keeps its width. */
  --measure: 38rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Root em, not a body font-size bump: every size and --measure above are in
   rem, so this scales all of them together and the 69-char measure and 1.62
   leading ratio documented in notes/archive-typography.md hold exactly as
   tuned — only the absolute size moves. */
html { font-size: 127%; }

body {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(245, 166, 35, 0.03) 2px, rgba(245, 166, 35, 0.03) 4px);
  font-family: var(--read);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  min-height: 100vh;
  padding: 1.1rem clamp(0.9rem, 3vw, 1.8rem) 4rem;
  border-left: 3px solid var(--amber);
  border-right: 3px solid var(--amber);
  background-color: var(--panel);
  box-shadow: inset 0 0 24px rgba(245, 166, 35, 0.08);
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

nav.crumb {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tan);
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px dashed var(--tan);
}
nav.crumb a { color: var(--tan); }
nav.crumb a:hover { color: var(--amber); }

/* ------------------------------------------------------------------ *
 * Index: masthead                                                    *
 * ------------------------------------------------------------------ */

.termbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-dark);
  border: 1px solid var(--amber);
  padding: 4px 10px;
  font-size: clamp(8px, 1.4vw, 10px);
  letter-spacing: clamp(1px, 0.5vw, 2.5px);
  text-transform: uppercase;
  color: var(--amber);
}
.termbar-mid { flex: 1; text-align: center; color: var(--tan); }
@media (max-width: 520px) { .termbar-mid { display: none; } }

.masthead h1 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.05;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 1rem 0 0.5rem;
}
.masthead h1::before { content: "\27A4  "; }
.masthead .lede {
  color: var(--tan);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 46rem;
  margin-bottom: 1rem;
}

.statbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  padding: 0.7rem 0;
  border-top: 1px dashed var(--tan);
  border-bottom: 1px dashed var(--tan);
}
.statbar .stat { display: flex; flex-direction: column; }
.statbar dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tan);
}
.statbar dt::before { content: "\25CF "; color: var(--amber); }
.statbar dd {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1.1;
}
.statbar .stat--span dd { font-size: 0.95rem; padding-top: 0.5rem; }

/* ------------------------------------------------------------------ *
 * Index: sticky controls                                             *
 * ------------------------------------------------------------------ */

.controls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  padding: 0.7rem 0 0.55rem;
  margin-top: 0.6rem;
  border-bottom: 2px solid var(--amber);
}
.searchrow { display: flex; gap: 0.6rem; align-items: stretch; }
.search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--tan);
  background: var(--panel-dark);
}
.search .prompt {
  padding: 0 0.5rem 0 0.7rem;
  color: var(--amber);
  font-weight: 700;
}
.search input {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.search input::placeholder { color: var(--tan); opacity: 0.8; }
.search:focus-within { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.search input:focus { outline: none; }
.sort {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--tan);
  background: var(--panel-dark);
  color: var(--amber);
  cursor: pointer;
}
.sort:focus { outline: none; border-color: var(--amber); }

/* Topic filter chips */
.topicbar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.chip {
  --c: var(--amber);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.34rem 0.55rem;
  border: 1px solid var(--c);
  background: transparent;
  color: var(--c);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.chip .n { opacity: 0.7; margin-left: 0.15rem; }
.chip:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.chip[aria-pressed="true"] {
  background: var(--c);
  color: var(--bg);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
}
.chip[aria-pressed="true"] .n { opacity: 0.8; }
.chip.reset { --c: var(--tan); }
.chip.reset[aria-pressed="true"] { color: var(--bg); }

/* Static (non-interactive) chips on cards and detail hero */
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag {
  --c: var(--amber);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--c);
  color: var(--c);
  white-space: nowrap;
}
/* Storyline chips: dashed outline, lowercase — quieter than domain tags.
   On detail pages they link to the pre-filtered index. */
.tag.sub {
  border-style: dashed;
  text-transform: none;
  font-weight: 400;
  opacity: 0.9;
}
a.tag.sub:hover { background: color-mix(in srgb, var(--c) 18%, transparent); text-decoration: none; }

/* Session-format badge next to dates ("COUNCIL", "WORKSHOP", "HEARING"…) */
.badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  border: 1px solid var(--tan);
  color: var(--tan);
  vertical-align: 1px;
}

/* Collapsible storyline filter bar under the topic chips */
.subbar { margin-top: 0.65rem; }
.subbar summary {
  cursor: pointer;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tan);
  user-select: none;
}
.subbar summary::marker { color: var(--amber); }
.subbar summary .n { opacity: 0.7; }
.subbar[open] summary { color: var(--amber); }

/* ------------------------------------------------------------------ *
 * Index: result meta + card grid                                     *
 * ------------------------------------------------------------------ */

.resultmeta {
  margin: 1rem 0 0.7rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tan);
}
.resultmeta::before { content: "// "; color: var(--amber); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.9rem;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--panel-dark);
  border: 1px solid var(--tan);
  padding: 0.95rem 1rem 1rem;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.card:hover {
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.18);
  transform: translateY(-2px);
}
.card .date {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tan);
  margin-bottom: 0.4rem;
}
.card .date::before { content: "\25B8 "; color: var(--amber); }
.card h3 { margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.35; font-weight: 700; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--amber); }
.card .summary {
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tan);
}
.card .tags { margin-top: auto; }
.card .yt {
  margin-top: 0.65rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.empty {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--tan);
}
.empty.show { display: block; }

/* ------------------------------------------------------------------ *
 * Detail page                                                        *
 * ------------------------------------------------------------------ */

.hero { margin-bottom: 1.4rem; }
.hero .date {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tan);
}
.hero .date::before { content: "\25B8 "; color: var(--amber); }
.hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.15;
  color: var(--amber);
  margin: 0.35rem 0 0.75rem;
}
.hero .tags { margin-bottom: 1rem; }
.hero .thesis {
  font-family: var(--read);
  margin-bottom: 1rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--amber);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.hero .readmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tan);
  padding-top: 0.4rem;
  border-top: 1px dashed var(--tan);
}

/* Click-to-load YouTube facade */
.ytfacade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin: 1.3rem 0;
  border: 1px solid var(--amber);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.ytfacade .thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.ytfacade::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(transparent 55%, rgba(13, 7, 24, 0.75)),
    repeating-linear-gradient(0deg, transparent, transparent 2px,
      rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 4px);
}
.ytfacade .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 46px;
  background: rgba(13, 7, 24, 0.7);
  border: 2px solid var(--amber);
  border-radius: 8px;
  transition: background 0.12s, transform 0.1s;
}
.ytfacade .play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--amber);
}
.ytfacade:hover .play { background: var(--amber); transform: translate(-50%, -50%) scale(1.05); }
.ytfacade:hover .play::after { border-left-color: var(--bg); }
.ytfacade .label {
  position: absolute;
  left: 0.9rem; bottom: 0.7rem;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px #000;
}
.ytfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Table of contents */
.toc {
  max-width: var(--measure);
  margin: 1.3rem auto;
  padding: 0.85rem 1rem;
  background: var(--panel-dark);
  border: 1px solid var(--tan);
}
.toc .toc-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 0.5rem;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: 0.88rem; }
.toc li::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--tan); }

/* Brief body.
   Measure, not contrast, was what made this hard to read: 86 characters per
   line of monospace at 1.95 leading (contrast measures 12.7:1, well past AA).
   Paragraph shape is the other half and CSS cannot fix it — the median
   paragraph runs 108 words and the worst 303 — see notes/archive-typography.md. */
.brief {
  max-width: var(--measure);
  margin-inline: auto;
  font-family: var(--read);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  text-wrap: pretty;
}
.brief h2 {
  font-size: 1.05rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dashed var(--tan);
  scroll-margin-top: 1rem;
}
.brief h2::before { content: "\25B8 "; }
.brief h3 {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber);
  margin: 1.8rem 0 0.5rem;
}
.brief p { margin: 0 0 1.15em; }
/* First paragraph of a section is the way in. */
.brief h2 + p { font-size: 1.12rem; line-height: 1.55; }
/* Lists come from utils/brief_format.py, which turns a sentence's parallel
   semicolon clauses ("Councilor A pressed X; Councilor B raised Y") into the
   list it already was. Markers in amber so they read as structure. */
.brief ul, .brief ol { margin: 0 0 1.15em; padding-left: 1.4rem; }
.brief li { margin-bottom: 0.45em; }
.brief li::marker { color: var(--amber); }
.brief a { text-decoration: underline; }
/* Emphasis was previously flattened to 400, which removed the only scanning
   anchors in a wall of prose. Bold is load-bearing once Pass 4 emits it. */
.brief strong, .brief b { font-weight: 700; color: #f4ecd8; }
.brief table {
  /* Figures align by variant now that the columns are not monospaced. */
  font-variant-numeric: tabular-nums;
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}
.brief th, .brief td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--tan);
  text-align: left;
  vertical-align: top;
}
.brief thead th { background: var(--panel-dark); color: var(--amber); font-weight: 700; }

/* Related meetings (shared storylines) */
.related {
  margin-top: 2.2rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--panel-dark);
  border: 1px solid var(--tan);
}
.related-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 0.6rem;
}
.related ul { list-style: none; display: grid; gap: 0.7rem; }
.related li { line-height: 1.5; }
.related li > a { display: block; }
.related li > a:hover .ttl { color: var(--amber); }
.related .date {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tan);
  margin-right: 0.5rem;
}
.related .date::before { content: "\25B8 "; color: var(--amber); }
.related .ttl { font-size: 0.9rem; color: var(--ink); }
.related .via { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }

/* Prev/next pager */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 2px solid var(--amber);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--tan);
  background: var(--panel-dark);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pager a:hover { border-color: var(--amber); box-shadow: 0 0 12px rgba(245, 166, 35, 0.15); text-decoration: none; }
.pager .dir { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); }
.pager .ttl { font-size: 0.85rem; color: var(--ink); line-height: 1.35; }
.pager a.next { text-align: right; }
.pager .spacer { border: none; background: none; }

@media (max-width: 34rem) {
  .pager { grid-template-columns: 1fr; }
  .statbar { gap: 0 1.2rem; }
}

/* Boilerplate AI-disclosure line, rendered outside .wrap so it reads as a
   quiet footer strip rather than part of the brief (see utils/disclaimer.py). */
.ai-disclaimer {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.9rem clamp(0.9rem, 3vw, 1.8rem) 1.4rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--tan);
  opacity: 0.75;
}

@media print {
  .controls, .toc, .pager, .ytfacade, nav.crumb, .termbar, .ai-disclaimer { display: none; }
  body, .wrap { background: #fff; color: #000; border: 0; }
}