/* ═══════════════════════════════════════════════════════════════
   INCENTIVE COMMUNITY — productiestylesheet
   Art direction: controlled abundance (DESIGN-PLAN-V2.md)
   Visuele bron: /hifi-v2/ — niet herontworpen, alleen opgeschoond.
   Volgorde: tokens · reset · a11y · layout · primitieven · componenten
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FONTS ──────────────────────────────────────────────── */
@font-face{
  font-family:'Archivo'; font-style:normal;
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal;
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Switzer'; font-style:normal;
  font-weight:100 900; font-display:swap;
  src:url('../fonts/switzer-var.woff2') format('woff2');
}

/* ── 2. TOKENS ─────────────────────────────────────────────── */
:root{
  /* grondvlakken */
  --ink:#0B0A0A;
  --ink-2:#100E0D;
  --surface:#141312;

  /* tekst */
  --text:#F5F2EC;
  --muted:#A9A29A;

  /* champagne */
  --gold:#C9A96A;
  --gold-dim:#8C7440;

  /* lijnen */
  --frame:#4A3D26;
  --frame-hover:#7A6337;
  --line:#2A2724;
  --line-strong:#6B645B;

  /* type */
  --f-display:'Archivo',system-ui,-apple-system,sans-serif;
  --f-body:'Switzer','Archivo',system-ui,-apple-system,sans-serif;

  --fs-hero:clamp(2.4rem,8.4vw,5.5rem);
  --fs-tagline:clamp(1.05rem,3.6vw,2rem);
  --fs-event:clamp(1.9rem,6.4vw,3.5rem);
  --fs-h2:clamp(1.65rem,4.6vw,2.5rem);
  --fs-statement:clamp(1.2rem,3.4vw,1.7rem);
  --fs-body:1.0625rem;
  --fs-meta:0.9375rem;
  --fs-sm:0.875rem;
  --fs-label:0.6875rem;

  --ls-label:0.18em;
  --ls-wide:0.09em;

  /* ruimte */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  /* dichter dan V1: de mockup gebruikt korte, harde overgangen */
  --section-y:clamp(2.75rem,1rem + 4vw,5rem);
  --section-y-tight:clamp(2rem,.75rem + 3vw,3.5rem);
  --gap-grid:clamp(.75rem,1.4vw,1.5rem);
  --gap-photo:clamp(.375rem,.7vw,.7rem);

  /* maten */
  --w-content:1320px;
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --hdr-h:72px;

  /* beweging */
  --t-fast:170ms; --t-base:280ms; --t-slow:640ms;
  --ease:cubic-bezier(.16,1,.3,1);

  /* lagen */
  --z-sticky:100; --z-overlay:500;
}
@media (min-width:1024px){ :root{ --hdr-h:88px; } }

/* ── 3. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--f-body); font-size:var(--fs-body); font-weight:400;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture,video{display:block; max-width:100%}
img{height:auto}
ul,ol{list-style:none; padding:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3{font-weight:inherit; line-height:1.05}
:where(dl,dd){margin:0}

/* ── 4. A11Y ───────────────────────────────────────────────── */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:9999;
  transform:translateY(-160%);
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.1rem; font-size:var(--fs-sm); font-weight:600;
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:1px}

/* ── 5. LAYOUT ─────────────────────────────────────────────── */
.wrap{width:min(100% - (var(--gutter) * 2), var(--w-content)); margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}

/* ── 6. TYPOGRAFISCHE PRIMITIEVEN ──────────────────────────── */
.eyebrow{
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  font-stretch:112%; text-transform:uppercase; letter-spacing:var(--ls-label);
  color:var(--gold); line-height:1.2;
}
.eyebrow--dots span{opacity:.55; padding-inline:.35em}

.h2{
  font-family:var(--f-display); font-size:var(--fs-h2); font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.08;
}
/* de brede spatiëring past pas vanaf 600px; daaronder raakt de kop de schermrand */
.h2--wide{font-weight:600; letter-spacing:.03em}
@media (min-width:600px){ .h2--wide{letter-spacing:var(--ls-wide)} }

.statement{
  font-family:var(--f-body); font-size:var(--fs-statement);
  font-weight:300; line-height:1.35;
}
.prose p{max-width:56ch; color:var(--muted)}
.prose strong{color:var(--text); font-weight:600}

/* ── 7. ICONEN ─────────────────────────────────────────────── */
.ico{width:1em; height:1em; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none}

.icon-circle{
  width:56px; height:56px; border:1px solid var(--frame); border-radius:50%;
  display:grid; place-items:center; color:var(--gold); flex:none;
}
.icon-circle .ico{width:22px; height:22px}

/* ── 8. KNOPPEN ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:48px; padding:.85rem 1.6rem; border-radius:2px;
  font-family:var(--f-display); font-size:.8125rem; font-weight:700;
  font-stretch:106%; text-transform:uppercase; letter-spacing:.11em;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn .ico{width:1.05em; height:1.05em; stroke-width:1.6;
  transition:transform var(--t-fast) var(--ease)}
.btn:hover .ico{transform:translateX(4px)}

.btn--primary{background:var(--gold); color:var(--ink)}
.btn--primary:hover{background:var(--gold-dim); color:var(--text)}

.btn--outline{border:1px solid var(--frame); color:var(--text)}
.btn--outline:hover{border-color:var(--gold); color:var(--gold)}

/* ── 9. FRAME (selectief ingezet) ──────────────────────────── */
.frame{border:1px solid var(--frame); border-radius:2px}
.frame--solid{background:var(--surface)}

/* ── 10. HEADER ────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-sticky);
  height:var(--hdr-h);
  transition:background var(--t-base) var(--ease), height var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:var(--ink); border-bottom-color:var(--line)}
.hdr__in{
  height:100%; display:flex; align-items:center; gap:var(--s-5);
  width:min(100% - (var(--gutter) * 2), var(--w-content)); margin-inline:auto;
}
.hdr__logo{display:flex; align-items:center; min-height:44px; margin-right:auto}
.hdr__logo img{width:132px; height:auto}
@media (min-width:1024px){ .hdr__logo img{width:150px} }

.hdr__nav{display:none}
@media (min-width:1024px){
  .hdr__nav{display:block; position:absolute; left:50%; transform:translateX(-50%)}
  .hdr__nav ul{display:flex; gap:clamp(1rem,2.2vw,2.1rem)}
  .hdr__nav a{
    display:flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px;
    font-size:.9375rem; color:var(--text); opacity:.82;
    transition:color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .hdr__nav a:hover{opacity:1; color:var(--gold)}
  .hdr__nav a[aria-current="page"]{color:var(--gold); opacity:1}
}

.hdr__end{display:flex; align-items:center; gap:var(--s-3); margin-left:auto}

.hdr__cta{
  display:none; opacity:0; pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
@media (min-width:1024px){ .hdr__cta{display:inline-flex} }
.hdr.is-stuck .hdr__cta{opacity:1; pointer-events:auto}

/* social pictogrammen */
.soc{display:flex; align-items:center; gap:var(--s-2)}
.soc a{
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--text); opacity:.78;
  transition:color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.soc a:hover{opacity:1; color:var(--gold)}
.soc .ico{width:19px; height:19px}
.soc--hdr{display:none}
@media (min-width:1024px){ .soc--hdr{display:flex} }

/* burger */
.burger{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; padding-inline:.4rem;
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ls-label);
}
@media (min-width:1024px){ .burger{display:none} }
.burger__box{display:grid; gap:5px; width:22px}
.burger__box span{height:1.5px; background:currentColor; transition:transform var(--t-base) var(--ease)}
.burger[aria-expanded="true"] .burger__box span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── 11. MOBIEL MENU ───────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:var(--ink); padding:calc(var(--hdr-h) + var(--s-6)) var(--gutter) var(--s-6);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
}
.menu[hidden]{display:none}
.menu__nav li{border-top:1px solid var(--line)}
.menu__nav li:last-child{border-bottom:1px solid var(--line)}
.menu__nav a{
  display:flex; align-items:center; min-height:64px;
  font-family:var(--f-display); font-size:clamp(1.5rem,7vw,2.1rem);
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.menu__nav a[aria-current="page"]{color:var(--gold)}
.menu__nav a span{display:block; transform:translateY(14px); opacity:0}
.menu.is-open .menu__nav a span{
  transform:translateY(0); opacity:1;
  transition:transform 420ms var(--ease), opacity 420ms var(--ease);
  transition-delay:calc(var(--i) * 45ms);
}
.menu__foot{padding-top:var(--s-6); display:grid; gap:var(--s-4)}
.menu__mail{color:var(--gold); font-size:var(--fs-sm)}

/* ── 12. HERO ──────────────────────────────────────────────── */
.hero{position:relative; isolation:isolate; display:grid; align-items:end;
  min-height:clamp(540px,88vh,700px); padding-block:var(--hdr-h) var(--s-8)}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(11,10,10,.72) 0%, rgba(11,10,10,.34) 32%,
    rgba(11,10,10,.62) 62%, rgba(11,10,10,.95) 100%);
}
.hero__body{position:relative}
.hero__title{
  font-family:var(--f-display); font-size:var(--fs-hero); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; line-height:.95;
  margin-block:var(--s-4) var(--s-3);
}
.hero__tag{
  font-family:var(--f-display); font-size:var(--fs-tagline); font-weight:250;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.2;
  color:var(--text);
}
.hero__cta{margin-top:clamp(1.5rem,3.4vw,2.5rem)}

@media (min-width:800px){
  .hero{align-items:center; min-height:clamp(620px,78vh,760px);
    padding-block:var(--hdr-h) clamp(3rem,6vw,5.5rem)}
  .hero__media::after{
    background:linear-gradient(90deg,
      rgba(11,10,10,.93) 0%, rgba(11,10,10,.76) 32%,
      rgba(11,10,10,.36) 60%, rgba(11,10,10,.10) 100%);
  }
  .hero__body{max-width:min(100%, 36ch)}
}

/* ── 13. EVENT-FEATURE (champagne kader) ───────────────────── */
/* Het kader schuift op desktop over de onderrand van de hero heen:
   de overgang is daarmee direct zichtbaar en er ontstaat geen zwart gat. */
.event-sec{padding-top:var(--section-y-tight)}
@media (min-width:900px){
  .event-sec{padding-top:0}
  .event{position:relative; z-index:2; margin-top:clamp(-5.5rem,-5vw,-3rem)}
}
.event{display:grid; overflow:hidden}
.event__body{padding:clamp(1.75rem,4.4vw,3.25rem)}
.event__place{
  font-family:var(--f-display); font-size:var(--fs-event); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; line-height:.95;
  margin-block:var(--s-4) var(--s-5);
}
.event__data{display:grid; gap:var(--s-3); margin-bottom:clamp(1.5rem,3.4vw,2.25rem)}
.event__data > div{display:flex; align-items:center; gap:.85rem}
.event__data dt{color:var(--gold); display:flex}
.event__data dt .ico{width:19px; height:19px}
.event__data dd{
  font-size:var(--fs-meta); font-weight:500; letter-spacing:.045em;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.event__media{position:relative; min-height:clamp(240px,54vw,340px)}
.event__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@media (min-width:900px){
  .event{grid-template-columns:minmax(0,46%) minmax(0,54%); min-height:clamp(420px,38vw,520px)}
  /* tussen 900 en 1280 is de tekstkolom te smal voor de volle 3,5rem —
     "BOATHOUSE" is één woord en kan niet afbreken */
  .event__place{font-size:clamp(1.9rem,4.6vw,3rem)}
  .event__body{order:1; align-self:center}
  .event__media{order:2; min-height:100%}
  .event__data{grid-template-columns:1fr 1fr; column-gap:var(--s-5)}
  .event__data > div:first-child{grid-column:1 / -1}
}

@media (min-width:1280px){
  /* vanaf 1280 is de kolom weer breed genoeg voor de volle schaal */
  .event__place{font-size:var(--fs-event)}
}

/* ── 14. STORY / OVER INCENTIVE ────────────────────────────── */
.story{display:grid; gap:clamp(2rem,4vw,3.5rem)}
.story__media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.story__body{
  width:min(100% - (var(--gutter) * 2), 640px);
  margin-inline:auto;
}
.story__title{margin-block:var(--s-4) var(--s-5)}

@media (min-width:1024px){
  .story{grid-template-columns:minmax(0,45%) minmax(0,1fr); align-items:center;
    gap:clamp(2.5rem,4.5vw,5rem)}
  .story__media img{aspect-ratio:3/4; height:100%; max-height:820px}
  .story__body{margin-inline:0; padding-right:var(--gutter);
    width:min(100%, 620px)}
}

/* USP-raster */
.usp{display:grid; gap:0; margin-top:clamp(2rem,3.6vw,2.75rem)}
.usp li{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding-block:var(--s-5); border-top:1px solid var(--frame);
}
.usp__ico{color:var(--gold); margin-top:.15rem}
.usp__ico .ico{width:22px; height:22px}
.usp h3{
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:700;
  font-stretch:112%; text-transform:uppercase; letter-spacing:var(--ls-label);
  margin-bottom:.4rem;
}
.usp p{font-size:var(--fs-sm); color:var(--muted); line-height:1.5; max-width:30ch}
@media (min-width:600px){
  .usp{grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,3vw,2.5rem)}
}

/* ── 15. FOTOSTRIP — edities ───────────────────────────────── */
.strip-sec{background:var(--ink-2); border-block:1px solid var(--line)}
.strip__head{text-align:center; display:grid; gap:var(--s-3); justify-items:center;
  margin-bottom:clamp(2rem,3.6vw,3rem)}

.strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:74vw; gap:8px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip > li{scroll-snap-align:start}
.strip a{display:block; height:100%}
.strip__img{display:block; overflow:hidden; background:var(--surface)}
.strip__img img{width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.strip a:hover .strip__img img,
.strip a:focus-visible .strip__img img{transform:scale(1.05)}
.strip__meta{display:grid; gap:.35rem; padding:var(--s-4) 0 0}
.strip__name{
  font-family:var(--f-display); font-size:1.0625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.strip__date{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8125rem; letter-spacing:.05em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.strip__date .ico{width:15px; height:15px; color:var(--gold)}

@media (min-width:768px){ .strip{grid-auto-columns:40vw} }
@media (min-width:1024px){
  /* edge-to-edge: de strip is het dichtste moment van de pagina */
  .strip{grid-auto-flow:row; grid-template-columns:repeat(5,1fr);
    grid-auto-columns:auto; overflow:visible;
    padding-inline:clamp(.5rem,1vw,1rem); gap:clamp(.5rem,1vw,1rem);}
  .strip__img img{aspect-ratio:3/4}
}
.strip-sec__act{display:flex; justify-content:center;
  margin-top:clamp(2rem,3.6vw,3rem)}

/* ── 16. CTA-BAND (nieuwsbrief) ────────────────────────────── */
.band{
  position:relative; isolation:isolate;
  border-block:1px solid var(--gold);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.band__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.band__media img{width:100%; height:100%; object-fit:cover}
.band__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,10,10,.94) 0%, rgba(11,10,10,.78) 45%,
    rgba(11,10,10,.55) 72%, rgba(11,10,10,.80) 100%);
}
.band__in{display:grid; gap:var(--s-5); align-items:center}
.band__txt{display:grid; gap:var(--s-3)}
.band__txt p:last-child{color:var(--muted); font-size:var(--fs-body); max-width:46ch}
@media (min-width:900px){
  .band{padding-block:clamp(3.5rem,6vw,5.5rem)}
  .band__in{grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(1.75rem,3.4vw,3rem)}
  .band .statement{font-size:clamp(1.5rem,2.4vw,2.15rem)}
}

/* ── 17. FOOTER ────────────────────────────────────────────── */
/* Geen eigen bovenrand: de champagne haarlijn onder de cta-band is al de
   scheiding. Twee lijnen vlak na elkaar leest als een fout, niet als ritme. */
.ftr{padding-block:clamp(2.75rem,4.5vw,4.25rem) clamp(1.25rem,2vw,1.75rem)}

/* mobiel: merk over de volle breedte, dan MENU | INFORMATIE, dan LOCATIE */
.ftr__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.25rem,4vw,2.5rem); row-gap:clamp(2rem,4vw,2.75rem);
}
.ftr__brand,.ftr__loc{grid-column:1 / -1}

/* merkkolom */
.ftr__brand{display:grid; gap:var(--s-5); justify-items:start; align-content:start}
.ftr__brand img{width:clamp(150px,15vw,180px); height:auto}
.ftr__mail{
  display:inline-flex; align-items:center; gap:.65rem; min-height:44px;
  font-size:var(--fs-sm); color:var(--text);
  transition:color var(--t-fast) var(--ease);
}
.ftr__mail .ico{width:18px; height:18px; color:var(--gold)}
.ftr__mail:hover{color:var(--gold)}

.ftr .soc{gap:var(--s-3)}
.ftr .soc a{
  width:44px; height:44px; border:1px solid var(--frame); border-radius:50%;
  color:var(--text); opacity:1;
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.ftr .soc a:hover{border-color:var(--gold); color:var(--gold)}
.ftr .soc .ico{width:17px; height:17px}
@media (prefers-reduced-motion:no-preference){
  .ftr .soc a:hover{transform:translateY(-2px)}
}

/* linkkolommen */
.ftr__col h2{
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  font-stretch:112%; text-transform:uppercase; letter-spacing:var(--ls-label);
  color:var(--gold); margin-bottom:var(--s-2);
}
.ftr__col a{
  /* kolombreed: het klikdoel is de hele kolomregel, niet alleen het woord */
  display:flex; width:100%; align-items:center; min-height:44px;
  font-size:var(--fs-sm); color:var(--muted);
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ftr__col a:hover{color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .ftr__col a:hover{transform:translateX(3px)}
}

/* locatiekolom + decoratieve kaart */
.ftr__loc-in{display:flex; align-items:flex-start; gap:var(--s-5)}
.ftr__loc p{font-size:var(--fs-sm); color:var(--muted); line-height:1.5; padding-top:.35rem}
.ftr__map{width:clamp(110px,10vw,138px); max-width:100%; height:auto; flex:none}

/* bottom bar */
.ftr__bot{
  display:grid; gap:var(--s-1); align-items:center;
  margin-top:clamp(2rem,3.4vw,2.75rem);
  padding-top:var(--s-2); border-top:1px solid var(--frame);
  font-size:.8125rem; color:var(--muted);
}
.ftr__end{display:grid; gap:var(--s-1); justify-items:start}
.ftr__legal{display:flex; gap:var(--s-5)}
/* Credits staan onder de juridische links, in dezelfde kolom. Bewust een
   eigen regel en niet in .ftr__legal: die links hebben 44px-doelen, en
   lopende tekst ertussen zou dat raster breken. */
.ftr__credit{color:var(--muted)}
.ftr__credit a{
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--frame-hover);
  transition:color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.ftr__credit a:hover,.ftr__credit a:focus-visible{color:var(--gold); text-decoration-color:var(--gold)}
.ftr__legal a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; color:var(--muted);
  transition:color var(--t-fast) var(--ease);
}
.ftr__legal a:hover{color:var(--gold)}

/* tablet: 2 x 2 — MERK MENU / INFORMATIE LOCATIE */
@media (min-width:768px){
  .ftr__brand,.ftr__loc{grid-column:auto}
  .ftr__bot{grid-template-columns:1fr auto; gap:var(--s-5)}
  .ftr__end{justify-items:end}
  .ftr__legal{justify-content:flex-end}
  .ftr__credit{text-align:right}
}

/* desktop: 40 / 20 / 20 / 20 */
@media (min-width:1024px){
  .ftr__grid{
    grid-template-columns:minmax(0,1.6fr) minmax(0,.78fr) minmax(0,.86fr) minmax(0,1.06fr);
    column-gap:clamp(1.5rem,3vw,3.25rem);
  }
}

/* ── 18. REVEAL ────────────────────────────────────────────── */
/* Alleen verbergen wanneer JavaScript draait: <html> krijgt dan de klasse
   .js vóór de eerste paint. Zonder JS blijft alle inhoud gewoon zichtbaar —
   beweging is enhancement, geen voorwaarde om de pagina te kunnen lezen. */
.js [data-reveal]{opacity:0; transform:translateY(16px)}
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay:calc(var(--d,0) * 60ms);
}

/* ── 19. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1; transform:none}
  .menu__nav a span{opacity:1; transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   SUBPAGINA'S — zelfde systeem, uitgerold
   ═══════════════════════════════════════════════════════════════ */

/* ── 20. PAGE HERO ─────────────────────────────────────────── */
.hero-page{
  position:relative; isolation:isolate; display:grid; align-items:end;
  min-height:clamp(300px,44vh,400px);
  padding-block:calc(var(--hdr-h) + var(--s-6)) clamp(1.5rem,3.4vw,2.5rem);
}
.hero-page__media{position:absolute; inset:0; z-index:-2}
.hero-page__media img{width:100%; height:100%; object-fit:cover}
.hero-page__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,10,10,.82) 0%, rgba(11,10,10,.40) 42%,
    rgba(11,10,10,.92) 100%);
}
.hero-page__title{
  font-family:var(--f-display); font-size:clamp(2.1rem,7vw,4.25rem); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1;
}
.hero-page .eyebrow{margin-bottom:var(--s-3)}

/* meta-variant: albumdetail */
.hero-page--meta{min-height:clamp(420px,58vh,560px)}
.hero-meta{display:grid; gap:var(--s-2) var(--s-4); margin-top:var(--s-5)}
@media (min-width:600px){ .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px){
  .hero-meta{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5)}
}
.hero-meta li{
  display:flex; align-items:center; gap:.55rem; min-height:32px; min-width:0;
  font-size:var(--fs-meta); letter-spacing:.04em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.hero-meta .ico{width:18px; height:18px; color:var(--gold)}
.hero-page__act{margin-top:var(--s-5)}

/* ── 21. BREADCRUMB ────────────────────────────────────────── */
.crumb{margin-top:var(--s-2); font-size:var(--fs-sm)}
.crumb ol{display:flex; flex-wrap:wrap; align-items:center; gap:0 .55rem}
.crumb a{display:inline-flex; align-items:center; min-height:44px;
  padding-inline:.4rem; margin-inline:-.4rem; color:var(--muted);
  transition:color var(--t-fast) var(--ease)}
.crumb a:hover{color:var(--gold)}
.crumb li+li::before{content:"›"; margin-right:.55rem; color:var(--frame-hover)}
.crumb [aria-current]{color:var(--text)}

/* ── 22. BAR (intro / stat / quote) ────────────────────────── */
.bar{display:flex; align-items:center; gap:var(--s-5);
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.9rem)}
.bar__txt{display:grid; gap:.3rem; min-width:0}
.bar__txt p{color:var(--muted); font-size:var(--fs-sm)}
.bar__txt .statement{color:var(--text)}

.stats{display:grid; gap:var(--s-5); padding:clamp(1.25rem,2.8vw,2rem)}
.stats__intro{color:var(--muted); font-size:var(--fs-sm); max-width:42ch}
.stats__intro strong{color:var(--text); font-weight:600}
.stats__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5)}
.stats__list > div{display:grid; gap:.3rem; justify-items:start}
.stats__list .ico{width:20px; height:20px; color:var(--gold)}
.stats__v{font-family:var(--f-display); font-size:1.375rem; font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1}
.stats__l{font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  font-stretch:112%; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--gold)}
@media (min-width:900px){
  .stats{grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
    gap:clamp(1.5rem,3vw,2.75rem)}
  .stats__list{grid-template-columns:repeat(3,auto); gap:clamp(1.25rem,2.6vw,2.5rem)}
}

/* ── 23. GALERIJKAARTEN ────────────────────────────────────── */
.cards{display:grid; gap:var(--gap-grid)}
@media (min-width:600px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .cards{grid-template-columns:repeat(4,minmax(0,1fr))} }

.card{display:block; height:100%; border:1px solid var(--frame); border-radius:2px;
  overflow:hidden; transition:border-color var(--t-fast) var(--ease)}
.card:hover,.card:focus-visible{border-color:var(--frame-hover)}
.card__img{display:block; overflow:hidden}
.card__img img{width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.card:hover .card__img img,.card:focus-visible .card__img img{transform:scale(1.05)}
.card__body{padding:var(--s-4) var(--s-4) var(--s-5)}
.card__name{display:block; font-family:var(--f-display); font-size:1.0625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em}
.card__date{display:flex; align-items:center; gap:.5rem; margin-top:.4rem;
  font-size:.8125rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums}
.card__date .ico{width:15px; height:15px; color:var(--gold)}
.card__go{display:flex; align-items:center; gap:.5rem; margin-top:var(--s-4);
  font-family:var(--f-display); font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--gold)}
.card__go .ico{width:1.5em; height:1.5em; transition:transform var(--t-fast) var(--ease)}
.card:hover .card__go .ico,.card:focus-visible .card__go .ico{transform:translateX(4px)}

/* ── 24. EDITORIAL FOTORASTER ──────────────────────────────── */
/* mobiel: één kolom, maar de beeldverhoudingen blijven wisselen — reportageritme */
.pgrid{display:grid; grid-template-columns:1fr; gap:var(--gap-photo)}
.pgrid li{overflow:hidden; background:var(--surface)}
.pgrid img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.pgrid li:hover img{transform:scale(1.04)}
.pgrid .r34{aspect-ratio:3/4}
.pgrid .r32{aspect-ratio:3/2}
.pgrid .r31{aspect-ratio:3/1}
@media (min-width:768px){
  /* 12 koloms; periode van 10 waarbij elke rij exact op 12 uitkomt
     en de hoogtes binnen een rij gelijk zijn (3:4 bij span 3/4, 3:2 bij span 6/8) */
  .pgrid{grid-template-columns:repeat(12,1fr)}
  .pgrid li:nth-child(10n+1){grid-column:span 4}
  .pgrid li:nth-child(10n+2){grid-column:span 8}
  .pgrid li:nth-child(10n+3){grid-column:span 6}
  .pgrid li:nth-child(10n+4){grid-column:span 6}
  .pgrid li:nth-child(10n+5){grid-column:span 3}
  .pgrid li:nth-child(10n+6){grid-column:span 6}
  .pgrid li:nth-child(10n+7){grid-column:span 3}
  .pgrid li:nth-child(10n+8){grid-column:span 8}
  .pgrid li:nth-child(10n+9){grid-column:span 4}
  .pgrid li:nth-child(10n+10){grid-column:span 12}
}

/* ── 25. FORMULIEREN ───────────────────────────────────────── */
.form{display:grid; gap:var(--s-5); padding:clamp(1.4rem,3.2vw,2.4rem)}
/* Het formulier zit IN .form, niet eromheen: zo blijft de bevestiging staan
   nadat de velden verdwijnen — met JS via [hidden], zonder JS omdat de server
   het <form> uit de pagina haalt en het statusvak laat staan. */
.form__fields{display:grid; gap:var(--s-5)}
.form__fields[hidden]{display:none}
.field{display:grid; gap:.5rem}
.field > label{font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  font-stretch:112%; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text)}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.85rem 1rem; border-radius:2px;
  background:var(--ink); border:1px solid var(--line-strong); color:var(--text);
  font-family:var(--f-body); font-size:1rem; line-height:1.4;
  transition:border-color var(--t-fast) var(--ease);
}
.field textarea{min-height:158px; resize:vertical}
.field ::placeholder{color:#7C756D; opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#857D73}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--gold); outline:2px solid var(--gold); outline-offset:2px}
.field select{
  appearance:none; padding-right:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;
  background-position:right .9rem center; background-size:20px 20px;
}
.field__help{font-size:var(--fs-sm); color:var(--muted)}

.consent{display:flex; flex-wrap:wrap; gap:.85rem; align-items:flex-start; padding-block:.4rem}
.consent input[type=checkbox]{
  width:24px; height:24px; min-height:24px; flex:none;
  accent-color:var(--gold); cursor:pointer}
/* Het label schakelt de checkbox, dus dat is het werkelijke raakvlak. Met
   11px padding boven en onder haalt één tekstregel (22px) precies 44px, zonder
   het vinkje visueel te vergroten. Bewust display:block en GEEN flex: flex
   maakt van de losse tekstknopen en de link aparte flex-items, waardoor de
   spaties ertussen wegvallen ("met deprivacyverklaring"). */
.consent label{
  display:block; padding-block:11px; min-height:44px; box-sizing:border-box;
  font-size:var(--fs-sm); color:var(--muted); line-height:1.55; cursor:pointer}
.consent input[type=checkbox]{margin-top:calc(11px + .15rem)}
.consent a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}

/* ── 26. CONTACTGEGEVENS ───────────────────────────────────── */
.cinfo > li{display:flex; gap:var(--s-4); align-items:center;
  padding-block:var(--s-4); border-top:1px solid var(--frame)}
.cinfo > li:last-child{border-bottom:1px solid var(--frame)}
.cinfo__l{display:block; margin-bottom:.15rem;
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--gold)}
.cinfo p{font-size:var(--fs-sm)}
.cinfo p a{display:inline-flex; align-items:center; min-height:44px}
.cinfo a{color:var(--text); transition:color var(--t-fast) var(--ease)}
.cinfo a:hover{color:var(--gold)}
.cinfo .soc{margin-top:.35rem}
.cinfo .soc a{width:44px; height:44px; border:1px solid var(--frame); border-radius:50%}
.cinfo .soc a:hover{border-color:var(--gold); color:var(--gold)}

.img-block img{width:100%; aspect-ratio:4/3; object-fit:cover}

.split{display:grid; gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start}
}

/* ── 27. TEKSTPAGINA'S (huisregels, privacy) ───────────────── */
.doc{width:min(100% - (var(--gutter) * 2), 64ch); margin-inline:auto}
.doc h2{
  font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.45rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.035em; line-height:1.2;
  margin-top:clamp(2.25rem,4vw,3rem); margin-bottom:var(--s-3);
  padding-top:var(--s-5); border-top:1px solid var(--frame);
  scroll-margin-top:calc(var(--hdr-h) + 1rem);
}
.doc > h2:first-child{margin-top:0}
.doc p{color:var(--muted); margin-bottom:var(--s-4)}
.doc p.lead{color:var(--text); font-size:var(--fs-statement); font-weight:300; line-height:1.5;
  margin-bottom:var(--s-6)}
.doc ul.bullets{margin:0 0 var(--s-4) 1.15rem; color:var(--muted)}
.doc ul.bullets li{list-style:disc; margin-bottom:.3rem}

.toc{margin-bottom:clamp(2.5rem,5vw,4rem); padding:clamp(1.2rem,2.6vw,1.75rem)}
.toc h2{font-family:var(--f-display); font-size:var(--fs-label); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--gold);
  margin:0 0 var(--s-2); padding:0; border:0}
.toc ol{list-style:none; padding:0}
.toc a{display:flex; align-items:center; min-height:44px; font-size:var(--fs-sm);
  color:var(--muted); transition:color var(--t-fast) var(--ease)}
.toc a:hover{color:var(--gold)}
@media (min-width:600px){ .toc ol{columns:2; column-gap:var(--s-6)} }

/* ── 28. 404 ───────────────────────────────────────────────── */
.err{
  position:relative; isolation:isolate; display:grid; align-items:center;
  min-height:calc(100dvh - var(--hdr-h));
  padding-block:calc(var(--hdr-h) + var(--s-7)) var(--s-8);
}
.err__media{position:absolute; inset:0; z-index:-2}
.err__media img{width:100%; height:100%; object-fit:cover}
.err__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,10,10,.93) 0%, rgba(11,10,10,.74) 42%,
    rgba(11,10,10,.30) 100%)}
.err__body{max-width:min(100%, 34rem)}
.err__title{font-family:var(--f-display); font-size:clamp(2.3rem,7.4vw,4.75rem); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; line-height:.95;
  margin-block:var(--s-3) var(--s-4)}
.err__body p{color:var(--muted); margin-bottom:var(--s-6)}
.err__act{display:flex; flex-wrap:wrap; gap:var(--s-3)}

/* ── 29. FOTORASTER: interactieve tegel ────────────────────────── */
/* De knop is de lightbox-trigger. Zonder JS blijft de foto gewoon staan. */
.pgrid__btn{
  display:block; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:zoom-in;
}
.pgrid__btn:focus-visible{outline:2px solid var(--gold); outline-offset:-3px}

.more{display:flex; justify-content:center; margin-top:clamp(1.5rem,3vw,2.5rem)}

/* ── 30. LIGHTBOX ──────────────────────────────────────────────── */
.lb{
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  padding:0; border:0; background:transparent; color:var(--text); overflow:hidden;
}
.lb::backdrop{background:rgba(11,10,10,.975)}
.lb__fig{
  margin:0; height:100%; display:grid; place-items:center;
  /* minmax(0,1fr) is nodig: met de standaard auto-track wordt de rij op de
     INHOUD gemeten (bij een portretfoto ruim 2000px), en dan heeft de
     max-height:100% van de afbeelding niets om tegen te begrenzen — de foto
     liep onder de vouw door. Met een vaste 1fr-track past hij altijd. */
  grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  padding:clamp(3.5rem,7vw,5rem) clamp(.5rem,3vw,5rem) clamp(4.5rem,9vw,6rem);
}
.lb__img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  min-width:0; min-height:0;
}

.lb__bar{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:center;
  justify-content:center; gap:clamp(1rem,4vw,2rem);
  padding:var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
}
.lb__count{
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600; font-stretch:112%;
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--gold);
  font-variant-numeric:tabular-nums; min-width:9ch; text-align:center;
}
.lb__btn{
  width:48px; height:48px; flex:none; display:grid; place-items:center;
  border:1px solid var(--frame); border-radius:50%; color:var(--text);
  background:rgba(11,10,10,.55);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lb__btn .ico{width:20px; height:20px}
.lb__btn:hover:not(:disabled),.lb__btn:focus-visible:not(:disabled){
  border-color:var(--gold); color:var(--gold)}
.lb__btn:disabled{opacity:.3; cursor:default}
/* Sluiten staat op elke breedte in de onderbalk, naast vorige/volgende:
   altijd zichtbaar, binnen duimbereik op mobiel, en geen positionering
   die per breakpoint tegen een andere ouder aanloopt. */
.lb__close{margin-left:clamp(.5rem,3vw,1.5rem)}

/* ── Formulierstates (P4) ───────────────────────────────────────────────
   De honeypot staat buiten beeld én buiten de tabvolgorde, met aria-hidden
   op de wrapper. Geen display:none — sommige bots slaan die over — maar ook
   geen truc die een gewone bezoeker per ongeluk kan invullen. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.field__err{
  margin:var(--s-2) 0 0; font-size:var(--fs-small); line-height:1.45;
  color:#E8A0A0;
}
.field__err[hidden]{display:none}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#A85C5C}
.consent input[aria-invalid="true"]{outline:2px solid #A85C5C; outline-offset:2px}
/* De foutregel is een derde flex-item in .consent; zonder eigen regel gaat hij
   naast het label staan en knijpt die in een smalle kolom. */
.consent .field__err{flex:0 0 100%; margin-top:0; margin-left:calc(24px + .85rem)}

.form__status{
  margin:0; padding:var(--s-4); border:1px solid var(--line);
  font-size:var(--fs-small); line-height:1.55;
}
.form__status[hidden]{display:none}
.form__status p{margin:0}
.form__status:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.form__status--ok{border-color:var(--gold-dim); color:var(--text)}
.form__status--error{border-color:#A85C5C; color:var(--text)}
.form__status--busy{border-color:var(--line-strong); color:var(--muted)}

.btn[aria-busy="true"]{opacity:.6; cursor:progress}