/* Endless Noir — Case Files index (6a) + Case detail (6b). Depends on deco.css. * * Shared by both generated pages (body classes "cases-index" / "case-detail" on ), plus the header/footer chrome used by the corkboard shell too * (body class "corkboard" — that page's own board.css owns everything below the masthead). * * All markup here comes from clients/web/build-feed.ts — this file owns no HTML. */ .archive .masthead { padding: 32px var(--pad-x) 18px; } /* Screen-reader-only: used for the checkbox-hack filter/transcript toggles. NEVER display:none * — that drops focusability and breaks keyboard use of the labels driving these inputs. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ==== chips (shared 6a/6b) ============================================================= */ .chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid rgba(201, 162, 74, .45); padding: 8px 11px; background: rgba(255, 255, 255, .02); } .chip-quiet { color: var(--nav); border-color: rgba(201, 162, 74, .22); } .chip-solid { color: var(--black-2); background: var(--gold-bright); border-color: transparent; padding: 6px 10px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } /* ==== package-art frame (shared 6a/6b) ================================================= */ .pkg-frame { display: block; padding: 7px; background: var(--grad-object); box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .9); } .pkg-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .pkg-frame--plate { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--paper-base) url(/assets/paper.webp) center/cover; } .pkg-frame--plate .d-page { color: var(--paper-label); font-size: 46px; } /* ==== 6a: Case Files index =============================================================== */ /* .page (deco.css) is already the bare 1180px column with no horizontal padding, so the hero * band's full-bleed width needs no negative-margin trick — it just fills its parent. */ .hero-band { position: relative; height: 240px; overflow: hidden; } .hero-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; opacity: .5; } .hero-band-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 7%, rgba(8, 7, 10, .62) 56%, rgba(8, 7, 10, .42)); } .hero-band-copy { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .hero-band-copy .eyebrow { display: block; margin-bottom: 14px; } .hero-band-copy .lede { max-width: 32ch; margin: 0; } .hero-band-dek { text-align: right; } .case-archive { padding: 28px var(--pad-x) 52px; } .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--frame-inner); margin-bottom: 34px; } .filter-chip { cursor: pointer; user-select: none; transition: background .2s, color .2s, border-color .2s; } .newest-first { color: var(--text-dimmest); } /* Checkbox-hack filtering — pure CSS, no script. Inputs are FIRST children of .case-archive so * the general-sibling combinator reaches every following section (filter-row, hero, grid). */ #cf-all:checked ~ .filter-row .filter-chip[for="cf-all"], #cf-unres:checked ~ .filter-row .filter-chip[for="cf-unres"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-unres:checked ~ .case-grid .case-card:not([data-unresolved]) { display: none; } .hero-case { display: flex; gap: 36px; align-items: stretch; text-decoration: none; color: inherit; padding-bottom: 40px; border-bottom: 1px solid var(--frame-inner); margin-bottom: 40px; } .hero-art { flex: none; width: 296px; } .hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hero-tag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .hero-tag-row .data { color: var(--text-dim); } .hero-title { margin: 0 0 14px; font-size: 42px; line-height: 1.05; } .hero-hook { max-width: 50ch; font-size: 17.5px; margin: 0 0 22px; } .hero-case .chips { margin-bottom: 24px; } .hero-cta { margin-top: auto; align-self: flex-start; } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .case-card { text-decoration: none; color: inherit; display: block; } .card-art { margin-bottom: 18px; } .card-meta { color: var(--text-dim); margin-bottom: 10px; } .card-title { margin-bottom: 10px; font-size: 25px; } .card-hook { margin: 0; font-size: 15px; color: var(--text-muted-2); } .all-cases-pill { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; } .all-cases-pill .rule-l, .all-cases-pill .rule-r { height: 1px; width: 120px; } .all-cases-pill .rule-l { background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .5)); } .all-cases-pill .rule-r { background: linear-gradient(270deg, transparent, rgba(201, 162, 74, .5)); } /* Per-season filter highlight + grid filtering. Enumerated up to Season Ten — that covers the * show's runway for years at its current cadence; an eleventh season's chip still WORKS (the * radio input toggles), it just renders unstyled/unfiltered until this list is extended. */ #cf-s1:checked ~ .filter-row .filter-chip[for="cf-s1"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s1:checked ~ .case-grid .case-card:not([data-season="1"]) { display: none; } #cf-s2:checked ~ .filter-row .filter-chip[for="cf-s2"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s2:checked ~ .case-grid .case-card:not([data-season="2"]) { display: none; } #cf-s3:checked ~ .filter-row .filter-chip[for="cf-s3"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s3:checked ~ .case-grid .case-card:not([data-season="3"]) { display: none; } #cf-s4:checked ~ .filter-row .filter-chip[for="cf-s4"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s4:checked ~ .case-grid .case-card:not([data-season="4"]) { display: none; } #cf-s5:checked ~ .filter-row .filter-chip[for="cf-s5"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s5:checked ~ .case-grid .case-card:not([data-season="5"]) { display: none; } #cf-s6:checked ~ .filter-row .filter-chip[for="cf-s6"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s6:checked ~ .case-grid .case-card:not([data-season="6"]) { display: none; } #cf-s7:checked ~ .filter-row .filter-chip[for="cf-s7"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s7:checked ~ .case-grid .case-card:not([data-season="7"]) { display: none; } #cf-s8:checked ~ .filter-row .filter-chip[for="cf-s8"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s8:checked ~ .case-grid .case-card:not([data-season="8"]) { display: none; } #cf-s9:checked ~ .filter-row .filter-chip[for="cf-s9"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s9:checked ~ .case-grid .case-card:not([data-season="9"]) { display: none; } #cf-s10:checked ~ .filter-row .filter-chip[for="cf-s10"] { background: var(--grad-button); color: var(--black-2); border-color: transparent; } #cf-s10:checked ~ .case-grid .case-card:not([data-season="10"]) { display: none; } /* ==== 6b: Case detail ==================================================================== */ .case-fold { position: relative; } .case-fold-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 12%; opacity: .2; } .case-fold-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 10, .72) 0%, rgba(8, 7, 10, .94) 34%, var(--black) 56%); } .case-fold-inner { position: relative; padding: 20px var(--pad-x) 56px; } .back-link { display: inline-block; text-decoration: none; color: var(--text-dim); margin-bottom: 26px; } .back-link:hover { color: var(--gold-bright); } .case-head { display: flex; gap: 48px; align-items: flex-start; margin-bottom: 52px; } .case-art-col { flex: none; width: 340px; } .listen-elsewhere { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .listen-elsewhere > .data { color: var(--text-dimmest); } .listen-elsewhere .badges { flex-direction: column; align-items: stretch; } .listen-audio { width: 190px; filter: invert(1) grayscale(1) contrast(1.2); opacity: .8; } .case-copy { flex: 1; min-width: 0; } .case-meta { color: var(--gold); margin-bottom: 18px; } .case-title { margin: 0 0 20px; font-size: 64px; text-shadow: 0 0 40px rgba(201, 162, 74, .28); } .case-hook { max-width: 44ch; color: #c6bba2; margin: 22px 0 30px; } .cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cta-tune { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; box-shadow: 0 0 34px rgba(201, 162, 74, .22); } .cta-note { max-width: 30ch; font-size: 14.5px; color: var(--text-dim); } .case-copy .chips { margin-top: 30px; } .below-fold { display: flex; gap: 44px; align-items: flex-start; margin-bottom: 52px; } .segments-col { flex: 1; min-width: 0; } .segments-col > .label-sm, .cast-col > .label-sm { color: var(--gold); margin-bottom: 20px; } .seg-list { border-top: 1px solid var(--frame-inner); } .seg-row { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(201, 162, 74, .14); } /* --gold, not --gold-deep: gold-deep is 4.2:1 on black — it belongs to neither ground at text sizes. */ .seg-tc { flex: none; width: 82px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--gold); } .seg-label { flex: none; width: 118px; font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nav); } .seg-desc { font-family: var(--serif); font-style: italic; font-size: 16px; color: #c6bba2; } .cast-col { flex: 0 0 330px; } .cast-list { border-top: 1px solid var(--frame-inner); } .cast-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(201, 162, 74, .14); } .cast-name { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #e8d4a8; } .threads-grid { display: flex; gap: 26px; margin-bottom: 52px; } .thread-panel { flex: 1; border: 1px solid rgba(201, 162, 74, .3); padding: 26px 28px 28px; } .thread-panel--resolved { border-color: rgba(201, 162, 74, .16); } .thread-panel > .label-sm { color: var(--gold); margin-bottom: 18px; } .thread-panel--resolved > .label-sm { color: #8a7c62; } .thread-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(201, 162, 74, .16); text-decoration: none; } .thread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--meter-red); flex: none; } .thread-title { color: var(--cream); font-size: 20px; } .thread-row.resolved .thread-dot { background: #5d5342; } .thread-row.resolved .thread-title { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(168, 51, 29, .7); } /* Same specificity as .body (both single classes) — this rule wins because archive.css loads * after deco.css, so no !important is needed to override .body's max-width/margin. */ .thread-note { margin: 16px 0 0; max-width: none; font-size: 14px; color: var(--text-dim); } .thread-panel--resolved .thread-note { color: var(--text-dimmest); } .cast-note { max-width: none; color: var(--text-dimmest); } .transcript-section { margin-bottom: 12px; } .transcript-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .transcript-head .label-sm { color: var(--gold); } .transcript-head .data { color: var(--text-dimmest); } /* ==== 10a: the transcript, opened ======================================================== */ /* Not a separate route — the revealed state of this block. The paper stays full-bleed but the * text does not: an 820px centred column, 18px/1.78 body, a 104px speaker gutter, and a sticky * bar that keeps the transport and the current scene reachable four thousand words down. */ /* overflow:visible overrides .paper's hidden — a sticky bar inside an overflow:hidden box * sticks to that box's own (non-scrolling) scrollport and never pins to the viewport. No * coffee ring bleeds off this surface, so nothing needs the clip. */ .transcript-wrap { position: relative; padding: 0; overflow: visible; } /* Tile, don't stretch: an opened transcript is thousands of px tall and center/cover would * blur the stock into blotches. */ .transcript-wrap { background: linear-gradient(rgba(246, 238, 214, .45), rgba(246, 238, 214, .45)), url(/assets/paper.webp) top left / 1240px auto repeat, var(--paper-base); } .transcript-body { max-height: 340px; overflow: hidden; padding: 34px 0 0; } /* 88px left gutter (design rev 2026-08-09): a real home for the margin timecodes, so they * sit inside the column instead of hanging off the paper's edge. */ .tx-scene { max-width: 820px; margin: 0 auto; padding: 0 32px 0 88px; } .tx-scene-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px; padding: 12px 0 12px; border-bottom: 2px solid rgba(84, 64, 28, .5); scroll-margin-top: 76px; /* land jumps below the sticky bar */ } .tx-scene-tc { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--paper-label); } .tx-scene-title { margin: 0; font-family: var(--deco); font-weight: 400; font-size: 30px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); line-height: 1; } .tx-line { position: relative; display: flex; gap: 24px; padding: 0 0 20px; } .tx-who { flex: none; width: 104px; padding-top: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-label); } /* Explicit 500: the serif classes otherwise inherit the body's 300 (Oswald's weight) and * Playfair renders 400-by-fallback — hairline-thin on textured paper. */ .tx-text { flex: 1; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.78; color: #3b3122; } .tx-line.narr .tx-text { font-style: italic; font-size: 17px; line-height: 1.75; color: #4a3f2b; } /* Per-line timecodes surface in the left margin on hover/focus — a line can be cited or * seeked without cluttering the read. Click = seek (wired by transcript.mjs). */ .tx-tc { position: absolute; left: -58px; top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--paper-label); opacity: 0; transition: opacity .2s; cursor: pointer; } .tx-line:hover .tx-tc, .tx-line:focus-within .tx-tc { opacity: 1; } /* While audio runs the transcript follows the broadcast: only the playing line in * full-strength ink. Recede by SWAPPING INK, never opacity — #3b3122 at opacity .5 over this * paper measures 2.24:1 and fails AA; #4a3f2b holds 4.7:1. (Design rule 2026-08-09: applies * to any "inactive" text on paper anywhere.) */ .transcript-body.is-following .tx-text { color: #4a3f2b; transition: color .3s; } .transcript-body.is-following .tx-line.is-now .tx-text { color: #3b3122; } /* The sticky bar — only exists once the transcript is open. */ .tx-bar { display: none; position: sticky; top: 0; z-index: 5; align-items: center; gap: 20px; padding: 14px 32px; background: rgba(11, 9, 6, .96); border-bottom: 1px solid var(--rule); color: #efe6d2; } .transcript-toggle-input:checked ~ .tx-bar { display: flex; } .tx-transport { flex: none; display: flex; align-items: center; gap: 12px; } .tx-play { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--grad-button); color: var(--black-2); font-size: 13px; display: flex; align-items: center; justify-content: center; } .tx-time { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--gold); } .tx-time:empty { display: none; } .tx-bar-rule { width: 1px; height: 26px; background: rgba(201, 162, 74, .25); } .tx-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .tx-bar-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dimmest); } .tx-bar-scene { font-family: var(--deco); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tx-scenes { position: relative; flex: none; } .tx-scenes summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e8d4a8; border: 1px solid rgba(201, 162, 74, .4); padding: 9px 12px; } .tx-scenes summary::-webkit-details-marker { display: none; } .tx-scenes[open] summary { background: rgba(201, 162, 74, .12); } .tx-scenes-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; min-width: 320px; display: flex; flex-direction: column; background: var(--black-2); border: 1px solid rgba(201, 162, 74, .4); box-shadow: 0 18px 34px -14px #000; } .tx-scenes-list a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #e8d4a8; text-decoration: none; padding: 12px 16px; border-bottom: 1px solid rgba(201, 162, 74, .16); } .tx-scenes-list a:last-child { border-bottom: 0; } .tx-scenes-list a:hover { color: var(--cream); background: rgba(201, 162, 74, .1); } .tx-collapse { flex: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e8d4a8; border: 1px solid rgba(201, 162, 74, .4); padding: 9px 12px; } /* The 2px reading-progress rule along the bar's bottom edge. */ .tx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(201, 162, 74, .16); } .tx-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); } /* End of transcript: a hairline, the case number, and two ways onward. Only when open. */ .tx-end { display: none; max-width: 820px; margin: 4px auto 0; padding: 22px 32px 34px 88px; } .transcript-toggle-input:checked ~ .tx-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(84, 64, 28, .35); } .tx-end-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-label); } .tx-end-actions { display: flex; gap: 10px; } .tx-end-top { color: var(--ink); border-color: rgba(84, 64, 28, .45); background: transparent; cursor: pointer; } .transcript-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(0deg, var(--black) 8%, rgba(8, 7, 10, .72) 46%, transparent); } .transcript-reveal { display: block; position: absolute; left: 0; right: 0; bottom: 22px; margin: 0 auto; width: fit-content; cursor: pointer; } .transcript-toggle-input:checked ~ .transcript-body { max-height: none; overflow: visible; padding-bottom: 20px; } .transcript-toggle-input:checked ~ .transcript-fade, .transcript-toggle-input:checked ~ .transcript-reveal { display: none; } /* A thread the Corkboard has no anchor for: same row, no affordance. Rendered as a div rather * than a dead so nothing invites a click that would land nowhere. */ .thread-row.is-unlinked { cursor: default; } /* ==== 9a: double features — the package is the episode ================================== */ /* The case-page strip, above the transport: 5px gold spine, plain-language copy, and a stats * cell carrying the EPISODE's numbers — never the enclosure id, which lives in hrefs only. */ .pkg-strip { display: flex; align-items: stretch; border: 1px solid var(--rule); margin: 0 0 30px; } .pkg-strip-spine { flex: none; width: 5px; background: var(--grad-button); } .pkg-strip-main { flex: 1; min-width: 0; padding: 22px 26px; } .pkg-strip-label { color: var(--gold-bright); margin-bottom: 10px; } .pkg-strip-copy { margin: 0 0 14px; font-family: var(--serif); font-size: 16px; line-height: 1.7; color: #c6bba2; max-width: 64ch; } .pkg-strip-copy a { color: var(--gold-bright); } .pkg-strip-quiet { margin: 0; font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); max-width: 64ch; } .pkg-strip-stats { flex: none; width: 196px; border-left: 1px solid rgba(201, 162, 74, .22); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 20px 24px; } .pkg-strip-ep { display: flex; flex-direction: column; gap: 5px; } .pkg-strip-ep .data { color: var(--text-dimmest); } .pkg-strip-total { font-family: var(--deco); font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); line-height: 1; } .pkg-strip-kv { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted-2); } .pkg-strip-kv > div { display: flex; justify-content: space-between; gap: 10px; } .pkg-strip-kv span:first-child { color: var(--text-dimmest); text-transform: uppercase; } /* The bracket: cases in one package stack behind a 2px rule fading down their left. */ .pkg-bracket { position: relative; padding-left: 22px; } .pkg-bracket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold), rgba(201, 162, 74, .15)); } .pkg-member { display: block; text-decoration: none; color: inherit; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule-soft); } .pkg-member:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .pkg-member-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .pkg-member-num { color: var(--gold); font-size: 11.5px; } .pkg-member-start { color: var(--text-dimmest); } .pkg-member-title--big { display: block; font-family: var(--deco); font-weight: 400; font-size: 34px; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); line-height: 1.05; margin-bottom: 10px; transition: color .2s; } .pkg-member:hover .pkg-member-title--big, .pkg-member:hover .card-title { color: var(--gold-bright); } .pkg-member-hook { display: block; margin: 0; max-width: 50ch; font-size: 16px; } /* Package hero (6a): a div, not a link — the members are the links. */ .hero-case--pkg { cursor: default; } .hero-art-col { flex: none; width: 296px; display: flex; flex-direction: column; gap: 14px; } .pkg-enclosure { text-align: center; color: var(--text-dimmest); } .pkg-cta-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; } .pkg-cta-note { max-width: 36ch; font-size: 14.5px; color: var(--text-dim); margin: 0; } /* Package grid tile. */ .case-card--pkg .card-art-link { display: block; text-decoration: none; } .case-card--pkg .card-art { margin-bottom: 18px; } .pkg-plate { display: inline-flex; background: var(--gold-bright); color: var(--black-2); padding: 5px 8px; margin-right: 10px; letter-spacing: .18em; text-transform: uppercase; } .case-card--pkg .pkg-member { padding-bottom: 14px; margin-bottom: 14px; } .case-card--pkg .card-title { margin-bottom: 0; } /* ==== 10c: archive empty state =========================================================== */ /* The hero must obey the filters too — an unresolved filter that hides every card but leaves * the hero up would lie about the archive. */ #cf-unres:checked ~ .hero-case:not([data-unresolved]) { display: none; } #cf-s1:checked ~ .hero-case:not([data-season="1"]) { display: none; } #cf-s2:checked ~ .hero-case:not([data-season="2"]) { display: none; } #cf-s3:checked ~ .hero-case:not([data-season="3"]) { display: none; } #cf-s4:checked ~ .hero-case:not([data-season="4"]) { display: none; } #cf-s5:checked ~ .hero-case:not([data-season="5"]) { display: none; } #cf-s6:checked ~ .hero-case:not([data-season="6"]) { display: none; } #cf-s7:checked ~ .hero-case:not([data-season="7"]) { display: none; } #cf-s8:checked ~ .hero-case:not([data-season="8"]) { display: none; } #cf-s9:checked ~ .hero-case:not([data-season="9"]) { display: none; } #cf-s10:checked ~ .hero-case:not([data-season="10"]) { display: none; } .archive-empty { display: none; text-align: center; padding: 26px 0 6px; } /* Shown only when the checked filter matches nothing in the whole archive. The only filter * that can fail today is "Unresolved endings"; a season chip always has cases. */ .case-archive:not(:has([data-unresolved])) #cf-unres:checked ~ .archive-empty--unres { display: block; } .archive-empty__box { width: 64px; height: 64px; margin: 0 auto 22px; border: 1px solid rgba(201, 162, 74, .35); display: flex; align-items: center; justify-content: center; } .archive-empty__box span { width: 24px; height: 1px; background: rgba(201, 162, 74, .6); } .archive-empty__title { font-family: var(--deco); font-size: 28px; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); margin-bottom: 12px; } .archive-empty__line { margin: 0 auto 22px; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.65; color: var(--text-muted); max-width: 42ch; } .archive-empty label { cursor: pointer; } /* ==== 8b tablet ========================================================================== */ @media (max-width: 1179px) { .archive .masthead { padding: 22px var(--pad-x) 16px; } .hero-band { height: 180px; } .hero-band-copy { bottom: 18px; flex-direction: column; align-items: flex-start; gap: 10px; } .hero-band-dek { text-align: left; display: none; } .case-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } .hero-case { gap: 26px; } .hero-art, .hero-art-col { width: 220px; } .hero-title { font-size: 34px; } .case-head { gap: 30px; } .case-art-col { width: 280px; } .case-title { font-size: 44px; } /* Side rails become full-width strips below their column. */ .below-fold { flex-direction: column; gap: 30px; } .cast-col { flex: none; width: 100%; } } /* ==== 8a phone =========================================================================== */ @media (max-width: 599px) { .hero-band { height: 150px; } .filter-row { flex-wrap: wrap; } .filter-row .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; } .filter-row .chips::-webkit-scrollbar { display: none; } .filter-chip { white-space: nowrap; flex: none; } .newest-first { display: none; } /* One hero card, then thumbnail rows (96px art) for the rest of the archive. */ .hero-case, .hero-case--pkg { flex-direction: column; gap: 16px; } .hero-art, .hero-art-col { width: 100%; } .hero-title { font-size: 30px; } .case-grid { grid-template-columns: 1fr; gap: 20px; } .case-card:not(.case-card--pkg) { display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px; align-items: start; } .case-card:not(.case-card--pkg) .card-art { grid-row: 1 / 4; margin-bottom: 0; padding: 4px; } .case-card:not(.case-card--pkg) .card-title { font-size: 19px; margin-bottom: 0; } .case-card:not(.case-card--pkg) .card-hook { display: none; } .case-card--pkg .pkg-member-hook { display: none; } .pkg-cta-row { flex-direction: column; align-items: stretch; text-align: center; } /* Case detail stacks; the transport goes full width. */ .case-head { flex-direction: column; gap: 24px; margin-bottom: 36px; } .case-art-col { width: 100%; } .case-title { font-size: 38px; } .cta-row { flex-direction: column; align-items: stretch; text-align: center; } .cta-tune { justify-content: center; } .listen-elsewhere .badges { flex-direction: column; } .listen-audio { width: 100%; } .seg-row { flex-wrap: wrap; gap: 8px 14px; } .threads-grid { flex-direction: column; gap: 18px; margin-bottom: 36px; } .below-fold { margin-bottom: 36px; } .pkg-strip { flex-direction: column; } .pkg-strip-stats { width: 100%; border-left: 0; border-top: 1px solid rgba(201, 162, 74, .22); flex-direction: row; align-items: center; justify-content: space-between; } /* Transcript on a phone: speaker above the line, no margin timecodes. */ .tx-scene { padding: 0 20px; } .tx-scene-title { font-size: 24px; } .tx-line { flex-direction: column; gap: 5px; } .tx-who { width: auto; padding-top: 0; } .tx-tc { display: none; } .tx-bar { padding: 12px 16px; gap: 12px; } .tx-bar-scene { font-size: 15px; } .tx-scenes-list { min-width: 260px; } .tx-end { flex-direction: column; align-items: flex-start; } }