/* ============================================================
   Restaurant Krijt - stijl "Villa"
   Rustig, licht en klassiek: creme, inkt en champagne.
   Serif voor de grote woorden, sans voor de kleine.
   ============================================================ */

:root {
  --cream: #f6f3ec;
  --cream-2: #efeadf;
  --paper: #fcfaf5;
  --ink: #1d1a16;
  --soft: #7d7568;
  --line: rgba(29, 26, 22, 0.14);
  --brass: #a8875a;
  --brass-deep: #8a6c41;
  --espresso: #16120d;
  --espresso-2: #201a13;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brass); color: #fff; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.4rem, 4vw, 3rem); }
.narrow { max-width: 760px; margin: 0 auto; }

/* ---------- kleine vaste vormen ---------- */
.kicker {
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 400;
  display: block;
  margin-bottom: 1.6rem;
}
.on-dark .kicker, .footer .kicker { color: #c8ab7d; }

.btn {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  border: 1px solid rgba(29, 26, 22, 0.4);
  padding: 1.05rem 2.6rem;
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, letter-spacing 0.55s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); letter-spacing: 0.38em; }
.btn.gold { border-color: rgba(168, 135, 90, 0.75); color: var(--brass-deep); }
.btn.gold:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn.light { color: #f4efe6; border-color: rgba(244, 239, 230, 0.55); }
.btn.light:hover { background: #f4efe6; color: var(--espresso); }

.textlink {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border-bottom: 1px solid rgba(168, 135, 90, 0.45);
  padding-bottom: 0.35rem;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.textlink:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- navigatie ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 1.6rem 0;
  transition: background 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav .logo {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: #f6f3ec;
  transition: color 0.5s ease;
}
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); list-style: none; }
.nav-links a {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(246, 243, 236, 0.9);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.nav-links a:hover, .nav-links a.active { border-color: currentColor; }
.nav-lang { display: flex; gap: 0.7rem; margin-left: clamp(0.6rem, 2vw, 2rem); }
.nav-lang a { opacity: 0.65; }
.nav-lang a.here { opacity: 1; border-color: currentColor; }

.nav.solid { background: rgba(246, 243, 236, 0.96); padding: 1rem 0; box-shadow: 0 1px 0 var(--line); }
.nav.solid .logo { color: var(--ink); }
.nav.solid .nav-links a { color: var(--ink); }

.nav.dark-page .logo { color: var(--ink); }
.nav.dark-page .nav-links a { color: var(--ink); }

/* mobiel menu */
.burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; position: relative; z-index: 70;
}
.burger i, .burger i::before, .burger i::after {
  content: ""; display: block; position: absolute; left: 8px; right: 8px;
  height: 1px; background: #f6f3ec; transition: transform 0.4s var(--ease), background 0.4s, top 0.4s;
}
.burger i { top: 19px; }
.burger i::before { top: -7px; }
.burger i::after { top: 7px; }
.nav.solid .burger i, .nav.solid .burger i::before, .nav.solid .burger i::after,
.nav.dark-page .burger i, .nav.dark-page .burger i::before, .nav.dark-page .burger i::after { background: var(--ink); }
body.menu-open .burger i { background: transparent !important; }
body.menu-open .burger i::before { top: 0; transform: rotate(45deg); background: var(--ink) !important; }
body.menu-open .burger i::after { top: 0; transform: rotate(-45deg); background: var(--ink) !important; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: 0;
    background: var(--cream);
    flex-direction: column; justify-content: center;
    gap: 2rem;
    transform: translateY(-102%);
    transition: transform 0.65s var(--ease);
  }
  body.menu-open .nav-links { transform: none; }
  .nav-links a { color: var(--ink) !important; font-size: 0.85rem; }
  .nav-lang { margin: 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #f8f5ee;
}
.hero-bg {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center;
  animation: heroslow 26s var(--ease) both;
}
@keyframes heroslow { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.42), rgba(18, 14, 10, 0.18) 45%, rgba(18, 14, 10, 0.52));
}
.hero-inner { position: relative; z-index: 2; padding: 0 1.4rem; max-width: 1000px; }
.hero .kicker { color: rgba(248, 245, 238, 0.85); }
h1.hero-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.7rem, 4.7vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fdfbf6;
  max-width: 26ch;
  margin: 0 auto;
}
.hero-quote .hq-l {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  transition: opacity 1.05s ease, transform 1.3s var(--ease), filter 1.05s ease;
}
.hero-quote .hq-l:nth-child(1) { transition-delay: 0.15s; }
.hero-quote .hq-l:nth-child(2) { transition-delay: 0.38s; }
.hero-quote.hq-on .hq-l { opacity: 1; transform: none; filter: none; }
.hero-quote .hq-em { font-style: normal; }
.hero .sub {
  margin-top: 1.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hero .btn { margin-top: 2.6rem; }
.hero-scroll {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(248, 245, 238, 0.75);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.hero-scroll i {
  display: block; width: 1px; height: 52px;
  background: rgba(248, 245, 238, 0.5);
  overflow: hidden; position: relative;
}
.hero-scroll i::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 1px; height: 50%;
  background: #fff;
  animation: scrolldrip 2.4s ease-in-out infinite;
}
@keyframes scrolldrip { 0% { top: -50%; } 100% { top: 110%; } }

@media (max-width: 560px) {
  h1.hero-quote { font-size: 6.3vw; max-width: none; }
}

/* pagina-hero (subpaginas) */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex; align-items: flex-end;
  color: #f8f5ee;
  overflow: hidden;
}
.page-hero .hero-bg { animation: heroslow 20s var(--ease) both; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.3), rgba(18, 14, 10, 0.55));
}
.page-hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(2.6rem, 6vw, 4.6rem); width: 100%; }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.page-hero .kicker { color: rgba(248, 245, 238, 0.8); margin-bottom: 1rem; }

/* ---------- secties ---------- */
section { position: relative; }
.sect { padding: clamp(4.6rem, 10vw, 8.5rem) 0; }
.sect.tight { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.sect.paper { background: var(--paper); }
.sect.cream2 { background: var(--cream-2); }

h2.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
h2.title em, .statement em, .bigquote em { font-style: italic; }
.center { text-align: center; }
.center h2.title { margin: 0 auto; }

p.lead {
  font-size: inherit;
  line-height: 1.85;
  color: var(--ink);
}
.muted { color: var(--soft); }

/* intro-blok home */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: start;
}
.intro-grid .left { position: sticky; top: 16vh; }
.intro-grid p + p { margin-top: 1.5rem; }

/* groot statement */
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}
.statement .who {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-top: 2.2rem;
}

/* editorial: beeld + tekst */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
}
.editorial .media { grid-column: 1 / span 6; }
.editorial .copy { grid-column: 8 / span 5; }
.editorial.flip .media { grid-column: 7 / span 6; order: 2; }
.editorial.flip .copy { grid-column: 1 / span 5; order: 1; }
.editorial .copy h2 { margin-bottom: 1.6rem; }
.editorial .copy p + p { margin-top: 1.4rem; }
.editorial .copy .btn, .editorial .copy .textlink { margin-top: 2.2rem; display: inline-block; }
.media-frame { overflow: hidden; position: relative; }
.media-frame img { width: 100%; height: auto; transition: transform 1.5s var(--ease); }
.media-frame:hover img { transform: scale(1.04); }
.media-tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.media-wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.media-cap {
  display: flex; justify-content: space-between;
  margin-top: 0.9rem;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--soft);
}

/* volle beeldband */
.band {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 55vh, 620px);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band .band-quote {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: rgba(18, 14, 10, 0.34);
  color: #f8f5ee;
  padding: 0 1.4rem;
}
.band .band-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  line-height: 1.3;
  max-width: 26ch;
}

/* reel */
.reel { overflow: hidden; width: 100%; margin-top: clamp(2rem, 5vw, 4rem); }
.reel-track {
  display: flex; align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-left: max(1.4rem, calc((100vw - 1240px) / 2 + 3rem));
  will-change: transform;
}
.reel-item { flex: 0 0 clamp(230px, 27vw, 400px); margin: 0; }
.reel-item:last-child { margin-right: max(1.4rem, calc((100vw - 1240px) / 2 + 3rem)); }
.reel-item:nth-child(even) { margin-top: clamp(1.4rem, 4.5vw, 4rem); }
.reel-item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.reel-item:hover img { transform: scale(1.045); }
.reel-item figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.reel-item b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.reel-item span { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 900px) {
  .reel { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .reel::-webkit-scrollbar { display: none; }
  .reel-track { transform: none !important; padding-right: 1.4rem; }
  .reel-item { flex-basis: 72vw; scroll-snap-align: center; }
  .reel-item:nth-child(even) { margin-top: 0; }
}

/* quote tussen haarlijnen */
.bigquote {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.4rem) 0;
  text-align: center;
}
.bigquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.3;
  color: var(--brass-deep);
  max-width: 28ch;
  margin: 0 auto;
}
.bigquote .who {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 2rem;
}

/* donkere sectie */
.on-dark {
  background: var(--espresso);
  color: #efe9dd;
}
.on-dark h2.title, .on-dark .statement { color: #f6f1e6; }
.on-dark p { color: rgba(239, 233, 221, 0.82); }
.on-dark .line-row { border-color: rgba(239, 233, 221, 0.16); }

/* feiten / rijen */
.line-rows { border-top: 1px solid var(--line); }
.line-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}
.line-row .lbl {
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 400; padding-top: 0.35rem;
}
.line-row .val { font-size: 1.02rem; }
.line-row .val b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; display: block; margin-bottom: 0.3rem; }

/* menu (gangen) */
.menu-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.menu-side { position: sticky; top: 15vh; }
.menu-side p + p { margin-top: 1.3rem; }
.price-cards { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.price-card { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.price-card b { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; }
.price-card span { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass-deep); }
.course { padding: clamp(1.9rem, 4vw, 2.6rem) 0; border-bottom: 1px solid var(--line); }
.course:first-child { border-top: 1px solid var(--line); }
.course .nr {
  font-family: var(--serif);
  color: var(--brass);
  font-size: 1.1rem;
  font-weight: 500;
  display: block; margin-bottom: 0.5rem;
}
.course h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; }
.course p { color: var(--soft); margin-top: 0.5rem; }

/* wijn-punten */
.points { border-top: 1px solid var(--line); margin-top: 1rem; }
.point {
  display: grid;
  grid-template-columns: minmax(110px, 190px) 1fr;
  gap: clamp(1rem, 4vw, 3.4rem);
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.point .lbl { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--brass-deep); }

/* trio kolommen */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3.6rem); }
.trio h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-bottom: 0.9rem; }
.trio .nr { color: var(--brass); font-family: var(--serif); display: block; margin-bottom: 0.9rem; font-size: 1.05rem; }

/* offer (vacatures) */
.offer { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: clamp(2.4rem, 6vw, 6rem); align-items: start; }
.offer-side { position: sticky; top: 16vh; }
.offer-side .btn { margin-top: 2rem; }
.offer-list { border-top: 1px solid var(--line); }
.offer-item { padding: 1.6rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem; align-items: baseline; }
.offer-item .nr { font-family: var(--serif); color: var(--brass); font-size: 1.2rem; }
.offer-item b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; display: block; margin-bottom: 0.25rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 6rem); }
.contact-facts .line-row { grid-template-columns: minmax(110px, 180px) 1fr; }
iframe.booking { width: 100%; height: 640px; border: 1px solid var(--line); background: #fff; }

/* formulier */
form .field { margin-bottom: 1.4rem; }
form label {
  display: block;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 0.5rem;
}
form input, form textarea, form select {
  width: 100%;
  font-family: var(--sans); font-weight: 300; font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(29, 26, 22, 0.35);
  padding: 0.65rem 0;
  transition: border-color 0.4s ease;
}
form input:focus, form textarea:focus { outline: none; border-color: var(--brass-deep); }
form textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -6000px; }

/* uren + contact op home */
.hours-band { background: var(--espresso); color: #efe9dd; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.hours-grid h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  margin-bottom: 1.4rem; color: #f6f1e6;
}
.hours-grid table { width: 100%; border-collapse: collapse; }
.hours-grid td { padding: 0.45rem 0; font-size: 0.95rem; color: rgba(239, 233, 221, 0.85); }
.hours-grid td:last-child { text-align: right; }
.hours-grid a:hover { color: #c8ab7d; }

/* footer */
.footer { background: var(--espresso); color: rgba(239, 233, 221, 0.75); border-top: 1px solid rgba(239, 233, 221, 0.1); }
.footer-inner { padding: clamp(2.6rem, 6vw, 4rem) 0; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.footer .logo { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.34em; text-transform: uppercase; color: #f6f1e6; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; list-style: none; }
.footer-links a { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; }
.footer-links a:hover { color: #c8ab7d; }
.footer-base {
  border-top: 1px solid rgba(239, 233, 221, 0.12);
  padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.72rem; letter-spacing: 0.08em;
}

/* ---------- onthullingen ---------- */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s ease, transform 1.15s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.12s; }
.rv-d2 { transition-delay: 0.24s; }
.rv-d3 { transition-delay: 0.36s; }

.par-frame { overflow: hidden; }
.par-frame img { will-change: object-position; }

/* ---------- responsief ---------- */
@media (max-width: 900px) {
  .intro-grid, .editorial, .menu-layout, .offer, .contact-grid, .hours-grid, .trio { grid-template-columns: 1fr; }
  .editorial .media, .editorial .copy,
  .editorial.flip .media, .editorial.flip .copy { grid-column: 1 / -1; order: initial; }
  .intro-grid .left, .menu-side, .offer-side { position: static; }
  .editorial .copy { margin-top: 0.6rem; }
  .hours-grid { gap: 2.4rem; }
  iframe.booking { height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .page-hero .hero-bg { animation: none; }
  .hero-quote .hq-l { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .reel-track { transform: none !important; }
  .par-frame img { object-position: center !important; }
  html { scroll-behavior: auto; }
}

/* ---------- menukaart: vaste foto, wit blok dat eroverheen scrolt ---------- */
.menucard-sect {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: clamp(5rem, 13vw, 10rem) 0;
}
@media (max-width: 900px), (hover: none) {
  .menucard-sect { background-attachment: scroll; }
}
.menucard-sect::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(18, 14, 10, 0.28);
}
.menucard {
  position: relative;
  background: var(--paper);
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2.8rem, 7vw, 5rem) clamp(1.6rem, 5vw, 4.2rem);
  text-align: center;
  box-shadow: 0 30px 80px rgba(18, 14, 10, 0.35);
}
.menucard .kicker { margin-bottom: 1.2rem; }
.menucard h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.menucard .card-sub { color: var(--soft); margin-top: 1rem; font-size: 0.95rem; }
.menucard .card-line {
  width: 44px; height: 1px;
  background: var(--brass);
  margin: 2.2rem auto;
}
.menucard .dish { padding: 1.3rem 0; }
.menucard .dish .nr {
  display: block;
  font-family: var(--serif);
  color: var(--brass);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.5rem;
}
.menucard .dish h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
}
.menucard .dish p { color: var(--soft); font-size: 0.92rem; margin-top: 0.35rem; }
.menucard .card-prices {
  border-top: 1px solid var(--line);
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  display: flex;
  justify-content: center;
  gap: clamp(1.6rem, 5vw, 3.6rem);
  flex-wrap: wrap;
}
.menucard .card-prices div b {
  font-family: var(--serif); font-weight: 500; font-size: 1.3rem; display: block;
}
.menucard .card-prices div span {
  font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass-deep);
}
.menucard .btn { margin-top: 2.4rem; }
.menucard .card-note { margin-top: 1.8rem; font-size: 0.82rem; color: var(--soft); }

/* ---------- v19c: geen lijnen-layout meer ---------- */
/* feiten zonder haarlijnen */
.facts .fact { margin-bottom: 2.1rem; }
.facts .fact .lbl {
  display: block;
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: 0.45rem;
}
.facts .fact .val { font-size: 1.05rem; }

/* geloofspunten als rustige blokken */
.creed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.2rem, 6vw, 4.6rem) clamp(2.2rem, 7vw, 6.5rem);
}
.creed-grid .creed .nr {
  display: block;
  font-family: var(--serif);
  color: var(--brass);
  font-size: 1rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.9rem;
}
.creed-grid .creed h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 0.7rem;
}
@media (max-width: 700px) { .creed-grid { grid-template-columns: 1fr; } }

/* arbeidsvoorwaarden als blokken */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.6rem) clamp(2rem, 6vw, 5rem);
}
.offer-grid .offer-block .nr {
  display: block;
  font-family: var(--serif);
  color: var(--brass);
  font-size: 1rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.8rem;
}
.offer-grid .offer-block b {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  display: block; margin-bottom: 0.4rem;
}
@media (max-width: 700px) { .offer-grid { grid-template-columns: 1fr; } }

/* wijnpunten zonder lijnen */
.points, .point { border: 0 !important; }
.point { display: block; padding: 1.1rem 0; }
.point .lbl { display: block; margin-bottom: 0.35rem; }

/* statement op de band in een doorlopende alinea */
.band .band-quote p { max-width: 36ch; }

/* ============================================================
   v2: geen navigatiebalk, alleen logo + menuknop met overlay
   ============================================================ */
.nav { display: none; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem clamp(1.4rem, 4vw, 3rem);
  transition: background 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
}
.topbar .logo {
  font-family: var(--serif);
  font-size: 1.65rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: #f6f3ec;
  transition: color 0.5s ease;
}
.menu-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: #f6f3ec;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: color 0.5s ease, letter-spacing 0.5s var(--ease);
  padding: 0.6rem 0;
}
.menu-btn:hover { letter-spacing: 0.42em; }
.menu-btn i {
  position: relative;
  display: block;
  width: 30px; height: 11px;
}
.menu-btn i::before, .menu-btn i::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease), width 0.5s var(--ease);
}
.menu-btn i::before { top: 0; }
.menu-btn i::after { top: 10px; width: 70%; }
.menu-btn:hover i::after { width: 100%; }

.topbar.solid {
  background: rgba(20, 16, 11, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  padding: 1rem clamp(1.4rem, 4vw, 3rem);
}
.topbar.solid .logo, .topbar.solid .menu-btn { color: #f6f1e6; }

body.ov-open .topbar { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ov-open .topbar .logo, body.ov-open .topbar .menu-btn { color: var(--ink); }
body.ov-open .menu-btn i::before { top: 5px; transform: rotate(45deg); }
body.ov-open .menu-btn i::after { top: 5px; width: 100%; transform: rotate(-45deg); }

/* het overlay-menu */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--cream);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease);
  overflow: hidden;
}
body.ov-open .overlay { clip-path: inset(0 0 0 0); }
.overlay::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 115%, rgba(168, 135, 90, 0.10), transparent 62%);
}
.ov-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1.6rem, 4vh, 3rem);
  padding: 5.5rem 1.4rem 2.4rem;
}
.ov-links { list-style: none; text-align: center; }
.ov-links li {
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
  transition-delay: 0s;
  margin: clamp(0.15rem, 1vh, 0.55rem) 0;
}
body.ov-open .ov-links li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.22s + var(--i) * 0.07s);
}
.ov-links a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vh, 3.4rem);
  line-height: 1.15;
  color: var(--ink);
  transition: color 0.4s ease, font-style 0.3s ease;
}
.ov-links a:hover, .ov-links a.active { color: var(--brass-deep); font-style: italic; }
.ov-foot {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem clamp(1.4rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.7s ease 0.7s;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
}
body.ov-open .ov-foot { opacity: 1; }
.ov-foot a { color: var(--ink); }
.ov-foot a:hover { color: var(--brass-deep); }
.ov-foot .nav-lang { display: flex; gap: 0.8rem; }
.ov-foot .nav-lang a { opacity: 0.6; padding-bottom: 0.3rem; border-bottom: 1px solid transparent; }
.ov-foot .nav-lang a.here { opacity: 1; border-color: currentColor; }
body.ov-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .overlay { transition: none; }
  .ov-links li { transition: none; opacity: 1; transform: none; }
  .ov-foot { transition: none; opacity: 1; }
}

/* ---------- menukaart klein, naast een foto, op wazige achtergrond ---------- */
.menucard-split {
  display: grid;
  grid-template-columns: minmax(300px, 470px) 1fr;
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: start;
}
.menucard.small {
  max-width: 470px;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.7rem);
}
.menucard.small h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.menucard.small .card-sub { font-size: 0.85rem; }
.menucard.small .card-line { margin: 1.6rem auto; }
.menucard.small .dish { padding: 0.85rem 0; }
.menucard.small .dish .nr { font-size: 0.8rem; margin-bottom: 0.3rem; }
.menucard.small .dish h3 { font-size: 1.2rem; }
.menucard.small .dish p { font-size: 0.84rem; margin-top: 0.2rem; }
.menucard.small .card-prices { margin-top: 1.6rem; padding-top: 1.3rem; }
.menucard.small .card-prices div b { font-size: 1.1rem; }
.menucard.small .btn { margin-top: 1.7rem; padding: 0.85rem 2rem; }
.menucard.small .card-note { font-size: 0.74rem; margin-top: 1.3rem; }
.menucard-side { position: sticky; top: 13vh; }
.menucard-side img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  box-shadow: 0 30px 80px rgba(18, 14, 10, 0.35);
}
@media (max-width: 900px) {
  .menucard-split { grid-template-columns: 1fr; }
  .menucard-side { position: static; max-width: 470px; margin: 0 auto; }
  .menucard.small { margin: 0 auto; }
}

/* ---------- wijn als rustige tweedeling, zonder foto ---------- */
.wine-split {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.wine-side { position: sticky; top: 15vh; }
.wine-side .title { margin-top: 0.4rem; }
.wine-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.45;
  color: var(--brass-deep);
  margin-top: 2rem;
}
.wine-side .who {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 1rem;
}
.wine-points { margin: 1.8rem 0; }
.wine-points p { margin-bottom: 1.1rem; }
.wine-points b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--brass-deep);
  margin-right: 0.35rem;
}
.wine-body p.lead { margin-bottom: 1.6rem; }
@media (max-width: 900px) {
  .wine-split { grid-template-columns: 1fr; }
  .wine-side { position: static; }
}

/* reel-kop op een regel */
.reel-title { font-size: clamp(1.9rem, 3vw, 2.9rem); max-width: none; }
@media (min-width: 901px) { .reel-title { white-space: nowrap; } }

/* ---------- leerpad: stappen langs een meegroeiende lijn ---------- */
.path {
  --pgap: clamp(1.8rem, 4vw, 3.4rem);
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0.5rem 0 0.5rem;
}
.path-line, .path-fill {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  transform: translateX(-0.5px);
}
.path-line { height: 100%; background: var(--line); }
.path-fill { height: 0; background: var(--brass); }
.path-step {
  position: relative;
  width: calc(50% - var(--pgap));
  padding: 0.6rem 0 clamp(1.8rem, 4vw, 3rem);
}
.path-step:nth-of-type(odd) { margin-left: auto; text-align: left; }
.path-step:nth-of-type(even) { margin-right: auto; text-align: right; }
.path-step::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brass);
}
.path-step:nth-of-type(odd)::before { left: calc(-1 * var(--pgap) - 4px); }
.path-step:nth-of-type(even)::before { right: calc(-1 * var(--pgap) - 4px); }
.path-step .nr {
  display: block;
  font-family: var(--serif);
  color: var(--brass);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.4rem;
}
.path-step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2;
  margin-bottom: 0.45rem;
}
.path-step p { color: var(--soft); }
@media (max-width: 700px) {
  .path-line, .path-fill { left: 4px; transform: none; }
  .path-step,
  .path-step:nth-of-type(odd),
  .path-step:nth-of-type(even) {
    width: auto;
    margin: 0 0 0 2rem;
    text-align: left;
  }
  .path-step::before,
  .path-step:nth-of-type(odd)::before,
  .path-step:nth-of-type(even)::before { left: -2rem; right: auto; margin-left: 0; }
}

/* ---------- beeldmerk ---------- */
.footer-mark { display: flex; align-items: center; gap: 1.1rem; }
.footer-mark img { width: 52px; height: auto; opacity: 0.85; }
.card-mark { width: 54px; height: auto; margin: 0 auto 1.3rem; display: block; opacity: 0.9; }

/* ---------- videobanner + quote eronder ---------- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
h1.hero-quote.under { color: var(--ink); margin: 0 auto; text-align: center; }
.quote-under { padding-top: clamp(3.4rem, 8vw, 6rem); padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }

/* ---------- menukaart: compact, scrolbaar, met wisselknop ---------- */
.menucard.scrolly {
  display: flex;
  flex-direction: column;
  max-height: min(76vh, 640px);
  padding-bottom: 1.6rem;
}
.card-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.card-tab {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--soft);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.card-tab.active, .card-tab:hover { color: var(--brass-deep); border-color: var(--brass); }
.card-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 135, 90, 0.5) transparent;
  padding: 0 0.4rem;
}
.card-scroll::-webkit-scrollbar { width: 4px; }
.card-scroll::-webkit-scrollbar-thumb { background: rgba(168, 135, 90, 0.45); border-radius: 2px; }
.card-pane { display: none; }
.card-pane.active { display: block; }
.menucard .card-foot { padding-top: 1.2rem; }
@media (max-width: 900px) {
  .menucard.scrolly { max-height: none; }
  .card-scroll { overflow: visible; }
}

/* ---------- logo-intro bij openen van de home ---------- */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  pointer-events: none;
  animation: introWeg 2.7s ease forwards;
}
.site-intro img {
  width: clamp(72px, 10vw, 110px);
  height: auto;
  opacity: 0;
  animation: introIn 1.1s ease 0.15s forwards;
}
.site-intro span {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: introIn 1.1s ease 0.45s forwards;
}
@keyframes introIn { to { opacity: 1; } }
@keyframes introWeg {
  0%, 75% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .site-intro { display: none; } }

/* ---------- geluidsknop linksonder ---------- */
.sound-btn {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.8rem);
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(168, 135, 90, 0.55);
  background: rgba(246, 243, 236, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 15px;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.sound-btn:hover { border-color: var(--brass-deep); }
.sound-btn i {
  display: block;
  width: 2px;
  height: 6px;
  background: var(--brass-deep);
  transform-origin: bottom;
  transition: height 0.3s ease;
}
.sound-btn.aan i { animation: eq 0.9s ease-in-out infinite alternate; }
.sound-btn.aan i:nth-child(2) { animation-delay: 0.2s; }
.sound-btn.aan i:nth-child(3) { animation-delay: 0.45s; }
@keyframes eq { from { height: 5px; } to { height: 14px; } }

/* ---------- beeldmerk als tekstscheiding ---------- */
.mark-divider {
  display: block;
  width: clamp(40px, 5vw, 54px);
  height: auto;
  margin: 0 auto;
  opacity: 0.6;
}
.footer-mark { gap: 0; }
.footer-mark img { display: none; }

/* ---------- luxe opening: vervagen vanuit donker, video zoomt zacht uit ---------- */
.site-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--cream);
  opacity: 1;
  transition: opacity 2.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 2.4s;
}
.site-veil i { display: none; }
.site-veil.weg { opacity: 0; visibility: hidden; }
.hero .hero-video {
  animation: videoIn 6s var(--ease) both;
}
@keyframes videoIn {
  from { transform: scale(1.10); filter: blur(10px) saturate(0.9); }
  50%  { filter: blur(0); }
  to   { transform: scale(1); filter: blur(0) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-veil { display: none; }
  .hero .hero-video { animation: none; }
}


/* ---------- heroknop: geen kader, klein streepje eronder ---------- */
.btn-line {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: #f4efe6;
  position: relative;
  padding-bottom: 0.75rem;
  transition: letter-spacing 0.5s var(--ease);
}
.btn-line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 36px;
  height: 1px;
  background: rgba(244, 239, 230, 0.85);
  transition: width 0.55s var(--ease);
}
.btn-line:hover { letter-spacing: 0.4em; }
.btn-line:hover::after { width: 100%; }
.hero .btn-line { margin-top: 2.4rem; }


/* made by memoir */
.footer-base .memoir a { color: rgba(239, 233, 221, 0.55); transition: color 0.4s ease; }
.footer-base .memoir a:hover { color: #c8ab7d; }


/* ---------- tekst luchtiger: twee kolommen naast elkaar ---------- */
.text-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
}
.text-cols p { margin: 0; }
@media (max-width: 760px) { .text-cols { grid-template-columns: 1fr; } }

/* ---------- menu: kop boven het blok, foto rechts vullend ---------- */
.menu-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); position: relative; z-index: 2; }
.menu-head h2 { margin: 0 auto; max-width: none; }

.menucard-sect.split-full { padding: 0; background: none; }
.menucard-sect.split-full::before { content: none; }
.full-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 88vh;
}
.full-split .side-photo { position: relative; overflow: hidden; }
.full-split .side-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.full-split .card-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.6rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.4rem);
  background-size: cover;
  background-position: center;
}
.full-split .card-side::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(18, 14, 10, 0.3);
}
.full-split .menucard { position: relative; z-index: 2; width: 100%; max-width: 460px; }
@media (max-width: 900px) {
  .full-split { grid-template-columns: 1fr; min-height: 0; }
  .full-split .side-photo { height: 62vh; }
}


/* kop boven het menublok strak tegen de split aan */
.sect.tight:has(.menu-head) { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.menu-head { margin-bottom: 0; }
.full-split { min-height: 84vh; }


/* ---------- ronde 15 ---------- */
/* de reserveerknop komt samen met de quote op */
.hero .btn-line {
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(4px);
  transition: opacity 1s ease 0.5s, transform 1.2s var(--ease) 0.5s, filter 1s ease 0.5s, letter-spacing 0.5s var(--ease);
}
.hero-quote.hq-on ~ .btn-line { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .btn-line { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* footer vrij houden van de reserveerwidget rechtsonder */
.footer { padding-bottom: clamp(4.5rem, 8vw, 6rem); }
.footer-base {
  justify-content: flex-start;
  gap: 0.6rem 2.4rem;
}
.footer-base .memoir {
  flex-basis: 100%;
  margin-top: 0.4rem;
  color: rgba(239, 233, 221, 0.45);
}


/* ---------- ronde 16 ---------- */
/* footer: net genoeg lucht onder de widget, niet meer */
.footer { padding-bottom: clamp(2.2rem, 3.5vw, 3.2rem); }

/* koppen netjes verdeeld over de regels */
h2.title, .page-hero h1, .menucard h2 { text-wrap: balance; }
.copy h2.title { max-width: 22ch; }

/* gecentreerde inleidingen mooi in balans */
.center p, .centered p, .narrow.center p { text-wrap: pretty; }


/* menukop met inleiding eronder, netjes gecentreerd */
.menu-head p { margin-left: auto; margin-right: auto; }

/* statement rustiger van formaat */
.statement {
  font-size: clamp(1.3rem, 2.5vw, 2.15rem);
  line-height: 1.4;
  max-width: 36ch;
}
.statement .who { margin-top: 1.8rem; }

/* ---------- echte menukaart ---------- */
.menucard.small { max-width: 580px; }
.menucard.scrolly { max-height: min(82vh, 760px); }
.kaart-kop {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 1.9rem 0 0.9rem;
}
.kaart-kop:first-child { margin-top: 0; }
.gerecht {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.5;
  margin: 0.7rem 0;
  color: var(--ink);
}
.gerecht i { display: inline-block; }
.gerecht i { font-style: normal; color: var(--brass); margin: 0 0.3rem; }
.gerecht b { font-weight: 400; color: var(--brass-deep); font-size: 0.95rem; margin-left: 0.4rem; }
.prijsblok { border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1.3rem; }
.prijs-rij { margin-bottom: 1.1rem; }
.prijs-rij:last-child { margin-bottom: 0; }
.prijs-rij b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
}
.prijs-rij span { display: block; font-size: 0.8rem; color: var(--soft); line-height: 1.5; }
.kaart-voet {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--soft);
  margin-top: 1.4rem;
}
.kaart-voet + .kaart-voet { margin-top: 0.7rem; }

/* wijnquote gecentreerd */
/* wijnquote staat links uitgelijnd, zoals de rest van de kolom */

/* groepsblok onder de kaart */
.groepen { text-align: center; max-width: 640px; margin: 0 auto; }
.groepen .mailto {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border-bottom: 1px solid rgba(168, 135, 90, 0.45);
  padding-bottom: 0.35rem;
}
.groepen .mailto:hover { color: var(--ink); border-color: var(--ink); }

/* openingstijden met twee rijen per dagdeel */
.hours-grid h4 {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c8ab7d;
  font-weight: 400;
  margin: 1.3rem 0 0.3rem;
}
.hours-grid h4:first-of-type { margin-top: 0; }
.hours-grid .tijd { font-size: 0.95rem; color: rgba(239, 233, 221, 0.85); line-height: 1.6; }
.hours-grid .klein { font-size: 0.82rem; color: rgba(239, 233, 221, 0.6); }

/* drie tabbladen op de menukaart */
.card-tabs.drie { gap: clamp(.7rem, 2.2vw, 1.4rem); }
.card-tabs.drie .card-tab { letter-spacing: .16em; font-size: .62rem; }
.card-pane .gerecht:first-of-type { margin-top: .2rem; }
.groepen .kicker { display: block; }

/* menu-intro: een alinea, netjes verdeeld over de regels */
.menu-intro {
  max-width: 46ch;
  margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
  text-align: center;
  text-wrap: pretty;
  color: var(--soft);
}

/* reserveerkolom in de urenband: netjes gecentreerd */
.hours-grid .res-kolom { text-align: center; }
.hours-grid .res-kolom h3 { display: block; }
.hours-grid .res-kolom p { max-width: 30ch; margin-left: auto; margin-right: auto; }
.hours-grid .res-kolom a[href^="mailto"] { color: #c8ab7d; border-bottom: 1px solid rgba(200,171,125,.4); }
.hours-grid .res-kolom .btn { white-space: nowrap; padding-left: 2rem; padding-right: 2rem; }

/* leerpad als opsomming: kortere koppen, geen tekst eronder */
.path.lijst .path-step h3 { font-size: clamp(1.1rem, 1.7vw, 1.42rem); line-height: 1.35; margin-bottom: 0; }
.path.lijst .path-step { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }

/* ============================================================
   MODERNISERING: knoppen, overlaymenu, menukaart
   ============================================================ */

/* --- knoppen: geen kaders meer, maar een fijne lijn --- */
.btn {
  border: 0;
  padding: 0 0 0.55rem;
  position: relative;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--ink);
  background: none;
}
.btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left;
  transition: transform 0.6s var(--ease), opacity 0.4s ease;
}
.btn:hover { background: none; color: var(--brass-deep); letter-spacing: 0.34em; }
.btn:hover::after { opacity: 1; transform: scaleX(1.06); }
.btn.gold { color: var(--brass-deep); }
.btn.gold:hover { background: none; color: var(--ink); }
.btn.light { color: #f4efe6; }
.btn.light:hover { background: none; color: #c8ab7d; }

/* --- opening: eind oktober --- */
.kicker.opening {
  color: var(--brass-deep);
  letter-spacing: 0.34em;
}
.kicker.opening::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  margin-right: 0.75rem;
  vertical-align: 0.15em;
}
.ov-foot .ov-open { color: var(--brass-deep); }

/* --- overlaymenu: modern, links uitgelijnd, genummerd --- */
.ov-inner { align-items: flex-start; justify-content: flex-end; padding: 5.5rem clamp(1.4rem, 7vw, 6rem) clamp(2rem, 6vh, 4rem); }
.ov-links { text-align: left; width: 100%; counter-reset: ovn; }
.ov-links li { margin: 0; border-top: 1px solid var(--line); }
.ov-links li:last-child { border-bottom: 1px solid var(--line); }
.ov-links a {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(0.35rem, 1.3vh, 0.9rem) 0;
  font-size: clamp(1.7rem, 4.4vh, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.45s ease, padding-left 0.6s var(--ease);
}
.ov-links a::before {
  counter-increment: ovn;
  content: "0" counter(ovn);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--brass);
  opacity: 0.7;
  min-width: 2.4em;
}
.ov-links a:hover, .ov-links a.active { color: var(--brass-deep); font-style: normal; padding-left: clamp(0.6rem, 2vw, 1.6rem); }
.ov-foot { justify-content: flex-start; width: 100%; margin-top: clamp(1.6rem, 4vh, 2.6rem); }

/* --- menukaart schuift van de zijkant binnen, gerechten komen een voor een --- */
.menucard.scrolly {
  opacity: 0;
  transform: translateX(-8%);
  transition: opacity 1s ease, transform 1.15s var(--ease);
}
.menucard.scrolly.in { opacity: 1; transform: none; }
.menucard-side { opacity: 0; transform: translateX(8%); transition: opacity 1s ease 0.15s, transform 1.15s var(--ease) 0.15s; }
.menucard-side.in { opacity: 1; transform: none; }

.card-pane .gerecht,
.card-pane .kaart-kop,
.card-pane .prijsblok,
.card-pane .kaart-voet,
.card-pane .card-sub,
.card-pane .card-line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
}
.card-pane.los .gerecht,
.card-pane.los .kaart-kop,
.card-pane.los .prijsblok,
.card-pane.los .kaart-voet,
.card-pane.los .card-sub,
.card-pane.los .card-line { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .menucard.scrolly, .menucard-side { opacity: 1; transform: none; transition: none; }
  .card-pane * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* moderne nummering in het leerpad */
.path-step .nr { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.28em; opacity: 0.8; }

/* ============================================================
   OVERLAYMENU: elegant paneel aan de zijkant, geen vol scherm
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 16, 11, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  clip-path: none;
  visibility: hidden;
  transition: background 0.7s ease, backdrop-filter 0.7s ease, visibility 0s linear 0.75s;
}
body.ov-open .overlay {
  background: rgba(20, 16, 11, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  visibility: visible;
  transition: background 0.7s ease, backdrop-filter 0.7s ease, visibility 0s;
}
.overlay::after { display: none; }

.ov-inner {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(400px, 88vw);
  background: var(--paper);
  box-shadow: -1px 0 0 var(--line), -30px 0 60px rgba(20, 16, 11, 0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.4rem, 4vh, 2.4rem);
  padding: 6rem clamp(1.8rem, 3vw, 2.8rem) 2.4rem;
  transform: translateX(101%);
  transition: transform 0.8s var(--ease);
}
body.ov-open .ov-inner { transform: none; }

.ov-links a {
  font-size: clamp(1.25rem, 2.6vh, 1.7rem);
  gap: 1.1rem;
  padding: clamp(0.5rem, 1.2vh, 0.85rem) 0;
}
.ov-links a::before { font-size: 0.55rem; min-width: 2.2em; }
.ov-links a:hover, .ov-links a.active { padding-left: 0.5rem; }
.ov-links li { border-top: 1px solid var(--line); }
.ov-links li:first-child { border-top: 0; }
.ov-links li:last-child { border-bottom: 0; }

.ov-foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  border-top: 1px solid var(--line);
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
}
.ov-foot li { line-height: 1.6; }

body.ov-open .topbar .logo { color: #f6f3ec; }
body.ov-open .topbar .menu-btn { color: var(--ink); }

@media (max-width: 620px) {
  .ov-inner { width: 100%; }
  body.ov-open .topbar .logo { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .ov-inner { transition: none; }
}

/* ============================================================
   MENUKAART: chic en transparant, vervaagt mee met de achtergrond
   ============================================================ */
.menucard {
  background: linear-gradient(160deg, rgba(252, 250, 245, 0.86), rgba(246, 243, 236, 0.78));
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  backdrop-filter: blur(26px) saturate(1.15);
  border: 1px solid rgba(252, 250, 245, 0.55);
  box-shadow: 0 40px 90px rgba(18, 14, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.menucard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.30), transparent 42%);
}
.menucard > * { position: relative; z-index: 1; }
.menucard .card-mark { opacity: 0.5; }
.card-tab { color: var(--brass-deep); opacity: 0.55; }
.card-tab.active, .card-tab:hover { opacity: 1; }
.gerecht { color: #241f19; }
.card-scroll::after {
  background: linear-gradient(to top, rgba(250, 247, 241, 0.95), rgba(250, 247, 241, 0));
}

/* de sluier over de achtergrond iets lichter, zodat de kaart erin oplost */
.menucard-sect::before { background: rgba(18, 14, 10, 0.34); }

@supports not (backdrop-filter: blur(4px)) {
  .menucard { background: rgba(252, 250, 245, 0.96); }
}

/* ============================================================
   MENUBALK: matglas, vervaagt mee met de pagina erachter
   ============================================================ */
body.ov-open .overlay {
  background: rgba(20, 16, 11, 0.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ov-inner {
  background: linear-gradient(200deg, rgba(252, 250, 245, 0.86), rgba(242, 237, 228, 0.78));
  -webkit-backdrop-filter: blur(34px) saturate(1.2);
  backdrop-filter: blur(34px) saturate(1.2);
  border-left: 1px solid rgba(252, 250, 245, 0.5);
  box-shadow: -40px 0 80px rgba(20, 16, 11, 0.16);
}
.ov-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.34), transparent 46%);
}
.ov-inner > * { position: relative; z-index: 1; }
.ov-links li { border-top-color: rgba(29, 26, 22, 0.11); }
.ov-links a { color: #241f19; }
.ov-foot { border-top-color: rgba(29, 26, 22, 0.11); }

@supports not (backdrop-filter: blur(4px)) {
  .ov-inner { background: rgba(252, 250, 245, 0.97); }
}

/* ============================================================
   OPENINGSMELDING: groter en duidelijker
   ============================================================ */
.kicker.opening {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  letter-spacing: 0.24em;
  font-weight: 400;
  color: var(--brass-deep);
  background: rgba(168, 135, 90, 0.10);
  border: 1px solid rgba(168, 135, 90, 0.32);
  border-radius: 999px;
  padding: 0.62rem 1.5rem 0.58rem;
  margin-bottom: 2rem;
}
.kicker.opening::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  margin: 0;
  vertical-align: 0;
  flex: 0 0 auto;
  animation: puls 2.8s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) { .kicker.opening::before { animation: none; } }

/* ook in de menubalk beter zichtbaar */
.ov-foot .ov-open {
  color: var(--brass-deep);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  border-top: 1px solid rgba(168, 135, 90, 0.28);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
  width: 100%;
}

/* ============================================================
   MENUBALK v3: elegant en creatief
   - matglas paneel rechts
   - items komen als uit een masker omhoog
   - bij aanwijzen verschijnt links een zwevend beeld
   ============================================================ */
.ov-inner {
  width: min(460px, 90vw);
  padding: 6.5rem clamp(2rem, 3.4vw, 3.4rem) 2.6rem;
  gap: clamp(1.6rem, 4vh, 2.8rem);
}
.ov-links li {
  opacity: 1;
  transform: none;
  transition: none;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
}
.ov-links li:last-child { border-bottom: 0; }
.ov-links a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: clamp(0.42rem, 1.1vh, 0.75rem) 0;
  font-size: clamp(1.7rem, 3.6vh, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  transform: translateY(110%);
  transition: transform 0.95s var(--ease), color 0.4s ease, padding-left 0.6s var(--ease);
}
body.ov-open .ov-links a {
  transform: none;
  transition-delay: calc(0.28s + var(--i) * 0.065s), 0s, 0s;
}
.ov-links a::before {
  content: "0" counter(ovn);
  counter-increment: ovn;
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: var(--brass);
  min-width: 2.2em;
  opacity: 0.75;
  transform: translateY(-0.55em);
}
.ov-links a span {
  position: relative;
  display: inline-block;
}
.ov-links a span::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.06em;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.65s var(--ease);
}
.ov-links a:hover span::after, .ov-links a.active span::after { transform: scaleX(1); transform-origin: left; }
.ov-links a:hover, .ov-links a.active { color: var(--brass-deep); font-style: italic; padding-left: 0.35rem; }
.ov-links a.active { font-style: italic; }

/* de voorvertoning in het gedimde deel van de pagina */
.ov-preview {
  position: absolute;
  left: clamp(4vw, 9vw, 12vw);
  top: 50%;
  width: min(30vw, 400px);
  aspect-ratio: 3 / 4;
  transform: translateY(-50%) translateY(18px) scale(0.97);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 40px 90px rgba(18, 14, 10, 0.35);
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
}
.ov-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease), opacity 0.5s ease;
}
.ov-preview.toon { opacity: 1; transform: translateY(-50%); }
.ov-preview.toon img { transform: scale(1); }
.ov-preview.wissel img { opacity: 0; }

.ov-foot {
  gap: 0.75rem;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
}
.ov-foot .nav-lang { gap: 1rem; }
.ov-foot .nav-lang a { opacity: 0.5; }
.ov-foot .nav-lang a.here { opacity: 1; }

@media (max-width: 900px) {
  .ov-preview { display: none; }
}
@media (max-width: 620px) {
  .ov-inner { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-links a { transform: none; transition: none; }
  .ov-preview { transition: none; }
}

/* ============================================================
   OPENINGSMELDING: nog groter, echt opvallend
   ============================================================ */
.kicker.opening {
  font-size: clamp(0.92rem, 1.45vw, 1.15rem);
  letter-spacing: 0.3em;
  color: #fbf8f1;
  background: linear-gradient(135deg, var(--brass), var(--brass-deep));
  border: 0;
  box-shadow: 0 18px 40px rgba(138, 108, 65, 0.28);
  padding: 1rem 2.4rem 0.95rem;
  margin-bottom: 2.4rem;
  gap: 0.9rem;
}
.kicker.opening::before {
  width: 9px; height: 9px;
  background: #fbf8f1;
  box-shadow: 0 0 0 0 rgba(251, 248, 241, 0.6);
  animation: puls2 2.4s ease-out infinite;
}
@keyframes puls2 {
  0%   { box-shadow: 0 0 0 0 rgba(251, 248, 241, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(251, 248, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 248, 241, 0); }
}
@media (prefers-reduced-motion: reduce) { .kicker.opening::before { animation: none; } }

/* ============================================================
   MENUBALK v4: donkerbruin, zonder nummers
   ============================================================ */
.ov-inner {
  background: linear-gradient(200deg, rgba(46, 35, 26, 0.90), rgba(30, 23, 17, 0.94));
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  backdrop-filter: blur(30px) saturate(1.1);
  border-left: 1px solid rgba(200, 171, 125, 0.18);
  box-shadow: -40px 0 90px rgba(18, 14, 10, 0.35);
}
.ov-inner::before {
  background: linear-gradient(200deg, rgba(200, 171, 125, 0.10), transparent 48%);
}
.ov-links a::before { display: none; content: none; }
.ov-links a {
  gap: 0;
  color: #f1ebe0;
  font-weight: 400;
  padding-left: 0;
}
.ov-links a span::after { background: #c8ab7d; }
.ov-links a:hover, .ov-links a.active { color: #d9bf93; font-style: italic; padding-left: 0.5rem; }
.ov-foot {
  color: rgba(241, 235, 224, 0.55);
  border-top-color: rgba(200, 171, 125, 0.18);
}
.ov-foot a { color: rgba(241, 235, 224, 0.85); }
.ov-foot a:hover { color: #d9bf93; }
.ov-foot .nav-lang a.here { border-color: #c8ab7d; color: #f1ebe0; }
.ov-foot .ov-open { color: #c8ab7d; border-top-color: rgba(200, 171, 125, 0.22); }

body.ov-open .overlay { background: rgba(20, 16, 11, 0.22); }
body.ov-open .topbar .menu-btn { color: #f1ebe0; }
body.ov-open .menu-btn i::before, body.ov-open .menu-btn i::after { background: #f1ebe0; }
@media (max-width: 620px) {
  body.ov-open .topbar .logo { color: #f1ebe0; }
}

/* menubalk smaller */
.ov-inner {
  width: min(340px, 86vw);
  padding: 6rem clamp(1.6rem, 2.6vw, 2.4rem) 2.2rem;
  gap: clamp(1.3rem, 3.4vh, 2.2rem);
}
.ov-links a { font-size: clamp(1.45rem, 3vh, 2rem); padding: clamp(0.36rem, 0.95vh, 0.62rem) 0; }
.ov-foot { font-size: 0.6rem; letter-spacing: 0.2em; }
.ov-preview { width: min(30vw, 380px); left: clamp(6vw, 12vw, 16vw); }

/* ============================================================
   MENUBALK v5: een dunne horizontale balk die onder het logo
   uitklapt. Geen paneel, geen foto's, geen nummers.
   ============================================================ */
.ov-preview { display: none !important; }

body.ov-open .overlay {
  background: rgba(20, 16, 11, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ov-inner {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 5.4rem clamp(1.4rem, 4vw, 3rem) 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: rgba(24, 19, 14, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
  border-left: 0;
  border-bottom: 1px solid rgba(200, 171, 125, 0.22);
  box-shadow: 0 30px 70px rgba(18, 14, 10, 0.25);
  transform: translateY(-100%);
  transition: transform 0.75s var(--ease);
}
.ov-inner::before { display: none; }
body.ov-open .ov-inner { transform: none; }

.ov-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(1.4rem, 2.8vw, 2.8rem);
  width: auto;
  counter-reset: none;
}
.ov-links li { border: 0; overflow: hidden; margin: 0; opacity: 1; transform: none; }
.ov-links a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(241, 235, 224, 0.82);
  padding: 0.55rem 0;
  gap: 0;
  font-style: normal;
  transform: translateY(120%);
  transition: transform 0.8s var(--ease), color 0.35s ease;
}
body.ov-open .ov-links a { transform: none; transition-delay: calc(0.2s + var(--i) * 0.05s), 0s; }
.ov-links a::before { display: none; content: none; }
.ov-links a span::after { bottom: -0.25em; height: 1px; background: #c8ab7d; }
.ov-links a:hover, .ov-links a.active { color: #d9bf93; font-style: normal; padding-left: 0; }
.ov-links a.active span::after { transform: scaleX(1); }

.ov-foot {
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: rgba(241, 235, 224, 0.5);
  opacity: 0;
  transition: opacity 0.6s ease 0.55s;
}
body.ov-open .ov-foot { opacity: 1; }
.ov-foot .ov-adres { display: none; }
.ov-foot .ov-open { border: 0; padding: 0; margin: 0; width: auto; color: #c8ab7d; white-space: nowrap; }
.ov-foot .nav-lang { gap: 0.9rem; }

body.ov-open .topbar .logo { color: #f6f3ec; }
body.ov-open .topbar .menu-btn { color: #f1ebe0; }

@media (max-width: 900px) {
  .ov-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-bottom: 1.6rem; }
  .ov-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .ov-links a { font-size: 0.8rem; padding: 0.6rem 0; }
  .ov-foot { flex-wrap: wrap; }
  .ov-foot .ov-adres { display: block; }
}
@media (max-width: 620px) {
  .ov-inner { width: 100%; }
  body.ov-open .topbar .logo { color: #f6f3ec; }
}

/* twee portretten naast elkaar, licht verspringend */
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.4vw, 1.1rem); align-items: start; }
.media-pair .media-frame img { aspect-ratio: 3 / 4.4; object-fit: cover; }
.media-pair .media-frame:nth-child(2) { margin-top: clamp(1.6rem, 4vw, 3.2rem); }

/* ============================================================
   THEMA 2026: GROTESK
   Referentie: Flore. Kapitalen met ruime spatiëring, vette
   grotesk koppen, warm greige met roestbruin accent.
   ============================================================ */
:root {
  --grotesk: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cream: #f4f0e9;
  --cream-2: #e9e2d7;
  --paper: #faf7f2;
  --greige: #d9d1c5;
  --ink: #1f1b17;
  --soft: #6f665c;
  --rust: #9a4b26;
  --rust-deep: #7d3b1c;
  --brass: #9a4b26;
  --brass-deep: #7d3b1c;
  --line: rgba(31, 27, 23, 0.14);
  --sans: var(--grotesk);
}
body { font-family: var(--grotesk); font-weight: 400; font-size: 0.98rem; letter-spacing: 0.01em; }

/* ---- koppen: vet, kapitaal, grotesk ---- */
h1, h2, h3, h2.title, .page-hero h1, .hours-grid h3, .menucard h2, .prijs-rij b,
.path-step h3, .trio h3, .creed-grid .creed h3, .groepen .title {
  font-family: var(--grotesk);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
h2.title {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  max-width: 22ch;
}
h2.title em, .statement em, .bigquote em { font-style: normal; font-weight: 300; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: 0.06em; line-height: 1.02; }
.hours-grid h3 { font-size: 0.82rem; letter-spacing: 0.24em; font-weight: 600; margin-bottom: 1.4rem; }
.hours-grid h4 { font-family: var(--grotesk); font-weight: 600; color: #d9bf93; }
.path-step h3, .path.lijst .path-step h3 { font-size: clamp(0.85rem, 1.2vw, 1rem); letter-spacing: 0.16em; font-weight: 600; line-height: 1.5; }
.statement {
  font-family: var(--grotesk);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.25rem, 2.4vw, 2.1rem);
  line-height: 1.18;
  max-width: 34ch;
}
.title, .page-hero h1, .statement { text-wrap: balance; }

/* ---- lopende tekst in kleine kapitalen, zoals Flore ---- */
.sect p, .band-quote p, .intro-grid p, .groepen p, .hours-grid p, .hours-grid td,
.card-sub, .kaart-voet, .facts .val, .card-note, .menu-intro, .media-cap, .reel-item figcaption,
.prijs-rij span, .contact-facts .val {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.95;
  color: var(--ink);
}
.sect p + p, .intro-grid p + p { margin-top: 1.1rem; }
.hours-grid p, .hours-grid td, .hours-grid .tijd { color: rgba(241, 235, 224, 0.85); }
.hours-grid .klein { color: rgba(241, 235, 224, 0.55); font-size: 0.64rem; }
.kaart-voet, .card-note, .prijs-rij span, .card-sub { color: var(--soft); font-size: 0.62rem; letter-spacing: 0.14em; line-height: 1.8; }
.band-quote p {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #fbf8f1;
  max-width: 30ch;
}
.media-cap, .reel-item figcaption { font-size: 0.6rem; letter-spacing: 0.24em; color: var(--soft); }
.footer, .footer *, form, form *, .ov-foot { text-transform: none; letter-spacing: normal; }
.footer-links a, .footer-base, .footer .logo { text-transform: uppercase; letter-spacing: 0.22em; }

/* ---- labels en accent ---- */
.kicker { font-family: var(--grotesk); font-size: 0.62rem; letter-spacing: 0.34em; color: var(--rust); font-weight: 500; }
.on-dark .kicker, .footer .kicker { color: #d9bf93; }
.textlink { font-family: var(--grotesk); color: var(--rust); border-color: rgba(154, 75, 38, 0.4); font-weight: 500; }
.textlink:hover { color: var(--ink); border-color: var(--ink); }
a.mailto, .groepen .mailto { color: var(--rust); }

/* ---- knoppen: dunne omlijnde kaders, zoals Flore ---- */
.btn, .btn-line {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(31, 27, 23, 0.55);
  padding: 0.95rem 2.1rem;
  position: relative;
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
.btn::after, .btn-line::after { display: none; }
.btn:hover, .btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); letter-spacing: 0.26em; }
.btn.gold { color: var(--rust); border-color: rgba(154, 75, 38, 0.6); }
.btn.gold:hover { background: var(--rust); color: #fbf8f1; border-color: var(--rust); }
.btn.light, .btn-line { color: #fbf8f1; border-color: rgba(251, 248, 241, 0.85); }
.btn.light:hover, .btn-line:hover { background: #fbf8f1; color: var(--ink); border-color: #fbf8f1; }
.hero-quote.hq-on ~ .btn-line { transform: none; }
.hours-grid .res-kolom .btn { white-space: nowrap; }

/* ---- hero: vette kapitalen, gecentreerd ---- */
h1.hero-quote {
  font-family: var(--grotesk);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.4rem, 3.4vw, 3rem);
  line-height: 1.15;
  max-width: 30ch;
}
.hero-quote .hq-em { font-weight: 300; }
.hero .btn-line { margin-top: 2.2rem; }
.hero-scroll { font-family: var(--grotesk); }

/* ---- logo ---- */
.topbar .logo, .footer .logo { font-family: var(--grotesk); font-weight: 600; letter-spacing: 0.4em; font-size: 1.05rem; }
.topbar { justify-content: flex-start; gap: clamp(1.2rem, 3vw, 2.4rem); }
.topbar .logo { margin-left: auto; margin-right: auto; position: absolute; left: 50%; transform: translateX(-50%); }
.menu-btn span { font-family: var(--grotesk); font-weight: 500; }

/* ---- openingsmelding ---- */
.kicker.opening {
  font-family: var(--grotesk);
  background: var(--rust);
  color: #fbf8f1;
  box-shadow: 0 18px 40px rgba(125, 59, 28, 0.25);
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0.28em;
}

/* ---- menukaart ---- */
.card-tab { font-family: var(--grotesk); color: var(--rust); font-weight: 500; }
.card-tab.active, .card-tab:hover { border-color: var(--rust); }
.gerecht {
  font-family: var(--grotesk);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  margin: 0.55rem 0;
}
.gerecht i { color: var(--rust); font-weight: 300; }
.gerecht b { font-weight: 400; color: var(--rust); font-size: 0.66rem; }
.prijs-rij b { font-size: 0.8rem; letter-spacing: 0.16em; }
.kaart-kop { color: var(--rust); font-weight: 600; }
.menucard .card-line { background: var(--rust); }

/* ---- wijnquote ---- */
.wine-quote { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.35; color: var(--rust); }
#wijn .who a { color: var(--rust); }

/* ---- secties: greige afwisseling ---- */
.sect.paper { background: var(--paper); }
.sect.cream2 { background: var(--greige); }
.hours-band { background: var(--ink); }

/* ---- leerpad ---- */
.path-line { background: rgba(31, 27, 23, 0.18); }
.path-fill, .path-step::before { background: var(--rust); }
.path-step .nr { color: var(--rust); font-family: var(--grotesk); }

/* ---- geluidsknop en overige accenten ---- */
.sound-btn { border-color: rgba(154, 75, 38, 0.5); }
.sound-btn i { background: var(--rust); }
::selection { background: var(--rust); color: #fff; }

/* ============================================================
   MENU: breed greige zijpaneel van links, zoals Flore
   ============================================================ */
body.ov-open .overlay { background: rgba(20, 16, 11, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ov-inner {
  position: absolute;
  top: 0; left: 0; right: auto; bottom: 0;
  height: 100%;
  width: min(560px, 92vw);
  min-height: 0;
  padding: clamp(5rem, 12vh, 8rem) clamp(2rem, 6vw, 5.5rem) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  background: var(--greige);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: 40px 0 90px rgba(18, 14, 10, 0.25);
  transform: translateX(-102%);
  transition: transform 0.85s var(--ease);
}
.ov-inner::before { display: none; }
body.ov-open .ov-inner { transform: none; }
.ov-close {
  position: absolute;
  top: 1.6rem; left: clamp(1.4rem, 4vw, 3rem);
  width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
}
.ov-close::before, .ov-close::after {
  content: "";
  position: absolute; left: 6px; right: 6px; top: 50%;
  height: 1.5px; background: var(--ink);
  transform: rotate(45deg);
}
.ov-close::after { transform: rotate(-45deg); }
.ov-mark {
  width: clamp(120px, 14vw, 170px);
  height: auto;
  margin: 0 0 clamp(2rem, 5vh, 3.4rem) -0.4rem;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.8s ease 0.35s, transform 0.9s var(--ease) 0.35s;
}
body.ov-open .ov-mark { opacity: 0.95; transform: none; }
.ov-links { display: block; width: 100%; }
.ov-links li { border: 0; overflow: hidden; margin: 0; }
.ov-links a {
  display: block;
  font-family: var(--grotesk);
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rust);
  padding: clamp(0.7rem, 1.5vh, 1.05rem) 0;
  transform: translateY(120%);
  transition: transform 0.85s var(--ease), color 0.35s ease, padding-left 0.5s var(--ease);
}
body.ov-open .ov-links a { transform: none; transition-delay: calc(0.3s + var(--i) * 0.055s), 0s, 0s; }
.ov-links a::before { display: none; content: none; }
.ov-links a span::after { display: none; }
.ov-links a:hover, .ov-links a.active { color: var(--ink); font-style: normal; padding-left: 0; }
.ov-links a.active { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
.ov-foot {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  padding: 0;
  border: 0;
  width: 100%;
  font-family: var(--grotesk);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0;
  transition: opacity 0.6s ease 0.75s;
}
body.ov-open .ov-foot { opacity: 1; }
.ov-foot a { color: var(--rust); }
.ov-foot a:hover, .ov-foot .nav-lang a.here { color: var(--ink); }
.ov-foot .nav-lang { gap: 1rem; }
.ov-foot .nav-lang a { opacity: 1; border: 0; padding: 0; }
.ov-foot .nav-lang a.here { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
.ov-foot .ov-adres { display: block; width: 100%; font-weight: 400; font-size: 0.62rem; color: var(--soft); margin-top: 0.4rem; }
.ov-foot .ov-open { border: 0; padding: 0; margin: 0; width: 100%; color: var(--rust); font-weight: 600; font-size: 0.62rem; }

body.ov-open .topbar .logo { color: #f6f3ec; }
body.ov-open .topbar .menu-btn { color: #f6f3ec; }
body.ov-open .menu-btn i::before, body.ov-open .menu-btn i::after { background: #f6f3ec; }

@media (max-width: 620px) {
  .ov-inner { width: 100%; padding-top: 5.5rem; }
}
body.ov-open .topbar .menu-btn { opacity: 0; pointer-events: none; }
.ov-foot .nav-lang { margin-left: 0; }
.band .band-quote p, .band-quote p { font-family: var(--grotesk); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.band-quote p em { font-weight: 300; font-style: normal; }
.gerecht { font-size: 0.66rem; letter-spacing: 0.12em; }
.gerecht i { margin: 0 0.25rem; }
.contact-facts .facts .val, .facts .fact .val { font-family: var(--grotesk); font-size: 0.72rem; letter-spacing: 0.16em; line-height: 1.95; }
.facts .lbl { font-family: var(--grotesk); color: var(--rust); }

/* knoppen met ronde hoeken (pilvorm) */
.btn, .btn-line, .kicker.opening, form button.btn { border-radius: 999px; padding-left: 2.3rem; padding-right: 2.3rem; }
.kicker.opening { padding-left: 2.4rem; padding-right: 2.4rem; }

/* ============================================================
   TERUG NAAR DE EIGEN LETTERS EN CHAMPAGNE
   Zelfde opbouw als het Flore-thema (kapitalen, vet + licht),
   maar met Cormorant voor de koppen, Jost voor de rest,
   en champagne in plaats van roestbruin.
   ============================================================ */
:root {
  --grotesk: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: var(--grotesk);
  --brass: #a8875a;
  --brass-deep: #8a6c41;
  --rust: #8a6c41;
  --rust-deep: #6e5532;
  --cream: #f6f3ec;
  --cream-2: #efeadf;
  --paper: #fcfaf5;
  --greige: #e6dfd3;
  --ink: #1d1a16;
  --soft: #7d7568;
}
body { font-family: var(--grotesk); font-weight: 300; }

/* koppen in Cormorant: kapitalen, vet, met een licht deel */
h1, h2, h3, h2.title, .page-hero h1, .menucard h2, .statement, .groepen .title, .creed-grid .creed h3, .trio h3 {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
h2.title { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.1; }
h2.title em, .statement em, .band-quote p em { font-weight: 400; font-style: normal; }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 5rem); letter-spacing: 0.08em; }
.statement { font-size: clamp(1.4rem, 2.7vw, 2.4rem); letter-spacing: 0.07em; }
h1.hero-quote { font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1.6rem, 3.8vw, 3.4rem); line-height: 1.12; }
.hero-quote .hq-em { font-weight: 400; }
.band-quote p { font-family: var(--serif); font-weight: 700; letter-spacing: 0.07em; font-size: clamp(1.15rem, 2.3vw, 1.9rem); }
.hours-grid h3, .path-step h3, .path.lijst .path-step h3 { font-family: var(--grotesk); }
.hours-grid h3 { font-weight: 400; }
.hours-grid h4 { font-family: var(--grotesk); font-weight: 400; color: #c8ab7d; }
.path-step h3, .path.lijst .path-step h3 { font-weight: 400; }
.prijs-rij b { font-family: var(--serif); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.12em; }

/* lopende tekst: Jost licht, kapitalen, ruim */
.sect p, .band-quote p:not(.x), .intro-grid p, .groepen p, .hours-grid p, .hours-grid td,
.card-sub, .kaart-voet, .facts .val, .card-note, .menu-intro, .media-cap, .reel-item figcaption,
.prijs-rij span, .contact-facts .val, .gerecht, .facts .fact .val {
  font-family: var(--grotesk);
  font-weight: 300;
}
.sect p, .intro-grid p, .groepen p, .menu-intro, .facts .val, .contact-facts .val, .facts .fact .val { font-size: 0.74rem; letter-spacing: 0.16em; }
.gerecht { font-weight: 400; }
.kicker, .textlink, .card-tab, .btn, .btn-line, .menu-btn span, .topbar .logo, .footer .logo, .ov-links a, .ov-foot, .kicker.opening { font-family: var(--grotesk); }
.topbar .logo, .footer .logo { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.36em; }

/* champagne terug op alle accenten */
.kicker, .textlink, .card-tab, .gerecht i, .gerecht b, .kaart-kop, .facts .lbl, a.mailto, .groepen .mailto, #wijn .who a, .wine-quote, .path-step .nr { color: var(--brass-deep); }
.on-dark .kicker, .footer .kicker { color: #c8ab7d; }
.textlink { border-color: rgba(168, 135, 90, 0.45); }
.card-tab.active, .card-tab:hover { border-color: var(--brass); }
.menucard .card-line, .path-fill, .path-step::before, .sound-btn i { background: var(--brass); }
.sound-btn { border-color: rgba(168, 135, 90, 0.5); }
::selection { background: var(--brass); color: #fff; }
.btn.gold { color: var(--brass-deep); border-color: rgba(168, 135, 90, 0.7); }
.btn.gold:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn.light:hover, .btn-line:hover { background: #f6f1e6; color: var(--ink); }
.kicker.opening { background: linear-gradient(135deg, var(--brass), var(--brass-deep)); box-shadow: 0 18px 40px rgba(138, 108, 65, 0.28); }
.hours-grid .res-kolom a[href^="mailto"], .ov-foot .ov-open { color: #c8ab7d; border-color: rgba(200, 171, 125, 0.4); }

/* menupaneel in champagne */
.ov-links a, .ov-foot, .ov-foot a, .ov-foot .ov-open { color: var(--brass-deep); font-weight: 400; }
.ov-links a { font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.45rem); letter-spacing: 0.22em; }
.ov-links a:hover, .ov-links a.active, .ov-foot a:hover, .ov-foot .nav-lang a.here { color: var(--ink); }
.ov-foot .ov-adres { color: var(--soft); }

/* ============================================================
   KOPPEN WEER SIERLIJK: Cormorant in gewone letters, cursief
   voor het lichte deel, alleen het eerste deel vet.
   ============================================================ */
h1, h2, h3, h2.title, .page-hero h1, .menucard h2, .statement, .groepen .title, h1.hero-quote, .band-quote p, .creed-grid .creed h3, .trio h3 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h2.title { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.06; max-width: 18ch; }
h2.title em, .statement em, .band-quote p em { font-weight: 400; font-style: italic; }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.2rem); letter-spacing: -0.015em; font-weight: 500; }
.statement { font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em; }
h1.hero-quote { font-size: clamp(2rem, 4.8vw, 4.4rem); line-height: 1.08; letter-spacing: -0.01em; }
.hero-quote .hq-em { font-weight: 400; font-style: italic; }
.band-quote p { font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.15; }
.wine-quote { font-weight: 400; font-style: italic; }
.ov-links a { text-transform: none; letter-spacing: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; }
.ov-links a.active { font-style: italic; }
.prijs-rij b { text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 500; }
.topbar .logo, .footer .logo { text-transform: uppercase; letter-spacing: 0.36em; }

/* lopende tekst weer in gewone letters */
.sect p, .intro-grid p, .groepen p, .hours-grid p, .hours-grid td,
.card-sub, .kaart-voet, .facts .val, .card-note, .menu-intro,
.prijs-rij span, .contact-facts .val, .facts .fact .val, .gerecht {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
}
.hours-grid p, .hours-grid td, .hours-grid .tijd { font-size: 0.95rem; }
.hours-grid .klein { font-size: 0.82rem; }
.kaart-voet, .card-note, .prijs-rij span { font-size: 0.8rem; line-height: 1.6; }
.card-sub { font-size: 0.95rem; }
.gerecht { font-family: var(--serif); font-size: 1.06rem; font-weight: 400; line-height: 1.5; margin: 0.7rem 0; }
.gerecht i { color: var(--brass); font-style: normal; }
.gerecht b { font-weight: 400; color: var(--brass-deep); font-size: 0.95rem; }
.menu-intro { color: var(--soft); }
.facts .val, .contact-facts .val, .facts .fact .val { font-size: 1rem; }
.media-cap, .reel-item figcaption { text-transform: uppercase; }

/* tekst op donkere secties weer licht */
.sect.on-dark p, .on-dark p, .sect.on-dark td, .on-dark .copy p { color: rgba(239, 233, 221, 0.88); }
.sect.on-dark .media-cap, .on-dark .media-cap { color: rgba(239, 233, 221, 0.6); }
.hours-band p, .hours-band td { color: rgba(239, 233, 221, 0.85); }
.hours-band .klein { color: rgba(239, 233, 221, 0.55); }

/* ============================================================
   TYPOGRAFIE TERUG NAAR DE OORSPRONKELIJKE STIJL
   (rustige serif koppen en cursieve quotes), lopende tekst
   een fractie groter.
   ============================================================ */
h1, h2, h3, h2.title, .page-hero h1, .menucard h2, .statement, .groepen .title, h1.hero-quote, .band-quote p, .creed-grid .creed h3, .trio h3 {
  font-weight: 400;
}
h2.title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 18ch; }
h2.title em, .statement em, .band-quote p em, .hero-quote .hq-em { font-weight: 400; font-style: italic; }
.page-hero h1 { font-weight: 400; font-size: clamp(2.7rem, 6.5vw, 5.4rem); line-height: 1.02; letter-spacing: -0.015em; }
.statement { font-weight: 400; font-size: clamp(1.7rem, 4vw, 3.3rem); line-height: 1.28; letter-spacing: -0.005em; }
h1.hero-quote { font-weight: 400; font-style: italic; font-size: clamp(1.7rem, 4.7vw, 4.2rem); line-height: 1.1; letter-spacing: -0.01em; }
.hero-quote .hq-em { font-style: normal; }
.band .band-quote p, .band-quote p { font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1.3; letter-spacing: 0; }
.ov-links a { font-weight: 400; }
.groepen .title { font-weight: 400; }

/* lopende tekst een fractie groter */
body { font-size: 1.05rem; }
.sect p, .intro-grid p, .groepen p, .menu-intro, .facts .val, .contact-facts .val, .facts .fact .val {
  font-size: 1.05rem;
  line-height: 1.8;
}
.hours-grid p, .hours-grid td, .hours-grid .tijd { font-size: 0.98rem; }

/* alleen titels met een cursief deel: eerste deel dik */
h2.title.split { font-weight: 600; }
h2.title.split em { font-weight: 400; font-style: italic; }

/* menupaneel: donker beeldmerk, kleiner, tekst hoger */
.ov-mark {
  width: clamp(64px, 6.5vw, 88px);
  filter: none;
  opacity: 0.9;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
body.ov-open .ov-mark { opacity: 0.9; }
.ov-inner { padding-top: clamp(4.2rem, 9vh, 6rem); justify-content: flex-start; }

/* bandquotes weer in de sierlijke serif, gewone letters */
.band .band-quote p, .band-quote p {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: -0.005em;
  font-style: italic;
  font-weight: 400;
}

/* reel-onderschriften weer zoals eerst: naam in serif, regel eronder klein */
.reel-item figcaption { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; }
.reel-item figcaption b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.reel-item figcaption span { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--soft); }

/* menupaneel: items in inkt, actief in champagne cursief */
.ov-links a { color: var(--ink); }
.ov-links a:hover, .ov-links a.active { color: var(--brass-deep); }

/* openingsbanner minder breed */
.kicker.opening {
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  letter-spacing: 0.22em;
  padding: 0.75rem 1.5rem 0.7rem;
  gap: 0.65rem;
}
.kicker.opening::before { width: 7px; height: 7px; }

/* menupaneel nog smaller */
.ov-inner { width: min(380px, 88vw); padding-left: clamp(1.8rem, 4vw, 3.2rem); padding-right: clamp(1.8rem, 4vw, 3.2rem); }
.ov-links a { font-size: clamp(1.3rem, 2vw, 1.7rem); padding: clamp(0.55rem, 1.2vh, 0.85rem) 0; }
.ov-mark { width: clamp(56px, 5.5vw, 76px); }

/* ============================================================
   MENUPANEEL: rustig verdeeld over de volle hoogte
   - beeldmerk boven, items in het midden, gegevens onderaan
   ============================================================ */
.ov-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 5.2rem;
  padding-bottom: clamp(1.8rem, 4vh, 2.8rem);
}
.ov-mark { flex: 0 0 auto; margin-bottom: 0; }
.ov-links { margin: auto 0; }
.ov-links a { padding: clamp(0.6rem, 1.5vh, 1rem) 0; }
.ov-foot {
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(1.1rem, 2.5vh, 1.6rem);
  gap: 0.8rem 1.6rem;
}
.ov-foot .ov-adres { margin-top: 0.1rem; }
.ov-foot .ov-open { margin-top: 0; }

/* geluidsknop niet over het paneel heen */
body.ov-open .sound-btn { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
/* het geheel als één blok in het midden, geen gaten */
.ov-inner { justify-content: center; padding-top: 4.6rem; }
.ov-links { margin: clamp(1.8rem, 4.5vh, 3.2rem) 0; }
.ov-mark { width: clamp(64px, 6vw, 84px); }

/* de balk bovenaan mag het kruisje niet blokkeren als het menu open is */
body.ov-open .topbar { pointer-events: none; }
body.ov-open .topbar .logo { pointer-events: auto; }
.ov-close { z-index: 2; }

/* ============================================================
   VIER CORRECTIES
   ============================================================ */
/* 1. reel-kop op een regel */
h2.title.reel-title { max-width: none; }
@media (min-width: 700px) { h2.title.reel-title { white-space: nowrap; } }

/* 2. openingsbanner: strak en egaal, zonder rare gloed */
.kicker.opening {
  background: var(--brass-deep);
  box-shadow: none;
  color: #fbf8f1;
}
.kicker.opening::before {
  width: 6px; height: 6px;
  background: #fbf8f1;
  box-shadow: none;
  animation: none;
}

/* 3. het statement op filosofie weer groot in de serif
      (de regel voor lopende tekst overschreef hem per ongeluk) */
.sect p.statement, p.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}
p.statement em { font-style: italic; font-weight: 400; font-family: var(--serif); }

/* 4. rustiger regelval in alle lopende tekst */
p { text-wrap: pretty; }
/* statement in evenwichtige regels */
p.statement { text-wrap: balance; max-width: 26ch; }

/* ============================================================
   MOBIELE CORRECTIES
   ============================================================ */
/* menukaart op mobiel: geen binnenscroll, kaart groeit gewoon mee
   (werd verderop per ongeluk weer op 82vh gezet, waardoor de
   tekst uit de kaart liep) */
@media (max-width: 900px) {
  .menucard.scrolly { max-height: none; }
  .card-scroll { overflow: visible; max-height: none; }
  .card-scroll::after { display: none; }
}

/* footer: zijruimte was weggevallen, tekst plakte tegen de schermrand */
.footer .wrap, .footer-inner, .footer-base {
  padding-left: clamp(1.4rem, 4vw, 3rem);
  padding-right: clamp(1.4rem, 4vw, 3rem);
}

.res-knoppen { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: center; }
@media (max-width: 560px) { .res-knoppen { flex-direction: column; align-items: flex-start; } }