/* ============================================================================
   WMB 2026 — Hall of Fame page bundle (mobile-first)
   Self-contained: design tokens + @font-face (theme font files) so the Hall of
   Fame styles render to the prototype independent of the theme's own token
   names. Enqueued only on /hall-of-fame/ and single winner bands (functions.php).

   Source: WMB Hall of Fame New.zip → mobile-screen.jsx + mobile.css (LISTING,
   scoped to .mhof) — mobile-first with desktop breakpoints layered here (the
   design's mobile.css carried no media queries). The winner-mode (.wb-*) block
   below is preserved from the prior build (matches winner-band.jsx) and feeds
   single-band.php. The mockup's .mhof-nav / device padding are intentionally
   omitted so they don't clash with the theme's real header.
   ========================================================================= */

@font-face {
  font-family: "Latin CT Not Wide";
  src: url('../fonts/LatinCT-NotWide.otf') format('opentype');
  font-weight: 400 900; font-style: normal; font-display: block;
}
@font-face {
  font-family: "WMB Display";
  src: url('../fonts/LatinCT-NotWide.otf') format('opentype');
  font-weight: 400 900; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Indubitably";
  src: url('../fonts/IndubitablyNF.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  --wmb-black:#0a0a0a; --wmb-surface:#141414; --wmb-surface-2:#1c1c1c;
  --wmb-border:#262626; --wmb-border-bold:#3a3a3a; --wmb-white:#f4f4f4;
  --wmb-muted:#9a9a9a; --wmb-muted-2:#6a6a6a;
  --wmb-red:#c8102e; --wmb-red-hover:#e63946; --wmb-red-deep:#8a0a1e;
  --bg:var(--wmb-black); --bg-surface:var(--wmb-surface); --bg-surface-hover:var(--wmb-surface-2);
  --fg:var(--wmb-white); --fg-muted:var(--wmb-muted); --fg-meta:var(--wmb-muted-2);
  --border:var(--wmb-border); --border-strong:var(--wmb-border-bold);
  --accent:var(--wmb-red); --accent-hover:var(--wmb-red-hover); --accent-press:var(--wmb-red-deep);
  --font-display:"WMB Display","Latin CT Not Wide","Indubitably","Oswald","Impact",sans-serif;
  --font-text:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --ease-out:cubic-bezier(0.2,0.6,0.2,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:600ms;
}

/* ===== Listing wrapper — localises the mockup body styles to /hall-of-fame/ */
.mhof {
  --m-pad: 20px;
  --m-gutter: 16px;
  background: var(--wmb-black)
    radial-gradient(ellipse at 50% 0%, rgba(200,16,46,0.06) 0%, transparent 55%);
  color: var(--fg);
  font-family: var(--font-text);
}
.mhof * { box-sizing: border-box; }
.mhof img { max-width: 100%; }
.mhof a { color: inherit; text-decoration: none; }
@media (min-width: 768px)  { .mhof { --m-pad: 28px; } }
@media (min-width: 1024px) { .mhof { --m-pad: 40px; max-width: 1440px; margin: 0 auto; } }

/* ===== Bridges (flag <img> sizing, JS hide) =============================== */
.is-hidden { display: none !important; }
.mhof-tile__flag .glyph .flag-img { height: 14px; width: auto; display: inline-block; vertical-align: middle; }
.mhof-reigning__country .flag .flag-img { height: 20px; width: auto; display: inline-block; vertical-align: middle; }
.mhof-country__flag .flag-img { height: 34px; width: auto; display: inline-block; vertical-align: middle; }
.wb-name__meta .flag-img         { height: 18px; width: auto; display: inline-block; vertical-align: middle; }
.wb-fact__val .flag-img          { height: 16px; width: auto; display: inline-block; vertical-align: middle; }
.wb-champion-nav__year .flag-img { height: 14px; width: auto; display: inline-block; vertical-align: middle; }
.wb-hero-photo__country-chip .flag-img { height: 16px; width: auto; display: inline-block; vertical-align: middle; }

/* ===== Buttons =========================================================== */
.mhof .wmb-btn,
.wb-champion-nav .wmb-btn,
.mhof-foot .wmb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  font-family: var(--font-text); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mhof .wmb-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.mhof .wmb-btn--ghost { background: transparent; border-color: var(--fg); color: var(--fg); }
.mhof .wmb-btn--ghost:hover { background: transparent; border-color: var(--accent-hover); color: var(--accent-hover); }

/* ===== Social row (shared with wb-*; rendered by wmb_hof_render_socials) == */
.hof-social-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hof-social {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hof-social:hover { color: var(--accent-hover); transform: translateY(-1px); }
.hof-social svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   HERO
   ============================================================ */
.mhof-hero { padding: 32px var(--m-pad) 28px; }
@media (min-width: 768px)  { .mhof-hero { padding: 56px var(--m-pad) 40px; } }
@media (min-width: 1024px) { .mhof-hero { padding: 80px var(--m-pad) 56px; } }
.mhof-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase;
}
.mhof-hero__eyebrow::before { content: "// "; color: var(--accent); }
.mhof-hero__title {
  font-family: var(--font-display); font-size: clamp(48px, 13vw, 56px);
  line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--fg); margin: 18px 0 0;
}
@media (min-width: 768px)  { .mhof-hero__title { font-size: clamp(72px, 9vw, 112px); } }
@media (min-width: 1280px) { .mhof-hero__title { font-size: clamp(96px, 8vw, 144px); } }
.mhof-hero__rule { display: block; width: 64px; height: 4px; background: var(--accent); margin-top: 22px; }
.mhof-hero__deck {
  margin-top: 22px; max-width: 60ch;
  font-family: var(--font-text); font-size: 15px; line-height: 1.5;
  letter-spacing: 0.03em; color: var(--fg-muted);
}
@media (min-width: 768px) { .mhof-hero__deck { font-size: 18px; } }

/* ---- STATS — variant A: 2×2 grid (4-across on desktop) -------- */
.mhof-stats--grid {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
}
.mhof-stats--grid .mhof-stat {
  padding: 16px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mhof-stats--grid .mhof-stat:nth-child(2n) { border-right: 0; }
.mhof-stats--grid .mhof-stat:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) {
  .mhof-stats--grid { grid-template-columns: repeat(4, 1fr); }
  .mhof-stats--grid .mhof-stat { padding: 24px 22px; border-bottom: 0; border-right: 1px solid var(--border); }
  .mhof-stats--grid .mhof-stat:last-child { border-right: 0; }
}
.mhof-stat__num {
  font-family: var(--font-display); font-size: 48px; line-height: 0.9;
  letter-spacing: 0.01em; color: var(--fg); text-transform: uppercase;
}
@media (min-width: 1024px) { .mhof-stat__num { font-size: clamp(56px, 5vw, 72px); } }
.mhof-stat__num--accent { color: var(--accent); }
.mhof-stat__num--small { font-size: 22px; line-height: 1.1; }
.mhof-stat__label {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase;
}

/* ---- STATS — variant B: scroll-snap on mobile, 4-grid ≥768 ---- */
.mhof-stats--snap {
  margin: 28px calc(var(--m-pad) * -1) 0;
  padding: 0 var(--m-pad);
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
}
.mhof-stats--snap::-webkit-scrollbar { display: none; }
.mhof-stats--snap .mhof-stat {
  flex: 0 0 56%; min-width: 56%;
  padding: 18px 16px;
  border: 1px solid var(--border);
  background: var(--wmb-surface);
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .mhof-stats--snap {
    margin: 28px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    overflow: visible; border: 1px solid var(--border);
    -webkit-mask-image: none; mask-image: none;
  }
  .mhof-stats--snap .mhof-stat {
    flex: initial; min-width: 0; background: transparent;
    border: 0; border-right: 1px solid var(--border); padding: 24px 22px;
  }
  .mhof-stats--snap .mhof-stat:last-child { border-right: 0; }
}
.mhof-stat { display: flex; flex-direction: column; min-width: 0; }
.mhof-stats-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg-meta); text-transform: uppercase;
}
.mhof-stats-hint .arrow { color: var(--accent); }
@media (min-width: 768px) { .mhof-stats-hint { display: none; } }

/* ============================================================
   FILTER BAR — variant A: stacked sticky
   ============================================================ */
.mhof-filterbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--wmb-black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--m-pad);
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 1024px) {
  .mhof-filterbar { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  .mhof-filterbar__row { flex: 1; }
}
.mhof-pillgroup {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.mhof-pillgroup::-webkit-scrollbar { display: none; }
.mhof-pill {
  flex: 1 0 auto;
  font-family: var(--font-text); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted);
  padding: 12px 14px; min-height: 44px;
  cursor: pointer; user-select: none;
  border: 0; border-right: 1px solid var(--border);
  background: transparent; white-space: nowrap;
}
.mhof-pill:last-child { border-right: 0; }
.mhof-pill--active { background: var(--accent); color: #fff; }
.mhof-pill--ghost-active { background: var(--wmb-surface); color: var(--fg); }
.mhof-filterbar__row { display: flex; align-items: center; gap: 10px; }
.mhof-filterbar__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-muted); text-transform: uppercase; flex-shrink: 0;
}
.mhof-filterbar__label::before { content: "// "; color: var(--accent); }
.mhof-country-trigger {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--border); background: var(--wmb-surface);
  font-family: var(--font-text); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg); cursor: pointer;
}
.mhof-country-trigger .caret { color: var(--accent); }
.mhof-country-trigger.is-active { border-color: var(--accent); color: var(--accent); }

/* Inline country panel (stacked variant dropdown) */
.mhof-country-panel {
  border: 1px solid var(--border); background: var(--wmb-surface);
  max-height: 260px; overflow-y: auto;
}
.mhof-country-panel[hidden] { display: none; }

/* ----- DRAWER variant (B) ------------------------------------ */
.mhof-filterbar--drawer { flex-direction: row; align-items: center; justify-content: space-between; }
.mhof-filterbar--drawer .mhof-pillgroup { flex: 1; }
.mhof-filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border); background: var(--wmb-surface);
  font-family: var(--font-text); font-size: 12px; letter-spacing: 0.12em;
  color: var(--fg); text-transform: uppercase; cursor: pointer;
}
.mhof-filter-trigger .icon { display: inline-flex; flex-direction: column; gap: 3px; }
.mhof-filter-trigger .icon span { display: block; width: 14px; height: 1.5px; background: currentColor; }
.mhof-filter-trigger .icon span:nth-child(2) { width: 10px; }
.mhof-filter-trigger .icon span:nth-child(3) { width: 6px; }
.mhof-filter-trigger .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 0 5px;
}
.mhof-filter-trigger.is-empty .count { background: transparent; color: var(--fg-muted); }

/* Drawer panel (bottom sheet) */
.mhof-drawer-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,0.85);
  display: flex; align-items: flex-end;
}
.mhof-drawer-scrim[hidden] { display: none; }
.mhof-drawer {
  width: 100%; background: var(--wmb-black);
  border-top: 3px solid var(--accent);
  padding: 16px var(--m-pad) 32px;
  max-height: 80vh; overflow-y: auto;
}
@media (min-width: 768px) { .mhof-drawer { max-width: 520px; margin: 0 auto; } }
.mhof-drawer__handle { display: block; width: 48px; height: 4px; background: var(--border-strong); margin: 0 auto 18px; }
.mhof-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.mhof-drawer__head h3 {
  font-family: var(--font-display); font-size: 22px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); margin: 0;
}
.mhof-drawer__close { width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); color: var(--fg); cursor: pointer; font-family: var(--font-mono); font-size: 16px; }
.mhof-drawer__section { margin-bottom: 20px; }
.mhof-drawer__section-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; margin-bottom: 10px;
}
.mhof-drawer__section-label::before { content: "// "; color: var(--accent); }
.mhof-drawer__actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.mhof-drawer__actions .wmb-btn { flex: 1; min-height: 48px; }
.mhof-drawer-clist { border: 1px solid var(--border); max-height: 240px; overflow-y: auto; }
.mhof-drawer-crow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; min-height: 44px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-text); font-size: 13px; letter-spacing: 0.08em;
  color: var(--fg-muted); text-transform: uppercase; cursor: pointer;
}
.mhof-drawer-crow:last-child { border-bottom: 0; }
.mhof-drawer-crow.is-active { color: var(--accent); }
.mhof-drawer-crow .count { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }

/* ============================================================
   RESULT COUNTER
   ============================================================ */
.mhof-result {
  padding: 20px var(--m-pad) 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--fg-muted); text-transform: uppercase;
}
.mhof-result em  { font-style: normal; color: var(--fg); }
.mhof-result strong { font-weight: 400; color: var(--accent); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.mhof-empty { margin: 32px var(--m-pad); padding: 32px; border: 1px solid var(--border); text-align: center; }
.mhof-empty[hidden] { display: none; }
.mhof-empty__skull { font-family: var(--font-display); font-size: 64px; color: var(--fg-meta); }
.mhof-empty__line { font-family: var(--font-display); font-size: 20px; color: var(--fg); margin-top: 14px; text-transform: uppercase; }
.mhof-empty__rule { display: block; width: 48px; height: 3px; background: var(--accent); margin: 16px auto; }

/* ============================================================
   REIGNING CHAMPION — distinct, bigger, redder
   ============================================================ */
.mhof-reigning-strip {
  margin: 32px var(--m-pad) 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase;
}
.mhof-reigning-strip .star { font-size: 14px; }
.mhof-reigning-strip .rule { flex: 1; height: 2px; background: var(--accent); }
.mhof-reigning {
  display: block; margin: 0 var(--m-pad);
  background: var(--wmb-surface); border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px var(--wmb-black), 0 0 32px -4px rgba(200,16,46,0.6), 0 0 80px -20px rgba(200,16,46,0.8);
}
@media (min-width: 1024px) {
  .mhof-reigning { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
}
.mhof-reigning__photo {
  position: relative; aspect-ratio: 16/9;
  background: var(--wmb-surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.022) 22px 23px);
  border-bottom: 1px solid var(--accent);
  overflow: hidden;
}
@media (min-width: 1024px) { .mhof-reigning__photo { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--accent); } }
.mhof-reigning__photo .mhof-photo-img,
.mhof-tile__photo .mhof-photo-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.mhof-reigning__body { padding: 28px 22px; }
.mhof-reigning__meta-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.mhof-reigning__year-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.mhof-reigning__crown {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; padding: 6px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  animation: mhof-crownPulse 2.2s ease-in-out infinite;
}
.mhof-reigning__crown .star { font-size: 12px; line-height: 1; }
@keyframes mhof-crownPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(200,16,46,0); }
}
.mhof-reigning__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.mhof-reigning__eyebrow::before { content: "// "; }
.mhof-reigning__name {
  font-family: var(--font-display); font-size: clamp(28px, 11vw, 44px);
  line-height: 0.9; letter-spacing: 0.01em; color: var(--fg); text-transform: uppercase;
  margin: 14px 0 0; overflow-wrap: anywhere;
}
.mhof-reigning__country {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg); text-transform: uppercase; flex-wrap: wrap;
}
.mhof-reigning__country .flag { font-size: 22px; line-height: 1; }
.mhof-reigning__country .dot { color: var(--accent); }
.mhof-reigning__rule { display: block; width: 64px; height: 4px; background: var(--accent); margin-top: 18px; }
.mhof-reigning__genre { margin-top: 18px; font-family: var(--font-text); font-size: 16px; letter-spacing: 0.06em; color: var(--fg); text-transform: uppercase; }
.mhof-reigning__bio { margin-top: 14px; font-family: var(--font-text); font-size: 14px; letter-spacing: 0.03em; color: var(--fg-muted); line-height: 1.55; }
.mhof-reigning__socials { display: flex; gap: 16px; margin-top: 22px; }
.mhof-reigning__cta { margin-top: 22px; display: flex; }
.mhof-reigning__cta .wmb-btn { flex: 1; min-height: 48px; }

/* ============================================================
   PAST CHAMPIONS HEADING
   ============================================================ */
.mhof-section-head { display: flex; align-items: baseline; gap: 12px; margin: 56px var(--m-pad) 0; padding-bottom: 6px; }
.mhof-section-head__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }
.mhof-section-head__eyebrow::before { content: "// "; color: var(--accent); }
.mhof-section-head__rule { flex: 1; height: 1px; background: var(--border); }
.mhof-section-head__count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }

/* ============================================================
   TILES — single column on mobile, grid on desktop
   ============================================================ */
.mhof-tiles { margin: 16px var(--m-pad) 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px)  { .mhof-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .mhof-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .mhof-tiles { grid-template-columns: repeat(4, 1fr); } }
/* Gap markers always span the full row width */
.mhof-tiles .mhof-gap { grid-column: 1 / -1; margin: 4px 0; }

.mhof-tile {
  display: block; background: var(--wmb-surface); border: 1px solid var(--border);
  cursor: pointer; color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mhof-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.mhof-tile__photo {
  position: relative; aspect-ratio: 16/9; background: var(--wmb-surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,0.02) 16px 17px);
  border-bottom: 1px solid var(--border); overflow: hidden;
  filter: grayscale(0.65) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease-out);
}
.mhof-tile:hover .mhof-tile__photo { filter: none; }
.mhof-tile__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.mhof-tile__top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mhof-tile__year { display: inline-block; padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: #fff; background: var(--accent); }
.mhof-tile__flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--fg); text-transform: uppercase; }
.mhof-tile__flag .glyph { font-size: 14px; line-height: 1; }
.mhof-tile__name { font-family: var(--font-display); font-size: 26px; line-height: 0.95; letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; margin: 0; overflow-wrap: anywhere; }
.mhof-tile__genre { font-family: var(--font-text); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-muted); text-transform: uppercase; }
.mhof-tile__bio { font-family: var(--font-text); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mhof-tile__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.mhof-tile__socials { display: flex; gap: 14px; }
.mhof-tile__socials .hof-social svg { width: 16px; height: 16px; }
.mhof-tile__cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }

/* ============================================================
   GAP YEAR — full-width row marker, NOT a card
   ============================================================ */
.mhof-gap {
  margin: 4px var(--m-pad);
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong);
  opacity: 0.7;
}
.mhof-gap__year { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.04em; color: var(--fg-meta); }
.mhof-gap__rule { width: 20px; height: 1px; background: var(--border-strong); }
.mhof-gap__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }

/* ============================================================
   BY COUNTRY VIEW — horizontal scroll-snap shelves
   ============================================================ */
.mhof-by-country[hidden] { display: none; }
.mhof-country { margin: 32px 0 0; }
.mhof-country__head { display: flex; align-items: center; gap: 12px; padding: 0 var(--m-pad); }
.mhof-country__flag { font-size: 36px; line-height: 1; }
.mhof-country__title-block { display: flex; flex-direction: column; min-width: 0; }
.mhof-country__count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.mhof-country__count::before { content: "// "; }
.mhof-country__name { font-family: var(--font-display); font-size: 30px; line-height: 0.95; letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; margin-top: 2px; }
.mhof-country__rule { flex: 1; height: 1px; background: var(--border); margin-left: 8px; }
.mhof-shelf {
  margin: 14px 0 0; padding: 0 var(--m-pad);
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--m-pad); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 24px), transparent 100%);
}
.mhof-shelf::-webkit-scrollbar { display: none; }
.mhof-shelf__card { flex: 0 0 78%; min-width: 78%; scroll-snap-align: start; }
@media (min-width: 768px)  { .mhof-shelf__card { flex-basis: 46%; min-width: 46%; } }
@media (min-width: 1024px) { .mhof-shelf__card { flex-basis: 30%; min-width: 30%; } }
.mhof-shelf__card .mhof-tile__name { font-size: 22px; }

/* ============================================================
   FOOTER BAND
   ============================================================ */
.mhof-foot { margin: 64px var(--m-pad) 0; padding: 32px 0 96px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .mhof-foot { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; } }
.mhof-foot__line { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }
@media (min-width: 768px) { .mhof-foot__line { flex: 1 0 100%; } }
.mhof-foot .wmb-btn { width: 100%; }
@media (min-width: 768px) { .mhof-foot .wmb-btn { width: auto; } }

/* ============================================================
   PORTRAIT SLOT (fallback when a winner has no featured image)
   ============================================================ */
.portrait-slot { width: 100%; height: 100%; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portrait-slot__caption { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--fg-meta); text-transform: uppercase; }
.portrait-slot__accent { position: absolute; left: 12px; top: 36px; width: 10px; height: 10px; background: var(--accent); }
.portrait-slot__initials { font-family: var(--font-display); font-size: min(120px, 28vw); letter-spacing: 0.02em; color: rgba(244,244,244,0.13); line-height: 1; text-transform: uppercase; }
.portrait-slot__vignette { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; }

/* Focus rings (accessibility) */
.mhof a:focus-visible, .mhof button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mhof *, .mhof *::before, .mhof *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .mhof-reigning__crown { animation: none; }
}

/* ============================================================
   WINNER-MODE — BAND DETAIL PAGE (.wb-*) — preserved from prior build,
   matches winner-band.jsx; fed by single-band.php winner branch.
   ============================================================ */
.wb-hero-photo {
  width: 100%; aspect-ratio: 16/7;
  background: var(--wmb-surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.018) 22px 23px);
  position: relative; border-bottom: 1px solid var(--border); overflow: hidden;
}
.wb-hero-photo__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.wb-hero-photo__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.0) 40%, rgba(10,10,10,0.95) 100%); }
.wb-hero-photo__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg-meta); text-transform: uppercase; }
.wb-hero-photo__country-chip { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(10,10,10,0.75); border: 1px solid rgba(255,255,255,0.18); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg); text-transform: uppercase; }
.wb-hero-photo__crown { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.wb-hero-photo__crown .star { font-size: 14px; }

.wb-name-block { max-width: 1440px; margin: 0 auto; padding: 48px 32px 24px; }
.wb-name-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }
.wb-name-eyebrow::before { content: "// "; color: var(--accent); }
.wb-name { font-family: var(--font-display); font-size: clamp(56px, 11vw, 184px); line-height: 0.85; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); margin: 16px 0 0; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 32px; }
.wb-name__crown { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.22em; color: var(--accent); align-self: flex-end; padding-bottom: 14px; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: 8px; }
.wb-name__crown .star { font-size: 16px; }
.wb-name__rule { display: block; width: 96px; height: 4px; background: var(--accent); margin-top: 28px; }
.wb-name__meta { margin-top: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--font-text); font-size: 15px; letter-spacing: 0.12em; color: var(--fg); text-transform: uppercase; }
.wb-name__meta .div { color: var(--accent); }

.wb-banner { margin: 32px auto 0; max-width: 1440px; padding: 0 32px; }
.wb-banner__inner { border-top: 3px solid var(--accent); padding: 32px 0 24px; border-bottom: 1px solid var(--border); }
.wb-banner__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.wb-banner__eyebrow::before { content: "// "; }
.wb-banner__title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); margin: 14px 0 0; }

.wb-moment { max-width: 1440px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; }
.wb-moment > * { min-width: 0; }
.wb-moment__body p { font-family: var(--font-text); font-size: 18px; letter-spacing: 0.04em; color: var(--fg); line-height: 1.55; margin: 0 0 18px; }
.wb-moment__body p.muted { color: var(--fg-muted); }
.wb-moment__quote { margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: 32px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); }
.wb-moment__quote::before { content: "\201C"; color: var(--accent); }
.wb-moment__quote::after { content: "\201D"; color: var(--accent); }
.wb-moment__quote-attr { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }
.wb-moment__facts { border: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.wb-fact { padding: 22px 22px 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wb-fact:nth-child(2n) { border-right: 0; }
.wb-fact:nth-last-child(-n+2) { border-bottom: 0; }
.wb-fact__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; }
.wb-fact__label::before { content: "// "; color: var(--accent); }
.wb-fact__val { font-family: var(--font-display); font-size: 26px; line-height: 1.05; letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; margin-top: 8px; }
.wb-fact__val--small { font-size: 18px; }
.wb-fact__val a { color: var(--accent); }

.wb-reel { max-width: 1440px; margin: 0 auto; padding: 0 32px 64px; }
.wb-reel__frame { aspect-ratio: 16/9; background: var(--wmb-surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.018) 22px 23px); }
.wb-reel__play { width: 80px; height: 80px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 28px; }
.wb-reel__label { position: absolute; bottom: 24px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fg); text-transform: uppercase; background: rgba(10,10,10,0.7); padding: 6px 10px; border: 1px solid var(--border); }

.wb-champion-nav { max-width: 1440px; margin: 0 auto; padding: 32px 32px 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--border); }
.wb-champion-nav__link { padding: 32px; background: var(--wmb-surface); border: 1px solid var(--border); cursor: pointer; text-decoration: none; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.wb-champion-nav__link:hover { transform: translateY(-2px); border-color: var(--accent); }
.wb-champion-nav__link--disabled { opacity: 0.35; pointer-events: none; }
.wb-champion-nav__dir { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.wb-champion-nav__year { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.22em; color: var(--fg-muted); text-transform: uppercase; margin-top: 6px; }
.wb-champion-nav__band { font-family: var(--font-display); font-size: clamp(32px, 6vw, 48px); letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; margin-top: 4px; line-height: 0.95; }
.wb-champion-nav__right { text-align: right; }

/* ---- Winner-mode mobile breakpoint -------------------------------- */
@media (max-width: 880px) {
  .wb-moment { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; }
  .wb-name-block { padding: 32px 20px 16px; }
  .wb-banner, .wb-reel, .wb-champion-nav { padding-left: 20px; padding-right: 20px; }
  .wb-champion-nav { grid-template-columns: 1fr; }
  .wb-champion-nav__right { text-align: left; }
}