/* ==========================================================================
   Richting 2, Nevel.

   De rustige richting. Gecentreerde sectie-inleidingen, de behandelingen als
   lijst, een donkere band voor de werkwijze en een gecentreerde voet. De hero:
   bovenschrift, één grote kop, en daaronder de beeldkaart met een woord op de
   foto en een voetbalk erin.

   Het palet is warm: wit en gebroken wit als grond, één geel als enige kleur,
   en bijna zwart voor de tekst en de donkere vlakken. De koele tonen van de
   kleurgids zijn eruit. Dat is op vraag: de opbouw bleef overeind, de kleur
   moest warm.

   Geel is hier een vlak en geen letter, en op wit wordt het nooit tekst: daar
   is het onleesbaar. Wat kleur moet dragen op een lichte grond, draagt de inkt.

   Op vraag zijn de twee grote gele vlakken eruit: de balk onder de hero en het
   merkwaardenvlak. Daarmee is ook de rij feiten weg. Wat van het geel overblijft
   is klein: de onderstreping in de hero, de badge, en de accentkleur op de
   donkere banden. Het zand blijft de stille kant ervan dragen, in de notitie
   onder de hero, in de grond van de beeldkaart en in de iconen van de lijst.
   De pagina is daarmee stiller dan ze was, en dat is de bedoeling: wat de
   secties nu scheidt is wit, niet kleur.

   Alle klassen beginnen met `s2-`.
   ========================================================================== */

.s2 {
  /* Het palet, met de rol per kleur. */
  --paper: #f6f6f4; /* paginagrond, en de lichte tekst op donkere vlakken */
  --card: #ffffff; /* kaartgrond, één tint boven de pagina */
  --sand: #f6ecc0; /* het geel in rust: stille vlakken, iconen */
  --yellow: #f2de4f; /* het accent: de onderstreping, de badge, letter op donker */
  --line: #e6e6e2; /* randen */
  --line-2: #d8d5c8; /* rand bij hover, warm aangezet */
  --muted: #8a877c; /* iconen, bovenschriften, tweede plan */
  --ink: #131313; /* koppen en lopende tekst */
  --ink-2: #62625e; /* tweede tekstkleur */
  --dark: #17181a; /* donkere vlakken, scrims, voet */

  /* base.css zet de selectiekleur hierop. Geel met inkt erop, zoals overal waar
     geel op deze pagina een vlak is. */
  --accent: var(--yellow);
  --accent-ink: var(--ink);

  --r: 20px;
  --r-sm: 12px;
  --focus: var(--ink);

  /* De zwevende balk. De hero leest deze maten om zichzelf er precies achter te
     schuiven, en de kolom op de foto om er precies onder te beginnen; ze staan
     hier zodat de drie niet uit elkaar kunnen lopen. */
  --s2-head-gap: 0.85rem;
  --s2-head-h: 3.6rem;
  --s2-head-total: calc(var(--s2-head-h) + var(--s2-head-gap) * 2);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-dm-sans), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

.s2-wrap {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
}

.s2-section {
  padding-block: clamp(2.75rem, 5.5vw, 4.75rem);
}

.s2-section--tight {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* De gecentreerde sectie-inleiding houdt de pagina
   rustig: elke sectie begint in het midden en gaat pas daarna uiteen. */
.s2-center {
  text-align: center;
}

.s2-center .s2-h2,
.s2-center .s2-body {
  margin-inline: auto;
}

.s2-secHead {
  margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* --- typografie -------------------------------------------------------------

   Fraunces staat op de koppen, DM Sans op alles wat gelezen wordt. De optische
   as van Fraunces doet het werk dat een tweede gewicht anders zou moeten doen:
   op grote maat wordt de letter fijner en opener, op kleine maat steviger.
   Elke kop zet daarom haar eigen `opsz`, in de buurt van de maat waarop ze
   staat. */

.s2-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.s2-eyebrow--dark {
  color: var(--ink-2);
}

.s2-h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 0;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--ink);
  margin-block-start: 0.8rem;
  max-width: 22ch;
}

.s2-h2--light {
  color: var(--paper);
}

.s2-body {
  color: var(--ink-2);
  margin-block-start: 1rem;
  max-width: 58ch;
}

.s2-body--light {
  color: rgb(246 246 244 / 0.76);
}

.s2-body--small {
  font-size: 0.92rem;
}

.s2-note {
  font-size: 0.86rem;
  color: var(--ink-2);
  margin-block-start: 1.25rem;
}

/* De belofte uit de guidelines, op het lichtste vlak van de gids. Dit blok in
   het accent zetten zou het volle geel zijn, en dat draagt al de balk en het
   merkwaardenvlak. Op zand blijft het een rustpunt in plaats
   van een derde vlak dat om aandacht vraagt. */
/* De belofte, overgenomen uit richting 1: geen kaartje meer naast de tekst maar
   een uitspraak op eigen regel, op displaymaat en met een lijn erboven. Waar
   richting 1 die lijn in blauwgroen zet, staat ze hier in geel; het is het enige
   volle geel dat op de lichte grond nog voorkomt, en als lijn is het een vlak en
   geen letter. */
.s2-promise {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 0;
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.75rem;
  border-block-start: 3px solid var(--yellow);
  max-width: 32ch;
}

/* --- header -----------------------------------------------------------------
   Een zwevende pil op het beeld, en niet meer de haarlijnbalk erboven.

   Die balk stond er om een reden: een pil zou een derde vorm zijn naast de kaart
   en de beeldkaart. Van die drie zijn er nog twee over. De kaarten bij de
   behandelingen zijn een lijst geworden, dus de pil en de beeldkaart zijn nu de
   enige twee ronde vormen op de pagina, en dan is het een rijm en geen stapel.

   Ze zweeft echt: de balk zelf is doorzichtig en alleen de pil erin heeft een
   grond. Zo loopt het beeld er onderdoor tot tegen de bovenrand van de pagina,
   en dat is wat de hero groot maakt. De grond van de pil is wit met een
   waas erachter; op de bleke lucht is dat het verschil tussen zweven en
   verdwijnen. */

.s2-head {
  position: sticky;
  top: var(--sh-bar-h, 0);
  z-index: 60;
  padding-block: var(--s2-head-gap);
  --lg-ink: var(--ink);
}

/* Zo breed als wat erin staat, en niet meer over de volle kolom. Een pil die
   van marge tot marge loopt is een balk met ronde hoeken; het punt van deze vorm
   is juist dat er beeld naast staat. `fit-content` met de kolombreedte als
   bovengrens: ze krimpt mee op een smal scherm en wordt nooit breder dan de
   pagina zelf. */
.s2-head__inner {
  width: fit-content;
  max-width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: var(--s2-head-h);
  padding-inline: 1.5rem 0.6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.84);
  backdrop-filter: blur(14px);
  box-shadow:
    0 1px 2px rgb(19 19 19 / 0.06),
    0 10px 30px rgb(19 19 19 / 0.08);
}

/* De navigatie stond in het tweede plan en las als bijschrift. Ze draagt nu
   inkt in plaats van grijs, een half gewicht erbij en een maat groter, en onder
   elk woord schuift bij hover de gele onderstreping uit de hero. Dat is de
   luidste vorm die deze richting toelaat: het geel doet het werk, de letter
   blijft rustig. */
.s2-nav {
  display: flex;
  gap: 1.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.s2-nav a {
  position: relative;
  padding-block: 0.25rem;
  text-decoration: none;
}

/* Groeit vanuit links, en ligt op de onderrand van de link en niet op de
   basislijn: zo raakt ze de staarten van de p en de j niet. */
.s2-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0.16em;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.s2-nav a:hover::after,
.s2-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* De menuknop, alleen op een smal scherm: een rond vlak in de pil, naast de
   afspraakknop. Open kruisen de twee strepen. */
.s2-burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.s2-burger span {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.s2-head[data-open] .s2-burger span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.s2-head[data-open] .s2-burger span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .s2-nav a::after,
  .s2-burger span {
    transition: none;
  }
}

/* --- knoppen ---------------------------------------------------------------- */

.s2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}

.s2-btn:hover {
  transform: translateY(-1px);
}

.s2-btn--sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  flex: none;
}

.s2-btn--onDark {
  background: var(--paper);
  color: var(--ink);
}

.s2-btn--onDark:hover {
  background: var(--sand);
}

.s2-btn--glass {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgb(246 246 244 / 0.38);
}

.s2-btn--glass:hover {
  background: rgb(246 246 244 / 0.1);
}

.s2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block-start: 1.75rem;
}

.s2-actions--center {
  justify-content: center;
}

/* --- de golf, als scheidingsteken --------------------------------------------
   Waar een affiche sterretjes naast het bovenschrift zet, staat hier de golf uit
   het beeldmerk: hetzelfde idee, maar het teken komt uit het merk zelf. Het keert
   terug boven elke donkere band. */

.s2-golf {
  width: 1.9em;
  height: 0.7em;
  flex: none;
  color: var(--muted);
}

.s2-golf--big {
  width: 3.25rem;
  height: 1.2rem;
  margin-inline: auto;
  margin-block-end: 1.25rem;
  color: var(--muted);
}

/* Het beeldmerk als teken boven een sectiekop. Het staat op dezelfde plek en
   met dezelfde lucht eronder als de golf, en in inkt: het merk is geen
   bovenschrift en hoort niet in het tweede plan te staan. */
.s2-secMark {
  margin-block-end: 1.1rem;
  color: var(--ink);
}

/* --- hero --------------------------------------------------------------------
   Eén beeld, en alle tekst erop: bovenschrift, kop, tekst en knop als één
   gecentreerde kolom.

   Ze stonden eerst uit elkaar. De kop lag half boven de foto en half erop, het
   woord "Stap voor stap" in de linkerbovenhoek, en de tekst met de knop in een
   voetbalk onderaan. Drie plekken, drie uitlijningen. Nu staat alles onder
   elkaar op één as, en de foto is de grond waar die kolom op ligt.

   Dat de tekst leesbaar blijft hangt niet aan de foto maar aan de sluier
   eronder; zie de twee verlopen bij de kaart hieronder.

   Wat de maat betreft: een posterkop rekt met cqi tot tegen de marge, en dat
   werkt met een letter als Anton, zonder middenweg. Fraunces op
   die maat wordt een affiche, en deze richting gaat over rust. De kop is dus
   groot maar houdt zich binnen de leesbreedte. */

.s2-hero {
  /* Even hoog als de balk, negatief: de beeldkaart begint aan de bovenrand van
     de pagina en de pil zweeft erop. De maten komen van de balk zelf, zodat de
     twee niet uit elkaar kunnen lopen. */
  margin-block-start: calc(var(--s2-head-total) * -1);
  padding-block: 0 clamp(1.5rem, 3vw, 2.5rem);
}

.s2-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.s2-mega {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 0;
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  max-width: 16ch;
  margin-inline: auto;
  margin-block-start: 1.25rem;
}

/* Eén woord aangestreept in het geel. Het stond op het hoekwoord dat met de
   oude hero verdween; het hoort bij deze richting, dus het verhuist naar de
   kop. Het geel is op een lichte grond geen letterkleur maar een vlak, dus
   krijgt het woord de kleur van de rest en ligt het accent eronder, als een
   streep van een markeerstift. Rechtop en niet cursief: Fraunces laadt hier
   alleen de rechte snit, en een schuingetrokken schreef is precies het soort
   slordigheid dat een verzorgde pagina verraadt. */
.s2-mega em {
  font-style: normal;
  box-shadow: inset 0 -0.1em 0 var(--yellow);
}

/* De beeldkaart met de foto uit de projectmap.

   Geen kleurbehandeling: elke foto op deze pagina staat op haar eigen kleur.
   Deze bergkam is dus blauwgroen, en dat staat los van het gele palet eromheen.
   Dat is een keuze, geen vergetelheid.

   Het verloop van licht naar donker in de foto zelf draagt de opbouw. Bovenaan
   de bleke nevel, dus daar staat het woord in inkt; onderaan het donkere bos,
   dus daar staat de voetbalk in papierwit. De twee verlopen hieronder zetten
   dat verloop alleen wat aan, zodat de tekst op elke uitsnede leesbaar
   blijft. */
.s2-heroCard {
  position: relative;
  isolation: isolate;
  /* Over de volle breedte, dus zonder ronde hoek: een hoek tegen de rand van
     het scherm leest als een afgeknipte kaart. */
  /* `clip` en niet `hidden`: zie de parallax onderaan dit bestand. Het knipt
     hetzelfde af, maar wordt geen scrollcontainer. */
  overflow: hidden;
  overflow: clip;
  background: var(--sand);
}

/* De foto vult de kaart en bepaalt haar hoogte niet meer: dat doet de tekst.
   Andersom zou de kop op een smal scherm uit haar kader lopen. */
.s2-heroCard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Onderaan verankerd. De kam waar hij op loopt ligt in de onderste derde van
     de foto; op 45 procent viel die net buiten het kader en leek hij op de lucht
     te lopen. De uitsnede geeft nu de lucht weg en houdt de grond. */
  object-position: 50% 100%;
  /* Achter de twee verlopen, vóór de grond van de kaart. */
  z-index: -1;
}

.s2-heroCard::before,
.s2-heroCard::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

/* De lichte sluier draagt nu de hele kolom en niet alleen het woord bovenaan.
   Ze loopt daarom dieper door en begint sterker: over de bleekste lucht staat
   de inkt ruim boven vijftien op een, over de warme gloed halverwege nog boven
   de tien. */
.s2-heroCard::before {
  inset-block-start: 0;
  height: 82%;
  background: linear-gradient(
    180deg,
    rgb(246 246 244 / 0.82),
    rgb(246 246 244 / 0.52) 58%,
    rgb(246 246 244 / 0)
  );
}

/* Het donkere verloop hield witte tekst in de voetbalk leesbaar. Die balk is er
   niet meer, dus het is nog maar de helft van wat het was: genoeg om de kam
   onderaan gewicht te geven, niet zoveel dat de foto eronder verdwijnt. */
.s2-heroCard::after {
  inset-block-end: 0;
  height: 46%;
  background: linear-gradient(0deg, rgb(23 24 26 / 0.42), rgb(23 24 26 / 0));
}

/* De kolom op de foto. Ze bepaalt de hoogte van de kaart; `min-height` zorgt
   dat het beeld ook bij weinig tekst ruimte houdt om beeld te zijn. */
.s2-heroCard__inner {
  position: relative;
  /* Boven de foto en boven haar twee verlopen. */
  z-index: 1;
  display: grid;
  justify-items: center;
  /* Bovenaan en niet in het midden: zo staat de tekst op de bleke lucht en
     blijft de hele onderhelft van het beeld landschap. */
  align-content: start;
  text-align: center;
  min-height: clamp(30rem, 60vw, 46rem);
  /* Bovenaan de hoogte van de balk erbij, zodat de kolom niet onder de pil
     begint maar eronder. */
  padding: calc(clamp(2.75rem, 6vw, 5rem) + var(--s2-head-total))
    clamp(1.25rem, 4vw, 3rem) clamp(2.75rem, 6vw, 5rem);
}

.s2-heroLead {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 46ch;
  margin-block-start: 1.4rem;
}

.s2-heroCard__inner .s2-btn {
  margin-block-start: 2rem;
}

.s2-hero .s2-note {
  text-align: center;
}

/* --- klachten: waarmee kunnen we u helpen -------------------------------------------

   Tien tegels, in vijf kolommen op een breed scherm: twee rijen, en de pagina
   blijft rustig. Elke tegel draagt drie regels: de klacht als kop, de zin van
   de patiënt in de Fraunces, en de aanpak klein eronder. Wit op gebroken wit,
   met dezelfde rand en straal als de kaarten elders in deze richting.

   Boven de tegels de weg van klacht tot sport, als een rij kleine stappen. Het
   pijltje ertussen is tekst en geen icoon: het is leesteken, geen beeld. */

.s2-path {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
  margin-block-start: 1.4rem;
  font-size: 0.82rem;
  color: var(--ink);
}

.s2-path li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.s2-path li:not(:last-child)::after {
  content: "→";
  color: var(--muted);
}

.s2-path li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--yellow);
}

.s2-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.s2-tiles li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem;
  transition: border-color 0.16s ease;
}

.s2-tiles li:hover {
  border-color: var(--line-2);
}

.s2-tiles h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.s2-tiles blockquote {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 18, "SOFT" 50, "WONK" 0;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--sand);
}

.s2-tiles p {
  margin-block-start: auto;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-2);
}


/* --- klachten op het lichaam ----------------------------------------------------------
   Links de figuur, rechts de lijst met dezelfde nummers. De figuur is een
   illustratie in de zandtint, op een doorzichtige grond: ze staat op het
   gebroken wit zonder kader.

   De knoppen op het lichaam zijn inkt met een wit cijfer. De open klacht wordt
   geel met inkt erop, met een ring die zacht uitdijt: het enige dat in deze
   sectie beweegt, en niet bij `prefers-reduced-motion`. */

.s2-bodyMap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  /* Bovenaan en niet gecentreerd: de open regel is niet altijd even hoog,
     en de figuur mag dan niet mee verspringen. */
  align-items: start;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.s2-bodyMap__figure {
  position: relative;
  justify-self: center;
  width: min(100%, 13.5rem);
  aspect-ratio: 522 / 1456;
}

.s2-bodyMap__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* De spierzones. De afbeelding zelf is het masker: waar ze doorzichtig is,
   verdwijnt ook de gloed. Rood is hier de enige plek op de pagina; het staat
   voor pijn, en het blijft een zachte gloed en nooit een vlak. */
.s2-bodyMap__zones {
  --zone: #d8392c;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask: url("/images/lichaam-rug.webp") no-repeat center / 100% 100%;
  mask: url("/images/lichaam-rug.webp") no-repeat center / 100% 100%;
}

.s2-bodyMap__zones stop {
  stop-color: var(--zone);
}

.s2-bodyMap__zones g {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.s2-bodyMap__zones g[data-lit] {
  opacity: 0.4;
}

.s2-bodyMap__zones g[data-on] {
  opacity: 1;
  animation: s2-zone 2.8s ease-in-out infinite;
}

@keyframes s2-zone {
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-bodyMap__zones g[data-on] {
    animation: none;
  }
}

.s2-bodyMap__spot {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, scale 0.16s ease;
}

/* De naam van de zone naast het nummer. Verborgen op een breed scherm, waar de
   lijst ernaast staat; op een smal scherm alleen bij de gekozen zone. Zie de
   media query onderaan deze sectie. */
.s2-bodyMap__label {
  display: none;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.08), 0 4px 12px rgb(19 19 19 / 0.08);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.s2-bodyMap__label[data-side="right"] {
  left: calc(100% + 0.35rem);
}

.s2-bodyMap__label[data-side="left"] {
  right: calc(100% + 0.35rem);
}

.s2-bodyMap__spot[aria-expanded="true"] .s2-bodyMap__label {
  background: var(--ink);
  color: var(--paper);
}

.s2-bodyMap__spot::after {
  content: "";
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  opacity: 0;
}

.s2-bodyMap__spot[data-lit],
.s2-bodyMap__spot:hover {
  scale: 1.12;
}

.s2-bodyMap__spot[aria-expanded="true"] {
  background: var(--yellow);
  color: var(--ink);
  scale: 1.12;
}

.s2-bodyMap__spot[aria-expanded="true"]::after {
  opacity: 1;
  animation: s2-pulse 2.4s ease-out infinite;
}

@keyframes s2-pulse {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-bodyMap__spot[aria-expanded="true"]::after {
    animation: none;
  }
}

/* De lijst: dezelfde haarlijnen als de behandelingen verderop, met het nummer
   in de chip waar daar het icoon staat. De open regel toont de zin van de
   patiënt en de aanpak. */
.s2-bodyMap__list {
  border-block-start: 1px solid var(--ink);
}

.s2-bodyMap__list li {
  border-block-end: 1px solid var(--line);
  transition: background 0.16s ease;
}

.s2-bodyMap__list li[data-lit] {
  background: rgb(242 222 79 / 0.16);
}

.s2-bodyMap__list button {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 0.5rem;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.s2-bodyMap__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 500;
  transition: background 0.16s ease, color 0.16s ease;
}

.s2-bodyMap__list li[data-open] .s2-bodyMap__n {
  background: var(--yellow);
  color: var(--ink);
}

.s2-bodyMap__title {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.s2-bodyMap__list li > div {
  padding: 0 0.5rem 1.15rem calc(0.5rem + 1.9rem + 1rem);
}

.s2-bodyMap__list blockquote {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 18, "SOFT" 50, "WONK" 0;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  padding-inline-start: 0.8rem;
  border-inline-start: 2px solid var(--yellow);
}

.s2-bodyMap__list li > div p {
  margin-block-start: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.s2-tilesHead {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  margin-block-end: 1.25rem;
}

.s2-tiles--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 68rem) {
  .s2-tiles,
  .s2-tiles--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .s2-tiles,
  .s2-tiles--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .s2-bodyMap {
    grid-template-columns: minmax(0, 1fr);
  }

  .s2-bodyMap__figure {
    width: min(100%, 10rem);
  }

  /* Alleen bij de gekozen zone, of waar de vinger of het toetsenbord staat:
     zes namen tegelijk maken van de figuur een etiket. */
  .s2-bodyMap__spot[aria-expanded="true"] .s2-bodyMap__label,
  .s2-bodyMap__spot[data-lit] .s2-bodyMap__label,
  .s2-bodyMap__spot:focus-visible .s2-bodyMap__label {
    display: block;
  }
}

/* --- behandelingen als lijst ------------------------------------------------------

   Overgenomen uit richting 1, en dat is een wissel van kaart naar regel. De acht
   behandelingen staan onder elkaar, gescheiden door een haarlijn: geen acht
   vlakken in een raster, maar één blok dat je van boven naar onder leest. Dat
   past bij deze richting, want het is de rustigste vorm die er is.

   Wat richting 1 met kleur doet, doet deze met maat: daar dragen kapitalen en
   een hard vlak de regel, hier de Fraunces op een lichte grond. De drie kolommen
   zijn dezelfde: het icoon waar een nummer zou staan, de titel, de tekst.

   De close-ups die op de kaarten stonden zijn hiermee weg. Een lijst met zes
   foto's erin wordt weer een raster, en dan is er niets gewonnen. */

/* De foto van de klant onder de lijst. Breed en laag, zodat ze de sectie
   afsluit zonder de pagina op te houden; op een smal scherm wordt ze hoger,
   anders blijft er van de twee mensen een strook over. */
.s2-treatPhoto {
  aspect-ratio: 2 / 1;
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}

.s2-treatPhoto img {
  object-position: 50% 20%;
}

@media (max-width: 48rem) {
  .s2-treatPhoto {
    aspect-ratio: 4 / 3;
  }
}

.s2-list {
  border-block-start: 1px solid var(--ink);
}

.s2-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.25rem 2.5rem;
  padding-block: 1.4rem;
  border-block-end: 1px solid var(--line);
  align-items: start;
  transition: background 0.16s ease;
}

/* Het geel als wash onder de regel, ver genoeg uitgedund om de tekst erop te
   laten staan. Geel is in deze richting een vlak en geen letter; dit is de
   zachtste vorm daarvan. */
.s2-list li:hover {
  background: rgb(242 222 79 / 0.16);
}

/* Het icoon in dezelfde chip als elders in deze richting: zand met inkt erop,
   dezelfde straal als de kleine kaartjes. */
.s2-list__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-sm);
  background: var(--sand);
  color: var(--ink);
}

.s2-list h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  padding-block-start: 0.35rem;
}

.s2-list p {
  font-size: 0.9rem;
  color: var(--ink-2);
  padding-block-start: 0.3rem;
}

/* --- beeld ------------------------------------------------------------------------
   Geen filter en geen sluier, nergens op deze pagina. De foto's staan op hun
   eigen kleur. Dat de pagina daardoor niet één
   atmosfeer heeft maar een geel kader met foto's erin, is de bedoeling: het
   geel is het merk, de foto's zijn wat ze zijn. */

.s2-media {
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
  /* Zie de beeldkaart hierboven. */
  overflow: hidden;
  overflow: clip;
}

.s2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- de praktijk, overgenomen uit richting 1 --------------------------------------
   Het duo van richting 1: de foto links en breder dan de tekst, en achter haar
   linkeronderhoek een vlak dat eronder uitsteekt. Dat vlak is wat de sectie
   daar draagt, dus het komt mee.

   Twee dingen zijn anders, en allebei omdat deze richting het zo doet. Het vlak
   staat in zand en niet in de volle kleur: dit is een lichte grond, en de zachte
   kant van het geel is hier de juiste. En de foto houdt haar eigen kleur; het
   grijs van richting 1 hoort bij een pagina waar één kleur alles draagt, en dat
   is deze niet. */

.s2-practice {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem 3.5rem;
  align-items: center;
}

/* `isolation` is nodig: zonder eigen stapelcontext zakt het vlak met z-index -1
   door tot achter de achtergrond van de sectie, en dan is het onzichtbaar in
   plaats van dat het onder de foto uitsteekt. */
.s2-practice__media {
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
}

.s2-practice__media::before {
  content: "";
  position: absolute;
  inset: auto auto -1.5rem -1.5rem;
  width: 55%;
  height: 55%;
  background: var(--sand);
  border-radius: var(--r);
  z-index: -1;
}

.s2-practice__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border-radius: var(--r);
}

/* --- werkwijze op een donkere band ------------------------------------------------
   De donkere sectie. Ze staat niet meer in vlak bijna zwart maar op een foto:
   een zwaar vervaagd landschap, licht bovenaan en donker onderaan.

   Daar hoort een scrim bij, en niet als voorzorg. De lucht bovenaan de foto is
   bijna wit; papierwitte tekst zou daar verdwijnen. Het vlak van 68 procent
   bijna zwart eroverheen zet het lichtste punt van de foto op 6,5 op 1, dus
   ook waar de lucht het felst is blijft de tekst ruim boven de norm. Onder de
   68 procent wordt de foto beter zichtbaar maar zakt de kop richting de grens;
   dit is de stand waarop je het landschap ziet en de tekst niet moet zoeken.

   De scrim staat als eerste laag in `background-image` en niet als
   pseudo-element: zo is er niets te stapelen en kan er niets bovenop de tekst
   komen. `fixed` staat er bewust niet bij; dat hapert op iOS. */

.s2-dark {
  background-color: var(--dark);
  background-image:
    linear-gradient(rgb(23 24 26 / 0.68), rgb(23 24 26 / 0.68)),
    url("/images/bg-aanpak.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--paper);
}

.s2-dark .s2-eyebrow {
  color: var(--muted);
}

.s2-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.85rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* De vier stappen staan in blokken en niet meer onder een hairline. Op de
   donkere band kan geen witte kaartgrond: het blok is de band zelf, een tik
   opgelicht, met dezelfde ronding en binnenmarge als de kaarten elders in de
   richting. Zo blijven de vier even hoog en leest de rij als vier stappen. */
.s2-steps li {
  background: rgb(246 246 244 / 0.06);
  border: 1px solid rgb(246 246 244 / 0.16);
  border-radius: var(--r);
  padding: 1.15rem;
}

/* Het symbool van de stap, in geel: op de donkere band is geel wel een
   letterkleur, en het chipje erachter is de band zelf, een tik opgelicht. */
.s2-steps__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-sm);
  background: rgb(246 246 244 / 0.08);
  color: var(--yellow);
}

.s2-steps h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-block: 0.85rem 0.4rem;
}

.s2-steps p {
  font-size: 0.89rem;
  color: rgb(246 246 244 / 0.68);
}

/* --- team --------------------------------------------------------------------------
   Ronde portretten. Van de twee vormen is dit de rustigste: geen tweede
   rechthoek naast de kaart waar hij in staat. */

.s2-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.85rem;
}

/* Eén kinesitherapeut: de kaart rekt dan niet over de volle breedte, maar staat
   gecentreerd op leesbreedte, met een groter portret. */
.s2-team > :only-child {
  justify-self: center;
  width: min(100%, 40rem);
}

@media (min-width: 34.01rem) {
  .s2-team > :only-child {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .s2-team > :only-child .s2-person__photo {
    width: 9rem;
    height: 9rem;
  }
}

.s2-person {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
}

.s2-person__photo {
  width: 7rem;
  height: 7rem;
  border-radius: 999px;
}

.s2-person h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--ink);
}

.s2-person__role {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: 0.3rem 0.55rem;
}

.s2-person p:last-child {
  font-size: 0.88rem;
  color: var(--ink-2);
}

/* --- afspraak ----------------------------------------------------------------------
   De beeld-cta, met het bovenschrift in geel: op een donker vlak
   is geel wel een letterkleur, en daar mag het accent dus terugkomen. */

.s2-cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
  color: var(--paper);
}

.s2-cta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s2-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(23 24 26 / 0.84);
}

.s2-cta .s2-eyebrow {
  color: var(--yellow);
}

.s2-cta__inner .s2-h2,
.s2-cta__inner .s2-body {
  margin-inline: auto;
}

.s2-cta__promise {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgb(246 246 244 / 0.72);
  margin-block-start: 2.5rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgb(246 246 244 / 0.28);
  max-width: 46ch;
  margin-inline: auto;
}

/* --- markering voor ontbrekende gegevens ---------------------------------------- */

.s2 .pending {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
}

.s2-dark .pending,
.s2-cta .pending,
.s2-foot .pending {
  background: rgb(246 246 244 / 0.16);
  color: var(--paper);
}

/* --- voet ------------------------------------------------------------------------
   De gecentreerde voet, in bijna zwart. */

.s2-foot {
  background: var(--dark);
  color: rgb(246 246 244 / 0.82);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  --lg-ink: var(--paper);
}

.s2-foot__inner {
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  text-align: center;
}

.s2-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
  width: 100%;
}

.s2-foot h4 {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.75rem;
}

.s2-foot p {
  font-size: 0.9rem;
  margin-block-end: 0.4rem;
}

.s2-foot__note {
  border-block-start: 1px solid rgb(246 246 244 / 0.22);
  padding-block-start: 1.5rem;
  width: 100%;
  font-size: 0.85rem;
  color: rgb(246 246 244 / 0.58);
}

/* --- smal scherm --------------------------------------------------------------------
   Wat naast elkaar stond, gaat onder elkaar staan. De hero blijft zoals ze is:
   de tekst stond daar al gecentreerd op het beeld, en dat werkt op een telefoon
   even goed als op een scherm. */

@media (max-width: 64rem) {
  .s2-practice {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Gestapeld heeft het vlak geen kolom meer om uit te steken zonder de tekst
     eronder te raken. Het gaat weg; de foto blijft. */
  .s2-practice__media::before {
    display: none;
  }

  /* De pil houdt het merk, de afspraakknop en de menuknop. De navigatie hangt
     eronder als een kaart in dezelfde witte grond en dezelfde schaduw, zodat ze
     leest als iets wat uit de pil komt. Ze staat op de pil zelf gepositioneerd:
     de waas op de pil maakt die tot het kader van alles wat erin zweeft. */
  .s2-head__inner {
    gap: 1.25rem;
    padding-inline: 1.25rem 0.4rem;
  }

  .s2-burger {
    display: flex;
    margin-inline-start: -0.75rem;
  }

  .s2-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.5rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.6rem 1.5rem;
    border-radius: var(--r);
    background: rgb(255 255 255 / 0.97);
    box-shadow:
      0 1px 2px rgb(19 19 19 / 0.06),
      0 10px 30px rgb(19 19 19 / 0.08);
  }

  .s2-head[data-open] .s2-nav {
    display: flex;
  }

  .s2-nav a {
    padding-block: 0.65rem;
  }

  .s2-nav a::after {
    inset-block-end: 0.5rem;
  }

  /* De tekst zakt onder de titel; het icoon houdt zijn eigen kolom, zodat de
     regel herkenbaar blijft als één ding. */
  .s2-list li {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
  }

  .s2-list p {
    grid-column: 2;
    padding-block-start: 0;
  }
}

@media (max-width: 34rem) {
  .s2-person {
    grid-template-columns: minmax(0, 1fr);
  }

  .s2-person__photo {
    width: 6rem;
    height: 6rem;
  }
}

/* --- diepte bij het scrollen ---------------------------------------------------
   Parallax: de foto's schuiven trager dan hun kader, zodat de pagina bij het
   scrollen een voor- en een achtergrond krijgt. Twee beelden doen mee, en verder
   niets: de kop, de lijst en de banden blijven staan waar ze staan. Dat is een
   keuze. Een pagina waar alles beweegt is een pretpark; hier moet het beeld
   ademen zonder dat de tekst gaat zwemmen.

   Het waren er drie. De foto bij de praktijk deed mee tot die sectie die van
   richting 1 werd: daar staat achter de linkeronderhoek een vlak dat onder de
   foto uitsteekt, en een foto die in haar kader schuift zou onder dat vlak uit
   lopen. Ze staat nu stil.

   Twee soorten beweging, want de hero staat anders dan de rest.

   Het beeld onder de cta komt van onder in beeld en gaat er bovenaan weer uit.
   Het doorloopt zijn hele loop voor je ogen, dus schuift het symmetrisch om zijn
   middenstand heen: `s2-drift` op de tijdlijn van het beeld zelf.

   De beeldkaart in de hero staat al in beeld voor je iets gedaan hebt. Op
   diezelfde tijdlijn ben je bij het laden al halverwege, en gaat de helft van de
   beweging verloren aan een stuk pagina dat niemand ooit ziet. Zij hangt daarom
   aan de scrollpositie van de pagina en zakt één kant op, vanaf nul: bij het
   laden staat ze precies zoals ze ontworpen is, en over het eerste scherm
   scrollen zakt ze weg. Dat is `s2-sink` op `scroll()`.

   De kop deed daar het omgekeerde van, `s2-rise`: hij lag met zijn onderrand op
   de foto en steeg er bij het scrollen uit weg. Die beweging is weg met de
   overlap zelf. De kop staat nu op de foto en niet half erboven, en tekst die
   over haar eigen grond schuift leest als een fout.

   Beide lopen langs twee wegen, en welke het wordt hangt van de browser af.

   Weg 1, als de browser `animation-timeline: view()` kent: de scrolltijdlijn van
   de browser zelf. Geen scroll-listener, en de animatie draait bij de
   compositor, dus ze blijft vloeiend op een trage telefoon.

   Weg 2, voor de rest: components/ui/Parallax.tsx zet dezelfde verschuiving met
   de hand. Die leest de uitslag hieronder uit `--parallax`, zodat de maat op één
   plek staat en de twee wegen niet uit elkaar kunnen lopen. Staat er ook een
   `--parallax-basis` op het element, dan blijft die transform eronder staan; zo
   houdt een gespiegelde foto haar spiegeling. Richting 1 heeft er een.

   De opmaak staat daarom búiten `@supports`: allebei de wegen hebben ze nodig.
   De foto's zijn groter dan hun kader en hangen gecentreerd, dus zonder animatie
   is het gewoon een iets krappere uitsnede en niets scheefs.

   Wie beweging heeft afgezet, krijgt geen van beide.

   Eén valkuil, en het kostte een meting om hem te vinden. `view()` hangt de
   animatie aan de dichtstbijzijnde scrollcontainer, en `overflow: hidden` is er
   een: een container die alleen nooit scrolt. Zowel de drie kaders hier als de
   `body` in base.css knipten zo op een tijdlijn die stilstaat, en dan staat de
   animatie wel te draaien maar gebeurt er niets. Alle vier knippen nu met
   `overflow: clip`. Dat doet visueel hetzelfde, ronde hoeken incluis, maar is
   geen container om in te scrollen.

   Dit blok staat onderaan, na de mediaregels, omdat het de uitsnede van dezelfde
   foto's overneemt. */

/* Symmetrisch om de middenstand, voor wat van onder in beeld komt. */
@keyframes s2-drift {
  from {
    transform: var(--parallax-basis, translate3d(0, 0, 0))
      translate3d(0, calc(var(--parallax) * -1), 0);
  }
  to {
    transform: var(--parallax-basis, translate3d(0, 0, 0))
      translate3d(0, var(--parallax), 0);
  }
}

/* Eén kant op, vanaf de stand waarin het element ontworpen is. Voor de hero:
   de foto zakt, de kop erboven stijgt. */
@keyframes s2-sink {
  from {
    transform: var(--parallax-basis, translate3d(0, 0, 0));
  }
  to {
    transform: var(--parallax-basis, translate3d(0, 0, 0))
      translate3d(0, var(--parallax), 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- de speling in het kader ---------------------------------------------
     Elke foto is hoger dan haar kader, en die overmaat is wat ze te schuiven
     heeft. Let op de twee maatstaven: de hoogte is een percentage van het
     kader, maar `--parallax` is een percentage van de fóto. Ze zijn dus niet
     rechtstreeks te vergelijken, en de speling moet met de hoogte mee groeien.

     Voor `s2-drift`, dat twee kanten op gaat en de overmaat dus deelt:

         hoogte >= 100 / (1 - 2 × drift/100)

     Voor `s2-sink`, dat één kant op gaat en alles onderaan houdt:

         hoogte >= 100 / (1 - drift/100)

     Blijft de hoogte daaronder, dan schuift de foto aan het eind van haar loop
     van haar eigen kader af en valt er een kier. De maten hieronder houden een
     paar procent over. */

  /* De bergkam in de hero. Alleen op een breed scherm: onder 64rem legt de
     beeldkaart haar voetbalk ónder de foto, en dan draagt de foto de hoogte van
     de kaart. Die kan ik haar niet afnemen zonder de kaart te breken. */
  @media (width > 64rem) {
    .s2-heroCard img {
      /* Zakt één kant op, dus alle speling hangt onderaan. */
      inset-block-end: auto;
      /* 15% zakken vraagt minstens 117,6%. */
      height: 120%;
      /* Achter de twee verlopen, vóór de grond van de kaart. */
      z-index: -1;
      --parallax: 15%;
    }
  }

  /* De beeld-cta. Hier mag de uitslag het grootst: het beeld loopt over de volle
     breedte, ligt onder een donker vlak, en heeft geen rand waar het tegen kan
     schuren.

     De sectie moet wel gaan knippen. Ze deed dat niet, want tot nu toe paste de
     foto er precies in; nu ze groter is dan haar vak, zou ze zonder dit onder de
     voet door schuiven. */
  .s2-cta {
    overflow: clip;
  }

  .s2-cta img {
    /* 12% naar twee kanten vraagt minstens 131,6%. */
    inset-block-start: -17%;
    inset-block-end: auto;
    height: 134%;
    --parallax: 12%;
  }

  /* --- weg 1: de scrolltijdlijn van de browser ------------------------------ */
  @supports (animation-timeline: view()) {
    [data-parallax] {
      animation-timing-function: linear;
      animation-fill-mode: both;
      will-change: transform;
    }

    /* Op het beeld zelf: van zodra het onderaan in beeld komt tot het bovenaan
       weer verdwijnt. */
    [data-parallax="drift"] {
      animation-name: s2-drift;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Op de pagina: over het eerste scherm scrollen, vanaf de bovenrand. */
    [data-parallax="sink"] {
      animation-name: s2-sink;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

/* --- de blog -----------------------------------------------------------------------

   De blog spreekt dezelfde taal als de homepage: gecentreerde inleidingen, de
   golf als scheidingsteken, ronde hoeken en veel binnenmarge. Het geel blijft
   klein en wordt op de lichte grond nooit tekst; het staat in de badge, waar
   het een vlak is met inkt erop.

   De kaart is de vorm die deze richting al gebruikt voor de portretten. Ze
   keert hier terug voor de artikels, met de foto bovenaan in plaats van links.
   De tekstkolom van een artikel staat gecentreerd en blijft smal: deze richting
   gaat over rust, en rust in een artikel is korte regels met wit eromheen. */

.s2-head__logo {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

/* De kop van de blog en van een artikel. Kleiner dan de hero op de homepage:
   die maat hoort bij één woord op een foto, niet bij een zin. */
.s2-h1 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 0;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--ink);
  max-width: 20ch;
  margin-inline: auto;
  margin-block-start: 1rem;
}

.s2-blogHead .s2-body,
.s2-postHead .s2-body {
  max-width: 56ch;
}

/* Het label boven een titel. Het enige volle geel op een lichte grond, en het
   is hier een vlak met inkt erop. */
.s2-badge {
  display: inline-block;
  align-self: start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.s2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- het uitgelichte stuk --------------------------------------------------------- */

.s2-feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.16s ease;
}

.s2-feature:hover {
  border-color: var(--line-2);
}

.s2-feature__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.s2-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
  display: block;
}

.s2-feature__text {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.s2-feature__text .s2-body {
  margin-block-start: 0;
}

.s2-feature__title {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
}

.s2-feature__link:hover .s2-feature__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

/* --- het raster met kaarten ------------------------------------------------------- */

/* Vier kaarten op één rij, en niet drie met een eenzame vierde eronder. De
   ondergrens staat daarom op 16rem: op de volle kolom passen er precies vier
   naast elkaar, en daaronder zakt het raster netjes naar twee en dan naar een. */
.s2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.85rem;
  margin-block-start: 1.25rem;
}

.s2-cards--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.s2-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.16s ease;
}

.s2-card:hover {
  border-color: var(--line-2);
}

.s2-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: 0 1.15rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

/* De foto loopt tot tegen de rand van de kaart, de tekst niet. Vandaar de
   negatieve marge: de binnenmarge staat op de link, en het beeld schuift er
   weer uit. */
.s2-card__media {
  display: block;
  margin-inline: -1.15rem;
  margin-block-end: 0.35rem;
}

.s2-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.s2-card__title {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
}

.s2-card__link:hover .s2-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.s2-card__lead {
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* De regel met datum en leestijd zakt naar de onderrand, zodat de kaarten in
   een rij op dezelfde lijn eindigen ook als de inleidingen verschillen. */
.s2-card__link .s2-card__meta {
  margin-block-start: auto;
  padding-block-start: 0.35rem;
}

.s2-blogNote {
  margin-block-start: 1.75rem;
  max-width: 62ch;
}

/* --- het artikel ------------------------------------------------------------------ */

.s2-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-block-start: 1.25rem;
}

.s2-postMedia {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r);
  overflow: hidden;
}

.s2-postMedia img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.s2-prose {
  max-width: 36rem;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.s2-prose > * + * {
  margin-block-start: 1.15rem;
}

.s2-prose h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin-block-start: 2.5rem;
}

.s2-prose ul {
  padding-inline-start: 1.2rem;
  list-style: none;
}

.s2-prose li {
  position: relative;
  margin-block-start: 0.55rem;
}

/* Een klein rondje in zand: het bolletje van een opsomming, in de stille kant
   van het geel. */
.s2-prose li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.2rem;
  inset-block-start: 0.72em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--yellow);
}

/* Het citaat draagt hetzelfde gebaar als de belofte op de homepage: de gele
   lijn erboven en de tekst op displaymaat. */
.s2-prose blockquote {
  margin-block-start: 2.25rem;
  padding-block-start: 1.5rem;
  border-block-start: 3px solid var(--yellow);
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
}

.s2-back {
  margin-block-start: 2.5rem;
  text-align: center;
}

/* De band onderaan een artikel draagt geen foto: die stond al bovenaan het
   stuk, en twee beelden op één pagina die allebei om aandacht vragen is er een
   te veel. De grond blijft dus de effen donkere kleur. */
.s2-blogCta {
  background-image: none;
}

@media (max-width: 60rem) {
  .s2-feature__link {
    grid-template-columns: minmax(0, 1fr);
  }

  .s2-feature__media img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}