/* ==========================================================================
   Agroturizam Selo Mekiši — design system
   Palette and pairing rationale: _data/design-system.md
   ========================================================================== */

:root{
  /* Light "paper and ink" palette, taken from the 3D model section: warm
     paper grounds, ink text, one burnt-orange accent, sage from the hedges.
     --gold/--gold-2 keep their old names but now hold the accent; both pass
     4.5:1 as text on every paper tone. */
  --bg:#f1ede4; --bg-2:#f8f6f1; --card:#fbfaf7; --card-2:#f3efe6;
  --line:#d6cebf; --text:#1c1712; --muted:#5a5046;
  --gold:#5d6838; --gold-2:#4f5a2e; --ember:#5d6838;   /* olive accent, 5.1–7.1:1 on paper */
  --sage:#dfe3d5; --sage-2:#c9d1bc;

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:1180px; --radius:14px; --shadow:0 26px 60px -30px rgba(60,44,24,.35);
  --bar:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.65 var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%}
img{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.12}
h1{font-size:clamp(46px,8vw,86px)}
h2{font-size:clamp(28px,4.5vw,46px)}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0;position:relative}
.section--alt{background:var(--bg-2)}
.eyebrow{
  font-size:12px;text-transform:uppercase;letter-spacing:.28em;
  color:var(--gold);font-weight:500;margin:0 0 14px
}
.lede{color:var(--muted);max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:14px 28px;font-weight:500;font-size:15px;
  text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.btn--solid{
  background:var(--gold);
  color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(93,104,56,.22)
}
.btn--solid:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 38px rgba(93,104,56,.32)}
.btn--ghost{border:1px solid var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--bar);
  display:flex;align-items:center;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(248,246,241,.96);border-bottom-color:var(--line)
}
/* Three real columns: brand left, nav optically centred, controls right.
   A flex row with margin-left:auto on the nav pushes the links up against the
   language pills instead of centring them — the nav has to own its own track. */
.header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:32px;width:100%
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex:0 0 auto}
.brand b{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.01em}
.brand span{
  font-size:9px;text-transform:uppercase;letter-spacing:.26em;
  color:var(--gold);margin-top:5px
}
.nav{display:flex;gap:26px;justify-self:center}
.nav a{
  white-space:nowrap;text-decoration:none;font-size:14px;color:var(--muted);
  position:relative;padding:6px 0;transition:color .25s
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}

.header-right{display:flex;align-items:center;gap:14px;justify-self:end}
.brand{justify-self:start}
.lang{display:flex;gap:4px;align-items:center}
.lang a{
  text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:6px 10px;border-radius:999px;
  transition:color .2s,background .2s
}
.lang a:hover{color:var(--text)}
.lang a.active{background:var(--gold);color:#fff;font-weight:600}

.burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px
}
.burger i{display:block;width:16px;height:1.5px;background:var(--text);position:relative;transition:background .2s}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text);
  transition:transform .28s
}
.burger i::before{top:-5px}.burger i::after{top:5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

.drawer-backdrop{
  position:fixed;inset:0;background:rgba(28,23,18,.32);z-index:98;
  opacity:0;pointer-events:none;transition:opacity .3s
}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;overflow:hidden;isolation:isolate
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;background:var(--bg)
}
.hero-overlay{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Left-weighted so the copy sits on darkness while the right stays vivid.
     The copy block ends at ~50% of the viewport width, so the scrim HOLDS to
     50% before falling away — tuned against the daylight terrace footage,
     where the original .62@30% / .20@55% ramp let the lit parasol behind the
     text drop `--muted` to 2.4:1. */
  background:
    linear-gradient(90deg,rgba(241,237,228,.95) 0%,rgba(241,237,228,.9) 32%,rgba(241,237,228,.7) 48%,rgba(241,237,228,.2) 64%,rgba(241,237,228,0) 76%),
    linear-gradient(180deg,rgba(241,237,228,.84) 0%,rgba(241,237,228,0) 17%,rgba(241,237,228,0) 72%,var(--bg) 100%);
}
.hero .container{position:relative;z-index:1;width:100%}
.hero-content{max-width:560px;margin-top:-4vh}
.hero-tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,21px);
  /* a shade above --gold-2 (#ddbe76), which measured 4.47:1 over the brightest
     part of the terrace footage — just under the 4.5 needed at this size */
  color:var(--gold);margin:0 0 14px
}
.hero h1{margin:0 0 10px}
/* --muted is calibrated against --bg. Over bright video it falls below 4.5:1,
   and darkening the whole frame to compensate kills the footage. The hero's
   small text therefore gets its own lighter tone, which buys ~2.5x the
   contrast for free and lets the scrim stay light. */
.hero .thin{
  display:block;font-family:var(--sans);font-size:clamp(11px,1.5vw,13px);
  font-weight:400;text-transform:uppercase;letter-spacing:.3em;
  color:var(--muted);margin-top:16px
}
.hero-lede{font-size:19px;color:var(--text);margin:22px 0 30px;max-width:48ch}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-phone{
  text-decoration:none;font-weight:500;font-size:15px;color:var(--text);
  border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .25s,border-color .25s
}
.hero-phone:hover{color:var(--gold-2);border-color:var(--gold-2)}

.hero-facts{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:38px;
  font-size:13px;color:var(--muted)
}
.hero-facts>div{padding:0 18px;border-left:1px solid rgba(28,23,18,.2)}
.hero-facts>div:first-child{padding-left:0;border-left:0}
.hero-facts b{color:var(--text);font-weight:500}
.stars{color:#f5b301;letter-spacing:.06em;filter:drop-shadow(0 0 6px rgba(245,179,1,.35))}

.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:2;height:58px;
  display:flex;align-items:center;overflow:hidden;pointer-events:none;
  background:rgba(248,246,241,.92);
  border-top:1px solid var(--line)
}
.hero-marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.hero-marquee-group{display:flex;align-items:center;flex:0 0 auto}
.hero-marquee span{
  font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--text);white-space:nowrap;padding:0 4px
}
.hero-marquee i{color:var(--ember);font-style:normal;padding:0 20px;font-size:11px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* Botanical backdrop. Scoped to #about, NOT .section--alt — that class is
   shared with the contact section, which should stay flat.
   The artwork is densest in the left corners, which is exactly where the copy
   column sits, so a left-weighted scrim sits between the art and the text. */
#about{
  background-color:var(--bg-2);
  background-image:url("../assets/img/about-backdrop-olive.webp?v=b94491dc");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#about::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,
    rgba(248,246,241,.72) 0%,
    rgba(248,246,241,.5) 34%,
    rgba(248,246,241,.12) 58%,
    rgba(248,246,241,0) 100%);
}
#about > .container{position:relative;z-index:1}

.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-body p{color:var(--muted);margin-top:18px}
.about-stats{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.about-stats b{
  display:block;font-family:var(--serif);font-size:32px;font-weight:600;color:var(--gold-2);line-height:1
}
.about-stats span{
  display:block;font-size:13px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-top:8px
}
.about-img{
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  aspect-ratio:4/5;background:var(--card)
}
.about-img img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   MENU
   ========================================================================== */
.menu{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 460px at 12% 8%,rgba(93,104,56,.10),transparent 62%),
    radial-gradient(700px 520px at 88% 92%,rgba(93,104,56,.09),transparent 64%),
    var(--bg-2);
}
.menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(93,104,56,.10) 1px,transparent 1px);
  background-size:26px 26px
}
.menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(93,104,56,.035) 9px 10px)
}
.menu>.container{position:relative;z-index:2}
.menu h2{font-size:clamp(40px,6vw,68px)}
.menu-head{text-align:center;max-width:640px;margin:0 auto 46px}
.menu-head .lede{margin:16px auto 0}

.menu-tabs{
  display:flex;gap:6px;justify-content:center;overflow-x:auto;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(28,23,18,.035);scrollbar-width:none;-ms-overflow-style:none
}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tab{
  position:relative;flex:0 0 auto;padding:0 20px;height:52px;
  font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;transition:color .25s
}
.menu-tab::after{
  content:"";position:absolute;left:16px;right:16px;bottom:12px;height:3px;
  background:var(--ember);border-radius:2px;transform:scaleX(0) rotate(-1deg);
  transform-origin:left;transition:transform .34s cubic-bezier(.2,.7,.3,1)
}
.menu-tab:hover{color:var(--text)}
.menu-tab[aria-selected="true"]{color:var(--gold-2)}
.menu-tab[aria-selected="true"]::after{transform:scaleX(1) rotate(-1deg)}

.menu-cat{text-align:center;padding:48px 0 34px}
.menu-cat-kicker{
  font-size:10px;text-transform:uppercase;letter-spacing:.24em;color:var(--ember);font-weight:500
}
.menu-cat h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(36px,5vw,56px);margin:12px 0 0;color:var(--text)
}
.menu-cat-note{color:var(--muted);font-size:14px;margin-top:12px}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.ornament s{
  display:block;width:clamp(40px,9vw,96px);height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--gold))
}
.ornament s+s{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament em{color:var(--gold);font-style:normal;font-size:12px}

.menu-grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,84px)
}
.mi{
  display:grid;grid-template-columns:20px 48px 1fr;align-items:center;gap:0 14px;
  min-height:112px;padding:16px 0;border-bottom:1px solid var(--line);
  position:relative
}
.mi::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--ember),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s
}
.mi:hover::after{transform:scaleX(1)}
.mi-num{font-family:var(--serif);font-size:11px;color:#6b6153}
.mi-ico{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(93,104,56,.2);color:var(--gold);
  transform:rotate(-2deg);
  transition:transform .3s,color .3s,border-color .3s,background .3s
}
.mi-ico svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.mi:hover .mi-ico{
  color:var(--gold-2);border-color:rgba(93,104,56,.55);
  background:rgba(93,104,56,.07);transform:rotate(1deg) translateY(-2px)
}
.mi-main{min-width:0}
.mi-row{display:flex;align-items:baseline;gap:8px}
.mi-name{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--text)}
.mi-leader{
  flex:1 1 auto;min-width:14px;height:1px;margin-bottom:5px;
  background-image:radial-gradient(circle,rgba(28,23,18,.28) 1px,transparent 1px);
  background-size:5px 1px;background-repeat:repeat-x;background-position:0 100%
}
.mi-price{
  font-family:var(--serif);font-size:18px;font-weight:700;color:var(--gold-2);
  position:relative;z-index:1;white-space:nowrap
}
.mi-desc{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);margin-top:6px}
.mi-tag{
  display:inline-block;margin-top:9px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(93,104,56,.6);color:var(--ember);
  font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.14em
}
.mi-flame{width:14px;height:14px;color:var(--ember);flex:0 0 auto}

.menu-is-changing .mi{opacity:0;transform:translateY(8px);animation:mi-in .42s forwards}
.menu-is-changing .mi:nth-child(2n){animation-delay:.035s}
.menu-is-changing .mi:nth-child(3n){animation-delay:.07s}
@keyframes mi-in{to{opacity:1;transform:none}}

.menu-foot{
  margin-top:44px;text-align:center;font-size:14px;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  background:var(--card)
}

/* ==========================================================================
   SCROLL-SCRUB STORY
   ========================================================================== */
.scroll-story{position:relative;height:420vh;background:var(--bg)}
.scroll-story-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate
}
.scroll-story-canvas,.scroll-story-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0
}
.scroll-story-fallback{display:none}
.scroll-story-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(16,13,10,.86) 0%,rgba(16,13,10,.55) 38%,rgba(16,13,10,0) 70%),
    linear-gradient(180deg,rgba(16,13,10,.5) 0%,rgba(16,13,10,0) 32%,rgba(16,13,10,.6) 100%);
}
.scroll-story-copy{position:absolute;z-index:2;max-width:min(560px,52vw);will-change:opacity}
.scroll-story-copy--intro{left:max(24px,calc(50vw - var(--maxw)/2 + 24px));top:50%;transform:translateY(-50%)}
.scroll-story h2{font-size:clamp(42px,6vw,78px);margin:0 0 18px}
.scroll-story-copy p{color:#dcd2c1}
.scroll-story-copy--outro{
  left:max(24px,calc(50vw - var(--maxw)/2 + 24px));bottom:12%;opacity:0;max-width:min(520px,48vw)
}
.scroll-story-copy--outro h3{font-family:var(--serif);font-size:clamp(22px,3vw,34px);margin:0 0 12px}

.scroll-story-doneness{
  position:absolute;z-index:2;right:max(24px,calc(50vw - var(--maxw)/2 + 24px));
  top:50%;transform:translateY(-50%);opacity:0;
  border-left:2px solid var(--gold);padding-left:22px;pointer-events:none
}
.scroll-story-doneness h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--gold);
  margin:0 0 18px;font-family:var(--sans);font-weight:500
}
.sd-row{
  display:flex;align-items:center;gap:14px;padding:7px 0;
  transition:transform .25s,filter .25s
}
.sd-row:hover{transform:scale(1.05);filter:brightness(1.25)}
.sd-row b{
  font-family:var(--serif);font-size:11px;color:var(--muted);width:18px;font-weight:400
}
.sd-bar{width:46px;height:8px;border-radius:999px;flex:0 0 auto}
.sd-row span{font-size:14px;color:var(--text)}

.scroll-story-loader{
  position:absolute;z-index:3;right:max(24px,calc(50vw - var(--maxw)/2 + 24px));bottom:8%;
  display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);transition:opacity .4s
}
.scroll-story-loader strong{color:var(--gold-2);font-weight:500;min-width:34px}
.scroll-story-loader i{display:block;width:90px;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.scroll-story-loader i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--gold-2));transition:width .25s}
.scroll-story-loader.is-loaded{opacity:0;pointer-events:none}

.scroll-story-hint{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:6%;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  transition:opacity .4s
}
.scroll-story-hint i{position:relative;display:block;width:1px;height:46px;background:rgba(255,255,255,.16);overflow:hidden}
.scroll-story-hint i::after{
  content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;
  background:var(--gold-2);animation:hint 1.8s ease-in-out infinite
}
@keyframes hint{0%{top:-40%}100%{top:100%}}
.scroll-story-hint.is-hidden{opacity:0}

.scroll-story.is-reduced{height:85vh}
.scroll-story.is-reduced .scroll-story-sticky{position:relative;height:85vh}
.scroll-story.is-reduced .scroll-story-canvas,
.scroll-story.is-reduced .scroll-story-loader,
.scroll-story.is-reduced .scroll-story-hint{display:none}
.scroll-story.is-reduced .scroll-story-fallback{display:block}
.scroll-story.is-reduced .scroll-story-doneness,
.scroll-story.is-reduced .scroll-story-copy--outro{opacity:1}

/* ==========================================================================
   PLACE — expanding panels (desktop) / swipe carousel (phones)
   ========================================================================== */
.place{
  overflow:hidden;
  background:
    radial-gradient(700px 420px at 86% 8%,rgba(93,104,56,.08),transparent 62%),
    radial-gradient(640px 420px at 8% 96%,rgba(93,104,56,.07),transparent 62%),
    var(--bg-2);
}
.place-rail{
  display:flex;gap:12px;
  width:min(1400px,calc(100% - 48px));margin:0 auto;
  height:clamp(440px,64vh,620px);
}
.pp{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;padding:0;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--card);
  color:var(--text);text-align:left;cursor:pointer;
  transition:flex-grow .8s cubic-bezier(.22,.8,.24,1),border-color .4s;
}
.pp.is-active{flex-grow:5;border-color:rgba(93,104,56,.45)}
/* Performance: the photo keeps the size of an OPEN panel the whole time and
   sits on its own layer, so opening/closing a panel only changes its clip —
   nothing is resized, re-filtered or repainted per frame. Dimming is an
   opacity layer, which the compositor animates for free. */
.place-rail{--pp-open:calc((min(1400px,100vw - 48px) - 60px) / 2 + 48px)}
.pp img{
  position:absolute;top:0;left:50%;height:100%;width:var(--pp-open);max-width:none;
  object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);
  transform:translateX(-50%) scale(1.06);will-change:transform;
  transition:transform 1.4s cubic-bezier(.22,.8,.24,1);
}
.pp.is-active img{transform:translateX(-50%) scale(1)}
.pp-shade::before{content:"";position:absolute;inset:0;background:#100d0a;opacity:.4;transition:opacity .6s}
.pp:hover .pp-shade::before{opacity:.28}
.pp.is-active .pp-shade::before{opacity:0}
.pp-shade{
  position:absolute;inset:0;pointer-events:none;
  /* the caption block occupies the bottom ~30% of an open panel, so the
     shade has to be firm across that whole band, not just the last few % */
  background:linear-gradient(180deg,rgba(16,13,10,.38) 0%,rgba(16,13,10,0) 24%,rgba(16,13,10,.1) 50%,
    rgba(16,13,10,.66) 68%,rgba(16,13,10,.9) 84%,rgba(16,13,10,.94) 100%);
}
.pp-title,.pp-text{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.pp-num{position:absolute;top:18px;left:18px;font-family:var(--serif);font-size:13px;letter-spacing:.08em;color:var(--gold-2);text-shadow:0 1px 10px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
/* collapsed panels carry their name vertically, read bottom-to-top */
.pp-vtitle{
  position:absolute;left:50%;bottom:28px;
  writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  font-family:var(--serif);font-style:italic;font-size:21px;white-space:nowrap;
  transition:opacity .35s;
}
.pp.is-active .pp-vtitle{opacity:0}
/* fixed width so the copy never reflows while the panel animates open */
.pp-body{
  position:absolute;left:28px;bottom:28px;width:clamp(240px,30vw,420px);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.pp.is-active .pp-body{
  opacity:1;transform:none;
  transition:opacity .55s .25s,transform .7s .25s cubic-bezier(.22,.8,.24,1);
}
.pp-title{display:block;font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.1}
.pp-text{display:block;margin-top:10px;font-size:15px;line-height:1.55;color:#ddd4c4}
.pp-open{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-bottom:3px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);border-bottom:1px solid rgba(93,104,56,.5);
}
.pp-open svg{width:11px;height:11px}
.pp:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.place-foot{display:none;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.place-count{font-family:var(--serif);font-size:13px;color:var(--muted)}
.place-count b{color:var(--gold-2);font-weight:600}
.place-dots{display:flex;gap:7px}
.place-dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(93,104,56,.32);transition:width .3s,background .3s}
.place-dots i.on{width:20px;background:var(--gold-2)}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{overflow:hidden}
.marquee-rows{
  width:100vw;margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  display:flex;flex-direction:column;gap:18px
}
.grow{overflow:hidden}
.gtrack{display:flex;gap:18px;width:max-content;animation:gscroll var(--dur,40s) linear infinite}
.grow[data-dir="rtl"] .gtrack{animation-direction:reverse}
@keyframes gscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gfig{
  position:relative;flex:0 0 auto;width:400px;height:260px;margin:0;
  border-radius:12px;overflow:hidden;cursor:pointer;background:var(--card)
}
.gfig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gfig::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))
}
.gfig:hover img{transform:scale(1.06)}
.gfig:hover::after{opacity:1}

.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;background:rgba(16,13,10,.94);padding:24px
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:84vh;border-radius:10px;object-fit:contain}
.lb-btn{
  position:absolute;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:rgba(30,25,19,.8);color:var(--text);
  display:grid;place-items:center;font-size:20px;transition:border-color .2s,color .2s
}
.lb-btn:hover{border-color:var(--gold);color:var(--gold-2)}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.reviews{
  background:
    radial-gradient(620px 420px at 8% 12%,rgba(93,104,56,.09),transparent 60%),
    radial-gradient(620px 420px at 92% 88%,rgba(93,104,56,.08),transparent 60%),
    var(--bg-2);
  position:relative;overflow:hidden
}
.reviews::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(28,23,18,.08) 1px,transparent 1px);
  background-size:5px 5px
}
.reviews>.container{position:relative;z-index:1}
.rsummary{
  width:min(750px,100%);margin:0 auto 52px;display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(93,104,56,.25);border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow)
}
.rsummary>div{padding:26px 18px;text-align:center;border-left:1px solid var(--line)}
.rsummary>div:first-child{border-left:0}
.rsummary b{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--serif);font-size:30px;font-weight:600;color:var(--text);line-height:1
}
.rsummary b i{color:var(--gold);font-style:normal}
.rsummary img{width:22px;height:22px}
.rsummary span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.17em;
  color:var(--muted);margin-top:10px
}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;transition:transform .3s,border-color .3s
}
.rcard:hover{transform:translateY(-4px);border-color:rgba(93,104,56,.45)}
.rhead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.ravatar{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--serif);font-size:19px;font-weight:600;color:#1b1409;background:#a8946a
}
.rcard:nth-child(3n+2) .ravatar{background:#9d7f5e}
.rcard:nth-child(3n) .ravatar{background:#8d8a68}
.rwho{min-width:0}
.rwho b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwho span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rg{position:absolute;top:22px;right:22px;width:20px;height:20px}
.rstars{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.rstars em{font-size:11px;color:var(--muted);font-style:normal;letter-spacing:.06em}
.rquote{font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--text)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ccard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px
}
.ccard h3{font-size:22px;margin-bottom:22px}
.crow{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.crow:last-of-type{border-bottom:0}
.crow>i{font-style:normal;font-size:17px;color:var(--gold);flex:0 0 22px;line-height:1.4}
.crow span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.crow b{display:block;font-weight:500;margin-top:5px}
.crow b a{text-decoration:none;border-bottom:1px solid rgba(93,104,56,.5)}
.crow b a:hover{color:var(--gold-2)}
.crow em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:5px}
.chours{display:grid;grid-template-columns:1fr auto;gap:5px 16px;margin-top:6px;font-size:14px}
.chours dt{color:var(--muted)}
.chours dd{margin:0;font-weight:500;text-align:right}
.chours .closed{color:var(--ember)}
.cbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  font-size:13px;padding:9px 15px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line);color:var(--muted)
}

/* ==========================================================================
   LOCATION
   ========================================================================== */
.mapframe{
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;height:420px;background:var(--card)
}
.mapframe iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) contrast(1.05)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--sage);border-top:1px solid var(--sage-2);padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.fgrid h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);
  margin:0 0 16px;font-family:var(--sans);font-weight:500
}
.fgrid p,.fgrid li{color:var(--muted);font-size:14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fgrid a{text-decoration:none;transition:color .2s}
.fgrid a:hover{color:var(--gold-2)}
.fbrand b{font-family:var(--serif);font-size:22px;display:block;color:var(--text)}
.fbrand span{font-size:9px;text-transform:uppercase;letter-spacing:.26em;color:var(--gold);display:block;margin-top:6px}
.fbrand p{margin-top:16px;max-width:42ch}
.fine{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  text-align:center;font-size:12px;color:var(--muted);line-height:1.9
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){ .rgrid{grid-template-columns:repeat(2,1fr)} }

/* The full nav needs ~1080px in the longest language (German) once all eight
   links are in. Below that it would wrap onto two lines, so the drawer takes
   over here rather than at the 900px layout breakpoint. */
/* four links fit beside the brand and language pills down to ~860px */
@media (max-width:860px){
  /* the drawer is position:fixed, so it no longer occupies a grid track —
     fall back to a two-item flex row */
  .header-inner{display:flex;gap:16px}
  .header-right{margin-left:auto}
  .nav{
    position:fixed;top:var(--bar);right:0;bottom:0;width:min(320px,84vw);
    flex-direction:column;gap:0;margin:0;padding:22px;z-index:99;
    background:rgba(248,246,241,.98);
    border-left:1px solid var(--line);transform:translateX(105%);
    transition:transform .34s cubic-bezier(.2,.7,.3,1)
  }
  .nav.is-open{transform:translateX(0)}
  .nav a{padding:15px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .burger{display:flex}
}

@media (max-width:900px){
  /* The hero copy spans almost the full width on a phone, so a LEFT-weighted
     scrim leaves the end of every line unprotected — over daylight footage
     that put `.thin` at 1.05:1. Narrow viewports get a vertical scrim instead,
     which is the only shape that covers full-width text. */
  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(241,237,228,.72) 0%,
        rgba(241,237,228,.84) 16%,
        rgba(241,237,228,.86) 68%,
        rgba(241,237,228,.94) 88%,
        var(--bg) 100%);
  }
  .section{padding:72px 0}

  /* The backdrop is a landscape frame: olive branch top-left, farmhouse
     engraving bottom-left, herbs on the right. `cover` on a tall narrow phone
     section scales it to fill the HEIGHT, so only the empty middle ~23% of the
     width is on screen and every drawing is cropped away.
     Instead: two bands of the same image, each ~1.9x viewport width, one
     anchored to the art's top-left (the olive branch) and one to its
     bottom-left (the farmhouse). Extra vertical padding gives them room to sit
     clear of the copy. */
  #about{
    padding:150px 0;
    background-image:
      url("../assets/img/about-backdrop-olive.webp?v=b94491dc"),
      url("../assets/img/about-backdrop-olive.webp?v=b94491dc");
    background-size:190% auto, 190% auto;
    background-position:left top, left bottom;
    background-repeat:no-repeat, no-repeat;
  }
  /* vertical scrim: light where the drawings are, firm across the copy band */
  #about::before{
    background:linear-gradient(180deg,
      rgba(248,246,241,.1) 0%,
      rgba(248,246,241,.62) 16%,
      rgba(248,246,241,.66) 80%,
      rgba(248,246,241,.1) 100%);
  }

  .place-rail{
    width:100%;height:auto;gap:14px;padding:4px 24px 8px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;
    overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .place-rail::-webkit-scrollbar{display:none}
  .pp,.pp.is-active{flex:0 0 82%;aspect-ratio:4/5;scroll-snap-align:center}
  .pp img,.pp:hover img,.pp.is-active img{left:0;width:100%;transform:none;will-change:auto}
  .pp-shade::before{display:none}
  .pp-vtitle{display:none}
  .pp-body,.pp.is-active .pp-body{opacity:1;transform:none;left:20px;right:20px;bottom:22px;width:auto;transition:none}
  .pp-text{font-size:14px}
  .pp-shade{background:linear-gradient(180deg,rgba(16,13,10,.32) 0%,rgba(16,13,10,0) 20%,rgba(16,13,10,.16) 36%,
    rgba(16,13,10,.72) 52%,rgba(16,13,10,.9) 66%,rgba(16,13,10,.95) 100%)}
  .place-foot{display:flex}

  .header-right{margin-left:auto}
  .lang a{padding:14px 12px}   /* 44px+ touch height */
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .about-img{max-width:420px}
  .menu-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:768px){
  .scroll-story{height:360vh}
  .scroll-story-copy--intro{top:17%;transform:none;max-width:none;right:24px}
  .scroll-story-copy--outro{bottom:11%;max-width:none;right:24px}
  .scroll-story-doneness{
    top:14%;transform:none;right:24px;left:auto;
    font-size:13px;padding-left:16px
  }
  .scroll-story-doneness .sd-bar{width:34px;height:7px}
  .scroll-story-doneness h4{margin-bottom:12px}
  .sd-row{padding:5px 0}
  .scroll-story-shade{
    background:
      linear-gradient(180deg,rgba(16,13,10,.82) 0%,rgba(16,13,10,.3) 34%,rgba(16,13,10,.35) 62%,rgba(16,13,10,.88) 100%),
      linear-gradient(90deg,rgba(16,13,10,.4),rgba(16,13,10,0) 60%);
  }
}

@media (max-width:720px){ .rgrid{grid-template-columns:1fr} }

@media (max-width:600px){
  body{font-size:16px}
  /* Keep the three stats on ONE row on a phone. flex-wrap:wrap let the third
     drop to a second line; nowrap plus equal flex basis keeps them in a row and
     lets a long label wrap inside its own column instead. */
  .about-stats{flex-wrap:nowrap;gap:12px;justify-content:space-between}
  .about-stats>div{flex:1 1 0;min-width:0}
  .about-stats b{font-size:23px}
  .about-stats span{font-size:9px;letter-spacing:.07em;margin-top:6px}
  .hero-marquee{height:46px}
  .hero-marquee span{font-size:13px}
  .hero-lede{font-size:17px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero-cta .btn,.hero-phone{width:100%;text-align:center}
  .hero-phone{padding:12px 0;border-bottom:0;border:1px solid var(--line);border-radius:999px}
  .hero-facts{font-size:12px;gap:10px 0}
  .hero-facts .fact-price{display:none}
  .gfig{width:280px;height:190px}
  .mi{grid-template-columns:16px 40px 1fr;min-height:96px;gap:0 11px}
  .mi-ico{width:38px;height:38px}
  .mi-ico svg{width:24px;height:24px}
  .mi-name{font-size:17px}
  .rsummary{grid-template-columns:1fr}
  .ccard{padding:26px}
}

/* Very small phones (320px): brand + four language pills + burger need 425px
   of bar in a 320px viewport, which pushed the menu button off-screen. Drop
   the brand tagline, tighten the gutters and narrow the pills — vertical
   padding is kept so the language links stay a comfortable touch height. */
@media (max-width:420px){
  .container{padding:0 16px}
  .header-inner{gap:10px}
  .header-right{gap:8px}
  .brand b{font-size:17px}
  .brand span{display:none}
  .lang{gap:2px}
  .lang a{padding:14px 7px;font-size:10px;letter-spacing:.06em}  /* stays 44px+ tall */
  .hero-facts{font-size:11px}
}

@media (max-width:520px){
  .rsummary>div{
    display:flex;align-items:center;justify-content:space-between;
    text-align:left;border-left:0;border-top:1px solid var(--line);padding:16px 20px
  }
  .rsummary>div:first-child{border-top:0}
  .rsummary b{font-size:24px}
  .rsummary span{margin-top:0;order:-1}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .reveal{opacity:1;transform:none}
  .hero-marquee-track{animation:none}
  .hero-marquee-group[data-clone]{display:none}
  .gtrack{animation:none}
}

/* ==========================================================================
   MODEL — the estate as a 3D maquette on a drafting sheet
   (deliberately light: a paper sheet, ink rules, one orange accent)
   ========================================================================== */
.maq{
  --paper:#f1ede4; --sheet:#f8f6f1; --ink:#1c1712; --ink-2:#5a5046;
  --rule:rgba(28,23,18,.055); --guide:rgba(28,23,18,.24); --tag:#5d6838; /* olive: 6:1 under white text */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:relative;overflow:hidden;padding:120px 0;color:var(--ink);
  background:
    linear-gradient(var(--rule) 1px,transparent 1px) 50% 0/44px 44px,
    linear-gradient(90deg,var(--rule) 1px,transparent 1px) 50% 0/44px 44px,
    var(--paper);
}
.maq :focus-visible{outline-color:var(--tag)}
.maq-frame{position:relative;width:min(1320px,calc(100% - 120px));margin:0 auto}
/* drafting guides: the sheet's edges carried out to the page edges */
.maq-frame::before,.maq-frame::after{
  content:"";position:absolute;left:-100vw;right:-100vw;height:0;
  border-top:1px dashed var(--guide);pointer-events:none
}
.maq-frame::before{top:0}
.maq-frame::after{bottom:0}
.maq-sheet{position:relative;background:var(--sheet);border:2px solid var(--ink);box-shadow:0 40px 80px -48px rgba(28,23,18,.45)}
.maq-sheet::before,.maq-sheet::after{
  content:"";position:absolute;top:-400px;bottom:-400px;width:0;
  border-left:1px dashed var(--guide);pointer-events:none
}
.maq-sheet::before{left:-2px}
.maq-sheet::after{right:-2px}
.maq-coord{position:absolute;font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.maq-coord--tl,.maq-coord--tr{bottom:calc(100% + 12px)}
.maq-coord--bl,.maq-coord--br{top:calc(100% + 12px)}
.maq-coord--tl,.maq-coord--bl{left:0}
.maq-coord--tr,.maq-coord--br{right:0}

/* top row: brand, the five spots as nav cells, reset in the accent */
.maq-bar{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}
.maq-brand{flex:1;display:flex;align-items:center;gap:12px;min-height:60px;margin:0;padding:0 20px;min-width:0}
.maq-brand .maq-arch{width:26px;height:auto;flex:none;fill:none;stroke:var(--ink);stroke-width:5}
.maq-brand b{font:600 15px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.maq-brand span{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding-left:12px;border-left:1px solid rgba(28,23,18,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maq-spots{display:flex}
.maq-spot,.maq-reset{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  min-width:112px;padding:11px 16px 13px 14px;border-left:1px solid var(--ink);
  text-align:left;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  transition:background .25s,color .25s
}
.maq-spot b{font-weight:500;color:var(--tag);transition:color .25s}
.maq-spot::after,.maq-reset::after{
  content:"";position:absolute;right:6px;bottom:6px;width:6px;height:6px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.45
}
.maq-spot:hover{background:rgba(28,23,18,.06)}
.maq-spot[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.maq-spot[aria-pressed="true"] b{color:#c9d39e}
.maq-reset{min-width:150px;color:var(--tag)}
.maq-reset svg{width:15px;height:15px;align-self:flex-end}
.maq-reset:hover{background:var(--tag);color:#fff}

/* the drawing area */
.maq-stage{
  position:relative;height:clamp(460px,64vh,680px);overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:
    linear-gradient(rgba(28,23,18,.035) 1px,transparent 1px) 50% 50%/22px 22px,
    linear-gradient(90deg,rgba(28,23,18,.035) 1px,transparent 1px) 50% 50%/22px 22px;
}
.maq-stage.is-drag{cursor:grabbing}
.maq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.maq.is-live .maq-canvas{opacity:1}
.maq-x{position:absolute;width:13px;height:13px;pointer-events:none}
.maq-x::before,.maq-x::after{content:"";position:absolute;background:var(--ink);opacity:.55}
.maq-x::before{left:6px;top:0;width:1px;height:13px}
.maq-x::after{top:6px;left:0;height:1px;width:13px}
.maq-x--tl{top:14px;left:14px}.maq-x--tr{top:14px;right:14px}
.maq-x--bl{bottom:14px;left:14px}.maq-x--br{bottom:14px;right:14px}
.maq-note{position:absolute;top:16px;right:40px;margin:0;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
.maq-hint{position:absolute;left:40px;bottom:17px;margin:0;display:flex;align-items:center;gap:9px;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
.maq-hint svg{width:22px;height:10px}
.maq-hint-zoom{padding-left:12px;border-left:1px solid rgba(28,23,18,.25)}

/* loading state: the arch elevation drawing itself */
.maq-load{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px;pointer-events:none;transition:opacity .6s}
.maq.is-live .maq-load{opacity:0}
.maq-load .maq-arch{width:132px;height:auto;fill:none;stroke:var(--ink);stroke-width:1.1}
.maq-load .maq-arch path{stroke-dasharray:1;stroke-dashoffset:1;animation:maqDraw 2.2s ease-in-out infinite alternate}
.maq-load span{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
@keyframes maqDraw{to{stroke-dashoffset:0}}
.maq-nogl{display:none;position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);margin:0;text-align:center;font:500 12px/1.6 var(--mono);color:var(--ink-2)}
.maq.no-gl .maq-nogl{display:block}
.maq.no-gl .maq-load{display:none}

/* callouts pinned to points in the model */
.maq-pins{position:absolute;inset:0;pointer-events:none}
.maq-pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;opacity:0;pointer-events:none;transition:opacity .45s}
.maq.is-ready .maq-pin.is-on{opacity:1;pointer-events:auto}
.maq.has-spot .maq-pin.is-on:not(.is-active){opacity:.55}
.maq-pin-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:var(--sheet);border:1.5px solid var(--tag);transition:background .3s}
.maq-pin-tag{
  position:absolute;left:var(--tx,-1px);bottom:var(--lift,34px);display:block;min-width:132px;padding:7px 26px 8px 10px;
  background:var(--tag);color:#fff;text-align:left;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(28,23,18,.7);transition:background .3s
}
.maq-pin-tag::before{content:"";position:absolute;left:calc(-1px - var(--tx,-1px));top:100%;height:calc(var(--lift,34px) - 5px);border-left:1px solid var(--tag);transition:border-color .3s}
/* while one spot is open the others shrink back to their dots */
.maq.has-spot .maq-pin:not(.is-active) .maq-pin-tag{display:none}
.maq-pin-tag::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border:1px solid rgba(255,255,255,.85)}
.maq-pin-tag small{display:block;font:500 9.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.maq-pin-tag b{display:block;margin-top:3px;font:500 11.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.maq-pin.is-active .maq-pin-tag{background:var(--ink)}
.maq-pin.is-active .maq-pin-tag::before{border-color:var(--ink)}
.maq-pin.is-active .maq-pin-dot{background:var(--tag)}

/* bottom row: headline, description + ticker, call to action */
.maq-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;border-top:1px solid var(--ink)}
.maq-title{margin:0;padding:28px 28px 26px;font:600 clamp(30px,3.8vw,56px)/.94 var(--sans);letter-spacing:-.025em;text-transform:uppercase;color:var(--ink)}
.maq-desc{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--ink)}
.maq-copy{flex:1;padding:20px 22px 18px;font-size:15px;line-height:1.55;color:var(--ink);min-height:118px}
.maq-copy p{margin:0}
.maq-copy .maq-copy-h{margin-bottom:6px;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.maq-copy .maq-copy-h b{color:var(--tag);font-weight:500;margin-right:6px}
.maq-ticker{overflow:hidden;border-top:1px solid rgba(28,23,18,.3);padding:10px 0;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.maq-ticker-track{display:inline-flex;animation:maqTick 40s linear infinite}
.maq-ticker span{display:inline-flex;align-items:center;gap:14px;padding:0 0 0 14px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.maq-ticker span::after{content:"";width:7px;height:7px;border:1px solid currentColor;border-radius:50%}
@keyframes maqTick{to{transform:translateX(-50%)}}
.maq-cta{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-width:180px;padding:20px 20px 16px;
  border-left:1px solid var(--ink);font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tag);text-decoration:none;transition:background .25s,color .25s
}
.maq-cta svg{width:16px;height:16px;align-self:flex-end}
.maq-cta:hover{background:var(--tag);color:#fff}

@media (max-width:1080px){
  .maq-brand span{display:none}
  .maq-spot{min-width:96px}
  .maq-reset{min-width:120px}
}
@media (max-width:900px){
  .maq{padding:76px 0}
  .maq-frame{width:calc(100% - 32px)}
  .maq-coord{display:none}
  .maq-bar{flex-wrap:wrap}
  .maq-brand{flex:1 1 100%;min-height:52px;border-bottom:1px solid var(--ink)}
  .maq-brand span{display:block}
  .maq-spots{flex:1 1 180px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .maq-spots::-webkit-scrollbar{display:none}
  .maq-spot{flex:0 0 auto;min-width:92px}
  .maq-spot:first-child{border-left:0}
  .maq-reset{flex:0 0 auto;min-width:0;padding-right:20px}
  .maq-stage{height:clamp(360px,104vw,500px)}
  .maq-note{right:16px;top:14px}
  .maq-x--tr,.maq-x--tl{display:none}
  .maq-hint{left:16px}
  .maq-foot{grid-template-columns:1fr}
  .maq-title{padding:22px 18px 20px}
  .maq-desc,.maq-cta{border-left:0;border-top:1px solid var(--ink)}
  .maq-copy{padding:18px 18px 16px;min-height:0}
  .maq-cta{flex-direction:row;align-items:center;min-height:56px;padding:0 18px}
  .maq-cta svg{align-self:center}
  .maq-pin-tag{min-width:0;padding-right:22px}
}
@media (max-width:600px){
  /* phones: inactive callouts collapse to their number; tap one to open it */
  .maq-pin:not(.is-active) .maq-pin-tag{min-width:0;padding:5px 7px 6px}
  .maq-pin:not(.is-active) .maq-pin-tag b,
  .maq-pin:not(.is-active) .maq-pin-short,
  .maq-pin:not(.is-active) .maq-pin-tag::after{display:none}
  .maq-pin:not(.is-active) .maq-pin-tag small{font-size:10.5px;opacity:1}
  .maq-hint{right:16px;flex-wrap:wrap;row-gap:6px;line-height:1.3}
}
@media (prefers-reduced-motion:reduce){
  .maq-ticker-track,.maq-load .maq-arch path{animation:none}
  .maq-load .maq-arch path{stroke-dashoffset:0}
}

/* ==========================================================================
   TYPOGRAPHY — the 3D section's system, used site-wide:
   Rubik 600 in tight capitals for headlines, Rubik for reading text, and
   IBM Plex Mono in spaced capitals for every small label, link and button.
   (--serif is a legacy token name; it now points at Rubik.)
   ========================================================================== */
:root{
  --serif:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html{font-synthesis:none}
body{font-size:16px;line-height:1.62}
h1,h2,h3{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:-.025em;line-height:.95}
h1{font-size:clamp(46px,7vw,92px)}
h2{font-size:clamp(30px,3.9vw,54px)}
h3{letter-spacing:-.015em;line-height:1.05}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.16em}
.btn,.btn--solid{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.nav a{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.lang a,.lang a.active{font-family:var(--mono);font-size:11px;font-weight:500}
.brand b{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em}
.hero-tagline{font-family:var(--mono);font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.hero .thin{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;margin-top:18px}
.hero-lede{font-size:18px}
.hero-phone{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.08em}
.hero-marquee span{font-family:var(--mono);font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.about-stats b{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.about-stats span,.rsummary span,.crow span,.fgrid h4{font-family:var(--mono);font-weight:500}
.menu-tab{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em}
.menu-cat-kicker{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em}
.menu-cat h3{font-style:normal;font-size:clamp(30px,4vw,48px)}
.mi-num{font-family:var(--mono);font-size:11px}
.mi-name{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.005em}
.mi-desc{font-family:var(--sans);font-style:normal;font-size:14px}
.pp-num,.place-count{font-family:var(--mono)}
.pp-vtitle{font-family:var(--sans);font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:18px}
.pp-title{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(26px,2.6vw,38px)}
.pp-open{font-family:var(--mono);font-weight:500;font-size:11px}
.rquote{font-family:var(--sans);font-style:normal;font-size:15px}
.ccard h3{font-size:20px}
.fbrand b{font-family:var(--sans);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.06em}
.maq-copy{font-size:15px}
/* the label rule above also caught the animated figures inside the <b> */
.rsummary b span{display:inline;margin:0;font:inherit;letter-spacing:.02em;text-transform:none;color:inherit}
.rsummary b{font-weight:600;font-size:30px;letter-spacing:-.02em}

/* ==========================================================================
   DARK ISLANDS on the light page — photo and film surfaces keep light type,
   so they re-declare the old dark-theme tokens locally.
   ========================================================================== */
.scroll-story,.pp,.lightbox{
  --text:#f4eee3; --muted:#cbbfa9; --gold:#b7c483; --gold-2:#cfd9a0; --ember:#b7c483; --line:#4a3d2a;
}
.scroll-story{background:#100d0a;color:var(--text)}
.pp{color:var(--text);border-color:var(--sage-2)}
.pp.is-active{border-color:rgba(93,104,56,.55)}
.site-footer h4{color:var(--gold-2)}
.site-footer .fine{border-top-color:var(--sage-2)}
.fgrid a:hover{color:var(--gold-2)}

/* ==========================================================================
   STONE — line-drawn limestone after the entrance (see _data/make-stone.py)
   ========================================================================== */
/* the about photo becomes the arched doorway, framed by voussoirs and quoins.
   Frame geometry: photo 100 x 125, frame 120 x 145 starting 15 above it. */
.about-figure{position:relative;margin:13% 9% 5%}
.about-figure .about-img{border-radius:50% 50% 0 0 / 40% 40% 0 0}
.about-arch{position:absolute;top:-12%;left:-10%;width:120%;height:116%;max-width:none;pointer-events:none}
/* the top of a stone wall, laid along the footer */
.stone-band{height:74px;margin-bottom:-1px;background:url("../assets/img/stone-band.svg?v=d58d0d60") left bottom/auto 74px repeat-x}
.stone-band+.site-footer{border-top:0}
@media (max-width:600px){ .stone-band{height:52px;background-size:auto 52px} }

/* ==========================================================================
   GOLD — gilt frames on the OUTSIDE of photographs and cards.
   A 3px band of polished gold (the gradient carries the light and dark bands
   of real gilding), a dark lip where gold meets photo, and a fine second gold
   line floating just outside — a picture frame, not a sticker.
   Gradient borders are background layers, so they cost nothing to animate.
   ========================================================================== */
:root{
  --gilt:#b8924a;
  --gilt-grad:linear-gradient(135deg,#8c6a28 0%,#d8b660 16%,#f8e9ac 30%,#b68e3c 47%,#f2db93 63%,#9a742e 80%,#e3c579 100%);
  --gilt-line:rgba(176,138,62,.75);
}
/* photographs */
.gfig,.about-figure .about-img{padding:4px;background:var(--gilt-grad)}
.gfig img{border-radius:9px;box-shadow:0 0 0 1px rgba(80,56,16,.5)}
.gfig{outline:1px solid var(--gilt-line);outline-offset:5px;box-shadow:0 18px 40px -22px rgba(60,44,24,.55)}
.about-figure .about-img img{border-radius:50% 50% 0 0 / 40% 40% 0 0;box-shadow:0 0 0 1px rgba(80,56,16,.5)}
.pp{
  border:3px solid transparent;
  background:linear-gradient(#1e1913,#1e1913) padding-box,var(--gilt-grad) border-box;
  outline:1px solid var(--gilt-line);outline-offset:4px;
}
.pp.is-active{border-color:transparent}
.pp img{box-shadow:0 0 0 1px rgba(80,56,16,.5)}
/* cards: gilt edge with the hairline outside */
.ccard,.rcard,.rsummary,.menu-foot,.mapframe{
  border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,var(--gilt-grad) border-box;
  outline:1px solid var(--gilt-line);outline-offset:5px;
  box-shadow:var(--shadow);
}
.rcard:hover{border-color:transparent;outline-color:#b08a3e;box-shadow:0 30px 60px -28px rgba(60,44,24,.42)}
.mapframe{padding:0}
.mapframe iframe{border-radius:calc(var(--radius) - 2px)}
/* the dish icons and ornaments pick up the same gilt */
.mi-ico{border-color:rgba(184,146,74,.6);color:var(--gold)}
.ornament s{background:linear-gradient(90deg,transparent,var(--gilt))}
.ornament s+s{background:linear-gradient(90deg,var(--gilt),transparent)}
.ornament em{color:var(--gilt)}

/* the entrance itself, drawn across the contact section: the heading sits in
   the arch like a doorway, the cards stand in front of the wall */
#contact{overflow:hidden;padding-top:190px}
#contact::before{
  content:"";position:absolute;left:50%;top:6px;width:1200px;height:600px;margin-left:-600px;
  background:url("../assets/img/stone-facade.svg?v=2416b910") center top/100% auto no-repeat;
  opacity:.6;pointer-events:none;z-index:0
}
#contact>.container{position:relative;z-index:1}
#contact .menu-head{margin-bottom:60px}
@media (max-width:600px){
  #contact{padding-top:112px}
  #contact::before{width:900px;height:450px;margin-left:-450px;top:0}
  #contact .menu-head{margin-bottom:46px}
}

/* ==========================================================================
   HERO — the steaming pan, full-bleed, nothing laid over it. The copy sits
   on the bare linen beside the pan (desktop) or above and below it (phones);
   measured: ink on the linen is 4.4–8.2:1 there. A hand-painted headline
   after the sign on the hedge ("AGROTURIZAM / SELO MEKIŠI").
   ========================================================================== */
.hero-overlay{display:none}
.hero-video{max-width:none;transform:none;-webkit-mask-image:none;mask-image:none}
.hero h1{
  font-family:"Patrick Hand SC","Rubik",sans-serif;font-weight:400;
  font-size:clamp(56px,6.6vw,108px);letter-spacing:.035em;line-height:.88;
  -webkit-text-stroke:.022em currentColor;   /* the weight of brush paint */
}
.hero h1 .thin{font-family:var(--mono);-webkit-text-stroke:0;letter-spacing:.18em;line-height:1.4}
.hero-tagline,.hero .thin,.hero-lede,.hero-facts,.hero-facts b,.hero-phone{color:var(--text)}
.hero-content{text-shadow:0 0 16px rgba(214,206,193,.5)}
.hero-facts>div{border-left-color:rgba(28,23,18,.3)}
.hero-phone{border-bottom-color:var(--text)}
.hero-marquee{background:#5d6838;border-top:0}   /* the olive accent, not ink */
.hero-marquee span{color:#f4efe3}
.hero-marquee i{color:#cfd9a0}

@media (min-width:901px){
  /* Anchoring the footage to the left pushes the pan as far right as the
     crop allows; the copy column ends a safe gap before the pan's rim.
     Pan rim starts at 29% of the video's rendered width, and that width is
     max(100vw, 177.8vh) under object-fit:cover. */
  /* object-position 30% places the pan a touch left of where the crop would
     push it; its rim then starts at 30vw - 1% of the rendered video width
     (rendered width = max(100vw, 177.8vh) under cover). */
  /* Copy left, dish right with a wide gap between them. The video box is
     slid right so the pan's rim (71% of the rendered width, which is
     max(100vw, 177.8vh) under cover) ends at 95vw; the strip it uncovers on
     the left is linen cut from the same footage, and the video's left edge
     fades into it. */
  .hero{
    --V:max(100vw, 177.8vh);--hx:clamp(32px,7vw,140px);
    --col:calc(95vw - .42 * var(--V) - 96px - var(--hx));
    background:#9b9488 url("../assets/img/hero-linen.jpg?v=9207fda7") left top/auto 100% repeat-x;
  }
  .hero-video{
    left:calc(95vw - .71 * var(--V));width:100vw;object-position:0% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  }
  /* the copy sits centred in the free room between the edge and the pan */
  .hero .container{max-width:none;padding:0 0 0 calc(var(--hx) + max(0px, (var(--col) - 640px) / 2));display:block}
  .hero-content{margin-top:-2vh;width:var(--col);max-width:min(var(--col), 640px)}
  /* one line, always: the headline is sized to the column it lives in */
  .hero h1{white-space:nowrap;font-size:min(112px, calc(min(var(--col), 640px) / 5.25))}
  .hero h1 .thin{white-space:normal}
  .hero-lede{font-size:17px}
}
@media (max-width:900px){
  /* Phones: headline in the linen above the pan, actions below it. */
  .hero{min-height:100vh;min-height:100svh;align-items:stretch}
  .hero .container{display:flex}
  .hero-content{
    display:flex;flex-direction:column;width:100%;margin:0;
    padding:calc(var(--bar) + 14px) 0 22px;
  }
  .hero h1{font-size:clamp(46px,14vw,64px)}
  .hero .thin{font-size:11px;margin-top:12px}
  .hero-lede,.hero-facts{display:none}
  .hero-cta{margin-top:auto}
  .hero-phone{background:var(--bg);border:0;text-shadow:none}
  .hero-marquee{display:none}
}
@media (min-width:901px){
  /* the copy column is narrow, so the facts stack instead of wrapping */
  .hero-facts{flex-direction:column;align-items:flex-start;gap:6px;margin-top:30px}
  .hero-facts>div,.hero-facts>div:first-child{padding:0;border-left:0}
}
@media (max-width:900px) and (max-height:760px){ .hero .thin{display:none} }

/* gallery: every photo whole, at its own shape — rows share a height only */
.gfig{width:auto;height:clamp(230px,26vw,330px)}
.gfig img{width:auto;height:100%;object-fit:contain}
.gfig:hover img{transform:none}
@media (max-width:600px){ .gfig{width:auto;height:210px} }

/* hand-drawn corners: fieldstones, olive sprig, gilt line (_data/make-drawings.py) */
.doodle{position:absolute;pointer-events:none;z-index:0;height:auto;max-width:none}
.section>.container,.section>.marquee-rows{position:relative;z-index:1}
.doodle--stones-bl{left:0;bottom:0;width:clamp(300px,34vw,560px)}
.doodle--stones-br{right:0;bottom:0;width:clamp(300px,34vw,560px);transform:scaleX(-1)}
.doodle--sprig-tr{right:clamp(8px,4vw,70px);top:34px;width:clamp(150px,17vw,250px)}
.doodle--sprig-tl{left:clamp(8px,4vw,70px);top:30px;width:clamp(150px,17vw,250px);transform:scaleX(-1)}
@media (max-width:900px){
  .doodle--stones-bl,.doodle--stones-br{width:240px;opacity:.75}
  .doodle--sprig-tr,.doodle--sprig-tl{width:110px;top:14px}
}
/* the stone corners get their own empty band below the content */
.doodle--stones-bl,.doodle--stones-br{width:clamp(260px,27vw,430px)}
/* padding = the drawing's own height (640:420), so the heap begins exactly
   at the bottom line of the cards above it */
.menu-head{max-width:880px}
@media (max-width:900px){
  .doodle--stones-bl,.doodle--stones-br{width:220px}
}
.menu-cat h3{font-weight:600}

/* ==========================================================================
   HEADINGS — the hero's hand-painted lettering (after the hedge sign) on
   every heading of the page; labels and body stay Plex Mono + Rubik.
   ========================================================================== */
:root{--hand:"Patrick Hand SC","Rubik",sans-serif}
h2,h3,.maq-title,.pp-title,.pp-vtitle{
  font-family:var(--hand);font-weight:400;font-style:normal;text-transform:uppercase;
  letter-spacing:.03em;line-height:.92;-webkit-text-stroke:.022em currentColor
}
h2{font-size:clamp(40px,5.4vw,74px)}
.menu-cat h3{font-weight:400;font-size:clamp(34px,4.4vw,58px)}
.ccard h3{font-size:28px}
.scroll-story-copy--outro h3{font-size:clamp(28px,3.4vw,42px)}
.maq-title{font-size:clamp(40px,5vw,76px);line-height:.9}
.pp-title{font-size:clamp(32px,3.2vw,48px)}
.pp-vtitle{font-size:24px;letter-spacing:.06em}
/* a light, even shade over the whole hero — deepens the linen and the iron
   without washing anything; ink copy still measures above 4.5:1 on it */
.hero .hero-overlay{display:none}
/* brighter, warmer footage: the linen reads as cream rather than grey.
   The linen strip image is graded identically, so the blend stays seamless. */
/* a tone curve (inline SVG #hero-grade), not a brightness multiply: it lifts
   the linen and stretches the linen-to-steam range so the steam reads, but
   eases off at the very top so the pasta's highlights never clip to white */
.hero-video{filter:url(#hero-grade)}
@media (max-width:900px){
  /* centred, a touch smaller, and the pan nudged down for air under the
     headline; the strip it uncovers at the top is the same linen */
  .hero{background:#9b9488 url("../assets/img/hero-linen.jpg?v=9207fda7") center top/auto 100% repeat-x}
  .hero-video{
    transform:translateY(5svh);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%);
  }
  .hero-content{text-align:center;align-items:center}
  .hero-tagline{font-size:11.5px}
  .hero h1{font-size:clamp(40px,12vw,56px)}
  .hero .thin{font-size:10px;letter-spacing:.16em}
  .hero-cta{width:100%;gap:10px}
}
@media (max-width:900px) and (max-height:760px){
  .hero-video{transform:translateY(1.5svh)}
  .hero-cta .btn,.hero-phone{padding-top:11px;padding-bottom:11px}
}
@media (max-width:900px){
  /* phones: all five spots in one even row, nothing scrolls or gets cut;
     "full view" takes its own row underneath */
  .maq-spots{flex:1 1 100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .maq-spot{min-width:0;padding:10px 6px 12px 9px;gap:9px;font-size:10px;letter-spacing:.04em}
  .maq-spot span{white-space:normal;overflow-wrap:normal;line-height:1.25}
  .maq-reset{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;
    min-height:46px;padding:0 16px;border-left:0;border-top:1px solid var(--ink)}
  .maq-reset svg{align-self:center}
}
@media (max-width:360px){ .maq-spot{font-size:9px;letter-spacing:0;padding-left:6px;padding-right:4px} }

/* ==========================================================================
   MENU — redesigned after the client's layout: an olive-ink landscape and
   olive branches drawn round the edges, sprig ornaments, a painted brush
   stroke behind the active tab, a fine olive rule, a framed note.
   Content is untouched; this is layout and decoration only.
   ========================================================================== */
#menu{
  background:
    url("../assets/img/menu-art-bottom.webp?v=77d60bf8") center bottom/max(100%, 1180px) auto no-repeat,
    var(--bg-2);
}
#menu::before,#menu::after{display:none}
#menu .menu-head{margin-bottom:38px}
#menu .menu-head .eyebrow,#menu .menu-cat-kicker{display:inline-flex;align-items:center;gap:12px}
#menu .menu-head .eyebrow::before,#menu .menu-head .eyebrow::after,
#menu .menu-cat-kicker::before,#menu .menu-cat-kicker::after{
  content:"";width:38px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cg fill='%238b9566' stroke='%235d6838' stroke-width='.8'%3E%3Cpath d='M2 9 Q22 6 42 8' fill='none' stroke-width='1.1'/%3E%3Cpath d='M10 8 Q12 2 18 1 Q15 6 10 8Z'/%3E%3Cpath d='M16 7.5 Q19 13 25 14 Q21 9 16 7.5Z'/%3E%3Cpath d='M23 7 Q26 1 32 1 Q28 6 23 7Z'/%3E%3Cpath d='M30 7.5 Q34 12 40 12 Q35 8 30 7.5Z'/%3E%3Cpath d='M36 8 Q40 5 43 7 Q39 9 36 8Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat
}
#menu .menu-head .eyebrow::before,#menu .menu-cat-kicker::before{transform:scaleX(-1)}
#menu .menu-head h2::after{
  content:"";display:block;width:min(240px,50%);height:22px;margin:14px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3Cg fill='%238b9566' stroke='%235d6838' stroke-width='.8'%3E%3Cpath d='M6 20 Q16 12 30 3' fill='none' stroke-width='1.1'/%3E%3Cpath d='M12 15 Q8 7 12 2 Q15 9 12 15Z'/%3E%3Cpath d='M17 12 Q24 13 28 18 Q21 18 17 12Z'/%3E%3Cpath d='M21 9 Q19 2 24 0 Q25 6 21 9Z'/%3E%3Cpath d='M25 6 Q31 6 35 9 Q29 10 25 6Z'/%3E%3C/g%3E%3C/svg%3E") center/26px 16px no-repeat,
    linear-gradient(90deg,transparent,rgba(93,104,56,.55) 30%,transparent 46%,transparent 54%,rgba(93,104,56,.55) 70%,transparent) center/100% 1px no-repeat;
  -webkit-text-stroke:0
}
/* tabs: open row, painted stroke behind the active one, olive rule beneath */
#menu .menu-tabs{
  background:none;border-top:0;border-bottom:1px solid rgba(93,104,56,.45);
  gap:clamp(4px,1.4vw,22px);padding:6px 0 10px;flex-wrap:nowrap
}
#menu .menu-tab{height:44px;padding:0 18px;color:var(--text);z-index:0}
#menu .menu-tab::after{display:none}
#menu .menu-tab[aria-selected="true"]{color:#fff}
#menu .menu-tab::before{
  content:"";position:absolute;inset:4px -4px;z-index:-1;opacity:0;transform:scaleX(.6) rotate(-1.5deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 52' preserveAspectRatio='none'%3E%3Cpath fill='%235d6838' d='M6 9 C40 3 90 6 140 4 C165 3 186 5 196 8 C199 18 194 26 198 36 C188 44 150 47 104 46 C70 45 34 49 9 45 C3 38 7 30 2 22 C4 17 3 13 6 9Z'/%3E%3Cpath fill='%235d6838' opacity='.55' d='M0 15 C10 13 14 16 20 14 L19 18 C12 19 6 17 0 19Z M182 40 C190 41 196 39 200 42 L199 45 C192 46 186 44 181 44Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.3,1)
}
#menu .menu-tab[aria-selected="true"]::before{opacity:1;transform:scaleX(1) rotate(-1.5deg)}
/* category header */
#menu .menu-cat{padding:40px 0 26px}
#menu .menu-cat h3{margin-top:10px}
#menu .ornament s{background:linear-gradient(90deg,transparent,rgba(93,104,56,.6))}
#menu .ornament s+s{background:linear-gradient(90deg,rgba(93,104,56,.6),transparent)}
#menu .ornament em{font-size:0;width:30px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3Cg fill='%238b9566' stroke='%235d6838' stroke-width='.8'%3E%3Cpath d='M6 20 Q16 12 30 3' fill='none' stroke-width='1.1'/%3E%3Cpath d='M12 15 Q8 7 12 2 Q15 9 12 15Z'/%3E%3Cpath d='M17 12 Q24 13 28 18 Q21 18 17 12Z'/%3E%3Cpath d='M21 9 Q19 2 24 0 Q25 6 21 9Z'/%3E%3Cpath d='M25 6 Q31 6 35 9 Q29 10 25 6Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
/* dishes: accent numbers, larger open icons, soft olive rules */
#menu .mi{grid-template-columns:24px 64px 1fr;gap:0 18px;border-bottom-color:rgba(93,104,56,.28)}
#menu .mi::after{background:linear-gradient(90deg,var(--gold),transparent)}
#menu .mi-num{font-family:var(--mono);font-size:13px;color:var(--gold)}
#menu .mi-ico{width:60px;height:60px;border:0;background:none;transform:none}
#menu .mi-ico svg{width:46px;height:46px;stroke-width:1.35}
#menu .mi:hover .mi-ico{background:none;transform:translateY(-2px) rotate(-3deg)}
#menu .mi-name{font-size:19px}
#menu .mi-desc{font-size:15px;margin-top:4px}
/* the note: a framed card with a phone medallion */
#menu .menu-foot{
  display:flex;align-items:center;justify-content:center;gap:16px;text-align:left;
  max-width:820px;margin-left:auto;margin-right:auto;padding:20px 28px;
  background:linear-gradient(rgba(248,246,241,.94),rgba(248,246,241,.94)) padding-box,var(--gilt-grad) border-box;border:1.5px solid transparent
}
#menu .menu-foot::before{
  content:"";flex:none;width:42px;height:42px;border-radius:50%;
  border:1.2px solid rgba(93,104,56,.6);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6838' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.5 4-2 1.2a11 11 0 0 0 5.3 5.3L14 12.5l4 1.5v3a2 2 0 0 1-2 2A13 13 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/20px no-repeat
}
@media (max-width:900px){
  #menu{background-size:200% auto,auto;background-position:left bottom,0 0}
  #menu .menu-tabs{justify-content:flex-start}
  #menu .mi{grid-template-columns:22px 52px 1fr;gap:0 12px}
  #menu .mi-ico{width:50px;height:50px}
  #menu .mi-ico svg{width:38px;height:38px}
  #menu .menu-foot{flex-direction:column;text-align:center}
}
@media (min-width:901px){ #menu{padding-bottom:clamp(150px,14vw,230px)} }

/* the wall between About and Menu: both sections carry a drawing that runs
   to their shared edge, so a course of stone closes one and opens the next */
.stone-band--divider{position:relative;z-index:2;margin:-30px 0 -1px;background-color:transparent}

/* spots read as buttons: an invitation, a view icon, a lift and an arrow on
   hover, a one-time wave across the row, a pulse on 01 until used */
.maq-pick{margin-left:auto;display:inline-flex;align-items:center;gap:10px;padding-left:16px;
  font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--tag);white-space:nowrap}
.maq-pick svg{width:18px;height:11px;animation:maqNudge 1.6s ease-in-out infinite}
@keyframes maqNudge{50%{transform:translateX(4px)}}
.maq-spot b{display:flex;align-items:center;gap:8px}
.maq-eye{width:15px;height:10px;opacity:.55;transition:opacity .25s,transform .25s}
.maq-spot{cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.maq-spot:hover{background:rgba(93,104,56,.1);transform:translateY(-2px);box-shadow:inset 0 -2px 0 var(--tag)}
.maq-spot:hover .maq-eye{opacity:1;transform:scale(1.15)}
.maq-spot::after{transition:transform .25s,opacity .25s}
.maq-spot:hover::after{opacity:1;transform:rotate(-45deg) translate(1px,-1px)}
.maq-spot[aria-pressed="true"]{transform:none;box-shadow:none}
.maq-spots.is-hint .maq-spot{animation:maqWave 1s ease-in-out both}
.maq-spots.is-hint .maq-spot:nth-child(2){animation-delay:.14s}
.maq-spots.is-hint .maq-spot:nth-child(3){animation-delay:.28s}
.maq-spots.is-hint .maq-spot:nth-child(4){animation-delay:.42s}
.maq-spots.is-hint .maq-spot:nth-child(5){animation-delay:.56s}
@keyframes maqWave{40%{background:rgba(93,104,56,.18);transform:translateY(-3px)}}
.maq-spots:not(.is-used) .maq-spot:first-child b::after{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--tag);margin-left:2px;
  box-shadow:0 0 0 0 rgba(93,104,56,.6);animation:maqPulse 1.8s 1.2s ease-out infinite}
@keyframes maqPulse{70%{box-shadow:0 0 0 9px rgba(93,104,56,0)}100%{box-shadow:0 0 0 0 rgba(93,104,56,0)}}
@media (max-width:1180px) and (min-width:901px){ .maq-pick{display:none} }
@media (max-width:900px){
  .maq-pick{font-size:9.5px;letter-spacing:.1em}
  .maq-pick svg{transform:rotate(90deg);animation-name:maqNudgeDown}
  .maq-brand span{display:none}
}
@keyframes maqNudgeDown{50%{transform:rotate(90deg) translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .maq-pick svg,.maq-spots .maq-spot,.maq-spot b::after{animation:none!important}
}
/* phones show the first three reviews; tablets and desktop keep all six */
@media (max-width:720px){ #reviews-grid .rcard:nth-child(n+4){display:none} }

/* menu tabs: show that the row continues */
.menu-tabs-wrap{position:relative}
.menu-tabs-more{
  position:absolute;top:50%;width:34px;height:34px;margin-top:-20px;z-index:3;
  display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:#fff;box-shadow:0 6px 16px -6px rgba(40,50,20,.6);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s
}
.menu-tabs-more svg{width:15px;height:15px}
.menu-tabs-more--next{right:-4px}
.menu-tabs-more--prev{left:-4px;transform:scaleX(-1)}
.menu-tabs-wrap.can-next .menu-tabs-more--next,
.menu-tabs-wrap.can-prev .menu-tabs-more--prev{opacity:1;pointer-events:auto}
.menu-tabs-wrap.can-next .menu-tabs-more--next{animation:tabNudge 1.8s ease-in-out infinite}
@keyframes tabNudge{50%{transform:translateX(3px)}}
.menu-tabs-wrap.can-next #menu-tabs{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 78px),transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 78px),transparent)}
.menu-tabs-wrap.can-prev #menu-tabs{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 78px,#000);
          mask-image:linear-gradient(90deg,transparent,#000 78px,#000)}
.menu-tabs-wrap.can-prev.can-next #menu-tabs{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 78px,#000 calc(100% - 78px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 78px,#000 calc(100% - 78px),transparent)}
#menu .menu-tabs{scroll-padding:0 48px}
@media (prefers-reduced-motion:reduce){ .menu-tabs-more{animation:none!important} }

/* hero small text on the linen weave (desktop): heavier strokes, full ink,
   and a soft paper-coloured halo so the weave can't cut through the letters */
@media (min-width:901px){
  .hero-content{text-shadow:none}
  .hero-tagline,.hero .thin,.hero-lede,.hero-phone,.hero-facts{
    color:#15110c;
    text-shadow:0 0 1px rgba(241,237,228,.95),0 0 6px rgba(241,237,228,.9),0 0 16px rgba(241,237,228,.75)
  }
  .hero-tagline{font-weight:600;font-size:14px}
  .hero .thin{font-weight:600;font-size:13px;letter-spacing:.16em}
  .hero-lede{font-weight:500;font-size:18px}
  .hero-phone{font-weight:600;font-size:15px}
  .hero-facts{font-weight:500;font-size:14px}
  .hero-facts b{font-weight:600;color:#15110c}
}
@media (max-width:900px){
  /* the note sits above the landscape drawing instead of on top of it */
  #menu{padding-bottom:calc(50vw + 40px)}
  #menu .menu-foot{flex-direction:row;text-align:left;gap:14px;padding:14px 16px;font-size:13.5px;line-height:1.5;margin-top:32px}
  #menu .menu-foot::before{width:36px;height:36px;background-size:17px}
}