/* The Projection Booth: "cinema after dark". Self-hosted fonts (SIL OFL): Bebas Neue, Work Sans, Source Serif 4.
   Breakpoints used throughout: 760 (tablet), 900 (two-column pages), 1000 (wide player), 1280 (desktop header). */
@font-face { font-family: "Bebas Neue"; src: url(../fonts/bebas-neue-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(../fonts/work-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(../fonts/work-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(../fonts/work-sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-4-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-4-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-4-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --plum: #1e1025; --plum-2: #2b1b33; --plum-3: #3a2745;
  --cream: #f4efe2; --cream-2: #e9e2d0; --paper: #fffdf8;
  --ink: #1f1a22; --ink-soft: #4d4552;
  --rust: #b83f2a;            /* backgrounds with cream text: 4.9:1 */
  --rust-dark: #9e3321;       /* hover */
  --rust-ink: #8f2d1b;        /* rust text on cream: 7:1 */
  --rust-light: #f2b3a2;      /* rust-family text on plum: 9:1 */
  --teal: #2d6a5e; --teal-ink: #1f5146;
  --rose: #e8b4a4; --mist: #d9ccdf;
  --rule: #d6cbb3; --rule-dark: #4a3556; --edge-dark: #a393b0;
  --error: #8f1d12;
  --focus: #ffbf47;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --gap: 24px;
  --wrap: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
/* A focused control or in-page anchor must never end up under the sticky header, the fixed player bar, the cookie notice or the editor's Save bar.
   site.js measures those and sets --header-h and --bottom-h; the fallbacks cover the moment before it runs (the header is ~125px tall on a 320px phone). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h, 130px) + 16px); scroll-padding-bottom: calc(var(--bottom-h, 0px) + 16px); }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 18px/1.65 var(--serif); }
img, svg { max-width: 100%; height: auto; }
a { overflow-wrap: anywhere; color: var(--rust-ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; border-radius: 2px; }   /* plum on the light page: 15:1 (amber would be 1.4:1 on cream) */
:is(.dark, .site-header, .site-footer, .player-bar, .inline-player, .admin-top, thead th) :focus-visible { outline-color: var(--focus); }   /* amber on the dark bands: 11:1 */
main[tabindex="-1"]:focus-visible { outline: none; }   /* focus lands on the page body after a skip or an in-page load; it is not a control, so no ring around the whole page */
.card-play:focus-visible { outline-color: var(--focus); box-shadow: 0 0 0 2px var(--plum), 0 2px 8px rgba(0, 0, 0, .45); }   /* sits on artwork of any color: a two-tone ring is visible on all of them */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; font-weight: 400; }
h1, h2, .display { font-family: var(--display); letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
h3, h4 { font: 700 1.15rem/1.3 var(--sans); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--paper); color: var(--ink); padding: 10px 16px; font: 700 1rem var(--sans); }
.skip:focus { top: 8px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

/* Small sans text, and the uppercase label style shared by kickers, credit labels and footer titles */
.hint, .meta, .count, .people { font: 400 .9rem/1.45 var(--sans); }
.hint, .meta, .count { color: var(--ink-soft); }
.meta { margin: 0 0 .4em; }
.count { font-weight: 500; margin: 0 0 .8em; }
.dark .meta, .dark .hint { color: var(--mist); }
.kicker, .kicker-dark, .credit-label, .credits dt, .footer-title, .status, .pager-entry span { font-family: var(--sans); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.kicker, .kicker-dark { line-height: 1.3; margin: 0 0 .6em; }
.kicker, .credit-label, .credits dt, .footer-title { color: var(--rose); }
.kicker { color: var(--rust-light); } .kicker a { color: inherit; }
.kicker-dark { color: var(--teal-ink); }
.footer-title { margin: 0 0 8px; }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 62ch; }
.block { padding-block: 40px; }
.band { padding-block: 56px; }
.band.intro, .band.start { padding-bottom: 0; } .band.intro .actions { margin-bottom: 0; } .band.intro + .band, .band.start + .band { padding-top: 36px; }   /* two light bands in a row read as one block */
.dark { background: var(--plum); color: var(--cream); }
.dark a { color: var(--rust-light); }
.dark a.btn-rust { color: #fff; } .dark a.btn-outline { color: var(--cream); } .dark a.btn-dark { color: var(--plum); }
.dark a.btn:hover, .dark a.btn:focus-visible { text-decoration: underline; }
.dark h1, .dark h2 { color: var(--cream); }
.cream { background: var(--cream); }
.more { margin-top: 28px; }
.display.big { font-size: clamp(3.2rem, 9vw, 6.5rem); }
.display.small { font-size: 1.8rem; }

/* Links: outside links carry an inline icon that never wraps alone; internal CTAs use arrows. */
.ext-icon { display: inline-block; width: .85em; height: .85em; margin-left: .25em; vertical-align: -.08em; flex: none; }
a.arrow::after, .btn.arrow::after { content: " \2192"; text-decoration: none; display: inline-block; }
.site-footer .ext-icon { display: none; }

/* 12-column grids: every grid child spans the full width on phones; each layout widens its own children at its breakpoint. */
.two-col, .hero-grid, .card-grid, .cc-grid, .filters, .entry-grid, .entry-body, .video-grid, .footer-grid, .inline-player__grid, .player-bar {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
}
:is(.two-col, .hero-grid, .card-grid, .cc-grid, .filters, .entry-grid, .entry-body, .video-grid, .footer-grid, .inline-player__grid, .player-bar) > * { grid-column: span 12; }
.hero-grid, .entry-grid { gap: 32px; }
.two-col, .entry-grid { align-items: start; }
@media (min-width: 900px) { .two-col > :first-child { grid-column: span 7; } .two-col > :last-child { grid-column: span 5; } .two-col > :only-child { grid-column: span 12; } }

/* Buttons and controls: 44px minimum targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .25em; min-height: 44px; padding: 10px 18px; border: 2px solid transparent; border-radius: 3px; font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { text-decoration: underline; }
.btn-rust, .btn.is-playing { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-rust:hover { background: var(--rust-dark); border-color: var(--rust-dark); }
.btn-dark { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.btn-dark:hover { background: var(--plum-3); }
.btn-outline, .btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost { border-color: var(--edge-dark); }
.btn-outline-dark { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-sm { padding: 8px 14px; font-size: .95rem; }
.dark .btn-dark { background: var(--cream); color: var(--plum); border-color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.actions > p { margin: 0; }
input, select, textarea, button { font: inherit; }
label { display: block; font: 700 .9rem/1.3 var(--sans); margin-bottom: 6px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=date], input[type=number], select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 2px solid var(--ink-soft); border-radius: 3px; background: var(--paper); color: var(--ink); font: 400 1rem var(--sans); }
textarea { min-height: 140px; }
::placeholder { color: var(--ink-soft); opacity: 1; }   /* the browser's default grey fails 4.5:1 on the dark search boxes */
.dark ::placeholder { color: var(--mist); opacity: 1; }
.dark input, .dark select { border-color: var(--edge-dark); background: var(--plum-2); color: var(--cream); }
.dark label { color: var(--rose); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--error); }

/* Every link-sized control in lists keeps a 44px target */
.explore a, .jump a, .alpha a, .pager a, .pager .current, .active-filters a, .chip, .site-footer li a, .link-button, .site-nav a, .plain li {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Header: sticky */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--plum); color: var(--cream); border-bottom: 1px solid var(--rule-dark); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; min-height: 56px; }
.brand img { border-radius: 4px; }
.brand-name { font: 400 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.site-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.site-nav a { padding: 6px 12px; color: var(--cream); font: 700 1rem var(--sans); text-decoration: none; border-radius: 3px; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current=page]:not(.btn) { box-shadow: inset 0 -3px 0 var(--rust); }
.nav-sub a { font-weight: 400; font-size: .95rem; color: var(--mist); }
.header-right { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.header-search { display: flex; gap: 6px; align-items: center; }
.header-search input { width: 220px; }
.btn-support { width: 100%; }
.menu-toggle { display: none; min-height: 44px; padding: 8px 14px; background: transparent; color: var(--cream); border: 2px solid var(--cream); border-radius: 3px; font: 700 1rem var(--sans); cursor: pointer; margin-left: auto; }
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .js .site-nav, .js .header-right { display: none; flex-basis: 100%; }
  .js .site-nav.open { display: flex; }
  .js .header-right.open { display: flex; padding-bottom: 12px; }
  .header-search input { flex: 1; width: auto; }
}
/* Desktop: brand and search/Support on the first row, the full navigation on one unbroken row beneath */
@media (min-width: 900px) {
  .header-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand right" "nav nav"; column-gap: 24px; row-gap: 0; padding-block: 6px 4px; }
  .brand { grid-area: brand; min-height: 52px; } .brand img { width: 48px; height: 48px; } .brand-name { white-space: nowrap; }
  .header-right { grid-area: right; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; flex: none; }
  .header-search input { width: 280px; }
  .btn-support { width: auto; white-space: nowrap; }
  .site-nav { grid-area: nav; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: nowrap; }
  .site-nav ul, .site-nav a { white-space: nowrap; }
  .site-nav ul { flex-wrap: nowrap; }
  .nav-main { gap: 4px; }
}
/* 900-1279px: the main links, search and Support stay in view; the secondary links (Books, About...) are in the footer */
@media (min-width: 900px) and (max-width: 1279px) {
  .nav-sub { display: none; }
  .header-search input { width: 190px; }
  .brand-name { font-size: 1.5rem; }
}

/* Hero */
.hero { padding-block: 40px; background: radial-gradient(1200px 500px at 85% 0, var(--plum-3) 0, transparent 60%), var(--plum); }
.hero-grid { align-items: center; }
.hero-art img { width: 100%; max-width: 560px; height: auto; border: 1px solid var(--rule-dark); background: var(--plum-2); margin-inline: auto; display: block; }
.hero h1 a { color: var(--cream); text-decoration: none; } .hero h1 a:hover { text-decoration: underline; }
.credit-line { margin: 0 0 .4em; font: 400 1.05rem/1.4 var(--sans); }
.credit-label { display: block; }
@media (max-width: 899px) { .hero-art { order: 2; } .hero-art img { max-width: 320px; } }   /* phones: title and Play before the artwork */
@media (min-width: 900px) { .hero-art { grid-column: span 5; } .hero-copy { grid-column: span 7; } }

/* Cards: four across from tablet up so artwork shrinks smoothly; phones switch to a list (below) */
.card-grid { margin-top: 20px; }
@media (min-width: 760px) { .card-grid > * { grid-column: span 3; } }
.card { position: relative; background: var(--paper); border: 1px solid var(--rule); display: flex; flex-direction: column; height: 100%; }
.card-media, .row-media { display: block; background: var(--cream-2); overflow: hidden; }   /* light until the picture arrives, so a slow image never looks like a black box */
.card-media { aspect-ratio: 1; }
.card-media img, .row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 14px 16px 18px; }
.card-title { margin: 0 0 .3em; font-size: 1.1rem; }
.card-title a { color: var(--ink); }
.card-play { position: absolute; left: 12px; top: 12px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tile { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 14px; background: var(--cream-2); color: var(--ink); font-family: var(--serif); }
.tile-mark { color: var(--rust-ink); font: 700 1.4rem var(--serif); }
.tile-title { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.tile.small { padding: 6px; } .tile.small .tile-mark { font-size: 1rem; }
@media (max-width: 759px) {
  .card-grid { gap: 10px; }
  .card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; height: auto; }
  .card-play { position: static; flex: 0 0 auto; box-shadow: none; }
  .card-media { flex: 0 0 64px; width: 64px; height: 64px; }
  .card-body { padding: 0; min-width: 0; flex: 1 1 auto; }
  .card-body .meta { margin: 0 0 2px; font-size: .8rem; }
  .card-title { font-size: 1rem; margin: 0; }
  .card-body .people { display: none; }
}

/* Search, filters, results */
.page-head { padding-block: 40px 32px; }
.search-big .search-row { display: flex; gap: 12px; flex-wrap: wrap; } .search-big input { flex: 1 1 320px; }
.explore { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--sans); }
.filters { gap: 14px; align-items: end; margin-top: 18px; }
.filters-status { margin: 0; min-height: 1.4em; font: 400 .95rem var(--sans); }
@media (min-width: 760px) { .filters .field { grid-column: span 3; } .filters .field.wide { grid-column: span 6; } }
.results { padding-block: 28px 56px; }
.active-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; font-family: var(--sans); }
.active-filters a { padding: 4px 12px; border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; text-decoration: none; }
.suggest { background: var(--paper); border-left: 4px solid var(--teal); padding: 10px 16px; margin-bottom: 20px; font-family: var(--sans); }
.suggest p { margin: .3em 0; }
.empty { background: var(--paper); border: 1px solid var(--rule); padding: 24px; }
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 48px 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.row-media { width: 72px; height: 72px; }
.row-body { min-width: 0; overflow-wrap: anywhere; }
.row-body h3 { margin: 0 0 .15em; font-size: 1.1rem; } .row-body p { margin: 0 0 .15em; }
.snippet { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 759px) { .row { grid-template-columns: 48px 56px minmax(0, 1fr); gap: 12px; } .row-media { width: 56px; height: 56px; } }
.pager, .pager-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.pager { margin-top: 32px; } .pager ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--sans); }
.pager a, .pager .current { justify-content: center; min-width: 44px; padding: 6px 14px; border: 2px solid var(--plum); border-radius: 3px; text-decoration: none; color: var(--plum); font-weight: 700; }
.pager .current { background: var(--plum); color: var(--cream); }
.pager-per { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-family: var(--sans); }
.pager-per select { width: auto; min-width: 84px; }
.list-search { margin: 0 0 14px; }
.ep-list { margin-top: 12px; }
.is-searching .filters-status, .is-navigating main { opacity: .7; }
.is-navigating { cursor: progress; }

/* Indexes */
.alpha ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; }
.alpha a { justify-content: center; min-width: 44px; border: 1px solid var(--rule); background: var(--paper); border-radius: 3px; font: 700 1rem var(--sans); text-decoration: none; }
.letter h2, .letter h3 { margin-top: 1.4em; border-bottom: 2px solid var(--rust); display: inline-block; padding-right: 1em; }
.film-list { list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--sans); }
.film-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); padding: 0; }
.film-list li > a { display: inline-flex; align-items: center; flex: 1 1 auto; min-height: 44px; min-width: 44px; }   /* the link, not just its row, is the 44px target */
.film-list .n, .film-list .year { color: var(--ink-soft); font-size: .9rem; } .film-list .n { white-space: nowrap; } .film-list .year { margin-left: .3em; }
@media (min-width: 900px) { .film-list.columns { columns: 2; column-gap: 40px; } .film-list.columns li { break-inside: avoid; } }

/* Entry page */
.entry-head { padding-block: 40px; }
.entry-art { order: -1; }
@media (min-width: 900px) { .entry-main { grid-column: span 9; } .entry-art { grid-column: span 3; order: 0; justify-self: end; } }
.poster { border: 1px solid var(--rule-dark); background: var(--plum-2); display: block; max-width: 220px; height: auto; }
.credits { margin: 14px 0; display: grid; gap: 10px; } .credits div { margin: 0; } .credits dd { margin: 0; font: 400 1.1rem/1.4 var(--sans); }
.entry-body { gap: 40px; padding-block: 40px; }
@media (min-width: 900px) { .notes { grid-column: span 8; } .side { grid-column: span 4; } }
.side-h { font-size: 1.5rem; margin-top: 1.2em; }
.prose { max-width: 70ch; } .prose img { height: auto; } .prose a { overflow-wrap: anywhere; }
.prose-wrap .prose { max-width: 75ch; }
.labels { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.chip { padding: 4px 14px; margin: 0 6px 6px 0; background: var(--teal); color: #fff; border-radius: 3px; font: 500 .9rem var(--sans); text-decoration: none; }
.chip:hover { text-decoration: underline; }
.chip.light { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); min-height: 36px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.plain { list-style: none; padding: 0; margin: 0 0 1em; font-family: var(--sans); } .plain li { display: flex; margin: 0; padding: 0; }
.plain li > a { display: inline-flex; align-items: center; min-height: 44px; }   /* the link itself, not just its row, is the 44px target */
.big-list li { padding: 8px 0; }
.video { margin: 0; }
@media (min-width: 900px) { .video { grid-column: span 6; } }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--plum); border-radius: 4px; }
.video figcaption { font: 400 1rem var(--sans); padding-top: 8px; }
.pager-entry { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; font-family: var(--sans); }
.pager-entry a, .pager-entry .is-disabled { display: block; flex: 1 1 280px; margin: 0; padding: 14px 18px; border: 1px solid var(--rule); background: var(--paper); text-decoration: none; color: var(--ink); min-height: 44px; }
.pager-entry a:hover { border-color: var(--rust); } .pager-entry a:hover { text-decoration: underline; }
.pager-entry .prev span::before { content: "\2190  "; content: "\2190  " / ""; } .pager-entry .next span::after { content: "  \2192"; content: "  \2192" / ""; }   /* arrows are decorative */
.pager-entry .is-disabled { background: transparent; color: var(--ink-soft); border-style: dashed; cursor: default; }
.pager-entry span { display: block; font-size: .8rem; color: var(--ink-soft); letter-spacing: .06em; }
.pager-entry .next { text-align: right; }
.entry-actions { margin-top: 18px; }

/* Comments and forms */
.comments { list-style: none; padding: 0; margin: 0 0 24px; } .comments.replies { margin: 12px 0 0 24px; border-left: 3px solid var(--rule); padding-left: 16px; }
.comment { margin: 0 0 18px; } .comment header { font: 400 .95rem var(--sans); } .comment time { color: var(--ink-soft); margin-left: .5em; }
.comment-body { margin-top: 4px; } .comment-body p { margin: 0 0 .6em; }
.comment-form { max-width: 640px; background: var(--paper); border: 1px solid var(--rule); padding: 20px; }
.contact-form { max-width: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { display: block; margin-top: 6px; color: var(--error); font: 700 .95rem var(--sans); }
.turnstile-wrap { margin: 8px 0 14px; min-height: 65px; }
.notice { padding: 12px 16px; background: #e4f1ec; border-left: 4px solid var(--teal); font-family: var(--sans); } .notice.warn { background: #fbe9e5; border-color: var(--rust); }
.notice ul { margin: 0 0 0 1.2em; padding: 0; }

/* Commentary catalog */
.cc-grid { list-style: none; padding: 0; margin: 14px 0 28px; }
@media (min-width: 760px) { .cc-grid > * { grid-column: span 6; } }
@media (min-width: 900px) { .cc-grid > * { grid-column: span 4; } }
@media (min-width: 1160px) { .cc-grid > * { grid-column: span 3; } }
.cc { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--teal); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.cc-art img { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.cc h3, .cc h4 { margin: 0; font-size: 1.05rem; } .cc .buy { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.forth-card { border-top-color: var(--rust); } .status { color: var(--rust-ink); margin: 0; }
.sub-h { font: 700 1.1rem var(--sans); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-top: 28px; }
.jump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 700 1rem var(--sans); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-family: var(--sans); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--plum); color: var(--cream); }
th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; font-weight: 700; }
th button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
th[aria-sort=ascending] button::after { content: "\25B2"; font-size: .7em; } th[aria-sort=descending] button::after { content: "\25BC"; font-size: .7em; }
.roster tbody tr:nth-child(even) { background: #efe9d8; }
@media (max-width: 599px) {   /* three columns must fit a 320px phone without sideways scrolling */
  .roster { table-layout: fixed; font-size: .9rem; }
  .roster th:nth-child(2) { width: 6.2rem; } .roster th:nth-child(3) { width: 32%; }
  .roster th, .roster td { padding: 8px 6px; overflow-wrap: anywhere; }
}
.feed-url { display: block; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); font: 400 1rem var(--sans); overflow-wrap: anywhere; }

/* Footer */
.site-footer { background: var(--plum); color: var(--cream); margin-top: 40px; padding-block: 40px 20px; font-family: var(--sans); }
.site-footer a { color: var(--cream); }
.footer-grid { gap: 32px 0; }   /* twelve 32px gutters would overflow a 320px screen */
@media (min-width: 760px) { .footer-grid { column-gap: 32px; } .footer-grid > :nth-child(1) { grid-column: span 5; } .footer-grid > :nth-child(2), .footer-grid > :nth-child(3) { grid-column: span 3; } }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 14px; }
.site-footer .social-icons { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.site-footer .social-icons li a { justify-content: center; width: 44px; height: 44px; border: 1px solid var(--edge-dark); border-radius: 50%; }
.site-footer .social-icons li a:hover { background: var(--rust); border-color: var(--rust); }
.footer-base { border-top: 1px solid var(--rule-dark); margin-top: 24px; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; color: var(--rose); }
.footer-base p { margin: 0; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 0 30px; margin: 0; }
.site-footer .footer-base a, .footer-base .link-button { color: var(--rose); }

/* Cookie choice */
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 760px; background: var(--paper); color: var(--ink); border: 2px solid var(--plum); border-radius: 4px; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; font-family: var(--sans); box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1 1 320px; font-size: .95rem; line-height: 1.45; }
.cookie-notice .btn-outline { color: var(--plum); border-color: var(--plum); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.link-button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
.link-button:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }   /* "all: unset" above removes the page-wide ring, so it is restored here */
.site-footer .link-button:focus-visible, .dark .link-button:focus-visible { outline-color: var(--focus); }
.prose .link-button { color: var(--rust-ink); }

/* ---- Player (ported from Weirding Way Media): persistent bar, inline player, play buttons ---- */
.play-circle, .player-toggle { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--rust); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; padding: 0; }
.play-circle:hover, .player-toggle:hover { background: var(--rust-dark); }
.play-circle.is-playing, .btn.is-playing { background: var(--teal); border-color: var(--teal); }
.play-spacer { width: 48px; height: 48px; }

.inline-player { background: var(--plum-3); border-block: 3px solid var(--rust); color: var(--cream); font-family: var(--sans); }
.inline-player__grid { gap: 10px 24px; align-items: center; padding-block: 14px; }
.inline-player__meta { min-width: 0; flex: 1; }
.inline-player__show { font: 400 .9rem/1.35 var(--sans); color: var(--rose); }

.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--plum-2); color: var(--cream); border-top: 3px solid var(--rust); padding: 10px 16px; gap: 8px 24px; align-items: center; font-family: var(--sans); box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); }
.player-bar[hidden] { display: none; }
.player-bar__progress-edge { position: absolute; left: 0; top: -3px; height: 3px; width: 100%; pointer-events: none; }
.player-bar__progress-edge > div { height: 100%; width: 0; background: var(--rose); }
.player-bar__meta { min-width: 0; }
.player-bar__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font: 400 .9rem/1.4 var(--sans); color: var(--rose); }
.player-bar__link:hover { color: #fff; }
.player-bar.is-error .player-bar__title { color: var(--rose); }
.player-bar.is-covered { visibility: hidden; transform: translateY(100%); transition: transform .2s, visibility .2s; }

/* Parts the bar and the inline player share */
.inline-player__now, .player-bar__now { display: flex; gap: 12px; align-items: center; min-width: 0; }
.inline-player__art, .player-bar__art { width: 48px; height: 48px; flex: none; object-fit: cover; background: var(--plum-2); }
.inline-player__title, .player-bar__title { font: 700 1rem/1.35 var(--sans); }
.inline-player__title, .inline-player__show, .player-bar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-player__controls, .player-bar__controls { display: flex; align-items: center; gap: 14px; min-width: 0; }
.inline-player__extras, .player-bar__extras { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (min-width: 1000px) {
  .inline-player__now, .player-bar__now { grid-column: span 3; }
  .inline-player__controls, .player-bar__controls { grid-column: span 6; }
  .inline-player__extras, .player-bar__extras { grid-column: span 3; justify-content: flex-end; }
  .player-bar { padding-inline: max(16px, calc((100% - var(--wrap)) / 2)); }
}
/* --bar-h is the player bar's real height; site.js measures it (on a phone it grows when "More" is open) */
body.player-open { padding-bottom: calc(var(--bar-h, 118px) + 8px); }
body.player-open .cookie-notice { bottom: calc(var(--bar-h, 118px) + 12px); }

.player-skip, .player-speed, .player-icon-btn, .player-download { min-width: 44px; min-height: 44px; background: none; color: var(--cream); font: 700 .95rem var(--sans); cursor: pointer; border: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.player-skip:hover, .player-icon-btn:hover { color: var(--rose); }
.player-speed, .player-download { border: 2px solid var(--cream); padding: 6px 12px; border-radius: 3px; }
.player-speed:hover, .player-download:hover { background: var(--cream); color: var(--plum); }
.player-icon-btn[aria-pressed=true] { color: var(--rose); }
.player-toggle.is-loading .player-toggle__icon { animation: pbpulse 1s infinite; }
@keyframes pbpulse { 50% { opacity: .35; } }
.player-clock { font: 400 .9rem/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }
.player-seek { flex: 1; height: 6px; padding: 19px 0; box-sizing: content-box; background: #857399; background-clip: content-box; border-radius: 3px; cursor: pointer; min-width: 60px; }
.player-seek__fill { width: 0; height: 100%; background: var(--cream); border-radius: 3px; }
.player-seek:focus-visible { outline-offset: 0; }
.no-js-audio { display: block; width: 100%; margin-top: 16px; }
.js .no-js-audio { display: none; }

/* Twelve column gutters would be wider than a 320px screen; on phones every child spans the full width anyway. */
@media (max-width: 759px) { .two-col, .hero-grid, .card-grid, .cc-grid, .filters, .entry-grid, .entry-body, .video-grid, .footer-grid, .inline-player__grid, .player-bar { column-gap: 0; } }

/* Narrow phones: the seek bar drops to its own row so the controls never run off the screen */
@media (max-width: 479px) {
  .inline-player__controls, .player-bar__controls { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .player-seek { order: 10; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .player, .skip { display: none; } body { background: #fff; font-size: 12pt; } }

/* Books and Press pages */
.book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; padding: 32px 0; border-top: 1px solid var(--rule); }
.book:first-child { border-top: 0; padding-top: 0; }
.book-cover { width: 100%; max-width: 240px; height: auto; border-radius: 4px; box-shadow: 0 6px 18px rgba(30, 16, 37, .25); }
.book-body h2 { margin-top: 0; }
.book-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; margin: 20px 0; }
.book-facts dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.book-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 720px) { .book:has(.book-cover) { grid-template-columns: 240px minmax(0, 1fr); } }
.press-quote { margin: 0 0 32px; padding: 0 0 0 20px; border-left: 4px solid var(--rust); }
.press-quote blockquote { margin: 0 0 8px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; }
.press-quote blockquote p { margin: 0; }
.press-quote figcaption { font-size: .9375rem; }

.issue-grid { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 32px 20px; }
.issue-grid li { display: flex; flex-direction: column; }
.issue-grid img { width: 100%; max-width: 170px; height: auto; aspect-ratio: 2 / 3; object-fit: contain; object-position: center bottom; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(30, 16, 37, .25)); }
.issue-grid p { margin: 0 0 6px; }
.issue-grid li > p:last-child { margin: auto 0 0; padding-top: 8px; }   /* buttons line up along the bottom of every row */
.issue-grid .btn { width: 100%; max-width: 170px; justify-content: center; white-space: nowrap; }

/* Long links or words in comments must wrap, and deep reply threads tighten on phones */
.comment, .comment-body { min-width: 0; overflow-wrap: anywhere; } .comment-body img, .comment-body iframe, .comment-body video { max-width: 100%; height: auto; } .comment-body pre { white-space: pre-wrap; }
@media (max-width: 480px) { .comments.replies { margin-left: 8px; padding-left: 10px; } }

.preview-bar { margin: 0; padding: 10px 16px; background: #ffe08a; color: #3a2a00; border-bottom: 3px solid #d99a00; font: 400 1rem/1.4 var(--sans); text-align: center; }

/* New on Patreon */
.patreon-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.patreon-list li { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--rust); padding: 16px 18px; }
.patreon-list p { margin: 0 0 8px; } .patreon-kind { font: 400 .9375rem/1.4 var(--sans); color: var(--ink-soft); }
.patreon-title { font: 700 1.125rem/1.3 var(--sans); } .patreon-teaser { font: 400 1rem/1.45 var(--sans); }
/* Player bar: compact on phones and tablets (title + play + seek; speed, download and mute sit behind "More") */
.player-more { display: none; }
@media (min-width: 1000px) {
  .player-bar__controls { grid-column: span 5; }
  .player-bar__close { grid-column: span 1; justify-self: end; }
}
@media (max-width: 999px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "now more close" "controls controls controls" "extras extras extras"; gap: 2px 8px; padding: 6px 12px 8px; }
  .player-bar__now { grid-area: now; gap: 10px; }
  .player-bar__art { width: 36px; height: 36px; }
  .player-bar__link { display: none; }
  .player-bar.is-expanded .player-bar__link { display: inline; }
  .player-bar__controls { grid-area: controls; flex-wrap: nowrap; justify-content: flex-start; gap: 0 4px; }
  .player-bar__controls .player-seek { order: 0; flex: 1 1 auto; min-width: 40px; }
  .player-bar__controls [data-player="total"] { display: none; }
  .player-bar__extras { grid-area: extras; display: none; justify-content: flex-start; padding: 4px 0 2px; }
  .player-bar.is-expanded .player-bar__extras { display: flex; }
  .player-more { grid-area: more; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; background: none; color: var(--cream); border: 2px solid var(--cream); border-radius: 3px; font: 700 .95rem var(--sans); cursor: pointer; }
  .player-more:hover { background: var(--cream); color: var(--plum); }
  .player-bar__close { grid-area: close; }
}
.tile-logo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--plum); }

@media (min-width: 900px) { .notes--wide { grid-column: span 12; max-width: 75ch; } }

/* Tables inside show notes: scroll sideways on narrow screens instead of breaking the page */
.notes table, .notes-preview table { display: block; max-width: 100%; overflow-x: auto; margin: 1em 0; }
.notes th, .notes td { white-space: normal; }