/* ---------- tokens ---------- */
:root {
  --paper: #F3F8F6;
  --ink: #0E041E;
  --volt: #B10000;
  --grey: #BCBCBC;
  --smoke: #717377;

  --display: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  --label: 'Space Grotesk', 'Courier New', monospace;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --snap: cubic-bezier(.85, 0, .15, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  /* Pinkpop-easings: ease-out-quad en ease-in-out-quad, rustig, geen overshoot */
  --quad: cubic-bezier(.25, .46, .45, .94);
  --quad-io: cubic-bezier(.455, .03, .515, .955);
  --rule: 2px solid var(--ink);

  /* editorial ruimte */
  --shell: 1440px;
  --gutter: clamp(24px, 7vw, 130px);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--volt); color: var(--paper); }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- grain (aan-staat) ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity .5s var(--out);
}
body.is-on .grain { opacity: .07; }
@media (prefers-reduced-motion: no-preference) {
  body.is-on .grain { animation: grain-shift 1.2s steps(4) infinite; }
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- labels & type utilities ---------- */
.label {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { color: var(--volt); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding: 10px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}
.bar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bar-logo .mascot-mini { width: 26px; height: 30px; color: var(--volt); }
.bar-logo .wordmark-mini {
  width: 132px; height: 20px; background: var(--ink);
  -webkit-mask: url('assets/logos/wordmark.svg') center / contain no-repeat;
  mask: url('assets/logos/wordmark.svg') center / contain no-repeat;
}
.bar-nav { display: flex; flex-wrap: wrap; gap: clamp(2px, 1vw, 12px); }
.bar-nav a { text-decoration: none; padding: 12px 8px; display: inline-block; }
.bar-nav a:hover, .bar-nav a.is-active { color: var(--volt); }
.bar-status { display: none; }
@media (min-width: 900px) {
  .bar-status { display: block; color: var(--smoke); }
}

/* ---------- cable nav (desktop) ---------- */
.cable-nav {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 95;
  width: 72px; display: none; pointer-events: none;
}
@media (min-width: 1100px) { .cable-nav { display: block; } }
.cable-nav .cable-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.cable-nav .cable-track { color: var(--grey); }
.cable-nav .cable-live {
  color: var(--volt);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--volt) 50%, transparent));
}
/* stroomstoot die door de kabel schiet bij een nieuwe sectie */
.cable-nav.surge .cable-live {
  filter: drop-shadow(0 0 14px var(--volt));
  transition: filter .12s var(--snap);
}
.cable-nav .node {
  position: absolute; left: 24px; width: 24px; height: 24px;
  pointer-events: auto;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center;
  text-decoration: none;
  transition: background .15s var(--out);
}
.cable-nav .node::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
  transition: background .15s var(--out);
}
.cable-nav .node {
  border-color: var(--grey);
  transition: background .25s var(--quad), border-color .25s var(--quad), transform .25s var(--quad);
}
.cable-nav .node::before { background: var(--grey); transition: background .25s var(--quad); }
/* aangesloten: de stroom is hier voorbij gekomen */
.cable-nav .node.lit { border-color: var(--volt); }
.cable-nav .node.lit::before { background: var(--volt); }
.cable-nav .node:hover, .cable-nav .node.is-active { background: var(--volt); border-color: var(--volt); transform: scale(1.15); }
.cable-nav .node:hover::before, .cable-nav .node.is-active::before { background: var(--paper); }
/* het inplug-moment */
@media (prefers-reduced-motion: no-preference) {
  .cable-nav .node.just-lit { animation: node-pop .45s var(--quad); }
}
@keyframes node-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--volt) 60%, transparent); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 18px transparent; }
}
.cable-nav .node .tip {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--label); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 3px 8px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.cable-nav .node:hover .tip, .cable-nav .node:focus-visible .tip { opacity: 1; }
.cable-nav .plug-cursor {
  position: absolute; left: 22px; top: 64px; width: 28px; height: 28px;
  color: var(--volt);
  will-change: transform;
  transition: transform .1s linear;
}

/* ---------- hero: full-page wordmark-wand (Pinkpop-schaal) ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(64px + var(--s6)) var(--gutter) var(--s8);
  position: relative;
  overflow: hidden;
}
.hero > * { width: 100%; max-width: var(--shell); margin-inline: auto; }
.hero-eyebrow { margin-bottom: var(--s2); }

.hero-wall {
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.8vh, 26px);
  min-height: 0;
}
.wm-line1, .wm-line2 {
  background-image: linear-gradient(90deg, var(--volt) 0 49.9%, var(--grey) 50% 100%);
  background-size: 205% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
body.is-on .wm-line1 { background-position: 0 0; transition: background-position .9s var(--quad) .1s; }
body.is-on .wm-line2 { background-position: 0 0; transition: background-position .75s var(--quad) .35s; }
.wm-line1 {
  width: 100%;
  aspect-ratio: 1321 / 216;
  max-height: 34vh;
  -webkit-mask: url('assets/logos/wm-plugged.svg') left center / contain no-repeat;
  mask: url('assets/logos/wm-plugged.svg') left center / contain no-repeat;
}
.hero-row2 {
  display: grid;
  grid-template-columns: auto minmax(90px, 15vw) 1fr;
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 32px);
}
.wm-line2 {
  width: clamp(120px, 17.5vw, 280px);
  aspect-ratio: 250 / 216;
  -webkit-mask: url('assets/logos/wm-in.svg') left center / contain no-repeat;
  mask: url('assets/logos/wm-in.svg') left center / contain no-repeat;
}
.mascot-tile {
  background: var(--grey);
  overflow: hidden;
  position: relative;
  display: grid; place-items: end center;
  transition: background-color .3s var(--snap) .28s;
}
body.is-on .mascot-tile { background: var(--volt); }
.tile-mascot {
  width: 74%;
  margin-bottom: 5%;
  transform: translateY(130%) rotate(10deg);
}
body.is-on .tile-mascot {
  transform: translateY(0) rotate(0deg);
  transition: transform .8s var(--quad) .45s;
}
@media (prefers-reduced-motion: no-preference) {
  body.is-on .tile-mascot { animation: mascot-bop 2.6s var(--out) 1.4s infinite; }
}
@keyframes mascot-bop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-7px) rotate(-2deg); }
  60% { transform: translateY(0) rotate(1.5deg); }
}

/* onder de wand: statement + acties */
.hero-under {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
}
.hero-sub {
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
}
.hero-sub strong { font-weight: 700; }
.hero-actions { display: grid; gap: var(--s2); justify-items: start; }
.hero-keywords { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-family: var(--label); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  border: var(--rule); padding: 6px 12px;
  background: var(--paper);
}
.chip.volt { border-color: var(--volt); color: var(--volt); }
.hero-ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3);
}
.btn {
  font-family: var(--label); font-weight: 600; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; min-height: 48px;
  border: var(--rule);
  background: var(--ink); color: var(--paper);
  transition: transform .15s var(--out), background .15s var(--out);
}
.btn:hover { background: var(--volt); border-color: var(--volt); transform: translate(-2px, -2px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--volt); color: var(--paper); }
.hero-side-links { display: flex; gap: var(--s3); }
.hero-side-links a { font-size: 14px; }
.hero-side-links a:hover { color: var(--volt); }

/* ---------- ticker ---------- */
.ticker {
  border-top: var(--rule); border-bottom: var(--rule);
  overflow: hidden; white-space: nowrap;
  background: var(--paper);
  position: relative; z-index: 5;
}
.ticker-track {
  display: inline-flex; gap: 0;
  padding: 10px 0;
  will-change: transform;
}
body.is-on .ticker-track { animation: ticker-run 26s linear infinite; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
.ticker span {
  font-family: var(--label); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 18px;
}
.ticker .sep { color: var(--volt); }

/* ---------- sections shared ---------- */
.section {
  padding: clamp(96px, 14vh, 180px) var(--gutter);
  position: relative;
  scroll-margin-top: 64px;
}
.section > *:not(.giant-num):not(.star-overflow):not(.mascot-xl):not(.star-deco):not(.shot-bed) {
  max-width: var(--shell);
  margin-inline: auto;
}
.footer { scroll-margin-top: 64px; }
@media (min-width: 1100px) {
  .section, .hero { padding-left: max(var(--gutter), 120px); }
}
.section-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s8);
  flex-wrap: wrap;
}
.section-head .num { color: var(--volt); }
.section-title {
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 6vw, 84px);
  line-height: .95;
  letter-spacing: -.01em;
}

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); }
body.reveals-ready .reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .9s var(--quad), transform .9s var(--quad);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- next up ---------- */
.next-grid {
  display: grid; gap: var(--s8);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) { .next-grid { grid-template-columns: 1.1fr .9fr; } }

.tv {
  position: relative;
  width: min(460px, 100%);
  margin-inline: auto;
  transform: rotate(-2deg);
}
.tv svg { width: 100%; height: auto; }
.tv .screen-noise {
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.is-on .tv .noise-rect { animation: tv-noise .45s steps(3) infinite; }
}
@keyframes tv-noise {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-6px, 3px); }
  66% { transform: translate(4px, -5px); }
  100% { transform: translate(0, 0); }
}
.tv-caption {
  margin-top: var(--s2); text-align: center; color: var(--smoke);
}

.next-copy .status-line {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--volt); margin-bottom: var(--s3);
}
.next-copy .status-line::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--volt);
}
@media (prefers-reduced-motion: no-preference) {
  .next-copy .status-line::before { animation: blink 1.2s steps(2) infinite; }
}
.next-copy h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.05;
  margin-bottom: var(--s3);
}
.next-copy p { max-width: 52ch; margin-bottom: var(--s3); }
.newsletter-note { color: var(--smoke); font-size: 15px; margin-top: var(--s2); }

/* ---------- about (ink) ---------- */
.about {
  background: var(--ink); color: var(--paper);
}
.about .section-title { color: var(--paper); }
.about .num { color: var(--grey); }
.about-statement {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(38px, 7.5vw, 110px);
  line-height: .95; letter-spacing: -.01em;
  max-width: 12ch;
}
.about-statement .strike {
  position: relative; white-space: nowrap;
}
.about-statement .strike::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 52%;
  height: .09em; background: var(--volt); transform: rotate(-2deg);
}
.about-statement .volt-word { color: var(--volt); }
.about-body {
  display: grid; gap: var(--s6); margin-top: var(--s8);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .about-body { grid-template-columns: 1fr 1fr; } }
.about-body p { max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); }
.about-body p + p { margin-top: var(--s3); }
.about-chips { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.about-chips .chip {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  font-size: 14px; padding: 10px 16px;
  transform: rotate(-1deg);
}
.about-chips .chip:nth-child(even) { transform: rotate(1.2deg); }
.about-chips .chip b { color: var(--volt); font-weight: 600; }
.about .star-deco {
  position: absolute; right: clamp(12px, 6vw, 80px); top: clamp(140px, 22vh, 220px);
  width: clamp(60px, 8vw, 130px); color: var(--volt);
}
@media (prefers-reduced-motion: no-preference) {
  .about .star-deco { animation: spin-slow 24s linear infinite; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- faces ---------- */
.tv-wall {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tv-cell { position: relative; }
.tv-cell:nth-child(2) { transform: rotate(1.6deg); }
.tv-cell:nth-child(3) { transform: rotate(-1.4deg); }
.tv-cell .tv { width: 100%; transform: none; }
.tv-cell figcaption {
  margin-top: var(--s1);
  display: flex; justify-content: space-between; gap: var(--s2);
}
.tv-cell figcaption .who { font-weight: 700; }
.tv-cell figcaption .role { color: var(--smoke); }
.tv-cell .mascot-in-tv {
  position: absolute; left: 50%; top: 38%;
  width: 34%; transform: translate(-50%, -50%);
  color: var(--paper);
}
.faces-note { margin-top: var(--s6); max-width: 60ch; color: var(--smoke); }
.faces-note a { color: var(--ink); }
.faces-note a:hover { color: var(--volt); }

/* ---------- plug in (routes) ---------- */
.strip-intro { max-width: 58ch; margin-bottom: var(--s8); font-size: clamp(17px, 1.5vw, 20px); }
.routes {
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .routes { grid-template-columns: 1fr 1fr 1.25fr; } }
.route {
  border: var(--rule);
  padding: var(--s4);
  background: var(--paper);
  display: flex; flex-direction: column; gap: var(--s3);
  position: relative;
  transition: transform .18s var(--out), box-shadow .18s var(--out);
}
.route:hover, .route:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.route.host { border-color: var(--volt); border-width: 3px; }
.route.host:hover, .route.host:focus-within { box-shadow: 6px 6px 0 var(--volt); }
.route h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1;
}
.route .host-tag {
  position: absolute; top: -14px; right: 14px;
  background: var(--volt); color: var(--paper);
  font-family: var(--label); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 10px;
  transform: rotate(2deg);
}
.route p { flex: 1; }
.route .btn { align-self: flex-start; }

/* ---------- cord divider ---------- */
.cord-divider { overflow: hidden; line-height: 0; }
.cord-divider svg { width: 100%; height: auto; min-height: 46px; color: var(--ink); }
.cord-divider.on-ink svg { color: var(--paper); }

/* ---------- footer ---------- */
.footer {
  background: var(--ink); color: var(--paper);
  padding: var(--s12) clamp(20px, 6vw, 96px) var(--s6);
}
@media (min-width: 1100px) { .footer { padding-left: clamp(96px, 10vw, 140px); } }
.footer-arched {
  width: min(680px, 90%);
  aspect-ratio: 1620 / 263;
  background: var(--paper);
  -webkit-mask: url('assets/logos/arched.svg') center / contain no-repeat;
  mask: url('assets/logos/arched.svg') center / contain no-repeat;
  margin-bottom: var(--s8);
}
.footer-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s8);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
.footer h4 { font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--s2); }
.footer a { color: var(--paper); }
.footer a:hover { color: var(--volt); }
.footer ul { list-style: none; display: grid; gap: 6px; }
.footer-legal {
  border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-size: 14px; color: var(--grey);
}
.footer-legal a { color: var(--grey); }
.footer-legal a:hover { color: var(--volt); }

/* ---------- power-on overlay behaviour ---------- */
body:not(.is-on) .hero { filter: saturate(.6); }
body.is-on .hero { filter: none; transition: filter .25s var(--snap); }

/* ---------- reduced motion: alles direct aan ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .tv .noise-rect, .tile-mascot, .mascot-xl, .star-overflow, .about .star-deco,
  .next-copy .status-line::before { animation: none !important; }
  .tile-mascot, .wm-line1, .wm-line2, .mascot-tile { transition: none; }
  .about-statement .ln-in { transform: none; }
  .cord-divider path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rv-tilt, .rv-pop, .tv-wall .tv-cell { opacity: 1; transform: none; }
}

/* ---------- choreografie: reveal-varianten & overflow-elementen ---------- */

/* regel-reveals (about-statement) */
.about-statement .ln { display: block; overflow: hidden; }
.about-statement .ln-in { display: inline-block; transform: translateY(115%); }
.about.in-view .ln-in {
  transform: translateY(0);
  transition: transform .9s var(--quad);
}
.about.in-view .ln:nth-child(1) .ln-in { transition-delay: .05s; }
.about.in-view .ln:nth-child(2) .ln-in { transition-delay: .13s; }
.about.in-view .ln:nth-child(3) .ln-in { transition-delay: .21s; }
.about.in-view .ln:nth-child(4) .ln-in { transition-delay: .29s; }
.about-statement .strike::after { transform: rotate(-2deg) scaleX(0); transform-origin: left center; }
.about.in-view .strike::after {
  transform: rotate(-2deg) scaleX(1);
  transition: transform .35s var(--snap) .75s;
}

/* tv's kantelen binnen */
.rv-tilt { opacity: 0; transform: rotate(2deg) translateY(24px); }
body.reveals-ready .rv-tilt.is-in {
  opacity: 1; transform: rotate(-2deg) translateY(0);
  transition: opacity .9s var(--quad), transform .9s var(--quad);
}
.tv-cell .rv-tilt.is-in, .tv-cell.is-in .tv { transform: none; }
.tv-wall .tv-cell { opacity: 0; transform: translateY(28px); }
body.reveals-ready .tv-wall .tv-cell.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity 1s var(--quad), transform 1s var(--quad);
}
body.reveals-ready .tv-wall .tv-cell.is-in:nth-child(2) { transform: rotate(1.6deg); transition-delay: .14s; }
body.reveals-ready .tv-wall .tv-cell.is-in:nth-child(3) { transform: rotate(-1.4deg); transition-delay: .28s; }

/* routes ploppen met overshoot */
.rv-pop { opacity: 0; transform: translateY(26px); }
body.reveals-ready .rv-pop.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .9s var(--quad), transform .9s var(--quad);
}
.routes .rv-pop.is-in:nth-child(2) { transition-delay: .14s; }
.routes .rv-pop.is-in:nth-child(3) { transition-delay: .28s; }

/* kabel-dividers tekenen zichzelf */
.cord-divider path { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.cord-divider.draw path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--quad);
}

/* reuzencijfers die het grid breken */
.giant-num {
  position: absolute;
  top: -.08em; right: max(0px, calc((100% - var(--shell)) / 2));
  font-family: var(--display); font-weight: 900;
  font-size: clamp(120px, 24vw, 380px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--smoke) 38%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.giant-num.on-ink { -webkit-text-stroke-color: color-mix(in srgb, var(--paper) 22%, transparent); }
.section > *:not(.giant-num):not(.mascot-xl):not(.star-overflow):not(.star-deco):not(.shot-bed) { position: relative; z-index: 1; }

/* mascotte XL over de sectiegrens (Pinkpop cut-out move) */
.mascot-xl {
  position: absolute;
  right: clamp(8px, 6vw, 90px);
  bottom: 0;
  width: clamp(110px, 14vw, 210px);
  transform: translateY(52%) rotate(-7deg);
  filter: drop-shadow(6px 8px 0 rgba(14, 4, 30, .25));
  z-index: 6;
}
@media (prefers-reduced-motion: no-preference) {
  .about.in-view .mascot-xl { animation: mascot-peek 1s var(--quad) both; }
}
@keyframes mascot-peek {
  from { transform: translateY(120%) rotate(-14deg); }
  to { transform: translateY(52%) rotate(-7deg); }
}

/* ster die over de plug-in-rand steekt */
.star-overflow {
  position: absolute;
  top: 0; right: clamp(10px, 7vw, 110px);
  width: clamp(70px, 9vw, 140px);
  transform: translateY(-45%) rotate(-12deg);
  z-index: 6;
}
@media (prefers-reduced-motion: no-preference) {
  #plug-in.in-view .star-overflow { animation: star-spin-in 1.1s var(--quad) both; }
  .about .star-deco { animation: spin-slow 24s linear infinite; }
}
@keyframes star-spin-in {
  from { transform: translateY(-45%) rotate(-160deg) scale(.5); opacity: 0; }
  to { transform: translateY(-45%) rotate(-12deg) scale(1); opacity: 1; }
}

/* subtiele parallax op decoratie (JS zet --py) */
.giant-num, .star-deco { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .giant-num { transform: translateY(calc(var(--py, 0) * 60px)); }
}


/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .hero { padding-top: 130px; padding-bottom: var(--s4); }
  /* de stekker blijft ook op mobiel speelbaar: eigen rij onder het woordmerk */
  .hero-row2 { grid-template-columns: auto 1fr; }

  .mascot-tile { min-height: 96px; }
  .hero-under { flex-direction: column; align-items: flex-start; }
  .section { padding-top: var(--s12); padding-bottom: var(--s12); }
  .tv { transform: none; }
  .bar { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .bar-nav {
    width: 100%; order: 3;
    justify-content: space-between; gap: 0;
    border-top: 1px solid var(--grey);
    margin-top: 6px;
  }
  .bar-nav a { padding: 12px 2px; }
  .giant-num { font-size: 34vw; right: -6vw; opacity: .7; }
  .mascot-xl { width: 92px; }
}
@media (max-width: 380px) {
  .hero { padding-top: 150px; }
  .bar-nav a { font-size: 11px; letter-spacing: .08em; }
}

/* ---------- sectie-overgangen: fade van sectie naar sectie ---------- */
.section { --fade: 0; }
.section::before, .section::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: clamp(70px, 11vh, 150px);
  pointer-events: none; z-index: 4;
}
.section::before { top: 0; }
.section::after { bottom: 0; }

/* lichte secties vervagen naar hun eigen papier */
#next::before, #plug-in::before {
  background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 100%);
}
#next::after, #plug-in::after {
  background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 100%);
}
/* de fotowand is donker: die vervaagt naar inkt, niet naar papier */
#faces::before {
  background: linear-gradient(to bottom, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
  height: 26vh;
}
#faces::after {
  background: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
  height: 26vh;
}
/* donkere sectie vervaagt naar inkt */
.about::before {
  background: linear-gradient(to bottom, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
}
.about::after {
  background: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
}

/* de sectie zelf komt als geheel op (Pinkpop: plain fade, opacity-only) */
.section { opacity: 1; }
body.reveals-ready .section.sect-fade { opacity: 0; transition: opacity 1.1s var(--quad); }
body.reveals-ready .section.sect-fade.in-view { opacity: 1; }

/* nav kleurt mee met de donkere sectie */
body.on-dark .bar {
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--paper) 30%, transparent);
  transition: background .5s var(--quad), border-color .5s var(--quad);
}
body.on-dark .bar-logo .wordmark-mini { background: var(--paper); }
body.on-dark .bar-nav a { color: var(--paper); }
body.on-dark .bar-status { color: var(--grey); }
.bar { transition: background .5s var(--quad), border-color .5s var(--quad); }
.bar-nav a, .bar-status { transition: color .5s var(--quad); }
.bar-logo .wordmark-mini { transition: background-color .5s var(--quad); }

@media (prefers-reduced-motion: reduce) {
  body.reveals-ready .section.sect-fade { opacity: 1; }
}

/* ---------- circuit: voltage-meter en mobiele stroomlijn ---------- */
.bar-status .volt-read {
  color: var(--volt);
  font-variant-numeric: tabular-nums;
}
body:not(.is-on) .bar-status .volt-read { color: var(--smoke); }
/* rood op donkerpaars haalt AA niet: op de donkere sectie licht zetten */
body.on-dark .bar-status .volt-read { color: var(--paper); }

/* de onderrand van de balk is op mobiel de stroomlijn */
.bar-current {
  position: absolute; left: 0; bottom: -2px; height: 2px;
  width: 0%;
  background: var(--volt);
  box-shadow: 0 0 8px color-mix(in srgb, var(--volt) 60%, transparent);
  pointer-events: none;
}
@media (min-width: 1100px) { .bar-current { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cable-nav .cable-live { filter: none; }
  .bar-current { transition: none; }
}

/* ==========================================================
   DE REIS: interactieve haltes
   ========================================================== */

/* ---------- de mascotte reist mee op de kabel ---------- */
.cable-mascot {
  position: absolute; left: 0; top: 0;
  width: 34px;
  color: var(--volt);
  filter: drop-shadow(3px 4px 0 rgba(14, 4, 30, .18));
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--quad);
}
body.is-on .cable-mascot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .knob-mark { transition: none; }
  .plug-hint { animation: none; }
}

/* geen dubbele focusring op de svg-knoppen; focus-visible doet het werk */
.tuner-knob:focus, .gate-plug:focus, .face-tv:focus { outline: none; }

/* ---------- route-badges: cirkel, ruit en schild uit de vormentaal ---------- */
.route .badge { width: 78px; height: 78px; overflow: visible; }
.route .badge-line { transition: stroke .25s var(--quad); }
.route .badge-fill { transition: opacity .3s var(--quad); }
.route .badge-mascot {
  color: var(--paper);
  opacity: 0;
  transform: translateY(-16px);
  transform-box: fill-box;
  transition: opacity .3s var(--quad), transform .45s var(--quad);
  overflow: visible;
}
.route:hover .badge-fill,
.route:focus-within .badge-fill,
.route.connected .badge-fill { opacity: 1; }
.route:hover .badge-mascot,
.route:focus-within .badge-mascot,
.route.connected .badge-mascot { opacity: 1; transform: translateY(0); }
.route.host .badge-fill { fill: var(--volt); }

@media (prefers-reduced-motion: reduce) {
  .gate-half, .gate-stage, .gate-diamond, .route .badge-mascot { transition: none; }
  .gate-hint { animation: none; }
}

/* ==========================================================
   FASE 1 — de posters worden de site
   ========================================================== */

/* ---------- hero: typografie links, affiche rechts ---------- */
.hero{
  min-height:100svh;
  display:grid; align-items:center;
  padding:calc(64px + var(--s6)) var(--gutter) var(--s8);
  background:var(--ink); color:var(--paper);
  position:relative; overflow:hidden;
}
.hero-in{
  width:100%; max-width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:900px){ .hero-in{ grid-template-columns:1.25fr .75fr } }
.hero-type{ display:grid; gap:clamp(14px,2vh,26px); align-content:center }
.hero .eyebrow{ color:var(--volt); margin:0 }

.wm-line1{
  width:100%;
  aspect-ratio:1321 / 216;
  max-height:26vh;
  background:var(--grey);
  -webkit-mask:url('assets/logos/wm-plugged.svg') left center / contain no-repeat;
  mask:url('assets/logos/wm-plugged.svg') left center / contain no-repeat;
}
body.is-on .wm-line1{ background:var(--volt); transition:background-color .8s var(--quad) .1s }
.hero-row2{
  display:flex; align-items:flex-end; gap:clamp(16px,2.5vw,38px); flex-wrap:wrap;
}
.wm-line2{
  width:clamp(96px,13vw,190px);
  aspect-ratio:250 / 216;
  background:var(--grey);
  -webkit-mask:url('assets/logos/wm-in.svg') left center / contain no-repeat;
  mask:url('assets/logos/wm-in.svg') left center / contain no-repeat;
  flex:none;
}
body.is-on .wm-line2{ background:var(--volt); transition:background-color .7s var(--quad) .3s }
.hero-sub{
  font-size:clamp(15px,1.5vw,19px); line-height:1.45; max-width:34ch; margin:0;
  color:color-mix(in srgb, var(--paper) 82%, transparent);
}
.hero-sub strong{ font-weight:700; color:var(--paper) }
.hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s1) }
.hero .btn{ background:var(--volt); border-color:var(--volt); color:var(--paper) }
.hero .btn:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink) }
.hero .btn.ghost{ background:transparent; border-color:var(--paper); color:var(--paper) }
.hero .btn.ghost:hover{ background:var(--paper); color:var(--ink) }

.hero-poster{
  margin:0; justify-self:center;
  width:min(100%,392px);
  transform:rotate(-1.6deg);
}
.hero-poster img{
  width:100%; height:auto;
  border:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  box-shadow:14px 18px 0 rgba(0,0,0,.34);
}
.hero-poster figcaption{
  display:flex; gap:10px; align-items:baseline; margin-top:12px;
  color:color-mix(in srgb, var(--paper) 72%, transparent);
}
.hero-poster .no{ color:var(--volt); font-weight:600 }

/* ---------- tussenstaat: groot en zonder excuus ---------- */
.next{ text-align:left }
.between{ max-width:26ch }
.between .status-line{
  display:inline-flex; align-items:center; gap:10px; color:var(--volt); margin:0 0 var(--s3);
}
.between .status-line::before{
  content:''; width:10px; height:10px; border-radius:50%; background:var(--volt);
}
@media (prefers-reduced-motion:no-preference){
  .between .status-line::before{ animation:blink 1.2s steps(2) infinite }
}
@keyframes blink{ 50%{ opacity:.25 } }
.huge{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(34px,7vw,92px); line-height:.92; letter-spacing:-.03em;
  margin:0 0 var(--s3);
}
.between-sub{ max-width:52ch; font-size:clamp(16px,1.5vw,19px); margin:0 0 var(--s4) }
.between-act{ display:flex; flex-wrap:wrap; gap:var(--s2) }

/* ---------- line-up: één maat voor elke naam ---------- */
.lineup-band{ background:var(--volt); color:var(--paper); padding:clamp(40px,7vh,86px) var(--gutter) }
@media(min-width:1100px){ .lineup-band{ padding-left:max(var(--gutter),120px) } }
.lineup-in{ max-width:var(--shell); margin-inline:auto }
.lu-lbl{ color:color-mix(in srgb, var(--paper) 75%, transparent); margin:0 0 var(--s3) }
.lu-names{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(26px,5.2vw,72px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 var(--s3);
}
.lu-names i{ font-style:normal; opacity:.42; padding:0 .12em }
.lu-foot{ color:color-mix(in srgb, var(--paper) 70%, transparent); margin:0 }

/* ---------- editiewand ---------- */
.section-head{ align-items:baseline }
.head-note{ color:var(--smoke) }
.ed-grid{
  display:grid; gap:clamp(16px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ed-poster{ margin:0; overflow:hidden; background:var(--ink); position:relative }
.ed-poster img{
  width:100%; height:auto; display:block;
  transition:transform .6s var(--quad);
}
.ed:hover .ed-poster img, .ed:focus-within .ed-poster img{ transform:scale(1.035) }
.ed-poster.is-next::after{
  content:'Next'; position:absolute; top:10px; left:10px;
  font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--volt); color:var(--paper); padding:4px 9px;
}
.ed-meta{ display:grid; gap:3px; margin-top:12px }
.ed-meta .no{ color:var(--volt) }
.ed-meta h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(17px,1.8vw,22px); line-height:1.1; letter-spacing:-.01em; margin:0;
}
.ed-meta p{ color:var(--smoke); margin:0 }
.faces-note{ margin-top:var(--s8); max-width:60ch; color:var(--smoke) }
.faces-note a{ color:var(--ink) }
.faces-note a:hover{ color:var(--volt) }

/* de hero is donker: bovenbalk begint donker */
body:not(.on-dark) .bar{ }
.hero + .ticker{ border-top:none }

@media(max-width:900px){
  .hero{ min-height:auto; padding-top:calc(64px + var(--s8)); padding-bottom:var(--s8) }
  .hero-poster{ width:min(74%,320px); transform:none }
  .wm-line1{ max-height:none }
}

/* ---------- fase 1, correcties na render ---------- */
/* hero: gat onderin dichten, affiche zwaarder */
.hero{ padding-top:calc(64px + var(--s4)); padding-bottom:var(--s6) }
.hero-poster{ width:min(100%,452px) }
@media(min-width:900px){
  .hero-in{ grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,80px) }
  .wm-line1{ max-height:30vh }
}
/* lichte posters hebben een rand nodig op off-white */
.ed-poster{ border:1px solid color-mix(in srgb, var(--ink) 16%, transparent) }
/* bijschriften op één lijn, ook als een titel afbreekt */
.ed{ display:flex; flex-direction:column }
.ed-meta{ margin-top:14px }
.ed-meta p{ min-height:2.6em }

/* ---------- GSAP neemt het over waar hij draait ---------- */
body.gsap-on .about-statement .ln-in{ transition:none; transform:none }
body.gsap-on .about.in-view .ln-in{ transition:none }
body.gsap-on .about .strike::after{ transform:rotate(-2deg) scaleX(var(--sx,0)); transition:none }
body.gsap-on .about.in-view .strike::after{ transition:none }
body.gsap-on .ed.reveal.rv-pop{ opacity:1; transform:none; transition:none }
body.gsap-on .about.in-view .mascot-xl{ animation:none }
/* tijdens de match-cut blijft de poort staan maar wordt hij doorlaatbaar */
body.gate-cutting .gate{ pointer-events:none }
body.gate-cutting{ overflow:visible }
.gate-stage{ will-change:transform }

/* ==========================================================
   MATCH CUT — de lockup staat in de poort exact waar hij
   in de hero staat, dus het wegknippen is een echte cut
   ========================================================== */
.lockup{ display:block; width:clamp(104px,13vw,188px); flex:none }
.lockup-svg{ width:100%; height:auto; display:block; overflow:visible }
.lk-mascot{ color:var(--paper); overflow:visible }

/* de hero-lockup is het doelwit */
.hero-row2{ align-items:center }
#hero-lockup{ align-self:center }

/* ---------- de poort ---------- */
body.gate-closed{ overflow:hidden }
.gate{ position:fixed; inset:0; z-index:200; background:var(--paper) }
body.gate-gone .gate{ display:none }
.gate-half{ display:none }              /* geen splijtende helften meer: harde cut */

.gate-stage{ position:absolute; inset:0 }

/* de lege ruit wordt door JS exact op de hero-lockup gelegd */
.gate-lockup{
  position:fixed; left:0; top:0;
  transform-origin:top left;
  z-index:2;
}
.gate-lockup .lk-dia{ transition:fill .16s var(--snap), stroke .16s var(--snap) }
body.gate-near .gate-lockup .lk-dia{ stroke:var(--volt) }
body.gate-live .gate-lockup .lk-dia{ fill:var(--volt); stroke:var(--volt) }

/* het mannetje dat je sleept: zelfde maat als in de lockup */
.gate-plug{
  position:fixed; left:0; top:0;
  z-index:3; cursor:grab; touch-action:none;
  transform-origin:top left;
}
.gate-plug:active, body.gate-dragging .gate-plug{ cursor:grabbing }
.gate-plug .gate-mascot{ width:100%; height:auto; color:var(--volt); display:block }
body.gate-live .gate-plug .gate-mascot{ color:var(--paper) }
.gate-plug:focus-visible{ outline:3px solid var(--volt); outline-offset:6px }

.gate-cordlayer{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }
body.gate-live .gate-cordlayer{ opacity:0 }

.gate-hint{
  position:fixed; left:50%; transform:translateX(-50%);
  color:var(--volt); letter-spacing:.18em; z-index:4; margin:0;
}
@media (prefers-reduced-motion:no-preference){
  body:not(.gate-live) .gate-hint{ animation:hint-pulse 1.8s var(--quad-io) infinite }
}
@keyframes hint-pulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
body.gate-live .gate-hint{ opacity:0 }

.gate-skip{
  position:fixed; right:clamp(16px,4vw,44px); bottom:clamp(16px,4vh,36px);
  border:none; background:none; cursor:pointer; z-index:4;
  font-family:var(--label); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); padding:10px 14px; min-height:44px;
}
.gate-skip:hover{ color:var(--volt) }

@media (prefers-reduced-motion:reduce){
  .gate-lockup .lk-dia{ transition:none }
  .gate-hint{ animation:none }
}

/* ==========================================================
   OVERLOOP — elementen die de sectiegrens oversteken
   ========================================================== */

/* de rode band mag overlopen worden */
.lineup-band{ position:relative; overflow:visible; z-index:3 }
.next{ position:relative; z-index:1 }

/* de mascotte staat half in het licht, half in het rood */
.bleed-mascot{
  position:absolute;
  right:clamp(16px,8vw,150px);
  top:0;
  width:clamp(120px,17vw,260px);
  transform:translateY(-58%);
  color:var(--volt);
  filter:drop-shadow(0 0 0 var(--paper))
         drop-shadow(6px 0 0 var(--paper))
         drop-shadow(-6px 0 0 var(--paper))
         drop-shadow(0 6px 0 var(--paper))
         drop-shadow(0 -6px 0 var(--paper));
  z-index:3; pointer-events:none;
}

/* het affiche in de hero zakt over de ticker heen */
.hero{ z-index:1 }
.hero-poster{ position:relative; z-index:4; margin-bottom:clamp(-64px,-5vw,-28px) }
.ticker{ position:relative; z-index:0 }

/* de eerste editie steekt boven de sectie uit, de about-sectie in */
#editions{ position:relative; overflow:visible }
@media(min-width:900px){
  .ed:nth-child(2n){ margin-top:clamp(20px,3.4vw,52px) }
}

/* ---------- line-up als affichebiljet ---------- */
.lu-names{
  list-style:none; margin:0 0 var(--s3); padding:0;
  display:grid; gap:clamp(2px,.4vw,8px);
}
.lu-names li{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,6.4vw,86px); line-height:.98; letter-spacing:-.028em;
}


/* ==========================================================
   FX — de affiches worden fysieke objecten
   ========================================================== */
.ed-poster, .hero-poster{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  transform-style:preserve-3d;
  transition:transform .5s var(--quad), box-shadow .5s var(--quad);
  will-change:transform;
}
.ed-poster{ position:relative; cursor:pointer }
.ed-poster.lifted, .hero-poster.lifted{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(14px);
  transition:transform .12s linear, box-shadow .3s var(--quad);
  box-shadow:0 26px 46px rgba(14,4,30,.34);
}
/* het licht valt waar je muis is */
.ed-poster::after, .hero-poster::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),
    rgba(255,255,255,.30), rgba(255,255,255,0) 46%);
  opacity:0; transition:opacity .3s var(--quad);
  mix-blend-mode:overlay;
}
.ed-poster.lifted::after, .hero-poster.lifted::after{ opacity:1 }
.hero-poster{ position:relative }
.ed-poster:focus-visible{ outline:3px solid var(--volt); outline-offset:4px }

/* een affiche vraagt erom geopend te worden */
.ed-poster .zoom{
  position:absolute; right:10px; bottom:10px; z-index:2;
  font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:5px 9px;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s var(--quad), transform .25s var(--quad);
}
.ed-poster.lifted .zoom{ opacity:1; transform:translateY(0) }

/* ---------- het affiche groot ---------- */
.lb{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(20px,5vw,60px);
  background:color-mix(in srgb, var(--ink) 93%, transparent);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--quad);
}
body.lb-open{ overflow:hidden }
body.lb-open .lb{ opacity:1; pointer-events:auto }
.lb-fig{ margin:0; display:grid; gap:14px; justify-items:center; max-height:100% }
.lb-fig img{
  max-height:76vh; width:auto; max-width:100%;
  border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform:scale(.94); transition:transform .4s var(--quad);
}
body.lb-open .lb-fig img{ transform:scale(1) }
.lb-fig figcaption{ display:flex; gap:12px; color:var(--paper) }
.lb-no{ color:var(--volt); font-weight:600 }
.lb-close{
  position:absolute; top:clamp(14px,2.6vw,28px); right:clamp(14px,2.6vw,28px);
  border:1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  background:transparent; color:var(--paper); cursor:pointer;
  font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 14px; min-height:44px;
}
.lb-close:hover{ background:var(--volt); border-color:var(--volt) }

/* magnetische knoppen mogen niet vechten met hun eigen hover-transform */
.btn{ transition:transform .28s var(--quad), background .15s var(--out), color .15s var(--out) }
.btn:hover{ transform:none }

@media (prefers-reduced-motion:reduce){
  .ed-poster, .hero-poster, .lb, .lb-fig img{ transition:none }
  .ed-poster.lifted, .hero-poster.lifted{ transform:none }
}

/* ---------- de poort vervaagt zacht; de lockup blijft staan ---------- */
body.gate-fading .gate-half,
body.gate-fading .gate-hint,
body.gate-fading .gate-skip,
body.gate-fading .gate-cordlayer{
  opacity:0;
  transition:opacity .85s cubic-bezier(.33,0,.2,1);
}
body.gate-fading .gate-lockup{
  opacity:0;
  transition:opacity .5s cubic-bezier(.33,0,.2,1) .38s;
}
body.gate-fading .gate-plug{
  opacity:0;
  transition:opacity .5s cubic-bezier(.33,0,.2,1) .38s;
}
body.gate-fading .gate{ pointer-events:none }

/* ---------- de pagina komt tot rust bij de volgende sectie ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  html{ scroll-snap-type:y mandatory }
  .hero, .section, .lineup-band, .footer{
    scroll-snap-align:start;
    scroll-snap-stop:always;      /* elke sectie houdt je even vast */
  }
  /* secties die hoger zijn dan het scherm mogen niet opsluiten */
  .section, .footer{ scroll-snap-align:start }
}
body.lb-open{ scroll-snap-type:none }

/* ==========================================================
   FOOTER — de tegenhanger van de intro
   ========================================================== */
.footer{ position:relative; overflow:hidden; padding-top:clamp(70px,10vh,130px) }

/* het woordmerk vult de voet en onthult zichzelf */
.footer-mark{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1627 / 216;
  background:var(--volt);
  -webkit-mask:url('assets/logos/wordmark.svg') center / contain no-repeat;
  mask:url('assets/logos/wordmark.svg') center / contain no-repeat;
  margin:0 0 clamp(30px,5vh,64px);
  will-change:clip-path;
}

/* de stekker die je eruit trekt */
.unplug{
  position:relative;
  height:clamp(112px,15vh,180px);
  margin-bottom:clamp(8px,2vh,20px);
}
.unplug-cord{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--smoke); overflow:visible; pointer-events:none;
}
.unplug-plug{
  position:absolute; left:0; top:0;
  width:clamp(54px,6vw,86px);
  aspect-ratio:949 / 1087;
  height:auto;
  padding:0; margin:0; border:none; background:none;
  cursor:grab; color:var(--volt); touch-action:none;
  filter:drop-shadow(3px 5px 0 rgba(0,0,0,.35));
  z-index:2;
}
.unplug-plug:active{ cursor:grabbing }
.unplug-plug .lk-mascot{
  width:100%; height:100%; display:block; overflow:visible;
}
.unplug-plug:focus-visible{ outline:3px solid var(--volt); outline-offset:6px }
.unplug-hint{
  position:absolute; left:0; top:0;
  color:var(--grey); white-space:nowrap; pointer-events:none;
  transition:opacity .3s var(--quad);
}
body.unplugging .unplug-hint{ opacity:0 }

/* het licht gaat uit als de stekker eruit is */
.blackout{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:var(--ink);
  opacity:0;
  transition:opacity .5s cubic-bezier(.7,0,.3,1);
}
body.blacked .blackout{ opacity:1 }

/* ---------- tekst die per woord binnenkomt ---------- */
.w-line{ display:inline-block; overflow:hidden; vertical-align:bottom }
.w-word{ display:inline-block; will-change:transform }

@media (prefers-reduced-motion:reduce){
  .unplug-plug, .blackout{ transition:none }
  .w-word{ transform:none !important; opacity:1 !important }
  .footer-mark{ clip-path:none !important }
}


/* ---------- de poort valt weg als een oud toestel ---------- */
body.gate-stutter .gate{
  animation:signal-drop var(--introFlash,340ms) steps(1) both;
}
@keyframes signal-drop{
  0%   { opacity:1 }
  12%  { opacity:.35 }
  20%  { opacity:1 }
  34%  { opacity:.12 }
  42%  { opacity:.92 }
  56%  { opacity:.3 }
  66%  { opacity:.85 }
  80%  { opacity:.18 }
  92%  { opacity:.4 }
  100% { opacity:.12 }
}
/* ruis over de poort tijdens het wegvallen */
body.gate-stutter .gate::after,
body.gate-fading .gate::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.5;
  animation:noise-jump .09s steps(2) infinite;
}
body.gate-fading .gate::after{ opacity:0; transition:opacity var(--introFade,150ms) linear }
@keyframes noise-jump{
  0%{ transform:translate(0,0) } 50%{ transform:translate(-3%,2%) } 100%{ transform:translate(2%,-1%) }
}
/* de zachte uitloop wordt langer en volledig lineair */
body.gate-fading .gate-half,
body.gate-fading .gate-hint,
body.gate-fading .gate-skip,
body.gate-fading .gate-cordlayer{
  opacity:0;
  transition:opacity var(--introFade,150ms) linear;
}
body.gate-fading .gate-lockup,
body.gate-fading .gate-plug{
  opacity:0;
  transition:opacity var(--introFade,150ms) linear 20ms;
}

@media (prefers-reduced-motion:reduce){
  body.gate-stutter .gate{ animation:none }
  body.gate-stutter .gate::after, body.gate-fading .gate::after{ display:none }
}

/* ==========================================================
   ELKE SECTIE VULT PRECIES HET SCHERM
   Alleen zo kan de scroll echt per sectie blijven hangen.
   ========================================================== */
@media (min-width:900px){
  .hero,
  .section,
  .lineup-band,
  .footer{
    height:100svh;
    min-height:100svh;
    max-height:100svh;
    overflow:hidden;
    display:grid;
    align-content:center;
    padding-top:clamp(72px,9vh,110px);
    padding-bottom:clamp(28px,5vh,64px);
  }

  /* de binnenmaat schaalt mee met de hoogte, niet alleen de breedte */
  .hero-in{ gap:clamp(20px,3vw,56px) }
  .wm-line1{ max-height:22vh }
  .hero-poster{ width:min(100%,min(34vh,420px)) }
  .hero-poster img{ max-height:52vh; width:auto; margin-inline:auto }
  .hero-sub{ font-size:clamp(14px,1.7vh,18px) }

  .section-head{ margin-bottom:clamp(16px,3vh,44px) }
  .section-title{ font-size:clamp(28px,6vh,74px) }

  .huge{ font-size:clamp(30px,7.4vh,84px); margin-bottom:clamp(12px,2.4vh,28px) }
  .between-sub{ font-size:clamp(14px,1.8vh,19px); margin-bottom:clamp(16px,3vh,34px) }

  .about-statement{ font-size:clamp(30px,8vh,96px) }
  .about-body{ margin-top:clamp(16px,3.4vh,44px); gap:clamp(18px,3vw,52px) }
  .about-body p{ font-size:clamp(14px,1.8vh,19px) }

  .lu-names li{ font-size:clamp(24px,7vh,78px) }
  .lu-names{ margin-bottom:clamp(10px,2vh,24px) }

  /* de affichewand past in één beeld */
  .ed-grid{ gap:clamp(12px,1.6vw,26px) }
  .ed-poster img{ max-height:52vh; width:100%; object-fit:cover }
  .ed-meta h3{ font-size:clamp(14px,2vh,20px) }
  .ed-meta p{ font-size:clamp(11px,1.4vh,13px); min-height:0 }
  .ed:nth-child(2n){ margin-top:clamp(12px,2vh,34px) }
  .faces-note{ margin-top:clamp(14px,2.4vh,30px); font-size:clamp(13px,1.6vh,16px) }

  .routes{ gap:clamp(12px,1.6vw,26px) }
  .route{ padding:clamp(14px,2.4vh,26px) }
  .route h3{ font-size:clamp(18px,3vh,32px) }
  .route p{ font-size:clamp(13px,1.6vh,16px) }
  .strip-intro{ font-size:clamp(14px,1.8vh,19px); margin-bottom:clamp(16px,3vh,40px) }

  .footer{ align-content:end }
  .footer-mark{ margin-bottom:clamp(18px,3vh,44px) }
  .unplug{ height:clamp(90px,12vh,150px) }
  .footer-grid{ margin-bottom:clamp(18px,3vh,44px) }

  /* de ticker hoort bij de hero en telt niet als eigen halte */
  .ticker{ scroll-snap-align:none }
}

/* ---------- meelezen: woorden lichten op zoals je leest ---------- */
.read-w{
  display:inline-block;
  color:inherit;
  opacity:.16;
  transition:opacity .01s linear;
}
body:not(.gsap-on) .read-w{ opacity:1 }
@media (prefers-reduced-motion:reduce){ .read-w{ opacity:1 !important } }

/* de about-sectie moet ook binnen één scherm passen */
@media (min-width:900px){
  .about .section-head{ margin-bottom:clamp(10px,1.6vh,24px) }
  .about-statement{ font-size:clamp(26px,6.1vh,72px); max-width:15ch }
  .about-body{ margin-top:clamp(12px,2vh,28px); gap:clamp(14px,2vw,40px) }
  .about-body p{ font-size:clamp(13px,1.6vh,17px) }
  .about-body p + p{ margin-top:clamp(6px,1vh,14px) }
  .about-chips{ gap:clamp(5px,.9vh,12px) }
  .about-chips .chip{ padding:clamp(5px,.9vh,9px) clamp(9px,1.1vw,15px); font-size:clamp(11px,1.3vh,13px) }
  .about .mascot-xl{ width:clamp(80px,11vh,150px) }
}

/* het grid mag de koppen niet naar het midden duwen */
@media (min-width:900px){
  .hero, .section, .lineup-band, .footer{ justify-items:start }
  .section > *:not(.shot-bed), .hero > *:not(.hero-shot), .footer > *:not(.footer-shot){ width:100% }
  .about-statement, .between, .strip-intro, .faces-note{ margin-inline:0 }
}

/* ==========================================================
   v15 — correcties
   ========================================================== */

/* de losse versieringen mogen NOOIT de volle breedte pakken */
@media (min-width:900px){
  .section > .star-overflow,
  .section > .mascot-xl,
  .section > .star-deco,
  .lineup-band > .bleed-mascot,
  .hero > .hero-scene{
    width:auto;
  }
  .star-overflow{ width:clamp(70px,8vh,130px) !important }
  .mascot-xl{ width:clamp(80px,11vh,150px) !important }
  .bleed-mascot{ width:clamp(110px,15vh,220px) !important }
}

/* de home-header staat gecentreerd in beeld */
@media (min-width:900px){
  .hero{ align-content:center; justify-items:center }
  .hero-in{
    justify-items:center;
    align-items:center;
    text-align:left;
  }
  .hero-type{ justify-items:start }
  .hero > *{ margin-inline:auto }
}

/* ---------- de stekker in de voet vraagt aandacht ---------- */
.unplug-plug{
  transition:transform .3s var(--quad), filter .3s var(--quad);
}
@media (prefers-reduced-motion:no-preference){
  body:not(.unplugging) .unplug-plug{
    animation:plug-nudge 2.6s cubic-bezier(.4,0,.2,1) infinite;
  }
}
@keyframes plug-nudge{
  0%, 62%, 100% { transform:translate3d(var(--px,0),var(--py,0),0) rotate(0deg) }
  68%  { transform:translate3d(var(--px,0),calc(var(--py,0px) - 12px),0) rotate(-7deg) }
  74%  { transform:translate3d(var(--px,0),calc(var(--py,0px) - 4px),0) rotate(5deg) }
  80%  { transform:translate3d(var(--px,0),calc(var(--py,0px) - 9px),0) rotate(-3deg) }
  88%  { transform:translate3d(var(--px,0),var(--py,0),0) rotate(0deg) }
}
.unplug-plug::after{
  content:''; position:absolute; inset:-16%;
  border:2px solid var(--volt); border-radius:50%;
  opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  body:not(.unplugging) .unplug-plug::after{
    animation:plug-ring 2.6s cubic-bezier(.2,0,.3,1) infinite;
  }
}
@keyframes plug-ring{
  0%, 60% { transform:scale(.7); opacity:0 }
  70%     { transform:scale(1); opacity:.75 }
  100%    { transform:scale(1.7); opacity:0 }
}
.unplug-hint{
  color:var(--volt);
  font-weight:600;
}
.unplug-plug:hover{ transform:translate3d(var(--px,0),calc(var(--py,0px) - 6px),0) scale(1.06) }

/* ---------- geen CSS-snap meer: dat doet nu de JS ---------- */
@media (min-width:900px){
  html{ scroll-snap-type:none }
}

/* ==========================================================
   MOBIEL — een eigen ontwerp, geen ingekrompen desktop
   Geleerd van Pinkpop (woordmerk vult het scherm, menu-pil)
   en Dekmantel (typografie, geen kaarten).
   ========================================================== */
@media (max-width: 899px){

  /* ---------- balk: alleen logo en één pil ---------- */
  .bar{
    padding:10px 14px;
    gap:10px;
    align-items:center;
  }
  .bar-status{ display:none }
  .bar-logo .wordmark-mini{ width:104px }
  .bar-logo .mascot-mini{ width:22px; height:26px }
  .bar-nav{
    position:fixed; inset:0; z-index:120;
    display:grid; align-content:center; justify-items:start;
    gap:clamp(10px,2.4vh,22px);
    width:100%; margin:0; padding:0 var(--gutter);
    background:var(--ink);
    border:none;
    transform:translateY(-101%);
    transition:transform .5s cubic-bezier(.76,0,.24,1);
    visibility:hidden;
  }
  body.menu-open .bar-nav{ transform:translateY(0); visibility:visible }
  .bar-nav a{
    font-family:var(--display); font-weight:900; text-transform:uppercase;
    font-size:clamp(30px,9vw,52px); line-height:1; letter-spacing:-.02em;
    color:var(--paper); padding:6px 0;
  }
  .bar-nav a:active{ color:var(--volt) }
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; z-index:130; position:relative;
    min-height:40px; padding:9px 18px;
    border:2px solid var(--ink); border-radius:999px;
    background:var(--paper); color:var(--ink);
    font-family:var(--label); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; cursor:pointer;
  }
  body.menu-open .menu-btn{ background:var(--volt); border-color:var(--volt); color:var(--paper) }
  body.on-dark:not(.menu-open) .menu-btn{ background:transparent; border-color:var(--paper); color:var(--paper) }
  body.menu-open{ overflow:hidden }

  /* ---------- hero: het woordmerk ís het eerste scherm ---------- */
  .hero{
    min-height:100svh;
    padding:64px 0 0;
    align-content:start;
    row-gap:0;
  }
  .hero-in{
    grid-template-columns:1fr;
    gap:0;
    padding:0;
  }
  .hero .eyebrow{
    padding:14px var(--gutter) 8px;
    margin:0;
  }
  .hero-type{ gap:0 }

  /* PLUGGED en IN gestapeld, van rand tot rand */
  .wm-line1{
    width:calc(100% - 24px);
    margin:0 12px;
    max-height:none;
  }
  .hero-row2{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:8px;
    padding:0 12px;
    margin-top:-2px;
  }
  .wm-line2{ width:44vw; max-width:230px }
  #hero-lockup{ width:clamp(76px,22vw,110px); margin-bottom:2px }

  .hero-sub{
    grid-column:1 / -1;
    padding:16px var(--gutter) 0;
    font-size:clamp(15px,4vw,18px);
    max-width:34ch;
  }
  .hero-ctas{
    padding:18px var(--gutter) 0;
    gap:10px;
    flex-direction:column;
    align-items:stretch;
  }
  .hero .btn{ justify-content:center; width:100% }

  /* het affiche komt eronder, groot en gekanteld */
  .hero-poster{
    width:min(72%,300px);
    margin:22px auto 0;
    transform:rotate(-2deg);
  }
  .hero-poster figcaption{ justify-content:center }

  /* ---------- secties: ademen, niet opsluiten ---------- */
  .section, .lineup-band, .footer{
    padding-top:clamp(56px,9vh,84px);
    padding-bottom:clamp(56px,9vh,84px);
  }
  .section-head{ flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:22px }
  .section-title{ font-size:clamp(30px,10vw,52px) }
  .head-note{ font-size:11px }

  .huge{ font-size:clamp(30px,10vw,52px) }
  .between{ max-width:none }
  .between-sub{ font-size:16px }
  .between-act{ flex-direction:column; align-items:stretch }
  .between-act .btn{ justify-content:center }

  .about-statement{ font-size:clamp(30px,10.5vw,56px); max-width:none }
  .about-body{ grid-template-columns:1fr; gap:22px }
  .about-chips{ align-items:stretch }
  .about-chips .chip{ transform:none }
  .about .mascot-xl{ width:84px; right:12px }

  /* de namen vullen de breedte */
  .lu-names li{ font-size:clamp(30px,11vw,58px) }
  .bleed-mascot{ width:96px !important; right:12px }

  /* ---------- affiches: swipen in plaats van stapelen ---------- */
  .ed-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .ed-grid::-webkit-scrollbar{ display:none }
  .ed{
    flex:0 0 74%;
    max-width:280px;
    scroll-snap-align:center;
    margin-top:0 !important;
  }
  .ed-poster img{ max-height:none }
  .ed-meta p{ min-height:0 }
  .swipe-hint{
    display:flex; align-items:center; gap:8px;
    margin-top:14px; color:var(--smoke);
  }
  .swipe-hint .bar-line{ flex:1; height:2px; background:var(--grey); position:relative }
  .swipe-hint .bar-line i{ position:absolute; left:0; top:0; bottom:0; width:26%; background:var(--volt) }

  /* ---------- routes onder elkaar ---------- */
  .routes{ grid-template-columns:1fr; gap:14px }
  .route{ padding:20px }
  .route h3{ font-size:26px }
  .route .btn{ width:100%; justify-content:center }
  .star-overflow{ width:64px !important; right:14px }

  /* ---------- voet ---------- */
  .footer-mark{ margin-bottom:26px }
  .footer-grid{ grid-template-columns:1fr; gap:26px }
  .unplug{ height:132px }
  .unplug-plug{ width:64px }
  .footer-legal{ flex-direction:column; gap:8px }

  /* de kabel-nav bestaat niet op mobiel: de balk toont de voortgang */
  .cable-nav{ display:none }
  .bar-current{ height:3px }
}

/* op de kleinste schermen nog wat strakker */
@media (max-width: 380px){
  .hero .btn, .between-act .btn{ font-size:12px; padding:12px 16px }
  .ed{ flex-basis:82% }
}

/* ==========================================================
   v17 — hero recht, menuknop alleen op mobiel, kabel opgeruimd
   ========================================================== */

/* de menuknop bestaat niet op desktop */
.menu-btn{ display:none }

@media (min-width:900px){
  /* de oude rijverdeling plakte de inhoud tegen de bovenkant */
  .hero{
    grid-template-rows:1fr;
    align-content:center;
    justify-items:stretch;
    padding-top:clamp(84px,11vh,130px);
    padding-bottom:clamp(40px,7vh,90px);
  }
  .hero > *{ margin-inline:auto }

  /* type en affiche staan naast elkaar, allebei verticaal gecentreerd */
  .hero-in{
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:clamp(32px,5vw,90px);
    justify-items:stretch;
  }
  .hero-type{
    justify-items:start;
    align-content:center;
    gap:clamp(12px,2.2vh,26px);
  }

  /* het statement onder de woordmerkregel, niet ernaast geplakt */
  .hero-row2{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:end;
    gap:clamp(14px,2vw,30px);
    width:100%;
  }
  .hero-sub{
    align-self:end;
    padding-bottom:.4em;
    max-width:30ch;
  }

  .hero-ctas{ gap:var(--s2) }
  .hero-poster{ width:min(100%,min(36vh,400px)); justify-self:center }
}

/* ---------- de kabel: gelijke stippen, mascotte botst niet ---------- */
.cable-nav .node{ z-index:2 }
.cable-mascot{
  z-index:1;
  width:30px;
  opacity:.9;
}
.cable-nav .plug-cursor{ z-index:3 }

/* de poort toont zichzelf pas als de hero is opgemeten */
.gate-lockup, .gate-plug, .gate-cordlayer, .gate-hint{
  opacity:0;
  transition:opacity .28s var(--quad);
}
body.gate-ready .gate-lockup,
body.gate-ready .gate-plug,
body.gate-ready .gate-cordlayer,
body.gate-ready .gate-hint{ opacity:1 }
/* tijdens het wegvallen bepaalt de fade-regel de dekking, niet deze */
body.gate-fading .gate-lockup,
body.gate-fading .gate-plug,
body.gate-fading .gate-cordlayer,
body.gate-fading .gate-hint{ opacity:0 }

/* ---------- de hero beantwoordt meteen: wat is dit? ---------- */
.hero-facts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(3px,.7vh,8px);
  color:color-mix(in srgb, var(--paper) 66%, transparent);
}
.hero-facts li{ font-size:clamp(11px,1.35vh,13px); letter-spacing:.1em }
.hero-facts b{ color:var(--volt); font-weight:600; letter-spacing:.14em }
@media (min-width:900px){
  .hero-sub{ font-size:clamp(14px,1.75vh,19px); max-width:34ch }
}

/* ==========================================================
   v22 — echte fotografie: de kamer komt de site in
   ========================================================== */

/* ---------- HERO: het publiek achter het type ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden }

.hero-shot{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.hero-shot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  filter:grayscale(.3) contrast(1.1) brightness(.66) saturate(.8);
  transform:scale(1.1);
  animation:heroDrift 30s ease-in-out infinite alternate;
}
/* de sluier: het beeld draagt, het type leest */
.hero-shot::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(115% 85% at 50% 34%, rgba(14,4,30,.28) 0%, rgba(14,4,30,.84) 68%, rgba(14,4,30,.96) 100%),
    linear-gradient(180deg, rgba(14,4,30,.9) 0%, rgba(14,4,30,.42) 30%, rgba(14,4,30,.62) 62%, rgba(14,4,30,.97) 100%);
}
/* korrel van de wegwerpcamera */
.hero-shot::before{
  content:''; position:absolute; inset:-40%; z-index:1; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:heroGrain 1.1s steps(3) infinite;
}
@keyframes heroDrift{ from{ transform:scale(1.1) translate3d(0,0,0) } to{ transform:scale(1.16) translate3d(-1.6%,-2.2%,0) } }
@keyframes heroGrain{
  0%{ transform:translate3d(0,0,0) } 33%{ transform:translate3d(-2%,1.5%,0) } 66%{ transform:translate3d(1.5%,-2%,0) } 100%{ transform:translate3d(0,0,0) }
}

.hero-in{ position:relative; z-index:1 }

.hero-credit{
  position:absolute; z-index:1; right:clamp(16px,4vw,44px); bottom:clamp(14px,2.6vh,26px);
  opacity:.5; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

/* gecentreerde kop: één blok, alles onder elkaar */
@media (min-width:900px){
  .hero-in{
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    gap:0;
  }
  .hero-type{
    justify-items:center;
    text-align:center;
    max-width:min(1180px,92vw);
    gap:clamp(10px,1.8vh,22px);
  }
  .hero-row2{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(14px,2vw,30px);
    width:auto;
  }
  .hero-sub{
    max-width:56ch; margin-inline:auto; padding-bottom:0; align-self:center;
    text-align:center;
  }
  .hero-facts{ justify-content:center }
  .hero-ctas{ justify-content:center }
}
.hero-facts{ display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,28px) }
.hero-facts li{ opacity:.82 }

/* ---------- FACES: de wand ---------- */
.faces{ position:relative; overflow:hidden; background:var(--ink,#0E041E); color:var(--paper,#F3F8F6) }

.wall{ position:absolute; inset:-8% -6%; z-index:0; pointer-events:none }
.wall .ph{ position:absolute; margin:0; overflow:hidden; border-radius:2px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  will-change:transform }
.wall .ph img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.2) contrast(1.06) brightness(.8) saturate(.85) }
/* een dun rood randje: het merk raakt elke foto aan */
.wall .ph::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(177,0,0,.5) }

.wall .ph-1{ left:-2%;  top:4%;   width:20vw; height:40vh; transform:rotate(-3deg) }
.wall .ph-2{ left:19%;  top:-4%;  width:22vw; height:26vh; transform:rotate(2deg) }
.wall .ph-3{ right:20%; top:2%;   width:16vw; height:34vh; transform:rotate(-2deg) }
.wall .ph-4{ right:-2%; top:8%;   width:19vw; height:24vh; transform:rotate(3deg) }
.wall .ph-5{ left:2%;   bottom:2%; width:17vw; height:36vh; transform:rotate(2deg) }
.wall .ph-6{ left:22%;  bottom:-6%; width:15vw; height:30vh; transform:rotate(-3deg) }
.wall .ph-7{ right:18%; bottom:-4%; width:18vw; height:34vh; transform:rotate(2deg) }
.wall .ph-8{ right:-3%; bottom:6%; width:20vw; height:25vh; transform:rotate(-2deg) }

/* het midden blijft leesbaar */
.faces::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 46% at 50% 50%, rgba(14,4,30,.97) 0%, rgba(14,4,30,.9) 46%, rgba(14,4,30,0) 78%);
}

.faces-in{
  position:relative; z-index:2;
  display:grid; gap:clamp(14px,2.4vh,26px);
  justify-items:center; text-align:center;
  max-width:min(720px,86vw); margin-inline:auto;
  align-content:center;
}
.faces-title{
  font-family:var(--display,inherit);
  font-size:clamp(38px,8.4vh,84px); line-height:.94; letter-spacing:-.02em;
  text-transform:uppercase; margin:0;
}
.faces-lead{ font-size:clamp(15px,2.1vh,20px); line-height:1.5; opacity:.9; margin:0; max-width:46ch }

/* ---------- ABOUT: rood halftoon dat de sectie uit loopt ---------- */
.about{ position:relative; overflow:hidden }
.about-shot{
  position:absolute; z-index:0; margin:0; pointer-events:none;
  right:-6vw; top:-8vh; width:min(42vw,520px); aspect-ratio:900/1273;
  overflow:hidden; opacity:.42;
  mask-image:radial-gradient(72% 72% at 60% 40%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(72% 72% at 60% 40%, #000 40%, transparent 100%);
}
.about-shot img{ width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:screen }
.about .section-head, .about-statement, .about-body, .mascot-xl{ position:relative; z-index:1 }

/* ---------- LINE-UP: hand in de lucht achter de namen ---------- */
.lineup-band{ position:relative; overflow:hidden }
.lu-shot{
  position:absolute; z-index:0; margin:0; pointer-events:none;
  left:-4vw; bottom:-14vh; width:min(38vw,460px); aspect-ratio:900/1273;
  overflow:hidden; opacity:.34;
  mask-image:linear-gradient(200deg, #000 20%, transparent 78%);
  -webkit-mask-image:linear-gradient(200deg, #000 20%, transparent 78%);
}
.lu-shot img{ width:100%; height:100%; object-fit:cover; display:block }
.lineup-in, .bleed-mascot{ position:relative; z-index:1 }

/* ---------- FOOTER: de kamer dooft ---------- */
.footer{ position:relative; overflow:hidden }
.footer-shot{
  position:absolute; inset:0; z-index:0; margin:0; pointer-events:none; overflow:hidden;
}
.footer-shot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block;
  filter:grayscale(.6) contrast(1.1) brightness(.4) saturate(.6);
}
.footer-shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,4,30,.9) 0%, rgba(14,4,30,.82) 40%, rgba(14,4,30,.98) 100%);
}
.footer > *:not(.footer-shot){ position:relative; z-index:1 }

/* ---------- mobiel ---------- */
@media (max-width:899px){
  .hero-shot img{ object-position:50% 34%; animation:none; transform:scale(1.04) }
  .hero-credit{ display:none }
  .hero-facts{ gap:6px 16px }

  .wall{ inset:-4% -10% }
  .wall .ph{ box-shadow:0 14px 34px rgba(0,0,0,.5) }
  .wall .ph-1{ left:-6%; top:2%;  width:44vw; height:26vh }
  .wall .ph-2{ right:-8%; top:-2%; left:auto; width:46vw; height:18vh }
  .wall .ph-3{ left:-8%; bottom:16%; top:auto; width:38vw; height:24vh }
  .wall .ph-4{ right:-6%; bottom:2%; top:auto; width:44vw; height:20vh }
  .wall .ph-5, .wall .ph-6, .wall .ph-7, .wall .ph-8{ display:none }
  .faces::before{ background:radial-gradient(76% 44% at 50% 50%, rgba(14,4,30,.98) 0%, rgba(14,4,30,.94) 52%, rgba(14,4,30,.2) 100%) }
  .faces-in{ max-width:92vw }

  .about-shot{ right:-16vw; top:auto; bottom:-6vh; width:64vw; opacity:.3 }
  .lu-shot{ left:-14vw; bottom:-10vh; width:62vw; opacity:.26 }
}

@media (prefers-reduced-motion:reduce){
  .hero-shot img{ animation:none; transform:scale(1.02) }
  .hero-shot::before{ animation:none }
}

/* ==========================================================
   v23 — fotografie afgesteld: leesbaarheid en marges
   ========================================================== */

/* het onderschrift stond op volle breedte en viel daardoor links */
.hero-credit{ width:auto; margin:0; text-align:right }

/* de kamer mag iets meer licht geven, anders zie je het feest niet */
.hero-shot img{ filter:grayscale(.22) contrast(1.08) brightness(.78) saturate(.9) }
.hero-shot::after{
  background:
    radial-gradient(112% 82% at 50% 36%, rgba(14,4,30,.16) 0%, rgba(14,4,30,.74) 64%, rgba(14,4,30,.94) 100%),
    linear-gradient(180deg, rgba(14,4,30,.88) 0%, rgba(14,4,30,.3) 28%, rgba(14,4,30,.5) 60%, rgba(14,4,30,.96) 100%);
}

/* ---------- FACES: tekst wint van de wand ---------- */
/* de wand houdt afstand van de kabel links */
@media (min-width:900px){
  .wall{ inset:-8% -6% -8% 76px }
}

/* twee lagen: een brede band achter de kop, een zachte vlek eromheen */
.faces::before{
  background:
    linear-gradient(180deg, rgba(14,4,30,0) 30%, rgba(14,4,30,.94) 42%, rgba(14,4,30,.94) 72%, rgba(14,4,30,0) 84%),
    radial-gradient(58% 50% at 50% 52%, rgba(14,4,30,.98) 0%, rgba(14,4,30,.9) 52%, rgba(14,4,30,0) 82%);
}
/* en de bovenrand dooft de vorige sectie netjes uit */
.faces::after{
  content:''; position:absolute; inset:0 0 auto 0; height:22vh; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,4,30,.96), rgba(14,4,30,0));
}
.faces-in{ text-shadow:0 2px 24px rgba(14,4,30,.9) }
.faces-title{ font-size:clamp(36px,7.4vh,76px) }
.faces-lead{ max-width:42ch }

/* de foto's mogen niet onder de kop uit steken */
.wall .ph img{ filter:grayscale(.24) contrast(1.05) brightness(.7) saturate(.8) }

@media (max-width:899px){
  /* de sectie moet ook op de telefoon een volle hoogte houden */
  .faces{ min-height:100svh; display:grid; align-content:center }
  .faces::after{ height:16vh }
  .faces::before{
    background:
      linear-gradient(180deg, rgba(14,4,30,0) 22%, rgba(14,4,30,.96) 34%, rgba(14,4,30,.96) 74%, rgba(14,4,30,0) 88%),
      radial-gradient(80% 44% at 50% 52%, rgba(14,4,30,.98) 0%, rgba(14,4,30,.92) 56%, rgba(14,4,30,.3) 100%);
  }
}

/* ==========================================================
   v24 — de leesband ligt op de wand zelf, niet op de sectie
   (#faces::before/::after zijn nu de overgangen naar inkt)
   ========================================================== */
.wall::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,4,30,0) 26%, rgba(14,4,30,.93) 40%, rgba(14,4,30,.93) 70%, rgba(14,4,30,0) 84%),
    radial-gradient(56% 48% at 50% 52%, rgba(14,4,30,.97) 0%, rgba(14,4,30,.88) 54%, rgba(14,4,30,0) 82%);
}
@media (max-width:899px){
  .wall::after{
    background:
      linear-gradient(180deg, rgba(14,4,30,0) 18%, rgba(14,4,30,.96) 32%, rgba(14,4,30,.96) 74%, rgba(14,4,30,0) 88%),
      radial-gradient(84% 42% at 50% 52%, rgba(14,4,30,.98) 0%, rgba(14,4,30,.9) 58%, rgba(14,4,30,.25) 100%);
  }
}

/* ==========================================================
   v25 — de wand op de telefoon: boven en onder, tekst ertussen
   ========================================================== */
@media (max-width:899px){
  .wall{ inset:-3% -8% }
  .wall .ph{ border-radius:2px }
  .wall .ph-1{ left:-7%;  top:1%;    right:auto; bottom:auto; width:52vw; height:24vh; transform:rotate(-3deg) }
  .wall .ph-2{ right:-9%; top:6%;    left:auto;  bottom:auto; width:50vw; height:20vh; transform:rotate(3deg) }
  .wall .ph-3{ left:-9%;  bottom:2%; right:auto; top:auto;    width:48vw; height:24vh; transform:rotate(2deg) }
  .wall .ph-4{ right:-7%; bottom:8%; left:auto;  top:auto;    width:52vw; height:19vh; transform:rotate(-2deg) }
  .wall .ph-5, .wall .ph-6, .wall .ph-7, .wall .ph-8{ display:none }

  .wall::after{
    background:
      linear-gradient(180deg, rgba(14,4,30,0) 14%, rgba(14,4,30,.97) 30%, rgba(14,4,30,.97) 72%, rgba(14,4,30,0) 88%),
      radial-gradient(90% 40% at 50% 50%, rgba(14,4,30,.98) 0%, rgba(14,4,30,.92) 60%, rgba(14,4,30,.3) 100%);
  }
  .faces-in{ gap:14px }
  .faces-title{ font-size:clamp(34px,10.5vw,54px) }
}

/* de feitenregel liep op de telefoon tegen de schermrand aan */
@media (max-width:899px){
  .hero-facts{ padding-inline:7vw }
}

/* ==========================================================
   v26 — het halftoon vervaagt echt, en concurreert niet met de kop
   ========================================================== */
.about-shot{
  right:-5vw; top:auto; bottom:-6vh; width:min(30vw,380px); opacity:.5;
  mask-image:radial-gradient(58% 54% at 62% 46%, #000 0%, rgba(0,0,0,.9) 34%, transparent 74%);
  -webkit-mask-image:radial-gradient(58% 54% at 62% 46%, #000 0%, rgba(0,0,0,.9) 34%, transparent 74%);
}
.lu-shot{
  mask-image:radial-gradient(62% 58% at 44% 46%, #000 0%, rgba(0,0,0,.9) 32%, transparent 76%);
  -webkit-mask-image:radial-gradient(62% 58% at 44% 46%, #000 0%, rgba(0,0,0,.9) 32%, transparent 76%);
}
@media (max-width:899px){
  .about-shot{ right:-18vw; bottom:-4vh; width:58vw; opacity:.34 }
}

/* ==========================================================
   v27 — terug naar de oude opbouw, foto's alleen nog pagina-breed
   De verstrooide fotowand en de losse halftoon-vlekken zijn eruit:
   die concurreerden met de typografie in plaats van hem te dragen.
   ========================================================== */

/* ---------- alles wat v22-v26 aan losse beelden toevoegde, terug ---------- */
.wall, .about-shot, .lu-shot, .hero-credit{ display:none !important }

/* ---------- één behandeling: de foto ligt over de volle pagina ---------- */
.shot-bed{
  position:absolute; inset:0; z-index:0; margin:0;
  overflow:hidden; pointer-events:none;
}
.shot-bed img{ width:100%; height:100%; object-fit:cover; display:block }
.shot-bed::after{ content:''; position:absolute; inset:0 }

/* ---------- HERO: oude tweekoloms opbouw terug ---------- */
@media (min-width:900px){
  .hero{
    grid-template-rows:1fr;
    align-content:center;
    justify-items:stretch;
    padding-top:clamp(84px,11vh,130px);
    padding-bottom:clamp(40px,7vh,90px);
  }
  .hero-in{
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:clamp(32px,5vw,90px);
    justify-items:stretch;
  }
  .hero-type{ justify-items:start; text-align:left; align-content:center; gap:clamp(12px,2.2vh,26px); max-width:none }
  .hero-row2{
    display:grid; grid-template-columns:auto auto 1fr;
    align-items:end; gap:clamp(14px,2vw,30px); width:100%;
  }
  .hero-sub{ align-self:end; padding-bottom:.4em; max-width:30ch; text-align:left; margin-inline:0 }
  .hero-facts{ justify-content:flex-start }
  .hero-ctas{ justify-content:flex-start; gap:var(--s2) }
  .hero-poster{ width:min(100%,min(36vh,400px)); justify-self:center; position:relative; z-index:1 }
}

/* de sluier is nu vlak: de foto loopt echt van rand tot rand,
   geen donkere kokers links en rechts meer */
.hero-shot::after{
  background:
    linear-gradient(90deg, rgba(14,4,30,.84) 0%, rgba(14,4,30,.62) 46%, rgba(14,4,30,.42) 72%, rgba(14,4,30,.58) 100%),
    linear-gradient(180deg, rgba(14,4,30,.82) 0%, rgba(14,4,30,.32) 26%, rgba(14,4,30,.38) 64%, rgba(14,4,30,.9) 100%);
}
.hero-shot img{ filter:grayscale(.18) contrast(1.06) brightness(.86) saturate(.92) }

/* ---------- THE ROOM: één foto, tekst erop ---------- */
.faces::before, .faces::after{ content:none }
#faces::before{
  background:linear-gradient(to bottom, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
  height:24vh;
}
#faces::after{
  background:linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 100%);
  height:24vh;
}
.faces .shot-bed img{
  object-position:50% 38%;
  filter:grayscale(.2) contrast(1.06) brightness(.8) saturate(.85);
}
.faces .shot-bed::after{
  background:
    linear-gradient(180deg, rgba(14,4,30,.6) 0%, rgba(14,4,30,.78) 34%, rgba(14,4,30,.86) 52%, rgba(14,4,30,.78) 70%, rgba(14,4,30,.6) 100%),
    linear-gradient(90deg, rgba(14,4,30,.5) 0%, rgba(14,4,30,.2) 50%, rgba(14,4,30,.5) 100%);
}
.faces-in{ text-shadow:0 2px 30px rgba(14,4,30,.95) }

/* ---------- LINE-UP: de kamer als rood duotoon onder de namen ---------- */
.lu-bed img{
  filter:grayscale(1) contrast(1.2) brightness(1.06);
  mix-blend-mode:multiply; opacity:.42;
  object-position:50% 40%;
}
.lu-bed::after{ background:linear-gradient(180deg, rgba(177,0,0,.28) 0%, rgba(177,0,0,0) 40%, rgba(177,0,0,.35) 100%) }

/* de mascotte hing half buiten beeld over de kabel heen;
   hij staat nu rechts, waar de band toch leeg was */
.lineup-band .bleed-mascot{
  left:auto; right:-2vw; top:50%; transform:translateY(-50%);
  width:min(34vw,420px); opacity:.16;
}
.about .mascot-xl{ left:auto; right:-3vw }

/* ---------- ABOUT: diepe achtergrond ---------- */
.ab-bed img{
  object-position:50% 30%;
  filter:grayscale(.55) contrast(1.08) brightness(.5) saturate(.6);
}
.ab-bed::after{
  background:linear-gradient(180deg, rgba(14,4,30,.9) 0%, rgba(14,4,30,.84) 40%, rgba(14,4,30,.94) 100%);
}

/* ---------- mobiel ---------- */
@media (max-width:899px){
  .faces{ min-height:100svh; display:grid; align-content:center }
  .faces .shot-bed::after{
    background:linear-gradient(180deg, rgba(14,4,30,.72) 0%, rgba(14,4,30,.9) 40%, rgba(14,4,30,.9) 66%, rgba(14,4,30,.72) 100%);
  }
  .lineup-band .bleed-mascot{ right:-14vw; width:62vw; opacity:.13 }
  .about .mascot-xl{ right:-16vw }
}

/* ==========================================================
   v28 — de foto's horen niet in de editorial-container
   `.section > *` en `.hero > *` legden er een max-width van
   1440px op, waardoor het beeld op brede schermen in een koker
   stond met donkere randen links en rechts.
   ========================================================== */
.hero > .hero-shot,
.section > .shot-bed,
.footer > .footer-shot{
  position:absolute;
  inset:0;
  width:auto;
  max-width:none;
  margin:0;
  z-index:0;
}

/* ==========================================================
   v29 — uitsnede, contrast en de mascotte die niets meer toevoegt
   ========================================================== */

/* THE ROOM: de gezichten zaten onder de vouw van de uitsnede */
.faces .shot-bed img{
  object-position:50% 66%;
  filter:grayscale(.18) contrast(1.08) brightness(.88) saturate(.9);
}
.faces .shot-bed::after{
  background:
    linear-gradient(180deg, rgba(14,4,30,.55) 0%, rgba(14,4,30,.62) 30%, rgba(14,4,30,.8) 50%, rgba(14,4,30,.66) 72%, rgba(14,4,30,.55) 100%),
    linear-gradient(90deg, rgba(14,4,30,.42) 0%, rgba(14,4,30,.12) 50%, rgba(14,4,30,.42) 100%);
}

/* LINE-UP: dieper rood zodat de namen weer het eerst binnenkomen.
   De mascotte hoeft hier niet meer: de foto draagt de band. */
.lu-bed img{ opacity:.3; filter:grayscale(1) contrast(1.25) brightness(1) }
.lu-bed::after{
  background:linear-gradient(180deg, rgba(120,0,0,.42) 0%, rgba(120,0,0,.1) 38%, rgba(120,0,0,.5) 100%);
}
.lineup-band .bleed-mascot{ display:none }

/* ABOUT: de kamer blijft ver op de achtergrond */
.ab-bed img{ object-position:50% 58%; filter:grayscale(.6) contrast(1.1) brightness(.46) saturate(.55) }

/* mobiel: het affiche is terug, dus de hero moet weer binnen één scherm passen */
@media (max-width:899px){
  .hero-poster{ max-width:min(52vw,240px); margin-inline:auto }
  .hero-poster img{ max-height:34svh; width:auto; margin-inline:auto }
  .faces .shot-bed img{ object-position:50% 62% }
}

/* op de telefoon is de foto achter het type al het beeld;
   het affiche erbij duwde de hero over één scherm heen (1055px op 844).
   Het affiche staat verderop bij de edities gewoon groot in beeld. */
@media (max-width:899px){
  .hero-poster{ display:none }
}

/* ==========================================================
   v30 — de stille kamer, en de mascotte terug op de line-up
   ========================================================== */

/* ---------- de mascotte hangt weer over de rode band ---------- */
.lineup-band > .bleed-mascot{
  display:block;
  position:absolute;
  left:auto;
  right:clamp(24px,7vw,140px);
  top:0; bottom:auto;
  width:clamp(120px,15vw,250px);
  transform:translateY(-46%);
  opacity:1;
  z-index:3;
}
@media (max-width:899px){
  .lineup-band > .bleed-mascot{ right:16px; width:96px; transform:translateY(-40%) }
}

/* de grote mascotte in de about hoort onderaan rechts, niet over de kop heen */
.about > .mascot-xl{
  left:auto;
  right:clamp(8px,6vw,90px);
  top:auto; bottom:0;
  transform:translateY(52%) rotate(-7deg);
}

/* ---------- de stille kamer ---------- */
body.secret-open{ overflow:hidden }
.secret{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:clamp(24px,6vw,80px);
  background:var(--ink);
  opacity:0;
  transition:opacity .42s var(--quad);
}
body.secret-live .secret{ opacity:1 }
.secret[hidden]{ display:none }

/* het laatste restje gloed van een toestel dat net uit is */
.secret::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 46%, rgba(177,0,0,.22) 0%, rgba(177,0,0,0) 70%);
}
.secret::after{
  content:''; position:absolute; inset:-40%; pointer-events:none;
  opacity:.1; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:heroGrain 1.1s steps(3) infinite;
}

.secret-in{
  position:relative; z-index:1;
  display:grid; gap:clamp(14px,2.4vh,26px);
  justify-items:center; text-align:center;
  max-width:min(640px,88vw);
  transform:translateY(14px);
  transition:transform .5s var(--quad) .06s;
}
body.secret-live .secret-in{ transform:translateY(0) }

.secret-eyebrow{ color:var(--volt); letter-spacing:.16em }
.secret-title{
  margin:0;
  font-size:clamp(38px,8.4vh,86px); line-height:.94; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--paper);
}
.secret-lead{
  margin:0; max-width:44ch;
  font-size:clamp(15px,2.1vh,20px); line-height:1.5;
  color:color-mix(in srgb, var(--paper) 82%, transparent);
}
.secret-cta{ margin-top:clamp(4px,1.4vh,14px) }
.secret-back{
  margin-top:clamp(6px,1.6vh,18px);
  background:none; border:0; cursor:pointer; padding:6px 2px;
  color:color-mix(in srgb, var(--paper) 55%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  transition:color .3s var(--quad), border-color .3s var(--quad);
}
.secret-back:hover{ color:var(--paper); border-bottom-color:var(--paper) }
.secret-back:focus-visible{ outline:3px solid var(--volt); outline-offset:4px }

@media (prefers-reduced-motion:reduce){
  .secret, .secret-in{ transition:none }
  .secret::after{ animation:none }
}

/* het merk staat ook in het donker op zijn plek */
.secret-lockup{ width:clamp(56px,7vh,84px); margin-bottom:clamp(2px,1vh,10px) }
.secret-lockup .lockup-svg{ width:100%; height:auto; display:block }

/* ==========================================================
   v31 — de mascottes mogen weer over de sectierand heen
   Twee oorzaken, allebei door mij geïntroduceerd in v22:
   1. `.about` en `.lineup-band` kregen overflow:hidden voor de
      foto's. De fotobedden knippen zichzelf al af, dus dat is
      niet nodig, en het sneed de mascottes doormidden.
   2. De grote mascotte in de about stond op position:relative,
      waardoor `right` als negatieve `left` uitpakte en hij aan
      de verkeerde kant van de sectie belandde.
   ========================================================== */
.about,
.lineup-band{ overflow:visible }

.section.about > svg.mascot-xl{
  position:absolute;
  left:auto;
  right:clamp(8px,6vw,90px);
  top:auto;
  bottom:0;
  width:clamp(110px,14vw,210px);
  z-index:6;
}

.lineup-band > .bleed-mascot{
  top:0;
  transform:translateY(-42%) rotate(-6deg);
  z-index:4;
}

@media (max-width:899px){
  .section.about > svg.mascot-xl{ right:12px; width:96px }
  .lineup-band > .bleed-mascot{ right:12px; width:92px; transform:translateY(-36%) rotate(-6deg) }
}

/* boven de rode band ligt de vaste balk, dus daar was hij nog steeds
   half onzichtbaar. Hij bloedt nu naar beneden, de about-sectie in,
   waar niets hem afdekt en de band toch leeg was. */
.lineup-band > .bleed-mascot{
  top:auto;
  bottom:0;
  transform:translateY(34%) rotate(-6deg);
  width:clamp(150px,18vw,300px);
  right:clamp(24px,8vw,160px);
}
@media (max-width:899px){
  .lineup-band > .bleed-mascot{
    right:12px; width:108px; transform:translateY(30%) rotate(-6deg);
  }
}

/* iets minder ver over de rand: in de line-up zie je hem bijna helemaal,
   en boven de about steekt er nog maar een punt uit */
.lineup-band > .bleed-mascot{ transform:translateY(24%) rotate(-6deg) }
@media (max-width:899px){
  .lineup-band > .bleed-mascot{ transform:translateY(22%) rotate(-6deg) }
}

/* ==========================================================
   v32 — de mascotte op de line-up is weer een hele vorm
   Hij stond in merkrood op een rode band, met vier witte
   slagschaduwen van 6px als nep-contour. Daardoor zag je alleen
   een holle, hoekige omtrek: het las als een kapot bestand.
   Nu is het gewoon de uitgesneden mascotte in papierwit,
   dezelfde behandeling als in de ruit van het lockup.
   ========================================================== */
.lineup-band > .bleed-mascot{
  color:var(--paper);
  filter:drop-shadow(0 10px 26px rgba(80,0,0,.42));
}

/* de vorm in de defs heeft een vaste rode fill, dus `color` bijt er niet
   op. Met brightness+invert wordt hij hoe dan ook papierwit, precies de
   uitsnede die het merk overal gebruikt. */
.lineup-band > .bleed-mascot{
  filter:brightness(0) invert(1) drop-shadow(0 10px 24px rgba(70,0,0,.45));
}

/* naar beneden bloeden had geen zin: de about-sectie komt later in de
   DOM en tekent er overheen, dus dat deel zag je toch niet. Hij staat
   nu helemaal binnen de rode band, rechtsonder. */
.lineup-band > .bleed-mascot{
  bottom:clamp(16px,4vh,56px);
  transform:rotate(-6deg);
}
@media (max-width:899px){
  .lineup-band > .bleed-mascot{ bottom:16px; transform:rotate(-6deg) }
}