/* ============================================================
   TIMELINE OVERVIEW — self-contained styles for the Astro page.
   Design-system tokens (namespaced --tlc-*, --f-*) + the horizontal
   carousel layout. Inherits the active site palette from library.css.
   Site chrome (nav/footer) is intentionally omitted — the Default
   layout supplies it.
   ============================================================ */

/* ----- DESIGN-SYSTEM TOKENS + FONTS ----- */
/* ================================================================
   TLC Reference Library — active timeline foundations.
   This route inherits the 2026-06 flat navy + warm ivory system from
   library.css and keeps only timeline-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);
}

/* ----- TIMELINE OVERVIEW ----- */
/* ========================================
       TIMELINE OVERVIEW — Horizontal carousel
       ======================================== */
    :root {
      --tlc-paper: var(--paper, #FAF6EC);
      --tlc-paper-ink: var(--paper-ink, #1A1712);
      --tlc-cream: var(--tlc-paper);

      /* Category colors — aligned to design-system tokens */
      --cat-policy:        var(--tlc-cat-policy, #1E5188);
      --cat-policy-dot:    var(--tlc-cat-policy, #1E5188);
      --cat-trial:         var(--tlc-cat-trial, #1aa6a6);
      --cat-trial-dot:     var(--tlc-cat-trial, #1aa6a6);
      --cat-publication:   var(--tlc-cat-publication, #6b4c9a);
      --cat-publication-dot: var(--tlc-cat-publication, #6b4c9a);
      --cat-contamination: var(--tlc-cat-contamination, #d94545);
      --cat-contamination-dot: var(--tlc-cat-contamination, #d94545);
      --cat-litigation:    var(--tlc-cat-litigation, #c77d2a);
      --cat-litigation-dot: var(--tlc-cat-litigation, #c77d2a);

      /* Light variants for labels on dark backgrounds */
      --cat-policy-light:        #8eb6e0;
      --cat-trial-light:         #7fe0dd;
      --cat-publication-light:   #b9a0d6;
      --cat-contamination-light: #f09090;
      --cat-litigation-light:    #e0b06e;

      --tw-card-w: 500px;
      --tw-card-h: 250px;
    }

    /* Page already lives on the site's black layout; just clip horizontal
       overflow from the carousel and set the cream text color for this view. */
    body { overflow-x: hidden; }
    .tl-overview {
      color: var(--tlc-paper);
      font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
      min-height: 70vh;
    }

    /* ----- Page hero ----- */
    .ov-hero {
      padding: 36px 32px 4px;
      max-width: 95vw;
      margin: 0 auto;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .ov-hero h1 {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: clamp(0.9375rem, 0.65rem + 0.6vw, 1.25rem);
      color: var(--tlc-paper);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 0;
      font-weight: 700;
      opacity: 0.85;
    }
    .ov-hero .vertical-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #8ab4f8;
      text-decoration: none;
      border-bottom: 1px solid rgba(138,180,248,0.4);
      padding-bottom: 1px;
    }
    .ov-hero .vertical-link:hover { color: #d94545; border-color: #d94545; }

    /* ----- Filter dropdown (lives inside .ov-info-nav) ----- */
    .ov-filter-dd {
      position: relative;
    }
    .ov-filter-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      padding: 0 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(230,220,185,0.3);
      color: var(--tlc-paper);
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ov-filter-trigger:hover,
    .ov-filter-trigger[aria-expanded="true"] {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.6);
    }
    .ov-filter-trigger .indicator {
      width: 9px;
      height: 9px;
      background: var(--tlc-paper);
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .ov-filter-trigger .indicator.policy        { background: var(--cat-policy-dot); }
    .ov-filter-trigger .indicator.trial         { background: var(--cat-trial-dot); }
    .ov-filter-trigger .indicator.publication   { background: var(--cat-publication-dot); }
    .ov-filter-trigger .indicator.contamination { background: var(--cat-contamination-dot); }
    .ov-filter-trigger .indicator.litigation    { background: var(--cat-litigation-dot); }
    .ov-filter-trigger .chevron {
      font-size: 9px;
      opacity: 0.6;
      margin-left: 2px;
      transition: transform 0.18s;
    }
    .ov-filter-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); opacity: 0.9; }

    .ov-filter-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 180px;
      background: #0a0a0a;
      border: 1px solid rgba(230,220,185,0.3);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 60;
      box-shadow: 0 12px 28px rgba(0,0,0,0.55);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .ov-filter-dd:hover .ov-filter-panel,
    .ov-filter-dd:focus-within .ov-filter-panel,
    .ov-filter-dd.open .ov-filter-panel {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    /* A small invisible bridge so the panel doesn't close when the cursor
       crosses the gap between the trigger and the panel. */
    .ov-filter-dd::after {
      content: '';
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      height: 12px;
      pointer-events: none;
    }
    .ov-filter-dd:hover::after,
    .ov-filter-dd.open::after {
      pointer-events: auto;
    }

    .ov-filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: transparent;
      border: 1px solid rgba(255,255,204,0.18);
      color: rgba(255,255,204,0.85);
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: all 0.12s;
      text-align: left;
      width: 100%;
      justify-content: flex-start;
    }
    .ov-filter-pill:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.45); }
    .ov-filter-pill .dot {
      width: 9px;
      height: 9px;
      flex-shrink: 0;
    }
    .ov-filter-pill .dot.policy        { background: var(--cat-policy-dot); }
    .ov-filter-pill .dot.trial         { background: var(--cat-trial-dot); }
    .ov-filter-pill .dot.publication   { background: var(--cat-publication-dot); }
    .ov-filter-pill .dot.contamination { background: var(--cat-contamination-dot); }
    .ov-filter-pill .dot.litigation    { background: var(--cat-litigation-dot); }
    .ov-filter-pill[data-filter="policy"]        { border-left: 3px solid var(--cat-policy-dot); }
    .ov-filter-pill[data-filter="trial"]         { border-left: 3px solid var(--cat-trial-dot); }
    .ov-filter-pill[data-filter="publication"]   { border-left: 3px solid var(--cat-publication-dot); }
    .ov-filter-pill[data-filter="contamination"] { border-left: 3px solid var(--cat-contamination-dot); }
    .ov-filter-pill[data-filter="litigation"]    { border-left: 3px solid var(--cat-litigation-dot); }
    .ov-filter-pill.active                       { background: rgba(250, 246, 236, 0.95); color: #1a1a1a; border-color: var(--tlc-paper); }
    .ov-filter-pill.active[data-filter="policy"]        { background: var(--cat-policy); color: var(--tlc-paper); border-color: var(--cat-policy); }
    .ov-filter-pill.active[data-filter="trial"]         { background: var(--cat-trial); color: var(--tlc-paper); border-color: var(--cat-trial); }
    .ov-filter-pill.active[data-filter="publication"]   { background: var(--cat-publication); color: var(--tlc-paper); border-color: var(--cat-publication); }
    .ov-filter-pill.active[data-filter="contamination"] { background: var(--cat-contamination); color: var(--tlc-paper); border-color: var(--cat-contamination); }
    .ov-filter-pill.active[data-filter="litigation"]    { background: var(--cat-litigation); color: var(--tlc-paper); border-color: var(--cat-litigation); }

    /* ----- Top info strip ----- */
    /* Info strip above the carousel — title, date, category, and detail for the currently centered event. Centered, max 1280px wide. Pinned to a fixed 30vh height (240px floor) with flex column layout so the carousel below stays vertically anchored regardless of how many lines the detail wraps to. */
    .ov-info {
      padding: 14px 10px 18px;
      max-width: 95vw;
      margin: 0 auto;
      height: 30vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    /* Top row of the info strip: title on the left, prev/next arrow buttons on the right, separated and aligned to the top of the row. */
    .ov-info-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 8px;
    }
    /* The big title of the current event — serif font, fluid size that grows with viewport width, flexes to fill leftover row space. */
    .ov-info-title {
      font-family: 'Book Antiqua', 'Palatino Linotype', Georgia, serif;
      font-size: clamp(1.125rem, 0.8rem + 0.8vw, 1.5rem);
      font-weight: 650;
      color: var(--tlc-paper);
      line-height: 1.25;
      margin: 0;
      flex: 1;
      min-width: 0;
    }
    /* Container in the info-head row holding the filter dropdown — won't shrink even if the title is long. */
    .ov-info-nav {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }
    /* Row beneath the title holding the category label, date, and badge — flex-wraps on narrow screens. */
    .ov-info-meta {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    /* The all-caps category tag (POLICY, TRIAL, etc.) — small bold sans-serif with wide letter spacing. */
    .ov-info-cat {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }
    /* The event date — typewriter font, parchment color, slight letter spacing for a documentary feel. */
    .ov-info-date {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 13px;
      color: var(--tlc-paper);
      font-weight: 500;
      letter-spacing: 0.06em;
    }
    /* Optional rectangular badge in the meta row (e.g. PUBLISHED, MILESTONE) — small typewriter text inside a thin border that inherits the parent text color. */
    .ov-info-badge {
      display: inline-block;
      padding: 2px 8px;
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      border: 1px solid currentColor;
    }
    /* The detail paragraph beneath the meta row — readable sans-serif body text, capped at 920px wide for comfortable line length. Flexes to fill the remaining height of the fixed-height info strip; if a future detail exceeds the envelope it scrolls internally instead of pushing the carousel. */
    .ov-info-detail {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 13.5px;
      line-height: 1.6;
      color: rgba(255,255,204,0.85);
      max-width: 920px;
      margin: 0;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    /* ----- Carousel track ----- */
    /* Outer wrapper for the carousel — positions the scrolling track and reserves vertical breathing room above and below. */
    .ov-track-wrap {
      position: relative;
      padding: 10px 10px 28px;
    }
    /* The horizontally-scrolling rail that holds all the cards — flex row, scroll-snaps softly to card centers, with large side padding so the first and last cards can reach the viewport center when scrolled to either end. */
    .ov-track {
      display: flex;
      gap: 28px;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      align-items: center;
      /* End padding lets the first and last cards reach the viewport centre.
         Top/bottom padding intentionally removed — the scaled centre card's
         10px overhang clips against overflow-y:auto (forced by overflow-x:auto). */
      padding-top: 0;
      padding-bottom: 12px;
      padding-left: max(32px, calc(50vw - var(--tw-card-w) / 2));
      padding-right: max(32px, calc(50vw - var(--tw-card-w) / 2));
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,204,0.25) transparent;
    }
    /* The row of left/right arrow controls under the carousel — centered horizontally, layered above the scrollbar so the arrows are not hidden behind it. */
    .ov-arrows-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      /* Land ~10 px below the center card bottom (the track adds an
         8 px scrollbar gutter we have to pull back through). */
      margin-top: -1px;
      position: relative;
      z-index: 4;
    }
    .ov-nav-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(230,220,185,0.3);
      background: rgba(255,255,255,0.04);
      color: var(--tlc-paper);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, sans-serif;
      transition: all 0.15s;
      padding: 0;
    }
    .ov-nav-btn:hover:not(:disabled) {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.6);
    }
    .ov-nav-btn:disabled {
      color: rgba(250, 246, 236, 0.2);
      cursor: default;
    }
    .ov-position {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 12px;
      color: rgba(255,255,204,0.7);
      letter-spacing: 0.08em;
      padding: 0 4px;
    }
    .ov-position .num { color: var(--tlc-paper); font-weight: 700; font-size: 14px; }
    .ov-position .of { white-space: nowrap; }
    .ov-track::-webkit-scrollbar { height: 8px; }
    .ov-track::-webkit-scrollbar-track { background: transparent; margin: 0 32px; }
    .ov-track::-webkit-scrollbar-thumb { background: rgba(255,255,204,0.25); border-radius: 4px; }
    .ov-track::-webkit-scrollbar-thumb:hover { background: rgba(255,255,204,0.5); }

    .ov-card {
      flex: 0 0 var(--tw-card-w);
      scroll-snap-align: center;
      background: var(--tlc-paper);
      border: 1px solid #b8ad8f;
      border-left: 6px solid #2a3a52;
      box-shadow: none;
      position: relative;
      opacity: 0.55;
      transition: opacity 0.35s ease, box-shadow 0.5s ease;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      padding: 12px 14px 12px 18px;
      min-height: var(--tw-card-h);
      height: var(--tw-card-h);
      box-sizing: border-box;
    }
    .ov-card.center {
      opacity: 1.0;
      box-shadow: 0px 3px 14px rgba(94, 82, 59, 0.55), 0px 2px 14px rgba(171, 152, 88, 0.45);
      z-index: 3;
    }
    .ov-card.cat-policy        { border-left-color: var(--cat-policy); }
    .ov-card.cat-trial         { border-left-color: var(--cat-trial); }
    .ov-card.cat-publication   { border-left-color: var(--cat-publication); }
    .ov-card.cat-contamination { border-left-color: var(--cat-contamination); }
    .ov-card.cat-litigation    { border-left-color: var(--cat-litigation); }
    .ov-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.3;
      background: linear-gradient(rgba(255,255,255,0.25), rgba(0,0,0,0.03)),
                  radial-gradient(circle at 20% 30%, rgba(0,0,0,0.05), transparent 35%);
    }
    .ov-card-date-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      position: relative;
      z-index: 1;
    }
    .ov-card-date {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #1a1a1a;
    }
    .ov-card-badge {
      display: inline-block;
      padding: 1px 5px;
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      background: rgba(0,0,0,0.08);
      color: #1a1a1a;
    }
    .ov-card-badge.tlc    { background: rgba(42,58,82,0.18); color: #2a3a52; }
    .ov-card-badge.rm     { background: rgba(110,30,28,0.18); color: #6e1e1c; }
    .ov-card-title {
      font-family: 'Book Antiqua', 'Palatino Linotype', Georgia, serif;
      font-weight: 700;
      color: #171717;
      margin: 2px 0 6px;
      line-height: 1.3;
      font-size: 15px;
      position: relative;
      z-index: 1;
    }
    .ov-card-summary {
      font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
      font-size: 13px;
      line-height: 1.55;
      margin: 0;
      color: #2a2a2a;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      position: relative;
      z-index: 1;
      flex: 1;
    }
    .ov-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      position: relative;
      z-index: 1;
    }
    .ov-card-cat {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .ov-card-expand {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #171717;
      text-decoration: none;
      cursor: pointer;
    }
    .ov-card-expand-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 18px;
      border: 1.5px solid #171717;
      color: #171717;
      font-size: 13px;
      font-family: system-ui;
      line-height: 1;
    }
    .ov-card.cat-policy        .ov-card-cat, .ov-card.cat-policy        .ov-card-expand-arrow { border-color: var(--cat-policy); color: var(--cat-policy); }
    .ov-card.cat-trial         .ov-card-cat, .ov-card.cat-trial         .ov-card-expand-arrow { border-color: var(--cat-trial); color: var(--cat-trial); }
    .ov-card.cat-publication   .ov-card-cat, .ov-card.cat-publication   .ov-card-expand-arrow { border-color: var(--cat-publication); color: var(--cat-publication); }
    .ov-card.cat-contamination .ov-card-cat, .ov-card.cat-contamination .ov-card-expand-arrow { border-color: var(--cat-contamination); color: var(--cat-contamination); }
    .ov-card.cat-litigation    .ov-card-cat, .ov-card.cat-litigation    .ov-card-expand-arrow { border-color: var(--cat-litigation); color: var(--cat-litigation); }

    /* ----- Era strip ----- */
    .ov-era-strip {
      max-width: 95vw;
      margin: 0 auto;
      padding: 0px 32px 22px;
      display: flex;
      gap: 4px;
    }
    .ov-era-slice {
      flex: var(--era-w, 1);
      cursor: pointer;
      padding: 8px 6px 6px;
      border-top: 2px solid rgba(255,255,204,0.18);
      transition: border-color 0.2s;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .ov-era-slice:hover, .ov-era-slice.active {
      border-top-color: var(--tlc-paper);
    }
    .ov-era-slice .era-name {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--tlc-paper);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ov-era-slice .era-years {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 10px;
      color: rgba(255,255,204,0.6);
      letter-spacing: 0.04em;
    }
    .ov-era-slice .era-count {
      font-family: 'Modern Typewriter', monospace;
      font-size: 9.5px;
      color: rgba(255,255,204,0.45);
    }
    .ov-era-slice.active { background: rgba(255,255,204,0.05); }
    .ov-era-slice:not(.active) .era-name { opacity: 0.65; }

    /* ----- Detail overlay ----- */
    .ov-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
    }
    .ov-overlay.open { display: flex; }
    .ov-overlay-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.7);
      cursor: pointer;
    }
    .ov-overlay-panel {
      position: relative;
      z-index: 1;
      width: 480px;
      max-width: 90vw;
      height: 100vh;
      background: #0a0a0a;
      border-right: 1px solid rgba(230,220,185,0.15);
      display: flex;
      flex-direction: column;
      padding: 22px 0 22px 22px;
      animation: ovPanelIn 0.25s ease;
      overflow-y: auto;
      box-sizing: border-box;
    }
    @keyframes ovPanelIn {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .ov-overlay-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px 10px 0;
      border-bottom: 1px solid rgba(230,220,185,0.12);
      margin-bottom: 14px;
      flex-shrink: 0;
    }
    .ov-overlay-eyebrow {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .ov-overlay-eyebrow .label {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--tlc-paper);
    }
    .ov-overlay-eyebrow .pos {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 10px;
      color: rgba(250, 246, 236, 0.65);
    }
    .ov-overlay-actions {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .ov-overlay-btn {
      width: 26px;
      height: 26px;
      border: 1px solid rgba(230,220,185,0.3);
      background: transparent;
      color: var(--tlc-paper);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui;
      padding: 0;
    }
    .ov-overlay-btn:disabled {
      color: rgba(255,255,204,0.15);
      cursor: default;
    }
    .ov-overlay-btn:hover:not(:disabled) {
      background: rgba(255,255,204,0.08);
    }
    .ov-overlay-btn.close {
      color: #d94545;
      border-color: rgba(217,69,69,0.4);
    }
    .ov-overlay-btn.close:hover {
      background: rgba(217,69,69,0.12);
    }

    .ov-card-paper {
      background: var(--tlc-paper);
      border: 1px solid #b8ad8f;
      border-left: 6px solid #2a3a52;
      box-shadow: 4px 4px 0 rgba(0,0,0,0.55);
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 18px 20px 22px;
      margin-right: 22px;
      box-sizing: border-box;
      color: #0a0a0a;
    }
    .ov-card-paper::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.3;
      background: linear-gradient(rgba(255,255,255,0.25), rgba(0,0,0,0.03)),
                  radial-gradient(circle at 20% 30%, rgba(0,0,0,0.05), transparent 35%);
    }
    .ov-card-paper.cat-policy        { border-left-color: var(--cat-policy); }
    .ov-card-paper.cat-trial         { border-left-color: var(--cat-trial); }
    .ov-card-paper.cat-publication   { border-left-color: var(--cat-publication); }
    .ov-card-paper.cat-contamination { border-left-color: var(--cat-contamination); }
    .ov-card-paper.cat-litigation    { border-left-color: var(--cat-litigation); }
    .ov-card-paper > * { position: relative; z-index: 1; }

    .ov-paper-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .ov-paper-date {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: inherit;
    }
    .ov-paper-cat {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border: 1px solid currentColor;
      padding: 2px 7px;
    }
    .ov-paper-badge {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      background: rgba(0,0,0,0.08);
      color: inherit;
      padding: 2px 7px;
      border: 1px solid currentColor;
    }
    .ov-paper-title {
      font-family: 'Book Antiqua', 'Palatino Linotype', Georgia, serif;
      font-weight: 700;
      font-size: 19px;
      line-height: 1.28;
      color: #1E5188;
      margin: 0 0 10px;
    }
    .ov-paper-rule {
      height: 2px;
      width: 60px;
      background: linear-gradient(90deg, currentColor, transparent);
      opacity: 0.5;
      margin: 0 0 14px;
    }
    .ov-paper-detail {
      font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
      font-size: 14.5px;
      line-height: 1.6;
      color: #000;
      margin: 0 0 16px;
    }
    .ov-paper-section-label {
      font-family: 'Modern Typewriter', 'Courier New', monospace;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #000;
      margin: 14px 0 10px;
      display: block;
    }
    .ov-paper-sources {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ov-paper-sources li {
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 12.5px;
      line-height: 1.4;
      padding-left: 12px;
      position: relative;
      color: #000;
    }
    .ov-paper-sources li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 5px;
      height: 5px;
      background: currentColor;
      opacity: 0.4;
    }
    .ov-paper-sources a {
      color: #802420;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .ov-paper-sources a:hover { color: #d94545; }

    .ov-paper-media {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 12px;
    }
    .ov-paper-media a {
      display: block;
      border: 1px solid #b8ad8f;
      background: #fff;
      padding: 4px;
      text-decoration: none;
      color: #444;
    }
    .ov-paper-media img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .ov-paper-media .cap {
      display: block;
      font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
      font-size: 11px;
      color: #555;
      padding: 4px 4px 0;
      font-style: italic;
    }

    /* Card text colors per category for the foot bar */
    .ov-card .ov-card-cat              { color: #1a1a1a; }
    .ov-card.cat-policy        .ov-card-cat { color: var(--cat-policy); }
    .ov-card.cat-trial         .ov-card-cat { color: var(--cat-trial); }
    .ov-card.cat-publication   .ov-card-cat { color: var(--cat-publication); }
    .ov-card.cat-contamination .ov-card-cat { color: var(--cat-contamination); }
    .ov-card.cat-litigation    .ov-card-cat { color: var(--cat-litigation); }

    /* Hidden state for filtering */
    .ov-card.hidden { display: none; }

    /* Gracefully handle missing images (asset paths are site-relative) */
    .ov-paper-media img {
      min-height: 60px;
      background: #e8e0cc;
      border: 1px dashed #c4b99a;
    }
    .ov-paper-media img[src]::after {
      content: '\\2002Image unavailable in preview';
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--f-spec, system-ui);
      font-size: 11px;
      color: #888;
      min-height: 60px;
    }

    /* Overlay scroll fade indicator */
    .ov-overlay-panel::after {
      content: '';
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      height: 36px;
      background: linear-gradient(transparent, #0a0a0a);
      pointer-events: none;
      flex-shrink: 0;
    }

    @media (max-width: 700px) {
      :root { --tw-card-w: calc(100vw - 100px); --tw-card-h: 220px; }
      .ov-track {
        gap: 16px;
        padding-left: 36px;
        padding-right: 36px;
      }
      .ov-card {
        height: auto;
        min-width: 0;
        padding: 12px 12px 12px 16px;
      }
      .ov-card > * {
        min-width: 0;
      }
      .ov-card-title,
      .ov-card-summary {
        overflow-wrap: anywhere;
        word-break: normal;
      }
      .ov-overlay-panel { width: 100vw; padding: 16px 0 16px 14px; }
      .ov-card-paper { margin-right: 14px; padding: 14px 16px 18px; }
      .ov-info-head { flex-direction: column; gap: 12px; align-items: stretch; }
      .ov-info-nav { align-self: flex-end; }
      .ov-filter-panel { right: auto; left: 0; }
    }