/* vurvo.css: the site's design system (the "booth" redesign, 2026-11-01).
   Loaded by every page AFTER its own <style>, it re-points the tokens every
   page already uses (--night is the page, --deck a card, --chalk the ink,
   --steel/--dim the quieter text, --disp/--body the fonts) at one palette:
   fog paper in light mode, near-black in dark mode, with the team's colour
   and the ember accent on top. :root:root outranks each page's own :root.
   The booth (.bth-*) is the dark, team-tinted broadcast stage that opens the
   homepage and the team pages: js/booth.js draws it. */

:root:root {
  --night:#ECEEF1; --deck:#FFFFFF; --deck-2:#F6F7F9; --deck-3:#E4E8ED;
  --line:#D5DAE1; --line-2:rgba(17,21,28,.09);
  --chalk:#11151C; --steel:#4C5462; --dim:#5B6472; --dimmer:#5B6472;
  --ember:#E8400C; --ember-2:#C23A0B; --ember-soft:#FF6B35;
  --booth-night:#07090C;
  --disp:'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --body:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mark:'Poppins', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* a team colour used as TEXT on the page: pulled toward the ink so gold,
     sky blue or pale accents still read on fog paper */
  --tt-mix:58%;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:root {
    --night:#0F1218; --deck:#171B23; --deck-2:#1C212B; --deck-3:#262C37;
    --line:#2A313D; --line-2:rgba(255,255,255,.07);
    --chalk:#E9ECF1; --steel:#A3ACBA; --dim:#8D97A8; --dimmer:#8D97A8;
    --ember-2:#FF8347; --tt-mix:100%;
    color-scheme:dark;
  }
}
/* Dark islands: surfaces that sit on a photo or open the page (the top bar,
   the scores ribbon, the booth, the big story over its picture, the app
   pitch) keep the night palette in both modes. Mark one with .vv-dark, or
   data-dark where a script rewrites the element's className. */
.vv-dark, [data-dark], .bth {
  --night:#0F131A; --deck:#151A23; --deck-2:#1B222D; --deck-3:#232B38;
  --line:#262F3D; --line-2:rgba(255,255,255,.07);
  --chalk:#EEF1F5; --steel:#A3ACBA; --dim:#8D97A8; --dimmer:#8D97A8; --tt-mix:100%;
  color-scheme:dark;
}
/* zero specificity: a page's own colour on the island (team ink on a team band) still wins */
:where(.vv-dark, [data-dark]) { color:var(--chalk); }
/* Bricolage's width axis: everything set in the display face runs condensed,
   the way the old Big Shoulders did; Poppins and Plex have no width axis. */
body { font-stretch:75%; background:var(--night); color:var(--chalk); }
::selection { background:var(--team, var(--ember)); color:var(--team-ink, #fff); }
:focus-visible { outline-color:var(--ember); }

/* ── the booth ─────────────────────────────────────────────────────────── */
.bth { --static:0; --deep:var(--team, #E8400C); --tc:var(--team, #E8400C); --on-tc:#fff;
  position:relative; isolation:isolate; overflow:hidden; color:#fff; user-select:none; -webkit-user-select:none;
  background:color-mix(in oklab, var(--deep) 58%, var(--booth-night)); transition:background .6s var(--ease-out); }
.bth[hidden] { display:none; }
.bth::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--deep) 40%, transparent), transparent 60%),
             linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.bth-photo { position:absolute; inset:0 0 0 38%; z-index:-3; background:center/cover no-repeat; transform:scale(1.18);
  filter:grayscale(1) contrast(1.1) blur(3px); mix-blend-mode:luminosity; opacity:.34;
  -webkit-mask:radial-gradient(70% 80% at 65% 45%, #000 30%, transparent 80%); mask:radial-gradient(70% 80% at 65% 45%, #000 30%, transparent 80%); }
/* a fixed bleed, not a %: with inset:-50% the layer's top moved every time the
   band grew (fonts, the score slots), and at 2x the band's size that counted
   as a ~0.9 layout shift on the team pages */
.bth-grain { position:absolute; inset:-120px; z-index:-1; pointer-events:none; opacity:calc(.07 + var(--static) * .5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:bth-hiss .5s steps(4) infinite; }
@keyframes bth-hiss { 0%{transform:translate(0,0)} 25%{transform:translate(-60px,40px)} 50%{transform:translate(50px,-30px)} 75%{transform:translate(-30px,-60px)} 100%{transform:translate(0,0)} }
.bth-in { width:100%; max-width:var(--maxw, 1320px); margin:0 auto; padding:0 var(--edge, clamp(16px,4vw,44px)); }

/* the dial faceplate */
.bth-tuner { position:relative; margin-top:18px; border-radius:14px; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4), 0 20px 40px -24px rgba(0,0,0,.8); }
.bth-head { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 18px 0;
  font:500 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#A3ADBD; }
.bth-head strong { color:#fff; font-weight:600; }
.bth-sig { display:inline-flex; align-items:flex-end; gap:2px; height:12px; margin-right:8px; vertical-align:-1px; }
.bth-sig i { width:3px; background:rgba(255,255,255,.2); border-radius:1px; transition:background .15s; }
.bth-sig i:nth-child(1){height:4px} .bth-sig i:nth-child(2){height:7px} .bth-sig i:nth-child(3){height:10px} .bth-sig i:nth-child(4){height:12px}
.bth-sig i.lit { background:var(--ember-soft); }
.bth-dial { position:relative; }
.bth-band { position:relative; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; height:120px; cursor:grab; outline:none; }
.bth-band:active { cursor:grabbing; }
.bth-band::-webkit-scrollbar { display:none; }
.bth-band:focus-visible { box-shadow:inset 0 0 0 2px var(--ember-soft); border-radius:0 0 14px 14px; }
.bth-scale { position:relative; height:100%; }
.bth-ticks { position:absolute; left:0; bottom:24px; height:28px; overflow:visible; }
.bth-ticks line { stroke:rgba(255,255,255,.2); stroke-width:1; }
.bth-ticks line.mj { stroke:rgba(255,255,255,.5); }
.bth-mi { position:absolute; bottom:6px; font:400 11px/1 var(--mono); color:#A3ADBD; transform:translateX(-50%); white-space:nowrap; }
.bth-st { position:absolute; top:10px; transform:translateX(-50%); scroll-snap-align:center; text-align:center; padding:4px 10px; border-radius:8px;
  white-space:nowrap; background:none; border:0; color:inherit; font:inherit; cursor:pointer; transition:background .2s; }
.bth-st .c { display:flex; align-items:center; gap:6px; justify-content:center; font:700 15px/1.1 var(--disp); letter-spacing:.04em; text-transform:uppercase; color:#A3ADBD; transition:color .2s; }
.bth-st .c i { width:7px; height:7px; border-radius:50%; background:var(--dot); opacity:.6; transition:opacity .2s, transform .2s; }
.bth-st .a { display:block; font:400 11px/1.5 var(--mono); color:#A3ADBD; transition:color .2s; }
.bth-st.on .c { color:#fff; }
.bth-st.on .c i { opacity:1; transform:scale(1.3); }
.bth-st.on .a { color:var(--ember-soft); }
.bth-st[data-k]:hover { background:rgba(255,255,255,.06); }
.bth-st[data-k]:hover .c { color:#fff; }
.bth-st.home { cursor:default; scroll-snap-align:none; }
.bth-st.home .c { color:#D5DCE6; }
.bth-needle { position:absolute; left:50%; top:66px; bottom:0; width:2px; margin-left:-1px; background:var(--ember); pointer-events:none; z-index:2; }
.bth-needle::before { content:""; position:absolute; left:50%; top:-6px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.bth-needle.flash { animation:bth-flash .45s var(--ease-out); }
@keyframes bth-flash { 0%{transform:scaleY(.55);transform-origin:bottom} 100%{transform:scaleY(1);transform-origin:bottom} }
.bth-fade { position:absolute; top:0; bottom:0; width:10%; pointer-events:none; z-index:1; }
.bth-fade.l { left:0; border-radius:14px 0 0 14px; background:linear-gradient(90deg, rgba(0,0,0,.55), transparent); }
.bth-fade.r { right:0; border-radius:0 14px 14px 0; background:linear-gradient(-90deg, rgba(0,0,0,.55), transparent); }

/* the readout under the dial */
.bth-hero { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px 48px; align-items:end; padding:40px 0 36px; transition:opacity .24s ease, transform .24s var(--ease-out); }
.bth-hero.out { opacity:0; transform:translateY(8px); }
.bth-hero.solo { grid-template-columns:minmax(0,1fr); }
.bth-eye { font:500 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bth-onair { display:inline-flex; align-items:center; gap:7px; padding:5px 9px 5px 8px; border-radius:4px; background:var(--ember); color:#fff; font-weight:600; letter-spacing:.16em; }
.bth-onair::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.bth-city { font:800 clamp(64px,13vw,204px)/.82 var(--disp); letter-spacing:-.025em; margin:18px 0 0; text-transform:uppercase; overflow-wrap:normal; word-break:normal; hyphens:none; text-wrap:balance; min-width:0;
  filter:blur(calc(var(--static) * 10px)); opacity:calc(1 - var(--static) * .55); transition:filter .12s, opacity .12s; }
.bth-city.long { font-size:clamp(48px,8.5vw,128px); }
.bth-dist { display:inline-flex; align-items:center; gap:12px; margin-top:14px; font:800 clamp(24px,3.4vw,46px)/1 var(--disp); letter-spacing:.01em; text-transform:uppercase; color:color-mix(in oklab, var(--tc) 35%, #fff); }
.bth-dist::before { content:""; width:clamp(24px,3vw,40px); height:3px; background:var(--tc); }
.bth-clocks { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0; }
.bth-clk { display:inline-flex; align-items:baseline; gap:10px; padding:9px 12px; border-radius:8px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.bth-clk span { font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.bth-clk b { font:600 17px/1 var(--mono); font-variant-numeric:tabular-nums; }
.bth-line { margin:14px 0 0; font:400 15px/1.5 var(--body); color:rgba(255,255,255,.82); max-width:52ch; text-wrap:pretty; }
.bth-line strong { color:#fff; font-weight:600; }
.bth-cta { display:inline-flex; align-items:center; gap:10px; margin-top:22px; height:46px; padding:0 20px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:var(--booth-night); font:600 15px var(--body); text-decoration:none; transition:transform .15s var(--ease-out); }
.bth-cta:active { transform:scale(.97); }

/* scoreboard */
.bth-board { border-radius:16px; padding:18px; background:rgba(0,0,0,.42); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; text-decoration:none; display:block; }
.bth-board .when { font:500 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.bth-match { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:14px 0; }
.bth-tm { text-align:center; min-width:0; }
.bth-tm b { display:block; font:800 40px/1 var(--disp); letter-spacing:.01em; }
.bth-tm span { display:block; font:400 11px/1.4 var(--mono); color:rgba(255,255,255,.7); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bth-tm.us b { color:color-mix(in oklab, var(--tc) 55%, #fff); }
.bth-tm .sc { font:600 34px/1 var(--mono); font-variant-numeric:tabular-nums; margin-top:8px; display:block; color:#fff; }
.bth-match .v { font:500 11px/1 var(--mono); color:rgba(255,255,255,.7); text-transform:uppercase; }
.bth-cd { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.bth-cd div { border-radius:8px; background:rgba(255,255,255,.07); padding:10px 4px 8px; text-align:center; position:relative; overflow:hidden; }
.bth-cd div::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.45); }
.bth-cd b { display:block; font:600 30px/1 var(--mono); font-variant-numeric:tabular-nums; }
.bth-cd span { display:block; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:6px; }
.bth-board .meta { font:400 12.5px/1.4 var(--body); color:rgba(255,255,255,.75); margin-top:12px; display:flex; justify-content:space-between; gap:8px; }

/* the hometown outlets, a row the reader scrolls themselves */
.bth-outlets { border-top:1px solid rgba(255,255,255,.12); overflow-x:auto; scrollbar-width:none; white-space:nowrap;
  font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75);
  -webkit-mask:linear-gradient(90deg, #000 92%, transparent); mask:linear-gradient(90deg, #000 92%, transparent); }
.bth-outlets::-webkit-scrollbar { display:none; }
.bth-outlets > div { display:inline-flex; align-items:center; gap:22px; padding:15px var(--edge, clamp(16px,4vw,44px)); }
.bth-outlets span { display:inline-flex; align-items:center; gap:22px; }
.bth-outlets em { font-style:normal; color:#fff; }
.bth-outlets i { width:5px; height:5px; background:var(--tc); transform:rotate(45deg); }
.bth-edge { height:6px; background:linear-gradient(90deg, var(--tc), color-mix(in oklab, var(--tc) 40%, var(--ember))); }

@media (max-width:980px) {
  .bth-hero { grid-template-columns:minmax(0,1fr); }
  .bth-board { max-width:440px; }
  .bth-photo { inset:0 0 30% 0; -webkit-mask:linear-gradient(180deg, #000 30%, transparent); mask:linear-gradient(180deg, #000 30%, transparent); }
}
@media (max-width:640px) {
  .bth-tuner { margin-top:12px; }
  .bth-head { padding:10px 14px 0; }
  .bth-head .who { display:none; }
  .bth-hero { padding:26px 0 26px; }
}
@media (prefers-reduced-motion:reduce) {
  .bth-grain, .bth-needle.flash { animation:none; }
  .bth-hero, .bth-city, .bth-st .c, .bth-st .a { transition:none; }
}