/* ==========================================================================
   Mathiász LAN — VIII. · 2026
   Kék oldal / piros oldal: the logo's blue→red sweep, broadcast-night mood.
   ========================================================================== */

:root {
  --bg: #05081a;
  --bg-2: #090e24;
  --surface: #0d1431;
  --surface-2: #121a3d;
  --line: rgba(150, 172, 255, 0.14);
  --line-strong: rgba(150, 172, 255, 0.28);
  --text: #eef2ff;
  --muted: #a7b1d1;
  --dim: #8590b4;

  --blue: #2aa4f4;
  --blue-deep: #1356b4;
  --violet: #8b45e0;
  --red: #ff3a4c;
  --red-strong: #d9142c;
  --hu-green: #3aa856;

  --grad: linear-gradient(90deg, #2aa4f4 0%, #8b45e0 50%, #ff3a4c 100%);
  --grad-deep: linear-gradient(115deg, #0f4fae 0%, #5a26a6 50%, #b80f2a 100%);

  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --cut: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  overflow-wrap: break-word; /* edited text may contain words longer than their box */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--red-strong); color: #fff; }

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 0.75rem 1.1rem; background: #fff; color: var(--bg);
  font: 600 0.8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none; transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }
#main:focus { outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared atoms ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7em;
  font: 600 0.72rem/1.2 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.tricolor {
  display: inline-block; width: 22px; height: 10px; flex: none;
  background: linear-gradient(180deg, #e8293b 0 33.3%, #fff 33.3% 66.6%, var(--hu-green) 66.6%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--red); box-shadow: 0 0 0 0 rgba(255, 58, 76, 0.6);
  animation: pulse 1.8s var(--ease) infinite;
}
.live-dot--idle { background: #f5b83d; box-shadow: 0 0 0 0 rgba(245, 184, 61, 0.5); animation-name: pulse-amber; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 58, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 58, 76, 0); } }
@keyframes pulse-amber { 70% { box-shadow: 0 0 0 9px rgba(245, 184, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 184, 61, 0); } }

/* Ambient light: blue side on the left, red side on the right, all the way down */
.ambient {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background:
    radial-gradient(40vw 75vh at -10vw 32%, rgba(42, 164, 244, 0.13), transparent 70%),
    radial-gradient(40vw 75vh at calc(100% + 10vw) 68%, rgba(255, 58, 76, 0.11), transparent 70%);
}
@media (max-width: 760px) {
  .ambient {
    background:
      radial-gradient(70vw 50vh at -30vw 30%, rgba(42, 164, 244, 0.12), transparent 70%),
      radial-gradient(70vw 50vh at calc(100% + 30vw) 70%, rgba(255, 58, 76, 0.1), transparent 70%);
  }
}

/* Scroll progress, on the top edge of the header */
.progress {
  position: absolute; inset: 0 0 auto; height: 2px; z-index: 2; pointer-events: none;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* Pointer spotlight on cards (the .spot element is added by main.js) */
.spot {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 180, 255, 0.14), transparent 62%);
}
.spot::after {
  content: ""; position: absolute; inset: 0; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.8), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-spot]:hover > .spot { opacity: 1; }
@media (hover: none) { .spot { display: none; } }

/* Buttons: chamfered fill lives on ::before so focus rings are never clipped */
.btn {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 48px; padding: 0.95em 1.5em;
  font: 600 0.78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--btn-fg); text-decoration: none; text-align: center;
  border: 0; background: none; cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: filter 0.25s var(--ease), background 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { filter: brightness(1.12); }
.btn:active { transform: translateY(0); }
.btn__icon { width: 1.25em; height: 1.25em; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover .btn__icon:not(.btn__icon--lead) { transform: translateX(3px); }
.btn--primary { --btn-bg: var(--red-strong); filter: drop-shadow(0 10px 26px rgba(217, 20, 44, 0.42)); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
  clip-path: inherit;
}
.btn--primary:hover::after { opacity: 1; animation: sheen 0.9s var(--ease); }
@keyframes sheen { to { background-position: 150% 0; } }
.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.btn--light { --btn-bg: #fff; --btn-fg: #0a0f2a; }
.btn--twitch { --btn-bg: #772ce8; }
.btn--discord { --btn-bg: #4752c4; }
.btn--sm { min-height: 42px; padding: 0.8em 1.15em; font-size: 0.72rem; --cut: 10px; }
.btn--lg { min-height: 56px; padding: 1.15em 1.75em; font-size: 0.82rem; }
.btn--xl { min-height: 64px; padding: 1.35em 2.2em; font-size: 0.9rem; --cut: 18px; }

/* ==========================================================================
   Header + nav
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--grad); opacity: 0; transition: opacity 0.35s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(5, 8, 26, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.site-header::after { background: var(--line-strong); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(42, 164, 244, 0.25)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font: 900 1.45rem/0.9 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.brand__edition { font: 600 0.6rem/1 var(--f-mono); letter-spacing: 0.18em; color: var(--muted); margin-top: 5px; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list { display: flex; gap: 4px; }
.site-nav__list a {
  position: relative; display: block; padding: 10px 12px;
  font: 600 0.7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.site-nav__list a:hover, .site-nav__list a[aria-current="true"] { color: #fff; }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }
/* Social icons in the menu bar. Desktop: only the links flagged "inHeader", as a quiet icon row between the
   menu and the button. The first icon brings the spacing and the hairline with it, so an empty row leaves the
   bar exactly as it is without icons. */
.site-nav__social a { display: grid; place-items: center; transition: color 0.2s, transform 0.25s var(--ease), border-color 0.2s; }
@media (min-width: 1040px) {
  /* if the bar ever gets too tight (long labels), the icon row gives way before the brand does */
  .site-nav { flex-shrink: 9999; }
  .site-nav__list, .site-nav__cta { flex: none; }
  .site-nav__social {
    flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; height: 34px; overflow: hidden; margin-left: -28px;
  }
  .site-nav__social-item:not(.is-in-header) { display: none; }
  .site-nav__social-item:nth-child(1 of .is-in-header) { position: relative; margin-left: 10px; padding-left: 10px; }
  .site-nav__social-item:nth-child(1 of .is-in-header)::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line-strong);
  }
  .site-nav__social a { width: 34px; height: 34px; color: var(--muted); }
  .site-nav__social a:hover { color: #fff; transform: translateY(-1px); }
  .site-nav__social svg { width: 17px; height: 17px; }
}
/* How many icons fit beside the menu without touching it: none below 1120px, then one more about every 37px
   (brand 182 + menu 577 + button 150 + gaps; each icon is 34px, the first brings 20px of spacing). Fewer icons, never a crowded or wrapped bar. */
@media (min-width: 1040px) and (max-width: 1119px) { .site-nav__social-item.is-in-header { display: none; } }
@media (min-width: 1040px) and (max-width: 1156px) { .site-nav__social-item:nth-child(n+2 of .is-in-header) { display: none; } }
@media (min-width: 1040px) and (max-width: 1193px) { .site-nav__social-item:nth-child(n+3 of .is-in-header) { display: none; } }
@media (min-width: 1040px) and (max-width: 1228px) { .site-nav__social-item:nth-child(n+4 of .is-in-header) { display: none; } }
@media (min-width: 1040px) and (max-width: 1262px) { .site-nav__social-item:nth-child(n+5 of .is-in-header) { display: none; } }
@media (min-width: 1040px) and (max-width: 1296px) { .site-nav__social-item:nth-child(n+6 of .is-in-header) { display: none; } }
/* A menu link whose section is switched off (no element with that id on the page) disappears with it;
   main.js does the same for browsers without :has(). */
body:not(:has(#rolunk)) li:has(> a[href="#rolunk"]),
body:not(:has(#program)) li:has(> a[href="#program"]),
body:not(:has(#galeria)) li:has(> a[href="#galeria"]),
body:not(:has(#csapat)) li:has(> a[href="#csapat"]),
body:not(:has(#tamogatoink)) li:has(> a[href="#tamogatoink"]),
body:not(:has(#eredmenyek)) li:has(> a[href="#eredmenyek"]),
body:not(:has(#jelentkezes)) li:has(> a[href="#jelentkezes"]),
body:not(:has(#video)) li:has(> a[href="#video"]) { display: none; }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; margin-right: -8px;
  background: none; border: 0; cursor: pointer;
  font: 600 0.7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em;
}
.nav-toggle__bars { position: relative; width: 22px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

@media (max-width: 1039px) {
  :root { --header-h: 64px; }
  .brand__logo { width: 38px; height: 38px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px;
    padding: 28px var(--gutter) max(32px, env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 60% at 0% 100%, rgba(19, 86, 180, 0.45), transparent 60%),
      radial-gradient(120% 60% at 100% 100%, rgba(185, 15, 42, 0.4), transparent 60%),
      rgb(5, 8, 26);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  html:not(.js) .site-nav { position: static; visibility: visible; opacity: 1; transform: none; }
  html:not(.js) .nav-toggle { display: none; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--line); }
  .site-nav__list a {
    padding: 16px 0; font: 900 clamp(2rem, 9vw, 3rem)/1 var(--f-display); letter-spacing: 0.01em; color: var(--text);
    display: flex; justify-content: space-between; align-items: center;
  }
  .site-nav__list a::after { left: 0; right: auto; width: 40px; bottom: 10px; }
  /* phone menu: links, button, then every social link as an icon button at the bottom */
  .site-nav__cta { order: 2; align-self: flex-start; min-height: 56px; font-size: 0.82rem; padding: 1.1em 1.6em; }
  .site-nav__social { order: 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
  .site-nav__social a {
    width: 48px; height: 48px;
    border: 1px solid var(--line-strong); color: var(--text);
  }
  .site-nav__social svg { width: 20px; height: 20px; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter would turn the header into the containing block of the fixed nav panel */
  .site-header.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(5, 8, 26); }
}

/* ==========================================================================
   Hero — poster layout: photo on top, one giant title line, details below
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: var(--header-h);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__photo {
  position: absolute; inset: -3%;
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
  transition: transform 0.7s var(--ease);
}
.hero__photo picture { display: contents; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%;
  filter: saturate(1.18) contrast(1.06) brightness(0.9);
  transform: scale(1.1);
  animation: hero-zoom 2.6s var(--ease) forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-parallax { to { transform: translateY(18vh); } }
  }
}
/* blue side / red side: the two lights of the logo */
.hero__glow {
  position: absolute; width: 62vmax; aspect-ratio: 1; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
  animation: glow-in 1.8s 0.3s var(--ease) forwards, breathe 11s 2s ease-in-out infinite alternate;
}
.hero__glow--blue { left: -24vmax; bottom: -22vmax; background: radial-gradient(closest-side, rgba(42, 164, 244, 0.6), rgba(42, 164, 244, 0)); }
.hero__glow--red { right: -24vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(255, 58, 76, 0.55), rgba(255, 58, 76, 0)); animation-delay: 0.5s, 5s; }
@keyframes glow-in { to { opacity: 1; } }
@keyframes breathe { to { transform: scale(1.2) translate(3%, -3%); } }
.hero__tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 26, 0.66) 0%, rgba(5, 8, 26, 0.08) 18%, rgba(5, 8, 26, 0.3) 36%, rgba(5, 8, 26, 0.72) 54%, rgba(5, 8, 26, 0.92) 74%, var(--bg) 100%),
    linear-gradient(90deg, rgba(5, 8, 26, 0.45) 0%, transparent 36%, transparent 70%, rgba(5, 8, 26, 0.3) 100%);
}
.hero__scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__inner { align-self: end; padding-block: clamp(24px, 5vh, 56px) clamp(26px, 4.6vh, 48px); }
.hero__meta { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(10px, 1.8vh, 20px); }
.hero__edition {
  font: 900 clamp(3rem, 5.2vw, 4.6rem)/0.8 var(--f-display); letter-spacing: 0.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.92);
}
.hero__meta-text {
  display: grid; gap: 8px; padding-left: 18px;
  border-left: 2px solid var(--violet); border-image: linear-gradient(180deg, var(--blue), var(--red)) 1;
  font: 600 0.74rem/1.1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: #e6eafc;
}
.hero__meta-line { display: inline-flex; align-items: center; gap: 0.7em; }

/* --r1 / --r2: width of the title in em — on one line (desktop) / of its widest mobile line.
   main.js measures the real text and overrides both; the values below fit "Mathiász LAN Party". */
.hero__title {
  --r1: 7.85; --r2: 3.95;
  container-type: inline-size;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  line-height: 0.8; letter-spacing: -0.005em;
}
.hero__words {
  display: block; white-space: nowrap; padding-top: 0.08em;
  font-size: 11.4vw; font-size: calc(100cqi / var(--r1));
  text-shadow: 0 8px 28px rgba(5, 8, 26, 0.6);
}
.hero__words strong { font-weight: inherit; }
/* the accent: <em> gets the logo gradient */
.hero__words em {
  display: inline-block; font-style: normal; text-shadow: none;
  background: linear-gradient(90deg, #45b4ff 0%, #a070ff 52%, #ff4a5c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.04em;
  /* the gradient only paints inside the box: make room above for accents (Á, É, Ő), without moving anything */
  padding-top: 0.2em; margin-top: -0.2em; filter: drop-shadow(0 8px 28px rgba(5, 8, 26, 0.75));
}

.hero__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(28px, 5vw, 80px); align-items: end; margin-top: clamp(18px, 3.2vh, 34px);
}
.hero__copy { align-self: center; }
.hero__lede { max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: #dde3f7; }
.hero__lede strong { color: #fff; font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.hero__panel { display: grid; gap: 12px; }

/* Main sponsor, under the countdown */
.hero__sponsor {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 20px; text-decoration: none;
  background: rgba(5, 8, 26, 0.55); box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hero__sponsor:hover { background: rgba(13, 20, 49, 0.8); box-shadow: inset 0 0 0 1px var(--line-strong); }
.hero__sponsor-label { font: 600 0.64rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.hero__sponsor img { height: 32px; width: auto; }

/* Countdown */
.countdown {
  position: relative; padding: 16px 20px 18px;
  background: linear-gradient(180deg, rgba(12, 18, 46, 0.74), rgba(6, 10, 28, 0.62));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(150, 172, 255, 0.16);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.countdown::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 2px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% 2px no-repeat;
}
.countdown__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 600 0.66rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.countdown__status { display: inline-flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
/* before / live / over: main.js only switches .is-live / .is-over on .countdown */
.countdown__state--live, .countdown__state--over,
.countdown.is-live .countdown__state--before, .countdown.is-over .countdown__state--before { display: none; }
.countdown.is-live .countdown__state--live, .countdown.is-over .countdown__state--over { display: inline; }
.countdown.is-over .live-dot { animation: none; }
.countdown__cells { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.countdown__cell { position: relative; text-align: center; overflow: hidden; }
.countdown__cell + .countdown__cell::before {
  content: ":"; position: absolute; left: 0; top: 0.02em; transform: translateX(-50%);
  font: 900 clamp(2.6rem, 4.8vw, 4.2rem)/1 var(--f-display); color: rgba(255, 255, 255, 0.22);
}
.countdown__cell + .countdown__cell { overflow: visible; }
.countdown__num {
  display: block; font: 900 clamp(2.9rem, 5.2vw, 4.7rem)/1 var(--f-display);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.countdown__num.is-tick { animation: tick 0.5s var(--ease); }
@keyframes tick { from { transform: translateY(-0.24em); opacity: 0.1; } }
.countdown__cell:last-child .countdown__num { color: var(--red); }
.countdown__unit {
  display: block; margin-top: 4px;
  font: 600 0.62rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.countdown__bar { display: block; height: 2px; margin-top: 16px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.countdown__bar i {
  display: block; height: 100%; background: var(--grad);
  transform-origin: 0 50%; transform: scaleX(var(--sec, 0)); transition: transform 1s linear;
}
.countdown__msg { margin-top: 12px; font: 900 1.6rem/1.05 var(--f-display); text-transform: uppercase; }
.countdown.is-done .countdown__cells, .countdown.is-done .countdown__bar { display: none; }

/* Video */
.video {
  position: relative; aspect-ratio: 16 / 9; background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.video__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; text-align: left; overflow: hidden;
}
.video__poster:focus-visible { outline-offset: -6px; }
.video__poster img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.15) brightness(0.8);
  transition: transform 0.9s var(--ease), filter 0.4s var(--ease);
}
.video__poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 8, 26, 0.9) 0%, rgba(5, 8, 26, 0.05) 55%);
}
.video__poster:hover img { transform: scale(1.05); filter: saturate(1.25) brightness(0.92); }
.video__play {
  position: absolute; left: 50%; top: 46%; z-index: 1; translate: -50% -50%;
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--red-strong); color: #fff;
  box-shadow: 0 0 0 0 rgba(217, 20, 44, 0.55), 0 12px 40px rgba(217, 20, 44, 0.45);
  animation: ring 2.4s var(--ease) infinite;
  transition: transform 0.3s var(--ease);
}
.video__play svg { width: 34px; height: 34px; margin-left: 4px; }
.video__poster:hover .video__play { transform: scale(1.1); }
@keyframes ring { 70% { box-shadow: 0 0 0 22px rgba(217, 20, 44, 0), 0 12px 40px rgba(217, 20, 44, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(217, 20, 44, 0), 0 12px 40px rgba(217, 20, 44, 0.45); } }
.video__meta { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: grid; gap: 4px; }
.video__title { font: 900 clamp(1.5rem, 2.4vw, 2.2rem)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.video__note { font: 400 0.64rem/1.3 var(--f-mono); letter-spacing: 0.06em; color: #c3cbe6; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__fallback { position: absolute; inset: auto 16px 16px; color: #fff; }

/* Ticker */
.ticker {
  position: relative; overflow: hidden; border-block: 1px solid var(--line);
  background: rgba(5, 8, 26, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  --ticker-gap: 28px;
  display: flex; width: max-content; padding: 13px 0;
  font: 900 1.3rem/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.06em; color: #dfe5fa;
  animation: ticker 38s linear infinite;
}
.ticker__group, .ticker__item { display: flex; align-items: center; gap: var(--ticker-gap); }
.ticker__group { padding-right: var(--ticker-gap); }
.ticker__track i { font-style: normal; font-size: 0.8em; color: var(--blue); }
.ticker__item:nth-child(even) i { color: var(--red); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Hero load-in */
@media (prefers-reduced-motion: no-preference) {
  .hero__meta, .hero__lede, .hero__actions, .hero__panel > * { animation: rise 0.9s var(--ease) both; }
  .hero__words, .hero__words em { animation: word-in 1.15s var(--ease) both; animation-delay: 0.14s; }
  .hero__words em { animation-delay: 0.28s; }
  .hero__lede { animation-delay: 0.5s; }
  .hero__actions { animation-delay: 0.58s; }
  .hero__panel > :nth-child(1) { animation-delay: 0.66s; }
  .hero__panel > :nth-child(2) { animation-delay: 0.76s; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  @keyframes word-in {
    from { opacity: 0; transform: translateY(0.32em); clip-path: inset(0 -10% 100% -10%); }
    to { clip-path: inset(-40% -10% -60% -10%); }
  }
}

@media (max-width: 999px) {
  .hero__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__panel { max-width: 560px; }
}
@media (max-width: 760px) {
  .hero__words { white-space: normal; font-size: 24vw; font-size: calc(100cqi / var(--r2)); }
  .hero__words em { display: block; white-space: nowrap; }
  .hero__img { object-position: 50% 30%; }
  .hero__tint {
    background: linear-gradient(180deg, rgba(5, 8, 26, 0.62) 0%, rgba(5, 8, 26, 0.22) 12%, rgba(5, 8, 26, 0.5) 28%, rgba(5, 8, 26, 0.86) 46%, var(--bg) 78%);
  }
  .hero__glow { width: 90vmax; }
}
@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .countdown { padding: 16px 14px 18px; }
  .countdown__date { display: none; }
  .ticker__track { font-size: 1.1rem; --ticker-gap: 20px; padding: 12px 0; }
  .hero__meta { gap: 14px; }
  .hero__meta-text { padding-left: 14px; font-size: 0.68rem; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.section-head__index {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font: 600 0.72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.section-head__index::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.section-title {
  font: 900 clamp(2.5rem, 5.6vw, 5rem)/0.88 var(--f-display); text-transform: uppercase;
  letter-spacing: -0.003em; max-width: 16ch; text-wrap: balance;
  -webkit-hyphens: manual; hyphens: manual;
}
/* Display text that may stick out of its own box as long as it stays on the page (as "kezdeményezésből"
   does in a 16ch title): no forced break inside a word; main.js shrinks the font if a word would leave the page. */
[data-fit-page] { overflow-wrap: normal; }
.section-title em { font-style: normal; color: var(--blue); }
.program .section-title em, .sponsors .section-title em { color: var(--red); }
.section-head__aside { max-width: 24rem; color: var(--muted); font-size: 1rem; }

/* Section heads wipe in instead of fading */
.js .section-head.reveal { opacity: 1; transform: none; }
.js .section-head.reveal .section-title {
  clip-path: inset(0 -5% 100% -5%); transform: translateY(0.3em);
  transition: clip-path 1s var(--ease), transform 1s var(--ease);
}
.js .section-head.reveal.is-in .section-title { clip-path: inset(-12% -5% -16% -5%); transform: none; }
.js .section-head.reveal .section-head__index, .js .section-head.reveal .section-head__aside { opacity: 0; transition: opacity 0.8s var(--ease) 0.3s; }
.js .section-head.reveal.is-in .section-head__index, .js .section-head.reveal.is-in .section-head__aside { opacity: 1; }
.js .section-head.reveal .section-head__index::before { width: 0; transition: width 0.8s var(--ease) 0.25s; }
.js .section-head.reveal.is-in .section-head__index::before { width: 28px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- About ---------- */
.about::before {
  content: attr(data-edition); position: absolute; right: -0.06em; top: 0.1em; z-index: -1; pointer-events: none;
  font: 900 clamp(14rem, 34vw, 32rem)/0.8 var(--f-display);
  color: transparent; -webkit-text-stroke: 1px rgba(150, 172, 255, 0.09);
}
.about { isolation: isolate; overflow: hidden; }
.about__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 96px); align-items: start;
}
.about__copy p { color: var(--muted); max-width: 36rem; }
.about__text p + p { margin-top: 1.1em; }
.about__lede {
  color: var(--text) !important; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.35;
  font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1.1em; max-width: 30ch !important;
}
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.stats__item { padding: 20px 16px 0 0; }
.stats__item + .stats__item { padding-left: 20px; border-left: 1px solid var(--line); }
.stats dt { font: 600 0.66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); }
.stats__big { display: block; margin-top: 10px; font: 900 clamp(3.2rem, 6vw, 5.4rem)/0.85 var(--f-display); }
.stats__big { font-variant-numeric: tabular-nums; }
/* kind "num": three per row, coloured by column; a fourth, fifth… number starts a new row */
.stats__item--num:nth-child(3n+1) .stats__big { color: var(--red); }
.stats__item--num:nth-child(3n) .stats__big { color: var(--violet); }
.stats .stats__item--num:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.stats__item--num:nth-child(n+4) { margin-top: 22px; border-top: 1px solid var(--line); }
/* kind "place": a word (the place name) is too long for a third of the row: it gets its own row */
.stats__item--place .stats__big { margin-top: 0; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1; color: var(--blue); }
.stats .stats__item--place {
  grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line);
}

.about__media { position: relative; margin-top: 0.4rem; }
.about__media::before {
  content: ""; position: absolute; inset: 8% -3% 16%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(42, 164, 244, 0.6), rgba(139, 69, 224, 0.45), rgba(255, 58, 76, 0.6));
  filter: blur(60px); opacity: 0.5;
}
.about__media .video { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.about__media-cap {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  font: 400 0.68rem/1.4 var(--f-mono); letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase;
}

@media (min-width: 1000px) {
  .about > .container {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(36px, 6vw, 96px);
  }
  .about__grid { display: contents; }
  .about .section-head, .about__copy { grid-column: 1; }
  .about__media { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}
@media (max-width: 999px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .stats__item { padding-right: 8px; }
  .stats__item + .stats__item:not(.stats__item--place) { padding-left: 14px; }
  .stats .stats__item--num:nth-child(3n+1) { padding-left: 0; }
}

/* ---------- Program / bento ---------- */
.program { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 30%, var(--bg-2) 70%, var(--bg) 100%); }
/* Tile sizes follow the position and repeat every five tiles, so any number of tiles lays out:
     [ 1: 7 cols × 2 rows ] [ 2: 5 cols ]
                            [ 3: 5 cols ]
     [ 4: 5 cols ] [ 5: 7 cols ]
   Rows are at least 300 / 300 / content high and grow with long text. */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(300px, auto) minmax(300px, auto) auto;
}
.tile { grid-column: span 5; }
@media (min-width: 1000px) {
  .tile:nth-child(5n+1) { grid-column: span 7; grid-row: span 2; }
  .tile:nth-child(5n) { grid-column: span 7; }
  /* an incomplete last group still fills its rows */
  .tile:nth-child(5n+1):last-child { grid-column: 1 / -1; grid-row: auto; }
  .tile:nth-child(5n+2):last-child { grid-row: span 2; }
  .tile:nth-child(5n+4):last-child { grid-column: 1 / -1; }
}
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 280px; padding: clamp(22px, 2.6vw, 36px);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.tile__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease); filter: saturate(1.1) brightness(0.85);
}
/* rendered together with the photo */
.tile__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(5, 8, 26, 0.96) 0%, rgba(5, 8, 26, 0.6) 40%, rgba(5, 8, 26, 0.05) 75%);
}
.tile:hover .tile__bg { transform: scale(1.05); filter: saturate(1.25) brightness(0.95); }
.tile__body { position: relative; max-width: 30rem; }
.tile__icon { width: 34px; height: 34px; margin-bottom: 18px; color: var(--blue); }
.tile--red .tile__icon { color: var(--red); }
.tile__title { font: 900 clamp(2.2rem, 3.6vw, 3.4rem)/0.9 var(--f-display); text-transform: uppercase; margin-bottom: 10px; }
.tile:nth-child(5n+1) .tile__title { font-size: clamp(3rem, 6vw, 5.6rem); }
.tile p { color: #c6cee8; max-width: 28rem; }
/* look "grid": drawn tile (blue or red corner light) with the icon as artwork */
.tile--grid {
  background:
    linear-gradient(rgba(150, 172, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(150, 172, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(90% 120% at 100% 0%, rgba(42, 164, 244, 0.22), transparent 60%),
    var(--surface);
}
.tile--grid.tile--red {
  background:
    linear-gradient(rgba(150, 172, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(150, 172, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(90% 120% at 100% 0%, rgba(255, 58, 76, 0.22), transparent 60%),
    var(--surface);
}
.tile__art {
  position: absolute; right: -6%; top: 50%; z-index: -1; width: min(62%, 300px); aspect-ratio: 1;
  translate: 0 -58%; color: var(--blue); opacity: 0.2;
  transition: transform 1s var(--ease), opacity 0.6s;
}
.tile--red .tile__art { color: var(--red); }
.tile__art svg { width: 100%; height: 100%; }
.tile:hover .tile__art { transform: rotate(-8deg) scale(1.05); opacity: 0.32; }
/* look "gradient": the blue→red tile; no artwork, the tag list sits at the bottom */
.tile--gradient {
  background: var(--grad-deep);
  justify-content: space-between; gap: 28px;
}
.tile--gradient .tile__art { display: none; }
.tile--gradient::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.25;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 14px);
}
.tile--gradient .tile__icon { color: #fff; }
.tile--gradient p { color: #f1f3ff; }
.values { display: flex; flex-wrap: wrap; gap: 8px; }
.values li {
  padding: 10px 14px; font: 600 0.7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(5, 8, 26, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff;
}

/* Any tile can carry a photo (tile--has-photo). The picture fills the tile; the shade over it keeps the text
   readable and carries the tile's own look: "grid" tiles keep their blue/red corner light, the "gradient"
   tile shows the photo through its blue→red wash. */
.tile--grid.tile--has-photo .tile__shade {
  background:
    linear-gradient(rgba(150, 172, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(150, 172, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(90% 120% at 100% 0%, rgba(42, 164, 244, 0.42), transparent 62%),
    linear-gradient(0deg, rgba(5, 8, 26, 0.96) 0%, rgba(5, 8, 26, 0.76) 46%, rgba(5, 8, 26, 0.3) 84%);
}
.tile--grid.tile--red.tile--has-photo .tile__shade {
  background:
    linear-gradient(rgba(150, 172, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(150, 172, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(90% 120% at 100% 0%, rgba(255, 58, 76, 0.4), transparent 62%),
    linear-gradient(0deg, rgba(5, 8, 26, 0.96) 0%, rgba(5, 8, 26, 0.76) 46%, rgba(5, 8, 26, 0.3) 84%);
}
.tile--gradient.tile--has-photo .tile__bg { filter: grayscale(0.55) contrast(1.08) brightness(0.9); }
.tile--gradient.tile--has-photo .tile__shade {
  background: linear-gradient(115deg, rgba(15, 79, 174, 0.86) 0%, rgba(90, 38, 166, 0.74) 50%, rgba(184, 15, 42, 0.84) 100%);
}
.tile--gradient.tile--has-photo:hover .tile__bg { filter: grayscale(0.4) contrast(1.08) brightness(0.98); }

@media (max-width: 999px) {
  /* two columns: 1 and 2 full width, 3 and 4 side by side, 5 full width */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tile { grid-column: auto; }
  .tile:nth-child(5n+1), .tile:nth-child(5n+2), .tile:nth-child(5n), .tile:nth-child(5n+3):last-child { grid-column: 1 / -1; }
  .tile:nth-child(5n+1) { min-height: 440px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 300px; }
  .tile:nth-child(5n+1) { min-height: 400px; }
  .tile--grid, .tile--gradient { min-height: 0; }
  .tile--grid.tile--has-photo, .tile--gradient.tile--has-photo { min-height: 300px; }
  .tile--grid { padding-top: 120px; }
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid; gap: 8px; padding-inline: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(160px, 18vw, 340px);
  grid-auto-flow: dense;
}
/* the wipe sits on the link: a fully clipped <li> would never count as intersecting */
.js .gallery__item.reveal { opacity: 1; transform: none; }
.js .gallery__item.reveal .gallery__link { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .gallery__item.reveal.is-in .gallery__link { clip-path: inset(0); }
.js .gallery__item.reveal img { transform: scale(1.2); transition: transform 1.6s var(--ease), filter 0.5s var(--ease); }
.js .gallery__item.reveal.is-in img { transform: scale(1); }
.js .gallery__item.reveal.is-in .gallery__link:hover img { transform: scale(1.05); }
.gallery__item--big { grid-column: span 2; grid-row: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__link {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  background: var(--surface); cursor: zoom-in;
}
.gallery__link:focus-visible { outline-offset: -4px; }
.gallery__link img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
  filter: saturate(1.05) brightness(0.9);
}
.gallery__link::before {
  content: ""; position: absolute; inset: auto 0 0; height: 60%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 8, 26, 0.88), transparent); opacity: 0; transition: opacity 0.4s var(--ease);
}
.gallery__cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  font: 900 clamp(1.15rem, 1.7vw, 1.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.gallery__link:hover::before, .gallery__link:focus-visible::before { opacity: 1; }
.gallery__link:hover .gallery__cap, .gallery__link:focus-visible .gallery__cap { opacity: 1; transform: none; }
@media (hover: none) {
  .gallery__item--big .gallery__link::before, .gallery__item--wide .gallery__link::before { opacity: 1; }
  .gallery__item--big .gallery__cap, .gallery__item--wide .gallery__cap { opacity: 1; transform: none; }
}
/* in the admin's edit mode every caption is visible, so it can be clicked */
.ml-editing .gallery__link::before { opacity: 1; }
.ml-editing .gallery__cap { opacity: 1; transform: none; }
.gallery__link::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.35s var(--ease);
}
.gallery__link:hover img { transform: scale(1.05); filter: saturate(1.2) brightness(1); }
.gallery__link:hover::after { box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 3px rgba(5, 8, 26, 0.6); }
.gallery__item:nth-child(even) .gallery__link:hover::after { box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(5, 8, 26, 0.6); }
.gallery__zoom {
  position: absolute; left: 10px; top: 10px; padding: 6px 8px;
  font: 600 0.6rem/1 var(--f-mono); letter-spacing: 0.1em; color: #fff;
  background: rgba(5, 8, 26, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0.85; z-index: 2;
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 31vw, 220px); gap: 6px; padding-inline: 6px; }
  .gallery__item--big, .gallery__item--wide { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Sponsors ---------- */
.sponsors { background: var(--bg-2); border-block: 1px solid var(--line); }
.sponsor-feature {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; gap: 22px;
  padding: clamp(36px, 5vw, 64px) 24px; margin-bottom: 14px;
  text-decoration: none; text-align: center;
  background:
    radial-gradient(60% 120% at 0% 100%, rgba(42, 164, 244, 0.22), transparent 60%),
    radial-gradient(60% 120% at 100% 0%, rgba(255, 58, 76, 0.2), transparent 60%),
    var(--surface);
}
.sponsor-feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.6; transition: opacity 0.3s;
}
.sponsor-feature img { height: clamp(64px, 9vw, 120px); width: auto; transition: transform 0.5s var(--ease); }
.sponsor-feature:hover img { transform: scale(1.04); }
.sponsor-feature:hover::before { opacity: 1; }
.sponsor-feature__go { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; color: var(--muted); }
.sponsor-feature__go svg { width: 100%; height: 100%; }

.sponsor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sponsor {
  position: relative; height: 100%; min-height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 28px 20px 22px; text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.3s, box-shadow 0.3s;
}
.sponsor img { max-height: 56px; max-width: min(84%, 210px); width: auto; object-fit: contain; transition: transform 0.4s var(--ease); }
.sponsor__name { font: 600 0.62rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); text-align: center; }
.sponsor__go { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; color: var(--dim); opacity: 0; transition: opacity 0.3s; }
.sponsor--xwide img { max-width: min(92%, 250px); }
.sponsor--square img { max-height: 72px; }
.sponsor__wordmark {
  /* may reach 10px into the tile's padding on each side (as "AOC Gaming" does on phones); longer text wraps */
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 0.35em; margin-inline: -10px; max-width: calc(100% + 20px);
  font: 900 3rem/0.9 var(--f-display); letter-spacing: 0.04em; color: #fff;
}
.sponsor__wordmark small { font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.sponsor__wordmark > * { min-width: 0; overflow-wrap: anywhere; }
.sponsor__wordmark small:empty { display: none; }
/* a sponsor whose href is "#" has no link: main.js removes the href, the tile stays a plain card */
.sponsor[href]:not([href="#"]):hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sponsor[href]:not([href="#"]):hover img { transform: scale(1.05); }
.sponsor[href]:not([href="#"]):hover .sponsor__go { opacity: 1; }
html:not(.js) .sponsor[href="#"] { pointer-events: none; }
@media (max-width: 999px) { .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sponsor { min-height: 136px; padding: 22px 12px 16px; gap: 14px; }
  .sponsor img { max-height: 44px; }
}

/* ---------- Results ---------- */
.results-band { border-block: 1px solid var(--line); background: var(--bg-2); }
.results-band__inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center;
  gap: 20px clamp(24px, 4vw, 56px); padding-block: clamp(36px, 5vw, 56px);
}
.results-band .section-head__index { margin-bottom: 12px; }
.results-band__title { font: 900 clamp(1.7rem, 2.8vw, 2.4rem)/0.95 var(--f-display); text-transform: uppercase; max-width: 22ch; }
.results-band__text { color: var(--muted); font-size: 0.98rem; }
.results-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .results-band__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Scoreboard (results.boards): one board per game, the places ranked by position. It ships empty: every
   place shows its rank and the quiet public placeholder (.place__tbd, results.placeholder) until a name is
   typed. Columns follow the number of boards: 1 → one wide board (its places side by side), 2 → 2,
   3 → 3, 4 → 2 × 2, 5 → 3 + 2, 6 and more → 3 per row; on tablets 2 per row (an odd last board takes the whole row).
   The row gap (and the few pixels below) leave room for the editor's "+ Új helyezés" mark under each board, so
   the page has the same geometry while editing and in preview. */
.scoreboard {
  grid-column: 1 / -1; display: grid; gap: 48px 14px; margin-top: clamp(8px, 1.6vw, 20px); margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 700px) {
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scoreboard:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .scoreboard > .board:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .scoreboard:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scoreboard:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scoreboard:has(> :nth-child(3)) > .board:last-child:nth-child(odd) { grid-column: auto; }
  .scoreboard:has(> :nth-child(4):last-child) > .board { grid-column: auto; }
  /* five: three over two, both rows full */
  .scoreboard:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .scoreboard:has(> :nth-child(5):last-child) > .board { grid-column: span 2; }
  .scoreboard:has(> :nth-child(5):last-child) > .board:nth-child(n+4) { grid-column: span 3; }
}

.board {
  position: relative; min-width: 0; container-type: inline-size;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(42, 164, 244, 0.1), transparent 55%),
    radial-gradient(90% 90% at 100% 100%, rgba(255, 58, 76, 0.07), transparent 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.board__title {
  position: relative; padding: 20px 22px 14px; border-bottom: 1px solid var(--line);
  font: 900 clamp(1.6rem, 2.3vw, 2.1rem)/1.04 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em;
}
.board__title::after { content: ""; position: absolute; left: 22px; bottom: -1px; width: 72px; height: 2px; background: var(--grad); }
.board__places { margin: 0; }

.place {
  position: relative; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); align-items: center; gap: 0 14px;
  min-height: 76px; padding: 12px 22px;
}
.place + .place { border-top: 1px solid var(--line); }
.place__rank {
  display: flex; align-items: baseline; justify-content: flex-start;
  font: 900 2.6rem/0.8 var(--f-display); font-variant-numeric: tabular-nums; color: var(--text);
}
.place__dot { font-size: 0.5em; color: var(--red); }
.place:nth-child(3) .place__rank { color: var(--muted); }
.place:nth-child(n+4) .place__rank { color: transparent; -webkit-text-stroke: 1px var(--dim); }
.place:nth-child(n+4) .place__dot { -webkit-text-stroke: 0; color: var(--dim); }
.place__body { min-width: 0; }
.place__name { font: 700 1.45rem/1.04 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.place__detail { margin-top: 4px; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.place__tbd {
  display: flex; align-items: center; gap: 10px;
  font: 600 0.66rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim);
}
.place__tbd::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--line-strong); }
/* first place: the larger, blue→red numeral, a light wash and the tricolour edge of the site's gradient */
.place:first-child { min-height: 100px; background: linear-gradient(90deg, rgba(42, 164, 244, 0.13), rgba(139, 69, 224, 0.07) 50%, transparent 90%); }
.place:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--blue), var(--violet), var(--red)); }
.place:first-child .place__rank {
  font-size: 4rem;
  background: linear-gradient(180deg, var(--blue) 10%, var(--violet) 55%, var(--red) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.place:first-child .place__dot { color: var(--red); -webkit-text-fill-color: var(--red); }
.place:first-child .place__name { font-weight: 900; font-size: 1.9rem; line-height: 1; }
/* empty texts: nothing on the public page (the placeholder stands in for the name); while editing the empty
   name and detail stay as tap targets and the public placeholder steps aside */
html:not(.ml-editing) .place__name:empty, html:not(.ml-editing) .place__detail:empty { display: none; }
.ml-editing .place__tbd, .place__name:not(:empty) ~ .place__tbd { display: none; }

/* a wide board (one board on a desktop): up to five places side by side */
@container (min-width: 900px) {
  .board__places:not(:has(> :nth-child(6))) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .board__places:not(:has(> :nth-child(6))) > .place + .place { border-top: 0; border-left: 1px solid var(--line); }
  .board__places:not(:has(> :nth-child(6))) > .place:first-child::before { top: auto; right: 0; width: auto; height: 3px; background: var(--grad); }
}
@media (max-width: 520px) {
  .board__title { padding: 18px 16px 12px; }
  .board__title::after { left: 16px; }
  .place { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 12px; padding: 12px 16px; }
  .place__rank { font-size: 2.3rem; }
  .place:first-child .place__rank { font-size: 3.4rem; }
  .place:first-child .place__name { font-size: 1.7rem; }
}

/* ---------- Team ---------- */
.team__photo { position: relative; margin-bottom: clamp(48px, 6vw, 80px); }
/* the empty group-photo slot: nothing on the public page, a drop target while the admin is editing */
.team__photo--empty { display: none; }
.ml-editing .team__photo--empty {
  display: block; height: 120px; border: 1px dashed var(--line-strong); background: rgba(150, 172, 255, 0.05);
}
.team__photo img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 52%;
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 36px 100%, 0 calc(100% - 36px));
}
.team__photo figcaption { position: absolute; left: 20px; bottom: 18px; }
.team__photo .kicker { padding: 8px 12px; background: rgba(5, 8, 26, 0.78); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 700px) { .team__photo img { aspect-ratio: 3 / 2; } .team__photo figcaption { left: 12px; bottom: 12px; } }

.crew + .crew { margin-top: clamp(48px, 6vw, 72px); }
.crew__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
  position: relative;
}
.crew__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--grad); }
.crew__title { min-width: 0; font: 900 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; }
.crew__count { flex: none; }
.crew__count { font: 600 0.66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.crew__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 22px 16px; }
.member { min-width: 0; }
.avatar {
  position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 12px; background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.avatar img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) contrast(1.05); transition: filter 0.5s var(--ease), transform 0.8s var(--ease);
}
.member:hover .avatar img { filter: none; transform: scale(1.04); }
.avatar--mono {
  display: grid; place-items: center;
  --t1: rgba(42, 164, 244, 0.5); --t2: rgba(19, 86, 180, 0.35);
  background:
    radial-gradient(90% 90% at 100% 0%, var(--t1), transparent 65%),
    radial-gradient(90% 90% at 0% 100%, var(--t2), transparent 65%),
    var(--surface);
}
.avatar--mono[data-tone="1"] { --t1: rgba(255, 58, 76, 0.5); --t2: rgba(139, 69, 224, 0.3); }
.avatar--mono[data-tone="2"] { --t1: rgba(139, 69, 224, 0.55); --t2: rgba(42, 164, 244, 0.3); }
.avatar--mono[data-tone="3"] { --t1: rgba(255, 58, 76, 0.38); --t2: rgba(42, 164, 244, 0.38); }
.avatar--mono::before {
  content: "1010 1010 1010 0101 0101 0101 1010 1010 1010 0101 0101 0101 1010 1010 1010 0101 0101";
  position: absolute; inset: 10px; overflow: hidden; word-spacing: 0.4em;
  font: 400 0.6rem/1.9 var(--f-mono); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.07);
}
.avatar--mono span {
  position: relative; font: 900 clamp(2.8rem, 5vw, 3.6rem)/1 var(--f-display); letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 6px 24px rgba(5, 8, 26, 0.6);
}
.avatar--mono::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); opacity: 0.85;
}
.member__name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.member__role { margin-top: 4px; font: 400 0.62rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); }
.member--lead .member__role { color: var(--red); font-weight: 600; }
@media (max-width: 520px) {
  .crew__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .member__name { font-size: 0.95rem; }
}

/* ---------- CTA ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 10vw, 140px) clamp(56px, 7vw, 96px); }
.cta__bg { position: absolute; inset: 0; z-index: -1; background: var(--grad-deep); background-size: 170% 170%; animation: cta-pan 16s ease-in-out infinite alternate; }
@keyframes cta-pan { to { background-position: 100% 60%; } }
.cta__bg::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 18px);
  -webkit-mask: linear-gradient(90deg, transparent 20%, #000); mask: linear-gradient(90deg, transparent 20%, #000);
}
.cta__bg::after {
  content: attr(data-edition); position: absolute; right: -0.05em; top: -0.1em;
  font: 900 clamp(16rem, 40vw, 38rem)/0.8 var(--f-display);
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
}
.cta__kicker { color: #fff; }
.cta__title {
  margin: 20px 0 22px; font: 900 clamp(4.2rem, 15vw, 13rem)/0.8 var(--f-display); text-transform: uppercase;
  letter-spacing: -0.01em; text-shadow: 0 20px 60px rgba(5, 8, 26, 0.35);
}
.cta__text { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 34rem; margin-bottom: 36px; color: #fff; }
/* registration closed: a calmer headline and the social links in place of the button */
.cta__title--closed { font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.86; max-width: 13ch; text-wrap: balance; }
.cta__social { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__social a {
  display: grid; place-items: center; width: 52px; height: 52px; color: #fff;
  background: rgba(5, 8, 26, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.cta__social a:hover { background: #fff; color: #0a0f2a; transform: translateY(-2px); }
.cta__social svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .cta__social { gap: 8px; } .cta__social a { width: 48px; height: 48px; } }
/* as many equal columns as there are steps (three today) */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0;
  margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.step { padding: 24px 28px 4px 0; }
.step + .step { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.step__num { font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.75); }
.step__title { margin: 14px 0 8px; font: 900 clamp(1.6rem, 2.4vw, 2.1rem)/0.95 var(--f-display); text-transform: uppercase; color: #fff; }
.step p { color: rgba(255, 255, 255, 0.88); font-size: 0.98rem; max-width: 26rem; }
.step__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 36px;
  font: 600 0.7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; color: #fff;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.step__link svg { width: 12px; height: 12px; }
/* a step's link shows only while it has a label; in the admin's edit mode it stays, so the label can be typed back */
html:not(.ml-editing) .step__link:has(> .step__link-label:empty) { display: none; }
.step__link[hidden] { display: none; }
/* registration closed: the remaining steps are plain notes, not a numbered path */
.steps--closed .step__num { display: none; }
.steps--closed .step__title { margin-top: 0; }
.step__link:hover { border-color: #fff; }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step + .step { padding: 22px 0 10px; border-left: 0; }
  .step + .step { border-top: 1px solid rgba(255, 255, 255, 0.22); }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(64px, 8vw, 100px); background: #03050f; }
.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 0.8fr); gap: 48px;
}
.site-footer__brand { display: flex; gap: 22px; align-items: flex-start; }
.site-footer__brand img { width: 104px; height: auto; flex: none; }
.site-footer__brand p { color: var(--muted); max-width: 26rem; font-size: 0.98rem; }
.site-footer__brand strong { color: var(--text); font-weight: 600; }
.site-footer__h { margin-bottom: 16px; font: 600 0.66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); }
.site-footer ul { display: grid; gap: 4px; }
.site-footer__nav a, .site-footer__social a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 36px;
  color: var(--text); text-decoration: none; font-weight: 500; transition: color 0.2s;
}
.site-footer__social ul { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
.site-footer__social svg { width: 18px; height: 18px; color: var(--muted); transition: color 0.2s; }
.site-footer a:hover { color: var(--blue); }
.site-footer__social a:hover svg { color: var(--blue); }
.site-footer__wordmark {
  margin: clamp(48px, 7vw, 90px) 0 0; white-space: nowrap; text-align: center;
  font: 900 clamp(4rem, 15.6vw, 15rem)/0.9 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; padding-top: 0.1em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.9;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 100%); mask: linear-gradient(180deg, #000 30%, transparent 100%);
}
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  font: 400 0.68rem/1.4 var(--f-mono); letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase;
}
.to-top { color: var(--muted); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.to-top:hover { color: #fff; }
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__brand { flex-direction: column; }
  .site-footer__brand img { width: 88px; }
  .site-footer__top { gap: 36px 20px; }
  .site-footer__social ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: #fff; overflow: hidden;
  background: rgba(3, 5, 15, 0.96);
}
.lightbox::backdrop { background: rgba(3, 5, 15, 0.6); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; animation: lb-in 0.3s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__stage {
  position: relative; display: grid; place-items: center; min-height: 0;
  padding: 72px clamp(12px, 7vw, 96px) 12px; touch-action: pan-y pinch-zoom;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}
.lightbox__img.is-loading { opacity: 0; transform: scale(0.985); }
.lightbox__caption {
  display: flex; justify-content: center; gap: 16px; align-items: baseline; flex-wrap: wrap;
  padding: 14px 20px max(22px, env(safe-area-inset-bottom)); text-align: center; color: #d6dcf2;
}
.lightbox__count { font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--muted); }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.08); border: 0; cursor: pointer; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: background 0.2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__btn--close { top: 12px; right: 12px; }
.lightbox__btn--prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: 12px; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) {
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 12px; translate: none; }
  .lightbox__caption { padding-inline: 76px; }
  .lightbox__stage { padding-inline: 8px; }
}
body.lb-open { overflow: hidden; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .hero__img { transform: none; }
  .ticker__track { animation: none; }
  .hero__glow { opacity: 1; }
  .hero__photo { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .gallery__item.reveal .gallery__link, .js .section-head.reveal .section-title { clip-path: none; transform: none; }
}