/* ============================================================
   Amorena — Restaurant, Deurne
   Donkere basis, goud uit het logo, wijnrood uit de zaal
   ============================================================ */

/* ============================================================
   LETTERTYPES — zelf gehost (geen verbinding met Google)
   Tangerine, Bodoni Moda en Manrope; SIL Open Font License.
   Alleen de Latijnse tekensets (NL/FR).
   ============================================================ */
/* latin-ext */
@font-face{
  font-family:'Bodoni Moda'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'Bodoni Moda'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/bodoni-moda-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/bodoni-moda-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/bodoni-moda-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face{
  font-family:'Tangerine'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/tangerine-normal-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face{
  font-family:'Tangerine'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/tangerine-normal-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  /* Oppervlakken — warm bijna-zwart, afgeleid van het interieur */
  --ink:        #0D0B0A;
  --ink-2:      #141110;
  --ink-3:      #1C1815;
  --ink-4:      #262019;

  /* Goud — uit het Amorena-logo (verloop donker → licht → donker) */
  --gold:       #D4AF4C;
  --gold-brt:   #F3D98A;
  --gold-deep:  #8A5714;
  --gold-glow:  rgba(212,175,76,.18);
  --gold-grad:  linear-gradient(180deg, #8A5714 0%, #D4AF4C 22%, #FBE7A6 48%, #D4AF4C 70%, #8A5714 100%);

  /* Wijnrood — de bloemen en kaarsen op de lange tafel */
  --wine:       #5E1626;
  --wine-deep:  #2A0A12;
  --wine-glow:  rgba(122,28,48,.35);

  /* Tekst */
  --cream:      #F2EBE0;
  --cream-dim:  #B8AE9F;
  --cream-mute: #8A8175;

  --line:       rgba(201,162,74,.22);
  --line-soft:  rgba(242,235,224,.10);

  /* Typografie */
  --font-display: "Bodoni Moda", "Didot", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-script:  "Tangerine", "Bodoni Moda", Georgia, serif;  /* lettertype van het Amorena-logo */

  /* Ritme — spacious (density 3/10) */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;
  --sp-4: 2.25rem; --sp-5: 3.5rem;  --sp-6: 5rem;
  --sp-7: 7rem;    --sp-8: 9.5rem;

  --wrap: 1200px;
  --menu-w: 1100px;   /* breedte van de menukaart-kolommen */
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:  .45s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:400; line-height:1.08; }
p{ margin:0 0 1.1em; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

/* ---------- Focus & skip ---------- */
:focus-visible{
  outline:2px solid var(--gold-brt);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.85rem 1.4rem; font-weight:500; letter-spacing:.04em;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Layout ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.narrow{ max-width:760px; }
.center{ text-align:center; }
.section{ padding-block:var(--sp-7); position:relative; }

@media (max-width:700px){
  .wrap{ width:min(100% - 1.75rem, var(--wrap)); }
  .section{ padding-block:var(--sp-6); }
  /* Gelijke, volle breedte zodat de twee CTA's niet ongelijk uitlijnen */
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-kicker{ letter-spacing:.2em; }
}

/* ---------- Typografie ---------- */
.h2{
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);
  letter-spacing:-.015em;
  margin-bottom:var(--sp-3);
}
.h2-xl{ font-size:clamp(2.8rem,1.7rem + 4.4vw,5.5rem); }
.h2 em, .hero-title em{
  font-style:italic;
  color:var(--gold);
}
.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin:0 0 1.1rem;
}
.lede{
  color:var(--cream-dim);
  font-size:clamp(1.02rem,.98rem + .25vw,1.16rem);
  max-width:62ch;
}
.center-lede{ margin-inline:auto; }
.center .lede{ margin-inline:auto; }
.note{
  color:var(--cream-mute); font-size:.94rem;
  margin-top:var(--sp-4); max-width:60ch; margin-inline:auto;
}
.note a{ color:var(--gold); text-underline-offset:3px; }

/* ---------- Ornament (uit de huisstijlposter) ---------- */
.ornament{ display:flex; justify-content:center; margin-bottom:var(--sp-3); }
.ornament svg{ width:min(240px,60%); height:auto; }
.ornament line{ stroke:var(--line); stroke-width:1; }
.ornament path{ fill:none; stroke:var(--gold); stroke-width:1.1; }
.ornament circle{ fill:var(--gold); }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.9rem;
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.btn-lg{ padding:1.05rem 2.3rem; }
.btn-gold{ background:var(--gold); color:var(--ink); border:1px solid var(--gold); }
.btn-gold:hover{ background:var(--gold-brt); border-color:var(--gold-brt); }
.btn-ghost{ background:transparent; color:var(--cream); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-brt); }
.btn:active{ transform:translateY(1px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.1rem;
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease),
             border-color var(--dur) var(--ease), backdrop-filter var(--dur);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(13,11,10,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.6rem;
}
.header-inner{ display:flex; align-items:center; gap:var(--sp-3); }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.brand-mark{ width:44px; height:auto; transition:width var(--dur) var(--ease); }
.is-stuck .brand-mark{ width:36px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
/* Het gouden woordmerk zelf: de intro landt precies op dit beeld */
.brand-word{
  width:116px; height:auto; display:block;
  transition:width var(--dur) var(--ease), opacity .45s var(--ease);
}
.is-stuck .brand-word{ width:100px; }
.brand-sub{
  font-size:.53rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-mute); margin-top:.28rem;
}

.nav{ margin-left:auto; }
.nav-list{ display:flex; gap:var(--sp-3); }
.nav-list a{
  position:relative; text-decoration:none; font-size:.79rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim);
  padding:.6rem 0; display:inline-block;
  transition:color .3s var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:.15rem;
  height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-list a:hover{ color:var(--gold-brt); }
.nav-list a:hover::after, .nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a.is-active{ color:var(--gold); }

.header-cta{ flex-shrink:0; padding:.7rem 1.4rem; min-height:44px; font-size:.74rem; }

.nav-toggle{
  display:none; width:48px; height:48px; margin-left:auto;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle-bar{
  display:block; width:24px; height:1.5px; background:var(--cream);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1150px){
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0; margin:0;
    background:rgba(13,11,10,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav-list{ flex-direction:column; gap:var(--sp-2); text-align:center; }
  .nav-list a{ font-size:1.15rem; letter-spacing:.2em; padding:.8rem 1rem; }
  body.nav-open{ overflow:hidden; }
}

/* ============================================================
   MEDEDELING
   ============================================================ */
.melding-laag{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:var(--sp-3);
  background:rgba(5,4,4,.82);
  opacity:0; transition:opacity var(--dur) var(--ease);
  overflow-y:auto;
}
.melding-laag.is-open{ opacity:1; }
body.melding-open{ overflow:hidden; }

.melding{
  position:relative; width:min(46rem, 100%);
  background:var(--ink-2); border:1px solid var(--line);
  border-top:3px solid var(--gold);
  max-height:calc(100vh - var(--sp-4)); overflow-y:auto;
  transform:translateY(14px); transition:transform var(--dur) var(--ease);
}
.melding-laag.is-open .melding{ transform:none; }

.melding-inhoud{ padding:var(--sp-5) var(--sp-5) var(--sp-4); text-align:center; }
@media (max-width:640px){
  .melding-inhoud{ padding:var(--sp-4) var(--sp-3) var(--sp-3); }
}

.melding-merk{ width:52px; height:auto; margin:0 auto var(--sp-3); display:block; }

.melding-titel{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem, 5vw, 2.6rem); line-height:1.12;
  color:var(--gold); margin:0 0 var(--sp-3); text-wrap:balance;
}
.melding-inhoud p{
  color:var(--cream-dim); margin:0 0 1.1rem; text-align:left;
  font-size:1rem; line-height:1.75;
}
.melding-inhoud p:first-of-type{ color:var(--cream); }

/* De praktische boodschap: die zoekt een bezoeker het eerst. */
.melding-dicht{
  border-left:2px solid var(--gold); background:var(--ink-3);
  padding:1.1rem 1.3rem; color:var(--gold-brt) !important;
  font-weight:600; font-size:1.08rem !important;
  letter-spacing:.01em;
}
.melding-onder{
  color:var(--gold) !important; text-align:center !important;
  font-family:var(--font-display); font-size:1.15rem !important;
  margin-top:var(--sp-3) !important;
}
.melding-knop{ margin-top:var(--sp-2); }

.melding-kruis{
  position:absolute; top:.6rem; right:.6rem;
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; color:var(--cream-mute); cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.melding-kruis:hover{ color:var(--gold); }
.melding-kruis:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

@media (prefers-reduced-motion: reduce){
  .melding-laag, .melding, .melding-kruis{ transition:none; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.section-contact{ background:linear-gradient(180deg, var(--ink), var(--ink-2)); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:start; }

.info{ margin:var(--sp-4) 0; display:grid; gap:1.4rem; }
.info-row{ display:grid; grid-template-columns:130px 1fr; gap:1rem; align-items:start; }
.info dt{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding-top:.3rem;
}
.info dd{ color:var(--cream); }
.info dd a{
  display:inline-block; padding-block:.45rem;
  text-decoration:none; border-bottom:1px solid var(--line);
  transition:border-color .3s, color .3s;
}
.info dd a:hover{ color:var(--gold-brt); border-bottom-color:var(--gold); }

.hours{ display:grid; gap:.35rem; }
.hours-row{
  display:flex; justify-content:space-between; gap:1rem;
  max-width:300px; color:var(--cream-dim); font-size:.95rem;
}
/* De gesloten dag mag niet wegvallen tussen de andere */
.hours-row.is-closed{ color:var(--cream-mute); }
.hours-row.is-closed span:last-child{
  color:var(--gold); font-style:italic;
}

.socials{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); flex-wrap:wrap; }
.socials a{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:.6rem 1.1rem;
  border:1px solid var(--line-soft); text-decoration:none;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-dim);
  transition:border-color .3s, color .3s;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold-brt); }

.contact-map{ position:relative; }
.contact-map iframe{
  width:100%; height:420px; border:1px solid var(--line-soft); display:block;
  background:var(--ink-2);
  filter:invert(.92) hue-rotate(180deg) saturate(.35) brightness(.92) contrast(1.05);
}
.map-link{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 0;
  margin-top:calc(var(--sp-2) - .5rem);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.map-link:hover{ color:var(--gold-brt); }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map iframe{ height:320px; }
}
@media (max-width:480px){
  .info-row{ grid-template-columns:1fr; gap:.3rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); border-top:1px solid var(--line);
  padding-top:var(--sp-6);
}
.footer-inner{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--sp-4);
  padding-bottom:var(--sp-5);
}
.footer-brand img{ width:220px; margin-bottom:var(--sp-2); }
.footer-brand p{ color:var(--cream-mute); font-size:.9rem; margin:0; }
.footer-nav ul{ display:grid; gap:.15rem; }
.footer-nav a{
  display:inline-flex; align-items:center; min-height:40px; padding:.35rem 0;
  text-decoration:none; color:var(--cream-dim); font-size:.86rem;
  letter-spacing:.1em; transition:color .3s;
}
.footer-nav a:hover{ color:var(--gold-brt); }
.footer-contact{ display:grid; gap:.15rem; align-content:start; }
.footer-contact a{
  display:inline-flex; align-items:center; min-height:40px; padding:.35rem 0;
  width:fit-content;
  text-decoration:none; color:var(--cream-dim); font-size:.9rem;
  transition:color .3s;
}
.footer-contact a:hover{ color:var(--gold-brt); }

.footer-base{
  border-top:1px solid var(--line-soft); padding-block:var(--sp-3);
}
.footer-base p{ margin:0; color:var(--cream-mute); font-size:.8rem; letter-spacing:.06em; }

@media (max-width:820px){
  .footer-inner{ grid-template-columns:1fr; gap:var(--sp-4); }
  .footer-brand img{ width:190px; }
}

/* ============================================================
   TAALWISSEL
   ============================================================ */
.lang{
  display:flex; align-items:center; gap:.15rem; flex-shrink:0;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; min-height:38px; padding:.4rem .5rem;
  text-decoration:none; color:var(--cream-mute);
  transition:color .3s var(--ease);
}
.lang a:hover{ color:var(--gold-brt); }
.lang a[aria-current="true"]{ color:var(--gold); }
.lang-sep{ color:var(--line); }

@media (max-width:1150px){
  .header-inner .lang{ margin-left:auto; }
  .nav .lang{ display:none; }
}

/* ============================================================
   MENUPAGINA
   ============================================================ */
.page-hero{
  position:relative; padding-block:11rem var(--sp-6);
  text-align:center; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, var(--gold-glow), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.page-hero > *{ position:relative; z-index:1; }

/* Sprongnavigatie tussen de menucategorieën.
   --header-h en --jump-h worden door main.js gemeten, zodat dit blijft
   kloppen als er categorieën bijkomen en de balk over meer regels loopt. */
.menu-jump{
  position:sticky; top:var(--header-h, 66px); z-index:50;
  background:rgba(13,11,10,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line-soft);
}
.menu-jump ul{
  display:flex; gap:.25rem; justify-content:center; flex-wrap:wrap;
  padding-block:.5rem;
}
.menu-jump a{
  display:inline-flex; align-items:center; min-height:40px; padding:.4rem .9rem;
  text-decoration:none; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-dim);
  transition:color .3s var(--ease);
}
.menu-jump a:hover, .menu-jump a.is-active{ color:var(--gold); }

.menu-note{
  margin:var(--sp-4) auto 0; max-width:60ch; padding:1rem 1.4rem;
  border:1px solid var(--line); background:rgba(201,162,74,.06);
  color:var(--cream-dim); font-size:.9rem;
}
.menu-note strong{ color:var(--gold); font-weight:500; }

.menu-cat{
  padding-block:var(--sp-4);
  /* Ruimte voor de vaste kop + sprongnavigatie bij het springen naar een anker */
  scroll-margin-top:calc(var(--header-h, 66px) + var(--jump-h, 58px) + 2.5rem);
}
.menu-cat + .menu-cat{ border-top:1px solid var(--line-soft); }
.menu-cat-head{ text-align:center; margin-bottom:var(--sp-4); }
.menu-cat-head h2{
  font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem); margin-bottom:.4rem;
}
.menu-cat-head p{ color:var(--cream-dim); margin:0; font-size:.97rem; }

/* Twee kolommen die van BOVEN NAAR BENEDEN vullen, niet van links naar
   rechts. Zo blijven bij elkaar horende gerechten samen: alle bami links,
   alle nasi rechts. --rows komt uit de generator (aantal rijen per groep). */
.menu-items{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(var(--rows,1), auto);
  grid-auto-flow:column;
  gap:var(--sp-3) var(--sp-5);
  max-width:var(--menu-w); margin-inline:auto;
}
@media (max-width:820px){
  .menu-items{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
  }
}

.menu-item{ display:block; }
.menu-item-top{
  display:flex; align-items:baseline; gap:.6rem;
}
.menu-item-name{
  font-family:var(--font-display); font-size:1.35rem; color:var(--cream);
  line-height:1.2;
  /* Mag afbreken: anders duwt een lange gerechtnaam de prijs uit beeld */
  flex:0 1 auto; min-width:0;
}
.menu-item-lead{
  flex:1; height:1px; margin-bottom:.28em;
  background-image:linear-gradient(to right, var(--line) 40%, transparent 0);
  background-size:6px 1px; background-repeat:repeat-x;
}
.menu-item-price{
  font-size:.95rem; color:var(--gold); font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.menu-item-desc{
  color:var(--cream-dim); font-size:.9rem; margin:.35rem 0 0; max-width:46ch;
}
.menu-item-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.menu-tag{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.2rem .55rem; border:1px solid var(--line);
  color:var(--gold); border-radius:2px;
}

/* Keuzeregels die voor een hele categorie gelden ("keuze uit: ...") */
.menu-choice{
  max-width:var(--menu-w); margin:0 auto var(--sp-3);
  display:grid; gap:.4rem;
}
.menu-choice li{
  position:relative; padding-left:1.5rem;
  color:var(--cream-dim); font-size:.88rem;
}
.menu-choice li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; rotate:45deg; border:1px solid var(--gold);
}
.menu-choice strong{ color:var(--gold); font-weight:500; }

/* Subgroep binnen een categorie (bv. de pannenkoeken bij de desserts).
   Krijgt bewust veel lucht erboven: anders lopen de groepen in elkaar over. */
.menu-sub{
  max-width:var(--menu-w); margin:var(--sp-6) auto var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:1.25rem;
}
/* De eerste groep sluit aan op de categoriekop, dus zonder streep erboven.
   Klasse komt uit de generator: :first-of-type zou hier de categoriekop
   raken, want dat is ook een div. */
.menu-sub.is-first{
  margin-top:var(--sp-3); padding-top:0; border-top:0;
}
.menu-sub h3{
  font-size:clamp(1.9rem, 1.5rem + .9vw, 2.4rem);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--gold-brt);
  white-space:nowrap;
}
/* Gouden lijn die van de titel weg uitdooft */
.menu-sub::after{
  content:""; flex:1; height:1px; position:relative; top:-.4em;
  background:linear-gradient(to right, var(--gold), transparent);
  opacity:.55;
}

@media (max-width:600px){
  .menu-sub{ margin-top:var(--sp-5); gap:.9rem; }
  .menu-sub h3{ white-space:normal; }
}

/* Categorie die nog aangevuld wordt */
.menu-soon{
  max-width:var(--menu-w); margin:0 auto; padding:var(--sp-3);
  border:1px dashed var(--line); text-align:center;
  color:var(--cream-mute); font-style:italic;
}

/* Formule-blok (brunchbuffet) */
.menu-formula{
  max-width:760px; margin:0 auto var(--sp-4);
  border:1px solid var(--line); padding:var(--sp-4);
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  text-align:center;
}
.menu-formula .price{
  font-family:var(--font-display); font-size:2.6rem; color:var(--gold);
  display:block; margin:.3rem 0 .6rem;
}
.menu-formula p{ color:var(--cream-dim); margin:0; }

/* ============================================================
   FORMULIER
   ============================================================ */
.section-form{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
.form-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-5); align-items:start; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }

.form-aside .lede{ max-width:38ch; }
.form-aside .info{ margin-top:var(--sp-3); }

.form{ display:grid; gap:var(--sp-3); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
/* Datum, tijdstip en aantal personen horen bij elkaar op één regel */
.field-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
@media (max-width:820px){ .field-row-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .field-row, .field-row-3{ grid-template-columns:1fr; }
}

.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
.field .req{ color:var(--cream-mute); }
.field-hint{ font-size:.8rem; color:var(--cream-mute); }

.field input,
.field select,
.field textarea{
  width:100%; min-height:48px; padding:.8rem 1rem;
  font-family:var(--font-body); font-size:1rem; font-weight:300;
  color:var(--cream); background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.6; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.6rem; cursor:pointer;
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--line); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); background:var(--ink-4); outline:none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--gold-brt); outline-offset:2px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-mute); opacity:.7; }

/* Foutmeldingen bij het veld zelf */
.field-error{
  font-size:.84rem; color:#F0A0A0; display:none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#C86B6B; }
.field.has-error .field-error{ display:block; }

/* Samenvatting bovenaan na een mislukte verzending */
.form-summary{
  display:none; padding:1rem 1.3rem; border:1px solid #C86B6B;
  background:rgba(200,107,107,.09); color:var(--cream);
}
.form-summary.is-shown{ display:block; }
.form-summary h3{ font-size:1.15rem; margin-bottom:.5rem; color:#F0A0A0; }
.form-summary ul{ display:grid; gap:.3rem; }
.form-summary a{ color:var(--cream); font-size:.9rem; }

/* Spamval. Bewust niet display:none — veel bots slaan verborgen velden
   dan over. Zo staat het buiten beeld maar bestaat het wel. */
.honeypot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form-status{ font-size:.92rem; }
.form-status.ok{ color:var(--gold-brt); }
.form-status.err{ color:#F0A0A0; }

.form-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }


/* ============================================================
   AMORENA — knoppen, header en algemene beweging
   ============================================================ */
.btn-line{
  background:transparent; color:var(--cream); border:1px solid transparent;
  border-bottom-color:var(--gold); padding-inline:.4rem;
}
.btn-line:hover{ color:var(--gold-brt); }
.btn .arrow{ display:inline-block; transition:transform .45s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(6px); }
.btn-gold{ position:relative; overflow:hidden; isolation:isolate; }
/* Glans die over de gouden knop schuift */
.btn-gold::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out);
}
.btn-gold:hover::after{ transform:translateX(120%); }
.magnetic{ transition:transform .35s var(--ease-out), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }

/* De schuine loopband en de keukenrij steken bewust buiten de rand.
   'clip' (geen 'hidden') zodat de vastgezette keuken (sticky) blijft werken. */
main, .site-footer{ overflow-x:clip; }

/* Header schuift weg bij naar beneden scrollen, komt terug bij omhoog */
.site-header{ transition:transform .55s var(--ease-out), background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.site-header.is-hidden{ transform:translateY(-102%); }
body.nav-open .site-header{ transform:none; }
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-brt), var(--gold));
  transform-origin:left; transform:scaleX(var(--progress, 0));
}
.brand-mark{ transition:width var(--dur) var(--ease), transform 1.2s var(--ease-out); }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.06); }

/* Mobiel menu: links schuiven een voor een binnen */
@media (max-width:1150px){
  .nav{ background:radial-gradient(ellipse at 50% 30%, var(--wine-deep), rgba(13,11,10,.98) 70%); }
  .nav-list a{ font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.6rem); letter-spacing:0; text-transform:none; color:var(--cream); }
  .nav-list li{ opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out); }
  .nav.is-open .nav-list li{ opacity:1; transform:none; }
  .nav.is-open .nav-list li:nth-child(2){ transition-delay:.06s; }
  .nav.is-open .nav-list li:nth-child(3){ transition-delay:.12s; }
  .nav.is-open .nav-list li:nth-child(4){ transition-delay:.18s; }
  .nav.is-open .nav-list li:nth-child(5){ transition-delay:.24s; }
}

/* Korrel over de hele pagina: geeft het zwart wat textuur */
.page-home::after{
  content:""; position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-3%,2%); } 40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-1%); } 80%{ transform:translate(3%,3%); } 100%{ transform:translate(0,0); }
}

/* ---------- Scroll-reveal ----------
   Alles blijft zichtbaar zonder JS: verbergen gebeurt alleen onder .js */
.js .reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:calc(var(--rd, 0) * 110ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Beeld dat van onder naar boven wordt onthuld.
   De clip zit op het beeld zelf, niet op de omhulling: een volledig
   weggeknipt element ziet de IntersectionObserver nooit verschijnen. */
.js .reveal-img > img, .js .reveal-img > iframe{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.2);
  transition:clip-path 1.3s var(--ease-out), transform 1.6s var(--ease-out);
}
.js .reveal-img.is-visible > img, .js .reveal-img.is-visible > iframe{ clip-path:inset(0 0 0 0); transform:none; }
.js .reveal-img > iframe{ transform:none; }

/* ============================================================
   INTRO — een pen schrijft "Amorena", daarna vliegt het woord
   naar het logo linksboven. Opgebouwd door main.js; zonder JS
   of met "minder beweging" is er geen intro.
   ============================================================ */
/* Donker doek tot de JS de intro overneemt (vangnet in de <head>) */
html.intro-pending body::before{
  content:""; position:fixed; inset:0; z-index:299; background:var(--ink);
}
html.intro-pending body{ overflow:hidden; }
/* Hero-animaties wachten tot de intro klaar is */
html.intro-pending .hero-in,
html.intro-pending .hero-img,
html.intro-pending .hero-img img{ animation-play-state:paused; }
/* Het echte logo verschijnt pas als het geschreven woord geland is */
html.intro-logo-hidden .brand-word{ opacity:0; }

.pen-intro{ position:fixed; inset:0; z-index:300; overflow:hidden; cursor:pointer; }
.pen-intro.is-flying{ pointer-events:none; }
.pen-intro-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 52%, rgba(94,22,38,.28), transparent 70%),
    var(--ink);
  transition:opacity 1s var(--ease) .1s;
}
.pen-intro.is-flying .pen-intro-bg{ opacity:0; }
.pen-intro.is-done{ opacity:0; transition:opacity .35s ease; }

.pen-stage{
  position:absolute; transform-origin:0 0;
  transition:transform 1.15s cubic-bezier(.75,0,.2,1);
}
.pen-word{ display:block; width:100%; height:auto; overflow:visible; }
.pen-ink path{
  fill:none; stroke:var(--gold-brt); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .6s ease;
}
.pen-intro.is-written .pen-ink path{ opacity:0; }
.pen-fill path{ opacity:0; transition:opacity .55s ease; }
.pen-fill path.on{ opacity:1; }

.pen{
  position:absolute; left:0; top:0; pointer-events:none;
  filter:drop-shadow(10px 18px 14px rgba(0,0,0,.55));
  will-change:transform, opacity;
}
/* Gouden gloed aan de punt van de pen */
.pen-glow{
  position:absolute; left:0; top:0; width:70px; height:70px; margin:-35px 0 0 -35px;
  border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(243,217,138,.55), rgba(212,175,76,.12) 45%, transparent 70%);
  will-change:transform, opacity;
}

.pen-skip{
  position:absolute; right:1.25rem; bottom:1.25rem;
  min-height:44px; padding:.6rem 1rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-mute); border:1px solid var(--line-soft);
  transition:color .3s, border-color .3s, opacity .3s;
}
.pen-skip:hover, .pen-skip:focus-visible{ color:var(--gold-brt); border-color:var(--gold); }
.pen-intro.is-flying .pen-skip{ opacity:0; }

/* ============================================================
   HERO
   ============================================================ */
:root{ --intro: .15s; }

.am-hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center;
  padding-block:8.5rem 6rem;
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, var(--wine-glow), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(212,175,76,.08), transparent 70%),
    var(--ink);
}
.am-hero > .wrap{ width:min(100% - 2.5rem, 1320px); }
.am-hero-ghost{
  position:absolute; left:-2vw; bottom:-6vw; margin:0; z-index:0; pointer-events:none;
  font-family:var(--font-script); font-weight:700; font-size:clamp(9rem,32vw,30rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(212,175,76,.12);
  white-space:nowrap;
}
.am-hero-ghost span{ display:block; }
.am-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-5); align-items:center;
}

.am-kicker{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin:0 0 var(--sp-3);
}
.am-kicker::before{ content:""; width:42px; height:1px; background:var(--gold); }

.am-hero-title{
  font-size:clamp(3.4rem,2rem + 6vw,7.4rem); line-height:1; letter-spacing:-.03em;
  margin-bottom:var(--sp-4);
}
.am-hero-title .line{ display:block; overflow:hidden; padding-bottom:.1em; }
.am-hero-title .line > span{ display:inline-block; }
.am-hero-title em{
  font-family:var(--font-script); font-style:normal; font-weight:700;
  font-size:1.4em; line-height:.7; letter-spacing:0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.08em;
}
.am-hero-lede{ color:var(--cream-dim); max-width:46ch; font-size:clamp(1.02rem,.98rem + .25vw,1.14rem); margin-bottom:var(--sp-4); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; }
.am-hero-meta{
  display:flex; align-items:center; gap:.7rem; margin:var(--sp-4) 0 0;
  font-size:.82rem; letter-spacing:.06em; color:var(--cream-mute);
}
.am-hero-meta .dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(212,175,76,.55); }
  70%{ box-shadow:0 0 0 12px rgba(212,175,76,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,76,0); }
}

/* Binnenkomst van de hero-elementen, na de intro */
.js .hero-in{
  opacity:0; transform:translateY(110%);
  animation:heroIn 1.2s var(--ease-out) forwards;
  animation-delay:calc(var(--intro) + var(--d, 0) * .12s);
}
.js .am-kicker.hero-in, .js .am-hero-lede.hero-in, .js .hero-actions.hero-in,
.js .am-hero-meta.hero-in, .js .am-badge.hero-in{ transform:translateY(30px); }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.js .hero-img{
  clip-path:inset(100% 0 0 0);
  animation:imgIn 1.5s var(--ease-out) forwards;
  animation-delay:calc(var(--intro) + var(--d, 0) * .15s);
}
.js .hero-img img{
  transform:scale(1.3);
  animation:imgZoom 2.2s var(--ease-out) forwards;
  animation-delay:calc(var(--intro) + var(--d, 0) * .15s);
}
@keyframes imgIn{ to{ clip-path:inset(0 0 0 0); } }
@keyframes imgZoom{ to{ transform:scale(1); } }

.am-hero-visual{ position:relative; height:min(78vh,680px); }
.am-hero-visual figure{ margin:0; overflow:hidden; }
.am-hero-main{
  position:absolute; inset:0 10% 6% 14%;
  border-radius:999px 999px 6px 6px;   /* boog bovenaan */
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.js .am-hero-main.hero-img{ clip-path:inset(100% 0 0 0 round 999px 999px 6px 6px); animation-name:imgInArch; }
@keyframes imgInArch{ to{ clip-path:inset(0 0 0 0 round 999px 999px 6px 6px); } }
.am-hero-main-inner{ position:absolute; inset:-8% 0; }
.am-hero-main img{ width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.am-hero-float{ position:absolute; z-index:2; }
.am-hero-float figure{ border:6px solid var(--ink); box-shadow:0 26px 60px rgba(0,0,0,.6); }
.am-hero-float img{ width:100%; height:100%; object-fit:cover; }
.am-hero-float-a{ left:0; bottom:4%; width:34%; rotate:-5deg; }
.am-hero-float-a figure{ aspect-ratio:4/5; }
.am-hero-float-b{ right:0; top:8%; width:36%; rotate:4deg; }
.am-hero-float-b figure{ aspect-ratio:4/3; }

.am-badge{
  position:absolute; right:6%; bottom:-1%; z-index:3;
  width:clamp(110px,11vw,150px); aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--ink); border-radius:50%;
  box-shadow:0 0 0 1px var(--line);
}
.am-badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite; }
.am-badge text{ font-family:var(--font-body); font-size:15.5px; letter-spacing:.32em; text-transform:uppercase; fill:var(--gold); }
.am-badge img{ width:34%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.am-scroll{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; text-decoration:none; color:var(--cream-mute);
}
.am-scroll-line{ width:1px; height:52px; background:rgba(212,175,76,.25); position:relative; overflow:hidden; }
.am-scroll-line::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateY(-100%); animation:scrollDrop 2s var(--ease) infinite;
}
@keyframes scrollDrop{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } }

@media (max-width:900px){
  .am-hero{ padding-block:6.5rem 4.5rem; }
  .am-hero-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .am-hero-visual{ height:min(96vw,520px); }
  .am-hero-main{ inset:0 12% 4% 12%; }
  .am-scroll{ display:none; }
}
@media (max-width:520px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .btn-line{ border:1px solid var(--line); }
  .am-hero-float-a{ width:36%; }
  .am-hero-float-b{ width:40%; }
  .am-hero-float figure{ border-width:4px; }
}

/* ============================================================
   LOOPBAND
   ============================================================ */
.marquee{
  overflow:hidden; padding-block:1.5rem;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, var(--wine-deep), var(--ink) 30%, var(--ink) 70%, var(--wine-deep));
  rotate:-1.5deg; position:relative; z-index:2;
  width:106%; margin:-1.2rem 0 0 -3%;
}
.marquee-track{
  display:flex; align-items:center; gap:2.4rem; width:max-content;
  font-family:var(--font-display); font-size:clamp(2.2rem,1.4rem + 3vw,4.2rem); line-height:1.1;
  will-change:transform;
  animation:marquee 30s linear infinite;   /* zonder JS: gewone CSS-animatie */
}
.marquee-track span{ color:var(--cream); white-space:nowrap; }
.marquee-track span.o{ color:transparent; -webkit-text-stroke:1px var(--gold); font-style:italic; }
.marquee-track i{ font-style:normal; color:var(--gold); font-size:.5em; }
.marquee-track[data-ready]{ animation:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   ONS VERHAAL
   ============================================================ */
.am-story{ padding-top:var(--sp-8); }
.am-story-grid{ display:grid; grid-template-columns:.8fr 1.6fr; gap:var(--sp-6); align-items:start; }
.am-script{
  font-family:var(--font-script); font-weight:700; font-size:clamp(5rem,3rem + 8vw,10rem);
  line-height:.9; margin:0 0 var(--sp-3); padding-right:.1em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.am-story-small{ color:var(--cream-dim); font-size:.98rem; max-width:34ch; }
.am-story-big{
  font-family:var(--font-display); font-size:clamp(1.8rem,1.1rem + 2.6vw,3.3rem);
  line-height:1.22; letter-spacing:-.015em; margin:0; color:var(--cream);
}
/* Woorden lichten op tijdens het scrollen */
.am-story-big .w{ opacity:.16; transition:opacity .3s linear; }
.am-story-big .w.on{ opacity:1; }
.am-story-big .w.accent{ color:var(--gold); font-style:italic; }

.am-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:var(--sp-7); border-top:1px solid var(--line);
}
.am-stat{ padding:var(--sp-4) var(--sp-3) 0; border-left:1px solid var(--line-soft); }
.am-stat:first-child{ border-left:0; padding-left:0; }
.am-stat-num{
  font-family:var(--font-display); font-size:clamp(3rem,2rem + 3vw,5rem); line-height:1;
  color:var(--gold); margin-bottom:.6rem; font-variant-numeric:tabular-nums;
}
.am-stat-num small{ font-size:.4em; margin-left:.1em; }
.am-stat dd{ color:var(--cream-dim); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }

@media (max-width:900px){
  .am-story-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .am-stats{ grid-template-columns:repeat(2,1fr); margin-top:var(--sp-5); }
  .am-stat, .am-stat:first-child{ padding:var(--sp-3) var(--sp-2); border-left:0; border-bottom:1px solid var(--line-soft); }
  .am-stat:nth-child(odd){ border-right:1px solid var(--line-soft); }
}

/* ============================================================
   KEUKEN — horizontaal scrollend
   Zonder JS (of op gsm) is het een gewone veegbare rij.
   ============================================================ */
.am-kitchen{ position:relative; background:linear-gradient(180deg, var(--ink), var(--ink-2)); padding-block:var(--sp-6); }
.am-kitchen-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.am-kitchen-head .h2{ margin:0; }
.am-kitchen-hint{ display:flex; align-items:center; gap:1rem; margin:0; color:var(--cream-mute); font-size:.8rem; letter-spacing:.2em; }
.am-kitchen-count b{ color:var(--gold); font-weight:500; }
.am-kitchen-bar{ display:block; width:140px; height:1px; background:var(--line-soft); position:relative; }
.am-kitchen-bar span{ position:absolute; inset:0; background:var(--gold); transform-origin:left; transform:scaleX(var(--kp, .2)); }

.am-kitchen-track{
  display:flex; gap:var(--sp-3);
  padding-inline:max(1.25rem, calc((100vw - var(--wrap)) / 2));
  padding-top:2.8rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:var(--sp-2);
}
.am-kitchen-track::-webkit-scrollbar{ display:none; }

/* Vastgezet op desktop: verticaal scrollen schuift de rij opzij */
.am-kitchen.is-pinned{ padding:0; }
.am-kitchen.is-pinned .am-kitchen-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.am-kitchen.is-pinned .am-kitchen-track{ overflow:visible; scroll-snap-type:none; will-change:transform; width:max-content; }
/* De kaarten krimpen mee met de hoogte van het venster, zodat titel en
   kaarten samen in beeld passen (de JS valt anders terug op vegen). */
.am-kitchen.is-pinned .kcard{ width:clamp(230px, min(28vw, 38vh), 400px); }
.am-kitchen.is-pinned .kcard-media{ aspect-ratio:4/3; }
.am-kitchen.is-pinned .kcard-body{ padding:1.2rem 1.4rem 1.5rem; }
.am-kitchen.is-pinned .am-kitchen-track{ padding-top:2.4rem; }
.am-kitchen.is-pinned .am-kitchen-head .h2{ font-size:clamp(2.2rem, 1rem + 3.4vh + 1vw, 4.4rem); }
.am-kitchen.is-pinned .am-kitchen-head{ margin-bottom:var(--sp-3); }

.kcard{
  flex:0 0 auto; width:clamp(280px,28vw,400px); scroll-snap-align:center;
  background:var(--ink-3); border:1px solid var(--line-soft); position:relative;
  transition:border-color .5s var(--ease), transform .6s var(--ease-out);
}
.kcard:hover{ border-color:var(--line); transform:translateY(-8px); }
.kcard-media{ aspect-ratio:4/3.3; overflow:hidden; }
.kcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.kcard:hover .kcard-media img{ transform:scale(1.08); }
.kcard-body{ padding:var(--sp-3) var(--sp-3) var(--sp-4); position:relative; }
.kcard-num{
  position:absolute; right:var(--sp-3); top:-2.7rem;
  font-family:var(--font-display); font-size:4.6rem; line-height:1; font-style:italic;
  color:transparent; -webkit-text-stroke:1px var(--gold-brt);
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}
.kcard-script{ font-family:var(--font-script); font-weight:700; font-size:2.7rem; line-height:.9; color:var(--gold); margin:0 0 .1rem; }
.kcard h3{ font-size:2.2rem; margin-bottom:.6rem; }
.kcard p{ color:var(--cream-dim); font-size:.95rem; margin:0; }

.kcard-cta{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.6rem;
  padding:var(--sp-4); text-decoration:none; align-self:stretch;
  background:radial-gradient(circle at 30% 20%, var(--wine), var(--wine-deep));
  border-color:rgba(212,175,76,.3);
}
.kcard-cta-script{ font-family:var(--font-script); font-weight:700; font-size:4.5rem; line-height:.9; color:var(--gold-brt); }
.kcard-cta-text{ font-family:var(--font-display); font-size:1.8rem; line-height:1.2; color:var(--cream); }
.kcard-cta-arrow{
  margin-top:var(--sp-3); width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); font-size:1.4rem;
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}
.kcard-cta:hover .kcard-cta-arrow{ background:var(--gold); color:var(--ink); transform:rotate(-45deg); }

@media (max-width:700px){
  .am-kitchen-head{ flex-direction:column; align-items:flex-start; }
  .kcard{ width:78vw; }
}

/* ============================================================
   DE ZAAL
   ============================================================ */
.am-room{ background:var(--ink-2); overflow:hidden; }
.am-room-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center; }
.am-room-media{
  margin:0; aspect-ratio:3/4; overflow:hidden; position:relative;
  /* --clip en --zoom komen uit de JS: het beeld opent zich tijdens het scrollen */
  clip-path:inset(var(--clip, 0%) var(--clip, 0%) var(--clip, 0%) var(--clip, 0%) round 999px 999px 4px 4px);
}
.am-room-media img{ width:100%; height:100%; object-fit:cover; transform:scale(var(--zoom, 1)); }
.am-list{ margin-top:var(--sp-4); border-top:1px solid var(--line-soft); }
.am-list li{
  display:flex; gap:1.4rem; align-items:baseline;
  padding:1.1rem 0; border-bottom:1px solid var(--line-soft); color:var(--cream);
  transition:padding .4s var(--ease-out), color .3s, opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.am-list li:hover{ padding-left:.8rem; color:var(--gold-brt); }
.am-list span{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:.95rem; }

@media (max-width:900px){
  .am-room-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .am-room-media{ aspect-ratio:4/5; max-height:72vh; width:100%; }
}

/* ============================================================
   GALERIJ — drie kolommen die elk op hun eigen tempo bewegen
   ============================================================ */
.am-gallery{ overflow:hidden; }
.am-gallery-head{ text-align:center; margin-bottom:var(--sp-5); }
.am-gallery-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); align-items:start; }
.am-col{ display:grid; gap:var(--sp-2); }
.am-col-mid{ margin-top:var(--sp-6); }
.am-shot{ margin:0; overflow:hidden; aspect-ratio:4/3; }
.am-shot-tall{ aspect-ratio:3/4; }
.am-shot img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:700px){
  .am-gallery-cols{ grid-template-columns:1fr 1fr; }
  .am-gallery-cols .am-col:last-child{ display:none; }
  .am-col-mid{ margin-top:var(--sp-4); }
}

/* ============================================================
   RESERVEREN + CONTACT — Amorena-accenten
   ============================================================ */
.page-home .section-form{
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, var(--wine-glow), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
}
.page-home .form-aside .h2 em,
.page-home .section-contact .h2 em{
  font-family:var(--font-script); font-weight:700; font-style:normal; font-size:1.35em; line-height:.8;
}

/* ============================================================
   FOOTER — groot logo dat omhoog schuift
   ============================================================ */
.am-footer-line{ font-family:var(--font-display); font-size:1.7rem; color:var(--cream) !important; margin-bottom:.6rem !important; }
.am-footer-line em{ font-family:var(--font-script); font-weight:700; font-style:normal; color:var(--gold); font-size:1.4em; }
.am-footer-mark{ overflow:hidden; padding-inline:2vw; }
.am-footer-mark img{
  width:100%; max-width:1500px; margin:0 auto; opacity:.9;
  transform:translateY(var(--fy, 0%));
}

/* ============================================================
   Minder beweging: alles staat meteen op zijn plaats
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .js .reveal, .js .reveal-img > img, .js .reveal-img > iframe, .js .hero-in, .js .hero-img, .js .hero-img img{
    opacity:1 !important; transform:none !important; clip-path:none !important; animation:none !important;
  }
  .page-home::after, .marquee-track, .am-badge svg{ animation:none !important; }
  .am-story-big .w{ opacity:1; }
}

/* Tekst zonder link in de voettekst (bv. telefoon zolang er geen nummer is) */
.footer-contact span{
  display:inline-flex; align-items:center; min-height:40px; padding:.35rem 0;
  color:var(--cream-dim); font-size:.9rem;
}

/* ============================================================
   KAART — pas geladen na een klik (privacy)
   ============================================================ */
.map-placeholder{
  height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2); padding:var(--sp-4); text-align:center;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(circle at 50% 42%, rgba(212,175,76,.12), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(242,235,224,.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(242,235,224,.04) 39px 40px),
    var(--ink-2);
}
.map-placeholder-kop{ font-family:var(--font-display); font-size:1.5rem; color:var(--cream); margin:0; }
.map-placeholder-uitleg{ max-width:38ch; margin:0; font-size:.82rem; color:var(--cream-mute); }
.map-placeholder iframe{ width:100%; height:100%; border:0; }
.map-placeholder.is-loaded{ padding:0; display:block; }
@media (max-width:900px){ .map-placeholder{ height:320px; } }

/* ============================================================
   JURIDISCHE PAGINA'S + links in de voettekst
   ============================================================ */
.page-hero-legal{ padding-bottom:var(--sp-4); }
.legal{ padding-top:var(--sp-3); }
.legal-body{ max-width:760px; }
.legal-body h2{
  font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem); color:var(--gold);
  margin:var(--sp-5) 0 var(--sp-2);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li, .legal-body td{ color:var(--cream-dim); }
.legal-body strong{ color:var(--cream); font-weight:500; }
.legal-body a{ color:var(--gold); text-underline-offset:3px; }
.legal-body a:hover{ color:var(--gold-brt); }
.legal-body ul{ margin:0 0 1.1em; display:grid; gap:.7rem; }
.legal-body li{ position:relative; padding-left:1.5rem; }
.legal-body li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:7px; height:7px; rotate:45deg; border:1px solid var(--gold);
}
.legal-body code{ font-size:.9em; color:var(--gold-brt); background:var(--ink-3); padding:.1em .4em; border-radius:2px; }
.legal-table{ width:100%; border-collapse:collapse; margin:var(--sp-2) 0 var(--sp-3); font-size:.94rem; }
.legal-table th{
  text-align:left; font-weight:400; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--line);
}
.legal-table td{ padding:.9rem .8rem .9rem 0; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.legal-date{ margin-top:var(--sp-5); font-size:.85rem; color:var(--cream-mute) !important; }
/* Zolang bedrijfsgegevens ontbreken: onmogelijk over het hoofd te zien */
mark.invullen{ background:#F3D98A; color:#17130F; padding:.05em .35em; border-radius:2px; font-weight:600; }

.footer-base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-1) var(--sp-3); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; }
.footer-legal a{
  display:inline-flex; align-items:center; min-height:40px;
  color:var(--cream-mute); font-size:.8rem; letter-spacing:.06em; text-decoration:none; transition:color .3s;
}
.footer-legal a:hover, .footer-legal a:focus-visible{ color:var(--gold-brt); }

/* Kort privacybericht onder het reservatieformulier */
.form-privacy{ margin:var(--sp-2) 0 0; font-size:.82rem; color:var(--cream-mute); }
.form-privacy a{ color:var(--gold); text-underline-offset:3px; }

/* Foutpagina 404 */
.page-404{ min-height:72vh; display:flex; align-items:center; text-align:center; }
.page-404 .am-script{ margin:0 auto var(--sp-2); }
.page-404-knoppen{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-4); }