/* ============================================================================
   Better Streaming Life — "Screening room" layer (direction D, 2026-09-28)
   Loads LAST, after theme-variables.css (tokens + faces) and main.css (shared
   core). Written fresh for the dark composition: the poster-wall / panel /
   test-kitchen layers of 1.0.0 are gone (git history keeps them). main.css
   still supplies the mobile drawer, comments and content basics — it reads
   the --color-* bridge in theme-variables.css, so it paints dark too.

   Page architecture (home): masthead → category tab bar → "Now showing" strip
   of four 2:3 posters with numbered titles UNDER the frames → the ledger
   (What to cut / What to keep, two raised panels) → Latest, a dense list →
   raised newsletter panel with a faded line-art ground → the credits footer.
   ========================================================================= */

/* --- Base ---------------------------------------------------------------- */

html { overflow-x: clip; background: var(--bsl-ground); }
body {
    background: var(--bsl-ground);
    color: var(--bsl-ink);
    font-family: var(--bsl-text);
    font-size: var(--bsl-size-body);
    line-height: var(--bsl-lh-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bsl-display);
    color: var(--bsl-ink);
    line-height: var(--bsl-lh-head);
    letter-spacing: var(--bsl-track-head);
    font-weight: 700;
}
a { color: var(--bsl-ink); }
a:hover { color: var(--bsl-amber); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--bsl-amber); outline-offset: 2px; }
button, input, select, textarea { font-family: var(--bsl-ui); }
::selection { background: var(--bsl-amber); color: var(--bsl-ground); }
img { background: var(--bsl-panel); }

.site-container { max-width: var(--bsl-page-max); margin: 0 auto; padding-left: var(--bsl-gutter); padding-right: var(--bsl-gutter); }
/* main.css gives .site-main 3rem top padding; the templates own their top
   spacing. Every template ends in the newsletter panel, so main's bottom
   padding is zero and the last block's 0.5rem + the newsletter's 1rem make
   the same 24px gap on every page. */
.site-main { padding-top: 0; padding-bottom: 0; }

.bsl-skip-link { position: absolute; left: -9999px; top: 0; background: var(--bsl-amber); color: var(--bsl-ground); padding: 0.75rem 1rem; z-index: 2000; font-weight: 600; }
.bsl-skip-link:focus { left: 1rem; top: 1rem; }

/* Labels — the screening room's one utility voice: 12px caps, tracked. */
.bsl-label, .bsl-kicker, .bsl-meta, .bsl-chip, .bsl-ad::before, .bsl-head-count, .bsl-widget-title, .bsl-rail-title,
.bsl-credit-label, .bsl-archive-kicker, .bsl-breadcrumb, .bsl-pager-count, .bsl-newsletter-eyebrow, .bsl-ledger-kicker {
    font-family: var(--bsl-ui);
    font-size: var(--bsl-size-meta);
    font-weight: 600;
    letter-spacing: var(--bsl-track-meta);
    text-transform: uppercase;
}
.bsl-kicker { color: var(--bsl-amber); margin: 0 0 0.5rem; }
.bsl-meta { color: var(--bsl-meta); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.bsl-meta .sep { color: var(--bsl-rule-strong); }
/* Category label — text only, meta grey, amber on hover. Never a pill. */
.bsl-chip, a.bsl-chip { color: var(--bsl-meta); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--bsl-tap); margin: -10px 0; }
.bsl-chip:hover, a.bsl-chip:hover { color: var(--bsl-amber); }

/* Numerals — the design element: Syne, amber, tabular. */
.bsl-num { font-family: var(--bsl-display); font-weight: 800; color: var(--bsl-amber); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Framed image: 1px hairline, 4px corners, panel behind while loading. */
.bsl-frame { display: block; border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); overflow: hidden; background: var(--bsl-panel); }
.bsl-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Masthead: ground bar, logo left, off-white nav, search; hairline under -- */

.bsl-masthead { background: var(--bsl-ground); border-bottom: 1px solid var(--bsl-rule); }
.bsl-masthead-inner {
    max-width: var(--bsl-page-max); margin: 0 auto; padding: 0 var(--bsl-gutter);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav actions" "search search search";
    align-items: center; column-gap: 1rem; min-height: 72px; position: relative;
}
.bsl-brand { grid-area: brand; display: flex; align-items: center; }
.bsl-brand a { display: flex; align-items: center; text-decoration: none; min-height: var(--bsl-tap); }
.bsl-brand-h1 { margin: 0; line-height: 1; display: flex; align-items: center; }
.bsl-brand-logo { height: 48px; width: auto; display: block; background: transparent; }
.bsl-masthead .header-actions { grid-area: actions; display: flex; align-items: center; gap: 0.25rem; }
.bsl-masthead .main-navigation { grid-area: nav; justify-self: end; min-width: 0; }
.bsl-drawer-clip { display: contents; }

.bsl-masthead .primary-menu { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.bsl-masthead .main-navigation a {
    display: inline-flex; align-items: center; min-height: var(--bsl-tap); padding: 0 0.7rem;
    font-family: var(--bsl-nav); font-size: 0.9375rem; font-weight: 500; color: var(--bsl-ink);
    text-decoration: none; position: relative; white-space: nowrap;
}
.bsl-masthead .main-navigation a:hover { color: var(--bsl-amber); }
.bsl-masthead .main-navigation a::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.55rem; height: 2px; background: var(--bsl-amber); opacity: 0; }
.bsl-masthead .main-navigation .current-menu-item > a::after,
.bsl-masthead .main-navigation .current_page_item > a::after,
.bsl-masthead .main-navigation .current-post-ancestor > a::after,
.bsl-masthead .main-navigation .current-cat > a::after { opacity: 1; }

.bsl-masthead .desktop-search-toggle, .bsl-masthead .mobile-search-toggle, .bsl-masthead .mobile-menu-toggle {
    width: var(--bsl-tap); height: var(--bsl-tap); min-width: var(--bsl-tap); color: var(--bsl-ink); background: transparent; border: 0;
}
.bsl-masthead .desktop-search-toggle svg, .bsl-masthead .mobile-search-toggle svg { color: var(--bsl-ink); }
.bsl-masthead .desktop-search-toggle:hover svg, .bsl-masthead .mobile-search-toggle:hover svg { color: var(--bsl-amber); }
.bsl-masthead .hamburger-line { background: var(--bsl-ink); }

.bsl-masthead .desktop-search-form, .bsl-masthead .mobile-search-form { grid-area: search; background: var(--bsl-panel); border-top: 1px solid var(--bsl-rule); margin-bottom: 0; }
.bsl-masthead .search-field { font-family: var(--bsl-ui); font-size: 1rem; min-height: var(--bsl-tap); border-radius: var(--bsl-radius); border: 1px solid var(--bsl-rule); background: var(--bsl-ground); color: var(--bsl-ink); }
.bsl-masthead .desktop-search-form button, .bsl-masthead .mobile-search-form button { min-height: var(--bsl-tap); border-radius: var(--bsl-radius); font-family: var(--bsl-ui); font-weight: 600; background: var(--bsl-amber); color: var(--bsl-ground); border: 0; }
.bsl-masthead .search-close, .bsl-masthead .mobile-search-close { background: transparent !important; color: var(--bsl-ink) !important; }

/* --- Tab bar: the six categories with counts, amber active underline ---------- */

.bsl-tabs { border-bottom: 1px solid var(--bsl-rule); background: var(--bsl-ground); overflow: hidden; }
.bsl-tabs-inner { max-width: var(--bsl-page-max); margin: 0 auto; padding: 0 var(--bsl-gutter); position: relative; }
.bsl-tabs-scroll { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0 calc(-1 * var(--bsl-gutter)); padding: 0 var(--bsl-gutter); }
.bsl-tabs-scroll::-webkit-scrollbar { display: none; }
.bsl-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; min-width: max-content; }
.bsl-tab {
    display: inline-flex; align-items: baseline; gap: 0.4rem; min-height: 48px; padding: 0.75rem 1rem 0.75rem 0;
    margin-right: 1.25rem; font-family: var(--bsl-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--bsl-meta); text-decoration: none; white-space: nowrap; position: relative;
}
.bsl-tab:hover { color: var(--bsl-ink); }
.bsl-tab-count { font-family: var(--bsl-display); font-weight: 700; font-size: 0.75rem; color: var(--bsl-amber); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bsl-tab::after { content: ""; position: absolute; left: 0; right: 1rem; bottom: -1px; height: 2px; background: var(--bsl-amber); opacity: 0; }
.bsl-tab.is-active { color: var(--bsl-ink); }
.bsl-tab.is-active::after { opacity: 1; }
/* Fade at the right edge when the row scrolls (phones). */
.bsl-tabs-inner::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2.5rem; pointer-events: none; background: linear-gradient(90deg, rgba(11,15,14,0), var(--bsl-ground)); }
@media (min-width: 1025px) { .bsl-tabs-inner::after { display: none; } }

/* --- Section heads: Syne title left, meta/link right, hairline under ----------- */

.bsl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--bsl-rule); margin: 0 0 1.5rem; }
.bsl-head > div { min-width: 0; }
.bsl-head-title { margin: 0; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.bsl-head-kicker { display: block; color: var(--bsl-amber); font-family: var(--bsl-ui); font-size: var(--bsl-size-meta); font-weight: 600; letter-spacing: var(--bsl-track-meta); text-transform: uppercase; margin-bottom: 0.5rem; }
.bsl-head-count { color: var(--bsl-meta); white-space: nowrap; }
.bsl-head-link { font-family: var(--bsl-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bsl-amber); text-decoration: none; white-space: nowrap; min-height: var(--bsl-tap); display: inline-flex; align-items: center; }
.bsl-head-link:hover { color: var(--bsl-ink); }

/* --- Now showing: four 2:3 posters, numbered titles UNDER the frames -------- */

.bsl-showing { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; }
.bsl-showing-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.bsl-showing-head .bsl-kicker { margin: 0; }
.bsl-showing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bsl-grid-gap); }
.bsl-poster { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bsl-poster-frame { aspect-ratio: 2 / 3; }
.bsl-poster-frame img { transition: transform 0.4s ease; }
.bsl-poster:hover .bsl-poster-frame img { transform: scale(1.03); }
.bsl-poster-body { display: flex; flex-direction: column; gap: 0.6rem; }
.bsl-poster-num { font-size: 1.125rem; line-height: 1; }
.bsl-poster-title { margin: 0; font-size: var(--bsl-poster-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }
.bsl-poster-title a { color: var(--bsl-ink); text-decoration: none; }
.bsl-poster-title a:hover { color: var(--bsl-amber); }

/* --- The ledger: What to cut / What to keep, two raised panels ---------------- */

.bsl-ledger { padding: clamp(2rem, 4vw, 3.25rem) 0 0; }
.bsl-ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bsl-grid-gap); }
.bsl-panel { background: var(--bsl-panel); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); }
.bsl-ledger-panel { padding: 1.5rem 1.75rem 1.25rem; min-width: 0; }
.bsl-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; }
.bsl-ledger-title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; }
.bsl-ledger-kicker { color: var(--bsl-amber); white-space: nowrap; }
.bsl-ledger-list { list-style: none; margin: 0; padding: 0; }
.bsl-ledger-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.9rem 0; border-top: 1px solid var(--bsl-rule); }
.bsl-ledger-row:first-child { border-top: 0; }
.bsl-ledger-row .bsl-num { font-size: 1rem; line-height: 1.5; }
.bsl-ledger-row-title { margin: 0; font-family: var(--bsl-ui); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.bsl-ledger-row-title a { color: var(--bsl-ink); text-decoration: none; display: inline-block; padding: 11px 0; margin: -11px 0; }
.bsl-ledger-row-title a:hover { color: var(--bsl-amber); }
.bsl-ledger-row-note { grid-column: 2; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--bsl-meta); }

/* --- Latest: a dense list, 96px 16:9 thumbs, category on the right ------------ */

.bsl-latest { padding: clamp(2rem, 4vw, 3.25rem) 0 0.5rem; }
.bsl-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.bsl-rows--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.bsl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--bsl-rule); min-width: 0; }
.bsl-rows > .bsl-row:first-child { border-top: 1px solid var(--bsl-rule); }
.bsl-rows--2col > .bsl-row:nth-child(2) { border-top: 1px solid var(--bsl-rule); }
.bsl-row-thumb { width: 96px; aspect-ratio: 16 / 9; }
.bsl-row-thumb--empty { background: var(--bsl-panel); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); }
.bsl-row-body { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.bsl-row-title { margin: 0; font-family: var(--bsl-ui); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-wrap: pretty; }
.bsl-row-title a { color: var(--bsl-ink); text-decoration: none; display: inline-block; padding: 11px 0; margin: -11px 0; }
.bsl-row-title a:hover { color: var(--bsl-amber); }
.bsl-row-cat { justify-self: end; }

/* --- Ad frames: hairline, labelled, reserved; collapse when unfilled ---------- */

.bsl-ad { text-align: center; border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); padding: 0.75rem 0; background: var(--bsl-panel); }
.bsl-ad::before { content: "Advertisement"; display: block; font-size: 0.6875rem; color: var(--bsl-meta); margin-bottom: 0.5rem; }
.bsl-ad:has(ins[data-ad-status="unfill-optimized"]), .bsl-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.bsl-ad-placeholder { border: 1px dashed var(--bsl-rule); padding: 2rem 1rem; color: var(--bsl-meta); font-family: var(--bsl-ui); font-size: 0.875rem; margin: 0 1rem; }
.bsl-ad--band { max-width: 760px; margin: 2rem auto 0.5rem; }

/* --- Newsletter: raised panel, faded line-art ground, amber button ------------- */

.bsl-newsletter { padding: 1rem var(--bsl-gutter) 1.5rem; background: var(--bsl-ground); }
.bsl-newsletter-inner {
    max-width: var(--bsl-page-max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); padding: clamp(1.75rem, 3.5vw, 3rem);
    background: var(--bsl-panel) url('../images/newsletter-lineart.webp?v=110') center / cover no-repeat;
}
.bsl-newsletter-eyebrow { color: var(--bsl-amber); margin: 0 0 0.6rem; }
.bsl-newsletter h2 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.bsl-newsletter-text p { margin: 0; color: var(--bsl-meta); font-size: 1.0625rem; max-width: 34rem; }
.bsl-newsletter-signup { display: flex; flex-direction: column; gap: 0.75rem; }
.bsl-newsletter .newsletter-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: none; margin: 0; position: relative; }
.bsl-newsletter .newsletter-form input[type="email"] { border: 1px solid var(--bsl-rule-strong); border-radius: var(--bsl-radius); background: var(--bsl-ground); color: var(--bsl-ink); min-height: 50px; font-size: 1.0625rem; padding: 0 1rem; font-family: var(--bsl-ui); }
.bsl-newsletter .newsletter-form input[type="email"]::placeholder { color: var(--bsl-meta); }
.bsl-newsletter .newsletter-form input[type="email"]:focus { border-color: var(--bsl-amber); outline: none; }
.bsl-btn, .bsl-newsletter .newsletter-form button { border: 0; border-radius: var(--bsl-radius); min-height: 50px; padding: 0 1.5rem; background: var(--bsl-amber); color: var(--bsl-ground); font-family: var(--bsl-ui); font-weight: 700; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bsl-btn:hover, .bsl-newsletter .newsletter-form button:hover { background: var(--bsl-amber-dark); color: var(--bsl-ground); }
.bsl-newsletter-note { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 400; }
.bsl-newsletter .newsletter-message.success { color: var(--bsl-amber); }
.bsl-newsletter .newsletter-message.error { color: var(--color-error); }

/* --- Footer: the credits (2026-09-28) ------------------------------------------
   End credits on the ground: hairline on top, identity column left (light
   logo, tagline, mission, Publisher block), and on the right three stacked
   hairline rows, each an amber label + an inline link list, read in order:
   CHANNELS → THIS SITE + THE WEEKLY CUT → LEGAL (CCPA trio last). One
   colophon line closes. Unlike the bsh breaker box (compartments in a white
   panel), the qkt band stack (rails on rust) and the C guide grid (tiles). */

.bsl-footer { background: var(--bsl-ground); color: var(--bsl-ink); border-top: 1px solid var(--bsl-rule); padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem); }
.bsl-footer-inner { max-width: var(--bsl-page-max); margin: 0 auto; padding: 0 var(--bsl-gutter); }
.bsl-credits { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bsl-credits-id { display: flex; flex-direction: column; gap: 0.9rem; }
.bsl-credits-logo { display: inline-flex; align-items: center; min-height: var(--bsl-tap); }
.bsl-credits-logo img { height: 44px; width: auto; display: block; background: transparent; }
.bsl-credits-tagline { margin: 0; font-family: var(--bsl-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.bsl-credits-mission { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--bsl-meta); max-width: 34rem; }
.bsl-credit-label { color: var(--bsl-amber); margin: 0; }
.bsl-credits-owner { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--bsl-meta); }
.bsl-credits-owner a { color: var(--bsl-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--bsl-tap); margin: -6px 0; }
.bsl-credits-owner a:hover { color: var(--bsl-amber); }
.bsl-credit-rows { display: flex; flex-direction: column; }
.bsl-credit-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.5rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--bsl-rule); align-items: baseline; }
.bsl-credit-row:last-child { border-bottom: 1px solid var(--bsl-rule); }
.bsl-credit-row--split { grid-template-columns: 9.5rem minmax(0, 1fr); }
.bsl-credit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0 1.25rem; }
.bsl-credit-list li { display: flex; align-items: center; min-width: 0; }
.bsl-credit-list a { display: inline-flex; align-items: center; min-height: var(--bsl-tap); font-size: 0.9375rem; color: var(--bsl-ink); text-decoration: none; }
.bsl-credit-list a:hover { color: var(--bsl-amber); }
.bsl-credit-count { font-family: var(--bsl-display); font-weight: 700; font-size: 0.75rem; color: var(--bsl-amber); margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.bsl-credit-sub { display: flex; flex-direction: column; gap: 0.25rem; }
.bsl-credit-sub .bsl-credit-sub-label { margin-top: 0.5rem; }
.bsl-credit-sub-label { color: var(--bsl-meta); font-family: var(--bsl-ui); font-size: var(--bsl-size-meta); font-weight: 600; letter-spacing: var(--bsl-track-meta); text-transform: uppercase; margin: 0; }
.bsl-credit-row--legal .bsl-credit-list a { color: var(--bsl-meta); font-size: 0.875rem; }
.bsl-credit-row--legal .bsl-credit-list a:hover { color: var(--bsl-amber); }
.bsl-credits-copy { margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--bsl-meta); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }

/* --- Single post ------------------------------------------------------------------ */

/* Sidebar track = 304px content + the 2.5rem gutter + its 1px rule, so a
   300px ad unit sits inside its frame (1.0.0 double-counted the gap). */
.bsl-single { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--bsl-sidebar) + var(--bsl-side-gap) + 1px); gap: 0; padding: clamp(1.5rem, 3vw, 2.5rem) 0 0.5rem; align-items: start; }
.bsl-single > * { padding-bottom: 0; margin-bottom: 0; }
.bsl-article { min-width: 0; padding-right: 0; }
.bsl-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: var(--bsl-meta); margin-bottom: 1.25rem; font-weight: 500; }
.bsl-breadcrumb a { color: var(--bsl-meta); text-decoration: none; min-height: var(--bsl-tap); margin: -8px 0; display: inline-flex; align-items: center; }
.bsl-breadcrumb a:hover { color: var(--bsl-amber); }
.bsl-breadcrumb .sep { color: var(--bsl-rule-strong); }
.bsl-article-head { margin-bottom: 1.75rem; }
.bsl-title { font-size: var(--bsl-title); font-weight: 800; margin: 0 0 1rem; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.bsl-standfirst { margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.55; color: var(--bsl-meta); max-width: 40rem; }
.bsl-article-meta { padding-bottom: 1.25rem; border-bottom: 1px solid var(--bsl-rule); }
.bsl-lead-photo { margin: 0 0 1.75rem; }
.bsl-lead-photo img { width: 100%; height: auto; display: block; }
.bsl-caption, .bsl-article .entry-content figcaption { font-family: var(--bsl-ui); font-style: normal; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bsl-meta); text-align: left; padding: 0.6rem 0 0; }
.bsl-lead-photo .bsl-caption { padding: 0.6rem 0.75rem 0.7rem; border-top: 1px solid var(--bsl-rule); background: var(--bsl-panel); }

/* Reading column on a slightly raised panel — off-white on #141A18 reads
   easier over long stretches than on the pure ground. */
.bsl-reading { background: var(--bsl-panel); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); padding: clamp(1.25rem, 3vw, 2.5rem); }
.bsl-article .entry-content { font-size: var(--bsl-size-body); line-height: var(--bsl-lh-body); color: var(--bsl-ink); }
.bsl-article .entry-content > * { max-width: 100%; }
.bsl-article .entry-content p { text-wrap: pretty; color: var(--bsl-ink); }
.bsl-article .entry-content h2 { font-size: var(--bsl-h2); font-weight: 800; margin: 3rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--bsl-rule); scroll-margin-top: 1.5rem; letter-spacing: -0.02em; color: var(--bsl-ink); }
.bsl-article .entry-content h3 { font-size: var(--bsl-h3); margin: 2rem 0 0.8rem; letter-spacing: -0.015em; color: var(--bsl-ink); }
.bsl-article .entry-content h4 { color: var(--bsl-ink); }
.bsl-article .entry-content a { color: var(--bsl-ink); text-decoration: underline; text-decoration-color: var(--bsl-amber); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.bsl-article .entry-content a:hover { color: var(--bsl-amber); }
.bsl-article .entry-content img { border-radius: var(--bsl-radius); border: 1px solid var(--bsl-rule); }
.bsl-article .entry-content figure { margin: 2rem 0; }
.bsl-article .entry-content strong { color: var(--bsl-ink); }
.bsl-article .entry-content ul, .bsl-article .entry-content ol { color: var(--bsl-ink); }
.bsl-article .entry-content li::marker { color: var(--bsl-amber); }
.bsl-article .entry-content code { background: var(--bsl-panel-2); color: var(--bsl-ink); border-radius: var(--bsl-radius-sm); padding: 0.1em 0.35em; }
.bsl-article .entry-content pre { background: var(--bsl-ground); color: var(--bsl-ink); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); }
.bsl-article .entry-content hr { border: 0; border-top: 1px solid var(--bsl-rule); }

/* Contents (nav.toc from the pipeline): hairline box on the ground, two
   columns, amber numerals 01–04 left, 05–08 right. */
.bsl-article .entry-content .toc { background: var(--bsl-ground); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); padding: 1.5rem 1.75rem; margin: 2rem 0; }
.bsl-article .entry-content .toc h2 { font-family: var(--bsl-ui); font-size: var(--bsl-size-meta); font-weight: 600; letter-spacing: var(--bsl-track-meta); text-transform: uppercase; margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--bsl-rule); color: var(--bsl-amber); }
.bsl-article .entry-content .toc ul, .bsl-article .entry-content .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: bsl-toc; columns: 2; column-gap: 2rem; }
.bsl-article .entry-content .toc li { margin: 0; padding: 0; list-style: none; counter-increment: bsl-toc; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; break-inside: avoid; }
.bsl-article .entry-content .toc li::before { content: counter(bsl-toc, decimal-leading-zero); display: block; font-family: var(--bsl-display); font-weight: 800; color: var(--bsl-amber); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.bsl-article .entry-content .toc a { display: block; font-family: var(--bsl-ui); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; padding: 0.45rem 0; color: var(--bsl-ink); text-decoration: none; border-bottom: 1px solid var(--bsl-rule); }
.bsl-article .entry-content .toc a:hover { color: var(--bsl-amber); }

/* Pull quote — amber left rule, larger off-white. */
.bsl-article .entry-content blockquote { border-left: 3px solid var(--bsl-amber); background: transparent; border-radius: 0; margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.5rem; font-family: var(--bsl-text); font-size: 1.3125rem; font-style: normal; line-height: 1.5; color: var(--bsl-ink); }
.bsl-article .entry-content blockquote p { margin: 0; }
.bsl-article .entry-content blockquote p + p { margin-top: 0.75rem; }

/* Tables: hairlines, panel-2 heads. */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); }
.table-scroll table { min-width: 560px; margin: 0; }
.bsl-article .entry-content table { border-collapse: collapse; width: 100%; background: transparent; }
.bsl-article .entry-content th { background: var(--bsl-panel-2); color: var(--bsl-ink); font-family: var(--bsl-ui); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.bsl-article .entry-content td, .bsl-article .entry-content th { border: 1px solid var(--bsl-rule); padding: 0.7rem 0.9rem; color: var(--bsl-ink); }
.bsl-article .entry-content tr:nth-child(even) td { background: transparent; }

.bsl-page-links { margin: 1.75rem 0; display: flex; gap: 0.5rem; align-items: center; font-family: var(--bsl-ui); }
.bsl-page-links span { padding: 0.25rem 0.6rem; }
.bsl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--bsl-rule); }
.bsl-share .bsl-label { color: var(--bsl-amber); }
.bsl-share a { color: var(--bsl-ink); text-decoration: none; font-family: var(--bsl-ui); font-size: 0.9375rem; font-weight: 600; min-height: var(--bsl-tap); display: inline-flex; align-items: center; }
.bsl-share a:hover { color: var(--bsl-amber); }
.bsl-related { margin-top: 3rem; }

/* Comments on dark (main.css paints the structure; retint it). */
.comments-area { margin-top: 2rem; padding-top: 0; border-top: 0; color: var(--bsl-ink); }
.comments-area .comments-title, .comments-area .comment-reply-title { font-size: var(--bsl-h3); color: var(--bsl-ink); }
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment-respond { margin-top: 0; margin-bottom: 0; background: var(--bsl-ground); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); }
.comments-area label, .comments-area .comment-notes, .comments-area .logged-in-as { color: var(--bsl-meta); }
.comments-area input:not([type="checkbox"]):not([type="submit"]), .comments-area textarea { border-radius: var(--bsl-radius); border: 1px solid var(--bsl-rule-strong); background: var(--bsl-panel); color: var(--bsl-ink); font-family: var(--bsl-ui); }
.comments-area input:focus, .comments-area textarea:focus { border-color: var(--bsl-amber); outline: none; }
.comments-area .submit, .comments-area #submit { background: var(--bsl-amber) !important; border: none; border-radius: var(--bsl-radius) !important; color: var(--bsl-ground) !important; font-weight: 700; min-height: var(--bsl-tap); padding: 0 1.5rem; cursor: pointer; }
.comments-area .submit:hover, .comments-area #submit:hover { background: var(--bsl-amber-dark) !important; }
.comments-area .comment-body { background: var(--bsl-panel); border: 1px solid var(--bsl-rule); color: var(--bsl-ink); }

/* --- Sidebar (single): hairline modules ------------------------------------------ */

.bsl-sidebar { display: flex; flex-direction: column; gap: 1.5rem; border-left: 1px solid var(--bsl-rule); padding-left: var(--bsl-side-gap); min-width: 0; }
.bsl-widget { margin: 0; }
.bsl-widget-title { color: var(--bsl-amber); margin: 0 0 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--bsl-rule); }
.bsl-mostread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bsl-mostread li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--bsl-rule); }
.bsl-mostread-num { font-family: var(--bsl-display); font-weight: 800; color: var(--bsl-amber); font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bsl-mostread-text { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.bsl-mostread-title { font-family: var(--bsl-ui); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--bsl-ink); text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
.bsl-mostread-title:hover { color: var(--bsl-amber); }
.bsl-cat-list { list-style: none; margin: 0; padding: 0; }
.bsl-cat-list li { border-bottom: 1px solid var(--bsl-rule); }
.bsl-cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--bsl-tap); font-family: var(--bsl-ui); font-size: 0.9375rem; font-weight: 500; color: var(--bsl-ink); text-decoration: none; }
.bsl-cat-list a:hover { color: var(--bsl-amber); }
.bsl-cat-count { font-family: var(--bsl-display); font-weight: 700; font-size: 0.75rem; color: var(--bsl-amber); font-variant-numeric: tabular-nums; }
.bsl-widget-news { background: var(--bsl-panel); border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius-lg); padding: 1.25rem; }
.bsl-widget-news .bsl-widget-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.5rem; }
.bsl-widget-news p { margin: 0 0 0.9rem; font-size: 0.9375rem; color: var(--bsl-meta); }
.bsl-widget-news .newsletter-form { display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.bsl-widget-news .newsletter-form input[type="email"] { border: 1px solid var(--bsl-rule-strong); border-radius: var(--bsl-radius); background: var(--bsl-ground); color: var(--bsl-ink); min-height: var(--bsl-tap); padding: 0 0.9rem; font-family: var(--bsl-ui); font-size: 0.9375rem; }
.bsl-widget-news .newsletter-form input[type="email"]:focus { border-color: var(--bsl-amber); outline: none; }
.bsl-widget-news .newsletter-form button { border: 0; border-radius: var(--bsl-radius); min-height: var(--bsl-tap); background: var(--bsl-amber); color: var(--bsl-ground); font-family: var(--bsl-ui); font-weight: 700; cursor: pointer; }
.bsl-widget-news .newsletter-form button:hover { background: var(--bsl-amber-dark); }
.bsl-widget-news .bsl-newsletter-note { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--bsl-meta); }
.bsl-widget-news .newsletter-message.success { color: var(--bsl-amber); }
.bsl-widget-news .newsletter-message.error { color: var(--color-error); }

/* --- Archive: dark head band, four posters, then the dense list + rail ---------- */

.bsl-archive-head { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--bsl-rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; }
.bsl-archive-kicker { color: var(--bsl-amber); margin: 0 0 0.75rem; }
.bsl-archive-title { margin: 0; font-size: var(--bsl-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.bsl-archive-description { margin: 0.9rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--bsl-meta); max-width: 44rem; }
.bsl-archive-count { margin: 0; font-family: var(--bsl-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--bsl-amber); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; }
.bsl-archive-count small { display: block; font-family: var(--bsl-ui); font-size: var(--bsl-size-meta); font-weight: 600; letter-spacing: var(--bsl-track-meta); text-transform: uppercase; color: var(--bsl-meta); margin-top: 0.4rem; }
.bsl-archive .bsl-showing { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.bsl-index-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--bsl-sidebar); gap: 2.5rem; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0.5rem; align-items: start; }
.bsl-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.bsl-rail { padding: 1.25rem 1.25rem 0.5rem; }
.bsl-rail-head { margin: 0 0 0.5rem; }
.bsl-rail-title { color: var(--bsl-amber); margin: 0; }
.bsl-rail-list { list-style: none; margin: 0; padding: 0; }
.bsl-rail-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--bsl-rule); }
.bsl-rail-list a { font-family: var(--bsl-ui); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--bsl-ink); text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
.bsl-rail-list a:hover { color: var(--bsl-amber); }
.bsl-rail-num { font-family: var(--bsl-display); font-weight: 800; color: var(--bsl-amber); font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* Pager — 44px square hairline buttons, current amber-outlined. */
.bsl-pager { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.bsl-pager .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bsl-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--bsl-tap); min-height: var(--bsl-tap); padding: 0 0.75rem; border: 1px solid var(--bsl-rule); border-radius: var(--bsl-radius); font-family: var(--bsl-ui); font-size: 0.875rem; font-weight: 600; color: var(--bsl-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.bsl-pager .page-numbers:hover { border-color: var(--bsl-amber); color: var(--bsl-amber); }
.bsl-pager .page-numbers.current { border-color: var(--bsl-amber); color: var(--bsl-amber); }
.bsl-pager .page-numbers.dots { border: 0; }
.bsl-pager-count { color: var(--bsl-meta); }

/* --- Static pages, search, 404, empty states ----------------------------------- */

.bsl-page { max-width: var(--bsl-content-max); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) 0 0.5rem; }
.bsl-page-title { font-size: var(--bsl-h1); font-weight: 800; margin: 0 0 1.75rem; letter-spacing: -0.025em; }
.bsl-page .entry-content, .bsl-page .entry-content p { color: var(--bsl-ink); }
.bsl-page .entry-content a { color: var(--bsl-ink); text-decoration: underline; text-decoration-color: var(--bsl-amber); text-underline-offset: 0.18em; }
.bsl-page .entry-content h2, .bsl-page .entry-content h3 { color: var(--bsl-ink); }
.bsl-empty { max-width: 38rem; margin: 0 auto; text-align: center; padding: 4rem 0 3rem; }
.bsl-empty p { color: var(--bsl-meta); }
.bsl-empty .search-form, .bsl-empty form { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; }
.bsl-empty input[type="search"] { border: 1px solid var(--bsl-rule-strong); border-radius: var(--bsl-radius); background: var(--bsl-panel); color: var(--bsl-ink); min-height: var(--bsl-tap); padding: 0 0.9rem; flex: 1 1 auto; max-width: 22rem; }
.bsl-empty button { border: 0; border-radius: var(--bsl-radius); background: var(--bsl-amber); color: var(--bsl-ground); font-weight: 700; min-height: var(--bsl-tap); padding: 0 1.25rem; }
.bsl-archive-head--search .bsl-archive-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.bsl-band { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0.5rem; }
.bsl-band-inner { max-width: var(--bsl-page-max); margin: 0 auto; }
.bsl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bsl-grid-gap); }
.bsl-card { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.bsl-card-figure { aspect-ratio: 16 / 9; }
.bsl-card-body { display: flex; flex-direction: column; gap: 0.5rem; }
.bsl-card-title { margin: 0; font-family: var(--bsl-ui); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.bsl-card-title a { color: var(--bsl-ink); text-decoration: none; }
.bsl-card-title a:hover { color: var(--bsl-amber); }
.bsl-card-excerpt { margin: 0; font-size: 0.9375rem; color: var(--bsl-meta); }

/* --- Responsive ------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .bsl-masthead .main-navigation a { font-size: 0.875rem; padding: 0 0.5rem; }
    .bsl-masthead .main-navigation a::after { left: 0.5rem; right: 0.5rem; }
    .bsl-brand-logo { height: 44px; }
    .bsl-masthead-inner { column-gap: 0.75rem; }
}

@media (max-width: 1024px) {
    .bsl-masthead-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "search search"; min-height: 64px; }
    .bsl-brand-logo { height: 42px; }
    .bsl-masthead .main-navigation { grid-area: auto; }
    /* The drawer's parking spot (right: -100%) widens the page's scrollable
       area. Contain it: the wrapper becomes a fixed, full-viewport,
       overflow-hidden box and the drawer positions absolutely inside it. */
    .bsl-drawer-clip { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1000; }
    .bsl-drawer-clip .main-navigation { position: absolute; pointer-events: auto; background: var(--bsl-panel); }
    .bsl-masthead .main-navigation { display: block; justify-self: auto; }
    .bsl-masthead .primary-menu { gap: 0; }
    .bsl-masthead .primary-menu, .bsl-masthead .main-navigation ul { display: block; text-align: left; }
    .bsl-masthead .main-navigation li { border-bottom: 1px solid var(--bsl-rule); }
    .bsl-masthead .main-navigation a { min-height: var(--bsl-nav-tap); padding: 0 1.5rem; font-size: 1rem; color: var(--bsl-ink); }
    .bsl-masthead .main-navigation a::after { display: none; }
    .bsl-masthead .header-actions { margin-left: auto; grid-column: 2; }
    .bsl-masthead .mobile-menu-toggle.active { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1002; }

    .bsl-showing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsl-ledger-grid { grid-template-columns: minmax(0, 1fr); }
    .bsl-rows--2col { grid-template-columns: minmax(0, 1fr); }
    .bsl-rows--2col > .bsl-row:nth-child(2) { border-top: 0; }
    .bsl-single { grid-template-columns: minmax(0, 1fr); }
    .bsl-article { padding-right: 0; }
    .bsl-sidebar { border-left: none; border-top: 1px solid var(--bsl-rule); padding-left: 0; padding-top: 2rem; margin-top: 2.5rem; }
    .bsl-index-layout { grid-template-columns: minmax(0, 1fr); }
    .bsl-credits { grid-template-columns: minmax(0, 1fr); }
    .bsl-credit-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
    .bsl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .bsl-newsletter-inner { grid-template-columns: minmax(0, 1fr); background-position: right center; }
}

@media (max-width: 640px) {
    .bsl-showing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .bsl-poster-title { font-size: 1.0625rem; }
    .bsl-poster .bsl-meta .sep { display: none; }
    .bsl-poster .bsl-meta > * { flex-basis: 100%; }
    .bsl-row { grid-template-columns: 80px minmax(0, 1fr); }
    .bsl-row-thumb { width: 80px; }
    .bsl-row-cat { grid-column: 2; justify-self: start; }
    .bsl-ledger-panel { padding: 1.25rem 1.15rem 1rem; }
    .bsl-reading { padding: 1.15rem; }
    .bsl-article .entry-content .toc ul, .bsl-article .entry-content .toc ol { columns: 1; }
    .bsl-article-meta .sep { display: none; }
    .bsl-article-meta > * { flex-basis: 100%; }
    .bsl-archive-head { grid-template-columns: minmax(0, 1fr); }
    .bsl-head-link { white-space: normal; }
    .bsl-credit-list { grid-template-columns: minmax(0, 1fr); }
    .bsl-credits-copy { flex-direction: column; }
    .bsl-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .bsl-ad--band { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --- QA fixes 2026-09-29 (visual-qa 20260929-151107) --------------------------- */
/* 1. Current page number was amber on main.css's amber fill: outline style only. */
.bsl-pager .page-numbers.current { background: transparent; color: var(--bsl-amber); border-color: var(--bsl-amber); }
/* 2. Comparison tables overflowed the 691px column by ~20px with no scroll cue:
      let cells wrap so tables fit the column; genuinely wide tables still scroll. */
.table-scroll table { width: 100%; }
.table-scroll th, .table-scroll td { white-space: normal; overflow-wrap: anywhere; }
/* 3. Newsletter panel ran 40px past the content edge on desktop: match the page column. */
.bsl-newsletter-inner { max-width: calc(var(--bsl-page-max) - 2 * var(--bsl-gutter)); }