/* =====================================================================
   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;
  /* was #6B7A90, which measured 3.70:1 on bone and 4.11:1 on surface — under
     AA for body copy. Same hue, darker: 5.14:1 and 5.72:1. */
  --muted: #15171b;
  --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. AVIF replaced the webp/jpeg pair these
   used to choose between, so a single url() is all that is needed. */
.hero.section--has-bg {
  background-image: url('../assets/hero-duo-dark.avif');
  background-position: center 0 !important;
}

:root[data-theme="light"] .hero.section--has-bg {
  background-image: url('../assets/hero-duo-light.avif');
}

:root[data-theme="red"] .hero.section--has-bg {
  background-image: url('../assets/hero-duo-red.avif');
}

.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;
}

/* These sit next to a filled .btn--primary and used to be bare text with a
   hover-only underline — nothing marked them as a control until the pointer
   was already on them, and on a photographic hero they disappeared. They now
   carry the same chip geometry as .btn (skew, radius, mono caps) at a lighter
   weight: hairline box, faint fill, filling solid on hover the way
   .btn--ghost does. The underline is gone — the box replaces it. */
.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: .85em 1.25em;
  position: relative;
  overflow: hidden;
  /* as bare text these could stretch harmlessly; as a box, a flex/grid parent
     (the news cards) would pull the chip the full width of the card */
  align-self: flex-start;
  width: fit-content;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 32%, transparent);
  transform: skew(var(--skew));
  transition: transform var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap);
}

/* counter-skew the contents so the type stays upright inside the slanted box */
.link-arrow>span,
.link-arrow>i {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform: skew(calc(var(--skew) * -1));
}

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

.link-arrow:hover {
  color: var(--bg);
}

.link-arrow:hover::after {
  transform: translateY(0);
}

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

.link-arrow:hover>i {
  transform: skew(calc(var(--skew) * -1)) 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%;
  /* flush with the left edge of its nav link rather than centred under it,
     so the panel and the item it belongs to share a starting edge */
  left: 0;
  transform: translateY(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: translateY(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);
}

.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;
  margin-top: 5rem;
  padding: 1rem;
  backdrop-filter: blur(15px);
}

.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) ------------------------ */
/* ---------- NEWS BAND ------------------------------------------------
   One lead story beside two smaller ones. No carousel, no perspective, no
   arrows: three posts fit on the page at once, so nothing needs to move.
   The type sits below its picture rather than over it — the old captions
   measured 1.0–1.7:1 against the photograph they were printed on.
   -------------------------------------------------------------------- */
.newsband {
  padding: clamp(4rem, 9vw, 7rem) 0;
  position: relative;
}

.newsband__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.newsband__head h2 {
  margin: 0;
}

.newsgrid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

/* the two followers stack in the narrower column */
.newsgrid__side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.7rem);
}

.newspost {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.newspost__media {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.newspost__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.newspost:hover .newspost__media img {
  transform: scale(1.04);
}

.newspost__body {
  padding-top: .9rem;
}

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

.newspost__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  margin-top: .4rem;
}

.newspost__desc {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  margin-top: .5rem;
}

.newspost__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
}

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

.newspost:hover .newspost__more i {
  transform: translateX(5px);
}

/* lead story: bigger picture, bigger headline */
.newspost--lead .newspost__media {
  aspect-ratio: 3 / 2;
}

.newspost--lead .newspost__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* followers: a wide strip, so two stack against the lead without towering */
.newspost--side {
  flex-direction: row;
  gap: 1.1rem;
  align-items: flex-start;
}

.newspost--side .newspost__media {
  flex: 0 0 clamp(110px, 34%, 190px);
  aspect-ratio: 1 / 1;
}

.newspost--side .newspost__body {
  padding-top: 0;
}

.newspost--side .newspost__title {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
}

.newspost--side .newspost__desc {
  font-size: .88rem;
}

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

@media (max-width: 520px) {
  .newspost--side {
    flex-direction: column;
    gap: 0;
  }

  .newspost--side .newspost__media {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .newspost--side .newspost__body {
    padding-top: .9rem;
  }
}


/* ---------- 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: 20ch;
}

.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) ----------------------------- */
/* Audience cards. Photo on top at full colour, copy underneath and outside
   it — the old treatment set the picture as a washed-out grey backdrop with
   the text on top, which read as a watermark rather than a photograph. The
   cards are separated instead of sharing hairlines, and auto-fit means a row
   of three fills the width rather than leaving a fourth cell empty. */
.who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.2rem;
}

.who__item {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.who__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform var(--dur-slow) var(--ease-out);
}

.who__item:hover img {
  transform: translateY(-4px);
}

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

.who__item p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
  margin-top: .35rem;
}

/* ---------- 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;
  /* flows to as many equal columns as fit, so adding a card doesn't leave a
     lone half-width box on a second row */
  grid-template-columns: repeat(auto-fit, minmax(260px, 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 (the desktop
   block below tightens both further, against the image geometry) */
.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.avif');
}

:root[data-theme="light"] .page-hero--nogomet {
  background-image: url('../assets/hero-nogomet-light.avif');
}

:root[data-theme="red"] .page-hero--nogomet {
  background-image: url('../assets/hero-nogomet-red.avif');
}

.page-hero--padel {
  background-image: url('../assets/hero-padel-dark.avif');
}

:root[data-theme="light"] .page-hero--padel {
  background-image: url('../assets/hero-padel-light.avif');
}

:root[data-theme="red"] .page-hero--padel {
  background-image: url('../assets/hero-padel-red.avif');
}

/* The two studio shots are cut-outs standing on a flat field that matches
   --bg exactly, and both are composed the same way: subject in the right
   half, the left half left empty for this text. So the job is simply to
   keep the subject inside the half the composition reserved for them.

   The old rule sized by viewport HEIGHT (max(115%, 157vh)) to guarantee
   vertical cover. That ties the image's width to the window's height: open
   a tall window and the image blows up, and because it is anchored by a
   percentage the racket swings left straight across the headline. It also
   zoomed past 100%, throwing away the very margin the composition provides.

   Width-bound and right-anchored instead. The subject then sits a fixed
   share of the image width in from the right edge, independent of the
   window's aspect, so the text column clears it at every shape. The 1400px
   cap keeps the subject from drifting rightwards off a very wide screen.
   Vertical cover no longer matters: where the image falls short the hero's
   own --bg shows, which is the colour the field is painted in. (The three
   nogomet sources were a few points off that colour and showed a faint
   rectangle; they have been repainted to the token.) */
@media (min-width: 821px) {

  .page-hero--nogomet,
  .page-hero--padel {}


  /* The subject sits at a share of the viewport width, so the column that
     has to clear it needs a vw term as well as a pixel cap: a fixed 460px
     column on a 1024px window reaches further across than the racket
     leaves room for. Desktop only — 36vw of a phone is nothing. */
  .page-hero--nogomet .page-hero__inner>div {
    max-width: min(560px, 44vw);
  }

  .page-hero--padel .page-hero__inner>div {
    max-width: min(460px, 36vw);
  }

  /* 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: max(115%, 104vh) auto !important;
    background-position: 42% 45% !important;
  }

  .page-hero--speedcourt {
    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;
}

/* The dome shot is landscape with the player low-centre and the screen wall
   across the top, so it sits lower than the portrait source it replaced. */
.page-hero--soccerbot {
  background-image: url('../assets/soccerbot-360-dvorana-multisport-arena.avif');
  background-position: center 42% !important;
}

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

.page-hero--multiball {
  background-image: url('../assets/multiball-interaktivni-zaslon-multisport-arena.avif');
  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 {
    /* The text alone already ran these to 52-59vh, so a 50vh floor changed
       nothing — the photograph was still a strip above the headline. 64vh
       with the copy pinned to the bottom gives the picture a real band of
       its own, and the copy lands in the solid lower half of the scrim. */
    min-height: 64vh;
    height: auto;
    display: flex;
    align-items: flex-end;
    /* 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);
    /* The crop used to dodge onto the source's empty side so the full-width
       text had clear ground. With the copy now sitting below the picture
       band there is nothing to dodge, and dodging left a tall empty panel
       where the hero image should be — so frame the player instead.
       !important: .section--has-bg forces background-position center center. */
    background-position: 55% 6% !important;
  }

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

  /* the padel player stands further right in her frame than the nogomet one
     does in his. 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: 82% 6% !important;
  }

  /* Every mobile hero now takes the same shape, studio shot or real
     photograph alike: a band of open picture at the top, then a fade into
     the page colour that the copy sits on (the gradient itself lives in the
     later @media block, so it wins over the desktop --photo scrim).

     Reserving that band with padding is what lets the fade be measured from
     the top of the hero. Expressed as a share of the height instead, a long
     lead (Soccerbot's runs five lines) pushed the crumbs back onto bare
     photo — which is exactly what the old text-shadow was covering for.

     On nogomet/padel the backdrop is a flat studio ground matching --bg
     exactly, so the fade is invisible there and only the crop reads. */
  .page-hero--bg {
    position: relative;
    padding-top: max(calc(var(--header-h) + 1.5rem), 31vh);
  }

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

  /* No text-shadow here. It was covering for text on open photo; the fade
     does that job now — and a black halo on every glyph read as a smudge in
     light mode, where the ground behind it is bone. */
}

/* 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;
  /* stretch, not center: the arrow link is now a box sitting next to a
     filled button, and a shorter box beside a taller one reads as a
     mistake. Stretching matches their heights by construction, so it keeps
     working with .btn--lg and .btn--xl without restating their padding. */
  align-items: stretch;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ...which needs the chip's own flex-start (there so a news card cannot
   stretch it the full width of the card) lifted just in this row. */
.page-hero__actions .link-arrow {
  align-self: stretch;
  font-size: .82rem;
}

@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: 1.2rem;
  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.4rem, 2.5vw, 2.2rem);
  margin-top: 1rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

:root[data-theme="light"] .news-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .08);
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--red);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}

:root[data-theme="light"] .news-card:hover {
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .12), 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}

.news-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.news-card:hover .news-card__media img {
  transform: scale(1.07);
  filter: brightness(1.03);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem 1.6rem 1.8rem;
  flex: 1;
}

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

.news-card h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--fg);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover h3 {
  color: var(--red);
}

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

.news-card .link-arrow {
  margin-top: .6rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .link-arrow {
  transform: translateX(4px);
}

@media (max-width:960px) {
  .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);
}

/* =====================================================================
   ARTICLE READING LAYOUT
   A content grid rather than one narrow column. Body copy keeps a readable
   measure in the centre track; figures, pull quotes and callouts break out
   into the wider track so the page has rhythm instead of running as a
   single flat ribbon of text.
   ===================================================================== */
.shell--article {
  max-width: var(--shell);
}

.prose {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--fg);
  gap: 1.5rem;
}

.prose > * {
  min-width: 0;
  margin-top: 0;
}

/* ---- headings ---- */
.prose h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  margin-top: 3rem;
  letter-spacing: -0.01em;
}

/* a short accent rule instead of a bare heading, so sections announce
   themselves the way the rest of the site's sections do */
.prose h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-bottom: 1.1rem;
  border-radius: 2px;
  background: var(--accent-vivid);
}

.prose h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.2;
  margin-top: 2rem;
  color: var(--fg);
}

.prose h2 + p,
.prose h3 + p {
  margin-top: .6rem;
}

/* ---- lede ---- */
.prose .lede {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg);
  border-left: 4px solid var(--accent-vivid);
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
}

/* =====================================================================
   PRESENTATION COMPONENTS FOR ARTICLES & NEWS (LANDING-PAGE STYLE)
   ===================================================================== */

/* 1. Key Facts / Stats Grid */
.key-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0 2.5rem;
}

.fact-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-fast);
}

:root[data-theme="light"] .fact-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.fact-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-vivid);
}

.fact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-vivid) 14%, transparent);
  color: var(--accent-vivid);
  flex-shrink: 0;
}

.fact-card__icon svg {
  width: 24px;
  height: 24px;
}

.fact-card__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.fact-card__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact-card__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.25;
}

/* 2. Offer / Pricing Highlight Box */
.offer-highlight {
  position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, var(--accent-vivid)) 0%, var(--surface) 100%);
  border: 2px solid var(--accent-vivid);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  margin: 2.5rem 0;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}

:root[data-theme="light"] .offer-highlight {
  background: #ffffff;
  border-color: var(--red);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}

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

.offer-highlight__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(0.92rem, 1.3vw, 1.15rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 0;
  background: none !important;
  color: var(--red) !important;
  margin-bottom: .6rem;
}

:root[data-theme="red"] .offer-highlight__badge {
  color: var(--ink) !important;
}

.offer-highlight__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--fg);
}

.offer-highlight__desc {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: .6rem;
}

.offer-highlight__price-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: color-mix(in srgb, var(--accent-vivid) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-vivid) 30%, transparent);
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  gap: .4rem;
}

:root[data-theme="light"] .offer-highlight__price-tag {
  background: #fbf8f0;
}

.offer-highlight__price-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--red);
}

.offer-highlight__price-sub {
  font-size: .88rem;
  color: var(--muted);
}

/* 3. Steps / How-it-works Cards */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin: 1.8rem 0 2.5rem;
}

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

:root[data-theme="light"] .step-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .08);
}

.step-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-vivid);
}

.step-card__num {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 800;
  color: var(--accent-vivid);
  letter-spacing: .06em;
}

.step-card__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--fg);
}

.step-card__text {
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.5;
}

/* 4. Article Grid 2 & 3 Columns */
.article-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
  margin: 1.8rem 0;
}

.article-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin: 1.8rem 0;
}

.article-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

:root[data-theme="light"] .article-card {
  background: #ffffff;
}

.article-card h3, .article-card h4 {
  margin-top: 0;
}

/* 5. Alert & Notice Box */
.alert-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--accent-vivid) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-vivid) 40%, transparent);
  border-left: 4px solid var(--accent-vivid);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  color: var(--fg);
  margin: 1.5rem 0;
}

.alert-box__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* 6. Contact & Action Panel */
.contact-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin: 1.8rem 0;
}

.contact-pill {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--fg);
}

.contact-pill__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-vivid) 15%, transparent);
  color: var(--accent-vivid);
  flex-shrink: 0;
}

.contact-pill__icon svg {
  width: 20px;
  height: 20px;
}

.contact-pill__data {
  display: flex;
  flex-direction: column;
}

.contact-pill__data span {
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.contact-pill__data strong, .contact-pill__data a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
}

.contact-pill__data a:hover {
  color: var(--accent-vivid);
}

/* ---- lists ---- */
.prose ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .75rem;
  color: var(--fg);
}

.prose ul li {
  position: relative;
  padding-left: 1.9rem;
  margin-top: 0;
  color: var(--fg);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .68em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent-vivid);
}

.prose ol {
  padding-left: 1.3rem;
  color: var(--fg);
  display: grid;
  gap: .6rem;
}

.prose ol li::marker {
  color: var(--accent-vivid);
  font-weight: 700;
}

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

/* ---- inline ---- */
.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;
}

/* ---- figures break out of the measure ---- */
.prose > figure {
  margin: 2.5rem 0;
  text-align: center;
}

.prose figure img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 34px 80px -40px rgba(0, 0, 0, .8);
}

.prose figcaption {
  margin-top: .85rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- pull quote ---- */
.prose > blockquote {
  margin: 2rem 0;
  padding-left: 1.8rem;
  border-left: 3px solid var(--accent-vivid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.28;
  color: var(--fg);
}

/* ---- callout: used across the site and, until now, unstyled ---- */
.infobox {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-vivid);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
  padding: 1.15rem 1.4rem;
}

:root[data-theme="light"] .infobox {
  background: rgba(0, 0, 0, .035);
}

.infobox p {
  margin: 0;
  color: var(--muted);
}

.infobox p + p {
  margin-top: .5rem;
}

/* ---- buttons ---- */
.prose .btn {
  text-decoration: none;
}

.prose .btn--primary {
  color: #fff;
}

.prose p:first-child {
  margin-top: 0;
}

.prose .btn--ghost,
.prose .btn:not(.btn--primary) {
  color: var(--fg);
}

/* red mode already flips the primary label to ink, since its accent is bone */
:root[data-theme="red"] .prose .btn--primary {
  color: var(--fg);
}

/* on amber and blue pages the accent is light enough that white fails on it,
   matching the flip these accents already apply outside prose */
:root[data-accent="amber"]:not([data-theme="red"]) .prose .btn--primary,
:root[data-accent="blue"][data-theme="dark"] .prose .btn--primary {
  color: var(--ink);
}

/* =====================================================================
   FULL-BLEED COVER SECTION
   A section whose background is a photograph running edge to edge. The
   scrim and the type colour are fixed rather than themed: a photo does not
   change with the theme, so contrast must not depend on it either. Reads
   identically in light, dark and red.
   ===================================================================== */
.section--cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F1ECDF;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(.25) contrast(1.05);
}

/* Two layers: a flat wash that guarantees a contrast floor everywhere, and
   a directional gradient that sinks the side the copy sits on. */
.section__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 12, 18, .90) 0%, rgba(10, 12, 18, .74) 45%, rgba(10, 12, 18, .52) 100%),
    linear-gradient(rgba(10, 12, 18, .42), rgba(10, 12, 18, .42));
}

.section--cover .index__label,
.section--cover .index__no {
  color: #F1ECDF;
}

.section--cover h2 {
  color: #FFF6E9;
}

/* On the cover ground the muted token would be a themed colour on a fixed
   dark field, so body copy gets its own value. */
.section--cover .arena-showcase__header p {
  color: rgba(241, 236, 223, .82);
}

/* Feature cards sit on the photo, so they carry their own glass ground
   instead of --surface, which follows the theme. */
.section--cover .feature-card {
  background: rgba(14, 21, 32, .58);
  border-color: rgba(241, 236, 223, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section--cover .feature-card:hover {
  background: rgba(14, 21, 32, .72);
  border-color: var(--red-bright);
}

.section--cover .feature-card h3 {
  color: #FFF6E9;
}

.section--cover .feature-card p {
  color: rgba(241, 236, 223, .78);
}

.section--cover .feature-card__icon {
  background: rgba(241, 236, 223, .08);
  border-color: rgba(241, 236, 223, .2);
}

/* the icon set is dark line art drawn for a light ground */
/* Four across on the cover instead of the 2x2 used in the boxed layout. */
.section--cover .feature-cards {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .section--cover .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* =====================================================================
   SEGMENTS — the audience row, one card per menu hub
   ===================================================================== */
.segments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  margin-top: 2.5rem;
}

.segment {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  min-height: clamp(300px, 34vw, 420px);
  padding: clamp(1.2rem, 1.8vw, 1.7rem);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: #F1ECDF;
  text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-mid) var(--ease-out);
}

.segment__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.segment__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.3) contrast(1.05);
  transform: scale(1.04);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
}

/* Weighted to the bottom, where the label sits; the top stays open so the
   photograph is still readable as a photograph. */
.segment__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 10, 15, .94) 0%, rgba(8, 10, 15, .92) 38%, rgba(8, 10, 15, .74) 52%, rgba(8, 10, 15, .30) 78%, rgba(8, 10, 15, .12) 100%);
}

.segment__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--red-bright);
}

.segment h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.15;
  color: #FFF6E9;
}

.segment p {
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(241, 236, 223, .82);
}

.segment__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #FFF6E9;
}

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

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

.segment:hover .segment__media img {
  transform: scale(1.1);
  filter: grayscale(0) contrast(1.05);
}

.segment:hover .segment__more i {
  transform: translateX(5px);
}

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

/* red mode: the accent token becomes bone, which would vanish against the
   bone copy on the card's dark ground — keep the kicker vermilion. */
:root[data-theme="red"] .segment__kicker {
  color: #FF6B57;
}

:root[data-theme="red"] .segment:hover,
:root[data-theme="red"] .section--cover .feature-card:hover {
  border-color: #FF6B57;
}

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

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

  .segment {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .segment,
  .segment__media img,
  .segment__more i {
    transition: none;
  }

  .segment:hover {
    transform: none;
  }

  .segment:hover .segment__media img {
    transform: scale(1.04);
  }
}


/* =====================================================================
   PAGE ACCENT
   The printed flyers give each offering its own colour. Subpages adopt it
   via data-accent on <html>; the home page keeps the brand red so the site
   still reads as one thing.

   Red mode is deliberately excluded. There the accent role is already the
   bone colour, because the whole page ground is vermilion — dropping a
   blue or purple onto that field would be unreadable. The light values
   below are the darker end of each hue so they clear 4.5:1 on bone; the
   dark values are the brighter end for the ink ground.
   ===================================================================== */
/* Two accent roles instead of one.

   --accent-vivid is the brand colour proper: one value in every mode, the
   bright end. It fills buttons, badges, the ticker and the logo — surfaces
   that supply their own ground, where the brightness carries.

   --red stays the value that has to survive as *type* on the page. On the
   bone page that must be the darker end of the same hue: the vivid orange
   measures 1.6:1 there, and 39 selectors paint text with this token. On the
   ink page and the vermilion page the two roles are the same value. */
:root {
  --accent-vivid: var(--red);
}

:root[data-accent="blue"]:not([data-theme="red"]) {
  --red: #1565C0;
  --red-bright: #1E7FE0;
  --red-deep: #0B4E93;
  --accent-vivid: #3D96F0;
  --grad-red: linear-gradient(135deg, #0B5FBF 0%, #3D96F0 100%);
}

:root[data-accent="amber"]:not([data-theme="red"]) {
  --red: #E17A02;
  --red-bright: #F08E1C;
  --red-deep: #A85B00;
  --accent-vivid: #FFA929;
  --grad-red: linear-gradient(135deg, #D07A00 0%, #FFA929 100%);
}

:root[data-accent="purple"]:not([data-theme="red"]) {
  --red: #8E1BA0;
  --red-bright: #A21CAF;
  --red-deep: #63106F;
  --accent-vivid: #C74BDB;
  --grad-red: linear-gradient(135deg, #8E1BA0 0%, #C74BDB 100%);
}


:root[data-accent="blue"][data-theme="dark"] {
  --red: #3D96F0;
  --red-bright: #6FB6FF;
  --grad-red: linear-gradient(135deg, #0B5FBF 0%, #3D96F0 100%);
}

:root[data-accent="amber"][data-theme="dark"] {
  --red: #FFA929;
  --red-bright: #FFC163;
  --grad-red: linear-gradient(135deg, #D07A00 0%, #FFA929 100%);
}

:root[data-accent="purple"][data-theme="dark"] {
  --red: #C74BDB;
  --red-bright: #DC7BEB;
  --grad-red: linear-gradient(135deg, #8E1BA0 0%, #C74BDB 100%);
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="blue"]:not([data-theme="light"]):not([data-theme="red"]) {
    --red: #3D96F0;
    --red-bright: #6FB6FF;
    --grad-red: linear-gradient(135deg, #0B5FBF 0%, #3D96F0 100%);
  }

  :root[data-accent="amber"]:not([data-theme="light"]):not([data-theme="red"]) {
    --red: #FFA929;
    --red-bright: #FFC163;
    --grad-red: linear-gradient(135deg, #D07A00 0%, #FFA929 100%);
  }

  :root[data-accent="purple"]:not([data-theme="light"]):not([data-theme="red"]) {
    --red: #C74BDB;
    --red-bright: #DC7BEB;
    --grad-red: linear-gradient(135deg, #8E1BA0 0%, #C74BDB 100%);
  }
}

/* Amber and blue are light enough that bone type on them fails; the primary
   button fills with the accent, so its label flips to ink on those pages.
   Purple stays dark enough to keep bone. */
:root[data-accent="amber"]:not([data-theme="red"]) .btn--primary,
:root[data-accent="amber"]:not([data-theme="red"]) .badge {
  color: var(--ink);
}

:root[data-accent="amber"][data-theme="dark"] .btn--primary,
:root[data-accent="blue"][data-theme="dark"] .btn--primary,
:root[data-accent="amber"][data-theme="dark"] .badge {
  color: var(--ink);
}

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

  :root[data-accent="amber"]:not([data-theme="light"]):not([data-theme="red"]) .btn--primary,
  :root[data-accent="blue"]:not([data-theme="light"]):not([data-theme="red"]) .btn--primary,
  :root[data-accent="amber"]:not([data-theme="light"]):not([data-theme="red"]) .badge {
    color: var(--ink);
  }
}

/* =====================================================================
   PLANS — membership tiers and per-head rates, straight off the flyers
   ===================================================================== */
/* The grid had a top margin but no bottom one, so whatever followed it — the
   academy's benefit list, say — sat flush against the cards. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.3rem, 2vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-snap);
}

.plan:hover {
  transform: translateY(-3px);
  border-color: var(--red);
}

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

.plan__fig {
  font-family: var(--font-numeral);
  font-weight: 900;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  color: var(--fg);
}

.plan__fig span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .95rem;
  color: var(--muted);
  margin-left: .35rem;
}

.plan ul {
  list-style: none;
  margin-top: .3rem;
  display: grid;
  gap: .35rem;
}

.plan li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--muted);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--red);
}

/* A named group of rows — the flyers price the same activity differently
   per audience, so the audience is the heading and the rows sit under it. */
.rate-group {
  margin-top: 2.2rem;
}

.rate-group__head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--fg);
}

.rate-group__head h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.rate-group__head small {
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

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

.rate__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}

.rate__name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .84rem;
  color: var(--muted);
  margin-top: .15rem;
}

.rate__dur {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
}

.rate__fig {
  font-family: var(--font-numeral);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--red);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .rate {
    grid-template-columns: 1fr auto;
  }

  .rate__dur {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Checklist — "kaj vključuje ponudba" on the flyers */
.checks {
  list-style: none;
  display: grid;
  gap: .6rem;
  margin-top: 1.6rem;
}

.checks li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}

.checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--red);
}

/* Two equal text columns — used where a flyer splits one offering into two
   halves (sportni/druzabni del, vsebina/cena). The default .split centres a
   text column against a media column, which mis-aligns two text columns. */
.split--even {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  /* the default .split follows an index row; this one follows a section lead,
     which leaves no room of its own */
  margin-top: 2.5rem;
}

.split--even .split__text h3 {
  margin-bottom: 1rem;
}


/* =====================================================================
   FIXED-GROUND OVERRIDES
   .section--cover and .segment paint their type onto a photograph behind a
   fixed dark scrim, so their colours must not follow the theme. Red mode
   sets h1/h2/h3 to ink for the vermilion page ground; on these two
   components that rule made the headings invisible. These selectors carry
   the attribute so they outrank it in every theme.
   ===================================================================== */
:root[data-theme] .section--cover h2,
:root[data-theme] .section--cover h3,
:root[data-theme] .segment h3 {
  color: #FFF6E9;
}

:root[data-theme] .section--cover .index__no,
:root[data-theme] .section--cover .index__label,
:root[data-theme] .segment__more {
  color: #F1ECDF;
}

:root[data-theme] .section--cover .arena-showcase__header p,
:root[data-theme] .section--cover .feature-card p {
  color: rgba(241, 236, 223, .84);
}

:root[data-theme] .segment p {
  color: rgba(241, 236, 223, .86);
}

/* The kicker is the one accent-coloured thing on the card. Vermilion on the
   scrim clears AA; the red theme's bone accent would not, so it is pinned. */
:root[data-theme] .segment__kicker {
  color: #FF6B57;
}

/* =====================================================================
   RED MODE — new components on the themed (vermilion) ground
   There the accent role is bone and --muted is a bone tint; both land
   around 3:1 on vermilion. Ink is the only value that clears 4.5, so these
   components use it for their small copy and figures.
   ===================================================================== */
:root[data-theme="red"] .plan,
:root[data-theme="red"] .rate,
:root[data-theme="red"] .rate-group__head,
:root[data-theme="red"] .checks {
  color: var(--fg);
}

:root[data-theme="red"] .plan__name,
:root[data-theme="red"] .plan li,
:root[data-theme="red"] .rate__fig,
:root[data-theme="red"] .rate__dur,
:root[data-theme="red"] .rate__name small,
:root[data-theme="red"] .rate-group__head small,
:root[data-theme="red"] .checks li,
:root[data-theme="red"] .plan__fig span {
  color: var(--fg);
}

:root[data-theme="red"] .plan li::before,
:root[data-theme="red"] .checks li::before {
  color: var(--fg);
  background: var(--fg);
}

:root[data-theme="red"] .checks li::before {
  background: none;
}

/* Red mode's --surface is a deeper vermilion than --bg, so ink on it lands at
   4.22:1. The plan cards keep the page ground instead, where ink is 5.4:1;
   the border and the accent top rule still read them as cards. */
:root[data-theme="red"] .plan {
  background: var(--bg);
}


/* =====================================================================
   LOGO FOLLOWS THE PAGE ACCENT
   The red half of the wordmark takes the page's accent colour. These are
   recoloured copies of the same SVG rather than a hue-rotate filter: a
   filter missed the target by a wide margin on the ink variant and dragged
   the neutral half of the logo along with it.

   Swapped with content: url() so no page markup changes — the paths resolve
   against this stylesheet, so they work from subdirectories too. Red mode is
   excluded; there the logo is already bone-on-vermilion and carries no red.
   ===================================================================== */
:root[data-accent="blue"]:not([data-theme="red"]) .logo-dark {
  content: url('../assets/MsA-logo-blue.svg');
}

:root[data-accent="blue"]:not([data-theme="red"]) .logo-light {
  content: url('../assets/MSA-logo-1-blue.svg');
}

:root[data-accent="amber"]:not([data-theme="red"]) .logo-dark {
  content: url('../assets/MsA-logo-amber.svg');
}

:root[data-accent="amber"]:not([data-theme="red"]) .logo-light {
  content: url('../assets/MSA-logo-1-amber.svg');
}

:root[data-accent="purple"]:not([data-theme="red"]) .logo-dark {
  content: url('../assets/MsA-logo-purple.svg');
}

:root[data-accent="purple"]:not([data-theme="red"]) .logo-light {
  content: url('../assets/MSA-logo-1-purple.svg');
}


/* =====================================================================
   FULL-BLEED PAGE HEROES
   The remaining split heroes (text column beside a framed image) now run
   the photograph edge to edge, matching the station pages. The scrim comes
   from .page-hero--photo, which fades the theme's own --bg across the image
   so the type sits on the page colour rather than on the picture.

   Three of the old images could not carry this: a poster with baked-in
   text, an icon placeholder, and a stock basketball gym that is not this
   arena. Those pages take an arena photograph instead, or no photo at all.
   ===================================================================== */
.page-hero--postaje {
  background-image: url('../assets/padel-igralec-multisport-arena.avif');
  background-position: center 38% !important;
}

/* the source has a composite seam down its right edge, so the crop is
   widened past it rather than showing it */
.page-hero--otroke {
  background-image: url('../assets/sportni-dan-za-sole-multisport-arena.avif');
  background-size: 116% auto !important;
  background-position: 42% 42% !important;
}

.page-hero--podjetja {
  background-image: url('../assets/poslovno-druzenje-padel-nogomet.avif');
  background-position: center 46% !important;
}

.page-hero--lab360 {
  background-image: url('../assets/akademija-lab360-soccerbot-trening.avif');
  background-position: center 48% !important;
}

.page-hero--rojstnidan {
  background-image: url('../assets/otroski-rojstni-dan-multisport-arena.avif');
  background-position: center 44% !important;
}

/* the camp poster has its own headline printed on it, so the school shot
   stands in — it shows the same programme without competing type */
.page-hero--varstvo {
  background-image: url('../assets/sportni-dan-za-sole-multisport-arena.avif');
  background-size: 116% auto !important;
  background-position: 44% 52% !important;
}

/* The school-day page owns this shot; .page-hero--varstvo above only borrows
   it because the camp poster carries its own printed headline. */
.page-hero--sportnidan {
  background-image: url('../assets/sportni-dan-za-sole-multisport-arena.avif');
  background-size: 116% auto !important;
  background-position: 44% 52% !important;
}

.page-hero--dogodki {
  background-image: url('../assets/poslovni-dogodek-multisport-arena.avif');
  background-position: center 42% !important;
}

.page-hero--teambuilding {
  background-image: url('../assets/poslovno-druzenje-padel-nogomet.avif');
  background-position: 30% 50% !important;
}

/* Speed Court has no photograph yet, so its hero is simply full width. */
.page-hero--wide .page-hero__inner {
  display: block;
}

.page-hero--wide .page-hero__inner>div {
  max-width: 720px;
}

/* On narrow screens a wide crop loses its subject, so lift the scrim and
   pull the frame in. */
@media (max-width: 820px) {

  .page-hero--postaje,
  .page-hero--otroke,
  .page-hero--podjetja,
  .page-hero--lab360,
  .page-hero--rojstnidan,
  .page-hero--varstvo,
  .page-hero--sportnidan,
  .page-hero--speedcourt,
  .page-hero--dogodki,
  .page-hero--teambuilding {
    background-size: auto 128% !important;
  }
}


/* =====================================================================
   PHOTO-HERO READABILITY
   Moving these heroes to full-bleed put the lead paragraph over the
   photograph, where --muted measured 2.86–3.53:1 — worse than the boxed
   layout it replaced. Two changes fix it, and they also lift the station
   pages that already used this pattern:

   1. the scrim holds the page colour solid further across, and falls off
      later, so the text column sits on --bg rather than on the picture;
   2. the lead drops --muted for --fg. Muted grey is a device for a flat
      ground; over a photograph it has nothing to be muted against.
   ===================================================================== */
.page-hero--photo::before {
  background: linear-gradient(100deg,
      var(--bg) 0%,
      var(--bg) 44%,
      color-mix(in srgb, var(--bg) 82%, transparent) 58%,
      color-mix(in srgb, var(--bg) 40%, transparent) 74%,
      transparent 90%);
}

.page-hero--photo .page-hero__lead,
.page-hero--photo .crumbs {
  color: var(--fg);
}

/* Crumb links stay on --fg rather than taking the accent. At 0.72rem the
   accent measured 3.5–4.28:1 depending on the page, and in red mode the
   accent role is bone, which is worse. The trail is short enough that
   position carries it without a colour cue. */
.page-hero--photo .crumbs a {
  color: var(--fg);
}

/* Below the split the gradient runs top-to-bottom instead: the crop is
   tighter there and a left-to-right fade leaves the text on open picture.
   The stops are in vh, not percentages, so they line up with the picture
   band the padding reserves rather than sliding with the length of the copy.

   This targets --bg rather than --photo so the studio-shot heroes get it
   too, and sits after the desktop --photo scrim so it wins on mobile. */
@media (max-width: 820px) {
  .page-hero--bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0,
        transparent 18vh,
        color-mix(in srgb, var(--bg) 45%, transparent) 25vh,
        var(--bg) 31vh,
        var(--bg) 100%);
  }
}


/* =====================================================================
   ICONS WITHOUT FRAMES
   The boxed-chip treatment around icons is dropped: the icon itself is the
   mark, and a skewed outline around every one of them added a second shape
   competing with it. Sizing and centring stay, so nothing reflows — only
   the border, panel fill and radius go.
   ===================================================================== */
.theme-toggle,
.burger {
  border: 0;
  border-radius: 0;
}

.theme-toggle:hover {
  background: none;
  color: var(--red);
}

.row__icon,
.feature-card__icon,
.section--cover .feature-card__icon {
  background: none;
  border: 0;
  border-radius: 0;
}

/* the placeholder tile keeps its panel — it stands in for a photograph,
   not for an icon */


/* Feature icons are inline SVG line art on currentColor, so they need no
   filter and read correctly in every theme and on the photo cover. */
.feature-card__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.feature-card__icon {
  color: var(--red);
  width: auto;
  height: auto;
}

.section--cover .feature-card__icon {
  color: #FFF6E9;
}


/* The vivid accent fills the primary button on every accented page now, and
   bone type fails on all three — the label goes to ink. Red mode already
   handles itself, since its accent role is the bone colour. */
:root[data-accent]:not([data-theme="red"]) .btn--primary,
:root[data-accent]:not([data-theme="red"]) .badge {
  color: var(--ink);
}

/* The vivid accent paints the surfaces that carry their own ground. Type keeps
   --red, which stays readable on whatever page it lands on. */
.btn--primary,
.badge {
  background: var(--accent-vivid);
}

.ticker:not(.ticker--ink) {
  background: var(--accent-vivid);
}

:root[data-accent]:not([data-theme="red"]) .btn--primary,
:root[data-accent]:not([data-theme="red"]) .badge {
  color: var(--ink);
}

/* Row icons are inline line art now, so they take the accent from currentColor
   and need none of the invert() the raster set required. The frame around them
   is already gone; this just sets the drawing size and colour. */
.row__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  transform: skew(calc(var(--skew)*-1));
}

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

/* .who cards and dark grounds elsewhere keep bone icons */
.section--cover .row__icon {
  color: #FFF6E9;
}

/* =====================================================================
   ARTICLE — PHOTO HERO
   The article's own photograph carries the top of the page instead of
   sitting inert halfway down the body. A two-stop scrim keeps the title
   legible over any crop.
   ===================================================================== */
.page-hero--article {
  position: relative;
  min-height: clamp(380px, 56vh, 620px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(2.5rem, 6vh, 4.5rem);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .15) 100%),
    linear-gradient(to right, rgba(0, 0, 0, .55) 0%, transparent 65%);
}

.page-hero--article > .shell {
  position: relative;
  z-index: 1;
}

.page-hero--article h1 {
  margin-top: .8rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}

.page-hero--article .crumbs,
.page-hero--article .chip {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* =====================================================================
   ARTICLE — OPENING FLOURISH
   ===================================================================== */
.prose > .lede + p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.6em;
  line-height: .82;
  padding: .06em .14em 0 0;
  color: var(--accent-vivid);
}

/* =====================================================================
   ARTICLE — RELATED CARDS
   ===================================================================== */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 1.6rem;
}

.rel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

:root[data-theme="light"] .rel-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .08);
}

.rel-card:hover {
  border-color: var(--accent-vivid);
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--accent-vivid) 40%, transparent);
}

:root[data-theme="light"] .rel-card:hover {
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .12), 0 0 0 1px color-mix(in srgb, var(--accent-vivid) 40%, transparent);
}

.rel-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2, rgba(0, 0, 0, .2));
}

.rel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.rel-card:hover .rel-card__media img {
  transform: scale(1.07);
  filter: brightness(1.03);
}

.rel-card__body {
  display: block;
  padding: 1.2rem 1.3rem 1.4rem;
}

.rel-card time {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-vivid);
  margin-bottom: .5rem;
  transition: color 0.3s ease;
}

.rel-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--fg);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rel-card:hover .rel-card__title {
  color: var(--accent-vivid);
}

/* =====================================================================
   ARTICLE — CLOSING CALL TO ACTION
   ===================================================================== */
.cta-band {
  position: relative;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-block: clamp(2.6rem, 6vh, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 320px at 15% 0%, color-mix(in srgb, var(--accent-vivid) 14%, transparent), transparent 70%),
    rgba(255, 255, 255, .02);
}

:root[data-theme="light"] .cta-band {
  background:
    radial-gradient(900px 320px at 15% 0%, color-mix(in srgb, var(--accent-vivid) 12%, transparent), transparent 70%),
    rgba(0, 0, 0, .02);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.4rem, 3vw, 3rem);
}

.cta-band__kicker {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-vivid);
  margin-bottom: .5rem;
}

.cta-band__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
}

.cta-band__lead {
  margin-top: .7rem;
  max-width: 48ch;
  color: var(--muted);
}

.cta-band__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .page-hero--article {
    min-height: clamp(320px, 46vh, 440px);
  }

  .prose > .lede + p::first-letter {
    font-size: 3em;
  }
}

/* =====================================================================
   OPENING HOURS
   ===================================================================== */
.footer__hours {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.9;
  font-size: .92rem;
}

.footer__hours strong {
  display: block;
  color: var(--fg);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}

/* on the contact page the hours sit beside the addresses, so they take the
   same card, with the times pulled to the right where they can be scanned */
.contact-card--hours {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

/* the card is narrow, so the day range wraps to two or three lines and
   leaves the time stranded beside it. Stacking them keeps both readable and
   puts the hours in the display face, where they can be scanned. */
.contact-card--hours .hours-row {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}

.contact-card--hours .hours-row > span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-card--hours .hours-row:first-of-type {
  border-top: 0;
}

.contact-card--hours .hours-row b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--fg);
  white-space: nowrap;
}