/* ============================================================================
   Labocine — EVENTS: /events, /events/:slug, /events/:slug/watch/:film

   Everything is scoped under `.ev`. An event page is layered: the page ground
   and its ambient glow (fixed), the hero's WebGL reel, then every section.
   The accent is the event's own (--accent, --accent-rgb, --accent-ink, set
   inline from src/helpers/events.js accentTokens); --tone follows the film
   in the reel's gate and eases between films.
   ============================================================================ */

@property --tone { syntax: "<color>"; inherits: true; initial-value: #34e08a; }
@view-transition { navigation: auto; }

html.ev-page, body.ev-page { background: #07070a; }
html.ev-page { scroll-behavior: smooth; }
body.ev-page footer { position: relative; z-index: 2; color: #85858f; text-align: center; background: #07070a; }
html.ev-lock, html.ev-lock body { overflow: hidden; }
html.ev-dragging, html.ev-dragging * { cursor: grabbing !important; user-select: none; }

.ev {
    --bg: #07070a;
    --panel: #0e0e13;
    --panel-2: #14141b;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --text: #f4f4f6;
    --muted: #b6b6c2;
    --muted-2: #85858f;
    --pad: clamp(18px, 4vw, 56px);
    --maxw: 1380px;
    --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    position: relative;
    color: var(--text);
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.ev *, .ev *::before, .ev *::after { box-sizing: border-box; }
/* Resets sit in :where() so they weigh a single class: the component rules
   below win on order. The site stylesheet styles bare headings and links. */
.ev :where(a) { color: inherit; }
.ev :where(h1, h2, h3, h4, p, dl, dt, dd, ol, ul, li, figure, button, input) { margin: 0; font-family: inherit; letter-spacing: inherit; }
.ev :where(ol, ul) { padding: 0; list-style: none; }
.ev :where(h1, h2, h3, h4, dt, dd) { color: inherit; font-weight: inherit; }
.ev img { max-width: 100%; }
.ev button { cursor: pointer; }
.ev svg { width: 1em; height: 1em; flex: none; }
.ev :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* ---------------------------------------------------------------- ambient */
/* the film's tone eases here only: eased on .ev it would restyle the whole page every frame */
.ev-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: --tone 1.6s ease; }
.ev-ambient__glow {
    position: absolute; inset: -25%;
    background:
        radial-gradient(30% 36% at 72% 30%, rgba(var(--accent-rgb), 0.16), transparent 70%),
        radial-gradient(26% 32% at 16% 82%, rgba(var(--accent-rgb), 0.07), transparent 70%);
    background:
        radial-gradient(30% 36% at 72% 30%, color-mix(in srgb, var(--tone) 24%, transparent), transparent 70%),
        radial-gradient(26% 32% at 16% 82%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
        radial-gradient(40% 44% at 92% 96%, color-mix(in srgb, var(--tone) 7%, transparent), transparent 72%);
    filter: blur(28px);
    animation: ev-drift 34s ease-in-out infinite alternate;
}
.ev-ambient__grain {
    position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
    background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.6) 0% 0.0001%, transparent 0.0002% 0.0004%);
    background-size: 7px 7px;
}
@keyframes ev-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.08); } }

/* ---------------------------------------------------------------- shared */
.ev-eyebrow {
    font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--accent); font-weight: 700;
}
.ev-h2 {
    margin-top: 12px;
    font-size: clamp(2.1rem, 4.6vw, 3.8rem); font-weight: 900; line-height: 0.98;
    letter-spacing: -0.035em; color: #fff; text-wrap: balance;
}
.ev-h2 span { color: var(--muted-2); }

.ev-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 30px; border-radius: 999px;
    font-size: 1rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--line-2); color: var(--text); background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s var(--spring), background 0.2s ease, box-shadow 0.3s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
.ev-btn:hover, .ev-btn:focus { color: var(--text); text-decoration: none; }
.ev-btn svg { width: 18px; height: 18px; }
.ev-btn--accent {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
    box-shadow: 0 18px 40px -18px rgba(var(--accent-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ev-btn--accent:hover, .ev-btn--accent:focus {
    color: var(--accent-ink); filter: brightness(1.07);
    box-shadow: 0 24px 56px -16px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ev-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.ev-btn--sm { height: 40px; padding: 0 18px; font-size: 0.86rem; }

.ev-link {
    display: inline-flex; align-items: center; gap: 7px; padding: 0 0 2px;
    border: 0; border-bottom: 1px solid transparent; background: none;
    color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ev-link:hover, .ev-link:focus { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.ev-link svg { width: 16px; height: 16px; }

.ev-in { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.ev-in svg { width: 22px; height: 22px; }
.ev-in--sm { font-size: 1rem; }
.ev-in--sm svg { width: 18px; height: 18px; }
.ev-fine { margin-top: 16px; max-width: 48ch; font-size: 0.84rem; line-height: 1.6; color: var(--muted-2); }
.ev-fine a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }

.ev-onair {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12); color: var(--accent);
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.ev-onair i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ev-pulse 1.6s infinite; }
.ev-onair--sm { padding: 6px 12px; font-size: 0.7rem; }
@keyframes ev-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* Reveals: children rise in as a section enters. Hidden only when the page
   script will reveal them; if it never runs, a failsafe shows them anyway. */
html.ev-js .ev [data-reveal] > * { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
html.ev-js:not(.ev-ready) .ev [data-reveal] > * { animation: ev-failsafe 0.01s 3.5s forwards; }
html.ev-js .ev [data-reveal].is-in > * { opacity: 1; transform: none; }
.ev [data-reveal].is-in > :nth-child(2) { transition-delay: 0.08s; }
.ev [data-reveal].is-in > :nth-child(3) { transition-delay: 0.16s; }
.ev [data-reveal].is-in > :nth-child(4) { transition-delay: 0.24s; }
@keyframes ev-failsafe { to { opacity: 1; transform: none; } }

/* =================================================================== HERO */
.ev-hero {
    position: relative; z-index: 1; isolation: isolate; overflow: hidden;
    min-height: 92vh; min-height: 92svh;
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center; gap: clamp(16px, 3vw, 40px);
    padding: 104px var(--pad) 92px;
}
.ev-gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; }
html.ev-gl-on .ev-gl { opacity: var(--fade, 1); animation: ev-in 1.4s ease both; }
@keyframes ev-in { from { opacity: 0; } }
.ev-hero__poster {
    position: absolute; inset: 0; z-index: 0;
    background: center / cover no-repeat; opacity: 0.4;
    filter: blur(3px) saturate(0.9) brightness(0.55); transform: scale(1.05);
    transition: opacity 1.4s ease;
}
html.ev-gl-on .ev-hero__poster { opacity: 0; }
.ev-hero__shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 7, 10, 0.95) 0%, rgba(7, 7, 10, 0.74) 30%, rgba(7, 7, 10, 0) 58%),
        linear-gradient(0deg, #07070a 0%, rgba(7, 7, 10, 0) 24%),
        linear-gradient(180deg, rgba(7, 7, 10, 0.75) 0%, rgba(7, 7, 10, 0) 18%);
}
.ev-hero__copy { position: relative; z-index: 3; max-width: 640px; }

.ev-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.ev-kicker__logo { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: #fff; }
.ev-title {
    margin: 22px 0 18px;
    font-size: clamp(3rem, 6.4vw, 6.6rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.045em;
    color: #fff; text-wrap: balance; text-shadow: 0 12px 60px rgba(0, 0, 0, 0.55);
}
.ev-title.is-split .ev-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ev-title.is-split .ev-w > span { display: inline-block; transform: translateY(108%); animation: ev-rise 1.1s var(--ease) forwards; }
@keyframes ev-rise { to { transform: none; } }
.ev-tagline { max-width: 36ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; color: #d9d9e0; }
.ev-when {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px;
    font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ev-when__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.8; }

/* status: the film-leader dial and the clock */
.ev-status { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.ev-status--live { flex-direction: column; align-items: flex-start; gap: 16px; }
.ev-leader {
    --sweep: 0deg;
    position: relative; flex: none; display: grid; place-items: center;
    width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 70%), #0b0b10;
    box-shadow: inset 0 0 0 1px var(--line-2), 0 22px 50px -20px rgba(0, 0, 0, 0.85), 0 0 50px -18px rgba(var(--accent-rgb), 0.5);
}
.ev-leader__sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.04) 0deg, rgba(var(--accent-rgb), 0.3) var(--sweep), transparent var(--sweep));
}
.ev-leader__sweep::after {
    content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 50%;
    background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
    transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--sweep));
}
.ev-leader__rings { position: absolute; inset: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.ev-leader__rings::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ev-leader__cross::before, .ev-leader__cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.13); }
.ev-leader__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ev-leader__cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.ev-leader__n {
    position: relative; margin-top: -22px;
    font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: #fff;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
}
.ev-leader__unit {
    position: absolute; left: 0; right: 0; bottom: 17px; text-align: center;
    font-family: var(--mono); font-style: normal; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.ev-status__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.ev-clock { display: flex; gap: 12px; margin-top: 8px; font-family: var(--mono); }
.ev-clock__u { display: inline-flex; align-items: baseline; gap: 3px; }
.ev-clock__u b { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.ev-clock__u i { font-style: normal; font-size: 0.8rem; color: var(--muted-2); }
.ev-clock.no-days .ev-clock__u--d { display: none; }
.ev-status__note { margin-top: 6px; font-size: 0.8rem; color: var(--muted-2); }
.ev-wrapped { margin-top: 28px; max-width: 34ch; font-size: 1.15rem; line-height: 1.5; color: var(--muted); }

.ev-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 34px; }
.ev-ctas__minor { display: inline-flex; flex-wrap: wrap; gap: 18px; }

/* the stage: where the reel's gate sits, and the readout beside it */
.ev-stage { position: relative; z-index: 2; height: min(76vh, 680px); pointer-events: none; }
.ev-still { position: absolute; inset: 8% 2%; display: grid; place-items: center; transition: opacity 0.9s ease; }
.ev-still span {
    position: relative; width: min(100%, 600px); aspect-ratio: 16 / 9; border-radius: 3px;
    background: center / cover no-repeat;
    box-shadow: 0 0 0 14px #0c0a09, 0 0 0 15px rgba(255, 255, 255, 0.06), 0 40px 120px -30px rgba(var(--accent-rgb), 0.55);
}
/* sprocket holes along the frame's top and bottom */
.ev-still span::before, .ev-still span::after {
    content: ""; position: absolute; left: -14px; right: -14px; height: 7px;
    background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.16) 9px 19px, transparent 19px 26px);
    border-radius: 2px;
}
.ev-still span::before { top: -11px; }
.ev-still span::after { bottom: -11px; }
html.ev-gl-on .ev-still { opacity: 0; }

.ev-gate {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.7s ease 0.5s, visibility 0s 0.5s; will-change: transform;
}
html.ev-gl-on .ev-gate { opacity: 1; visibility: visible; }
.ev-gate__c { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 255, 255, 0.72); }
.ev-gate__c--tl { left: -16px; top: -16px; border-left-width: 1.5px; border-top-width: 1.5px; }
.ev-gate__c--tr { right: -16px; top: -16px; border-right-width: 1.5px; border-top-width: 1.5px; }
.ev-gate__c--bl { left: -16px; bottom: -16px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.ev-gate__c--br { right: -16px; bottom: -16px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.ev-gate__read { position: absolute; left: -16px; top: calc(100% + var(--margin, 30px) + 16px); width: max(calc(100% + 32px), 280px); display: grid; gap: 5px; }
.ev-gate__n { min-width: 78px; text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--tone); }
.ev-gate__t { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 800; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
.ev-gate__m { font-size: 0.84rem; color: var(--muted); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.ev-gate.is-swap .ev-gate__n, .ev-gate.is-swap .ev-gate__t, .ev-gate.is-swap .ev-gate__m { animation: ev-swap 0.7s var(--ease) both; }
.ev-gate.is-swap .ev-gate__t { animation-delay: 0.06s; }
.ev-gate.is-swap .ev-gate__m { animation-delay: 0.12s; }
@keyframes ev-swap { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } }

/* the gate's counter: step the reel, or pause it */
.ev-gate__counter { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px -6px; pointer-events: auto; }
.ev-gate__btn {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.07); color: #fff; transition: background 0.2s ease, color 0.2s ease;
}
.ev-gate__btn:hover { background: rgba(255, 255, 255, 0.18); }
.ev-gate__btn svg { width: 14px; height: 14px; }
.ev-gate__btn--pause { margin-left: 8px; }
.ev-gate__btn--pause .i-play, .ev-gate__btn--pause[aria-pressed="true"] .i-pause { display: none; }
.ev-gate__btn--pause[aria-pressed="true"] .i-play { display: block; }
.ev-gate__btn--pause[aria-pressed="true"] { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }

.ev-cue {
    position: absolute; left: var(--pad); bottom: 26px; z-index: 3;
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-2); text-decoration: none;
}
.ev-cue:hover { color: #fff; text-decoration: none; }
.ev-cue i { position: relative; width: 46px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.15); }
.ev-cue i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: ev-cue 2.4s ease-in-out infinite; }
@keyframes ev-cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ----------------------------------------------------------------- ticker */
.ev-ticker {
    position: relative; z-index: 2; overflow: hidden; padding: 16px 0;
    border-block: 1px solid var(--line); background: rgba(7, 7, 10, 0.6);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ev-ticker__track { display: flex; width: max-content; animation: ev-ticker calc(var(--n, 20) * 3.4s) linear infinite; }
.ev-ticker:hover .ev-ticker__track { animation-play-state: paused; }
.ev-ticker__set { display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; font-size: 0.95rem; font-weight: 700; color: #d2d2da; }
.ev-ticker__set i { font-style: normal; font-size: 0.7rem; color: var(--accent); }
@keyframes ev-ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- sections */
.ev:not(.ev-theater) > section:not(.ev-hero) {
    position: relative; z-index: 2;
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(80px, 10vw, 150px) var(--pad) 0;
}

/* the program: the lineup first, the notes about the event riding beside it */
.ev:not(.ev-theater) > section.ev-program {
    display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-areas: "notes head" "notes films"; column-gap: clamp(36px, 4.5vw, 72px); align-items: start;
    padding-top: clamp(56px, 6vw, 96px);
}
.ev-program > .ev-lineup__head { grid-area: head; }
.ev-program__films { grid-area: films; min-width: 0; }
.ev-notes {
    grid-area: notes; position: sticky; top: 84px; align-self: start;
    max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: none; padding: 8px 2px 24px 0;
}
.ev-notes::-webkit-scrollbar { display: none; }
.ev-notes__in { display: grid; gap: 26px; }
.ev-notes__lede {
    margin-top: 14px; font-size: 1.02rem; line-height: 1.62; color: #e4e4ea; white-space: pre-line;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;
}
.ev-notes a, .ev-notes-dialog a { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.6); text-underline-offset: 4px; }
.ev-notes a:hover, .ev-notes-dialog a:hover { color: var(--accent); }
.ev-notes__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 0.9rem; font-weight: 800; }
.ev-notes__more svg { width: 16px; height: 16px; transition: transform 0.3s var(--spring); }
.ev-notes__more:hover svg { transform: translateX(4px); }
.ev-notes__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.ev-notes__stats dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); }
.ev-notes__stats dd { margin-top: 6px; font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.ev-notes__window { padding-top: 24px; border-top: 1px solid var(--line); }
.ev-notes__h { font-size: 1.04rem; font-weight: 800; line-height: 1.4; color: #fff; }
.ev-notes__h span { font-weight: 500; color: var(--muted); }
.ev-notes__cta { justify-self: start; }

/* the window, small: how much of it is left */
.ev-span { --p: 0; position: relative; margin: 16px 6px 0; }  /* room for the "now" dot at either end */
.ev-span__track { position: relative; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.ev-span__fill {
    position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p) * 100%); border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.25), var(--accent)); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5);
}
.ev-span__tick { position: absolute; top: -3px; bottom: -3px; left: var(--at); width: 1px; background: rgba(255, 255, 255, 0.22); }
.ev-span__now {
    position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25), 0 0 18px rgba(var(--accent-rgb), 0.9);
}
.ev-span[data-phase="before"] .ev-span__now { background: #07070a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); animation: ev-wait 2.6s ease-in-out infinite; }
@keyframes ev-wait { 50% { transform: translateX(-6px); } }
.ev-span[data-phase="after"] .ev-span__fill { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
.ev-span[data-phase="after"] .ev-span__now { display: none; }
.ev-span__note { margin-top: 12px; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; color: var(--muted); }

/* the full notes */
.ev-notes-dialog {
    width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100svh - 40px); padding: 0; border: 0; border-radius: 24px; overflow: hidden;
    background: #0d0d12; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 140px -30px rgba(0, 0, 0, 0.95);
}
.ev-notes-dialog::backdrop { background: rgba(4, 4, 7, 0.74); backdrop-filter: blur(14px) saturate(1.2); }
.ev-notes-dialog[open] { animation: ev-up 0.5s var(--spring) both; }
.ev-notes-dialog__card { position: relative; max-height: calc(100svh - 40px); overflow-y: auto; padding: clamp(28px, 4.5vw, 56px); }
.ev-notes-dialog__t { margin-top: 12px; padding-right: 48px; font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; color: #fff; }
.ev-notes-dialog__when { margin-top: 12px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ev-about__lede { margin-top: 26px; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: #ececf1; white-space: pre-line; }
.ev-about__more { margin-top: 22px; }
.ev-about__more p { margin-bottom: 1em; font-size: 1.02rem; line-height: 1.72; color: var(--muted); white-space: pre-line; }
.ev-about__more blockquote {
    margin: 0.4em 0 1.2em; padding-left: 18px; border-left: 2px solid var(--accent);
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.25rem; line-height: 1.45; color: #ececf1; white-space: pre-line;
}
@media (max-width: 640px) { .ev-leader__n { margin-top: -16px; } .ev-leader__unit { bottom: 14px; } }

/* ================================================================= LINEUP */
.ev-lineup__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ev-views { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.ev-views__b {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px;
    border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 0.84rem; font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}
.ev-views__b svg { width: 14px; height: 14px; fill: currentColor; }
.ev-views__b.is-on { background: #fff; color: #0a0a0f; }

.ev-count { margin-top: 20px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted-2); }

.ev-float {
    position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px;
    pointer-events: none; opacity: 0; transform: translate3d(-999px, 0, 0); transition: opacity 0.25s ease;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ev-float.is-on { opacity: 1; }
.ev-float img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-soon { margin-top: 26px; max-width: 40ch; font-size: 1.2rem; line-height: 1.5; color: var(--muted); }


.ev-toast {
    position: fixed; left: 50%; bottom: 92px; z-index: 70; padding: 10px 18px; border-radius: 999px;
    background: #fff; color: #0a0a0f; font-size: 0.88rem; font-weight: 700;
    opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity 0.3s ease, transform 0.4s var(--spring);
}
.ev-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.ev-draft {
    position: fixed; top: 66px; left: 50%; z-index: 50; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
    background: rgba(245, 181, 68, 0.14); color: #f5c76a; font-size: 0.84rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(245, 181, 68, 0.4); backdrop-filter: blur(10px); white-space: nowrap;
}
.ev-draft a { color: #fff; text-decoration: underline; }
.ev-draft__dot { width: 8px; height: 8px; border-radius: 50%; background: #f5b544; }

/* =========================================================== /events index */
.evx-hero { padding-top: clamp(130px, 16vw, 200px) !important; }
.evx-hero .ev-title { max-width: 12ch; }
.evx-lede { max-width: 46ch; margin-top: 8px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.evx-section-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.evx-feature__card {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 520px;
    overflow: hidden; border-radius: 28px; color: inherit; text-decoration: none; background: #0d0d12;
    box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 120px -50px rgba(var(--accent-rgb), 0.55);
    transition: transform 0.6s var(--ease), box-shadow 0.6s ease;
}
.evx-feature__card:hover, .evx-feature__card:focus { color: inherit; text-decoration: none; transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 70px 140px -50px rgba(var(--accent-rgb), 0.8); }
.evx-feature__img { position: relative; background: #111 center / cover no-repeat; transition: transform 1.6s var(--ease); }
.evx-feature__card:hover .evx-feature__img { transform: scale(1.04); }
.evx-feature__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, #0d0d12 100%), linear-gradient(0deg, rgba(13, 13, 18, 0.7), transparent 40%); }
.evx-feature__strip { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; display: flex; gap: 6px; }
.evx-feature__strip img { flex: 1; min-width: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.evx-feature__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.evx-feature__t { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.evx-feature__when { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.evx-feature__s { font-size: 1.02rem; line-height: 1.55; color: var(--muted); }
.evx-feature__count { font-family: var(--mono); font-size: 1rem; color: #fff; }
.evx-feature__go { align-self: flex-start; margin-top: 8px; }
.evx-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.13); color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.evx-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ev-pulse 1.6s infinite; }

.evx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px 24px; margin-top: 30px; }
.evx-card a { position: relative; display: block; color: inherit; text-decoration: none; }
.evx-card a:hover, .evx-card a:focus { color: inherit; text-decoration: none; }
.evx-card__img {
    position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: #111117 center / cover no-repeat;
    box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
    transition: transform 0.6s var(--ease), box-shadow 0.5s ease, filter 0.6s ease;
}
.evx-card a:hover .evx-card__img { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 40px 70px -34px rgba(var(--accent-rgb), 0.8); }
.evx-card__date {
    position: absolute; top: 14px; left: 14px; display: grid; justify-items: center; min-width: 56px; padding: 8px 10px; border-radius: 12px;
    background: rgba(7, 7, 10, 0.62); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.evx-card__date b { font-size: 1.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.evx-card__date i { margin-top: 3px; font-family: var(--mono); font-style: normal; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--accent); }
.evx-card__body { display: grid; gap: 6px; padding: 16px 4px 0; }
.evx-card__state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.evx-card__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ev-pulse 1.6s infinite; }
.evx-card__t { font-size: 1.3rem; font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.evx-card__m { font-size: 0.86rem; color: var(--muted-2); }
.evx-grid--past .evx-card__img { filter: grayscale(0.85) brightness(0.75); }
.evx-grid--past .evx-card a:hover .evx-card__img { filter: none; }
.evx-grid--past .evx-card__state { color: var(--muted-2); }
.evx-empty { padding: 60px 0 0; font-size: 1.2rem; color: var(--muted); }
.ev-index > section:last-of-type { padding-bottom: clamp(90px, 10vw, 150px); }

/* ======================================================== the theater */
.ev-theater { min-height: 100vh; padding-bottom: clamp(80px, 9vw, 130px); }
.ev-theater__bg {
    position: fixed; inset: -10%; z-index: 0; pointer-events: none;
    background: center / cover no-repeat; opacity: 0.22; filter: blur(70px) saturate(1.5); transform: scale(1.1);
}
.ev-theater__top {
    position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 92px var(--pad) 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
}
.ev-back { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; text-decoration: none; }
.ev-back:hover, .ev-back:focus { color: var(--accent); text-decoration: none; }
.ev-back svg { width: 18px; height: 18px; }
.ev-theater__pos { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--muted-2); }
.ev-screen-wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.ev-ambi {
    position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; width: 100%; height: 116%; z-index: 0;
    opacity: 0; filter: blur(64px) saturate(1.6); transform: scale(1.06); transition: opacity 1.4s ease; pointer-events: none;
}
.ev-ambi.is-on { opacity: 0.6; }
.ev-screen {
    position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 60px 140px -50px rgba(0, 0, 0, 0.95);
    view-transition-name: ev-film;
}
.ev-player, .ev-player .plyr { width: 100%; height: 100%; }
.ev-player video { width: 100%; height: 100%; background: #000; }
.ev-screen .plyr { --plyr-color-main: var(--accent); }
.ev-locked { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.ev-locked__still { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(14px) brightness(0.45) saturate(1.2); transform: scale(1.08); }
.ev-locked__card {
    position: relative; width: min(520px, 100%); display: grid; justify-items: start; gap: 12px; padding: clamp(22px, 3vw, 34px);
    border-radius: 22px; background: rgba(12, 12, 17, 0.66); backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.ev-locked__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.ev-locked__icon svg { width: 20px; height: 20px; }
.ev-locked__card h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; color: #fff; }
.ev-locked__card p { font-size: 0.95rem; line-height: 1.55; color: var(--muted); }

.ev-np {
    position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 34px var(--pad) 0;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: start;
}
.ev-np__t { margin-top: 10px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.035em; color: #fff; }
.ev-np__by { margin-top: 12px; font-size: 1.1rem; font-weight: 600; color: #e2e2e9; }
.ev-np__meta { margin-top: 6px; font-size: 0.9rem; color: var(--muted-2); }
.ev-np__syn { margin-top: 18px; max-width: 64ch; font-size: 1.02rem; line-height: 1.7; color: var(--muted); }
.ev-np__nav { display: grid; gap: 12px; }
.ev-np__step {
    display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; color: inherit; text-decoration: none;
    background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.3s var(--spring);
}
.ev-np__step:hover, .ev-np__step:focus { color: inherit; text-decoration: none; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.ev-np__step i { font-family: var(--mono); font-style: normal; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.ev-np__step b { font-size: 1.02rem; font-weight: 800; color: #fff; }
.ev-np__step--next { background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35); }
.ev-np__step--next i { color: var(--accent); }

.ev-rail { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 56px 0 0; }
.ev-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--pad); }
.ev-rail__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 16px; margin-top: 18px;
    padding: 4px var(--pad) 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.ev-rail__item { display: grid; gap: 8px; color: inherit; text-decoration: none; scroll-snap-align: start; }
.ev-rail__item:hover, .ev-rail__item:focus { color: inherit; text-decoration: none; }
.ev-rail__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111117; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.3s ease; }
.ev-rail__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ev-rail__item:hover .ev-rail__img img { transform: scale(1.05); }
.ev-rail__item.is-current .ev-rail__img { box-shadow: 0 0 0 2px var(--accent), 0 20px 40px -20px rgba(var(--accent-rgb), 0.9); }
.ev-rail__no { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted-2); }
.ev-rail__item.is-current .ev-rail__no { color: var(--accent); }
.ev-rail__t { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: #fff; }

.ev-next { position: fixed; right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px); z-index: 60; }
.ev-next[hidden] { display: none; }
.ev-next__card {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px; width: min(400px, calc(100vw - 24px)); padding: 18px;
    border-radius: 20px; background: rgba(14, 14, 19, 0.88); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -30px rgba(0, 0, 0, 0.95); animation: ev-up 0.5s var(--spring) both;
}
@keyframes ev-up { from { opacity: 0; transform: translateY(20px); } }
.ev-next__card--done { grid-template-columns: 1fr; }

/* how far a viewer got: a bar along a still's foot, a check once watched */
.ev-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, 0.22); }
.ev-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8); }
.ev-seen {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.8);
}
.ev-seen svg { width: 14px; height: 14px; }
/* where a film plays, when not everywhere */
.ev-geo-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
    background: rgba(7, 7, 10, 0.74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px);
    font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.ev-geo-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #f5b544; }
.ev-geo-tag.is-blocked { background: rgba(60, 40, 6, 0.8); box-shadow: inset 0 0 0 1px rgba(245, 181, 68, 0.6); color: #f8dca6; }

/* the theater in Play all */
.ev-playall {
    display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.38);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted);
}
.ev-playall b { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ev-playall--from { color: #fff; text-decoration: none; transition: background 0.2s ease, box-shadow 0.2s ease; }
.ev-playall--from:hover, .ev-playall--from:focus { color: #fff; text-decoration: none; background: rgba(var(--accent-rgb), 0.2); box-shadow: inset 0 0 0 1px var(--accent); }
.ev-playall__bar { position: relative; width: 72px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.14); }
.ev-playall__bar span { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--accent); }
.ev-rail__item.is-watched .ev-rail__img img { opacity: 0.5; }
.ev-rail__item.is-blocked { opacity: 0.42; }
.ev-resume {
    position: absolute; left: 16px; top: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px;
    border-radius: 999px; background: rgba(10, 10, 14, 0.82); backdrop-filter: blur(10px); color: #fff; font-size: 0.86rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); animation: ev-up 0.45s var(--spring) both;
}
.ev-resume__go { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.8rem; font-weight: 800; }
.ev-resume__x { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1rem; }
.ev-next__ring { --left: 1; position: relative; grid-row: span 3; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--left) * 360deg), rgba(255, 255, 255, 0.1) 0); }
.ev-next__ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0e0e13; }
.ev-next__ring b { position: relative; font-family: var(--mono); font-size: 1.1rem; color: #fff; }
.ev-next__t { font-size: 1.02rem; font-weight: 800; color: #fff; }
.ev-next__acts { display: flex; align-items: center; gap: 16px; }

/* ============================================================ responsive */
@media (max-width: 1024px) {
    .ev-hero { grid-template-columns: 1fr; align-content: start; gap: 0; padding-top: 70px; padding-bottom: 56px; }
    .ev-stage { order: -1; height: 56svh; min-height: 320px; max-height: 560px; margin: 0 calc(var(--pad) * -1); }
    .ev-hero__shade {
        background:
            linear-gradient(0deg, #07070a 0%, rgba(7, 7, 10, 0.9) 38%, rgba(7, 7, 10, 0) 60%),
            linear-gradient(180deg, rgba(7, 7, 10, 0.6), rgba(7, 7, 10, 0) 18%);
    }
    .ev-gate__read { left: 50%; top: calc(100% + var(--margin, 22px) + 10px); width: min(86vw, 420px); transform: translateX(-50%); text-align: center; justify-items: center; }
    .ev-cue { display: none; }
    .ev-np { grid-template-columns: 1fr; }
    .ev:not(.ev-theater) > section.ev-program { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "notes" "films"; }
    .ev-notes { position: static; max-height: none; overflow: visible; padding: 0; margin-top: 22px; }
    .ev-notes__in { gap: 18px; }
    .ev-notes__lede { -webkit-line-clamp: 3; }
    .ev-notes__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; }
    .ev-notes__stats dd { font-size: 1.55rem; }
    .ev-notes__stats dt { letter-spacing: 0.14em; }
    .ev-notes__window, .ev-notes__cta { display: none; }
    .evx-feature__card { grid-template-columns: 1fr; min-height: 0; }
    .evx-feature__img { aspect-ratio: 16 / 9; }
    .evx-feature__img::after { background: linear-gradient(0deg, #0d0d12 0%, transparent 50%); }
}
@media (max-width: 640px) {
    .ev-title { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }
    .ev-status { gap: 16px; }
    .ev-leader { width: 92px; height: 92px; }
    .ev-leader__n { font-size: 2rem; }
    .ev-ctas { gap: 14px 18px; }
    .ev-ctas .ev-btn { width: 100%; }
    .ev-draft { top: 60px; font-size: 0.76rem; }
    .ev-next__card { grid-template-columns: 1fr; }
    .ev-next__ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.ev-page { scroll-behavior: auto; }
    .ev *, .ev *::before, .ev *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .ev-ticker__track { animation: none; }
    html.ev-js .ev [data-reveal] > * { opacity: 1; transform: none; }
}