/* =====================================================================
   DE NIEUWE KEUKEN — site
   =====================================================================
   Distilled from dnk-theme v1.2 (merktaal v2 — houtskool).
   Only what the pages need: tokens, base, frame with menu, hero,
   buttons, the Over ons section, the footer and the split pages
   (photo left, text right — Kerst and the pages to come).
   The theme's !important flags are gone — there is no plugin CSS to
   out-rank here.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BRAND TOKENS
   --------------------------------------------------------------------- */
:root {
  --papier:     #FFFFFF;   /* light surface; text on dark */
  --krijt:      #ECECE8;   /* page background */
  --houtskool:  #3A3A3A;   /* the frame: nav, footer */
  --blad:       #101711;   /* ink — only on light layers */
  --blad-zacht: #3C463E;
  --fles:       #275C37;
  --biet:       #E0195C;   /* accent on light */
  --framboos:   #FF7AA2;   /* accent on dark */
  --lijn:        rgba(16, 23, 17, .22);
  --lijn-donker: rgba(255, 255, 255, .32);

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body:    "Schibsted Grotesk", system-ui, sans-serif;
  --f-mono:    "Spline Sans Mono", ui-monospace, monospace;

  --nav-h: 70px;
  --rand: max(4vw, 24px);   /* page margin: hero claim, content, footer */
  --radius: 18px;
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--krijt);
  color: var(--blad);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--biet); color: var(--papier); }
:focus-visible { outline: 3px solid var(--biet); outline-offset: 3px; }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute;
  word-wrap: normal;
}
.skip-link:focus {
  clip-path: none; height: auto; width: auto;
  position: fixed; top: 8px; left: 8px; z-index: 100001;
  background: var(--papier); color: var(--blad);
  padding: 12px 18px; font-family: var(--f-mono); font-size: 14px;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
   Bricolage = headings · Schibsted = body · Spline Mono = "from the menu"
   --------------------------------------------------------------------- */
h1 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 .5em;
}

/* De punt — beet-red on light, raspberry on dark */
.punt { color: var(--biet); }
.dnk-hero .punt,
.site-header .punt,
.site-footer .punt { color: var(--framboos); }

/* ---------------------------------------------------------------------
   4. HEADER — the Houtskool frame, with the menu
   The same bar on every page: wordmark left, on the page margin so it
   lines up with the hero claim; menu right.
   From 1024px the menu is a row of labels plus an outlined Reserveren
   pill, and the page you are on gets the punt under its label. Below
   1024px it folds behind the menu button and opens as a full-height
   Houtskool panel under the bar (site.js toggles html.menu-open).
   1024px because five pages plus Reserveren need about 980px; with a
   sixth page, raise it here and in site.js.
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: var(--nav-h);
  background: rgba(58, 58, 58, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--papier);
}
.site-header .header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 var(--rand);
}
.site-branding .wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--papier);
  text-decoration: none;
  white-space: nowrap;
}

/* On the Houtskool frame the focus ring is framboos: biet is too dark there */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--framboos); }

.menu-knop { display: none; }

/* Gaps tighten towards 1024px so the row keeps fitting */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.5vw, 40px);
}
/* Labels in Bricolage, sentence case, like the phone menu. Not mono
   capitals: their word spaces are nearly as wide as the gaps between
   items, so "Feest of partij Over ons" ran together. Here a word space
   is ~4px against a 24–40px gap. */
.site-nav-lijst {
  display: flex;
  gap: clamp(24px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-lijst a {
  position: relative;
  display: block;
  padding: 12px 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--papier);
  text-decoration: none;
}

/* The punt under the label marks the page you are on, and shows on
   hover and focus. The label itself stays white: framboos text on the
   see-through bar over Krijt is only ~3.3:1, too low at this size. */
.site-nav-lijst a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--framboos);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .18s ease, transform .18s ease;
}
.site-nav-lijst a:hover::after,
.site-nav-lijst a:focus-visible::after,
.site-nav-lijst a[aria-current="page"]::after {
  opacity: 1;
  transform: none;
}

@media (max-width: 1023px) {
  /* The button: three bars that turn into a cross. 48px target; the
     negative margin puts the bars, not the box, on the page margin. */
  .menu-knop {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--papier);
    cursor: pointer;
  }
  .menu-knop-streep,
  .menu-knop-streep::before,
  .menu-knop-streep::after {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transition: transform .22s ease, background-color .22s ease;
  }
  .menu-knop-streep { position: relative; }
  .menu-knop-streep::before,
  .menu-knop-streep::after { content: ""; position: absolute; left: 0; }
  .menu-knop-streep::before { top: -7px; }
  .menu-knop-streep::after  { top: 7px; }
  .menu-open .menu-knop-streep { background-color: transparent; }
  .menu-open .menu-knop-streep::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-knop-streep::after  { transform: translateY(-7px) rotate(-45deg); }

  /* Open: bar and panel become one solid sheet, the page holds still */
  .menu-open,
  .menu-open body { overflow: hidden; }
  .menu-open .site-header { background: var(--houtskool); }

  /* The panel hangs under the bar and fills the rest of the screen */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 28px var(--rand) 48px;
    background: var(--houtskool);
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity .22s ease;
  }

  /* Pages as statements, in Bricolage; the current one ends on the punt.
     Solid Houtskool and large text here, so framboos on hover is fine. */
  .site-nav-lijst { flex-direction: column; gap: 0; }
  .site-nav-lijst a {
    padding: 6px 0;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-transform: none;
  }
  .site-nav-lijst a:hover,
  .site-nav-lijst a:focus-visible { color: var(--framboos); }
  .site-nav-lijst a::after { content: none; }
  .site-nav-lijst a[aria-current="page"]::after {
    content: ".";
    content: "." / "";
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    color: var(--framboos);
    opacity: 1;
    transform: none;
  }

  /* Reserveren as the full papier pill, as on the hero */
  .site-nav .knop {
    padding: 13px 26px;
    font-size: 14px;
    background: var(--papier);
    border-color: var(--papier);
    color: var(--blad);
  }
  .site-nav .knop:hover,
  .site-nav .knop:focus-visible {
    background: var(--framboos);
    border-color: var(--framboos);
    color: var(--blad);
  }
}

/* ---------------------------------------------------------------------
   5. HERO
   Full-bleed photo with the claim bottom-left over a scrim, at every
   size. Art direction: the landscape (hero-desk) above 780px, the
   portrait (hero-portrait) on phones.
   --------------------------------------------------------------------- */
.dnk-hero {
  position: relative;
  height: 100vh;    /* fallback: no lvh support */
  height: 100lvh;   /* desktop + Safari: the chrome-retracted height */
  min-height: 560px;
  color: var(--papier);
  overflow: hidden;
}
.dnk-hero-media {
  position: absolute;
  inset: 0;
  background-color: #2c332b;   /* holds the frame while the photo loads */
}
.dnk-hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The scrim: bottom-left radial plus a bottom fade, so the darkening
   sits under the claim and leaves the dish alone.
   Measured per pixel, white text composited over the render:
     desktop 1440x900 (hero-desk)
       H1      17.1:1 median / 9.4:1 min      kicker 16.1:1 / 10.2:1 min
     mobile 390x844 (hero-portrait)
       H1      16.0:1 median / 10.4:1 min     kicker 12.8:1 / 6.8:1 min
   The kicker is small text needing 4.5:1; it holds everywhere, lowest
   4.6:1 on a 360px phone. Re-measure if either photo changes. */
.dnk-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(150% 115% at 0% 100%,
      rgba(16, 23, 17, .90) 0%, rgba(16, 23, 17, .70) 40%, rgba(16, 23, 17, 0) 76%),
    linear-gradient(to top,
      rgba(16, 23, 17, .78) 0%, rgba(16, 23, 17, .40) 44%, rgba(16, 23, 17, 0) 68%);
  pointer-events: none;
}

.dnk-hero-claim {
  text-shadow: 0 1px 18px rgba(16, 23, 17, .45);
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(40px, 7vh, 84px);
  z-index: 2;
}
.dnk-hero-claim .kicker {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .93);
  margin-bottom: 20px;
}
.dnk-hero-claim h1 {
  font-size: clamp(44px, 7.6vw, 104px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 30px;
  max-width: 14ch;
  color: var(--papier);
}
.dnk-hero-acties { display: flex; gap: 14px; flex-wrap: wrap; }
.kicker-deel { white-space: nowrap; }   /* stacked on phones, see 10. */

/* ---------------------------------------------------------------------
   6. BUTTONS — pill, mono, uppercase
   --------------------------------------------------------------------- */
.knop {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  line-height: normal;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--blad);
  color: var(--papier);
  border: 2px solid var(--blad);
  border-radius: 999px;
  padding: 13px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.knop:hover, .knop:focus-visible {
  background: var(--biet);
  border-color: var(--biet);
  color: var(--papier);
}

/* On the dark hero: papier pill, hover framboos */
.knop-papier {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--blad);
}
.knop-papier:hover, .knop-papier:focus-visible {
  background: var(--framboos);
  border-color: var(--framboos);
  color: var(--blad);
}
.knop-omlijnd-donker {
  background: transparent;
  border-color: var(--papier);
  color: var(--papier);
}
.knop-omlijnd-donker:hover, .knop-omlijnd-donker:focus-visible {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--blad);
}

/* On light layers: outlined Blad, hover fills Blad */
.knop-omlijnd {
  background: transparent;
  color: var(--blad);
}
.knop-omlijnd:hover, .knop-omlijnd:focus-visible {
  background: var(--blad);
  border-color: var(--blad);
  color: var(--papier);
}

/* Small: Reserveren in the menu bar */
.knop-klein { padding: 9px 18px; font-size: 13px; }

/* ---------------------------------------------------------------------
   7. CONTENT — Over ons, one quiet centred column
   Hierarchy by size, not colour: two statements bookend the section
   (Over ons. / Tot snel!), the days in between are modest headings with
   their times in mono. So Sunday reads as part of the week, and the
   invitation stands on its own. Biet only in the punt: as small text on
   Krijt it drops below 4.5:1. About 56 characters a line: centred text
   reads best kept short.
   --------------------------------------------------------------------- */
.blok { padding: clamp(72px, 6vw + 48px, 128px) 0 clamp(80px, 6vw + 56px, 136px); }

.kolom {
  width: min(100% - 48px, 32rem);
  margin-inline: auto;
  text-align: center;
}
.kolom p {
  margin: 0 0 1em;
  font-size: clamp(17px, 15.5px + .4vw, 18px);
  line-height: 1.65;
  color: var(--blad-zacht);
  text-wrap: pretty;
}
.kolom p:last-child { margin-bottom: 0; }

.kop { margin-bottom: clamp(24px, 1vw + 20px, 36px); }
.kolom .statement {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(40px, 4vw + 24px, 64px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--blad);
  text-wrap: balance;
}

.dagen {
  margin-top: clamp(64px, 4vw + 48px, 104px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 3vw + 36px, 72px);
}
.dag-naam,
.tussenkop {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 1vw + 18px, 27px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--blad);
}
.kolom .tijd {
  margin: 8px 0 16px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--blad-zacht);
}

.afsluiter { margin-top: clamp(64px, 4vw + 48px, 104px); }
.kolom .afsluiter .statement { margin-bottom: 28px; }
.acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------------------------------------------------------------------
   8. FOOTER — the frame closes, centred like everything above it
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--houtskool);
  color: var(--papier);
  padding: clamp(56px, 4vw + 40px, 80px) 0 clamp(56px, 4vw + 40px, 88px);
}
.site-footer .footer-inner {
  width: min(100% - 48px, 52rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.site-footer .wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.footer-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 64px;
}
.footer-blok,
.footer-blok p,
.footer-blok address {
  margin: 0;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  line-height: 1.8;
  color: var(--papier);
}
.footer-blok .footer-kop {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .62);
}
.footer-blok a { text-decoration: none; }
.footer-blok a:hover,
.footer-blok a:focus-visible { color: var(--framboos); }

.mail-link { display: inline-flex; align-items: center; gap: 10px; }
.mail-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Instagram: Meta's official glyph (assets/img/instagram.svg, the black
   SVG from their brand pack, unaltered), used as a mask so it takes the
   link colour; Meta allows any single solid colour.
   29px is Meta's minimum size; the 15px gap and padding keep their clear
   space of half the glyph. */
.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  margin: -15px 0;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--papier);
  text-decoration: none;
}
.instagram-link:hover,
.instagram-link:focus-visible { color: var(--framboos); }
.instagram-glyph {
  width: 29px;
  height: 29px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("../img/instagram.svg") center / contain no-repeat;
          mask: url("../img/instagram.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   9. SPLIT PAGES — photo left, text right
   From 900px the photo holds the left half at full screen height and
   stays put (sticky) while the text scrolls past on the right. Below
   900px the photo is a band on top, about a third of the screen, with
   the text under it. The band uses --hero-h (measured once in <head>)
   for the same reason as the hero: viewport units jump in iOS browsers.
   The photos are swapped against the homepage on purpose — desktop gets
   the portrait, phones the landscape — so every screen sees both.
   --------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split-foto {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background-color: #2c332b;   /* holds the frame while the photo loads */
}
.split-foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 45%;
}
.split-tekst {
  align-self: center;   /* a short text sits mid-screen next to the photo */
  padding: calc(var(--nav-h) + clamp(56px, 3vw + 36px, 80px)) 0 clamp(80px, 6vw + 56px, 136px);
}
.split-tekst h1 {
  margin: 0 0 clamp(24px, 1vw + 20px, 36px);
  font-size: clamp(44px, 3vw + 30px, 72px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--blad);
  text-wrap: balance;
}
.kolom .datum {
  margin: 0 0 18px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blad-zacht);
}

/* The menu card: Bricolage subheads, prices on dotted leaders as on the
   printed card. Prices as plain numbers like the printed menu (90,
   18,5), no euro sign; screen readers get "90 euro" instead (hidden
   span in the HTML).
   The leader runs along the bottom of each row, on the last line's
   baseline. Name and price sit on top of it with a background in the
   page colour, so the dots only show between the last word and the
   price — also when a long name wraps. The right padding keeps names
   clear of the price. */
.kaart-blok { margin-top: clamp(56px, 4vw + 40px, 88px); }
.kolom .noot  { margin: 8px 0 18px; font-size: 16px; line-height: 1.55; }
.kolom .uitleg { margin: 12px 0 20px; }
.tussenkop + .prijslijst { margin-top: 18px; }

.prijslijst {
  margin: 0;
  text-align: left;
}
/* A row is either <dt> + <dd> in a list of prices (Kerst), or a <p>
   with .naam + .prijs for a dish that has more lines under it (the
   menu page) */
.prijs-rij {
  --vlak: var(--krijt);   /* page colour behind name and price */
  position: relative;
  padding: 5px 72px 5px 0;
}
.prijs-rij.lang { padding-right: 104px; }   /* price in words: "Dagprijs" */
.kolom .prijs-rij { margin: 0; font-size: 17px; line-height: 1.6; }   /* <p> rows: same line box as <dt> rows */
.prijs-rij::after {               /* the leader */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  border-bottom: 2px dotted rgba(16, 23, 17, .3);
}
.prijs-rij dt,
.prijs-rij .naam {
  display: inline;
  position: relative;
  z-index: 1;
  padding-right: 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--blad);
  background: var(--vlak);
}
.prijs-rij dd,
.prijs-rij .prijs {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 5px;
  margin: 0;
  padding-left: 10px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  white-space: nowrap;
  color: var(--blad);
  background: var(--vlak);
}

/* Menu page: a dish is its price row plus, under it, what's on the
   plate, a supplement row and the wine tip, as on the printed card */
.kaart {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gerecht + .gerecht { margin-top: 18px; }
.kolom .gerecht .info {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blad-zacht);
}
.kolom .gerecht .wijntip {
  margin: 2px 0 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--blad-zacht);
}
.prijs-rij.supplement .naam { font-size: 15px; color: var(--blad-zacht); }
.prijs-rij.supplement .prijs { font-size: 14px; font-weight: 500; }
.kolom .kaart + .noot { margin-top: 28px; }   /* "Bijpassende wijnen?" */

/* The line that closes the menu intro: "No nonsense. Gewoon goed eten." */
.kolom .slogan {
  margin: 28px 0 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 1vw + 18px, 27px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--blad);
}

/* Contact: mail, bel, loop binnen. Labels in mono like the footer,
   the details large enough to tap. The underline darkens on hover
   instead of turning biet: biet text on Krijt is under 4.5:1. */
.contact-lijst {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: clamp(36px, 2vw + 28px, 48px) 0 0;
}
.contact-lijst dt {
  margin: 0 0 4px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blad-zacht);
}
.contact-lijst dd {
  margin: 0;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.45;
}
.contact-lijst a {
  color: var(--blad);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--lijn);
  transition: text-decoration-color .18s ease;
}
.contact-lijst a:hover,
.contact-lijst a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blad);
}
.heel { white-space: nowrap; }   /* keeps an amount or phone number on one line */

/* Buttons straight under the text (Vegetarisch) */
.kolom > .acties { margin-top: clamp(36px, 2vw + 28px, 48px); }

@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; }
  .split-foto {
    position: relative;
    height: calc(var(--hero-h, 100svh) * .36);
    min-height: 200px;
  }
  .split-foto img { object-position: center 55%; }
  .split-tekst { padding: 56px 0 80px; }
}

/* ---------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 780px) {
  /* Phones: hero height is --hero-h, a pixel value measured once at load
     (inline script in <head>). No viewport unit works here — third-party
     iOS browsers resize the web view when their toolbar retracts, which
     re-evaluates svh/lvh/dvh and makes the hero pop mid-scroll. A fixed
     px height cannot move; when the toolbar goes, the viewport simply
     grows past the hero and reveals more of the page below it. */
  .dnk-hero {
    height: var(--hero-h, 100svh);
    min-height: 400px;   /* guard: --hero-h is set, so var() fallback can't fire */
  }
  .dnk-hero-claim { bottom: 32px; }   /* no viewport units on phones */
  .dnk-hero-claim h1 { font-size: clamp(38px, 11vw, 60px); }
  .dnk-hero-claim .kicker { font-size: 12px; letter-spacing: .14em; }
  .kicker-sep { display: none; }
  .kicker-deel { display: block; }
  .dnk-hero-acties { flex-direction: column; align-items: flex-start; }
  .dnk-hero-acties .knop { width: 100%; max-width: 320px; text-align: center; }
  .acties { flex-direction: column; align-items: center; }
  .acties .knop { width: 100%; max-width: 320px; text-align: center; }
}

/* Short landscape phones: a full-height hero leaves no room for the claim,
   so let the hero grow and the page scroll instead of squashing the type.
   Matches after the phone block above (wider than 780px when rotated), so
   height:auto correctly wins over --hero-h. */
@media (max-height: 480px) and (orientation: landscape) {
  .dnk-hero { height: auto; min-height: 0; padding: calc(var(--nav-h) + 40px) 0 40px; }
  .dnk-hero-media { position: absolute; }
  .dnk-hero-claim { position: relative; bottom: auto; padding-top: 30vh; }
}