/* ════════════════════════════════════════════════════════════════════════
   STADIUM — FINAL · ESTADIO AZTECA
   The founder's chosen composition: V1 "Ground Dossier" frame, with the
   V3 "Venue Select" hero + replay theatre and the V5 "Postcard" city +
   climate sections folded in, all on the V1 navy frame.

   This is a CONSOLIDATION of three lab variation stylesheets. Class names
   keep their original .s1-/.s3-/.s5- prefixes so the copied markup keeps
   working and the look matches the chosen screenshots exactly; the prefixes
   do not collide.

   Source map (where each block came from):
     · Hero render + Replay Theatre  → stadium-v3-arcade.css   (.s3-*)
     · Quick Facts / The Numbers /
       Record Crowd / Timeline /
       Verdict + the two-column frame → stadium-v1-dossier.css  (.s1-*)
     · The City / Climate            → stadium-v5-postcard.css  (.s5-*)

   Frame-level concerns (body background, .site-wrapper, marquee, nav-bar,
   section-panel, footer, status-bar) are GLOBAL (global.css) and resolve to
   the V1 navy frame already — they are not re-declared here. No lab back-bar
   rules, no page-wide arcade scanline or postcard-paper body theming are
   carried over: only the section-scoped rules each chosen block needs.

   All colours via var(--c-*); all fonts via the --font-* tokens; all font
   sizes via --fs-* tokens. The ONLY literal px font sizes are inside the
   self-contained LED/seven-seg and CRT/neon effects carried over verbatim
   from the source variations, where a token genuinely does not apply
   (flagged inline at each one).
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   FRAME — small status-bar nudge (replaces the V1 inline style on .status-bar)
   ════════════════════════════════════════════════════════════════════════ */
.s1-statusbar { margin-top: 2px; }


/* ════════════════════════════════════════════════════════════════════════
   1 · HERO — CRT CABINET + PIXEL STADIUM RENDER      (from V3 · stadium-v3-arcade)
   The hero sits on the V1 navy frame; the CRT panel keeps its own navy screen
   and the section-scoped scanline/neon glow that make the render read as a
   glowing cabinet. (No page-wide arcade theming is brought across.)
   ════════════════════════════════════════════════════════════════════════ */

/* shared panel rhythm carried by the hero and the replay-theatre panel */
.s3-panel { margin-bottom: 1.25rem; position: relative; }

.s3-cabinet {
  margin: 0.75rem 0 1.25rem;
  padding: 10px;
  background: var(--c-gray4);
  border: 4px solid;
  border-color: var(--c-gray2) var(--c-gray4) var(--c-gray4) var(--c-gray2);
  box-shadow: 6px 6px 0 var(--c-navy);
}

.s3-crt {
  position: relative;
  background:
    radial-gradient(circle at 50% 32%, rgba(68,153,221,0.22), transparent 62%),
    var(--c-navy);
  border: 3px solid var(--c-sky);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.85);  /* CRT vignette — effect-local px */
  padding: 1.25rem 1rem 1.4rem;
  overflow: hidden;
  text-align: center;
}
/* CRT scanlines + a slow flicker glow on top of the screen */
.s3-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0.18), rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px); /* scanline pitch — effect-local px */
  animation: s3-flicker 3.6s steps(2) infinite;
}
@keyframes s3-flicker { 0%, 96%, 100% { opacity: 0.55; } 97% { opacity: 0.32; } 98% { opacity: 0.7; } }

.s3-stadium-svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(245,200,0,0.35));  /* neon glow — effect-local px */
}

.s3-hero-name {
  font-family: var(--font-chrome);  /* ASCII only — no accents in this string */
  font-size: var(--fs-title);
  color: var(--c-yellow);
  letter-spacing: 2px;
  line-height: 1.5;
  margin-top: 0.9rem;
  text-shadow:
    2px 2px 0 var(--c-orange),
    0 0 12px rgba(245,200,0,0.55);  /* neon bloom — effect-local px */
  animation: s3-namepulse 2.4s ease-in-out infinite;
}
@keyframes s3-namepulse {
  0%, 100% { text-shadow: 2px 2px 0 var(--c-orange), 0 0 10px rgba(245,200,0,0.45); }
  50%      { text-shadow: 2px 2px 0 var(--c-orange), 0 0 18px rgba(245,200,0,0.8); }
}

.s3-hero-sub {
  /* accented name → Courier Prime (Press Start has no accent glyphs) */
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--c-sky);
  letter-spacing: 1px;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.s3-hero-tagline {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  letter-spacing: 2px;
  margin-top: 0.4rem;
}


/* ════════════════════════════════════════════════════════════════════════
   2 · QUICK FACTS + THE NUMBERS              (from V1 · stadium-v1-dossier)
   Also supplies the shared two-column layout reused by the facts/numbers row.
   ════════════════════════════════════════════════════════════════════════ */

/* ── SHARED TWO-COLUMN LAYOUT ── */
.s1-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}
@media (max-width: 760px) {
  .s1-twocol { grid-template-columns: 1fr; }
}
.s1-twocol > .section-panel { margin: 0; }

/* ── DEFINITION-LIST FACT ROWS (Quick Facts) ── */
.s1-fact-list { display: flex; flex-direction: column; }
.s1-fact {
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 0.75rem;
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-midblue);
  align-items: baseline;
}
.s1-fact:last-child { border-bottom: none; }
.s1-fact dt {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-sky);
  letter-spacing: 1px;
  line-height: 1.4;
}
.s1-fact dd {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  line-height: 1.3;
}
.s1-fact-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-gray2);
  letter-spacing: 0.5px;
}
.s1-fact-peak dd { color: var(--c-yellow); }
@media (max-width: 420px) {
  .s1-fact { grid-template-columns: 1fr; gap: 2px; }
}

/* ── THE NUMBERS (stat bars) ── */
.s1-stat-panel .bar-fill { width: 0; }
.s1-stat-note {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray2);
  line-height: 1.4;
  margin-top: 0.5rem;
  border-top: 1px solid var(--c-midblue);
  padding-top: 0.6rem;
}


/* ════════════════════════════════════════════════════════════════════════
   3 · WC LEDGER — REPLAY THEATRE            (from V3 · stadium-v3-arcade)
   ════════════════════════════════════════════════════════════════════════ */
.s3-replay { display: flex; flex-direction: column; gap: 10px; }
.s3-replay-row {
  background: rgba(0,0,0,0.35);
  border: 2px solid var(--c-midblue);
  border-left: 5px solid var(--c-green);
  padding: 0.7rem 0.85rem;
}
.s3-replay-soon { border-left-color: var(--c-orange); }

.s3-replay-yr {
  display: inline-block;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-yellow);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.s3-replay-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.s3-vs-badge {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-yellow);
  padding: 4px 7px;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 var(--c-orange);
  flex-shrink: 0;
}
.s3-vs-soon { background: var(--c-orange); color: var(--c-navy); box-shadow: 2px 2px 0 var(--c-navy); }
.s3-replay-teams {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: 1px;
}
.s3-replay-score {
  display: inline-block;
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-yellow);
  padding: 0 6px;
  text-shadow: 0 0 6px rgba(245,200,0,0.4);  /* effect-local px */
}
.s3-score-soon { color: var(--c-orange); }
.s3-replay-round {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-sky);
  padding: 3px 7px;
  letter-spacing: 1px;
}
.s3-replay-blurb {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════
   4 · RECORD CROWD CALLOUT — big LED-style number on black   (from V1)
   ════════════════════════════════════════════════════════════════════════ */
.s1-record {
  background: var(--c-navy);
  border: 3px solid var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-red), 4px 4px 0 var(--c-navy);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.s1-record-tag {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-orange);
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}
.s1-record-big {
  font-family: var(--font-vt);
  font-size: var(--fs-mega);
  color: var(--c-green);
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(0,170,68,0.6);
}
.s1-record-meta { margin-top: 0.5rem; }
.s1-record-line {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  line-height: 1.4;
}
.s1-record-date { color: var(--c-yellow); }
.s1-record-foot {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray2);
  line-height: 1.4;
  margin: 0.85rem auto 0;
  max-width: 60ch;
  border-top: 1px solid var(--c-gray4);
  padding-top: 0.6rem;
}


/* ════════════════════════════════════════════════════════════════════════
   5 · THE CITY — VISITOR SNAPSHOT / TRAVEL-POSTER CARDS   (from V5 · postcard)
   ════════════════════════════════════════════════════════════════════════ */

/* generic section spacing for the V5 sections */
.s5-section { margin-bottom: 1.25rem; }

.s5-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 620px) {
  .s5-poster-grid { grid-template-columns: 1fr; }
}

.s5-card {
  position: relative;
  background: rgba(0,0,0,0.32);
  border: 2px solid var(--c-midblue);
  border-top-width: 6px;
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}
.s5-card-teal   { border-top-color: var(--c-teal); }
.s5-card-orange { border-top-color: var(--c-orange); }
.s5-card-yellow { border-top-color: var(--c-yellow); }
.s5-card-sky    { border-top-color: var(--c-sky); }

.s5-card-flag {
  font-size: var(--fs-emoji);
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}
.s5-card-title {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-yellow);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--c-orange);
  margin-bottom: 0.6rem;
}
.s5-card-list {
  list-style: none;
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-white);
}
.s5-card-list li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 2px;
}
.s5-card-list li::before {
  content: '\25B8';   /* ▸ */
  position: absolute;
  left: 0;
  color: var(--c-teal);
}

/* good-to-know definition list */
.s5-fact-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.35;
}
.s5-fact-dl dt {
  color: var(--c-sky);
  white-space: nowrap;
}
.s5-fact-dl dd { color: var(--c-white); min-width: 0; }

.s5-card-prose {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--c-white);
}
.s5-card-prose strong { color: var(--c-yellow); }
.s5-tip {
  margin-top: 0.6rem;
  color: var(--c-gray1);
  border-top: 1px dashed var(--c-midblue);
  padding-top: 0.5rem;
}


/* ════════════════════════════════════════════════════════════════════════
   6 · CLIMATE — WEATHER BRIEF / HOLIDAY BROCHURE       (from V5 · postcard)
   ════════════════════════════════════════════════════════════════════════ */
.s5-climate-section { border-color: var(--c-teal); }

.s5-climate-grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .s5-climate-grid { grid-template-columns: 1fr 1fr; }
  .s5-climate-prose { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .s5-climate-grid { grid-template-columns: 1fr; }
}

.s5-temp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* gold (lighter) at the top behind the small 12px label so navy text clears WCAG AA
     ~4.5:1; orange at the foot behind the 20px number (large text, 3:1 is enough) */
  background: linear-gradient(180deg, var(--c-gold), var(--c-orange));
  border: 3px solid var(--c-yellow);
  box-shadow: 4px 4px 0 var(--c-navy);
  padding: 0.9rem 1.1rem;
  min-width: 120px;
}
.s5-temp-card-cool {
  background: linear-gradient(180deg, var(--c-blue), var(--c-midblue));
  border-color: var(--c-sky);
}
.s5-temp-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-navy);
}
.s5-temp-card-cool .s5-temp-label { color: var(--c-white); }
.s5-temp-big {
  font-family: var(--font-chrome);
  font-size: var(--fs-lg);
  color: var(--c-navy);
  text-shadow: 2px 2px 0 var(--c-yellow);
  margin: 0.4rem 0 0.2rem;
}
.s5-temp-card-cool .s5-temp-big { color: var(--c-white); text-shadow: 2px 2px 0 var(--c-navy); }
.s5-temp-alt {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-navy);
}
.s5-temp-card-cool .s5-temp-alt { color: var(--c-white); }

.s5-climate-prose {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--c-white);
  min-width: 0;
}
.s5-climate-prose em { color: var(--c-teal); font-style: italic; }

.s5-pack {
  margin-top: 0.75rem;
  background: rgba(0,0,0,0.3);
  border-left: 4px solid var(--c-teal);
  padding: 0.6rem 0.75rem;
}
.s5-pack-head {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-teal);
  margin-bottom: 0.4rem;
}
.s5-pack-list {
  list-style: none;
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-white);
}
.s5-pack-list li { margin-bottom: 2px; }

/* ── "HISTORICAL CLIMATE, NOT A FORECAST" disclaimer banner (caution-flag style) ── */
.s5-illustrative {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--c-white);
  background: rgba(224,96,0,0.14);
  border: 2px solid var(--c-orange);
  border-left-width: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
/* yellow (not orange) on the dark tinted box: orange (#e06000) on this background is
   only ~3.4:1 — fails WCAG AA for the 16px small-flag label; yellow clears 9:1 and stays
   on-palette as a caution flag */
.s5-illustrative strong { color: var(--c-yellow); letter-spacing: 1px; }


/* ════════════════════════════════════════════════════════════════════════
   7 · FILE TIMELINE — vertical ledger of dated entries        (from V1)
   ════════════════════════════════════════════════════════════════════════ */
.s1-timeline {
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--c-blue);
  padding-left: 1rem;
  margin-left: 0.4rem;
}
.s1-tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--c-midblue);
  align-items: baseline;
}
.s1-tl-entry:last-child { border-bottom: none; }
/* pixel node on the spine */
.s1-tl-entry::before {
  content: '';
  position: absolute;
  left: calc(-1rem - 8px);
  top: 0.9rem;
  width: 12px;
  height: 12px;
  background: var(--c-yellow);
  border: 2px solid var(--c-gold);
  box-shadow: 2px 2px 0 var(--c-navy);
}
.s1-tl-hi::before { background: var(--c-orange); border-color: var(--c-red); }
.s1-tl-year {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--c-yellow);
  letter-spacing: 1px;
}
.s1-tl-hi .s1-tl-year { color: var(--c-orange); }
.s1-tl-text {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════
   8 · PROF. INKSWORTH VERDICT (reuses global .octo-box / .octo-speech)  (V1)
   ════════════════════════════════════════════════════════════════════════ */
.s1-verdict { margin-bottom: 1.25rem; }
.s1-verdict .panel-title { margin: -1rem -1rem 0.85rem; }
.s1-verdict-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.s1-octo {
  font-size: var(--fs-mega);
  line-height: 1;
  flex-shrink: 0;
}
.s1-octo-speech { grid-column: 2; }
.s1-octo-name { grid-column: 2; }
@media (max-width: 460px) {
  .s1-verdict-body { grid-template-columns: 1fr; }
  .s1-octo { text-align: center; }
  .s1-octo-speech, .s1-octo-name { grid-column: 1; }
}


/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE / REDUCED-MOTION — carried from the source variations
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
  .s3-hero-name { letter-spacing: 1px; }
}

/* Cross-link rows — internal links to matches played at this venue.
   New rules only; reuse the .s1-tl-entry timeline grid for layout. */
.s1-linkrow {
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.s1-linkrow:hover { background: rgba(245,200,0,0.10); }
.s1-linkrow:hover .s1-tl-text { color: var(--c-yellow); }
.s1-linkrow .s1-tl-text { transition: color 0.1s; }

/* Respect reduced-motion: kill the cosmetic hero loops */
@media (prefers-reduced-motion: reduce) {
  .s3-crt::after,
  .s3-hero-name { animation: none; }
}