/* ============================================================
   THE EVIDENCE — self-contained styles for the Astro page.
   tokens (from the design system) + shared components + archive
   layout + page shell. Color-token names are namespaced (--tlc-*,
   --fg-*) but inherit the active site palette from library.css.
   ============================================================ */

/* ----- DESIGN-SYSTEM TOKENS ----- */
/* ================================================================
   TLC Reference Library — active evidence archive foundations.
   This route inherits the 2026-06 flat navy + warm ivory system from
   library.css and keeps only evidence-specific layout/category tokens here.

   Atkinson Hyperlegible Next is loaded as an opt-in accessibility
   alternative for body copy on dense reading pages.
   ================================================================ */

/* ----------------------------------------------------------------
   FONT FACES
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Modern Typewriter';
  src: url('/media/MODERN_TYPEWRITER.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2-variations'),
       url('/AtkinsonHyperlegibleNextVF-Variable.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------
   COLOR TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Surfaces — the system runs on a black page with cream "paper"
     content cards. White is reserved for legacy subpages. */
  --tlc-black:        #000000;   /* page background, nav, quote strips */
  --tlc-ink:          #050505;   /* deep page tint (style-audit uses #050505) */
  --tlc-midnight:     #000033;   /* nav background tint w/ depth */
  --tlc-paper:        var(--paper, #FAF6EC);
  --tlc-paper-ink:    var(--paper-ink, #1A1712);
  --tlc-card-white:   #FFFFFF;   /* legacy white card (subpages, reference list) */
  --tlc-card-grey:    #000000; /* alternate "newsprint" card on style.css */

  /* Brand primaries — one mid-red, consolidated 2026-05-14 */
  --tlc-red-dark:     #802420;   /* PRIMARY — card headings, doc-card chrome, borders, citation accents (was --tlc-red #990000 and --tlc-red-deep #8c1918) */
  --tlc-red-bright:   #d94545;   /* hot accent — back-to-top, hover links on cream */
  --tlc-red-muted:    #ce0a0a;   /* "muted-text" variant from subpage.css */

  --tlc-blue-light:   var(--blue-light, #7FA8D4);
  --tlc-gold:         var(--blue-light, #7FA8D4);   /* legacy name, current soft steel */
  --tlc-blue:         #1E5188;   /* PRIMARY navy — nav accent, evidence links, card-label outline, ref-list article-title link (consolidated 2026-05-14; was --tlc-blue #0f4c81 + --tlc-blue-card #336699 + --tlc-blue-link #104a74) */
  --tlc-blue-soft:    #8ab4f8;   /* footer link, back-link color */

  /* Secondary accents (used sparingly, mostly for category tags) */
  --tlc-teal:         #1aa6a6;   /* essay inline links, accent underline */
  --tlc-violet:       #996699;
  --tlc-green:        #336633;
  --tlc-nav-hover:    var(--nav-hover, #7FA8D4);

  /* Rules + dividers */
  --tlc-rule-light:   var(--tlc-paper);                 /* on black */
  --tlc-rule-soft:    rgba(250, 246, 236, 0.35);
  --tlc-rule-dark:    #1a2030;                          /* card border on black */
  --tlc-rule-paper:   rgba(128, 36, 32, 0.25);          /* on paper */

  /* Category accents — used in the timeline, ref tags, bridge cards */
  --tlc-cat-policy:        #1E5188;
  --tlc-cat-trial:         #1aa6a6;
  --tlc-cat-publication:   #6b4c9a;
  --tlc-cat-contamination: #d94545;
  --tlc-cat-litigation:    #c77d2a;

  /* ----- Semantic aliases (everything below should reference the
           tokens above, never raw hex). ----- */
  --bg-page:           var(--tlc-black);
  --fg-on-dark:        var(--tlc-paper);          /* cream-on-black body text */
  --fg-on-paper:       var(--tlc-paper-ink);      /* near-black on cream */
  --fg-muted:          rgba(250, 246, 236, 0.65);
  --fg-quiet:          rgba(250, 246, 236, 0.4);
  --accent-primary:    var(--tlc-red-dark);
  --accent-secondary:  var(--tlc-gold);
  --accent-link:       var(--tlc-blue);
  --accent-hover:      var(--tlc-red-bright);

  /* ----------------------------------------------------------------
     TYPE TOKENS
     ---------------------------------------------------------------- */
  /* Font stacks */
  --f-display:  "Book Antiqua", "Palatino Linotype", "Palatino LT STD", Georgia, serif; /* @kind font */
  --f-body:     "Palatino Linotype", "Book Antiqua", Georgia, serif; /* @kind font */
  --f-bookman:  "Bookman Old Style", "URW Bookman L", "Palatino Linotype", serif; /* @kind font */
  --f-typewr:   "Modern Typewriter", "Courier Prime", "Courier New", monospace; /* @kind font */
  --f-mono:     "Courier New", "Courier Prime", monospace; /* @kind font */
  --f-ui:       var(--f-typewr); /* @kind font */ /* alias used by some components */
  --f-sans-legacy: Arial, "Helvetica Neue", sans-serif; /* @kind font */ /* legacy subpage body */
  --f-a11y:     "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; /* @kind font */
  /* System rule (2026-05-15): Modern Typewriter is for HEADERS only —
     it doesn't read well below ~16px. For any spec / caption / role /
     description / annotation text under ~16px, use --f-spec (Atkinson). */
  --f-spec:     "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; /* @kind font */

  /* Type scale (rem). 1rem = 16px. */
  --size-h1:     2rem;       /* 32 */
  --size-h2:     1.5rem;     /* 24 */
  --size-h3:     1.25rem;    /* 20 */
  --size-h4:     1.0625rem;  /* 17 — card heading */
  --size-body:   0.9375rem;  /* 15 — reading-card prose */
  --size-small:  0.8125rem;  /* 13 — captions, source list */
  --size-micro:  0.6875rem;  /* 11 — typewriter labels */

  /* Spacing rhythm (0.5rem scale) */
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;
  --gap-2xl: 3rem;

  /* Borders + shadows */
  --radius-card: 2px;           /* "0 everywhere" is the rule; cards get 2px max */
  --radius-pill: 0;
  --border-card-paper: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(0, 0, 0, 0.25);
  --border-card-dark:  0 6px 14px rgba(30, 81, 136, 0.18);
  --shadow-hover-red:  0 0 0 1px rgba(255, 32, 66, 0.18), 0 10px 22px rgba(255, 32, 66, 0.22);
}

/* ----- SHARED COMPONENTS (faux covers, audio/video players, chips) ----- */
/* ============================================================
   TLC — Key Documents & Media
   Shell + shared components (faux covers, audio + video players)
   + the three variation modules (Reel / Dossier / Stage).
   Built on colors_and_type.css tokens.
   ============================================================ */

/* ---------- Shell ---------- */
.xp-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.5rem 2.5rem 5rem;
}
@media (max-width: 720px){ .xp-wrap { padding: 1.25rem 1.1rem 4rem; } }

/* sticky brand bar */
.xp-nav {
  position: sticky; top: 0; z-index: 250;
  background: #000;
  border-bottom: 1px solid var(--tlc-rule-dark);
}
.xp-nav-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0.85rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.xp-wordmark {
  font-family: var(--f-typewr);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.xp-nav-meta {
  font-family: var(--f-typewr); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-quiet);
}
@media (max-width: 720px){ .xp-nav-inner{ padding: 0.75rem 1.1rem; } .xp-nav-meta{ display:none; } }

/* section heading echoing .section-heading */
.xp-eyebrow {
  font-family: var(--f-typewr); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tlc-gold); margin: 0 0 0.5rem;
}
.xp-title {
  font-family: var(--f-typewr); font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: #fff; margin: 0 0 0.4rem; line-height: 1.12;
}
.xp-sub {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  color: var(--fg-muted); max-width: 60ch; margin: 0;
}

/* ---------- Variation switcher ---------- */
.xp-switch-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 1.75rem 0 0.4rem;
  border-bottom: 1px solid var(--tlc-rule-soft);
}
.xp-switch { display: flex; gap: 0; }
.xp-tab {
  appearance: none; background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-quiet);
  font-family: var(--f-typewr); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.7rem 1.05rem; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.xp-tab .n { font-size: 0.625rem; color: var(--tlc-gold); opacity: .55; }
.xp-tab:hover { color: var(--fg-muted); }
.xp-tab[aria-selected="true"] { color: #fff; border-color: var(--tlc-red-bright); }
.xp-tab[aria-selected="true"] .n { opacity: 1; }
.xp-tab-tag {
  font-family: var(--f-spec); font-size: 0.72rem; color: var(--fg-quiet);
  letter-spacing: .02em; padding-bottom: .55rem;
}
.xp-tab-tag b { color: var(--fg-muted); font-weight: 600; }

/* panels — base state is VISIBLE; no entrance animation (a throttled
   iframe can pin a `both`-filled animation at opacity:0) */
.xp-panel { display: none; }
.xp-panel.is-active { display: block; }
@keyframes xpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* category chip */
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-spec); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.cat-chip::before { content:''; width: 8px; height: 8px; background: currentColor; flex: 0 0 auto; }

/* ============================================================
   FAUX COVER — a typeset stand-in for docs with no scan
   ============================================================ */
.faux-cover {
  position: relative; width: 100%; aspect-ratio: 85/110;
  background:
    linear-gradient(180deg, #fffdf0 0%, #f7f0d8 60%, #efe6c6 100%);
  color: #1a1712;
  display: flex; flex-direction: column;
  padding: 12% 11% 10%;
  box-sizing: border-box; overflow: hidden;
}
.faux-cover::after { /* paper grain + vignette */
  content:''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,.10) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.faux-cover .fc-rule { height: 3px; background: var(--accent, #802420); width: 38%; margin-bottom: 7%; }
.faux-cover .fc-org {
  font-family: var(--f-typewr); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #802420);
  margin-bottom: auto;
}
.faux-cover .fc-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(0.95rem, 0.5rem + 0.9vw, 1.35rem); line-height: 1.16;
  letter-spacing: .005em; color: #15120d; margin: 0.5rem 0;
  text-wrap: balance;
}
.faux-cover .fc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid rgba(0,0,0,.25); padding-top: 0.5rem; margin-top: 0.5rem;
}
.faux-cover .fc-year {
  font-family: var(--f-typewr); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; color: #2a241a;
}
.faux-cover .fc-seal {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--accent, #802420); opacity: .5;
}

/* cover image treatment */
.cover-img { width: 100%; aspect-ratio: 85/110; object-fit: cover; object-position: top center;
  display: block; background: #ece3cc; filter: saturate(.92) contrast(1.02); }

/* ============================================================
   AUDIO PLAYER — faux waveform, real <audio> behind it
   ============================================================ */
.ap {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--tlc-rule-dark);
  border-left: 3px solid var(--accent, #1aa6a6);
}
.ap-btn {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--accent, #1aa6a6); background: transparent;
  color: var(--accent, #1aa6a6); cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.ap-btn:hover { background: var(--accent, #1aa6a6); color: #08110f; }
.ap-btn svg { width: 16px; height: 16px; }
.ap-body { flex: 1 1 auto; min-width: 0; }
.ap-meta { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.ap-title {
  font-family: var(--f-display); font-size: 0.92rem; color: var(--fg-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-sub { font-family: var(--f-typewr); font-size: 0.6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-quiet); white-space: nowrap; }
.ap-wave { display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.ap-bar { flex: 1 1 auto; min-width: 2px; background: rgba(255,255,204,.22);
  transition: background .12s ease; border-radius: 1px; }
.ap-bar.on { background: var(--accent, #1aa6a6); }
.ap-time { font-family: var(--f-mono); font-size: 0.64rem; color: var(--fg-muted);
  flex: 0 0 auto; min-width: 4ch; text-align: right; }
.ap.is-dead .ap-btn { opacity: .8; }
.ap-live-dot { display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--tlc-red-bright); margin-left: .35rem; vertical-align: middle;
  animation: apPulse 1.6s ease-in-out infinite; }
@keyframes apPulse { 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ============================================================
   VIDEO POSTER — grain + play; click reveals <video controls>
   ============================================================ */
.vp { position: relative; overflow: hidden; background: #000;
  border: 1px solid var(--tlc-rule-dark); }
/* Real frame-grab poster, shown in full (contain = never cropped). */
.vp-poster { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; background:#000; }
.vp::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.86) 100%); }
.vp-grain { display: none; }
.vp-content { position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.2rem; }
.vp-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85); background: rgba(8,8,11,.35);
  backdrop-filter: blur(2px); color: #fff; cursor: pointer; z-index: 3;
  display: grid; place-items: center; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.vp-play:hover { transform: translate(-50%,-50%) scale(1.06); background: var(--tlc-red-dark); border-color: var(--tlc-red-bright); }
.vp-play svg { width: 22px; height: 22px; margin-left: 3px; }
.vp-kind { font-family: var(--f-typewr); font-size: 0.58rem; font-weight:700; letter-spacing:.16em;
  text-transform: uppercase; color: #fff; opacity:.7; }
.vp-runtime {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  font-family: var(--f-mono); font-size: 0.66rem; color: #fff;
  background: rgba(0,0,0,.5); padding: 2px 7px; letter-spacing: .04em; }
.vp-vtitle { font-family: var(--f-display); font-weight: 700; color: #fff;
  font-size: clamp(1rem, .8rem + .6vw, 1.3rem); line-height: 1.15; margin: .3rem 0 .15rem; }
.vp-vmeta { font-family: var(--f-typewr); font-size: 0.6rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.75); }
.vp video { position: relative; z-index: 5; width: 100%; height: 100%; object-fit: contain; background:#000; display:block; }

/* generic "view pdf" link */
.xp-pdf {
  font-family: var(--f-typewr); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.xp-cite {
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--f-typewr); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tlc-blue-soft);
}
.xp-cite:hover { color: var(--tlc-red-bright); }
.xp-cite.copied { color: var(--tlc-gold); }

/* toast */
.xp-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(14px);
  background: #0a0a0a; border: 1px solid var(--tlc-rule-dark); border-left: 3px solid var(--tlc-gold);
  color: var(--fg-on-dark); font-family: var(--f-spec); font-size: 0.8rem;
  padding: 0.7rem 1.1rem; z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; }
.xp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ----- ARCHIVE LAYOUT ----- */
/* ============================================================
   THE EVIDENCE — archive layout
   Featured media band + a full evidence wall (every document
   visible at once) + a record lightbox. No carousel.
   Built on colors_and_type.css + explore.css components.
   ============================================================ */

/* ---------- Section rhythm ---------- */
.ev-section-head {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  margin: 3rem 0 1.2rem;
  border-bottom: 1px solid var(--tlc-rule-soft); padding-bottom: 0.7rem;
}
.ev-section-head h2 {
  font-family: var(--f-typewr); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin: 0;
}
.ev-section-head .sub {
  font-family: var(--f-spec); font-size: 0.8rem; color: var(--fg-quiet); }
.ev-section-head .count {
  font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-quiet); margin-left: auto; }

/* ============================================================
   FEATURED MEDIA BAND
   ============================================================ */
.ev-featured { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.4rem; align-items: stretch; margin-top: 1.4rem; }
@media (max-width: 880px){ .ev-featured { grid-template-columns: 1fr; } }
.ev-feature-main .vp { aspect-ratio: 16/9; height: 100%; }
.ev-feature-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ev-feature-side .vp { aspect-ratio: 16/9; }
.ev-feature-side .vp .vp-play { width: 46px; height: 46px; }
.ev-feature-side .vp .vp-play svg { width: 15px; height: 15px; }
.ev-feature-side .vp .vp-vtitle { font-size: 0.98rem; margin: 0.25rem 0 0.1rem; }
.ev-feature-side .vp .vp-content { padding: 0.85rem 0.95rem; }
.ev-feature-side .ap { flex: 0 0 auto; }

/* ============================================================
   EVIDENCE WALL — every document, all visible
   ============================================================ */
.ev-filters { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.ev-pill {
  appearance: none; cursor: pointer; padding: 0.4rem 0.8rem; background: transparent;
  border: 1px solid var(--tlc-rule-dark); color: var(--fg-quiet);
  font-family: var(--f-typewr); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.14s ease;
}
.ev-pill:hover { color: var(--fg-muted); border-color: var(--tlc-rule-soft); }
.ev-pill.on { color: #fff; border-color: var(--tlc-red-bright); background: rgba(217,69,69,0.08); }

.ev-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ev-card-min, 248px), 1fr));
  gap: 1.6rem 1.5rem;
}

.ev-doc {
  appearance: none; text-align: left; background: transparent; border: 0; padding: 0;
  cursor: pointer; display: flex; flex-direction: column; min-width: 0;
}
.ev-doc-frame {
  position: relative;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
  outline: 1px solid rgba(255,255,204,0.07); outline-offset: 0;
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.22s ease, outline-color 0.22s ease;
}
.ev-doc:hover .ev-doc-frame,
.ev-doc:focus-visible .ev-doc-frame {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5);
  outline-color: var(--tlc-red-bright);
}
.ev-doc-frame .cover-img,
.ev-doc-frame .faux-cover { display: block; }
.ev-doc-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tlc-red-dark); z-index: 3; }
.ev-doc-num {
  position: absolute; top: 0; left: 5px; z-index: 4;
  font-family: var(--f-mono); font-size: 0.6rem; color: #fff;
  background: var(--tlc-red-dark); padding: 2px 7px; letter-spacing: 0.06em;
}
.ev-doc-date {
  position: absolute; top: 0; right: 0; z-index: 4;
  font-family: var(--f-typewr); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #1a1712; background: var(--tlc-gold); padding: 3px 8px;
}
.ev-doc-type {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  font-family: var(--f-typewr); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.62); padding: 3px 9px;
}
.ev-doc-av {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  font-family: var(--f-typewr); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; background: var(--tlc-red-dark); padding: 3px 8px;
}
.ev-doc-cap { padding: 0.7rem 0.1rem 0; }
.ev-doc-org {
  font-family: var(--f-typewr); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tlc-gold); margin-bottom: 0.3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-doc-title {
  font-family: var(--f-display); font-size: 0.92rem; line-height: 1.25; color: var(--fg-on-dark);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================
   RECORD LIGHTBOX
   ============================================================ */
.ev-lb { position: fixed; inset: 0; z-index: 800; display: none; }
.ev-lb.open { display: block; }
.ev-lb-back { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(3px); animation: xpFade 0.25s ease; }
.ev-lb-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(900px, 92vw); max-height: 90vh; overflow: auto;
  background: #050505; border: 1px solid var(--tlc-rule-dark);
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  animation: evRise 0.28s cubic-bezier(.2,.7,.2,1);
}
@keyframes evRise { from { opacity: 0; transform: translate(-50%,-46%) scale(.985); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@media (max-width: 680px){ .ev-lb-panel { grid-template-columns: 1fr; } }
.ev-lb-cover { background: #0a0a0a; padding: 1.5rem; display: grid; place-items: center; border-right: 1px solid var(--tlc-rule-dark); }
.ev-lb-cover .cover-img, .ev-lb-cover .faux-cover { width: 100%; max-width: 240px; box-shadow: 0 14px 30px rgba(0,0,0,0.6); }
.ev-lb-body { padding: 1.7rem 1.8rem; position: relative; }
.ev-lb-close {
  position: absolute; top: 0.7rem; right: 0.8rem; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--tlc-rule-soft); background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
}
.ev-lb-close:hover { background: var(--tlc-red-dark); border-color: var(--tlc-red-bright); }
.ev-lb-org { font-family: var(--f-typewr); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tlc-gold); margin-bottom: 0.5rem; }
.ev-lb-title { font-family: var(--f-display); font-weight: 700; line-height: 1.18; font-size: 1.35rem; color: #fff; margin: 0 0 0.7rem; text-wrap: balance; }
.ev-lb-meta { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 0.9rem; }
.ev-lb-date { font-family: var(--f-mono); font-size: 0.7rem; color: var(--fg-muted); }
.ev-lb-sum { font-family: var(--f-spec); font-size: 0.92rem; line-height: 1.62; color: var(--fg-muted); margin: 0 0 1.1rem; }
.ev-lb-cite {
  font-family: var(--f-body); font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,204,0.55);
  border-left: 2px solid var(--tlc-rule-dark); padding-left: 0.85rem; margin-bottom: 1.2rem;
}
.ev-lb-actions { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }


/* ============================================================
   PAGE SHELL (Astro export)
   ============================================================ */
.ev-page { color: var(--fg-on-dark); }
.ev-intro { padding-top: 0.5rem; }
.ev-note { font-family: var(--f-spec); font-size:.76rem; color:var(--fg-quiet);
  border-top:1px solid var(--tlc-rule-dark); margin-top:3.5rem; padding-top:1rem; max-width:78ch; }
.ev-note b { color: var(--fg-muted); font-weight:600; }
.ev-note code { font-family: var(--f-mono); font-size:.92em; color: var(--fg-muted); }