/* Fotografiesite: één stylesheet voor alle pagina's.
   Kleuren uit haar palet (brief/kleurenpalet.webp). Contrast gemeten:
   ink op paper 15,6 · maroon op paper 12,3 · paper op maroon 12,3 · steel op ink 9,0 · steel op maroon 7,1 ·
   grijs-diep op paper 5,3 · cinnabar op ink 4,6 · cinnabar op paper maar 3,4: daar alleen groot of als versiering. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palet */
  --ink: #001410;          /* Black Bean */
  --paper: #eae9e7;        /* White Echo */
  --maroon: #57000b;       /* Sensational Maroon */
  --cinnabar: #e34525;     /* Cinnabar */
  --grijs: #808183;        /* Neutral Grey */
  --steel: #b2b3b6;        /* Antique Steel */
  /* Afgeleid */
  --grijs-diep: #5e5f61;   /* gedempte tekst op paper */
  --paper-diep: #dfddda;   /* vlakken op paper */
  --roze: #f5bfb3;         /* foutmeldingen op maroon (9,2) */
  --lijn: color-mix(in srgb, var(--ink) 14%, var(--paper));

  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --rand: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --breed: 82rem;
  --sectie: clamp(4.5rem, 3rem + 6vw, 9rem);

  --snel: 160ms;
  --rustig: 700ms;
  --uit: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
.donker :focus-visible, .rood :focus-visible { outline-color: var(--paper); }
::selection { background: var(--maroon); color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  }
}

.overslaan {
  position: absolute; left: var(--rand); top: -4rem; z-index: 20;
  padding: 0.75rem 1rem; background: var(--paper); color: var(--ink);
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.overslaan:focus { top: 1rem; }
.verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Safari op de iPhone kleurt de statusbalk naar de achtergrond van de body, niet naar theme-color: op de homepage
   (die donker begint) is de body daarom inkt en krijgt main zelf het papier. */
body:has(> .held--fotos) { background: var(--ink); }
body:has(> .held--fotos) > main { background: var(--paper); }
.donker { background: var(--ink); color: var(--paper); }
.rood { background: var(--maroon); color: var(--paper); }

/* Kleine kapitalen: labels, navigatie, knoppen */
.label {
  font: 500 0.75rem/1.4 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.wrap { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }

/* ---------- Kop (navigatie) ---------- */
.kop {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap;
  width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto;
  padding-block: 1.5rem;
}
.kop--held { position: absolute; inset: 0 0 auto; z-index: 2; justify-content: center; }
.kop__merk {
  font: 300 1.375rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.kop__nav ul { display: flex; gap: 0.5rem clamp(1.25rem, 3vw, 2.75rem); padding: 0; list-style: none; }
.kop__nav a {
  display: inline-block; padding-block: 0.75rem; /* raakvlak van 44 px */
  text-decoration: none; color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.6rem) / 0 1px no-repeat;
  transition: background-size var(--rustig) var(--uit);
}
.kop__nav a[aria-current] { background-size: 100% 1px; }
@media (hover: hover) { .kop__nav a:hover { background-size: 100% 1px; } }
.kop--held .kop__nav a { color: var(--steel); }
@media (hover: hover) { .kop--held .kop__nav a:hover { color: var(--paper); } }
@media (max-width: 34rem) { .kop:not(.kop--held) { justify-content: center; } }

/* ---------- 1. Held: het logo naast haar foto's ---------- */
/* Telefoon: logo boven, foto's eronder, samen één scherm. Vanaf 48rem: logo links, foto's rechts, elk schermhoog.
   De foto's staan in een lijst van inkt (de rand), zodat het logo nooit op een foto hoeft te staan. */
.held { /* zonder foto's (de 404-pagina): alleen tekst, midden in het scherm */
  display: grid; place-items: center; min-height: 100svh;
  padding: 6rem var(--rand) 5rem; text-align: center;
}
.held--fotos { grid-template-rows: auto 1fr; place-items: stretch; padding: 0; }
.held__paneel {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 2.25rem;
  min-height: 46svh;
  padding: 5.5rem var(--rand) 2rem;
  text-align: center;
}
.held__fotos { position: relative; min-height: 18rem; padding: 0 var(--rand) var(--rand); }
@media (min-width: 48rem) {
  .held--fotos { grid-template-columns: 5fr 7fr; grid-template-rows: none; }
  .held__paneel { min-height: 100svh; padding-bottom: 5.5rem; }
  .held__fotos { padding: clamp(0.75rem, 1.5vw, 1.25rem); padding-left: 0; }
}
/* Het logo zoals op haar factuur en Instagram: MILA in een dunne geometrische letter, STUDIO klein en wijd eronder.
   Komt haar eigen logobestand, dan vervangt een <img> deze tekst. */
.held__logo {
  font: 300 clamp(3.4rem, 1rem + 12vw, 9.5rem)/0.9 var(--sans);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-right: -0.02em; /* de letterafstand na de laatste letter telt niet mee bij het centreren */
}
.held__studio {
  display: block; margin-top: 0.55em; margin-right: -0.7em;
  font: 500 clamp(0.75rem, 0.5rem + 1vw, 1.2rem)/1 var(--sans);
  letter-spacing: 0.7em;
}
@media (min-width: 48rem) { .held__logo { font-size: clamp(4rem, 1rem + 6.5vw, 8.5rem); } }
.held__logo img { margin-inline: auto; max-height: 40svh; width: auto; }
.held__midden { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2rem); }
.held__regel { max-width: 17rem; line-height: 2; text-wrap: balance; color: var(--steel); }
/* Het handtekeningdetail: de ampersand in cinnabar */
.amp {
  font: italic 400 1.6em/0 var(--serif); letter-spacing: 0;
  color: var(--cinnabar); vertical-align: -0.12em; margin-inline: 0.05em;
}
/* Op de telefoon gewoon onder de tagline (Safari's werkbalk maakt het scherm lager dan je denkt); vanaf 48rem onderaan. */
.held__verder {
  display: grid; justify-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem; color: var(--steel); text-decoration: none;
}
@media (min-width: 48rem) {
  .held__verder { position: absolute; left: 50%; bottom: clamp(1.5rem, 4svh, 2.5rem); translate: -50% 0; }
}
.held__verder::after {
  content: ""; width: 1px; height: 2.5rem; background: currentColor;
  transform-origin: top; animation: lijntje 2.4s var(--uit) infinite;
}
@media (hover: hover) { .held__verder:hover { color: var(--paper); } }
@keyframes lijntje {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
/* Zacht binnenkomen, alleen bij de eerste keer laden */
@media (prefers-reduced-motion: no-preference) {
  .held__logo, .held__regel { animation: binnen 1.2s var(--uit) both; }
  .held__regel { animation-delay: 0.25s; }
}
@keyframes binnen { from { opacity: 0; transform: translateY(0.75rem); } }

/* De foto's: drie stuks vloeien in 18 seconden in elkaar over (elk ±5 s te zien, 1,5 s overgang). De negatieve
   vertragingen zetten ze meteen in de pas, met de eerste vol in beeld. Met minder beweging, of met één of twee foto's,
   staat de eerste stil. */
.held__dias { position: relative; height: 100%; min-height: inherit; overflow: hidden; background: #0c2621; }
.held__dia { position: absolute; inset: 0; opacity: 0; }
.held__dia:first-child { opacity: 1; }
.held__dia picture { display: contents; }
.held__beeld { width: 100%; height: 100%; object-fit: cover; }
.held__pauze {
  position: absolute; right: calc(var(--rand) + 0.75rem); bottom: calc(var(--rand) + 0.75rem); z-index: 1;
  display: none; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(234 233 231 / 0.5); border-radius: 50%;
  background: rgb(0 20 16 / 0.55); color: var(--paper); cursor: pointer;
  transition: background-color var(--snel) var(--uit);
}
.held__pauze svg { width: 1rem; height: 1rem; }
.held__speel-icoon, .held__pauze[aria-pressed="true"] .held__pauze-icoon { display: none; }
.held__pauze[aria-pressed="true"] .held__speel-icoon { display: block; }
@media (hover: hover) { .held__pauze:hover { background: rgb(0 20 16 / 0.8); } }
@media (min-width: 48rem) {
  .held__pauze { right: calc(clamp(0.75rem, 1.5vw, 1.25rem) + 1rem); bottom: calc(clamp(0.75rem, 1.5vw, 1.25rem) + 1rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .held__fotos:has(.held__dia:nth-child(3)) .held__pauze { display: grid; }
  /* Losse eigenschappen, geen "animation:": die zou de vertragingen hieronder weer op 0 zetten. */
  .held__dias:has(> .held__dia:nth-child(3)) > .held__dia {
    animation-name: dia; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  }
  .held__dia:nth-child(1) { animation-delay: -1.5s; }
  .held__dia:nth-child(2) { animation-delay: -13.5s; }
  .held__dia:nth-child(3) { animation-delay: -7.5s; }
  .held__fotos.gepauzeerd .held__dia { animation-play-state: paused; }
}
@keyframes dia {
  0%, 28% { opacity: 1; }
  36%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------- 2. Over mij ---------- */
.over { padding-block: var(--sectie); }
/* Met portret: foto links, kop en tekst rechts. Zonder portret: kop links, tekst rechts (op de telefoon onder elkaar). */
.over__raster { display: grid; gap: 1.75rem clamp(2.5rem, 6vw, 6rem); }
.over__foto:not(:has(img)) { display: none; }
@media (min-width: 48rem) {
  .over__raster { grid-template-columns: 5fr 6fr; grid-template-areas: "kop tekst"; align-items: start; }
  .over__raster:has(.over__foto img) { grid-template-areas: "foto kop" "foto tekst"; align-content: center; }
  .over__foto { grid-area: foto; align-self: center; }
  .over__kop { grid-area: kop; }
  .over__tekst { grid-area: tekst; }
  .over__raster:not(:has(.over__foto img)) .over__tekst { padding-top: 2.4rem; } /* begint op de hoogte van de kop */
}
.over__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-diep); }
.over__foto img, .over__foto picture { width: 100%; height: 100%; object-fit: cover; }
.over__kop { display: grid; gap: 1.5rem; align-content: start; }
.over__kop .label { color: var(--maroon); }
.over__tekst { max-width: 36rem; display: grid; gap: 1.5rem; align-content: start; }
.kopregel {
  font: 400 clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem)/1.12 var(--serif);
  letter-spacing: -0.01em;
}
.kopregel em { font-style: italic; color: var(--maroon); }
.donker .kopregel em, .rood .kopregel em { color: inherit; }
.over__tekst p { color: var(--ink); max-width: 34rem; }
.over__tekst .over__slot { font: italic 400 1.375rem/1.4 var(--serif); color: var(--maroon); }
.pijl-link {
  display: inline-flex; align-items: center; gap: 0.75rem; justify-self: start;
  padding-block: 0.75rem; text-decoration: none; color: var(--maroon);
}
.pijl-link::after { content: "→"; font-family: var(--sans); letter-spacing: 0; transition: translate var(--snel) var(--uit); }
@media (hover: hover) { .pijl-link:hover::after { translate: 0.3rem 0; } }

/* ---------- 3. Portfolio: drie luiken ---------- */
.portfolio { padding-block: 0 var(--sectie); }
.portfolio__kop {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem;
  padding-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--lijn);
}
.portfolio__titel {
  font: 400 clamp(2.4rem, 1.4rem + 4vw, 5rem)/1 var(--serif);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.portfolio__kop p { color: var(--grijs-diep); max-width: 24rem; }
.luiken {
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: 0; list-style: none;
}
@media (min-width: 48rem) { .luiken { grid-template-columns: repeat(3, 1fr); } }
.luik { position: relative; display: block; color: var(--paper); text-decoration: none; }
.luik__foto {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grijs);
}
@media (min-width: 48rem) { .luik__foto { aspect-ratio: 2 / 3; } }
.luik__foto img, .luik__foto picture, .luik__foto .plek {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--uit);
}
/* Zachte schaduw onderin, zodat het label leesbaar blijft op elke foto */
.luik__foto::after {
  content: ""; position: absolute; inset: 45% 0 0;
  background: linear-gradient(to top, rgb(0 20 16 / 0.72), rgb(0 20 16 / 0));
  pointer-events: none;
}
.luik__tekst {
  position: absolute; inset: auto 0 0; z-index: 1;
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.luik__naam { display: grid; gap: 0.35rem; }
.luik__naam strong {
  font: italic 400 clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem)/1 var(--serif);
  letter-spacing: -0.01em;
}
.luik__naam .label { color: var(--paper); opacity: 0.9; }
.luik__pijl {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border: 1px solid rgb(234 233 231 / 0.6); border-radius: 50%;
  transition: background-color var(--snel) var(--uit), border-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.luik__pijl svg { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .luik:hover .luik__foto img, .luik:hover .luik__foto .plek { transform: scale(1.04); }
  .luik:hover .luik__pijl { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--ink); }
}
.luik:focus-visible { outline-offset: 4px; }

/* ---------- Plekhouders (tot de echte foto's er zijn) ---------- */
.plek { display: block; width: 100%; background: var(--paper-diep); }
.plek--people  { background: linear-gradient(160deg, #6f7472 0%, #3a4a46 100%); }
.plek--moments { background: linear-gradient(160deg, #9c9c9b 0%, #5e5f61 100%); }
.plek--flavors { background: linear-gradient(160deg, #7a2a2c 0%, #3d0008 100%); }
.vast { overflow: hidden; }

/* ---------- 4. Contact ---------- */
.contact { padding-block: var(--sectie); }
.contact__raster { display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 60rem) { .contact__raster { grid-template-columns: 5fr 6fr; align-items: start; } }
.contact__intro { display: grid; gap: 1.5rem; align-content: start; }
.contact__intro > .label { color: var(--steel); }
.contact__intro > p:not(.label) { max-width: 30rem; }
/* WhatsApp (rond icoon, nummer eronder) en Book a shoot: de twee snelste wegen naar haar */
.direct { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2.5rem; margin-top: 0.5rem; }
.direct__whatsapp {
  display: grid; justify-items: start; gap: 0.6rem;
  color: var(--paper); text-decoration: none;
}
.direct__rond {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--paper); color: var(--maroon);
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.direct__rond svg { width: 1.875rem; height: 1.875rem; fill: currentColor; }
.direct__nummer { font-size: 0.9375rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.direct__boek {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.625rem; padding: 0 1.25rem;
  border: 1px solid rgb(234 233 231 / 0.7); color: var(--paper); text-decoration: none;
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit), border-color var(--snel) var(--uit);
}
/* Het pijltje is versiering: de lege alt-tekst (na de /) houdt het uit de naam van de link. */
.direct__boek::after { content: "↓" / ""; margin-left: 0.6rem; font-family: var(--sans); letter-spacing: 0; }
@media (min-width: 60rem) { .direct__boek::after { content: "→" / ""; } } /* het formulier staat dan ernaast */
@media (hover: hover) {
  .direct__whatsapp:hover .direct__rond { background: var(--cinnabar); color: var(--ink); }
  .direct__boek:hover { background: var(--paper); border-color: var(--paper); color: var(--maroon); }
}
.direct__whatsapp:active .direct__rond, .direct__boek:active { transform: translateY(1px); }
.gegevens { display: grid; gap: 1.25rem; margin-top: 1rem; }
.gegevens div { display: grid; gap: 0.25rem; }
.gegevens dt { color: var(--steel); }
.gegevens dd a { text-decoration-color: rgb(234 233 231 / 0.4); }
@media (hover: hover) { .gegevens dd a:hover { text-decoration-color: currentColor; } }

/* Formulier */
.formulier { display: grid; gap: 1.75rem; }
.formulier__kop { display: grid; gap: 0.6rem; }
.formulier__kop .label { color: var(--paper); scroll-margin-top: 1.5rem; } /* het doel van Book a shoot (#boeken) */
.formulier__kop p { color: var(--steel); max-width: 32rem; }
.veld { display: grid; gap: 0.5rem; border: 0; padding: 0; min-width: 0; }
.veld > label, .veld legend { font-size: 0.9375rem; color: var(--paper); padding: 0; }
.veld__extra { color: var(--steel); }
.veld input[type="text"], .veld input[type="email"], .veld textarea {
  width: 100%; padding: 0.75rem 0;
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid var(--steel); border-radius: 0;
  transition: border-color var(--snel) var(--uit);
}
.veld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.veld ::placeholder { color: var(--steel); opacity: 1; }
.veld input:focus-visible, .veld textarea:focus-visible {
  outline: none; border-bottom-color: var(--paper); box-shadow: 0 1px 0 var(--paper);
}
.veld [aria-invalid="true"] { border-bottom-color: var(--roze); box-shadow: 0 1px 0 var(--roze); }
.veld__fout { color: var(--roze); font-size: 0.9375rem; }
.veld__fout::before { content: "! "; font-weight: 600; }

.keuzes legend { margin-bottom: 0.75rem; }
.keuzes__rij { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.keuze { position: relative; cursor: pointer; }
.keuze input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.keuze span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  border: 1px solid var(--steel); color: var(--paper);
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit), border-color var(--snel) var(--uit);
}
@media (hover: hover) { .keuze:hover span { border-color: var(--paper); } }
.keuze input:checked + span { background: var(--paper); border-color: var(--paper); color: var(--maroon); }
.keuze input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.keuzes[aria-invalid="true"] .keuze span { border-color: var(--roze); }

.honing { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.formulier__privacy { font-size: 0.9375rem; color: var(--steel); }
.formulier__privacy a { color: var(--paper); }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  justify-self: start; min-height: 3.25rem; padding: 0 2rem;
  background: var(--paper); color: var(--maroon); border: 0; border-radius: 0; cursor: pointer;
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
@media (hover: hover) { .knop:hover { background: var(--cinnabar); color: var(--ink); } }
.knop:active { transform: translateY(1px); }
.knop[disabled] { cursor: progress; opacity: 0.75; }
.knop--donker { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .knop--donker:hover { background: var(--maroon); color: var(--paper); } }

.formulier__status:empty { display: none; }
.formulier__status { font-size: 0.9375rem; }
.formulier__status a { color: var(--paper); }
.bedankt { display: grid; gap: 1rem; padding-block: 1rem; }
.bedankt h3 { font: italic 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.15 var(--serif); }
.bedankt:focus { outline: none; }

/* ---------- Voet ---------- */
.voet { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.voet__boven {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgb(178 179 182 / 0.25);
}
.voet__merk { font: 300 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.voet__merk span { display: block; margin-top: 0.75rem; color: var(--steel); font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.24em; }
.voet__links { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; padding: 0; list-style: none; }
.voet__links a { display: inline-block; padding-block: 0.75rem; color: var(--steel); text-decoration: none; }
@media (hover: hover) { .voet__links a:hover { color: var(--paper); } }
.voet__onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-top: 1.5rem; color: var(--grijs); font-size: 0.875rem;
}
.voet--klein { padding-block: 1rem 1.5rem; border-top: 1px solid rgb(178 179 182 / 0.15); }
.voet--klein .voet__onder { align-items: center; padding-top: 0; }
.voet__onder a { color: inherit; }
@media (hover: hover) { .voet__onder a:hover { color: var(--paper); } }

/* ---------- Collectiepagina ---------- */
.collectie__kop { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.terug { display: inline-flex; gap: 0.6rem; padding-block: 0.75rem; color: var(--grijs-diep); text-decoration: none; }
.terug::before { content: "←"; letter-spacing: 0; font-family: var(--sans); transition: translate var(--snel) var(--uit); }
@media (hover: hover) { .terug:hover { color: var(--ink); } .terug:hover::before { translate: -0.3rem 0; } }
.collectie__titel {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.collectie__titel h1 {
  font: italic 400 clamp(4.25rem, 2rem + 11vw, 11rem)/0.85 var(--serif);
  letter-spacing: -0.02em; padding-left: 0.06em; /* de schuine f steekt anders links buiten beeld */
}
.collectie__titel div { display: grid; gap: 0.75rem; max-width: 26rem; padding-bottom: 0.5rem; }
.collectie__titel .label { color: var(--maroon); }
.collectie__titel p:not(.label) { color: var(--grijs-diep); }

.galerij { columns: 1; column-gap: clamp(0.75rem, 1.5vw, 1.25rem); padding-bottom: var(--sectie); }
@media (min-width: 30rem) { .galerij { columns: 2; } }
@media (min-width: 64rem) { .galerij { columns: 3; } }
/* Ruimte als padding, niet als marge: een marge schuift bij een kolombreuk mee naar de top van de volgende kolom. */
.galerij > * { break-inside: avoid; padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem); background-clip: content-box; }
.foto { background-color: var(--paper-diep); }
.foto img { width: 100%; height: auto; }
.foto__link { display: block; cursor: zoom-in; overflow: hidden; }
.foto__link img { transition: transform var(--rustig) var(--uit), opacity var(--rustig) var(--uit); }
@media (hover: hover) { .foto__link:hover img { transform: scale(1.02); } }
.plek--staand { aspect-ratio: 4 / 5; }
.plek--hoog { aspect-ratio: 2 / 3; }
.plek--liggend { aspect-ratio: 3 / 2; }
.plek--vierkant { aspect-ratio: 1; }
.galerij .plek:nth-child(3n + 1) { background-image: linear-gradient(170deg, #c9c9ca, var(--paper-diep)); }
.galerij .plek:nth-child(3n + 2) { background-image: linear-gradient(170deg, var(--steel), #cfcecc); }
.galerij .plek:nth-child(3n) { background-image: linear-gradient(170deg, #d6d1cd, #c4bdb8); }
.galerij__leeg { column-span: all; margin-bottom: 1.5rem; color: var(--grijs-diep); }

.volgende { padding-block: clamp(3rem, 6vw, 5rem); }
.volgende__raster { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .volgende__raster { grid-template-columns: 1fr auto; align-items: end; } }
.volgende__link { display: grid; gap: 0.75rem; justify-items: start; text-decoration: none; }
.volgende__link .label { color: var(--steel); }
.volgende__link strong {
  display: inline-flex; align-items: baseline; gap: 1rem;
  font: italic 400 clamp(3rem, 1.8rem + 5vw, 6rem)/1 var(--serif);
}
.volgende__link strong::after { content: "→"; font: 300 0.5em/1 var(--sans); transition: translate var(--snel) var(--uit); }
@media (hover: hover) { .volgende__link:hover strong::after { translate: 0.4rem 0; } }
.volgende__boek { display: grid; gap: 1rem; justify-items: start; }
.volgende__boek p { color: var(--steel); }

/* ---------- Lichtbak (grote weergave) ---------- */
.lichtbak {
  width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; border: 0;
  background: var(--ink); color: var(--paper);
}
.lichtbak::backdrop { background: rgb(0 20 16 / 0.6); }
.lichtbak[open] { display: grid; grid-template-rows: auto 1fr auto; }
@media (prefers-reduced-motion: no-preference) {
  .lichtbak[open] { animation: open 240ms var(--uit); }
}
@keyframes open { from { opacity: 0; } }
.lichtbak__balk {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem var(--rand);
}
.lichtbak__teller { color: var(--steel); font-variant-numeric: tabular-nums; }
.lichtbak__beeld { display: grid; place-items: center; min-height: 0; padding: 0 var(--rand); touch-action: pan-y; }
.lichtbak__beeld > picture { display: contents; } /* zo past de foto altijd binnen het vak */
.lichtbak__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lichtbak__onder {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem var(--rand) max(1rem, env(safe-area-inset-bottom));
}
.lichtbak__tekst { color: var(--steel); text-align: center; flex: 1; font-size: 0.9375rem; }
.rond {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border: 1px solid rgb(178 179 182 / 0.5); border-radius: 50%;
  background: transparent; color: var(--paper); cursor: pointer;
  transition: background-color var(--snel) var(--uit), border-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.rond svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .rond:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } }
.lichtbak .rond:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }

/* ---------- Tekstpagina (privacy, 404) ---------- */
.tekstpagina { padding-block: clamp(2.5rem, 6vw, 5rem) var(--sectie); }
.tekstpagina__inhoud { max-width: 42rem; display: grid; gap: 1.25rem; }
.tekstpagina h1 { font: 400 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1.05 var(--serif); margin-block: 1rem 1rem; }
.tekstpagina h2 { font: 400 1.5rem/1.2 var(--serif); margin-top: 1.25rem; }
.tekstpagina ul { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.tekstpagina .label { color: var(--maroon); }