:root {
  --papier: #f4f1ea;
  --inkt: #1c1a17;
  --zacht: #5d574c;
  --geel: #b8892b;
  --lijn: #d8d2c4;
  --wit: #ffffff;
  --goed: #2f6b3a;
  --fout: #9a2b21;
}
/* ⚠️ Er was een donkere variant. Die is er op 15 september uit (Dave zag de site donker op zijn
   telefoon). Reden om hem niet terug te zetten: dit merk is papier — het kopbeeld, alle
   notitieboek-bladzijden en de keukenfoto's zijn licht, en op een zwarte ondergrond vloekt dat.
   Bovendien hebben de secties nu elk hun eigen tint, en die zou je dan twee keer moeten
   onderhouden. Terug? Zet dit blok terug met de tokens erin, en maak --sectie-a t/m -e donker.
   De kleur wordt hieronder ook expliciet op html/body gezet, zodat een telefoon die op donker
   staat de pagina niet alsnog omkleurt. */

/* De vijf banen van de voorpagina. Nauwelijks verschil per stap - net genoeg om te zien dat je
   een nieuw onderwerp binnenloopt, niet zoveel dat het een gekleurde brochure wordt. */
:root {
  --sectie-a: #faf8f3;   /* wie hij is - bijna wit, je komt binnen */
  --sectie-b: #eae2d2;   /* de herkenningslijst: hier moet je even stilstaan */
  --sectie-c: #f6f2e8;   /* het glas */
  --sectie-d: #ece4d5;   /* het recept */
  --sectie-e: #e2d9c5;   /* de gids en de boeken: het diepst, hier wordt gevraagd */
  /* ⚠️ Het ritme is licht-diep-licht-diep-diepst, met ~15 RGB-punten per stap. Een eerdere
     versie zat op 8 punten; op een telefoonscherm met automatische helderheid was dat
     onzichtbaar (Dave, 15 september). Minder verschil dan dit werkt niet. */
}
* { box-sizing: border-box; }
/* De kleur van de pagina staat vast, ook als de telefoon op donker staat. */
html { color-scheme: only light; }   /* nooit omkleuren op een donker toestel */

/* Een baan: de achtergrond loopt door tot buiten de tekstkolom, dus op een telefoon tot de
   schermrand. De negatieve marge is precies de padding van .wrap. */
.blok {
  margin-inline: -1.5rem;
  padding: 2.75rem 1.5rem;
}
.blok-a { background: var(--sectie-a); padding-top: 2.5rem; }
.blok-b { background: var(--sectie-b); }
.blok-c { background: var(--sectie-c); }
.blok-d { background: var(--sectie-d); }
.blok-e { background: var(--sectie-e); }

/* Elke trede heeft zijn eigen tint, zodat je aan de kleur ziet dat je ergens anders bent.
   De achtergrond staat op body, dus hij vult het hele scherm. */
body.p-glasses { background: var(--sectie-c); }
body.p-recipes { background: var(--sectie-d); }
body.p-supermarket { background: #f1eee6; }
body.p-guide { background: var(--sectie-a); }
/* De .wrap heeft onderaan lucht voor de voet; binnen een baan zou dat een gekleurde staart geven. */
.blok > *:first-child { margin-top: 0; }
.blok > .kopje:first-child { margin-top: 0; }
@media print {
  .blok { margin-inline: 0; padding: 0; background: none; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 17px/1.65 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; }
.wrap-kort { padding-top: 5rem; }
.merk {
  font: 600 0.75rem/1 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--geel);
  margin-bottom: 1.75rem;
}
.merk a { color: inherit; text-decoration: none; }
/* Niet bijsnijden: zijn gezicht moet er helemaal op. De verhouding is die van het
   bestand zelf, dus de browser kan er niets afhalen. */
/* height:auto en verder niets. Zo kan geen enkele weergave hem uitrekken: de browser
   houdt altijd de verhouding van het bestand zelf aan. Niet vervangen door aspect-ratio —
   wordt dat genegeerd, dan valt hij terug op height="988" en staat hij uitgerekt. */
.portret {
  display: block; width: 100%; max-width: 26rem; height: auto;
  border-radius: 3px; margin-bottom: 1.9rem; background: var(--lijn);
}
.plaatshouder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; max-width: 26rem; min-height: 11rem; margin-bottom: 1.9rem;
  border: 1px dashed var(--geel); border-radius: 3px; color: var(--zacht);
  font: 0.78rem/1.6 -apple-system, 'Segoe UI', system-ui, sans-serif; padding: 1.5rem 1rem;
}
.scheiding { border: 0; border-top: 1px solid var(--lijn); margin: 3rem 0 2.5rem; }
/* De herkenningslijst. Elk punt op zijn eigen regel met een lijntje ertussen — het moet
   lezen als een lijst die iemand langsloopt en waarbij hij bij elk punt even stilstaat. */
.lijst { list-style: none; margin: 1.8rem 0 1.9rem; padding: 0; }
.lijst li {
  padding: 0.95rem 0 0.95rem 1.6rem; border-top: 1px solid var(--lijn);
  position: relative; font-size: 1.05rem; line-height: 1.5;
}
.lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.lijst li::before {
  content: ""; position: absolute; left: 0; top: 1.55rem;
  width: 0.55rem; height: 1px; background: var(--geel);
}
.bijschrift {
  font: 0.72rem/1.5 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.06em; color: var(--zacht);
  margin: -1.4rem 0 2rem; padding-left: 0.1rem;
}
h1 {
  font-size: clamp(2rem, 6.6vw, 2.7rem); line-height: 1.12;
  font-weight: 400; margin: 0 0 1.4rem; letter-spacing: -0.01em;
}
.lead { font-size: 1.09rem; line-height: 1.6; }
h2 {
  font: 600 0.78rem/1.3 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--zacht);
  margin: 2.25rem 0 0.6rem;
}
/* De koppen ín het verhaal blijven schreef — het moet gelezen worden als tekst,
   niet gescand als een website met tussenkopjes. */
h2.kopje {
  font: 400 clamp(1.4rem, 4.6vw, 1.75rem)/1.2 Georgia, 'Iowan Old Style', serif;
  letter-spacing: -0.01em; text-transform: none; color: var(--inkt);
  margin: 0 0 1.2rem;
}
p { margin: 0 0 1.15rem; }
a { color: var(--inkt); text-decoration-color: var(--lijn); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--geel); }
.zacht { color: var(--zacht); }
form { margin: 2.25rem 0 0; }
label.veld { display: block; margin-bottom: 0.9rem; }
.weg {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
input[type=email] {
  width: 100%; padding: 0.95rem 1rem; font: inherit;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 3px;
}
input[type=email]:focus-visible { outline: 2px solid var(--geel); outline-offset: 1px; }
.instemming {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.9rem; color: var(--zacht); margin-bottom: 1.4rem;
}
.instemming input { margin-top: 0.3rem; flex: none; }
.cf-turnstile { margin-bottom: 1.2rem; }
/* alleen in het voorbeeldbestand: laat zien hoeveel ruimte de robotcheck straks inneemt */
.robotvak {
  display: flex; align-items: center; padding: 0 1rem; height: 65px; max-width: 300px;
  margin-bottom: 1.2rem; border: 1px dashed var(--lijn); border-radius: 3px;
  color: var(--zacht); font: 0.75rem/1.4 -apple-system, 'Segoe UI', system-ui, sans-serif;
}
button {
  width: 100%; padding: 1rem;
  font: 600 1rem/1 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--inkt); color: var(--papier);
  border: 0; border-radius: 3px; cursor: pointer;
}
button:hover { background: #332f29; }
button[disabled] { opacity: 0.55; cursor: default; }

.melding { margin-top: 1.1rem; font-size: 0.95rem; min-height: 1.4rem; }
.melding.goed { color: var(--goed); }
.melding.fout { color: var(--fout); }
.klein { font-size: 0.82rem; color: var(--zacht); margin-top: 1.2rem; line-height: 1.55; }
.klein a { color: var(--zacht); }
.pot { position: absolute; left: -9999px; }
hr { border: 0; border-top: 1px solid var(--lijn); margin: 2.5rem 0; }

/* ---------------------------------------------------------------- de gids (/guide) */

/* Inhoudsopgave. Twintig kaarten zijn op een telefoon te veel om langs te scrollen; wie
   binnenkomt heeft één klacht en wil daarheen. Genummerd, want de DM verwijst naar nummers. */
.inhoud { margin: 2.5rem 0 1rem; }
.inhoud p { margin-bottom: 0.7rem; font-size: 0.9rem; }
.inhoud ol { margin: 0; padding-left: 1.6rem; }
.inhoud li { padding: 0.3rem 0; line-height: 1.45; }
.inhoud a { text-decoration-color: var(--lijn); }

/* De tijdstip-koppen: wanneer op de dag. Ze delen de twintig in vijf behapbare stukken. */
.tijdstip {
  font: 600 0.72rem/1.3 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--geel);
  margin: 3.5rem 0 0.2rem; padding-top: 1.4rem; border-top: 1px solid var(--lijn);
}

/* Eén klacht = één kaart. De ruimte eromheen doet het werk: je leest er één en stopt. */
.glas { margin: 2.4rem 0; scroll-margin-top: 1.5rem; }
.glas h3 {
  font: 400 clamp(1.25rem, 4.2vw, 1.5rem)/1.25 Georgia, 'Iowan Old Style', serif;
  margin: 0 0 1rem; letter-spacing: -0.01em;
}
.nummer {
  display: inline-block; min-width: 1.6rem;
  font: 600 0.8rem/1.6rem -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: var(--geel);
}

/* De vier dingen, elk op een eigen regel. Dit is waar de lezer voor komt en wat hij
   meeneemt naar de winkel — het moet te scannen zijn zonder de tekst te lezen. */
.ingredienten {
  list-style: none; margin: 0 0 1rem; padding: 1rem 1.1rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
}
.ingredienten li {
  padding: 0.32rem 0 0.32rem 1.1rem; position: relative;
  font-size: 1.02rem; line-height: 1.45;
}
.ingredienten li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem;
  width: 0.45rem; height: 1px; background: var(--geel);
}

/* Het uur waarop het moet. Volgens de inleiding is dit het deel dat niemand vertelt, dus
   het staat apart en niet weggestopt in de lopende tekst. */
.wanneer {
  font: 0.92rem/1.5 -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: var(--zacht); margin: 0 0 1.1rem;
}
.wanneer span {
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--geel); margin-right: 0.4rem;
}

/* Wat je moet laten. Ingesprongen met een lijn, zodat het als terzijde leest. */
.mijden {
  font-size: 0.95rem; line-height: 1.55; color: var(--zacht);
  border-left: 2px solid var(--lijn); padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.1rem 0 0;
}
.mijden strong { color: var(--inkt); }
/* Het beeld boven aan de gids, en de sfeerfoto bij elk dagdeel. Volle breedte van de
   kolom; de verhouding staat in het bestand zelf, dus height:auto volstaat. */
.kopbeeld, .dagdeel {
  display: block; width: 100%; height: auto;
  border-radius: 3px; background: var(--lijn);
}
.kopbeeld { margin: 1.6rem 0 0.4rem; }
/* De dagdeelfoto hoort bij de kop eronder, dus die staat er strak tegenaan. */
.dagdeel { margin: 3.5rem 0 0; }
/* Op de voorpagina staat er een bijschrift onder een liggende foto; zonder deze regel trekt de
   negatieve marge van .bijschrift (bedoeld voor .portret) hem over de foto heen. */
.dagdeel + .bijschrift { margin-top: 0.6rem; }
.dagdeel + .tijdstip { margin-top: 0.9rem; padding-top: 0; border-top: 0; }

/* Klacht 3 heeft geen eigen glas maar verwijst naar dat van klacht 1. */
.verwijzing {
  padding: 0.85rem 1.1rem; margin: 0 0 1rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
}

/* Het weggeefkader: wat je krijgt, en het formulier. Staat op de voorpagina drie keer, dus het
   moet rustig blijven — geen schreeuwende kleur, wel zichtbaar een blok dat iets vraagt en
   zegt wat je ervoor terugkrijgt. */
.weggeef {
  margin: 2.6rem 0; padding: 1.4rem 1.3rem 1.2rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
  border-top: 3px solid var(--geel);
}
.weggeefkop {
  font: 400 clamp(1.25rem, 4.2vw, 1.5rem)/1.25 Georgia, 'Iowan Old Style', serif;
  letter-spacing: -0.01em; text-transform: none; color: var(--inkt);
  margin: 0 0 1rem;
}
.krijg { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.krijg li {
  position: relative; padding: 0 0 0.8rem 1.1rem;
  font-size: 0.97rem; line-height: 1.5; color: var(--zacht);
}
.krijg li:last-child { padding-bottom: 0; }
.krijg li::before {
  content: ""; position: absolute; left: 0; top: 0.72rem;
  width: 0.55rem; height: 1px; background: var(--geel);
}
.krijg strong { color: var(--inkt); }
.teller {
  font: 600 0.78rem/1.4 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--geel);
  margin: 0 0 0.9rem;
}
.weggeef form { margin: 0; }
.weggeef .klein { margin-top: 1rem; }
@media print { .weggeef { display: none; } }

/* De praatclip op de voorpagina: staand, niet breder dan de helft van de kolom — een pratend
   hoofd op volle breedte is te groot op een telefoon. */
.praatclip { margin: 1.8rem 0 2rem; }
.praatclip video {
  display: block; width: 100%; max-width: 18rem; height: auto;
  border-radius: 3px; background: var(--lijn);
}
.praatclip .bijschrift { margin: 0.6rem 0 0; }
@media print { .praatclip { display: none; } }

/* ---------------------------------------------------------------- plan-componenten */

/* Gebouwd voor de haargids (24 augustus), die op 14 september is weggehaald. De onderdelen
   blijven staan omdat ze herbruikbaar zijn voor een pagina die een plan met een tijdlijn is:
   weekschema, genummerde stappen, terzijde, tijdlijn, mijdtabel. */

/* Het weekschema is het hart. Wie de pagina sluit en er morgen aan terugdenkt, denkt aan dit
   blokje: eigen kader, lucht eromheen, iets lichter papier dan de rest. */
.weekvak {
  margin: 2rem 0 1.6rem; padding: 1.3rem 1.2rem 1.1rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
  border-top: 3px solid var(--geel);
}
.weekschema { width: 100%; border-collapse: collapse; }
.weekschema th, .weekschema td { text-align: left; vertical-align: top; }
.weekschema thead th {
  font: 600 0.68rem/1.3 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--geel);
  padding: 0 0.5rem 0.6rem 0;
}
.weekschema tbody th {
  font: 600 0.72rem/1.5 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--zacht);
  white-space: nowrap; padding: 0.75rem 0.9rem 0.75rem 0;
  border-top: 1px solid var(--lijn);
}
.weekschema tbody td {
  font-size: 0.97rem; line-height: 1.45; padding: 0.75rem 0.5rem 0.75rem 0;
  border-top: 1px solid var(--lijn);
}
/* Op een telefoon passen vier kolommen niet naast elkaar. Dan stapelt de tabel en neemt elke
   cel zijn kolomnaam mee (data-kolom, gezet door het bouwscript van de pagina), zodat "twee avonden"
   niet verdwijnt zodra de kop wegvalt. */
@media (max-width: 30rem) {
  .weekschema, .weekschema tbody, .weekschema tr, .weekschema th, .weekschema td {
    display: block; width: 100%;
  }
  .weekschema thead { display: none; }
  .weekschema tbody th { border-top: 1px solid var(--lijn); padding: 0.9rem 0 0.35rem; }
  .weekschema tbody td { border-top: 0; padding: 0 0 0.35rem; }
  .weekschema tbody td:empty { display: none; }
  .weekschema tbody td::before {
    content: attr(data-kolom) " · ";
    color: var(--geel);
    font: 600 0.68rem/1 -apple-system, 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .weekschema tbody tr:last-child td:last-child { padding-bottom: 0; }
}

/* De negen nummers zijn een route, geen willekeurige volgorde zoals bij /guide. Ze wegen
   daarom zwaarder: je moet kunnen zien waar je bent. */
.stap { margin: 0; padding: 2.6rem 0 0.4rem; scroll-margin-top: 1rem; }
/* Twee blokken zonder foto ertussen krijgen een lijn; staat er een foto tussen, dan doet die
   het scheiden al. */
.stap + .stap { border-top: 1px solid var(--lijn); }
.stapkop {
  display: flex; align-items: baseline; gap: 0.7rem;
  font: 400 clamp(1.45rem, 4.8vw, 1.8rem)/1.2 Georgia, 'Iowan Old Style', serif;
  letter-spacing: -0.01em; text-transform: none; color: var(--inkt);
  margin: 0 0 1.2rem;
}
.stapnr {
  flex: none;
  font: 600 1.5rem/1 -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: var(--geel);
}
.stapnr::after {
  content: ""; display: block; width: 1.5rem; height: 2px;
  background: var(--geel); margin-top: 0.35rem;
}

/* Het kader met wat je moet doen. Zelfde vorm als de ingrediëntenlijst op /guide, zodat de
   twee gidsen als één systeem lezen. */
.recept {
  padding: 0.9rem 1.1rem; margin: 0 0 1rem; font-size: 1.02rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
}

.subkopje {
  font: 600 0.74rem/1.3 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--zacht);
  margin: 2.1rem 0 0.7rem;
}
.opsomming, .volgorde { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.opsomming li, .volgorde li { padding: 0.28rem 0; line-height: 1.55; }
.opsomming { list-style: none; padding-left: 1.1rem; }
.opsomming li { position: relative; }
.opsomming li::before {
  content: ""; position: absolute; left: -1.1rem; top: 0.95rem;
  width: 0.55rem; height: 1px; background: var(--geel);
}
.volgorde li::marker { color: var(--geel); font-weight: 600; }

/* De blockquotes zijn de warmste stukken: de koffie-waarschuwing en hoe de ui ruikt. Daar
   praat hij even met je in plaats van te doceren. Ingesprongen met een lijn en iets warmer
   papier — maar rustig, dit mag geen tip-box van een marketingsite worden. */
.terzijde {
  margin: 1.6rem 0; padding: 1rem 1.1rem 0.1rem;
  border-left: 2px solid var(--geel); background: var(--wit);
  border-radius: 0 3px 3px 0;
}
.terzijde p { font-size: 0.98rem; line-height: 1.6; }

/* Sectie 9: week 1 → 2-3 → 4-5 → 6. Dit is het stuk dat mensen overhaalt om door te gaan bij
   week drie, waar iedereen stopt. Daarom een lijn met punten en niet vier losse alinea's. */
.tijdlijn {
  list-style: none; margin: 1.6rem 0 1.4rem; padding: 0 0 0 1.5rem;
  border-left: 1px solid var(--lijn);
}
.tijdlijn li { position: relative; padding: 0 0 1.3rem; }
.tijdlijn li:last-child { padding-bottom: 0.2rem; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -1.93rem; top: 0.45rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--geel);
}
.tijdlijn .wk {
  font: 600 0.72rem/1.4 -apple-system, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--geel);
  margin: 0 0 0.3rem;
}
.tijdlijn p:last-child { margin-bottom: 0; }

/* Wat je moet laten (blok 8). Twee kolommen op een scherm, gestapeld op een telefoon. */
.mijdtabel { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; }
.mijdtabel thead { display: none; }
.mijdtabel th, .mijdtabel td { text-align: left; vertical-align: top; }
.mijdtabel th {
  width: 42%; padding: 0.8rem 1rem 0.8rem 0; border-top: 1px solid var(--lijn);
  font-size: 1rem; line-height: 1.45;
}
.mijdtabel td {
  padding: 0.8rem 0; border-top: 1px solid var(--lijn);
  font-size: 0.94rem; line-height: 1.5; color: var(--zacht);
}
.mijdtabel tr:last-child th, .mijdtabel tr:last-child td { border-bottom: 1px solid var(--lijn); }
@media (max-width: 30rem) {
  .mijdtabel, .mijdtabel tbody, .mijdtabel tr, .mijdtabel th, .mijdtabel td {
    display: block; width: 100%;
  }
  .mijdtabel th { padding: 0.85rem 0 0.2rem; }
  .mijdtabel td { border-top: 0; padding: 0 0 0.85rem; }
  .mijdtabel tr:last-child td { border-bottom: 1px solid var(--lijn); }
}

/* De sfeerfoto's staan boven de kop waar ze bij horen, net als de dagdeelfoto's op /guide. */
.sfeer {
  display: block; width: 100%; height: auto;
  border-radius: 3px; background: var(--lijn); margin: 3rem 0 0;
}
.sfeer + .stap { padding-top: 1.2rem; }
/* De vergelijking is vierkant en staat op volle kolombreedte: de twee helften moeten groot
   genoeg zijn om te zien waar het om gaat. Het bijschrift eronder hoort erbij en is niet
   optioneel — zonder die regel belooft het beeld iets wat de gids nergens belooft. */
.vergelijk {
  display: block; width: 100%; height: auto;
  border-radius: 3px; background: var(--lijn); margin: 1.8rem 0 0.9rem;
}
/* Twee vergelijkingen onder elkaar: de tweede sluit aan op de eerste, het bijschrift geldt
   voor allebei. */
.vergelijk + .vergelijk { margin-top: 0.5rem; }
.vergelijk + .bijschrift { margin: 0 0 1.6rem; }

/* Printen. Er zit geen pdf achter de pagina — wie hem wil bewaren drukt op printen en
   krijgt dit. Vandaar dat de navigatie, het formulier en de voet eruit gaan. */
@media print {
  :root { --papier: #fff; --inkt: #000; --zacht: #444; --lijn: #bbb; --wit: #fff; }
  body { font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .inhoud, form, .voet, .merk, .melding { display: none; }
  /* Foto's kosten bij het printen alleen inkt; de tekst is waar het om gaat. */
  .kopbeeld, .dagdeel, .portret, .bijschrift, .sfeer, .vergelijk { display: none; }
  .glas { break-inside: avoid; page-break-inside: avoid; margin: 1.1rem 0; }
  /* De haargids: het weekschema, een blok en een terzijde mogen nooit over twee pagina's
     vallen — dan is het onderdeel dat je wilde bewaren juist het onderdeel dat je kwijt bent. */
  .weekvak, .terzijde, .recept, .tijdlijn li { break-inside: avoid; page-break-inside: avoid; }
  .stap { break-inside: avoid; page-break-inside: avoid; padding-top: 1.2rem; }
  .weekvak, .recept { border: 1px solid #bbb; border-top: 2px solid #666; }
  .stapnr::after, .tijdlijn li::before { background: #666; }
  .weekschema thead th, .weekschema tbody th, .stapnr, .tijdlijn .wk { color: #000; }
  .tijdstip { break-before: page; page-break-before: always; border-top: 0; }
  .tijdstip:first-of-type { break-before: auto; page-break-before: auto; }
  .ingredienten { border: 1px solid #bbb; }
  a { text-decoration: none; color: #000; }
  h1 { font-size: 24pt; }
}

.voet {
  margin: 3rem 0 4rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn);
  font: 0.78rem/1.6 -apple-system, 'Segoe UI', system-ui, sans-serif; color: var(--zacht);
}
.voet a { color: var(--zacht); }