/* =========================================================================
   Bien — Rooftop restaurant & bar on the Vardar, Skopje
   Editorial / warm golden-hour system
   Type:  Manrope (display + UI/body) — full Cyrillic support
   ========================================================================= */

:root{
  /* Warm paper & ink */
  --paper:      #FAF4EA;
  --paper-2:    #F4EAD8;   /* alt section */
  --paper-3:    #EFE2CD;   /* deeper card */
  --ink:        #2A2017;   /* warm near-black */
  --ink-soft:   #5C4E3F;   /* warm brown body */
  --ink-faint:  #8A7A66;

  /* Dark contrast section */
  --espresso:   #1E150D;
  --espresso-2: #2A1F14;

  /* Golden-hour accent */
  --amber:      #C0853A;
  --amber-deep: #A26B27;
  --amber-lite: #DBA85C;
  --honey-glow: rgba(214,162,84,.18);

  /* Lines */
  --line:        rgba(42,32,23,.14);
  --line-strong: rgba(42,32,23,.28);
  --line-light:  rgba(250,244,234,.20);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-pad: clamp(80px, 11vw, 168px);

  --ff-disp: "Manrope", system-ui, -apple-system, sans-serif;
  --ff-ui:   "Manrope", system-ui, -apple-system, sans-serif;

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

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-ui);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--amber); color:var(--paper); }

/* ----------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-pad); position:relative; }
section[id]{ scroll-margin-top:84px; }

/* ----------------------------------------------------------- type helpers */
.display{
  font-family:var(--ff-disp);
  font-weight:700;
  line-height:1.0;
  letter-spacing:-.025em;
  margin:0;
}
.display em, .h2 em, .lead em{ font-style:normal; color:var(--amber-deep); }

.h2{
  font-family:var(--ff-disp);
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 4.1rem);
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0;
}
.h3{
  font-family:var(--ff-disp);
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
}

.overline{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--ff-ui);
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--amber-deep);
  margin:0 0 1.4rem;
}
.overline::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.6;
}
.overline.center{ justify-content:center; }
.overline.center::after{
  content:""; width:34px; height:1px; background:currentColor; opacity:.6;
}

.lead{
  font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.62;
  color:var(--ink-soft);
  font-weight:400;
  max-width:54ch;
}
p{ color:var(--ink-soft); line-height:1.7; }
.muted{ color:var(--ink-faint); }

.idx{
  font-family:var(--ff-ui);
  font-size:.72rem; font-weight:600; letter-spacing:.24em;
  color:var(--ink-faint);
}

/* --------------------------------------------------------------- buttons */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-ui); font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 1.7em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  border-radius:2px;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover{ background:var(--amber); border-color:var(--amber); color:var(--paper); }
.btn:hover .arr{ transform:translate(3px,-3px); }

.btn.ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-strong); }
.btn.ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.btn.on-dark{ --bg:var(--amber); --fg:#1b130a; --bd:var(--amber); }
.btn.on-dark:hover{ background:var(--paper); border-color:var(--paper); color:var(--espresso); }
.btn.ghost.on-dark{ --bg:transparent; --fg:var(--paper); --bd:var(--line-light); }
.btn.ghost.on-dark:hover{ background:var(--paper); color:var(--espresso); border-color:var(--paper); }

.txtlink{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:.82rem; letter-spacing:.04em;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:.35em;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.txtlink .arr{ transition:transform .35s var(--ease); }
.txtlink:hover{ color:var(--amber-deep); border-color:var(--amber); }
.txtlink:hover .arr{ transform:translate(3px,-3px); }

/* =============================================================== HEADER */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--gutter);
  color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.hdr.solid{
  background:rgba(250,244,234,.93);
  backdrop-filter:saturate(1.4) blur(14px);
  color:var(--ink);
  padding-block:12px;
  box-shadow:0 1px 0 var(--line), 0 14px 40px -28px rgba(42,32,23,.5);
}
.brand{
  display:flex; align-items:center; gap:.55ch;
  color:inherit;
}
.bmark{ display:block; flex:none; }
.brand .bmark{
  width:44px; height:44px;
  transition:width .5s var(--ease), height .5s var(--ease);
}
.hdr.solid .brand .bmark{ width:38px; height:38px; }
.brand__wm{
  font-family:var(--ff-disp); font-weight:800;
  font-size:1.5rem; line-height:1; letter-spacing:-.025em;
}

.nav{ display:flex; align-items:center; gap:clamp(14px,1.6vw,30px); }
.nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  position:relative; padding-block:6px; opacity:.92;
  transition:opacity .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--amber-lite); transition:right .35s var(--ease);
}
.hdr.solid .nav a::after{ background:var(--amber); }
.nav a:hover{ opacity:1; }
.nav a:hover::after, .nav a.active::after{ right:0; }

.hdr-right{ display:flex; align-items:center; gap:18px; }
.lang{
  display:inline-flex; align-items:center; gap:2px;
  font-size:.74rem; font-weight:600; letter-spacing:.1em;
  border:1px solid currentColor; border-radius:2px; padding:5px 4px;
  opacity:.85;
}
.lang button{
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  padding:2px 7px; border-radius:1px; letter-spacing:.08em; opacity:.6;
  transition:opacity .3s, background .3s, color .3s;
}
.lang button.on{ opacity:1; background:currentColor; }
.lang button.on span{ mix-blend-mode:difference; }
.hdr .lang button.on{ color:var(--paper); background:var(--paper); }
.hdr .lang button.on span{ color:var(--espresso); }
.hdr.solid .lang button.on{ background:var(--ink); }
.hdr.solid .lang button.on span{ color:var(--paper); }

.hdr .reserve-cta{ display:inline-flex; }

.burger{ display:none; width:42px; height:42px; border:1px solid currentColor;
  background:none; border-radius:3px; cursor:pointer; padding:0; color:inherit;
  align-items:center; justify-content:center; }
.burger span{ position:relative; width:18px; height:1.5px; background:currentColor; display:block; transition:.3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor; transition:.3s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* mobile menu overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:55; background:var(--espresso);
  color:var(--paper); display:flex; flex-direction:column;
  padding:96px var(--gutter) 48px; gap:6px;
  transform:translateY(-101%); transition:transform .55s var(--ease); visibility:hidden;
}
.mobile-nav.open{ transform:translateY(0); visibility:visible; }
.mobile-nav a{ font-family:var(--ff-disp); font-size:1.95rem; font-weight:700; letter-spacing:-.02em;
  padding:10px 0; border-bottom:1px solid var(--line-light); }
.mobile-nav a .mi{ font-family:var(--ff-ui); font-size:.7rem; letter-spacing:.2em; color:var(--amber-lite); margin-right:14px; }
.mobile-nav .m-meta{ margin-top:auto; color:rgba(250,244,234,.6); font-size:.85rem; letter-spacing:.04em; }

/* =============================================================== HERO */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 8%, var(--honey-glow), transparent 55%),
    linear-gradient(180deg, rgba(20,14,8,.42) 0%, rgba(20,14,8,.12) 36%, rgba(20,14,8,.30) 66%, rgba(20,14,8,.78) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(46px,7vw,92px); padding-top:140px; }
.hero .overline{ color:var(--amber-lite); }
.hero__title{
  font-size:clamp(3.2rem, 11vw, 9rem);
  font-weight:500;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(20,14,8,.4);
}
.hero__title em{ color:var(--amber-lite); }
.hero__title .dot{ color:var(--amber-lite); font-style:normal; }

/* centered hero variant */
.hero__inner.centered{ text-align:center; }
.hero__inner.centered .hero__sub{ margin-inline:auto; }
.hero__inner.centered .hero__cta{ justify-content:center; }
.hero__sub{ max-width:46ch; margin:1.9rem 0 2.4rem; color:rgba(250,244,234,.92);
  font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__scroll{
  position:absolute; left:var(--gutter); bottom:24px; z-index:2;
  display:flex; align-items:center; gap:10px; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(250,244,234,.8);
}
.hero__scroll .ln{ width:46px; height:1px; background:currentColor; transform-origin:left;
  animation:scrollLn 2.6s var(--ease) infinite; }
@keyframes scrollLn{ 0%,100%{ transform:scaleX(.3); opacity:.5;} 50%{ transform:scaleX(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll .ln{ animation:none; } }

/* tiny meta bar under hero */
.runner{
  background:var(--espresso); color:var(--paper);
  border-block:1px solid var(--line-light);
}
.runner .wrap{ display:flex; flex-wrap:wrap; gap:8px 38px; padding-block:22px;
  align-items:center; justify-content:center; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }
.runner span{ display:inline-flex; align-items:center; gap:14px; color:rgba(250,244,234,.82); }
.runner span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber-lite); }

/* =============================================================== INTRO */
.intro{ background:var(--paper); }
.intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,96px); align-items:center; }
.intro__copy .h2{ margin-bottom:1.6rem; max-width:13ch; }
.intro__media{ position:relative; }
.intro__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; }
.intro__tag{
  position:absolute; left:-1px; bottom:22px; background:var(--paper);
  padding:14px 22px 14px 0; padding-right:26px;
  font-family:var(--ff-disp); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--amber-deep);
}
.feature-row{ display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.feature-row li{ list-style:none; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; }
.feature-row li::before{ content:""; width:6px; height:6px; background:var(--amber); transform:rotate(45deg); }
.feature-row{ padding-left:0; }

/* =============================================================== MENU */
.menu{ background:var(--paper-2); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,76px); }
.sec-head .h2{ max-width:16ch; }
.sec-head .sh-side{ max-width:38ch; }
.sec-head.centered{ flex-direction:column; align-items:center; text-align:center; }
.sec-head.centered .h2{ max-width:none; }
.sec-head.centered .sh-side{ margin-inline:auto; max-width:60ch; }
.sec-head.centered .overline{ margin-bottom:.7rem; }

.signature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px);
  align-items:center; margin-bottom:clamp(46px,6vw,90px); }
.signature.flip .sig-media{ order:2; }
.sig-media{ position:relative; }
.sig-media img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:3px; display:block; }
.sig-copy .h3{ margin-bottom:.6rem; }
.sig-copy .kicker{ font-family:var(--ff-ui); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber-deep); font-weight:600; margin-bottom:1.4rem; display:block; }
.sig-copy p{ margin-bottom:1.8rem; max-width:46ch; }

.menu-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
.menu-strip .ph-card .ph{ aspect-ratio:3/4; }
.menu-strip .ph-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px; display:block; }
.menu-strip .mc-label{ margin-top:14px; }
.mc-label{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.mc-label b{ font-family:var(--ff-disp); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; }
.mc-label .pr{ font-size:.82rem; color:var(--ink-faint); letter-spacing:.04em; white-space:nowrap; }
.mc-note{ font-size:.82rem; color:var(--ink-faint); margin:.3rem 0 0; }

.menu-foot{ display:flex; justify-content:center; margin-top:clamp(44px,6vw,72px); }

/* placeholder block */
.ph{
  position:relative; width:100%; overflow:hidden; border-radius:3px;
  background:
    repeating-linear-gradient(135deg, #ECDCC2 0 13px, #E5D2B3 13px 26px);
  border:1px dashed rgba(162,107,39,.5);
  display:flex; align-items:center; justify-content:center;
}
.ph__tag{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.68rem; line-height:1.5; letter-spacing:.02em;
  color:#6e5224; background:rgba(250,244,234,.78);
  border:1px solid rgba(162,107,39,.4);
  padding:9px 13px; border-radius:3px; max-width:80%; text-align:center;
}
.ph__tag b{ display:block; font-size:.6rem; letter-spacing:.2em; color:var(--amber-deep); margin-bottom:4px; }

/* =============================================================== TERRACE */
.terrace{ background:var(--paper); }
.tmosaic{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:auto; gap:16px; }
.tmosaic figure{ margin:0; position:relative; overflow:hidden; border-radius:3px; }
.tmosaic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tmosaic figure:hover img{ transform:scale(1.045); }
.tm-a{ grid-column:span 7; aspect-ratio:4/5; }
.tm-b{ grid-column:span 5; display:grid; grid-template-rows:1fr 1fr; gap:16px; min-height:0; }
.tm-b figure{ position:relative; min-height:0; overflow:hidden; }
.tm-b img{ position:absolute; inset:0; }
.tm-wide{ grid-column:span 12; aspect-ratio:21/8; }
.fig-cap{ position:absolute; left:16px; bottom:14px; color:var(--paper);
  font-family:var(--ff-disp); font-weight:600; font-size:1.12rem; letter-spacing:-.01em;
  text-shadow:0 2px 18px rgba(20,14,8,.6); }
.terrace .sec-head{ margin-bottom:clamp(36px,5vw,60px); }

/* =============================================================== KIDS */
.kids{ background:var(--paper-3); }
.kids__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.kids__media{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:14px; }
.kids__media figure{ margin:0; overflow:hidden; border-radius:3px; }
.kids__media img{ width:100%; height:100%; object-fit:cover; }
.kids__media .big{ grid-column:1 / -1; aspect-ratio:16/9; }
.kids__media .sm{ aspect-ratio:1/1; }
.kids__copy .h2{ margin-bottom:1.4rem; max-width:14ch; }
.kids__copy .lead{ margin-bottom:1.6rem; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:1.8rem 0 0; }
.chips li{ list-style:none; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  padding:.6em 1em; border:1px solid var(--line-strong); border-radius:40px; color:var(--ink); }

/* =============================================================== GALLERY */
.gallery{ background:var(--paper); }
.ggrid{ columns:3; column-gap:16px; }
.ggrid figure{ margin:0 0 16px; overflow:hidden; border-radius:3px; break-inside:avoid; cursor:pointer; position:relative; }
.ggrid img{ width:100%; transition:transform 1s var(--ease), filter .5s var(--ease); }
.ggrid figure::after{ content:"↗"; position:absolute; top:12px; right:14px; color:var(--paper);
  font-size:1.1rem; opacity:0; transform:translateY(-6px); transition:.4s var(--ease); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.ggrid figure:hover img{ transform:scale(1.05); }
.ggrid figure:hover::after{ opacity:1; transform:translateY(0); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(20,14,8,.94);
  display:flex; align-items:center; justify-content:center; padding:5vw;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:3px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.lb-btn{ position:absolute; background:none; border:1px solid var(--line-light); color:var(--paper);
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.2rem; display:flex;
  align-items:center; justify-content:center; transition:.3s; }
.lb-btn:hover{ background:var(--paper); color:var(--espresso); }
.lb-prev{ left:3vw; } .lb-next{ right:3vw; } .lb-close{ top:3vh; right:3vw; }

/* =============================================================== RESERVE */
.reserve{ background:var(--espresso); color:var(--paper); position:relative; overflow:hidden; }
.reserve::before{ content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/bar-river-3.jpg") center/cover; opacity:.16; }
.reserve::after{ content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 80% at 85% 10%, var(--honey-glow), transparent 60%); }
.reserve .wrap{ position:relative; z-index:1; }
.reserve .overline{ color:var(--amber-lite); }
.reserve__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,80px); align-items:center; }
.reserve .h2{ max-width:15ch; margin-bottom:1.4rem; }
.reserve p{ color:rgba(250,244,234,.82); max-width:46ch; }
.contact-card{ background:rgba(250,244,234,.05); border:1px solid var(--line-light);
  border-radius:4px; padding:clamp(26px,3vw,40px); }
.cc-row{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line-light); }
.cc-row:last-of-type{ border-bottom:0; }
.cc-row .k{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-lite);
  width:96px; flex:none; padding-top:4px; }
.cc-row .v{ font-family:var(--ff-disp); font-weight:700; font-size:1.24rem; line-height:1.3; letter-spacing:-.02em; }
.cc-row .v small{ display:block; font-family:var(--ff-ui); font-size:.82rem; letter-spacing:.02em;
  color:rgba(250,244,234,.66); margin-top:3px; text-transform:none; }
.cc-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* =============================================================== CONTACT */
.contact{ background:var(--paper); }
.contact__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:stretch; }
.cinfo .h2{ margin-bottom:1.6rem; max-width:13ch; }
.info-list{ padding:0; margin:1.8rem 0 0; }
.info-list div{ display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.info-list .k{ width:120px; flex:none; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-deep); font-weight:600; padding-top:4px; }
.info-list .v{ font-size:1.04rem; color:var(--ink); line-height:1.55; }
.info-list .v a:hover{ color:var(--amber-deep); }
.socials{ display:flex; gap:10px; margin-top:26px; }
.socials a{ width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600;
  letter-spacing:.04em; transition:.3s; }
.socials a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.map{ position:relative; min-height:clamp(420px,52vh,620px); border-radius:4px; overflow:hidden;
  background:repeating-linear-gradient(135deg,#ECDCC2 0 13px,#E5D2B3 13px 26px);
  border:1px dashed rgba(162,107,39,.5); display:flex; align-items:center; justify-content:center; }
.map.filled{ border:1px solid var(--line); background:none; display:block; }
.map.filled iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(.9) contrast(1.02); }
.map-link{ position:absolute; left:16px; bottom:16px; z-index:2; background:var(--paper); color:var(--ink);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; padding:10px 16px; border-radius:3px;
  box-shadow:0 6px 20px rgba(0,0,0,.18); transition:.3s; }
.map-link:hover{ background:var(--ink); color:var(--paper); }

/* =============================================================== FOOTER */
.footer{ background:var(--espresso); color:var(--paper); padding-top:clamp(70px,9vw,120px); }
.footer__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;
  padding-bottom:clamp(46px,6vw,80px); border-bottom:1px solid var(--line-light); }
.footer__brand{ max-width:34ch; }
.footer__brand .fb{ display:flex; align-items:center; gap:.55ch; color:var(--paper); margin-bottom:1.2rem; }
.footer__brand .fb .bmark{ width:48px; height:48px; }
.footer__brand .fb__wm{ font-family:var(--ff-disp); font-weight:800; font-size:2rem; line-height:1; letter-spacing:-.025em; }
.footer__brand p{ color:rgba(250,244,234,.7); font-size:.95rem; }
.footer__cols{ display:flex; gap:clamp(40px,6vw,90px); flex-wrap:wrap; }
.fcol h4{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-lite);
  margin:0 0 18px; font-weight:600; }
.fcol a, .fcol p{ display:block; color:rgba(250,244,234,.8); font-size:.92rem; line-height:1.45; margin:0 0 10px; padding:0; }
.fcol a:last-child, .fcol p:last-child{ margin-bottom:0; }
.fcol > a + a, .fcol > p + a{ margin-top:4px; }
.fcol a:hover{ color:var(--paper); }
.footer__word{ font-family:var(--ff-disp); font-weight:800; text-align:center; line-height:.82;
  font-size:clamp(4rem,21vw,17rem); letter-spacing:-.05em; padding:clamp(30px,5vw,60px) 0 0;
  background:linear-gradient(180deg, rgba(250,244,234,.9), rgba(250,244,234,.05));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0; }
.footer__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:30px 0 40px; font-size:.78rem; color:rgba(250,244,234,.55); letter-spacing:.04em; }

/* ----------------------------------------------------------- reveal anim */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =============================================================== RESPONSIVE */
@media (max-width:1080px){
  .nav{ display:none; }
  .hdr .reserve-cta{ display:none; }
  .burger{ display:inline-flex; }
}
@media (max-width:860px){
  body{ font-size:16px; }
  /* center the hero content vertically on phones (desktop stays bottom-aligned) */
  .hero{ align-items:center; }
  .hero__inner{ padding-top:88px; padding-bottom:72px; }
  .intro__grid, .signature, .signature.flip .sig-media, .kids__grid,
  .reserve__grid, .contact__grid{ grid-template-columns:1fr; }
  .signature.flip .sig-media{ order:0; }
  .sig-media{ order:-1; }
  .tmosaic{ grid-template-columns:1fr; }
  .tm-a,.tm-wide{ grid-column:auto; aspect-ratio:4/3; }
  .tm-b{ grid-column:auto; grid-template-rows:auto; grid-template-columns:1fr 1fr; }
  .tm-wide{ aspect-ratio:16/9; }
  .menu-strip{ grid-template-columns:1fr 1fr; }
  .ggrid{ columns:2; }
  .hdr-right{ gap:12px; }
  .cc-row .k, .info-list .k{ width:84px; }
}
@media (max-width:520px){
  :root{ --gutter:20px; }
  .ggrid{ columns:1; }
  .kids__media{ grid-template-columns:1fr 1fr; }
  .feature-row{ gap:8px 18px; }
  .reserve .h2, .intro__copy .h2, .kids__copy .h2, .cinfo .h2{ max-width:none; }
}

/* =============================================================== MENU PAGE */
.page-menu{ background:var(--paper); }

.menu-mast{ padding:clamp(124px,17vh,192px) 0 clamp(38px,6vw,70px); text-align:center; }
.menu-mast__in{ display:flex; flex-direction:column; align-items:center; }
.menu-mast .overline{ color:var(--amber-deep); }
.menu-mast__title{ font-size:clamp(3rem,9vw,6.2rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); margin:.12em 0 .32em; }
.menu-mast__title .dot{ color:var(--amber); }
.menu-mast__sub{ max-width:52ch; margin:0 auto; }
.menu-mast__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:2.2rem 0 1.3rem; }
.menu-mast__note{ font-size:.82rem; color:var(--ink-faint); max-width:48ch; margin:.4rem auto 0; line-height:1.5; }

/* sticky category bar */
.catbar{ position:sticky; top:54px; z-index:40;
  background:rgba(250,244,234,.92); backdrop-filter:saturate(1.3) blur(12px);
  border-block:1px solid var(--line); }
.catbar__in{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-block:11px; scroll-behavior:smooth; }
.catbar__in::-webkit-scrollbar{ display:none; }
.catchip{ flex:0 0 auto; font-family:var(--ff-ui); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-faint); padding:8px 15px; border-radius:999px; border:1px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.catchip:hover{ color:var(--ink); }
.catchip.on{ color:var(--espresso); background:var(--paper-3); border-color:var(--line); }

/* menu body */
.menu-body{ padding-block:clamp(34px,5vw,58px) clamp(18px,3vw,34px); }
.mcat{ scroll-margin-top:104px; padding-block:clamp(26px,3.4vw,42px); }
.mcat__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:clamp(16px,2.2vw,28px); }
.mcat__title{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem);
  line-height:1; letter-spacing:-.03em; color:var(--ink); margin:0; }
.mcat__note{ font-family:var(--ff-ui); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-deep); }

.mitems{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,96px); }
.mitem{ display:flex; flex-direction:column; gap:3px; padding:14px 0; border-bottom:1px solid var(--line); }
.mitem__name{ font-family:var(--ff-disp); font-weight:700; font-size:1.2rem; line-height:1.25; letter-spacing:-.015em; color:var(--ink); }
.mitem__desc{ font-family:var(--ff-ui); font-size:.86rem; line-height:1.45; color:var(--ink-faint); max-width:54ch; }

.menu-end{ text-align:center; padding-block:clamp(38px,6vw,78px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  border-top:1px solid var(--line); }
.menu-end p{ max-width:48ch; color:var(--ink-soft); margin:0; }

@media (max-width:760px){
  .mitems{ grid-template-columns:1fr; }
  .catbar{ top:52px; }
  .mcat{ scroll-margin-top:100px; }
}