/* ================================================================
   WGC Base CSS v2.0.0
   Shared stylesheet for all WoT: HEAT content pages
   Design principles (from art review 2026-03-25):
     A. Yellow is a verb — reserved for buttons/CTAs only
     B. Restraint is polish — hierarchy via size/weight, not color variety
     C. Density signals professionalism — compact, uniform layouts
   Changes from v1.0.0: see CHANGELOG.md v3.0.0
   ================================================================ */

    /* ================================================================
       @FONT-FACE
       ================================================================ */
    @font-face {
      font-family: 'Normalidad Extended';
      src: url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-ExtendedMedium.woff2') format('woff2'),
           url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-ExtendedMedium.woff') format('woff');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Normalidad Compact';
      src: url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactRegular.woff2') format('woff2'),
           url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactRegular.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Normalidad Compact';
      src: url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactMedium.woff2') format('woff2'),
           url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactMedium.woff') format('woff');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Normalidad Compact';
      src: url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactBold.woff2') format('woff2'),
           url('../Assets/Font/WG Normalidad/web/WG Normalidad/WGNormalidad-CompactBold.woff') format('woff');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ================================================================
       CUSTOM PROPERTIES
       ================================================================ */
    :root {
      /* Primary */
      --color-white-heat: #F8F7F6;
      --color-black-heat: #12191D;

      /* Accents */
      --color-yellow: #FFD85C;
      --color-yellow-hover: #F2BF51;
      --color-red: #FF6D46;
      --color-green: #84FFB1;

      /* Gray scale */
      --color-gray-200: #E9E5E0;
      --color-gray-300: #C5C5C3;
      --color-gray-400: #A1A4A6;
      --color-gray-500: #8B8E8F;
      --color-gray-600: #747678;
      --color-gray-700: #41474C;
      --color-gray-800: #2D353B;
      --color-gray-900: #172026;

      /* Extended yellow */
      --color-yellow-100: #FFFBEF;
      --color-yellow-200: #FFF3CC;
      --color-yellow-300: #FFEDB4;
      --color-yellow-400: #FFE592;
      --color-yellow-500: #FFE07D;
      --color-yellow-700: #F2BF51;
      --color-yellow-800: #D59F48;
      --color-yellow-900: #B28337;

      /* Extended red */
      --color-red-100: #FFF0ED;
      --color-red-200: #FFD2C6;
      --color-red-700: #FF5E33;
      --color-red-900: #AB391B;

      /* Extended green */
      --color-green-100: #F3FFF7;
      --color-green-200: #D9FFE7;
      --color-green-700: #78E8A1;
      --color-green-900: #4AA26A;

      /* Semantic */
      --bg: var(--color-black-heat);
      --text: var(--color-white-heat);
      --text-muted: rgba(248, 247, 246, 0.7);
      --line: rgba(248, 247, 246, 0.14);
      --panel: #1E2529;
      --panel-2: #222830;

      /* Typography */
      --font-display: 'Normalidad Extended', 'Aptos', 'Verdana', sans-serif;
      --font-body: 'Normalidad Compact', 'Aptos', 'Verdana', sans-serif;
      --type-base: 16px;

      /* Layout */
      --content-width: 1200px;
      --site-width: 1440px;
      --gutter: 24px;
      --section-gap: 36px;
      --header-height: 64px;
    }

    /* ================================================================
       RESET & BASE
       ================================================================ */
    *, *::before, *::after { box-sizing: border-box; }

    /* Horizontal-overflow guard. Long uppercase headings in the wide display
       face (and the fixed site header on very narrow phones) can push the
       document wider than the viewport, which clips body copy on the right.
       `clip` is preferred over `hidden` because it does NOT create a scroll
       container, so `position: sticky` descendants keep working; `hidden` is
       declared first as the fallback for engines without `clip`. */
    html, body {
      overflow-x: hidden;
      overflow-x: clip;
    }

    body {
      margin: 0;
      padding-top: var(--header-height);
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--type-base);
      font-weight: 400;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; height: auto; display: block; }

    a {
      color: var(--color-yellow);
      text-decoration: none;
      transition: color 0.2s;
    }
    a:hover { text-decoration: underline; }

    /* ================================================================
       TYPOGRAPHY
       ================================================================ */
    h1, h2, h3, h4 {
      font-family: var(--font-display);
      font-weight: 500;
      line-height: 1.1;
      margin: 0 0 0.5em;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    h1 {
      font-size: clamp(2.5rem, 5vw + 1rem, 6rem);
    }

    h2 {
      font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
    }

    /* Utility headings — smaller, functional */
    .section--gallery h2,
    .section--faq h2 {
      font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
      font-family: var(--font-body);
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    h3 {
      font-family: var(--font-body);
      font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    h4 {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    p {
      margin: 0 0 1em;
      color: var(--text-muted);
    }

    .subtitle {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: clamp(1rem, 1.5vw + 0.25rem, 1.5rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .section-label {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);  /* v2: yellow reserved for buttons only */
      margin-bottom: 1rem;
    }

    .text-bar {
      display: inline-block;
      border: 1px solid currentColor;
      padding: 0.35em 1em;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .muted { color: var(--text-muted); }

    /* Badge label — bordered pill for mode indicators, tier labels, etc. */
    .badge-label {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text);  /* v2: yellow reserved for buttons */
      border: 1px solid var(--line);  /* v2: subtle border */
      padding: 0.2em 0.6em;
      margin-bottom: 0.75rem;
    }

    /* ================================================================
       LAYOUT
       ================================================================ */
    .container {
      width: 100%;
      max-width: var(--content-width);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    .container--wide {
      max-width: var(--site-width);
    }

    .section {
      padding: var(--section-gap) 0;
    }

    /* ================================================================
       COMPONENTS — Buttons
       ================================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0.75em 2em;
      background: var(--color-yellow);
      color: var(--color-black-heat);
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      font-stretch: normal;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn:hover {
      background: var(--color-yellow-hover);
      text-decoration: none;
      color: var(--color-black-heat);
    }
    .btn:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }

    .btn--outline {
      background: transparent;
      border: 1px solid var(--color-yellow);
      color: var(--color-yellow);
    }
    .btn--outline:hover {
      background: var(--color-yellow);
      color: var(--color-black-heat);
    }

    .btn--large {
      padding: 1em 3em;
      font-size: 1rem;
    }

    /* ================================================================
       UTILITIES
       ================================================================ */
    /* Generic text-centering utility. Use on a wrapper to center inline /
       inline-flex children (buttons, links, the muted window line, etc.)
       within sections that don't have their own centering built in. */
    .text-center {
      text-align: center;
    }

    /* Window-line + CTA footer under the current-week feature grid. Adds
       breathing room so the muted line doesn't sit flush against the cards
       and gives the CTA a margin below the line. Used in the Twitch Drops
       Season 0 promo; reusable on any rolling-update page with the same
       pattern. */
    .current-week__footer {
      margin-top: 2.5rem;
    }
    .current-week__footer .muted {
      margin-bottom: 1.5rem;
    }
    /* v1.8.3: card content reverted to default left-aligned per operator —
       only the page H2 stays left-aligned (which is the default for h2 in
       .section--features). No #current-week .feature-card override is needed. */
    /* Page-scoped: cap the mission-list screenshot's max-width so the
       2091px-wide capture doesn't fill the entire wide container. Centered
       via auto margins. Tune the value to taste — 880px reads well on
       desktop without losing the mission-row detail. */
    #mission-screenshot figure {
      max-width: 880px;
      margin: 0 auto;
    }
    /* v1.8.5: page-scoped hero background-position override. The shared
       .section--hero-article[data-bg]::before rule defaults to "center 30%".
       For the Season 0 hero we focus on the agents (upper portion of source
       image) rather than the tank line below. Position-y at 10% puts the
       visible strip on the agents' helmets/faces/torsos. */
    #hero[data-bg]::before {
      background-position: center 10%;
    }
    /* v1.8.6: page-scoped hero padding bump. The shared rule uses
       calc(80px + 32px) top / 32px bottom — that sits the bracket title flush
       under the sticky header and the next section close beneath. Add a touch
       of breathing room above and below for this page. Also restore the full
       section-gap on the section that follows (the shared rule halves it). */
    #hero.section--hero-article {
      padding: calc(80px + 56px) 0 56px;
    }
    #hero.section--hero-article + .section {
      padding-top: var(--section-gap);
    }

    /* ================================================================
       COMPONENTS — Frame (rectangular [ ] brackets)
       Per approved designs: full-height vertical lines with short
       horizontal caps — like typographic [ ] brackets.
       ================================================================ */
    .frame {
      position: relative;
    }
    .frame::before,
    .frame::after {
      content: '';
      position: absolute;
      top: -1px;
      bottom: -1px;
      width: 16px;
      border-color: var(--text);
      border-style: solid;
      pointer-events: none;
    }
    .frame::before {
      left: -1px;
      border-width: 2px 0 2px 2px;  /* [ shape: top + bottom + left */
    }
    .frame::after {
      right: -1px;
      border-width: 2px 2px 2px 0;  /* ] shape: top + right + bottom */
    }

    /* Four-corner variant kept for backward compat — frame-inner is a no-op
       since [ ] brackets already span full height */
    .frame--all .frame-inner {
      position: relative;
      display: inherit;
      justify-content: inherit;
      gap: inherit;
      width: 100%;
    }
    .frame--all .frame-inner::before,
    .frame--all .frame-inner::after {
      content: none;  /* Not needed — outer [ ] brackets cover all edges */
    }

    /* ================================================================
       COMPONENTS — Card
       ================================================================ */
    .card {
      border: 1px solid var(--line);
      background: var(--panel);
      padding: 1.5rem;
    }

    /* ================================================================
       COMPONENTS — Info box
       ================================================================ */
    .info-box {
      border-left: 3px solid var(--color-gray-600);  /* v2: structural accent */
      background: var(--panel-2);
      padding: 1rem 1.25rem;
      font-size: 0.875rem;
      line-height: 1.7;
      color: var(--text-muted);
    }
    .info-box strong { color: var(--text); }

    /* ================================================================
       HEADER
       ================================================================ */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: #12191D;
      border-bottom: 1px solid var(--line);
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height);
      gap: 1rem;
    }

    .site-header__logo {
      flex-shrink: 0;
      color: #fff;
    }
    .site-header__logo-img {
      height: 28px;
      width: auto;
    }

    .site-header__nav {
      display: flex;
      align-items: center;
    }
    .site-header__links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 2rem;
    }
    .site-header__links a {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      text-decoration: none;
      transition: color 0.2s;
    }
    .site-header__links a:hover {
      color: var(--color-yellow);
      text-decoration: none;
    }

    .site-header__actions {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    /* ── Language selector ── */
    .lang-selector {
      position: relative;
    }
    .lang-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 0.75rem;
      background: transparent;
      border: 1px solid var(--line);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .lang-toggle:hover {
      border-color: var(--color-yellow);
    }
    .lang-toggle svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
    .lang-chevron {
      transition: transform 0.2s;
    }
    .lang-toggle[aria-expanded="true"] .lang-chevron {
      transform: rotate(180deg);
    }

    .lang-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      min-width: 160px;
      max-height: 320px;
      overflow-y: auto;
      background: var(--color-gray-900);
      border: 1px solid var(--line);
      list-style: none;
      padding: 0.25rem 0;
      z-index: 100;
    }
    .lang-dropdown.open {
      display: block;
    }
    .lang-dropdown li a {
      display: block;
      padding: 0.5rem 1rem;
      color: var(--text-muted);
      font-size: 0.8125rem;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .lang-dropdown li a:hover,
    .lang-dropdown li a.active {
      background: var(--color-gray-800);
      color: var(--color-yellow);
      text-decoration: none;
    }

    /* ── Hamburger menu ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      padding: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .hamburger__line {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--text);
      transition: transform 0.3s, opacity 0.3s;
    }
    .hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
      opacity: 0;
    }
    .hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile nav overlay */
    .mobile-nav {
      display: none;
      position: fixed;
      top: var(--header-height);
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(18, 25, 29, 0.98);
      z-index: 999;
      padding: 2rem var(--gutter);
    }
    .mobile-nav.open {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
    }
    .mobile-nav a {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text);
      text-decoration: none;
    }
    .mobile-nav a:hover {
      color: var(--color-yellow);
    }

    /* ================================================================
       SECTION: Hero
       ================================================================ */
    .section--hero {
      padding: 0;
    }
    .hero {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    .hero__media {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero__img,
    .hero__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero__overlay {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 4rem 0;
      background: linear-gradient(
        to top,
        rgba(18, 25, 29, 0.95) 0%,
        rgba(18, 25, 29, 0.6) 40%,
        transparent 100%
      );
      text-align: center;
    }
    .hero__overlay .container {
      max-width: 960px;
    }
    /* Rectangular [ ] bracket frame on hero content — matches article hero style */
    .hero__frame {
      position: relative;
      padding: 2rem 2.5rem;
      display: inline-block;
      margin-bottom: 1.5rem;
    }
    .hero__frame::before,
    .hero__frame::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 16px;
      border-color: var(--text);
      border-style: solid;
      pointer-events: none;
    }
    .hero__frame::before {
      left: 0;
      border-width: 2px 0 2px 2px;  /* [ bracket */
    }
    .hero__frame::after {
      right: 0;
      border-width: 2px 2px 2px 0;  /* ] bracket */
    }
    .hero__title {
      color: var(--text);
      margin-bottom: 0.25em;
      font-size: clamp(2rem, 5vw, 3.5rem);
    }
    .hero__subtitle {
      margin-bottom: 1.5em;
    }

    /* ================================================================
       SECTION: Text block
       ================================================================ */
    .section--text .text-content {
      max-width: none;
    }
    .section--text .text-content p {
      font-size: 1.0625rem;
      line-height: 1.8;
    }
    .text-figure {
      margin: 2rem 0;
    }
    .text-figure img {
      width: 100%;
    }
    .text-figure figcaption {
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--text-muted);
    }
    /* Framed text-figure — hover border on image only */
    .text-figure--framed img {
      display: block;
      border: 2px solid transparent;
      transition: border-color 0.2s;
    }
    .text-figure--framed:hover img {
      border-color: var(--color-gray-400);
    }

    /* Portrait text-figure — tall character cutout, height-capped and centered
       so a full-body render doesn't dominate the column (flair-deep-dive). */
    .text-figure--portrait img {
      width: auto;
      max-height: 25rem;
      margin-inline: auto;
    }
    .text-figure--portrait figcaption {
      text-align: center;
    }

    /* Video figure — self-hosted, click-to-play (poster + controls, preload=none).
       Right treatment for 10-100s ability demo clips; only the poster loads until
       the reader presses play (flair-deep-dive). */
    .video-figure {
      margin: 2rem auto;
      max-width: 960px;
    }
    .video-figure video {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
    }
    .video-figure figcaption {
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--text-muted);
    }
    .video-figure--placeholder .video-ph {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 16 / 9;
      width: 100%;
      border: 2px dashed rgba(255, 255, 255, 0.18);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-muted);
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    /* Tuck an injected ability video tight beneath the text it illustrates, so
       the clip reads as part of that block rather than a standalone section
       (flair-deep-dive, operator design iteration 2026-07-08: kill the big gap
       above the clip). .video-injected is itself a .section--text, so the first
       selector also tightens the space between two consecutive clips. */
    .section--text:has(+ .video-injected) {
      padding-bottom: 0;
    }
    .video-injected {
      padding-top: 0;
    }
    .video-injected .video-figure {
      margin-top: 0.75rem;
    }

    /* Build / skill-screen captures (flair-deep-dive): framed UI screenshots that
       sit under a build list. Height-cap the tall skill screen so it doesn't
       dominate the column; the wide module strips fill the text column. */
    .text-figure--build img {
      width: auto;
      max-width: 100%;
      max-height: 34rem;
      margin-inline: auto;
    }
    .text-figure--build figcaption {
      text-align: center;
    }

    /* Sub-topic sections (How to play it / Why it works together / The trade-off)
       belong with the vehicle or build section above them — pull them up tight
       instead of a full section gap. The section-label eyebrow is empty on this
       page, so hide it to reclaim its reserved space (flair-deep-dive, operator
       design iteration 2026-07-08). */
    .section--text.section--subtopic {
      padding-top: 0;
    }
    .section--text:has(+ .section--subtopic) {
      padding-bottom: 0;
    }
    .section--subtopic .section-label:empty {
      display: none;
    }

    /* Build lists (Leopard 2FK / 2KST): highlight only the slot + equipment name
       (the <strong>); mute the description so the block reads as a spec list
       rather than a wall of bright text (flair-deep-dive). */
    .build-list li {
      color: var(--text-muted);
    }
    .build-list li strong {
      color: var(--text);
    }

    /* Sub-topic h3 inside text + media-clip sections: tighter top spacing
       so sub-topics feel grouped under their parent category h2. */
    .section--text .text-content h3,
    .section--media-clip h3 {
      margin-top: 0;
      margin-bottom: 0.5em;
    }
    .section--text + .section--text:has(.text-content h3:first-child),
    .section--text + .section--media-clip:has(h3:first-of-type),
    .section--media-clip + .section--text:has(.text-content h3:first-child),
    .section--media-clip + .section--media-clip:has(h3:first-of-type) {
      padding-top: 0;
    }

    /* ================================================================
       SECTION: Image + text split
       ================================================================ */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
    }
    .split__img {
      width: 100%;
      max-height: 500px;
      object-fit: cover;
    }
    .split--reverse .split__media {
      order: 2;
    }
    .split--reverse .split__content {
      order: 1;
    }
    .split__content h2 {
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
    }

    /* Clickable split images — add class split__media--lightbox to enable */
    .split__media--lightbox {
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .split__media--lightbox .split__img {
      transition: transform 0.3s;
    }
    .split__media--lightbox:hover .split__img {
      transform: scale(1.03);
    }
    .split__media--lightbox::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid transparent;
      transition: border-color 0.2s;
      pointer-events: none;
    }
    .split__media--lightbox:hover::after {
      border-color: var(--color-gray-400);  /* v2: subtle hover */
    }

    /* Info-style split media — centers a small logo/mark on a dark panel.
       Use for partner/sponsor info blocks where the media is a compact
       brand mark, not a full-bleed image. Pairs with default or reverse
       split variants. */
    .split__media--info {
      background: var(--panel-dark, #1a1a1a);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem;
      min-height: 280px;
      aspect-ratio: 16 / 9;
    }
    .split__media--info .split__img {
      width: auto;
      max-width: 240px;
      max-height: 180px;
      object-fit: contain;
    }

    /* ================================================================
       SECTION: Screenshot gallery
       ================================================================ */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 0.75rem;
    }
    .gallery__item {
      position: relative;
      overflow: hidden;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      aspect-ratio: 16 / 9;
    }
    .gallery__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    .gallery__item:hover img {
      transform: scale(1.04);
    }
    .gallery__item:hover {
      box-shadow: 0 0 0 2px var(--color-gray-400);  /* v2: subtle hover */
    }
    .gallery__item:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }

    /* ================================================================
       SECTION: Video embed
       ================================================================ */
    .video-embed {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      margin-top: 1.5rem;
    }
    .video-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* ================================================================
       SECTION: Media clip (inline auto-playing WebM)
       ================================================================ */
    .section--media-clip {
      padding-top: var(--section-gap);
      padding-bottom: var(--section-gap);
    }

    /* Single-clip figure */
    .media-clip {
      margin: 1.5rem auto 0;
      max-width: 920px;
      padding: 0;
    }

    /* 16:9 frame holding video, poster, and overlay button */
    .media-clip__frame {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .media-clip__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Poster: visible by default, fades out when video starts playing.
       Inverted from the hide-by-default original plan (review fix H3). */
    .media-clip__poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 1;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 1;
    }
    .media-clip[data-state="playing"] .media-clip__poster {
      opacity: 0;
      pointer-events: none;
    }

    /* Always-visible play/pause button (review fix B2 — WCAG 2.1 SC 2.2.2).
       40% opacity at rest, full on hover/focus. Bottom-left pill. */
    .media-clip__playpause {
      position: absolute;
      bottom: 12px;
      left: 12px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 999px;
      background: rgba(18, 25, 29, 0.7);
      color: var(--text);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      transition: opacity 0.2s ease, border-color 0.2s ease;
      z-index: 2;
    }
    .media-clip__frame:hover .media-clip__playpause,
    .media-clip__playpause:hover,
    .media-clip__playpause:focus {
      opacity: 1;
    }
    /* Review fix H4 — outline (not border) so layout doesn't shift. */
    .media-clip__playpause:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
      opacity: 1;
    }
    .media-clip__playpause svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
      pointer-events: none;
    }
    /* Hide the not-active icon — JS toggles by adding/removing data-paused. */
    .media-clip__playpause[data-paused="true"] .icon-pause,
    .media-clip__playpause[data-paused="false"] .icon-play {
      display: none;
    }

    /* Caption + label */
    .media-clip__caption {
      font-size: 0.875rem;
      color: var(--text-muted);
      margin-top: 0.75rem;
      text-align: center;
      line-height: 1.5;
    }
    .media-clip__label {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--text-muted);
      margin: 0 0 0.5rem;
    }

    /* Pair variant — two clips side by side. Review fix L1: BEM child class. */
    .media-clip-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gutter);
      max-width: 1200px;
      margin: 1.5rem auto 0;
    }
    .media-clip-pair__item {
      max-width: 100%;
      margin: 0;
    }

    /* List variant — embeddable inside cards/list items. */
    .media-clip--list {
      max-width: 360px;
      margin: 0 0 1rem;
    }
    .media-clip--list .media-clip__caption {
      display: none;
    }
    .media-clip--list .media-clip__label {
      font-size: 0.6875rem;
    }

    /* ================================================================
       SECTION: Feature grid
       ================================================================ */
    .feature-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }
    .feature-card {
      flex: 0 1 calc(33.333% - 1.5rem);
      min-width: 300px;
      border: 1px solid var(--line);
      background: var(--color-gray-800);
      padding: 2rem 1.5rem;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .feature-card:hover {
      border-color: var(--color-gray-400);  /* v2: subtle hover */
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    .feature-card__icon {
      width: 64px;
      height: 64px;
      object-fit: contain;
      margin-bottom: 1.25rem;
    }
    .feature-card__title {
      margin-bottom: 0.5em;
      font-size: 1.125rem;
    }
    .feature-card__desc {
      font-size: 0.9375rem;
      line-height: 1.65;
    }

    /* ================================================================
       SECTION: Agent showcase
       ================================================================ */
    .agent-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.25rem;
    }
    .agent-card {
      overflow: visible;
      border: 1px solid var(--line);
      background: var(--panel);
      position: relative;
    }
    /* Bracket frames removed per art review (Olya, 2026-03-26) */
    .agent-card__media {
      overflow: hidden;
      aspect-ratio: 3 / 4;
      position: relative;
      z-index: 0;
    }
    .agent-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.4s;
    }
    .agent-card:hover .agent-card__media img {
      transform: scale(1.05);
    }
    .agent-card__info {
      padding: 1.25rem;
    }
    .agent-card__name {
      margin-bottom: 0.25em;
    }
    .agent-card__role {
      font-size: 0.9375rem;
      margin: 0;
      color: var(--text-muted);
    }

    /* ================================================================
       SECTION: CTA
       ================================================================ */
    /* v2: default CTA is now dark panel — yellow reserved for button only */
    .cta-block {
      background: var(--color-gray-900);
      color: var(--text);
      padding: 5rem 0;
      text-align: center;
    }
    .cta-block h2 {
      color: var(--text);
    }
    .cta-block p {
      color: var(--text-muted);
      max-width: 600px;
      margin: 0 auto 2rem;
      font-size: 1.25rem;
      line-height: 1.6;
    }
    .cta-block .btn {
      background: var(--color-yellow);
      color: var(--color-black-heat);
      border: 2px solid transparent;
    }
    .cta-block .btn:hover {
      background: var(--color-yellow-hover);
      color: var(--color-black-heat);
    }
    /* Outline variant inside cta-block — distinguishes secondary CTAs from primary.
       Needed because .cta-block .btn overrides .btn--outline's default styling. */
    .cta-block .btn--outline {
      background: transparent;
      border: 2px solid var(--color-yellow);
      color: var(--color-yellow);
    }
    .cta-block .btn--outline:hover {
      background: var(--color-yellow);
      color: var(--color-black-heat);
    }
    /* Multi-CTA layout — space buttons evenly when more than one .btn is present.
       min-width equalizes side-by-side pairs so the shorter label doesn't render
       narrower than the longer one. Tuned to comfortably fit "Watch HEAT on
       Twitch" (the longest current label) without crowding. */
    .cta-block .btn + .btn {
      margin-left: 0.75rem;
    }
    .cta-block .btn--large {
      min-width: 320px;
    }

    /* v2: --dark is now the default; kept as no-op alias for backward compat */
    .cta-block--dark {}

    /* Yellow-accent CTA variant — use sparingly (max 1 per page) */
    .cta-block--accent {
      background: var(--color-yellow);
      color: var(--color-black-heat);
    }
    .cta-block--accent h2 {
      color: var(--color-black-heat);
    }
    .cta-block--accent p {
      color: rgba(18, 25, 29, 0.75);
    }
    .cta-block--accent .btn {
      background: var(--color-black-heat);
      color: var(--color-white-heat);
    }
    .cta-block--accent .btn:hover {
      background: var(--color-gray-800);
    }

    /* ================================================================
       SECTION: Countdown timer
       ================================================================ */
    .countdown {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      padding: 1.5rem 2rem;
      margin-top: 1rem;
    }
    .countdown__unit {
      text-align: center;
      min-width: 5rem;
    }
    .countdown__number {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 500;
      line-height: 1;
      color: var(--text);  /* v2: white, not yellow */
      font-variant-numeric: tabular-nums;
      min-width: 2ch;
      text-align: center;
    }
    .countdown__label {
      display: block;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 0.5rem;
    }
    .countdown__sep {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.5rem);
      color: var(--text-muted);  /* v2: subtle separator */
      line-height: 1;
      padding-top: 0.1em;
      opacity: 0.5;
    }
    .countdown__expired {
      display: none;
      text-align: center;
      font-family: var(--font-display);
      font-size: 1.5rem;
      text-transform: uppercase;
      color: var(--color-green);
    }

    /* ================================================================
       SECTION: FAQ accordion
       ================================================================ */
    .faq-list {
      max-width: 800px;
    }
    .faq-item {
      border-bottom: 1px solid var(--line);
    }
    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 0.75rem;
      margin: 0 -0.75rem;
      font-family: var(--font-body);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      list-style: none;
      transition: background 0.15s;
    }
    .faq-item summary:hover {
      background: rgba(248, 247, 246, 0.04);
    }
    .faq-item summary::-webkit-details-marker {
      display: none;
    }
    .faq-item summary::after {
      content: '+';
      font-family: var(--font-body);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--text-muted);  /* v2: subtle indicator */
      flex-shrink: 0;
      margin-left: 1rem;
      transition: transform 0.2s;
    }
    .faq-item[open] summary::after {
      content: '\2212';
    }
    .faq-item summary:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }
    .faq-answer {
      padding: 0 0 1.25rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ================================================================
       SECTION: Divider
       ================================================================ */
    .divider {
      padding: 2.5rem var(--gutter);
      max-width: var(--site-width);
      margin: 0 auto;
    }
    .divider__line {
      height: 1px;
      background: var(--line);
    }
    /* v2: divider is a clean single line — mark removed */
    .divider__mark {
      display: none;
    }

    /* ================================================================
       SECTION: Quote / callout
       ================================================================ */
    .callout {
      padding: 3rem 2.5rem 2.5rem;
      margin: 0;
      text-align: center;
      position: relative;
    }
    .callout::before {
      content: '';
    }
    .callout__quote-mark {
      display: block;
      font-family: var(--font-display);
      font-size: 5rem;
      line-height: 1;
      color: var(--text-muted);  /* v2: subtle quote mark */
      opacity: 0.6;
      margin-bottom: 0.25rem;
    }
    .callout__text {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 2rem);
      font-weight: 500;
      line-height: 1.4;
      color: var(--text);
      margin: 0 0 1rem;
      text-transform: none;
    }
    .callout__cite {
      display: block;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-style: normal;
      color: var(--text-muted);
    }

    /* ================================================================
       LIGHTBOX
       ================================================================ */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(18, 25, 29, 0.95);
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    .lightbox.open {
      display: flex;
    }
    .lightbox__img {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
    }
    .lightbox__close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 48px;
      height: 48px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lightbox__close:hover {
      color: var(--color-yellow);
    }
    .lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      background: rgba(18, 25, 29, 0.7);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .lightbox__nav:hover {
      background: rgba(18, 25, 29, 0.95);
      color: var(--color-yellow);
    }
    .lightbox__nav--prev { left: 1rem; }
    .lightbox__nav--next { right: 1rem; }
    .lightbox__close:focus-visible,
    .lightbox__nav:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }
    /* Hide nav arrows for single-image sources (split, game-mode) */
    .lightbox[data-source="split"] .lightbox__nav,
    .lightbox[data-source="game-mode"] .lightbox__nav {
      display: none;
    }

    /* ================================================================
       SECTION: Screenshot carousel
       ================================================================ */
    .carousel {
      text-align: center;
    }
    .carousel__header {
      max-width: var(--site-width);
      margin: 0 auto var(--gutter);
      padding: 0 var(--gutter);
    }
    .carousel__subtitle {
      max-width: 600px;
      margin: 0.5em auto 0;
      color: var(--text-muted);
      font-size: 1rem;
    }

    /* Stage: full-bleed filmstrip area */
    .carousel__stage {
      position: relative;
      overflow: hidden;
      margin-bottom: var(--gutter);
    }

    /* Track: horizontal strip of all slides, shifted via translateX by JS */
    .carousel__track {
      display: flex;
      transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: transform;
    }
    /* Each slide: flex item */
    .carousel__slide {
      flex: 0 0 55%;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .carousel__slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: filter 0.4s ease, opacity 0.4s ease;
      filter: brightness(0.35);
      opacity: 0.7;
    }
    .carousel__slide.active img {
      filter: brightness(1);
      opacity: 1;
    }
    .carousel__slide.active {
      z-index: 1;
      cursor: pointer;
    }

    /* Rectangular [ ] brackets on active slide */
    .carousel__slide.active::before,
    .carousel__slide.active::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 16px;
      border-color: var(--text);
      border-style: solid;
      z-index: 2;
      pointer-events: none;
    }
    .carousel__slide.active::before {
      left: 0;
      border-width: 2px 0 2px 2px;  /* [ bracket */
    }
    .carousel__slide.active::after {
      right: 0;
      border-width: 2px 2px 2px 0;  /* ] bracket */
    }

    /* Navigation arrows — sit over the side images */
    .carousel__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 48px;
      height: 48px;
      background: rgba(30, 37, 41, 0.7);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
      padding: 0;
    }
    .carousel__nav:hover {
      background: rgba(30, 37, 41, 1);
      color: var(--color-yellow);
    }
    .carousel__nav:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }
    .carousel__nav[aria-disabled="true"] {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }
    .carousel__nav--prev { left: 1rem; }
    .carousel__nav--next { right: 1rem; }

    /* Caption */
    .carousel__caption {
      min-height: 1.5em;
      max-width: 600px;
      margin: 0.375rem auto 0;
      font-size: 0.875rem;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.6;
      padding: 0 var(--gutter);
    }
    .carousel__caption:empty {
      visibility: hidden;
    }
    /* Display variant — large, white, uppercase (use for map names, location titles) */
    .carousel__caption--display {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      margin: 1rem auto 0.5rem;
    }

    /* Thumbnail strip */
    .carousel__thumbs {
      display: flex;
      justify-content: center;
      gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 2px var(--gutter);
      scrollbar-width: none;
      max-width: var(--site-width);
      margin: 0 auto;
    }
    .carousel__thumbs::-webkit-scrollbar {
      display: none;
    }
    .carousel__thumb {
      flex-shrink: 0;
      width: 100px;
      height: 56px;
      padding: 0;
      border: 2px solid transparent;
      background: var(--panel);
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
      overflow: hidden;
    }
    .carousel__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }
    .carousel__thumb[aria-selected="true"] {
      border-color: var(--text);  /* v2: white selected state */
      opacity: 1;
    }
    .carousel__thumb:hover {
      box-shadow: 0 0 0 2px var(--color-gray-400);  /* v2: subtle hover */
      opacity: 1;
    }
    .carousel__thumb:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }

    /* Mobile: single image, arrows below */
    @media (max-width: 767px) {
      .carousel__slide {
        flex: 0 0 100%;
      }
      .carousel__slide img {
        filter: brightness(1);
        opacity: 1;
      }
      .carousel__stage .carousel__nav {
        display: none;
      }
      .carousel__mobile-nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1rem;
      }
      .carousel__mobile-nav .carousel__nav {
        position: static;
        transform: none;
        display: flex;
      }
      .carousel__thumb {
        width: 72px;
        height: 40px;
      }
    }
    @media (min-width: 768px) {
      .carousel__mobile-nav {
        display: none;
      }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .carousel__track,
      .carousel__slide img {
        transition: none !important;
      }
    }

    /* ================================================================
       SECTION: Article hero — Horizontal Covered Medium
       v2: Shorter height, bracket frames on content area per art review
       ================================================================ */
    .section--hero-article {
      position: relative;
      padding: calc(80px + 32px) 0 32px;
      min-height: 320px;
      background: var(--bg);
      overflow: hidden;
    }
    /* Background image — covered medium (shorter, image centered) */
    .section--hero-article[data-bg]::before {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      background-size: cover;
      background-position: center 30%;
      z-index: 0;
    }
    .section--hero-article[data-bg]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(18, 25, 29, 0.95) 0%,
        rgba(18, 25, 29, 0.70) 40%,
        rgba(18, 25, 29, 0.40) 100%
      );
      z-index: 1;
    }
    .section--hero-article .hero-article {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    /* Rectangular [ ] bracket frame on the article hero content area */
    .hero-article__frame {
      position: relative;
      padding: 24px 28px;
    }
    .hero-article__frame::before,
    .hero-article__frame::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 20px;
      border-color: var(--text);
      border-style: solid;
      pointer-events: none;
    }
    .hero-article__frame::before {
      left: 0;
      border-width: 2px 0 2px 2px;  /* [ bracket */
    }
    .hero-article__frame::after {
      right: 0;
      border-width: 2px 2px 2px 0;  /* ] bracket */
    }
    /* Inner wrapper — no longer needed for bracket style */
    .hero-article__frame-inner {
      position: relative;
    }
    .hero-article__frame-inner::before,
    .hero-article__frame-inner::after {
      content: none;
    }

    /* Breadcrumbs */
    .hero-article__breadcrumbs {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      margin: 0 0 12px;
      padding: 0;
      font-size: 0.8125rem;
      color: var(--text-muted);
    }
    .hero-article__breadcrumbs li {
      display: inline-flex;
      align-items: center;
    }
    .hero-article__breadcrumbs li + li::before {
      content: '>';
      margin: 0 8px;
      color: var(--text-muted);
      opacity: 0.6;
    }
    .hero-article__breadcrumbs a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .hero-article__breadcrumbs a:hover {
      color: var(--color-yellow);
    }

    /* Section label inside article hero */
    .hero-article__label {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
      margin: 0 0 8px;
    }

    /* Article title */
    .hero-article__title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text);
      line-height: 1.1;
      margin: 0;
      /* Bleed backstop: a single long token (welded vehicle designations such
         as "M3E1&nbsp;Bradley") must break rather than run off-screen. */
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
    }

    /* Subtitle / deck */
    .hero-article__subtitle {
      font-size: 1.0625rem;
      color: var(--text-muted);
      margin: 12px 0 0;
      line-height: 1.5;
    }

    /* Metadata row */
    .hero-article__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      margin-top: 20px;
      font-size: 0.875rem;
      color: var(--text-muted);
    }
    .hero-article__author {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(248, 247, 246, 0.85);
    }
    .hero-article__avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--line);
      object-fit: cover;
    }
    .hero-article__separator {
      margin: 0 8px;
      opacity: 0.5;
    }
    .hero-article__date {
      color: var(--text-muted);
    }

    /* Tighten gap between article hero and first content section */
    .section--hero-article + .section {
      padding-top: calc(var(--section-gap) * 0.5);
    }
    /* Tighten gap when text flows into video embed or carousel */
    .section--text + .section--video,
    .section--text + .section--carousel {
      padding-top: 0;
    }

    /* CJK override */
    :lang(ja) .hero-article__title,
    :lang(zh) .hero-article__title,
    :lang(ko) .hero-article__title {
      text-transform: none;
      letter-spacing: 0;
    }

    @media (max-width: 767px) {
      .section--hero-article {
        padding-top: calc(60px + 24px);
        padding-bottom: 24px;
        min-height: 240px;
        /* NO max-height. The hero must grow with its content: the section is
           `overflow: hidden`, so any cap silently clips the subtitle/deck and
           the byline once a long title wraps past ~4 lines. Title length varies
           per article AND per locale, so a fixed cap is a standing latent bug
           rather than a per-page one. Fixed 2026-08-11. */
      }
      .hero-article__frame {
        padding: 16px 20px;
      }
      /* frame-inner pseudos disabled in v2 bracket style — no overrides needed */
      .hero-article__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .hero-article__separator {
        display: none;
      }
    }

    /* Phone-width title scaling. The base clamp floors at 2rem (32px), which
       never scales down below ~600px, so on a phone every title renders at
       32px no matter how long it is. Values proven at 320/360/390px with the
       real "Normalidad Extended" webfont (weekly-news-w4 hotfix, 2026-06-15);
       promoted from that page-scoped stopgap into the shared sheet. */
    @media (max-width: 600px) {
      .hero-article__title {
        font-size: clamp(1.375rem, 5.2vw, 2rem);
      }
    }

    /* ================================================================
       SECTION: Table of contents
       ================================================================ */
    .section--toc {
      padding: calc(var(--section-gap) / 2) 0 var(--section-gap);
    }
    .toc {
      border: 1px solid var(--line);
      background: var(--panel);
    }

    /* Toggle button (heading row) */
    .toc__toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 16px;
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--text);
      font-family: var(--font-body);
      transition: background 0.15s;
    }
    .toc__toggle:hover {
      background: rgba(248, 247, 246, 0.04);
    }
    .toc__toggle:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: -2px;
    }
    .toc__heading {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 0.9375rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 0;
    }
    .toc__toggle-label {
      font-size: 0.8125rem;
      color: var(--text-muted);  /* v2: subtle label */
      flex-shrink: 0;
      margin-left: 16px;
    }

    /* Divider between heading and list */
    .toc__body {
      border-top: 1px solid var(--line);
      padding: 12px 16px;
    }
    .toc__body[hidden] {
      display: none;
    }

    /* Ordered list with CSS counters */
    .toc__list {
      list-style: none;
      counter-reset: toc-counter;
      margin: 0;
      padding: 0;
    }
    .toc__list li {
      counter-increment: toc-counter;
      margin-bottom: 10px;
      font-size: 0.9375rem;
      line-height: 1.4;
    }
    .toc__list li:last-child {
      margin-bottom: 0;
    }
    .toc__list li::before {
      content: counter(toc-counter) '.';
      display: inline-block;
      width: 2em;
      color: var(--text-muted);  /* v2: subtle counter */
      font-size: 0.8125rem;
      font-weight: 500;
    }
    .toc__list a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .toc__list a:hover {
      color: var(--color-yellow);
      text-decoration: underline;
    }

    /* Frame bracket corners on the ToC panel */
    .toc .frame {
      position: relative;
    }

    /* CJK override */
    :lang(ja) .toc__heading,
    :lang(zh) .toc__heading,
    :lang(ko) .toc__heading {
      text-transform: none;
      letter-spacing: 0;
    }

    @media (max-width: 767px) {
      .section--toc {
        padding-top: calc(var(--section-gap-mobile, 36px) / 2);
        padding-bottom: var(--section-gap-mobile, 36px);
      }
      .toc__toggle {
        padding: 12px;
      }
      .toc__body {
        padding: 12px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .toc__body {
        transition: none !important;
      }
    }

    /* ================================================================
       SECTION: Data table
       ================================================================ */
    .section--table h2 {
      font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
      font-family: var(--font-body);
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      box-shadow: inset -8px 0 8px -4px rgba(0, 0, 0, 0.4);
    }

    .table-wrap table {
      width: 100%;
      min-width: 520px;
      border-collapse: collapse;
      table-layout: auto;
    }

    .table-wrap thead th {
      background: var(--panel);
      color: var(--text);  /* v2: white headers */
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: left;
      padding: 0.75rem 1rem;
      border-bottom: 2px solid var(--color-gray-600);  /* v2: structural */
      white-space: nowrap;
    }

    .table-wrap thead th.col--numeric {
      text-align: right;
    }

    /* Sticky first column on horizontal scroll */
    .table-wrap thead th:first-child,
    .table-wrap tbody td:first-child,
    .table-wrap tbody th:first-child {
      position: sticky;
      left: 0;
      background: var(--panel);
      z-index: 1;
    }

    .table-wrap tbody td,
    .table-wrap tbody th {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--line);
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--text-muted);
      text-align: left;
    }

    .table-wrap tbody th {
      color: var(--text);
      font-weight: 700;
    }

    .table-wrap tbody td.col--numeric {
      text-align: right;
    }

    /* Alternating row tint */
    .table-wrap tbody tr:nth-child(even) td,
    .table-wrap tbody tr:nth-child(even) th {
      background: rgba(248, 247, 246, 0.03);
    }

    /* Keep sticky first-col bg consistent on even rows */
    .table-wrap tbody tr:nth-child(even) td:first-child,
    .table-wrap tbody tr:nth-child(even) th:first-child {
      background: rgba(30, 37, 41, 0.97);
    }

    .table-wrap tbody tr:hover td,
    .table-wrap tbody tr:hover th {
      background: rgba(248, 247, 246, 0.04);
    }

    .table-wrap tbody tr:last-child td,
    .table-wrap tbody tr:last-child th {
      border-bottom: none;
    }

    .table-footer-note {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: 0.75rem;
      margin-bottom: 0;
    }

    /* Caption — visually below the table (rendered via CSS order) */
    .table-wrap caption {
      caption-side: bottom;
      font-size: 0.8125rem;
      color: var(--text-muted);
      text-align: left;
      padding: 0.5rem 1rem;
      border-top: 1px solid var(--line);
    }

    /* CJK overrides */
    :lang(ja) .table-wrap thead th,
    :lang(zh) .table-wrap thead th,
    :lang(ko) .table-wrap thead th {
      text-transform: none;
      letter-spacing: 0;
    }

    @media (max-width: 767px) {
      .table-wrap {
        margin: 0 calc(-1 * var(--gutter));
        border-left: none;
        border-right: none;
      }
    }


    /* ================================================================
       SECTION: Banner / Alert
       ================================================================ */
    .section--banner {
      padding: 0.75rem 0;
    }

    .banner {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1.25rem;
      border-left: 3px solid var(--color-gray-400);  /* v2: structural */
      max-width: 56rem;            /* cap so they don't span the full 1440px container */
      margin-left: auto;
      margin-right: auto;
    }

    .banner--info {
      background: rgba(248, 247, 246, 0.04);
      border-left-color: var(--color-gray-400);
    }

    .banner--warning {
      background: rgba(255, 216, 92, 0.08);
      border-left-color: var(--color-yellow);  /* warning keeps yellow — semantic */
    }

    .banner--urgent {
      background: rgba(255, 109, 70, 0.08);
      border-left-color: var(--color-red);
    }

    .banner__icon {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--text-muted);  /* v2: subtle icon */
    }
    .banner--warning .banner__icon {
      color: var(--color-yellow);  /* warning keeps yellow — semantic */
    }

    .banner--urgent .banner__icon {
      color: var(--color-red);
    }

    .banner__msg {
      flex: 1;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--text);
      margin: 0;
    }

    .banner__link {
      color: var(--color-yellow);
      font-weight: 700;
      text-decoration: none;
    }

    .banner__link:hover {
      text-decoration: underline;
    }

    .banner--urgent .banner__link {
      color: var(--color-red);
    }

    .banner__dismiss {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 1.25rem;
      line-height: 1;
      padding: 0;
      margin-left: auto;
    }

    .banner__dismiss:hover {
      color: var(--text);
    }

    .banner__dismiss:focus-visible {
      outline: 2px solid var(--color-yellow);
      outline-offset: 2px;
    }

    @media (max-width: 479px) {
      .banner {
        flex-wrap: wrap;
      }
      .banner__msg {
        width: 100%;
        flex-basis: 100%;
      }
    }


    /* ================================================================
       SECTION: Styled steps
       ================================================================ */
    .steps-list {
      list-style: none;
      margin: 0;
      padding: 0;
      counter-reset: steps;
    }

    .steps-list__item {
      counter-increment: steps;
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
      margin-bottom: calc(var(--section-gap) * 1.1);
    }

    .steps-list__item:last-child {
      margin-bottom: 0;
    }

    /* Number column */
    .steps-list__number {
      flex-shrink: 0;
      width: 64px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding-right: 1.25rem;
      border-right: 2px solid var(--color-gray-600);  /* v2: structural */
      /* Align the number baseline with the step heading */
      padding-top: 0.1em;
    }

    .steps-list__number::before {
      content: counter(steps);
      font-family: var(--font-display);
      font-size: clamp(3rem, 5vw, 4.5rem);
      font-weight: 500;
      line-height: 1;
      color: var(--text);  /* v2: white, not yellow */
    }

    /* Content column */
    .steps-list__content {
      flex: 1;
      min-width: 0;
    }

    .steps-list__heading {
      margin-bottom: 0.35em;
      font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
    }

    .steps-list__desc {
      font-size: 0.875rem;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .steps-list__img {
      width: 100%;
      max-height: 280px;
      object-fit: cover;
      margin-top: 1rem;
      display: block;
    }

    /* Optional: ruled variant — separator lines between steps */
    .steps-list--ruled .steps-list__item {
      padding-bottom: calc(var(--section-gap) * 1.1);
      margin-bottom: 0;
      border-bottom: 1px solid var(--line);
    }

    .steps-list--ruled .steps-list__item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    /* Optional: framed variant — frame bracket around entire list */
    .steps-list--framed {
      position: relative;
      padding: 2rem;
      border: 1px solid var(--line);
    }

    .steps-list--framed::before,
    .steps-list--framed::after {
      content: '';
      position: absolute;
      top: -1px;
      bottom: -1px;
      width: 16px;
      border-color: var(--text);
      border-style: solid;
      pointer-events: none;
    }

    .steps-list--framed::before {
      left: -1px;
      border-width: 2px 0 2px 2px;  /* [ bracket */
    }

    .steps-list--framed::after {
      right: -1px;
      border-width: 2px 2px 2px 0;  /* ] bracket */
    }

    /* Steps heading uses standard H2 display style — no override needed */
    /* Match utility heading style used by FAQ/gallery */
    .section--steps h2 {
      font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
    }

    .section--steps .steps-subtitle {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 2.5rem;
    }

    /* CJK overrides */
    :lang(ja) .steps-list__number::before,
    :lang(zh) .steps-list__number::before,
    :lang(ko) .steps-list__number::before {
      letter-spacing: 0;
    }

    @media (max-width: 767px) {
      .steps-list__item {
        flex-direction: column;
        gap: 0;
        margin-bottom: calc(var(--section-gap) * 0.75);
      }

      .steps-list__number {
        width: auto;
        border-right: none;
        border-bottom: 2px solid var(--color-gray-600);  /* v2: structural */
        padding-right: 0;
        padding-bottom: 0.25rem;
        padding-top: 0;
        margin-bottom: 0.75rem;
        justify-content: flex-start;
      }

      .steps-list__number::before {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
      }

      .steps-list--ruled .steps-list__item {
        padding-bottom: calc(var(--section-gap) * 0.75);
      }

      .steps-list--framed {
        padding: 1.25rem;
      }
    }


    /* ================================================================
       FOOTER
       ================================================================ */
    .site-footer {
      border-top: 1px solid var(--line);
      padding: 3rem 0 2rem;
      text-align: center;
    }

    .footer-socials {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    .footer-socials a {
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .footer-socials a:hover {
      color: var(--color-yellow);
    }
    .footer-socials svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    .footer-platforms {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    .footer-platforms__label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .footer-platform-logo {
      height: 28px;
      width: auto;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    .footer-platform-logo--mid {
      height: 30px;
    }
    .footer-platform-logo--tall {
      height: 36px;
    }
    .footer-platform-logo--xl {
      height: 40px;
    }
    .footer-platform-logo:hover {
      opacity: 1;
    }

    .footer-ratings {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    .footer-rating-img {
      height: 56px;
      width: auto;
    }
    .footer-rating-img[src*="ESRB"] {
      mix-blend-mode: lighten;
    }

    .footer-nav {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      list-style: none;
      margin: 0 0 1.5rem;
      padding: 0;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .footer-nav a:hover {
      color: var(--color-yellow);
    }

    .footer-disclaimer,
    .footer-trademarks {
      font-size: 0.6875rem;
      color: var(--color-gray-600);
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto 1rem;
      padding: 0 var(--gutter);
    }

    .footer-copyright {
      font-size: 0.75rem;
      color: var(--color-gray-600);
    }

    /* ================================================================
       CJK OVERRIDES
       ================================================================ */
    :lang(zh) .btn,
    :lang(ja) .btn,
    :lang(ko) .btn,
    :lang(zh) .section-label,
    :lang(ja) .section-label,
    :lang(ko) .section-label,
    :lang(zh) .text-bar,
    :lang(ja) .text-bar,
    :lang(ko) .text-bar,
    :lang(zh) .site-header__links a,
    :lang(ja) .site-header__links a,
    :lang(ko) .site-header__links a,
    :lang(zh) .media-clip__label,
    :lang(ja) .media-clip__label,
    :lang(ko) .media-clip__label,
    :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
    :lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4,
    :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) h4 {
      text-transform: none;
      letter-spacing: normal;
    }

    /* ================================================================
       RESPONSIVE
       ================================================================ */

    /* ── Mobile (base styles are mobile-first) ── */

    @media (max-width: 767px) {
      :root {
        --section-gap: 36px;
        --gutter: 16px;
      }

      .site-header__nav {
        display: none;
      }
      .hamburger {
        display: flex;
      }

      .hero {
        min-height: 50vh;
      }

      .split {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .split--reverse .split__media {
        order: 0;
      }
      .split--reverse .split__content {
        order: 0;
      }
      .split__media--info {
        min-height: 220px;
        padding: 2rem 1.5rem;
        aspect-ratio: auto;
      }
      .split__media--info .split__img {
        max-width: 200px;
        max-height: 140px;
      }

      .gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }

      .feature-grid {
        flex-direction: column;
      }

      /* Media clip pair stacks on mobile. */
      .media-clip-pair {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .media-clip {
        max-width: 100%;
      }
      .media-clip--list {
        max-width: 100%;
      }
      .feature-card {
        min-width: 0;
      }

      .agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      }

      .countdown {
        gap: 0.75rem;
        padding: 1.5rem 1rem;
      }

      .cta-block {
        padding: 3rem 0;
      }

      .footer-platforms {
        flex-wrap: wrap;
      }
    }

    @media (min-width: 768px) {
      /* Tablet+ already has split grids, nav visible, etc. */
    }

    @media (min-width: 1200px) {
      .hero {
        min-height: 70vh;
      }
    }

    /* ================================================================
       SECTION: Game modes grid — uniform card layout (v2, F8+F9)
       Compact, same-size cards. Replaces alternating splits for modes.
       ================================================================ */
    .game-modes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }
    /* Balanced variant: 2-column layout for even card counts (2+2 instead of 3+1) */
    .game-modes-grid--balanced {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Center the last card if it's alone on its row */
    .game-modes-grid--balanced .game-mode-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: calc(50% - 0.625rem);
      margin: 0 auto;
    }
    /* Spacing below mode cards grid */
    .game-modes-grid { margin-bottom: 1.5rem; }
    .game-mode-card__media { cursor: pointer; }
    .game-mode-card {
      border: 1px solid var(--line);
      background: var(--panel);
      overflow: hidden;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .game-mode-card:hover {
      border-color: var(--color-gray-400);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    .game-mode-card__media {
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }
    .game-mode-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s;
    }
    .game-mode-card:hover .game-mode-card__media img {
      transform: scale(1.05);
    }
    .game-mode-card__body {
      padding: 1.25rem 1.5rem;
    }
    .game-mode-card__title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text);
      margin: 0 0 0.5rem;
    }
    .game-mode-card__desc {
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--text-muted);
      margin: 0;
    }

    /* CJK override */
    :lang(ja) .game-mode-card__title,
    :lang(zh) .game-mode-card__title,
    :lang(ko) .game-mode-card__title {
      text-transform: none;
      letter-spacing: 0;
    }

    @media (max-width: 767px) {
      .game-modes-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }

    /* ================================================================
       GLOBAL: prefers-reduced-motion
       ================================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      /* Media clip: poster stays visible, video is hidden until user explicitly plays. */
      .media-clip__video {
        opacity: 0;
      }
      .media-clip[data-state="playing"] .media-clip__video {
        opacity: 1;
      }
      .media-clip[data-state="playing"] .media-clip__poster {
        opacity: 0;
      }
    }

    /* ================================================================
       UTILITY: Visually hidden (screen reader only)
       ================================================================ */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ================================================================
       CHROME: header dropdowns (Game / Useful) and PLAY FREE button.
       Lifted from Website 2.0/Pages/news/index.html on 2026-05-25 to
       complete the backport bundle (operator-blocking finding).
       ================================================================ */
    .nav-dropdown { position: relative; }
    .nav-dropdown__toggle {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.4rem;
      line-height: 1;
      transition: color .2s;
    }
    .nav-dropdown__toggle:hover { color: var(--color-yellow); }
    .nav-dropdown__toggle::after {
      content: '';
      width: 7px; height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translate(-2px, -2px);
      transition: transform .2s;
    }
    .nav-dropdown__toggle[aria-expanded="true"]::after {
      transform: rotate(225deg) translate(-2px, -2px);
    }
    .nav-dropdown__menu {
      display: none;
      position: absolute; top: 100%; left: 0;
      margin-top: 12px;
      min-width: 220px;
      background: var(--color-gray-900);
      border: 1px solid var(--line);
      list-style: none;
      padding: 0.25rem 0;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    .nav-dropdown__menu.open { display: block; }
    .nav-dropdown__menu a {
      display: block;
      padding: 0.625rem 1rem;
      color: var(--text-muted);
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .15s, color .15s;
    }
    .nav-dropdown__menu a:hover,
    .nav-dropdown__menu a:focus-visible {
      background: var(--color-gray-800);
      color: var(--text);
      text-decoration: none;
      outline: none;
    }

    /* Sticky PLAY FREE in header — matches .btn style (Discord button) but
       with header-tighter padding. Same font-family/weight/size as .btn. */
    .site-header__play-free {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--color-yellow); color: var(--color-black-heat); border: 0;
      padding: 0.55rem 1.25rem;
      font-family: var(--font-body);
      font-size: 0.875rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      line-height: 1;
      cursor: pointer;
      transition: background .2s;
    }
    .site-header__play-free:hover { background: var(--color-yellow-hover); }
    .site-header__play-free:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    @media (max-width: 767px) {
      .site-header__play-free { display: none; }
    }

    /* ================================================================
       PLATFORM PICKER MODAL — opened by header PLAY FREE button.
       Lifted from Website 2.0/Pages/news/index.html on 2026-05-25.
       ================================================================ */
    html.html-modal-locked { overflow: hidden; }
    .platform-picker-modal {
      position: fixed; inset: 0; z-index: 1100;
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
    }
    .platform-picker-modal[hidden] { display: none !important; }
    .platform-picker-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
    .platform-picker-modal__panel {
      position: relative; background: #12191d; color: #fff;
      max-width: 48rem; width: 100%; max-height: 90vh; overflow: auto;
      padding: 2rem; border: 1px solid rgba(255,255,255,0.1);
    }
    .platform-picker-modal__close {
      position: absolute; top: 0.75rem; right: 0.75rem;
      background: transparent; border: 0; color: #fff;
      width: 44px; height: 44px;
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .platform-picker-modal__heading {
      font-family: var(--font-display, 'Inter', sans-serif);
      font-size: 1.125rem; font-weight: 600;
      letter-spacing: 0.02em; margin: 0 0 0.5rem;
      text-transform: none;
    }
    .platform-picker-modal__lede {
      color: rgba(255,255,255,0.78);
      font-size: 0.875rem;
      margin: 0 0 1.5rem;
    }
    .platform-picker-modal__platforms {
      display: grid; grid-template-columns: 1fr; gap: 0.75rem;
    }
    @media (min-width: 600px) {
      .platform-picker-modal__platforms { grid-template-columns: 1fr 1fr; }
    }
    .platform-button--wgc { grid-column: 1 / -1; }
    .platform-button {
      display: flex; flex-direction: row;
      align-items: center; justify-content: center;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      border: 1px solid rgba(255,255,255,0.18);
      text-decoration: none;
      color: #fff;
      min-height: 96px;
      transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
    }
    .platform-button:hover,
    .platform-button:focus-visible {
      border-color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.04);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0,0,0,.3);
      outline: none;
    }
    .platform-button__icon img { height: 40px; width: auto; display: block; }
    .platform-button__label {
      font-family: var(--font-display);
      font-size: 0.875rem; font-weight: 400;
      letter-spacing: 0.02em;
    }
    /* WGC fallback ("yet" box) — full-width, sits inline directly under
       the WGC button. Hidden by default; shown when WGC deep-link times
       out. Width matches the WGC button (full grid row). */
    .platform-picker-modal__wgc-fallback:not([hidden]) {
      grid-column: 1 / -1;
      margin-top: 0;
      padding: 1.25rem;
      background: rgba(250,170,187,0.08);
      border: 1px solid rgba(250,170,187,0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      text-align: center;
    }
    .platform-picker-modal__wgc-fallback p { margin: 0; }
    .platform-picker-modal__support-links {
      list-style: none; padding: 0; margin: 1.5rem 0 0;
      display: flex; flex-direction: column; gap: 0.5rem;
    }
    .platform-picker-modal__support-links a { color: rgba(255,255,255,0.85); }

    /* ================================================================
       SECTION HEADER — title block + "Read all news" link layout
       (used on transitional homepage's Latest News section).
       Lifted from Website 2.0/Pages/homepage/index.html.
       ================================================================ */
    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    .section-header__heading > * { margin: 0; }
    .section-header__heading .section-label { margin-bottom: 0.5rem; }
    .section-header__heading h2 { line-height: 1; }
    .section-header__link {
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid var(--text-muted);
      transition: color .2s ease, border-color .2s ease;
    }
    .section-header__link:hover,
    .section-header__link:focus-visible {
      color: var(--color-yellow);
      border-color: var(--color-yellow);
      outline: none;
    }
    @media (max-width: 600px) {
      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
    }

    /* Featured-grid 2-up layout (transitional homepage news section).
       --dual flips each .featured-article from horizontal-spotlight to a
       vertical card (image top, body below). Stacks to 1 column on tablet/mobile. */
    .featured-grid--dual {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .featured-grid--dual .featured-article {
      flex-direction: column;
      gap: 0;
    }
    .featured-grid--dual .featured-article__media {
      flex: none;
      width: 100%;
      aspect-ratio: 2 / 1;
    }
    .featured-grid--dual .featured-article__body {
      padding: 1rem 1.5rem 1.125rem;
      justify-content: flex-start;
    }
    @media (max-width: 900px) {
      .featured-grid--dual { grid-template-columns: 1fr; }
    }

    /* Recent grid (4 cards) sits below the featured pair inside the
       same section. Spacing matches the gap between hero and section. */
    #featured-section #featured-article + .article-grid--recent {
      margin-top: 2.5rem;
    }

    /* ═══════════════════════════════════════════════════════════════════
       Surface: WGC — chrome strip for embedded webview rendering.
       Applied via <html class="surface-wgc"> when ?surface=wgc is set.
       Lifted from Website 2.0/content-system/css/base.2.0.0.css.
       ═══════════════════════════════════════════════════════════════════ */
    .surface-wgc site-header,
    .surface-wgc header.site-header,
    .surface-wgc .site-header,
    .surface-wgc site-footer,
    .surface-wgc footer.site-footer,
    .surface-wgc .site-footer,
    .surface-wgc .mobile-nav,
    .surface-wgc #mobileNav,
    .surface-wgc #menuToggle,
    .surface-wgc platform-picker-modal,
    .surface-wgc .platform-picker-modal,
    .surface-wgc .cookie-banner,
    .surface-wgc .splash-overlay,
    .surface-wgc .scroll-to-top {
      display: none !important;
    }
    html.surface-wgc body,
    html.surface-wgc main {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    html.surface-wgc {
      --header-height: 0px;
    }

/* ============================================================
   PHASE 2 (content-pipeline-determinism), promoted 2026-07-10 — additive only.
   Event blocks: event-leaderboard + event-player-search promoted from the live
   weekend-showdown event page; event-progress-bar + event-sparkline promoted
   from the weekend-challenge event prototype page. Rules below are copied
   verbatim from those pages' own page-scoped <style> blocks (byte-identical
   except selectors already in this shared sheet). See
   content-system/docs/block-proposal--event-blocks.md for the promotion
   record. Neither source page was edited to perform this promotion.
   ============================================================ */

/* -- event-leaderboard + event-player-search (from weekend-showdown) -- */
.evt-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 22px;
}
.evt-banner__metric {
  min-width: 0;
}
.evt-banner__daylabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
:lang(ja) .evt-banner__daylabel, :lang(zh) .evt-banner__daylabel, :lang(ko) .evt-banner__daylabel {
  text-transform: none; letter-spacing: 0;
}
.evt-banner__dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--color-gray-400);
}
.evt-banner__dot--live { background: var(--color-green); }
.evt-banner__metricname {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text);
}
.evt-banner__explainer {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 52ch;
}
.evt-banner__freshness {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.evt-banner__flip {
  text-align: right;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.evt-banner__flip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .evt-banner { padding: 16px; }
  .evt-banner__flip { text-align: left; }
}

.evt-daytabs {
  display: flex;
  gap: 6px;
  margin: 24px 0 0;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.evt-daytab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
}
.evt-daytab__state {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:lang(ja) .evt-daytab__state, :lang(zh) .evt-daytab__state, :lang(ko) .evt-daytab__state {
  text-transform: none; letter-spacing: 0;
}
.evt-daytab__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--color-gray-400);
}
.evt-daytab__dot--live { background: var(--color-green); }
.evt-daytab__name {
  font-size: 0.875rem;
  font-weight: 700;
}
.evt-daytab[aria-selected="true"] {
  background: var(--bg);
  border-color: var(--color-yellow);
  border-bottom: 2px solid var(--bg);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.evt-daytab[aria-selected="true"] .evt-daytab__name { color: var(--color-yellow); }
.evt-daytab:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.evt-boardlayout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border: 1px solid var(--line);
}
@media (max-width: 720px) {
  .evt-boardlayout { grid-template-columns: 1fr; }
}

.evt-vehlist {
  list-style: none;
  margin: 0;
  padding: 6px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
@media (max-width: 720px) {
  .evt-vehlist { border-right: none; border-bottom: 1px solid var(--line); }
}
.evt-vehopt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.875rem;
}
.evt-vehopt__role {
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex: none;
}
.evt-vehopt[aria-selected="true"] {
  background: var(--color-yellow);
  color: var(--bg);
}
.evt-vehopt[aria-selected="true"] .evt-vehopt__role { color: var(--bg); opacity: 0.75; }
.evt-vehopt:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: -2px;
}

.evt-boardpane {
  padding: 20px;
  min-width: 0;
}
.evt-boardpane table {
  width: 100%;
  border-collapse: collapse;
}
.evt-boardpane caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 12px;
  caption-side: top;
}
.evt-boardpane th,
.evt-boardpane td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.evt-boardpane th {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:lang(ja) .evt-boardpane th, :lang(zh) .evt-boardpane th, :lang(ko) .evt-boardpane th {
  text-transform: none; letter-spacing: 0;
}
.evt-boardpane td.col--rank {
  color: var(--color-yellow);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 3em;
}
.evt-boardpane td.col--value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.evt-boardpane th.col--value { text-align: right; }
.evt-boardpane tbody tr:last-child td { border-bottom: none; }

.evt-disclosure {
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-green-700);
  background: var(--panel);
  padding: 16px 20px;
  max-width: 720px;
}
.evt-disclosure ul {
  margin: 0;
  padding-left: 1.1rem;
}
.evt-disclosure li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 8px;
}
.evt-disclosure li:last-child { margin-bottom: 0; }
.evt-disclosure--full { max-width: none; margin-top: 20px; }

.evt-emptyrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 14px;
  max-width: 720px;
}
.evt-emptyrow svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--color-gray-300);
}
.evt-emptyrow p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.evt-search__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
  max-width: 560px;
}
.evt-search__input {
  flex: 1 1 260px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 10px 14px;
}
.evt-search__input::placeholder { color: var(--color-gray-400); }
.evt-search__input:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}
.evt-cards { margin-top: 20px; }
.evt-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px 24px;
  max-width: 640px;
  margin-bottom: 14px;
}
.evt-card__name {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.evt-card__placements {
  list-style: none;
  margin: 0;
  padding: 0;
}
.evt-card__placement {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.evt-card__placement:first-child { border-top: none; }
.evt-card__placement-label { color: var(--text); min-width: 0; }
.evt-card__placement-rank {
  color: var(--color-yellow);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .evt-card { padding: 16px; }
  .evt-card__name { font-size: 1.125rem; }
}

/* -- event-progress-bar + event-sparkline (from weekend-challenge) -- */
.evt-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 28px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.evt-pill__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-green-700);
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green);
}
.evt-pill__dot {
  width: 7px;
  height: 7px;
  background: var(--color-green);
  flex: none;
}
.evt-pill--stale .evt-pill__state {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  background: rgba(255, 216, 92, 0.08);
}
.evt-pill--stale .evt-pill__dot { background: var(--color-yellow); }
.evt-pill--pre .evt-pill__state {
  border-color: var(--line);
  color: var(--text-muted);
  background: transparent;
}
.evt-pill--pre .evt-pill__dot { background: var(--color-gray-400); }
.evt-pill__item span[id] {
  font-family: var(--font-body);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.evt-pool {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.015em;
}
.evt-pool__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
@media (max-width: 560px) {
  .evt-pool { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
}

.evt-progress { margin-top: 8px; }
.evt-progress__track {
  position: relative;
  height: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.evt-progress__fill {
  height: 100%;
  width: 0;
  background: var(--text);
  transition: width 0.6s ease;
}
.evt-progress__notch {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--color-gray-400);
  z-index: 1;
}
.evt-progress__notch.is-reached {
  background: var(--text);
  border-color: var(--text);
}
.evt-progress__goal {
  margin: 6px 0 0;
  text-align: right;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.evt-progress__goal:empty { display: none; }
.evt-progress__callout {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: normal;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.evt-progress__callout .evt-glyph { color: var(--color-green); }
.evt-glyph { font-weight: 700; }

.evt-mcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.evt-mcard {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
  padding: 16px;
  overflow: hidden;
}
.evt-mcard.is-reached { border-color: var(--color-green-700); }
.evt-mcard.is-reached::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-green);
}
.evt-mcard__thumb {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.evt-mcard.is-reached .evt-mcard__thumb { border-color: var(--color-green-700); }
.evt-mcard__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.evt-mcard__target {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.evt-mcard__state { margin: 8px 0 0; }
.evt-mcard__state-reached,
.evt-mcard__state-locked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.evt-mcard__state-reached {
  color: var(--color-green);
  background: rgba(132, 255, 177, 0.14);
  border: 1px solid var(--color-green-700);
}
.evt-mcard__state-locked {
  color: var(--text-muted);
  border: 1px solid var(--line);
}
.evt-mcard__reward {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text);
}
.evt-chip {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .evt-mcards { grid-template-columns: 1fr; gap: 10px; }
  .evt-mcard { padding: 14px; }
}

.evt-spark {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px 16px 8px;
  margin-top: 20px;
}
.evt-spark__chart { position: relative; }
.evt-spark svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 560px) {
  .evt-spark svg { min-height: 120px; }
}
.evt-spark__peak {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evt-spark__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 6px 2px 0;
  font-variant-numeric: tabular-nums;
}
.evt-spark__tags {
  display: flex;
  justify-content: flex-end;
  padding: 6px 2px 4px;
}
.evt-spark__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.evt-spark__live-dot {
  width: 7px;
  height: 7px;
  border: 1px solid var(--text);
  background: transparent;
  flex: none;
}
.evt-spark__footnote {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* Scoped [hidden] overrides for promoted elements whose own display rule
   (flex/inline-flex) would otherwise beat the UA [hidden]{display:none} rule
   at equal specificity by source order. Matches the existing scoped-not-global
   precedent already in this sheet (.toc__body[hidden], .platform-picker-modal[hidden])
   rather than the page-local `[hidden] { display: none !important; }` both
   source pages use — a global bare [hidden] override was judged too wide a
   blast radius for a shared, site-wide stylesheet. */
.evt-mcard__state-reached[hidden],
.evt-mcard__state-locked[hidden],
.evt-spark__live[hidden],
.evt-emptyrow[hidden] {
  display: none;
}

/* ============================================================
   Agent Roster Grid v2, promoted 2026-07-10 (content-pipeline-determinism
   Phase 2) from content-system/Templates/blocks/agent-roster-grid.html's two
   inline <style> blocks (grid/card styles + roster-detail overlay styles).
   Additive only — see content-system/docs/block-proposal--agent-roster-grid-v2.md.
   ============================================================ */

/* --- Grid --- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* --- Card --- */
.roster-card {
  display: grid;
  grid-template-columns: 5fr 8fr;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.roster-card:hover,
.roster-card:focus-visible {
  border-color: var(--text);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.roster-card:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* --- Portrait --- */
.roster-card__portrait {
  overflow: hidden;
  position: relative;
}
.roster-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s;
}
.roster-card:hover .roster-card__portrait img {
  transform: scale(1.05);
}

/* --- Content area --- */
.roster-card__content {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.roster-card__name {
  font-size: 1.25rem;
  margin-bottom: 0.25em;
}
.roster-card__starter {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.roster-card__tagline {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Tank renders on card --- */
.roster-card__tank-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 0.75rem;
  opacity: 1;
}
.roster-card__tanks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: auto;
}
.roster-card__tank {
  text-align: center;
}
/* Single-tank agents: span both columns, center */
.roster-card__tanks--single {
  grid-template-columns: 1fr;
  justify-items: center;
}
.roster-card__tank img {
  width: 100%;
  max-width: 160px;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s, filter 0.3s;
}
.roster-card:hover .roster-card__tank img {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.roster-card__tank-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.roster-card__tank-starter {
  font-weight: 400;
  color: var(--text-muted);
}
.roster-card__tank-starter::before {
  content: " \00b7 ";
}

/* --- Responsive: tablet --- */
@media (max-width: 959px) {
  .roster-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Responsive: mobile --- */
@media (max-width: 599px) {
  .roster-card {
    grid-template-columns: 1fr;
  }
  .roster-card__portrait {
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
  .roster-card__content {
    padding: 1rem 1.25rem 1.25rem;
  }
  .roster-card__tanks {
    gap: 0.5rem;
  }
  .roster-card__tank img {
    max-height: 72px;
  }
}

/* ================================================================
   ROSTER DETAIL OVERLAY (custom lightbox)
   ================================================================ */
.roster-detail {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 16, 19, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.roster-detail.open {
  opacity: 1;
  visibility: visible;
}
.roster-detail__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.2s;
}
.roster-detail__close:hover {
  color: var(--text);
}

/* Nav arrows */
.roster-detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.2s;
}
.roster-detail__nav:hover {
  color: var(--text);
}
.roster-detail__nav--prev { left: 1rem; }
.roster-detail__nav--next { right: 1rem; }

/* Layout */
.roster-detail__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  max-width: 900px;
  max-height: 80vh;
  gap: 2rem;
  width: 100%;
}
.roster-detail__agent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-detail__agent img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.roster-detail__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
}
.roster-detail__name {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.roster-detail__tagline {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.roster-detail__tank-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 1.25rem;
  opacity: 1;
}
.roster-detail__tanks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.roster-detail__tanks figure {
  text-align: center;
  margin: 0;
}
.roster-detail__tanks img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}
/* Single tank in detail: span both columns, center */
.roster-detail__tanks--single {
  grid-template-columns: 1fr;
  justify-items: center;
}
.roster-detail__tanks figcaption {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Lightbox mobile */
@media (max-width: 599px) {
  .roster-detail {
    padding: 1rem;
  }
  .roster-detail__layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
    max-height: 90vh;
  }
  .roster-detail__agent img {
    max-height: 40vh;
  }
  .roster-detail__name {
    font-size: 1.5rem;
  }
  .roster-detail__nav--prev { left: 0.25rem; }
  .roster-detail__nav--next { right: 0.25rem; }
}