/* Grijzersterk, richting E "Krachtdiagonaal".
   Merkkleuren zijn overgenomen van De Krachtkeuken en liggen vast.
   Niet wijzigen zonder overleg. */

:root {
  --ochre-d: #967814;
  --ochre-l: #d9bf61;
  --plum-d:  #2d1423;
  --plum-l:  #5a2846;

  --paper: #fdfbf6;
  --ink: #241c16;
  --ink-2: #5f564a;
  --ochre-soft: #f7f0da;
  --plum-soft: #f1e7ec;
  --line: #e9e0cf;

  /* Oker op wit haalt net geen 4,5:1. Voor losse tekstlinks een donkerder
     variant, zodat ook kleine tekst leesbaar blijft. Vlakken en knoppen
     houden de echte merkkleur. */
  --ochre-text: #7a6210;

  --wrap: 72rem;
  --gutter: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Rustig naar een blok toe schuiven in plaats van er hard naartoe springen.
   Wie beweging liever uitzet, krijgt onderaan de sprong terug. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 18px basis. De doelgroep is 55 tot 85, leesbaarheid gaat hier voor
     compactheid. */
  font-size: 1.125rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

a { color: var(--ochre-text); }

:focus-visible {
  outline: 3px solid var(--plum-l);
  outline-offset: 3px;
}

/* Een telefoon kent geen hover, dus moet een tik op een andere manier
   antwoord geven. Deze kleur licht het aangeraakte vlak even op. */
a, button, label, summary { -webkit-tap-highlight-color: rgba(150, 120, 20, 0.28); }

.skip {
  position: absolute;
  left: -9999px;
  background: #fff;
  color: var(--ink);
  padding: 1rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Typografie */

.display {
  font-family: "League Spartan", "Work Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
}

.eyebrow {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre-text);
}
/* Als bijschrift van een tabel moet het een caption blijven, anders zet de
   browser het onder de koprij in plaats van erboven. */
caption.eyebrow { display: table-caption; }

.lead {
  font-size: 1.1875rem;
  color: var(--ink-2);
  max-width: 34em;
  /* Voorkomt dat er een los woord op de laatste regel achterblijft. */
  text-wrap: pretty;
}

/* Uitleg onder de kop: wat Grijzersterk is. Iets kleiner dan de lead, maar
   ruim boven de ondergrens voor deze doelgroep. */
.intro {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 36em;
}
.intro strong { color: var(--ink); }

/* Knoppen. De schuine vorm is de handtekening van De Krachtkeuken:
   de knop staat scheef, de tekst erin staat weer recht. */

.btn {
  display: inline-flex;
  transform: skewX(-9deg);
  border: none;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--ochre-d);
}
.btn > span {
  display: inline-block;
  transform: skewX(9deg);
  /* Ruime raakvlakken, ook voor wie met een trillende hand tikt. */
  padding: 0.9rem 1.75rem;
  color: #fff;
}
.btn:hover { filter: brightness(0.92); }
/* Zichtbaar ingedrukt: donkerder en een haartje naar beneden. Zo weet je
   zeker dat je tik aankwam en druk je niet voor de tweede keer. */
.btn:active { filter: brightness(0.82); transform: skewX(-9deg) translateY(2px); }

/* Een lichte vulling in plaats van doorzichtig: op papierkleur leest een
   leeg kader minder snel als knop. */
.btn--outline { background: #fff; box-shadow: inset 0 0 0 2px var(--plum-d); }
.btn--outline > span { color: var(--plum-d); }
.btn--outline:active { background: var(--plum-soft); filter: none; }

.btn--sm > span { padding: 0.65rem 1.1rem; font-size: 0.9375rem; }
.btn--block { display: flex; justify-content: center; }

.linkarrow {
  display: inline-flex;
  align-items: center;
  /* Het raakvlak was 26 pixels hoog. Met deze hoogte komt het op de 44
     pixels die een vinger nodig heeft. */
  min-height: 2.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ochre-text);
}

/* Een kaart met zo'n link erin is in zijn geheel aan te tikken: het vlak van
   de link rekt op tot over de hele kaart. Een tik naast de woorden komt dan
   ook aan, en de schaduw laat zien dat de kaart meedoet. */
.card--link { position: relative; transition: box-shadow 0.15s ease; }
.card--link .linkarrow::before { content: ""; position: absolute; inset: 0; }
.card--link:hover { box-shadow: 0 6px 20px rgba(45, 20, 35, 0.14); }
.card--link:hover .linkarrow { color: var(--plum-d); }
.card--link:active { box-shadow: none; background: var(--ochre-soft); }

/* Kop van de site */

.site-header {
  background: var(--plum-d);
  /* Dezelfde gouden haarlijn als op dekrachtkeuken.nl: 1 pixel in het
     donkere oker, opgemeten op die site. */
  border-bottom: 1px solid var(--ochre-d);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* De hoogte van de balk staat vast, gelijk aan die op dekrachtkeuken.nl.
   Het logo is kleiner dan de balk en staat er gecentreerd in, zodat er boven
   en onder lucht zit. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0;
  min-height: 6.375rem;
}

/* Het logo staat rechtstreeks op de balk, zonder vlak eronder. */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Twee derde van de balkhoogte, zodat er aan beide kanten ruim lucht zit.
   Het bestand loopt van de bovenkant van de hoge schuine vorm tot de onderkant
   van de staart van de j, dus die ruimte valt vanzelf gelijk boven en onder.
   Deze maat geldt op alle schermen boven de telefoonmaat. */
.brand img {
  height: 4.25rem;
  width: auto;
}

/* De links en de knop zitten samen in het uitklapbare deel. Op breedte staat
   de knop uiterst rechts, op een smal scherm valt hij onderaan het uitgeklapte
   menu. De links zitten in een eigen groep die alle ruimte tussen het logo en
   de knop inneemt, zodat ze daar precies tussenin uitkomen. */
.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 1.1rem;
  /* Verticaal uitgelijnd op het midden van de kleine letters in het logo, niet
     op het midden van de balk. In het logobestand loopt de e van 57 tot 86
     procent van de hoogte, dus het midden ligt op 72 procent. Bij een logo van
     68 pixels komt dat neer op een kleine 15 pixels lager. De knop schuift mee,
     zodat alles in de balk op één lijn staat. */
  transform: translateY(0.92rem);
}

.nav-lijst {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}

.nav-links a:not(.btn) {
  color: #d8ccd2;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding-block: 0.5rem;
}
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--ochre-l);
}

/* Zonder vlak en rand leest Menu als een woord in de balk, niet als een knop.
   Juist dit is op een telefoon het belangrijkste om aan te tikken, want het
   hele menu zit erachter. Vandaar een eigen vlak met de gouden rand van de
   balk, en een hoogte van 48 pixels. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--ochre-l);
  border-radius: 4px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.nav-toggle:active { background: rgba(255, 255, 255, 0.22); }

.nav-toggle-icoon {
  width: 1.375rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Hamburger als het menu dicht is, kruisje als het open staat. */
.nav-toggle[aria-expanded="true"] .icoon-dicht { display: none; }
.nav-toggle[aria-expanded="false"] .icoon-open { display: none; }

/* Smalle strook onder de hero met drie punten. Lichte achtergrond, zodat de
   herofoto die eroverheen hangt geen naad laat zien. */
.strook { padding-block: 3.5rem 1.75rem; }

/* De harde feiten bij elkaar, bovenaan de pagina. Een bezoeker die snel wil
   weten of dit iets voor hem is, hoeft dan niet te klikken. */
.feiten {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0 1.5rem;
  background: #fff;
  border-left: 4px solid var(--ochre-d);
  padding: 1.5rem 1.75rem;
  max-width: 48rem;
}
.feiten dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ochre-text);
  padding-block: 0.55rem;
}
.feiten dd {
  margin: 0;
  font-size: 1.0625rem;
  padding-block: 0.5rem;
}
@media (max-width: 34rem) {
  .feiten { grid-template-columns: 1fr; padding: 1.25rem 1.25rem; }
  .feiten dt { padding-bottom: 0; }
  .feiten dd { padding-top: 0.15rem; padding-bottom: 0.85rem; }
}
.drie-punten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  align-items: center;
}
.punt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1.0625rem;
}
.punt .icoon { width: 2rem; height: 2rem; flex: none; }

/* Secties */

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* De balk bovenin blijft staan en zou de kop van een blok afdekken zodra je
   naar een anker springt. Daarom houden blokken met een anker ruimte vrij. */
.section[id] { scroll-margin-top: 7rem; }
@media (max-width: 64rem) { .section[id] { scroll-margin-top: 4rem; } }
.section--soft { background: var(--plum-soft); }
.section--ochre { background: var(--ochre-soft); }

.section--dark {
  background: var(--plum-d);
  color: #fff;
  text-align: center;
}
.section--dark h2 { color: #fff; }
.section--dark p { color: #d9cbd3; margin-inline: auto; }

.stack { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.section--dark .stack { align-items: center; }

.pagetitle { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.pagetitle h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-top: 0.5rem; }
.pagetitle p { margin-top: 0.75rem; }

.h2 {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  text-transform: none;
  line-height: 1.2;
}

/* Hero */

/* De tekstkolom is iets breder dan de foto: er staat meer tekst, en zo
   passen de twee knoppen naast elkaar. De foto loopt mee met de hoogte van
   de tekst, anders hangt hij los in het midden. */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.75rem;
  align-items: stretch;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero h1 { font-size: clamp(2.5rem, 7vw, 3.75rem); }

.badge {
  display: inline-flex;
  transform: skewX(-9deg);
  background: var(--plum-l);
}
.badge > span {
  display: inline-block;
  transform: skewX(9deg);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.45rem 1rem;
}

.btnrow { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* Twee kolommen met tekst naast een foto. Anders dan de hero: de foto
   houdt hier zijn eigen verhouding en wordt niet uitgerekt of bijgesneden. */
.duo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.75rem;
  align-items: center;
}

/* Vier foto's die schuin over elkaar liggen, zoals op dekrachtkeuken.nl.
   Daar vandaan overgenomen: 7px witte rand, dezelfde schaduw en draaiingen
   van vijf graden tegen en vier mee. Het laatste vlak hangt onder de sectie
   door over het volgende blok heen, vandaar de z-index op de collage. */
.collage {
  position: relative;
  align-self: stretch;
  z-index: 1;
  min-height: 32rem;
}

.kader {
  position: absolute;
  border: 7px solid #fff;
  box-shadow: 0 8px 26px rgba(45, 20, 35, 0.28);
  background: #fff;
}

.kader > * { width: 100%; height: 100%; object-fit: cover; }

/* De bovenste hangt een stuk over de hero heen, net als op Nieuw hier. */
.kader--1 { left: 0;   top: -7rem;   width: 60%; aspect-ratio: 3 / 4; transform: rotate(-5deg); z-index: 1; }
.kader--2 { right: 0;  top: 16%;     width: 56%; aspect-ratio: 4 / 5; transform: rotate(4deg);  z-index: 2; }
.kader--3 { left: 0;   top: 50%;     width: 52%; aspect-ratio: 3 / 4; transform: rotate(-4deg); z-index: 3; }
.kader--4 { right: 0;  bottom: -13%; width: 68%; aspect-ratio: 3 / 2; transform: rotate(3deg);  z-index: 4; }

/* Tekstblok naast een collage: de kolom met de kaarten is de breedste. */
.duo-breed {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 2.75rem;
  align-items: center;
}

.grid.grid--twee { grid-template-columns: repeat(2, 1fr); }

/* Vier prijskaarten naast elkaar passen alleen met een kleinere ondergrens
   per kolom. Daaronder vouwt het vanzelf naar twee en dan naar een. */
.grid.grid--vier { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

/* Variant met drie foto's: twee staand en een liggende eronder. De collage
   staat hier niet naast tekst die de hoogte bepaalt, dus hij krijgt zelf een
   verhouding mee. */
.collage--drie { align-self: end; min-height: 0; aspect-ratio: 4 / 5; }

.kader--d1 { left: 0;    top: 0;       width: 66%; aspect-ratio: 3 / 4; transform: rotate(-5deg); z-index: 1; }
.kader--d2 { right: 0;   top: 15%;     width: 60%; aspect-ratio: 4 / 5; transform: rotate(4deg);  z-index: 2; }
/* Het liggende vlak hangt onder de sectie door over het volgende blok heen.
   De marge moet groter zijn dan de onderruimte van de sectie zelf. */
.kader--d3 { left: 0;    bottom: -6.5rem; width: 86%; aspect-ratio: 4 / 3; transform: rotate(-3deg); z-index: 3; }

/* Kaarten */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.grid--tight { gap: 1px; background: var(--line); }

.card {
  background: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.card h3 { font-size: 1.25rem; }
.card p { font-size: 1.0625rem; color: var(--ink-2); }
.card--soft { background: var(--plum-soft); }
.card--ochre { background: var(--ochre-soft); }

/* Lijniconen bij de kaarten. Eén kleur, dezelfde dikte als het menu-teken,
   zodat ze rustig blijven naast de tekst. */
.icoon {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--plum-l);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diamond {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--plum-l);
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

/* Aanbodregels */

.row {
  background: #fff;
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.row h3 { font-size: 1.3125rem; }
.row p { color: var(--ink-2); margin-top: 0.35rem; font-size: 1.0625rem; }

/* Foto's */

.foto {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ruime bovengrens: de herofoto mag in zijn geheel te zien zijn en wordt
   pas bijgesneden als het scherm erg breed is. */
.hero .foto { height: 100%; max-height: 48rem; object-fit: cover; }

/* Een foto die juist niet bijgesneden mag worden: hij houdt zijn eigen
   verhouding en staat bovenaan in de kolom. */
.hero .foto--heel { height: auto; max-height: none; align-self: start; object-fit: contain; }

/* Eén schuine foto naast een artikel. */
.artikel-beeld {
  align-self: start;
  margin: 0;
  border: 7px solid #fff;
  box-shadow: 0 8px 26px rgba(45, 20, 35, 0.28);
  background: #fff;
  transform: rotate(-3deg);
}
.artikel-beeld img { width: 100%; height: auto; }
.artikel h2 { margin-top: 1.25rem; }
.artikel .card { margin-block: 0.5rem; }

/* Twee foto's op de kennismakingspagina: de liggende bovenaan, de staande
   er schuin overheen. */
.collage--paar { align-self: center; min-height: 0; aspect-ratio: 3 / 3.1; }

.kader--p1 { right: 0; top: 0;    width: 86%; aspect-ratio: 16 / 9; transform: rotate(-3deg); z-index: 1; }
.kader--p2 { left: 0;  bottom: 0; width: 52%; aspect-ratio: 3 / 4;  transform: rotate(4deg);  z-index: 2; }

/* Brede hero: de foto loopt van rand tot rand met de kop erin. De balk boven
   is net zo donker, dus die loopt vanzelf door in de foto. */
.hero-breed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26rem;
  height: 60vh;
  max-height: 34rem;
  overflow: hidden;
}
.hero-breed-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* De ringenfoto moet hoog uitgesneden worden, anders vallen de ringen boven
   de rand weg. */
.hero-breed-foto--ringen { object-position: 50% 18%; }

/* Een hogere hero laat meer van de foto zien: er wordt dan minder van boven
   en onder afgesneden. Nodig bij een foto waar het hele toestel in beeld
   moet blijven. */
.hero-breed--ruim { height: 66vh; max-height: 40rem; }
/* Een donker waas over de foto. Zonder dat is witte tekst niet te lezen op
   de lichte hal aan de rechterkant. */
.hero-breed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 20, 35, 0.5) 0%, rgba(45, 20, 35, 0.62) 55%, rgba(45, 20, 35, 0.78) 100%);
}
.hero-breed-tekst {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 46rem;
  padding: 2.5rem var(--gutter);
  text-align: center;
}
.hero-breed-tekst .display {
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin: 0;
}

/* Drie foto's naast de tekst op Nieuw hier: staand, liggend, staand. De
   bovenste hangt over de hero heen, de onderste over het roze blok eronder. */
.collage--stapel { align-self: start; min-height: 0; aspect-ratio: 3 / 4.4; z-index: 2; }

.kader--n1 { right: 0;  top: -7rem;    width: 60%; aspect-ratio: 3 / 4; transform: rotate(4deg);  z-index: 1; }
.kader--n2 { left: 0;   top: 34%;      width: 74%; aspect-ratio: 4 / 3; transform: rotate(-3deg); z-index: 2; }
.kader--n3 { right: 4%; bottom: -9.5rem; width: 56%; aspect-ratio: 3 / 4; transform: rotate(3deg);  z-index: 3; }

/* Twee foto's bij Een kijkje vooraf. De bovenste staat zo hoog dat hij de
   foto raakt die uit het blok erboven komt hangen. */
.collage--twee { align-self: start; min-height: 0; aspect-ratio: 3 / 3.3; }

.kader--k1 { right: 8%; top: -5.5rem; width: 58%; aspect-ratio: 3 / 4; transform: rotate(-3deg); z-index: 1; }
.kader--k2 { left: 0;   bottom: 0;    width: 80%; aspect-ratio: 3 / 2; transform: rotate(3deg);  z-index: 2; }

/* Onder de kaarten en naast de aanbodregels blijft de verhouding gelijk,
   zodat de rijen netjes uitlijnen. */
.card .foto { aspect-ratio: 4 / 3; }
.row .foto { aspect-ratio: 4 / 3; }

/* Vlakken voor beeld dat nog gemaakt moet worden */

.ph {
  background: repeating-linear-gradient(135deg, #fff 0 9px, var(--ochre-soft) 9px 18px);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 1rem;
  width: 100%;
}
.ph--hero { min-height: 22rem; }
.ph--card { min-height: 9rem; }
.ph--row { min-height: 8rem; }
/* Zolang er geen portretten zijn staat bij een ervaring de eerste letter
   van de voornaam. Rustiger dan een leeg fotovlak, en het laat meteen zien
   dat er een mens achter het citaat zit. */
.initiaal {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--plum-l);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "League Spartan", "Work Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.naam { font-size: 1rem; font-weight: 700; color: var(--ink); }

/* Citaten */

.quote { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.875rem; }
.quote blockquote { margin: 0; font-size: 1.375rem; font-style: italic; max-width: 34em; }
.quote figcaption { font-size: 1rem; color: var(--ink-2); }

.note {
  border-left: 4px solid var(--ochre-d);
  background: var(--ochre-soft);
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: var(--ink);
}

/* Kaartje en contactgegevens op de locatiepagina */

.kaart {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
}

.gegevens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Vier rijen onder elkaar worden te lang op een breed scherm, dus daar
   staan ze in twee kolommen. */
.gegevens--twee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 0.75rem;
}

/* Bellen, appen, mailen en de route zijn precies waar een bezoeker op wil
   tikken. Als onderstreepte regel tekst was dat vlak maar 20 pixels hoog.
   Nu is het een volle rij met een rand, een icoon en een pijl: aan de vorm
   alleen al is te zien dat er iets gebeurt als je erop tikt. */
.contactrij {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.contactrij strong { display: block; font-size: 1.0625rem; }
.contactrij small { display: block; font-size: 0.9375rem; color: var(--ink-2); }
.contactrij:hover { border-color: var(--ochre-d); }
.contactrij:active { background: var(--ochre-soft); }

.contactrij-icoon, .contactrij-pijl {
  flex: none;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contactrij-icoon { width: 1.625rem; height: 1.625rem; stroke: var(--ochre-d); }
.contactrij-pijl { width: 1.125rem; height: 1.125rem; stroke: var(--plum-l); margin-left: auto; }

/* Rooster */

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th, td { text-align: left; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* Formulier */

.form { background: var(--plum-soft); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.875rem; }
.form label { font-weight: 600; font-size: 1rem; }
.form input, .form select {
  font: inherit;
  width: 100%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0.8rem 0.875rem;
}
.form .veld { display: flex; flex-direction: column; gap: 0.35rem; }
.orline { text-align: center; font-size: 1rem; color: var(--ink-2); }

.veld-bij { font-weight: 400; color: var(--ink-2); }
.veld-hulp { font-size: 0.9375rem; color: var(--ink-2); }

/* Een veld dat alleen een robot invult. Niet in beeld, niet met de tab
   te bereiken en niet voorgelezen. */
.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulier-melding {
  background: var(--ochre-soft);
  border-left: 4px solid var(--ochre-d);
  padding: 0.875rem 1rem;
  font-size: 1rem;
}
.formulier-melding--fout { background: #fbeae6; border-left-color: #a3301b; }

/* Het vlak dat na het versturen in de plaats van het formulier komt. */
.form-bedankt {
  background: var(--plum-soft);
  border-left: 4px solid var(--ochre-d);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Voet */

.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding-block: 2rem;
  font-size: 1rem;
  color: var(--ink-2);
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* De links in de voet waren 17 pixels hoog. Met lucht erom komen ze op 44,
   zonder dat de voet er anders uitziet. */
.site-footer a {
  color: var(--ochre-text);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}


/* Bredere voettekst, in de vorm van die op dekrachtkeuken.nl: donker vlak,
   een kolom met het merk en twee kolommen met links. Staat voorlopig alleen
   op de homepagina. */
.site-footer--groot {
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  /* Een maat kleiner dan de rest van de site: de voet mag rustig blijven. */
  font-size: 0.9375rem;
  padding-block: 3rem;
}
.site-footer--groot .voet-kolommen {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}
.voet-kolom--merk p { font-size: 0.9375rem; max-width: 26em; margin-top: 0.75rem; }
.voet-rooster { font-weight: 700; color: var(--ink); }
.voet-klein { font-size: 0.875rem; }
/* In deze regel hoort de link gewoon in de zin te staan, niet als los blok
   op een eigen regel. */
.voet-klein a { display: inline; min-height: 0; }

.voet-kop {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ochre-text);
  margin: 0 0 0.5rem;
}

.voet-lijst { list-style: none; margin: 0; padding: 0; }
.voet-lijst a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.voet-lijst a::before { content: "\203A"; color: var(--ochre-d); font-size: 1.25rem; line-height: 1; }
.voet-lijst a:hover { color: var(--ochre-text); text-decoration: underline; }


@media (max-width: 64rem) {
  .site-footer--groot .voet-kolommen { grid-template-columns: 1fr; gap: 1.75rem; }
}
.voet-logo { height: 2.75rem; width: auto; }

/* Smallere schermen */

/* Tussenmaat. Het volle logo past hier niet meer naast de vijf links plus
   de knop, dus het schaalt een stap terug. De marge onder blijft 15 procent
   van de hoogte. */
@media (max-width: 72rem) {
  .nav { min-height: 5.25rem; }

  /* Met vier menu-items naast het logo is het hier krap. Kleiner logo en
     minder tussenruimte, anders valt het menu naar twee regels. */
  .brand img { height: 3.4rem; }
  .nav-lijst { gap: 1.4rem; }
}

@media (max-width: 64rem) {
  .hero { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .duo-breed { grid-template-columns: 1fr; }
  /* Gestapeld hangt er niets over, anders botst het met de kaarten. */
  .kader--d3 { bottom: 0; }
  .kader--1 { top: 0; }
  .kader--4 { bottom: 0; }
  .kader--n1 { top: 0; }
  .kader--n3 { bottom: 0; }
  .kader--k1 { top: 0; }
  .grid.grid--twee { grid-template-columns: 1fr; }

  /* Gestapeld staat de foto in een breed vlak. Zonder deze regel zou een
     staande foto voor de helft weggesneden worden. */
  .hero .foto { height: auto; max-height: none; }

  /* Gestapeld is er geen tekstkolom meer om de hoogte aan te ontlenen, dus
     krijgt de collage er zelf een. Smallere rand, net als op de hoofdsite. */
  .collage { min-height: 0; aspect-ratio: 3 / 4; }
  /* Twee varianten hebben een ander vlak nodig dan de rest. Deze regels
     staan bewust na .collage hierboven, anders winnen ze het niet. */
  .collage--stapel { aspect-ratio: 3 / 4.8; }
  .collage--paar { aspect-ratio: 3 / 2.9; }
  .kader { border-width: 5px; }
  .row { grid-template-columns: 1fr; }

  /* De roostertabel past zo binnen het scherm. Met een ondergrens van 30rem
     moest je op een telefoon opzij schuiven om de derde kolom te zien. */
  table { min-width: 0; }
  th, td { padding: 0.75rem 0.5rem; }
  .nav-toggle { display: inline-flex; }

  /* Ook hier steekt de staart van de j onder de balk uit. Dat lukt alleen als
     de balk niet hoger is dan het logo, en de balkhoogte wordt bepaald door de
     Menu-knop. Vandaar dat de balk hier vrijwel geen padding heeft en de knop
     de hoogte zet. Met ruimte boven en onder zou het logo onderin hangen met
     een gat erboven. De ruimte naast het logo is ook krap: breder dan dit past
     niet meer naast de Menu-knop op een scherm van 375 pixels. */
  /* Op een telefoon blijft het logo op de grotere maat staan. Verkleinen
     zoals op de brede schermen maakt het woord daar te klein om te lezen. */
  .nav { min-height: 3.5rem; }
  .brand img { height: 2.7rem; }

  /* Vaste breedte voor beide teksten. Zonder dit wordt de knop breder zodra
     er Sluiten in staat en valt hij onder het logo. */
  .nav-toggle { display: inline-flex; min-width: 6.25rem; justify-content: center; }

  /* Staand beeld. Bij de ringenfoto houden we het linkerdeel in beeld, want
     daar staat het lid. */
  .hero-breed { height: auto; min-height: 24rem; max-height: none; }

  /* Op een telefoon staat de tekst dichter op de foto en is het waas minder
     nodig. Lichter dus, zodat de foto beter te zien blijft. De kop is groot
     en vet, die blijft ook zo goed leesbaar. */
  .hero-breed::after {
    background: linear-gradient(180deg, rgba(45, 20, 35, 0.32) 0%, rgba(45, 20, 35, 0.46) 55%, rgba(45, 20, 35, 0.66) 100%);
  }
  .hero-breed-foto--ringen { object-position: 26% 50%; }

  .nav { flex-wrap: wrap; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
  }
  .nav-links.is-open { display: flex; }

  /* In het uitklapmenu vervalt het centreren en de verschuiving: daar is het
     gewoon een lijst onder elkaar. */
  .nav-links { transform: none; }
  .nav-lijst {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* In het uitklapmenu is elke regel een rij om aan te tikken. Een gouden
     haarlijn ertussen en een pijl rechts maken dat zichtbaar. */
  .nav-links a:not(.btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid rgba(217, 191, 97, 0.28);
  }
  .nav-links a:not(.btn)::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--ochre-l);
    border-right: 2px solid var(--ochre-l);
    transform: rotate(45deg);
  }
  .nav-links a:not(.btn):active { color: #fff; }
  .nav-links .btn { margin: 1rem 0 0.5rem; align-self: flex-start; }
}

/* Smallere telefoons. Het logo schaalt mee, anders past het niet meer naast
   de knop. De marge onder blijft steeds 15 procent van de hoogte, zodat de
   staart van de j onder de balk blijft uitsteken. */
@media (max-width: 23rem) {
  .brand img { height: 2.5rem; }
}

@media (max-width: 20.5rem) {
  .brand img { height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}