/* ==========================================================================
   FIRST BELL — design system
   Fight-brand: pure black ground, one hot red, heavy condensed display type.
   Deliberately single-theme (dark). A fight poster is not theme-aware.
   ========================================================================== */

/* ── Fonts (self-hosted; latin-ext included for ă â î ș ț) ────────────────── */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --black: #000000;
  /* Surface ramp. Every step is a real, visible lift off the ground — the old
     ramp topped out at #171717 and the whole page read as one flat void.
     Panels now separate from black without introducing any colour. */
  --panel: #101010;
  --panel-2: #171717;
  --panel-3: #1f1f1f;
  --line: #2a2a2a;
  --line-2: #3a3a3a;

  /* Edge light. A 1px top highlight is what makes a dark surface read as LIT
     rather than as a hole. Used on cards, not on full-bleed bands. */
  --edge: rgba(255, 255, 255, 0.085);
  --edge-strong: rgba(255, 255, 255, 0.14);

  /* Deep fight red for fills: buttons, badges, dots, rules, display type.
     White on it is 6.2:1. Darkened from #e11d2e, which read too bright. */
  --red: #c1121f;
  /* Hover / focus lift, lighter than the base so a press reads as light. */
  --red-hot: #d91a28;
  /* Small red TEXT on black. #c1121f is only 3.4:1 on black and fails AA at
     eyebrow sizes; this is the darkest red in the same family that passes
     (4.8:1). Display-size red text uses --red, large type only needs 3:1. */
  --red-text: #e3343f;
  --red-dim: rgba(193, 18, 31, 0.14);

  --white: #ffffff;
  --text: #e4e4e4;
  --muted: #8f8f8f;
  --faint: #6f6f6f; /* was #5c5c5c — under 3:1 on black, failed AA for labels */

  --green: #12b981;
  --amber: #f59e0b;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fixed header offset for in-page anchors */
  scroll-padding-top: 90px;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Layout primitives ────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

/* A lit band. Not a white panel — a light SOURCE. A soft overhead pool plus a
   thin wash lifts the block off pure black so the cards inside have something
   to sit on, while the ground stays black and the brand stays a fight poster.
   Painted on a ::before at z-index -1 so it never intercepts clicks. */
.section--lit { position: relative; isolation: isolate; }
.section--lit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Radial only, deliberately. A flat linear wash gave the band a hard
     full-width top edge and it read as a grey slab; a single pool that falls
     off toward the gutters reads as light with a source. */
  background: radial-gradient(78% 62% at 50% 0%,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.028) 52%,
    transparent 80%);
}
/* Hairline where the light lands — the lip of a lit stage, not a box border. */
.section--lit::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-strong) 34%, var(--edge-strong) 66%, transparent);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Typography ───────────────────────────────────────────────────────────── */
/* Anton set in Romanian needs more leading than Anton set in English.
   `Ă Â Î` carry a breve/circumflex ABOVE the cap line and `Ș Ț` carry a comma
   BELOW the baseline, so the real ink box of an all-caps RO line is roughly
   0.89em tall — taller than the 0.86 line-height this used to run at. Every
   heading that wrapped had its diacritics touching the line beneath it.
   0.94 clears the accents and still reads as poster-tight. */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--white);
  /* Anton's counters close up at display sizes; balance beats a 1-word orphan. */
  text-wrap: balance;
}

/* Sizes are deliberately smaller than before. The old --lg capped at 5.5rem
   (88px), which overflowed every heading sitting in a half-width column and
   forced 4- and 5-line ragged blocks. Condensed type does not need 88px to
   feel loud. Tracking goes slightly negative as size goes up — standard
   optical correction, the letterfit loosens visually as the glyphs grow. */
.display--xl { font-size: clamp(3.2rem, 11.5vw, 9rem);    line-height: 1.18; letter-spacing: -0.018em; }
.display--lg { font-size: clamp(2.1rem, 5.2vw, 3.75rem);  letter-spacing: -0.012em; }
.display--md { font-size: clamp(1.7rem, 3.4vw, 2.5rem);   letter-spacing: -0.008em; }
.display--sm { font-size: clamp(1.3rem, 2.4vw, 1.7rem);   line-height: 1.2;  letter-spacing: 0; }

/* Headings that live inside a text column must not run wider than they read.
   Without this, a 2-line authored heading becomes a 5-line wall on desktop. */
.display--lg, .display--md { max-width: 20ch; }
.center .display--lg, .center .display--md,
.cta .display--lg { max-width: none; margin-inline: auto; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--red);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 56ch;
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--white);
  --btn-fg: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary action. White with black ink since 2026-10-13 (was red): on a black
   page it is the brightest thing on screen, and red stays an accent. The class
   keeps its name so every call site stays as it is. */
.btn--red { --btn-bg: var(--white); --btn-fg: #000; }
.btn--red:hover { --btn-bg: #e6e6e6; }
/* Inside the white event cards a white button would vanish: invert it. */
.event .btn--red { --btn-bg: #000; --btn-fg: #fff; }
.event .btn--red:hover { --btn-bg: #262626; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.05); }
.btn--ghost .btn__arrow svg { color: #000; }

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.btn__arrow svg { width: 11px; height: 11px; }
.btn--red .btn__arrow svg, .btn__arrow svg { color: var(--btn-bg); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 74px;
}

.brand { display: flex; align-items: center; gap: 0.7rem; }
/* The lockup is stacked (2.15:1) with a small FIGHT NIGHT line, so it needs
   more height than a one-line wordmark to stay legible. */
.brand img { height: 46px; width: auto; }
.footer .brand img { height: 64px; }
@media (max-width: 900px) { .header .brand img { height: 40px; } }
.brand__word {
  font-family: var(--display);
  font-size: 1.18rem;
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--red);
  transition: width 0.3s var(--ease);
}
.nav a:hover::after { width: 100%; }

.header__cta { display: flex; align-items: center; gap: 0.75rem; }

.burger {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--white);
  position: relative;
  transition: background-color 0.2s;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--white);
  transition: transform 0.3s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 74px 0 auto 0;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem var(--gutter) 2.25rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 99;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 1.25rem; }

.nav a { white-space: nowrap; }

/* RO / HU switch. A quiet two-segment pill: it must be findable on every
   screen (the audience is bilingual) without competing with the ticket CTA. */
.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}
.lang a {
  min-width: 34px;
  padding: 0.42rem 0.55rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}
.lang a:hover { color: var(--white); }
.lang a[aria-current='true'] { background: var(--white); color: #000; }

/* The logo must never be the thing that gives way when the bar gets full. */
.header .brand { flex: none; }

/* Logo, six nav items, the RO/HU switch and two pill buttons do not fit the
   1240px container, least of all with the longer Hungarian labels: the logo
   was squeezed to nothing. The fighter CTA lives in the hero, the audience
   card and the menu, so the header keeps only the ticket button. */
.header__cta .btn--ghost { display: none; }

@media (max-width: 1180px) {
  .nav { gap: 1.4rem; }
}

/* With the language switch in the bar, six links stop fitting below ~1100px
   (the ticket button touched the screen edge at 1024). Fold them earlier. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* Phones: logo, language switch, menu. The ticket button is the first
   button in the hero and the first item in the menu; the switch is what a
   Hungarian visitor landing on the Romanian page has to find. */
@media (max-width: 560px) {
  .header__cta .btn--red { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: 120px;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media { background: #000; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The fighter stands at ~71% of the wide frame. Anchoring there keeps him
     in view on any aspect, and leaves the dark left for the headline. */
  object-position: 71% 30%;
  filter: contrast(1.08) brightness(0.92);
}

/* Fight-night lighting over the photo: a cold overhead spot on the fighter,
   the only lit thing in the hall, and a heavy vignette and floor fade so the
   edges fall into arena darkness and the headline always sits on black. */
.hero__light {
  position: absolute;
  inset: 0;
  /* Above the shadow layer (::after): light falls on the dark, not under it. */
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 55% at 71% 18%, rgba(255, 255, 255, 0.10), transparent 70%);
  mix-blend-mode: screen;
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 70% 35%, transparent 38%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(to top, #000 3%, rgba(0, 0, 0, 0.6) 30%, transparent 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 26%),
    linear-gradient(to right, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 46%, transparent 68%);
}
@media (max-width: 560px) {
  .hero { min-height: 0; padding-top: 0; justify-content: flex-start; }
  /* Phones: a poster, not an overlay. The portrait frame sits on top at its
     own 2:3 ratio, so the fighter on the cage is shown whole, never under
     the type. The headline starts over the faded net at its feet and the
     rest of the copy runs on black below. */
  .hero__media {
    position: relative;
    inset: auto;
    /* hero-climb-tall is pre-cropped (top 14% of empty dark removed, room left
       for the header above his head), so it shows at its own ratio. */
    aspect-ratio: 1000 / 1290;
    /* Pull the copy up so the second headline line, "ÎN RING.", stands on the
       top rail of the cage. The frame is 129vw tall and the rail sits at 53%
       of it (68.8vw); the title is two lines of max(3.2rem, 11.5vw) x 1.18. */
    /* --hero-copy-top: where the headline starts, as a fraction of the frame
       height (0 = top of the photo, 1 = its bottom edge). Set with the
       preview-only editor at /editor/hero. Frame height is 129vw. */
    margin-bottom: calc(-129vw * (1 - var(--hero-copy-top, 0.306)));
  }
  /* --hero-photo-x slides the photo sideways (default: the fighter moves right,
     away from the copy). The frame's backdrop matches the photo's own dark,
     and the left edge is masked, so the slide never shows a seam. */
  .hero__media { background: #0d0d10; }
  .hero__media img {
    object-position: 50% 100%;
    transform: translateX(var(--hero-photo-x, 16%));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
    mask-image: linear-gradient(to right, transparent 0, #000 24%);
  }
  /* Keep the ticket button above the fold on a phone: the eyebrow repeats the
     marquee right below, and the gaps tighten. */
  .hero__eyebrow { display: none; }
  .hero__title { margin-bottom: 0.9rem; font-size: var(--hero-title-size, clamp(3.2rem, 11.5vw, 9rem)); }
  .hero--center .hero__inner { text-align: center; }
  .hero--center .hero__sub { margin-inline: auto; }
  .hero--center .hero__actions, .hero--center .hero__socials { justify-content: center; }
  .hero__sub { margin-bottom: 1.5rem; }
  .hero__actions { margin-bottom: 2rem; }
  .hero__light {
    background: radial-gradient(75% 40% at 50% 20%, rgba(255, 255, 255, 0.10), transparent 70%);
  }
  .hero__media::after {
    background:
      linear-gradient(to top, #000 0%, #000 4%, rgba(0, 0, 0, 0.45) 16%, transparent 32%),
      /* The copy now sits on the photo: shade its side so it stays legible. */
      linear-gradient(to right, rgba(0, 0, 0, var(--hero-shade, 0.6)) 0%, rgba(0, 0, 0, calc(var(--hero-shade, 0.6) * 0.42)) 50%, transparent 72%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 18%),
      radial-gradient(120% 80% at 50% 35%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
  }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
  font-size: clamp(0.62rem, 1.5vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.hero__eyebrow span { color: var(--red-text); }

.hero__title { margin-bottom: 1.9rem; }
/* The mask has to clip the BOTTOM (that's what hides the rising text) but it
   must not clip the TOP — `Ă` and `Î` carry a breve/circumflex above the cap
   line and overflow:hidden was slicing them clean off, so "INTRĂ ÎN RING"
   rendered as "INTRA IN RING". Padding opens headroom inside the clip box;
   the negative margin puts the line back where it was, so layout is unchanged. */
.hero__title .line {
  display: block;
  overflow: hidden;
  /* Headroom = how far the accent ink sits above the line box:
     (contentBox 1.505em - lineHeight 1.18em) / 2 - (ascent 1.175em - accentTop
     1.1006em) = 0.088em. 0.26em is that with room to spare. */
  padding-top: 0.26em;
  margin-top: -0.26em;
}
.hero__title .line > span {
  display: block;
  animation: rise 1s var(--ease) both;
}
.hero__title .line:nth-child(2) > span { animation-delay: 0.09s; }
.hero__title em {
  font-style: normal;
  color: var(--red);
}

@keyframes rise {
  /* Must clear the mask's extra top padding, otherwise a sliver of the glyph
     tops is parked inside the box before the animation runs. */
  from { transform: translateY(130%); }
  to { transform: translateY(0); }
}

.hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  color: #cfcfcf;
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.75rem; }

.hero__next {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.15rem 0.7rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.hero__next strong { color: var(--white); font-weight: 700; }

.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  position: relative;
  flex: none;
}
.pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--red);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.hero__socials {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 3;
}
.hero__socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  color: var(--text);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.hero__socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.hero__socials svg { width: 16px; height: 16px; }

@media (max-width: 780px) {
  /* .hero is a flex row; once .hero__socials stops being absolutely positioned
     it becomes a sibling flex ITEM of .hero__inner and gets pushed off-screen
     to the right. Stacking the hero fixes it — the icons were unreachable on
     phones, hidden by body{overflow-x:hidden}. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
  }
  /* Hero image position on phones lives with the hero rules above: the
     phone gets its own portrait file (hero-climb-tall) since 2026-10-14. */
  .hero__socials {
    flex-direction: row;
    position: static;
    margin-top: 2rem;
    padding-inline: var(--gutter);
  }
}

/* ── Marquee ──────────────────────────────────────────────────────────────── */
.marquee {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #131313, #0b0b0b);
  overflow: hidden;
  padding-block: 1.15rem;
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 38s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
}
.marquee span {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.marquee .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ── Gallery preview (home) ───────────────────────────────────────────────── */
/* An editorial mosaic, not a uniform card grid: one big fight frame, one tall
   walkout, two small frames stacked. Photos sit slightly desaturated like the
   rest of the page and come to full colour on hover, which is also the cue
   that they are clickable. */
.gallery-preview { padding-bottom: 0; }
.gallery-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.gallery-preview__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: clamp(150px, 16vw, 225px);
  gap: clamp(0.5rem, 1vw, 0.85rem);
}
.gallery-preview__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel-2);
}
/* Hairline edge: several frames have a black background and would otherwise
   dissolve into the page, which breaks the mosaic. */
.gallery-preview__tile::after,
.gal__item a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.gallery-preview__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.06);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.gallery-preview__tile:hover img,
.gallery-preview__tile:focus-visible img { transform: scale(1.04); filter: none; }
.gallery-preview__tile--1 { grid-row: span 2; }
.gallery-preview__tile--2 { grid-row: span 2; }
.gallery-preview__tile--2 img { object-position: 50% 30%; }
/* Tile 3 is landscape on desktop; the kneeling fighter is a portrait frame,
   so aim at his back and the mat, not the dark above the cage. */
.gallery-preview__tile--3 img { object-position: 50% 52%; }
.gallery-preview__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.15) 70%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.gallery-preview__more b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--red);
}

@media (max-width: 700px) {
  .gallery-preview__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(120px, 34vw, 170px);
  }
  .gallery-preview__tile--1 { grid-column: span 2; }
  .gallery-preview__tile--2 { grid-row: span 2; }
}

/* ── Pillars (inside the intro) ───────────────────────────────────────────── */
/* A ruled list, not cards: three statements set in the display face, each
   with its line of detail, the way a fight card lists the bouts. */
.pillar-list {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-2);
}
.pillar-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  flex-wrap: wrap;
  padding: clamp(0.95rem, 1.6vw, 1.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.pillar-list h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
}
.pillar-list p {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: right;
}
/* Side by side needs the full desktop column; below it one row would wrap
   and the other two would not, so every row stacks the same way. */
@media (max-width: 1180px) {
  .pillar-list li { flex-direction: column; }
  .pillar-list p { text-align: left; }
}

/* ── Split feature ────────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.08);
  transition: transform 0.9s var(--ease);
}
.split:hover .split__media img { transform: scale(1.04); }

.split--intro { align-items: stretch; }
.split--intro .split__media { aspect-ratio: auto; min-height: 460px; }
.split--intro .split__media img { position: absolute; inset: 0; object-position: 50% 45%; }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  /* Stacked: the photo sets its own height in flow. A box sized only by
     aspect-ratio while the grid stretches it, with an absolute image inside,
     collapses to 0px on some iOS Safari versions and the lazy image never
     loads. */
  .split--intro .split__media { min-height: 0; aspect-ratio: auto; align-self: start; }
  .split--intro .split__media img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .split--reverse .split__media { order: 0; }
}

/* ── Event cards ──────────────────────────────────────────────────────────── */
.events { display: grid; gap: 1.5rem; }

.event {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  /* Top-lit surface: brighter at the top edge, settling toward the ground.
     The inset highlight is the 1px that makes a dark card read as a lit
     object instead of a hole cut in the page. */
  /* White card on the lit band: the event is the one thing on the page that
     should read like a printed ticket. Everything inside flips to dark ink. */
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #ffffff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.event:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.95);
}
.event--live { border-color: var(--red); }
.event--live:hover { border-color: var(--red-hot); }
/* 0.55 read as switched-off. A past edition is de-emphasised, not disabled. */
.event--past { opacity: 0.72; }
.event--past:hover { opacity: 0.9; }

.event__poster {
  position: relative;
  /* Explicit, not a token: --panel-2 now sits level with the card gradient and
     the poster well needs to stay a touch recessed behind the artwork. */
  background: #1a1a1a;
  min-height: 240px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.event__poster-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(30px) brightness(0.62) saturate(1.25);
  transform: scale(1.2);
}
.event__poster-img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.8s var(--ease);
}
.event:hover .event__poster-img { transform: scale(1.04); }

/* "IN PROGRESS": an edition without artwork yet. Pure black, the words set
   diagonally across the frame like the old site's placeholder, in the display
   face so it reads as part of this brand rather than a missing image. */
.poster-tba {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  /* Size the words from the panel itself, not the viewport: the same panel
     is a wide strip on phones and a tall card on the event page. */
  container-type: size;
}
.poster-tba span {
  font-family: var(--display);
  font-size: 2.6rem;
  font-size: 17cqmin;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  transform: rotate(-38deg);
}
.event__poster .poster-tba { position: absolute; inset: 0; }

.event__badge {
  position: absolute;
  /* Above .event__poster-img (z-index 1), or the contained poster covers it. */
  z-index: 2;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.event__badge--live { background: var(--red); border-color: var(--red); color: #fff; }
.event__badge--soon { color: var(--white); }

.event__body {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.event__date {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.event__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  text-transform: uppercase;
  color: #000;
  line-height: 1.18;
  letter-spacing: -0.008em;
}
.event__venue { font-size: 0.92rem; color: #5f5f5f; }
.event__venue b { color: #111; font-weight: 600; }
.event__venue .faint { color: #8a8a8a; }

.event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #a8a8a8;
}

.event__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; padding-top: 0.5rem; }

.event__stock {
  font-size: 0.78rem;
  color: #5f5f5f;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event__stock b { color: #000; font-size: 0.95rem; }
.event__stock--low { color: #b45309; }
.event__stock--out { color: var(--red); }

/* Dark-ink overrides for components that live inside the white card. */
.event .tag { border-color: #dcdcdc; background: #f4f4f4; color: #444; }
.event .countdown__unit { background: #f4f4f4; border-color: #e2e2e2; box-shadow: none; }
.event .countdown__num { color: #000; }
.event .countdown__label { color: #7a7a7a; }
.event .btn--ghost { --btn-fg: #111; border-color: #cfcfcf; }
.event .btn--ghost:hover { border-color: #111; background: rgba(0, 0, 0, 0.04); }
.event .btn--ghost .btn__arrow svg { color: #fff; }
.event .btn[aria-disabled='true'] { --btn-bg: #111; --btn-fg: #fff; }

@media (max-width: 860px) {
  .event { grid-template-columns: 1fr; }
  .event__poster { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ── Countdown ────────────────────────────────────────────────────────────── */
.countdown { display: flex; gap: 0.6rem; }
.countdown__unit {
  min-width: 64px;
  padding: 0.65rem 0.4rem;
  /* Must sit ABOVE the card gradient, not below it — the old --panel-2 was
     darker than the lifted card and the units read as holes. */
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-align: center;
  box-shadow: inset 0 1px 0 var(--edge);
}
.countdown__num {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 3px;
}

/* ── Audience blocks ──────────────────────────────────────────────────────── */
/* Two solid cards, photo on top, copy below. Both use the
   same lifted grey as the pillars strip. */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.audience__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}
.audience__media { aspect-ratio: 16 / 9; overflow: hidden; }
.audience__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.08);
  transition: transform 0.9s var(--ease);
}
.audience__card:hover .audience__media img { transform: scale(1.05); }
.audience__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.audience__body .btn { margin-top: auto; }
.audience__text { margin-top: 1.1rem; max-width: 44ch; }
.audience__card ul { list-style: none; padding: 0; margin: 1rem 0 1.75rem; }
.audience__card li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.94rem;
}
.audience__card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  background: currentColor;
}

/* One card (the fighter card was removed 2026-10-31): photo beside the copy. */
.audience--single { grid-template-columns: 1fr; }
@media (min-width: 881px) {
  .audience--single .audience__card { flex-direction: row; }
  .audience--single .audience__media { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; }
}

.audience__card--dark {
  /* Same lifted grey as the pillars strip, so it reads as a card, not a hole. */
  background: linear-gradient(180deg, #171717, #0e0e0e);
  color: #fff;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge), 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}
.audience__card--dark .audience__text { color: var(--muted); }
.audience__card--dark li { color: #e4e4e4; }
.audience__card--dark li::before { background: var(--red); }

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

/* ── Story (Despre noi) ───────────────────────────────────────────────────── */
/* The photo column stretches to the height of the text column and the image
   covers it absolutely, so photo and copy always start and end together. */
/* Three rows: photo beside the story and quote, then the Riga card and the
   numbers across the full width. The photo has its own ratio, so it no
   longer grows with everything the text column holds. */
.story {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  grid-template-areas: 'media body' 'award award' 'stats stats';
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.story__media { grid-area: media; aspect-ratio: 4 / 5; }
.story__body { grid-area: body; align-self: center; }
.story__award { grid-area: award; }
.story__stats { grid-area: stats; }
.story__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 420px;
  background: var(--panel-2);
}
/* Now: Mátyás with the First Bell trophy, full colour, face and trophy kept
   in frame whatever height the text column gives the photo. */
.story__now {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
/* Bottom scrim so the inset and caption sit on something, not on the shorts. */
.story__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  pointer-events: none;
}
/* Then: the childhood judo photo, inset in black and white. */
.story__then {
  position: absolute;
  z-index: 1;
  left: clamp(0.9rem, 2vw, 1.25rem);
  bottom: clamp(0.9rem, 2vw, 1.25rem);
  width: 38%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
  background: var(--panel-2);
}
.story__then img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: grayscale(1) contrast(1.15);
}
.story__then .story__caption-tag {
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  margin: 0;
}
.story__caption {
  position: absolute;
  z-index: 1;
  /* Beside the inset, aligned to its bottom edge. */
  left: calc(38% + clamp(1.8rem, 4vw, 2.5rem));
  right: clamp(0.9rem, 2vw, 1.25rem);
  bottom: clamp(0.9rem, 2vw, 1.25rem);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #d6d6d6;
}
.story__caption-tag {
  display: block;
  width: fit-content;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.story__body { display: flex; flex-direction: column; gap: 1.5rem; }
.story__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text); max-width: 54ch; }
.story__lead strong { display: block; color: var(--white); margin-bottom: 0.35rem; }
/* The founder's European title: the one hard credential in the section, so
   it gets the red tag and display type instead of reading as another card. */
.story__award {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1a1a1a, #101010);
  box-shadow: inset 0 1px 0 var(--edge);
}
.story__award-tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.story__award-title .nw { white-space: nowrap; }
.story__award-title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--white);
}
.story__award-results {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.story__award-results b { color: var(--white); font-weight: 700; }

/* The final itself, under the result. The arena photo is bright and blue;
   desaturate and darken it toward the site's black, with a floor fade so it
   melts into the card instead of sitting on it like a pasted screenshot. */
.story__award-photo {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #000;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}
.story__award-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  filter: saturate(0.55) contrast(1.08) brightness(0.82);
  transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}
.story__award:hover .story__award-photo img { filter: saturate(0.85) contrast(1.05) brightness(0.92); transform: scale(1.03); }
.story__award-photo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 42%);
}
.story__award-photo figcaption {
  position: absolute;
  z-index: 1;
  left: 0.9rem; right: 0.9rem; bottom: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}

/* Founder quote. No box: a large red opening mark, the words in body type
   at reading size, and his face and name as the signature. */
.story__quote {
  position: relative;
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0.25rem;
  padding-left: clamp(2.6rem, 4.5vw, 3.4rem);
}
.story__quote::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: var(--display);
  font-size: clamp(4rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--red);
}
.story__quote blockquote { margin: 0; }
.story__quote blockquote p {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  color: var(--white);
}
.story__quote blockquote p + p { margin-top: 0.7rem; color: var(--text); }
.story__quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.15rem;
}
.story__quote figcaption span {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}
.story__quote figcaption strong { color: var(--white); font-size: 0.92rem; }

.story__blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.story__block {
  padding: 1.25rem 1.35rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #171717, #101010);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge);
  font-size: 0.92rem;
  color: var(--muted);
}
.story__block p + p { margin-top: 0.4rem; }
.story__block strong { color: var(--white); }
.story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.story__stats dt {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--white);
  text-transform: uppercase;
}
.story__stats dd { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.story__sign { font-size: 0.9rem; color: var(--muted); }
.story__sign strong { color: var(--white); }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; grid-template-areas: 'media' 'body' 'award' 'stats'; }
  .story__award { grid-template-columns: 1fr; }
  /* Same in-flow sizing as .split--intro above; the inset and caption stay
     absolute overlays on top of the photo. */
  .story__media { min-height: 0; aspect-ratio: auto; align-self: start; }
  .story__now { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 4; max-height: 640px; }
  .story__then .story__caption-tag { font-size: 0.56rem; padding: 0.3rem 0.55rem; }
}
@media (max-width: 520px) {
  .story__blocks { grid-template-columns: 1fr; }
  .story__stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: clamp(0.98rem, 1.8vw, 1.12rem);
  font-weight: 600;
  color: var(--white);
  transition: color 0.25s;
}
.faq__q:hover { color: var(--red-text); }
.faq__icon {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  position: relative;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.faq__icon::before { width: 11px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 11px; }
.faq__item.is-open .faq__icon { background: var(--red); border-color: var(--red); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; color: var(--muted); max-width: 66ch; }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}
.cta img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(0.6) brightness(0.4);
}
.cta::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
}
.cta .lede { margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--panel);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__about { max-width: 38ch; font-size: 0.9rem; color: var(--muted); }
.footer__col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.footer__col a {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  padding-block: 0.3rem;
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--faint);
}
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--white); }

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}

/* ── Gallery page ─────────────────────────────────────────────────────────── */
.gal-hero {
  padding-top: clamp(8rem, 14vw, 10.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.gal-hero__inner { display: flex; flex-direction: column; gap: 1.4rem; }
.gal-hero__title { font-size: clamp(3rem, 9vw, 7.25rem); max-width: 12ch; }
.gal-hero__title em { font-style: normal; color: var(--red); }
.gal-hero__sub { max-width: 58ch; }
.gal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.gal-hero__meta span:first-child { color: var(--white); }
.gal-hero__meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex: none; }

/* Masonry via columns: every frame keeps its own 3:2 or 2:3 shape, nothing is
   cropped. width/height on the <img> reserve the space before it loads. */
.gal__grid {
  list-style: none;
  padding: 0;
  columns: 3 300px;
  column-gap: clamp(0.5rem, 1vw, 0.85rem);
}
.gal__item {
  break-inside: avoid;
  margin-bottom: clamp(0.5rem, 1vw, 0.85rem);
  /* Deep links (/galerie#foto-35) land below the fixed header. */
  scroll-margin-top: 100px;
}
.gal__item a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel-2);
}
.gal__item img {
  width: 100%;
  transition: transform 0.9s var(--ease), opacity 0.4s var(--ease);
}
.gal__item a:hover img,
.gal__item a:focus-visible img { transform: scale(1.035); }

@media (max-width: 640px) {
  .gal__grid { columns: 2; }
  .gal-hero__meta { gap: 0.5rem 0.7rem; letter-spacing: 0.12em; }
  .gal__item a { border-radius: 8px; }
}

.cta--plain { border-top: 1px solid var(--line); }
.cta--plain::after { display: none; }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
html.lb-open { overflow: hidden; }

.lb {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.96);
  color: var(--text);
  overflow: hidden;
}
.lb::backdrop { background: #000; }
.lb[open] { display: grid; place-items: center; animation: lb-in 0.3s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb__figure {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4.5rem clamp(1rem, 7vw, 6.5rem) 1.5rem;
}
.lb__img {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity 0.25s var(--ease);
}
.lb.is-loading .lb__img { opacity: 0.35; }

.lb__caption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: 70ch;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.lb__count {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--white);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.lb__btn {
  position: absolute;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.lb__btn:hover { background: var(--red); border-color: var(--red); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lb__next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }

@media (max-width: 700px) {
  .lb__figure { padding: 4rem 0.75rem 6rem; }
  .lb__img { max-height: calc(100dvh - 12rem); }
  .lb__caption { flex-direction: column; align-items: center; gap: 0.35rem; padding-inline: 0.5rem; }
  /* Arrows move under the photo: on a phone they would cover it, and swipe
     is the main gesture anyway. */
  .lb__prev, .lb__next { top: auto; bottom: 1.25rem; translate: none; }
  .lb__prev { left: calc(50% - 60px); }
  .lb__next { right: calc(50% - 60px); }
}

/* ── Merch ────────────────────────────────────────────────────────────────── */
/* Products stand on a lit floor: a soft overhead pool on a dark panel, the
   same "light source, not grey slab" idea as .section--lit. */
.merch-home__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.merch-home__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
.merch-tile { display: flex; flex-direction: column; gap: 0.85rem; }
.merch-tile__media {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, 0.09), transparent 72%),
    linear-gradient(180deg, #161616, #0b0b0b);
  transition: border-color 0.35s var(--ease);
}
.merch-tile__media svg, .merch-tile__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform 0.7s var(--ease);
}
.merch-tile:hover .merch-tile__media { border-color: var(--line-2); }
.merch-tile:hover .merch-tile__media svg,
.merch-tile:hover .merch-tile__media img { transform: translateY(-4px) scale(1.03); }
.merch-tile__name {
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
}

@media (max-width: 880px) {
  .merch-home__inner { grid-template-columns: 1fr; }
}

.merch-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.merch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.merch-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #151515, #0d0d0d);
  box-shadow: inset 0 1px 0 var(--edge), 0 24px 50px -28px rgba(0, 0, 0, 0.9);
  scroll-margin-top: 100px;
}
.merch-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 32%, rgba(255, 255, 255, 0.1), transparent 72%),
    linear-gradient(180deg, #181818, #0b0b0b);
}
.merch-card__media svg, .merch-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform 0.8s var(--ease);
}
.merch-card:hover .merch-card__media svg,
.merch-card:hover .merch-card__media img { transform: translateY(-6px) scale(1.03); }
.merch-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.merch-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
}
.merch-card__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--white);
}
.merch-card__tagline { color: var(--muted); font-size: 0.95rem; }
.merch-card__details { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.merch-card__details li {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border: 1px solid var(--line-2); border-radius: 999px; color: #a8a8a8;
}
.merch-card__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
.merch-card__price {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--white);
}
.merch-card__price.is-pending {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.merch-card .btn { padding: 0.85rem 1rem; font-size: 0.72rem; letter-spacing: 0.08em; width: 100%; justify-content: center; }
.merch-note { margin-top: 1.5rem; font-size: 0.82rem; color: var(--faint); }

/* Real product photos (2026-10-25): 3:4 studio shots on their own dark
   backdrop, so they fill the frame instead of floating on the lit panel. */
.merch-card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.merch-card__media picture, .merch-tile__media picture { display: block; width: 100%; height: 100%; }
.merch-card__media.has-photo img, .merch-tile__media.has-photo img {
  object-fit: cover;
  padding: 0;
}
.merch-card:hover .merch-card__media.has-photo .merch-photo,
.merch-tile:hover .merch-tile__media.has-photo .merch-photo { transform: scale(1.04); }
.merch-card:hover .merch-card__media .merch-thumb img { transform: none; }
.merch-thumbs {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  gap: 0.4rem;
}
.merch-thumb {
  display: block;
  width: 2.6rem;
  background: #000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.merch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.merch-thumb:hover, .merch-thumb:focus-visible { opacity: 1; }
.merch-thumb.is-active { opacity: 1; border-color: var(--white); }

@media (min-width: 1181px) {
  .merch-card__body { padding: 1.5rem 1.3rem 1.6rem; }
}
@media (max-width: 1180px) {
  .merch-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .merch-grid { grid-template-columns: 1fr; }
  .merch-card__media { aspect-ratio: 4 / 3; }
  .merch-card__media.has-photo { aspect-ratio: 4 / 5; }
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
/* Scoped to .has-js on purpose. Hiding content by default and relying on
   JavaScript to bring it back means one script error — or a crawler that
   doesn't run JS — renders the page blank. With this scoping, no-JS gets the
   full page immediately and the animation is pure enhancement. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.has-js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; }
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Wide Riga card on desktop: a letterbox photo keeps the card short, and the
   title grows to hold its half of the card. */
@media (min-width: 881px) {
  .story__award-photo { aspect-ratio: 2 / 1; }
  .story__award-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
}

/* ── Payment + ANPC badges (NETOPIA POS requirement) ──────────────────────── */
.paystrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.75rem;
}
.paystrip__label { font-size: 0.78rem; color: var(--faint); margin-right: 0.25rem; }
.paystrip__chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 0.7rem;
  border-radius: 6px;
  background: #fff;
}
.paystrip__chip img { height: 30px; width: auto; }
.paystrip__sal { display: inline-flex; }
.paystrip__sal img { height: 40px; width: auto; border-radius: 4px; }
.footer__col a.footer__withdraw { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }