@font-face { font-family: "Anybody"; src: url("/fonts/Anybody-Variable.woff") format("woff");
  font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff") format("woff");
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff") format("woff");
  font-weight: 100 900; font-display: swap; }

:root {
  
  --nacht: #15110F; 
  --video: #0D0A09; 
  --nav: #1B1613; 
  --vlak: #231C19; 
  --vlak-2: #2E2521; 
  --lijn: #2E2521; 
  --lijn-sterk: #3D322D; 
  --tekst: #F2ECE3; 
  --mid: #B9AEA3; 
  --laag: #948980; 
  --actie: #F2ECE3; 
  --op-actie: #15110F; 
  --w0: #4A6468; 
  --w1: #1F7078; 
  --w2: #5B4A8A; 
  --w3: #B83A7A; 
  --w4: #E5433F; 
  --w5: #FF5A2B; 
  
  --kop: "Anybody", "Arial Narrow", sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  
  --rand: clamp(1.25rem, 4vw, 3rem);
  --breed: 76rem;
  --lees: 36rem;
  --ruimte: clamp(3.5rem, 9vw, 7rem);
}

* { box-sizing: border-box; }
html { background: var(--nacht); color: var(--tekst); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--body); font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.55; }
main { flex: 1; width: min(100%, var(--breed) + 2 * var(--rand)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--rand) var(--ruimte); }

h1, h2, h3 { font-family: var(--kop); font-weight: 820; font-stretch: 62%; line-height: .95; margin: 0; }
h1 { font-size: clamp(3rem, 9vw, 4.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 6vw, 2.75rem); }
h3 { font-size: 1.5rem; font-stretch: 80%; font-weight: 720; }
p, li { color: var(--mid); margin: 0; }
p + p { margin-top: .75rem; }
a { color: var(--tekst); text-underline-offset: 3px; }
strong { color: var(--tekst); font-weight: 600; }

.stempel { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; color: var(--laag); }
.klein { font-size: .9rem; }


.pil { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 1.75rem; border-radius: 999px; background: var(--tekst); color: var(--nacht);
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.pil.stil { background: none; color: var(--tekst); border: 1px solid var(--lijn-sterk); }
.acties { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: flex-end; }


.warmte { display: flex; gap: 4px; }
.warmte i { flex: 1; height: 6px; border-radius: 3px; }
.warmte i:nth-child(1) { background: var(--w0); } .warmte i:nth-child(2) { background: var(--w1); }
.warmte i:nth-child(3) { background: var(--w2); } .warmte i:nth-child(4) { background: var(--w3); }
.warmte i:nth-child(5) { background: var(--w4); } .warmte i:nth-child(6) { background: var(--w5); }

footer { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid var(--lijn); }
footer a { color: var(--laag); text-decoration: none; font-size: .9rem; }
footer a:hover { color: var(--tekst); }



.balk .merk { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.balk .merk span { font-family: var(--kop); font-weight: 820; font-stretch: 62%; font-size: 1.9rem; line-height: 1; }


.gloed { color: var(--w5); text-shadow: 0 0 .35em color-mix(in srgb, var(--w5) 55%, transparent); }


.lus { position: relative; margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--vlak); }
.lus img, .lus video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .lus video { display: none; } }


.ritme { display: flex; gap: clamp(5px, .6vw, 8px); align-items: flex-end; height: clamp(34px, 4vw, 56px); }

.ritme i { width: clamp(6px, .6vw, 9px); border-radius: 3px; background: var(--tekst); height: 100%; transform-origin: bottom; transform: scaleY(.3); opacity: .3; }
.ritme i.tel { animation: tel 2.5s infinite; }
.ritme i:nth-child(2) { animation-delay: .3125s; } .ritme i:nth-child(3) { animation-delay: .625s; }
.ritme i:nth-child(5) { animation-delay: 1.25s; } .ritme i:nth-child(6) { animation-delay: 1.5625s; }
.ritme i:nth-child(7) { animation-delay: 1.875s; }
.ritme i.rust { transform: scaleY(.15); opacity: .2; }
@keyframes tel { 0% { transform: scaleY(1); opacity: 1; } 12% { transform: scaleY(.3); opacity: .3; } 100% { transform: scaleY(.3); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ritme i.tel { animation: none; transform: scaleY(.8); opacity: .8; } }




.blok { margin-top: var(--ruimte); }
.blok > h2 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4.5rem); }

a:focus-visible, summary:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; border-radius: 6px; }

.kaarten { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.kaart { background: var(--vlak); border-radius: 8px; padding: 1.25rem; }
.kaart h3 { margin: .5rem 0 .5rem; }

.slot { margin-top: var(--ruimte); padding: 2.5rem 0 0; border-top: 1px solid var(--lijn); }
.slot h2 { margin: .75rem 0 1rem; }
.slot p { max-width: var(--lees); }
.slot .acties { margin-top: 1.5rem; max-width: var(--lees); }



.les .stempel { display: block; }
.les h1 { margin: .5rem 0 .5rem; }
.les .datum { color: var(--tekst); }
.clips { display: grid; gap: clamp(1rem, 2.5vw, 2rem); margin: 2rem 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.clip { margin: 0; }
.clip video { display: block; width: 100%; max-height: 78vh; background: #000; border-radius: 8px; }
.clip figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.clip figcaption b { color: var(--tekst); font-weight: 600; }
.bewaar { background: var(--vlak); border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.bewaar .acties { justify-content: flex-end; }



.tekst h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); margin-bottom: 1.5rem; }
.tekst h2 { font-size: 1.6rem; font-stretch: 70%; margin: 2.5rem 0 .75rem; }
.tekst ul, .tekst ol { padding-left: 1.25rem; }
.tekst li + li { margin-top: .35rem; }
.concept { border: 1px solid var(--w4); border-radius: 8px; padding: .75rem 1rem; color: var(--tekst); margin-bottom: 2rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--lijn); color: var(--mid); }
th { color: var(--tekst); }
@media (max-width: 600px) {
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--lijn); padding: .5rem 0; }
  td { border: 0; padding: .15rem 0; }
  td::before { content: attr(data-label) ": "; color: var(--tekst); font-weight: 600; }
}


main.tekst { width: min(100%, var(--lees) + 8rem + 2 * var(--rand)); }
.les > .stempel, .les > h1, .les > p, .les > .bewaar { max-width: var(--lees); }
main.smal .balk, main.tekst .balk { margin-bottom: 2.5rem; }
.les > p { margin-top: .25rem; }
.les .bewaar { margin-top: 1rem; }

[hidden] { display: none !important; }
.speelt-niet { margin-top: .4rem; color: var(--mid); }




.wrap { width: min(100%, var(--breed) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
main.podium { width: 100%; padding: 0 0 var(--ruimte); }

.hero { position: relative; isolation: isolate; display: grid; background: var(--nacht); }
.hero .balk { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; }
.hero-beeld { position: relative; overflow: hidden; background: var(--video); }
.hero-beeld img, .hero-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; display: block; }
.hero-beeld::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-tekst { position: relative; z-index: 1; display: grid; gap: 1.25rem; }
.hero h1 { font-size: clamp(3.2rem, 8.5vw, 9rem); line-height: .88; letter-spacing: -.015em; max-width: 9ch; }
.hero .zin { max-width: 32rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); color: var(--tekst); }
.hero .acties { justify-content: flex-start; gap: 1.25rem; }
.pil { background: var(--actie); color: var(--op-actie); }
@media (prefers-reduced-motion: reduce) { .hero-beeld video { display: none; } }


@media (orientation: landscape) {
  
  .hero { min-height: max(100svh, 56.25vw); align-items: center; }
  .hero-beeld { position: absolute; inset: 0; z-index: -1; }
  .hero-beeld img, .hero-beeld video { object-fit: cover; object-position: 100% 100%; }
}

@media (orientation: landscape) and (max-aspect-ratio: 16/9) {
  .hero-beeld img, .hero-beeld video { object-fit: contain; }
  .hero-beeld::after { background:
    linear-gradient(90deg, var(--nacht) 0%, color-mix(in srgb, var(--nacht) 70%, transparent) 38%, transparent 60%),
    linear-gradient(0deg, var(--nacht) 0%, transparent 30%); }
  .hero-tekst { padding-top: 6rem; padding-bottom: 3rem; }
}


@media (orientation: portrait) {
  .hero-beeld { aspect-ratio: 1000 / 1260; max-height: 72svh; }
  .hero-beeld img, .hero-beeld video { object-position: 50% 100%; }
  .hero-beeld::after { background: linear-gradient(0deg, var(--nacht) 0%, transparent 22%); }
  .hero-tekst { padding-top: 1rem; padding-bottom: 2.5rem; }
}


.vloer { background: var(--video); padding-block: var(--ruimte); }
.vloer .rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.plek { display: grid; gap: 1rem; }
.plek .lus { border-radius: 8px; }
.plek .warmte { max-width: 8.5rem; margin-top: .9rem; }
.plek .warmte i:not(.aan) { background: var(--lijn-sterk); }
.plek .stempel { display: block; }
.plek h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin: .35rem 0 .6rem; }
.plek p { max-width: 30rem; }

@media (max-width: 40rem) {
  .plek { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .plek h2 { font-size: 1.5rem; }
}