/* ============================================================
   WINNOW — Design system · public.css
   Public / streaming pages only (landing, teasers, story pages,
   for-screenwriters, error pages). Dark cinematic canvas, wine
   gradients, marquee ribbon.
   Requires core.css loaded first. Never combine with private.css.
   ============================================================ */

/* .site-header is sticky, so an in-page anchor (#faq, #journey, …) would otherwise land
   underneath it. Keep this above the header's ~76px height. */
html { scroll-padding-top: 6rem; }

body {
    --focus-ring: var(--cream);
    background: var(--black);
    color: var(--cream);
}

/* light sections flip the focus ring back to wine */
.featured,
.how-voting,
.features,
.journey--light,
.faq-section {
    --focus-ring: var(--wine);
}

/* ------------------------------------------------------------
   Layout helpers + section heads
   ------------------------------------------------------------ */
.section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* Lead paragraph under a section title. Not a bare `.section-head p` rule —
   the chip above the title is a <p> too and must keep its own styling. */
.section-sub {
    max-width: 60ch;
    margin-inline: auto;
    font-size: 0.98rem;
    color: var(--ink-65);
}

/* Dark-canvas sections flip it to cream. */
.journey:not(.journey--light) .section-sub,
.leaderboard .section-sub {
    color: var(--cream-70);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ink);
    /* 30ch, not 26 — "Talent shouldn't need connections." is the longest title
       the design holds on one line, and 26ch broke it. Everything longer than
       that still wraps, just into more even halves. */
    max-width: 30ch;
}
.section-title--dark { color: var(--cream); }

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

/* ------------------------------------------------------------
   SPLIT — a section's lede set beside a supporting photograph
   instead of centred under the title. Collapses to one column,
   copy first, on narrow viewports.
   ------------------------------------------------------------ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* .section-sub centres itself under a section head. In a split it is a
   column, so it takes the column's width and its left edge. */
.split-copy .section-sub {
    margin-inline: 0;
    max-width: none;
    text-align: left;
}
.split-copy .section-sub + .section-sub { margin-top: var(--space-2); }

.split-media {
    display: block;
    width: 100%;
    /* height:auto is load-bearing — the width/height attributes on the <img>
       are presentational hints that pin both dimensions, which makes the
       browser ignore aspect-ratio entirely. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* ============================================================
   MEDIA BANDS — photographic and video section backgrounds

   Opt-in. Add .band-media to a section and point --band-image at
   the asset; the scrim gradient is painted *over* the photograph so
   display copy keeps its contrast no matter how bright the frame is.
   A section that needs a different weight overrides --band-scrim.

   .band-video is the same idea for a looping clip: the <video> is a
   real element (a background can't hold one), so the scrim moves to
   ::after and the content needs its own stacking level above both.
   ============================================================ */
/* Defaults live at single-class specificity so a section's own --band-*
   modifier, declared later in this file, can override them. */
.band-media {
    /* Dark at the top (the sticky header sits over it) and at the
       bottom (where the band meets the next section), open through
       the middle so the frame still reads as a photograph. */
    --band-scrim: linear-gradient(180deg,
        rgba(8, 0, 3, 0.90) 0%,
        rgba(8, 0, 3, 0.34) 26%,
        rgba(8, 0, 3, 0.48) 68%,
        rgba(8, 0, 3, 0.94) 100%);
}

/* The doubled class is deliberate. .hero, .journey, .writers and .vote-root
   each set their own flat `background`, all at single-class specificity and
   all further down this file — so on source order they would win and paint
   over the photograph. Doubling puts the band above them without every one
   of those rules having to remember a :not() guard. */
.band-media.band-media {
    background-color: var(--burgundy-deep);
    background-image: var(--band-scrim), var(--band-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Same reasoning as .band-media above. The clip is an element rather than a
   background, so there is no background-image to paint — none it is, or the
   section's own gradient would sit behind the video, invisible and decoded
   for nothing. */
.band-video.band-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--burgundy);
    background-image: none;
}

.band-video-clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.band-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--band-scrim, linear-gradient(180deg,
        rgba(8, 0, 3, 0.82) 0%,
        rgba(8, 0, 3, 0.42) 40%,
        rgba(8, 0, 3, 0.86) 100%));
}

/* Lift the content above both the clip and the scrim. Scoped away from the
   clip itself, which must stay absolutely positioned. */
.band-video > *:not(.band-video-clip) { position: relative; z-index: 2; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(19, 8, 12, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(253, 243, 222, 0.1);
}

.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0.7rem var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.brand img { width: 60px; height: auto; }

/* pill nav, centered — echoes the approved header */
.site-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0 auto;
    padding: 0.28rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(253, 243, 222, 0.08);
    border-radius: 999px;
}
.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--cream-70);
    padding: 0.42rem 1.05rem;
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link:hover {
    color: var(--cream);
    background: rgba(253, 243, 222, 0.08);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.signin-link {
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-body);
    text-decoration: none;
    color: var(--cream-70);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}
.signin-link:hover { color: var(--cream); }

/* ============================================================
   HERO — wine gradient, like the approved landing.
   A .band-media hero (the landing, /for-screenwriters) paints a
   photograph over this gradient instead.
   ============================================================ */
.hero {
    text-align: center;
    background:
        radial-gradient(110% 90% at 50% 0%, rgba(133, 32, 56, 0.55), transparent 70%),
        linear-gradient(180deg, #5c1124 0%, var(--burgundy) 55%, var(--burgundy-deep) 100%);
}

/* Landing hero — night shoot on a burning set. A centred radial
   pocket sits under the headline block so the display type has a
   dark field to land on while the rig lights at either edge stay
   visible; the band then closes to black where it meets the cream
   section below. */
.hero--film {
    --band-image: image-set(
        url("/static/img/landing/hero-1376-6f8f9e61b972fc2e0896e51f9d3a326d.webp") type("image/webp"),
        url("/static/img/landing/hero-1376-2b438ea2da2c9a6f52709705b5d2c315.jpg") type("image/jpeg"));
    --band-scrim:
        radial-gradient(68% 74% at 50% 48%,
            rgba(20, 1, 7, 0.88) 0%,
            rgba(20, 1, 7, 0.52) 52%,
            rgba(20, 1, 7, 0) 80%),
        linear-gradient(180deg,
            rgba(4, 0, 2, 0.94) 0%,
            rgba(4, 0, 2, 0.26) 20%,
            rgba(4, 0, 2, 0.34) 58%,
            var(--black) 100%);
}

/* /for-screenwriters hero — a soundstage mid-take, brighter and busier than
   the landing frame, so this one only needs a plain darkening pass rather
   than a centred pocket. */
.hero--stage {
    --band-image: image-set(
        url("/static/img/screenwriters/hero-1800-6fb39bb93895b02340a97acbc4fe6510.webp") type("image/webp"),
        url("/static/img/screenwriters/hero-1800-d2fa29c82930d98de7feeb54cd70488e.jpg") type("image/jpeg"));
    --band-scrim: linear-gradient(180deg,
        rgba(6, 0, 2, 0.92) 0%,
        rgba(6, 0, 2, 0.46) 24%,
        rgba(6, 0, 2, 0.54) 66%,
        rgba(6, 0, 2, 0.92) 100%);
}

/* /voting hero — someone watching a cut in a living room. The lit TV lands
   dead centre, exactly under the headline and lede, and a flat vertical
   scrim leaves the body copy sitting in its highlights. Hence the centred
   pocket, as on the landing: darkest over the screen, open at the lamps. */
.hero--living-room {
    --band-image: image-set(
        url("/static/img/voting/hero-1800-72f1d76faa0a3bbdd5a5c68ad7f84da7.webp") type("image/webp"),
        url("/static/img/voting/hero-1800-56d0d01f979f0b32849a7a725e672c92.jpg") type("image/jpeg"));
    --band-scrim:
        radial-gradient(70% 80% at 50% 54%,
            rgba(14, 1, 5, 0.88) 0%,
            rgba(14, 1, 5, 0.54) 52%,
            rgba(14, 1, 5, 0) 82%),
        linear-gradient(180deg,
            rgba(8, 1, 3, 0.90) 0%,
            rgba(8, 1, 3, 0.32) 22%,
            rgba(8, 1, 3, 0.38) 64%,
            rgba(8, 1, 3, 0.90) 100%);
}

.hero-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.hero-logo {
    width: 190px;
    height: auto;
    margin-bottom: var(--space-2);
}

.hero-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hero-sub {
    max-width: 580px;
    color: var(--cream-70);
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
}

/* Hero's third CTA — a sentence, not a button, so it sits under the
   action row without competing with it. */
.hero-tertiary {
    color: var(--cream-70);
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.15s;
}

.hero-tertiary:hover {
    color: var(--cream);
}

/* ============================================================
   PAGE HERO — compact wine band for inner pages
   (browse, leaderboard, teaser detail head)
   ============================================================ */
.page-hero {
    background:
        radial-gradient(120% 130% at 50% 0%, rgba(133, 32, 56, 0.45), transparent 70%),
        linear-gradient(180deg, #4d0e1e 0%, var(--burgundy-deep) 100%);
}

.page-hero-inner {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.page-sub {
    max-width: 560px;
    color: var(--cream-70);
    font-size: 1rem;
}

.votes-remaining {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream-70);
    border: 1px solid rgba(253, 243, 222, 0.32);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    margin-top: var(--space-1);
    white-space: nowrap;
}
.votes-remaining svg { width: 16px; height: 16px; color: var(--cream); }
.votes-remaining strong { color: var(--cream); font-weight: 500; }

.page-hero .btn { margin-top: var(--space-1); }

/* ============================================================
   FEATURED TEASERS — cream section, unboxed cards
   ============================================================ */
.featured {
    background: var(--cream);
    color: var(--ink);
    padding: var(--space-6) 0;
}

.teaser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.teaser-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}
.teaser-card:hover { transform: translateY(-4px); }

/* --- poster art --- */
.poster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 3 / 4;
    padding: 1.4rem 1rem;
    text-decoration: none;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(21, 8, 9, 0.12);
    transition: box-shadow 0.2s ease;
    /* default art for unmapped categories */
    background: linear-gradient(160deg, #5c3a45 0%, #2e1a20 60%, #1a0f13 100%);
}
.teaser-card:hover .poster {
    box-shadow: 0 14px 30px -14px rgba(21, 8, 9, 0.4);
}

/* per-category gradient art (class derived from the category name) */
.poster--drama     { background: linear-gradient(160deg, #35586a 0%, #16303c 60%, #102028 100%); }
.poster--sci-fi    { background: linear-gradient(160deg, #4d2c60 0%, #241539 60%, #150d24 100%); }
.poster--thriller  { background: linear-gradient(160deg, #632a33 0%, #2c1418 60%, #1a0c0f 100%); }
.poster--adventure { background: linear-gradient(160deg, #3c6153 0%, #1b332a 60%, #12211c 100%); }
.poster--crime     { background: linear-gradient(160deg, #3f4a5a 0%, #1d242e 60%, #12161d 100%); }
.poster--comedy    { background: linear-gradient(160deg, #8a6a2f 0%, #4a3416 60%, #2b1e0d 100%); }
.poster--horror    { background: linear-gradient(160deg, #3a2430 0%, #1c1018 60%, #100a0e 100%); }

/* --- real trailer thumbnail (Task 39), in place of a gradient poster --- */
.poster-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.poster--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 9, 11, 0.15) 0%, rgba(16, 9, 11, 0.8) 100%);
    z-index: 1;
}
.poster > .poster-presents,
.poster > .poster-title,
.poster > .poster-pen,
.poster > .poster-play {
    position: relative;
    z-index: 2;
}

.poster-presents {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cream-45);
    margin-bottom: auto;
}

.poster-title {
    font-family: var(--font-poster);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.12;
    color: var(--cream);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.poster-pen {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-45);
    margin-top: 0.75rem;
    margin-bottom: auto;
}

.poster-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(253, 243, 222, 0.5);
    color: var(--cream);
    background: rgba(12, 11, 12, 0.4);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.poster-play svg { width: 17px; height: 17px; margin-left: 2px; }
.poster:hover .poster-play {
    background: var(--wine);
    border-color: var(--wine);
    transform: scale(1.08);
}

/* --- card body --- */
.teaser-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-2) 0.25rem 0;
    flex: 1;
}

.teaser-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}
.teaser-title a {
    text-decoration: none;
    transition: color 0.15s ease;
}
.teaser-title a:hover { color: var(--wine); }

.teaser-meta {
    font-size: 0.8rem;
    color: var(--ink-45);
}

.teaser-logline {
    font-size: 0.88rem;
    color: var(--ink-65);
    flex: 1;
}

.teaser-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    margin-top: 0.6rem;
}

.votes {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wine);
}

.view-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wine);
    transition: color 0.15s ease;
}
.view-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   BROWSE — filter bar + results on cream
   ============================================================ */
/* Dark since the shelves design: the rows run into the hero's maroon. */
.browse-results {
    background: var(--maroon-ink);
    color: var(--cream);
    padding: var(--space-5) 0 var(--space-6);
}

.filter-bar {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--ink-line);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-field label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-65);
}

.filter-field select,
.filter-field input {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--card-bg);
    border: 1px solid var(--field-line);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    min-width: 170px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-field select:focus,
.filter-field input:focus {
    outline: none;
    border-color: var(--wine);
    box-shadow: 0 0 0 3px rgba(107, 21, 41, 0.12);
}

.filter-apply {
    background: transparent;
    color: var(--ink);
    border-color: rgba(21, 8, 9, 0.3);
}
.filter-apply:hover {
    border-color: var(--ink);
    background: rgba(21, 8, 9, 0.04);
}

/* The same bar on a dark section (/vote) */
.filter-bar--dark { border-bottom-color: var(--cream-line); }
.filter-bar--dark .filter-field label { color: var(--cream-70); }
.filter-bar--dark .filter-apply {
    color: var(--cream);
    border-color: rgba(253, 243, 222, 0.3);
}
.filter-bar--dark .filter-apply:hover {
    border-color: var(--cream);
    background: rgba(253, 243, 222, 0.06);
}

/* empty results notice — cream context by default */
.empty-state {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--ink-65);
    text-align: center;
    padding: var(--space-5) var(--space-3);
    border: 1.5px dashed var(--field-line);
    border-radius: var(--radius-card);
}
.empty-state--dark {
    color: var(--cream-70);
    border-color: var(--cream-line);
}

/* ============================================================
   HOW VOTING WORKS — plain columns on cream
   ============================================================ */
.how-voting {
    background: var(--cream);
    color: var(--ink);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--ink-line);
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 980px;
    margin: 0 auto;
}

.rule { text-align: center; }

.rule-no {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--wine);
    margin-bottom: 0.8rem;
}

.rule-title {
    font-size: 1.08rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
}

.rule-desc {
    font-size: 0.9rem;
    color: var(--ink-65);
    max-width: 34ch;
    margin: 0 auto;
}

/* ============================================================
   LEADERBOARD — dark panel, FAQ-card styling
   ============================================================ */
/* /voting's leaderboard band — a cinema seen from the back row, the screen
   the only light in it. Nearly black through the centre where the copy sits,
   so the scrim is almost all warm lift and very little veil. */
.leaderboard--screening {
    --band-image: image-set(
        url("/static/img/voting/screening-1920-7ce467f6d3ae656651d4aa16fae03605.webp") type("image/webp"),
        url("/static/img/voting/screening-1920-43c44c2cabf796d3f5857ddd3f950abd.jpg") type("image/jpeg"));
    --band-scrim:
        linear-gradient(180deg,
            rgba(18, 2, 8, 0.70) 0%,
            rgba(18, 2, 8, 0.26) 30%,
            rgba(18, 2, 8, 0.32) 70%,
            rgba(18, 2, 8, 0.76) 100%),
        radial-gradient(84% 96% at 50% 48%, rgba(154, 26, 42, 0.52), transparent 74%);

    background-blend-mode: normal, screen, normal;
    background-color: var(--burgundy-deep);
}

.leaderboard {
    background: var(--maroon-ink);
    padding: var(--space-6) 0;
}

/* Maroon-ink and burgundy-deep are two shades apart, so a leaderboard band
   sitting directly under the journey reads as one continuous section. Only
   /voting stacks them; on home a cream band separates the two. */
.journey + .leaderboard {
    border-top: 1px solid var(--cream-line);
}

.lb-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 1rem var(--space-3);
    background: var(--burgundy);
    border-radius: 12px;
    transition: background-color 0.15s ease;
}
.lb-row:hover { background: #4d0e1d; }

.rank {
    flex: 0 0 auto;
    width: 2.2rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1;
    text-align: center;
    color: var(--cream-45);
}
.rank--top { color: var(--cream); }

.lb-main { flex: 1; min-width: 0; }

.lb-title {
    font-size: 1.02rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.lb-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.lb-meta {
    font-size: 0.78rem;
    color: var(--cream-45);
    margin-top: 0.15rem;
}

.lb-votes {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream-45);
    white-space: nowrap;
}
.lb-votes strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--cream);
    margin-right: 0.35rem;
}

/* ============================================================
   TEASER DETAIL — dark stage + info rail
   ============================================================ */
.detail-wrap {
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
}

.back-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--cream-45);
    margin-bottom: var(--space-3);
    transition: color 0.15s ease;
}
.back-link:hover { color: var(--cream); }

.teaser-detail {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

/* --- the teaser player frame: poster state and, once unlocked, the trailer embed --- */
.teaser-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--maroon-ink);
    border: 1px solid var(--cream-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.teaser-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* No cover art and no derivable thumbnail — the frame carries the placeholder gradient itself. */
.teaser-video-frame--empty {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(133, 32, 56, 0.35), transparent 70%),
        var(--maroon-ink);
    color: var(--cream-45);
}

/* --- the poster the frame shows until the embed is unlocked: cover art (Task 41) or thumbnail --- */
.teaser-video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watermark-chip {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-45);
}

.teaser-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(253, 243, 222, 0.5);
    background: rgba(12, 11, 12, 0.4);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
}
.teaser-video-play svg { width: 28px; height: 28px; margin-left: 3px; }

/* Signed-in viewers get a real control here, not decoration — it loads the embed. */
button.teaser-video-play {
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button.teaser-video-play:hover,
button.teaser-video-play:focus-visible {
    background: rgba(12, 11, 12, 0.72);
    border-color: var(--cream);
    transform: translate(-50%, -50%) scale(1.06);
}

/*
  Anonymous state: the cover art stays fully visible, dimmed just enough that the prompt reads.
  The whole frame is the link, so a mis-aimed click still goes to login rather than doing nothing.
*/
.teaser-video-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--cream);
    background: rgba(12, 11, 12, 0.5);
    transition: background 0.15s ease;
}
.teaser-video-gate:hover,
.teaser-video-gate:focus-visible { background: rgba(12, 11, 12, 0.65); }

/* Static lock badge — reuses the play circle's geometry, so the two states sit identically. */
.teaser-video-play--locked { position: static; transform: none; }
.teaser-video-play--locked svg { margin-left: 0; }

.teaser-video-gate-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}
.teaser-video-gate:hover .teaser-video-gate-label { text-decoration: underline; }

.teaser-video-note {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-45);
}

.teaser-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.teaser-detail-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.teaser-detail-pen {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream-45);
}

.teaser-detail-logline {
    font-size: 1rem;
    color: var(--cream-70);
}

/* --- vote control --- */
.vote-control {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--burgundy);
    border-radius: var(--radius-card);
    text-align: center;
}

.vote-btn {
    width: 100%;
}
.vote-btn svg { width: 18px; height: 18px; }

.vote-budget {
    margin-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--cream-70);
}
.vote-budget strong { color: var(--cream); }

.vote-blocked .vote-budget { margin-top: 0; }

.vote-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9fd8b4;
    border: 1px solid rgba(159, 216, 180, 0.4);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
}
.vote-done-badge svg { width: 16px; height: 16px; }

/* ============================================================
   COMING SOON — black band
   ============================================================ */
.coming-soon { background: var(--black); }

/* /for-screenwriters runs this band straight off the bottom of the audience
   photograph, where a cut to black reads as a seam. Maroon carries through. */
.coming-soon--ink { background: var(--maroon-ink); }

.coming-soon-inner {
    text-align: center;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.coming-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.coming-sub {
    max-width: 620px;
    color: var(--cream-70);
    font-size: 0.98rem;
}

.coming-soon .btn { margin-top: var(--space-1); }

/* ============================================================
   MARQUEE RIBBON
   ============================================================ */
.ribbon {
    background: var(--wine);
    overflow: hidden;
}

.ribbon-track {
    display: flex;
    width: max-content;
    animation: ribbon-scroll 30s linear infinite;
}

.ribbon-group {
    display: flex;
    align-items: center;
    gap: 2.75rem;
    padding: 0.85rem 0 0.75rem 2.75rem;
}

.ribbon-item {
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cream);
    white-space: nowrap;
}

.ribbon-dot { color: var(--cream-45); }

@keyframes ribbon-scroll {
    to { transform: translateX(-50%); }
}

/* ============================================================
   WRITERS CTA — full-bleed burgundy band
   ============================================================ */
.writers {
    background:
        radial-gradient(90% 130% at 50% 0%, rgba(133, 32, 56, 0.5), transparent 70%),
        linear-gradient(180deg, #561122 0%, var(--burgundy) 60%, var(--burgundy-deep) 100%);
    background-color: var(--burgundy);
}

/* Landing writers band — the clip is a slow, tight close-up, so the
   scrim can stay light in the middle and still leave the copy legible. */
.writers--film {
    --band-scrim:
        linear-gradient(180deg,
            rgba(10, 0, 4, 0.66) 0%,
            rgba(10, 0, 4, 0.10) 26%,
            rgba(10, 0, 4, 0.14) 70%,
            rgba(10, 0, 4, 0.74) 100%),
        radial-gradient(74% 94% at 50% 52%, rgba(12, 1, 5, 0.34), transparent 76%);
}

/* /for-screenwriters closing band — an iris with a figure walking into the
   light reflected in it. That reflection is the whole point of the frame, so
   the scrim stays off the right side entirely and does its darkening on the
   left, under the copy. */
.writers--eye {
    --band-image: image-set(
        url("/static/img/screenwriters/eye-1920-00f77e3cbad37591f34c029921ea003d.webp") type("image/webp"),
        url("/static/img/screenwriters/eye-1920-3fce53ab981df11e5c0d2f0d3db0f425.jpg") type("image/jpeg"));
    --band-scrim:
        linear-gradient(180deg,
            rgba(18, 2, 8, 0.74) 0%,
            rgba(18, 2, 8, 0.34) 28%,
            rgba(18, 2, 8, 0.40) 70%,
            rgba(18, 2, 8, 0.80) 100%),
        radial-gradient(80% 100% at 34% 50%, rgba(150, 26, 40, 0.46), transparent 76%);

    background-blend-mode: normal, screen, normal;
}

.writers-inner {
    text-align: center;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.writers-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.writers-sub {
    max-width: 560px;
    color: var(--cream-70);
    font-size: 0.98rem;
}

.writers .btn { margin-top: var(--space-1); }

/* Secondary support line under the band's primary CTA — quieter than
   .writers-sub, and pulled tight against the small button it introduces. */
.writers-support {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    color: var(--cream-45);
}
.writers-support + .btn { margin-top: 0; }

/* ============================================================
   FOR WRITERS — features on cream
   ============================================================ */
.features {
    background: var(--cream);
    color: var(--ink);
    padding: var(--space-6) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

/* Three-up variant (home section 2). The responsive collapses further down
   target .features-grid itself, so they override this modifier automatically. */
.features-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-card { text-align: center; }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(107, 21, 41, 0.08);
    color: var(--wine);
    margin-bottom: var(--space-2);
}
.feature-icon svg { width: 24px; height: 24px; }

.feature-title {
    font-size: 1.08rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
}

.feature-desc {
    font-size: 0.9rem;
    color: var(--ink-65);
    max-width: 34ch;
    margin: 0 auto;
}

/* ============================================================
   JOURNEY — vertical pipeline timeline.
   Dark by default (/voting); .journey--light flips it to
   cream for /for-screenwriters. Each step is a dot on a connecting
   rule, which is also the hook for the staged reveal animation
   still to come from the Figma prototype.
   ============================================================ */
.journey {
    background: var(--burgundy-deep);
    padding: var(--space-6) 0;
}

/* Landing pipeline band — operator under a red key light. The frame
   is dark and low-contrast on the left, which is where the step list
   sits, so the scrim only has to lift the wine and close the edges.
   The screen-blended radial restores the warmth the flat scrim eats. */
.journey--film {
    --band-image: image-set(
        url("/static/img/landing/journey-1920-f1d9d83f9f7c77dcf20dde604a339cc0.webp") type("image/webp"),
        url("/static/img/landing/journey-1920-cfa4013c54001343968bd872aaaebf9f.jpg") type("image/jpeg"));
    --band-scrim:
        linear-gradient(180deg,
            rgba(14, 1, 6, 0.84) 0%,
            rgba(14, 1, 6, 0.34) 28%,
            rgba(14, 1, 6, 0.42) 72%,
            rgba(14, 1, 6, 0.90) 100%),
        radial-gradient(96% 88% at 62% 42%, rgba(186, 28, 44, 0.52), transparent 72%);

    /* The radial is a warm lift, not another veil — blend it against the
       photograph instead of stacking one more layer of paint on top.
       Layer order is scrim-linear, scrim-radial, image. */
    background-blend-mode: normal, screen, normal;
}

.journey--light {
    background: var(--cream);
    color: var(--ink);
    border-top: 1px solid var(--ink-line);
}

.journey-list {
    list-style: none;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

.journey-step {
    position: relative;
    padding-left: var(--space-4);
    padding-bottom: var(--space-4);
    border-left: 1px solid var(--cream-line);
}
.journey--light .journey-step { border-left-color: var(--ink-line); }

/* Last step: keep the layout, drop the trailing rule. */
.journey-step--final {
    border-left-color: transparent;
    padding-bottom: 0;
}

.journey-step::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.3rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cream);
}
.journey--light .journey-step::before { background: var(--wine); }

.journey-marker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-45);
    margin-bottom: 0.5rem;
}
.journey--light .journey-marker { color: var(--wine); }

.journey-title {
    font-size: 1.15rem;
    font-weight: 650;
    margin-bottom: 0.4rem;
}

/* Optional bold line between a step's title and its description — the
   client's pipeline copy gives each step a tagline as well as a name. */
.journey-lede {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 0.35rem;
}
.journey--light .journey-lede { color: var(--ink); }

.journey-desc {
    font-size: 0.95rem;
    color: var(--cream-70);
    max-width: 60ch;
}
.journey--light .journey-desc { color: var(--ink-65); }

/* ============================================================
   FOR WRITERS — community band (maroon panel)
   ============================================================ */
.vote-root { background: var(--maroon-ink); }

/* /for-screenwriters audience band — a cinema crowd lit only by the screen.
   The frame is already near-black through the middle, which is where the copy
   sits, so the scrim barely darkens; the screen-blended wine is what carries
   the warmth the flat photograph has none of. */
.vote-root--audience {
    --band-image: image-set(
        url("/static/img/screenwriters/audience-1920-c089bf303600f085d32db299ee81efe1.webp") type("image/webp"),
        url("/static/img/screenwriters/audience-1920-209ab15e43cdcf7418988758994cc489.jpg") type("image/jpeg"));
    --band-scrim:
        linear-gradient(180deg,
            rgba(20, 2, 9, 0.72) 0%,
            rgba(20, 2, 9, 0.30) 30%,
            rgba(20, 2, 9, 0.36) 70%,
            rgba(20, 2, 9, 0.78) 100%),
        radial-gradient(78% 96% at 50% 50%, rgba(150, 24, 40, 0.50), transparent 74%);

    background-blend-mode: normal, screen, normal;
    background-color: var(--maroon-ink);
}

/* /voting's genre band — a three-frame collage, drama and noir and sci-fi,
   with a dark trough down the middle that the copy drops straight into. The
   scrim keeps its hands off the frames at the edges. */
.vote-root--genres {
    --band-image: image-set(
        url("/static/img/voting/genres-1920-4afd090f2d9ff50229234ed8666434b8.webp") type("image/webp"),
        url("/static/img/voting/genres-1920-6d062b269a511774f278ce8dd5926ec5.jpg") type("image/jpeg"));
    --band-scrim:
        linear-gradient(180deg,
            rgba(16, 2, 7, 0.66) 0%,
            rgba(16, 2, 7, 0.24) 32%,
            rgba(16, 2, 7, 0.28) 70%,
            rgba(16, 2, 7, 0.72) 100%),
        radial-gradient(60% 92% at 50% 50%, rgba(150, 26, 42, 0.40), transparent 78%);

    background-blend-mode: normal, screen, normal;
    background-color: var(--maroon-ink);
}

.vote-root-inner {
    text-align: center;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.vote-root-inner p {
    max-width: 620px;
    color: var(--cream-70);
    font-size: 0.98rem;
}

.vote-root .btn { margin-top: var(--space-1); }

/* ============================================================
   FAQ — card rows on cream
   ============================================================ */
.faq-section {
    background: var(--cream);
    color: var(--ink);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--ink-line);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: 1.1rem var(--space-3);
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }

.faq-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--ink-45);
    transition: transform 0.2s ease;
}
.faq-chevron svg { width: 100%; height: 100%; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    padding: 0 var(--space-3) var(--space-3);
    color: var(--ink-65);
    font-size: 0.9rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--black);
    border-top: 1px solid rgba(253, 243, 222, 0.08);
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3) var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.footer-logo { width: 140px; height: auto; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}
.footer-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--cream-45);
    transition: color 0.15s ease;
}
.footer-link:hover { color: var(--cream); }

.footer-copy {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(253, 243, 222, 0.32);
}

/* ============================================================
   FLASH BANNERS (fragments/flash :: flash-banners)
   ============================================================ */
.flash-region {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-3);
}
.flash-region:not(:empty) { padding-top: var(--space-2); }

.flash {
    font-size: 0.9rem;
    padding: 0.75rem 1.1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid;
}

.flash--success {
    background: rgba(46, 125, 79, 0.16);
    border-color: rgba(159, 216, 180, 0.4);
    color: #9fd8b4;
}

.flash--error {
    background: rgba(150, 40, 40, 0.22);
    border-color: rgba(240, 150, 150, 0.4);
    color: #f0a3a3;
}

.flash--warning {
    background: rgba(201, 146, 47, 0.16);
    border-color: rgba(233, 196, 128, 0.4);
    color: #e9c480;
}

.flash--info {
    background: rgba(253, 243, 222, 0.08);
    border-color: rgba(253, 243, 222, 0.28);
    color: var(--cream-70);
}

/* ============================================================
   ERROR PAGES (templates/error/*)
   ============================================================ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6) var(--space-3);
    min-height: 60vh;
}

.error-page-code {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 6.5rem);
    line-height: 1;
    color: var(--cream);
    margin-bottom: var(--space-2);
}

.error-page-title {
    font-size: 1.4rem;
    font-weight: 650;
    margin-bottom: var(--space-2);
}

.error-page-body {
    color: var(--cream-70);
    max-width: 480px;
    margin-bottom: var(--space-4);
}

.error-page-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
    .teaser-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .rules-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .teaser-detail { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 720px) {
    .header-inner {
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: space-between;
    }
    .site-nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .hero-inner { padding-top: var(--space-5); padding-bottom: var(--space-5); }

    /* Narrow viewports get the half-width crops — same frames, a
       quarter of the bytes. */
    .hero--film {
        --band-image: image-set(
            url("/static/img/landing/hero-768-73d8f04f6356f7b2c37d156b666ba3ab.webp") type("image/webp"),
            url("/static/img/landing/hero-768-e796ec286de97dd365256beadf790f70.jpg") type("image/jpeg"));
    }
    .journey--film {
        --band-image: image-set(
            url("/static/img/landing/journey-960-ab2b0ef3297a17e48ada8e0868ffc315.webp") type("image/webp"),
            url("/static/img/landing/journey-960-4f247da43f50b25165f9a0f1db73f70e.jpg") type("image/jpeg"));
    }
    .hero--stage {
        --band-image: image-set(
            url("/static/img/screenwriters/hero-900-37e791c88a5d35f6d4ff6b165692c835.webp") type("image/webp"),
            url("/static/img/screenwriters/hero-900-42d06495fff39410160cc4e3587002ea.jpg") type("image/jpeg"));
    }
    .vote-root--audience {
        --band-image: image-set(
            url("/static/img/screenwriters/audience-960-bbfecdd1fdb5fa43c65db7140a396f3c.webp") type("image/webp"),
            url("/static/img/screenwriters/audience-960-803fa52d46a69091b2633d76b432639a.jpg") type("image/jpeg"));
    }
    .writers--eye {
        --band-image: image-set(
            url("/static/img/screenwriters/eye-960-fa58cca8bc67445f5729f81b9b15a2f0.webp") type("image/webp"),
            url("/static/img/screenwriters/eye-960-42d934dab0f8d9df3e4e282fea16aa46.jpg") type("image/jpeg"));
    }
    .hero--living-room {
        --band-image: image-set(
            url("/static/img/voting/hero-900-2ad3779d8dabb3711dee701035d00ba8.webp") type("image/webp"),
            url("/static/img/voting/hero-900-e8f6d04b240b3f06cb3fd32c0bc59011.jpg") type("image/jpeg"));
    }
    .leaderboard--screening {
        --band-image: image-set(
            url("/static/img/voting/screening-960-4df53729ab00c8158fa0d2b454b11ce0.webp") type("image/webp"),
            url("/static/img/voting/screening-960-2977c7c905d659131f3beb44a251ff1e.jpg") type("image/jpeg"));
    }
    .vote-root--genres {
        --band-image: image-set(
            url("/static/img/voting/genres-960-8a2d5765ace18b4a580e5f12ce2f3ff8.webp") type("image/webp"),
            url("/static/img/voting/genres-960-b6a5550fe094523128b3356eb139a2bb.jpg") type("image/jpeg"));
    }

    .teaser-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .poster { aspect-ratio: 16 / 10; }

    .lb-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .lb-main { flex: 1 1 55%; }
    .lb-votes { margin-left: calc(2.2rem + var(--space-2)); }
}

@media (max-width: 479px) {
    .filter-field,
    .filter-field select,
    .filter-field input {
        width: 100%;
        min-width: 0;
    }
}

/* ===================================================================
   THE CONTEST PAGE (/vote)
   One (season, category, genre) tuple: a player, the genre's finalists
   beside it, and the Top-3 tray underneath.
   =================================================================== */

.contest-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ballot-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-3);
    align-items: start;
}

/* --- Stage ------------------------------------------------------- */

.ballot-stage-meta { margin-top: var(--space-2); }

.ballot-stage-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--cream);
    margin: 0;
}

.ballot-stage-pen {
    color: var(--cream-70);
    font-size: 0.9375rem;
    margin: 0.25rem 0 0;
}

.ballot-stage-logline {
    color: var(--cream-70);
    line-height: 1.6;
    margin: 0.75rem 0 0;
}

/* --- Playlist ---------------------------------------------------- */

.ballot-playlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ballot-playlist-row {
    border: 1px solid transparent;
    border-radius: var(--radius);
}

/* The finalist currently in the player. */
.ballot-playlist-row.is-playing {
    border-color: var(--wine-bright);
    background: rgba(107, 21, 41, 0.25);
}

.ballot-playlist-link {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.ballot-playlist-meta { min-width: 0; }

.ballot-playlist-title {
    display: block;
    color: var(--cream);
    font-weight: 600;
    line-height: 1.3;
}

.ballot-playlist-pen {
    display: block;
    color: var(--cream-45);
    font-size: 0.875rem;
}

/* --- 16:9 video thumbnail (the /vote playlist) ------------------- */

.thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    /* Base gradient: only seven genres have their own, so the rest land here. */
    background: linear-gradient(160deg, #2c2022 0%, #1a1214 60%, #120c0e 100%);
}

.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--black);
    display: grid;
    place-items: center;
}

.thumb-play svg { width: 18px; height: 18px; margin-left: 2px; }

.thumb-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.thumb-rank {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--wine);
    color: var(--cream);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- Tray -------------------------------------------------------- */

.ballot-tray {
    --focus-ring: var(--wine);
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-card);
    background: var(--cream);
    color: var(--ink);
}

.ballot-tray-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.ballot-tray-title {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wine);
    margin: 0;
}

.ballot-counter { color: var(--ink-65); font-size: 0.875rem; }

.ballot-slots {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ballot-slot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.6);
}

.ballot-slot-rank {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--wine);
    color: var(--cream);
    font-weight: 700;
    font-size: 0.875rem;
}

/* An empty slot reads as pending, not as a filled one with a blank title. */
.ballot-slot--empty .ballot-slot-rank { background: var(--ink-45); }

.ballot-slot-body { min-width: 0; }

.ballot-slot-label {
    display: block;
    color: var(--wine);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ballot-slot-title { display: block; color: var(--ink); }

.ballot-tray-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ballot-foot { color: var(--ink-65); margin: 0; }

.ballot-fallback { margin-bottom: var(--space-2); }

.ballot-fallback-field { margin-top: 0.75rem; }

.ballot-fallback-field label {
    display: block;
    color: var(--wine);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* --- Confirmation ------------------------------------------------ */

/*
  A positioned panel rather than a native <dialog>: the confirmation arrives as an HTMX swap and
  has to be visible without a showModal() call, and the no-JS path renders it as a plain page.
*/
.ballot-modal { display: grid; place-items: center; }

.ballot-modal-body { text-align: center; max-width: 30rem; }

.ballot-modal-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    background: rgba(107, 21, 41, 0.12);
    color: var(--wine);
    margin-bottom: var(--space-2);
}

.ballot-modal-icon svg { width: 30px; height: 30px; }

.ballot-modal-title {
    font-size: 1.375rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

.ballot-modal-sub { color: var(--ink-65); margin: 0 0 var(--space-2); }

.ballot-modal-list {
    text-align: left;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: rgba(107, 21, 41, 0.08);
    color: var(--maroon-ink);
    line-height: 1.9;
}

.ballot-modal-back {
    display: block;
    margin-top: 0.75rem;
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 900px) {
    .ballot-layout { grid-template-columns: 1fr; }
    .ballot-playlist-link { grid-template-columns: 120px 1fr; }
}

@media (max-width: 560px) {
    .contest-head { flex-direction: column; }
    .ballot-tray-foot { flex-direction: column; align-items: stretch; }
}

/* --- Contest stage actions (star, Add to Top 3, Share) ------------- */

.ballot-stage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ballot-stage-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stage-score {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--cream-line);
    border-radius: var(--radius);
    color: var(--cream-70);
    font-size: 0.875rem;
}

.stage-score svg { width: 16px; height: 16px; }

/* The Add button reads as pressed once the title is in the tray. */
.btn.is-active {
    border-color: var(--wine-bright);
    color: var(--cream);
}

/*
 * Controls that only work with the script: the no-script path ranks with the selects in the tray,
 * so these must not be offered until vote-ballot.js has removed the class.
 */
.is-script-only { display: none !important; }

/* --- Tray slot interaction --------------------------------------- */

.ballot-slot[draggable="true"] { cursor: grab; }

.ballot-slot.is-dragging { opacity: 0.5; }

.ballot-slot-remove {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--wine);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.ballot-slot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ===================================================================
   GENRE SHELVES (/teasers)
   One carousel per genre within the selected category. A row is one
   contest, because a submission competes only in its main genre.
   =================================================================== */

.genre-shelf {
    /* One card size at every width and for any number of finalists, so every
       carousel is the same height. 240px shows four cards and part of a fifth
       on a desktop column, which says the row scrolls, and one and a half on
       a phone. */
    --shelf-card-w: 240px;
    --shelf-card-h: 135px; /* 16:9 */
    --shelf-title-size: 0.9375rem;
    --shelf-title-lh: 1.4;
    padding-top: var(--space-4);
    border-bottom: 1px solid var(--cream-line);
}

/* The filter bar above already leaves a gap and a rule. */
.genre-shelf:first-child { padding-top: 0; }

.genre-shelf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 1.25rem;
}

.genre-shelf-title {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--cream);
    margin: 0;
}

.genre-shelf-status {
    color: var(--cream-70);
    font-size: 0.9375rem;
    margin: 0.25rem 0 0;
}

/* Scrolls rather than wraps: a genre's finalists are one race, so they stay on
   one line. The height is fixed: a card, one title line, and room below for a
   scrollbar where the platform draws one. */
.genre-shelf-rail {
    list-style: none;
    margin: 0;
    padding: 0 0 1.25rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--shelf-card-w);
    gap: 1.25rem;
    height: calc(var(--shelf-card-h) + 0.75rem
                 + var(--shelf-title-lh) * var(--shelf-title-size) + 1.25rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--cream-line) transparent;
}

.shelf-item { scroll-snap-align: start; min-width: 0; }

.shelf-link { text-decoration: none; color: inherit; display: block; }

/* The rail clips anything outside it, so the focus ring is drawn inside the card. */
.shelf-link:focus-visible { outline: none; }
.shelf-link:focus-visible .shelf-poster {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

/* The home page's portrait poster (.poster), re-set for the 16:9 card: the same art and
   lettering, sized to fit 135px of height. "Presents" sits at the top, the play button at the
   bottom, and the title and byline in the middle. */
.shelf-poster {
    aspect-ratio: auto;
    height: var(--shelf-card-h);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    box-shadow: none;
}

/* In a landscape frame the lettering sits high, where the portrait poster's darkening layer is
   lightest, so the shelf darkens the whole photo more evenly. */
.shelf-poster.poster--photo::after {
    background: linear-gradient(180deg, rgba(16, 9, 11, 0.55) 0%, rgba(16, 9, 11, 0.85) 100%);
}

/* Small enough to clear the rank badge in the top-left corner. */
.shelf-poster .poster-presents { font-size: 0.5rem; }

.shelf-poster .poster-title {
    font-size: 1.05rem;
    line-height: 1.15;
    /* Two lines at most, so a long title cannot push the byline out of the frame. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shelf-poster .poster-pen {
    font-size: 0.55rem;
    margin-top: 0.35rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shelf-poster .poster-play { width: 30px; height: 30px; }
.shelf-poster .poster-play svg { width: 13px; height: 13px; }

.shelf-link:hover .poster-play {
    background: var(--wine);
    border-color: var(--wine);
}

/* Above the photo's darkening layer (.poster--photo::after). */
.shelf-poster > .thumb-duration,
.shelf-poster > .thumb-rank { z-index: 2; }

/* One line, so a long title cannot make one carousel taller than the rest. */
.shelf-title {
    display: block;
    margin-top: 0.75rem;
    color: var(--cream);
    font-size: var(--shelf-title-size);
    line-height: var(--shelf-title-lh);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shelf-link:hover .shelf-title { text-decoration: underline; }

@media (max-width: 720px) {
    .genre-shelf-head { flex-direction: column; }
}