/*
  event-base.css — generic, theme-agnostic structural CSS for generated
  event pages (scripts/generate_site.py, templates/default/event.template.html).

  This file owns LAYOUT ONLY: sizing, spacing, grid/flex structure,
  responsive breakpoints. It never hardcodes a color, font, or image that
  is specific to one event or theme — every visual identity choice is a
  CSS custom property, set by exactly one small theme file
  (templates/default/assets/themes/<theme_id>.css) loaded right after this
  one. See that directory's default.css (the safe fallback, no artwork) and
  kanye.css (the real Kanye visual identity) for the two themes that exist
  today.

  This is a NEW file, written for the registry-driven generator pipeline.
  It does not replace, modify, or remove /site-v3.css, which remains
  exactly as-is for the hand-written legacy production pages
  (ru/kanye-west-koncert-rossiya-2026/, en/kanye-west-russia-concert-2026/).
  The two stylesheets are independent; generated pages never link
  site-v3.css, and legacy pages never link this one.

  Custom properties every theme MUST define (see themes/default.css for the
  full contract and safe fallback values):
    --event-bg            dark section background (header/hero/vote/statusCenter/footer)
    --event-surface       light section background ("paper" — confirmed/timeline/faq)
    --event-accent        accent color (CTA background, links, badges, logo mark)
    --event-status-accent accent color for LIVE/OPERATIONAL status indicators only
                          (status stamp, status dot, status-center label, saved-vote
                          state, status-card border) — semantically separate from
                          --event-accent because production Kanye styling actually
                          uses two different accents for these two roles (a red/pink
                          CTA color vs. an acid-green "operational" color); every
                          selector below falls back to --event-accent via
                          var(--event-status-accent, var(--event-accent)) so a theme
                          that only ever needs one accent (e.g. the default theme)
                          can define just --event-accent and still get a fully
                          consistent look.
    --event-text          light text color, used on --event-bg
    --event-muted         secondary/muted text color
    --event-line          hairline border color on light surfaces
    --event-font-display  heading/display font stack
    --event-font-body     body copy font stack

  Custom property a theme MAY define (optional — every selector below
  falls back to --event-surface via var(--event-timeline-surface,
  var(--event-surface)) when it doesn't):
    --event-timeline-surface  timeline section background, when a theme
                          distinguishes it from the general --event-surface
                          "paper" (production Kanye styling actually uses
                          two different light surfaces: #cfd2d5 for
                          confirmed/faq "paper" vs. a darker #b9bdc1 for the
                          timeline specifically). The default theme has no
                          reason to invent a second surface and defines
                          only --event-surface, so it renders identically
                          before and after this token existed.
    --event-accent-foreground  text color for copy placed directly on an
                          --event-accent (or --event-status-accent)
                          background (.cta, .statusStamp, .statusCenter
                          .label, aside a, .moreEvents, .mobileCta). Every
                          selector above falls back to --event-bg via
                          var(--event-accent-foreground, var(--event-bg))
                          — the same shape every theme already used before
                          this token existed — so a theme whose own
                          --event-bg already contrasts well against its
                          accent (e.g. Kanye: --event-bg #050505 on
                          --event-accent #ff315d is 5.68:1) needs no
                          change at all. The default theme's accent
                          (#315cff) only reaches 3.87:1 against its own
                          --event-bg (#0a0a0a) — below the 4.5:1 WCAG AA
                          threshold for normal text — so it defines this
                          token explicitly (white, 5.12:1) instead.

                          .moreEvents .label and .moreEvents>div:first
                          -child>a (the cross-navigation CTA link) are the
                          inverse pairing (an --event-bg background with
                          accent-colored text) and read the SAME token, but
                          fall back to --event-accent instead of --event-bg
                          — their own original, pre-fix color — since
                          that's the value a theme not defining the token
                          should keep showing here specifically.
    --event-faq-surface   .faq section background, when a theme
                          distinguishes it from the plain white every
                          theme showed before this token existed
                          (production Kanye styling uses #eeeef0 here,
                          matching its own `.details` background).
                          Falls back to the literal white #fff via
                          var(--event-faq-surface, #fff) — never another
                          token — so the default theme's own look is
                          untouched without needing to define anything.
    --event-vote-active-foreground  text color for the poll section's
                          own .votePanel button.active state, which reads
                          --event-accent directly as text on the (visually
                          transparent, but effectively --event-bg-backed)
                          .vote section — a same-shape contrast problem as
                          --event-status-foreground above but kept as its
                          own token rather than reused, because Kanye's
                          real production active-vote color is the red/pink
                          CTA hue (site-v3.css's own `.votePanel button
                          .active{color:var(--red)}`), not the acid
                          operational hue --event-status-foreground would
                          resolve through. Falls back to --event-accent via
                          var(--event-vote-active-foreground,
                          var(--event-accent)) — its own original color —
                          so Kanye, which defines nothing new here, is
                          unaffected. The default theme's --event-accent
                          (#315cff) only reaches 3.87:1 against its own
                          --event-bg (#0a0a0a) — below the 4.5:1 WCAG AA
                          threshold — so it defines this token explicitly
                          as #8fa5ff (8.48:1), the SAME lighter blue
                          site-v3.css's own legacy default styling already
                          uses for this exact role
                          (`.votePanel button.active{color:#8fa5ff}`).
    --event-status-foreground  text color for copy that reads the
                          OPERATIONAL status hue directly as TEXT on
                          --event-bg (.updated, .vote .label, .saved,
                          .statusSummary>div:first-child dd) — distinct
                          from --event-status-accent above, which stays
                          reserved for decorative uses on the same hue
                          (status stamp/label backgrounds, the status
                          dot, the status-card border) where contrast is
                          governed separately (already via
                          --event-accent-foreground, or not text at all).
                          Every one of those four selectors reads this
                          token first, falling back through
                          --event-status-accent then --event-accent
                          (the exact chain those selectors already used
                          before this token existed) via three nested
                          var() calls, so a theme whose own
                          --event-status-accent already contrasts well
                          as text (e.g. Kanye's acid #d7ff00 on
                          --event-bg #050505 is 17.66:1) needs no change
                          at all. The default theme's
                          --event-status-accent (#315cff) only reaches
                          3.87:1 against its own --event-bg (#0a0a0a) —
                          below the 4.5:1 WCAG AA threshold — so it
                          defines this token explicitly as #8fa5ff
                          (8.48:1) instead of changing --event-status
                          -accent itself (which stays #315cff for the
                          decorative uses above) — the same lighter blue
                          site-v3.css's own legacy default styling
                          already uses for this exact role
                          (`.updated,.label`/`.saved{color:#8fa5ff}`).
    --event-light-surface-accent  accent-colored TEXT placed directly on a
                          LIGHT surface — --event-surface/--event-timeline
                          -surface/--event-faq-surface, as opposed to
                          --event-bg (.facts article>span, .feed time,
                          .feed article a — the fact-index label, timeline
                          date, and timeline source link). A theme's
                          single --event-accent is usually chosen for
                          contrast against --event-bg (CTA/badge use),
                          which says nothing about its contrast against a
                          much lighter surface color — Kanye's own
                          --event-accent (#ff315d) is only 2.36:1 against
                          --event-surface (#cfd2d5) and 1.90:1 against
                          --event-timeline-surface (#b9bdc1), both well
                          below the 4.5:1 WCAG AA threshold, even though
                          that same #ff315d is a healthy 5.68:1 against
                          --event-bg. All three selectors above fall back
                          to --event-accent via
                          var(--event-light-surface-accent,
                          var(--event-accent)) — their own original color
                          — so a theme whose single accent already reads
                          fine on its own light surface (e.g. the default
                          theme: --event-accent #315cff on --event-surface
                          #f5f4f0 is 4.65:1) needs no change at all and
                          defines nothing new here. --event-accent itself
                          is never altered by this token — it stays the
                          one color CTA/badge/branding uses everywhere
                          else.
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--event-surface);color:#111;font-family:var(--event-font-body);font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}

/* Header / nav */
header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:var(--event-bg);color:var(--event-text);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font-family:var(--event-font-display);font-size:24px;font-weight:900;letter-spacing:-1px}
.logo span{color:var(--event-accent)}
nav{display:flex;gap:34px;font-size:16px;color:#c7c7c7}
nav a:hover{color:var(--event-text)}
/* Locale-switch chip: a circle for a 2-letter code (RU/EN — `min-width`
   plus `place-items:center` renders identically to the old fixed
   `width:42px` when content is narrower than that), but a rounded PILL
   (never a broken 2-line wrap) for anything longer (EN-IN, ES-MX, ES-CO,
   ES-UY — scripts.lib.locales.LOCALES' own `switch_label` values).
   `border-radius:21px` is exactly half of the 42px height at any width,
   so the pill's ends always stay fully rounded, never squared-off.
   `white-space:nowrap` is what actually stops the 2-line wrap; `padding`
   only matters once a label is wide enough to need it, so RU/EN's own
   circular look is completely unchanged. */
.lang{border:1px solid #666;border-radius:21px;min-width:42px;height:42px;padding:0 8px;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--event-text);white-space:nowrap}

/* Hero */
.hero{min-height:calc(100svh - 76px);position:relative;overflow:hidden;display:flex;align-items:flex-end;color:var(--event-text);background:var(--event-hero-bg,linear-gradient(135deg,var(--event-bg),var(--event-surface)))}
.heroMedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.1) 78%),linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%)}
/* Optional decorative theme artwork (e.g. an artist signature) — empty and
   invisible unless the active theme gives it a background image. Never
   populated from event data directly: see themes/kanye.css for the one
   theme that currently uses this hook, and docs/architecture.md for why
   this stays theme-only rather than a per-event asset path.

   `.hero`'s own `overflow:hidden` (above) is what keeps a theme's
   transform on this layer (e.g. themes/kanye.css's `rotate(-5deg)`) from
   creating a horizontal scrollbar: a rotated `inset:0` box's bounding
   rectangle is wider than the unrotated one, so without clipping at the
   hero boundary its corners could spill past the viewport edge on narrow
   screens. Scoped to `.hero` specifically — never a global `body`/`html`
   `overflow-x:hidden`, which would mask the same class of bug anywhere
   else on the page instead of fixing its one real source. */
.themeArtwork{position:absolute;inset:0;pointer-events:none}
.heroContent{position:relative;z-index:2;width:min(760px,90%);margin:0 0 7vh 6vw}
.updated,.label{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--event-accent)}
.updated{color:var(--event-status-foreground, var(--event-status-accent, var(--event-accent)))}
.hero h1{font-family:var(--event-font-body);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#c7c7c7;margin:18px 0 10px}
.heroTitle{font-family:var(--event-font-display);font-size:clamp(48px,6.8vw,100px);font-weight:900;line-height:.92;letter-spacing:-.045em;max-width:820px}
.intro{font-size:20px;line-height:1.55;color:#efefef;max-width:720px;margin:24px 0}
.meta{display:flex;flex-direction:column;margin:23px 0}
.meta b{font-size:28px}
.meta span{font-size:17px;color:#ccc}
.cta{display:flex;align-items:center;justify-content:space-between;max-width:560px;background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg));padding:19px 23px;font-size:20px;font-weight:800;font-family:var(--event-font-display)}
.cta span{display:flex;flex-direction:column}
.cta small{font-size:14px;font-weight:400;opacity:.8;margin-top:3px}
.cta>b{font-size:30px}
/* Neutral hero CTA (visual improvement pass, lib.context.select_affiliate's
   `neutralCta`): an "official page" link, never a partner/betting CTA, so
   it deliberately does NOT reuse .cta's solid --event-accent fill — an
   outline/ghost treatment instead, using the hero's own light text color
   (never --event-line, which is tuned for hairlines on LIGHT surfaces,
   not a dark hero) so it reads correctly against every theme's hero
   regardless of accent color. Same size/spacing/layout as .cta (still
   part of the same visual system, just not "buy/bet now" styling) via
   the shared base rule above — only background/border/color differ. */
.cta.ctaNeutral{background:transparent;border:2px solid rgba(255,255,255,.55);color:var(--event-text)}
.cta.ctaNeutral>b{color:var(--event-text)}

/* Live status card (inside hero) */
.statusCard{width:min(580px,100%);padding:19px 21px;background:rgba(8,8,8,.78);border-left:5px solid var(--event-status-accent, var(--event-accent));backdrop-filter:blur(10px);margin:22px 0}
.statusStamp{display:inline-block;width:max-content;margin:0 0 12px;padding:4px 8px;background:var(--event-status-accent, var(--event-accent));color:var(--event-accent-foreground, var(--event-bg));font-size:13px;font-weight:900;letter-spacing:.06em}
.statusHead{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px}
.statusHead i{flex:0 0 auto;width:14px;height:14px;background:var(--event-status-accent, var(--event-accent));border:2px solid #0b0b0b;border-radius:50%;box-shadow:0 0 0 2px var(--event-status-accent, var(--event-accent));margin-top:7px}
.statusHead div{display:flex;flex-direction:column}
.statusHead b{font-family:var(--event-font-display);font-size:22px}
.statusHead span{font-size:16px;color:#ddd}
.statusCard>p{font-size:15px;color:#bbb;margin:3px 0}

/* Operational status center (below hero) */
.statusCenter{padding:52px 6vw;background:var(--event-bg);color:var(--event-text);display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;border-top:1px solid rgba(255,255,255,.08)}
.statusCenter>.statusSummary:only-child{grid-column:1/-1}
.statusCenter .label{display:inline-block;width:max-content;padding:5px 9px;background:var(--event-status-accent, var(--event-accent));color:var(--event-accent-foreground, var(--event-bg));font-weight:900;font-size:14px;letter-spacing:.045em}
.statusChange time{display:block;margin:22px 0 9px;color:#a6abb0;font-size:14px;font-weight:700;text-transform:uppercase}
.statusChange h2{font-family:var(--event-font-display);font-size:clamp(30px,4vw,54px);line-height:.95;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 18px}
.statusChange>p:last-child{font-size:19px;line-height:1.5;color:#c7c9cc;max-width:660px}
.statusSummary{margin:20px 0 0;border-top:2px solid var(--event-text)}
.statusSummary>div{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.statusSummary dt{color:#8f9499;font-size:15px}
.statusSummary dd{margin:0;font-weight:800;font-size:16px}
.statusSummary>div:first-child dd{color:var(--event-status-foreground, var(--event-status-accent, var(--event-accent)));text-transform:uppercase}

/* Section title, shared by confirmed/timeline/faq/sportsSchedule */
.confirmed,.timeline,.faq,.sportsSchedule{padding:100px 6vw}
.sectionTitle{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end;margin-bottom:55px}
.sectionTitle h2,.vote h2{font-family:var(--event-font-display);font-size:clamp(34px,4.8vw,64px);line-height:1.02;letter-spacing:-.035em;margin:8px 0}
.sectionTitle>p{font-size:20px;color:#555;margin:0}

/* Sports schedule (docs/architecture.md, "Sports schedule" — Issue #30).
   Only ever rendered for a sports-category event with occurrences (see
   lib.context._build_sports_schedule) — inert, unreferenced CSS for every
   other existing event (Kanye/default included), so adding these rules
   here changes nothing about how any currently-rendered page looks.

   .sportsSchedule .sectionTitle: unlike confirmed/timeline/faq, this
   section's own <div class="sectionTitle"> never has a second child (no
   intro <p> — see the template), so the generic two-column
   `grid-template-columns:1.3fr .7fr` above would leave an empty second
   column. Single column here only, scoped to this one section, so
   confirmed/timeline/faq's own two-column layout is completely unaffected.

   .scheduleList: auto-fill/minmax rather than a fixed column count — at a
   narrow mobile width there is only ever room for the single 220px-minimum
   column (no horizontal scroll, no extra breakpoint needed for that
   alone), and this file's own @media(max-width:560px) block below still
   forces an explicit single column for full predictability. Deliberately
   NO max-width/margin-left:auto (unlike .feed in the timeline section,
   which is intentionally a narrower right-aligned column) — a matchday
   schedule reads better using the section's own full available width,
   especially once it has to show 5-8 occurrences; margin-left:auto with a
   max-width narrower than the section would have made it look like a thin
   right-hand column with empty space beside it. */
.sportsSchedule .sectionTitle{grid-template-columns:1fr}
.scheduleList{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.scheduleCard{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--event-line);border-left:4px solid var(--event-accent);border-radius:10px;background:var(--event-surface-card,#fff);color:inherit;text-decoration:none}
.scheduleCard[href]{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.scheduleCard[href]:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.09)}
.scheduleCard[href]:focus-visible{outline:3px solid var(--event-accent);outline-offset:3px}
.scheduleCard time{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--event-light-surface-accent, var(--event-accent))}
/* scheduleCardTime (OPTIONAL per-card start-time line, e.g. "19:30 MSK" —
   lib.context's `timeLabel`): deliberately muted/smaller than `time` above
   (the date), which stays the primary, always-present element. */
.scheduleCardTime{font-size:13px;color:#666;margin:2px 0 0}
.scheduleCardBody h3{font-family:var(--event-font-display);font-size:20px;line-height:1.25;margin:4px 0 2px}
.scheduleCardLocation{font-size:15px;color:#555;margin:0}

/* Standalone engagement CTA (docs/architecture.md, "Standalone engagement
   CTA" — Issue #30) — only rendered when affiliate.engagementStandalone is
   true (category:"sports" AND pollEnabled:false AND an engagement
   placement exists), so this is likewise inert for every event that keeps
   the poll-embedded engagement <aside> (Kanye included) and for any
   non-sports event regardless of pollEnabled/engagement. flex-wrap + the
   ≤560px column stack below keep this from ever causing horizontal
   overflow. */
.marketAction{padding:34px 6vw;background:var(--event-surface);border-top:1px solid var(--event-line);border-bottom:1px solid var(--event-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px}
.marketAction>p{margin:0;font-size:17px;color:#333;max-width:520px}
.marketActionCta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:220px;background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg));padding:16px 20px;font-size:18px;font-weight:800;font-family:var(--event-font-display);border-radius:8px}
.marketActionCta span{display:flex;flex-direction:column}
.marketActionCta small{font-size:13px;font-weight:400;opacity:.85;margin-top:2px}
.marketActionDisclosure{flex-basis:100%;font-size:13px;color:#888}

/* Optional reviewed app/APK download CTA. Kept as a normal in-flow section,
   separate from .mobileCta, so adding an app download never replaces or
   obscures the primary sportsbook/register route on small screens. */
.downloadAction{padding:26px 6vw;background:var(--event-bg);display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 18px}
.downloadActionCta{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:260px;background:transparent;color:var(--event-text);border:2px solid var(--event-accent);padding:14px 18px;font-size:17px;font-weight:800;font-family:var(--event-font-display);border-radius:8px}
.downloadActionCta span{display:flex;flex-direction:column}
.downloadActionCta small{font-size:13px;font-weight:400;color:#bbb;margin-top:2px}
.downloadActionCta:hover,.downloadActionCta:focus-visible{background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg))}
.downloadActionCta:hover small,.downloadActionCta:focus-visible small{color:inherit}
.downloadActionDisclosure{flex-basis:100%;text-align:right;font-size:13px;color:#888}

/* Confirmed facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid #111;border-bottom:2px solid #111}
/* Adaptive desktop column count (docs/architecture.md, "Confirmed facts"):
   lib.context._facts_count_class() derives one of facts--count-1/-2/-3/
   -4plus from the event's own fact count, so 1-3 facts don't leave empty
   columns in the base repeat(4,1fr) grid above. Scoped to min-width:901px
   (the same breakpoint the tablet/mobile rules below take over at) so
   those existing responsive rules stay the sole authority under it,
   completely unchanged; facts--count-4plus has no override here, so a
   4-fact event (Kanye's own production shape) keeps the original,
   unmodified repeat(4,1fr) at every width. */
@media(min-width:901px){
  .facts.facts--count-1{grid-template-columns:1fr}
  .facts.facts--count-2{grid-template-columns:repeat(2,1fr)}
  .facts.facts--count-3{grid-template-columns:repeat(3,1fr)}
}
.facts article{padding:30px 28px 40px;border-right:1px solid #bbb;min-height:280px}
.facts article:last-child{border-right:0}
.facts article>span{font-size:16px;color:var(--event-light-surface-accent, var(--event-accent));font-weight:800}
.facts h3{font-family:var(--event-font-display);font-size:24px;line-height:1.25;margin:24px 0 17px}
.facts p{font-size:18px;color:#4f4f4f;margin:0}
.sources{display:flex;align-items:stretch;gap:14px;margin-top:38px;flex-wrap:wrap}
.sources>span{display:flex;align-items:center;font-weight:700;margin-right:5px}
.sources a{display:flex;flex-direction:column;padding:13px 17px;background:var(--event-surface-card,#fff);border:1px solid var(--event-line);border-radius:10px;min-width:190px}
.sources a:hover{border-color:var(--event-accent)}
.sources b{font-size:17px}
.sources small{font-size:14px;color:#666;margin-top:2px}

/* Vote / poll */
.vote{padding:100px 6vw;background:var(--event-bg);color:var(--event-text);display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw}
.vote .label{color:var(--event-status-foreground, var(--event-status-accent, var(--event-accent)))}
.vote>div>p{font-size:19px;color:#bbb}
.votePanel button{width:100%;border:0;border-top:2px solid var(--event-text);background:transparent;color:var(--event-text);padding:24px 4px;display:flex;justify-content:space-between;align-items:center;font-size:19px;cursor:pointer;text-align:left;font-family:var(--event-font-display)}
.votePanel button b{font-size:42px}
.votePanel button.active{color:var(--event-vote-active-foreground, var(--event-accent))}
.votePanel button:disabled{cursor:wait;opacity:.65}
.meter{height:12px;background:#333}
.meter i{display:block;height:100%;width:0;background:var(--event-accent);transition:.25s}
.voteTotal{font-size:14px;color:#9da1a5;text-transform:uppercase;margin:16px 0 0}
.saved{font-size:16px;color:var(--event-status-foreground, var(--event-status-accent, var(--event-accent)))}
.voteError{font-size:15px;color:#ff5b5b}
aside{margin-top:35px;padding:27px;background:#171717;border:1px solid #333}
aside p{font-size:18px;color:#ccc}
aside a{display:flex;justify-content:space-between;background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg));padding:18px 20px;font-size:19px;font-weight:800;margin:18px 0 9px}
aside small{font-size:14px;color:#888}

/* Timeline */
.timeline{background:var(--event-timeline-surface, var(--event-surface))}
.feed{max-width:980px;margin-left:auto;border-top:2px solid #111}
.feed article{display:grid;grid-template-columns:160px 1fr;gap:40px;padding:26px 0;border-bottom:1px solid #aaa}
.feed time{font-size:15px;color:var(--event-light-surface-accent, var(--event-accent));font-weight:800}
.feed h3{font-family:var(--event-font-display);font-size:24px;margin:0 0 8px}
.feed p{font-size:18px;color:#4f4f4f;margin:0}
.feed article a{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--event-light-surface-accent, var(--event-accent))}

/* FAQ */
.faq{background:var(--event-faq-surface, #fff)}
.faq>div:last-child{max-width:980px;margin-left:auto}
.faq details{padding:25px 0;border-top:2px solid #111}
.faq summary{font-family:var(--event-font-display);font-size:22px;font-weight:800;display:flex;justify-content:space-between;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary b{color:var(--event-accent);font-weight:900}
/* The glyph's actual character lives entirely in CSS `content:`, not in
   the template's own <b> text (which is empty) — `details[open]` is a
   native browser state with no JS needed to detect it, so the toggle
   correctly flips between the two only on the ELEMENT it belongs to,
   never leaving a closed-state "+" showing while open. */
.faq summary b::before{content:"+"}
.faq details[open] summary b::before{content:"\2212"}
.faq details p{font-size:18px;color:#555;max-width:800px}

/* Cross-navigation to other tracked events */
.moreEvents{padding:90px 6vw;background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg));display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:end}
.moreEvents .label{background:var(--event-bg);color:var(--event-accent-foreground, var(--event-accent))}
.moreEvents h2{font-family:var(--event-font-display);font-size:clamp(36px,5.3vw,64px);line-height:1;letter-spacing:-.035em;margin:10px 0 25px}
.moreEvents>div>p:not(.label){font-size:20px;max-width:760px}
.moreEvents>div:first-child>a{display:inline-block;background:var(--event-bg);color:var(--event-accent-foreground, var(--event-accent));padding:17px 22px;font-size:18px;font-weight:800;margin-top:12px}
.categoryList{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--event-bg)}
.categoryList>*{display:block;padding:20px 10px;border-bottom:1px solid rgba(0,0,0,.35);font-size:19px;font-weight:700}
.categoryList>*:nth-child(odd){border-right:1px solid rgba(0,0,0,.35)}
.categoryList a{background:transparent;color:inherit;transition:background-color .18s,color .18s}
.categoryList a:hover,.categoryList a:focus-visible{background:var(--event-bg);color:var(--event-accent)}

/* Footer + sticky mobile CTA */
footer{padding:48px 6vw;background:var(--event-bg);color:var(--event-text);display:grid;grid-template-columns:.4fr 1.2fr .6fr;gap:5vw}
footer p{font-size:16px;color:#bbb;margin:0}
footer small{text-align:right;color:#888}
.mobileCta{display:none}

@media(max-width:900px){
  body{font-size:17px}
  nav{display:none}
  .heroShade{background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.2)),linear-gradient(90deg,rgba(0,0,0,.7),transparent)}
  .heroContent{margin:0 5vw 6vh}
  .sectionTitle,.vote{grid-template-columns:1fr}
  .vote{gap:45px}
  .facts{grid-template-columns:1fr 1fr}
  /* P2 regression: a 1-fact event fell through to the generic 2-column
     tablet rule above at 561-900px (the adaptive desktop fix at
     min-width:901px doesn't reach this band, and the mobile
     max-width:560px block below only forces full width at ≤560px),
     leaving a single fact card sitting in one half-width column next to
     an empty one. Scoped to facts--count-1 only, inside this SAME
     max-width:900px block, so 2/3/4-fact events (Kanye's own real
     4-fact shape included) keep the unmodified 2-column rule above at
     this width, and the ≤560px mobile block below still has the final
     word for every count, unchanged. */
  .facts.facts--count-1{grid-template-columns:1fr}
  .facts article:nth-child(2){border-right:0}
  .statusCenter{grid-template-columns:1fr;gap:38px}
  .moreEvents{grid-template-columns:1fr}
  .categoryList{margin-top:30px}
  footer{grid-template-columns:1fr}
  footer small{text-align:left}
}

@media(max-width:560px){
  header{height:64px;padding:0 20px}
  .logo{font-size:21px}
  .hero{min-height:calc(100svh - 64px)}
  .heroContent{width:auto;margin:0 20px 92px}
  .updated,.label{font-size:13px}
  .heroTitle{font-size:44px}
  .intro{font-size:18px}
  .meta b{font-size:23px}
  .meta span{font-size:15px}
  .cta{font-size:18px}
  .confirmed,.timeline,.faq,.vote,.sportsSchedule{padding:68px 20px}
  .statusCenter{padding:42px 20px;gap:32px}
  /* Sports schedule / standalone engagement CTA (Issue #30): explicit
     single-column/stacked layout at this width, never relying only on
     auto-fill/flex-wrap to avoid horizontal overflow on a real device. */
  .scheduleList{grid-template-columns:1fr}
  .marketAction{padding:28px 20px;flex-direction:column;align-items:stretch;gap:14px}
  .marketActionCta{width:100%}
  .marketActionDisclosure{flex-basis:auto}
  .downloadAction{padding:24px 20px;justify-content:stretch}
  .downloadActionCta{width:100%;min-width:0}
  .downloadActionDisclosure{text-align:left}
  /* P2 regression: real production styling (site-v3.css's own
     `@media(max-width:560px){.statusHead b{font-size:19px}...
     .statusCard>p{font-size:14px}...}` — a generic, theme-agnostic rule
     that appears BEFORE that file's own Kanye `:root` block, and is
     never redeclared with a font-size afterward, so it's the real
     cascade-winning value at this width for every theme, not just
     Kanye) shrinks the hero status card's headline and supporting text
     at ≤560px. Without this, the desktop 22px/15px sizes
     (.statusHead b/.statusCard>p above) kept applying on narrow
     screens, wrapping long RU/EN status labels harder and making the
     card taller than production. Scoped to font-size only; every other
     .statusCard/.statusHead property (padding, spacing, colors) is
     unchanged, and this rule applies identically to every theme —
     default and Kanye alike — since it lives in this generic,
     theme-agnostic file, never in a theme's own CSS. */
  .statusHead b{font-size:19px}
  .statusCard>p{font-size:14px}
  .statusChange h2{font-size:34px}
  .statusChange>p:last-child{font-size:17px}
  .statusSummary>div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .sectionTitle{display:block}
  .sectionTitle h2,.vote h2{font-size:34px}
  .sectionTitle>p{font-size:18px;margin-top:18px}
  .facts{grid-template-columns:1fr}
  .facts article{border-right:0;border-bottom:1px solid #aaa;min-height:0;padding:27px 0}
  .facts h3{margin:18px 0 10px;font-size:22px}
  .facts p,.feed p{font-size:17px}
  .sources{flex-direction:column}
  .sources a{width:100%}
  .votePanel button{font-size:17px}
  .votePanel button b{font-size:34px}
  .feed article{grid-template-columns:1fr;gap:5px}
  .faq summary{font-size:19px}
  .moreEvents{padding:65px 20px}
  .moreEvents h2{font-size:38px}
  .moreEvents>div>p:not(.label){font-size:18px}
  .categoryList{grid-template-columns:1fr}
  .categoryList>*:nth-child(odd){border-right:0}
  .mobileCta{display:block;position:fixed;left:12px;right:12px;bottom:12px;background:var(--event-accent);color:var(--event-accent-foreground, var(--event-bg));padding:16px;text-align:center;font-size:17px;font-weight:800;z-index:40;box-shadow:0 8px 30px #000}
  footer{padding:42px 20px 88px}
}

/* Keep reviewed APK/download CTA visible in the hero, directly below the primary CTA. */
.ctaDownload{margin-top:10px;background:transparent;border:1px solid currentColor;display:flex;align-items:center;gap:12px}
.androidCtaIcon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;color:#3ddc84}
.androidCtaIcon svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.downloadCtaCopy{flex:1;min-width:0}
.heroDownloadDisclosure{display:block;margin-top:6px;text-align:left;color:#aaa}