/* =========================================================================
   DE PLATTE STENEN BRUG — style.css
   Design system: warm night, brass lamplight, brick gables, gracht green.
   Type: Fraunces (display) + Inter (UI). One dark world, one paper break.
   ========================================================================= */

/* ---- fonts (self-hosted, variable, latin subset) ---- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/fraunces-var.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/fraunces-italic-var.woff2") format("woff2");
}

/* ---- tokens ---- */
:root{
  /* palette */
  --nacht:#17120E; --nacht-2:#211A13; --nacht-3:#2E251A;
  --steen:#ECE3D4; --steen-dim:#B4A78F;
  --brass:#E0A24E; --brass-2:#F2C67F;
  --baksteen:#C6482E; --baksteen-2:#E06A4E;
  --gracht:#3E5749; --gracht-2:#5C7A66;
  --paper:#EDE4D5; --ink:#1C160F; --ink-dim:#6A5E4C;

  /* type */
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* fluid scale (min 360px → max 1440px) */
  --step--1:clamp(.83rem,.79rem + .18vw,.94rem);
  --step-0 :clamp(1rem,.95rem + .25vw,1.15rem);
  --step-1 :clamp(1.2rem,1.1rem + .5vw,1.55rem);
  --step-2 :clamp(1.55rem,1.35rem + .95vw,2.35rem);
  --step-3 :clamp(2rem,1.6rem + 1.9vw,3.6rem);
  --step-4 :clamp(2.6rem,1.9rem + 3.4vw,5.6rem);
  --step-5 :clamp(3.2rem,2rem + 5.6vw,8.5rem);

  /* space */
  --gap:clamp(1rem,.7rem + 1.4vw,1.6rem);
  --pad-x:clamp(1.15rem,.6rem + 3vw,4.5rem);
  --section-y:clamp(4.5rem,3rem + 7vw,9rem);
  --maxw:82rem;

  --radius:2px;
  --line:color-mix(in srgb,var(--steen) 14%,transparent);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--f-sans);font-size:var(--step-0);line-height:1.65;
  color:var(--steen);background:var(--nacht);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--nacht)}

/* subtle warm grain over the whole night — cheap, GPU-free */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- layout helpers ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section-y);position:relative;z-index:2}
.eyebrow{
  font-size:var(--step--1);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:1.6em;height:1px;background:var(--brass);opacity:.7}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.02;
  font-optical-sizing:auto;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.8rem,.5rem + 1vw,1.3rem) var(--pad-x);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--nacht) 50%,transparent),transparent);
}
.site-header.is-stuck{
  background:color-mix(in srgb,var(--nacht) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line);
}
.brand-mark{font-family:var(--f-display);font-weight:600;font-size:var(--step-1);
  letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand-mark b{color:var(--brass);font-weight:600}
.brand-mark small{display:block;font-family:var(--f-sans);font-weight:600;
  font-size:.5em;letter-spacing:.24em;text-transform:uppercase;color:var(--steen-dim);margin-top:.35em}

.nav{display:flex;align-items:center;gap:clamp(1rem,.4rem + 1.8vw,2.4rem)}
.nav-links{display:flex;gap:clamp(1rem,.4rem + 1.6vw,2.2rem);font-size:var(--step--1);
  font-weight:500;letter-spacing:.01em}
.nav-links a{position:relative;padding-block:.3em;color:var(--steen);opacity:.85;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* language toggle */
.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;
  padding:2px;font-size:.72rem;font-weight:600;letter-spacing:.08em}
.lang button{padding:.35em .7em;border-radius:100px;color:var(--steen-dim);transition:color .25s,background .25s}
.lang button[aria-pressed="true"]{background:var(--brass);color:var(--nacht)}

/* mobile nav */
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:.5rem;z-index:60}
.nav-toggle span{width:24px;height:2px;background:var(--steen);transition:transform .35s var(--ease),opacity .25s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:0;background:var(--nacht);flex-direction:column;justify-content:center;
    gap:2rem;transform:translateX(100%);transition:transform .5s var(--ease);padding:2rem}
  body.nav-open .nav{transform:none}
  .nav-links{flex-direction:column;text-align:center;gap:1.4rem;font-size:var(--step-2);font-family:var(--f-display)}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(3rem,2rem + 4vw,6rem);overflow:hidden;z-index:2}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,color-mix(in srgb,var(--nacht) 62%,transparent),transparent 18%),
    linear-gradient(to top,var(--nacht) 2%,color-mix(in srgb,var(--nacht) 24%,transparent) 44%,transparent 74%),
    linear-gradient(to right,color-mix(in srgb,var(--nacht) 74%,transparent),transparent 58%),
    radial-gradient(120% 80% at 50% 120%,color-mix(in srgb,var(--baksteen) 22%,transparent),transparent 60%);
}
.hero-inner{position:relative;margin-inline:0;max-width:min(48rem,92%)}
.hero .eyebrow{margin-bottom:clamp(1rem,.6rem + 1vw,1.6rem)}
.hero-wordmark{font-size:var(--step-5);line-height:.88;letter-spacing:-.03em;font-weight:600}
.hero-wordmark .sm{display:block;font-size:.24em;letter-spacing:.02em;font-weight:600;
  color:var(--steen);opacity:.9;margin-bottom:.1em}
.hero-wordmark .lg{display:block;color:var(--steen)}
.hero-wordmark .lg em{font-style:italic;color:var(--brass)}
.hero-tagline{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:var(--step-2);line-height:1.15;color:var(--steen);margin-top:clamp(1.2rem,.8rem + 1.4vw,2.2rem);
  max-width:22ch;text-wrap:balance}
.hero-sub{max-width:44ch;color:var(--steen-dim);margin-top:1.1rem;font-size:var(--step-0)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.6rem,1rem + 1.6vw,2.6rem)}

.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.5em;border-radius:100px;
  font-weight:600;font-size:var(--step--1);letter-spacing:.01em;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translate(3px,-1px)}
.btn-primary{background:var(--brass);color:var(--nacht)}
.btn-primary:hover{background:var(--brass-2)}
.btn-ghost{border:1px solid color-mix(in srgb,var(--steen) 34%,transparent);color:var(--steen)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}

.scroll-cue{position:absolute;left:var(--pad-x);bottom:1.4rem;z-index:3;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steen-dim);
  display:flex;align-items:center;gap:.7em}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--brass),transparent);display:block;
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}

/* tonight banner (JS-driven) */
.tonight{display:none;align-items:center;gap:.8em;margin-top:1.4rem;padding:.6em 1.1em;
  border:1px solid color-mix(in srgb,var(--baksteen) 60%,transparent);border-radius:100px;
  background:color-mix(in srgb,var(--baksteen) 14%,transparent);font-size:var(--step--1);width:fit-content}
.tonight.show{display:inline-flex}
.tonight .dot{width:8px;height:8px;border-radius:50%;background:var(--baksteen-2);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--baksteen-2) 70%,transparent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--baksteen-2) 70%,transparent)}
  70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tonight .dot{animation:none}}

/* =========================================================================
   MARQUEE (venue names in Fraunces)
   ========================================================================= */
.marquee{position:relative;z-index:2;border-block:1px solid var(--line);
  padding-block:clamp(1rem,.6rem + 1vw,1.7rem);overflow:hidden;
  background:var(--nacht-2)}
.marquee-track{display:flex;width:max-content;gap:0;animation:scroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--f-display);font-size:var(--step-2);font-weight:500;
  padding-inline:clamp(1rem,.5rem + 1.6vw,2.2rem);color:var(--steen);opacity:.5;white-space:nowrap}
.marquee-track span::after{content:"·";margin-left:clamp(1rem,.5rem + 1.6vw,2.2rem);color:var(--brass);opacity:.8}
.marquee-track span:hover{opacity:1;color:var(--brass)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* =========================================================================
   MANIFEST (editorial statement)
   ========================================================================= */
.manifest{max-width:26ch}
.manifest-lede{font-family:var(--f-display);font-size:var(--step-3);line-height:1.12;
  font-weight:500;letter-spacing:-.02em;max-width:16ch}
.manifest-lede em{font-style:italic;color:var(--brass)}
.manifest-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,1rem + 2vw,3rem);
  margin-top:clamp(2rem,1.4rem + 2vw,3.4rem);max-width:100%}
.manifest-body{max-width:52ch;color:var(--steen-dim);font-size:var(--step-1);line-height:1.55}
.manifest-body strong{color:var(--steen);font-weight:600}
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,1rem + 2vw,3.2rem);margin-top:clamp(1.6rem,1rem + 2vw,2.6rem)}
.stat b{display:block;font-family:var(--f-display);font-size:var(--step-4);font-weight:600;color:var(--brass);line-height:1}
.stat span{font-size:var(--step--1);letter-spacing:.04em;color:var(--steen-dim);text-transform:uppercase}
@media(min-width:760px){.manifest{max-width:none}
  .manifest-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end}}

/* =========================================================================
   AGENDA
   ========================================================================= */
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin-bottom:clamp(2rem,1.4rem + 2vw,3.4rem)}
.section-head h2{font-size:var(--step-4)}
.section-head .lead{max-width:34ch;color:var(--steen-dim);margin-top:.7rem}

.agenda-list{display:grid;gap:0;border-top:1px solid var(--line)}
.event{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,.6rem + 2vw,2.6rem);
  align-items:center;padding-block:clamp(1.3rem,1rem + 1.4vw,2.1rem);border-bottom:1px solid var(--line);
  position:relative;transition:padding-inline .4s var(--ease)}
.event::before{content:"";position:absolute;inset:0;background:var(--nacht-2);opacity:0;
  transition:opacity .4s var(--ease);z-index:-1;border-radius:var(--radius)}
.event:hover{padding-inline:clamp(.6rem,.4rem + 1vw,1.4rem)}
.event:hover::before{opacity:1}
.event-date{text-align:center;min-width:3.6em}
.event-date .d{display:block;font-family:var(--f-display);font-size:var(--step-3);font-weight:600;line-height:.9;color:var(--steen)}
.event-date .m{display:block;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--brass);margin-top:.2em}
.event-date .wd{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--steen-dim);margin-top:.15em}
.event-main{min-width:0}
.event-title{display:block;font-family:var(--f-display);font-size:var(--step-2);font-weight:600;line-height:1.05;margin-top:.4rem}
.event-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.5rem;font-size:var(--step--1);color:var(--steen-dim)}
.event-meta .venue{color:var(--steen)}
.event-desc{display:block;margin-top:.55rem;color:var(--steen-dim);max-width:56ch;font-size:var(--step--1)}
.tag{display:inline-flex;align-items:center;gap:.4em;font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--brass) 45%,transparent);color:var(--brass)}
.tag.sample{border-color:color-mix(in srgb,#8FB39B 55%,transparent);color:#8FB39B}
.tag.tonight-tag{border-color:var(--baksteen);color:var(--baksteen-2);background:color-mix(in srgb,var(--baksteen) 14%,transparent)}
.event-cta{white-space:nowrap;font-size:var(--step--1);font-weight:600;color:var(--brass);
  display:inline-flex;align-items:center;gap:.4em}
.event-thumb{width:clamp(64px,10vw,110px);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;flex-shrink:0}
.event-thumb img{width:100%;height:100%;object-fit:cover}
.agenda-empty{padding:2.5rem 0;color:var(--steen-dim);font-family:var(--f-display);font-size:var(--step-1);font-style:italic}
@media(max-width:680px){
  .event{grid-template-columns:auto 1fr;gap:1rem}
  .event-cta,.event-thumb{display:none}
  .event-title{font-size:var(--step-1)}
}

/* agenda filters (evenementen page) */
/* reserve space so async-rendered lists don't shift layout (CLS) */
.agenda-list[data-mode="full"]{min-height:80vh}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem;min-height:2.7rem}
.filters button{padding:.5em 1.1em;border-radius:100px;border:1px solid var(--line);
  font-size:var(--step--1);font-weight:500;color:var(--steen-dim);transition:all .25s}
.filters button:hover{color:var(--steen);border-color:color-mix(in srgb,var(--steen) 30%,transparent)}
.filters button[aria-pressed="true"]{background:var(--steen);color:var(--nacht);border-color:var(--steen)}

/* =========================================================================
   DE TIEN — venue index (theatre-programme style)
   ========================================================================= */
.leden{position:relative}
.leden-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.lid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,.6rem + 2vw,2.4rem);
  padding-block:clamp(1.1rem,.8rem + 1.2vw,1.7rem);border-bottom:1px solid var(--line);
  position:relative;transition:padding-inline .45s var(--ease),color .3s}
.lid::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(100deg,var(--nacht-2),color-mix(in srgb,var(--brass) 8%,var(--nacht-2)))}
.lid:hover{padding-inline:clamp(.7rem,.4rem + 1.4vw,1.6rem)}
.lid:hover::before{opacity:1}
.lid-num{font-family:var(--f-display);font-size:var(--step-2);font-weight:500;color:var(--steen-dim);
  min-width:2.4em;transition:color .3s}
.lid:hover .lid-num{color:var(--brass)}
.lid-logo{display:flex;align-items:center;gap:clamp(1rem,.6rem + 1.6vw,2rem);min-width:0}
.lid-logo img{height:clamp(46px,4vw + 30px,74px);width:auto;object-fit:contain;
  filter:none;opacity:.92;transition:opacity .3s,transform .3s var(--ease)}
.lid:hover .lid-logo img{opacity:1;transform:scale(1.03)}
.lid-text{display:block;min-width:0}
.lid-text .name{display:block;font-family:var(--f-display);font-size:var(--step-1);font-weight:600;line-height:1.05}
.lid-text .desc{display:block;font-size:var(--step--1);color:var(--steen-dim);margin-top:.3em}
.lid-go{display:inline-flex;align-items:center;gap:.5em;font-size:var(--step--1);font-weight:600;
  color:var(--steen-dim);white-space:nowrap;transition:color .3s,transform .3s var(--ease)}
.lid-go svg{width:1em;height:1em}
.lid:hover .lid-go{color:var(--brass);transform:translateX(2px)}
@media(max-width:680px){
  .lid{grid-template-columns:auto 1fr;gap:1rem}
  .lid-go span{display:none}
  .lid-logo{gap:1rem}
}

/* =========================================================================
   OVER DE BRUG (paper break — the one light section)
   ========================================================================= */
.paper{background:var(--paper);color:var(--ink);position:relative;z-index:2}
.paper .eyebrow{color:var(--baksteen)}
.paper .eyebrow::before{background:var(--baksteen)}
.over-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1.4rem + 3vw,4rem);align-items:center}
.over-copy h2{font-size:var(--step-4);color:var(--ink)}
.over-copy h2 em{font-style:italic;color:var(--baksteen)}
.over-copy p{color:var(--ink-dim);font-size:var(--step-1);line-height:1.6;margin-top:1.2rem;max-width:52ch}
.over-copy p strong{color:var(--ink);font-weight:600}
.over-media{position:relative}
.over-media img{border-radius:var(--radius);width:100%;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.over-media figcaption{font-size:var(--step--1);color:var(--ink-dim);margin-top:.8rem;font-style:italic}
.over-pull{font-family:var(--f-display);font-style:italic;font-size:var(--step-3);line-height:1.15;
  color:var(--ink);margin-top:clamp(2rem,1.4rem + 3vw,4rem);max-width:20ch}
.over-pull b{color:var(--baksteen);font-weight:600;font-style:normal}
@media(min-width:860px){.over-grid{grid-template-columns:1.1fr .9fr}}

/* =========================================================================
   PRAKTISCH
   ========================================================================= */
.prakt-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,1rem + 2vw,3rem)}
.prakt-card{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,1rem + 1.5vw,2.2rem);
  background:var(--nacht-2);transition:border-color .3s,transform .3s var(--ease)}
.prakt-card:hover{border-color:color-mix(in srgb,var(--brass) 40%,transparent);transform:translateY(-3px)}
.prakt-card h3{font-size:var(--step-1);margin-bottom:.6rem;font-family:var(--f-display)}
.prakt-card p{color:var(--steen-dim);font-size:var(--step--1)}
.prakt-card a.inline{color:var(--brass);border-bottom:1px solid color-mix(in srgb,var(--brass) 40%,transparent)}
.prakt-map{grid-column:1/-1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/7;background:var(--nacht-2)}
.prakt-map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.85)}
@media(min-width:720px){.prakt-grid{grid-template-columns:repeat(3,1fr)}}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--nacht-2);border-top:1px solid var(--line);position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1.4rem + 3vw,4rem);
  padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.footer-brand .brand-mark{font-size:var(--step-3)}
.footer-brand p{color:var(--steen-dim);max-width:34ch;margin-top:1rem;font-size:var(--step--1)}
.footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.footer-cols h2{font-family:var(--f-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steen-dim);margin-bottom:1rem;font-weight:600}
.footer-cols li{margin-bottom:.55rem}
.footer-cols a{color:var(--steen);opacity:.82;font-size:var(--step--1);transition:opacity .25s,color .25s}
.footer-cols a:hover{opacity:1;color:var(--brass)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
  padding-block:1.6rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--steen-dim)}
.footer-bottom a{color:var(--steen);border-bottom:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}
.credit b{color:var(--brass);font-weight:600}
@media(min-width:760px){
  .footer-top{grid-template-columns:1.4fr 1fr}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================================
   PAGE HEADER (evenementen sub-page hero)
   ========================================================================= */
.page-hero{padding-top:clamp(7rem,5rem + 8vw,11rem);padding-bottom:clamp(2rem,1.4rem + 3vw,4rem);position:relative;z-index:2}
.page-hero h1{font-size:var(--step-5);line-height:.9;letter-spacing:-.03em}
.page-hero .lead{max-width:46ch;color:var(--steen-dim);font-size:var(--step-1);margin-top:1.4rem}

/* utility */
.center{text-align:center}
.mt{margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--brass);color:var(--nacht);
  padding:.7em 1.2em;border-radius:0 0 4px 0;font-weight:600}
.skip:focus{left:0}