/* =============================================================
   Saint Dutch: sd-home.css (v2, pakket HOME)
   Home (/) en edities (/edities). Bouwt op sd-core.css (tokens, drie stemmen,
   componenten), sd-shell.css en sd-scroll.css (engine van MOTION); hier staat
   alleen wat daar niet in zit. Prefix: sd-home- (home), sd-ed- (edities).

   Ritme (ad-opus 3.1): label -> statement 20 px (--sd-gap-label),
   statement -> tekst 28 px (--sd-gap-text), tekst -> beeld 48 px (--sd-gap-media).
   Beweging: alleen het beeld en de draad; tekst staat stil. Bij reduce, zonder JS
   en in print staat alles in de eindtoestand.

   1 gedeeld              2 opening               3 I de ruis
   4 II de edities        5 III de draad (scène)  6 IV de man erachter
   7 V de eersten         8 VI reserveren         9 edities: intro
   10 edities: werelden   11 edities: wat ze delen
   12 edities: kiezen en reserveren               13 beweging, contrast, print
   ============================================================= */

/* ---------- 1. Gedeeld ---------- */
:root {
  /* Sluiers voor tekst op beeld: inkt (#0e0d0b) in vier sterktes */
  --sd-home-veil-90: rgba(14, 13, 11, 0.9);
  --sd-home-veil-70: rgba(14, 13, 11, 0.7);
  --sd-home-veil-40: rgba(14, 13, 11, 0.4);
  --sd-home-veil-15: rgba(14, 13, 11, 0.15);
  --sd-home-veil-0: rgba(14, 13, 11, 0);
}

/* De hoofdstukken regelen hun eigen ritme: geen grid-gap, wel vaste afstanden per element */
.sd-home-ruis .sd-chapter__inner,
.sd-home-edities__intro,
.sd-home-maker__inner,
.sd-home-eersten .sd-chapter__inner,
.sd-home-reserve__inner,
.sd-ed-deel__inner,
.sd-ed-kiezen__inner {
  row-gap: 0;
}

.sd-chapter__inner > * {
  min-width: 0;
}

/* Op het 12-koloms raster van .sd-chapter__inner (vanaf 900 px) loopt alles over de volle breedte, tenzij een regel
   verderop een eigen kolom geeft (:where houdt de specificiteit laag) */
:where(.sd-home-ruis, .sd-home-edities, .sd-home-maker, .sd-home-eersten, .sd-home-reserve, .sd-ed-deel, .sd-ed-kiezen) .sd-chapter__inner > * {
  grid-column: 1 / -1;
}

/* De grote statements van een hoofdstuk: 44 px op een telefoon, hooguit 72 px breed */
.sd-home-edities__statement,
.sd-home-reserve__tekst .sd-statement,
.sd-ed-deel__statement,
.sd-ed-kiezen__statement {
  font-size: clamp(2.75rem, 2.15rem + 2.45vw, 4.5rem);
}

/* Vier steken onder een naam (6/4, in de draadkleur van het oppervlak); met een muis groeit de draad */
.sd-home-portaal__naam::after,
.sd-home-maker__waarden::before {
  content: "";
  display: block;
  width: calc(4 * var(--sd-stitch) + 3 * var(--sd-stitch-gap));
  height: 1.5px;
  color: var(--sd-accent);
  background: var(--sd-stitch-x);
}

/* ---------- 2. Opening ---------- */
.sd-home-open {
  justify-content: flex-end;
  padding-block: calc(var(--sd-header-h) + 2rem) clamp(2.25rem, 6svh, 3.5rem);
  overflow: hidden;
}

.sd-home-open__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--sd-ink-3);
}

.sd-home-open__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 34%;
  transform-origin: 46% 40%;
}

/* Een zachte overgang onderaan het beeld; de eigenlijke sluier zit aan het tekstblok vast (hieronder) */
.sd-home-open__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sd-home-veil-40) 0%, var(--sd-home-veil-0) 45%);
}

.sd-home-open__inner {
  position: relative;
  display: grid;
  justify-items: start;
}

/* Stille sluier in het onderste derde, vast aan het tekstblok: begint 9rem boven de kop, is achter "More knit." al
   dicht (0,86) en loopt door tot de onderrand. Zo staat de kop op rustige stof, ook als de tekst op een smal of laag
   scherm (Instagram, 360 px) hoger wordt; daarboven blijft het garen ongerept. */
.sd-home-open__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9rem;
  bottom: -12rem; /* voorbij de onderrand; de opening klipt */
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(to bottom, var(--sd-home-veil-0) 0, rgba(14, 13, 11, 0.54) 9rem, rgba(14, 13, 11, 0.86) 12.5rem, var(--sd-home-veil-90) 100%);
  pointer-events: none;
}

.sd-home-open__claim {
  max-width: none;
}

/* "More knit." in de fluisterstem; de rijgsteek ligt eronder (de engine tekent hem, de eindtoestand staat in CSS) */
.sd-home-open__fluister {
  position: relative;
  display: inline-block;
  padding-bottom: 0.06em;
}

.sd-home-open__steek {
  position: absolute;
  left: 0.04em;
  bottom: 0;
  width: calc(100% - 0.14em);
  height: 4px;
  overflow: visible;
  color: var(--sd-thread);
  pointer-events: none;
}

.sd-home-open__steek path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-dasharray: var(--sd-stitch) var(--sd-stitch-gap);
  vector-effect: non-scaling-stroke;
}

.sd-home-open__lead {
  max-width: 21em;
  margin-top: var(--sd-gap-label);
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-lead);
  color: var(--sd-paper);
  text-wrap: pretty;
}

.sd-home-open__cta {
  display: grid;
  justify-items: start;
  gap: 0.875rem;
  margin-top: var(--sd-gap-text);
}

.sd-home-open__prijs {
  font-size: var(--sd-fs-small);
  line-height: 1.4;
  color: var(--sd-soft-paper);
}

.sd-home-open__prijs .sd-merk {
  margin-right: 0.2em;
  font-size: 1.125rem;
  color: var(--sd-paper);
}

@media (min-width: 600px) {
  .sd-home-open__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
  }
}

/* Liggend scherm: het brede beeld; de tekst staat links onder. Dezelfde tekstsluier, maar alleen links: vanaf de
   rechterrand van de kop loopt hij uit (masker), zodat rechts en boven het garen helder blijft */
@media (min-aspect-ratio: 5/4) {
  .sd-home-open__media img {
    object-position: 42% 50%;
    transform-origin: 42% 50%;
  }

  /* van de schermrand tot 48rem voorbij het begin van de kop; de laatste 12rem lopen uit */
  .sd-home-open__inner::before {
    right: auto;
    width: calc(50vw - 50% + 48rem);
    background: linear-gradient(to bottom, var(--sd-home-veil-0) 0, rgba(14, 13, 11, 0.56) 9rem, rgba(14, 13, 11, 0.84) 14rem, rgba(14, 13, 11, 0.88) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 12rem), transparent 100%);
  }
}

@media (min-width: 900px) {
  .sd-home-open {
    padding-bottom: clamp(3.5rem, 9svh, 6.5rem);
  }
}

/* Het beeld heeft een naam en een route: rechtsonder, alleen vanaf 900 px (op een telefoon is de opening vol).
   Een zachte inktlaag achter het label houdt het leesbaar op het koperen garen. */
.sd-home-open__label {
  display: none;
}

@media (min-width: 900px) {
  .sd-home-open__label {
    position: absolute;
    z-index: 1;
    right: var(--sd-gutter);
    bottom: clamp(3.5rem, 9svh, 6.5rem);
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.875rem;
    font-size: var(--sd-fs-small);
    font-weight: var(--sd-w-strong);
    letter-spacing: var(--sd-ls-btn);
    color: var(--sd-paper);
    background-color: rgba(14, 13, 11, 0.55);
  }
}

/* ---------- 3. I De ruis ---------- */
.sd-home-ruis {
  padding-top: clamp(3rem, 1.9rem + 4.5vw, 5rem);
  padding-bottom: 0;
}

/* De strook: mobiel 4:5, breed 21:9. De loop (sd-home.js) komt over de poster heen zodra hij speelt */
.sd-home-ruis__strook {
  position: relative;
  margin-top: var(--sd-gap-label);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sd-ink-3);
}

.sd-home-ruis__strook img,
.sd-home-ruis__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 66%;
}

.sd-home-ruis__video {
  opacity: 0;
  transition: opacity 1200ms var(--sd-ease);
}

.sd-home-ruis__video.is-playing {
  opacity: 1;
}

/* Gedempt: een vaste lichte sluier over het hele beeld, onderin dichter voor het statement */
.sd-home-ruis__strook::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(14, 13, 11, 0.97) 0%, var(--sd-home-veil-90) 9%, var(--sd-home-veil-40) 32%, var(--sd-home-veil-0) 58%),
    var(--sd-home-veil-15);
  pointer-events: none;
}

.sd-home-ruis__statement {
  position: absolute;
  left: var(--sd-gutter);
  right: var(--sd-gutter);
  bottom: clamp(1.5rem, 5vw, 3.5rem);
  z-index: 2;
  max-width: none;
  font-size: var(--sd-fs-h1);
  font-weight: var(--sd-w-display);
  line-height: var(--sd-lh-h1);
  letter-spacing: var(--sd-ls-h1);
  color: var(--sd-paper);
}

/* Het cijfer is het scharnier van het verhaal: gewone tekstmaat, geen kleine letter; geen teller */
.sd-home-ruis__feit {
  max-width: 36rem;
  margin-top: var(--sd-gap-text);
  font-size: var(--sd-fs-body);
  line-height: var(--sd-lh-body);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

.sd-home-ruis__bron {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--sd-fs-label);
  line-height: 1.45;
  color: var(--sd-fg-muted);
}

/* De overgang: de man alleen op het pad; de brugregel is de onderste regel van het beeld */
.sd-home-overgang {
  position: relative;
  margin: var(--sd-gap-media) 0 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sd-ink-3);
}

.sd-home-overgang img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.sd-home-overgang::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sd-home-veil-90) 0%, var(--sd-home-veil-40) 26%, var(--sd-home-veil-0) 48%);
  pointer-events: none;
}

.sd-home-overgang__regel {
  position: absolute;
  left: var(--sd-gutter);
  right: var(--sd-gutter);
  bottom: clamp(1.5rem, 5vw, 3.5rem);
  z-index: 1;
  margin: 0;
}

.sd-home-overgang__regel .sd-whisper {
  display: block;
  max-width: 13em;
  font-size: var(--sd-fs-statement);
  line-height: var(--sd-lh-statement);
  letter-spacing: var(--sd-ls-statement);
  text-wrap: balance;
}

@media (min-width: 700px) {
  .sd-home-overgang {
    aspect-ratio: 21 / 9;
  }

  /* Liggende loop als strook van 3,15:1: met 72 % blijven bronrijen 226-632 in beeld (de twee mannen); de winkelnaam
     erboven (rij 172-215 over de hele loop, ook op de poster) en de naamborden onderaan (vanaf rij 635) vallen erbuiten */
  .sd-home-ruis__strook {
    aspect-ratio: 63 / 20;
  }

  .sd-home-ruis__strook img,
  .sd-home-ruis__video {
    object-position: 50% 72%;
  }

  .sd-home-overgang img {
    object-position: 58% 24%;
  }
}

/* ---------- 4. II De edities ---------- */
.sd-home-edities__statement {
  margin-top: var(--sd-gap-label);
}

.sd-home-edities__tekst {
  max-width: 34rem;
  margin-top: var(--sd-gap-text);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

/* Het open nummer: "Saint #" met drie streepjes waar de cijfers komen. De streepjes rijgen zich (draad-engine). Mobiel onder
   de alinea, vanaf 900 px in de rechterkolom naast de alinea. Vaste maat: de steek in de engine is in pixels. */
.sd-home-nummer {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  margin: var(--sd-gap-media) 0 0;
}

.sd-home-nummer__kop {
  font-family: var(--sd-font-merk);
  font-size: 1rem;
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sd-fg);
}

/* De regel is zo hoog als de cijfers zouden zijn (1em): de # hangt erboven, de streepjes staan waar de cijfers op de lijn staan */
.sd-home-nummer__no {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 1em;
  font-family: var(--sd-font-merk);
  font-size: 3.25rem;
  font-weight: var(--sd-w-merk);
  line-height: 1;
  font-variant-ligatures: none;
  color: var(--sd-fg);
}

.sd-home-nummer__hash {
  align-self: flex-start;
  margin-top: 0.08em;
  font-size: 0.42em;
  line-height: 1;
  color: var(--sd-accent);
}

.sd-home-nummer__open {
  width: 92px; /* drie steken van 24 px en twee openingen van 10 px */
  height: 4px;
  margin-bottom: 0.14em;
  overflow: visible;
  color: var(--sd-accent);
}

.sd-home-nummer__open path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 24px 10px;
  vector-effect: non-scaling-stroke;
}

.sd-home-nummer__regel {
  max-width: 17rem;
  margin-top: 0.75rem;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

/* Vanaf 900 px begint de kolom waar de tweede tegel begint (kolom 7 van het raster) */
@media (min-width: 900px) {
  .sd-home-nummer {
    grid-column: 7 / -1;
    grid-row: 3;
    margin-top: var(--sd-gap-text);
  }
}

/* Zekerheden op het beslismoment, onder de portalen: de keuzehulp als rustige zin, daaronder verzending en retour, en de stof */
.sd-home-keuze {
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin: var(--sd-gap-media) auto 0;
}

.sd-home-keuze__hulp {
  max-width: 34rem;
  font-family: var(--sd-font-serif);
  font-size: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);
  line-height: 1.45;
  color: var(--sd-fg-soft);
  text-wrap: pretty;
  hyphens: manual;
}

.sd-home-keuze__zeker {
  max-width: 40rem;
  margin-top: 0.75rem;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-muted);
  text-wrap: pretty;
}

.sd-home-keuze__hulp + .sd-home-keuze__zeker {
  margin-top: var(--sd-gap-text);
}

/* Vanaf 900 px: links de keuzehulp, rechts (onder de tweede tegel) verzending, retour en de stof */
@media (min-width: 900px) {
  .sd-home-keuze {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sd-gap-lg);
    align-items: start;
  }

  .sd-home-keuze__hulp {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .sd-home-keuze .sd-home-keuze__zeker {
    grid-column: 2;
    margin-top: 0;
  }

  .sd-home-keuze .sd-home-keuze__zeker + .sd-home-keuze__zeker {
    margin-top: 0.75rem;
  }
}

/* Twee portalen: beeld en een rustige regel eronder. Mobiel gestapeld en schermbreed, vanaf 700 px naast elkaar */
.sd-home-portalen {
  display: grid;
  gap: var(--sd-gap-media);
  margin: var(--sd-gap-media) 0 0;
  padding: 0;
  list-style: none;
  scroll-margin-top: calc(var(--sd-header-h, 3.5rem) + 1rem);
}

.sd-home-portaal {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sd-home-portaal:focus-visible {
  outline-offset: 4px;
}

.sd-home-portaal__beeld {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-home-portaal__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1600ms var(--sd-ease);
}

.sd-home-portaal[data-edition="aion"] .sd-home-portaal__beeld img {
  object-position: 48% 42%; /* focal van aion-hero-sq (v3) */
}

.sd-home-portaal__tekst {
  display: grid;
  justify-items: start;
  padding: 1.25rem var(--sd-gutter) 0;
}

/* Naam en prijs op één regel, op de basislijn */
.sd-home-portaal__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  width: 100%;
}

.sd-home-portaal__naam {
  font-family: var(--sd-font-merk);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: var(--sd-ls-caps);
  text-transform: uppercase;
  font-variant-ligatures: none;
}

.sd-home-portaal__naam::after {
  margin-top: 0.75rem;
  transition: width 600ms var(--sd-ease);
}

.sd-home-portaal__prijs {
  font-size: var(--sd-fs-label);
  white-space: nowrap;
  color: var(--sd-fg-muted);
}

.sd-home-portaal__prijs .sd-merk {
  margin-right: 0.3em;
  font-size: 1.25rem;
  color: var(--sd-fg);
}

.sd-home-portaal__claim {
  max-width: 28em;
  margin-top: 1rem;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

/* Status alleen als hij iets toevoegt: Laatste n, Uitverkocht. "Beschikbaar" zegt de prijs al. */
.sd-home-portaal__status {
  margin-top: 0.85rem;
}

.sd-home-portaal[data-status="available"] .sd-home-portaal__status:not([data-toon="laatste"]) {
  display: none;
}

.sd-home-portaal__link {
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: var(--sd-w-strong);
  letter-spacing: var(--sd-ls-btn);
}

/* ORIGIN en PHAROS: één regel, geen kaarten */
.sd-home-volgende {
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin: var(--sd-gap-media) auto 0;
  padding-top: var(--sd-s-5);
  border-top: 1px solid var(--sd-line);
  font-family: var(--sd-font-serif);
  font-size: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);
  line-height: 1.45;
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

.sd-home-volgende__naam {
  font-family: var(--sd-font-merk);
  font-size: 0.84em;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps-s);
  color: var(--sd-fg);
  text-decoration: underline;
  text-decoration-color: var(--sd-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--sd-dur-s) var(--sd-ease-ui);
}

@media (hover: hover) and (pointer: fine) {
  .sd-home-volgende__naam:hover {
    text-decoration-color: var(--sd-accent);
  }
}

.sd-home-volgende__link {
  display: flex;
  width: fit-content;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  font-family: var(--sd-font-sans);
  font-size: 0.9375rem;
  font-weight: var(--sd-w-strong);
  letter-spacing: var(--sd-ls-btn);
  color: var(--sd-fg);
}

@media (min-width: 700px) {
  .sd-home-portalen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sd-gap-lg);
    width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
    margin-inline: auto;
  }

  /* Een portaal past in één scherm: beeld vierkant, nooit hoger dan het scherm min de tekst eronder */
  .sd-home-portaal__beeld {
    max-height: max(26rem, 100svh - 17rem);
  }

  .sd-home-portaal__tekst {
    padding: 1.5rem 0 0;
  }
}

@media (min-width: 900px) {
  .sd-home-edities__statement {
    grid-column: 1 / span 8;
  }

  .sd-home-edities__tekst {
    grid-column: 1 / span 6;
  }
}

/* Alleen met een muis: het beeld komt een fractie dichterbij, de steek groeit, de draad onder de link trekt vol */
@media (hover: hover) and (pointer: fine) {
  .sd-home-portaal:hover .sd-home-portaal__beeld img {
    transform: scale(1.035);
  }

  .sd-home-portaal:hover .sd-home-portaal__naam::after {
    width: 100%;
  }

  .sd-home-portaal:hover .sd-home-portaal__link {
    background-size: 100% 1px, 100% 1px;
  }

  .sd-home-portaal:hover .sd-home-portaal__link::after {
    transform: translateX(0.35em);
  }
}

.sd-home-portaal:focus-visible .sd-home-portaal__naam::after {
  width: 100%;
}

/* ---------- 4b. Het licht (sd-light.js) ---------- */
/* Eén lens, twee plekken: de EREBOS-tegel (de omgeving dimt, een koperen lens volgt de hand) en de koperdraden in de opening
   (alleen de lens). De lens is een zachte cirkel met daarin een kopie van het beeld; alleen transform beweegt. Het donkerder
   worden is een inktlaag waarvan alleen de dekking verandert. Licht vermenigvuldigt (de kopie is helderder, de zwarte stof
   blijft zwart) en telt niet op: geen screen, geen gloed, nooit goud, nooit op tekst. Het script zet data-licht en de lagen
   alleen met een muis, zonder verminderde beweging en zonder save-data; anders staat het beeld zoals het was. */
.sd-licht-dim {
  position: absolute;
  inset: 0;
  background: var(--sd-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms var(--sd-ease);
}

.sd-licht-lens {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity 450ms var(--sd-ease);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 36%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 36%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
}

/* De kopie erft anders de regels van het basisbeeld (formaat, overgang van 1600 ms); alleen de positie mag bewegen */
.sd-licht-lens img {
  position: absolute;
  inset: 0 auto auto 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transition: none;
  will-change: transform;
  filter: var(--sd-licht-filter, none);
}

.is-licht > .sd-licht-dim {
  opacity: var(--sd-licht-dim, 0.5);
}

.is-licht > .sd-licht-lens {
  opacity: 1;
}

/* EREBOS: donkerbruin met koper; de lens maakt het garen helderder, de stof blijft donker */
.sd-home-portaal[data-edition="erebos"] .sd-home-portaal__beeld {
  --sd-licht-dim: 0.5;
  --sd-licht-filter: brightness(1.55) contrast(1.1) saturate(1.1);
}

/* AION: lichtgrijs met de naam in bijna dezelfde kleur. Eén gedrag, andere afstelling. De afstelling uit de afspraak (omgeving 0,82,
   lens 1,08 met contrast 1,35) bleekt het midden uit tot een witte vlek op de lichte stof, zeven proeven lang; een donkerdere
   omgeving (0,5, zoals EREBOS) met een natuurlijker lens leest als een lichtpoel in een schemerige kamer. */
.sd-home-portaal[data-edition="aion"] .sd-home-portaal__beeld {
  --sd-licht-dim: 0.5;
  --sd-licht-filter: contrast(1.3) brightness(1.06);
}

/* Opening: de foto is donker (de nachtlaag, ink op 0,78) zodat de lens het koper echt laat oplichten. De nachtlaag bestaat
   alleen waar de lamp werkt: sd-light.js zet data-licht op de opening bij een muis, zonder verminderde beweging en zonder
   save-data. Op een telefoon en bij reduce staat de foto zoals hij was. Leon vroeg om "een stuk donkerder" en daarna om
   "nog ietsje donkerder" (14 oktober: 0,7, daarna 0,78). */
.sd-home-open__media {
  --sd-licht-nacht: 0.78;
  --sd-licht-filter: brightness(1.6) contrast(1.22) saturate(1.15);
}

.sd-licht-nacht {
  position: absolute;
  inset: 0;
  background: var(--sd-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--sd-ease);
}

.sd-home-open[data-licht] .sd-licht-nacht {
  opacity: var(--sd-licht-nacht, 0.78);
}

/* Een tegel met de lens schaalt niet mee: het basisbeeld en de kopie moeten gelijk liggen */
@media (hover: hover) and (pointer: fine) {
  .sd-home-portaal[data-licht]:hover .sd-home-portaal__beeld img {
    transform: none;
  }
}

/* ---------- 4c. Van dichtbij (drie details per editie) ---------- */
/* Een rij tekstknoppen onder de tegel, naast de link (een link mag geen knoppen bevatten). Een tik toont het macrobeeld en één
   zin; het vlak opent door een tik, dus zonder layoutsprong die telt. Zonder script blijft de rij verborgen. */
.sd-home-punten[hidden],
.sd-home-punten__vlak[hidden] {
  display: none;
}

.sd-home-punten {
  margin-top: 1.25rem;
  padding: 0 var(--sd-gutter);
}

@media (min-width: 700px) {
  .sd-home-punten {
    padding: 0;
  }
}

.sd-home-punten__kop {
  margin: 0;
  font-size: var(--sd-fs-label);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  color: var(--sd-fg-muted);
}

.sd-home-punten__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-home-punt {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--sd-w-strong);
  letter-spacing: var(--sd-ls-btn);
  color: var(--sd-fg);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
}

.sd-home-punt[aria-expanded="true"] {
  background-size: 100% 1px, 100% 1px;
}

.sd-home-punten__vlak {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sd-line);
}

.sd-home-punten__beeld {
  display: block;
  width: 6rem;
  height: 7.5rem;
  object-fit: cover;
  background: var(--sd-media-bg);
}

.sd-home-punten__tekst {
  max-width: 28em;
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

@media print {
  .sd-home-punten {
    display: none;
  }
}

/* ---------- 5. III De draad ---------- */
/* Eén beeld (de steek van dichtbij) en drie zinnen die na elkaar verschijnen; geen vastgepinde scène meer. Mobiel vult het beeld
   het scherm met de tekst onderin op een sluier; vanaf 900 px staat het beeld rechts en de tekst links. De zinnen wachten
   alleen als sd-home.js dat vraagt (is-wacht): zonder script en bij reduce staat alles er meteen. */
.sd-home-draad__step {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  width: 100%;
  max-width: none;
  min-height: min(100vh, 48rem);
  min-height: min(100svh, 48rem);
  margin: 0;
  overflow: hidden;
}

.sd-home-draad__beeld {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-home-draad__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 37%;
}

/* Sluier onder de tekst: achter de regels zelf 0,92-0,95, zodat ook de kleine tekst AA haalt (gedempte papiertekst >= 5:1);
   daarboven loopt hij snel uit, het borduurwerk blijft vrij */
.sd-home-draad__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 13, 11, 0.95) 0%, rgba(14, 13, 11, 0.92) 24%, rgba(14, 13, 11, 0.84) 34%, rgba(14, 13, 11, 0.45) 46%, var(--sd-home-veil-0) 60%);
  pointer-events: none;
}

/* Tekst in het onderste kwart, boven de vraagknop rechtsonder */
.sd-home-draad__tekst {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  width: 100%;
  max-width: 36rem;
  padding: 0 var(--sd-gutter) clamp(5rem, 12svh, 7rem);
}

.sd-home-draad__statement {
  max-width: 12em;
  margin-top: var(--sd-gap-label);
}

/* Elke zin op een eigen regel; ze verschijnen na elkaar (0, 320 en 640 ms) en de tekst zelf beweegt niet */
.sd-home-draad__regel {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .sd-home-draad__regel {
    transition: opacity 900ms var(--sd-ease) calc(var(--i, 0) * 320ms);
  }

  .sd-home-draad__step.is-wacht .sd-home-draad__regel {
    opacity: 0;
    transition: none;
  }
}

.sd-home-draad__zin {
  max-width: 28em;
  margin-top: 1rem;
  color: var(--sd-paper);
  text-wrap: pretty;
}

/* Vanaf 900 px schermvullend: de brede macro over de volle breedte (het woordmerk bovenin, effen stof onderin) en de tekst
   linksonder op de stof, zoals op een telefoon. Voorheen stond het beeld in de rechterhelft en was de linkerhelft leeg zwart. */
@media (min-width: 900px) {
  .sd-home-draad__beeld img {
    object-position: 50% 50%;
  }

  .sd-home-draad__beeld::after {
    background: linear-gradient(to top, rgba(14, 13, 11, 0.94) 0%, rgba(14, 13, 11, 0.86) 24%, rgba(14, 13, 11, 0.5) 46%, var(--sd-home-veil-0) 68%);
  }

  .sd-home-draad__tekst {
    width: min(100%, 46rem);
    max-width: none;
    padding: 0 var(--sd-gutter) clamp(4rem, 9svh, 6.5rem);
  }
}

/* ---------- 6. IV De man erachter ---------- */
.sd-home-maker__beeld {
  width: 100%;
  max-width: 30rem;
  margin-top: var(--sd-gap-label);
}

.sd-home-maker__beeld > img {
  object-position: 45% 32%;
}

.sd-home-maker__tekst {
  margin-top: var(--sd-gap-text);
}

.sd-home-maker__zin {
  max-width: 22em;
  font-size: clamp(1.5rem, 1.27rem + 0.95vw, 2rem);
  line-height: 1.3;
}

.sd-home-maker__bron {
  margin: 0;
}

/* De drie waarden: één regel onder het citaat, met vier steken erboven */
.sd-home-maker__waarden {
  margin-top: var(--sd-gap-text);
  font-family: var(--sd-font-serif);
  font-size: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);
  line-height: 1.4;
  color: var(--sd-fg);
}

.sd-home-maker__waarden::before {
  margin-bottom: 1rem;
}

.sd-home-maker__link {
  margin-top: 1.25rem;
}

.sd-home-maker__link .sd-link {
  min-height: 2.75rem;
}

@media (min-width: 900px) {
  .sd-home-maker__inner {
    align-items: center;
  }

  .sd-home-maker__beeld {
    grid-column: 1 / span 5;
    grid-row: 2;
    max-width: none;
  }

  .sd-home-maker__tekst {
    grid-column: 7 / -1;
    grid-row: 2;
    margin-top: var(--sd-gap-label);
  }
}

/* ---------- 7. V De eersten ---------- */
.sd-home-eersten__lijst {
  display: grid;
  gap: var(--sd-gap-media) var(--sd-gap-lg);
  margin: var(--sd-gap-text) 0 0;
  padding: 0;
  list-style: none;
}

.sd-home-eersten__lijst .sd-quote__text {
  max-width: 22em;
}

.sd-home-eersten__lijst .sd-quote__cite {
  margin-top: 1rem;
}

.sd-home-eersten__link {
  margin-top: var(--sd-gap-text);
}

.sd-home-eersten__link .sd-link {
  min-height: 2.75rem;
}

/* Drie volledige citaten: onder elkaar op een telefoon, vanaf 900 px naast elkaar. Lange reviews breken het ritme: daarom
   een kleinere maat dan het citaat van de oprichter in IV. */
@media (min-width: 900px) {
  .sd-home-eersten__lijst:has(> li + li) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-home-eersten__lijst:has(> li + li) .sd-quote__text {
    font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
  }
}

/* ---------- 8. VI Reserveren ---------- */
.sd-home-reserve__tekst {
  display: grid;
  justify-items: start;
  margin-top: var(--sd-gap-label);
}

.sd-home-reserve__tekst .sd-lead {
  max-width: 30rem;
  margin-top: var(--sd-gap-text);
}

.sd-home-reserve__knop {
  margin-top: var(--sd-gap-text);
}

.sd-home-reserve__blok,
.sd-ed-reserve {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.sd-home-reserve__blok {
  margin-top: var(--sd-gap-media);
  padding-top: var(--sd-gap-text);
  border-top: 1px solid var(--sd-line);
}

.sd-home-reserve__uitleg {
  max-width: 28rem;
  margin: 0;
}

/* De ORIGIN-proef boven het formulier: ze komt eraan en geeft het e-mailadres een reden. Eerlijk onderschrift. */
.sd-home-reserve__maan {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.sd-home-reserve__maan[hidden] {
  display: none;
}

.sd-home-reserve__maan img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  background: var(--sd-media-bg);
}

.sd-home-reserve__maan figcaption {
  max-width: 30em;
  font-size: var(--sd-fs-label);
  line-height: 1.45;
  color: var(--sd-fg-muted);
}

.sd-home-reserve__hulp {
  margin-top: var(--sd-gap-text);
  max-width: 28rem;
  color: var(--sd-fg-soft);
}

.sd-home-reserve__form,
.sd-ed-reserve__form {
  gap: 1.25rem;
  max-width: 28rem;
}

.sd-home-reserve__klaar,
.sd-ed-reserve__klaar {
  display: grid;
  gap: 0.75rem;
  padding: var(--sd-s-4) 0 var(--sd-s-4) var(--sd-s-5);
  border-left: 1px solid var(--sd-accent);
}

.sd-home-reserve__klaar:focus,
.sd-ed-reserve__klaar:focus {
  outline: none;
}

.sd-home-reserve__klaar:focus-visible,
.sd-ed-reserve__klaar:focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 4px;
}

@media (min-width: 900px) {
  .sd-home-reserve__tekst {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .sd-home-reserve__blok {
    grid-column: 8 / -1;
    grid-row: 2;
    margin-top: var(--sd-gap-label);
    padding-top: 0.6rem;
    border-top: 0;
  }
}

/* ---------- 9. Edities: intro ---------- */
.sd-ed-intro {
  min-height: 0;
  justify-content: flex-start;
  padding-block: calc(var(--sd-header-h) + clamp(2rem, 6vw, 4.5rem)) clamp(2.5rem, 6vw, 4.5rem);
}

.sd-ed-intro__inner {
  display: grid;
  justify-items: start;
}

.sd-ed-intro__titel {
  max-width: 10em;
  margin-top: var(--sd-gap-label);
}

.sd-ed-intro__lead {
  max-width: 30rem;
  margin-top: var(--sd-gap-text);
  color: var(--sd-fg-soft);
}

/* Een stille inhoudsopgave: de vier namen met hun status, geen kaarten */
.sd-ed-index {
  width: 100%;
  margin-top: var(--sd-gap-media);
  border-top: 1px solid var(--sd-line);
}

.sd-ed-index__lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sd-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-ed-index__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-height: 3.5rem;
  padding: 1rem 0 0.5rem;
  color: var(--sd-fg);
  text-decoration: none;
}

.sd-ed-index__naam {
  font-family: var(--sd-font-merk);
  font-size: 1.0625rem;
  font-weight: var(--sd-w-merk);
  line-height: 1.2;
  letter-spacing: var(--sd-ls-caps-s);
  text-transform: uppercase;
  font-variant-ligatures: none;
  background-image: linear-gradient(var(--sd-accent), var(--sd-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--sd-dur-m) var(--sd-ease);
}

.sd-ed-index__link[data-status="available"] .sd-status::before {
  border-color: var(--sd-accent);
  background: var(--sd-accent);
}

.sd-ed-index__link[data-status="available"] .sd-status {
  color: var(--sd-fg-soft);
}

@media (hover: hover) and (pointer: fine) {
  .sd-ed-index__link:hover .sd-ed-index__naam {
    background-size: 100% 1px;
  }
}

@media (min-width: 760px) {
  .sd-ed-index__lijst {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 10. Edities: de vier werelden ---------- */
/* Een band per editie in de editiekleur (sd-core: .sd-section--edition). Mobiel beeld 1:1 schermbreed en de tekst
   eronder; vanaf 760 px beeld en tekst naast elkaar, om en om, het beeld tot aan de rand. */
.sd-ed-world {
  position: relative;
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-ed-world__inner {
  display: grid;
}

.sd-ed-world__beeld {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-ed-world__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-ed-world__tekst {
  display: grid;
  justify-items: start;
  padding: 1.5rem var(--sd-gutter) 2.75rem;
}

/* "Borduurproef" en "Ontwerp": de eerste regel onder het beeld, gedempt */
.sd-ed-world__bijschrift {
  max-width: 30em;
  margin-bottom: 1rem;
  font-size: var(--sd-fs-label);
  line-height: 1.45;
  color: var(--sd-fg-muted);
}

.sd-ed-world__naam {
  font-size: clamp(2.5rem, 1.95rem + 2.3vw, 4.25rem);
}

.sd-ed-world__regel {
  margin-top: 0.85rem;
  font-size: clamp(1.375rem, 1.21rem + 0.68vw, 1.875rem);
  line-height: 1.2;
  text-wrap: balance;
}

.sd-ed-world__spec {
  max-width: 30em;
  margin-top: var(--sd-gap-label);
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

.sd-ed-world__status {
  margin-top: var(--sd-gap-label);
}

.sd-ed-world__prijs {
  margin-top: var(--sd-gap-label);
  font-size: var(--sd-fs-label);
  color: var(--sd-fg-muted);
}

.sd-ed-world__prijs .sd-merk {
  margin-right: 0.3em;
  font-size: 1.5rem;
  color: var(--sd-fg);
}

.sd-ed-world__koop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: var(--sd-gap-text);
}

.sd-ed-world__koop .sd-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* De knop volgt de status: te bestellen is goud, Binnenkort omlijnd (paint() in sd-home.js zet data-status) */
.sd-ed-world:not([data-status="available"]) .sd-ed-world__knop {
  --_bg: transparent;
  --_fg: var(--sd-fg);
  --_bd: var(--sd-line-strong);
}

.sd-ed-world:not([data-status="available"]) .sd-ed-world__prijs {
  display: none;
}

.sd-ed-world[data-status="available"] .sd-ed-world__status:not([data-toon="laatste"]) {
  display: none;
}

@media (min-width: 760px) {
  /* Het beeld vult altijd de hele band, ook als de tekst (tablet) hoger is dan het vierkant */
  .sd-ed-world__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .sd-ed-world__beeld {
    aspect-ratio: auto;
    min-height: min(46vw, 42rem);
  }

  .sd-ed-world__tekst {
    align-self: center;
    max-width: 36rem;
    padding: clamp(2.5rem, 5vw, 4rem) var(--sd-gutter) clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem);
  }

  .sd-ed-world--flip .sd-ed-world__beeld {
    order: 2;
  }

  .sd-ed-world--flip .sd-ed-world__tekst {
    justify-self: end;
    padding-left: var(--sd-gutter);
    padding-right: clamp(2rem, 6vw, 6rem);
  }
}

/* ---------- 11. Edities: wat ze delen ---------- */
.sd-ed-deel,
.sd-ed-kiezen {
  position: relative;
  padding-block: var(--sd-section);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-ed-deel__statement {
  margin-top: var(--sd-gap-label);
}

.sd-ed-deel__specs {
  max-width: 44rem;
  margin-top: var(--sd-gap-text);
}

/* Compact: term en waarde op één rij, ook op een telefoon */
.sd-ed-deel__specs > div {
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
}

@media (min-width: 600px) {
  .sd-ed-deel__specs > div {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--sd-gap);
  }
}

.sd-ed-deel__prijs {
  max-width: 34rem;
  margin-top: var(--sd-gap-media);
}

.sd-ed-deel__prijs p {
  margin-top: 0.75rem;
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

/* Het nummer, klein: de kaart (sd-core) met het geborduurde nummer (data-reveal="embroider", MOTION) en één zin */
.sd-ed-deel__nummer {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--sd-gap);
  align-items: end;
  margin: var(--sd-gap-media) 0 0;
}

.sd-ed-deel__nummer .sd-number-card {
  width: 100%;
  padding: 0.9rem;
}

.sd-ed-deel__nummer .sd-number-card__note {
  font-size: var(--sd-fs-label);
}

.sd-ed-deel__nummer > figcaption {
  max-width: 22em;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .sd-ed-deel__statement {
    grid-column: 1 / span 9;
  }

  .sd-ed-deel__specs {
    grid-column: 1 / span 7;
    grid-row: 3;
  }

  .sd-ed-deel__prijs {
    grid-column: 1 / span 6;
    grid-row: 4;
  }

  .sd-ed-deel__nummer {
    grid-column: 9 / -1;
    grid-row: 3 / span 2;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    margin-top: var(--sd-gap-text);
  }

  .sd-ed-deel__nummer .sd-number-card {
    width: min(100%, 15rem);
    padding: clamp(1.25rem, 4vw, 1.75rem);
  }
}

/* ---------- 12. Edities: kiezen en reserveren ---------- */
.sd-ed-kiezen__statement {
  margin-top: var(--sd-gap-label);
}

.sd-ed-kiezen__lijst {
  margin: var(--sd-gap-text) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sd-line-strong);
}

.sd-ed-kiezen__rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  min-height: 3.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--sd-line);
  color: var(--sd-fg-soft);
  text-decoration: none;
  transition: color var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-ed-kiezen__vraag {
  font-family: var(--sd-font-serif);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  line-height: 1.35;
  text-wrap: pretty;
}

.sd-ed-kiezen__ant {
  flex: none;
  white-space: nowrap;
}

.sd-ed-kiezen__naam {
  font-family: var(--sd-font-merk);
  font-size: 1rem;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps-s);
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--sd-fg);
}

.sd-ed-kiezen__soon {
  font-size: var(--sd-fs-label);
  color: var(--sd-fg-muted);
}

/* De slotregel voor ORIGIN en PHAROS: "Binnenkort." staat waar bij de andere twee de naam staat */
.sd-ed-kiezen__rij--later .sd-ed-kiezen__soon {
  font-size: var(--sd-fs-small);
  color: var(--sd-fg-soft);
}

@media (hover: hover) and (pointer: fine) {
  .sd-ed-kiezen__rij:hover {
    color: var(--sd-fg);
  }
}

.sd-ed-kiezen__zeker {
  max-width: 34rem;
  margin-top: var(--sd-gap-text);
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
}

.sd-ed-reserve {
  margin-top: var(--sd-gap-media);
  padding: clamp(1.5rem, 6vw, 4rem);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-ed-reserve__kop {
  display: grid;
  gap: 0.75rem;
}

.sd-ed-reserve__kop .sd-lead {
  margin: 0;
  font-size: var(--sd-fs-body);
  line-height: var(--sd-lh-body);
}

@media (min-width: 900px) {
  .sd-ed-kiezen__statement,
  .sd-ed-kiezen__lijst,
  .sd-ed-kiezen__zeker {
    grid-column: 1 / span 9;
  }

  .sd-ed-reserve {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .sd-ed-reserve__klaar {
    grid-column: 2;
  }
}

/* Geen afbreekstreepje midden in een woord in korte, opvallende regels */
.sd-home-open__lead,
.sd-home-edities__tekst,
.sd-home-volgende,
.sd-ed-intro__lead,
.sd-ed-world__spec,
.sd-ed-reserve__kop .sd-lead,
.sd-home-reserve__tekst .sd-lead {
  hyphens: manual;
}

/* ---------- 13. Beweging, contrast, print ---------- */
/* Het openingsbeeld zakt na het laden van 1,03 naar 1: [data-settle] in sd-scroll.css (MOTION); de lijst klipt hier */

@media (prefers-reduced-motion: reduce) {
  .sd-home-ruis__video {
    display: none;
  }

  .sd-home-portaal__beeld img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .sd-home-open__steek path,
  .sd-home-nummer__open path {
    stroke: CanvasText;
  }

  /* Geen lamp en geen nachtlaag in hoog contrast */
  .sd-licht-nacht,
  .sd-licht-dim,
  .sd-licht-lens {
    display: none;
  }

  .sd-home-portaal__naam::after,
  .sd-home-maker__waarden::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media print {
  .sd-home-ruis__video,
  .sd-licht-nacht,
  .sd-licht-dim,
  .sd-licht-lens {
    display: none;
  }

  .sd-home-open {
    min-height: 0;
  }

  .sd-home-open__media img {
    scale: none !important;
  }
}