/* =========================================================================
   Louis Bistrobar — Groningen
   Gebouwd 1:1 naar het Figma-bronbestand (desktop 1512, mobiel 375).
   Alle maten staan in ontwerp-pixels en schalen mee via --u.
   ========================================================================= */

/* ---------- 1. Fonts (uit het bronbestand) ------------------------------ */

@font-face { font-family: "Karumbi"; src: url("../fonts/Karumbi-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Orienta"; src: url("../fonts/Orienta-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  --maroon: #681617;
  --maroon-2: #561213;
  --cream: #efeeea;
  --cream-soft: #fcf3f3;
  --line: rgba(239, 238, 234, .24);

  --font-hand: "Karumbi", "Bradley Hand", cursive;
  --font-nav:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Orienta", "Helvetica Neue", Arial, sans-serif;

  /* 1 ontwerp-pixel. Desktopframe = 1512. */
  --u: min(1px, calc(100vw / 1512));
  --ut: max(var(--u), 0.8px);          /* tekst krimpt minder hard mee */
  --frame: 1512;
  --gutter: calc(44 * var(--u));

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cream); color: var(--maroon);
  font-family: var(--font-body); font-size: calc(16 * var(--ut)); line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--maroon); color: var(--cream); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 999; background: var(--cream); color: var(--maroon); padding: .6rem 1rem; font-family: var(--font-nav); text-transform: uppercase; font-size: 13px; }
.skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 4. Bouwstenen ------------------------------------------------ */

.wrap { width: min(100%, calc(var(--frame) * var(--u))); margin-inline: auto; padding-inline: var(--gutter); }

.bg-maroon { background: var(--maroon); color: var(--cream); }
.bg-cream  { background: var(--cream);  color: var(--maroon); }

/* Stage: absolute compositie in ontwerp-pixels.
   --sw/--sh = stage-afmeting, per element --x --y --w (--h) in ontwerp-px. */
.stage { position: relative; aspect-ratio: var(--sw) / var(--sh); }
.stage > * {
  position: absolute;
  left: calc(var(--x, 0) / var(--sw) * 100%);
  top:  calc(var(--y, 0) / var(--sh) * 100%);
  width: calc(var(--w, 100) / var(--sw) * 100%);
}
.stage > .box { height: calc(var(--h, 100) / var(--sh) * 100%); }
.stage figure { overflow: hidden; }
.stage figure img { width: 100%; height: 100%; object-fit: cover; }
.stage figure.box img { position: absolute; inset: 0; }
/* Exacte uitsnede uit het Figma-bronbestand:
   --cx/--cy = linkerbovenhoek, --cw/--ch = breedte/hoogte van het zichtbare deel (0-1). */
.stage figure.crop img {
  position: absolute; inset: auto; max-width: none; object-fit: fill;
  width: calc(100% / var(--cw)); height: calc(100% / var(--ch));
  left: calc(var(--cx) / var(--cw) * -100%);
  top:  calc(var(--cy) / var(--ch) * -100%);
}

/* Illustraties en logo's als CSS-masker, kleur = currentColor */
.ill { display: block; background: currentColor; aspect-ratio: var(--ar, 1); pointer-events: none; }
.ill, .mask { -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.mask { display: block; background: currentColor; }

.ill--grapes    { --mask: url(../svg/ill-grapes.svg);    --ar: 73 / 94; }
.ill--chef      { --mask: url(../svg/ill-chef-face.svg); --ar: 164 / 136; }
.ill--cheese    { --mask: url(../svg/ill-cheese.svg);    --ar: 86 / 64; }
.ill--glasses   { --mask: url(../svg/ill-glasses.svg);   --ar: 68 / 94; }
.ill--chef-solo { --mask: url(../svg/ill-chef-solo.svg); --ar: 69 / 120; }
.ill--underline { --mask: url(../svg/ill-underline.svg); --ar: 300 / 12; }
.ill--oval      { --mask: url(../svg/ill-oval.svg);      --ar: 464 / 248; }
.logo-mask      { --mask: url(../svg/logo-louis.svg);    --ar: 463 / 142; aspect-ratio: 463 / 142; }
.wordmark-mask  { --mask: url(../svg/wordmark-bistrobar.svg); --ar: 155 / 40; aspect-ratio: 155 / 40; }

/* Typografie */
.hand { font-family: var(--font-hand); font-weight: 400; }
.t-body { font-size: calc(16 * var(--ut)); line-height: calc(24 * var(--ut)); letter-spacing: -0.02em; }
.t-body p + p { margin-top: calc(24 * var(--ut)); }
.t-lead { font-size: calc(18 * var(--ut)); line-height: calc(32 * var(--ut)); letter-spacing: -0.018em; }
.t-lead p + p { margin-top: calc(32 * var(--ut)); }
.t-nav { font-family: var(--font-nav); font-weight: 400; font-size: calc(16 * var(--ut)); line-height: calc(24 * var(--ut)); letter-spacing: -0.02em; text-transform: uppercase; }

/* ---------- 5. Header ---------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--maroon); color: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: calc(72 * var(--u));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.site-header__logo { display: block; width: calc(80 * var(--u)); color: var(--cream); }
.site-header__logo .mask { width: 100%; aspect-ratio: 463 / 142; }

.site-nav ul { display: flex; align-items: center; gap: calc(56 * var(--u)); }
.site-nav li.nav-item { display: flex; align-items: center; height: calc(24 * var(--u)); }
.site-nav a { display: flex; align-items: center; gap: calc(4 * var(--u)); position: relative; padding: 2px 0; }
.site-nav a .icon { width: calc(24 * var(--u)); aspect-ratio: 1; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { font-weight: 500; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Voorkom verspringen bij Regular → Medium: reserveer breedte op basis van Medium */
.site-nav a > span { display: inline-grid; }
.site-nav a > span::after { content: attr(data-text); font-weight: 500; height: 0; visibility: hidden; overflow: hidden; grid-area: 1 / 1; }
.site-nav a > span > span { grid-area: 1 / 1; text-align: center; }

.lang { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.lang button { font: inherit; text-transform: uppercase; line-height: inherit; opacity: .75; border-bottom: 1px solid transparent; }
.lang button[aria-pressed="true"] { font-weight: 500; opacity: 1; border-bottom-color: currentColor; }
.lang button:hover { opacity: 1; }
.lang__sep { opacity: .5; }

.nav-toggle { display: none; justify-self: end; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--cream); }
.nav-toggle .mask { width: 24px; height: 24px; --mask: url(../svg/icon-menu.svg); }
.nav-toggle[aria-expanded="true"] .mask { width: 32px; height: 32px; --mask: url(../svg/icon-close-md.svg); }
.site-nav__foot, .site-nav .lang, .site-nav .socials { display: none; }

/* ---------- 6. Sticky CTA (Zenchef) -------------------------------------- */

.cta-bar {
  position: fixed; right: 20px; bottom: 28px; z-index: 40;
  display: flex; align-items: center;
  height: 42px; padding: 0 16px;
  background: var(--maroon); color: var(--cream-soft);
  border: 1px solid rgba(239, 238, 234, .4); border-radius: 4px;
  font-family: var(--font-nav); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; line-height: 16px;
  box-shadow: 0 10px 30px rgba(40, 10, 10, .25);
}
.cta-bar__z { width: 16px; height: 16px; margin-right: 16px; }
.cta-bar a { display: flex; align-items: center; height: 40px; padding: 0 16px; border-left: 1px solid rgba(239, 238, 234, .4); transition: background .2s; }
.cta-bar a:hover { background: var(--maroon-2); }
.cta-bar a:last-child { padding-right: 0; }

/* ---------- 7. Home: hero ------------------------------------------------ */

.hero { overflow: hidden; }
.hero__stage { --sw: 1424; --sh: 880; }
.hero__oysters { --x: 0;    --y: 40;  --w: 404; --h: 472; }
.hero__dessert { --x: 540;  --y: 280; --w: 884; --h: 480; }
.hero__logo    { --x: 480;  --y: 168; --w: 464; z-index: 2; }
.hero__chef    { --x: 1140; --y: 88;  --w: 164; }
.hero__wordmark{ --x: 0;    --y: 720; --w: 155; }
.hero__grapes  { --x: 150;  --y: 688; --w: 34; }

/* ---------- 8. Home: welcome (maroon) ----------------------------------- */

.welcome { position: relative; overflow: visible; }
.welcome__stage { --sw: 1512; --sh: 720; }
.welcome__grapes { --x: 284; --y: -7; --w: 73; }
.welcome__title  { --x: 404; --y: 120; --w: 700; font-size: calc(120 * var(--ut)); line-height: calc(104 * var(--ut)); white-space: nowrap; }
.welcome__text   { --x: 404; --y: 224; --w: 704; }
.welcome__oval   { --x: 764; --y: 352; --w: 464; aspect-ratio: 464 / 248; }
.welcome__oval .ill { position: absolute; inset: 0; width: 100%; }
.welcome__oval .oval-text {
  position: absolute; left: 15.7%; top: 34.7%; width: 69%;
  font-size: calc(64 * var(--ut)); line-height: calc(48 * var(--ut)); text-align: center;
  transform: rotate(-6deg); transform-origin: 0 0;
}

/* ---------- 9. Home: collage (cream) ----------------------------------- */

/* Geen eigen achtergrond: de body is al crème, zodat de chef-foto over de rode band valt. */
.collage { position: relative; z-index: 2; }
.collage__stage { --sw: 1424; --sh: 1104; margin-top: calc(-120 * var(--u)); }
.collage__chefphoto { --x: 0;    --y: 0;   --w: 644; --h: 456; --cx: 0; --cy: .0352; --cw: 1; --ch: .5665; }
.collage__cocktail  { --x: 960;  --y: 240; --w: 464; --h: 456; }
.collage__pasta     { --x: 540;  --y: 528; --w: 344; --h: 456; }
.collage__sandwich  { --x: 60;   --y: 584; --w: 404; --h: 232; }
.collage__chef      { --x: 330;  --y: 800; --w: 164; }
.collage__grapes    { --x: 900;  --y: 216; --w: 77; }
.collage__cheese    { --x: 1089; --y: 768; --w: 86; }

/* ---------- 10. Footer --------------------------------------------------- */

.site-footer { color: var(--cream); }
.site-footer__stage { --sw: 1424; --sh: 360; }
.site-footer__logo     { --x: 0;    --y: 56;  --w: 439; }
.site-footer__wordmark { --x: 268;  --y: 206; --w: 158; }
.site-footer__hours    { --x: 840;  --y: 56;  --w: 284; }
.site-footer__contact  { --x: 1200; --y: 56;  --w: 224; }
.site-footer__line     { --x: 0;    --y: 304; --w: 1424; height: 1px; background: rgba(252, 243, 243, .24); }
.site-footer__copy     { --x: 0;    --y: 320; --w: 400; }
.site-footer__legal    { --x: 840;  --y: 320; --w: 400; display: flex; gap: calc(12 * var(--u)); }
.site-footer h2 { font-size: calc(64 * var(--ut)); line-height: calc(64 * var(--ut)); margin-bottom: calc(16 * var(--ut)); white-space: nowrap; }
.site-footer .t-body p + p { margin-top: calc(16 * var(--ut)); }
.site-footer__contact .t-body p + p { margin-top: calc(8 * var(--ut)); }
.t-small { font-size: calc(14 * var(--ut)); line-height: calc(24 * var(--ut)); letter-spacing: -0.023em; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.socials { display: flex; gap: calc(16 * var(--u)); margin-top: calc(16 * var(--u)); }
.socials a { display: block; width: calc(24 * var(--u)); aspect-ratio: 1; opacity: .95; transition: transform .2s; }
.socials a:hover { transform: translateY(-1px); opacity: 1; }
.socials .mask { width: 100%; height: 100%; }
.icon--facebook  { --mask: url(../svg/icon-facebook.svg); }
.icon--instagram { --mask: url(../svg/icon-instagram.svg); }
.icon--dish      { --mask: url(../svg/icon-dish.svg); }

/* ---------- 11. Menu ----------------------------------------------------- */

.menu__stage { --sw: 1424; --sh: 784; }
.menu__photo   { --x: 0;    --y: 40;  --w: 644; --h: 704; }
.menu__cheese  { --x: 1200; --y: 64;  --w: 77; }
.menu__title   { --x: 840;  --y: 208; --w: 404; text-align: center; }
.menu__title h1 { font-size: calc(200 * var(--ut)); line-height: calc(144 * var(--ut)); letter-spacing: -0.015em; }
.menu__title .ill { width: 74.3%; margin: calc(-28 * var(--u)) auto 0; }
.menu__list { --x: 960; --y: 400; --w: 164; display: grid; gap: calc(16 * var(--u)); text-align: center; }
.menu__list a {
  position: relative; display: block;
  font-size: calc(24 * var(--ut)); line-height: calc(32 * var(--ut)); letter-spacing: -0.027em; text-transform: uppercase;
}
.menu__list a::before, .menu__list a::after {
  content: ""; position: absolute; top: 50%; width: calc(14 * var(--u)); height: calc(18 * var(--u));
  background: currentColor; -webkit-mask: url(../svg/icon-arrow.svg) center / 100% 100% no-repeat; mask: url(../svg/icon-arrow.svg) center / 100% 100% no-repeat;
  opacity: 0; transition: opacity .25s, transform .25s var(--ease);
}
.menu__list a::before { left: calc(-4 * var(--u)); transform: translate(-6px, -50%); }
.menu__list a::after  { right: calc(-4 * var(--u)); transform: translate(6px, -50%) rotate(180deg); }
.menu__list a:hover::before, .menu__list a:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.menu__list a:hover::after,  .menu__list a:focus-visible::after  { opacity: 1; transform: translate(0, -50%) rotate(180deg); }
.menu__glasses { --x: 631;  --y: 504; --w: 68; z-index: 2; }
.menu__chef    { --x: 1264; --y: 584; --w: 69; }

/* ---------- 12. About ---------------------------------------------------- */

.about__stage { --sw: 1424; --sh: 1032; }
.about__title { --x: 0; --y: 599; --w: 519; height: calc(200 / var(--sh) * 100%); transform: rotate(-90deg); transform-origin: 0 0; }
.about__title h1 { font-size: calc(200 * var(--ut)); line-height: calc(200 * var(--ut)); letter-spacing: -0.015em; text-align: center; white-space: nowrap; }
.about__photo     { --x: 120; --y: 40;  --w: 464; --h: 600; }
.about__p1        { --x: 600; --y: 80;  --w: 464; }
.about__aperitivo { --x: 900; --y: 216; --w: 224; --h: 224; }
.about__cheese    { --x: 840; --y: 416; --w: 66; }
.about__p2        { --x: 900; --y: 520; --w: 524; }
.about__drinks    { --x: 900; --y: 664; --w: 524; --h: 248; }
.about__chef      { --x: 120; --y: 736; --w: 164; }
.about__p3        { --x: 601; --y: 840; --w: 403; z-index: 2; }
.about__mark      { --x: 1380; --y: 43; --w: 44; aspect-ratio: 44 / 171; }
.about__mark .mask { position: absolute; left: 100%; bottom: 0; width: 388.6%; aspect-ratio: 155 / 40; transform: rotate(-90deg); transform-origin: 0 100%; }
.about__grapes    { --x: 1338; --y: 200; --w: 42; }

/* ---------- 13. Vacancies ------------------------------------------------ */

.vac__stage { --sw: 1424; --sh: 784; }
.vac__photo { --x: 240; --y: 120; --w: 464; --h: 544; }
.vac__title { --x: 540; --y: 120; --w: 395; z-index: 2; text-align: center; }
.vac__title h1 { font-size: calc(200 * var(--ut)); line-height: calc(200 * var(--ut)); letter-spacing: -0.015em; word-spacing: .22em; white-space: nowrap; }
.vac__title br { display: none; }
.vac__text  { --x: 720; --y: 544; --w: 464; }

/* Solliciteren (placeholder voor de Soigne-widget) */
.apply-launch {
  position: fixed; left: 20px; bottom: 28px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px;
  background: var(--maroon); color: var(--cream-soft);
  border: 1px solid rgba(239, 238, 234, .4); border-radius: 4px;
  font-family: var(--font-nav); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(40, 10, 10, .25); transition: background .2s;
}
.apply-launch:hover { background: var(--maroon-2); }
.apply-launch .mask { width: 16px; height: 16px; --mask: url(../svg/icon-menu.svg); }
.apply { position: fixed; left: 20px; bottom: 28px; z-index: 45; width: min(400px, calc(100vw - 40px)); }
.apply[hidden] { display: none; }
.apply__close { position: absolute; right: -6px; top: -50px; width: 40px; height: 40px; border-radius: 50%; background: var(--maroon); color: var(--cream); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(40, 10, 10, .25); }
.apply__close .mask { width: 20px; height: 20px; --mask: url(../svg/icon-close-md.svg); }
.apply__panel { background: var(--maroon); color: var(--cream); border-radius: 10px; padding: 26px 26px 22px; box-shadow: 0 20px 50px rgba(40, 10, 10, .35); display: grid; gap: 18px; font-size: 16px; line-height: 24px; }
.apply__brand { width: 88px; aspect-ratio: 463 / 142; }
.apply__meta { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; margin-bottom: -10px; }
.apply__bar { height: 3px; background: rgba(239, 238, 234, .3); border-radius: 2px; overflow: hidden; }
.apply__bar span { display: block; height: 100%; width: 50%; background: var(--cream); transition: width .4s var(--ease); }
.apply fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.apply legend { padding: 0; display: block; }
.apply__step { display: grid; gap: 14px; }
.apply__step[hidden] { display: none; }
.apply h2 { font-family: var(--font-nav); font-size: 18px; font-weight: 500; line-height: 1.3; }
.apply label.opt { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.apply label.opt input { appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cream); margin: 0; display: grid; place-items: center; }
.apply label.opt input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); }
.apply .field { display: grid; gap: 6px; font-size: 13px; }
.apply .field input, .apply .field textarea { font: inherit; font-size: 15px; color: var(--cream); background: rgba(239, 238, 234, .08); border: 1px solid rgba(239, 238, 234, .4); padding: 9px 12px; border-radius: 4px; }
.apply .field textarea { min-height: 84px; resize: vertical; }
/* Cv meesturen */
.apply .filedrop[hidden], .apply .filedrop__file[hidden], .apply .field__error[hidden], .apply .apply__done-cv[hidden] { display: none; }
.apply .filedrop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 10px 14px; text-align: center; cursor: pointer;
  border: 1px dashed rgba(239, 238, 234, .5); border-radius: 4px;
  font-size: 14px; line-height: 1.35;
  transition: background .2s, border-color .2s;
}
.apply .filedrop:hover, .apply .filedrop.is-over { background: rgba(239, 238, 234, .08); border-color: var(--cream); }
.apply .filedrop:focus-within { outline: 2px solid var(--cream); outline-offset: 2px; }
.apply .filedrop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.apply .filedrop__file { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.apply .filedrop__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply .filedrop__remove {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; line-height: 1;
  border: 1px solid rgba(239, 238, 234, .5); color: inherit;
}
.apply .filedrop__remove:hover { background: rgba(239, 238, 234, .12); }
.apply .field__hint { font-size: 12px; opacity: .7; }
.apply .field__error { font-size: 13px; color: #ffd7d2; }
.apply__done { display: grid; gap: 14px; }
.apply__done[hidden] { display: none; }
.apply__done p { font-size: 15px; line-height: 1.45; }
.apply__done b { font-weight: 500; }

.apply__actions { display: flex; justify-content: flex-end; gap: 10px; }
.apply__btn { background: var(--cream); color: var(--maroon); padding: 10px 20px; border-radius: 4px; font-family: var(--font-nav); font-size: 14px; font-weight: 500; transition: opacity .2s; }
.apply__btn:disabled { opacity: .45; cursor: default; }
.apply__btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(239, 238, 234, .5); }

/* ---------- 13b. Groepen ------------------------------------------------- */

.grp__stage  { --sw: 1424; --sh: 880; }
.grp__photo  { --x: 0;    --y: 40;  --w: 464; --h: 580; }
.grp__grapes { --x: 512;  --y: 48;  --w: 56; }
.grp__title  { --x: 600;  --y: 8;   --w: 824; }
.grp__title h1 { font-size: calc(200 * var(--ut)); line-height: calc(176 * var(--ut)); letter-spacing: -0.015em; white-space: nowrap; }
.grp__intro  { --x: 600;  --y: 224; --w: 584; }
.grp__glasses{ --x: 1300; --y: 248; --w: 68; }
.grp__drinks { --x: 1120; --y: 464; --w: 304; --h: 380; }

/* De drie ruimtes: de verdieping is het label, van boven naar beneden. */
.grp__rooms { --x: 600; --y: 424; --w: 464; display: grid; gap: calc(28 * var(--ut)); }
.grp__room dt { font-size: calc(11 * var(--ut)); line-height: calc(16 * var(--ut)); letter-spacing: .14em; opacity: .7; margin-bottom: calc(4 * var(--ut)); }
.grp__room dd { display: grid; gap: calc(2 * var(--ut)); font-size: calc(16 * var(--ut)); line-height: calc(24 * var(--ut)); letter-spacing: -0.02em; }
.grp__room strong { font-weight: 400; font-size: calc(40 * var(--ut)); line-height: calc(40 * var(--ut)); }

/* Het briefje: een zin met open plekken, in het handschrift van Louis. */
.note { padding: calc(112 * var(--u)) 0 calc(128 * var(--u)); }
.note__form { max-width: calc(1104 * var(--u)); margin-inline: auto; display: grid; gap: calc(24 * var(--ut)); }
.note__title { font-size: calc(120 * var(--ut)); line-height: calc(104 * var(--ut)); white-space: nowrap; }
.note__lead { opacity: .8; margin-top: calc(-8 * var(--ut)); }
.note__line {
  margin-top: calc(24 * var(--ut));
  font-size: calc(28 * var(--ut)); line-height: calc(72 * var(--ut)); letter-spacing: -0.02em;
  text-wrap: pretty;
}
.blank { display: inline-block; position: relative; vertical-align: baseline; margin: 0 calc(6 * var(--ut)); }
.blank input, .blank select {
  font-family: var(--font-hand); font-size: calc(44 * var(--ut)); line-height: 1; letter-spacing: 0;
  color: var(--cream); background: none; border: 0; border-bottom: 1px solid rgba(239, 238, 234, .55);
  border-radius: 0; padding: 0 calc(8 * var(--ut)) calc(2 * var(--ut)); margin: 0;
  width: auto; min-width: 0; vertical-align: baseline;
  transition: border-color .25s;
  -moz-appearance: textfield;
}
.blank input::-webkit-outer-spin-button, .blank input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.blank input::placeholder { color: rgba(239, 238, 234, .42); opacity: 1; }
.blank input:hover, .blank select:hover { border-bottom-color: rgba(239, 238, 234, .85); }
.blank input:focus, .blank select:focus { outline: none; border-bottom: 2px solid var(--cream); padding-bottom: calc(1 * var(--ut)); }
.blank--n input { text-align: center; }
.blank--sel select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: calc(28 * var(--ut)); }
.blank--sel select option { font-family: var(--font-body); font-size: 16px; color: var(--maroon); background: var(--cream); }
.blank--sel::after {
  content: ""; position: absolute; right: calc(8 * var(--ut)); bottom: calc(20 * var(--ut)); pointer-events: none;
  width: calc(10 * var(--ut)); height: calc(10 * var(--ut));
  border-right: 1.5px solid var(--cream); border-bottom: 1.5px solid var(--cream); transform: rotate(45deg); opacity: .8;
}
.note__dot { margin-left: calc(-10 * var(--ut)); }
/* Na een poging tot versturen: lege verplichte velden krijgen een gestippelde lijn */
.was-submitted .blank input:invalid { border-bottom-style: dashed; border-bottom-color: #f3b7a8; }
.was-submitted .field input:invalid { border-bottom-style: dashed; border-bottom-color: #f3b7a8; }

.note__contact { border: 0; padding: 0; margin: calc(24 * var(--ut)) 0 0; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--ut)) calc(40 * var(--ut)); }
.note__contact legend { padding: 0; margin-bottom: calc(24 * var(--ut)); font-size: calc(11 * var(--ut)); letter-spacing: .14em; opacity: .7; }
.note .field { display: grid; gap: calc(6 * var(--ut)); font-size: calc(13 * var(--ut)); line-height: calc(16 * var(--ut)); opacity: .95; }
.note .field--wide { grid-column: 1 / -1; }
.note .field input, .note .field textarea {
  font: inherit; font-size: calc(18 * var(--ut)); line-height: calc(28 * var(--ut)); letter-spacing: -0.02em; color: var(--cream);
  background: none; border: 0; border-bottom: 1px solid rgba(239, 238, 234, .45); border-radius: 0; padding: calc(4 * var(--ut)) 0 calc(6 * var(--ut));
  transition: border-color .25s;
}
.note .field textarea { resize: vertical; min-height: calc(40 * var(--ut)); }
.note .field input:hover, .note .field textarea:hover { border-bottom-color: rgba(239, 238, 234, .8); }
.note .field input:focus, .note .field textarea:focus { outline: none; border-bottom: 2px solid var(--cream); padding-bottom: calc(5 * var(--ut)); }

.note__actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(16 * var(--ut)) calc(32 * var(--ut)); margin-top: calc(24 * var(--ut)); }
.note__btn {
  display: inline-flex; align-items: center; gap: calc(12 * var(--ut));
  background: var(--cream); color: var(--maroon); border-radius: 4px;
  padding: calc(16 * var(--ut)) calc(28 * var(--ut));
  font-family: var(--font-nav); font-weight: 500; font-size: calc(13 * var(--ut)); letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  transition: background .2s, transform .3s var(--ease);
}
.note__btn:hover { background: #fff; transform: translateY(-1px); }
.note__btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.note__hint { opacity: .7; }
.note__error { color: #f3b7a8; }
.note__error[hidden], .note__done[hidden] { display: none; }
.note__done { display: grid; gap: calc(8 * var(--ut)); padding-top: calc(24 * var(--ut)); border-top: 1px solid var(--line); }
.note__done .hand { font-size: calc(64 * var(--ut)); line-height: 1; }

/* ---------- 14. Gedeelde entree (zelfde opbouw als Bistro Boys, in Louis-stijl) */

.gate {
  --g-dark: #2a0909; --g-gold: rgba(239, 238, 234, .6); --g-gold-hi: var(--cream); --g-cream: var(--cream);
  --g-display: var(--font-nav);
  --g-serif: var(--font-body);
  position: relative; display: flex; min-height: 100svh; background: var(--g-dark); color: var(--g-cream);
}
.gate__half { position: relative; flex: 1 1 50%; overflow: hidden; display: grid; place-items: center; isolation: isolate; transition: flex-basis .9s var(--ease); }
@media (hover: hover) {
  .gate:hover .gate__half { flex-basis: 44%; }
  .gate:hover .gate__half:hover { flex-basis: 56%; }
}
.gate__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.6s var(--ease), filter .9s var(--ease); filter: saturate(.85); }
.gate__half:hover .gate__photo { transform: scale(1); filter: saturate(1); }
.gate__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,9,9,.35) 0%, rgba(42,9,9,.55) 60%, rgba(42,9,9,.88) 100%); transition: background .9s var(--ease); }
.gate__half:hover .gate__veil { background: linear-gradient(180deg, rgba(42,9,9,.2), rgba(42,9,9,.45) 60%, rgba(42,9,9,.88)); }
.gate__inner { position: relative; display: grid; justify-items: center; gap: 1.5rem; padding: 2rem; text-align: center; }
.gate__mark { width: clamp(180px, 26vw, 360px); transition: transform .9s var(--ease); color: #fff; }
.gate__mark .mask { width: 100%; }
.gate__mark--bb .mask { aspect-ratio: 338 / 280; --mask: url(../svg/logo-bistroboys.svg); }
.gate__mark--louis { display: grid; justify-items: end; gap: .35rem; width: clamp(170px, 22vw, 300px); }
.gate__mark--louis .wordmark-mask { width: 38%; }
.gate__half:hover .gate__mark { transform: translateY(-6px); }
.gate__meta { display: grid; gap: .35rem; justify-items: center; }
.gate__where { font-family: var(--g-serif); font-size: 1rem; color: var(--g-cream); opacity: .85; letter-spacing: -0.02em; }
.gate__cta { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--g-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--g-cream); border: 1px solid rgba(239, 238, 234, .5); border-radius: 4px; padding: .7rem 1.1rem; transition: gap .4s var(--ease), background .3s, border-color .3s; }
.gate__half:hover .gate__cta { background: var(--maroon); border-color: var(--maroon); }
.gate__cta svg { width: 16px; height: 16px; }
.gate__half:hover .gate__cta { gap: 1rem; }
/* Louis opent 1 oktober: aankondiging in het eigen vlak (weghalen na de opening) */
.gate__soon { display: inline-block; padding: .45rem .9rem .4rem; border: 1px solid rgba(239, 238, 234, .6); border-radius: 999px; font-family: var(--g-display); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: var(--g-cream); background: rgba(42, 9, 9, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gate__opens { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--g-display); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: .92rem; color: var(--g-cream); margin: .2rem 0 .5rem; }
.gate__opens::before, .gate__opens::after { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: rgba(239, 238, 234, .6); }
.gate__half--soon { cursor: default; }
.gate__half--soon .gate__mark--louis { margin: 0; }
.gate--soon .gate__opens { margin-bottom: 0; }
.lang--gate { position: absolute; right: 1.5rem; top: 1.2rem; z-index: 2; color: var(--g-cream); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.gate__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(239,238,234,.25); pointer-events: none; }
.gate__hint { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); font-family: var(--g-display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g-cream); opacity: .75; display: grid; justify-items: center; gap: .5rem; pointer-events: none; }
.gate__hint::after { content: ""; width: 1px; height: 2.4rem; background: var(--g-cream); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 760px) {
  .gate { flex-direction: column; }
  .gate__half { min-height: 50svh; }
  .gate__seam { left: 0; right: 0; top: 50%; bottom: auto; height: 1px; width: auto; }
  .gate__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gate__hint::after { animation: none; } }

/* Zusterlink naar Bistro Boys in de Louis-header */
.sister { justify-self: end; display: flex; align-items: center; gap: calc(24 * var(--u)); }
.sister__link { opacity: .75; transition: opacity .2s; white-space: nowrap; }
.sister__link:hover { opacity: 1; }
.sister__link svg { display: inline-block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(4 * var(--u)); vertical-align: -1px; }
.site-nav .sister__link { display: none; }

/* ---------- 15. Reveal --------------------------------------------------- */

.reveal { opacity: 0; translate: 0 14px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: none; transition: none; } }

/* ---------- 16. Mobiel (Figma 375) -------------------------------------- */

@media (max-width: 759px) {
  :root { --u: min(1.5px, calc(100vw / 375)); --ut: var(--u); --frame: 375; --gutter: calc(16 * var(--u)); }
  body { font-size: calc(16 * var(--u)); }

  .site-header__inner { height: calc(56 * var(--u)); grid-template-columns: 1fr auto; }
  .nav-toggle { display: flex; }
  .lang--desktop { display: none; }
  .site-nav {
    position: fixed; inset: calc(56 * var(--u) + 1px) 0 0 0; z-index: 49;
    background: var(--maroon); color: var(--cream);
    padding: calc(20 * var(--u)) var(--gutter) calc(24 * var(--u));
    transform: translateX(100%); transition: transform .4s var(--ease); overflow: auto;
    display: flex; flex-direction: column;
  }
  .site-nav.is-open { transform: none; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav .lang { display: flex; order: -1; justify-self: start; margin-bottom: calc(32 * var(--u)); }
  .site-nav li.nav-item { height: auto; }
  .site-nav li.nav-item + li.nav-item { margin-top: calc(48 * var(--u)); }
  .site-nav a { gap: calc(8 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: -0.02em; }
  .site-nav a .icon { width: calc(32 * var(--u)); }
  .site-nav a::after { display: none; }
  .site-nav a > span > span { text-align: left; }
  .site-nav .sister__link { display: inline-flex; align-items: center; margin-top: calc(48 * var(--u)); opacity: 1; }
  .sister--desktop { display: none; }
  .site-nav .socials { display: flex; margin-top: calc(32 * var(--u)); gap: calc(16 * var(--u)); }
  .site-nav .socials a { width: calc(48 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, .04); }
  .site-nav__foot { display: block; margin-top: auto; padding-top: calc(40 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.5; opacity: .85; }

  .cta-bar { right: var(--gutter); left: var(--gutter); bottom: 12px; justify-content: center; }
  .cta-bar a { flex: 1; justify-content: center; padding: 0 8px; }
  .cta-bar a:last-child { padding-right: 8px; }

  /* home */
  .hero__stage { --sw: 343; --sh: 647; }
  .hero__oysters { --x: 0;   --y: 15;  --w: 168; --h: 200; }
  .hero__dessert { --x: 0;   --y: 287; --w: 343; --h: 216; }
  .hero__logo    { --x: 59;  --y: 231; --w: 226; }
  .hero__chef    { --x: 263; --y: 71;  --w: 77; }
  .hero__wordmark{ --x: 0;   --y: 543; --w: 92; }
  .hero__grapes  { --x: 89;  --y: 524; --w: 20; }

  .welcome__stage { --sw: 375; --sh: 768; }
  .welcome__grapes { --x: 311; --y: -4; --w: 48; }
  .welcome__title  { --x: 45; --y: 80; --w: 300; font-size: calc(80 * var(--u)); line-height: calc(48 * var(--u)); white-space: normal; }
  .welcome__title .line2 { display: block; padding-left: calc(111 * var(--u)); }
  .welcome__text   { --x: 45; --y: 184; --w: 285; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: -0.015em; }
  .welcome__text p + p { margin-top: calc(24 * var(--u)); }
  .welcome__oval   { --x: 71; --y: 442; --w: 291; }
  .welcome__oval .oval-text { font-size: calc(40 * var(--u)); line-height: calc(32 * var(--u)); }

  .collage__stage { --sw: 343; --sh: 800; margin-top: calc(-80 * var(--u)); }
  .collage__chefphoto { --x: 0;   --y: 0;   --w: 285; --h: 240; --cx: .0172; --cy: .0444; --cw: .9656; --ch: .6505; }
  .collage__cocktail  { --x: 146; --y: 264; --w: 197; --h: 192; }
  .collage__pasta     { --x: 0;   --y: 384; --w: 138; --h: 184; }
  .collage__sandwich  { --x: 117; --y: 592; --w: 168; --h: 96; }
  .collage__chef      { --x: 264; --y: 680; --w: 58; }
  .collage__grapes    { --x: 117; --y: 248; --w: 35; }
  .collage__cheese    { --x: 234; --y: 512; --w: 44; }

  .site-footer__stage { --sw: 343; --sh: 632; }
  .site-footer__logo     { --x: 0;   --y: 40;  --w: 197; }
  .site-footer__wordmark { --x: 120; --y: 107; --w: 71; }
  .site-footer__hours    { --x: 0;   --y: 168; --w: 300; }
  .site-footer__contact  { --x: 0;   --y: 360; --w: 300; }
  .site-footer__line     { --x: 0;   --y: 536; --w: 343; }
  .site-footer__copy     { --x: 0;   --y: 584; --w: 343; }
  .site-footer__legal    { --x: 0;   --y: 552; --w: 343; }
  .site-footer h2 { font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); margin-bottom: calc(8 * var(--u)); }

  /* menu */
  .menu__stage { --sw: 343; --sh: 647; }
  .menu__photo  { --x: 0;   --y: 279; --w: 343; --h: 288; }
  .menu__cheese { --x: 293; --y: 15;  --w: 44; }
  .menu__title  { --x: 59;  --y: 39;  --w: 226; }
  .menu__title h1 { font-size: calc(120 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -0.008em; }
  .menu__title .ill { width: 103%; margin: calc(-14 * var(--u)) 0 0 -1.5%; }
  .menu__list { --x: 90; --y: 127; --w: 164; gap: calc(8 * var(--u)); }
  .menu__glasses { --x: 316; --y: 319; --w: 43; }
  .menu__chef    { --x: 29;  --y: 199; --w: 35; }

  /* about */
  .about__stage { --sw: 343; --sh: 1215; }
  .about__title { --x: 0; --y: 241; --w: 210; height: calc(48 / var(--sh) * 100%); }
  .about__title h1 { font-size: calc(80 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: -0.012em; }
  .about__photo     { --x: 29;  --y: 15;   --w: 168; --h: 232; }
  .about__p1        { --x: 29;  --y: 271;  --w: 314; }
  .about__aperitivo { --x: 117; --y: 439;  --w: 109; --h: 112; }
  .about__cheese    { --x: 88;  --y: 543;  --w: 44; }
  .about__p2        { --x: 0;   --y: 599;  --w: 343; }
  .about__drinks    { --x: 0;   --y: 815;  --w: 343; --h: 176; }
  .about__chef      { --x: 0;   --y: 1039; --w: 88; }
  .about__p3        { --x: 117; --y: 1015; --w: 226; }
  .about__mark      { --x: 322; --y: 16;   --w: 21; aspect-ratio: 21 / 82; }
  .about__grapes    { --x: 293; --y: 87;   --w: 29; }

  /* vacancies */
  .vac__stage { --sw: 343; --sh: 583; }
  .vac__photo { --x: 0;   --y: 15; --w: 255; --h: 304; }
  .vac__title { --x: 181; --y: 31; --w: 162; text-align: left; }
  .vac__title h1 { font-size: calc(120 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -0.008em; }
  .vac__title br { display: inline; }
  .vac__title .line2 { display: inline-block; padding-left: calc(80 * var(--u)); margin-top: calc(-16 * var(--u)); }
  .vac__text  { --x: 0; --y: 335; --w: 343; }
  /* groepen */
  .grp__stage  { --sw: 343; --sh: 1290; }
  .grp__photo  { --x: 0;   --y: 15;  --w: 226; --h: 282; }
  .grp__grapes { --x: 293; --y: 40;  --w: 36; }
  .grp__title  { --x: 0;   --y: 325; --w: 343; }
  .grp__title h1 { font-size: calc(104 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -0.008em; }
  .grp__intro  { --x: 0;   --y: 415; --w: 343; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .grp__glasses{ --x: 300; --y: 300; --w: 43; }
  .grp__rooms  { --x: 0;   --y: 600; --w: 300; gap: calc(20 * var(--u)); }
  .grp__room strong { font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); }
  .grp__drinks { --x: 88;  --y: 1072; --w: 255; --h: 192; }

  .note { padding: calc(64 * var(--u)) 0 calc(96 * var(--u)); }
  .note__form { gap: calc(16 * var(--u)); }
  .note__title { font-size: calc(80 * var(--u)); line-height: calc(56 * var(--u)); white-space: normal; }
  .note__lead { margin-top: 0; }
  .note__line { font-size: calc(20 * var(--u)); line-height: calc(56 * var(--u)); margin-top: calc(8 * var(--u)); }
  .blank input, .blank select { font-size: calc(32 * var(--u)); }
  .note__contact { grid-template-columns: 1fr; gap: calc(24 * var(--u)); margin-top: calc(16 * var(--u)); }
  .note__actions { flex-direction: column; align-items: stretch; }
  .note__btn { justify-content: center; padding: calc(18 * var(--u)) calc(28 * var(--u)); }

  .apply-launch { left: var(--gutter); bottom: 66px; }
  .apply { left: var(--gutter); bottom: 66px; width: calc(100vw - 2 * var(--gutter)); }
  .apply__close { right: 0; top: -48px; }

}

/* Tussenmaat: desktopcompositie schaalt, tekst krimpt minder hard mee */
@media (min-width: 760px) and (max-width: 1100px) {
  :root { --ut: max(var(--u), 0.82px); }
}