/* =====================================================================
   MULTI SPORT ARENA — v2  ·  design.md implementation
   Edgy · athletic · editorial.  Vermilion on cool blue-charcoal/bone.
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  /* Brand red — gradient between logo red (#EA0000) and vermilion (#FF3D2E) */
  --red-logo: #EA0000;
  --red-vermilion: #FF3D2E;
  --red: #F51E17;
  --red-bright: #FF4D3D;
  --red-deep: #B80000;
  --grad-red: linear-gradient(135deg, #EA0000 0%, #FF3D2E 100%);

  /* Ink + paper (cool blue-tinted charcoal + bone) */
  --ink: #0E1520;
  --paper: #F1ECDF;
  --muted: #6B7A90;
  --steel: #1F6FEB;

  /* Themed (light defaults) */
  --bg: var(--paper);
  --fg: var(--ink);
  --surface: #FBF8F0;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 9%, transparent);
  --grain-c: 0, 0, 0;
  /* grain color rgb */
  --grain-o: .045;
  /* grain opacity   */

  /* Type */
  --font-display: "Figtree", system-ui, sans-serif;
  --font-numeral: "Figtree", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "Chakra Petch", ui-monospace, monospace;

  --fs-hero: clamp(5rem, 16vw, 20rem);
  --fs-h2: clamp(2rem, 5vw, 4.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.9rem);
  --fs-body: clamp(1rem, 1.05vw, 1.13rem);
  --fs-label: .74rem;

  /* Motion */
  --ease-snap: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 220ms;
  --dur-mid: 420ms;
  --dur-slow: 700ms;

  /* Layout */
  --skew: -3deg;
  --shell: 1320px;
  --pad: clamp(1.1rem, 5vw, 4rem);
  --radius: 2px;
  --header-h: 76px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder so cascade order is predictable */
}

/* dark values */
:root[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--paper);
  --surface: #162230;
  --red: #F52B20;
  --grad-red: linear-gradient(135deg, #EA0000 0%, #FF5238 100%);
  --muted: #9AA7BC;
  --line: color-mix(in srgb, var(--paper) 16%, transparent);
  --line-2: color-mix(in srgb, var(--paper) 9%, transparent);
  --grain-c: 255, 255, 255;
  --grain-o: .05;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="red"]) {
    --bg: var(--ink);
    --fg: var(--paper);
    --surface: #162230;
    --red: #F52B20;
    --grad-red: linear-gradient(135deg, #EA0000 0%, #FF5238 100%);
    --muted: #9AA7BC;
    --line: color-mix(in srgb, var(--paper) 16%, transparent);
    --line-2: color-mix(in srgb, var(--paper) 9%, transparent);
    --grain-c: 255, 255, 255;
    --grain-o: .05;
  }
}

/* red values — bright vermilion takeover; text/accents use the other two
   palette colors (ink + bone) so they read on red */
:root[data-theme="red"] {
  --bg: #FF3D2E;
  /* brand bright red */
  --fg: #0E1520;
  /* ink — primary text */
  --surface: #E7301E;
  /* deeper red panels */
  --red: #F1ECDF;
  /* accent role -> bone */
  --red-bright: #FFF6E9;
  --muted: color-mix(in srgb, #FFF6E9 88%, #FF3D2E);
  /* bright bone, readable body copy on red */
  --line: color-mix(in srgb, #0E1520 18%, transparent);
  --line-2: color-mix(in srgb, #0E1520 10%, transparent);
  --grain-c: 0, 0, 0;
  --grain-o: .05;
}

/* red mode: accent is bone, so flip the few hard-coded white-on-accent fills to ink */
:root[data-theme="red"] .btn--primary,
:root[data-theme="red"] .ticker:not(.ticker--ink),
:root[data-theme="red"] .badge,
:root[data-theme="red"] .skip-link {
  color: var(--fg);
}

/* red mode: body copy reads white on the bright red field, titles stay ink */
:root[data-theme="red"] body {
  color: var(--red-bright);
}

:root[data-theme="red"] h1,
:root[data-theme="red"] h2,
:root[data-theme="red"] h3,
:root[data-theme="red"] .link-arrow {
  color: var(--fg);
}

/* ---------- 2. RESET ------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---------- 3. PRIMITIVES ------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.shell--narrow {
  max-width: 820px;
}

.t-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--fg);
}

.t-red {
  color: var(--red);
}

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.01em;
}

h1 {
  font-size: var(--fs-hero);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1;
}

/* grain overlay — self-contained SVG turbulence */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

:root[data-theme="dark"] .grain {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="red"]) .grain {
    filter: invert(1);
  }
}

/* scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-red);
  z-index: 9500;
}

/* skip link */
.skip-link {
  position: fixed;
  top: -60px;
  left: 1rem;
  z-index: 10000;
  background: var(--red);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  transition: top .2s;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 4. BUTTONS / LINKS -------------------------------------- */
.btn {
  --b: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  padding: 1.05em 1.7em;
  border-radius: var(--radius);
  transform: skew(var(--skew));
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-snap);
}

.section--has-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* Hero (padel + nogomet duo) — one shot per theme, same pose/composition
   rendered in each theme's own room. The plain url() is the fallback; the
   image-set() line wins wherever it is supported and serves the smaller WebP. */
.hero.section--has-bg {
  background-image: url('../assets/hero-duo-dark.jpg');
  background-image: image-set(url('../assets/hero-duo-dark.webp') type('image/webp'),
      url('../assets/hero-duo-dark.jpg') type('image/jpeg'));
  background-position: center 0 !important;
}

:root[data-theme="light"] .hero.section--has-bg {
  background-image: url('../assets/hero-duo-light.jpg');
  background-image: image-set(url('../assets/hero-duo-light.webp') type('image/webp'),
      url('../assets/hero-duo-light.jpg') type('image/jpeg'));
}

:root[data-theme="red"] .hero.section--has-bg {
  background-image: url('../assets/hero-duo-red.jpg');
  background-image: image-set(url('../assets/hero-duo-red.webp') type('image/webp'),
      url('../assets/hero-duo-red.jpg') type('image/jpeg'));
}

.btn>span {
  display: inline-block;
  transform: skew(calc(var(--skew) * -1));
  position: relative;
  z-index: 2;
}

.btn--primary {
  color: #fff;
  background: var(--red);
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-red);
  transform: translateX(-101%);
  transition: transform var(--dur-mid) var(--ease-snap);
  z-index: 1;
}

.btn--primary:hover::after {
  transform: translateX(0);
}

.btn--primary:hover {
  transform: skew(var(--skew)) translateY(-2px);
}

.btn--ghost {
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--fg);
}

.btn--ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-snap);
  z-index: 1;
}

.btn--ghost:hover {
  color: var(--bg);
}

.btn--ghost:hover::after {
  transform: translateY(0);
}

.btn--lg {
  font-size: .9rem;
  padding: 1.2em 2em;
}

.btn--xl {
  font-size: 1.05rem;
  padding: 1.4em 2.4em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding-bottom: .25em;
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-snap);
}

.link-arrow:hover::after {
  transform: scaleX(1);
}

.link-arrow i {
  font-style: normal;
  transition: transform var(--dur-fast) var(--ease-snap);
}

.link-arrow:hover i {
  transform: translateX(5px);
}

/* ---------- 5. HEADER ----------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  transition: transform var(--dur-mid) var(--ease-snap), background-color var(--dur-mid);
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__logo img {
  height: 48px;
  width: auto;
}

.logo-light,
.logo-red {
  display: none;
}

.logo-dark {
  display: block;
}

:root[data-theme="dark"] .logo-light {
  display: block;
}

:root[data-theme="dark"] .logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="red"]) .logo-light {
    display: block;
  }

  :root:not([data-theme="light"]):not([data-theme="red"]) .logo-dark {
    display: none;
  }
}

:root[data-theme="red"] .logo-red {
  display: block;
}

:root[data-theme="red"] .logo-dark,
:root[data-theme="red"] .logo-light {
  display: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.4rem);
}

.nav__list {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav__list a {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: inline-flex;
  gap: .35em;
  align-items: flex-start;
  position: relative;
  padding: .3em 0;
}

.nav__list sup {
  color: var(--red);
  font-size: .6em;
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-snap);
}

.nav__list a:hover::after {
  transform: scaleX(1);
}

.nav__item {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 240px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  z-index: 10;
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__dropdown a {
  font-size: .74rem;
  padding: .6em .7em;
  white-space: nowrap;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--fg);
  border-radius: var(--radius);
  transform: skew(var(--skew));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.theme-toggle:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.theme-toggle svg {
  transform: skew(calc(var(--skew)*-1));
  width: 20px;
  height: 20px;
}

.theme-toggle .moon,
.theme-toggle .flame {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="red"]) .theme-toggle .moon {
    display: block;
  }

  :root:not([data-theme="light"]):not([data-theme="red"]) .theme-toggle .sun {
    display: none;
  }
}

:root[data-theme="red"] .theme-toggle .flame {
  display: block;
}

:root[data-theme="red"] .theme-toggle .sun,
:root[data-theme="red"] .theme-toggle .moon {
  display: none;
}

:root[data-theme="red"] .theme-toggle:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fg);
  border-radius: var(--radius);
}

.burger span {
  width: 22px;
  height: 2px;
  background: var(--fg);
  transition: transform .25s, opacity .2s;
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 940px) {

  /* Tighter bar + logo on small screens */
  :root {
    --header-h: 60px;
  }

  .header__logo img {
    height: 32px;
  }

  /* A backdrop-filter (like a transform) makes .header the containing block
     for its position:fixed children — which pinned the full-screen nav inside
     the header strip instead of the viewport. Drop the blur here, and keep the
     bar untransformed while the menu is open so the overlay can cover the page. */
  .header {
    backdrop-filter: none;
    background: var(--bg);
  }

  .header:has(.nav.is-open) {
    transform: none;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: calc(var(--header-h) + 1.5rem) 1.25rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-snap);
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__list {
    flex-direction: column;
    text-align: center;
    gap: 1.4rem;
    font-size: 1.4rem;
  }

  .nav__list a {
    font-size: 1.35rem;
  }

  .nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
  }

  .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: .8rem;
    align-items: center;
  }

  .nav__dropdown a {
    font-size: .95rem;
    padding: 0;
  }

  .nav__cta {
    align-self: center;
  }

  /* Logo and controls stay visible/tappable above the open overlay */
  .header__logo {
    position: relative;
    z-index: 1001;
  }

  .theme-toggle {
    position: relative;
    z-index: 1001;
  }

  .burger {
    display: flex;
    position: relative;
    z-index: 1001;
  }
}

/* ---------- 6. SECTION SCAFFOLD ------------------------------------- */
.section {
  padding: clamp(4rem, 9vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}

.section--surface {
  background: var(--surface);
}

/* keep real content above decorative line-art */
.section>.shell,
.page-hero>.shell,
.newsband>.shell,
.footer>.shell {
  position: relative;
  z-index: 2;
}

/* ---------- DECOR — background line-art drawings -------------------- */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  color: var(--red);
  opacity: .14;
}

.deco.ink {
  color: var(--fg);
  opacity: .06;
}

.deco.bold {
  opacity: .22;
}

.deco svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.deco svg :is(rect, circle, line, path, polygon, ellipse) {
  vector-effect: non-scaling-stroke;
}

.deco--tr {
  top: -5%;
  right: -4%;
  width: min(42vw, 520px);
  aspect-ratio: 1;
}

.deco--br {
  bottom: -6%;
  right: -5%;
  width: min(44vw, 560px);
  aspect-ratio: 1;
}

.deco--bl {
  bottom: -7%;
  left: -5%;
  width: min(38vw, 460px);
  aspect-ratio: 1;
}

.deco--tl {
  top: -6%;
  left: -5%;
  width: min(36vw, 440px);
  aspect-ratio: 1;
}

.deco--cr {
  top: 50%;
  right: -7%;
  width: min(30vw, 420px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.deco--cl {
  top: 50%;
  left: -8%;
  width: min(30vw, 420px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.deco--wide {
  width: min(60vw, 760px);
  aspect-ratio: 3/2;
}

@media (max-width: 700px) {
  .deco {
    opacity: .09;
  }

  .deco.ink {
    opacity: .05;
  }
}

/* parallax composes via --par so base transforms (centering) survive */
[data-parallax] {
  transform: translate3d(0, var(--par, 0px), 0);
}

.deco--cr[data-parallax],
.deco--cl[data-parallax] {
  transform: translateY(-50%) translate3d(0, var(--par, 0px), 0);
}

/* diagonal cut top — hard -3deg slash */
.slant-top {
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -2vw;
}

.slant-both {
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
}

/* index / section eyebrow */
.index {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.index__no {
  font-family: var(--font-numeral);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--red);
  line-height: 1;
}

.index__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--fs-label);
  color: var(--muted);
}

.index__rule {
  flex: 1;
  height: 2px;
  background: var(--line);
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--fs-label);
  color: var(--red);
  display: inline-block;
  margin-bottom: 1rem;
}

.section__lead {
  max-width: 56ch;
  color: var(--muted);
  margin-top: 1.2rem;
  font-size: 1.15rem;
}

/* ghost numeral that bleeds offscreen */
.ghost-no {
  font-family: var(--font-numeral);
  position: absolute;
  line-height: .7;
  color: var(--fg);
  opacity: .05;
  font-size: clamp(10rem, 32vw, 34rem);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ---------- 7. HERO — full-screen, line-art forward ----------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + 2vw);
  overflow: clip;
}

.hero__video {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero__video video,
.hero__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: none;
}

.hero__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.hero__content {
  position: relative;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--fg);
  border: 1.5px solid var(--line);
  padding: .5em .9em;
  transform: skew(var(--skew));
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
  transform: skew(calc(var(--skew)*-1));
}

.chip span {
  display: inline-block;
  transform: skew(calc(var(--skew)*-1));
}

.hero__title {
  margin: .3rem 0 1.6rem;
}

.hero__line {
  display: block;
  transform: skew(var(--skew));
  font-size: clamp(4rem, 17vw, 15rem);
  line-height: .82;
  letter-spacing: -.01em;
}

.hero__line.l2 {
  margin-left: clamp(0px, 7vw, 9rem);
}

.hero__line em {
  font-style: normal;
  color: var(--red);
}

.hero__line .dot {
  color: var(--red);
}

.hero__line.l1 .word span,
.hero__line .outline {
  -webkit-text-stroke: 2px var(--fg);
  color: transparent;
}

.hero__lead {
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.hero__stats {
  position: relative;
  z-index: 3;
}

.hero__stats .stats {
  margin-top: 0;
}

@media (max-width: 900px) {
  .hero__line.l2 {
    margin-left: 0;
  }

  .hero__content {
    max-width: 100%;
  }
}

/* news slider (carried from v1, restyled) */
.slider {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 14px 14px 0 var(--red);
}

.slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  display: block;
}

.slider .slide.is-active {
  opacity: 1;
}

.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.2) contrast(1.05);
}

.slide__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 13, .92), transparent 55%);
}

.slide__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem;
  color: #F1ECDF;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transform: skew(calc(var(--skew)*-1));
}

.slide__tag {
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red-bright);
}

.slide__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}

.slide__more {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.slider__dots {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .4rem;
  z-index: 3;
}

.slider__dots button {
  width: 26px;
  height: 4px;
  background: rgba(255, 255, 255, .4);
  border-radius: 0;
}

.slider__dots button.is-active {
  background: var(--red);
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--bg);
  padding: 1.6rem clamp(1rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.stat strong {
  font-family: var(--font-numeral);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: .9;
  color: var(--fg);
  font-weight: 400;
}

.stat>span:last-child {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

@media (max-width: 880px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.scrollhint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.scrollhint i {
  width: 1px;
  height: 34px;
  background: var(--muted);
  animation: drop 1.6s var(--ease-out) infinite;
}

@keyframes drop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------- 7b. NEWS BAND (relocated slider) ------------------------ */
.newsband {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.newsband__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.newsband__text h2 {
  margin: .6rem 0 1rem;
  max-width: 12ch;
}

.newsband__text p {
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 1.6rem;
}

.newsband__media {
  position: relative;
}

.newsband__media .slider {
  transform: skew(var(--skew));
  max-width: 520px;
  margin-inline: auto;
}

/* ===== COLISEUM — 3D coverflow news presentation ===== */
.coliseum {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 0 clamp(1.5rem, 4vw, 2.6rem);
}

.coliseum__stage {
  position: relative;
  height: clamp(330px, 42vw, 460px);
  perspective: 1250px;
  perspective-origin: 50% 44%;
}

.coliseum__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.coliseum__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 62%, 300px);
  aspect-ratio: 4 / 5;
  /* base transform (translate to center) is composed in JS with the 3D pose */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  text-decoration: none;
  color: var(--fg);
  will-change: transform, opacity;
  transition: transform .58s cubic-bezier(.55, .06, .12, 1),
    opacity .5s ease, box-shadow .5s ease, border-color .5s ease;
}

.js .coliseum__card {
  opacity: 0;
}

.coliseum__media {
  position: absolute;
  inset: 0;
}

.coliseum__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) brightness(.82);
  transition: filter .5s ease;
}

.coliseum__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, .92) 4%, rgba(10, 8, 6, .3) 44%, rgba(10, 8, 6, .05) 100%);
}

.coliseum__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem 1.15rem;
}

.coliseum__tag {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

.coliseum__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}

.coliseum__more {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}

/* front-facing (active) card gets the spotlight */
.coliseum__card.is-front {
  border-color: color-mix(in srgb, var(--red) 60%, transparent);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .95),
    0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}

.coliseum__card.is-front .coliseum__media img {
  filter: saturate(1.05) brightness(1);
}

.coliseum__card.is-front .coliseum__more {
  opacity: 1;
  transform: none;
}

/* nav arrows */
.coliseum__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.coliseum__nav svg {
  width: 20px;
  height: 20px;
  display: block;
}

.coliseum__nav:hover {
  border-color: var(--red);
  color: var(--red);
}

.coliseum__nav:active {
  transform: translateY(-50%) scale(.92);
}

.coliseum__nav--prev {
  left: -.4rem;
}

.coliseum__nav--next {
  right: -.4rem;
}

.coliseum__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.4rem;
}

.coliseum__dots button {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}

.coliseum__dots button.is-active {
  background: var(--red);
  width: 40px;
}

/* ---- full-width cinematic variant ---- */
.newsband__head {
  margin-bottom: clamp(1.6rem, 4vw, 2.8rem);
}

.newsband__media {
  overflow: hidden;
}

.coliseum--wide {
  max-width: none;
  width: 100%;
  padding: 0;
}

.coliseum--wide .coliseum__stage {
  height: clamp(360px, 52vw, 620px);
  perspective: 2100px;
  perspective-origin: 50% 47%;
}

.coliseum--wide .coliseum__card {
  width: clamp(230px, 27vw, 430px);
  border-radius: calc(var(--radius) * 1.2);
}

.coliseum--wide .coliseum__cap {
  padding: 1.4rem 1.5rem 1.6rem;
}

.coliseum--wide .coliseum__title {
  font-size: clamp(1.2rem, 2vw, 1.75rem);
}

/* deep cinematic backdrop glow behind the front card */
.coliseum--wide .coliseum__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vw, 720px);
  height: min(52vw, 720px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--red) 22%, transparent) 0%, transparent 62%);
  filter: blur(30px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* edge vignettes fade the outer cards into the section — filmic letterbox feel */
.coliseum__vig {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(80px, 15%, 260px);
  z-index: 60;
  pointer-events: none;
}

.coliseum__vig--l {
  left: 0;
  background: linear-gradient(to right, var(--bg) 12%, transparent);
}

.coliseum__vig--r {
  right: 0;
  background: linear-gradient(to left, var(--bg) 12%, transparent);
}

.coliseum--wide .coliseum__nav {
  z-index: 80;
  width: 52px;
  height: 52px;
}

.coliseum--wide .coliseum__nav svg {
  width: 24px;
  height: 24px;
}

.coliseum--wide .coliseum__nav--prev {
  left: clamp(1rem, 4vw, 4rem);
}

.coliseum--wide .coliseum__nav--next {
  right: clamp(1rem, 4vw, 4rem);
}

@media (prefers-reduced-motion: reduce) {
  .coliseum__card {
    transition: opacity .3s ease;
  }
}

@media (max-width: 860px) {
  .newsband__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 8. TICKER (straight, clean, high-end) -------------------- */
.ticker {
  overflow: hidden;
  position: relative;
  margin: 4rem 0;
  padding: 1.1rem 0;
  background: var(--surface);
  border-block: 1px solid var(--line);
  display: flex;
  white-space: nowrap;
  user-select: none;
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  will-change: transform;
  animation: tickerMarquee 40s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
  opacity: 0.85;
}

.ticker__dot {
  font-style: normal;
  color: var(--red);
  font-size: 0.95rem;
  opacity: 0.9;
}

@keyframes tickerMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- 9. SPLIT (about) ---------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split__text h2 {
  margin-bottom: 1.4rem;
  max-width: 14ch;
}

.split__text>p {
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.rows {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
}

.row:last-child {
  border-bottom: 1px solid var(--line);
}

.row__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: skew(var(--skew));
}

.row__icon img {
  width: 24px;
  height: 24px;
  transform: skew(calc(var(--skew)*-1));
}

/* Icons are white SVGs — invert to black in light mode, leave white in dark */
.row__icon img,
.feature-card__icon img,
.footer__social img {
  filter: invert(1);
}

:root[data-theme="dark"] .row__icon img,
:root[data-theme="dark"] .feature-card__icon img,
:root[data-theme="dark"] .footer__social img {
  filter: none;
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]):not([data-theme="red"]) .row__icon img,
  :root:not([data-theme="light"]):not([data-theme="red"]) .feature-card__icon img,
  :root:not([data-theme="light"]):not([data-theme="red"]) .footer__social img {
    filter: none;
  }
}

/* red mode: bright bg -> keep icons dark (inverted), like light mode */
:root[data-theme="red"] .footer__social a:hover img {
  filter: invert(1);
}

/* On red hover bg icon stays white in all modes */
.footer__social a:hover img {
  filter: none;
}

.row__no {
  font-family: var(--font-numeral);
  font-size: 2rem;
  color: var(--red);
  line-height: 1;
}

.row h3 {
  font-size: 1.15rem;
  margin-bottom: .25rem;
}

.row p {
  color: var(--muted);
  font-size: .96rem;
}

.split__media .frame {
  transform: skew(var(--skew));
  box-shadow: -16px 16px 0 var(--red);
}

.split__media img {
  filter: grayscale(.25) contrast(1.05);
  transition: filter var(--dur-slow);
}

.split__media .frame:hover img {
  filter: none;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* icon-only variant — for stations with no photography yet, so a flat SVG
   sits centred on the surface instead of being cropped like a photo */
.frame--icon {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--red) 14%, transparent), transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.frame--icon img {
  width: 42%;
  height: auto;
  max-height: 52%;
  object-fit: contain;
  opacity: .55;
}

/* ---------- ARENA SHOWCASE (heroic about section layout) -------------- */
.arena-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
}

.arena-showcase__header {
  max-width: 72ch;
}

.arena-showcase__header h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.arena-showcase__header p {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.6;
}

.arena-showcase__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}

.arena-showcase__media {
  position: relative;
}

.arena-showcase__media .frame {
  height: 100%;
  min-height: 500px;
  transform: skew(var(--skew));
  box-shadow: -20px 20px 0 var(--red);
  border: 1.5px solid var(--line);
}

.arena-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.arena-showcase__media .frame:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Glassmorphism badges on image */
.arena-badge {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1.2rem;
  background: rgba(20, 17, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  transform: skew(calc(var(--skew) * -1));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.arena-badge--tl {
  top: 1.5rem;
  left: 1.5rem;
}

.arena-badge--br {
  bottom: 1.5rem;
  right: 1.5rem;
}

.arena-badge__icon {
  font-size: 1.3rem;
  line-height: 1;
}

.arena-badge strong {
  display: block;
  font-size: .95rem;
  color: var(--fg);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.arena-badge span {
  font-size: .78rem;
  color: var(--muted);
  display: block;
}

/* 2x2 Feature Cards */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  height: 100%;
  align-content: space-between;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transform: skew(var(--skew));
  transition: border-color .3s, transform .3s, background .3s;
}

.feature-card:hover {
  border-color: var(--red);
  transform: skew(var(--skew)) translateY(-4px);
  background: color-mix(in srgb, var(--surface) 90%, var(--red) 10%);
}

.feature-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.feature-card__icon img {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-top: .2rem;
}

.feature-card p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .arena-showcase__grid {
    grid-template-columns: 1fr;
  }

  .arena-showcase__media .frame {
    min-height: 380px;
  }
}

@media (max-width: 580px) {
  .feature-cards {
    grid-template-columns: 1fr;
  }

  .arena-badge {
    display: none;
  }
}

/* ---------- 10. HORIZONTAL STATIONS --------------------------------- */
.hscroll {
  position: relative;
  background: var(--surface);
}

.hscroll__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hscroll.is-native .hscroll__pin {
  position: static;
}

.hscroll__track {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  padding-inline: var(--pad);
  will-change: transform;
}

.panel {
  flex: 0 0 min(82vw, 420px);
  position: relative;
}

.panel--intro {
  flex-basis: min(82vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel--intro h2 {
  margin: .8rem 0 1rem;
}

.panel--intro p {
  color: var(--muted);
  max-width: 40ch;
}

.panel__hint {
  margin-top: 2rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--red);
  display: flex;
  gap: .5rem;
  align-items: center;
}

.panel__hint i {
  font-style: normal;
  animation: nudge 1.4s var(--ease-out) infinite;
}

@keyframes nudge {
  50% {
    transform: translateX(8px);
  }
}

.panel__no {
  position: absolute;
  top: -1.4rem;
  left: -.4rem;
  z-index: 2;
  font-family: var(--font-numeral);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--red);
  -webkit-text-stroke: 0;
  line-height: 1;
}

.panel__media {
  display: block;
  color: inherit;
  text-decoration: none;
  aspect-ratio: 3/4;
  transform: skew(var(--skew));
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skew(calc(var(--skew)*-1)) scale(1.12);
  filter: grayscale(.3) contrast(1.05);
  transition: filter var(--dur-slow), transform var(--dur-slow) var(--ease-out);
}

.panel:hover .panel__media img {
  filter: none;
  transform: skew(calc(var(--skew)*-1)) scale(1.04);
}

.panel__media--placeholder {
  display: grid;
  place-items: center;
  gap: 1rem;
  background: var(--bg);
  color: var(--muted);
}

.panel__media--placeholder img {
  width: 64px;
  height: 64px;
  transform: none;
  filter: none;
  opacity: .4;
}

.panel__media--placeholder span {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.panel__body {
  padding-top: 1.2rem;
}

.panel__body h3 {
  margin: .3rem 0 .5rem;
}

.panel__body p {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 1rem;
}

.panel__links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  padding: .3em .7em;
  transform: skew(var(--skew));
  border-radius: var(--radius);
  margin-bottom: .6rem;
}

.badge span {
  display: inline-block;
  transform: skew(calc(var(--skew)*-1));
}

.panel--cta {
  flex-basis: min(82vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}

.panel--cta p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: .95;
  color: var(--fg);
}

/* native swipe fallback under 900 / reduced motion */
.hscroll.is-native .hscroll__pin {
  height: auto;
  padding: 4rem 0;
}

.hscroll.is-native .hscroll__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
}

.hscroll.is-native .panel {
  scroll-snap-align: center;
}

/* ---------- 11. PERSONAS (sticky stack) ----------------------------- */
.who {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
}

.who__item {
  background: var(--bg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  justify-content: flex-end;
}

.who__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: .22;
  transition: opacity var(--dur-slow), filter var(--dur-slow);
}

.who__item:hover img {
  opacity: .4;
  filter: grayscale(.4);
}

.who__item>div {
  position: relative;
}

.who__item h3 {
  font-size: 1.2rem;
}

.who__item p {
  color: var(--muted);
  font-size: .9rem;
  margin-top: .3rem;
}

@media (max-width: 820px) {
  .who {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 12. EVENTS ---------------------------------------------- */
.events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 2.5rem;
}

.event {
  position: relative;
}

.event__media {
  aspect-ratio: 16/10;
  transform: skew(var(--skew));
  overflow: hidden;
  border-radius: var(--radius);
}

.event__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skew(calc(var(--skew)*-1)) scale(1.1);
  filter: grayscale(.3);
  transition: filter var(--dur-slow), transform var(--dur-slow);
}

.event:hover .event__media img {
  filter: none;
  transform: skew(calc(var(--skew)*-1)) scale(1.03);
}

.event__body {
  padding-top: 1.4rem;
}

.event__body h3 {
  margin-bottom: .5rem;
}

.event__body p {
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 46ch;
}

@media (max-width: 760px) {
  .events {
    grid-template-columns: 1fr;
  }
}

/* ---------- 13. PRICING (editorial spec table) ---------------------- */
.pricing {
  margin-top: 2.5rem;
  border-top: 2px solid var(--fg);
}

.price-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.price-row__no {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--red);
}

.price-row__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
}

.price-row__name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-stretch: normal;
  font-size: .85rem;
  color: var(--muted);
  margin-top: .2rem;
}

.price-row__fig {
  font-family: var(--font-numeral);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--fg);
  white-space: nowrap;
}

.price-row__fig em {
  font-style: normal;
  color: var(--red);
}

/* ---------- 14. BAND (full-bleed) ----------------------------------- */
.band {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) 0;
  overflow: hidden;
  color: #F1ECDF;
}

.band__bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}

.band__bg img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  filter: grayscale(.4) brightness(.45) contrast(1.1);
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(204, 31, 18, .55), rgba(20, 17, 13, .4));
  z-index: 1;
}

.band__content {
  position: relative;
  z-index: 2;
  max-width: 60ch;
}

.band__content h2 {
  margin: 1rem 0;
}

.band__content p {
  font-size: 1.15rem;
  opacity: .9;
}

.band .chip {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

/* ---------- 15. LOCATION / MAP -------------------------------------- */
.location {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
  align-items: start;
}

.rows--steps .row {
  grid-template-columns: auto 1fr;
}

.location__address {
  font-style: normal;
  margin: 2rem 0;
  line-height: 1.9;
}

.location__address strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  display: block;
  margin-bottom: .4rem;
}

.location__address a {
  color: var(--red);
}

.frame--map {
  aspect-ratio: 4/3;
  transform: skew(var(--skew));
  border: 2px solid var(--fg);
  box-shadow: 14px 14px 0 var(--red);
  overflow: hidden;
  border-radius: var(--radius);
}

.frame--map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  transform: skew(calc(var(--skew)*-1)) scale(1.1);
  filter: grayscale(.3);
}

:root[data-theme="dark"] .frame--map iframe {
  filter: invert(.92) hue-rotate(180deg) grayscale(.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="red"]) .frame--map iframe {
    filter: invert(.92) hue-rotate(180deg) grayscale(.2);
  }
}

.coords {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .06em;
  margin-top: 1rem;
}

@media (max-width: 820px) {
  .location {
    grid-template-columns: 1fr;
  }
}

/* ---------- 16. FAQ -------------------------------------------------- */
.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--red);
}

.faq__icon::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
}

.faq__icon::after {
  left: 9px;
  top: 0;
  width: 2px;
  height: 20px;
  transition: transform var(--dur-fast) var(--ease-snap);
}

.faq details[open] .faq__icon::after {
  transform: scaleY(0);
}

.faq details>p {
  padding-bottom: 1.5rem;
  color: var(--muted);
  max-width: 62ch;
}

.faq a {
  color: var(--red);
}

/* ---------- 17. CTA -------------------------------------------------- */
.cta {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) 0;
  overflow: hidden;
  text-align: center;
  background: var(--fg);
  color: var(--bg);
}

.cta__marquee {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  opacity: .08;
  z-index: 0;
}

.cta__track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 24s linear infinite;
}

.cta__track span {
  font-family: var(--font-numeral);
  font-size: clamp(4rem, 12vw, 9rem);
  text-transform: uppercase;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.cta__inner h2 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
}

.cta__inner h2 .t-outline {
  -webkit-text-stroke: 2px var(--bg);
}

/* ---------- 18. FOOTER ---------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
}

.footer__wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--font-numeral);
  font-size: clamp(3rem, 16vw, 13rem);
  line-height: .8;
  text-align: center;
  -webkit-text-stroke: 2px var(--fg);
  color: transparent;
  padding-inline: var(--pad);
  white-space: nowrap;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 3rem;
}

.footer__brand img {
  height: 46px;
  width: auto;
  margin-bottom: 1rem;
}

.footer__brand p {
  color: var(--muted);
  max-width: 30ch;
  margin-bottom: 1.2rem;
}

.footer__social {
  display: flex;
  gap: .6rem;
}

.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast);
}

.footer__social a:hover {
  background: var(--red);
}

.footer__social img {
  width: 18px;
  height: 18px;
}

.footer__col h3 {
  font-size: .8rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer__col address {
  font-style: normal;
  color: var(--muted);
  line-height: 1.9;
}

.footer__col a:hover {
  color: var(--red);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  color: var(--muted);
}

.footer__bottom {
  border-top: 1px solid var(--line);
}

.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  padding-block: 1.4rem;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 820px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 19. PAGE / ROUTE TRANSITION ----------------------------- */
/* Parked at 110% rather than 100%: the 3deg skew swings the panel's corners
   back up by (width/2 * tan3deg), which at 100% left a red wedge permanently
   visible along the viewport edge — on top of everything, including the menu. */
.sweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--red);
  transform: translateY(110%) skewY(3deg);
  pointer-events: none;
  will-change: transform;
}

/* exit — red wipes up to cover the page, then navigation fires */
.sweep.is-cover {
  animation: sweepCover .5s var(--ease-snap) forwards;
}

@keyframes sweepCover {
  from {
    transform: translateY(110%) skewY(3deg);
  }

  to {
    transform: translateY(0) skewY(0);
  }
}

/* entrance — only when arriving through a sweep nav. html.is-entering is set by the
   pre-paint <head> script and fill-mode:both keeps the cover from the very first frame,
   so the reveal slides up smoothly instead of snapping. */
:root.is-entering .sweep {
  animation: sweepReveal .62s var(--ease-snap) both;
}

@keyframes sweepReveal {
  from {
    transform: translateY(0) skewY(0);
  }

  to {
    transform: translateY(-110%) skewY(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sweep {
    display: none;
  }
}

/* page hero (subpages) */
.page-hero {
  padding: calc(var(--header-h) + 5vw) 0 4vw;
  position: relative;
  overflow: hidden;
}

.crumbs {
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1.4rem;
}

.crumbs a:hover {
  color: var(--red);
}

.page-hero__lead {
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.18rem;
  margin-top: 1.4rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-card {
  font-style: normal;
  padding: 1.8rem;
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 1.9;
  transform: skew(var(--skew));
  border-radius: var(--radius);
}

.contact-card>* {
  transform: skew(calc(var(--skew)*-1));
}

.contact-card strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  display: block;
  margin-bottom: .5rem;
}

.contact-card a {
  color: var(--red);
}

@media (max-width:640px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Multisport Lab 360 — the companion stats app's own card, dropped in as-is:
   dark surface + red skewed slash, the app's brand geometry (app.css §3),
   independent of the site theme so the app's white/red logo always reads. */
.lab360-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 3rem 2rem;
  background: var(--ink);
  border-radius: var(--radius);
}

.lab360-card::before {
  content: "";
  position: absolute;
  left: -6%;
  top: 0;
  bottom: 0;
  width: 18%;
  background: var(--red);
  transform: skew(-12deg);
}

.lab360-logo {
  position: relative;
  z-index: 1;
  width: min(280px, 70%);
  height: auto;
}

/* ---------- 20. REVEAL / MOTION ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* split text */
.split-line {
  display: block;
  overflow: hidden;
}

.split-line>span {
  display: inline-block;
  transform: translateY(105%) skewY(4deg);
  transition: transform var(--dur-slow) var(--ease-snap);
}

.is-in .split-line>span,
.split-line.is-in>span {
  transform: none;
}

[data-split] {}

[data-split] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
}

[data-split] .word>span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-snap);
  transition-delay: var(--d, 0ms);
}

[data-split].is-in .word>span {
  transform: none;
}

/* img clip-wipe — clip lives on inner per design.md trap */
.img-reveal {
  overflow: hidden;
}

.img-reveal>* {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease-snap);
  transform: scale(1.08);
}

.img-reveal.is-in>* {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path var(--dur-slow) var(--ease-snap), transform 1.2s var(--ease-out);
}

/* rotating seal */
.seal {
  width: 128px;
  height: 128px;
}

.seal svg {
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}

.seal text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: var(--fg);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal,
  [data-split] .word>span,
  .img-reveal>*,
  .split-line>span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .ticker__track,
  .cta__track {
    animation: none;
  }

  .ticker,
  .ticker__track span {
    animation: none;
  }
}

/* =====================================================================
   21. SUBPAGE COMPONENTS — class names used by the inner pages
   (postaje/*, novice/*, sportne-postaje, novice, politika) so their
   existing markup adopts the v2 visual language.
   ===================================================================== */
/* retired v1 hero glows */
.hero__glow,
.hero__watermark {
  display: none;
}

/* two-column page hero (station / listing pages) */
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* full-bleed photographic hero — same theme-swapped shot as the homepage
   hero (matching flat studio backdrop per theme, player composed to one
   side), so a station page can open exactly like the homepage does.
   .page-hero--bg carries the shared layout; a per-station modifier class
   supplies the actual image (each pairs with its own light/dark/red set,
   or a single photo + permanent scrim for stations without one). */
.page-hero--bg {
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.page-hero--bg .page-hero__inner {
  display: block;
}

.page-hero--bg .page-hero__inner>div {
  max-width: 640px;
}

/* the padel player's racket arm reaches further left than nogomet's stride
   does, so the text column needs to stay narrower to clear it */
.page-hero--padel .page-hero__inner>div {
  max-width: 460px;
}

/* -- per-station image sets (each pairs with .page-hero--bg above) -- */
.page-hero--nogomet {
  background-image: url('../assets/hero-nogomet-dark.jpg');
  background-image: image-set(url('../assets/hero-nogomet-dark.webp') type('image/webp'),
      url('../assets/hero-nogomet-dark.jpg') type('image/jpeg'));
}

:root[data-theme="light"] .page-hero--nogomet {
  background-image: url('../assets/hero-nogomet-light.jpg');
  background-image: image-set(url('../assets/hero-nogomet-light.webp') type('image/webp'),
      url('../assets/hero-nogomet-light.jpg') type('image/jpeg'));
}

:root[data-theme="red"] .page-hero--nogomet {
  background-image: url('../assets/hero-nogomet-red.jpg');
  background-image: image-set(url('../assets/hero-nogomet-red.webp') type('image/webp'),
      url('../assets/hero-nogomet-red.jpg') type('image/jpeg'));
}

.page-hero--padel {
  background-image: url('../assets/hero-padel-dark.jpg');
  background-image: image-set(url('../assets/hero-padel-dark.webp') type('image/webp'),
      url('../assets/hero-padel-dark.jpg') type('image/jpeg'));
}

:root[data-theme="light"] .page-hero--padel {
  background-image: url('../assets/hero-padel-light.jpg');
  background-image: image-set(url('../assets/hero-padel-light.webp') type('image/webp'),
      url('../assets/hero-padel-light.jpg') type('image/jpeg'));
}

:root[data-theme="red"] .page-hero--padel {
  background-image: url('../assets/hero-padel-red.jpg');
  background-image: image-set(url('../assets/hero-padel-red.webp') type('image/webp'),
      url('../assets/hero-padel-red.jpg') type('image/jpeg'));
}

/* At typical desktop widths .section--has-bg's "cover" is width-bound here
   (the 2200px-wide source already matches the viewport with no horizontal
   slack), so background-position-x has nothing to pan — the player sits
   wherever they happen to fall in the unscaled source, hard against the
   right edge. Zooming in slightly creates that slack, then position pans
   the crop left so the player sits inboard with breathing room on both
   sides instead of pinned to the edge. */
@media (min-width: 821px) {
  .page-hero--nogomet {
    background-size: auto 130% !important;
    background-position: 68% center !important;
  }

  .page-hero--padel {
    background-size: auto 118% !important;
    background-position: 66% 30% !important;
  }

  /* same idea, applied to the three real-photo stations: zoom in a touch
     to create horizontal slack, then pan left so the subject sits inboard
     instead of centred/right against the edge. Width-based sizing here
     since these sources are also width-bound under cover. */
  .page-hero--soccerbot {
    background-size: 120% auto !important;
    background-position: 35% 70% !important;
  }

  .page-hero--speedbounce {
    background-size: 120% auto !important;
    background-position: 30% 60% !important;
  }

  .page-hero--multiball {
    background-size: 120% auto !important;
    background-position: 35% 55% !important;
  }
}

/* -- single-photo stations (no theme-matched studio shot available) --
   These use one real on-site photo with a permanent readability scrim,
   rather than the seamless theme-swap the studio shots allow. */
.page-hero--photo {
  position: relative;
}

.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      var(--bg) 0%, var(--bg) 30%,
      color-mix(in srgb, var(--bg) 60%, transparent) 52%,
      transparent 74%);
  pointer-events: none;
}

.page-hero--photo .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero--soccerbot {
  background-image: url('../assets/soccerbot-360.avif');
  background-position: center 70% !important;
}

.page-hero--speedbounce {
  background-image: url('../assets/speed-bouncer.webp');
  background-position: center 60% !important;
}

.page-hero--multiball {
  background-image: url('../assets/sports_training_2.webp');
  background-position: center 55% !important;
}

/* Below 820px the text block runs full-width (it's prose, not a short
   headline like the homepage's), so it can't sit beside the photo the way
   it does on desktop. Rather than dim the photo with a scrim so text can
   overlap it (as the two rules above this point did for .page-hero--photo),
   the two are separated instead: a clean, fully-visible image band on top,
   text on the normal solid page background underneath — nothing covering
   the picture. This block is placed after every per-station/::before rule
   above so it wins the (otherwise tied) cascade on all five station pages,
   including the .page-hero--photo ones. */
@media (max-width: 820px) {
  .page-hero--bg {
    display: block;
    height: auto;
    min-height: 0;
    /* top padding must still clear the fixed header — .page-hero's own
       calc(header-h + 5vw) got overridden by this shorthand, so restate it */
    padding: calc(var(--header-h) + 1.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    /* favour the source's empty side (players are composed toward the
       right of frame) so the full-width text has clear room to sit in.
       !important: .section--has-bg forces background-position center center. */
    background-position: 15% 12% !important;
  }

  .page-hero--bg .page-hero__inner {
    background: none;
  }

  /* padel's racket arm reaches further into frame than nogomet's stride does
     (see the desktop max-width override above), so it needs the crop pushed
     further still. Two-class selector to reliably beat .page-hero--bg's
     background-position above regardless of source order. */
  .page-hero--bg.page-hero--padel {
    background-position: -35% 8% !important;
  }

  /* nogomet/padel are studio shots on a flat backdrop matching each theme's
     --bg exactly, so once the section (and therefore the cover-sized image)
     grows tall enough for the text, the lower portion is just that flat
     colour — reading identically to a solid background without needing one.
     The real photo stations aren't flat, so they still need a scrim once
     text is sitting directly on top of them instead of beside them. */
  .page-hero--photo {
    position: relative;
  }

  .page-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        transparent 0%, transparent 30%,
        color-mix(in srgb, var(--bg) 55%, transparent) 46%,
        var(--bg) 62%, var(--bg) 100%);
    pointer-events: none;
  }

  .page-hero--photo .page-hero__inner {
    position: relative;
    z-index: 1;
  }

  /* Cropping alone can't dodge every busy patch of a real photo (padel's
     racket, soccerbot's HUD graphics) — a shadow keeps the text legible
     wherever it lands, without needing a solid backdrop behind it. */
  .page-hero--bg .crumbs,
  .page-hero--bg h1,
  .page-hero--bg .page-hero__lead {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .95);
  }
}

/* Grid items default to min-content width; without this a long headline
   word keeps the text column from shrinking and squashes the media. */
.page-hero__inner>* {
  min-width: 0;
}

/* --fs-hero is tuned for the full-width home hero. Station names are long
   ("Nogometno igrišče"), so cap the subpage headline to keep the two
   columns balanced instead of letting one word set the column width. */
.page-hero h1 {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
}

.page-hero__media .frame {
  transform: skew(var(--skew));
  box-shadow: -16px 16px 0 var(--red);
}

.page-hero__media img {
  filter: grayscale(.2) contrast(1.05);
  transition: filter var(--dur-slow);
}

.page-hero__media .frame:hover img {
  filter: none;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

@media (max-width:820px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
  }
}

/* tiles — sportne-postaje listing */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 2.5rem;
}

.tile {
  position: relative;
}

.tile__media {
  display: block;
  color: inherit;
  text-decoration: none;
  aspect-ratio: 16/11;
  transform: skew(var(--skew));
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skew(calc(var(--skew)*-1)) scale(1.1);
  filter: grayscale(.3) contrast(1.05);
  transition: filter var(--dur-slow), transform var(--dur-slow) var(--ease-out);
}

/* the nogomet/padel hero shots have the player composed toward the right
   of the source frame; shift the visible crop to favor that side so the
   player sits further left in the card instead of hugging the edge */
.crop-r {
  object-position: 78% center;
}

.tile:hover .tile__media img {
  filter: none;
  transform: skew(calc(var(--skew)*-1)) scale(1.03);
}

.tile__media--placeholder {
  display: grid;
  place-items: center;
  gap: 1rem;
  background: var(--surface);
  color: var(--muted);
}

.tile__media--placeholder img {
  width: 56px;
  height: 56px;
  transform: none;
  filter: none;
  opacity: .4;
}

.tile__media--placeholder span {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.tile__body {
  padding-top: 1.2rem;
}

.tile__body h3 {
  margin: .3rem 0 .5rem;
}

.tile__body p {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 1rem;
}

.tile__links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.tile .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

@media (max-width:720px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* price list — station cenik */
.price-list {
  margin-top: 2.5rem;
  border-top: 2px solid var(--fg);
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.price__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
}

.price__label small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
  margin-top: .2rem;
}

.price__amount {
  font-family: var(--font-numeral);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--red);
  white-space: nowrap;
}

/* sub-heading when a station has several price tiers (e.g. Soccerbot) */
.price-group {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 2.2rem 0 .9rem;
}

.price-group:first-of-type {
  margin-top: 1.4rem;
}

.price-note {
  color: var(--muted);
  margin-top: 1.4rem;
  font-size: .95rem;
}

.price-note a {
  color: var(--red);
}

/* "more" — pill links to other stations / articles */
.more {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.4rem;
}

.more a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  font-weight: 700;
  padding: .85em 1.3em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transform: skew(var(--skew));
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.more a span {
  display: inline-block;
  transform: skew(calc(var(--skew)*-1));
}

.more a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* news grid — novice listing */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: 1rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-fast);
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.news-card time {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red);
}

.news-card h3 {
  font-size: 1.15rem;
  line-height: 1.12;
}

.news-card p {
  color: var(--muted);
  font-size: .92rem;
  flex: 1;
}

.news-card .link-arrow {
  margin-top: .4rem;
}

@media (max-width:900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* article prose */
.section--light {
  background: var(--surface);
}

.prose {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--fg);
}

.prose>*+* {
  margin-top: 1.2rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-top: 2.4rem;
  line-height: 1.05;
}

.prose .lede {
  font-size: 1.25rem;
  color: var(--muted);
  font-weight: 500;
}

.prose ul {
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--muted);
}

.prose li {
  margin-top: .4rem;
}

.prose li::marker {
  color: var(--red);
}

.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose strong {
  color: var(--fg);
}

.prose em {
  color: var(--red);
  font-style: italic;
}

.prose figure {
  margin: 2rem 0;
  text-align: center;
}

.prose figure img {
  max-width: 100%;
  max-height: 600px;
  width: auto;
  border-radius: var(--radius);
}

.prose .btn {
  text-decoration: none;
}