/* Reset en primitieven. Sectiespecifieke stijl hoort in css/sections/NN-naam.css. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--zwart); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--zwart); color: var(--wit);
  font-family: var(--font-tekst); font-size: var(--tekst); font-weight: 500;
  line-height: 1.6; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--juno-licht); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.shell { width: 100%; max-width: calc(var(--shell) + 2 * var(--zij)); margin-inline: auto; padding-inline: var(--zij); }
.band-licht { background: var(--krijt); color: var(--zwart); }

/* koppen: gigantische kapitalen */
.kop-xl, .kop-l {
  font-family: var(--font-kop); font-weight: 900; text-transform: uppercase;
  color: var(--krijt); line-height: var(--kop-lh); letter-spacing: var(--kop-ls);
  text-wrap: balance;
}
.kop-xl { font-size: var(--h1); }
.kop-l { font-size: var(--h2); line-height: 0.92; letter-spacing: -0.03em; }
.band-licht .kop-xl, .band-licht .kop-l { color: var(--zwart); }
.lead { font-size: var(--lead); line-height: 1.45; color: var(--wit); letter-spacing: -0.01em; }
.tekst-zacht { color: var(--grijs-licht); }
.mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--knop-h); padding: 0 24px; border-radius: var(--r-pill);
  background: var(--krijt); color: #111; font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: -0.005em; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s ease;
}
.knop:hover { transform: translateY(-1px) scale(1.02); background: #fff; }
.knop-donker { background: var(--zwart); color: var(--krijt); }
.knop-donker:hover { background: #1c1c1c; }
.knop-glas {
  background: rgba(24, 24, 24, .45); color: var(--wit);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.knop-glas:hover { background: rgba(40, 40, 40, .6); }

/* beeld-placeholder: staat waar straks echte fotografie of video komt */
.beeld {
  position: relative; overflow: hidden; background-color: #1a1a19;
  background-image:
    radial-gradient(120% 80% at 20% 0%, rgba(233,232,227,.10), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(30,111,184,.16), transparent 65%),
    linear-gradient(160deg, #22221f 0%, #121211 100%);
}
.beeld::before { /* fijne korrel */
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.beeld[data-label]::after {
  content: attr(data-label); position: absolute; left: 14px; bottom: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(233, 232, 227, .55);
}
.band-licht .beeld { background-color: #d9d8d2;
  background-image: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, #dedcd5 0%, #c9c7c0 100%); }
.band-licht .beeld[data-label]::after { color: rgba(10, 10, 10, .45); }

/* verschijnen bij scrollen */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.is-shot [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* beeldvak met foto: vult het vak, geen label of korrel */
.beeld.is-foto { background-color: #1a1a19; background-size: cover; background-position: center; background-repeat: no-repeat; }
.beeld.is-foto::after { display: none; }
.beeld.is-foto::before { opacity: .08; }

/* ankerlinks landen onder de vaste kopbalk */
section[id], footer[id], #overzicht { scroll-margin-top: 96px; }