/* From Xero — grunge-stencilaffiche: zwart, zuurgeel, gebroken wit. Hybrid Theory meets From Zero. */
:root {
  --zwart: #0b0b0b;
  --inkt: #151515;
  --geel: #f5d600;
  --geel-donker: #c9ad00;
  --papier: #ece6d6;
  --papier-donker: #d8cfb8;
  --grijs: #8c8c86;
  --rood: #e3262b;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", Impact, sans-serif;
  --kop: "Big Shoulders Display", Impact, sans-serif;
  --marker: "Permanent Marker", cursive;
  --mono: "Space Mono", ui-monospace, monospace;
  --tekst: "Archivo", system-ui, sans-serif;
  --breed: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--zwart); color: var(--papier); font: 400 17px/1.6 var(--tekst); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--geel); color: var(--zwart); }

/* taal */
html[data-taal="nl"] .fr, html[data-taal="fr"] .nl { display: none !important; }

/* korrel over alles */
.korrel { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: korrel 1s steps(4) infinite; }
@keyframes korrel { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

.wrap { width: min(var(--breed), 100% - 32px); margin-inline: auto; }

/* ---------- intro (logo-opener, à la linkinpark.com) ---------- */
.intro-scherm { display: none; }
html.intro { overflow: hidden; }
html.intro .intro-scherm { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: #1d1e20; cursor: pointer; }
.intro-scherm.weg { animation: intro-weg .55s cubic-bezier(.7,0,.3,1) forwards; }
.intro-beeld { grid-area: 1 / 1; opacity: 0; }
.intro-logo img { width: clamp(84px, 11vw, 120px); height: auto; }
.intro-woord { display: flex; flex-direction: column; align-items: center; font: 900 clamp(34px, 5vw, 54px)/.86 var(--stencil); letter-spacing: .04em; color: var(--papier); }
.intro-woord span + span { color: var(--geel); }
html.intro .intro-logo { animation: intro-logo 2.2s steps(1, end) forwards; }
html.intro .intro-logo img { animation: intro-glitch 2.2s linear forwards; }
html.intro .intro-woord { animation: intro-woord 2.2s steps(1, end) forwards; }
.intro-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); opacity: .5; }
/* logo: flikkert aan, staat, harde wissel weg, komt terug */
@keyframes intro-logo {
  0% { opacity: 0; } 6% { opacity: .9; } 8% { opacity: 0; } 11% { opacity: 1; } 13% { opacity: .3; } 15% { opacity: 1; }
  44% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } }
/* woordmerk: enkel tussen 44% en 70% */
@keyframes intro-woord { 0%, 43.9% { opacity: 0; } 44% { opacity: 1; } 56% { opacity: .2; } 57% { opacity: 1; } 69.9% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes intro-glitch {
  0%, 30% { transform: none; filter: none; }
  31% { transform: translate(-6px, 1px) skewX(-8deg); filter: drop-shadow(5px 0 0 var(--rood)) drop-shadow(-5px 0 0 #2ee6ff); }
  33% { transform: translate(5px, -2px); filter: drop-shadow(-4px 0 0 var(--geel)); }
  35%, 72% { transform: none; filter: none; }
  73% { transform: scale(1.08) translate(4px, 0); filter: drop-shadow(-6px 0 0 var(--rood)) drop-shadow(6px 0 0 #2ee6ff); }
  75% { transform: scale(1); filter: none; }
  88% { transform: scale(1); }
  100% { transform: scale(1.06); } }
@keyframes intro-weg { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(50% 0 50% 0); } }

/* ---------- kop ---------- */
.kop { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 40px); transition: background .3s, padding .3s; }
.kop.vast { background: rgba(11,11,11,.96); padding-block: 8px; border-bottom: 1px solid #262626; }
.kop-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 22px/1 var(--stencil); letter-spacing: .08em; }
.kop-logo img { width: 40px; height: 40px; }
.kop-nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.kop-nav a { text-decoration: none; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; position: relative; }
.kop-nav a:not(.kop-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--geel); transition: right .25s; }
.kop-nav a:hover::after { right: 0; }
.kop-cta { background: var(--geel); color: var(--zwart); padding: 10px 16px; clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); }
.kop-cta:hover { background: var(--papier); }
.taalkeuze { display: flex; border: 1px solid #444; }
.taalkeuze button { background: none; border: 0; color: var(--grijs); font: 700 12px/1 var(--mono); padding: 8px 9px; cursor: pointer; }
.taalkeuze button[aria-pressed="true"] { background: var(--papier); color: var(--zwart); }
.kop-menu { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 8px; cursor: pointer; }
.kop-menu i { display: block; height: 2px; background: var(--papier); margin: 6px 0; transition: transform .25s, opacity .25s; }

/* ---------- held ---------- */
.held { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.held-foto { position: absolute; inset: 0; z-index: -2; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.35) brightness(.3) blur(2px); transform: scale(1.06); animation: zoom 18s ease-out forwards; }
@keyframes zoom { to { transform: scale(1); } }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,0) 30%, rgba(11,11,11,.2) 60%, var(--zwart) 100%),
  radial-gradient(circle at 75% 35%, rgba(245,214,0,.22), transparent 55%); mix-blend-mode: normal; }
.held-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.held-inhoud { width: min(var(--breed), 100% - 32px); margin: 0 auto; padding: 140px 0 72px; position: relative; }
.held-titel, .held-lead { text-shadow: 0 4px 30px rgba(0,0,0,.6); }
@media (min-width: 981px) { .held-lead { max-width: 440px; } }
.held-stempel { font: 700 12px/1 var(--mono); letter-spacing: .3em; color: var(--geel); margin: 0 0 18px; }
.held-stempel b { color: var(--papier); font-weight: 400; }
.held-titel { margin: 0; font: 900 clamp(84px, 19vw, 260px)/.8 var(--stencil); letter-spacing: -.01em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 0 .18em; }
.held-titel .xero { color: var(--geel); }
.nul { position: relative; display: inline-block; }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-tekst); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: var(--rood); mix-blend-mode: screen; clip-path: inset(0 0 72% 0); transform: translate(-4px, 0); animation: glitch-a 3.8s infinite steps(1); opacity: .8; }
.glitch::after { color: #2ee6ff; mix-blend-mode: screen; clip-path: inset(58% 0 0 0); transform: translate(4px, 0); animation: glitch-b 3.8s infinite steps(1); opacity: .7; }
.xero.glitch::before, .xero.glitch::after { color: var(--papier); }
@keyframes glitch-a { 0%,86%,100% { transform: translate(0); clip-path: inset(0 0 100% 0); } 87% { transform: translate(-6px,2px); clip-path: inset(8% 0 62% 0); } 90% { transform: translate(5px,-2px); clip-path: inset(40% 0 30% 0); } 93% { transform: translate(-3px,0); clip-path: inset(70% 0 6% 0); } }
@keyframes glitch-b { 0%,88%,100% { transform: translate(0); clip-path: inset(100% 0 0 0); } 89% { transform: translate(6px,-1px); clip-path: inset(55% 0 20% 0); } 92% { transform: translate(-5px,2px); clip-path: inset(15% 0 70% 0); } }
.held-tag { margin: 14px 0 0; }
.markeer { font: 400 clamp(26px, 4vw, 44px)/1 var(--marker); color: var(--zwart); background: var(--geel); padding: 6px 18px 4px; display: inline-block; transform: rotate(-2.5deg); box-shadow: 6px 6px 0 var(--papier); }
.held-lead { max-width: 580px; font-size: clamp(17px, 1.6vw, 20px); margin: 28px 0 0; color: #d9d4c6; }
.held-knoppen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.held-band { position: absolute; right: 0; top: 76px; width: min(66vw, 1100px); z-index: -1; }
.held-band picture, .held-band picture img { display: block; width: 100%; height: auto; position: relative; }
.held-band img { filter: contrast(1.12) brightness(1.02); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%); mask-image: linear-gradient(180deg, #000 72%, transparent 99%); }
.held-vlak { position: absolute; left: 4%; right: 2%; top: 12%; bottom: 8%; background: var(--geel);
  clip-path: polygon(2% 6%, 18% 0, 41% 4%, 63% 0, 86% 3%, 100% 0, 98% 38%, 100% 71%, 97% 100%, 70% 96%, 44% 100%, 21% 97%, 0 100%, 3% 64%, 0 33%);
  box-shadow: inset 0 0 120px rgba(80,60,0,.55); }
.held-vlak::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 0 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.held-vlak img { position: absolute; right: 4%; top: 8%; width: 16%; opacity: .9; filter: invert(1); mix-blend-mode: multiply; animation: draai 40s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .2s, color .2s; }
.knop:active { transform: translate(2px, 2px); }
.knop-geel { background: var(--geel); color: var(--zwart); box-shadow: 5px 5px 0 var(--papier); }
.knop-geel:hover { background: var(--papier); box-shadow: 5px 5px 0 var(--geel); }
.knop-lijn { border-color: var(--papier); color: var(--papier); }
.knop-lijn:hover { background: var(--papier); color: var(--zwart); }

/* ---------- lichtkrant ---------- */
.lichtkrant { background: var(--geel); color: var(--zwart); overflow: hidden; border-block: 3px solid var(--zwart); transform: rotate(-1.2deg) scale(1.03); margin: -18px 0 0; position: relative; z-index: 2; }
.lichtkrant-band { display: flex; width: max-content; gap: 26px; padding: 14px 0; animation: krant 34s linear infinite; font: 900 30px/1 var(--stencil); letter-spacing: .04em; white-space: nowrap; }
.lichtkrant-band i { font-style: normal; font-family: var(--mono); font-size: 20px; align-self: center; }
@keyframes krant { to { transform: translateX(-50%); } }

/* ---------- algemene sectiekoppen ---------- */
section { position: relative; }
.sectie-nr { font: 700 13px/1 var(--mono); color: var(--geel); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; }
.sectie-nr > span { color: var(--grijs); }
.stencil { font: 900 clamp(48px, 7vw, 96px)/.88 var(--stencil); text-transform: uppercase; margin: 0 0 28px; letter-spacing: .005em; }
.stencil.groot { font-size: clamp(56px, 10vw, 150px); }
.geel { color: var(--geel); }

/* ---------- band (papier) ---------- */
.band { background: var(--papier); color: var(--inkt); padding: 120px 0 0; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse at 20% 10%, rgba(0,0,0,.08), transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(120,90,30,.12), transparent 55%); }
.band .sectie-nr > span { color: #6b665a; }
.band .sectie-nr { color: var(--inkt); }
.band-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; position: relative; }
.band-tekst p { max-width: 560px; }
.band-tekst strong { background: linear-gradient(transparent 55%, var(--geel) 55%); }
.feiten { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--inkt); }
.feiten li { padding: 14px 10px 0 0; font: 700 11px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.feiten b { display: block; font: 900 54px/1 var(--stencil); margin-bottom: 4px; }
.feiten sup { font-size: .4em; }
.band-collage { position: relative; min-height: 640px; }
.tape { position: absolute; margin: 0; background: #fff; padding: 10px 10px 34px; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.tape::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(245,214,0,.82); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tape img { width: 100%; height: 100%; object-fit: cover; }
.t1 { width: 58%; aspect-ratio: 3/4; right: 4%; top: 0; transform: rotate(3deg); z-index: 2; }
.t2 { width: 46%; aspect-ratio: 3/4; left: 0; top: 18%; transform: rotate(-5deg); }
.t3 { width: 42%; aspect-ratio: 1; right: 14%; bottom: 0; transform: rotate(-2deg); z-index: 3; }
.zw img { filter: grayscale(1) contrast(1.2); }
.graffiti { position: absolute; left: 2%; bottom: 6%; z-index: 4; font: 400 clamp(22px, 2.4vw, 32px)/1.05 var(--marker); color: var(--rood); transform: rotate(-8deg); text-transform: uppercase; margin: 0; }
.strook { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 100px; background: var(--zwart); }
.strook img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1) contrast(1.25); transition: filter .35s; }
.strook img:hover { filter: none; }

/* ---------- twee tijdperken ---------- */
.tijdperken { padding: 130px 0; background:
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/64px 64px,
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/64px 64px, var(--zwart); }
.sectie-nr.licht > span { color: var(--grijs); }
.intro { max-width: 620px; color: #c9c4b6; }
.platen { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 50px; }
.plaat { position: relative; padding: 34px 32px 30px; min-height: 420px; }
.plaat header { border-bottom: 2px solid currentColor; padding-bottom: 18px; margin-bottom: 18px; }
.plaat h3 { margin: 10px 0 0; font: 800 clamp(22px, 2.4vw, 32px)/1 var(--kop); letter-spacing: .02em; }
.plaat h3 i { font-style: normal; opacity: .5; }
.plaat-label { font: 700 12px/1 var(--mono); letter-spacing: .3em; padding: 6px 8px; border: 1px solid currentColor; }
.plaat-oud { background: var(--papier-donker); color: var(--inkt);
  background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.2px); background-size: 6px 6px; }
.plaat-oud::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 110px; height: 110px; border: 3px solid rgba(21,21,21,.35); border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(21,21,21,.08) 41%); }
.plaat-nieuw { background: var(--inkt); border: 2px solid var(--geel); color: var(--papier); }
.plaat-nieuw header { color: var(--geel); }
.tracklist { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tracklist li { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed currentColor; border-color: rgba(127,127,127,.4); font: 800 clamp(22px, 2.3vw, 30px)/1.1 var(--kop); text-transform: uppercase; }
.tracklist li span:first-child { font: 700 13px/1 var(--mono); opacity: .6; min-width: 24px; }
.tracklist li.meer { font: 400 15px/1.4 var(--mono); text-transform: none; }
.plaat-noot { font: 400 14px/1.5 var(--mono); color: var(--grijs); margin-top: 24px; }

/* ---------- live ---------- */
.live { padding: 130px 0; background: #111; }
.video { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #000; cursor: pointer; overflow: hidden; color: var(--papier); aspect-ratio: 16/9; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .4s, opacity .3s; filter: contrast(1.1); }
.video:hover img { transform: scale(1.04); opacity: 1; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); background: var(--geel); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .2s; }
.video:hover .video-play { transform: translate(-50%, -50%) scale(1.12); }
.video-titel { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--zwart); font: 700 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.video-groot { border: 3px solid var(--geel); }
.video-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.video-rij .video { aspect-ratio: 9/14; }
.video-rij .video-play { width: 46px; height: 46px; }
.video-noot { font: 400 12px/1.4 var(--mono); color: var(--grijs); margin: 12px 0 0; }
.fotomuur { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 8px; margin-top: 70px; }
.fotomuur img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.fotomuur .f-breed { grid-column: span 2; }
.fotomuur img:nth-child(3) { filter: grayscale(1) contrast(1.3); }
.citaat { margin: 70px auto 0; max-width: 760px; text-align: center; }
.citaat p { font: 400 clamp(30px, 4.4vw, 54px)/1.1 var(--marker); color: var(--geel); margin: 0; transform: rotate(-1.5deg); }
.citaat footer { font: 700 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--grijs); margin-top: 18px; }

/* ---------- concerten ---------- */
.concerten { padding: 130px 0; background: var(--geel); color: var(--zwart); }
.concerten .sectie-nr, .concerten .sectie-nr > span { color: var(--zwart); }
.concerten .stencil { font-size: clamp(64px, 12vw, 180px); margin-bottom: 40px; }
.shows { border-top: 4px solid var(--zwart); }
.show { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 2px solid var(--zwart); transition: background .2s, padding .2s; }
.show:hover { background: var(--zwart); color: var(--geel); padding-inline: 18px; }
.show-datum { font: 700 14px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.show-datum b { display: block; font: 900 52px/.9 var(--stencil); letter-spacing: 0; }
.show h3 { margin: 0; font: 900 clamp(24px, 3vw, 38px)/1 var(--kop); text-transform: uppercase; }
.show p { margin: 6px 0 0; font: 400 14px/1.4 var(--mono); }
.show .land { font: 700 11px/1 var(--mono); border: 1.5px solid currentColor; padding: 3px 5px; margin-left: 8px; vertical-align: middle; }
.show a { font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.geen-shows { padding: 30px 0; font-family: var(--mono); }
.gespeeld { margin-top: 70px; }
.gespeeld h3 { font: 700 14px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.gespeeld ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gespeeld li { background: var(--zwart); color: var(--papier); padding: 9px 14px 8px; font: 800 18px/1 var(--kop); text-transform: uppercase; letter-spacing: .03em; }
.gespeeld li:nth-child(3n) { transform: rotate(-1.5deg); }
.gespeeld li:nth-child(4n+1) { transform: rotate(1deg); }
.gespeeld small { font: 400 12px/1 var(--mono); color: var(--geel); margin-left: 6px; text-transform: none; }

/* ---------- boeken ---------- */
.boeken { padding: 130px 0; background: linear-gradient(rgba(11,11,11,.9), rgba(11,11,11,.95)), url("/assets/img/podium2.jpg") center/cover fixed; }
.boeken-raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.boeken-tekst p { color: #cfc9ba; max-width: 520px; }
.formulier { background: var(--papier); color: var(--inkt); padding: 34px clamp(20px, 3vw, 38px) 30px; position: relative; box-shadow: 12px 12px 0 var(--geel); }
.formulier::before { content: ""; position: absolute; top: -16px; left: 30px; width: 120px; height: 32px; background: rgba(245,214,0,.85); transform: rotate(-4deg); }
.formulier-kop { font: 900 34px/1 var(--stencil); text-transform: uppercase; margin: 0 0 20px; }
.formulier-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulier label { display: block; font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.formulier input, .formulier select, .formulier textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 2px solid var(--inkt); background: #fbf8f0; font: 400 16px/1.3 var(--tekst); color: var(--inkt); border-radius: 0; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 3px solid var(--geel); outline-offset: 0; }
.formulier [aria-invalid="true"] { border-color: var(--rood); background: #fff0ef; }
.formulier .knop { width: 100%; margin-top: 6px; box-shadow: 5px 5px 0 var(--inkt); }
.verborgen { position: absolute !important; left: -9999px; }
.formulier-melding { min-height: 1.4em; margin: 14px 0 0; font: 700 14px/1.4 var(--mono); }
.formulier-melding.fout { color: var(--rood); }
.formulier-melding.ok { color: #1c7a2d; }

/* ---------- voet ---------- */
.voet { padding: 70px 0 50px; border-top: 4px solid var(--geel); background: var(--zwart); }
.voet-raster { display: grid; grid-template-columns: auto 1fr; gap: 30px 50px; align-items: center; }
.voet-merk { display: flex; align-items: center; gap: 16px; font: 400 14px/1.4 var(--mono); }
.voet-merk strong { font: 900 26px/1 var(--stencil); letter-spacing: .06em; }
.voet-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: flex-end; }
.voet-social a { font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; border-bottom: 2px solid var(--geel); padding-bottom: 4px; }
.voet-social a:hover { color: var(--geel); }
.voet-klein { grid-column: 1 / -1; font: 400 12px/1.6 var(--mono); color: var(--grijs); margin: 10px 0 0; border-top: 1px solid #262626; padding-top: 20px; }

/* ---------- responsief ---------- */
@media (max-width: 980px) {
  .held { align-items: start; }
  .held-band { width: 112vw; right: -6vw; top: 64px; bottom: auto; }
  .held-band img { -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 94%); mask-image: linear-gradient(180deg, #000 52%, transparent 94%); }
  .held-inhoud { padding-top: calc(42vw + 64px); padding-bottom: 64px; }
  .held-vlak { bottom: 14%; }
  .kop-nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 28px; background: rgba(11,11,11,.98); visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
  .kop-nav a { font-size: 18px; }
  .kop.open .kop-nav { visibility: visible; opacity: 1; }
  .kop-menu { display: block; position: relative; z-index: 2; }
  .taalkeuze { margin-left: auto; position: relative; z-index: 2; }
  .kop.open .kop-menu i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .kop.open .kop-menu i:nth-child(2) { opacity: 0; }
  .kop.open .kop-menu i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .band-raster, .boeken-raster, .platen { grid-template-columns: 1fr; }
  .band-collage { min-height: 560px; max-width: 560px; }
  .video-rij { grid-template-columns: repeat(2, 1fr); }
  .fotomuur { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .boeken { background-attachment: scroll; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .kop-logo span { display: none; }
  .held-inhoud { padding-bottom: 54px; }

  .feiten { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .band-collage { min-height: 440px; }
  .strook { grid-template-columns: repeat(5, 1fr); }
  .formulier-rij { grid-template-columns: 1fr; gap: 0; }
  .show { grid-template-columns: 90px 1fr; gap: 14px; }
  .show a { grid-column: 2; justify-self: start; }
  .show-datum b { font-size: 40px; }
  .voet-raster { grid-template-columns: 1fr; }
  .voet-social { justify-content: flex-start; }
  .lichtkrant-band { font-size: 22px; }
  .tracklist li { font-size: 22px; }
  .plaat { min-height: 0; padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}