/* ============================================
   OWNPATH 2026 — Long Way. Good Cause.
   ============================================ */

@font-face {
  font-family: "GT America Mono";
  src: url("assets/fonts/gt-america-mono.woff2") format("woff2"),
       url("assets/fonts/gt-america-mono.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #c9f73c;
  --lime-dim: #a4c930;
  --olive: #727956;
  --olive-dark: #3d4128;
  --ink: #0b0e08;
  --ink-2: #15190f;
  --ink-3: #1f2415;
  --cream: #f3efe2;
  --cream-dim: #d8d4c5;
  --rust: #d5612a;   /* DKMS accent, used sparingly */
  --grid: rgba(201, 247, 60, 0.07);
  --maxw: 1480px;
  --pad: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "GT America Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  line-height: 1.55;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  /* `clip` prevents horizontal overflow WITHOUT creating a scroll
     container — `hidden` would, which breaks `position: sticky` on
     descendants (e.g. the route captive stage). */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Pixel rendering helpers ------------------------------------ */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Global grid background ------------------------------------- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 95%);
}

/* Top bar / navigation --------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  background: linear-gradient(to bottom, rgba(11,14,8,0.92), rgba(11,14,8,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar__logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime);
}
.topbar__logo img { height: 18px; width: auto; }
.topbar__nav {
  display: flex; gap: 24px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim);
}
.topbar__nav a { transition: color .2s; }
.topbar__nav a:hover { color: var(--lime); }
.topbar__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime); color: var(--ink);
  padding: 10px 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400;
  border: 0;
  position: relative;
  transition: transform .15s ease;
}
.topbar__lang {
  background: transparent;
  border: 1px solid rgba(201, 247, 60, 0.4);
  color: var(--lime);
  padding: 9px 12px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-right: 12px;
  transition: background .15s, color .15s;
}
.topbar__lang:hover { background: var(--lime); color: var(--ink); }
.topbar__right { display: flex; align-items: center; }
@media (max-width: 600px) { .topbar__lang { display: none; } }
.topbar__cta:hover { transform: translate(-2px, -2px); }
.topbar__cta::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: 6px 6px 0 var(--olive);
  z-index: -1; transition: box-shadow .15s ease;
}
.topbar__cta:hover::after { box-shadow: 8px 8px 0 var(--olive); }
@media (max-width: 840px) {
  .topbar__nav { display: none; }
}

/* Section base ----------------------------------------------- */
section { position: relative; z-index: 1; }
.section-pad { padding: clamp(80px, 12vh, 160px) var(--pad); }
.inner { max-width: var(--maxw); margin: 0 auto; }

/* Section labels (eyebrow) ----------------------------------- */
.eyebrow {
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lime); display: flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 14px; height: 14px; background: var(--lime);
  display: inline-block;
}

/* Big display text ------------------------------------------- */
.display {
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.14; letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
.display .pixel-word {
  background: var(--lime); color: var(--ink);
  padding: 0.04em 0.18em;
  display: inline-block;
  line-height: 1;
  margin: 0.1em 0;
}
.display em { font-style: normal; color: var(--lime); }
.display br + .pixel-word { margin-top: 0.18em; }

/* HERO ------------------------------------------------------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  padding: 120px var(--pad) 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.hero__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.hero__meta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
}
.hero__meta b { color: var(--lime); font-weight: 400; }
.hero__center {
  margin: 60px 0 40px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  text-align: center;
}
.hero__logo {
  width: min(80vw, 1100px);
  filter: drop-shadow(8px 8px 0 var(--olive-dark));
}
.hero__tagline {
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.04em;
  color: var(--lime);
  display: flex; gap: 1.5em; flex-wrap: wrap; justify-content: center;
}
.hero__tagline span { position: relative; }
.hero__tagline span::after {
  content: "."; color: var(--lime);
}
.hero__sub {
  max-width: 640px;
  font-size: 14px; line-height: 1.7;
  color: var(--cream-dim);
  text-align: center;
}
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  border-top: 1px solid rgba(243, 239, 226, 0.15);
  padding-top: 24px;
}
.hero__stat .num {
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--lime);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.hero__stat .label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
}
@media (max-width: 720px) {
  .hero__bottom { grid-template-columns: 1fr 1fr; }
}

/* Pixel bike road (decorative) -------------------------------- */
.hero__road {
  position: absolute; left: 0; right: 0; bottom: 22vh;
  height: 2px; background: var(--lime);
  opacity: 0.6;
}
.hero__bike {
  position: absolute; bottom: calc(22vh + 2px);
  width: 64px; height: 64px;
  animation: rideAcross 18s linear infinite;
}

@keyframes rideAcross {
  from { left: -80px; }
  to   { left: calc(100% + 80px); }
}

/* Blinking caret ---------------------------------------------- */
.blink {
  display: inline-block;
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* MISSION ---------------------------------------------------- */
.mission { background: var(--ink); position: relative; }
.mission__head {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
@media (max-width: 900px) {
  .mission__head { grid-template-columns: 1fr; gap: 32px; }
}
.mission__right {
  display: flex; flex-direction: column; gap: 32px;
  align-items: stretch;
}
.mission__portrait {
  margin: 0;
  position: relative;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-3);
  /* lime corner ticks evoke the pixel/CRT brand frame */
  box-shadow:
    -6px -6px 0 -3px var(--lime),
     6px  6px 0 -3px var(--lime);
}
.mission__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.95);
}
@media (max-width: 900px) {
  .mission__portrait { max-width: 100%; aspect-ratio: 3 / 2; }
}
.mission__body {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--cream);
  max-width: 760px;
}
.mission__body .lime { color: var(--lime); }

.mission__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 80px;
}
@media (max-width: 900px) {
  .mission__cards { grid-template-columns: 1fr; }
}
.card {
  background: var(--ink-2);
  border: 1px solid rgba(243, 239, 226, 0.12);
  padding: 28px;
  position: relative;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover { border-color: var(--lime); transform: translate(-3px, -3px); }
.card::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 8px; height: 8px; background: var(--lime);
}
.card__num {
  font-size: 11px; letter-spacing: 0.2em; color: var(--olive);
  margin-bottom: 24px;
}
.card__title {
  font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--lime); margin: 0 0 12px;
}
.card__body { font-size: 13px; line-height: 1.6; color: var(--cream-dim); margin: 0; }

/* ROUTE / MAP ------------------------------------------------- */
/* NOTE: no `overflow: hidden` on .route — it would break the sticky
   positioning on .route__stage further down. We keep page-level
   horizontal overflow clipped on <body> instead. */
.route { background: var(--ink-2); position: relative; }

/* Captive-scroll wrapper: tall outer container whose travel through
   the viewport drives the map progress. Inner stage is sticky-pinned
   for the full duration, so the map stays in frame end-to-end. */
.route__captive {
  position: relative;
  height: 720vh;            /* 8 tours × out+back — needs more scroll room than the old linear chain */
}
.route__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;            /* dynamic — matches the real visible
                                viewport on mobile, even as the URL bar
                                shows/hides */
  display: flex;
  align-items: center;
  padding: 96px var(--pad) 64px;
  overflow: hidden;
  background: var(--ink-2);
}
.route__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  align-items: stretch;
}
@media (max-width: 820px) {
  .route__captive { height: 480vh; height: 480dvh; }
  .route__stage   { padding: 76px var(--pad) 70px; align-items: flex-start; }
  .route__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
  }
  /* Hoist the left-column children into the flex container so we can
     reorder them around the map. */
  .route__col-left { display: contents; }
  .route__col-left > .eyebrow        { order: 0; }
  .route__col-left > .route__title   { order: 1; }
  .route__col-left > .route__copy    { display: none; }
  .route__col-right                  { order: 2; width: 100%; }
  .route__col-left > .route__stagelist { order: 3; }
  .route__col-left > .route__scrollhint{ order: 4; }
  .route__title { font-size: clamp(24px, 6.5vw, 34px); }
}

.route__col-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-height: 0;
}
.route__title {
  font-size: clamp(32px, 3.6vw, 48px);
  margin: 0;
}
.route__copy {
  font-size: 13px; line-height: 1.65; color: var(--cream-dim);
  max-width: 320px;
  margin: 0;
}
.route__stagelist {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.route__stagelist li {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px;
  align-items: center;
  padding: 11px 14px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(243, 239, 226, 0.08);
  transition: all .25s ease;
  cursor: pointer;
}
.route__stagelist li:hover { border-color: rgba(201, 247, 60, 0.4); }
.route__stagelist li.active {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
}
.route__stagelist li.active .km { color: var(--ink); }
.route__stagelist .idx { color: var(--olive); }
.route__stagelist li.active .idx { color: var(--ink); }
.route__stagelist .km { color: var(--cream-dim); }

/* "Keep scrolling" hint with progress bar */
.route__scrollhint {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive);
  transition: opacity .3s ease;
}
.route__scrollhint.done { opacity: 0.45; }
.route__scrollhint-bar {
  position: relative; flex: 1; height: 4px;
  background: rgba(243, 239, 226, 0.08);
  overflow: hidden;
}
.route__scrollhint-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--lime);
  transition: width .12s linear;
}
.route__scrollhint-text { white-space: nowrap; }
.route__scrollhint.done .route__scrollhint-text::after {
  content: " ✓";
  color: var(--lime);
}

/* Floating bounce cue so users who park on the section know to keep
   scrolling. Anchored to the bottom of the sticky stage so it always
   sits where the eye expects "more below". Hidden once we're done. */
.route__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(11, 14, 8, 0.85);
  border: 1px solid rgba(201, 247, 60, 0.5);
  color: var(--lime);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity .4s ease;
  animation: routeCuePulse 2.4s ease-in-out infinite;
}
.route__scroll-cue.show { opacity: 1; }
.route__scroll-cue.done { opacity: 0; }
.route__scroll-cue-arrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  animation: routeCueArrow 1.4s ease-in-out infinite;
}
@keyframes routeCueArrow {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}
@keyframes routeCuePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 247, 60, 0.35); }
  60%      { box-shadow: 0 0 0 14px rgba(201, 247, 60, 0); }
}
@media (max-width: 600px) {
  .route__scroll-cue-label { display: none; }
  .route__scroll-cue { padding: 8px 12px; }
}

.route__col-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.route__map {
  position: relative;
  aspect-ratio: 5/6;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  background: var(--ink);
  border: 1px solid rgba(243, 239, 226, 0.12);
  margin-left: auto;
}
@media (max-width: 820px) {
  .route__map {
    height: 44vh;
    height: 44dvh;
    width: auto;
    max-width: 100%;
    aspect-ratio: 5/6;
    margin: 0 auto;
  }
  /* tighter stagelist on phones — fewer big rows, still readable */
  .route__stagelist { margin: 0; gap: 4px; }
  .route__stagelist li {
    padding: 8px 12px;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    font-size: 10.5px;
  }
  .route__stagelist .km { font-size: 10px; }
}
#map-canvas {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: relative; z-index: 1;
}

/* City labels overlaid on the canvas (crisp DOM text) */
.map-label {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  margin-top: -16px;
  padding: 4px 8px 3px;
  background: rgba(11, 14, 8, 0.82);
  border: 1px solid rgba(201, 247, 60, 0.25);
  color: var(--olive);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  transition: color .25s, border-color .25s, background .25s;
}
.map-label.visited {
  color: var(--lime);
  border-color: var(--lime);
  background: rgba(11, 14, 8, 0.92);
}
.map-label.home {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
  font-weight: 400;
}
.map-label::after {
  content: "";
  position: absolute; left: 50%; bottom: -5px;
  width: 1px; height: 5px;
  background: currentColor;
  opacity: 0.5;
}

/* Snake game food label overlay */
.game__board-wrap { position: relative; }
#game-food-label {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  padding: 3px 6px;
  background: var(--ink);
  border: 1px solid var(--lime);
  color: var(--lime);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  z-index: 3;
}
#game-food-label::after {
  content: "";
  position: absolute; left: 50%; bottom: -4px;
  width: 1px; height: 4px;
  background: var(--lime);
  transform: translateX(-50%);
}

/* STAGES timeline -------------------------------------------- */
.stages { background: var(--ink); }
.stages__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.stages__list {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.stage-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid rgba(243, 239, 226, 0.1);
  align-items: start;
}
.stage-row:last-child { border-bottom: 1px solid rgba(243, 239, 226, 0.1); }
@media (max-width: 800px) {
  .stage-row { grid-template-columns: 1fr; gap: 16px; }
}
.stage-row__num {
  font-size: 36px; color: var(--olive); line-height: 1;
}
.stage-row__meta { display: flex; flex-direction: column; gap: 6px; }
.stage-row__date {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
}
.stage-row__city {
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1;
}
.stage-row__km {
  font-size: 12px; color: var(--olive);
  display: flex; gap: 12px;
  margin-top: 8px;
}
.stage-row__km b { color: var(--cream); font-weight: 400; }
.stage-row__desc {
  font-size: 14px; line-height: 1.7; color: var(--cream-dim);
}
.stage-row__media {
  margin-top: 14px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive);
}
.stage-row__media .dot { width:6px; height:6px; background: var(--lime); display:inline-block; flex: 0 0 auto; }
.stage-row__media-intro { color: var(--olive); margin-right: 4px; }
.stage-row__media a {
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.stage-row__media a:hover,
.stage-row__media a:focus-visible {
  color: var(--lime); border-bottom-color: var(--lime); outline: none;
}
.stage-row__media .sep { color: var(--olive); opacity: 0.6; }

/* UPDATES feed ---------------------------------------------- */
.updates { background: var(--ink-2); }
.updates__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .updates__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .updates__grid { grid-template-columns: 1fr; } }
.update-card {
  background: var(--ink); border: 1px solid rgba(243, 239, 226, 0.1);
  transition: transform .25s ease, border-color .25s ease;
  /* link + button reset so anchors and <button>s look identical */
  display: block; text-decoration: none; color: inherit;
  text-align: left; padding: 0; cursor: pointer; font: inherit;
  width: 100%;
}
.update-card:hover { transform: translate(-3px, -3px); border-color: var(--lime); }
.update-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.update-card__thumb {
  aspect-ratio: 16/9;
  background: var(--olive-dark);
  background-size: cover; background-position: center;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.update-card__thumb--portrait {
  /* the local 9:16 reel keeps a 4:5 thumb so a meaningful part is visible */
  aspect-ratio: 4/5;
  background-position: center 30%;
}
.update-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,14,8,0.0) 40%, rgba(11,14,8,0.55) 100%),
    repeating-linear-gradient(45deg,
      rgba(201, 247, 60, 0.06) 0 8px,
      transparent 8px 16px);
}
.update-card__type {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--lime); color: var(--ink);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px;
}
.update-card__play {
  width: 56px; height: 56px;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  transition: transform .25s ease;
}
.update-card:hover .update-card__play { transform: scale(1.1); }
.update-card__play::before {
  content: ""; width: 0; height: 0;
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}
.update-card__body { padding: 18px; }
.update-card__date {
  font-size: 10px; letter-spacing: 0.18em; color: var(--olive);
  margin-bottom: 8px;
}
.update-card__title {
  font-size: 14px; color: var(--cream); line-height: 1.4;
  margin: 0;
}

/* GAME ------------------------------------------------------- */
.game { background: var(--ink); }
.game__inner {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px;
  align-items: center;
}
@media (max-width: 1000px) { .game__inner { grid-template-columns: 1fr; } }
.game__head h2 { margin: 16px 0 20px; }
.game__head p {
  font-size: 14px; line-height: 1.7; color: var(--cream-dim);
  margin: 0 0 24px;
}
.game__keys {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.16em;
}
.game__key {
  border: 1px solid var(--olive);
  padding: 8px 12px;
  color: var(--olive);
  text-transform: uppercase;
}
.game__board-wrap {
  background: var(--ink-2);
  padding: 16px;
  border: 1px solid rgba(243, 239, 226, 0.12);
  position: relative;
}
.game__hud {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0 4px 12px;
}
.game__hud b { color: var(--lime); font-weight: 400; }
.game__canvas {
  width: 100%; aspect-ratio: 1; background: #000;
  display: block;
  image-rendering: pixelated;
}
.game__overlay {
  position: absolute; inset: 16px;
  background: rgba(11, 14, 8, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
}
.game__overlay h3 {
  color: var(--lime); font-size: 22px; margin: 0;
  text-transform: uppercase;
}
.game__overlay p { color: var(--cream-dim); margin: 0; font-size: 12px; max-width: 280px; }
.game__btn {
  background: var(--lime); color: var(--ink);
  padding: 12px 18px; border: 0;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  position: relative;
}
.game__btn::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: 6px 6px 0 var(--olive); z-index: -1;
}

/* SPONSORS --------------------------------------------------- */
.sponsors { background: var(--ink-2); }
.sponsors__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(243, 239, 226, 0.1);
  margin-top: 48px;
  border: 1px solid rgba(243, 239, 226, 0.1);
}
@media (max-width: 900px) { .sponsors__grid { grid-template-columns: repeat(2, 1fr); } }
.sponsor {
  background: var(--ink);
  aspect-ratio: 5/3;
  display: flex; flex-direction: column;
  transition: background .2s;
  position: relative;
  overflow: hidden;
}
.sponsor:hover { background: var(--ink-3); }
.sponsor__logo-zone {
  flex: 1 1 62%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px;
  overflow: hidden;
  transition: filter .25s;
}
.sponsor__logo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.1);
  transition: filter .25s ease;
}
.sponsor:hover .sponsor__logo { filter: grayscale(0) brightness(1); }
.sponsor__logo-fallback {
  font-size: 18px; letter-spacing: 0.04em; font-weight: 700;
  color: var(--cream); text-transform: uppercase;
  text-align: center; line-height: 1.05;
}
.sponsor:hover .sponsor__logo-zone { filter: brightness(1.1); }
.sponsor__meta {
  padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.sponsor__name {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cream);
}
.sponsor:hover .sponsor__name { color: var(--lime); }
.sponsor__role {
  font-size: 10px; letter-spacing: 0.18em; color: var(--olive);
}
.sponsor__chev {
  position: absolute; bottom: 12px; right: 12px;
  width: 12px; height: 12px;
  opacity: 0; transition: opacity .2s;
}
.sponsor:hover .sponsor__chev { opacity: 1; }

/* ============================================================
   GALLERY 2023 — interactive print-stack
   ============================================================ */
.gallery { background: var(--ink); position: relative; }
.gallery__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.gallery__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;       /* don't let the rail stretch the row and
                               feed the stage's aspect-ratio extra height */
}
@media (max-width: 900px) {
  .gallery__layout { grid-template-columns: 1fr; gap: 32px; }
}

.gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;       /* aspect drives HEIGHT from the column width */
  background: var(--ink-2);
  border: 1px solid rgba(243, 239, 226, 0.1);
  overflow: hidden;
  /* subtle film-strip frame */
  background-image:
    radial-gradient(circle at 10px 10px, rgba(201,247,60,0.18) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(201,247,60,0.18) 1px, transparent 1.5px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(201,247,60,0.18) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(201,247,60,0.18) 1px, transparent 1.5px);
  background-repeat: no-repeat;
}

.gallery__deck {
  position: absolute; inset: 0;
  display: block;
}

/* Each card pinned to centre, transforms move them around the stack. */
.photo-card {
  position: absolute;
  top: 50%; left: 50%;
  width: min(78%, 380px);
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  padding: 14px 14px 0;
  box-shadow:
    0 20px 30px -10px rgba(0,0,0,0.45),
    12px 12px 0 0 rgba(11,14,8,0.85);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  transition:
    transform .55s cubic-bezier(.2,.75,.2,1),
    opacity   .35s ease;
  will-change: transform, opacity;
  cursor: pointer;
}
.photo-card.top {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  z-index: 5;
}
.photo-card.top:hover {
  transform: translate(-50%, -52%) rotate(-1deg);
}
.photo-card.d1 {
  opacity: 1;
  transform: translate(calc(-50% + 34px), calc(-50% + 16px)) rotate(2.5deg);
  z-index: 4;
}
.photo-card.d2 {
  opacity: 0.96;
  transform: translate(calc(-50% + 64px), calc(-50% + 30px)) rotate(4.5deg);
  z-index: 3;
}
.photo-card.d3 {
  opacity: 0.85;
  transform: translate(calc(-50% + 90px), calc(-50% + 42px)) rotate(6.5deg);
  z-index: 2;
}
.photo-card.prev {
  opacity: 0;
  transform: translate(calc(-50% - 70vw), calc(-50% - 20px)) rotate(-22deg);
  z-index: 1;
  pointer-events: none;
}
.photo-card.hidden {
  opacity: 0;
  transform: translate(calc(-50% + 140px), calc(-50% + 70px)) rotate(8deg);
  pointer-events: none;
}

.photo-card__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ink-2);
  overflow: hidden;
  border: 1px solid rgba(11, 14, 8, 0.15);
}
.photo-card__corner {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime);
  z-index: 2;
}
.photo-card__corner-num { font-weight: 400; }
.photo-card__corner-tag { color: var(--cream-dim); }
.photo-card__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}
.photo-card__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}
.photo-card__placeholder-stripes {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(201, 247, 60, 0.07) 0 12px,
      transparent 12px 24px),
    radial-gradient(ellipse at center, rgba(243, 239, 226, 0.04) 0%, transparent 65%);
}
.photo-card__placeholder-tag {
  position: relative;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive);
  background: var(--ink);
  padding: 6px 10px;
  border: 1px dashed rgba(201, 247, 60, 0.4);
}
.photo-card__placeholder-loc {
  position: relative;
  font-size: 28px;
  color: rgba(201, 247, 60, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 12px;
}
.photo-card__stamp {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: baseline; gap: 6px;
  background: var(--lime); color: var(--ink);
  padding: 4px 8px 3px;
  font-size: 13px; letter-spacing: 0.04em;
  z-index: 2;
}
.photo-card__stamp i {
  font-style: normal;
  font-size: 9px; letter-spacing: 0.18em;
}
.photo-card__cap {
  padding: 16px 4px 18px;
}
.photo-card__loc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.photo-card__loc {
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
}
.photo-card__country {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--olive);
  border: 1px solid var(--olive);
  padding: 2px 6px;
}
.photo-card__date {
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--olive);
  margin-bottom: 8px;
}
.photo-card__sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.78;
}

/* Nav buttons */
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink);
  border: 1px solid rgba(201, 247, 60, 0.4);
  color: var(--lime);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  z-index: 10;
  transition: background .15s, color .15s, transform .15s;
}
.gallery__nav:hover {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
}
.gallery__nav--prev { left: 16px; }
.gallery__nav--next { right: 16px; }
.gallery__nav-arrow { font-size: 14px; line-height: 1; }
.gallery__nav-label {}
@media (max-width: 700px) {
  .gallery__nav-label { display: none; }
}

/* Right rail */
.gallery__rail {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.gallery__counter {
  font-size: clamp(48px, 6vw, 72px);
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gallery__counter-sub {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive);
}
.gallery__hint {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px;
}
.gallery__strip {
  list-style: none; padding: 0;
  margin: 8px 0 0;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid rgba(243, 239, 226, 0.08);
}
.gallery__strip::-webkit-scrollbar { width: 6px; }
.gallery__strip::-webkit-scrollbar-thumb {
  background: rgba(201, 247, 60, 0.18);
}
.gallery__strip-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(243, 239, 226, 0.06);
  cursor: pointer;
  transition: color .2s, background .2s;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-dim);
}
.gallery__strip-item:hover { color: var(--lime); }
.gallery__strip-item.visited { color: var(--olive); }
.gallery__strip-item.visited .gallery__strip-num { color: var(--olive); }
.gallery__strip-item.active {
  color: var(--ink);
  background: var(--lime);
}
.gallery__strip-item.active .gallery__strip-num { color: var(--ink); }
.gallery__strip-item.active .gallery__strip-km   { color: var(--ink); }
.gallery__strip-num { color: var(--olive); }
.gallery__strip-loc { color: inherit; }
.gallery__strip-km { color: var(--olive); font-size: 10px; }

.gallery__legend {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive);
}
.gallery__legend-dot {
  width: 6px; height: 6px;
  background: var(--lime);
  display: inline-block;
}

/* CTA -------------------------------------------------------- */
.cta {
  background: var(--lime); color: var(--ink);
  padding: clamp(80px, 14vh, 180px) var(--pad);
  position: relative; overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,14,8,0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgba(11,14,8,0.06) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta__head {
  font-size: clamp(38px, 6vw, 84px);
  line-height: 0.98; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 32px;
  max-width: 18ch;
}
.cta__row {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 40px;
}
.cta__btn {
  background: var(--ink); color: var(--lime);
  padding: 18px 24px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  position: relative;
  border: 0;
}
.cta__btn::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: 8px 8px 0 var(--olive-dark); z-index: -1; transition: box-shadow .15s;
}
.cta__btn:hover::after { box-shadow: 12px 12px 0 var(--olive-dark); }
.cta__progress-wrap { width: 100%; max-width: 720px; margin-top: 40px; }
.cta__progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 12px;
}
.cta__progress {
  width: 100%; height: 28px;
  background: rgba(11,14,8,0.15);
  display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px;
  padding: 2px;
}
.cta__progress span {
  background: rgba(11,14,8,0.1);
}
.cta__progress span.on { background: var(--ink); }
.cta__progress-meta b { font-weight: 700; }

.cta__btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* Bank-transfer block under the donate CTA */
.cta__bank {
  margin-top: 56px;
  max-width: 720px;
  background: rgba(11,14,8,0.06);
  border: 1px solid rgba(11,14,8,0.25);
  padding: 28px 32px 24px;
}
.cta__bank-title {
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 18px; font-weight: 500;
}
.cta__bank-list {
  margin: 0; padding: 0; display: grid; gap: 10px;
}
.cta__bank-list > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(11,14,8,0.2);
}
.cta__bank-list > div:last-of-type { border-bottom: 0; }
.cta__bank-list dt {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(11,14,8,0.7); font-weight: 400; margin: 0;
}
.cta__bank-list dd {
  margin: 0;
  font-size: 15px; letter-spacing: 0.04em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cta__bank-note {
  margin: 18px 0 0; font-size: 12px; line-height: 1.5;
  color: rgba(11,14,8,0.72); max-width: 60ch;
}
@media (max-width: 600px) {
  .cta__bank { padding: 22px 18px 20px; }
  .cta__bank-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* FOOTER ----------------------------------------------------- */
.footer { background: var(--ink); padding: 60px var(--pad) 40px; }
.footer__inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  max-width: var(--maxw); margin: 0 auto;
}
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
.footer__col h4 {
  font-size: 10px; letter-spacing: 0.2em; color: var(--olive);
  margin: 0 0 16px; text-transform: uppercase;
}
.footer__col a {
  display: block; font-size: 12px; color: var(--cream-dim);
  padding: 4px 0; transition: color .2s;
}
.footer__col a:hover { color: var(--lime); }
.footer__brand img { width: 220px; }
.footer__brand p {
  font-size: 11px; color: var(--olive);
  line-height: 1.6;
  margin: 16px 0 0;
}
.footer__legal {
  border-top: 1px solid rgba(243, 239, 226, 0.08);
  margin-top: 48px; padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.18em; color: var(--olive);
}
@media (max-width: 600px) { .footer__legal { flex-direction: column; gap: 8px; } }

/* TICKER ---------------------------------------------------- */
.ticker {
  border-top: 1px solid rgba(201, 247, 60, 0.2);
  border-bottom: 1px solid rgba(201, 247, 60, 0.2);
  background: var(--ink);
  overflow: hidden;
  padding: 14px 0;
  position: relative; z-index: 2;
}
.ticker__track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: tickScroll 40s linear infinite;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lime);
}
.ticker__track span {
  display: inline-flex; gap: 56px; align-items: center;
}
.ticker__track i {
  font-style: normal; color: var(--olive);
}
@keyframes tickScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SCROLL-driven section helpers */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-in.in { opacity: 1; transform: translateY(0); }

/* utility */
.row { display: flex; align-items: center; gap: 12px; }
.muted { color: var(--cream-dim); }
.lime-text { color: var(--lime); }

/* i18n — show/hide blocks by current document lang */
html[lang="de"] [data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="de"] { display: none !important; }

/* ============================================================
   INTRO ANIMATION — first-load only.
   The .intro overlay covers the page while a short sequence
   bridges OWNPATH 2023 (old wordmark) → 2.0 flash → new pixel
   logo. JS toggles data-phase to drive the staged animations.
   ============================================================ */
body.has-intro { overflow: hidden; }

.intro {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
  opacity: 1;
  transition: opacity .55s ease;
}
.intro::before {
  /* faint scanline / film-grain texture so it doesn't feel flat */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(243, 239, 226, 0.025) 0 1px,
      transparent 1px 3px);
  pointer-events: none;
  opacity: 0.6;
}
.intro::after {
  /* corner vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.intro.is-on { display: flex; }
.intro.is-leaving { opacity: 0; pointer-events: none; }

.intro__stage {
  position: relative;
  width: min(86vw, 760px);
  height: clamp(140px, 22vw, 240px);
  z-index: 1;
}
.intro__stage > * {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  margin: auto;
}
.intro__old, .intro__new { object-fit: contain; }
.intro__old {
  opacity: 0;
  transform: scale(.94);
  filter: drop-shadow(0 0 26px rgba(243, 239, 226, 0.08));
  /* white-ish tone for the old SVG so it reads on dark, regardless of
     whatever inks the original file uses. */
  -webkit-filter: brightness(0) invert(1) drop-shadow(0 0 26px rgba(243,239,226,0.18));
  filter:         brightness(0) invert(1) drop-shadow(0 0 26px rgba(243,239,226,0.18));
}
/* Fallback when external SVG fails — replaced inline by JS */
.intro__old--fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(48px, 9vw, 96px);
  letter-spacing: 0.06em;
  color: var(--cream);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0;
}
.intro__twoOh {
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(120px, 22vw, 260px);
  line-height: 1;
  color: var(--rust);
  letter-spacing: -0.05em;
  opacity: 0;
}
.intro__new {
  opacity: 0;
  transform: scale(.55);
  filter: blur(14px) brightness(0);
}

.intro__legend {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  z-index: 1;
  height: 22px;
}
.intro__legend-old { opacity: 0; transition: opacity .35s ease, color .4s ease; }
.intro__legend-sep { opacity: 0; transition: opacity .35s ease, color .4s ease; }
.intro__legend-new { opacity: 0; transition: opacity .4s ease, color .4s ease; }

.intro__skip {
  position: absolute; top: 22px; right: 22px;
  background: transparent;
  border: 1px solid rgba(201, 247, 60, 0.4);
  color: var(--lime);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, transform .15s;
  z-index: 2;
}
.intro__skip:hover {
  background: var(--lime); color: var(--ink); transform: translate(-1px, -1px);
}

/* ---- Phase-driven animations ----------------------------- */
/* Each animation is self-contained (from + to set both ends) so a
   later phase can pick up cleanly even if the previous one is mid-flight. */

.intro[data-phase="old"] .intro__old,
.intro[data-phase="old"] .intro__old--fallback {
  animation: introOldIn .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro[data-phase="old"] .intro__legend-old { opacity: 1; }

.intro[data-phase="fade"] .intro__old,
.intro[data-phase="fade"] .intro__old--fallback {
  animation: introOldGlitch .65s cubic-bezier(.5,0,.5,1) forwards;
}

.intro[data-phase="two-orange"] .intro__twoOh {
  animation: introTwoOhIn .5s cubic-bezier(.2,.7,.2,1.2) forwards;
}
.intro[data-phase="two-lime"] .intro__twoOh {
  animation: introTwoOhColor .55s cubic-bezier(.4,.1,.4,1) forwards;
}

.intro[data-phase="swap"] .intro__twoOh {
  animation: introTwoOhOut .45s cubic-bezier(.5,0,.7,.2) forwards;
}
.intro[data-phase="swap"] .intro__new,
.intro[data-phase="new"]  .intro__new {
  animation: introNewIn .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro[data-phase="swap"] .intro__legend-old,
.intro[data-phase="new"]  .intro__legend-old {
  opacity: 0;
}
.intro[data-phase="swap"] .intro__legend-sep,
.intro[data-phase="new"]  .intro__legend-sep {
  opacity: 1; color: var(--lime);
}
.intro[data-phase="new"] .intro__legend-new {
  opacity: 1; color: var(--lime);
}

@keyframes introOldIn {
  0%   { opacity: 0; transform: scale(.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1)  translateY(0); }
}
@keyframes introOldGlitch {
  /* CRT-style turn-off: shake + hue-shift, collapse to a thin line, fade */
  0%   { opacity: 1; transform: scale(1); }
  18%  { transform: translate(-3px, 0) skewX(3deg);
         filter: brightness(0) invert(1) hue-rotate(40deg) drop-shadow(0 0 32px rgba(213,97,42,0.55)); }
  36%  { transform: translate(4px, 0) skewX(-4deg);
         filter: brightness(0) invert(1) hue-rotate(-30deg) drop-shadow(0 0 28px rgba(201,247,60,0.4)); }
  55%  { opacity: .95; transform: scaleY(.45) scaleX(1.03);
         filter: brightness(0) invert(1) blur(2px); }
  78%  { opacity: .6;  transform: scaleY(.1)  scaleX(1.12);
         filter: brightness(0) invert(1) blur(4px); }
  100% { opacity: 0;   transform: scaleY(.04) scaleX(1.3);
         filter: brightness(0) invert(1) blur(8px); }
}
@keyframes introTwoOhIn {
  0%   { opacity: 0; transform: scale(2.6); filter: blur(18px);
         color: var(--rust); text-shadow: 0 0 60px rgba(213,97,42,0.7); }
  55%  { opacity: 1; transform: scale(.92); filter: blur(0); }
  100% { opacity: 1; transform: scale(1);   filter: blur(0);
         color: var(--rust); text-shadow: 0 0 40px rgba(213,97,42,0.55); }
}
@keyframes introTwoOhColor {
  0%   { color: var(--rust);  transform: scale(1);
         text-shadow: 0 0 40px rgba(213,97,42,0.55); }
  30%  { color: var(--rust);  transform: scale(1.07);
         text-shadow: 0 0 70px rgba(213,97,42,0.9); }
  55%  { color: var(--cream); transform: scale(1.04);
         text-shadow: 0 0 76px rgba(243,239,226,0.55); }
  100% { color: var(--lime);  transform: scale(1);
         text-shadow: 0 0 48px rgba(201,247,60,0.6); }
}
@keyframes introTwoOhOut {
  0%   { opacity: 1; transform: scale(1)    rotate(0); filter: blur(0);
         color: var(--lime); }
  100% { opacity: 0; transform: scale(.22)  rotate(8deg);
         filter: blur(18px); }
}
@keyframes introNewIn {
  0%   { opacity: 0; transform: scale(.55); filter: blur(14px) brightness(0); }
  40%  { opacity: 1; transform: scale(1.04); filter: blur(0) brightness(1.4); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0) brightness(1); }
}

@media (max-width: 600px) {
  .intro { gap: 24px; }
  .intro__stage  { height: clamp(110px, 28vw, 160px); }
  .intro__twoOh  { font-size: clamp(96px, 30vw, 180px); }
  .intro__legend { font-size: 9px; gap: 10px; }
  .intro__skip   { top: 14px; right: 14px; padding: 6px 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the intro entirely if the user prefers calm */
  .intro { display: none !important; }
}

/* ============================================================
   MOBILE SWEEP — phone-portrait polish across every section.
   Anything above ~820px stays exactly as the desktop layout
   has been tuned; below, we tighten paddings, swap stat density,
   collapse sponsor / footer grids and shrink the gallery deck.
   ============================================================ */
@media (max-width: 720px) {
  /* Section rhythm */
  .section-pad { padding: clamp(56px, 9vh, 96px) var(--pad); }

  /* Topbar — smaller, condensed */
  .topbar { padding: 10px var(--pad); }
  .topbar__logo { gap: 8px; font-size: 10px; }
  .topbar__logo img { height: 15px; }
  .topbar__logo span { display: none; }
  .topbar__cta { padding: 8px 11px; font-size: 10px; letter-spacing: 0.14em; }
  .topbar__cta::after { box-shadow: 4px 4px 0 var(--olive); }

  /* Hero */
  .hero { padding-top: 92px; padding-bottom: 40px; }
  .hero__top { gap: 16px; }
  .hero__top > div[style] { text-align: left !important; }
  .hero__center { margin: 32px 0 24px; gap: 24px; }
  .hero__logo { width: min(86vw, 520px); }
  .hero__sub { font-size: 13px; line-height: 1.65; }
  .hero__stat .num { font-size: clamp(26px, 8vw, 36px); }
  .hero__stat .label { font-size: 9px; }
  .hero__bottom { gap: 16px; padding-top: 18px; }

  /* Mission */
  .mission__head { margin-bottom: 40px; gap: 20px; }
  .mission__body { font-size: 17px; }
  .mission__cards { margin-top: 40px; gap: 14px; }
  .card { padding: 22px 20px; }

  /* Stages */
  .stages__head { margin-bottom: 32px; }
  .stage-row { padding: 26px 0; gap: 14px; }
  .stage-row__num { font-size: 28px; }
  .stage-row__city { font-size: clamp(24px, 7vw, 34px); }

  /* Updates */
  .updates__grid { margin-top: 28px; gap: 14px; }
  .update-card__body { padding: 14px; }
  .update-card__title { font-size: 13px; }

  /* Snake game — board occupies full mobile width, controls trimmed */
  .game__inner { gap: 28px; }
  .game__head h2 { margin: 12px 0 14px; }
  .game__head p { font-size: 13px; margin-bottom: 16px; }
  .game__keys { gap: 6px; font-size: 9px; }
  .game__key { padding: 6px 9px; }
  .game__board-wrap { padding: 10px; }
  .game__canvas { touch-action: none; }   /* let swipe handlers steer */

  /* Gallery — tighter deck + smaller counter on phones */
  .gallery__head { margin-bottom: 32px; gap: 18px; }
  .gallery__counter { font-size: clamp(38px, 12vw, 56px); }
  .gallery__counter-sub { font-size: 9px; }
  .gallery__layout { gap: 24px; }
  .gallery__rail { gap: 12px; }
  .photo-card { width: min(82%, 320px); }
  .photo-card.top  { transform: translate(-50%, -50%) rotate(-1.5deg); }
  .photo-card.d1   { transform: translate(calc(-50% + 22px), calc(-50% + 10px)) rotate(2deg); }
  .photo-card.d2   { transform: translate(calc(-50% + 40px), calc(-50% + 20px)) rotate(3.5deg); }
  .photo-card.d3   { transform: translate(calc(-50% + 56px), calc(-50% + 28px)) rotate(5deg); }
  .gallery__nav  { padding: 9px 11px; font-size: 9px; letter-spacing: 0.16em; }
  .gallery__nav--prev { left: 8px; }
  .gallery__nav--next { right: 8px; }
  .gallery__strip { max-height: 260px; }

  /* Sponsors collapse to two compact columns even on tiny screens */
  .sponsors__grid { margin-top: 28px; }
  .sponsor { aspect-ratio: 3/2; }
  .sponsor__logo-zone { padding: 10px 14px; }
  .sponsor__meta { padding: 10px 12px 12px; }
  .sponsor__name { font-size: 13px; }
  .sponsor__role { font-size: 9px; letter-spacing: 0.16em; }

  /* CTA */
  .cta__row { gap: 12px; }
  .cta__btn { padding: 14px 18px; font-size: 11px; }
  .cta__btn::after { box-shadow: 6px 6px 0 var(--olive-dark); }
  .cta__btn:hover::after { box-shadow: 8px 8px 0 var(--olive-dark); }

  /* Footer — single column stack on phones */
  .footer { padding: 40px var(--pad) 28px; }
  .footer__inner { grid-template-columns: 1fr; gap: 26px; }
  .footer__brand img { width: 180px; }
}

@media (max-width: 480px) {
  /* Slightly bigger swing for sub-iPhone-SE-ish screens */
  .topbar__nav { display: none; }
  .hero__logo { width: 90vw; }
  .hero__tagline { font-size: 18px; gap: 0.9em; }
  .hero__bottom {
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(243, 239, 226, 0.12);
  }
  .display { font-size: clamp(34px, 9vw, 64px); }
}

/* ============================================================
   FIREWORK overlay — full-viewport pixel particle canvas,
   spawned and removed by JS when the route scroll completes.
   ============================================================ */
.firework-canvas {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

/* ============================================================
   MODALS — Impressum / DSGVO
   Same visual language as cards: ink panel, lime accent rail,
   chunky monospace, mono-numbered sections.
   ============================================================ */
body.modal-locked { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
}
.modal.is-open { display: block; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 9, 5, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFadeIn .25s ease;
}
.modal__panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  background: var(--ink-2);
  border: 1px solid rgba(201, 247, 60, 0.35);
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 44px) 32px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: modalRise .35s cubic-bezier(.2,.7,.2,1);
  box-shadow:
    0 0 0 1px rgba(201, 247, 60, 0.06),
    14px 14px 0 0 var(--olive-dark),
    0 30px 60px -20px rgba(0,0,0,0.6);
}
/* Video modal: tight to video aspect, no padding, dark frame */
.modal__panel--video {
  width: min(440px, calc(100vw - 32px));
  max-height: 92vh;
  padding: 0;
  background: #000;
  border-color: rgba(201, 247, 60, 0.55);
  overflow: visible;
}
.modal__panel--video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  background: #000;
}
.modal__close--video {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: rgba(11, 14, 8, 0.78);
  border: 1px solid rgba(243, 239, 226, 0.25);
  color: var(--cream);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal__close--video:hover {
  background: var(--ink);
  border-color: var(--lime);
}
.modal__edge {
  position: absolute; left: 0; top: 0; right: 0;
  height: 4px;
  background:
    linear-gradient(to right,
      var(--lime) 0 16%,
      transparent 16% 22%,
      var(--lime) 22% 24%,
      transparent 24% 30%,
      var(--lime) 30% 56%,
      transparent 56% 62%,
      var(--lime) 62% 64%,
      transparent 64% 70%,
      var(--lime) 70% 100%);
  pointer-events: none;
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.modal__close {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid rgba(201, 247, 60, 0.35);
  color: var(--lime);
  padding: 6px 10px 6px 12px;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, color .15s;
}
.modal__close span[aria-hidden] {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}
.modal__close:hover {
  background: var(--lime);
  color: var(--ink);
}
.modal__close-label { font-size: 9px; }
.modal__title {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 14px;
  line-height: 1;
}
.modal__title::after { content: none; }
.modal__lede {
  font-size: 14px; line-height: 1.55;
  color: var(--cream);
  margin: 0 0 28px;
  max-width: 56ch;
}
.modal__body {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.65;
}
.modal__sect {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(243, 239, 226, 0.08);
}
.modal__sect:last-child { border-bottom: 1px solid rgba(243, 239, 226, 0.08); }
.modal__sect-num {
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--olive);
  padding-top: 3px;
}
.modal__sect h3 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 10px;
}
.modal__sect p {
  margin: 0 0 10px;
  color: var(--cream-dim);
}
.modal__sect p:last-child { margin-bottom: 0; }
.modal__sect em {
  font-style: normal;
  color: var(--olive);
  background: var(--ink-2);
  padding: 1px 6px;
  border: 1px dashed rgba(201, 247, 60, 0.18);
}
.modal__sect a {
  color: var(--lime);
  border-bottom: 1px solid rgba(201, 247, 60, 0.35);
}
.modal__sect a:hover { background: rgba(201, 247, 60, 0.08); }
.modal__sect .lime { color: var(--lime); }

/* Scrollbar styling for modal panel */
.modal__panel::-webkit-scrollbar { width: 8px; }
.modal__panel::-webkit-scrollbar-track { background: transparent; }
.modal__panel::-webkit-scrollbar-thumb {
  background: rgba(201, 247, 60, 0.18);
  border: 2px solid var(--ink);
}
.modal__panel::-webkit-scrollbar-thumb:hover { background: rgba(201, 247, 60, 0.35); }

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalRise {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 600px) {
  .modal__panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 22px 22px 28px;
    box-shadow: 8px 8px 0 0 var(--olive-dark);
  }
  .modal__sect { grid-template-columns: 36px 1fr; gap: 10px; }
}