/* Hallmark · shape: stripalbum, omslag en vijf hoofdstukken · genre: playful · theme: custom · job: book · idea: "een carnavalsgroep als superheldenstrip, met de boeking als bretel-signaal" · vibe: "paars, luid, warm, met een knipoog"
 * paper: oklch(0.17 0.05 315) (Midnight Plum) · accent: oklch(0.49 0.2 300) (Royal Purple) · display: Bodoni Moda · body: Manrope · knal: Bangers (alleen geluidseffecten) · hero: de getekende omslag naast de kop en de boekknop · nav: woordmerk, vier ankers, taalknop · footer: woordmerk boven de links en de credits · imagery: AI-strip op eigen foto's plus podiumfoto's van Marco Sanders · signature: de omslag De Paarse Vief met de vijf als helden
 * axes: dark/roman-serif/chromatic-purple · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, het halftoonraster alleen op de grond en niet op de panelen, en de knal-letter alleen voor drie geluiden */
/* De strip (getekende omslag en kaarten) is de uitdrukkelijke wens van de groep, getekend op hun eigen foto's met toestemming. */

/* De opmaak van de startpagina van kerdju.nl: een stripalbum in de
   Kerdju-kleuren. Het stijlhandboek en de tekstpagina's houden site.css; deze
   stylesheet laadt alleen op de startpagina. Elke kleur en elk lettertype
   staat als token in :root, zodat niets los wordt overgetypt. */

@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
/* Bangers (SIL Open Font License), de letter van een stripgeluid. */
@font-face { font-family: "Bangers"; src: url("/assets/fonts/bangers-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* De vier merkkleuren uit het stijlhandboek, plus wat een strip nodig
     heeft: inkt voor de kaders en knalgeel voor geluiden en focus. */
  --color-paper: #12071a;        /* Midnight Plum, de grond */
  --color-paper-2: #1e0d2b;
  --color-accent: #6f2dbd;       /* Royal Purple, het pak */
  --color-accent-licht: #a35bea;
  --color-goud: #d4af7a;         /* Champagne Gold, de gesp */
  --color-ivoor: #fff6ec;        /* Warm Ivory, het papier */
  --color-ivoor-2: #f3eadf;
  --color-inkt: #160f19;
  --color-zacht: #cfc2d2;
  --color-grijs: #5e525e;
  --color-flits: #ffd23f;
  --color-fout: #8a1c2b;
  --color-raster: rgb(255 246 236 / 0.07);
  --color-rand-donker: rgb(255 246 236 / 0.16);
  --color-nl-rood: #ae1c28;
  --color-nl-wit: #fbfaf7;
  --color-veld: #fffdf8;
  --color-accent-ink: #fff6ec;
  --color-nl-blauw: #21468b;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-knal: "Bangers", "Impact", "Arial Black", sans-serif;

  --container: 1200px;
  --gutter: 32px;
  --sectie: clamp(72px, 9vw, 128px);
  --lijn: 3px solid var(--color-inkt);
  --schaduw: 8px 8px 0 var(--color-accent);
  --radius: 4px;
  --kolom: clamp(24px, 5vw, 64px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background-color: var(--color-paper);
  /* het halftoonraster van drukwerk, alleen op de grond */
  background-image: radial-gradient(var(--color-raster) 1.2px, transparent 1.5px);
  background-size: 10px 10px;
  color: var(--color-ivoor);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-flits); outline-offset: 3px; }
.paneel :focus-visible { outline-color: var(--color-accent); }
.speler iframe:focus-visible { outline: 3px solid var(--color-flits); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
html { scrollbar-color: var(--color-accent) var(--color-paper); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--color-flits); color: var(--color-inkt); font-weight: 800; border-radius: var(--radius); }
.skip:focus { top: 16px; }

/* Een paneel: papier met een inktkader en een paarse schaduw, zoals een
   vak in een strip. */
.paneel { background: var(--color-ivoor); color: var(--color-inkt); border: var(--lijn); box-shadow: var(--schaduw); border-radius: var(--radius); }

/* De letter van een stripgeluid: knalgeel met een inktrand. Alleen voor
   drie geluiden op de pagina, en altijd aria-hidden. */
.knal { font-family: var(--font-knal); font-size: 34px; line-height: 1; color: var(--color-flits); -webkit-text-stroke: 2px var(--color-inkt); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--color-inkt); }

/* ---------- knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px;
  border: var(--lijn); border-radius: var(--radius); font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out;
}
.knop--vol { background: var(--color-flits); color: var(--color-inkt); box-shadow: 4px 4px 0 var(--color-accent); }
.knop--rand { background: transparent; color: var(--color-ivoor); border-color: var(--color-ivoor); }
.knop:hover { transform: translate(-2px, -2px); }
.knop--vol:hover { box-shadow: 6px 6px 0 var(--color-accent); }
.knop--rand:hover { background: var(--color-rand-donker); }
.knop:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-accent); }
.paneel .knop--rand { color: var(--color-inkt); border-color: var(--color-inkt); }

/* ---------- kop */
.kop__binnen { display: flex; align-items: center; gap: 24px; padding-block: 20px; flex-wrap: wrap; }
.kop__nav { display: flex; gap: 4px 24px; margin-left: auto; flex-wrap: wrap; align-items: center; font-weight: 800; font-size: 16px; }
.kop__nav a { text-decoration: none; padding-block: 8px; }
.kop__nav a:hover { color: var(--color-goud); }
.kop__boek { color: var(--color-flits); }

/* Het logo is een SVG-bestand (public/assets/merk); hier alleen de maat. */
.brand-mark { display: inline-flex; text-decoration: none; }
.brand-mark img { height: 40px; width: auto; }
.brand-mark--compact img { height: 32px; }

.taal { position: relative; display: flex; align-items: center; gap: 12px; }
.taal__knop { padding: 4px; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.vlag { display: block; width: 27px; height: 18px; border: 1px solid var(--color-rand-donker); }
.vlag--limburg { background: url("/assets/beeld/limburgse-vlag.svg") center / cover no-repeat; }
.vlag--nederland { background: linear-gradient(to bottom, var(--color-nl-rood) 0 33.33%, var(--color-nl-wit) 33.33% 66.66%, var(--color-nl-blauw) 66.66% 100%); }
.taal__melding { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: max-content; padding: 8px 12px; background: var(--color-ivoor); color: var(--color-inkt); border: var(--lijn); border-radius: 14px; font-size: 14px; font-weight: 800; }

/* ---------- omslag */
.omslag { padding-block: 8px var(--sectie); }
.omslag__raster { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kolom); align-items: center; }
.omslag__beeld { margin: 0; padding: 8px; transform: rotate(-1.5deg); }
/* De omslag blijft met kop en knop samen op het eerste scherm. */
.omslag__beeld img { height: min(calc(100svh - 150px), 760px); width: auto; border: 2px solid var(--color-inkt); }
.omslag__tekst { display: grid; gap: 24px; max-width: 34rem; }
.omslag h1 { font-size: clamp(44px, 5.4vw, 78px); }
.omslag__lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--color-zacht); max-width: 30ch; }
.acties { display: flex; flex-wrap: wrap; gap: 16px; }
.opkomst { justify-self: start; padding: 8px 16px; border: 2px solid var(--color-goud); border-radius: 999px; background: none; color: var(--color-goud); font-weight: 800; cursor: pointer; }
.opkomst[aria-pressed="true"] { background: var(--color-goud); color: var(--color-inkt); }

/* ---------- secties */
.sectie { padding-block: var(--sectie); }
.sectie__kop { font-size: clamp(38px, 5vw, 66px); }
.sectie__intro { display: grid; gap: 16px; max-width: 40rem; margin-bottom: 44px; }
.sectie__intro p { color: var(--color-zacht); font-size: 19px; }

/* het ontstaan: drie vakken naast elkaar, met een vertelkader per vak */
.ontstaan .sectie__kop { margin-bottom: 44px; max-width: 14ch; }
.strook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kolom); }
.strook__vak { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.strook__vak:nth-child(2) { transform: translateY(28px); }
.strook__vak img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--lijn); }
.kader { padding: 16px 16px 16px; font-weight: 800; font-size: 16px; line-height: 1.5; }

/* de helden: vijf kaarten die omdraaien naar de echte foto */
.kaarten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.kaart { display: grid; gap: 8px; align-content: start; }
.kaart__beeld { position: relative; padding: 8px; perspective: 1200px; margin-bottom: 8px; }
.kaart__beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; backface-visibility: hidden; transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.kaart__achter { position: absolute; inset: 6px; width: calc(100% - 12px) !important; transform: rotateY(180deg); }
.kaart.is-om .kaart__voor { transform: rotateY(-180deg); }
.kaart.is-om .kaart__achter { transform: rotateY(0deg); }
.kaart h3 { font-size: 23px; color: var(--color-ivoor); }
.kaart__naam { font-size: 14px; color: var(--color-zacht); }
.kaart__draai { min-height: 44px; justify-self: start; margin-top: 4px; padding: 8px 12px; border: 2px solid var(--color-ivoor); border-radius: 999px; background: none; color: var(--color-ivoor); font-size: 14px; font-weight: 800; cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out; }
.kaart__draai:hover, .kaart__draai[aria-pressed="true"] { background: var(--color-ivoor); color: var(--color-inkt); }

.bijrollen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kolom); margin-top: 48px; }
.bijrol { padding: 24px 24px; border: 2px solid var(--color-goud); border-radius: var(--radius); display: grid; gap: 8px; }
.bijrol h3 { font-size: 26px; color: var(--color-goud); }
.bijrol p { color: var(--color-zacht); }
.bijrol--schurk { border-style: dashed; border-color: var(--color-zacht); }
.bijrol--schurk h3 { color: var(--color-ivoor); }

/* de wapenfeiten */
.leedjes__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kolom); align-items: start; }
.leedjes__tekst { display: grid; gap: 32px; }
.lijst { border-top: 1px solid var(--color-rand-donker); }
.lijst li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--color-rand-donker); }
.lijst__nr { font-family: var(--font-display); font-size: 22px; color: var(--color-accent-licht); }
.lijst__titel { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
.lijst__prijs { display: inline-block; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: var(--color-goud); color: var(--color-inkt); font-family: var(--font-body); font-size: 13px; font-weight: 800; vertical-align: middle; }
.lijst__duur { color: var(--color-zacht); font-variant-numeric: tabular-nums; }
.nieuw { position: relative; padding: 28px 28px 24px; display: grid; gap: 8px; }
.nieuw .knal { position: absolute; top: -22px; right: 18px; transform: rotate(6deg); }
.nieuw h3 { font-size: 40px; }
.speler { padding: 8px; background: var(--color-inkt); color: var(--color-ivoor); min-height: 360px; display: grid; place-content: center; gap: 16px; text-align: center; }
.speler > p { padding-inline: 24px; color: var(--color-zacht); font-size: 15px; max-width: 45ch; }
.speler :focus-visible { outline-color: var(--color-flits); }
.speler:has(iframe) { display: block; min-height: 0; }
.speler iframe { display: block; width: 100%; height: 452px; border: 0; border-radius: 12px; }

/* de missie */
.missie__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kolom); align-items: start; }
.briefing { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; }
.briefing__lijst > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 2px solid var(--color-inkt); }
.briefing dt { font-weight: 800; }
.agenda { display: grid; gap: 24px; justify-items: start; }
.agenda h3 { font-size: 32px; }
.agenda__lijst { width: 100%; display: grid; gap: 12px; }
.agenda__lijst li { display: grid; gap: 4px; padding: 16px 16px; border: 2px solid var(--color-accent); background: var(--color-paper-2); border-radius: var(--radius); }
.agenda__lijst time { color: var(--color-goud); font-weight: 800; }
.agenda__lijst strong { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.agenda__lijst span { color: var(--color-zacht); }

/* het bretel-signaal */
.boeken__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kolom); align-items: start; }
.boeken__tekst { display: grid; gap: 20px; }
.boeken__tekst p { color: var(--color-zacht); font-size: 19px; max-width: 45ch; }
.contact > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; padding-block: 12px; border-top: 1px solid var(--color-rand-donker); }
.contact dt { color: var(--color-zacht); }
.contact a { color: var(--color-goud); }
.formulier { padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; }
.formulier__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.veld { display: grid; gap: 8px; font-weight: 800; font-size: 15px; }
.veld input, .veld textarea { width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--color-inkt); border-radius: var(--radius); background: var(--color-veld); color: var(--color-inkt); font-size: 16px; font-weight: 400; }
.veld textarea { resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.veld [aria-invalid="true"] { border-color: var(--color-fout); }
.veld__fout { color: var(--color-fout); font-size: 14px; font-weight: 800; }
.formulier .knop { justify-self: start; }
.formulier__melding { padding: 12px 16px; border: 2px solid var(--color-fout); border-radius: var(--radius); background: var(--color-ivoor-2); font-weight: 800; }
.formulier__privacy { color: var(--color-grijs); font-size: 14px; }
.formulier--klaar { position: relative; gap: 12px; }
.formulier--klaar .knal { transform: rotate(-4deg); justify-self: start; }
.formulier--klaar h3 { font-size: 36px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- voet */
.voet { padding-block: 56px 64px; border-top: 1px solid var(--color-rand-donker); background: var(--color-paper-2); }
.voet__raster { display: grid; gap: 24px; justify-items: start; }
.voet__links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 800; }
.voet__links a { text-decoration: none; }
.voet__links a:hover { color: var(--color-goud); }
.voet__credits { color: var(--color-zacht); font-size: 14px; max-width: 60ch; }

/* ---------- smaller */
@media (max-width: 60rem) {
  :root { --gutter: 24px; }
  .omslag__raster { grid-template-columns: minmax(0, 1fr); }
  .omslag__tekst { order: -1; max-width: none; }
  .omslag__beeld { justify-self: center; max-width: 30rem; }
  .omslag__beeld img { height: auto; width: 100%; }
  .strook { grid-template-columns: minmax(0, 1fr); }
  .strook__vak:nth-child(2) { transform: none; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leedjes__raster, .missie__raster, .boeken__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; }
  .kop__binnen { gap: 12px 16px; }
  .kop__nav { order: 3; width: 100%; margin-left: 0; gap: 4px 16px; font-size: 15px; }
  .taal { margin-left: auto; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kaart h3 { font-size: 19px; }
  .bijrollen, .formulier__rij { grid-template-columns: minmax(0, 1fr); }
  .briefing__lijst > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lijst li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; }
  .speler iframe { height: 380px; }
  .omslag__beeld { transform: rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Vijf kaarten in twee kolommen: de laatste in het midden, niet alleen links. */
@media (max-width: 40rem) {
  .kaarten > .kaart:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}