/* =========================================================
   admin-base.css — the console's copy of the Ver 8 site stylesheet.

   The public site moved to the Concierge design (assets/css/base.css
   and styles.css). The operations console was built on the Ver 8
   tokens and components, so it keeps this frozen copy and looks
   exactly as it did. admin.css layers on top of it. Nothing on the
   public site loads this file.
   ========================================================= */

/* =========================================================
   NashvilleTN LIVE — design system v4
   Dark: ink bands on a near-black page. Antonio / Karla / Inter.
   One stylesheet, no build step, no framework.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
    /* ink */
    --ink:            #0B0C0B;
    --ink-panel:      #171A16;
    --ink-panel-hi:   #1D201B;
    --ink-hair:       #282C24;
    --ink-row:        #21241E;
    --ink-border:     #3B3F35;
    --ink-frame:      #2C302A;
    --on-ink:         #EFEDE7;
    --on-ink-body:    #A7ABA0;
    --on-ink-body-2:  #C6C9C1;
    --on-ink-mute:    #8D9187;
    --on-ink-dim:     #80857A;

    /* the page — dark theme.
       These tokens kept their old names (--cream, --surface, --text) when
       the site went dark, so every component that was built on them followed
       without being rewritten. Read --cream as "the page", not as a colour.

       The page sits one step above ink: the header and the ink bands are
       the deepest thing on screen, the page is a hair lighter, and a module
       is one step lighter again. That ladder is what makes a card read as a
       card on a dark page, where a hairline alone disappears. */
    --cream:          #0F110F;
    --surface:        #1B1E1A;
    /* A card's hover lifts one step toward the light. */
    --surface-lift:   #21251F;
    --surface-hi:     #232721;
    --card-border:    #2F332C;
    --row-div:        #282C25;
    --media-bg:       #232721;
    --line:           #40443A;
    --chip-on:        #2C3029;

    /* text */
    --text:           #EFEDE7;
    --text-2:         #A7ABA0;
    --text-3:         #8D9187;
    --text-body:      #C6C9C1;
    --text-lede:      #DCDAD3;
    --muted:          #8D9187;

    /* accent */
    --mint:           #3DDC97;
    --on-mint:        #08120C;
    --mint-tint:      #0F2219;
    --mint-tint-hi:   #13291E;
    /* The yellow wash under the "add your event" row on the events board,
       and the console's not-live badge. On a dark page it is a warm shadow
       rather than a highlight. */
    --amber-wash:     #241D0D;
    --amber-wash-hi:  #2D2411;
    /* On a dark page mint is the link colour, as it always was on ink. The
       token survives so the rules that name it keep working, and a light
       band that ever comes back only has to repoint it. */
    --link:           #3DDC97;
    --amber:          #F0B447;
    --amber-ink:      #FFC24D;
    /* the spotlight star: present, not shouting */
    --amber-soft:     #E0B457;
    --amber-tint:     #1E1A10;
    --danger:         #F08A8A;
    --danger-line:    #5C2B2B;
    --danger-tint:    #2A1515;
    /* The one shadow a module gets under the pointer. On a dark page it has
       to be deeper to register at all. */
    --lift:           0 10px 24px -14px rgba(0, 0, 0, .85);

    /* type */
    --display: Antonio, 'Arial Narrow', Impact, sans-serif;
    --body:    Karla, system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* The label face. Every eyebrow, kicker, nav item, button and column head
       on the site is set in it, always uppercase and always tracked out, at
       10–12px. It was a typewriter mono, then Space Grotesk; both had
       letterforms with an opinion — the single-storey `a`, the flat-sided
       `G` — and at 11px uppercase in a nav bar an opinionated face reads as
       a wobble, not as character. Inter is the plain one: even caps, a wide
       and unremarkable `S` and `G`, and real weight at 600/700 where the
       other two went thin and grey. The display voice is Antonio's job; the
       labels only have to be read.

       Set at 600 by default and 700 in the nav and on buttons — see
       --label-w below. Where a column of numbers has to line up, the rule
       adds `font-variant-numeric: tabular-nums`; a proportional face does
       not get that for free the way a mono did. */
    --label:   Inter, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* One weight for every label, so a kicker and a column head cannot drift
       apart. Bold caps are the whole point of the change. */
    --label-w: 600;
    --label-w-strong: 700;

    /* metrics */
    --max:     1360px;
    --gut:     28px;
    /* Rounded: cards, panels and frames at 18, controls and badges at 10.
       Soft enough to read as a set of rounded modules laid on the page, and
       still short of a pill on anything short — which is the line the live
       pill and the chips sit closest to. */
    --r:       18px;
    --r-sm:    10px;
}

/* ---------- light and dark ----------
   Dark is the default and needs no attribute. The footer's switch sets
   data-theme="light" on <html> and remembers it (localStorage, "ntn:theme");
   a one-line script in every page's head applies a stored choice before the
   first paint, so a light reader never sees a dark flash. Light is the site's
   original palette: the same token names, the old values. The ink tokens do
   not change, so the header and the ink bands are ink in both. */
:root { color-scheme: dark; }
:root[data-theme="light"],
.band-light {
    color-scheme: light;
    --cream:          #F7F5EF;
    --surface:        #FFFFFF;
    --surface-lift:   #FAF8F3;
    --surface-hi:     #F3F0E8;
    --card-border:    #E3DDD0;
    --row-div:        #EDE8DC;
    --media-bg:       #E7E2D7;
    --line:           #D2CCBE;
    --chip-on:        #EDE9DF;
    --text:           #16191A;
    --text-2:         #5A6060;
    --text-3:         #5F6461;
    --text-body:      #3A3F3C;
    --text-lede:      #2A2E2C;
    --muted:          #666B62;
    --mint-tint:      #F2FBF6;
    --mint-tint-hi:   #E8F7EF;
    --amber-wash:     #FBF3DA;
    --amber-wash-hi:  #F7EDCB;
    /* On a light ground mint fails as text, so links take the darker green,
       and both it and the amber are deep enough to pass 4.5:1 on cream and on
       white (#0E9660 and #B47407 measured 3.5 and 3.9). */
    --link:           #0A7F4D;
    --amber:          #9A6206;
    --amber-soft:     #C08A2A;
    --amber-tint:     #FDF8EC;
    --danger:         #8A2F2F;
    --danger-line:    #E0CFCF;
    --danger-tint:    #FCF2F2;
    --lift:           0 10px 24px -18px rgba(11, 12, 11, .5);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
/* State wins over layout, everywhere, once. The UA sheet's [hidden] is a plain
   display: none, so any class that sets its own display silently beats it —
   which is how a hidden Live flag ended up painted over a stream that was not
   live, and how a filtered-out merch card would stay on screen. */
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}
.band-ink :focus-visible, .panel :focus-visible { outline-color: var(--mint); }

/* The sticky header breaks under overflow-x:hidden — clip is required. */
.page { overflow-x: clip; background: var(--cream); }

/* Anything reachable by fragment has to clear the sticky header, or the
   heading lands underneath it. */
:target, [id="events"], [id="newsletter"] { scroll-margin-top: 92px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--mint); color: var(--on-mint);
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    padding: 14px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type primitives ---------- */
.mono {
    font-family: var(--label); font-weight: var(--label-w);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.mono-xs { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.mono-sm { font-family: var(--label); font-weight: var(--label-w); font-size: 10px;  letter-spacing: .1em; text-transform: uppercase; }
.mono-md { font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

.dsp {
    font-family: var(--display);
    font-weight: 700;
    line-height: .95;
    /* Antonio is condensed; at headline sizes the tighter setting reads as a
       word rather than as spaced capitals. */
    letter-spacing: .005em;
    text-transform: uppercase;
}
.dsp-600 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: .015em; text-transform: uppercase; }

.eyebrow  { font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.band-ink .eyebrow, .panel .eyebrow { color: var(--mint); }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec  { max-width: var(--max); margin: 0 auto; padding: 42px var(--gut) 0; }
.sec-tight { padding-top: 26px; }
.sec-flush { padding-top: 0; }

/* A section that follows a hard-edged band needs more air above it than one
   that follows another cream section. The band ends on a real line, and the
   standard gap under a line reads as a heading shoved up against it — where
   the same gap between two cream sections reads as ordinary rhythm.

   `.sec-flush` is exempt: it exists to butt straight up against what precedes
   it, which is a deliberate join rather than a gap that got lost.

   The homepage is the opposite case and is handled in its own block: its desk
   is the same cream as the page, so that band's padding and this one's do not
   sit either side of an edge — they simply add up. */
.band-ink + .sec:not(.sec-flush),
.detail  + .sec:not(.sec-flush),
.hero    + .sec:not(.sec-flush),
.stage   + .sec:not(.sec-flush) { padding-top: 68px; }
/* The homepage is read as a front page, board by board, so its boards sit
   further apart than the working pages' sections do. */
[data-page="home"] { --home-gap: 88px; }
[data-page="home"] .sec:not(.sec-flush) { padding-top: var(--home-gap); }
[data-page="home"] .stage + .sec:not(.sec-flush) { padding-top: 80px; }

/* ---- the light band ----
   The middle of the homepage runs light: Events, Coverage, Guides and the
   partner split, the boards a reader uses and reads rather than watches. The
   desk and the livestreams above it stay dark, and so does the newsletter
   band the light one closes onto.
   The band takes the light theme's tokens (the same rule sets both), so every
   component inside renders in its light dress without a second set of rules.
   Its colour is set here, on the band, so text inside inherits dark ink
   rather than the page's light text. On the light theme the band steps one
   shade deeper than the page so it still reads as a band. */
.band-light { background: var(--cream); color: var(--text); }
:root[data-theme="light"] .band-light { background: var(--surface-hi); }
[data-page="home"] .band-light { margin-top: var(--home-gap); padding: 76px 0 84px; }
[data-page="home"] .band-light > .sec:first-child { padding-top: 0; }
/* The dark newsletter band starts where the light band ends, edge to edge, so
   the change of ground is the break between them. */
[data-page="home"] .band-light + .nlx-band { margin-top: 0; }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink a { color: var(--on-ink); }

.sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; padding-bottom: 20px; flex-wrap: wrap;
}
/* Antonio's letter-spacing is set for small caps. At display size the same
   value reads loose, so the big end of the scale tracks at nearly zero — the
   headline pops because it is large and tight, not because it is loud. */
.sec-head h2 { font-family: var(--display); font-weight: 700; font-size: 62px; line-height: .93; letter-spacing: 0; text-transform: uppercase; }
.sec-head .more {
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--link); white-space: nowrap;
}
.sec-head .more:hover { text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--label); font-size: 11.5px; letter-spacing: .085em; text-transform: uppercase;
    font-weight: var(--label-w-strong); padding: 14px 22px; border-radius: var(--r-sm);
    white-space: nowrap; cursor: pointer; border: 0;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn-mint    { background: var(--mint); color: var(--on-mint); }
.btn-mint:hover { background: #34c789; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--link); color: var(--link); }
.band-ink .btn-outline, .panel .btn-outline { color: var(--on-ink); border-color: var(--ink-border); }
.band-ink .btn-outline:hover, .panel .btn-outline:hover { border-color: var(--mint); color: var(--mint); }
/* Mint outline: the quieter call to action on ink, where a solid mint block
   would outweigh the media above it. Fills on hover. */
.btn-outline-mint { background: transparent; color: var(--mint); border: 1px solid var(--mint); }
.btn-outline-mint:hover { background: var(--mint); color: var(--on-mint); }
/* The + on an "add" button. Sized up a little against the mono caps, which
   are small, and given its own space so it reads as a mark not a character. */
.btn .plus { font-size: 1.24em; line-height: 0; margin-right: .55em; font-weight: 500; }
.btn-sm { font-size: 10.5px; padding: 12px 17px; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--ink); border-bottom: 1px solid var(--ink-hair);
}
/* The bar is solid ink at every scroll position. It used to go translucent
   with the page blurred behind it once you scrolled, which looked right over
   a dark hero and read as muddy grey over everything else — and it made the
   bar's colour depend on whatever happened to be passing under it. A mark
   should not change colour as you scroll past it. */
.hdr-inner {
    /* --mark is the wordmark's line-box height. The logo is set to the cap
       height inside it, so the artwork lands where the letters used to. */
    --mark: 46px;
    max-width: var(--max); margin: 0 auto; padding: 14px var(--gut);
    display: flex; align-items: center; gap: 22px;
}
/* The mark. In the site header it is the supplied artwork — Antonio's caps are
   .87em of the line box, so sizing the image to that keeps the bar exactly as
   tall as it was and the logo optically the same size as the type it replaced.
   The white cut, because that bar is ink; assets/logo-on-cream.png is the one
   for a light ground.

   The type treatment stays on the class, because the console's sidebar still
   sets the mark in type rather than in artwork. It costs nothing in the header
   — there is no text node in there to style — and without it the console's
   wordmark falls back to body copy in mixed case. */
.wordmark {
    display: flex; align-items: center; flex: none;
    color: var(--on-ink); line-height: 1;
    font-family: var(--display); font-weight: 700;
    letter-spacing: .015em; text-transform: uppercase; white-space: nowrap;
}
.wordmark span { color: var(--mint); }
.wordmark img { height: calc(var(--mark) * .87); width: auto; }

/* PARKED. The mark is artwork now and carries its own LIVE box, so the pill
   beside it would be the same word twice; the header no longer renders one.
   Kept, not deleted, the same way the Partner dropdown is: put the two spans
   back in partials/header.html and it returns exactly as it was.

   Antonio's cap height is .87em, and the wordmark's line box is taller than
   its letters. Sizing the pill to the cap height — rather than to the line box
   — is what makes the two read as the same object.
   `align-items: center` centres the two boxes, but the caps do not sit in the
   middle of their own line box: Antonio leaves more room above them than
   below, so centred boxes leave the pill riding ~.07em high. The translate
   puts it back on the letters. Both numbers are in em of --mark, so the pill
   follows the wordmark at every size. */
.live-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--ink-border); border-radius: var(--r-sm);
    height: calc(var(--mark) * .87); padding: 0 10px; margin-left: -8px;
    transform: translateY(calc(var(--mark) * .07));
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mint); white-space: nowrap;
}
.live-pill .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
    animation: livePulse 1.4s ease-in-out infinite;
}
/* The pill always reads LIVE. It sits with the wordmark as part of the mark,
   so it carries no role and makes no claim about what is on air; the schedule
   panel on the livestreams page is where that is stated. */
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.hdr-spacer { flex: 1; }

/* The nav is the one set of labels every page shows, so it is the one that
   has to be unambiguous: bold caps, a size up from the kickers, and tracked
   in rather than out — Inter's bold caps already separate themselves, and
   .1em on top of that spreads four short words across the whole bar. */
.hdr-nav {
    display: flex; align-items: center; gap: 26px;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 12px; letter-spacing: .075em; text-transform: uppercase;
}
.hdr-nav a { color: var(--on-ink); white-space: nowrap; }
/* A section link gets a target the full height of the bar, not just the
   height of the letters — 12px caps are a small thing to hit. The underline
   marks the current section: colour alone was carrying it, and mint on ink
   at 12px is a difference some readers do not see at all. */
.hdr-nav > a:not(.btn) {
    position: relative; display: inline-flex; align-items: center;
    padding: 12px 0; color: var(--on-ink-body-2);
    transition: color .14s ease;
}
.hdr-nav > a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
    background: var(--mint); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .16s ease;
}
.hdr-nav > a:not(.btn):hover { color: var(--on-ink); }
.hdr-nav > a:not(.btn):hover::after { transform: scaleX(1); }
.hdr-nav > a[aria-current="page"] { color: var(--mint); }
.hdr-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.hdr-nav .btn { font-size: 11px; padding: 10px 15px; }
.hdr-nav .btn-ghost {
    border: 1px solid var(--on-ink); color: var(--on-ink);
    display: inline-flex; align-items: center; padding: 9px 14px;
    border-radius: var(--r-sm); font-weight: 600;
}
.hdr-nav .btn-ghost:hover { background: var(--on-ink); color: var(--ink); }

.nav-toggle {
    display: none;
    background: transparent; border: 1px solid var(--ink-border); color: var(--on-ink);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    padding: 11px 14px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px;
}

/* ---------- media strip ----------
   The band under the header on every event page. A sports front page runs a
   scoreboard there; this site runs its own footage — livestreams and the video
   tagged to a coverage subject — with the headline beside each frame.

   It is not on the front page any more. The front page runs the WATCH board,
   and a scoreboard cell and a portrait frame of the same broadcast, eight
   hundred pixels apart, is the same rail twice — the first one costing the
   page its whole first inch before the lead story starts. An event page has no
   WATCH board, so there the strip is the only thing saying we film this town,
   and it is what gets somebody from one night's listing back into the video.

   It runs light, under the ink header, the way a scoreboard rail does: the
   dark bar above it is the mark and the nav, and this is the first row of the
   page's own content.

   It scrolls sideways and never wraps. The strip is a glance, not a list: the
   lists it draws from have pages of their own, and the arrows are the only
   chrome it gets. Rules in docs/site-logic.md, RULE strip-*.

   It sits below the sticky header rather than above it, so the wordmark stays
   the first thing on the page, and it scrolls away with the content — it is
   what is on, not navigation. */
.mstrip {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--card-border);
}
.mstrip-inner {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
    display: flex; align-items: stretch;
}

/* The fixed cell on the left, the way a scoreboard names its league. It never
   scrolls with the cards — it is the label for the whole band. */
.mstrip-label {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    padding-right: 18px; border-right: 1px solid var(--card-border);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--link); white-space: nowrap;
}
/* Static. The header's LIVE pill is already pulsing eight pixels above this
   one, and two of them in the same hundred pixels reads as a fault rather
   than as a signal. The dot that pulses in this band is the one on a card
   that is actually on air. */
.mstrip-label .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--link);
}

.mstrip-track {
    display: flex; align-items: stretch; flex: 1; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    /* The arrows supply their own easing (script.js), so the track itself
       stays on the browser's native scroll — a drag or a trackpad flick is
       never fighting a CSS animation. */
    scroll-snap-type: x proximity;
    /* The scrollbar is noise on a 100px-tall band; the arrows and the swipe
       both do the job, and the cards keep their own focus ring. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.mstrip-track::-webkit-scrollbar { display: none; }

/* One card: the meta line on top, then the frame with its headline beside it.
   Hairline between cards, no card border — the divider is the whole cell. */
.mcard {
    flex: none; width: 272px; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 14px 18px; border-right: 1px solid var(--card-border);
    color: var(--text);
    transition: background-color .14s ease;
}
.mcard:hover { background: var(--surface-hi); }

.mcard-k {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On air is the link green, booked is amber, already published is quiet. The
   three states the strip has to tell apart, in the order somebody cares about
   them. Mint is for ink; on cream it fails as text, so this band uses --link. */
.mcard.is-live .mcard-k { color: var(--link); }
.mcard.is-soon .mcard-k { color: var(--amber); }
.mcard-k .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--link); flex: none;
    animation: livePulse 1.4s ease-in-out infinite;
}

.mcard-row { display: flex; align-items: center; gap: 12px; }
/* Square. Everything else on the site is rounded; a video frame is not, and
   this band is nothing but video frames — rounding them made the row read as
   a shelf of app icons rather than as a strip of footage. */
.mcard-thumb {
    position: relative; flex: none; width: 88px; height: 50px;
    border-radius: 0; overflow: hidden;
    background: var(--media-bg); border: 1px solid var(--line);
}
.mcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The play mark. Round, like the live dot and nothing else on the site, and
   only on something you can actually watch right now. It sits on the
   photograph, not on the page, so it stays dark whatever the band is. */
.mcard-play {
    position: absolute; left: 50%; top: 50%; width: 21px; height: 21px;
    margin: -10.5px 0 0 -10.5px; border-radius: 50%;
    background: rgba(11, 12, 11, .58); border: 1px solid rgba(239, 237, 231, .55);
}
.mcard-play::after {
    content: ""; position: absolute; left: 7px; top: 5px;
    border-style: solid; border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent var(--on-ink);
}
.mcard-t {
    font-family: var(--body); font-weight: 600; font-size: 13.5px; line-height: 1.28;
    color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard:hover .mcard-t { color: var(--link); }

.mstrip-nav {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding-left: 16px; border-left: 1px solid var(--card-border);
}

/* ---------- spotlight cards ----------
   The desk's own picks: on the events page above the calendar, and on the
   homepage in place of the calendar. One component, two boards.

   The card is horizontal — a rectangular photograph on the left, the whole
   argument for the event on the right: when it is, what it is called, which
   room, a line about it, and a control. It is the only card on the site that
   carries all five, which is what makes a spotlight read as a spotlight
   rather than as a bigger calendar row.

   Two layouts, one card:

     .spot-list          two up, for the homepage grid
     .spot-list.is-rows  one per row at full width, for the events page,
                         where the picks have to visibly outweigh the
                         calendar underneath them

   Both stack to a single column with the picture on top on a phone. The media
   column is a percentage, not a fixed width, so the same card works at half
   the grid and at the full width of the page. */
.spot-list {
    display: grid; gap: 20px;
    /* Two up on a desktop, one up under ~1000px. auto-fill rather than
       auto-fit: with three picks, auto-fit would stretch the third across the
       whole row and make it look like the important one. */
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
}
/* The events page runs them as full-width rows. A pick that is the width of
   the board below it is obviously above the board below it; two half-width
   cards are just the first two rows of the same list in a different shape. */
.spot-list.is-rows { grid-template-columns: 1fr; gap: 16px; }
/* A week the desk has spotlit nothing is a week with no spotlight band — not
   a heading over "0 events". Decided by what is in the band, so it holds for
   the rows the build shipped and for the ones script.js puts there later. */
[data-spotlight-block]:not(:has(.spot-card)) { display: none; }

.spot-card {
    display: grid; grid-template-columns: minmax(160px, 41%) 1fr;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text);
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.spot-card:hover {
    border-color: var(--link); background: var(--surface-lift);
    transform: translateY(-2px);
    box-shadow: var(--lift);
}
@media (prefers-reduced-motion: reduce) { .spot-card:hover { transform: none; } }

/* The picture fills the whole height of the card, however far the writing
   beside it runs. It is pinned inside (position: absolute), so a portrait
   photograph cannot make one card in a row taller than the others; the frame
   takes its height from the row and only sets a floor of its own. A fixed
   aspect ratio here left a band of empty card under the photograph. When the
   card stacks on a phone, the frame goes back to 16:9. */
.spot-media {
    position: relative; display: block; overflow: hidden;
    background: var(--media-bg); min-height: 190px;
}
.spot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The calendar tile. It sits on the photograph rather than in the body,
   because the date is the one thing somebody scanning an events board is
   looking for and the picture is the biggest target on the card. Ink ground,
   so it holds on any photograph without a scrim behind the whole image —
   amber for the day, which is the colour dates already wear on the board.

   Tabular figures: a column of these runs down the left edge of the rows on
   the events page and a proportional 1 would break the alignment. */
.spot-date {
    position: absolute; left: 14px; top: 14px; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 54px; padding: 8px 9px 9px;
    background: var(--ink); color: var(--on-ink); border-radius: 12px;
    font-variant-numeric: tabular-nums;
}
.spot-date .m {
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink);
}
.spot-date .d {
    font-family: var(--display); font-weight: 700; font-size: 27px; line-height: .92;
    letter-spacing: .01em;
}

.spot-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px 22px 18px; min-width: 0;
}
.spot-k {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--amber); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.spot-k .evt-star { font-size: 12px; line-height: 1; color: var(--amber-soft); }
.spot-t {
    font-family: var(--display); font-weight: 700; font-size: 34px;
    line-height: .98; letter-spacing: .006em; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-sub {
    font-size: 14.5px; color: var(--text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The line about the event. Absent when the record has none, rather than
   filled with a sentence assembled out of the fields printed above it. */
.spot-d {
    font-size: 15px; line-height: 1.6; color: var(--text-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The foot is pinned to the bottom, so the tag row lines up across a row of
   cards whose titles wrapped to different depths. */
/* It wraps rather than overlaps: at a narrow card the tags keep their width
   and the call to action drops to its own line, where it used to slide over
   the price pill. */
.spot-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 12px;
    flex-wrap: wrap;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--row-div);
}
.spot-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spot-cat, .spot-price {
    font-family: var(--label); font-weight: var(--label-w);
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.spot-cat  { background: var(--chip-on); color: var(--text-2); }
.spot-price { background: var(--mint-tint-hi); color: var(--link); }
/* The card is one link, so this is a span, not a second target. It is drawn
   as a control anyway: at the bottom of a card carrying five other lines, a
   10px text signpost is the thing the eye loses. Fills on hover with the
   card, so the whole tile reads as one object being pressed. */
.spot-cta {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--link); border: 1px solid var(--link); border-radius: var(--r-sm);
    padding: 9px 14px; white-space: nowrap;
    transition: background-color .14s ease, color .14s ease;
}
.spot-card:hover .spot-cta { background: var(--link); color: var(--surface); }

/* The homepage's picks sit two to a row under a section head and a week list,
   so they run shorter than the events page's full-width rows: a smaller
   title, a tighter body, and the call to action as a plain link, which also
   gives the tags the room they need. */
.spot-list:not(.is-rows) .spot-media { min-height: 140px; }
.spot-list:not(.is-rows) .spot-body { padding: 14px 18px 12px; gap: 4px; }
.spot-list:not(.is-rows) .spot-t { font-size: 25px; }
.spot-list:not(.is-rows) .spot-sub { font-size: 13.5px; }
.spot-list:not(.is-rows) .spot-d { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 1; }
.spot-list:not(.is-rows) .spot-foot { padding-top: 10px; }
.spot-list:not(.is-rows) .spot-cta { border: 0; padding: 4px 0; }
.spot-list:not(.is-rows) .spot-card:hover .spot-cta { background: transparent; color: var(--link); text-decoration: underline; }

/* ---- the events page's full-width row ----
   Same card, more of it: the picture gets a third of a much wider card, so it
   is a photograph rather than a thumbnail, and the type steps up with it. */
.spot-list.is-rows .spot-card { grid-template-columns: minmax(240px, 34%) 1fr; }
.spot-list.is-rows .spot-body { padding: 24px 26px 22px; gap: 9px; }
.spot-list.is-rows .spot-t { font-size: 42px; -webkit-line-clamp: 1; }
.spot-list.is-rows .spot-sub { font-size: 15.5px; }
.spot-list.is-rows .spot-d { font-size: 15.5px; -webkit-line-clamp: 2; max-width: 62ch; }

@media (max-width: 1000px) {
    .spot-list.is-rows .spot-t { font-size: 34px; }
    .spot-list.is-rows .spot-card { grid-template-columns: minmax(200px, 38%) 1fr; }
}

@media (max-width: 700px) {
    .spot-list, .spot-list.is-rows { grid-template-columns: 1fr; gap: 16px; }
    /* Below the fold of a phone the side-by-side card gets a 40%-wide picture
       and a title with nowhere to go. Stack it, picture on top. */
    .spot-card,
    .spot-list.is-rows .spot-card { grid-template-columns: 1fr; }
    .spot-media { aspect-ratio: 16 / 9; min-height: 0; }
    .spot-t, .spot-list.is-rows .spot-t { font-size: 27px; -webkit-line-clamp: 2; }
    .spot-body, .spot-list.is-rows .spot-body { padding: 15px 17px 15px; gap: 7px; }
    /* The foot stops being a row: a bordered control and two chips do not fit
       on one line at 320px without the control shrinking out of reach. */
    .spot-foot { flex-direction: column; align-items: stretch; gap: 12px; }
    .spot-cta { justify-content: center; min-height: 44px; }
}

/* ---------- the sideways rail ----------
   Still used by the media strip's arrows and by any board that wants a track
   rather than a grid. The spotlight band no longer does; script.js wires
   whatever carries [data-strip-track]. */
.strip-rail { display: flex; align-items: stretch; gap: 14px; }
.strip-track {
    display: flex; align-items: stretch; flex: 1; min-width: 0; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-nav { display: flex; align-items: center; gap: 8px; flex: none; }

/* A section head that sits tight above the thing it names, and stays small:
   the cards under it carry their own titles at card size, and a 60px display
   heading over a row of 26px ones just competes with them. Antonio takes more
   tracking as it comes down — see the type scale in design-system.md. */
.sec-head-tight { padding-bottom: 14px; align-items: baseline; }
/* Specific enough to beat `.sec-head h2`, which is the 62px section size. */
.h-28, .sec-head h2.h-28 {
    font-family: var(--display); font-weight: 600; font-size: 20px;
    line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}
.mstrip-arrow {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    background: transparent; border: 1px solid var(--line); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 0; padding: 0 0 2px;
    transition: border-color .14s ease, color .14s ease, opacity .14s ease;
}
.mstrip-arrow:hover { border-color: var(--link); color: var(--link); }
.mstrip-arrow[disabled] { opacity: .3; cursor: default; }
.mstrip-arrow[disabled]:hover { border-color: var(--line); color: var(--text); }

/* =========================================================
   The watch page (livestreams.html)

   Laid out to YouTube's watch-page proportions, deliberately: a
   reader arriving here already knows this shape, and the content is
   the same shape — one thing playing, a list of what is next beside
   it. Borrowed exactly:

     · the rail is 402px, fixed, and does not flex
     · 24px between the two columns
     · the player is 16/9 and pins to the top of the wide column
     · title, byline row and description stack *under* the player,
       never beside it
     · rail rows are a 168x94 thumbnail with two lines of title
     · the whole thing collapses to one column at 1000px, where the
       player goes edge to edge

   The colours and the type are ours. It is the geometry that is
   borrowed, because the geometry is what makes the page legible.
   ========================================================= */
.watch {
    max-width: var(--max); margin: 0 auto;
    padding: 26px var(--gut) 0;
}
.watch-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 402px; gap: 24px;
    align-items: start;
}
.watch-main { min-width: 0; }

/* ---- the player ---- */
.player {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 9; border-radius: 12px; background: var(--ink);
}
.player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 78px; height: 78px; border-radius: 50%;
    background: rgba(11, 12, 11, .6); border: 1px solid rgba(239, 237, 231, .45);
}
.player-play::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-36%, -50%);
    border-left: 22px solid var(--on-ink);
    border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
/* Both overlays sit in the corners the player's own chrome would use. */
.player-flag, .player-badge {
    position: absolute; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 6px;
}
.player-flag { left: 12px; top: 12px; background: #C4302B; color: #fff; }
.player-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livePulse 1.4s ease-in-out infinite; }
.player-badge { right: 12px; bottom: 12px; background: rgba(11, 12, 11, .82); color: var(--on-ink); }

/* ---- under the player ---- */
.watch-title {
    font-family: var(--display); font-weight: 700; font-size: 40px;
    line-height: 1.0; letter-spacing: .005em; text-transform: uppercase;
    padding: 18px 0 0;
}
.watch-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 12px 0 16px;
}
.watch-kicker {
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.watch-kicker.is-live { color: var(--link); }
.watch-kicker.is-soon { color: var(--amber); }
.watch-actions { display: flex; align-items: center; gap: 10px; }

/* YouTube's description block: a filled panel rather than loose body copy
   under the title, so the page has an obvious end to its head. */
.watch-desc {
    background: var(--surface-hi); border-radius: 12px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 7px;
}
.watch-desc-k {
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.watch-desc p { font-size: 15.5px; line-height: 1.65; color: var(--text-body); }

/* ---- the rail ---- */
.watch-side { min-width: 0; display: flex; flex-direction: column; }
.watch-side-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 0 0 12px;
}
/* PARKED with the archive it used to head. The second block in that rail is a
   board of its own on the cream under the dark room now. */
.watch-side-head-2 { padding-top: 26px; margin-top: 22px; border-top: 1px solid var(--line); }
.watch-side-h {
    font-family: var(--display); font-weight: 600; font-size: 20px;
    line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}
.watch-side-when {
    font-family: var(--label); font-weight: var(--label-w);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.up-list { display: flex; flex-direction: column; gap: 8px; }

/* One rail row. The thumbnail is 168x94 — YouTube's — and the title gets two
   lines, which is what a 402px column can carry without the row growing
   taller than the picture beside it. */
.up-row { display: flex; flex-direction: column; }
.up-link {
    display: grid; grid-template-columns: 168px 1fr; gap: 12px;
    padding: 6px; border-radius: 12px; color: var(--text);
    transition: background-color .14s ease;
}
.up-link:hover { background: var(--surface-hi); }
.up-thumb {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 9; border-radius: 8px; background: var(--media-bg);
}
.up-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.up-len, .up-live {
    position: absolute; right: 5px; bottom: 5px;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 9.5px; letter-spacing: .06em;
    padding: 2px 5px; border-radius: 4px;
    background: rgba(11, 12, 11, .84); color: var(--on-ink);
    font-variant-numeric: tabular-nums;
}
.up-live {
    left: 5px; right: auto; display: inline-flex; align-items: center; gap: 4px;
    background: #C4302B; color: #fff; text-transform: uppercase;
}
.up-live .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.up-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
.up-t {
    font-size: 14.5px; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.up-k {
    font-family: var(--label); font-weight: var(--label-w);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* PARKED. The reminder sat under its row rather than beside it: at 402px
   there is no room for a control in the same line as a 168px picture and a
   title. No page renders it now — five of them down one rail, plus the button
   beside the player, was six controls pointing at one form, and a reader
   counts six asks rather than one offer. The ask is made once under the
   player and again in full at the foot of the page. Kept so that putting the
   link back in "ls-upcoming" brings it back exactly as it was. */
.up-remind {
    align-self: flex-start; margin: 2px 0 4px 186px;
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--link);
}
.up-remind:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    /* The rail is fixed at 402px by design, so the breakpoint is where the
       wide column would drop under about 560px — not a fraction of it. */
    .watch-grid { grid-template-columns: minmax(0, 1fr) 340px; }
    .up-link { grid-template-columns: 140px 1fr; }
    .up-remind { margin-left: 158px; }
}
@media (max-width: 1000px) {
    .watch { padding-inline: 0; }
    .watch-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Edge to edge, the way a phone plays video. */
    .player { border-radius: 0; }
    .watch-main > :not(.player), .watch-side { padding-inline: var(--gut); }
    .watch-title { font-size: 32px; }
}

/* ---------- the section call to action ----------
   One control, centred, closing a section that has more behind it than it
   showed. It exists because a 12px "Full calendar →" in the section head is
   the right size for someone already looking for it and the wrong size for
   someone who has just finished reading the thing above and is deciding
   whether to keep going. */
.sec-cta {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding-top: 26px;
}
.btn-wide { min-width: 290px; padding: 16px 30px; }
.sec-cta-alt {
    font-family: var(--label); font-weight: var(--label-w);
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-3);
}
.sec-cta-alt:hover { color: var(--link); }

/* ---------- latest livestream / latest guide ----------
   PARKED with the "home-latest" region in build.mjs: no page renders the row
   now. The index used to end on it, and WATCH and the guides four-up both do
   its job at size. Kept — the rules cost nothing while nothing calls them.
   The homepage's third band: the newest thing we shot beside the newest thing
   we wrote. Two columns of exactly one card each — the point is "here is the
   current one", and a grid of four would have said "here is the archive",
   which is what the two section links go to. */
.latest-cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
}
.latest-col { display: flex; flex-direction: column; min-width: 0; }
.latest-col .sec-head { padding-bottom: 14px; }

.latest-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text);
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.latest-card:hover {
    border-color: var(--link); background: var(--surface-lift);
    transform: translateY(-2px);
    box-shadow: var(--lift);
}
@media (prefers-reduced-motion: reduce) { .latest-card:hover { transform: none; } }
.latest-media {
    position: relative; display: block; flex: none;
    aspect-ratio: 16 / 9; overflow: hidden; background: var(--media-bg);
}
.latest-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The play mark says "this one is video" without a word. Only the livestream
   column renders it. */
.latest-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62px; height: 62px; border-radius: 50%;
    background: rgba(11, 12, 11, .58); border: 1px solid rgba(239, 237, 231, .5);
    transition: background-color .14s ease;
}
.latest-play::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-38%, -50%);
    border-left: 17px solid var(--on-ink);
    border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.latest-card:hover .latest-play { background: rgba(11, 12, 11, .78); }
.latest-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.latest-k {
    font-family: var(--label); font-weight: var(--label-w-strong);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--link);
}
.latest-t {
    font-family: var(--display); font-weight: 700; font-size: 32px;
    line-height: 1.0; letter-spacing: .008em; text-transform: uppercase;
}
.latest-d {
    font-size: 15px; line-height: 1.62; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 900px) {
    .latest-cols { grid-template-columns: 1fr; gap: 34px; }
    .latest-t { font-size: 28px; }
}

/* ---------- footer ---------- */
.site-footer {
    max-width: var(--max); margin: 0 auto;
    padding: 52px var(--gut) 56px;
    display: flex; flex-wrap: wrap; gap: 34px;
    justify-content: space-between; align-items: flex-start;
}
.foot-brand { display: flex; flex-direction: column; gap: 12px; max-width: 44ch; }
.foot-mark {
    font-family: var(--display); font-weight: 700; font-size: 24px;
    letter-spacing: .015em; text-transform: uppercase; line-height: 1;
}
.foot-mark span { color: var(--link); }
.foot-brand p { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.foot-cols {
    display: flex; gap: 48px; flex-wrap: wrap;
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h2 { color: var(--muted); font: inherit; font-weight: 400; }
.foot-col a { color: var(--text); }
.foot-col a:hover { color: var(--link); }
.foot-legal {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* The theme switch sits above the legal line, at the right of the footer. */
.foot-end { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.theme-switch { display: flex; align-items: center; gap: 10px; }
.theme-switch-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 760px) {
    .foot-end { align-items: flex-start; }
}

/* ---------- page hero (ink) ---------- */
.hero {
    background: var(--ink); color: var(--on-ink);
    padding: 38px 0 40px;
}
/* The pitch pages open with more air above the headline — the page is making
   an argument, not listing rows, so it can afford the room. */
.hero-tall { padding: 76px 0 72px; }
/* A hero that runs straight into a dark band beneath it. */
.hero-flush { padding-bottom: 26px; }
.hero-inner {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
}
.hero-copy { display: flex; flex-direction: column; gap: 12px; }
.hero-copy h1 {
    font-family: var(--display); font-weight: 700; font-size: 76px;
    line-height: .93; letter-spacing: .005em; text-transform: uppercase;
}
.hero-copy p { font-size: 16.5px; line-height: 1.65; color: var(--on-ink-body); max-width: 58ch; }

/* breadcrumb on ink */
.crumb {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink-dim); padding-bottom: 20px;
}
.crumb a { color: var(--on-ink-dim); white-space: nowrap; }
.crumb a:hover { color: var(--mint); }
.crumb .now { color: var(--mint); white-space: nowrap; }

/* ---------- dark panel ---------- */
.panel {
    background: var(--ink-panel); border: 1px solid var(--ink-hair);
    border-radius: var(--r); color: var(--on-ink);
    display: flex; flex-direction: column;
}
.panel-head {
    padding: 18px 20px; border-bottom: 1px solid var(--ink-hair);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Antonio leaves more room above its caps than below, so a line box centred in
   the head puts the letters visibly low in it — the same .07em the live pill
   had to correct for. Centring the boxes is not enough; the letters are what
   the eye centres on, so they take the nudge and the icon beside them takes it
   back, which leaves the icon where the boxes already had it: dead centre. */
.panel-head h2, .panel-head h3 {
    font-family: var(--display); font-weight: 600; font-size: 27px;
    letter-spacing: .025em; text-transform: uppercase; line-height: 1;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(-.07em);
}
.panel-head h2 > svg, .panel-head h3 > svg { transform: translateY(.07em); }
.panel-head .more {
    color: var(--mint); font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.panel-foot {
    padding: 16px 20px; color: var(--mint);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.panel-foot:hover { text-decoration: underline; }

/* media placeholder frames (ink) */
.frame {
    position: relative; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r); overflow: hidden;
    background: repeating-linear-gradient(115deg, #1A1D18 0 14px, #15180F 14px 28px);
    border: 1px solid var(--ink-frame);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-play {
    width: 66px; height: 66px; border-radius: 50%; background: var(--mint); color: var(--on-mint);
    display: flex; align-items: center; justify-content: center; font-size: 23px;
    padding-left: 5px; position: relative; z-index: 1;
}
.frame-badge {
    position: absolute; bottom: 12px; right: 12px; background: var(--ink);
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--on-ink); padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap;
}
.frame-live {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 8px; background: var(--ink);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mint); padding: 7px 11px; border-radius: var(--r-sm); white-space: nowrap;
}
.frame-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: livePulse 1.4s ease-in-out infinite; }
/* The flag ships hidden and is only shown when the schedule says live; its
   own display rule must not override the attribute. */
.frame-live[hidden] { display: none; }
.frame-thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 10; border-radius: var(--r-sm);
    background: repeating-linear-gradient(115deg, #1A1D18 0 10px, #15180F 10px 20px);
    border: 1px solid var(--ink-frame); overflow: hidden;
    font-family: var(--label); font-weight: var(--label-w); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink-dim); flex: none;
}
.frame-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the desk: open story left, feed right ----------
   Two columns, about 58/42. The feed is the narrower one, because a list
   needs less room than a picture. Both halves are modules — the feed panel and the
   story panel each stand alone and can be moved, dropped or reused on
   another page (livestreams uses the same pair). */
.stage { background: var(--ink); color: var(--on-ink); padding: 28px 0 38px; }
.stage-grid {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    gap: 20px; align-items: stretch;
}
.stage-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* The partner ask under the feed: Keys to Nashville. It takes the height the
   feed does not use and centres its content in it, so the column has no dead
   space. Two actions: the product itself, and the general partner page. */
.keys-card {
    flex: 1; min-height: 0;
    background: var(--ink-panel); border: 1px solid var(--ink-hair); border-radius: var(--r);
    padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.keys-k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--link);
}
.keys-card .t {
    font-family: var(--display); font-weight: 700; font-size: 40px;
    line-height: 1; letter-spacing: .005em; text-transform: uppercase; color: var(--on-ink);
}
/* Antonio is condensed and the emoji is square, so it sets a step down and
   holds its own space rather than crowding the first word. */
.keys-card .t .emo { font-size: .78em; margin-right: .28em; }
.keys-card .d { font-size: 14.5px; line-height: 1.55; color: var(--on-ink-body); max-width: 46ch; }
.keys-card-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.keys-card-row .btn { min-height: 44px; padding: 12px 18px; }

/* The story panel. The media box keeps one shape whatever is in it, so
   switching stories does not move the page: a wide frame fills it, a
   vertical reel stands in it. */
.stage-main {
    min-width: 0; scroll-margin-top: 84px;
    background: var(--ink-panel); border: 1px solid var(--ink-hair); border-radius: var(--r);
    padding: 24px; display: flex; flex-direction: column; gap: 22px;
}
/* The media box is an <a> whenever the panel is previewing a page rather than
   playing a video, so the same rules have to hold for both elements. */
.stage-media {
    aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
    display: flex; align-items: stretch; justify-content: center;
}
a.stage-media { cursor: pointer; }
a.stage-media:hover .frame { border-color: var(--ink-border); }
.stage-media .frame { width: 100%; }
.stage-media .frame.is-vertical { width: auto; aspect-ratio: 9 / 16; flex: none; }
/* Pinned, so a photo's own proportions can never stretch the box — the frame
   sets the shape and the media fills it. */
.stage-media .frame > img, .stage-media .frame > iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.stage-kicker {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-ink-mute);
}
.stage-kicker.is-live { color: var(--mint); }
.stage-kicker.is-soon { color: var(--amber-ink); }
/* Everything under the media is one fixed-height block: room for the kicker,
   a two-line title, a three-line blurb, three links and the button. Longer
   text is clamped. The button is pinned to the bottom, so whatever room a
   short title leaves over sits above the button rather than under the blurb,
   and the band never changes height when a different item is opened. */
/* A floor, not a ceiling. Everything inside is clamped — the title to two
   lines, the blurb to three, the tagged links to their own max-height — so the
   band is the same height whichever item is open, which is what RULE
   rail-fixed-height is actually asking for. It used to be a fixed height with
   overflow hidden, and the first time the type scale went up the button at
   the bottom was quietly sliced in half. A minimum cannot do that. */
.stage-body { display: flex; flex-direction: column; gap: 22px; min-height: 420px; }
.stage-copy { display: flex; flex-direction: column; gap: 14px; }
/* The open story's headline. It is an h2, not an h1: it changes with every
   click and every build, and the page's own h1 has to stay put. */
/* `-webkit-line-clamp` sizes its box from the line-height, so a leading under
   1 gives the box less room than the letters need and `overflow: hidden`
   slices the baseline off the last line. Antonio is condensed enough that 1.02
   still reads tight, and nothing is cut. Any clamped display type on this site
   needs a leading of at least 1 for the same reason. */
.stage-copy h1, .stage-copy .stage-title {
    font-family: var(--display); font-weight: 700; font-size: 50px;
    line-height: 1.02; letter-spacing: 0; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stage-copy p {
    font-size: 15.5px; line-height: 1.66; color: var(--on-ink-body); max-width: 60ch;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.stage-links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex: 1; min-height: 0; }
.stage-links > .btn { margin-top: auto; }
.stage-links > div { width: 100%; }
.stage-links-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-ink-dim); padding-bottom: 11px;
}
/* Two single-line links. Longer titles trim rather than wrap. */
.stage-links-list { max-height: 108px; overflow: hidden; }
.tag-link {
    display: grid; grid-template-columns: 14px 92px minmax(0, 1fr); gap: 12px;
    align-items: baseline; padding: 13px 0; border-top: 1px solid var(--ink-hair);
    color: var(--on-ink);
}
.tag-link:hover { color: var(--mint); }
.tag-link .bullet { color: var(--mint); font-size: 13px; line-height: 1.4; }
.tag-link .kind {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--amber-ink); white-space: nowrap;
}
.tag-link .t { font-size: 15.5px; font-weight: 700; line-height: 1.34; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The feed panel. It fills the column, so its foot sits at the bottom
   whatever the story panel's height is. */
/* The feed is exactly as tall as its rows: stretching it would open a gap
   between the last row and "See all coverage". Whatever height the column has
   left over goes to the module under it instead. */
.stage-rail { flex: 0 0 auto; min-width: 0; }
/* On livestreams the feed is the only module in the column, so there is
   nothing to hand the slack to and it fills the column itself. */
.stage-side > .stage-rail:last-child { flex: 1; }
.stage-side > .stage-rail:last-child > [data-schedule] { flex: 1; }
/* Today's date and the time in Nashville, as a small tag at the right of the
   feed's head. The date ships in the page; the time is added by script.js and
   turns over on the minute. Tabular figures, so the tag keeps its width. */
.rail-when {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--on-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
    border: 1px solid var(--ink-border); border-radius: var(--r-sm); padding: 8px 13px;
}
/* The time is the live part, so it wears the live colour. */
.rail-time { display: inline-flex; align-items: center; gap: 8px; color: var(--link); }
.rail-time .sep { color: var(--on-ink-dim); }
.rail-item {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px;
    padding: 14px 20px 14px 17px; border-bottom: 1px solid var(--ink-row);
    /* the open item carries a mint edge — the feed's one moving part */
    border-left: 3px solid transparent; border-right: 0; border-top: 0;
    align-items: center; cursor: pointer; background: var(--ink-panel);
    width: 100%; text-align: left; font: inherit; color: var(--on-ink);
    transition: background-color .14s ease, border-color .14s ease;
}
.rail-item:hover { background: var(--ink-panel-hi); }
.rail-item[aria-selected="true"], .rail-item.is-on {
    background: var(--ink-panel-hi); border-left-color: var(--mint);
}
.rail-item .meta {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink-mute);
}
.rail-item .meta.is-live { color: var(--mint); }
.rail-item .meta.is-soon { color: var(--amber-ink); }
.rail-item .t {
    font-family: var(--body); font-weight: 700; font-size: 17px;
    line-height: 1.3; letter-spacing: -.008em; color: var(--on-ink);
}
.rail-item .body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rail-item .sub { font-size: 13px; color: var(--on-ink-mute); }

/* ---------- events table ---------- */
.board {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden;
}
.board-head {
    display: grid; grid-template-columns: 112px minmax(180px, 1fr) 92px 60px; gap: 14px;
    padding: 13px 22px; border-bottom: 1px solid var(--card-border);
    font-family: var(--label); font-weight: var(--label-w); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.board-head .r { text-align: right; }
.evt-row {
    display: grid; grid-template-columns: 112px minmax(180px, 1fr) 92px 60px; gap: 14px;
    padding: 22px; border-bottom: 1px solid var(--row-div);
    align-items: center; color: var(--text);
}
.evt-row:hover { background: var(--surface-hi); }
/* A spotlit row carries its picture inside the title cell, not in a column of
   its own: a column would push the date, type and entry cells sideways on
   that one row and the board would read as broken rather than as marked. */
.evt-body.is-spot {
    display: grid; grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px; align-items: center;
}
.evt-lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evt-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
    border-radius: var(--r-sm); overflow: hidden;
    background: var(--media-bg); border: 1px solid var(--line);
}
.evt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evt-date {
    font-family: var(--label); font-weight: var(--label-w); font-size: 14px; color: var(--amber); white-space: nowrap;
    /* The date column read straight down the board when it was a mono. */
    font-variant-numeric: tabular-nums;
}
.evt-when { display: flex; flex-direction: column; gap: 1px; }
.evt-when .time {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.evt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evt-title {
    font-family: var(--display); font-weight: 600; font-size: 33px;
    line-height: 1.02; letter-spacing: .008em; text-transform: uppercase;
}
/* Sits inside an Antonio title, so it is sized in em to track the headline.
   Faded amber rather than the link green — a marker, not a call to action. */
.evt-star {
    color: var(--amber-soft);
    font-size: .66em;
    vertical-align: .12em;
    letter-spacing: 0;
}
.evt-sub { font-size: 14.5px; color: var(--text-3); }
.evt-cat {
    font-family: var(--label); font-weight: var(--label-w); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--link); white-space: nowrap;
}
.evt-price { font-family: var(--label); font-weight: var(--label-w); font-size: 13.5px; text-align: right; white-space: nowrap; }

/* the "add your event" row is always first */
.evt-add {
    display: grid; grid-template-columns: 112px minmax(180px, 1fr) auto; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--card-border);
    align-items: center; background: var(--amber-wash); color: var(--text);
}
.evt-add:hover { background: var(--amber-wash-hi); }
.evt-add .lede {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    line-height: 1.05; letter-spacing: .015em; text-transform: uppercase;
}
.evt-add .sub { font-size: 14.5px; color: var(--text-2); }
.evt-add .free { font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); white-space: nowrap; }

.board-foot {
    padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
}
.board-note {
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.day-head {
    padding: 11px 22px; background: var(--surface-hi); border-bottom: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.day-head h3 {
    font-family: var(--display); font-weight: 600; font-size: 16px;
    letter-spacing: .035em; text-transform: uppercase; line-height: 1;
}
.day-head .n { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* compact variant used on the events page */
.board-compact .board-head,
.board-compact .evt-row { grid-template-columns: 104px minmax(180px, 1fr) 84px 56px; gap: 12px; }
.board-compact .board-head { padding: 12px 20px; font-size: 10px; letter-spacing: .1em; }
.board-compact .evt-row { padding: 14px 20px; }
.board-compact .evt-body.is-spot { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
.board-compact .evt-add { grid-template-columns: 104px minmax(180px, 1fr) auto; gap: 12px; padding: 15px 20px; }
/* The events page listing reads at the same size as the homepage board. The
   compact variant tightens the grid and the metadata, not the title. */
.board-compact .evt-add .lede,
.board-compact .evt-title { font-size: 31px; }
.board-compact .evt-add .sub,
.board-compact .evt-sub { font-size: 14.5px; }
.board-compact .evt-date { font-size: 12px; }
.board-compact .evt-cat { font-size: 9.5px; }
.board-compact .evt-price { font-size: 11.5px; }
.board-compact .board-foot { padding: 16px 20px; }

/* three-column story board (coverage) */
.board-story .board-head,
.board-story .story-row { grid-template-columns: 112px minmax(180px, 1fr) 120px; }
.story-row {
    display: grid; gap: 14px; padding: 18px 22px;
    border-bottom: 1px solid var(--row-div); align-items: center; color: var(--text);
}
.story-row:hover { background: var(--surface-hi); }
.story-row .when { font-family: var(--label); font-weight: var(--label-w); font-size: 14px; color: var(--amber); white-space: nowrap; }
.story-row .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.story-row .t {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    line-height: 1.05; letter-spacing: .015em; text-transform: uppercase;
}
.story-row .d { font-size: 14.5px; color: var(--text-3); }
.story-row .kind {
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--link); text-align: right; white-space: nowrap;
}

/* ---------- chips / filters ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
    display: inline-flex; align-items: center; border: 1px solid var(--line);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text); padding: 9px 13px; border-radius: var(--r-sm);
    white-space: nowrap; background: transparent; cursor: pointer;
}
.chip:hover { border-color: var(--link); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--text); color: var(--cream); border-color: var(--text); }
/* A chip on any dark surface, not just `.band-ink` — the topics box on a
   coverage page sits inside `.detail`, which is why these were rendering
   near-black on near-black. */
.band-ink .chip,
.detail .chip,
.panel .chip,
.topics-box .chip {
    border-color: var(--ink-border);
    color: var(--on-ink);
    background: transparent;
}
.band-ink .chip:hover,
.detail .chip:hover,
.panel .chip:hover,
.topics-box .chip:hover { border-color: var(--mint); color: var(--mint); }
/* The selected chip on ink inverts the other way. */
.band-ink .chip.is-on, .band-ink .chip[aria-pressed="true"] {
    background: var(--on-ink); color: var(--ink); border-color: var(--on-ink);
}

.filter-bar {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    justify-content: space-between; padding-bottom: 16px;
}
.sort {
    display: flex; gap: 8px; align-items: center;
}
.sort-label { font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.seg { border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; overflow: hidden; }
.seg button {
    display: inline-flex; align-items: center; background: transparent; border: 0;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3); padding: 9px 12px; white-space: nowrap; cursor: pointer;
}
.seg button.is-on { background: var(--chip-on); color: var(--text); }

/* ---------- card grid ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px;
}
/* Three across, not four. A broadcast card carries a 16:9 still and a
   headline; at a quarter of the page the still is too small to tell one
   Nashville night from another, which is the only thing it is there to do. */
.cards-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-story { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* The coverage index: two across, each subject a wide card with its picture
   on the left, the way the spotlight cards run. Three columns of 16:9 stills
   read as a wall of photographs; this reads as a list of stories you can
   scan. The picture fills the card's height with a floor, pinned inside so a
   long description never leaves a gap under it. One column under 900px, and
   the picture back on top under 560px. */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cards-2 .card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.cards-2 .card-media { position: relative; aspect-ratio: auto; min-height: 200px; }
.cards-2 .card-media img { position: absolute; inset: 0; }
.cards-2 .card-body { padding: 22px 24px; }
.cards-reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text);
    transition: border-color .14s ease, background-color .16s ease;
}
.card:hover { border-color: var(--link); background: var(--surface-lift); }
.card-media {
    display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-bg);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-wide { aspect-ratio: 16 / 9; position: relative; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.card-kicker {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--link);
}
.card-title {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
}
.card-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.card-more {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--link); padding-top: 4px; white-space: nowrap;
}
.card-len {
    position: absolute; bottom: 10px; right: 10px; background: rgba(11, 12, 11, .82);
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink); padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap;
}
.card-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.card-meta .dim { color: var(--muted); }

/* A card on ink — the coverage index, or any other media grid on a dark band.
   Same card, same hairline, dark surface. */
.band-ink .card { background: var(--ink-panel); border-color: var(--ink-hair); color: var(--on-ink); }
.band-ink .card:hover { background: var(--ink-panel-hi); border-color: var(--ink-border); }
.band-ink .card-media { background: var(--ink-frame); }
.band-ink .card-kicker { color: var(--mint); }
.band-ink .card-meta .dim { color: var(--on-ink-dim); }
.band-ink .card-desc { color: var(--on-ink-body); }
.band-ink .card-more { color: var(--mint); }

/* plain box card (no media) */
.box {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); padding: 30px;
    display: flex; flex-direction: column; gap: 12px; color: var(--text);
    transition: border-color .14s ease, background-color .16s ease;
}
/* Only a module you can act on lightens — a plain panel should not imply a
   click it does not have. */
a.box:hover, .stat:hover, .feature:hover, .form-card:hover {
    background: var(--surface-lift);
}
a.box:hover { border-color: var(--link); }
.box h3, .box .t {
    font-family: var(--display); font-weight: 600; font-size: 31px;
    line-height: 1.02; letter-spacing: .015em; text-transform: uppercase;
}
.box p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
/* The price is the thing a buyer is looking for — give it its own line and
   enough weight to find at a glance. */
.box .from {
    font-family: var(--label); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text); font-weight: 600;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--row-div);
}
.box .ask {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link);
}

/* reels */
.reel { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.reel-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 9 / 16; border-radius: var(--r); background: var(--media-bg);
    border: 1px solid var(--card-border); overflow: hidden;
    /* Three across a 1360px page would make a 9:16 frame ~780px tall. The cap
       keeps the row a sensible height; the column stays 1/3 and the frame
       centres inside it. */
    width: 100%; max-width: 250px; margin-inline: auto;
}
.reel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-play {
    width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--on-mint);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    padding-left: 3px; position: relative; z-index: 1;
}
.reel-len {
    position: absolute; bottom: 9px; left: 9px; z-index: 1;
    font-family: var(--label); font-weight: var(--label-w); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink); background: rgba(11,12,11,.72); padding: 4px 7px; border-radius: var(--r-sm);
    white-space: nowrap;
}
.reel-body { display: flex; flex-direction: column; gap: 6px; }
.reel .t { font-size: 16px; font-weight: 700; line-height: 1.3; }
.reel .d { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.reel .k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link);
}

/* ---------- stat strip ---------- */
.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden;
}
.stat {
    padding: 38px 32px; border-right: 1px solid var(--card-border);
    display: flex; flex-direction: column; gap: 10px;
    transition: background-color .16s ease;
}
.stat:last-child { border-right: 0; }
/* The reach numbers are the argument this page is making — they should be the
   loudest thing on it. */
.stat .n {
    font-family: var(--display); font-weight: 700; font-size: 68px;
    line-height: .9; letter-spacing: .005em; text-transform: uppercase;
}
.stat .l { font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ---------- numbered steps ---------- */
.step {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px;
    padding: 24px 26px; border-bottom: 1px solid var(--row-div); align-items: baseline;
}
.step .n {
    font-family: var(--display); font-weight: 700; font-size: 38px;
    line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--link);
}
.step .b { display: flex; flex-direction: column; gap: 6px; }
.step h3 {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    line-height: 1.04; letter-spacing: .015em; text-transform: uppercase;
}
.step p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); max-width: 70ch; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span, .field-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="search"], select, textarea {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 14px 16px; font-family: var(--body); font-size: 15.5px; color: var(--text);
    outline: none; width: 100%; min-height: 48px;
}
textarea { resize: vertical; min-height: 110px; }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--link); }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-card {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); padding: 32px;
    transition: background-color .16s ease;
}
.form .btn { align-self: flex-start; padding: 16px 26px; }
.form-note { font-size: 13.5px; color: var(--text-2); }
.form-status {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--card-border);
    background: var(--mint-tint); color: var(--link);
}
.form-status[data-state="error"] { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }
.form-status[hidden] { display: none; }
/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- newsletter module ----------
   A card on the cream page, one step lighter than the background, so it reads
   as a module rather than a full-width dark break. Same surface and hairline
   as every other card on the site. */
.newsletter {
    background: var(--surface);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: var(--r);
    padding: 48px 44px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 38px; align-items: center;
}
.newsletter-copy { display: flex; flex-direction: column; gap: 14px; }
.newsletter-copy .eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--link); }
.newsletter-copy h2 {
    font-family: var(--display); font-weight: 700; font-size: 62px;
    line-height: .93; letter-spacing: 0; text-transform: uppercase;
    color: var(--text);
}
.newsletter-copy p { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 46ch; }
/* The form and the small print under it are one block, so the two columns
   stay copy-on-the-left / ask-on-the-right however tall either gets. */
.newsletter-ask { display: flex; flex-direction: column; gap: 14px; }
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.newsletter-form input[type="email"] {
    flex: 1; min-width: 200px;
    background: var(--cream); border: 1px solid var(--line);
    color: var(--text); padding: 16px 18px;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form input:focus { border-color: var(--link); }
.newsletter-form .btn { padding: 17px 26px; }
/* What somebody actually wants to know before they hand over an address:
   how often, and how to stop. It is the quietest type in the module and it
   is never smaller than 12px. */
.newsletter-fine { font-size: 12.5px; line-height: 1.55; color: var(--text-3); max-width: 52ch; }
.newsletter-fine a { color: var(--link); text-decoration: underline; }
.newsletter .form-status {
    width: 100%; background: var(--mint-tint);
    border-color: var(--card-border); color: var(--link);
}
.newsletter .form-status[data-state="error"] {
    background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger);
}

/* ---------- newsletter pop ----------
   A rounded square that rises in the bottom-left corner once the top of the
   page has scrolled away. Dismissable, remembers the dismissal for a week,
   stands down once you have joined, and steps aside while the full module at
   the foot of the page is on screen. Ships hidden: with no JavaScript it never
   appears. It floats over content, so — like the console's toast — it is the
   one place a shadow is allowed on the public site. */
/* Mint, so it reads as the site's one solid call to action rather than
   another dark panel. Everything inside is set in --on-mint at three
   strengths — no new hues, just the ink colour let down over the green. */
.nl-pop {
    position: fixed; left: 20px; bottom: 20px; z-index: 50;
    width: min(330px, calc(100vw - 40px));
    background: var(--mint); color: var(--on-mint);
    border: 1px solid rgba(8, 18, 12, .16); border-radius: 22px;
    padding: 24px 24px 22px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 18px 44px rgba(11, 12, 11, .28);
    transform: translateY(14px); opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}
.nl-pop.is-in { transform: none; opacity: 1; }
.nl-pop[hidden] { display: none; }
.nl-pop-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: transparent; border: 1px solid rgba(8, 18, 12, .28); color: rgba(8, 18, 12, .72);
    font-family: var(--body); font-size: 20px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.nl-pop-close:hover { border-color: var(--on-mint); color: var(--on-mint); }
.nl-pop-copy { display: flex; flex-direction: column; gap: 6px; padding-right: 34px; }
.nl-pop-copy .eyebrow { font-size: 9.5px; letter-spacing: .12em; color: rgba(8, 18, 12, .68); }
.nl-pop-copy .t {
    font-family: var(--display); font-weight: 700; font-size: 28px;
    line-height: .98; letter-spacing: .01em; text-transform: uppercase; color: var(--on-mint);
}
.nl-pop-copy .d { font-size: 13.5px; line-height: 1.55; color: rgba(8, 18, 12, .78); }
.nl-pop-form { display: flex; flex-direction: column; gap: 8px; }
.nl-pop-form input[type="email"] {
    background: var(--surface); border-color: rgba(8, 18, 12, .22); color: var(--text);
    min-height: 46px; padding: 12px 14px; font-size: 14.5px;
}
.nl-pop-form input::placeholder { color: var(--muted); }
.nl-pop-form input:focus { border-color: var(--on-mint); }
/* Ink on mint: the button has to out-contrast the card it sits on. */
.nl-pop-form .btn { width: 100%; min-height: 46px; background: var(--ink); color: var(--on-ink); }
.nl-pop-form .btn:hover { background: var(--on-mint); }
.nl-pop .form-status {
    margin: 0; background: transparent; border-color: rgba(8, 18, 12, .22); color: var(--on-mint);
}
.nl-pop .form-status[data-state="error"] {
    background: transparent; border-color: rgba(8, 18, 12, .22); color: var(--danger);
}
/* The focus ring is mint everywhere else; on mint it needs the dark. */
.nl-pop :focus-visible { outline-color: var(--on-mint); }
@media (max-width: 520px) {
    .nl-pop { left: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 20px 20px 18px; }
    .nl-pop-copy .t { font-size: 24px; }
}
@media print { .nl-pop { display: none; } }

/* ---------- article ---------- */
.article-wrap {
    max-width: var(--max); margin: 0 auto; padding: 36px var(--gut) 0;
    display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start;
}
.article { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.article > img { width: 100%; border-radius: var(--r); }
.article .lede { font-size: 19px; line-height: 1.75; color: var(--text-lede); max-width: 68ch; }
.article p { font-size: 17px; line-height: 1.75; color: var(--text-body); max-width: 68ch; }
.article h2 {
    font-family: var(--display); font-weight: 600; font-size: 34px;
    line-height: 1.02; letter-spacing: .015em; text-transform: uppercase;
}
.article h3 {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    line-height: 1.04; letter-spacing: .02em; text-transform: uppercase;
}
.article ul { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.article ul li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.article ul li::before { content: "•"; position: absolute; left: 0; color: var(--link); }
.pick { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--card-border); padding-top: 22px; }
.pick .n { font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.pick .order { font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pull {
    border-left: 3px solid var(--mint); padding: 8px 0 8px 22px; max-width: 56ch;
}
.pull p {
    font-family: var(--display); font-weight: 600; font-size: 30px;
    line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}
.band-ink .pull p { color: var(--on-ink); }

.aside { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.aside-card {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden;
}
.aside-card > h2, .aside-card > .h {
    padding: 16px 18px; border-bottom: 1px solid var(--card-border);
    font-family: var(--display); font-weight: 600; font-size: 22px;
    letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.aside-item {
    display: flex; flex-direction: column; gap: 4px; padding: 15px 18px;
    border-bottom: 1px solid var(--row-div); color: var(--text);
}
.aside-item:hover { background: var(--surface-hi); }
.aside-item .k { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.aside-item .t { font-size: 16px; font-weight: 700; line-height: 1.3; }
.aside-more {
    display: block; padding: 15px 18px;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--link); white-space: nowrap;
}
.aside-cta {
    background: var(--ink); color: var(--on-ink); border-radius: var(--r);
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.aside-cta .t {
    font-family: var(--display); font-weight: 700; font-size: 28px;
    line-height: 1; letter-spacing: .005em; text-transform: uppercase;
}
.aside-cta p { font-size: 14.5px; line-height: 1.6; color: var(--on-ink-body); }
.aside-cta .btn { align-self: flex-start; padding: 15px 24px; }

/* dark aside (event / coverage detail) */
.aside-dark { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.aside-dark .panel-head h2, .aside-dark .panel-head h3 { font-size: 18px; letter-spacing: .04em; }
.dark-item {
    display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 13px;
    padding: 14px 18px; border-bottom: 1px solid var(--ink-row); align-items: center; color: var(--on-ink);
}
.dark-item:hover { background: var(--ink-panel-hi); }
.dark-item .k { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); }
.dark-item .t {
    font-family: var(--display); font-weight: 600; font-size: 17px;
    line-height: 1.05; letter-spacing: .015em; text-transform: uppercase;
}
.dark-item .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dark-link {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 18px;
    border-bottom: 1px solid var(--ink-row); color: var(--on-ink);
}
.dark-link:hover { background: var(--ink-panel-hi); }
.dark-link .k { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); }
.dark-link .t { font-size: 15.5px; font-weight: 700; line-height: 1.3; }

.facts { }
.fact {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
    padding: 15px 18px; border-bottom: 1px solid var(--ink-row); align-items: baseline;
}
.fact dt { font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-dim); }
.fact dd { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--on-ink); margin: 0; }
.fact-actions { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fact-actions .btn { width: 100%; }

/* topics box */
.topics-box {
    background: var(--ink-panel); border: 1px solid var(--ink-hair); border-radius: var(--r);
    padding: 20px; display: flex; flex-direction: column; gap: 10px;
}

/* detail hero (coverage / event) */
.detail { background: var(--ink); color: var(--on-ink); padding: 26px 0 40px; }
.detail-grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.detail-main { flex: 1 1 460px; min-width: 0; }
.detail-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; }
.detail-body { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
/* A notch under the section heads: a coverage or event title is often a
   sentence long, and at 56px it filled the column like a poster. */
.detail-body h1 {
    font-family: var(--display); font-weight: 700; font-size: 44px;
    line-height: .98; letter-spacing: .005em; text-transform: uppercase; max-width: 24ch;
}
.detail-meta {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-ink-mute);
}
.detail-meta .sep { color: var(--ink-border); }
.detail-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
.detail-actions .txt-link { color: var(--mint); font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.detail-prose {
    display: flex; flex-direction: column; gap: 18px; padding-top: 12px;
    font-size: 17px; line-height: 1.75; color: var(--on-ink-body-2); max-width: 66ch;
}
.detail-prose h2 {
    font-family: var(--display); font-weight: 600; font-size: 30px;
    line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; color: var(--on-ink);
}

/* ---------- 404 ---------- */
.err { background: var(--ink); color: var(--on-ink); padding: 80px 0 90px; }
.err-inner {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.err h1 {
    font-family: var(--display); font-weight: 700; font-size: 96px;
    line-height: .95; letter-spacing: .005em; text-transform: uppercase; max-width: 20ch;
}
.err .eyebrow { color: var(--amber-ink); }
.err p { font-size: 17px; line-height: 1.7; color: var(--on-ink-body); max-width: 52ch; }

/* ---------- featured guide ---------- */
.feature {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text); margin-bottom: 28px;
    transition: border-color .14s ease;
}
.feature { transition: border-color .14s ease, background-color .16s ease; }
.feature:hover { border-color: var(--link); }
.feature-media { display: block; min-height: 300px; overflow: hidden; background: var(--media-bg); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: 36px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.feature-body .t {
    font-family: var(--display); font-weight: 700; font-size: 44px;
    line-height: .95; letter-spacing: .005em; text-transform: uppercase;
}
.feature-body p { font-size: 16px; line-height: 1.7; color: var(--text-2); max-width: 52ch; }

/* ---------- misc ---------- */
.empty {
    padding: 40px 22px; text-align: center; color: var(--muted);
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.split { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.split > .col-main { flex: 1 1 420px; min-width: 0; }
.split > .col-side { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.pad-b { padding-bottom: 56px; }

/* =========================================================
   The homepage runs light

   The desk is one module used on two pages. On the livestreams
   page it stays on ink, because the player is the point there
   and a video wants a dark room. On the homepage it runs light:
   the page is cream from the strip down to the footer, and the
   one dark band on it is the newsletter at the bottom.

   That is the two-backgrounds rule in design-system.md doing its
   job — a page is a dark band over a cream page, or the reverse,
   and the homepage is now the reverse.

   The desk is built entirely from the ink tokens, so flipping it
   is a matter of pointing those tokens at their cream
   counterparts for this page only. Nothing below re-states a
   layout rule; if a measurement needs changing, it changes in
   the module itself, once, for both pages.
   ========================================================= */
[data-page="home"] .stage {
    --ink:            var(--cream);
    --ink-panel:      var(--surface);
    --ink-panel-hi:   var(--surface-hi);
    --ink-hair:       var(--card-border);
    --ink-row:        var(--row-div);
    --ink-border:     var(--line);
    --ink-frame:      var(--line);
    --on-ink:         var(--text);
    --on-ink-body:    var(--text-2);
    --on-ink-body-2:  var(--text-body);
    --on-ink-mute:    var(--text-3);
    --on-ink-dim:     var(--muted);
    /* The on-ink amber is a light yellow, built to sit on black. Its cream
       counterpart is the darker one the events board already uses. */
    --amber-ink:      var(--amber);
}

/* Mint is the one token that cannot simply be repointed: it is a text colour
   on ink and a fill everywhere else, and on cream it fails contrast as text
   but works perfectly as a block. So the fills stay mint — the selected row's
   edge, the Join button — and only the places where mint was doing the work
   of a link move to --link. This is the single easiest thing to get wrong;
   see the palette note in design-system.md. */
[data-page="home"] .stage .stage-kicker.is-live,
[data-page="home"] .stage .rail-item .meta.is-live,
[data-page="home"] .stage .tag-link:hover,
[data-page="home"] .stage .tag-link .bullet,
[data-page="home"] .stage .panel-head .more,
[data-page="home"] .stage .panel-head svg,
[data-page="home"] .stage .panel-foot { color: var(--link); }

/* LIVE is the homepage's real headline — the page's h1 is for the crawler and
   the story's own title is an h2 that changes on every click. So the feed's
   head sets at section size rather than panel size, and the pin beside it
   grows with it. */
/* The desk's bottom padding and the next section's top padding are the same
   colour on this page — the band is cream, the page is cream — so the two
   simply add up and the gap under the desk comes out twice the size of every
   other gap on the homepage. The desk gives its share back and the section
   rhythm carries it alone. */
[data-page="home"] .stage { padding-bottom: 6px; }
[data-page="home"] .stage .panel-head { padding: 19px 20px; }
[data-page="home"] .stage .panel-head h2 { font-size: 46px; letter-spacing: .005em; gap: 11px; }
[data-page="home"] .stage .panel-head h2 svg { width: 30px; height: 30px; }
/* The feed's rows keep their white ground whatever state they are in: on a
   light panel, tinting the row as well as marking it says the same thing
   twice and makes the column look striped. The green edge is the whole
   signal — mint while the pointer is on a row, the solid link green on the
   one that is actually open, so the two never get confused. */
[data-page="home"] .stage .rail-item,
[data-page="home"] .stage .rail-item:hover,
[data-page="home"] .stage .rail-item[aria-selected="true"],
[data-page="home"] .stage .rail-item.is-on { background: var(--surface); }
[data-page="home"] .stage .rail-item:hover { border-left-color: var(--mint); }
[data-page="home"] .stage .rail-item[aria-selected="true"],
[data-page="home"] .stage .rail-item.is-on { border-left-color: var(--link); }

[data-page="home"] .stage a.stage-media:hover .frame { border-color: var(--line); }
[data-page="home"] .stage .btn-outline-mint { color: var(--link); border-color: var(--link); }
[data-page="home"] .stage .btn-outline-mint:hover { background: var(--link); color: var(--surface); }
[data-page="home"] .stage .newsletter-form input:focus { border-color: var(--link); }
[data-page="home"] .stage .form-status { color: var(--link); }
[data-page="home"] .stage .form-status[data-state="error"] { color: var(--danger); }

/* The media placeholder is a dark diagonal, which is right on ink and wrong
   on cream. Same idea, cream materials: it still reads as "a picture goes
   here" rather than as an empty box. */
[data-page="home"] .stage .frame,
[data-page="home"] .stage .frame-thumb {
    background: repeating-linear-gradient(115deg, var(--media-bg) 0 14px, var(--surface-hi) 14px 28px);
}
/* The badges sit on a photograph, not on the page, so they keep their ink. */
[data-page="home"] .stage .frame-badge,
[data-page="home"] .stage .frame-live { background: var(--ink); color: var(--on-ink); }
[data-page="home"] .stage .frame-live { color: var(--mint); }

/* ---------- the homepage's one dark band ----------
   The newsletter stops being a card and becomes a full-bleed break across the
   page. Everything above it runs light, so the only thing on the homepage
   wearing ink is the ask — which is the whole reason it stops you.
   Scoped to the homepage: on every other page the module is still the cream
   card it has always been, and the partial is untouched. */
/* The band itself is the full-bleed break; the shared newsletter partial
   sits inside it beside the block of covers, stripped of the card it wears
   on every other page. The partial is not touched — it is the same module,
   in a different room. */
[data-page="home"] .nlx-band {
    background: var(--ink); color: var(--on-ink); margin-top: var(--home-gap);
}
[data-page="home"] .nlx-band > .nlx {
    max-width: var(--max); margin: 0 auto; padding: 96px var(--gut);
}
[data-page="home"] .nlx #newsletter {
    max-width: none; margin: 0; padding: 0;
    background: transparent; color: var(--on-ink);
}
[data-page="home"] #newsletter .newsletter {
    max-width: none; margin: 0; padding: 0;
    grid-template-columns: minmax(0, 1fr); row-gap: 26px;
    background: transparent; border: 0; border-radius: 0; color: var(--on-ink);
}
[data-page="home"] #newsletter .newsletter-copy .eyebrow { color: var(--mint); }
[data-page="home"] #newsletter .newsletter-copy h2 { color: var(--on-ink); }
[data-page="home"] #newsletter .newsletter-copy p { color: var(--on-ink-body); }
[data-page="home"] #newsletter .newsletter-fine { color: var(--on-ink-dim); }
[data-page="home"] #newsletter .newsletter-fine a { color: var(--on-ink-body); }
[data-page="home"] #newsletter .newsletter-form input[type="email"] {
    background: var(--ink-panel); border-color: var(--ink-border); color: var(--on-ink);
}
[data-page="home"] #newsletter .newsletter-form input::placeholder { color: var(--on-ink-dim); }
[data-page="home"] #newsletter .newsletter-form input:focus { border-color: var(--mint); }
[data-page="home"] #newsletter .form-status {
    background: transparent; border-color: var(--ink-border); color: var(--mint);
}
[data-page="home"] #newsletter .form-status[data-state="error"] {
    background: transparent; border-color: var(--ink-border); color: var(--amber-ink);
}

/* =========================================================
   Homepage modules — the front page below the desk

   A live media front page is a stack of boards, and a reader
   scans it by shape before they read a word of it. So each
   board below the desk gets a silhouette of its own and never
   repeats the one above it:

     Livestreams        a sideways rail of portrait frames
     Events             wide rows, photograph left, calendar tile on it
     Coverage + Guides  two boxes side by side, one lead and three lines each
     Partner            a split — picture one side, the ask the other
     Newsletter         the full-bleed ink band, then the advertisement

   Everything here is built from the tokens in the block at the
   top of this file. Nothing invents a colour, a radius or a
   type size that is not already in the system.
   ========================================================= */

/* ---- the photographic masthead ----
   A section front opens on the ink band every other page opens on; this
   variant puts the city behind it. The photograph runs at half strength
   under a scrim built from --ink itself: dark on the side the headline sits,
   opening up toward the right so the picture reads as a picture. It ran at a
   quarter strength and read as a black band with a rumour of a photograph.

   The scrim is not decoration: it is what keeps 58px of Antonio legible over
   a night shot of Broadway, which is why it is a gradient on a page whose
   rule is that gradients are not used. */
.hero-shot { position: relative; overflow: hidden; padding: 64px 0 52px; }
.hero-bg { position: absolute; inset: 0; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(11, 12, 11, .9) 0%,
        rgba(11, 12, 11, .62) 45%,
        rgba(11, 12, 11, .22) 100%);
}
.hero-shot .hero-inner { position: relative; z-index: 1; }


/* The type row above the month row. Two bars of chips stacked would read as
   one long wrap, so this one gets its own line and a little air under it. */
.chips-cat { padding-bottom: 14px; }

/* ---- section heads ----
   The board's name, a line of standfirst under it, and whatever
   control the board needs on the right — a link out, a pair of
   arrows, or both. The rule under it is the page's hairline; the
   short accent tab on top of it is the one place the section
   colour shows, and it is what makes a stack of boards read as a
   masthead rather than as a run of headings. */
.sec-head-rule {
    position: relative;
    align-items: flex-end;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}
.sec-head-rule::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 72px; height: 3px; background: var(--link);
}
.sec-head-title { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sec-head-sub {
    font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 58ch;
}
.sec-head-side { display: flex; align-items: center; gap: 16px; flex: none; }

/* The pair of round arrows on a rail. Same control as the media
   strip's, at the size a card rail wants rather than a
   scoreboard's. script.js reveals them only once the track
   actually overflows, so a short rail never shows a dead button. */
.rail-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.rail-arrow {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--line); color: var(--text);
    font-size: 19px; line-height: 1; cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}
.rail-arrow:hover { border-color: var(--link); color: var(--link); }
.rail-arrow[disabled] { opacity: .32; cursor: default; }
.rail-arrow[disabled]:hover { border-color: var(--line); color: var(--text); }

/* ---- Watch: the stories rail ----
   Portrait frames, because that is the shape the footage is
   actually shot in — a phone held upright at a benefit, on a
   boat, on an adoption floor. The headline sits on the picture
   under a scrim rather than under the card, so the row reads as
   footage rather than as a list of links with pictures attached.

   Native sideways scroll, same [data-strip-track] hook the media
   strip and the events rail use, so all three are one control. */
.stories {
    display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* room for the focus ring, which would otherwise be clipped by
       the scroll container on the first and last card */
    padding: 3px; margin: -3px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.stories::-webkit-scrollbar { display: none; }

.story {
    position: relative; flex: none; width: 232px; scroll-snap-align: start;
    aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden;
    background: var(--media-bg); color: var(--on-ink);
    display: flex; align-items: flex-end;
    transition: transform .16s ease;
}
.story img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The scrim. Two stops rather than a straight fade, so the top
   two-thirds of the photograph is left alone and the type at the
   bottom still lands on something solid enough to read. */
.story::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(11, 12, 11, .88) 0%,
        rgba(11, 12, 11, .62) 26%,
        rgba(11, 12, 11, .06) 58%,
        rgba(11, 12, 11, 0) 100%);
}
.story:hover { transform: translateY(-3px); }
.story-body {
    position: relative; z-index: 1; padding: 16px 15px 15px;
    display: flex; flex-direction: column; gap: 7px; width: 100%;
}
.story-k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(239, 237, 231, .82);
}
.story-t {
    font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.24;
    letter-spacing: -.006em; color: var(--on-ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The badge. It sits on a photograph, so it keeps its ink ground
   on both pages and mint stays legal as a text colour inside it. */
.story-badge {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 9px; border-radius: var(--r-sm);
    background: var(--ink); color: var(--on-ink);
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase;
}
.story-badge.is-live { color: var(--mint); }
.story-badge.is-soon { color: var(--amber-ink); }
.story-badge .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex: none;
    animation: livePulse 1.4s ease-in-out infinite;
}
/* The running time rides in the opposite corner from the badge,
   the way it does on every video thumbnail anybody has ever used. */
.story-len {
    position: absolute; right: 12px; top: 12px; z-index: 1;
    padding: 5px 8px; border-radius: var(--r-sm);
    background: rgba(11, 12, 11, .72); color: var(--on-ink);
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px;
    letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* ---- Coverage and Guides: one row each ----
   Coverage is one story at size: the picture on the left at the height of
   the writing beside it, then the story and the next three by name. Guides
   is a two-column shelf of rows, thumbnail left. Two different shapes, so
   they read as two different things. */

.guide-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden;
}
.guide-row {
    display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 20px;
    align-items: center; padding: 18px 22px; color: var(--text);
    border-bottom: 1px solid var(--row-div);
    transition: background-color .14s ease;
}
.guide-row:nth-child(odd) { border-right: 1px solid var(--row-div); }
.guide-row:nth-last-child(-n+2):nth-child(odd),
.guide-row:last-child { border-bottom: 0; }
.guide-row:hover { background: var(--surface-lift); }
.guide-row:hover .t { color: var(--link); }
.guide-thumb {
    position: relative; display: block; aspect-ratio: 3 / 2;
    border-radius: 12px; overflow: hidden; background: var(--media-bg);
}
.guide-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.guide-body .k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--link);
}
.guide-body .t { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.006em; }
.guide-body .d {
    font-size: 14px; line-height: 1.5; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hub-lead {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text);
    transition: border-color .14s ease;
}
/* The lead is a container, not a link: the picture, the headline and each of
   the three pieces under it go to different places, so nothing here can be one
   anchor wrapped round the lot. It lifts when any of them is hovered. */
/* The edge steps up a shade under the pointer; it does not go green. A green
   outline round a photograph reads as a selection, not as "you are here". */
.hub-lead:focus-within, .hub-lead:hover { border-color: var(--line); }
.hub-lead-media { position: relative; display: block; min-height: 360px; background: var(--media-bg); overflow: hidden; }
.hub-lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-flag {
    position: absolute; left: 14px; top: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px; border-radius: var(--r-sm);
    background: var(--ink); color: var(--mint);
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase;
}
.hub-lead-body { padding: 30px 34px 26px; display: flex; flex-direction: column; gap: 12px; }
.hub-lead-t {
    color: var(--text);
    font-family: var(--display); font-weight: 700; font-size: 40px;
    line-height: 1.02; letter-spacing: .004em; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-lead-t:hover { color: var(--link); }
.hub-lead-d {
    font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 56ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The count line: what is in the folder, in the order somebody
   cares about it — how much, then how recently it moved. */
.hub-count {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.hub-count b { color: var(--link); font-weight: var(--label-w-strong); }
.hub-count .sep { color: var(--line); }

/* The three most recent pieces in the folder, listed. This is the
   part of the module doing the actual work: it shows that a
   subject is a stack of links from several places, which a card
   with a headline on it cannot say. */
.hub-items { display: flex; flex-direction: column; margin-top: auto; padding-top: 8px; }
.hub-item {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px;
    align-items: baseline; padding: 14px 0; border-top: 1px solid var(--row-div);
    color: var(--text);
}
.hub-item:hover { color: var(--link); }
.hub-item .kind {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--link);
}
.hub-item .t {
    font-size: 15.5px; font-weight: 600; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-item .when {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .06em; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* The head over the week list. It is a rung below a section head — the board
   it opens is the second half of one, not a section of its own — so it takes
   the rail head's size and sits tighter to the rows under it. */
.wk-head { padding-top: 30px; }

/* ---- the rest of the week ----
   Under the picks: date, title, room, category. Two columns of plain lines,
   because the board above it is already two photographs and the page the
   button underneath goes to is already a table. This is the middle setting —
   more than a recommendation, less than a calendar. */
.week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.wk-row {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px;
    align-items: center; padding: 15px 0; border-top: 1px solid var(--row-div);
    color: var(--text);
}
.wk-row:hover .wk-t { color: var(--link); }
/* The date column is the only place on this board figures have to line up
   down the page, so it is the only place that asks for tabular numerals. */
.wk-when {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.wk-when .dow { color: var(--muted); }
.wk-when .md { color: var(--amber); font-weight: var(--label-w-strong); font-size: 11px; white-space: nowrap; }
.wk-when .dow { white-space: nowrap; }
.wk-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-t {
    font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.006em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-cat {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
    background: var(--chip-on); border-radius: 6px; padding: 4px 7px; white-space: nowrap;
}

/* ---- the partner split ----
   The site sells four things and this is where the front page
   says so. It is built as an ad unit on purpose — picture one
   side, label, headline, one line, one control on the other —
   because the slot has to work the day a paying brand is in it,
   and a house promotion that does not fit the slot it is
   standing in teaches the page the wrong proportions. */
.promo {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 0; align-items: stretch;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden; color: var(--text);
    transition: border-color .14s ease;
}
.promo:hover { border-color: var(--link); }
.promo-media { position: relative; min-height: 300px; background: var(--media-bg); }
.promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-body {
    padding: 44px 44px 44px 40px;
    display: flex; flex-direction: column; justify-content: center; gap: 15px;
}
/* The disclosure. Small, but it is the first thing in the box and
   it is never the same colour as the headline under it. */
.promo-tag {
    align-self: flex-start;
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase;
    background: var(--ink); color: var(--on-ink);
    border-radius: var(--r-sm); padding: 6px 10px;
}
.promo-t {
    font-family: var(--display); font-weight: 700; font-size: 44px;
    line-height: 1.0; letter-spacing: .004em; text-transform: uppercase;
}
.promo-d { font-size: 15.5px; line-height: 1.65; color: var(--text-2); max-width: 44ch; }
.promo-cta {
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--link);
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
}
.promo:hover .promo-cta { text-decoration: underline; }

/* ---- ad slots ----
   A real slot, reserved at its real height, so the page does not
   jump when a creative lands in it. Empty, it carries the house
   line rather than a grey box — an unsold slot on a local media
   site is still a place to ask somebody to buy it.

   `--ad-h` is the reserved height and the only thing a different
   slot has to change. */
.adslot {
    max-width: var(--max); margin: 42px auto 0; padding: 0 var(--gut);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.adslot-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.adslot-box {
    --ad-h: 116px;
    width: 100%; min-height: var(--ad-h);
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--line); border-radius: var(--r);
    background: var(--surface); overflow: hidden;
}
.adslot-box > img { width: 100%; height: 100%; object-fit: cover; }
.adslot-house {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap; text-align: center;
    padding: 22px 24px; width: 100%; color: var(--text);
}
.adslot-house .t {
    font-family: var(--display); font-weight: 700; font-size: 34px;
    line-height: 1.02; letter-spacing: .015em; text-transform: uppercase;
}
.adslot-house .d { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.adslot-house .go {
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--link); white-space: nowrap;
}
.adslot-house:hover .go { text-decoration: underline; }
/* On the homepage the slot is the last thing before the footer, under the
   newsletter band, so it takes the band's own gap above it. */
[data-page="home"] .nlx-band + .adslot { margin-top: var(--home-gap); }
/* The slot closes the page, so it keeps the same gap to the footer that the
   boards keep between each other. */
[data-page="home"] .nlx-band + .adslot { margin-bottom: 36px; }
/* The homepage's slot, and only that one, carries the green edge. */
[data-page="home"] .adslot-box { border: 2px solid var(--mint); }

/* ---- the newsletter, with the covers beside it ----
   The ask sits on the homepage's one dark band, and the block of
   photographs on the left is what makes it read as a thing worth
   joining rather than as a form at the bottom of a page. Same
   trick a magazine uses on its own subscribe page: show the
   product.

   It is decoration, so the mosaic is aria-hidden and the whole
   band still makes sense read straight through. */
.nlx { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.nlx-mosaic {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    border-radius: var(--r); overflow: hidden;
}
.nlx-mosaic span {
    display: block; aspect-ratio: 3 / 4; background: var(--ink-panel); overflow: hidden;
}
.nlx-mosaic img { width: 100%; height: 100%; object-fit: cover; }
/* The middle column stands a little proud of the two beside it,
   so the block reads as a stack of covers rather than as a grid
   of thumbnails. */
.nlx-mosaic span:nth-child(3n+2) { aspect-ratio: 3 / 4.6; align-self: center; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .cards-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .cards-2 .card { grid-template-columns: minmax(0, 1fr); }
    .cards-2 .card-media { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 900px) {
    .hub-lead { grid-template-columns: minmax(0, 1fr); }
    .hub-lead-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
    .guide-list { grid-template-columns: minmax(0, 1fr); }
    .guide-row:nth-child(odd) { border-right: 0; }
    .guide-row:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--row-div); }
}
@media (max-width: 700px) {
    .guide-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px 16px; }
    .guide-body .t { font-size: 16.5px; }
    .guide-body .d { -webkit-line-clamp: 1; }
}
@media (max-width: 1100px) {
    .nlx { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .nlx-mosaic { max-width: 460px; }
}
@media (max-width: 900px) {
    .sec-head-rule { margin-bottom: 20px; }
    .hero-shot { padding: 40px 0 36px; }
    .hero-bg::after {
        background: linear-gradient(180deg, rgba(11, 12, 11, .5) 0%, rgba(11, 12, 11, .82) 100%);
    }
    .promo { grid-template-columns: minmax(0, 1fr); }
    .promo-media { min-height: 0; aspect-ratio: 16 / 9; }
    .promo-body { padding: 30px 26px 32px; }
    .promo-t { font-size: 36px; }
    .hub-lead-t { font-size: 34px; }
    .hub-lead-body { padding: 22px 22px 18px; }
    .week { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 700px) {
    .story { width: 190px; }
    .sec-head-side { width: 100%; justify-content: space-between; }
    .adslot-house { flex-direction: column; gap: 10px; }
}
@media (max-width: 520px) {
    .story { width: 168px; }
    .hub-item { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
    .hub-item .when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .story:hover { transform: none; }
}

/* =========================================================
   The livestreams page runs dark

   The exact mirror of "the homepage runs light" above, and for
   the same reason stated the other way round: the player is the
   point of this page, and a video wants a dark room. Every other
   page is cream with one ink band in it; this one is ink with the
   reels and the newsletter on cream underneath.

   The watch desk is built entirely from the cream tokens, so
   flipping it is a matter of pointing those tokens at their ink
   counterparts for this band only. Nothing below re-states a
   layout rule; a measurement still changes once, in the module.
   ========================================================= */
[data-page="livestreams"] .watch-band {
    background: var(--ink); color: var(--on-ink);
    padding-bottom: 40px;

    --surface:        var(--ink-panel);
    --surface-lift:   var(--ink-panel-hi);
    --surface-hi:     var(--ink-panel-hi);
    --card-border:    var(--ink-hair);
    --row-div:        var(--ink-row);
    --line:           var(--ink-border);
    --media-bg:       var(--ink-frame);
    --chip-on:        var(--ink-row);
    --text:           var(--on-ink);
    --text-2:         var(--on-ink-body);
    --text-3:         var(--on-ink-mute);
    --text-body:      var(--on-ink-body-2);
    --text-lede:      var(--on-ink-body-2);
    --muted:          var(--on-ink-mute);
    /* On ink, mint is the link colour — the reverse of the note on the
       homepage block, and the same trap. The solid fills stay mint either
       way, so only the text uses go across. */
    --link:           var(--mint);
    --amber:          var(--amber-ink);
}
/* The band ends on a real line, so the shelf under it takes the wider gap
   every other hard-edged band on the site gets. */
[data-page="livestreams"] .watch-band + .sec:not(.sec-flush) { padding-top: 68px; }
/* The live flag is broadcast red and stays that colour on either ground; the
   badge sits on the photograph and already carries its own ink. */
[data-page="livestreams"] .watch-band .player { border: 1px solid var(--ink-hair); }

/* ---- how to watch ----
   The block under the description. On a watch page the wide column runs out
   of things to say long before the rail beside it does, and the hole that
   leaves under the player is the first thing a reader meets on the way down.
   Three numbered lines: where it happens, what happens to it afterwards, and
   how to be told before it starts. Two of them are links; the middle one is a
   statement and is not drawn as one. */
.how { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.how-k {
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.how-rows {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px;
    overflow: hidden;
}
.how-row {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
    padding: 18px 18px 20px; border-right: 1px solid var(--card-border);
    color: var(--text); transition: background-color .14s ease;
}
.how-rows > :last-child { border-right: 0; }
a.how-row:hover { background: var(--surface-hi); }
a.how-row:hover .t { color: var(--link); }
.how-row .n {
    font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1;
    color: var(--link); font-variant-numeric: tabular-nums;
}
.how-row .b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.how-row .t { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.how-row .d { font-size: 13px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 1000px) {
    .how-rows { grid-template-columns: minmax(0, 1fr); }
    .how-row { border-right: 0; border-bottom: 1px solid var(--card-border); }
    .how-rows > :last-child { border-bottom: 0; }
}

/* =========================================================
   Responsive. Desktop layout above is untouched; these only
   apply at narrow widths.
   ========================================================= */

@media (max-width: 1180px) {
    .hdr-nav { gap: 14px; font-size: 10.5px; }
    .hdr-nav .btn, .hdr-nav .btn-ghost { padding: 9px 11px; }
}

/* nav collapses to a mono-labelled menu */
@media (max-width: 1000px) {
    .js .nav-toggle { display: inline-flex; align-items: center; }
    .js .hdr-nav {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--ink); border-bottom: 1px solid var(--ink-hair);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px var(--gut) 18px;
    }
    .js .hdr-nav.is-open { display: flex; }
    .js .hdr-nav > a {
        display: flex; align-items: center; min-height: 48px;
        padding: 12px 0; border-bottom: 1px solid var(--ink-hair);
    }
    .js .hdr-nav > .btn, .js .hdr-nav > .btn-ghost {
        justify-content: center; margin-top: 12px; border-bottom: 0; min-height: 48px;
    }
    .site-header { position: sticky; }
    .hdr-inner { position: relative; }
}

@media (max-width: 900px) {
    :root { --gut: 20px; }
    .cards-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The mark steps with the bar, not with the type scale. */
    .hdr-inner { --mark: 34px; }
    .hero { padding: 30px 0 32px; }
    .hero-copy h1 { font-size: 60px; }
    .stage-copy h1, .stage-copy .stage-title { font-size: 40px; }
    [data-page="home"] .stage .panel-head h2 { font-size: 36px; }
    [data-page="home"] .stage .panel-head h2 svg { width: 24px; height: 24px; }
    .stage-body { min-height: 414px; }
    .detail-body h1 { font-size: 36px; }
    .err h1 { font-size: 60px; }
    .newsletter { padding: 40px 26px; }
    .newsletter-copy h2 { font-size: 50px; }
    .sec-head h2 { font-size: 52px; }
    .sec { padding-top: 40px; }
    .feature-body { padding: 26px; }
    .feature-body .t { font-size: 32px; }
    .feature-media { min-height: 220px; }
    .article-wrap { gap: 30px; }
    .aside, .aside-dark { max-width: none; }
    .stat { border-right: 0; border-bottom: 1px solid var(--card-border); }
    /* One column. The open story leads, the feed follows, the Keys card
       closes the band. */
    .stage-grid { grid-template-columns: 1fr; }
    .stage-side { display: contents; }
    .stage-main { order: 0; }
    .stage-rail { order: 1; }
    .keys-card { order: 2; flex: 0 0 auto; }
}

/* events table stacks: date above title */
@media (max-width: 760px) {
    .board-head { display: none; }
    .evt-row,
    .board-compact .evt-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "date price" "body body" "cat cat";
        gap: 6px 12px; padding: 18px 20px;
    }
    .evt-row .evt-date, .evt-row .evt-when { grid-area: date; }
    .evt-row .evt-body { grid-area: body; }
    .evt-row .evt-cat  { grid-area: cat; }
    .evt-row .evt-price { grid-area: price; }
    .evt-when { flex-direction: row; gap: 8px; align-items: baseline; }
    .evt-title, .board-compact .evt-title { font-size: 26px; }
    /* The board stacks here, so the picture goes above the title rather than
       squeezing a two-column cell onto a phone. */
    .evt-body.is-spot { grid-template-columns: 1fr; gap: 12px; }
    .board-compact .evt-body.is-spot { grid-template-columns: 1fr; }
    .evt-body.is-spot .evt-thumb { max-width: 260px; }

    .evt-add, .board-compact .evt-add {
        grid-template-columns: 1fr;
        gap: 10px; padding: 18px 20px;
    }
    .evt-add .btn { justify-self: start; }

    .board-story .board-head,
    .board-head-story,
    .board-story .story-row,
    .story-row {
        grid-template-columns: 1fr;
        gap: 6px; padding: 18px 20px;
    }
    .story-row .kind { text-align: left; }
    .story-row .t { font-size: 22px; }

    .cards, .cards-wide, .cards-story { grid-template-columns: 1fr; }
    .cards-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

    .stage-main { padding: 16px; }
    .rail-item { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 16px 12px 13px; }
    .rail-item .t { font-size: 15.5px; }

    /* Two rows: bullet + kind label, then the title underneath. */
    .tag-link {
        grid-template-columns: 14px minmax(0, 1fr);
        grid-template-areas: "bullet kind" ". title";
        gap: 4px 12px; align-items: center;
    }
    .tag-link .bullet { grid-area: bullet; }
    .tag-link .kind   { grid-area: kind; }
    .tag-link .t      { grid-area: title; font-size: 15px; }
    /* each link stacks to two rows here, so the block grows to hold both */
    .stage-links-list { max-height: 132px; }
    .stage-body { min-height: 420px; }

    .fact { grid-template-columns: 1fr; gap: 4px; }
    .step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px; }
    .step .n { font-size: 30px; }
    .form-card { padding: 22px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input[type="email"], .newsletter-form .btn { width: 100%; }
    .site-footer { gap: 28px; }
    .foot-cols { gap: 32px; }
}

@media (max-width: 520px) {
    .cards-reel { grid-template-columns: 1fr; }
    .reel-media { max-width: 220px; }
    /* The sort control is two labelled buttons; let them wrap rather than
       push the page sideways on a 320px screen. */
    .filter-bar { align-items: flex-start; }
    .sort { flex-wrap: wrap; width: 100%; }
    .seg { flex: 1 1 auto; }
    .seg button { flex: 1 1 auto; justify-content: center; }
    .hero-copy h1 { font-size: 50px; }
    .stage-copy h1, .stage-copy .stage-title { font-size: 34px; }
    [data-page="home"] .stage .panel-head h2 { font-size: 34px; }
    .stage-body { min-height: 406px; }
    .detail-body h1 { font-size: 32px; }
    .err h1 { font-size: 42px; }
    .sec-head h2 { font-size: 42px; }
    .newsletter-copy h2 { font-size: 42px; }
    /* --mark drives both the wordmark and the pill, so the pair stays
       locked together — setting .wordmark's font-size here would not. */
    .hdr-inner { --mark: 28px; gap: 12px; padding: 12px var(--gut); }
    .live-pill { padding: 0 9px; font-size: 9.5px; }
    .article .lede { font-size: 17px; }
    .article p { font-size: 16px; }
    .article h2 { font-size: 26px; }
    .pull p { font-size: 22px; }
    .feature-body .t { font-size: 26px; }
    .stat .n { font-size: 48px; }
    .box h3, .box .t { font-size: 23px; }
}

/* the media strip narrows before it drops anything: the cards get tighter,
   then the arrows go (a thumb already swipes), then the label. The cards
   themselves never leave — they are the point of the band. */
@media (max-width: 1000px) {
    .mstrip-nav { display: none; }
}
@media (max-width: 760px) {
    .mstrip-label { display: none; }
    .mcard { width: 240px; padding: 12px 14px; }
    .mcard-thumb { width: 76px; height: 43px; }
    .mcard-t { font-size: 13px; }
}
@media (max-width: 520px) {
    .mcard { width: 214px; }
    .strip-nav { display: none; }
}

/* touch targets */
@media (hover: none) {
    .hdr-nav > a, .foot-col a, .chip, .seg button, .card-more, .aside-more {
        min-height: 44px; display: inline-flex; align-items: center;
    }
    .tag-link, .rail-item, .dark-item, .dark-link, .aside-item { min-height: 44px; }
    .mstrip-arrow { width: 44px; height: 44px; }
}

@media print {
    .site-header, .mstrip, .newsletter, .site-footer, .skip-link { display: none; }
    body { background: #fff; color: #000; }
}

/* =========================================================
   Page-specific classes.
   These replace what the reference pages carried inline.
   ========================================================= */

/* coverage board: date / story / format */
.board-head-story { grid-template-columns: 112px minmax(180px, 1fr) 120px; }

/* article hero (guides) */
.hero-article { padding: 26px 0 40px; }
.article-title {
    font-family: var(--display); font-weight: 700; font-size: 64px;
    line-height: .95; letter-spacing: .005em; text-transform: uppercase;
    max-width: 26ch; margin-bottom: 16px;
}

/* event detail */
.evt-hero { display: flex; flex-direction: column; gap: 20px; }
/* The frame sets the shape and the photo fills it. A min-height alone left
   the image floating in the middle of the striped placeholder with bands of
   it showing above and below. */
.evt-hero .frame { aspect-ratio: 16 / 9; }
.evt-hero .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evt-hero h1 {
    font-family: var(--display); font-weight: 700; font-size: 54px;
    line-height: .95; letter-spacing: .01em; text-transform: uppercase; max-width: 24ch;
}
.evt-lede { font-size: 17px; line-height: 1.75; color: var(--on-ink-body-2); max-width: 64ch; }
.evt-note { font-size: 16px; line-height: 1.75; color: var(--on-ink-mute); max-width: 64ch; }
.h-44 { font-size: 44px; }
.h-30 { font-size: 30px; }
.h-22 { font-size: 22px; }
.h-40 { font-size: 54px; }

/* Livestreams runs two equal columns — the schedule rows are wider than a
   feed row, and there is no newsletter module under them to take up slack. */
[data-page="livestreams"] .stage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* The schedule is usually the taller column, so the player panel sits at the
   top of the band rather than stretching to match it. */
[data-page="livestreams"] .stage-main { align-self: start; }
/* The stream's name is the headline of this page, so it sets larger. */
[data-page="livestreams"] .stage-copy h1 { font-size: 52px; }
[data-page="livestreams"] .stage-body { min-height: 0; }
@media (max-width: 900px) {
    [data-page="livestreams"] .stage-grid { grid-template-columns: 1fr; }
    [data-page="livestreams"] .stage-copy h1 { font-size: 40px; }
}

/* 404 */
.err-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.cards-tight { gap: 18px; }

/* sprinter van */
.spec { padding: 20px; gap: 5px; }
.spec .v { font-size: 16px; font-weight: 700; line-height: 1.35; }
.photo-card { min-height: 380px; display: block; overflow: hidden; }
.photo-card img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }

/* partner media-kit block */
.kit {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 32px; padding: 36px;
}
.kit p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); max-width: 44ch; }

/* submit-event */
.field-pair {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px;
}
.tiers { border: 0; padding: 0; margin: 14px 0 0; }
.tiers > legend { padding-bottom: 12px; }
.tier { padding: 20px; cursor: pointer; }
.tier .t { font-size: 21px; }
.tier-pick { display: flex; gap: 10px; align-items: baseline; }
.tier-pick input { width: auto; min-height: 0; }
.mt-14 { margin-top: 14px; }
.spacer-24 { height: 24px; }
.mt-22 { margin-top: 22px; }
.mt-40 { margin-top: 40px; }

/* =========================================================
   Remind me
   Ships as a plain link, becomes an inline form on click.
   Never a modal — the visitor stays exactly where they were.
   ========================================================= */
.remind-form {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%;
}
.remind-form input[type="email"] {
    flex: 1 1 190px; min-width: 0; min-height: 44px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 12px 14px; font-size: 15px;
}
.band-ink .remind-form input[type="email"],
.panel .remind-form input[type="email"],
.detail .remind-form input[type="email"] {
    background: var(--ink-panel); border-color: var(--ink-border); color: var(--on-ink);
}
.band-ink .remind-form input::placeholder,
.panel .remind-form input::placeholder,
.detail .remind-form input::placeholder { color: var(--on-ink-dim); }
.remind-form .btn { min-height: 44px; }
.remind-cancel {
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    min-height: 44px; padding: 0 6px;
}
.remind-cancel:hover { color: var(--text); }
.band-ink .remind-cancel, .panel .remind-cancel, .detail .remind-cancel { color: var(--on-ink-dim); }
.band-ink .remind-cancel:hover, .panel .remind-cancel:hover, .detail .remind-cancel:hover { color: var(--on-ink); }
.remind-note {
    flex: 1 1 100%;
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); margin: 0;
}
.band-ink .remind-note, .panel .remind-note, .detail .remind-note { color: var(--on-ink-dim); }
.remind-form .form-status { flex: 1 1 100%; }

.remind-done {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link);
}
.remind-done::before { content: "✓"; font-size: 13px; }
.band-ink .remind-done, .panel .remind-done, .detail .remind-done { color: var(--mint); }
.remind-done.is-compact { font-size: 9.5px; min-height: 36px; }

/* the compact variant sits inside a schedule row */
.remind-form.is-compact { gap: 6px; }
.remind-form.is-compact input[type="email"] { flex: 1 1 140px; min-height: 40px; padding: 9px 11px; font-size: 14px; }
.remind-form.is-compact .btn { padding: 10px 12px; font-size: 10px; min-height: 40px; }
.remind-form.is-compact .remind-note { display: none; }

/* the schedule row gains a third column for its own control */
.sched-row {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px;
    padding: 16px 20px; border-bottom: 1px solid var(--ink-row); align-items: center;
}
.sched-row:hover { background: var(--ink-panel-hi); }
.sched-row > a { display: contents; color: var(--on-ink); }
.sched-row .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sched-row .k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--amber-ink);
}
.sched-row .t {
    font-family: var(--body); font-weight: 700; font-size: 16.5px;
    line-height: 1.28; letter-spacing: -.008em; color: var(--on-ink);
}
.sched-row .sub {
    font-size: 13px; line-height: 1.55; color: var(--on-ink-mute);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sched-remind {
    background: transparent; border: 1px solid var(--ink-border); color: var(--on-ink);
    border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap; min-height: 40px;
}
.sched-remind:hover { border-color: var(--mint); color: var(--mint); }

@media (max-width: 760px) {
    .sched-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
    .sched-row .sched-remind, .sched-row .remind-form, .sched-row .remind-done {
        grid-column: 1 / -1;
    }
}

/* A video panel fills the frame the same way a photo does */
.frame.is-video { background: #000; }
.frame.is-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   Partner nav — the one dropdown on the site
   A hover/focus disclosure, not a scripted menu: the control
   itself is a link to the Partner overview, and the segment
   list underneath is a shortcut for people who already know
   which one they are. No JS, so it cannot break.
   ========================================================= */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.hdr-nav .btn-ghost .caret { margin-left: 7px; font-size: 9px; line-height: 1; opacity: .8; }

.nav-menu {
    display: none;
    position: absolute; top: 100%; right: 0; z-index: 60;
    margin-top: 10px; min-width: 244px;
    background: var(--ink-panel); border: 1px solid var(--ink-hair);
    border-radius: var(--r); padding: 8px 0;
    flex-direction: column;
}
/* Bridges the 10px gap so the pointer does not fall out of the group on its
   way down to the list. */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu { display: flex; }

.nav-menu-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-ink-dim); padding: 8px 18px 10px;
}
.hdr-nav .nav-menu a {
    display: block; padding: 11px 18px; color: var(--on-ink-body);
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.hdr-nav .nav-menu a:hover { background: var(--ink-panel-hi); color: var(--mint); }
/* One item in the menu is the headline product. */
.hdr-nav .nav-menu a.is-feature { color: var(--mint); }
.nav-menu-rule { display: block; height: 1px; background: var(--ink-hair); margin: 7px 0; }

/* The mint button lost its dark label to `.hdr-nav a`, which is more specific
   than `.btn-mint`. Put it back. */
.hdr-nav a.btn-mint { color: var(--on-mint); }

/* The Partner control is a button now, so the current-page rule for plain nav
   links does not reach it. */
.hdr-nav .btn-ghost[aria-current="page"] { border-color: var(--mint); color: var(--mint); }
.hdr-nav .btn-ghost[aria-current="page"]:hover { background: var(--mint); color: var(--on-mint); }

/* The breadcrumb sits inside the hero copy stack, which already has a gap.
   On the partner pages it is the only label above the headline, so it gets
   real separation instead of sitting on top of it. */
.hero-copy .crumb { padding-bottom: 0; margin-bottom: 10px; }
[data-page^="partner"] .hero-copy .crumb { margin-bottom: 18px; }
[data-page^="partner"] .hero-copy h1 { margin-bottom: 8px; }

/* =========================================================
   Segment nav — the in-page switcher on every partner page
   ========================================================= */
.seg-nav {
    max-width: var(--max); margin: 0 auto; padding: 22px var(--gut) 0;
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.seg-nav-label {
    font-family: var(--label); font-weight: var(--label-w); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.seg-nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.chip[aria-current="page"] { background: var(--text); color: var(--cream); border-color: var(--text); }

/* =========================================================
   Partner page components
   ========================================================= */

/* Six segment cards want three across on a wide page, not four-then-two. */
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
/* Five products want one row of five, not four and an orphan. */
.cards-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); }
.cards-5 .box { padding: 22px; }
.cards-5 .box h3 { font-size: 26px; }

/* Plain running prose outside an article — the argument sections on the
   partner pages. `.article` is for guides and carries its own furniture. */
.prose { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.prose p { font-size: 16.5px; line-height: 1.75; color: var(--text-body); }
.prose strong { font-weight: 700; color: var(--text); }
.band-ink .prose p { color: var(--on-ink-body-2); }

/* The site has no inline prose links anywhere else, so this is scoped to the
   places the partner pages actually use one. Underline, because green alone is
   not enough of a signal at body size. */
.prose a, .qa dd a, .kit p a, .pkg > p a, .pkgs-note a {
    color: var(--link); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    text-decoration-color: var(--line);
}
.prose a:hover, .qa dd a:hover, .kit p a:hover, .pkg > p a:hover, .pkgs-note a:hover {
    text-decoration-color: var(--link);
}
.band-ink .prose a { color: var(--mint); text-decoration-color: var(--ink-border); }
.band-ink .prose a:hover { text-decoration-color: var(--mint); }

/* The package comparison. One row per thing we deliver, one column per tier,
   quantities in the cells, so a buyer compares like with like instead of
   reading "Residency and up". The Residency column carries the mint wash,
   because it is the one we want most people to buy. Scrolls sideways inside
   its own frame on a phone rather than pushing the page wider. */
.tiers-wrap {
    /* Positioned, so the visually hidden labels in the cells (.vh is
       position: absolute) are contained by the scrolling frame instead of
       escaping it and widening the page. */
    position: relative;
    overflow-x: auto; background: var(--surface);
    border: 1px solid var(--card-border); border-radius: var(--r);
}
.tiers { width: 100%; min-width: 760px; border-collapse: collapse; }
.tiers th, .tiers td {
    padding: 16px 20px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--row-div); font-size: 14.5px; line-height: 1.45;
}
.tiers thead th {
    font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1;
    letter-spacing: .01em; text-transform: uppercase; color: var(--text);
    background: var(--surface-hi); border-bottom: 1px solid var(--card-border);
    padding-top: 20px; padding-bottom: 18px;
}
.tiers thead th span {
    display: block; margin-top: 8px;
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px;
    letter-spacing: .1em; color: var(--muted);
}
.tiers tbody th { width: 28%; font-weight: 600; color: var(--text); }
.tiers td { color: var(--text-2); }
.tiers tbody tr:last-child > * { border-bottom: 0; }
.tiers .is-lead { background: var(--mint-tint); }
.tiers thead th.is-lead { color: var(--link); background: var(--mint-tint); }
.tiers .yes { color: var(--link); font-weight: 700; }
.tiers .no { color: var(--line); }

/* Package example — a bundle with its line items shown, so the price is
   arithmetic rather than an assertion. */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.pkg {
    background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r);
    padding: 30px; display: flex; flex-direction: column; gap: 16px;
}
.pkg.is-lead { border-color: var(--link); }
.pkg h3 {
    font-family: var(--display); font-weight: 700; font-size: 34px;
    line-height: 1.0; letter-spacing: .01em; text-transform: uppercase;
}
.pkg > p { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.pkg ul { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.pkg li {
    font-size: 14.5px; line-height: 1.5; color: var(--text);
    padding: 11px 0 11px 22px; border-bottom: 1px solid var(--row-div); position: relative;
}
.pkg li::before { content: "•"; position: absolute; left: 4px; color: var(--link); }
.pkg li:last-child { border-bottom: 0; }
/* Stacked, not inline: a price is often a range here, and a range set beside
   its unit either shrinks or wraps badly. */
.pkg .price {
    margin-top: auto; padding-top: 18px; border-top: 1px solid var(--card-border);
    display: flex; flex-direction: column; gap: 7px;
}
.pkg .price .n {
    font-family: var(--display); font-weight: 700; font-size: 40px;
    line-height: .95; letter-spacing: .01em; text-transform: uppercase;
}
.pkg .price .u {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); line-height: 1.5;
}
/* Four tiers across a full page: the numbers are ranges, so they set smaller. */
.pkgs-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 278px), 1fr)); }
.pkgs-4 .pkg h3 { font-size: 30px; }
.pkgs-4 .price .n { font-size: 30px; }
.pkg .btn { margin-top: 4px; }
/* The way in under the tiers, for somebody with one night to sell. */
.pkgs-note { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

/* Two calls to action in a hero: the prices, or a conversation. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Question and answer — objections, answered in the open */
.qa { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); overflow: hidden; }
.qa > div { padding: 24px 26px; border-bottom: 1px solid var(--row-div); }
.qa > div:last-child { border-bottom: 0; }
.qa dt {
    font-family: var(--display); font-weight: 600; font-size: 25px;
    line-height: 1.05; letter-spacing: .015em; text-transform: uppercase; margin-bottom: 8px;
}
.qa dd { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text-2); max-width: 78ch; }

/* A short list of plain assertions on an ink band */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 26px; }
.claim { display: flex; flex-direction: column; gap: 10px; }
.claim .k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mint);
}
.claim .t {
    font-family: var(--display); font-weight: 600; font-size: 27px;
    line-height: 1.03; letter-spacing: .015em; text-transform: uppercase; color: var(--on-ink);
}
.claim p { font-size: 15px; line-height: 1.7; color: var(--on-ink-body); }
/* A dark band that carries its own vertical rhythm, since `.sec` inside it is
   flush. `.sec` pads on the top only and relies on the next section's padding
   for the gap below it — a full-bleed band is not a `.sec`, so it has to bring
   its own top margin or it butts straight into the card above. */
.band-pad { margin-top: 52px; padding: 54px 0 58px; }

/* =========================================================
   Partner pages are a pitch, not a listing.

   The rest of the site is a working surface — dense on purpose, because
   somebody is scanning it for a date. These pages are being read once, by
   somebody deciding whether to spend money, and density reads as cheap. So
   they run on a wider rhythm: bigger gaps between sections, a hero lede at
   reading size rather than caption size, and enough air around a number that
   it registers as the point rather than as a footnote.

   Scoped to the section so nothing else on the site moves.
   ========================================================= */
[data-page^="partner"] .sec { padding-top: 78px; }
[data-page^="partner"] .sec-tight { padding-top: 44px; }
[data-page^="partner"] .sec-head { padding-bottom: 30px; }
[data-page^="partner"] .band-pad { margin-top: 78px; padding: 74px 0 78px; }

[data-page^="partner"] .hero-tall { padding: 88px 0 84px; }
[data-page^="partner"] .hero-copy { gap: 18px; }
[data-page^="partner"] .hero-copy p { font-size: 20.5px; line-height: 1.65; max-width: 56ch; }

/* Display type runs a step larger through the whole section. Antonio is
   condensed enough to take it, and a pitch page is read from further back
   than a listing page is. */
[data-page^="partner"] .hero-copy h1 { font-size: 96px; }
[data-page^="partner"] .sec-head h2 { font-size: 58px; }
[data-page^="partner"] .dsp.h-44 { font-size: 58px; }
[data-page^="partner"] .dsp.h-40 { font-size: 62px; }
[data-page^="partner"] .stat .n { font-size: 78px; }
[data-page^="partner"] .box h3, [data-page^="partner"] .box .t { font-size: 33px; }
[data-page^="partner"] .cards-5 .box h3 { font-size: 27px; }
[data-page^="partner"] .claim .t { font-size: 31px; }
[data-page^="partner"] .tiers thead th { font-size: 30px; }
[data-page^="partner"] .qa dt { font-size: 29px; }
[data-page^="partner"] .pkg h3 { font-size: 38px; }
[data-page^="partner"] .pkgs-4 .pkg h3 { font-size: 33px; }
[data-page^="partner"] .step h3 { font-size: 30px; }

[data-page^="partner"] .prose { gap: 20px; max-width: 64ch; }
[data-page^="partner"] .prose p { font-size: 17.5px; line-height: 1.8; }

[data-page^="partner"] .split { gap: 34px; }
[data-page^="partner"] .cards { gap: 24px; }
[data-page^="partner"] .box { padding: 34px; }
[data-page^="partner"] .cards-5 .box { padding: 24px; }
[data-page^="partner"] .claims { gap: 40px; }
[data-page^="partner"] .claim { gap: 12px; }
[data-page^="partner"] .claim p { font-size: 15.5px; line-height: 1.75; }
[data-page^="partner"] .stat { padding: 44px 34px; }
[data-page^="partner"] .step { padding: 30px 32px; }
[data-page^="partner"] .pkg { padding: 34px; gap: 18px; }
[data-page^="partner"] .kit { padding: 44px; gap: 40px; }

/* The line that has to land. It is the first thing anyone reads about who we
   are, so it gets the width and the size of a statement rather than a caption. */
/* Sized in px, not ch: `ch` on this element resolves against Karla, while the
   text inside is Antonio, so a ch-based cap collapses the quote into a column
   one word wide. */
[data-page^="partner"] .pull { max-width: 1020px; border-left-width: 5px; padding: 4px 0 4px 34px; }
[data-page^="partner"] .pull p { font-size: 52px; line-height: 1.06; letter-spacing: .01em; }

[data-page^="partner"] .seg-nav { padding-top: 30px; gap: 20px; }
[data-page^="partner"] .seg-nav .chip { font-size: 11px; padding: 11px 15px; }

@media (max-width: 1180px) {
    [data-page^="partner"] .hero-copy h1 { font-size: 78px; }
    [data-page^="partner"] .pull p { font-size: 42px; }
}
@media (max-width: 900px) {
    [data-page^="partner"] .sec { padding-top: 54px; }
    [data-page^="partner"] .band-pad { margin-top: 54px; padding: 50px 0 54px; }
    [data-page^="partner"] .hero-tall { padding: 48px 0 46px; }
    [data-page^="partner"] .hero-copy h1 { font-size: 58px; }
    [data-page^="partner"] .hero-copy p { font-size: 17px; }
    [data-page^="partner"] .sec-head h2 { font-size: 46px; }
    [data-page^="partner"] .dsp.h-44, [data-page^="partner"] .dsp.h-40 { font-size: 40px; }
    [data-page^="partner"] .stat .n { font-size: 56px; }
    [data-page^="partner"] .pull p { font-size: 32px; }
    [data-page^="partner"] .pull { max-width: none; padding-left: 20px; }
    [data-page^="partner"] .kit { padding: 26px; gap: 28px; }
    [data-page^="partner"] .box { padding: 26px; }
    [data-page^="partner"] .box h3, [data-page^="partner"] .box .t { font-size: 28px; }
    [data-page^="partner"] .pkg h3, [data-page^="partner"] .pkgs-4 .pkg h3 { font-size: 30px; }
}

@media (max-width: 1000px) {
    /* In the stacked menu the group is a heading and its segments are rows —
       no disclosure, because there is nothing to hover. */
    .js .hdr-nav > .nav-group {
        display: flex; flex-direction: column; align-items: stretch; position: static;
    }
    .js .hdr-nav .btn-ghost { justify-content: center; margin-top: 12px; min-height: 48px; }
    .js .nav-menu {
        display: flex; position: static; margin-top: 2px; min-width: 0;
        background: transparent; border: 0; border-radius: 0; padding: 0;
    }
    .js .nav-menu::before { display: none; }
    .js .nav-menu-label { display: none; }
    /* Nothing to disclose in the stacked menu — the segments are already rows. */
    .js .hdr-nav .btn-ghost .caret { display: none; }
    .js .hdr-nav .nav-menu a {
        min-height: 46px; display: flex; align-items: center;
        padding: 10px 0 10px 16px; border-bottom: 1px solid var(--ink-hair);
    }
    .js .hdr-nav .nav-menu a:hover { background: transparent; }
}

@media (max-width: 900px) {
    .pkg h3 { font-size: 28px; }
    .pkg .price .n { font-size: 34px; }
}

@media (max-width: 760px) {
    .qa > div { padding: 20px; }
    .qa dt { font-size: 21px; }
    .pkg { padding: 22px; }
}

/* =========================================================
   Merch (merch.html)

   The one page on the site that sells a physical thing. It is built
   from the house parts (hero band, section heads, chips, buttons);
   the only new thing is the product tile.

   The art is drawn, not photographed: a garment silhouette in the
   product's colourway on a light "studio" sweep, with the print set
   in the house faces. The colourways below are the products' own
   colours, not interface colours, and they live only in this block.
   Sizes inside the tile are in cqw, so the print scales with the
   tile and stays put on the garment at every width.
   ========================================================= */
[data-page="merch"] { --studio: #DCD7CC; }

.merch-art {
    position: relative; display: block; aspect-ratio: 1 / 1;
    background: var(--studio); border-radius: var(--r); overflow: hidden;
    container-type: inline-size;
    color: var(--g);
}
.merch-g { position: absolute; inset: 7%; width: 86%; height: 86%; fill: currentColor; }
.merch-g > path:first-child { stroke: #000; stroke-opacity: .1; stroke-width: 3; }
.merch-g .shade { fill: #000; fill-opacity: .1; stroke: none; }
.merch-g .seam { fill: none; stroke: #000; stroke-opacity: .2; stroke-width: 8; stroke-linecap: round; }

/* Where the print sits on each kind of thing. */
.merch-art[data-g="tee"]    { --pt: 30%; --pw: 32%; }
.merch-art[data-g="tank"]   { --pt: 38%; --pw: 30%; }
.merch-art[data-g="hoodie"] { --pt: 37%; --pw: 28%; }
.merch-art[data-g="cap"]    { --pt: 43%; --pw: 26%; }
.merch-art[data-g="koozie"] { --pt: 42%; --pw: 22%; --pl: 59.5%; }

.merch-print {
    position: absolute; top: var(--pt, 30%); left: var(--pl, 50%); transform: translateX(-50%);
    width: var(--pw, 30%);
    display: flex; flex-direction: column; align-items: center; gap: 1.1cqw;
    color: var(--p); text-align: center; text-transform: uppercase;
}
.merch-print .big,
.merch-print .big-s,
.merch-print .big-xl { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
.merch-print .big    { font-size: 6.4cqw; line-height: .92; }
.merch-print .big-s  { font-size: 5.2cqw; line-height: .92; }
.merch-print .big-xl { font-size: 10cqw; line-height: .86; }
.merch-print .sm {
    font-family: var(--label); font-weight: 700; font-size: 1.8cqw;
    letter-spacing: .16em; white-space: nowrap;
}
.merch-print .box {
    font-family: var(--display); font-weight: 700; font-size: 4.4cqw; line-height: 1;
    letter-spacing: .06em; border: .55cqw solid currentColor; padding: .4cqw 1.6cqw .6cqw;
}
.merch-print .box.is-mint { color: var(--mint); }
.merch-print .heat { display: flex; gap: .5cqw; }
.merch-print .heat i {
    font-style: normal; font-family: var(--label); font-weight: 700; font-size: 1.3cqw;
    letter-spacing: .04em; padding: .6cqw .7cqw; border-radius: .6cqw; color: #FFF;
}
.merch-print .heat i:nth-child(1) { background: #E9B949; color: #2A1D16; }
.merch-print .heat i:nth-child(2) { background: #EE8A3A; color: #2A1D16; }
.merch-print .heat i:nth-child(3) { background: #DD4A2A; }
.merch-print .heat i:nth-child(4) { background: #B0271F; }
.merch-print .heat i:nth-child(5) { background: #4B1010; }

/* Colourways: --g is the garment, --p is the ink printed on it. */
.c-midnight { --g: #1F2635; --p: #EFE9DC; }
.c-pink     { --g: #F3B7CA; --p: #8C1D4F; }
.c-bone     { --g: #EEE7D8; --p: #2A1D16; }
.c-black    { --g: #1A1C1E; --p: #EFEDE7; }
.c-charcoal { --g: #3B3E43; --p: #EFEDE7; }
.c-khaki    { --g: #C8AE7A; --p: #1F1A10; }
.c-hotpink  { --g: #E4578E; --p: #FFF3F7; }
.c-white    { --g: #F7F5F0; --p: #D6457F; }
.c-sand     { --g: #D8C29D; --p: #3A2618; }
.c-navy     { --g: #22304F; --p: #E8B64C; }
.c-gold     { --g: #D9A93C; --p: #1B1406; }

/* The sticker pack is four stickers, not a garment. */
.stk {
    position: absolute; display: grid; place-items: center; text-align: center;
    font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .9;
    border: 1.1cqw solid #FFF; border-radius: 3cqw;
    box-shadow: 0 1.2cqw 2.4cqw rgba(0, 0, 0, .18);
}
.stk-1 { left: 12%; top: 15%; width: 40%; height: 25%; background: #E4578E; color: #FFF; font-size: 8.5cqw; text-transform: none; transform: rotate(-8deg); }
.stk-2 { right: 11%; top: 19%; width: 34%; height: 34%; border-radius: 50%; background: #1F2635; color: #E8B64C; font-size: 6.2cqw; padding: 0 3cqw; transform: rotate(7deg); }
.stk-3 { left: 18%; bottom: 13%; width: 30%; height: 30%; background: var(--mint); color: var(--on-mint); font-size: 11cqw; transform: rotate(4deg); }
.stk-4 { right: 13%; bottom: 19%; width: 36%; height: 17%; background: #C4302B; color: #FFF; font-size: 6cqw; transform: rotate(-5deg); }

/* ---- the card ---- */
.merch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; }
.merch-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.merch-frame { position: relative; }
.merch-badge {
    position: absolute; left: 12px; top: 12px; z-index: 1;
    padding: 6px 10px; border-radius: var(--r-sm);
    background: var(--ink); color: var(--on-ink);
    font-family: var(--label); font-weight: var(--label-w-strong); font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase;
}
.merch-badge.is-save  { left: auto; right: 12px; background: var(--mint); color: var(--on-mint); }
.merch-badge.is-live  { background: #C4302B; color: #FFF; }
.merch-badge.is-count { left: auto; right: 12px; }
.merch-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.merch-k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--link);
}
.merch-name { font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--text); }
.merch-colour { font-size: 13.5px; color: var(--text-3); }
.merch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 12px;
}
.merch-price {
    font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.merch-price s { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 4px; }

.merch-filters { margin-bottom: 28px; }
.merch-filters .chip .n { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.merch-filters .chip[aria-pressed="true"] .n { color: inherit; opacity: .6; }
.merch-note { margin-top: 32px; font-size: 14px; line-height: 1.6; color: var(--text-3); }

/* ---- the drop ---- */
.merch-drop {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow: hidden;
}
/* The tile stays square, centred on a sweep that fills the half, so the
   print lands on the shirt at any width. */
.merch-drop-media {
    position: relative; min-height: 440px;
    display: grid; place-items: center; background: var(--studio);
}
.merch-drop-media .merch-art { width: min(100%, 540px); border-radius: 0; background: transparent; }
.merch-drop-media .merch-badge { left: 18px; top: 18px; }
.merch-drop-media .merch-badge.is-count { left: auto; right: 18px; }
.merch-drop-body {
    padding: 52px 56px; display: flex; flex-direction: column; justify-content: center;
    gap: 16px; align-items: flex-start;
}
.merch-drop-body h2 {
    font-family: var(--display); font-weight: 700; font-size: 76px;
    line-height: .92; letter-spacing: 0; text-transform: uppercase;
}
.merch-drop-body p { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 42ch; }
.merch-drop-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---- the four answers ---- */
.merch-perks {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r);
}
.merch-perks li { padding: 22px 26px; display: flex; flex-direction: column; gap: 4px; }
.merch-perks li + li { border-left: 1px solid var(--card-border); }
.merch-perks b { font-size: 15.5px; font-weight: 700; color: var(--text); }
.merch-perks span { font-size: 13.5px; line-height: 1.5; color: var(--text-3); }

/* ---- the squad order ---- */
.merch-squad {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center;
    background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r);
    padding: 52px 56px;
}
.merch-squad-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.merch-squad-copy h2 {
    font-family: var(--display); font-weight: 700; font-size: 58px;
    line-height: .93; text-transform: uppercase;
}
.merch-squad-copy p { font-size: 16.5px; line-height: 1.65; color: var(--text-2); max-width: 44ch; margin-bottom: 6px; }
.merch-tiers { border-top: 1px solid var(--row-div); }
.merch-tiers li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid var(--row-div);
}
.merch-tiers .k {
    font-family: var(--label); font-weight: var(--label-w); font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.merch-tiers .v { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; text-transform: uppercase; }
.merch-tiers li:last-child .v { color: var(--link); }

@media (max-width: 1100px) {
    .merch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .merch-drop, .merch-squad { grid-template-columns: minmax(0, 1fr); }
    .merch-drop-media { min-height: 0; }
    .merch-drop-body { padding: 30px 24px 32px; }
    .merch-drop-body h2 { font-size: 54px; }
    .merch-squad { padding: 30px 24px; gap: 26px; }
    .merch-squad-copy h2 { font-size: 44px; }
    .merch-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .merch-perks li:nth-child(3) { border-left: 0; }
    .merch-perks li:nth-child(n+3) { border-top: 1px solid var(--card-border); }
}
@media (max-width: 760px) {
    .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
    .merch-name { font-size: 16px; }
    .merch-price { font-size: 24px; }
    .merch-row { flex-wrap: wrap; gap: 10px; }
    .merch-perks li { padding: 16px 18px; }
}
@media (max-width: 420px) {
    .merch-perks { grid-template-columns: minmax(0, 1fr); }
    .merch-perks li + li { border-left: 0; border-top: 1px solid var(--card-border); }
}