/* === Playfair Display — Headings (variable 400–900) === */
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('./playfair-display-latin-wght-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('./playfair-display-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* === Space Mono — Body === */
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./space-mono-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./space-mono-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./space-mono-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./space-mono-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('./space-mono-latin-400-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('./space-mono-latin-ext-400-italic.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* === Great Vibes — Script accent === */
@font-face{
  font-family:'Great Vibes';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./great-vibes-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Great Vibes';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./great-vibes-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* =====================================================================
   Nuovo Dante — Vintage-Atelier design system
   Paper · ink · hand-drawn lines · typewriter labels · serif display
   ===================================================================== */

:root{
  --paper:#FBF8EF;
  --paper-2:#F3EAD9;
  --ink:#231713;
  --ink-soft:#4a3d34;
  --muted:#7a6e62;
  --olive:#4A4636;
  --olive-deep:#34301f;
  --terra:#9E5C3A;
  --terra-deep:#834728;
  --green:#3F7D4D;
  --line:rgba(35,23,19,.55);
  --line-soft:rgba(35,23,19,.22);

  --maxw:2200px;
  --read:1180px;

  --f-display:'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-body:'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --f-mono:'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --f-script:'Great Vibes', 'Snell Roundhand', cursive;

  --pad:clamp(20px,5vw,72px);
  --sp:clamp(64px,9vw,150px);
}

*{box-sizing:border-box}
/* text selection: elegant ink ground, cream type — inverts the page palette */
::selection{background:var(--ink);color:var(--paper);text-shadow:none}
::-moz-selection{background:var(--ink);color:var(--paper);text-shadow:none}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* base texture on <html>. iOS Safari DROPS background-blend-mode on the root background when
     it's propagated to the viewport (body transparent) → multiply never ran on iPhone → texture
     invisible there. so the texture is paper-grain.png: fibres baked in as dark INK with alpha,
     white fully transparent. it simply paints over the cream, NO blend mode → works on iOS too.
     body transparent → every cream surface shows it; olive band & photos paint over it. */
  background-color:var(--paper);
  background-image:url('paper-grain-bg.webp');
  background-size:450px 450px;
  background-repeat:repeat;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  /* transparent: the textured cream lives on <html> and shows through every transparent
     surface. do NOT set a background here or it would cover the html grain again. */
  background:transparent;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--maxw);margin:0 auto;position:relative}
.wrap{max-width:var(--read);margin:0 auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1640px;margin:0 auto;padding-inline:var(--pad)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--terra);
  font-weight:700;
  display:inline-block;
}
.eyebrow.muted{color:var(--muted)}
.kicker{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.04}
.display{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:.96;
  font-size:clamp(40px,7vw,112px);
  margin:0; /* it's a <p> in the hero now — kill the base p{margin-bottom:1.1em} */
}
h2.section{
  font-size:clamp(32px,4.6vw,62px);
  letter-spacing:-0.01em;
  line-height:1.02;
}
h2.section.caps{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
h3{font-size:clamp(22px,2.4vw,30px)}
.lede{font-size:clamp(15px,1.4vw,17px);line-height:1.68;color:var(--ink-soft)}
p{margin:0 0 1.1em}
.script{
  font-family:var(--f-script);
  text-transform:none;
  letter-spacing:0;
  color:var(--terra);
  font-weight:400;
  font-size:1.34em;
  line-height:inherit;
  vertical-align:baseline;
}
.display .script{font-size:1em;margin:0 .04em}
.measure{max-width:62ch}
.center{text-align:center}
.mono{font-family:var(--f-mono)}

/* ---------- hand-drawn primitives (filled by site.js) ---------- */
[data-rule]{display:block;width:100%;height:14px;position:relative}
[data-rule] svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
[data-rule] path{stroke:var(--line);stroke-width:1.2;fill:none;stroke-opacity:.72;
  stroke-linecap:round;stroke-linejoin:round}
[data-rule].soft path{stroke:var(--line-soft)}
[data-rule].thick path{stroke-width:2}

[data-frame]{position:relative;z-index:0}
.frame-svg{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:-1}
.frame-svg path:not(.fp){fill:none;stroke:var(--line);stroke-width:1.2;stroke-opacity:.72;
  stroke-linecap:round;stroke-linejoin:round}
.frame-svg .fp{fill:transparent;stroke:none}
[data-frame] > *:not(.frame-svg){position:relative;z-index:1}

/* ---------- buttons (outline, hand frame) ---------- */
.btn{
  --bc:var(--ink);
  position:relative;
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-family:var(--f-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--bc);
  padding:16px 30px;
  background:transparent;border:0;cursor:pointer;
  transition:color .25s, background .25s;
  line-height:1;
}
.btn .frame-svg path:not(.fp){stroke:var(--bc)}
.btn:hover{color:var(--paper)}
.btn:hover .frame-svg path:not(.fp){stroke:var(--paper)}
.btn:hover .frame-svg .fp{fill:var(--terra)}
.btn.terra{--bc:var(--terra)}
.btn.terra:hover{color:var(--paper)}
.btn.solid{color:var(--paper)}
.btn.solid .frame-svg .fp{fill:var(--ink)}
.btn.solid:hover .frame-svg .fp{fill:var(--terra)}
.btn.wa{--bc:#1f8f4d;color:var(--paper)}
.btn.wa .frame-svg .fp{fill:#1f8f4d}
.btn.wa:hover{color:var(--paper)}
.btn.wa:hover .frame-svg .fp{fill:#176b3a}
.btn.wa .wa-ico{width:15px;height:15px;flex:0 0 auto}
.btn.ghost-light{--bc:var(--paper);color:var(--paper)}
.btn.ghost-light:hover{color:var(--paper)}
/* filled reserve button: colour lives inside the hand-drawn line, not a rectangle */
.btn.fill{color:var(--paper)}
.btn.fill .frame-svg .fp{fill:var(--terra)}
.btn.fill .frame-svg path:not(.fp){stroke:var(--paper)}
.btn.fill:hover .frame-svg .fp{fill:var(--terra-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link-ul{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  border-bottom:1.5px solid var(--terra);padding-bottom:3px;
  transition:color .2s,border-color .2s;font-weight:700;
}
.link-ul:hover{color:var(--terra)}
.arrow-link{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--terra);font-weight:700}
.arrow-link span{display:inline-block;transition:transform .25s}
.arrow-link:hover span{transform:translateX(5px)}

/* ---------- photos ---------- */
.photo{position:relative;overflow:hidden;background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.03) sepia(.07) brightness(1.01)}
.photo::after{content:"";position:absolute;inset:0;
  background-image:url('noise.webp');background-size:260px;
  opacity:.1;mix-blend-mode:soft-light;pointer-events:none}
.photo.framed{padding:0}
.deco{position:absolute;pointer-events:none;opacity:.16;
  mix-blend-mode:multiply;z-index:0}

/* star badge */
.stars{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.stars .s{color:var(--terra);letter-spacing:.06em;font-size:16px}
.stars.light{color:var(--paper)}.stars.light .s{color:#e0a878}

/* ---------- header ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:40;
  max-width:var(--maxw);margin:0 auto}
.site-head.solid{position:sticky;background:rgba(251,248,239,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:20px var(--pad)}
.nav-left,.nav-right{flex:1;display:flex;align-items:center;gap:26px}
.nav-right{justify-content:flex-end}
.nav a.navlink{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:inherit;position:relative;padding:4px 0}
.nav a.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;
  height:1.5px;background:var(--terra);transition:right .28s}
.nav a.navlink:hover::after,.nav a.navlink.active::after{right:0}
.brand{font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(17px,1.7vw,22px);font-weight:600;
  text-align:center;white-space:nowrap}
.brand small{display:block;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.34em;font-weight:400;color:var(--muted);margin-top:3px}
.head-over .nav{color:var(--paper)}
.head-over .brand small{color:rgba(251,248,239,.7)}

/* floating nav: fixed, no bar, color flips with the section behind it */
.site-head.nav-float{position:fixed}
/* nav buttons get a subtle blurred backing so they stay legible over photos while scrolling */
/* nav reserve is now a filled (.btn.fill) button — its colour fills the line itself */
.site-head.nav-float .nav,
.site-head.nav-float .brand small,
.site-head.nav-float .btn{transition:color .35s ease, background .25s ease}
.site-head.nav-float.over-light .nav{color:var(--ink)}
.site-head.nav-float.over-light .brand small{color:var(--muted)}
.site-head.nav-float.over-light .navlink::after{background:var(--terra)}
/* centered brand chip: invisible over the hero, permanent once past it,
   colour adapts to the section behind it */
.site-head.nav-float .brand{position:relative;padding:7px 24px 8px;
  border:1px solid transparent;border-radius:2px;
  transition:background-color .3s ease, border-color .3s ease}
.site-head.nav-float.past-hero .brand{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.site-head.nav-float.past-hero.over-light .brand{border-color:var(--line-soft);
  background-color:rgba(251,248,239,.55)}
.site-head.nav-float.past-hero:not(.over-light) .brand{border-color:rgba(243,234,217,.42);
  background-color:rgba(35,23,19,.3)}
.site-head.nav-float.over-light .btn.ghost-light{--bc:var(--ink);color:var(--ink)}
.site-head.nav-float.over-light .btn.ghost-light:hover{background:var(--ink);color:var(--paper)}
.icon-btn{background:none;border:0;cursor:pointer;color:inherit;padding:6px;
  display:inline-flex}
.icon-btn svg{width:24px;height:24px;filter:url(#ink)}
.menu-toggle,.reserve-mini{display:none;padding:8px;border:1px solid transparent;border-radius:2px;
  transition:background-color .3s ease, border-color .3s ease}
/* mirror the brand chip: a framed, blurred box appears once past the hero so the
   burger / reserve icon stay legible over any section/photo (instead of a hard shadow) */
.site-head.nav-float.past-hero .menu-toggle,
.site-head.nav-float.past-hero .reserve-mini{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.site-head.nav-float.past-hero.over-light .menu-toggle,
.site-head.nav-float.past-hero.over-light .reserve-mini{border-color:var(--line-soft);
  background-color:rgba(251,248,239,.55)}
.site-head.nav-float.past-hero:not(.over-light) .menu-toggle,
.site-head.nav-float.past-hero:not(.over-light) .reserve-mini{border-color:rgba(243,234,217,.42);
  background-color:rgba(35,23,19,.3)}
/* reserve icon balances the burger on small screens (where the full button is hidden) */
@media(max-width:640px){.reserve-mini{display:inline-flex}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:100;background:var(--paper);
  background-image:url('paper.webp');background-size:480px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;
  padding:26px var(--pad) max(26px, env(safe-area-inset-bottom));visibility:hidden}
.drawer.open{transform:translateY(0);visibility:visible}
/* decorative pasta engraving tucked into the open mobile menu, bottom-right */
.drawer-illu{position:absolute;right:-7%;bottom:6%;width:clamp(160px,48vw,280px);
  height:auto;opacity:.55;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.drawer .d-top{display:flex;justify-content:space-between;align-items:center}
.drawer nav{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.drawer nav a{font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(34px,9vw,60px);line-height:1.05;
  padding:6px 0}
.drawer nav a .num{font-family:var(--f-mono);font-size:13px;color:var(--terra);
  vertical-align:super;margin-right:14px;letter-spacing:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--paper);overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.04) sepia(.1) brightness(.94)}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,10,.42) 0%,rgba(20,14,10,.05) 32%,rgba(20,14,10,.12) 62%,rgba(20,14,10,.6) 100%);}
.hero .grain{position:absolute;inset:0;z-index:1;background-image:url('noise.webp');
  background-size:300px;opacity:.13;mix-blend-mode:soft-light;pointer-events:none}
.hero-inner{position:relative;z-index:3;width:100%;
  padding:0 var(--pad) clamp(70px,10vh,120px);
  max-width:var(--maxw);margin:0 auto}
.hero .display{color:var(--paper);text-shadow:0 2px 40px rgba(0,0,0,.25);line-height:.86}
.hero-sub{font-family:var(--f-mono);font-size:clamp(14px,1.65vw,18.5px);
  letter-spacing:.08em;text-transform:uppercase;max-width:52ch;
  margin:20px 0 0;color:rgba(251,248,239,.94);line-height:1.8}
.hero-sub .script{font-size:1.7em;line-height:1;white-space:nowrap}
.hero .btn-row{margin-top:22px}
.eb-br{display:none} /* eyebrow line-break only enabled on mobile */
.hero-badge{position:absolute;top:0;right:0;z-index:3}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(251,248,239,.8);display:flex;
  flex-direction:column;align-items:center;gap:8px}
.scroll-hint .ln{width:1px;height:38px;background:rgba(251,248,239,.6);
  animation:scrollLn 2.2s ease-in-out infinite;transform-origin:top}
@keyframes scrollLn{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* phone in LANDSCAPE: the viewport is very short, so a full 100svh hero with a
   bottom-anchored display headline overflows/collides. shrink the headline, trim
   the bottom padding, let the hero size to content, and drop the scroll hint. */
@media (orientation:landscape) and (max-height:560px){
  /* HERO — full viewport height so the photo is long and the bottom-anchored content sits low,
     leaving generous air below the nav. min-height:auto (the old value) was the cramp: it made
     the hero only as tall as the text, so the photo was short and the copy jammed under the nav.
     padding-bottom (66) must clear the torn edge (48) so the sub text never dips into the wave. */
  .hero{min-height:100svh}
  .hero-inner{padding-top:34px;padding-bottom:66px}
  .hero .display{font-size:clamp(30px,6vw,52px)}
  .hero-sub{font-size:11.5px;line-height:1.48;margin-top:8px;max-width:42ch}
  /* keep TWO columns side-by-side even under 680px (landscape has the width). the .hero prefix
     out-specifies the max-width:680px stacking rule so small phones don't pile up vertically. */
  .hero .hero-foot{flex-direction:row;flex-wrap:nowrap;gap:clamp(16px,3vw,38px);align-items:flex-end}
  .hero .hero-foot-l{flex:1 1 50%;min-width:0}
  .hero .hero-foot-r{flex:0 1 46%;min-width:0;margin-top:0;align-items:flex-start;text-align:left}
  .hero .btn-row{margin-top:12px;gap:10px}
  .hero .btn{padding-block:11px}
  .scroll-hint{display:none}
  .torn{height:48px}                 /* was 90px — the big edge collided with the text */

  /* MOBILE MENU (drawer) — all items must fit a short viewport; scroll if not */
  .drawer{padding-top:16px;padding-bottom:16px;overflow-y:auto}
  .drawer .d-top{position:sticky;top:0}
  .drawer nav{margin:12px 0;gap:2px}
  .drawer nav a{font-size:clamp(22px,4.4vw,30px);padding:3px 0}
  .drawer nav a .num{font-size:11px;margin-right:10px}
  .drawer-illu{display:none}         /* engraving would overlap the tightened list */
}

/* torn paper edge sitting at the bottom of the hero */
.torn{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;
  height:90px;display:block}
.torn path{fill:url(#paperTex)}
.torn .edge{fill:none;stroke:var(--line-soft);stroke-width:1.4;filter:url(#ink)}
/* hand-drawn wavy edges on dark bands (top + bottom), matching hero/footer */
.wavy-band{position:relative;overflow:hidden}
.wavy-band>.wrap,.wavy-band>.wrap-wide{position:relative;z-index:3}
.wavy-edge{position:absolute;left:0;right:0;width:100%;height:46px;z-index:2;
  pointer-events:none;display:block}
.wavy-top{top:-1px}
.wavy-bot{bottom:-1px}
.wavy-edge .fill{fill:url(#paperTex)}
.wavy-edge path:not(.fill){fill:none;stroke:var(--line-soft);stroke-width:1.4;filter:url(#ink)}

/* ---------- sections ---------- */
section{position:relative}
.band{padding-block:var(--sp);position:relative}
.band.tight{padding-block:clamp(48px,6vw,96px)}
.olive-band{background-color:var(--olive);color:var(--paper-2);
  background-image:linear-gradient(rgba(74,70,54,.88),rgba(74,70,54,.88)),url('noise.webp');
  background-size:auto,300px}
.olive-band .eyebrow{color:#cf9b78}
.olive-band h2,.olive-band h3{color:var(--paper)}
.olive-band .lede{color:rgba(243,234,217,.86)}
/* muted captions need to lighten on the dark bands or they're unreadable */
.olive-band .fact .lab,
.olive-band .kicker,
.olive-band .box-sub,
.olive-band .muted{color:rgba(243,234,217,.9)}
/* big stat numbers: terracotta turns muddy on the dark olive — use bright cream */
.olive-band .fact .big{color:var(--paper)}

.intro-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);
  align-items:center}
@media(min-width:880px){.intro-grid{grid-template-columns:1.05fr .95fr}}

/* dish showcase carousel */
.showcase{position:relative}
.dish{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,64px);
  align-items:center}
@media(min-width:880px){.dish{grid-template-columns:.9fr 1.1fr}}
.dish .photo{aspect-ratio:4/5;width:100%}
.dish-body .display-name{font-family:var(--f-display);
  font-size:clamp(38px,5.2vw,76px);line-height:.98;margin:.18em 0 .35em;
  letter-spacing:-0.01em}
.slides .dish{display:none}
.slides .dish.on{display:grid;animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.show-nav{display:flex;align-items:center;gap:18px;margin-top:34px}
.dot{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--line);
  background:transparent;cursor:pointer;padding:0;transition:background .2s}
.dot.on{background:var(--terra);border-color:var(--terra)}
.show-arrows{display:flex;gap:10px;margin-left:auto}
.rd-arrow{width:46px;height:46px;border-radius:50%;background:none;cursor:pointer;
  position:relative;color:var(--ink);display:grid;place-items:center}
.rd-arrow svg{width:20px;height:20px;filter:url(#ink)}
.rd-arrow .frame-svg{border-radius:50%}

/* dish row — static, side by side (no slider) */
.dish-row{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px)}
@media(min-width:600px){.dish-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dish-row{grid-template-columns:repeat(4,1fr)}}
.dish-card .photo{aspect-ratio:4/5;margin-bottom:20px}
.dish-card .eyebrow{color:#cf9b78;font-size:11px;letter-spacing:.2em}
.dish-card .dish-name{font-family:var(--f-display);color:var(--paper);
  font-size:clamp(22px,2vw,28px);letter-spacing:-0.01em;line-height:1.05;
  margin:9px 0 9px}
.dish-card p{font-size:14.5px;line-height:1.55;color:rgba(243,234,217,.82);margin:0}

/* two-column info box (Im Lokal / Außer Haus) */
.duo{display:grid;grid-template-columns:1fr;text-align:center}
@media(min-width:720px){.duo{grid-template-columns:1fr 1fr}}
.duo .cell{padding:clamp(30px,4vw,56px) clamp(22px,3vw,44px)}
.duo .cell + .cell{border-top:0}
.duo .cell h3{font-size:clamp(26px,3vw,40px);text-transform:uppercase;
  letter-spacing:.04em;margin:14px 0 10px}
@media(min-width:720px){
  .duo .divider{position:absolute;top:14%;bottom:14%;left:50%;width:14px}
}
.duo .divider{display:block}

/* chef note */
.note{background-color:rgba(255,255,255,.4)}
.note .sig{font-family:var(--f-script);font-size:clamp(34px,5vw,58px);
  color:var(--terra);line-height:.8}

/* feature cards row */
.usp{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.usp{grid-template-columns:repeat(3,1fr)}}
.usp .item{padding:34px 30px;background-color:rgba(255,255,255,.45)}
.usp .item .ico{height:46px;margin-bottom:18px}
.usp .item .ico svg{height:46px;width:auto;filter:url(#ink);
  stroke:var(--ink);fill:none;stroke-width:1.6}
.usp .item h3{font-size:21px;text-transform:uppercase;letter-spacing:.05em;
  font-family:var(--f-mono);font-weight:700;margin-bottom:10px}
.usp .item p{font-size:15px;color:var(--ink-soft);margin:0}

/* FAQ */
.faq{max-width:920px;margin:0 auto}
/* FAQ two-column: accordion left, illustration right */
.faq-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(min-width:880px){.faq-grid{grid-template-columns:1.1fr .9fr}}
.faq-col .faq{max-width:none;margin:0}
.faq-illu{display:grid;place-items:center}
.faq-illu img{width:min(100%,360px);mix-blend-mode:multiply;opacity:.92}
@media(max-width:879px){.faq-illu{display:none}}
.faq-item{padding:6px 0}
.faq-h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:20px;background:none;border:0;cursor:pointer;text-align:left;
  padding:22px 4px;color:var(--ink);
  font-family:var(--f-mono);font-size:clamp(14px,1.5vw,17px);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.faq-q .pm{font-size:22px;flex-shrink:0;transition:transform .3s;width:24px;text-align:center}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a .inner{padding:0 4px 26px;max-width:64ch;color:var(--ink-soft);
  font-size:16px}

/* contact / hours */
.info-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
@media(min-width:860px){.info-grid{grid-template-columns:1fr 1fr}}
.hours-row{display:flex;justify-content:space-between;gap:16px;
  font-family:var(--f-mono);font-size:13.5px;letter-spacing:.05em;
  padding:11px 0;border-bottom:1px dotted var(--line-soft);text-transform:uppercase}
.hours-row span:last-child{color:var(--terra)}
.contact-line{font-family:var(--f-mono);letter-spacing:.04em;
  text-transform:uppercase;font-size:14px;line-height:2}
.map-frame{width:100%;aspect-ratio:16/11;border:0;filter:saturate(.7) sepia(.12) contrast(1.02)}
.map-link{position:relative;display:block}
.map-badge{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;background:var(--paper);color:var(--ink);border-radius:999px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(35,23,19,.22);transition:transform .2s ease,box-shadow .2s ease}
.map-badge svg{width:14px;height:14px}
.map-link:hover .map-badge{transform:translateY(-2px);box-shadow:0 7px 20px rgba(35,23,19,.3)}

/* ---------- menu page ---------- */
/* triple class so it beats .band.tight{padding-block} which was overriding the top space */
.band.tight.menu-head{padding-top:clamp(190px,19vh,250px)}
.menu-head .eyebrow{margin-bottom:6px}
/* vintage engraving accent (e.g. telephone on the Kontakt head) — multiply drops the off-white bg */
.head-illu{display:block;width:clamp(116px,15vw,172px);height:auto;margin:0 auto 14px;
  mix-blend-mode:multiply;opacity:.92;pointer-events:none}
/* large engraving in the right margin of a centered head (Speisekarte) — wide screens only */
.head-side-illu{position:absolute;right:clamp(8px,2.5vw,56px);top:clamp(210px,26vh,320px);
  width:clamp(200px,17vw,300px);height:auto;opacity:.9;mix-blend-mode:multiply;
  pointer-events:none;z-index:0}
.head-side-illu.left{right:auto;left:clamp(8px,2.5vw,56px)}
/* tablet/mobile: don't drop the head illu entirely — let it peek in from the side
   (mostly clipped at the edge, lower & fainter) so it never clashes with the headline */
@media(max-width:1340px){
  .head-side-illu{top:auto;bottom:7%;right:-16%;width:clamp(130px,26vw,200px);opacity:.45}
  .head-side-illu.left{left:-16%;right:auto}
}

/* thin privacy bar — no cookie banner */
.privacy-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--terra);box-shadow:0 -6px 24px rgba(35,23,19,.18);
  display:flex;align-items:center;justify-content:center;gap:20px;
  flex-wrap:nowrap;padding:10px 22px;text-align:center;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.privacy-bar.show{transform:none}
.privacy-bar p{margin:0;line-height:1.4;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,250,243,.95)}
@media(max-width:600px){
  .privacy-bar{flex-wrap:wrap;gap:8px 16px}
  .privacy-bar p{white-space:normal;font-size:10px;letter-spacing:.02em}
}
.privacy-bar button{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;background:none;border:1px solid rgba(243,234,217,.45);
  color:var(--paper);padding:7px 18px;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s}
.privacy-bar button{background:rgba(255,250,243,.12)}
.privacy-bar button:hover{background:var(--paper);color:var(--terra-deep)}

/* idle easter-egg: pizzas & wine glasses raining down */
.rain-item{position:fixed;top:-14vh;z-index:70;pointer-events:none;
  will-change:transform;animation-name:rainfall;
  animation-timing-function:linear;animation-fill-mode:forwards}
.rain-item svg{display:block;width:100%;height:auto}
@keyframes rainfall{to{transform:translateY(118vh) rotate(var(--spin,200deg))}}
@media(prefers-reduced-motion:reduce){.rain-item{display:none}}
.cat{padding-block:clamp(40px,5vw,78px)}
.cat-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px);
  align-items:start}
@media(min-width:900px){
  .cat-grid{grid-template-columns:.82fr 1.18fr}
  .cat:nth-child(even) .cat-grid{grid-template-columns:1.18fr .82fr}
  .cat:nth-child(even) .cat-photo{order:2}
  .cat-grid.rev{grid-template-columns:1.18fr .82fr}
  .cat-grid.rev .cat-photo{order:2}
}
.cat-intro{color:var(--ink-soft);max-width:54ch;margin:14px 0 0}
.menu-nav{display:flex;flex-wrap:wrap;gap:9px 10px;justify-content:center;margin-top:30px}
.menu-nav a{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-soft);
  border-radius:40px;padding:8px 15px;transition:.2s}
.menu-nav a:hover{color:var(--paper);background:var(--terra);border-color:var(--terra)}
.cat-anchor{scroll-margin-top:96px}
.cat-photo{aspect-ratio:4/5;position:relative}
.cat-photo.bleed{aspect-ratio:3/4}
.cat-photo.photo{overflow:visible;background:transparent}
.cat-photo.photo::after{display:none}
.cat-photo.photo img{position:relative;z-index:1}

/* ---- editorial intro (Olive-Ateliers style) ---- */
.editorial-band{position:relative;overflow:hidden}
.editorial{font-family:var(--f-mono);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.45;font-size:clamp(16px,1.7vw,23px);
  text-align:center;max-width:46ch;margin:0 auto 32px;color:var(--ink);
  font-weight:400;text-wrap:balance}
.editorial .script{font-size:2.15em;letter-spacing:0;vertical-align:baseline;
  line-height:0;margin:0 .1em;color:var(--terra)}
.branch-deco{position:absolute;right:clamp(8px,2.5vw,60px);top:2%;
  width:clamp(260px,30vw,520px);opacity:.4;mix-blend-mode:multiply;
  pointer-events:none;z-index:0}
.branch-deco.flip{transform:scaleX(-1)}
.branch-deco.left{right:auto;left:clamp(-40px,-2vw,0px)}
.editorial-band .wrap{position:relative;z-index:1}
/* engraving illustrations flanking a centered text block, left + right */
.side-illu{position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(170px,22vw,360px);height:auto;opacity:.9;mix-blend-mode:multiply;
  pointer-events:none;z-index:0}
.side-illu.left{left:clamp(0px,2.5vw,60px)}
.side-illu.right{right:clamp(0px,2.5vw,60px)}
/* mobile/tablet: keep ONE (the left illu) tucked into the bottom-right corner like the
   old wheat that slid down; hide the other so it never clashes with the text */
@media(max-width:900px){
  .side-illu.right{display:none}
  .side-illu.left{top:auto;bottom:-3%;left:auto;right:-10%;transform:none;
    width:clamp(150px,42vw,250px);opacity:.5}
  /* editorial now has only the pasta (on the right) — keep it on mobile, in the corner */
  .editorial-band .side-illu.right{display:block;top:auto;bottom:-3%;left:auto;right:-10%;
    transform:none;width:clamp(150px,42vw,250px);opacity:.5}
}
/* on mobile the wheat illu sat right behind the text — drop it to the bottom corner */
@media(max-width:640px){
  .editorial-band .branch-deco{top:auto;bottom:-4%;right:-14%;
    width:clamp(170px,48vw,230px);opacity:.2}
}

/* ---- framed hours / reserve box (the WED-SAT box) ---- */
.box-hours{position:relative;max-width:1120px;margin:0 auto;
  padding:clamp(40px,5vw,62px) clamp(28px,5vw,70px) clamp(34px,4vw,50px)}
/* stronger selector so it beats the global [data-frame] > * {position:relative} rule */
.box-hours .box-label{position:absolute;top:0;left:0;right:0;width:fit-content;
  margin-inline:auto;transform:translateY(-50%);z-index:2;
  background:var(--paper);padding:0 18px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;text-align:center}
.box-cols{display:grid;grid-template-columns:1fr;text-align:center}
@media(min-width:680px){.box-cols{grid-template-columns:1fr 1fr}}
.box-cell{padding:clamp(14px,2vw,18px) clamp(16px,3vw,38px);
  display:flex;flex-direction:column;align-items:center}
.box-cell .kicker{display:block;margin-bottom:14px}
/* push the bottom link down so both cells' links align even if a line wraps (tablet) */
.box-cell .ul-link{margin-top:auto}
.box-big{font-family:var(--f-display);font-size:clamp(23px,2.8vw,36px);
  letter-spacing:-0.01em;line-height:1.04;margin:0 0 8px}
.box-sub{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:18px}
.ul-link{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border-bottom:1.4px solid var(--terra);
  padding-bottom:3px;transition:color .2s}
.ul-link:hover{color:var(--terra)}
.box-div{display:block;height:0;width:62%;margin:16px auto;
  border-top:1px solid var(--line-soft)}
@media(min-width:680px){
  .box-div{position:absolute;top:22%;bottom:22%;left:50%;width:0;height:auto;margin:0;
    border-top:0;border-left:1px solid var(--line-soft)}
}

/* ---- hero footer: headline left, rating + subtext right ---- */
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(40px,5vw,80px);flex-wrap:wrap}
.hero-foot-l{flex:1 1 420px;min-width:0}
.hero-foot-r{flex:0 1 560px;min-width:0;text-align:left;display:flex;
  flex-direction:column;align-items:flex-start;margin-right:0}
.hero-foot-r .hero-sub{margin:14px 0 0;text-align:left}
/* medium screens: shrink BENVENUTI so left + right stay side by side longer */
/* one continuous band 681–1500px so the two columns never stack mid-range
   (the full-size layout only fits side-by-side above ~1500px) */
@media(min-width:681px) and (max-width:1500px){
  .hero .display{font-size:clamp(38px,5.4vw,84px)}
  .hero-foot-l{flex:1 1 280px;min-width:0}
  .hero-foot-r{flex:0 1 360px;min-width:0}
  .hero-sub{font-size:clamp(12px,1.35vw,15px);max-width:42ch}
  .hero-foot{gap:clamp(24px,3.5vw,52px)}
}
@media(max-width:680px){
  .hero-foot-r{flex-basis:100%;text-align:left;align-items:flex-start;margin-top:22px}
  .hero-foot-r .hero-sub{text-align:left}
}
.cat-title{font-size:clamp(30px,4vw,52px);letter-spacing:-0.01em;margin-bottom:4px}
.cat-range{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra);font-weight:700}
.dish-list{margin-top:26px}
.dish-line{padding:13px 0;border-bottom:1px dotted var(--line-soft)}
.dish-head{display:flex;align-items:baseline;gap:9px}
.dish-line .dn{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.2}
.dish-line .dn em{font-family:var(--f-script);font-style:normal;color:var(--terra);
  font-size:26px;font-weight:400}
.dish-head .lead{flex:1 1 auto;min-width:14px;align-self:flex-end;margin-bottom:6px;
  border-bottom:1px dotted var(--line-soft)}
.dish-head .dp{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;
  font-weight:700;white-space:nowrap;color:var(--ink)}
.dish-head .dp .x2{color:var(--muted);font-weight:400}
.dish-line .meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--terra);font-weight:700;margin-left:9px}
.dish-line .dd{font-size:14.5px;color:var(--muted);margin:3px 0 0;max-width:66ch;
  font-family:var(--f-body)}
.allergen-note{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;
  line-height:1.95;color:var(--muted)}
.allergen-note b{color:var(--ink-soft);font-weight:700}
.vini-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,46px)}
@media(min-width:760px){.vini-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.vini-grid{grid-template-columns:repeat(3,1fr)}}
.vini-grid .dish-list{margin-top:16px}
.olive-band .dish-line{border-bottom-color:rgba(243,234,217,.18)}
.olive-band .dish-line .dn{color:var(--paper)}
.olive-band .dish-head .lead{border-bottom-color:rgba(243,234,217,.2)}
.olive-band .dish-head .dp{color:var(--paper)}
.olive-band .dish-head .dp .x2{color:rgba(243,234,217,.55)}
.price-note{background-color:rgba(255,255,255,.46);
  text-align:center;padding:22px;font-family:var(--f-mono);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);line-height:1.9}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:18px}}
.gallery .g{position:relative;overflow:hidden}
@media(min-width:760px){
  .g1{grid-column:span 7;grid-row:span 2}
  .g2{grid-column:span 5;grid-row:span 1}
  .g3{grid-column:span 5;grid-row:span 1}
  .g4{grid-column:span 5;grid-row:span 2}
  .g5{grid-column:span 7;grid-row:span 1}
  .g6{grid-column:span 7;grid-row:span 1}
}

/* big number facts */
.facts{display:grid;grid-template-columns:1fr;gap:30px;text-align:center}
@media(min-width:720px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact .big{font-family:var(--f-display);font-size:clamp(54px,7vw,96px);
  line-height:.9;color:var(--terra)}
.fact .lab{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:12px}

/* ---------- footer ---------- */
.foot{background-color:var(--olive-deep);color:var(--paper-2);
  background-image:linear-gradient(rgba(52,48,31,.88),rgba(52,48,31,.88)),url('noise.webp');
  background-size:auto,300px;position:relative}
.foot-cta{text-align:center;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(70px,9vw,130px) var(--pad) clamp(50px,6vw,90px)}
.foot-cta h2{color:var(--paper);font-size:clamp(36px,5.5vw,80px);
  text-transform:uppercase;letter-spacing:.03em;line-height:1}
.foot-cta .lede{color:rgba(243,234,217,.82);max-width:46ch;margin:22px auto 32px}
.foot-cta .btn-row{justify-content:center}
.seal{width:128px;height:auto;margin:0 auto 26px;display:block;
  filter:brightness(0) invert(1);opacity:.92}
/* footer: hand-drawn top line that arcs up around the seal + a faint illustration */
.foot{overflow:visible}
.foot-edge{position:absolute;top:0;left:0;width:100%;height:96px;z-index:1;
  overflow:visible;pointer-events:none}
.foot-edge path:not(.fill){fill:none;stroke:#cf9b78;stroke-width:1.5;stroke-opacity:.7;
  stroke-linecap:round;stroke-linejoin:round}
.foot-edge .fill{fill:url(#paperTex);stroke:none}
.foot .foot-cta{position:relative;z-index:2}
.foot .foot-cta .seal{margin-top:-34px}
.foot-illu{position:absolute;right:4%;bottom:7%;width:clamp(120px,13vw,210px);
  opacity:.13;filter:invert(1);mix-blend-mode:screen;pointer-events:none;z-index:0}
.foot-grid{display:grid;grid-template-columns:1fr;gap:40px;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(40px,5vw,70px) var(--pad);border-top:1px solid rgba(243,234,217,.16)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#cf9b78;font-weight:700;margin:0 0 18px}
.foot-grid a,.foot-grid p{color:rgba(243,234,217,.82);font-family:var(--f-mono);
  font-size:13px;letter-spacing:.04em;line-height:2;text-transform:uppercase;margin:0}
.foot-grid a:hover{color:var(--paper)}
.foot-brand{font-family:var(--f-display);font-size:30px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--paper);margin-bottom:14px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;max-width:var(--maxw);margin-inline:auto;
  padding:22px var(--pad);border-top:1px solid rgba(243,234,217,.16);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,234,217,.6)}
/* the fixed cookie bar (position:fixed;bottom:0) would cover the © / Impressum / Datenschutz
   row — only while it's actually shown, lift that row clear of it (collapses after dismiss). */
body:has(.privacy-bar.show) .foot-bottom{padding-bottom:clamp(74px,9vh,96px)}

/* ---------- reservation modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  padding:24px}
.modal.open{display:grid}
.modal .veil{position:absolute;inset:0;background:rgba(35,23,19,.6);
  backdrop-filter:blur(3px)}
.modal .card{position:relative;z-index:1;background:var(--paper);
  background-image:url('paper.webp');background-size:400px;
  max-width:460px;width:100%;padding:clamp(34px,5vw,56px);text-align:center}
.modal .card .seal-sm{width:74px;margin:0 auto 18px;display:block;opacity:.9}
.modal h3{font-size:30px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.modal .phone{font-family:var(--f-display);font-size:clamp(30px,5vw,42px);
  color:var(--terra);margin:18px 0;letter-spacing:.01em;display:block}
.modal .close{position:absolute;top:14px;right:16px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  background:none;border:0;color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}.scroll-hint .ln{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav-left .navlink{display:none}
  .menu-toggle{display:inline-flex}
  .nav-left,.nav-right{gap:14px}
  .nav-right .navlink{display:none}
  .hero-badge{position:static;margin-bottom:20px}
  .stars{font-size:11px}
}
/* small devices: drop the nav reserve button — it lives in the burger menu instead */
@media(max-width:640px){
  .site-head .nav-right .btn{display:none}
  .nav-right{gap:0}
}
@media(max-width:560px){
  body{font-size:16px}
  .nav{padding:16px var(--pad)}
  .brand small{letter-spacing:.24em}
  .btn{width:100%}
  /* taller hero so the photo runs longer and the text block slides further down */
  .hero{min-height:114svh}
  /* break the eyebrow after "Nuovo Dante" on small screens */
  .eb-br{display:block}
  .hero-foot-l .eb-mid{display:none}
  /* size BENVENUTI by viewport width so it spans ~full device width and the
     long eyebrow above no longer feels detached; tighter tracking avoids wrapping */
  .hero .display{font-size:clamp(42px,13.5vw,60px);letter-spacing:.01em}
  .hero-foot-l>.eyebrow{font-size:9px;letter-spacing:.16em;line-height:1.55}
  .hero .btn-row{margin-top:18px;gap:10px}
  .hero .btn{padding-block:14px}
  .hero-foot-r{margin-top:14px}
  .hero-sub{margin-top:8px}
  /* shorter wave + bottom padding > wave height so text never dips into the torn edge */
  .torn{height:56px}
  .hero-inner{padding-bottom:74px}
}