/* KWIN – huisstijl uit het design system (claude.ai/artifact/Q6X6FmKfaBASkxGjDAiH53). */
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dm-mono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  --creme: #f4ecdd; --oranje: #e2592a; --mosterd: #edb33c; --bordeaux: #6b1d2a;
  --beat: .484s; /* één tel op 124 BPM */
  --veer: cubic-bezier(.3, 1.4, .5, 1);
  /* Deck A (crème) is de basis; secties met data-deck="1" zijn deck B (bordeaux). */
  --bg: var(--creme); --inkt: var(--bordeaux); --vlak: #fbf5ea; --zacht: #8d5e5c; --lijn: rgba(107, 29, 42, .25);
  --e1: var(--oranje); --e2: var(--mosterd);
  /* De echo: twee lagen, vooral omlaag, iets naar rechts (0,4 : 1). */
  --e: 6px;
  --echo: calc(var(--e) * .4) var(--e) 0 var(--e1), calc(var(--e) * .8) calc(var(--e) * 2) 0 var(--e2);
  --echo-tekst: calc(.016em * var(--te)) calc(.04em * var(--te)) 0 var(--e1), calc(.032em * var(--te)) calc(.08em * var(--te)) 0 var(--e2);
}
[data-deck="1"] { --bg: var(--bordeaux); --inkt: var(--creme); --vlak: #5c1723; --zacht: #e3c3b3; --lijn: rgba(244, 236, 221, .25); }
[data-deck] { position: relative; background: var(--bg); color: var(--inkt); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); padding-bottom: clamp(64px, 10vw, 120px); }
/* Echo-streep op elke wissel van deck */
[data-deck].wissel::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; top: 0; height: 14px; background: linear-gradient(var(--e1) 0 50%, var(--e2) 50% 100%); }
@property --te { syntax: '<number>'; inherits: true; initial-value: 1; }

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--inkt); font: 400 17px/1.6 "DM Sans", system-ui, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--e1); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; padding: 10px 16px; background: var(--inkt); color: var(--bg); font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; border-radius: 999px; }
.skip:focus { top: 16px; }
.tag { font: 500 12px/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--zacht); }
h1, h2, h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0; text-shadow: var(--echo-tekst); }
h1 { font-size: clamp(52px, 10vw, 128px); line-height: .9; margin-top: 14px; }
h2 { font-size: clamp(38px, 6vw, 76px); line-height: .95; }
h3 { font-size: 24px; line-height: 1.1; text-shadow: none; }
.js .echo-in { --te: 0; transform: translateY(18px); opacity: 0; transition: --te calc(var(--beat) * 1.6) var(--veer) calc(var(--beat) * .5), transform calc(var(--beat) * 1.2) var(--veer), opacity calc(var(--beat) * 1.2); }
.js .echo-in.in { --te: 1; transform: none; opacity: 1; }
section { padding: clamp(64px, 10vw, 120px) 0 0; scroll-margin-top: 0; }
.kop { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.mt { margin-top: 12px; }
.hidden { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Logo: drie lagen (mosterd, oranje, inkt) van hetzelfde symbool */
.logo { overflow: visible; display: block; }
.logo .l2 { color: var(--e2); } .logo .l1 { color: var(--e1); } .logo .l0 { color: var(--inkt); }
.laag { transition: transform calc(var(--beat) * .9) var(--veer); }
.logo .l1 { transform: translate(4.14px, 10.35px); } .logo .l2 { transform: translate(8.28px, 20.7px); }

/* Laadscherm: zonder JS verdwijnt het vanzelf na vier tellen */
.loader { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); animation: weg .4s calc(var(--beat) * 4) forwards; }
.loader.weg { animation: weg .4s forwards; }
.loader .logo { width: min(64vw, 340px); }
@keyframes weg { to { opacity: 0; visibility: hidden; } }
.geen-loader .loader { display: none; }

/* Kopbalk */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
.top .logo { width: 86px; }
.top nav { display: flex; gap: clamp(12px, 3vw, 28px); font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; }
.top nav a { text-decoration: none; padding: 6px 0; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 420px) { .top nav { gap: 10px; font-size: 12px; } .top .logo { width: 70px; } }

/* Eerste scherm */
.hero { display: grid; gap: 44px; align-items: center; padding-top: clamp(24px, 6vw, 64px); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; } }
.lead { font-size: 20px; max-width: 28em; margin: 26px 0 28px; }
/* Acht genres als twee nette rijen van vier */
.setlist { display: grid; grid-template-columns: repeat(4, max-content); gap: 12px clamp(14px, 2.4vw, 26px); margin: 0 0 36px; padding: 0; list-style: none; font: 500 13px/1 "DM Mono", monospace; text-transform: uppercase; }
.setlist li { display: flex; align-items: center; gap: 8px; }
.setlist li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--e1); box-shadow: 1px 3px 0 var(--e2); }
.knoppen { display: flex; flex-wrap: wrap; gap: 16px 20px; }

/* Foto's: echo als schaduw */
.foto { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: #22160f center / cover no-repeat; box-shadow: var(--echo); transition: box-shadow calc(var(--beat) * .7) var(--veer), transform calc(var(--beat) * .7) var(--veer); }
.foto:hover { --e: 10px; transform: translate(-2px, -4px); }
.foto-booth { background-image: url(../media/booth.jpg); }
.foto-cafe { background-image: url(../media/cafe.jpg); }
.foto-terras { background-image: url(../media/terras.jpg); }
/* Flipbook: 24 frames (6×4) in één JPG; scrollen bladert erdoorheen. Wordt pas geladen als het in de buurt komt. */
.flip { position: absolute; inset: 0; background-size: 600% 400%; background-repeat: no-repeat; background-position: 0 0; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; background: var(--inkt); color: var(--bg); border: 0; border-radius: 999px; font: 500 14px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer;
  --e: 4px; box-shadow: var(--echo); transition: box-shadow calc(var(--beat) * .6) var(--veer), transform calc(var(--beat) * .6) var(--veer); }
.knop:hover { --e: 7px; transform: translate(-1px, -3px); }
.knop:active { --e: 0px; transform: translate(2px, 4px); }
.knop.rand { background: transparent; color: var(--inkt); outline: 1.5px solid var(--inkt); outline-offset: -1.5px; }

/* Mixen */
.mixen { display: grid; gap: 36px 28px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding-right: 12px; }
.mix { position: relative; background: var(--vlak); border: 1.5px solid var(--inkt); border-radius: 6px; padding: 16px; --e: 5px; box-shadow: var(--echo); transition: box-shadow calc(var(--beat) * .6) var(--veer), transform calc(var(--beat) * .6) var(--veer); }
.mix:hover, .mix:focus-within { --e: 8px; transform: translate(-1px, -3px); }
.mix .cover { margin-bottom: 14px; border-radius: 3px; overflow: hidden; aspect-ratio: 1; background: var(--e1); }
.mix .cover svg { display: block; width: 100%; height: auto; }
.mix .rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.play { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--e1); color: var(--creme); display: grid; place-items: center; font-size: 14px; text-decoration: none; box-shadow: 1px 3px 0 var(--e2); }
/* Hele kaart klikbaar via de afspeelknop */
.play::after { content: ""; position: absolute; inset: 0; }
.mix.binnenkort .play { background: transparent; color: var(--zacht); box-shadow: none; outline: 1.5px dashed var(--zacht); outline-offset: -1.5px; font: 500 10px/1 "DM Mono", monospace; text-transform: uppercase; width: auto; padding: 0 12px; border-radius: 999px; }
.mix.binnenkort .play::after { display: none; }
/* Bewegende covers op 124 BPM: alleen in beeld, sneller bij hover */
.cover .c-zon { animation: zon calc(var(--beat) * 16) ease-in-out infinite alternate; }
@keyframes zon { to { transform: translateY(150px); } }
.cover .c-plaat { transform-box: view-box; animation: draai calc(var(--beat) * 8) linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.cover .c-kick { transform-box: view-box; animation: kick calc(var(--beat) * 4) cubic-bezier(.2, .9, .3, 1) infinite; animation-delay: calc(var(--beat) * var(--i)); }
@keyframes kick { 0% { transform: scale(1.1); } 22%, 100% { transform: scale(1); } }
.cover * { animation-play-state: paused !important; }
.mix.loopt .cover * { animation-play-state: running !important; }
.mix:hover .c-zon { animation-duration: calc(var(--beat) * 8); }
.mix:hover .c-plaat { animation-duration: calc(var(--beat) * 3); }

/* Over */
.over { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .over { grid-template-columns: .8fr 1.2fr; } }
.over p { max-width: 34em; margin: 20px 0 0; }

/* Live */
.live { display: grid; gap: 34px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-right: 14px; }
.live figure { margin: 0; }
.live figcaption { margin-top: 22px; }

/* Agenda */
.agenda { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--inkt); }
.agenda li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1.5px solid var(--lijn); }
.agenda .dag { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 40px; line-height: .9; text-shadow: var(--echo-tekst); }
.agenda .dag small { display: block; margin-top: 4px; font: 500 12px/1.4 "DM Mono", monospace; text-transform: uppercase; text-shadow: none; color: var(--zacht); }
.agenda-leeg { margin: 22px 0 0; max-width: 34em; }
.agenda:empty { display: none; }
.agenda:not(:empty) + .agenda-leeg { display: none; }
@media (max-width: 560px) { .agenda li { grid-template-columns: 76px 1fr; } .agenda .dag { font-size: 32px; } }

/* Boeken */
.boeken { text-align: center; padding-bottom: 40px; }
.boeken h2 { font-size: clamp(44px, 9vw, 112px); margin-top: 14px; }
.boeken p { margin: 22px auto 34px; max-width: 30em; }
.boeken .knoppen { justify-content: center; }
footer { margin-top: 80px; padding: 26px 0; border-top: 1.5px solid var(--lijn); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Abstracte plaat */
.plaat { display: block; overflow: visible; }
.plaat .groef { fill: none; stroke: var(--inkt); stroke-width: .7; opacity: .28; }
.plaat .boog { fill: none; stroke-linecap: round; }
.hero .plaat { width: min(84vw, 470px); margin: 0 auto; filter: drop-shadow(3px 8px 0 color-mix(in srgb, var(--e1) 55%, transparent)); }
/* De plaat komt terug bij agenda en boeken, achter de inhoud, half buiten beeld */
[data-deck] > *:not(.deco) { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; pointer-events: none; opacity: .5; }
.deco.links { width: clamp(360px, 60vw, 620px); left: calc(-1 * clamp(180px, 30vw, 310px)); top: 8%; }
.deco.midden { width: clamp(420px, 80vw, 820px); left: 50%; top: 50%; margin: calc(-1 * clamp(210px, 40vw, 410px)) 0 0 calc(-1 * clamp(210px, 40vw, 410px)); opacity: .35; }

/* 404 */
.niets { min-height: 70vh; display: grid; align-content: center; gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover * { animation: none !important; }
  .laag, .foto, .knop, .mix, .echo-in { transition: none !important; }
  .js .echo-in { --te: 1; transform: none; opacity: 1; }
  .loader { display: none; }
}