/* School of Rock: site-chrome. Huisstijl van de lessen: papier, inkt, rood en geel. */
:root {
  --ink: #1C1B19;
  --ink-2: #2A2825;
  --ink-soft: #55524C;
  --paper: #F7F3EA;
  --white: #FFFFFF;
  --line: #DDD8CE;
  --red: #D63A31;
  --red-deep: #A92C25;
  --yellow: #F2D500;
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --nav-h: 56px;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.mono { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Navigatie */
.sitenav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--nav-h); background: var(--ink); color: var(--white); display: flex; align-items: center; gap: 24px; padding: 0 20px; border-bottom: 3px solid var(--yellow); }
.sitenav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.sitenav .brand img { width: 40px; height: auto; }
.sitenav nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sitenav nav a { font: 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 9px 12px; border-radius: 3px; white-space: nowrap; color: #D9D5CC; }
.sitenav nav a:hover { background: var(--ink-2); color: var(--white); }
.sitenav nav a[aria-current="page"] { background: var(--yellow); color: var(--ink); }
@media (max-width: 720px) { .sitenav { gap: 12px; padding: 0 12px; } .sitenav .brand span { display: none; } .sitenav nav a { padding: 9px 8px; font-size: 11px; } }

/* Knoppen */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 12px 18px; border-radius: 3px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.btn.solid { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }

/* Algemene secties */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.kicker { font: 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
.h-sec { font: 600 clamp(32px, 5vw, 48px)/1.02 var(--display); margin: 0 0 8px; text-wrap: balance; }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.sitefoot { background: var(--ink); color: #BDB8AE; font-size: 13px; padding: 36px 20px 48px; margin-top: 80px; }
.sitefoot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.sitefoot a { color: var(--white); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }