/* =========================================================
   TrAz, personal site. Tokens first (palette B "Iridescent" by default, palette A "Bayrak" with ?palette=a).
   ========================================================= */
:root[data-palette="a"] {
  --paper: #F4F0EA;
  --paper-2: #E8E1D7;
  --ink: #0D0C0B;
  --dark: #171513;
  --dark-2: #221E1B;
  --accent: #E30A17;
  --accent-deep: #6E0911;
  --hot: #FF5A36;
  --glow: #F3D9B1;
  --gold: #E2B35B;
  --muted: #8F877D;
  /* derived, contrast-checked */
  --accent-ink: #C8091A;       /* crimson as text on paper: 5.3:1 */
  --muted-ink: #645D55;        /* small muted text on paper / paper-2 */
  --ink-2: #2B2724;
  --btn2-ink: var(--accent-ink);
  --focus: var(--accent);
  --focus-dark: var(--glow);
  /* palette colours for the 3D logo studio (logo3d.js) and the photo grade */
  --sh-deep: #2A0407;
  --sh-1: var(--accent);
  --sh-2: var(--hot);
  --sh-3: var(--glow);
  --sh-4: #8A0D16;
  /* the 3D logo pearl */
  --logo-pearl: #FFF1E2;
  --logo-metal: .7;
  --footer-grad:
    radial-gradient(55% 70% at 102% 104%, var(--gold) 0%, transparent 70%),
    radial-gradient(60% 75% at 88% 62%, var(--hot) 0%, transparent 72%),
    radial-gradient(70% 60% at 12% 8%, #8a0d16 0%, transparent 70%),
    linear-gradient(165deg, var(--accent-deep) 0%, var(--accent) 48%, var(--accent) 100%);
  --iri: linear-gradient(100deg, var(--hot) 0%, var(--gold) 45%, var(--glow) 72%, #fff3e0 100%);
}
/* B is the default (also for no-JS): plain :root, outranked by [data-palette="a"] */
:root,
:root[data-palette="b"] {
  --paper: #F2F2F7;
  --paper-2: #E4E4EF;
  --ink: #0A0A12;
  --dark: #12121C;
  --dark-2: #1B1B2A;
  --accent: #1A1747;
  --accent-deep: #0E0C2B;
  --hot: #FF4FD2;
  --glow: #35F0E0;
  --gold: #8A6CFF;
  --muted: #8A8AA0;
  --accent-ink: #1A1747;
  --muted-ink: #5A5A70;
  --ink-2: #24243A;
  --btn2-ink: var(--accent);
  --focus: #6B4FE6;
  --focus-dark: var(--glow);
  --sh-deep: #0B0A24;
  --sh-1: var(--gold);
  --sh-2: var(--hot);
  --sh-3: var(--glow);
  --sh-4: #4A35B8;
  --logo-pearl: #DCD8FF;
  --logo-metal: 1;
  --footer-grad:
    radial-gradient(50% 60% at 104% 106%, var(--glow) 0%, transparent 70%),
    radial-gradient(55% 70% at 84% 70%, var(--hot) 0%, transparent 72%),
    radial-gradient(70% 80% at 30% 45%, #4a35b8 0%, transparent 75%),
    linear-gradient(165deg, var(--accent-deep) 0%, var(--accent) 60%, #2a1f75 100%);
  --iri: linear-gradient(100deg, var(--hot) 0%, var(--gold) 38%, var(--glow) 78%, #d9fffb 100%);
}
:root {
  /* LED accent tokens (--led, --led-b, --led-deep, --led-grad, --led-line): see the LED block at the end */
  --radius: 16px;
  --inset: 8px;
  --gutter: clamp(18px, 4vw, 40px);
  --gl: max(var(--gutter), env(safe-area-inset-left));
  --gr: max(var(--gutter), env(safe-area-inset-right));
  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-body: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --ease-io: cubic-bezier(.625, .05, 0, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
img, canvas { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } /* no drag, no iOS "save image" sheet */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .roots :focus-visible, .wz_card :focus-visible, .music :focus-visible,
.setup :focus-visible, .footer :focus-visible, .nav :focus-visible, .dlg :focus-visible { outline-color: var(--focus-dark); }

.mono { font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.container { width: 100%; max-width: 1680px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.section { position: relative; margin: var(--inset); border-radius: var(--radius); }
.is-loading .hero_inner, .is-loading .nav, .is-loading .hero_glass { visibility: hidden; }

.split-mask { overflow: clip; padding-top: .18em; margin-top: -.18em; padding-bottom: .05em; margin-bottom: -.05em; }
/* SplitText line masks: room above for accents (É, İ) without changing layout */
.sl-mask { padding-top: .18em; margin-top: -.18em; padding-bottom: .05em; margin-bottom: -.05em; }
/* the masks of a split element are flex items: their margins never collapse, so each one nets out to zero and a split
   block keeps the exact height of its text (stacked block masks gained .05em per line, and the hero jumped on revert) */
[class]:has(> .sl-mask) { display: flex; flex-direction: column; }
p { text-wrap: pretty; }
.has-dlg, .has-dlg body { overflow: hidden; }
.big-h {
  font: 900 clamp(60px, 10.4vw, 176px)/.84 var(--f-display);
  letter-spacing: 0; text-transform: uppercase;
}
.is-muted { color: var(--muted); }
/* explicit display lines; a line whose capitals carry accents gets room above (leading is .84) */
.hl { display: block; }
.hl--acc { padding-top: .16em; }
.nn { display: inline-block; width: .2em; } /* the narrow no-break space of 1 946: display fonts barely draw it */
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Tones (cards, covers): every pairing passes AA ---------- */
.tone-accent { --t-bg: var(--accent); --t-fg: #fff; --t-hi: var(--glow); }
.tone-dark   { --t-bg: var(--dark); --t-fg: var(--paper); --t-hi: var(--hot); }
.tone-dark2  { --t-bg: var(--dark-2); --t-fg: var(--paper); --t-hi: var(--gold); }
.tone-deep   { --t-bg: var(--accent-deep); --t-fg: #fff; --t-hi: var(--glow); }
.tone-hot    { --t-bg: var(--hot); --t-fg: var(--ink); --t-hi: var(--ink); }
.tone-glow   { --t-bg: var(--glow); --t-fg: var(--ink); --t-hi: var(--accent); }
.tone-gold   { --t-bg: var(--gold); --t-fg: var(--ink); --t-hi: var(--ink); }

/* subtle SVG patterns, painted in the tone highlight through a mask */
.pat {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--t-hi, currentColor); opacity: .2;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.pat-dots  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><circle cx='3' cy='3' r='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><circle cx='3' cy='3' r='1.5'/></svg>"); }
.pat-diag  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M0 12 12 0M-3 3 3 -3M9 15 15 9' stroke='black' stroke-width='1.4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M0 12 12 0M-3 3 3 -3M9 15 15 9' stroke='black' stroke-width='1.4'/></svg>"); }
.pat-rings { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='black' stroke-width='1.3'><circle cx='200' cy='200' r='24'/><circle cx='200' cy='200' r='48'/><circle cx='200' cy='200' r='72'/><circle cx='200' cy='200' r='96'/><circle cx='200' cy='200' r='120'/><circle cx='200' cy='200' r='144'/><circle cx='200' cy='200' r='168'/><circle cx='200' cy='200' r='192'/><circle cx='200' cy='200' r='216'/><circle cx='200' cy='200' r='240'/><circle cx='200' cy='200' r='264'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='black' stroke-width='1.3'><circle cx='200' cy='200' r='24'/><circle cx='200' cy='200' r='48'/><circle cx='200' cy='200' r='72'/><circle cx='200' cy='200' r='96'/><circle cx='200' cy='200' r='120'/><circle cx='200' cy='200' r='144'/><circle cx='200' cy='200' r='168'/><circle cx='200' cy='200' r='192'/><circle cx='200' cy='200' r='216'/><circle cx='200' cy='200' r='240'/><circle cx='200' cy='200' r='264'/></g></svg>"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pat-grid  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 .5H.5V22' fill='none' stroke='black' stroke-width='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 .5H.5V22' fill='none' stroke='black' stroke-width='1'/></svg>"); }
.pat-chev  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14'><path d='M0 11 12 3 24 11' fill='none' stroke='black' stroke-width='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14'><path d='M0 11 12 3 24 11' fill='none' stroke='black' stroke-width='1.5'/></svg>"); }
.pat-lines { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14'><path d='M0 3.5H38M46 10.5H64M0 10.5H20' stroke='black' stroke-width='1.6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14'><path d='M0 3.5H38M46 10.5H64M0 10.5H20' stroke='black' stroke-width='1.6'/></svg>"); }
.pat-cross { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11 7v8M7 11h8' stroke='black' stroke-width='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11 7v8M7 11h8' stroke='black' stroke-width='1.5'/></svg>"); }

/* the mark */
.mark { fill: currentColor; }
.mark .mark_bar { fill: var(--mark-bar, currentColor); }

/* pills */
.pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  border-radius: 6px; white-space: nowrap;
  font: 500 11px/1 var(--f-mono); letter-spacing: .03em; text-transform: uppercase;
  color: var(--t-fg, #fff);
  background: color-mix(in srgb, var(--t-fg, #fff) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-fg, #fff) 22%, transparent);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; isolation: isolate;
}
.btn_label { position: relative; z-index: 1; display: inline-block; min-width: 1ch; }
.btn_bg {
  position: absolute; inset: 0 -7px; z-index: 0;
  border-radius: 4px 8px 4px 8px;
  transform: skewX(-14deg);
  transition: transform .8s var(--ease-out);
}
.btn:hover .btn_bg { transform: skewX(-14deg) scale(.94); }
.btn--primary { color: var(--btn-ink); }
.btn--primary .btn_bg { background: var(--led-grad); }
.btn--light { color: var(--btn2-ink); }
.btn--light .btn_bg { background: var(--paper); }
.btn--nav { height: 36px; padding: 0 14px; margin-left: 10px; font-size: 12px; }


/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; z-index: 50; top: calc(16px + env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
}
.nav { --g-tint: 14, 14, 24; --g-a: .32; --g-a-panel: .5; --g-rim: .5; --g-ink: #fff; }
.nav[data-tone="light"] { --g-tint: 250, 250, 255; --g-a: .5; --g-a-panel: .68; --g-rim: .95; --g-ink: var(--ink); }
.nav_container { position: relative; width: min(880px, calc(100% - 40px)); pointer-events: auto; color: var(--g-ink); transition: color .45s var(--ease-out); }
.nav_bg {
  position: absolute; inset: 0 -9px; margin: 0 auto;
  border-radius: 8px 16px 8px 16px;
  transform: skewX(-12deg);
  /* liquid glass: a clear tint (dark over dark sections, light over light ones, see main.js), a strong blur and
     saturation, a bright rim on top, a soft inner glow below and, in Chromium, a gentle liquid refraction (#lg-refract) */
  background-color: rgba(var(--g-tint), var(--g-a));
  background-image: radial-gradient(120% 160% at 10% -30%, rgba(255,255,255,.34), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 44%, rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(12px) saturate(1.9) brightness(1.06);
  backdrop-filter: blur(12px) saturate(1.9) brightness(1.06);
  backdrop-filter: url(#lg-refract) blur(10px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--g-rim)), inset 0 -1px 0 rgba(255,255,255,.16),
    inset 1px 0 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(255,255,255,.1),
    inset 0 -16px 26px -20px rgba(255,255,255,.6), 0 20px 44px -24px rgba(0,0,0,.45);
  transition: background-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.nav[data-tone="light"] .nav_burger { color: var(--paper); }
.nav[data-tone="light"] .nav_burger .btn_bg { background: var(--ink); }
.nav_main {
  position: relative; height: 64px; padding: 0 26px 0 30px;
  display: flex; align-items: center; gap: 18px;
}
.nav_brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.brand_mark { width: 24px; height: 24px; --mark-bar: var(--led); }
.brand_word { font: 900 28px/1 var(--f-display); letter-spacing: .01em; padding-top: 1px; }
.nav_links { display: flex; align-items: center; gap: 20px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; }
.nav_links > a:not(.btn) { position: relative; padding: 8px 0; }
.nav_links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--led); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.nav_links > a[aria-current="true"]::after, .nav_links > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav_lang { display: flex; align-items: center; gap: 2px; font: 500 11px/1 var(--f-mono); letter-spacing: .04em; }
.lang_btn { position: relative; padding: 8px 5px; opacity: .6; transition: opacity .3s; }
.lang_btn.is-current { opacity: 1; }
.lang_btn.is-current::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px; height: 1px; background: currentColor; }
.lang_btn:not([aria-disabled]):hover { opacity: 1; }
.lang_btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.lang_btn[data-soon]::before {
  content: attr(data-soon); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  padding: 6px 8px; border-radius: 6px; background: var(--paper); color: var(--ink); white-space: nowrap;
  font: 500 10px/1 var(--f-mono); text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .25s, transform .4s var(--ease-out);
}
.lang_btn[data-soon]:hover::before, .lang_btn[data-soon]:focus-visible::before, .lang_btn[data-soon].show-soon::before { opacity: 1; transform: translate(-50%, 0); }
.nav_burger { display: none; position: relative; width: 50px; height: 42px; color: var(--ink); }
.nav_burger .btn_bg { background: var(--paper); inset: 0; }
.burger_lines { position: relative; z-index: 1; display: grid; gap: 4px; width: 18px; margin: 0 auto; }
.burger_lines i { display: block; height: 2px; background: currentColor; transition: transform .5s var(--ease-out), opacity .3s; }
.nav_burger.is-open .burger_lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav_burger.is-open .burger_lines i:nth-child(2) { opacity: 0; }
.nav_burger.is-open .burger_lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav_progress { position: absolute; left: 30px; right: 26px; bottom: 0; height: 2px; overflow: hidden; }
.nav_progress-line { width: 100%; height: 100%; background: var(--led-grad); transform: scaleX(0); transform-origin: left; }
.nav_mobile { position: relative; height: 0; overflow: hidden; }
.nav_mobile-links { display: grid; gap: 2px; padding: 8px 26px 0; }
.nav_mobile-links a { display: flex; align-items: baseline; gap: 12px; font: 900 34px/1.08 var(--f-display); text-transform: uppercase; }
.nav_mobile-links a .mono { font-size: 11px; opacity: .6; }
.nav_mobile-links a[aria-current="true"] { color: var(--nav-line); }
.nav_mobile-cta { margin: 20px 26px 24px 33px; }

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  height: calc(100svh - var(--inset) * 2); min-height: 660px;
  background: var(--accent-deep); color: #fff; overflow: clip;
}
/* No loading screen: the first paint already shows the scene's own colours (the same gradient bg-ref.js falls back
   to without WebGL), the shader fades in over it as soon as it has drawn, and the intro plays on top. */
.hero_bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: radial-gradient(31% 50% at 33% 76%, #7b3dff 55%, transparent 100%), radial-gradient(31% 50% at 90% 57%, #22e3a0 55%, transparent 100%), linear-gradient(118deg, #dde6ff 33%, #3d5bff 67%); }
.is-loading .hero_bg { transform: scale(1.4); }
.hero_canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.hero_canvas.is-ready { opacity: 1; }
.is-rm .hero_canvas { transition: none; }
.hero_grain, .footer_bg .grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>") 0 0 / 240px 240px;
  mix-blend-mode: overlay; opacity: .13;
}
.hero_inner { position: relative; height: 100%; padding: 116px var(--gr) 40px var(--gl); }
.hero_h1 {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  font: 900 clamp(64px, 12.2vw, 220px)/.84 var(--f-display);
  letter-spacing: 0; text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0,0,0,.12);
}
.hero_heading { display: block; }
.hero_heading.is-last { align-self: flex-end; text-align: left; }
.hero_meter { position: absolute; left: 0; top: 0; display: block; visibility: hidden; white-space: nowrap; pointer-events: none; } /* fitHero() measures the copy */
/* a hero line whose capitals carry marks (KENDİ SEÇİMİM) gets the room above as leading, so a phone that wraps it keeps
   the dots of every row clear of the row above (same .16em above the first row as .hl--acc everywhere else) */
.hero .hl--acc { padding-top: .08em; line-height: 1; }
.hero_p-wrap {
  position: absolute; z-index: 2; left: var(--gl); bottom: 40px; width: min(410px, 31%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
}
.hero_p { font-size: 16px; line-height: 1.55; font-weight: 500; text-shadow: 0 1px 18px rgba(0,0,0,.2); }
.hero_p-wrap .btn { margin-left: 7px; }

/* live Discord card: fixed size, every state shares the same tile + text layout (no layout shift) */
.live {
  --tile: 52px;
  position: absolute; z-index: 2; top: 116px; right: var(--gr);
  width: 360px; height: 184px; padding: 16px 18px 18px;
  display: grid; grid-template-rows: auto 1fr; gap: 14px;
  color: #fff;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border-radius: 10px 18px 10px 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 30px 60px -34px rgba(0,0,0,.6);
}
.live[data-status="online"] { --st: #3BD67F; }
.live[data-status="idle"] { --st: #F5B83D; }
.live[data-status="dnd"] { --st: #FF5A64; }
.live[data-status="offline"] { --st: #A39C94; }
.live_head { display: flex; align-items: center; gap: 15px; min-width: 0; padding: 0 0 14px 3px; border-bottom: 1px solid rgba(255,255,255,.12); }
/* status ring drawn as an outline with a gap: clean on any background, nothing overlaps the photo */
.live_avatar {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.1);
  outline: 2px solid var(--st); outline-offset: 2px; transition: outline-color .5s;
}
.live_avatar-mark { width: 20px; height: 20px; color: rgba(255,255,255,.7); --mark-bar: var(--led); }
.live_avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.live_meta { min-width: 0; flex: 1; display: grid; gap: 5px; }
.live_label { font-size: 11px; color: rgba(255,255,255,.72); }
.live_status { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.2; }
.live_status-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live_dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st); transition: background .5s; }
.live_dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--st); animation: beacon 2.4s var(--ease-out) infinite; }
.live[data-state="loading"] .live_dot::after, .live[data-state="error"] .live_dot::after, .live[data-status="offline"] .live_dot::after { animation: none; opacity: 0; }
@keyframes beacon { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.live_body { position: relative; min-height: 0; }
.live_view { position: absolute; inset: 0; display: none; align-items: center; gap: 14px; min-width: 0; }
.live[data-state="loading"] .live_view--loading,
.live[data-state="idle"] .live_view--idle,
.live[data-state="error"] .live_view--error,
.live[data-state="game"] .live_view--game,
.live[data-state="spotify"] .live_view--spotify { display: flex; }
.live_tile {
  position: relative; flex: none; width: var(--tile); height: var(--tile); border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.live_tile .ico--pad { width: 26px; height: 26px; }
.live_tile-mark { width: 22px; height: 22px; color: rgba(255,255,255,.5); --mark-bar: var(--led); }
.live_tile--art img { width: 100%; height: 100%; object-fit: cover; }
.live_text { min-width: 0; flex: 1; display: grid; gap: 5px; }
.live_kicker { font-size: 11px; color: rgba(255,255,255,.72); }
.live_line { font-size: 15px; font-weight: 600; line-height: 1.3; }
.live_view--error .live_line { color: rgba(255,255,255,.82); }
.live_game {
  font: 900 26px/.96 var(--f-display); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .12em 0 .02em; margin: -.12em 0 -.02em;
}
.live_since { font-size: 11px; color: var(--glow); }
.live_view--spotify { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
.live_row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.live_song { font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live_artist { margin-top: -2px; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live_progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.live_bar { position: relative; grid-column: 2; grid-row: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.live_bar i { position: absolute; inset: 0; background: var(--led-grad); transform: scaleX(0); transform-origin: left; }
.live_times { display: contents; font-size: 10px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.live_t0 { grid-column: 1; grid-row: 1; min-width: 4ch; }
.live_t1 { grid-column: 3; grid-row: 1; min-width: 4ch; text-align: right; }
.skel { display: block; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.08) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.live_tile.skel { box-shadow: none; border-radius: 8px; }
.skel--a { width: 38%; height: 9px; }
.skel--b { width: 80%; height: 15px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* 3D logo hosts (logo3d.js): the canvas fades in on its first frame; the flat mark only shows if 3D fails */
.logo3d { position: absolute; pointer-events: none; }
.logo3d_canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.logo3d.is-ready .logo3d_canvas { opacity: 1; }
.logo3d_flat { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; color: var(--paper); --mark-bar: var(--led); opacity: 0; transition: opacity .8s; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.logo3d.is-flat .logo3d_flat { opacity: 1; }
.logo3d.is-flat .logo3d_canvas { display: none; }
/* desktop: large, in the open middle of the Z the two headlines draw */
.hero_logo { z-index: 0; left: 50%; top: 51%; width: min(46vh, 28vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
/* the glass mark, over the type (owner's call): bg-ref.js draws it in a transparent canvas placed on the hero canvas's
   pixel grid around the host (15 % margin), refracting the hero background. z-index 2 puts it above the headline (1)
   and, by DOM order, under the intro block and the live card (2, later in the page). The flat mark only shows if
   WebGL fails. */
.hero_glass { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; max-width: none; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.hero_glass.is-ready { opacity: 1; } /* the glass shader compiles in the background: it fades in once drawn */
.has-bgref .hero_grain, .has-bgref .footer_bg .grain { display: none; }

/* =========================================================
   2. BIO
   ========================================================= */
.bio { padding: 150px 0 96px; }
.bio_top { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 80px; }
.bio_kicker { padding-top: 10px; }
.bio_statement {
  font: 600 clamp(28px, 3.3vw, 54px)/1.1 var(--f-body); letter-spacing: -.028em;
  margin-bottom: 52px; max-width: 22em; text-wrap: pretty;
}
.bio_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; font-size: 16px; font-weight: 500; color: var(--ink-2); max-width: 820px; }
.link-out {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; padding-bottom: 7px;
  color: var(--accent-ink); box-shadow: inset 0 -1px 0 currentColor;
}
.link-out .mono { font-size: 13px; }
.link-out .ico { transition: transform .5s var(--ease-out); }
.link-out:hover .ico { transform: translate(3px, -3px); }
/* the three pillars: one tile shape, one grade (baked into the files) and one palette overlay, so they read as a family;
   a staggered row on wide screens (the middle tile lower), below that two portraits over the landscape stadium.
   The frames open on enter, the pictures drift in them (main.js). */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 36px); padding-bottom: 96px; }
.pillar:nth-child(2) { margin-top: 96px; }
/* wide screens (1200 px and up): the row sits in the text column, under the statement (the bio grid is 1fr 2fr with a 24 px gap) */
@media (min-width: 1200px) { .pillars { margin-left: calc((100% - 24px) / 3 + 24px); } }
.pillar figure { display: grid; gap: 18px; }
.pillar_media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--dark); isolation: isolate; }
.pillar_move { position: absolute; inset: -6% 0; display: block; will-change: transform; }
.pillar_img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50% 50%); transition: transform 1.4s var(--ease-out); }
.pillar:hover .pillar_img { transform: scale(1.06); }
/* palette light from the top left, the deep tone settling at the bottom: plain translucent layers, no blend mode */
.pillar_tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sh-1) 34%, transparent) 0%, transparent 52%),
    linear-gradient(0deg, color-mix(in srgb, var(--sh-deep) 58%, transparent) 0%, transparent 46%),
    color-mix(in srgb, var(--sh-4) 12%, transparent);
  transition: opacity .9s var(--ease-out);
}
.pillar:hover .pillar_tint { opacity: .4; }
.pillar_cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 7px; align-items: baseline;
  padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); transition: border-color .6s;
}
.pillar:hover .pillar_cap { border-top-color: var(--led-deep); }
.pillar_idx { font-size: 12px; color: var(--led-deep); }
.pillar_label { font: 900 clamp(30px, 2.6vw, 44px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: .005em; padding-top: .06em; }
.pillar_caption { grid-column: 2; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }

/* =========================================================
   3. DEFINE (pinned horizontal track)
   ========================================================= */
.define { overflow: clip; }
.define_inner { height: 580vh; } /* six cards, same pace as before */
.define_sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.define_heading {
  position: relative; z-index: 1; text-align: center;
  font: 900 clamp(64px, 11.6vw, 200px)/.84 var(--f-display); text-transform: uppercase;
}
.define_track {
  position: absolute; z-index: 2; top: 50%; left: 100%;
  display: flex; align-items: center; gap: 20vw;
  transform: translateY(-50%); will-change: transform;
}
.define_cta { position: absolute; z-index: 3; bottom: 6vh; left: 50%; transform: translateX(-50%); }
.define_fade { display: none; } /* phones: the cards fade into the page before they pass under "Tout voir" */
.dcard {
  position: relative; flex: none; width: 380px; height: 470px; padding: 18px 18px 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  border-radius: 14px; overflow: hidden;
  background: var(--t-bg); color: var(--t-fg);
  box-shadow: 0 34px 60px -38px rgba(0,0,0,.38);
}
.dcard.is-big { width: 440px; height: 545px; }
.dcard:nth-child(3n) { align-self: flex-start; }
.dcard:nth-child(4n) { align-self: flex-end; }
.dcard .pat { opacity: .18; -webkit-mask-size: auto; }
.dcard .pat-rings { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.dcard_top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dcard_num { font-size: 12px; padding-top: 6px; }
.dcard_num span { opacity: .55; }
.dcard_tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 78%; }
.dcard_big {
  position: relative; display: block; white-space: nowrap;
  font: 900 120px/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.005em;
  padding-top: .08em;
}
/* origins: the two codes over the country names, then where the pseudo comes from */
.dcard_mid { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.og {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: end; column-gap: .13em; row-gap: 12px;
  align-self: stretch; white-space: nowrap;
}
.og_sep { opacity: .45; }
.og_name { grid-row: 2; grid-column: 1; font: 600 16px/1.15 var(--f-body); text-transform: none; letter-spacing: -.005em; opacity: .84; padding-left: .1em; }
.og_name--az { grid-column: 3; }
.og_eq { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--t-fg, #fff) 28%, transparent); white-space: nowrap; }
.og_eq-l { font-size: 12px; opacity: .82; }
.og_eq-r { font: 900 34px/.86 var(--f-display); letter-spacing: .01em; text-transform: none; color: var(--t-hi, currentColor); padding-top: .08em; }
.dcard_bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dcard_title { font: 800 30px/.9 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.card-arrow { position: relative; width: 50px; height: 44px; display: grid; place-items: center; color: var(--t-bg, var(--ink)); flex: none; }
.card-arrow .link-bg { position: absolute; inset: 0; background: var(--t-fg, #fff); border-radius: 4px 8px; transform: skewX(-12deg); transition: transform 1s var(--ease-out); }
.card-arrow .ico { position: relative; }
.dcard:hover .link-bg { transform: skewX(-12deg) scale(.88); }

/* Photo cards: two graded pictures split by a skewed LED seam, names in display type over them.
   Panes are full-card layers clipped to their half; .ph_move carries the scroll pan, the img the hover zoom. */
.dcard--photo { background: #07070c; color: #fff; }
.dcard--photo .pill { background: rgba(6,6,14,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; }
.dcard--photo .card-arrow { color: var(--ink); }
.dcard--photo .card-arrow .link-bg { background: var(--led-grad); }
.ph { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; display: block; }
.ph_pane { position: absolute; inset: 0; overflow: hidden; isolation: isolate; display: block; }
.ph_move { position: absolute; display: block; will-change: transform; }
.ph_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.dcard:hover .ph_img { transform: scale(1.06); }
.ph_seam { position: absolute; inset: 0; background: linear-gradient(180deg, var(--led), var(--led-b)); pointer-events: none; }
.ph_shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,6,14,.62) 0%, rgba(6,6,14,0) 24%, rgba(6,6,14,0) 52%, rgba(6,6,14,.9) 100%); }
.ph_sweep { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 50%, transparent); transform: translateX(-120%) skewX(-14deg); transition: transform 1.5s var(--ease-out); } /* plain white light: "screen" drew the same and kept a blend layer on every photo card */
.dcard:hover .ph_sweep { transform: translateX(380%) skewX(-14deg); }
.ph_label { position: absolute; z-index: 1; top: 60px; padding: 6px 8px 5px; border-radius: 4px 7px; font-size: 10.5px; color: #fff; background: rgba(6,6,14,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 55%, transparent); white-space: nowrap; }
.ph_name { position: absolute; z-index: 1; font: 900 84px/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,.4); white-space: nowrap; padding-top: .08em; }


/* both photo cards: a cinematic grade baked into the files (tools/grade_define.mjs), then a palette tint.
   A plain translucent tint, no blend mode: a soft-light layer over two moving clipped panes cost 50 to 80 ms frames.
   Cars: M3 above, M4 below, split by a rising seam. */
.ph_pane { background: #050509; }
/* one tint over both panes, in the same paint order (under the seam and the shade), so the picture is unchanged.
   Inside each clipped pane it was drawn twice and the card's first raster took 60 to 80 ms; now about 40 ms, once,
   on a cold GPU shader cache only (nothing when the cache is warm). */
.ph_tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, color-mix(in srgb, var(--sh-1) 24%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--sh-3) 14%, transparent) 100%); }
.ph--cars .ph_pane--a { clip-path: polygon(0 0, 100% 0, 100% 47%, 0 59%); }
.ph--cars .ph_pane--b { clip-path: polygon(0 59%, 100% 47%, 100% 100%, 0 100%); }
.ph--cars .ph_pane--a .ph_move { top: -4%; bottom: 36%; left: -6%; right: -6%; }
.ph--cars .ph_pane--b .ph_move { top: 42%; bottom: -4%; left: -6%; right: -6%; }
.ph--cars .ph_pane--a .ph_img { object-position: 40% 60%; }
.ph--cars .ph_pane--b .ph_img { object-position: 50% 58%; }
.ph--cars .ph_seam { clip-path: polygon(0 calc(59% - 1.5px), 100% calc(47% - 1.5px), 100% calc(47% + 1.5px), 0 calc(59% + 1.5px)); }
.ph--cars .ph_label--a { left: 18px; }
.ph--cars .ph_label--b { right: 18px; top: auto; bottom: calc(53% - 40px); }
.ph--cars .ph_name--a { left: 16px; bottom: calc(41% + 14px); }
.ph--cars .ph_name--b { right: 16px; bottom: 84px; }

/* football: Real Madrid on the left, Galatasaray on the right, split by a steep seam from 60 % at the top to 42 % at the
   bottom. Each pane's picture box covers its side plus room for the scroll pan; the toning is baked into the files. */
.ph--foot { --seam-t: 60%; --seam-b: 42%; }
.ph--foot .ph_pane--a { clip-path: polygon(0 0, var(--seam-t) 0, var(--seam-b) 100%, 0 100%); }
.ph--foot .ph_pane--b { clip-path: polygon(var(--seam-t) 0, 100% 0, 100% 100%, var(--seam-b) 100%); }
.ph--foot .ph_move { top: -1%; bottom: -1%; }
.ph--foot .ph_pane--a .ph_move { left: -6%; right: 32%; }
.ph--foot .ph_pane--b .ph_move { left: 34%; right: -6%; }
.ph--foot .ph_pane--a .ph_img { object-position: 22% 50%; }
.ph--foot .ph_pane--b .ph_img { object-position: 40% 50%; }
.ph--foot .ph_seam {
  background: linear-gradient(180deg, #fff 0%, #FEBE10 50%, #FDB912 100%);
  clip-path: polygon(calc(var(--seam-t) - 1px) 0, calc(var(--seam-t) + 1px) 0, calc(var(--seam-b) + 1px) 100%, calc(var(--seam-b) - 1px) 100%);
}
/* night at the top (number) and the bottom (title), the middle left to the stadiums */
.fb_shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,4,10,.78) 0%, rgba(6,4,10,.3) 11%, rgba(6,4,10,0) 22%, rgba(6,4,10,0) 58%, rgba(6,4,10,.82) 100%); }
.fb { position: absolute; z-index: 1; display: grid; gap: 6px; color: #fff; }
.fb--rm { left: 20px; top: 66px; justify-items: start; }
.fb--gs { right: 18px; bottom: 80px; justify-items: end; text-align: right; }
.fb_ini { font: 900 104px/.8 var(--f-display); letter-spacing: -.01em; padding-top: .08em; text-shadow: 0 8px 40px rgba(6,4,10,.45); }
.fb--rm .fb_ini { color: #fff; }
.fb--gs .fb_ini { color: #FDB912; order: 3; }
.fb_rule { width: 44px; height: 3px; border-radius: 2px; margin: 4px 0 2px; }
.fb--rm .fb_rule { background: linear-gradient(90deg, #fff 0 50%, #FEBE10 50% 100%); }
.fb--gs .fb_rule { background: linear-gradient(90deg, #A90432 0 50%, #FDB912 50% 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.28); order: 2; }
.fb--gs .fb_tag { order: 1; }
/* club and ground on a small glass chip, legible over any part of the picture */
.fb_tag { display: grid; gap: 3px; padding: 7px 10px 6px; border-radius: 4px 7px; background: rgba(8,5,12,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); white-space: nowrap; }
.fb_club { font-size: 10.5px; color: #fff; }
.fb_place { font-size: 11.5px; font-weight: 500; line-height: 1.25; color: rgba(255,255,255,.8); }
.dcard--football .dcard_tags { display: none; } /* the clubs are named on the picture */

/* popup and sheet sizes */
.ph--popup .ph_name { font-size: 84px; }
.ph--popup.ph--cars .ph_name--b { bottom: 22px; }
.ph--popup .fb--rm { top: 60px; left: 24px; }
.ph--popup .fb--gs { bottom: 24px; right: 24px; }
.ph--popup .fb_ini { font-size: 112px; }
.ph--sheet .fb_shade { display: none; }
.ph--sheet .fb { gap: 0; }
.ph--sheet .fb--rm { left: 9px; top: 9px; }
.ph--sheet .fb--gs { right: 9px; bottom: 9px; }
.ph--sheet .fb_ini { font-size: clamp(30px, 3.4vw, 50px); text-shadow: 0 2px 14px rgba(6,4,10,.6); }
.ph--popup .ph_label--a { top: 64px; }
.ph--popup .ph_sweep { display: none; }
.sheet_tile--photo { padding: 0; }
.ph--sheet .ph_shade, .ph--sheet .ph_sweep { display: none; }

/* =========================================================
   4. ROOTS (regional dotted map)
   ========================================================= */
.roots { height: calc(100svh - var(--inset) * 2); min-height: 700px; background: var(--accent); color: #fff; overflow: clip; }
:root[data-palette="b"] .roots { background: var(--accent); }
.roots_head {
  position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  padding: 116px var(--gr) 0 var(--gl); pointer-events: none;
}
.roots_head::before {
  display: none; content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -30%; height: 150%;
  background: radial-gradient(30% 42% at 16% 34%, color-mix(in srgb, var(--accent) 88%, transparent) 30%, transparent 100%), radial-gradient(30% 34% at 84% 26%, color-mix(in srgb, var(--accent) 80%, transparent) 25%, transparent 100%);
}
.roots_h2 { font: 900 clamp(56px, 7.6vw, 130px)/.84 var(--f-display); text-transform: uppercase; }
.roots_side { display: grid; gap: 22px; max-width: 440px; }
.roots_p { max-width: 440px; font-size: 15px; line-height: 1.6; font-weight: 500; pointer-events: auto; }
/* the Qarapapaq flag, small, with its label and the note that it is unofficial */
.roots_flag { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.roots_flag-img { position: relative; flex: none; width: 60px; aspect-ratio: 17 / 12; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 12px 24px -12px rgba(0,0,0,.6); }
.roots_flag-img svg { width: 100%; height: 100%; }
.roots_flag-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, transparent 38%, transparent 62%, rgba(0,0,0,.14) 100%); pointer-events: none; } /* a soft light across the cloth */
.roots_flag-cap { display: grid; gap: 4px; }
.roots_flag-label { font-size: 11px; color: #fff; }
.roots_flag-note { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.74); }
.roots_area { position: absolute; inset: 0; z-index: 1; }
.roots_dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.ping { position: absolute; left: var(--x); top: var(--y); } /* no stacking context: every ping button stays above every open card */
.ping.is-open .ping_info { z-index: 4; }
.ping_mark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; pointer-events: none; }
.ping_mark i, .ping_mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.ping_mark::before { background: transparent; border: 1.5px solid #fff; animation: pingring 2.6s var(--ease-out) infinite; }
@keyframes pingring { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.ping_btn { position: absolute; left: -25px; top: -23px; width: 50px; height: 46px; display: grid; place-items: center; color: var(--ink); z-index: 5; }
.ping_btn .link-bg { position: absolute; inset: 0; background: var(--paper); border-radius: 8px 11px; transform: skewX(-12deg); transition: background .4s, transform .8s var(--ease-out); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.ping_btn:hover .link-bg { transform: skewX(-12deg) scale(.9); }
.ping_btn .ico { position: relative; transition: transform .5s var(--ease-out); }
.ping.is-open .ping_btn .link-bg { background: var(--ink); }
.ping.is-open .ping_btn { color: #fff; }
.ping.is-open .ping_btn .ico { transform: rotate(45deg); }
.ping_info {
  position: absolute; z-index: 2; left: -33px; top: -31px;
  width: 0; height: 0; overflow: hidden; border-radius: 12px; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.ping_inner { position: relative; width: 380px; height: 212px; padding: 14px 18px 16px 80px; }
/* a ping near the right edge opens its card to the left, the button in the card's top right corner */
.ping.is-flip .ping_info { left: auto; right: -33px; }
.ping.is-flip .ping_inner { padding: 14px 80px 16px 18px; }
.ping_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ping_title { font: 900 30px/.92 var(--f-display); text-transform: uppercase; padding-top: 2px; }
.ping_flag { flex: none; width: 45px; height: 30px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 6px 14px -6px rgba(0,0,0,.4); transform: rotate(3deg); }
.ping_flag svg { width: 100%; height: 100%; }
.ping_baselines { position: absolute; left: 18px; right: 18px; bottom: 30px; height: 100px; }
/* one column that never grows with its text: the fitted big line measures the card's real inner width */
.ping_baseline { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; visibility: hidden; }
.ping_baseline.is-active { visibility: visible; }
.ping_big { font: 900 72px/.84 var(--f-display); text-transform: uppercase; white-space: nowrap; color: var(--accent-ink); padding-top: .06em; }
:root[data-palette="b"] .ping_big { color: var(--accent); }
.ping_lbl { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ping_timeline { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 2px; background: rgba(0,0,0,.12); }
.ping_timeline-active { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.roots_nav { display: none; }

/* =========================================================
   5. WARZONE (sticky stacked cards)
   ========================================================= */
.wz { padding: 96px 0 48px; }
.wz_kicker { margin-bottom: 32px; }
.wz_stack { display: grid; gap: 24px; }
.wz_card {
  position: sticky; top: 104px;
  min-height: min(calc(100svh - 128px), 820px);
  padding: 40px; border-radius: var(--radius);
  background: var(--dark); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  transform-origin: 50% 0; overflow: clip;
}
#wz-2 { background: var(--accent-deep); color: #fff; }
.wz_card > .pat { --t-hi: var(--paper); opacity: .045; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 .5H.5V22' fill='none' stroke='black' stroke-width='1'/></svg>"), radial-gradient(90% 80% at 85% 10%, #000, transparent 70%); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M22 .5H.5V22' fill='none' stroke='black' stroke-width='1'/></svg>"), radial-gradient(90% 80% at 85% 10%, #000, transparent 70%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; }
.wz_top, .wz_bottom { position: relative; }
.wz_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.wz_h3 { font: 900 clamp(64px, 9.6vw, 164px)/.84 var(--f-display); text-transform: uppercase; margin-bottom: 26px; }
.wz_num { padding-top: 8px; }
.chip-iri { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; margin-left: 7px; isolation: isolate; color: var(--ink); }
.chip-iri_bg { position: absolute; inset: 0 -7px; z-index: -1; border-radius: 4px 8px 4px 8px; transform: skewX(-14deg); background: var(--iri); background-size: 160% 100%; transition: background-position 1.2s var(--ease-out); }
.chip-iri:hover .chip-iri_bg { background-position: 100% 0; }
.chip-iri_txt { font-size: 13px; letter-spacing: .08em; }
.wz_bottom { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.wz_lists { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 8px 32px; align-content: end; }
.wz_list { display: grid; align-content: start; }
.wz_list li { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 1.35; }
/* a few short facts (card 1): a 2 x 2 grid in large type */
.wz_facts { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); max-width: 760px; align-content: end; }
.wz_fact { display: grid; gap: 14px; align-content: start; padding: 20px 0 30px; border-top: 1px solid rgba(255,255,255,.16); }
.wz_fact-i { font-size: 12px; color: var(--led); }
.wz_fact-t { font: 600 clamp(22px, 2.05vw, 32px)/1.14 var(--f-body); letter-spacing: -.024em; text-wrap: balance; }
.wz_note { grid-column: 1 / -1; margin-top: 18px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--glow); }
.wz_media { position: relative; width: clamp(320px, 38vw, 580px); aspect-ratio: 580 / 420; }
.wz_img {
  position: absolute; display: block; border-radius: 10px; overflow: hidden; background: #000; cursor: zoom-in;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
}
.wz_img img { width: 100%; height: auto; transition: transform 1s var(--ease-out); }
.wz_img:hover img { transform: scale(1.03); }
.wz_img.is-back { right: 0; top: 0; width: 76%; }
.wz_img.is-front { left: 0; bottom: 0; }
.wz_media--1 .is-front { width: 40%; }
.wz_media--2 .is-front { width: 70%; }
/* wide screens: the captures fill the right half of the card instead of leaving a dead zone above them */
@media (min-width: 1200px) {
  .wz_card { --wz-media: min(44vw, 680px, calc((100svh - 260px) * 1.32)); }
  .wz_bottom { display: block; }
  .wz_lists, .wz_facts { max-width: calc(100% - var(--wz-media) - 56px); }
  .wz_media { position: absolute; right: 0; bottom: 0; width: var(--wz-media); aspect-ratio: 580 / 440; }
}

/* =========================================================
   6. STATS (counters)
   ========================================================= */
.stats { background: var(--paper-2); padding: 128px 0 110px; }
.stats_h2 { margin-bottom: 88px; }
.stats_grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.stats_label { position: sticky; top: 120px; align-self: start; color: var(--ink-2); }
.stats_list, .ms_counters { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.stat { position: relative; padding: 36px 0 44px; }
.stat_num { font: 900 clamp(92px, 10.4vw, 176px)/.8 var(--f-display); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter { display: inline-block; }
.stat_txt { max-width: 280px; margin-top: 18px; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.stat_line { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ink); opacity: .22; transform-origin: left; }

/* =========================================================
   7. MATCHES (kept matches)
   ========================================================= */
.matches { padding: 128px 0 120px; }
.matches_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 88px; }
.matches_head p { max-width: 380px; font-size: 16px; color: var(--ink-2); }
.matches_grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 5vw, 96px); row-gap: 72px; }
.match.is-offset { margin-top: 150px; }
.match_media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: var(--dark); color: #fff; cursor: zoom-in;
}
.match_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.4s var(--ease-out); }
.match_media:hover img { transform: scale(1.045); }
.match_shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,7,6,.86) 0%, rgba(8,7,6,.35) 38%, transparent 62%); }
.match_tags { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; gap: 6px; }
.match_tags .pill { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; }
.match_zoom { position: absolute; z-index: 2; top: 12px; right: 16px; width: 44px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.match_zoom::before { content: ""; position: absolute; inset: 0; background: var(--paper); border-radius: 4px 8px; transform: skewX(-12deg); transition: transform .8s var(--ease-out); }
.match_media:hover .match_zoom::before { transform: skewX(-12deg) scale(.88); }
.match_zoom .ico { position: relative; width: 16px; height: 16px; }
.match_stat { position: absolute; z-index: 2; left: 22px; bottom: 20px; right: 22px; display: flex; align-items: flex-end; gap: 14px; }
.match_num { font: 900 clamp(76px, 8.4vw, 136px)/.78 var(--f-display); }
.match_lbl { max-width: 190px; padding-bottom: 4px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.match_title { margin-top: 16px; font-size: 18px; font-weight: 600; line-height: 1.35; max-width: 520px; }

/* =========================================================
   8. JOURNEY (platform rail + games)
   ========================================================= */
.journey { background: var(--paper-2); padding: 128px 0 120px; }
.journey_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 96px; }
.journey_side { display: grid; gap: 22px; justify-items: start; max-width: 430px; }
/* the player's line, next to the heading */
.journey_player { display: flex; align-items: center; gap: 18px; font: 600 clamp(20px, 1.85vw, 28px)/1.2 var(--f-body); letter-spacing: -.022em; text-wrap: balance; }
.journey_pad { position: relative; flex: none; width: 58px; height: 50px; display: grid; place-items: center; color: var(--btn-ink); }
.journey_pad::before { content: ""; position: absolute; inset: 0; border-radius: 6px 11px; background: var(--led); transform: skewX(-12deg); }
.journey_pad .ico { position: relative; width: 28px; height: 28px; }
.journey_note { max-width: 300px; font-size: 14px; color: var(--muted-ink); }
.journey_note .mono { color: var(--accent-ink); font-size: 14px; }
.rail { position: relative; margin-bottom: 128px; }
.rail_track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.rail_fill { position: absolute; inset: 0; background: var(--led-line); transform-origin: left; }
.rail_list { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; }
.rail_node { position: relative; padding-top: 40px; display: flex; flex-direction: column; }
.rail_dot {
  position: absolute; left: 0; top: 2px; width: 22px; height: 14px; border-radius: 3px 5px;
  background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); transform: skewX(-14deg);
}
/* the "on" fill fades in with opacity only: a transition on the LED colour itself would restart on every LED step */
.rail_dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--led-line); opacity: 0; transition: opacity .5s; }
.rail_node.is-on .rail_dot::after { opacity: 1; }
.rail_when { color: var(--muted-ink); font-size: 11px; }
.rail_name { margin: 10px 0 12px; font: 900 clamp(24px, 2.05vw, 34px)/.9 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.rail_text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* the games: three columns of three on wide screens, name over its note */
.games { margin-bottom: 96px; }
.games_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.games_title { font: 900 clamp(40px, 4.4vw, 72px)/.9 var(--f-display); text-transform: uppercase; }
.games_count { color: var(--muted-ink); padding-bottom: 6px; }
.games_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.2vw, 56px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.game {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px 10px; align-items: baseline; align-content: start;
  padding: 24px 0 34px; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); transition: opacity .35s;
}
.game::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--led-line); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.games_list:hover .game { opacity: .45; }
.games_list:hover .game:hover { opacity: 1; }
.game:hover::before { transform: scaleX(1); }
.game_idx { color: var(--muted-ink); }
.game_name { font: 900 clamp(28px, 2.4vw, 40px)/.9 var(--f-display); text-transform: uppercase; padding-top: .06em; }
.game_note { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 36em; }

.journey_end { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: stretch; }
/* GTA VI: Rockstar's official key art (Jason and Lucia, the station at dusk) under the official logo. A night shade
   from the bottom left carries the type; the picture keeps its own colours. */
.wait {
  position: relative; overflow: hidden; min-height: 460px; padding: 30px 32px 32px; border-radius: var(--radius);
  background: #1d1638; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; isolation: isolate;
}
.wait_media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.wait_img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 34%; transform: scale(1.02); transition: transform 1.6s var(--ease-out); }
.wait:hover .wait_img { transform: scale(1.06); }
.wait_shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,10,38,.78) 0%, rgba(14,10,38,.42) 34%, rgba(14,10,38,0) 58%),
    linear-gradient(0deg, rgba(14,10,38,.86) 0%, rgba(14,10,38,.34) 30%, rgba(14,10,38,0) 52%),
    linear-gradient(180deg, rgba(14,10,38,.38) 0%, rgba(14,10,38,0) 22%);
}
.wait_top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.wait_kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 12px 7px; border-radius: 4px 8px; background: rgba(14,10,38,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } /* no backdrop blur: the first raster of the card stays cheap */
.wait_kicker i { width: 8px; height: 8px; border-radius: 50%; background: #FFB2E4; box-shadow: 0 0 10px #FF6FC8; }
.wait_count { font-size: 13px; padding: 8px 12px 7px; border-radius: 4px 8px; color: #1d1638; background: #fff; }
.wait_bottom { display: grid; gap: 20px; justify-items: start; }
.wait_name { width: clamp(170px, 17vw, 250px); line-height: 0; }
.wait_logo { width: 100%; height: auto; } /* the official logo carries its own dark outline; the shade does the rest */
.wait_note { font-size: 18px; font-weight: 600; max-width: 26em; text-wrap: balance; text-shadow: 0 1px 14px rgba(10,6,30,.5); }
.nfm { padding: 32px; border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; gap: 24px; }
.nfm_title { display: flex; align-items: center; gap: 10px; color: var(--muted-ink); }
.nfm_title i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.nfm_list { display: grid; gap: 22px; }
.nfm_list li { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.nfm_name { font: 900 30px/.9 var(--f-display); text-transform: uppercase; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.nfm_note { font-size: 15px; color: var(--ink-2); }
/* a single game: it takes the card's height like the GTA VI card beside it */
.nfm--one { justify-content: space-between; }
.nfm--one .nfm_list li { gap: 18px; padding-top: 0; border-top: 0; }
.nfm--one .nfm_name { font-size: clamp(52px, 5.4vw, 92px); line-height: .84; text-decoration-thickness: 4px; padding-top: .06em; }
.nfm--one .nfm_note { font-size: 17px; line-height: 1.5; max-width: 24em; }

/* =========================================================
   9. MUSIC (marquee + hover list)
   ========================================================= */
.music { background: var(--dark-2); color: var(--paper); padding: 0 0 120px; overflow: clip; }
.music_marquee { overflow: hidden; padding: 30px 0 76px; }
.music_marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.mq_unit { display: flex; align-items: center; flex: none; }
.mq_unit span { flex: none; font: 900 clamp(110px, 17vw, 300px)/.84 var(--f-display); text-transform: uppercase; }
.mq_sep { display: inline-flex; flex: none; width: clamp(54px, 7vw, 120px); margin: 0 .5em; color: var(--paper); --mark-bar: var(--led); }
.mq_sep .mark { width: 100%; height: auto; }
.music .is-muted { color: color-mix(in srgb, var(--paper) 30%, var(--dark-2)); }
@keyframes marquee { to { transform: translateX(-50%); } }
.music_grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.music_left { position: sticky; top: 120px; align-self: start; display: grid; gap: 40px; }
.music_h2 { font: 900 clamp(52px, 5.6vw, 96px)/.84 var(--f-display); text-transform: uppercase; }
.cover { position: relative; width: min(100%, 340px); aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--dark); }
/* the artwork alone, whole (square covers, contained); title and artist are in the list beside it */
.cover_tile {
  position: absolute; inset: 0; display: block;
  background: var(--t-bg); color: var(--t-fg); overflow: hidden; border-radius: inherit;
  opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease-out), transform .9s var(--ease-out); pointer-events: none;
}
.cover_tile.is-active { opacity: 1; transform: none; pointer-events: auto; }
.cover_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
a.cover_tile { background: var(--dark); }
a.cover_tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .5s; pointer-events: none; }
a.cover_tile:hover::after { box-shadow: inset 0 0 0 2px var(--led); }
:root[data-palette="b"] .music .tone-accent { --t-bg: #4B3BD1; --t-fg: #fff; --t-hi: var(--glow); }
:root[data-palette="b"] .music .tone-deep { --t-bg: #2C2276; --t-fg: #fff; --t-hi: var(--hot); }
.cover_tile .pat { opacity: .18; }
.music_sub { color: color-mix(in srgb, var(--paper) 62%, transparent); margin-bottom: 18px; }
.tracks { border-top: 1px solid rgba(255,255,255,.14); }
.track {
  display: grid; grid-template-columns: 44px 48px minmax(0, 1fr) minmax(0, auto); gap: 16px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14);
  transition: opacity .3s, padding .5s var(--ease-out); cursor: default; outline-offset: -2px;
}
.tracks:hover .track { opacity: .35; }
.track.is-active, .tracks:hover .track.is-active { opacity: 1; } /* the hovered row stays lit while the others dim */
.tracks:hover .track.is-active, .track:focus-visible { padding-left: 12px; }
.track.is-active .track_rank { color: var(--hot); }
.track_rank { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.track_art {
  position: relative; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; flex: none;
  background: var(--dark); box-shadow: 0 0 0 1px rgba(255,255,255,.1); transition: transform .6s var(--ease-out);
}
.track_art img { width: 100%; height: 100%; object-fit: cover; }
.track.is-active .track_art { box-shadow: 0 0 0 2px var(--led); }
a.track_art:hover { transform: scale(1.06); }
.track_sw { display: grid; place-items: center; background: var(--t-bg); color: var(--t-fg); font: 900 20px/1 var(--f-display); }
.music_list { position: relative; }
/* the top list's number is its play button: the number, the play mark on hover, focus and for the current title */
.track_play { position: relative; display: grid; place-items: center start; height: 44px; color: color-mix(in srgb, var(--paper) 60%, transparent); border-radius: 6px; }
.track_play .ico { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: 0; transition: opacity .25s; }
.track_play:hover .track_num, .track_play:focus-visible .track_num, .is-current .track_play .track_num { opacity: 0; }
.track_play:hover .ico, .track_play:focus-visible .ico, .is-current .track_play .ico { opacity: 1; }
.is-current .track_play, .track_play:hover { color: var(--led); }

/* the player: our bar (cover, title, controls, a seekable LED line) beside a side panel (mute, volume, Spotify link,
   time). Sound: Deezer's 30 s previews in our own <audio> (js/player.js). */
.player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 10px 12px; margin-bottom: 30px; }
.player_bar {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  height: 80px; padding: 12px 14px 12px 12px; border-radius: 10px 14px; overflow: hidden;
  background: color-mix(in srgb, var(--dark) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.player_art { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--dark-2); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.player_art img { width: 100%; height: 100%; object-fit: cover; }
.player_meta { display: grid; gap: 4px; min-width: 0; }
.player_title { font: 900 22px/.95 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .12em; margin-top: -.12em; }
.player_artist { font-size: 13px; color: color-mix(in srgb, var(--paper) 72%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player_ctrls { display: flex; align-items: center; gap: 6px; }
.player_btn { position: relative; width: 38px; height: 36px; display: grid; place-items: center; color: var(--paper); }
.player_btn::before { content: ""; position: absolute; inset: 0; border-radius: 4px 8px; background: rgba(255,255,255,.08); transform: skewX(-12deg); transition: transform .6s var(--ease-out); } /* no colour transition: the LED fill changes five times a second */
.player_btn:hover::before { background: rgba(255,255,255,.16); transform: skewX(-12deg) scale(.92); }
.player_btn .ico { position: relative; width: 16px; height: 16px; }
.player_btn--main { width: 50px; height: 44px; color: var(--btn-ink); }
.player_btn--main::before, .player_btn--main:hover::before { background: var(--led); }
.player_btn--main .ico { width: 18px; height: 18px; }
.player_btn--main .ico--pause, .player[data-playing] .player_btn--main .ico--play { display: none; }
.player[data-playing] .player_btn--main .ico--pause { display: block; }
/* the progress: a 2 px LED line along the bar's bottom edge; the range input over it is the seek control (a taller
   transparent hit area; its focus ring is drawn on the line) */
.player_line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.player_line i { position: absolute; inset: 0; background: var(--led); transform: scaleX(0); transform-origin: left; }
.player_seek { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
.player_seek:disabled { cursor: default; }
.player_line:has(.player_seek:focus-visible) { height: 4px; box-shadow: 0 0 0 2px var(--paper); }
/* side panel: same box as the bar, two rows (volume; Spotify link and time), fixed height */
.player_side {
  display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 80px; padding: 10px 14px 11px 8px; border-radius: 10px 14px;
  background: color-mix(in srgb, var(--dark) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.player_vol { display: grid; grid-template-columns: 36px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.player_mute { position: relative; width: 36px; height: 30px; display: grid; place-items: center; color: var(--paper); }
.player_mute::before { content: ""; position: absolute; inset: 0; border-radius: 4px 8px; background: rgba(255,255,255,.08); transform: skewX(-12deg); transition: transform .6s var(--ease-out); }
.player_mute:hover::before { background: rgba(255,255,255,.16); transform: skewX(-12deg) scale(.92); }
.player_mute .ico { position: relative; width: 18px; height: 18px; }
.player_mute .ico--muted, .player[data-muted] .player_mute .ico--vol { display: none; }
.player[data-muted] .player_mute .ico--muted { display: block; }
.player[data-muted] .player_mute { color: var(--led); }
.player_volval { font-size: 11px; text-align: right; color: color-mix(in srgb, var(--paper) 72%, transparent); }
/* the volume slider: a 4 px rail, the level in LED colour (--v, set by player.js), a round thumb */
.player_volume { --v: 35%; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.player_volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--led) var(--v), rgba(255,255,255,.16) var(--v)); }
.player_volume::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.player_volume::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--led); }
.player_volume::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark) 70%, transparent); transition: transform .3s var(--ease-out); }
.player_volume::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark) 70%, transparent); }
.player_volume:hover::-webkit-slider-thumb, .player_volume:active::-webkit-slider-thumb { transform: scale(1.15); }
.player_volume:focus-visible { outline: none; }
.player_volume:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--dark), 0 0 0 4px var(--paper); }
.player_volume:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--dark), 0 0 0 4px var(--paper); }
.player_info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 6px; min-width: 0; }
.player_spotify { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--paper); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--led) 70%, transparent); padding-bottom: 1px; }
.player_spotify span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player_spotify .ico { flex: none; width: 13px; height: 13px; transition: transform .5s var(--ease-out); }
.player_spotify:hover .ico { transform: translate(2px, -2px); }
.player_status { flex: none; font-size: 11px; color: color-mix(in srgb, var(--paper) 62%, transparent); white-space: nowrap; }
.player[data-state="error"] .player_status, .player[data-state="none"] .player_status { color: var(--paper); }
/* no preview for this title: Spotify is the way to listen, the link takes the LED colour */
.player[data-state="none"] .player_spotify { color: var(--led); }
.player_note { grid-column: 1 / -1; font-size: 12.5px; color: color-mix(in srgb, var(--paper) 62%, transparent); }
/* a title cued by a click (silent): our play button is the next step */
.player_btn--main::after { content: ""; position: absolute; inset: -4px; border-radius: 6px 10px; transform: skewX(-12deg); box-shadow: 0 0 0 2px var(--paper); opacity: 0; transition: opacity .4s var(--ease-out); pointer-events: none; }
.player[data-cued] .player_btn--main::after { opacity: 1; }
@media (max-width: 1199px) { .player { grid-template-columns: minmax(0, 1fr); } }
.track_title { font: 900 clamp(26px, 2.6vw, 42px)/.92 var(--f-display); text-transform: uppercase; }
.track_artist { font-size: 14px; color: color-mix(in srgb, var(--paper) 72%, transparent); text-align: right; }
.favs { margin-top: 72px; }
.favs_head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.favs_note { font-size: 14px; color: color-mix(in srgb, var(--paper) 62%, transparent); }
.favs_list { display: flex; flex-wrap: wrap; gap: 10px; }
.fav {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 16px; border-radius: 8px 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 42%, rgba(255,255,255,.12)); font-size: 15px; font-weight: 600;
  transition: background .4s;
}
.fav.has-img { padding-left: 5px; }
a.fav:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--led); }
.fav_img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--dark); }
.fav:not(:has(.fav_count)) { padding-right: 16px; }
.music_credit { margin-top: 28px; font-size: 11px; color: color-mix(in srgb, var(--paper) 55%, transparent); }
.fav_count { display: inline-flex; align-items: baseline; gap: 5px; height: 30px; padding: 0 9px; border-radius: 5px; align-items: center; background: var(--hot); color: var(--ink); font: 500 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .03em; }
.fav_count b { font: 900 17px/1 var(--f-display); }

/* "En boucle": five artists, each a photo (or four of his covers) with the name on it, his likes, his titles */
.loops { margin-top: 128px; }
.loops_head { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: end; margin-bottom: 52px; }
.loops_title { font: 900 clamp(52px, 5.6vw, 96px)/.84 var(--f-display); text-transform: uppercase; }
.loops_text { max-width: 600px; font-size: 17px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 80%, transparent); }
.loops_list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.loop { display: grid; align-content: start; gap: 16px; min-width: 0; }
.loop_photo {
  position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: var(--dark); color: #fff; box-shadow: 0 26px 50px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06);
}
.loop_photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
a.loop_photo:hover img { transform: scale(1.05); }
.loop_photo--cover img { transform: scale(1.36); transform-origin: 50% 6%; }
a.loop_photo--cover:hover img { transform: scale(1.42); }
.loop_photo--mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.loop_photo--mosaic img { position: relative; inset: auto; aspect-ratio: 1; height: auto; }
.loop_shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,6,14,.42) 0%, transparent 26%, transparent 46%, rgba(6,6,14,.9) 100%); pointer-events: none; }
.loop_idx { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 6px 8px 5px; border-radius: 4px 7px; font-size: 10.5px; background: rgba(6,6,14,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 55%, transparent); }
.loop_name { position: absolute; z-index: 2; left: 16px; right: 14px; bottom: 14px; font: 900 clamp(26px, 2.15vw, 36px)/.9 var(--f-display); text-transform: uppercase; text-wrap: balance; text-shadow: 0 4px 24px rgba(0,0,0,.4); padding-top: .1em; }
.loop_likes { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 5px; background: var(--led); color: #0A0A12; font: 500 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .03em; }
.loop_likes b { font: 900 16px/1 var(--f-display); }
.loop_tracks { display: grid; border-top: 1px solid rgba(255,255,255,.12); }
.loop_row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.loop_track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; transition: transform .5s var(--ease-out); }
.loop_track:hover { transform: translateX(4px); }
/* the cover plays the title in the player; the title links to Spotify */
.loop_art { position: relative; display: block; width: 40px; height: 40px; border-radius: 5px; overflow: hidden; background: var(--dark); box-shadow: 0 0 0 1px rgba(255,255,255,.08); color: #fff; }
.loop_art img { width: 100%; height: 100%; object-fit: cover; }
.loop_art::after { content: ""; position: absolute; inset: 0; background: rgba(6,6,14,.5); opacity: 0; transition: opacity .25s; }
.loop_art .ico { position: absolute; z-index: 1; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; transition: opacity .25s; }
.loop_play:hover::after, .loop_play:focus-visible::after, .is-current .loop_play::after { opacity: 1; }
.loop_play:hover .ico, .loop_play:focus-visible .ico, .is-current .loop_play .ico { opacity: 1; }
.loop_play:hover, .is-current .loop_play { box-shadow: 0 0 0 2px var(--led); }
.is-current .loop_t, .is-current .track_title { color: var(--led); }
.loop_t { font-size: 14px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loop_track:hover .loop_t { color: var(--led); }
.loop_y { font-size: 10px; color: color-mix(in srgb, var(--paper) 58%, transparent); }
/* below wide screens the five artists become a row you swipe, the next one peeking in */
@media (max-width: 1199px) {
  .loops_head { grid-template-columns: 1fr; gap: 20px; }
  .loops_list {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); padding: 0 var(--gr) 12px var(--gl); scroll-padding-inline: var(--gl);
  }
  .loops_list::-webkit-scrollbar { display: none; }
  .loop { flex: 0 0 min(300px, 74vw); scroll-snap-align: start; }
}

/* =========================================================
   10. MUSIC IN NUMBERS
   ========================================================= */
.mstats { background: var(--paper-2); padding: 128px 0 110px; }
.ms_h2 { margin-bottom: 88px; }
.ms_grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.ms_aside { position: sticky; top: 120px; align-self: start; display: grid; gap: 16px; max-width: 300px; }
.ms_label { color: var(--ink-2); }
.ms_source { font-size: 14px; color: var(--muted-ink); }
.ms_bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 88px; }
.ms_card { position: relative; grid-column: span 6; padding: 28px 28px 30px; border-radius: 14px; background: var(--paper); overflow: hidden; }
.ms_card--genres { grid-column: span 7; }
.ms_card--decades { grid-column: span 5; display: flex; flex-direction: column; }
.ms_card--audio, .ms_card--listen { grid-column: 1 / -1; }
.ms_title { color: var(--muted-ink); margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.ms_note { margin-top: 20px; font-size: 13px; color: var(--muted-ink); }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 42px; gap: 14px; align-items: center; }
.hbar_lbl { font-size: 14px; font-weight: 500; }
.hbar_track { position: relative; height: 14px; }
.hbar_fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--chart); border-radius: 0 4px 4px 0; transform-origin: left; }
.hbar_val, .rank_val { font: 500 12px/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.cols { flex: 1; display: flex; align-items: stretch; gap: 10px; min-height: 260px; }
.col { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 10px; min-width: 0; }
.col_bar { position: relative; display: block; border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.col_fill { position: absolute; left: 12%; right: 12%; bottom: 0; height: max(2px, calc(var(--v) * 86%)); background: var(--chart); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.col_val { position: absolute; z-index: 1; left: -6px; right: -6px; bottom: calc(max(2px, var(--v) * 86%) + 7px); text-align: center; font: 500 12px/1 var(--f-mono); }
.col_lbl { text-align: center; font-size: 11px; color: var(--muted-ink); }
.audio { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; }
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gauge { position: relative; display: grid; justify-items: center; gap: 12px; }
.gauge svg { width: min(100%, 150px); height: auto; transform: rotate(-90deg); }
.gauge_track { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 10; }
.gauge_arc { fill: none; stroke: var(--chart); stroke-width: 10; stroke-linecap: round; }
.gauge_val { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; max-width: 150px; margin: 0 auto; display: grid; place-items: center; font: 900 48px/1 var(--f-display); }
.gauge_lbl { font-size: 14px; font-weight: 600; }
.figs { display: grid; gap: 22px; padding-left: 32px; border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.fig { display: grid; gap: 6px; }
.fig_num { font: 900 clamp(72px, 7vw, 112px)/.8 var(--f-display); }
.fig_lbl { font-size: 14px; color: var(--ink-2); max-width: 260px; }
.ms_card--artists { display: flex; flex-direction: column; }
.rank { display: grid; flex: 1; grid-auto-rows: 1fr; } /* rows share the height of the records card next to it */
.rank_row { display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1fr) 30px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.rank_i { font-size: 11px; color: var(--muted-ink); }
.rank_name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank_bar { position: relative; height: 10px; }
.rank_fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--chart); border-radius: 0 4px 4px 0; transform-origin: left; }
.records { display: grid; }
.record { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.record_art { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.record_art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
a.record_art:hover img { transform: scale(1.06); }
.record_k { grid-column: 2; font-size: 11px; color: var(--muted-ink); }
.record_t { grid-column: 2; font: 900 22px/1.02 var(--f-display); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: .12em; margin-top: -.12em; }
.record_a { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.record_y { color: var(--muted-ink); }
.record_v { grid-column: 3; grid-row: 1 / span 3; align-self: center; font: 900 34px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; text-align: right; }
.record_v small { font: 500 10px/1 var(--f-mono); margin-left: 3px; color: var(--muted-ink); letter-spacing: .03em; }

/* =========================================================
   11. SETUP
   ========================================================= */
.setup { background: var(--dark); color: var(--paper); padding: 128px 0 120px; overflow: clip; }
.setup_grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.setup_head { position: sticky; top: 120px; align-self: start; display: grid; gap: 24px; justify-items: start; }
.setup_kicker { color: var(--muted); }
.setup_note { max-width: 300px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.setup_mark { width: 120px; height: 120px; margin-top: 24px; color: color-mix(in srgb, var(--paper) 10%, transparent); --mark-bar: var(--led); }
.sgroup + .sgroup { margin-top: 72px; }
.sgroup_head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; border-bottom: 2px solid var(--paper); }
.sgroup_title { font: 900 clamp(44px, 4.8vw, 80px)/.84 var(--f-display); text-transform: uppercase; }
.spec_row { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 0 17px; }
.spec_row dt { color: var(--muted); }
.spec_row dd { font: 800 clamp(22px, 2.2vw, 34px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.spec_line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.16); transform-origin: left; }

/* =========================================================
   12. NOW (rotating tabs)
   ========================================================= */
.now { padding: 128px 0 120px; }
.now_head { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 64px; }
.now_h2 { font-size: 13px; color: var(--ink-2); }
.now_tabs { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.now_tab { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 0; font-size: 13px; color: var(--muted-ink); transition: color .3s; }
.now_tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.now_tab[aria-selected="true"] { color: var(--ink); }
.now_tab[aria-selected="true"]::after { transform: scaleX(1); }
.now_tab:hover { color: var(--ink); }
.now_tab-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.now_tab[data-live="online"] .now_tab-dot { background: #1f9d58; opacity: 1; }
.now_tab[data-live="idle"] .now_tab-dot { background: #c98a12; opacity: 1; }
.now_tab[data-live="dnd"] .now_tab-dot { background: #d92b35; opacity: 1; }
.now_tab[data-live="on"] .now_tab-dot { background: var(--chart); opacity: 1; }
.now_items { position: relative; min-height: 270px; }
.now_item { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: start; visibility: hidden; }
.now_item.is-active { visibility: visible; }
.now_quote { font: 900 clamp(48px, 6vw, 104px)/.88 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.now_author { display: flex; gap: 16px; align-items: flex-start; padding-top: 8px; }
.now_thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--t-bg, var(--dark)); color: var(--t-fg, var(--paper)); }
.now_thumb .mark { width: 30px; height: 30px; color: var(--paper); --mark-bar: var(--led); }
.now_thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.now_thumb--avatar { border-radius: 50%; }
.now_thumb--cover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 14px 26px -16px rgba(0,0,0,.6); }
.now_thumb b { position: relative; font: 900 24px/1 var(--f-display); }
.now_thumb .pat { opacity: .2; }
.now_thumb--gta { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 14px 26px -16px rgba(0,0,0,.6); }
.now_who { display: grid; gap: 6px; padding-top: 6px; }
.now_name { font-size: 18px; font-weight: 600; line-height: 1.2; }
.now_role { font-size: 11px; color: var(--muted-ink); }
.now_timeline { position: relative; height: 2px; margin-top: 48px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.now_timeline-active { position: absolute; inset: 0; background: var(--led-line); transform: scaleX(0); transform-origin: left; }

/* =========================================================
   13. FOOTER
   ========================================================= */
.footer { color: #fff; overflow: clip; padding: 150px var(--inset) var(--inset); margin-bottom: calc(var(--inset) + env(safe-area-inset-bottom)); }
.footer_bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--footer-grad); }
.footer_canvas { width: 100%; height: 100%; }
.footer_cta { position: relative; z-index: 1; display: grid; justify-items: center; gap: 36px; text-align: center; padding: 0 var(--gutter) 150px; }
.footer_h2 { font: 900 clamp(64px, 10vw, 176px)/.84 var(--f-display); text-transform: uppercase; text-shadow: 0 2px 40px rgba(0,0,0,.15); }
.footer_card {
  position: relative; z-index: 1; overflow: hidden;
  min-height: 620px; border-radius: 12px; padding: 40px;
  background: color-mix(in srgb, var(--ink) 58%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; grid-template-columns: 1fr 1fr;
}
.footer_logo { position: absolute; left: 1%; bottom: -12%; width: 44%; max-width: 600px; aspect-ratio: 1; }
.footer_right { grid-column: 2; display: flex; flex-direction: column; gap: 40px; padding-left: 8px; }
.footer_links { border-top: 1px solid rgba(255,255,255,.2); }
.footer_links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 18px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.2); transition: opacity .3s, padding .6s var(--ease-out);
}
.footer_links:hover a { opacity: .45; }
.footer_links a:hover { opacity: 1; padding-left: 10px; }
.fl_label { font: 900 clamp(38px, 3.8vw, 60px)/.86 var(--f-display); text-transform: uppercase; }
.fl_handle { font-size: 12px; color: rgba(255,255,255,.78); text-transform: none; letter-spacing: .02em; }
.fl_arrow .ico { width: 20px; height: 20px; }
.footer_studio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.footer_studio .mono { font-size: 11px; color: rgba(255,255,255,.62); }
.footer_studio .veax-sign { font-size: 20px; color: #fff; }
.footer_studio a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); transition: box-shadow .3s, color .3s; }
.footer_studio a:hover, .footer_studio a:focus-visible { color: var(--led); box-shadow: inset 0 0 0 1px var(--led); }
.footer_studio .ico { width: 13px; height: 13px; }
.footer_projects { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.footer_projects .mono { color: rgba(255,255,255,.78); }
.footer_projects a { display: inline-flex; align-items: center; gap: 8px; font: 900 34px/1 var(--f-display); text-transform: uppercase; box-shadow: inset 0 -2px 0 var(--led); padding-bottom: 2px; }
.footer_legal { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; font-size: 11px; color: rgba(255,255,255,.85); }
.footer_legal .todo { color: var(--glow); }
.footer_bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); font-size: 11px; }
.veax-sign { font: 700 16px/1 "Syne", var(--f-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.88); }
.credits { font-size: 12px; color: rgba(255,255,255,.82); }
.credits_sum { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; font-size: 11px; color: rgba(255,255,255,.85); }
.credits_sum::-webkit-details-marker { display: none; }
.credits_sum .ico { width: 13px; height: 13px; transition: transform .5s var(--ease-out); }
.credits[open] .credits_sum .ico { transform: rotate(45deg); }
.credits_list { display: grid; gap: 6px; padding: 8px 0 4px 12px; border-left: 1px solid color-mix(in srgb, var(--led) 60%, transparent); line-height: 1.45; }
.credits_what { font-weight: 600; color: #fff; }
.credits_list a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.4); }
.credits_list a:hover { text-decoration-color: currentColor; }
.credits_note { color: rgba(255,255,255,.7); }
.veax-sign b { font-weight: 700; }

/* =========================================================
   DIALOGS (popup, sheet, lightbox)
   ========================================================= */
.dlg {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overscroll-behavior: contain;
}
.dlg_close {
  position: absolute; z-index: 3; top: 14px; right: 16px; width: 46px; height: 42px; display: grid; place-items: center; color: var(--paper);
}
.dlg_close::before { content: ""; position: absolute; inset: 0; border-radius: 4px 8px; background: var(--ink); transform: skewX(-12deg); transition: transform .6s var(--ease-out); }
.dlg_close:hover::before { transform: skewX(-12deg) scale(.9); }
.dlg_close .ico { position: relative; }
/* focus: a two-tone ring that follows the skewed button, readable on paper, on a coloured tile and on a photo */
.dlg_close:focus-visible { outline: 2px solid transparent; }
.dlg_close:focus-visible::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.popup .dlg_close:focus-visible::before, .lightbox .dlg_close:focus-visible::before { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--paper), 0 8px 20px -10px rgba(0,0,0,.5); }
/* the popup close sits on the coloured tile: a light button reads on every tone */
.popup .dlg_close { color: var(--ink); }
.popup .dlg_close::before { background: var(--paper); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.popup_card { position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: auto; border-radius: 20px; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.popup_media { position: relative; aspect-ratio: 4 / 3; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--t-bg); color: var(--t-fg); }
.popup_num { position: absolute; z-index: 2; top: 24px; left: 24px; }
.popup_photo { position: absolute; inset: 0; }
.popup_photo:empty { display: none; }
.popup_media--photo { aspect-ratio: 5 / 4; background: #07070c; }
.popup_media--photo .pat { display: none; }
.popup_big { position: relative; display: block; white-space: nowrap; font: 900 120px/.8 var(--f-display); text-transform: uppercase; padding-top: .08em; }
.popup_big--origin { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }
.popup_og { padding-top: .08em; }
.popup_body { padding: 24px 26px 30px; display: grid; gap: 14px; justify-items: start; }
.popup_tags { display: flex; gap: 6px; flex-wrap: wrap; }
.popup_tags .pill, .sheet_tags .pill { --t-fg: var(--ink); }
.popup_name { font: 900 46px/.86 var(--f-display); text-transform: uppercase; }
.popup_txt { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.sheet_panel { position: relative; width: min(900px, 100%); max-height: calc(100svh - 32px); overflow: auto; border-radius: 20px; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.sheet_head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 26px 20px; background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.sheet_head .dlg_close { position: relative; top: auto; right: auto; }
.sheet_title { font: 900 clamp(36px, 4vw, 56px)/.86 var(--f-display); text-transform: uppercase; }
.sheet_list { padding: 8px 26px 28px; }
.sheet_item { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.sheet_item:last-child { border-bottom: 0; }
.sheet_tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--t-bg); color: var(--t-fg); display: flex; align-items: flex-end; padding: 12px; }
.sheet_big { position: relative; display: block; width: 100%; min-width: 0; white-space: nowrap; font: 900 48px/.8 var(--f-display); text-transform: uppercase; padding-top: .08em; }
.sheet_mid { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.sheet_big.og { display: grid; row-gap: 6px; }
.sheet_mid .og_name { font-size: 11px; }
.sheet_mid .og_eq { margin-top: 10px; padding-top: 8px; gap: 6px; }
.sheet_mid .og_eq-l { font-size: 9px; }
.sheet_mid .og_eq-r { font-size: 20px; }
.sheet_body { display: grid; gap: 10px; align-content: start; }
.sheet_name { display: flex; align-items: baseline; gap: 12px; font: 900 34px/.9 var(--f-display); text-transform: uppercase; }
.sheet_name .mono { font-size: 11px; color: var(--muted-ink); }
.sheet_body p { font-size: 15px; color: var(--ink-2); }
.sheet_tags { display: flex; gap: 6px; flex-wrap: wrap; }

.lightbox { background: color-mix(in srgb, var(--ink) 88%, transparent); }
.lightbox_inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox .dlg_close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); color: var(--ink); }
.lightbox .dlg_close::before { background: var(--paper); }
.lightbox_fig { display: grid; justify-items: center; gap: 14px; max-width: min(1500px, 100%); }
.lightbox_img { max-width: 100%; max-height: calc(100svh - 130px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.lightbox_cap { max-width: 640px; text-align: center; font-size: 14px; color: rgba(255,255,255,.8); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .nav_links { gap: 14px; }
  .rail_list { gap: 14px; }
  /* keep the first headline clear of the live card on small laptops / tablets */
  .hero_h1 { font-size: max(64px, calc((100vw - 470px) / 4.95)); }
}

/* portrait tablets: the live card stays top right and the headline sizes itself beside it (fitHero), so the large
   glass mark keeps the whole open middle (under the first headline, the card covered the top of the mark) */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .hero_h1 { font-size: 11.5vw; }
  .hero_logo { left: 50%; top: 50%; width: 52vw; }
}

@media (max-width: 991px) {
  .nav_container { width: min(560px, calc(100% - 40px)); }
  .nav_links { display: none; }
  .nav_burger { display: block; }
  .bio_top, .setup_grid, .ms_grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .pillar:nth-child(2) { margin-top: 56px; }
  .pillar:nth-child(3) { grid-column: 1 / -1; }
  .pillar:nth-child(3) .pillar_media { aspect-ratio: 16 / 10; }
  .setup_head, .ms_aside { position: relative; top: 0; }
  .wz_bottom { grid-template-columns: 1fr; }
  .wz_media { width: min(100%, 560px); }
  .music_grid { grid-template-columns: 1fr; }
  .music_left { position: relative; top: 0; }
  .cover { display: none; } /* the player above the list shows the title playing */
  .ms_card, .ms_card--genres, .ms_card--decades { grid-column: 1 / -1; }
  .audio { grid-template-columns: 1fr; }
  .figs { padding-left: 0; border-left: 0; grid-template-columns: 1fr 1fr; }
  .rail_track { left: 10px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .rail_fill { transform-origin: top; }
  .rail_list { grid-template-columns: 1fr; gap: 34px; max-width: 620px; }
  .rail_node { padding: 0 0 0 46px; }
  .rail_dot { top: 1px; left: 0; }
  .rail_name { font-size: 34px; margin: 8px 0 8px; }
}

@media (max-width: 767px) {
  :root { --inset: 6px; --radius: 14px; }
  .nav { top: calc(10px + env(safe-area-inset-top)); }
  .nav_container { width: calc(100% - 26px); }
  .nav_bg { inset: 0 -4px; }
  .nav_main { height: 60px; padding: 0 12px 0 20px; gap: 10px; }
  .brand_word { font-size: 25px; }
  .nav_lang { margin-right: 4px; }
  .lang_btn { padding: 8px 4px; }
  .nav_progress { left: 20px; right: 16px; }
  .nav_mobile-links { padding: 8px 20px 0; }
  .nav_mobile-cta { margin: 18px 20px 22px 27px; }

  .hero { height: auto; min-height: calc(100svh - var(--inset) * 2); }
  /* the two headline blocks leave a fixed gap; the live card sits in it (no layout shift) */
  .hero_inner { height: auto; min-height: inherit; padding: 98px var(--gr) 26px var(--gl); display: flex; flex-direction: column; }
  /* mobile: line 1, the 3D logo in a reserved gap, line 2, then the live card, then the intro (all fixed sizes) */
  .hero_h1 { height: auto; flex: none; font-size: 17.2vw; gap: 58vw; justify-content: flex-start; }
  .hero_heading.is-last { align-self: stretch; text-align: right; } /* full width: wrapped or split, the box never moves */
  .hero_logo { left: 50%; top: calc(98px + var(--l1h, 28.9vw) + 29vw); width: 74vw; } /* centred in the gap under the first block */
  .live { --tile: 50px; position: relative; order: 1; top: auto; right: auto; flex: none; width: 100%; max-width: 420px; margin: 30px auto 0; height: 176px; padding: 14px 16px 16px; gap: 12px; }
  .live_head { padding-bottom: 12px; }
  .hero_p-wrap { position: relative; order: 2; left: auto; bottom: auto; width: 100%; margin-top: auto; padding-top: 34px; gap: 22px; }
  .hero_p { font-size: 15px; }

  .bio { padding: 104px 0 56px; }
  .bio_top { margin-bottom: 44px; gap: 18px; }
  .bio_statement { font-size: 27px; line-height: 1.14; margin-bottom: 32px; }
  .bio_cols { grid-template-columns: 1fr; gap: 16px; font-size: 15px; }
  .pillars { gap: 30px 12px; padding-bottom: 40px; }
  .pillar:nth-child(2) { margin-top: 44px; }
  .pillar figure { gap: 12px; }
  .pillar_media { border-radius: 12px; }
  .pillar_cap { column-gap: 8px; row-gap: 5px; padding-top: 10px; }
  .pillar_idx { font-size: 10px; }
  .pillar_label { font-size: 25px; }
  .pillar_caption { grid-column: 1 / -1; font-size: 13px; }

  .define_inner { height: 505vh; }
  .define_heading { font-size: 15.5vw; } /* narrower than a card: no sliver peeks out while one passes over it */
  .define_track { left: 50%; top: 100%; flex-direction: column; gap: 34vh; transform: translateX(-50%); }
  .dcard, .dcard.is-big { width: min(80vw, 330px); height: min(104vw, 420px); }
  .dcard:nth-child(3n), .dcard:nth-child(4n) { align-self: center; }
  .dcard:nth-child(odd) { margin-left: -12vw; }
  .dcard:nth-child(even) { margin-right: -12vw; }
  .dcard_title { font-size: 26px; }
  .define_cta { bottom: calc(4vh + env(safe-area-inset-bottom)); }
  .define_fade {
    display: block; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(4vh + 132px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--paper) 46%, color-mix(in srgb, var(--paper) 0%, transparent)); pointer-events: none;
  }

  /* mobile: text, then a map band, then the open card, then prev / next (all in flow) */
  .roots { height: auto; min-height: calc(100svh - var(--inset) * 2); display: flex; flex-direction: column; padding-bottom: 22px; }
  .roots_head { flex-direction: column; gap: 18px; padding-top: 98px; }
  .roots_head::before { display: none; }
  .roots_h2 { font-size: 17vw; }
  .roots_p { font-size: 14px; }
  .roots_side { gap: 0; }
  /* the flag rides beside the heading, top right */
  .roots_flag { position: absolute; top: 100px; right: var(--gr); max-width: 128px; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; }
  .roots_flag-img { width: 50px; }
  .roots_flag-label { font-size: 10px; }
  .roots_flag-note { font-size: 11px; }
  .roots_area { position: relative; inset: auto; height: 330px; margin: 6px 0 222px; }
  .roots_dots { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  .ping { position: static; }
  .ping_btn { display: none; }
  .ping_mark { left: calc(var(--x) - 5px); top: calc(var(--y) - 5px); z-index: 2; }
  .ping_info { left: var(--gl); right: var(--gr); top: calc(100% + 6px); bottom: auto; width: auto !important; }
  .ping.is-open .ping_mark i { background: var(--glow); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
  .ping_inner { width: 100%; height: 200px; padding: 14px 16px 16px 18px; }
  .roots_nav { position: relative; z-index: 4; margin: auto var(--gr) 0 var(--gl); display: flex; align-items: center; justify-content: space-between; }
  .roots_navbtn { position: relative; width: 54px; height: 46px; display: grid; place-items: center; color: #fff; }
  .roots_navbtn .link-bg { position: absolute; inset: 0; border-radius: 8px 11px; background: var(--ink); transform: skewX(-12deg); }
  .roots_navbtn .ico { position: relative; }
  .roots_count { font-size: 12px; }

  .wz { padding: 72px 0 24px; }
  .wz_card { position: relative; top: 0; padding: 26px 20px 22px; min-height: 0; gap: 32px; }
  .wz_top { flex-direction: column-reverse; gap: 16px; }
  .wz_h3 { font-size: 21vw; margin-bottom: 20px; }
  .wz_lists { grid-template-columns: 1fr; gap: 0; }
  .wz_list + .wz_list li:first-child { border-top: 1px solid rgba(255,255,255,.14); }
  .wz_list li { font-size: 15px; padding: 8px 0; }
  .wz_facts { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .wz_fact { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 0 16px; }
  .wz_fact-t { font-size: 21px; }
  .wz_media { width: 100%; }

  .stats, .mstats, .journey, .matches, .now, .setup { padding: 96px 0 80px; }
  .stats_h2, .ms_h2 { margin-bottom: 44px; }
  .big-h { font-size: 17vw; }
  .stats_grid { grid-template-columns: 1fr; }
  .stats_label, .ms_aside { position: relative; top: 0; }
  .stats_list, .ms_counters { grid-template-columns: 1fr; }
  .stat { padding: 24px 0 30px; }
  .stat_num { font-size: 26vw; }

  .matches_head { flex-direction: column; align-items: flex-start; margin-bottom: 44px; gap: 20px; }
  .matches_grid { grid-template-columns: 1fr; row-gap: 44px; }
  .match.is-offset { margin-top: 0; }
  .match_stat { left: 16px; bottom: 14px; gap: 10px; }
  .match_num { font-size: 72px; }
  .match_lbl { font-size: 13px; }
  .match_title { font-size: 16px; }

  .journey_head { flex-direction: column; align-items: flex-start; margin-bottom: 56px; gap: 20px; }
  .rail { margin-bottom: 80px; }
  .journey_player { font-size: 20px; gap: 16px; }
  .journey_pad { width: 50px; height: 44px; }
  .journey_pad .ico { width: 24px; height: 24px; }
  .games { margin-bottom: 64px; }
  .games_head { margin-bottom: 24px; }
  .games_list { grid-template-columns: 1fr; }
  .game { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; padding: 18px 0 22px; }
  .game_note { grid-column: 2; font-size: 14px; }
  .game_name { font-size: 30px; }
  .journey_end { grid-template-columns: 1fr; }
  .wait { min-height: 480px; padding: 20px 20px 24px; }
  .wait_img { object-position: 52% 30%; }
  .wait_shade { background: linear-gradient(0deg, rgba(14,10,38,.9) 0%, rgba(14,10,38,.5) 34%, rgba(14,10,38,0) 58%), linear-gradient(180deg, rgba(14,10,38,.4) 0%, rgba(14,10,38,0) 24%); }
  .wait_kicker, .wait_count { font-size: 11px; }
  .wait_name { width: 168px; }
  .wait_note { font-size: 16px; }
  .nfm { padding: 24px; }
  .nfm--one { gap: 40px; }
  .nfm--one .nfm_name { font-size: 15vw; }
  .nfm--one .nfm_note { font-size: 16px; }

  .music { padding-bottom: 80px; }
  .music_marquee { padding: 18px 0 44px; }
  .music_grid { gap: 28px; }
  .track { grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 4px 14px; padding: 14px 0; cursor: pointer; }
  .track_rank { display: none; }
  .track .track_play { display: grid; grid-column: 3; grid-row: 1 / span 2; place-items: center; width: 40px; }
  .track_play .ico { left: 12px; opacity: 1; }
  .track_play .track_num { display: none; }
  .track_art { grid-row: span 2; }
  .track_title { font-size: 25px; }
  .track_artist { text-align: left; font-size: 13px; }
  .tracks:hover .track { opacity: 1; }
  .track.is-active, .tracks:hover .track.is-active { padding-left: 0; }
  .favs { margin-top: 52px; }
  .favs_head { flex-direction: column; gap: 4px; margin-bottom: 16px; }
  .favs_head .music_sub { margin-bottom: 0; }
  .fav { height: 42px; font-size: 14px; }
  .player_bar { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 10px 10px 10px 10px; }
  .player_art { width: 48px; height: 48px; }
  .player_title { font-size: 19px; }
  .player_artist { font-size: 12px; }
  .player_ctrls { gap: 4px; }
  .player_btn { width: 32px; height: 34px; }
  .player_btn--main { width: 44px; height: 40px; }
  .player_note { font-size: 12px; }
  .loops { margin-top: 88px; }
  .loops_head { margin-bottom: 30px; }
  .loops_text { font-size: 15px; }
  .loop_name { font-size: 30px; }

  .ms_bento { margin-top: 44px; gap: 12px; }
  .ms_card { padding: 22px 18px 24px; }
  .hbar { grid-template-columns: 104px minmax(0, 1fr) 30px; gap: 10px; }
  .hbar_lbl { font-size: 13px; }
  .cols { gap: 6px; min-height: 220px; }
  .gauges { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .gauge_val { font-size: 42px; max-width: 130px; }
  .gauge svg { width: min(100%, 130px); }
  .figs { grid-template-columns: 1fr; }
  .rank_row { grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) 24px; gap: 10px; }
  .rank_name { font-size: 14px; }
  .record_t { font-size: 20px; }
  .record_v { font-size: 28px; }
  .record_v--date { width: min-content; white-space: normal; font-size: 26px; line-height: .92; } /* 4 AOÛT / 2026: the title keeps its room */

  .setup_grid { gap: 40px; }
  .setup_mark { display: none; }
  .sgroup + .sgroup { margin-top: 52px; }
  .sgroup_title { font-size: 13.5vw; } /* PÉRIPHÉRIQUES fits beside its index */
  .spec_row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .spec_row dd { font-size: 24px; }

  .now_head { margin-bottom: 40px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .now_tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; width: 100%; }
  .now_tab { justify-self: start; }
  .now_items { min-height: 320px; }
  .now_item { grid-template-columns: 1fr; gap: 28px; align-content: start; }
  .now_quote { font-size: 15vw; }

  .footer { padding-top: 112px; }
  .footer_cta { padding-bottom: 96px; gap: 28px; }
  .footer_h2 { font-size: 14vw; }
  .footer_card { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px 22px; }
  .footer_right { grid-column: 1; padding: 0 0 78vw; gap: 32px; }
  .footer_links a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; padding: 14px 0; }
  .fl_label { font-size: 42px; }
  .fl_handle { grid-row: 2; grid-column: 1; }
  .fl_arrow { grid-row: 1 / span 2; grid-column: 2; }
  .footer_logo { width: 96vw; left: -12vw; bottom: -26vw; }
  .footer_bottom { flex-direction: column; align-items: flex-start; }

  .sheet_item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .sheet_big { font-size: 30px; }
  .sheet_mid .og_name, .sheet_mid .og_eq { display: none; } /* a 96px tile holds the two codes; the text beside spells them out */
  .sheet_name { font-size: 28px; }
  .sheet_list { padding: 4px 18px 22px; }
  .sheet_head { padding: 18px 18px 16px; }
  .popup_name { font-size: 40px; }

  .dcard--photo .ph_name { font-size: 58px; }
  .ph--cars .ph_name--b { bottom: 76px; }
  .fb_ini { font-size: 84px; }
  .fb--rm { top: 62px; left: 18px; }
  .fb_tag { padding: 6px 8px 5px; }
  .fb_place { font-size: 11px; white-space: normal; max-width: 11.5em; }
  .fb--gs { bottom: 76px; right: 16px; }
  .ph--popup .fb_ini { font-size: 76px; }
  .ph--popup .fb--rm { top: 62px; left: 18px; }
  .ph--popup .fb--gs { bottom: 18px; right: 18px; }
  .ph_label { top: 54px; font-size: 10px; }
  .ph--popup .ph_name { font-size: 60px; }

  .record { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; }
  .record_art { width: 48px; height: 48px; }
}

/* =========================================================
   Reduced motion: no pinning, no marquee, no loops, everything visible
   ========================================================= */
.is-rm .define_inner { height: auto; }
.is-rm .define_sticky { position: relative; height: auto; display: block; padding: 120px 0 96px; }
.is-rm .define_heading { margin: 0 var(--gr) 56px var(--gl); }
.is-rm .define_track { position: static; transform: none; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 0 var(--gr) 0 var(--gl); }
.is-rm .dcard, .is-rm .dcard.is-big { width: auto; height: 440px; margin: 0; align-self: stretch; }
.is-rm .define_cta { position: static; transform: none; display: flex; justify-content: center; margin-top: 48px; }
.is-rm .music_marquee-track { animation: none; }
.is-rm .live_dot::after, .is-rm .skel, .is-rm .ping_mark::before { animation: none; }
.is-rm .wz_card { position: relative; top: 0; }
.is-rm .nav_progress-line { transform: none; opacity: 0; }
.is-rm .rail_node .rail_dot::after { opacity: 1; }
.is-rm .ph_sweep, .is-rm .define_fade { display: none; }
.is-rm .logo3d_canvas, .is-rm .ph_img, .is-rm .ph_pane { transition: none; }

/* Pause CSS loops that are offscreen (set by an IntersectionObserver) */
.is-paused, .is-paused *, .is-paused::before, .is-paused *::before, .is-paused::after, .is-paused *::after { animation-play-state: paused !important; }

/* =========================================================
   LED: every accent follows the same slowly turning colour (led.js), both palettes.
   --led = bright tone (fills, marks, coloured text on dark), --led-deep = deep tone (lines, charts, text on light).
   ========================================================= */
:root, :root[data-palette="a"], :root[data-palette="b"] {
  --led: rgb(91 155 255); --led-b: var(--led); --led-deep: rgb(28 84 196);
  --led-grad: var(--led);
  --led-line: var(--led-deep);
  --btn-ink: #0A0A12;
  --chart: var(--led-deep);
  --nav-line: var(--led);
}
.live_since, .wz_note, .track.is-active .track_rank, .sgroup_idx, .footer_legal .todo { color: var(--led); }
.fav_count { background: var(--led); color: #0A0A12; }
.nfm_name { text-decoration-color: var(--led-deep); }

/* listening time: two owner-given orders of magnitude */
.listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 6px; }
.listen .fig + .fig { padding-left: 32px; border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
@media (max-width: 600px) {
  .listen { grid-template-columns: 1fr; gap: 22px; }
  .listen .fig + .fig { padding-left: 0; border-left: 0; }
}


/* the march: its own dark band between the roots and Warzone, under the Azərbaycan flag's three stripes */
.hymn { padding: 116px 0 104px; background: var(--accent-deep); color: #fff; overflow: clip; }
.hymn_band { position: absolute; top: 0; left: 0; right: 0; height: 10px; display: flex; }
.hymn_band i { flex: 1; }
.hymn_band i:nth-child(1) { background: #00B5E2; }
.hymn_band i:nth-child(2) { background: #EF3340; }
.hymn_band i:nth-child(3) { background: #509E2F; }
.hymn_lyrics { margin-top: 26px; max-width: 34em; border-top: 1px solid rgba(255,255,255,.16); }
.hymn_lyrics summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; color: rgba(255,255,255,.8); }
.hymn_lyrics summary::-webkit-details-marker { display: none; }
.hymn_lyrics summary .ico { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.hymn_lyrics[open] summary .ico { transform: rotate(45deg); }
.hymn_lyrics summary:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.hymn_verses { display: grid; gap: 18px; padding-bottom: 8px; font: 500 16px/1.6 var(--f-body); color: rgba(255,255,255,.88); }
.hymn_verses p { white-space: pre-line; }
.hymn_grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px 72px; align-items: end; }
.hymn_top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; margin-bottom: 56px; }
.hymn_flags { display: block; width: min(100%, 540px); height: auto; margin: -24px 0 0 -10px; }
.hymn_nav { display: grid; gap: 16px; justify-items: end; }
.hymn_tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hymn_tab { padding: 12px 18px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); cursor: pointer; transition: color .3s; } /* no transition on the LED-tinted background: the LED hue moves every 200 ms */
.hymn_tab:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.hymn_tab[aria-selected="true"] { color: #0A0A12; background: var(--led); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--led) 80%, transparent); }
.hymn_tab:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.hymn_panel[hidden] { display: none; }
.hymn_link { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 16px 24px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: background .3s; }
.hymn_link:hover { background: rgba(255,255,255,.14); }
.hymn_link .mono { font-size: 12px; }
.hymn_link .ico { width: 16px; height: 16px; color: var(--led); }
.hymn_link:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.hymn_panel.is-in .hymn_h2 .hl { animation: hymn-line .9s var(--ease-out) both; }
.hymn_panel.is-in .hymn_h2 .hl:nth-child(2) { animation-delay: .07s; }
.hymn_panel.is-in .hymn_alt, .hymn_panel.is-in .hymn_body > * { animation: hymn-up .8s var(--ease-out) .12s both; }
.hymn_panel.is-in .hymn_body > :nth-child(2) { animation-delay: .2s; }
.hymn_panel.is-in .hymn_body > :nth-child(n+3) { animation-delay: .26s; }
@keyframes hymn-line { from { opacity: 0; transform: translateY(42%); } }
@keyframes hymn-up { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .hymn_panel.is-in .hymn_h2 .hl, .hymn_panel.is-in .hymn_alt, .hymn_panel.is-in .hymn_body > * { animation: none; } }
@media (max-width: 767px) { .hymn_top { margin-bottom: 36px; } .hymn_nav { justify-items: start; } .hymn_tabs { justify-content: flex-start; } }
.hymn_kicker { margin: 0; color: rgba(255,255,255,.62); }
.hymn_alt { margin-top: 20px; color: rgba(255,255,255,.62); }
.hymn_txt { max-width: 34em; font: 600 clamp(18px, 1.55vw, 23px)/1.45 var(--f-body); letter-spacing: -.01em; }
.hymn_play { display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; padding: 9px 24px 9px 9px; border: 0; border-radius: 999px; color: #fff; text-align: left; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); cursor: pointer; transition: background .3s; }
.hymn_play:hover { background: rgba(255,255,255,.14); }
.hymn_play:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.hymn_btn { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--ink); background: var(--led); transition: transform .4s var(--ease-out); }
.hymn_play:hover .hymn_btn { transform: scale(1.06); }
.hymn_btn .ico { width: 20px; height: 20px; }
.hymn_play .ico--pause, .hymn_play.is-playing .ico--play { display: none; }
.hymn_play.is-playing .ico--pause { display: block; }
.hymn_meta { display: grid; gap: 5px; min-width: 0; }
.hymn_meta .mono { font-size: 11px; color: rgba(255,255,255,.62); }
.hymn_track { font: 900 22px/1 var(--f-display); text-transform: uppercase; }
.hymn_note { margin-top: 14px; font-size: 10px; color: rgba(255,255,255,.45); }
@media (max-width: 991px) { .hymn { padding: 84px 0 76px; } .hymn_grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hymn_flags { margin: -12px 0 0 -6px; } }

/* the owner's scrollbar (same as veax.tr): native bar hidden, a short floating rail on the right (js/scrollbar.js) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.vbar { position: fixed; z-index: 70; top: calc(50% - 70px); right: max(14px, env(safe-area-inset-right)); width: 22px; height: 140px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .45s var(--ease-out); }
.vbar.is-on { opacity: 1; }
.vbar_rail { position: relative; width: 1px; height: 100%; background: linear-gradient(rgba(128,128,150,0), rgba(128,128,150,.55) 8%, rgba(128,128,150,.55) 92%, rgba(128,128,150,0)); }
.vbar_thumb { position: absolute; left: 50%; top: 0; width: 4px; height: 44px; border-radius: 100px; background: var(--led); transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px rgba(10,10,18,.5), 0 0 14px color-mix(in srgb, var(--led) 55%, transparent); cursor: grab; transition: width .2s var(--ease-out), height .2s var(--ease-out); }
.vbar:hover .vbar_thumb { width: 6px; }
.vbar.is-drag .vbar_thumb { width: 7px; height: 52px; cursor: grabbing; }
.vbar_pct { position: absolute; right: 16px; top: 0; padding: 4px 9px; border-radius: 100px; color: #fff; background: color-mix(in srgb, var(--ink) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.2); font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; white-space: nowrap; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); }
.vbar.is-live .vbar_pct, .vbar:hover .vbar_pct, .vbar.is-drag .vbar_pct { opacity: 1; }
@media (hover: none), (pointer: coarse) { .vbar { display: none; } }


/* the hero's Discord card only shows up with something live (a game or a song) */
.live:not([data-state="game"]):not([data-state="spotify"]) { visibility: hidden; }
.now_tab[hidden] { display: none; }
/* "Ce qui me définit": the heading sits above the passing cards, so no card ever cuts a word in two */
@media (min-width: 768px) {
  :root:not(.is-rm) .define_heading { position: absolute; top: max(96px, 11vh); left: var(--gl); text-align: left; font-size: clamp(48px, 5.4vw, 100px); }
  :root:not(.is-rm) .define_track { top: 55%; }
}
/* only running text can be selected: titles, labels, buttons, numbers, flags and cards stay out of a selection */
body { -webkit-user-select: none; user-select: none; }
p, dd, blockquote, input, textarea { -webkit-user-select: text; user-select: text; }