/* =========================================================================
   BOUNCE by UNDR — brand stylesheet. Loads AFTER undr-base.css.

   The playful pole of the UNDR family: iridescent silk, candy fills, thick plum
   outlines, hard "sticker" shadows, balloon-glyph headings — and everything
   bounces. Family DNA that stays: mono micro-labels with wide tracking, the
   nav countdown, fluid clamp() type, the --undr-* token contract, the shared
   modal markup.

   Motion rules used throughout this sheet:
   - CSS owns `rotate` and `translate`; the `scale` property is RESERVED for the
     JS spring in bounce-ui.js (hover/press boing) and for one-shot keyframes.
     Keeping them on separate properties means they compose without fighting.
   - Every animation is switched off in the last section under
     prefers-reduced-motion and under .motion-off ("Pause the chaos").

   1 tokens · 2 fonts · 3 base · 4 layout · 5 chrome · 6 logo + glyph words
   7 buttons/pills · 8 cards/stickers · 9 home sections · 10 dresscode page
   11 tickets/news/prose · 12 modals + event detail · 13 chaos layer
   14 reveals · 15 reduced motion
   ========================================================================= */

/* ---- 1 · tokens ---------------------------------------------------------- */
:root {
  --hot:    #ff2e9a;
  --candy:  #ff6fc4;
  --bubble: #ff5cb8;   /* button pink: AA with plum ink (5.7:1) */
  /* pastels sampled from the silk — pink leads, the rest only ever support it */
  --blush:  #ffc9ec;
  --lilac:  #dcc8ff;
  --cyan:   #b5e6ff;   /* sky */
  --butter: #fff0ad;
  --peach:  #ffd6c2;
  --sun:    #fff0ad;
  --ink:    #3d0d37;   /* dark plum on the logo's own hue — never black */
  --ink-2:  #5c2a55;
  --paper:  #ffffff;
  --glass:  rgba(255, 255, 255, .74);
  --glass-solid: #fdeefa;

  --r-card: 28px;
  --r-pill: 999px;
  --line:   3px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ls-1: .14em;
  --ls-2: .24em;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --boing: cubic-bezier(.34, 1.56, .64, 1);
  --spring: var(--boing);

  /* UNDR token contract → BOUNCE values */
  --undr-bg:          #f7c6ee;
  --undr-bg-tint:     var(--glass-solid);
  --undr-surface-1:   #ffffff;
  --undr-surface-2:   #fbe3f6;
  --undr-ink:         var(--ink);
  --undr-ink-mid:     var(--ink-2);
  --undr-ink-faint:   rgba(61, 13, 55, .62);
  --undr-rule:        rgba(61, 13, 55, .16);
  --undr-rule-2:      rgba(61, 13, 55, .34);
  --undr-accent:      #c4168f;          /* AA on white for links/accents */
  --undr-accent-hot:  var(--hot);
  --undr-accent-soft: rgba(255, 46, 154, .14);
  --undr-live:        var(--hot);
  --undr-font-display: var(--font-sans);
  --undr-font-sans:    var(--font-sans);
  --undr-font-mono:    var(--font-mono);
  --undr-fs-hero: clamp(2.6rem, 9vw, 6rem);
  --undr-gutter:  clamp(1rem, 4vw, 2rem);
  --undr-max-w:   1080px;
  --undr-radius:  var(--r-card);
  --undr-section-y: clamp(64px, 10vw, 140px);
  --undr-ease:    var(--ease-out);
  --undr-focus:   0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 18.4%,
      1.077 20.4%, 1.121 22.6%, 1.149 25.1%, 1.159 27.7%, 1.154 30.4%, 1.129 34.4%,
      1.051 44.5%, 1.017 49.7%, .991 55.8%, .977 62.2%, .974 66.7%, .975 71.7%,
      .997 89.8%, 1.003 99.7%);
  }
}

/* ---- 2 · fonts (self-hosted, no third-party requests) -------------------- */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 500 900; font-display: swap; src: url('/assets/fonts/archivo-500.woff2') format('woff2'); }   /* variable font: one file, all weights */
@font-face { font-family: 'Spline Sans Mono'; font-weight: 400 500; font-display: swap; src: url('/assets/fonts/spline-mono-500.woff2') format('woff2'); }

/* ---- 3 · base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--undr-bg);
  color: var(--ink);
  font: 500 1.0625rem/1.6 var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* The silk: a fixed pseudo-element, not background-attachment:fixed (iOS repaints). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #d9a9e6 url('/assets/img/silk-1920.jpg') center / cover no-repeat;
  background-image: image-set(
    url('/assets/img/silk-1920.avif') type('image/avif'),
    url('/assets/img/silk-1920.webp') type('image/webp'),
    url('/assets/img/silk-1920.jpg') type('image/jpeg'));
}
@media (orientation: portrait) {
  body::before {
    background-image: url('/assets/img/silk-portrait-1080.jpg');
    background-image: image-set(
      url('/assets/img/silk-portrait-1080.avif') type('image/avif'),
      url('/assets/img/silk-portrait-1080.webp') type('image/webp'),
      url('/assets/img/silk-portrait-1080.jpg') type('image/jpeg'));
  }
}
img { max-width: 100%; height: auto; }
a { color: var(--undr-accent); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--candy); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--undr-focus); border-radius: 8px; }

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 300;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--candy); color: var(--ink); border: var(--line) solid var(--ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--ink); }

/* ---- 4 · layout ---------------------------------------------------------- */
.page { position: relative; z-index: 2; flex: 1; }
.section {
  width: min(100% - 2 * var(--undr-gutter), var(--undr-max-w));
  margin-inline: auto;
  padding-block: calc(var(--undr-section-y) / 2);
}
.center { text-align: center; }
.cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.split { display: grid; gap: 28px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.kicker, .mono-line {
  font: 500 .78rem/1.5 var(--font-mono);
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
}
.kicker {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--candy); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.mono-line { margin-top: 18px; letter-spacing: var(--ls-1); color: var(--ink-2); }
.mono-line--center { text-align: center; margin-top: 28px; }
.mono-line--center, .hero__hint {
  width: fit-content; margin-inline: auto; padding: 6px 16px;
  border-radius: var(--r-pill); background: var(--glass);
}

.big {
  margin: 10px auto 34px; max-width: 18ch; text-align: center;
  font: 900 clamp(2rem, 6.2vw, 4.4rem)/1.02 var(--font-sans);
  letter-spacing: -.02em; text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .55);
}
.shout {
  margin: 36px auto 0; max-width: 24ch; text-align: center; text-wrap: balance;
  font: 900 clamp(1.5rem, 3.6vw, 2.5rem)/1.1 var(--font-sans);
}
.shout--sm { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-top: 22px; max-width: none; }
.card .shout--sm { text-align: left; margin: 18px 0 22px; }

/* ---- 5 · chrome: header / footer ---------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 40; padding: 10px var(--undr-gutter); pointer-events: none; }
.site-head__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(8px, 2vw, 22px);
  max-width: var(--undr-max-w); margin-inline: auto;
  padding: 6px 8px 6px 10px;
  border: var(--line) solid var(--ink); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 46px; height: 46px; display: block; margin: -6px 0; }
.brand__sub { font: 500 .68rem/1 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 18px); margin-left: auto; }
.nav__list { display: flex; gap: clamp(4px, 1.2vw, 14px); }
.nav__link {
  display: block; padding: 8px 10px; border-radius: var(--r-pill);
  font: 700 .82rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav__link:hover, .nav__link--active { background: var(--blush); color: var(--ink); }
.lang-switch { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); border: 2px solid var(--ink); }
.lang-switch__link {
  padding: 5px 8px; border-radius: var(--r-pill);
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .1em; color: var(--ink); text-decoration: none;
}
.lang-switch__link[aria-current] { background: var(--candy); color: var(--ink); }

.site-foot {
  position: relative; z-index: 2; margin-top: var(--undr-section-y);
  border-top: var(--line) solid var(--ink);
  color: var(--ink);
  /* Opaque on purpose. A backdrop-filter here sat on top of the canvas, which
     repaints 60 times a second: browsers re-sampled the blur every frame and the
     whole footer flickered in and out. Solid colours need no sampling. */
  background: linear-gradient(180deg, #ffc9ec, #ff8fd2);
}
.site-foot__inner {
  width: min(100% - 2 * var(--undr-gutter), var(--undr-max-w)); margin-inline: auto;
  padding: 48px 0 calc(96px + env(safe-area-inset-bottom));   /* room so the floating ticket button never covers footer links */
  display: grid; gap: 36px; grid-template-columns: minmax(200px, 1fr) 2fr; align-items: start;
}
.site-foot__brand { display: flex; align-items: flex-start; gap: 16px; }
.site-foot__about { display: flex; flex-direction: column; gap: 14px; }
.site-foot__icon { width: 92px; height: 92px; flex: none; rotate: -8deg; }
.site-foot__line { max-width: 24ch; font-weight: 700; line-height: 1.3; }
.site-foot__cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.foot-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot-col__title { font: 500 .7rem/1 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--ink); opacity: .8; margin-bottom: 6px; }
.foot-col a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 2px 0; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; }
.site-foot__controls { display: flex; flex-wrap: wrap; gap: 10px; }
.site-foot__undr { grid-column: 1 / -1; justify-self: start; }
.site-foot__undr img { display: block; width: 120px; height: auto; filter: brightness(0); }   /* UNDR's own mark is black: never tinted to the brand */
.site-foot :focus-visible { box-shadow: var(--undr-focus); }
/* stack early so the brand text never squeezes into a sliver */
@media (max-width: 960px) {
  .site-foot__inner { grid-template-columns: 1fr; gap: 30px; }
  .site-foot__line { max-width: 44ch; }
}

.chip {
  cursor: pointer; padding: 9px 16px; border-radius: var(--r-pill);
  border: 2px solid currentColor; background: rgba(255, 255, 255, .55); color: var(--ink);
  font: 500 .74rem/1 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase;
}
.chip:hover { background: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--candy); color: var(--ink); border-color: var(--ink); }

/* ---- 6 · logo + balloon-glyph words ------------------------------------- */
/* Geometry comes from lib/glyphs.php (the locked png-type.py layout); 1em = cap height. */
.logo {
  position: relative; display: block; margin-inline: auto;
  font-size: min(14.6vw, 172px);
  width: calc(var(--logo-w) * 1em); height: calc(var(--logo-h) * 1em);
  line-height: 0; -webkit-user-select: none; user-select: none;
}
.logo__l {
  position: absolute;
  left: calc(var(--x) * 1em); top: calc(var(--y) * 1em);
  width: calc(var(--w) * 1em); height: calc(var(--h) * 1em);
  rotate: var(--rot);
  cursor: pointer;
}
.logo__l img {
  display: block; width: 100%; height: 100%;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 .03em .02em rgba(61, 13, 55, .28));
}
/* Intro: each letter drops in and bounces to rest, then idles. JS-only, so the
   no-JS render is simply the final locked wordmark. */
.js .logo__l img {
  animation:
    logo-drop 1.05s calc(var(--i) * 95ms + 120ms) backwards,
    logo-idle 2.8s calc(var(--i) * -.47s) ease-in-out infinite alternate;
}
@keyframes logo-drop {
  0%   { translate: 0 -125vh; scale: .88 1.16; animation-timing-function: cubic-bezier(.55, 0, .9, .55); }
  48%  { translate: 0 0;      scale: 1.26 .72; animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  66%  { translate: 0 -.26em; scale: .93 1.09; animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  82%  { translate: 0 0;      scale: 1.1 .91;  animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  92%  { translate: 0 -.05em; scale: .99 1.02; }
  100% { translate: 0 0;      scale: 1 1; }
}
@keyframes logo-idle { from { translate: 0 0; } to { translate: 0 -.035em; } }

.bword {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: .12em .34em; margin: 0 0 .18em;
  font-size: clamp(2.7rem, 9.5vw, 6.2rem); line-height: 1;
  -webkit-user-select: none; user-select: none;
}
.bword__w { display: inline-flex; align-items: flex-end; white-space: nowrap; }
.bword__l {
  display: block; width: auto; height: calc(var(--sc, 1) * 1em);
  margin-inline: .014em; rotate: var(--rot); translate: 0 var(--dy);
  filter: drop-shadow(0 .03em .02em rgba(61, 13, 55, .3));
  cursor: pointer;
}
.bword__t { font: 900 .8em/1 var(--font-sans); color: var(--hot); padding-inline: .04em; }
.bword--sm { font-size: clamp(2rem, 6vw, 3.6rem); }

/* ---- 7 · buttons / pills ------------------------------------------------- */
/* .btn is the (static) hit box + focus ring; .btn__skin is what squashes. */
.btn {
  position: relative; display: inline-block; padding: 0; border: 0; background: none;
  border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  color: var(--ink); -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn__skin {
  display: block; padding: 14px 26px; border-radius: var(--r-pill);
  border: var(--line) solid var(--ink); background: var(--paper);
  box-shadow: var(--shadow-sm);
  font: 900 .95rem/1.1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; transform-origin: 50% 100%;
  transition: translate var(--undr-t-fast) var(--ease-out), box-shadow var(--undr-t-fast) var(--ease-out), background-color var(--undr-t-fast);
}
.btn:hover { color: var(--ink); }
.btn:hover .btn__skin { translate: -2px -2px; box-shadow: 8px 8px 0 var(--ink); }
.btn:active .btn__skin { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.btn--lg .btn__skin { padding: 18px 34px; font-size: 1.08rem; }
.btn--sm .btn__skin { padding: 10px 16px; font-size: .78rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--hot  .btn__skin { background: var(--bubble); }
.btn--cyan .btn__skin { background: var(--cyan); }
.btn--butter .btn__skin { background: var(--butter); }
.btn--hot:hover  .btn__skin { background: var(--candy); }
.btn:focus-visible { box-shadow: var(--undr-focus); border-radius: var(--r-pill); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; margin-top: 30px; }
/* Buttons bounce in on load (hero only), one after the other. */
.js .hero .cta-row > * { animation: pop-in .8s calc(1s + var(--n, 0) * 110ms) backwards var(--spring); }
.hero .cta-row > :nth-child(2) { --n: 1; }
.hero .cta-row > :nth-child(3) { --n: 2; }

.pill {
  display: inline-block; padding: 10px 20px; border-radius: var(--r-pill);
  border: var(--line) dashed var(--ink); background: var(--glass);
  font: 500 .82rem/1.2 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 5px 12px; border-radius: var(--r-pill); border: 2px solid var(--ink);
  font: 500 .7rem/1.2 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; background: var(--paper);
}
.tags li:nth-child(3n + 1) { background: var(--blush); }
.tags li:nth-child(3n + 2) { background: var(--cyan); }

/* ---- 8 · cards / stickers ------------------------------------------------ */
.card {
  padding: clamp(20px, 3vw, 32px);
  border: var(--line) solid var(--ink); border-radius: var(--r-card);
  background: var(--glass-solid); box-shadow: var(--shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card { background: var(--glass); -webkit-backdrop-filter: blur(7px) saturate(1.4); backdrop-filter: blur(7px) saturate(1.4); }
}
.card--tilt-l { rotate: -1.6deg; }
.card--tilt-r { rotate: 1.2deg; }
.card p + p { margin-top: 1em; }

.sticker {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px;
  border: var(--line) solid var(--ink); border-radius: 22px; box-shadow: var(--shadow-sm);
  background: var(--paper); rotate: -1.5deg;
}
.sticker:nth-child(even) { rotate: 1.8deg; }
.sticker:nth-child(3n) { rotate: -2.6deg; }
.sticker b { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.sticker span { font-size: .95rem; line-height: 1.45; }
.sticker:nth-child(4n + 1) { background: var(--blush); }
.sticker:nth-child(4n + 2) { background: var(--cyan); }
.sticker:nth-child(4n + 3) { background: var(--lilac); }
.sticker:nth-child(4n + 4) { background: var(--sun); }
.sticker--big { padding: 24px 26px; }
.sticker--big b { font-size: 1.3rem; }

/* ---- 9 · home sections --------------------------------------------------- */
.hero {
  min-height: calc(100svh - 80px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px var(--undr-gutter) 56px; text-align: center;
}
.hero__kicker { margin-bottom: clamp(18px, 4vh, 40px); }
.hero__tagline {
  margin-top: clamp(14px, 3vh, 30px); max-width: 22ch; text-wrap: balance;
  font: 900 clamp(1.35rem, 3.6vw, 2.3rem)/1.12 var(--font-sans); letter-spacing: -.01em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
.hero__event {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 26px);
  margin-top: clamp(20px, 4vh, 36px); padding: 12px 26px 12px 22px; text-align: left;
}
.hero__date { font: 400 clamp(3.4rem, 10vw, 6rem)/.9 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.hero__meta { display: flex; flex-direction: column; gap: 3px; font: 500 .8rem/1.35 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.hero__meta span:nth-child(2) { font-weight: 500; color: var(--undr-accent); }
.hero__hint { margin-top: 30px; font: 400 .74rem/1.3 var(--font-mono); letter-spacing: .06em; color: var(--ink-2); }
@media (hover: none) { .hero__hint { display: none; } }

.marquee {
  position: relative; z-index: 2; overflow: hidden; rotate: -1.4deg; margin: 0 -2vw;
  border-block: var(--line) solid var(--ink); background: var(--candy);
}
.marquee__track { display: flex; width: max-content; padding: 12px 0; animation: marquee 80s linear infinite; }
/* Four identical groups, each carrying its own trailing gap, so sliding by exactly
   one group (-25%) lands on an identical frame: a seamless, endless loop. */
.marquee__group { display: flex; flex: none; align-items: center; gap: 22px; padding-right: 22px; }
.marquee span { font: 400 1.5rem/1 var(--font-display); letter-spacing: .04em; white-space: nowrap; }
.marquee i { font-style: normal; color: var(--paper); }
@keyframes marquee { to { translate: -25% 0; } }

.names { text-align: center; }
.names__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 12px; margin-top: 18px; }
.names__item > * {
  display: block; padding: 10px 18px; border: var(--line) solid var(--ink); border-radius: var(--r-pill);
  background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
  font: 700 clamp(1.05rem, 2.2vw, 1.4rem)/1.1 var(--font-sans);   /* names as written: NO text-transform */
}
.names__item:nth-child(odd) > * { rotate: -2.2deg; }
.names__item:nth-child(even) > * { rotate: 1.8deg; }
.names__item:nth-child(3n) > * { background: var(--cyan); }
.names__item:nth-child(3n + 1) > * { background: var(--blush); }
.names__item a:hover { background: var(--butter); }

.polaroids { position: relative; display: block; height: clamp(300px, 44vw, 440px); }
.polaroid {
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 22vw, 220px); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 8px solid var(--paper); border-bottom-width: 30px; border-radius: 6px;
  box-shadow: 0 10px 24px rgba(61, 13, 55, .35);
  translate: calc(-50% + (var(--i) - 2) * 26%) calc(-50% + (var(--i) - 2) * (var(--i) - 2) * 3%);
  rotate: calc((var(--i) - 2) * 7deg);
  transition: translate .4s var(--spring), rotate .4s var(--spring);
}
.polaroids:hover .polaroid { translate: calc(-50% + (var(--i) - 2) * 34%) calc(-54% + (var(--i) - 2) * (var(--i) - 2) * 2%); rotate: calc((var(--i) - 2) * -5deg); }

.floors { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.floor__name { font: 400 clamp(2.2rem, 5vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; }
.floor--1 { rotate: -1.2deg; }
.floor--1 .floor__name { color: var(--undr-accent); }
.floor--2 { rotate: 1.4deg; background: rgba(203, 170, 255, .88); }
.extras { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.rules { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: rule; }
.rule { display: flex; flex-direction: column; gap: 8px; counter-increment: rule; }
.rule::before { content: counter(rule); font: 400 3rem/1 var(--font-display); color: var(--hot); }
.rule b { font-weight: 900; font-size: 1.15rem; line-height: 1.2; }
.rule:nth-child(odd) { rotate: -1deg; }
.rule:nth-child(even) { rotate: 1deg; }
.tips { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.dates { display: grid; gap: 14px; margin-bottom: 34px; }
.date-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px 20px;
  padding: 14px 22px; cursor: pointer; text-align: left;
  border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-sm);
  transition: background-color var(--undr-t-fast);
}
.date-row:hover { background: var(--blush); }
.date-row__date { font: 400 2rem/1 var(--font-display); }
.date-row__name { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.date-row__venue { font: 500 .78rem/1.2 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.date-row__go { font-weight: 900; font-size: 1.3rem; }
@media (max-width: 560px) {
  .date-row { grid-template-columns: auto 1fr auto; border-radius: 26px; }
  .date-row__venue { grid-column: 2; grid-row: 2; }
  .date-row__go { grid-row: 1 / span 2; grid-column: 3; }
}

/* ---- 10 · dresscode page ------------------------------------------------- */
.page-head { text-align: center; padding: clamp(36px, 7vw, 80px) var(--undr-gutter) 0; }
.page-head .big { margin-bottom: 0; }
.page-head__lede { max-width: 56ch; margin: 22px auto 0; padding: 18px 24px; border-radius: var(--r-card); background: var(--glass); font-size: 1.12rem; }
.prose-card { max-width: 760px; margin-inline: auto; font-size: 1.1rem; }
.prose-card strong { font-weight: 900; }

.verdict { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.verdict__col { rotate: -1deg; }
.verdict__col--no { rotate: 1.2deg; background: rgba(255, 214, 194, .9); }
.verdict__title { font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--font-display); letter-spacing: .03em; margin-bottom: 14px; color: var(--undr-accent); }
.verdict__list li { display: grid; grid-template-columns: 1.6em 1fr; padding: 8px 0; border-bottom: 2px dotted currentColor; }
.verdict__list li:last-child { border-bottom: 0; }
.verdict__list li::before { content: '✓'; font-weight: 900; }
.verdict__col--no .verdict__list li::before { content: '✕'; color: var(--undr-accent); }
.verdict__list em { display: block; grid-column: 2; font-style: normal; font-size: .9rem; opacity: .8; }

.ideas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.idea { display: flex; flex-direction: column; gap: 8px; }
.idea__emoji { font-size: 2.2rem; line-height: 1; }
.idea__name { font: 900 1.2rem/1.15 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; }
.idea p { font-size: .98rem; line-height: 1.5; }
.idea:nth-child(3n + 1) { rotate: -1.2deg; }
.idea:nth-child(3n + 2) { rotate: .8deg; }
.idea:nth-child(3n) { rotate: 1.6deg; }
.idea:nth-child(4n + 2) { background: var(--blush); }
.idea:nth-child(4n + 3) { background: var(--cyan); }
.idea:nth-child(5n + 4) { background: var(--lilac); }
.idea-machine { margin: 0 auto 36px; max-width: 640px; text-align: center; }
.idea-machine__out { min-height: 3.3em; display: grid; place-items: center; margin-bottom: 18px; font: 900 clamp(1.2rem, 3vw, 1.7rem)/1.2 var(--font-sans); text-wrap: balance; }
.idea-machine__out.is-new { animation: pop-in .6s var(--spring); }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(45%, 190px), 1fr)); }
.gallery__cell {
  display: block; overflow: hidden; aspect-ratio: 4 / 5; border: var(--line) solid var(--ink); border-radius: 18px;
  background: var(--candy) center / cover no-repeat; box-shadow: var(--shadow-sm);
}
.gallery__cell:nth-child(odd) { rotate: -1.2deg; }
.gallery__cell:nth-child(even) { rotate: 1deg; }
.gallery__cell:nth-child(3n) { rotate: 2deg; }
.gallery__cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--spring); }
.gallery__cell:hover img { scale: 1.08; }
.gallery-more { margin-top: 22px; }
.gallery-more > summary { list-style: none; cursor: pointer; width: fit-content; margin: 0 auto 22px; }
.gallery-more > summary::-webkit-details-marker { display: none; }
.gallery-more[open] > summary { display: none; }

.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 14px; }
.faq details { border: var(--line) solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 24px; position: relative; font-weight: 900; font-size: 1.08rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font: 400 2rem/1 var(--font-display); transition: rotate .35s var(--spring); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details[open] summary { background: var(--blush); }
.faq details p { padding: 16px 24px 22px; }

.sticky-cta {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ---- 11 · tickets / news / prose ---------------------------------------- */
.tix-list { display: grid; gap: 22px; }
.tix { display: grid; gap: 14px 26px; align-items: center; grid-template-columns: auto 1fr auto; }
.tix__date { font: 400 clamp(2.6rem, 6vw, 3.8rem)/.9 var(--font-display); }
.tix__date small { display: block; font: 500 .72rem/1.4 var(--font-mono); letter-spacing: var(--ls-2); }
.tix__name { font: 900 1.4rem/1.1 var(--font-sans); text-transform: uppercase; }
.tix__meta { font: 500 .78rem/1.5 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--ink-2); }
.tix__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.tix__price { font: 500 .8rem/1 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.link-cal, .link-more { font: 500 .76rem/1 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--undr-accent); text-decoration: underline; text-underline-offset: .2em; }
.link-cal:hover, .link-more:hover { color: var(--ink); }
@media (max-width: 680px) { .tix { grid-template-columns: auto 1fr; } .tix__actions { grid-column: 1 / -1; justify-content: flex-start; } }

.news-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.news-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--ink); text-decoration: none; transition: translate .3s var(--spring), rotate .3s var(--spring); }
.news-card:nth-child(odd) { rotate: -1deg; }
.news-card:nth-child(even) { rotate: 1deg; }
.news-card:hover { translate: 0 -6px; rotate: 0deg; color: var(--ink); }
.news-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line) solid var(--ink); }
.news-card__body { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.news-card__date { font: 500 .72rem/1 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--undr-accent); }
.news-card__title { font: 900 1.35rem/1.15 var(--font-sans); }
.news-card__excerpt { font-size: .98rem; line-height: 1.5; }

.legal { max-width: 760px; margin-inline: auto; }
.legal h2 { font: 900 1.25rem/1.2 var(--font-sans); margin: 1.6em 0 .4em; }
.legal p { margin-bottom: .8em; }

/* ---- 12 · modals + event detail ----------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(10px, 3vw, 32px); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(255, 170, 225, .55); opacity: 0; transition: opacity .2s; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.modal__dialog {
  position: relative; width: min(100%, 560px); display: flex; flex-direction: column;
  /* an explicit cap: a % max-height has nothing to resolve against inside the auto-sized grid cell */
  max-height: calc(100vh - 2 * clamp(10px, 3vw, 32px)); max-height: calc(100dvh - 2 * clamp(10px, 3vw, 32px));
  border: var(--line) solid var(--ink); border-radius: var(--r-card); background: var(--paper); box-shadow: 10px 10px 0 var(--ink);
  opacity: 0; scale: .7; rotate: -3deg; transition: scale .45s var(--spring), rotate .45s var(--spring), opacity .15s;
}
.modal__dialog--wide { width: min(100%, 880px); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; scale: 1; rotate: 0deg; }
.modal__close {
  position: absolute; z-index: 3; top: -14px; right: -10px; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 50%; background: var(--candy); color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: rotate .35s var(--spring), scale .35s var(--spring);
}
.modal__close:hover { rotate: 90deg; scale: 1.1; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: clamp(18px, 3vw, 32px); border-radius: inherit; }
body.modal-open { overflow: hidden; }
.tickets-header { padding: 18px 60px 14px 24px; border-bottom: var(--line) solid var(--ink); background: var(--candy); border-radius: calc(var(--r-card) - 3px) calc(var(--r-card) - 3px) 0 0; }
.tickets-header__line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 500 .78rem/1.3 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.tickets-header__kicker { padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.tickets-header__line b { font: 900 1.1rem/1 var(--font-sans); letter-spacing: .04em; }
#tickets-widget-slot { min-height: 220px; }
.tickets-alts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px; font: 500 .76rem/1.4 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.tickets-alts[hidden] { display: none; }
.tickets-alts__list { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }

.event-detail { display: grid; gap: 24px; }
.event-detail__hero-flyer { position: relative; overflow: hidden; border: var(--line) solid var(--ink); border-radius: 20px; background: var(--candy); }
.event-detail__hero-flyer img, .hero-flyer__video { display: block; width: 100%; height: auto; }
.hero-flyer__video { position: absolute; inset: 0; height: 100%; background: var(--blush); }
.hero-flyer__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 84px; height: 84px; display: grid; place-items: center; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 50%; background: var(--butter); color: var(--ink); box-shadow: var(--shadow-sm);
}
.is-playing .hero-flyer__play { display: none; }
.event-detail__date { font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--font-display); }
.event-detail__date span { display: block; font: 500 .74rem/1.6 var(--font-mono); letter-spacing: var(--ls-2); color: var(--undr-accent); }
.event-detail__name { font: 900 clamp(1.6rem, 4vw, 2.4rem)/1.05 var(--font-sans); text-transform: uppercase; letter-spacing: .02em; }
.event-detail__name span { color: var(--undr-accent); }
.event-detail__tagline { margin-top: 8px; font-weight: 700; font-size: 1.1rem; }
.event-detail__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.event-detail__stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.event-detail__stats > div { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--undr-surface-2); }
.event-detail__stats dt { font: 500 .66rem/1.2 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--ink-2); }
.event-detail__stats dd { margin: 4px 0 0; font-weight: 700; line-height: 1.3; }
.ev-section__title { font: 400 1.7rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; color: var(--undr-accent); }
.ev-section__prose p + p { margin-top: .9em; }
.ev-list { display: grid; gap: 8px; }
.ev-list li { padding-left: 1.5em; position: relative; }
.ev-list li::before { content: '●'; position: absolute; left: 0; color: var(--hot); }
.lineup { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lineup__floor { padding: 16px 18px; border: 2px solid var(--ink); border-radius: 18px; }
.lineup__floor:nth-child(odd) { background: var(--cyan); }
.lineup__floor:nth-child(even) { background: var(--blush); }
.lineup__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; }
.lineup__djs { display: grid; gap: 6px; }
.lineup__dj { font-weight: 700; font-size: 1.12rem; }   /* as written — no transform */
.lineup__b2b { font: 500 .7rem/1 var(--font-mono); margin-inline: 6px; }
.lineup__link { margin-left: 6px; font: 500 .68rem/1 var(--font-mono); letter-spacing: .1em; color: var(--ink); }
.ev-tiers { display: grid; gap: 8px; }
.ev-tiers li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: var(--r-pill); font-weight: 700; }
.ev-tiers__price { font: 500 .9rem/1.4 var(--font-mono); white-space: nowrap; }
.ev-tiers__sold { margin-left: 8px; font: 500 .68rem/1 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--undr-accent); }

/* ---- 13 · chaos layer (falling objects) ---------------------------------- */
#bounce-canvas {
  position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block;
  pointer-events: none; transition: opacity .4s;
}
html.is-grabbing, html.is-grabbing * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
html.can-grab body { cursor: grab; }
/* Static stand-in: only under reduced motion / paused chaos (see section 15). */
.scatter { display: none; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.scatter__s { position: absolute; width: clamp(70px, 11vw, 150px); height: auto; }
.scatter__s--1 { left: -2%; bottom: -3%; width: clamp(130px, 20vw, 280px); rotate: 12deg; }
.scatter__s--2 { left: 16%; bottom: -1%; rotate: -14deg; }
.scatter__s--3 { left: 30%; bottom: 0; rotate: 20deg; width: clamp(50px, 7vw, 90px); }
.scatter__s--4 { right: 26%; bottom: -2%; rotate: -24deg; }
.scatter__s--5 { right: 12%; bottom: 1%; rotate: 16deg; }
.scatter__s--6 { right: -1%; bottom: 8%; rotate: -8deg; }
.scatter__s--7 { left: 46%; bottom: -2%; rotate: 9deg; width: clamp(56px, 8vw, 100px); }
.scatter__s--8 { right: 40%; bottom: 3%; rotate: -30deg; width: clamp(44px, 6vw, 80px); }

/* ---- 14 · reveals -------------------------------------------------------- */
@keyframes pop-in {
  from { opacity: 0; scale: .3; translate: 0 40px; }
  12%  { opacity: 1; }
}
@keyframes failsafe-show { to { opacity: 1; } }
/* Hidden until scrolled into view — but never for good: if the observer never
   fires (script error), the failsafe fades everything in after 3s. */
.js [data-reveal]:not(.is-in) { opacity: 0; animation: failsafe-show .01s 3s forwards; }
.js [data-reveal].is-in:not(.bword) { animation: pop-in .75s calc(var(--stagger, 0) * 70ms) backwards var(--spring); }
.js .bword:not(.is-in) { opacity: 1; animation: none; }
.js .bword:not(.is-in) .bword__l, .js .bword:not(.is-in) .bword__t { opacity: 0; animation: failsafe-show .01s 3s forwards; }
.js .bword.is-in .bword__l, .js .bword.is-in .bword__t { animation: pop-in .7s calc(var(--i, 0) * 55ms) backwards var(--spring); }

/* ---- 15 · reduced motion / paused chaos --------------------------------- */
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition-duration: .01ms !important; }
.motion-off [data-reveal], .motion-off .bword__l, .motion-off .bword__t { opacity: 1 !important; }
.motion-off #bounce-canvas { opacity: 0; }
.motion-off .scatter { display: block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal], .bword__l, .bword__t { opacity: 1 !important; }
  #bounce-canvas { display: none; }
  .scatter { display: block; }
  [data-tilt-toggle] { display: none; }
}
@media print {
  #bounce-canvas, .scatter, .site-head, .marquee, .sticky-cta { display: none !important; }
  body::before { display: none; }
}

/* Weak devices skip the physics (bounce-physics.js) and get the static scatter. */
.motion-off-lite #bounce-canvas { display: none; }
.motion-off-lite .scatter { display: block; }

/* Long German compounds must never push a card wider than its column. */
.idea__name, .sticker b, .rule b, .floor__name, .tix__name, .news-card__title, .verdict__list b {
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
}

/* ---- vibe cards: staggered, tinted, each with a sticker peeking over the edge ---- */
.vibe { display: grid; gap: 34px 26px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); padding-top: 34px; }
.vibe__card { position: relative; padding-top: clamp(34px, 4vw, 46px); }
.vibe__card--1 { rotate: -2deg; background: var(--blush); }
.vibe__card--2 { rotate: 1.2deg; margin-top: 46px; }
.vibe__card--3 { rotate: -1deg; margin-top: 12px; background: var(--lilac); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vibe__card--1 { background: rgba(255, 201, 236, .82); }
  .vibe__card--3 { background: rgba(220, 200, 255, .82); }
}
.vibe__head {
  margin-bottom: 12px; text-wrap: balance;
  font: 400 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--undr-accent);
}
.vibe__art { position: absolute; top: -52px; right: -14px; width: 96px; height: 96px; object-fit: contain; rotate: 14deg; cursor: pointer;
  filter: drop-shadow(3px 4px 0 rgba(61, 13, 55, .25)); }
.vibe__card--2 .vibe__art { right: auto; left: -18px; rotate: -16deg; }
.vibe__card--3 .vibe__art { rotate: 8deg; width: 110px; height: 110px; top: -64px; }
@media (max-width: 640px) { .vibe__card--2, .vibe__card--3 { margin-top: 20px; } .vibe__art { right: 4px; } .vibe__card--2 .vibe__art { left: 4px; } }

/* dresscode: the "black is fine, colour goes first" note */
.priority { max-width: 760px; margin: 30px auto 0; rotate: 1deg; background: var(--butter); }
.priority b { display: block; margin-bottom: 6px; font: 400 1.7rem/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--undr-accent); }

/* #main is only a skip-link / hash target — no focus frame around the whole page. */
main:focus, main:focus-visible { outline: none; box-shadow: none; }
.names__item a { display: inline-flex; align-items: center; gap: 9px; }
.names__item a svg { flex: none; opacity: .75; }
.names__item a:hover svg { opacity: 1; }

/* ---- floating ticket button: bottom corner on every page ------------------ */
.sticky-cta .btn__skin { padding: 15px 24px; box-shadow: 5px 5px 0 var(--ink); }
body.modal-open .sticky-cta { display: none; }
.js .sticky-cta { animation: pop-in .8s 1.6s backwards var(--spring); }
@media (max-width: 560px) { .sticky-cta { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } .sticky-cta .btn__skin { padding: 13px 18px; font-size: .84rem; } }

/* ---- rules page ---------------------------------------------------------- */
.rules--page { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rule__title { font: 900 1.4rem/1.15 var(--font-sans); text-wrap: balance; }
.rules--page .rule:nth-child(3n + 1) { background: rgba(255, 201, 236, .85); }
.rules--page .rule:nth-child(3n + 2) { background: rgba(220, 200, 255, .85); }
.sticker h3 { margin: 0; font: 900 1.3rem/1.15 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; hyphens: auto; }
.tips--conduct { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 30px; }
.page-head__lede--tight { margin: -14px auto 30px; }
.prose-card a { font-weight: 900; }

/* ======================= launch polish: spacing + a11y ===================== */
html { overflow-x: clip; }                        /* the tilted marquee must never widen the page */
body { overflow-x: clip; }
.lang-switch__link { padding: 8px 10px; min-width: 24px; text-align: center; }   /* WCAG 2.5.8 target size */
.link-cal, .link-more, .lineup__link { display: inline-block; min-height: 24px; padding-block: 6px; }
.lineup__link { padding-inline: 6px; }

/* consistent vertical rhythm */
.section > .bword { margin-bottom: .1em; }
.section > .big { margin-top: 6px; }
.page-head { padding-bottom: 8px; }
.page-head + .section { padding-top: clamp(28px, 5vw, 56px); }
.section + .section { padding-top: calc(var(--undr-section-y) / 2.6); }
.card > :last-child, .sticker > :last-child { margin-bottom: 0; }
.cta-row + .hero__hint { margin-top: 26px; }
.center { margin-top: 30px; }
.faq summary { min-height: 48px; }
.faq details p { max-width: 68ch; }

/* phones: tighter cards, and the idea walls become swipeable rows instead of a very long page */
@media (max-width: 640px) {
  .card { padding: 18px; border-radius: 22px; }
  .big { margin-bottom: 24px; }
  .ideas-scroll {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    margin-inline: calc(-1 * var(--undr-gutter)); padding: 8px var(--undr-gutter) 22px;
  }
  .ideas { display: flex; gap: 14px; width: max-content; }
  .ideas > .idea { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; rotate: 0deg !important; }
  .gallery { gap: 8px; grid-template-columns: repeat(3, 1fr); }
  .gallery__cell { border-radius: 12px; border-width: 2px; }
  .verdict, .floors, .rules, .tips { gap: 18px; }
  .hero { padding-bottom: 40px; }
}
/* keyboard users can scroll the swipe rows */
.ideas-scroll:focus-visible { box-shadow: var(--undr-focus); border-radius: 12px; }

/* visible focus everywhere, including on pink fills */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.btn:focus-visible { outline-offset: 5px; }
@media (forced-colors: active) { .btn__skin, .card, .sticker { border: 2px solid CanvasText; } }

/* ---- header: desktop row, and a drop-down menu panel below 900px ------------- */
.nav-toggle {
  display: none; flex: none; width: 46px; height: 46px; padding: 0; cursor: pointer; place-items: center;
  border: var(--line) solid var(--ink); border-radius: 50%; background: var(--blush); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: background-color var(--undr-t-fast);
}
.nav-toggle:hover { background: var(--candy); }
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars i { display: block; height: 3px; border-radius: 3px; background: currentColor; transition: translate .3s var(--spring), rotate .3s var(--spring), opacity .15s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
@media (max-width: 900px) {
  .site-head { padding-inline: 10px; }
  .site-head__inner { position: relative; gap: 8px; padding: 5px 6px 5px 8px; }
  .brand__mark { width: 42px; height: 42px; }
  .nav-cta { margin-left: auto; }
  .js .nav-toggle { display: grid; }
  .nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 16px;
    border: var(--line) solid var(--ink); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow);
  }
  .js .nav { display: none; transform-origin: 90% 0; }
  .js .nav.is-open { display: flex; animation: pop-in .45s var(--spring); }
  .nav__list { flex-direction: column; gap: 8px; }
  .nav__link {
    padding: 15px 18px; font-size: 1.05rem; text-align: center;
    border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--blush); box-shadow: 3px 3px 0 var(--ink);
  }
  .nav__list li:nth-child(2) .nav__link { background: var(--lilac); }
  .nav__list li:nth-child(3) .nav__link { background: var(--cyan); }
  .nav__list li:nth-child(4) .nav__link { background: var(--butter); }
  .nav__link--active { outline: 3px solid var(--ink); outline-offset: 2px; }
  .lang-switch { align-self: center; }
  .lang-switch__link { padding: 10px 18px; font-size: .8rem; }
  /* no JS: the panel is just part of the page, under the header row */
  html:not(.js) .site-head__inner { flex-wrap: wrap; border-radius: var(--r-card); }
  html:not(.js) .nav { position: static; order: 5; flex-basis: 100%; border: 0; box-shadow: none; padding: 8px 0; background: none; }
}
@media (max-width: 380px) { .brand__sub { display: none; } .btn--sm .btn__skin { padding: 10px 13px; } }

/* ---- newcomers page -------------------------------------------------------- */
.steps { display: grid; gap: 22px; max-width: 820px; margin-inline: auto; counter-reset: step; }
.step { position: relative; padding-left: clamp(70px, 9vw, 96px); counter-increment: step; }
.step::before {
  content: counter(step); position: absolute; left: clamp(18px, 2.4vw, 28px); top: 50%; translate: 0 -50%;
  font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--font-display); color: var(--hot);
}
.step__name { font: 900 1.3rem/1.15 var(--font-sans); margin-bottom: 6px; }
.step:nth-child(odd) { rotate: -.6deg; }
.step:nth-child(even) { rotate: .6deg; background: rgba(255, 201, 236, .85); }
@media (max-width: 640px) {
  .ideas.ideas--grid { display: grid; width: auto; gap: 16px; }
  .ideas.ideas--grid > .idea { flex: none; }
}

/* ---- the big bouncy countdown (hero + tickets page) ------------------------ */
.cd { display: none; justify-content: center; gap: clamp(8px, 1.6vw, 16px); margin-top: clamp(18px, 3vh, 28px); }
.js .cd { display: flex; }
.cd__unit {
  display: grid; place-items: center; align-content: center; gap: 2px;
  width: clamp(68px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%;
  border: var(--line) solid var(--ink); box-shadow: var(--shadow-sm); background: var(--blush);
  transform-origin: 50% 100%; cursor: pointer;
}
.cd__unit--h { background: var(--lilac); rotate: 4deg; translate: 0 6px; }
.cd__unit--d { rotate: -5deg; }
.cd__unit--m { background: var(--cyan); rotate: -3deg; }
.cd__unit--s { background: var(--butter); rotate: 5deg; translate: 0 8px; }
.cd__num { font: 400 clamp(1.7rem, 3.6vw, 2.7rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cd__label { font: 500 .62rem/1 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; }
.js .hero .cd__unit { animation: pop-in .8s calc(.7s + var(--i) * 90ms) backwards var(--spring); }
.cd.is-live { font: 400 clamp(2rem, 6vw, 3.4rem)/1 var(--font-display); color: var(--undr-accent); letter-spacing: .04em; }
.page-head .cd { margin-top: 26px; }

/* hero: date card + countdown share one row on wide screens */
.hero__when { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(18px, 3vw, 40px); margin-top: clamp(18px, 3.4vh, 34px); }
.hero__when .hero__event, .hero__when .cd { margin-top: 0; }
/* text blocks hug their text, so their collision box does too */
.shout, .shout--sm { width: fit-content; max-width: min(100%, 40ch); margin-inline: auto; }
.card .shout--sm { margin-inline: 0; max-width: none; }

/* ---- "BOUNCE by UNDR" in the footer ---- */
.site-foot__name { font: 900 1.25rem/1.1 var(--font-sans); letter-spacing: .02em; }
.site-foot__legal { grid-column: 1 / -1; font: 500 .72rem/1.4 var(--font-mono); letter-spacing: var(--ls-1); text-transform: uppercase; opacity: .8; }
.site-foot__undr { margin-top: -18px; }

/* the official name keeps its lowercase "by" */
.foot-col__title, .site-foot__legal { text-transform: none; }
.hero__addr { opacity: .85; }

/* ---- vertical rhythm pass (measured on a 390px phone): nothing closer than ~16px ---- */
.bword { margin-bottom: .3em; }
.section > .bword { margin-bottom: .3em; }
.bword + .big, .section > .big { margin-top: 0; }
.big + .page-head__lede, .page-head__lede--tight { margin: 0 auto 34px; }
.page-head .big + .page-head__lede { margin-top: 20px; margin-bottom: 0; }
.extras { gap: 24px 20px; margin-top: 44px; }
.rules, .tips, .floors, .verdict, .steps { gap: 28px 24px; }
.faq { gap: 16px; }
@media (max-width: 640px) {
  .bword, .section > .bword { margin-bottom: .36em; }
  .big { margin-bottom: 26px; }
  .verdict, .floors, .rules, .tips, .steps, .extras { gap: 26px; }
  .ideas.ideas--grid { gap: 24px; }
  .section { padding-block: 44px; }
  .section + .section { padding-top: 36px; }
  .page-head { padding-top: 40px; }
  .cta-row { gap: 18px; margin-top: 28px; }
  .hero__when { gap: 20px; }
  .names__list { gap: 16px 12px; }
  .ideas-scroll { padding-bottom: 28px; }
}
.bword { row-gap: .34em; }   /* wrapped heading lines (phones) must not touch */

/* ===================== accessibility + robustness pass ===================== */
:root { --accent-text: #a3107a; }   /* accent for SMALL text: >= 4.7:1 on every card tint (the brighter accent stays for big display type) */
a, .link-cal, .link-more, .news-card__date, .hero__meta span:nth-child(2), .event-detail__date span, .ev-tiers__sold { color: var(--accent-text); }
.btn, .btn:hover, .nav__link, .brand, .foot-col a, .names__item a, .lang-switch__link, .news-card, .news-card:hover { color: var(--ink); }
.rule::before, .step::before { color: var(--accent-text); }            /* hot pink failed even 3:1 as text */
.bword__t { color: var(--ink); }
.vibe__card--3 .vibe__head, .vibe__card--1 .vibe__head { color: var(--accent-text); }
.cd.is-live { color: var(--ink); background: var(--glass); padding: .15em .6em; border-radius: var(--r-pill); }

/* FAQ rows clip their overflow, so the focus ring has to sit INSIDE the summary */
.faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -7px; box-shadow: inset 0 0 0 3px var(--paper); border-radius: 22px; }
.ideas-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* the current page in the mobile menu must not look like a focus ring */
@media (max-width: 900px) { .nav__link--active { outline: 0; box-shadow: inset 0 0 0 3px var(--ink), 3px 3px 0 var(--ink); } }
.motion-off [data-chaos-toggle] { background: var(--candy); border-color: var(--ink); }

/* long labels wrap instead of being clipped (German, 320px phones, 200% zoom) */
.btn { max-width: 100%; }
.btn__skin { white-space: normal; text-align: center; text-wrap: balance; }
.btn--sm .btn__skin, .sticky-cta .btn__skin { white-space: nowrap; }
@media (max-width: 360px) { .bword { font-size: 11vw; } .bword--sm { font-size: 8.4vw; } }

/* gallery "show more": the summary stays (focus is never lost) and flips its label */
.gallery-more[open] > summary { display: block; margin-top: 0; }
.gallery-more > summary .when-open, .gallery-more[open] > summary .when-closed { display: none; }
.gallery-more[open] > summary .when-open { display: inline; }
.gallery-more[open] { display: flex; flex-direction: column-reverse; }
.gallery-more[open] > summary { margin: 22px auto 0; }

/* phones: no live blur over a 60fps canvas (the main GPU cost) */
@media (hover: none), (max-width: 900px) {
  .card, .vibe__card--1, .vibe__card--3, .site-head__inner, .site-foot {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .card { background-color: rgba(253, 238, 250, .93); }
  .vibe__card--1 { background-color: rgba(255, 201, 236, .95); }
  .vibe__card--3 { background-color: rgba(220, 200, 255, .95); }
  .site-head__inner { background: rgba(255, 255, 255, .95); }
}

.hero { min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
.motion-off { scroll-behavior: auto; }
@media print { [data-reveal], .bword__l, .bword__t { opacity: 1 !important; animation: none !important; } }

/* ---- without JavaScript / with the chaos off ---------------------------------- */
html:not(.js) .site-head { position: static; }                 /* the open nav must not pin half the screen */
html:not(.js) [data-open-info], html:not(.js) [data-chaos-toggle],
html:not(.js) .idea-machine, html:not(.js) .hero__hint { display: none; }   /* no dead controls */
.motion-off .hero__hint, .motion-off-lite .hero__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__hint { display: none; } }
/* modal fact labels were 10.5px on phones */
.event-detail__stats dt { font-size: .74rem; }
.modal .tags li { font-size: .78rem; }

/* ---- tickets: presale vs door, then one big button -------------------------- */
.ev-tiers__group { margin: 18px 0 8px; font: 500 .74rem/1.3 var(--font-mono); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--ink-2); }
.ev-tiers--presale li { background: var(--blush); }
.ev-tiers--door li { border-style: dashed; background: transparent; font-weight: 500; }
.ev-tiers--door .ev-tiers__price { opacity: .85; }
.ev-section__cta { margin-top: 24px; text-align: center; }
.ev-section__cta .btn { width: min(100%, 420px); }
.ev-section__cta .btn__skin { padding-block: 20px; font-size: 1.2rem; }

/* tickets page rows: never squeeze the name into a 70px column */
.tix { grid-template-columns: auto minmax(220px, 1fr) auto; }
.tix__name { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 900px) {
  .tix { grid-template-columns: auto minmax(0, 1fr); }
  .tix__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* phones: fewer things fighting for the screen */
@media (max-width: 640px) {
  .event-detail__stat--age { display: none; }      /* 18+ is already in the facts above */
  .sticky-cta { display: none; }                   /* the header keeps its TICKETS button */
  .site-foot__inner { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ---- inspiration gallery: clickable cells + bouncy lightbox ---------------- */
button.gallery__cell { padding: 0; cursor: zoom-in; font: inherit; }
.gallery__cell picture { display: block; width: 100%; height: 100%; }
.gallery__cell:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lightbox {
  position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: clamp(12px, 4vw, 40px);
  background: rgba(255, 170, 225, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(100%, 86vh * .8); max-height: 86vh; width: auto; height: auto; aspect-ratio: 4 / 5; object-fit: cover; cursor: pointer;
  border: 5px solid var(--ink); border-radius: 26px; box-shadow: 10px 10px 0 var(--ink); background: var(--candy);
}
.lightbox__img.is-in { animation: lb-pop .6s var(--spring); }
@keyframes lb-pop { from { scale: .35; rotate: -8deg; opacity: 0; } 40% { opacity: 1; } }
.lightbox__btn {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font: 900 1.3rem/1 var(--font-sans); transition: scale .3s var(--spring);
}
.lightbox__btn:hover { scale: 1.12; background: var(--butter); }
.lightbox__close { top: max(14px, env(safe-area-inset-top)); right: 14px; background: var(--candy); }
.lightbox__prev { left: 14px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; margin: 0; padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--paper); border: 2px solid var(--ink); font: 500 .78rem/1 var(--font-mono); letter-spacing: var(--ls-1); }

/* ---- flicker fix: nothing blurs the live canvas except small, static cards ---- */
#bounce-canvas { transform: translateZ(0); backface-visibility: hidden; }   /* own compositor layer */
.site-head__inner { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .95); }
.site-foot { -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate; }
.modal__backdrop, .lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* the toy is paused behind them anyway */
.modal__backdrop { background: rgba(255, 170, 225, .82); }
.lightbox { background: rgba(255, 170, 225, .9); }
/* cards too: same class of bug (a blur sampled from a canvas that never stops moving) */
.card, .vibe__card--1, .vibe__card--3 { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card { background-color: rgba(253, 238, 250, .9); }
.vibe__card--1, .rules--page .rule:nth-child(3n + 1), .step:nth-child(even) { background-color: rgba(255, 201, 236, .93); }
.vibe__card--3, .rules--page .rule:nth-child(3n + 2) { background-color: rgba(220, 200, 255, .93); }
.floor--2 { background-color: rgba(203, 170, 255, .93); }
.verdict__col--no { background-color: rgba(255, 214, 194, .94); }
.priority { background-color: var(--butter); }

/* ---- playing beats selecting: on pages with the toy, a click or drag never selects
   text by accident. Selection stays on where copying matters (event details in the
   modal, the footer, legal text) and comes back whenever the toy is off. ---- */
.has-chaos { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.has-chaos .modal, .has-chaos .site-foot, .has-chaos .legal, .has-chaos .hero__meta,
.has-chaos input, .has-chaos textarea { -webkit-user-select: text; user-select: text; }
.motion-off .has-chaos, .motion-off-lite .has-chaos, html:not(.js) .has-chaos { -webkit-user-select: auto; user-select: auto; }
@media (prefers-reduced-motion: reduce) { .has-chaos { -webkit-user-select: auto; user-select: auto; } }