/* ════════════════════════════════════════════════════════════════════════════
   worldcups-index.css — /{lang}/world-cup/  ·  "OCTO VIDEO" (the VHS rental wall)

   Styles the production World Cups index (_includes/components/worldcups-index.njk,
   included by content/world-cup/index{,.lang}.njk). Shipped from the design lab's
   winning variation, adversarial review applied — the class prefix stays .w2- so
   the reviewed rules and the markup cannot drift apart.

   A 90s video-rental wall. Mobile-first: the wall is a stack of tape SPINES
   (each ≥52px tall) that eject into full box art. From 560px up the same DOM
   becomes boxes standing face-out on wooden shelf rails, several per aisle
   (two columns at tablet, four from 900px).

   Rules honoured (CLAUDE.md):
     · font sizes come ONLY from the --fs-* tokens — no literal px font-size
     · Press Start 2P (--font-chrome) only for big iconic headers + short chrome
       (store sign, aisle labels, the tape year, sticker captions, buttons)
     · Courier Prime (--font-ui) for everything you actually read at label size
     · VT323 (--font-vt) never below 20px → always --fs-lg
     · reuses the site tokens; the shelf browns/plastics below are additive and
       scoped to .w2-page so nothing global can be affected
     · no framework, no build step; all classes prefixed .w2-
   ════════════════════════════════════════════════════════════════════════════ */

.w2-page {
  /* rental-store palette — additive, scoped, never overrides a site token */
  --w2-wood:        #4a3320;
  --w2-wood-lit:    #6d4c2b;
  --w2-wood-dark:   #251809;
  --w2-shell:       #191830;   /* VHS sleeve plastic */
  --w2-shell-lit:   #2c2a4e;
  --w2-shell-dark:  #0b0a16;
  --w2-paper:       #ece4cf;   /* sleeve label paper */
  --w2-ink:         #1d1608;
  --w2-foil-hi:     #fff3b0;
  --w2-foil-lo:     #a97b0a;
}

.w2-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   STORE FRONT
   ══════════════════════════════════════════════════════════════════════ */
.w2-store {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background:
    linear-gradient(180deg, rgba(245, 200, 0, 0.08), transparent 55%),
    linear-gradient(180deg, var(--c-darkblue), var(--c-navy));
  border: 3px solid var(--c-yellow);
  box-shadow: 4px 4px 0 var(--c-navy), 0 0 22px rgba(245, 200, 0, 0.14);
  padding: 1.1rem 1rem 1.2rem;
  margin-bottom: 1.4rem;
}

.w2-store-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  color: var(--c-sky);
  margin-bottom: 0.55rem;
}

/* Review fix: --fs-title clamps to 12px at 320–400px, which rendered the store's
   own shopfront sign SMALLER than the 14px subtitle underneath it — a hierarchy
   inversion on the first screen a phone sees. --fs-display floors at 20px, and
   "OCTO VIDEO" is 10 glyphs (~210px at 20px) so it still never wraps at 320px. */
.w2-store-sign {
  font-family: var(--font-chrome);
  font-size: var(--fs-display);
  line-height: 1.25;
  color: var(--c-yellow);
  text-shadow: 0 0 10px rgba(245, 200, 0, 0.55), 3px 3px 0 var(--c-orange);
  letter-spacing: 1px;
}

.w2-store-sub {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 3px;
  color: var(--c-white);
  border-bottom: 2px dashed var(--c-gold);
  padding-bottom: 0.5rem;
  margin: 0.45rem 0 0.75rem;
}

.w2-clerk { display: flex; align-items: flex-start; gap: 10px; }
.w2-clerk-face { font-size: var(--fs-emoji); line-height: 1; flex-shrink: 0; }

.w2-clerk-say {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--c-gray1);
  max-width: 62ch;
}

/* member card */
.w2-card {
  align-self: start;
  background: linear-gradient(150deg, #d8d2c0 0%, var(--w2-paper) 45%, #bdb6a2 100%);
  color: var(--w2-ink);
  border: 2px solid var(--c-gray4);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  padding: 10px 12px 12px;
}

.w2-card-top {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: #5a3b00;
  border-bottom: 2px solid #8a7a55;
  padding-bottom: 7px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.w2-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted #8a7a55;
  padding: 4px 0;
}

.w2-card-row dt {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #4a3d20;
}

.w2-card-row dd {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--w2-ink);
}

.w2-card-no {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #4a3d20;
  margin-top: 9px;
}

.w2-card-digits { font-weight: 700; color: #6b2200; }

/* ══════════════════════════════════════════════════════════════════════
   AISLES + SHELVES
   ══════════════════════════════════════════════════════════════════════ */
.w2-aisle { margin-bottom: 1.5rem; }

.w2-aisle-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  background: linear-gradient(180deg, var(--c-midblue), var(--c-darkblue));
  border: 2px solid var(--c-sky);
  border-bottom: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14);
  padding: 9px 12px;
}

.w2-aisle-label {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-yellow);
  text-shadow: 2px 2px 0 var(--c-navy);
  letter-spacing: 1px;
}

.w2-aisle-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: var(--c-gray1);
}

.w2-shelf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)),
    repeating-linear-gradient(90deg, var(--w2-wood) 0 7px, var(--w2-wood-lit) 7px 9px, var(--w2-wood) 9px 22px);
  border: 2px solid var(--w2-wood-dark);
  padding: 10px 10px 0;
}

/* the shelf rail the tapes stand on */
.w2-shelf::after {
  content: "";
  display: block;
  height: 12px;
  margin: 10px -10px 0;
  background: linear-gradient(180deg, #8a6238 0 2px, var(--w2-wood-lit) 2px, var(--w2-wood-dark) 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

.w2-gap {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  line-height: 1.6;
  color: var(--c-gray1);
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed var(--c-gray3);
  text-align: center;
  padding: 6px 8px;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   A TAPE
   ══════════════════════════════════════════════════════════════════════ */
.w2-tape {
  position: relative;
  display: flex;
  flex-direction: column;
  /* left strip = the sleeve spine edge; the rest = sleeve plastic */
  background:
    linear-gradient(90deg, var(--w2-shell-dark) 0 5px, var(--w2-shell-lit) 5px 7px, var(--w2-shell-dark) 7px 10px) left top / 10px 100% no-repeat,
    linear-gradient(155deg, var(--w2-shell-lit), var(--w2-shell) 40%, var(--w2-shell-dark));
  border: 2px solid #000;
  padding-left: 10px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.w2-tape--won { border-color: var(--c-gold); }
.w2-tape--now { border-color: var(--c-orange); }
/* Review fix: source order alone handed the CURRENT edition the orange
   "in progress" border even after its final was played and its champion is
   named right there on the sleeve. Gold (a champion is known) outranks orange
   (this is the newest tape) — recency is already carried by NEW RELEASE. */
.w2-tape--won.w2-tape--now { border-color: var(--c-gold); }

/* ── spine: the whole control on mobile, the sleeve title band on desktop ── */
.w2-spine {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  background: linear-gradient(180deg, rgba(68, 153, 221, 0.16), transparent);
  border-bottom: 2px solid rgba(245, 200, 0, 0.35);
}

.w2-spine-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--w2-paper);
}

.w2-spine-link:hover .w2-year,
.w2-spine-link:focus-visible .w2-year { color: var(--c-white); }

.w2-spine-link:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: -3px;
}

.w2-year {
  font-family: var(--font-chrome);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--c-yellow);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.w2-spine-host {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.w2-spine-flags { display: flex; gap: 4px; flex-shrink: 0; }

.w2-spine-flags .flag-pixel {
  width: 26px;
  height: 18px;
  border: 1px solid var(--c-gray3);
  box-shadow: none;
}

/* mobile spine shows one flag; the full host list is spelled out beside it */
.w2-spine-flags .flag-pixel:nth-child(n + 2) { display: none; }

.w2-spine-hostname {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: var(--c-gray1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* eject button — revealed by JS only, so no-JS never gets an inert control */
.w2-eject {
  flex: 0 0 auto;
  width: 56px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  border-left: 2px solid rgba(245, 200, 0, 0.35);
  color: var(--c-yellow);
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.w2-eject[hidden] { display: none; }
.w2-eject:hover { background: rgba(245, 200, 0, 0.2); }
.w2-eject:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: -3px; }
/* Drawn in CSS, not typed as a glyph: Press Start 2P has no ▼ and would fall
   back to another face (or tofu) for a one-character control. */
.w2-eject-icon {
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid currentColor;
  transition: transform 0.15s;
}
.w2-tape.w2-open .w2-eject-icon { transform: rotate(180deg); }

/* ── box art ── */
.w2-box {
  flex: 1 1 auto;          /* fill the tape so .w2-cta's margin-top:auto really bottoms out */
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 11px 12px;
}

/* Collapse is enabled ONLY once the script has added .w2-js, so with JS off
   every box art is already open and the whole wall is readable. */
.w2-js .w2-box { display: none; }
.w2-js .w2-tape.w2-open .w2-box { display: flex; }

.w2-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: hidden;
  padding: 12px 8px;
  background:
    linear-gradient(135deg, rgba(245, 200, 0, 0.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.35) 0 6px, rgba(0, 0, 0, 0.18) 6px 12px);
  border: 2px solid rgba(68, 153, 221, 0.55);
}

/* Review fix: this strip had no layout rule at all, so co-hosted editions
   (2002, 2026) rendered as raw inline SVGs — two flags welded together with no
   gap, and on the wall the third orphaned onto a second row, left-aligned. That
   also made 2026's art panel ~50px taller than every other sleeve on its rail
   and knocked the whole shelf row out of vertical rhythm.
   The three-host step-down that keeps the strip on ONE row is per-band (below),
   because the art panel is WIDER on a phone's expanded box (~222px) than in a
   four-up desktop track (~137px). Where :has() is unsupported the flags simply
   wrap as they did before — nothing here depends on it. */
.w2-art-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.w2-art .flag-pixel {
  width: 58px;
  height: 39px;
  border: 2px solid var(--c-gray2);
  box-shadow: 2px 2px 0 #000;
}

.w2-hostline { display: flex; flex-direction: column; gap: 2px; }

.w2-hostline-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  color: var(--c-sky);
}

.w2-hostline-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.2;
  color: var(--c-white);
}

/* rental sticker */
.w2-sticker {
  background: var(--w2-paper);
  color: var(--w2-ink);
  border: 1px solid #8a7a55;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  line-height: 1.5;
  padding: 5px 7px;
}

.w2-sticker-run { font-weight: 700; color: #8a2200; }

/* WINNER foil */
.w2-foil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  background: linear-gradient(135deg, var(--w2-foil-hi) 0%, var(--c-yellow) 32%, var(--w2-foil-lo) 58%, #ffe680 82%, var(--c-gold) 100%);
  color: #2a1c00;
  border: 2px solid #5c4200;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  padding: 6px 8px 7px;
  transform: rotate(-1.4deg);
}

.w2-foil-cap {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #4a3200;
}

.w2-foil-body { display: flex; align-items: center; gap: 7px; }

.w2-foil-flag .flag-pixel {
  width: 30px;
  height: 20px;
  border: 1px solid #5c4200;
  box-shadow: none;
}

.w2-foil-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  line-height: 1.2;
}

.w2-scoreline {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-gray1);
}

.w2-tag-aet,
.w2-tag-pens {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-teal);
  padding: 0 4px;
}

.w2-tag-pens { background: var(--c-yellow); }

/* NOW SHOWING (edition in progress) */
.w2-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  background: rgba(204, 34, 0, 0.15);
  border: 2px solid var(--c-orange);
  padding: 7px 8px;
}

.w2-live-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--c-red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-red);
  animation: w2-rec 1.4s steps(1) infinite;
}

@keyframes w2-rec { 50% { opacity: 0.25; } }

.w2-live-cap {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: var(--c-yellow);
}

.w2-live-body {
  flex: 1 1 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--c-white);
}

/* honest fallbacks: an edition whose champion is NOT derivable from the archive */
.w2-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(68, 153, 221, 0.12);
  border: 2px dashed var(--c-sky);
  padding: 7px 8px;
}

/* Review fix: these captions are sentences, not chrome — "DECIDED ON PENALTIES"
   and "FINAL NOT YET PLAYED" are 20 characters and wrapped to two lines of
   Press Start 2P, which CLAUDE.md reserves for short iconic chrome. WINNER /
   NOW SHOWING (one word, one badge) keep the pixel face; these read in Courier. */
.w2-note-cap {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  line-height: 1.4;
  color: var(--c-sky);
}

.w2-note-body {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--c-gray1);
}

/* CTA + barcode */
.w2-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: var(--c-navy);
  background: var(--c-yellow);
  border: 2px solid var(--c-orange);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.w2-cta:hover,
.w2-cta:focus-visible {
  background: var(--c-orange);
  color: #fff;
  outline: none;
}

.w2-cta:focus-visible { box-shadow: 0 0 0 3px var(--c-white); }

.w2-barcode {
  display: block;
  height: 22px;
  background:
    repeating-linear-gradient(90deg,
      #0d0d0d 0 2px, #f2f2f2 2px 3px, #0d0d0d 3px 4px, #f2f2f2 4px 7px,
      #0d0d0d 7px 9px, #f2f2f2 9px 10px, #0d0d0d 10px 11px, #f2f2f2 11px 13px);
  border: 2px solid #f2f2f2;
}

/* NEW RELEASE tag */
.w2-flag-new {
  order: -1;
  align-self: flex-start;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #fff;
  background: var(--c-red);
  border: 2px solid var(--c-yellow);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  padding: 5px 8px;
  margin: 8px 0 0 8px;
}

.w2-rewind {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  color: var(--c-gold);
  text-align: center;
  padding: 0.6rem 0 1.4rem;
}

/* ══════════════════════════════════════════════════════════════════════
   PHONE — the spine label breaks into two rows (<560px)

   Review fix: on one row the year (a 4-glyph pixel number) plus the 56px eject
   left the host name 116px at 390px and 46px at 320px — every co-hosted tape
   read "SOUTH KOREA ·…" and 320px showed "UNIT…", a truncated stub that looks
   like a rendering bug. Breaking the label the way a real sleeve spine is set —
   big year on top, flag + full host list beneath — gives the name the whole
   width. Clamped at two lines so no future host list can inflate the row.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 559px) {
  .w2-spine-link {
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 10px;
    padding: 7px 10px;
  }

  .w2-spine-host { flex: 1 0 100%; }

  .w2-spine-hostname {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   THE WALL — face-out boxes on wooden rails (≥560px)

   Review fix: this used to start at 900px, which left every tablet width
   (768, 810/820 iPad portrait, 899) rendering the phone spine stack at full
   width — ~760px bars with the label in the first 250px, half a screen of
   dead sleeve, and the eject button stranded at the far right, 500px from
   the thing it controls. The wall itself works from 560px (a 2-up track is
   ~238px there, WIDER than the 195px track the 4-up wall runs at 900px), so
   the wall starts where it actually fits and the stack is left to phones.

   The column count must DIVIDE the template's PER_SHELF (4) — with 3 columns
   an aisle spills one orphan tape onto its own half-empty rail. So: 2, then
   4. Never 3.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 560px) {
  .w2-aisle { margin-bottom: 2rem; }

  .w2-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 26px 16px;
    padding: 30px 18px 0;   /* headroom for the NEW RELEASE tag hanging off a tape */
  }

  .w2-shelf::after {
    grid-column: 1 / -1;
    height: 14px;
    margin: 6px -18px 0;
  }

  .w2-gap { grid-column: 1 / -1; padding: 0 0 0.2rem; }

  .w2-tape {
    /* the spine edge grows and the box gets shelf depth */
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.65), inset -1px 0 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s;
  }

  /* hover / keyboard focus pulls the tape off the shelf */
  .w2-tape:hover,
  .w2-tape:focus-within {
    transform: translateY(-12px) rotate(-1.1deg);
    box-shadow: 7px 12px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(245, 200, 0, 0.4);
    border-color: var(--c-yellow);
    z-index: 2;
  }

  /* sleeve title band — the padding lives on the link so the whole band is the
     hit area (a bare 32px year would be a mean target even with a mouse) */
  .w2-spine {
    display: block;
    min-height: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(68, 153, 221, 0.28), rgba(0, 0, 0, 0.25));
    border-bottom: 2px solid var(--c-gold);
  }

  .w2-spine-link {
    display: block;
    min-height: 44px;
    padding: 12px 11px 11px;
  }

  .w2-year {
    display: block;
    font-size: var(--fs-display);
    letter-spacing: 0;
  }

  /* On the wall the band is pure VHS spine title — just the year. The host is
     spelled out once, under the cover art, so nothing is said twice. */
  .w2-spine-host { display: none; }

  .w2-eject { display: none !important; }

  .w2-box { display: flex !important; padding: 12px; gap: 10px; }

  .w2-art { padding: 14px 8px; min-height: 74px; }

  /* the shelf-talker hangs above the tape, clear of the year */
  .w2-flag-new {
    order: 0;
    position: absolute;
    top: -22px;
    right: -5px;
    margin: 0;
    transform: rotate(5deg);
    z-index: 3;
  }
}

/* Two-up tracks (238px at 560 → 406px at 899) are WIDER than the four-up
   tracks the 900px wall runs, so the cover flag would sit lost in a letterbox
   frame at exactly the sizes tuned for a 157px panel. One step up, and the
   three-host step-down relaxes to the base size (3 × 58 + gaps = 186 ≤ the
   194px art panel at the narrowest 2-up width). */
@media (min-width: 560px) and (max-width: 899px) {
  .w2-art { min-height: 78px; }
  .w2-art .flag-pixel { width: 68px; height: 46px; }
  .w2-art-flags:has(.flag-pixel:nth-child(3)) .flag-pixel { width: 54px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FULL WALL — four tapes to a rail (≥900px)
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .w2-store {
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
    gap: 1.6rem;
    padding: 1.4rem 1.5rem 1.5rem;
  }

  /* Four columns = PER_SHELF, so a rail is never left half empty. Tracks run
     ~195px at 900px and ~245px at 1100px+, both wider than a 32px pixel year. */
  .w2-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Narrowest art panel on the site (137px of content at 900px): three hosts
     only stay on one row — and the rail only stays level — at this size. */
  .w2-art-flags:has(.flag-pixel:nth-child(3)) .flag-pixel { width: 40px; height: 27px; }
}

/* ══════════════════════════════════════════════════════════════════════
   WIDE — more density, richer sleeve detail (≥1100px)
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .w2-store { grid-template-columns: minmax(0, 1fr) 270px; }
  .w2-shelf { gap: 30px 18px; }
  .w2-art .flag-pixel { width: 64px; height: 43px; }
  .w2-scoreline { font-size: var(--fs-sm); }
  .w2-note-body,
  .w2-live-body { font-size: var(--fs-sm); }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .w2-tape,
  .w2-cta,
  .w2-eject-icon { transition: none; }

  .w2-tape:hover,
  .w2-tape:focus-within { transform: none; }

  .w2-live-dot { animation: none; }
  .w2-foil { transform: none; }
  .w2-flag-new { transform: none; }
}