/* =========================================================
   MELAVERDE — Ristorante
   Local fonts
   ---------------------------------------------------------
   Svetze  — display face: hero, headings, dish names. Full
             Latin-1, so it is safe for Albanian (ë ç Ë Ç).
   Edition — engraved accent face for the wordmark and small
             decorative labels. IT ONLY CONTAINS BASIC ASCII,
             so its unicode-range is pinned to U+0020-007E:
             any ë/ç automatically falls back to the next font
             in the stack instead of rendering a broken glyph.
             Never set Edition on translated copy.
   ========================================================= */
@font-face{
  font-family:"DM Sans";
  src:url("../fonts/DMSans-300-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;   /* ë ç ë-ext — needed for Albanian */
}
@font-face{
  font-family:"DM Sans";
  src:url("../fonts/DMSans-300-latin.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif — the face the section headings are set in. Both
   subsets are self-hosted like everything else here; the latin one
   (U+0000-00FF) carries ë ç Ë Ç, so Albanian is safe, and latin-ext
   covers the rest. The italic is only loaded because <em> inside a
   heading would otherwise be synthesised. */
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-italic-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-italic-latin.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Svetze";
  src:url("../fonts/Svetze.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Mrs Saint Delafield";
  src:url("../fonts/MrsSaintDelafield.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Edition";
  src:url("../fonts/Edition.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E;
}

/* =========================================================
   Palette + type system
   ========================================================= */
:root{
  /* --- brand -------------------------------------------------
     Sampled from the Melaverde logo and the restaurant's own
     photography: deep forest green + the pale chartreuse the
     brand sets its headlines in. ------------------------------ */
  --green-deep: #132C1B;   /* page base — green-black          */
  --green-dark: #1A3A24;   /* deep panels                      */
  --green:      #23492F;   /* the logo green                   */
  --green-mid:  #2F5C3C;   /* cards, hovers                    */
  --sage:       #3F4C45;   /* the linen in the food photos     */
  --chartreuse: #E4EFA6;   /* brand accent — "the yellow"      */
  --chartreuse-2: #C7D98A;

  --cream:      #F4EDE1;
  --cream-hi:   #FBF6EC;
  --cream-dim:  #E7DECF;
  --ink:        #132C1B;
  --ink-2:      #1A3A24;
  --ink-3:      #22462C;
  --mono:       #1A3A24;
  --mono-2:     #163220;

  --on-dark:     #F4EDE1;
  --on-dark-dim: rgba(244,237,225,.62);
  --on-cream:     #16301F;
  --on-cream-dim: rgba(22,48,31,.70);

  --line-dark:  rgba(228,239,166,.20);
  --line-cream: rgba(22,48,31,.20);

  --display: "Instrument Serif", "Svetze", "Times New Roman", Georgia, serif;
  --wordmark: "Instrument Serif", "Svetze", "Times New Roman", Georgia, serif;  /* the big MELAVERDE */
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --accent-face: "Edition", "Svetze", Georgia, serif;   /* ASCII-only — see note above */
  --script: "Mrs Saint Delafield", "Svetze", cursive;    /* the script from the posters */

  --pad: clamp(20px, 5vw, 64px);
  --nav-h: 78px;
  --nav-h-stuck: 64px;
  --nav-h-m: 60px;
  --wrap: 1360px;
  --sec-y: clamp(72px, 10vw, 148px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
/* [hidden] loses to any class that sets display — .mobile-menu{display:flex}
   left an invisible full-screen overlay swallowing every click on the page.
   This keeps the attribute authoritative everywhere. */
[hidden]{ display:none !important; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,figure,ul{ margin:0; padding:0; }
ul{ list-style:none; }
::selection{ background:var(--chartreuse); color:var(--green-deep); }

:focus-visible{ outline:1px solid var(--chartreuse); outline-offset:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--chartreuse); color:var(--green-deep); padding:12px 20px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{ left:12px; top:12px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* =========================================================
   TYPE PRIMITIVES
   ========================================================= */
.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.4vw, 4rem);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--on-cream);
}
.display--center{ text-align:center; }
.display em{                      /* accent word, set in the script face */
  font-family:var(--script);
  font-style:normal;
  font-size:1.26em;
  line-height:.72;
  letter-spacing:0;
  padding-right:.06em;
}
.display--light{ color:var(--on-dark); }
.display--sm{ font-size:clamp(1.9rem, 3vw, 2.7rem); }
.display--xl{
  font-size:clamp(3rem, 9vw, 8.4rem);
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--on-dark);
}

.eyebrow{
  display:table; align-self:center;
  margin:0 auto clamp(20px,2.4vw,30px);
  font-size:clamp(14px,1.15vw,17px);
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-align:center;
  color:var(--green);
}
.eyebrow--light{ color:var(--chartreuse); }
.eyebrow--left{ text-align:left; margin-inline:0; align-self:flex-start; }

.lede{
  font-size:clamp(.92rem,1.05vw,1rem);
  line-height:1.75;
  color:var(--on-cream-dim);
  max-width:56ch;
}
.lede--center{ text-align:center; margin-inline:auto; margin-top:clamp(18px,2.2vw,28px); }
.body{ font-size:.97rem; line-height:1.8; color:var(--on-cream-dim); max-width:52ch; }
.kicker{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-cream); line-height:1.7; max-width:38ch;
}

.section--cream{ background:var(--cream); color:var(--on-cream); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px;
  font-size:12.5px; letter-spacing:.06em;
  border:1px solid transparent;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  will-change:transform;
}
.btn--cream{ background:var(--cream); color:var(--green); }
.btn--cream:hover{ background:var(--chartreuse); color:var(--green-deep); }
.btn--ink{ background:var(--green); color:var(--chartreuse); }
.btn--ink:hover{ background:transparent; color:var(--green); border-color:var(--green); }
.btn--block{ width:100%; }
.btn:active{ transform:translateY(1px); }

.link-underline{
  font-size:12.5px; letter-spacing:.08em;
  border-bottom:1px solid currentColor; padding-bottom:3px;
  transition:opacity .3s var(--ease);
}
.link-underline:hover{ opacity:.6; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;   /* sits at the top of the page and scrolls away with it */
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease),
             transform .45s var(--ease), box-shadow .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  display:flex; align-items:stretch; gap:clamp(14px,2vw,32px);
  width:100%; min-height:var(--nav-h);
  padding:0 0 0 var(--pad);
  transition:min-height .5s var(--ease);
}
.brand, .site-nav, .header-tools{ display:flex; align-items:center; }
.site-header.is-stuck{
  background:rgba(19,44,27,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}
.site-header.is-stuck .site-header__inner{ min-height:var(--nav-h-stuck); }

.brand{ display:inline-flex; align-items:center; gap:12px; color:var(--on-dark); }
/* logo slot: the real file when it is present, the drawn mark until then */
.brand__logo{ display:block; flex:none; line-height:0; }
.brand__logo img{ width:44px; height:44px; object-fit:contain; border-radius:50%; }
.brand__logo .brand-mark{ display:none; }
.brand__logo.is-missing img{ display:none; }
.brand__logo.is-missing .brand-mark{ display:block; }
.brand__logo--lg img{ width:clamp(74px,8vw,96px); height:auto; }
.brand-mark{ width:26px; height:26px; flex:none; color:var(--chartreuse); opacity:.95; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--accent-face); font-size:1.18rem; font-weight:400; letter-spacing:.09em;
}
.brand__tag{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--chartreuse); opacity:.75; }

.site-nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); margin-left:auto; }
.site-nav a{
  /* set in the heading serif, like the rest of the page. A serif does not
     want the wide tracking the sans had, so it closes right up. */
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.18vw,17px); letter-spacing:.015em;
  color:var(--on-dark);
  opacity:.82; position:relative; padding-block:4px;
  transition:opacity .3s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover{ opacity:1; }
.site-nav a{ white-space:nowrap; }     /* "Rreth Nesh" must never break in two */

.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-tools{ display:flex; align-items:center; gap:16px; }

/* the reserve block — full-height, flush to the right edge */
.header-cta{
  display:flex; align-items:center; gap:10px;
  padding:0 clamp(20px,2.4vw,38px);
  background:var(--chartreuse); color:var(--green-deep);
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.2vw,17.5px); letter-spacing:.01em;
  white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.header-cta::after{ content:"→"; font-size:1.05em; transition:transform .4s var(--ease); }
.header-cta__short{ display:none; }
.header-cta:hover{ background:var(--cream); }
.header-cta:hover::after{ transform:translateX(4px); }
.lang-switch{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.14em; color:var(--on-dark-dim);
}
.lang-switch__btn{ padding:4px 2px; opacity:.55; transition:opacity .3s var(--ease); }
.lang-switch__btn:hover{ opacity:.9; }
.lang-switch__btn.is-active{ opacity:1; color:var(--chartreuse); border-bottom:1px solid currentColor; }
.lang-switch__sep{ opacity:.35; }

.burger{ display:none; width:30px; height:18px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:1px; background:var(--on-dark);
  transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.burger span:nth-child(1){ top:4px; }
.burger span:nth-child(2){ top:12px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:9px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top:9px; transform:rotate(-45deg); }

/* =========================================================
   MOBILE MENU
   ========================================================= */
.mobile-menu{
  position:fixed; inset:0; z-index:95;
  background:var(--ink);
  padding:110px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity .4s var(--ease);
}
.mobile-menu:not(.is-open){ pointer-events:none; }
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-menu__nav{ display:flex; flex-direction:column; }
.mobile-menu__nav a{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line-dark);
  font-family:var(--display); font-size:clamp(1.5rem,6vw,2.2rem); font-weight:400;
  letter-spacing:-.005em;                       /* the serif, like the bar above it */
  transition:color .3s var(--ease);
}
.mobile-menu__nav a:hover, .mobile-menu__nav a:focus-visible{ color:var(--chartreuse); }
.mm-idx{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; color:var(--on-dark-dim); }
.mobile-menu__foot{
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  padding-top:var(--nav-h);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(120px,16vh,190px) var(--pad) clamp(70px,9vh,96px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
/* No colour over the photograph — the room keeps its own warm light.
   Only a neutral fade at the top (for the menu) and the bottom (for the
   title and the line under it), so the type stays readable. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 46%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.72) 100%);
}
.hero__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; }
.hero__script{
  font-family:var(--script);
  font-size:clamp(2.6rem,5.2vw,4.4rem);
  line-height:.9; color:var(--chartreuse);
  margin:0 0 clamp(-14px,-1vw,-6px) .1em;
  animation:rise 1.1s var(--ease) both .1s;
}
.hero__title{
  /* Instrument Serif ships at one weight — 400. Anything heavier here would
     be a browser-synthesised fake bold, which smears the thin strokes. */
  font-family:var(--wordmark);
  font-weight:400;
  letter-spacing:-.02em;
  font-size:clamp(3.4rem, 15.5vw, 16rem);
  line-height:.86;
  letter-spacing:-.035em;
  color:var(--cream);
  animation:rise 1.2s var(--ease) both .2s;
}
.hero__aside{
  margin-left:auto; margin-top:clamp(26px,5vh,54px);
  max-width:540px; text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  animation:rise 1.2s var(--ease) both .45s;
}
.hero__lede{
  /* the one line under the name is set in the heading serif too */
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2vw,1.75rem); line-height:1.4;
  letter-spacing:0;
  color:var(--cream);
}
/* the hero's call to action gets the same weight as the events button */
.hero__aside .btn{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1rem,1.3vw,1.15rem); letter-spacing:.015em;
  padding:clamp(18px,2vw,23px) clamp(34px,4vw,56px);
}
/* the photograph is busy where the small type sits — lift it with a soft
   shadow instead of tinting the whole picture */
.hero__script, .hero__lede{ text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 22px rgba(0,0,0,.6); }

@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* =========================================================
   RULES
   ========================================================= */
.rules{ padding-block:var(--sec-y); }
/* editorial head: headline left, intro dropped to the right */
.rules__head{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,4vw,70px); align-items:end;
  margin-bottom:clamp(40px,6vw,76px);
}
.rules__head .lede{ padding-bottom:.4em; }
@media (max-width:860px){
  .rules__head{ grid-template-columns:1fr; align-items:start; }
}
.rules__grid{
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(2,1fr);
}
.rule-card{
  position:relative; overflow:hidden;
  min-height:clamp(340px,34vw,460px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,2vw,30px);
  color:var(--on-dark);
}
.rule-card--dark{ background:var(--green); }
.rule-card__art{
  position:absolute; top:clamp(20px,2.4vw,34px); right:clamp(20px,2.4vw,34px);
  width:clamp(170px,19vw,290px); height:auto; object-fit:contain;   /* the drawing fills the card, not a corner */
  color:var(--chartreuse); opacity:.95;
}
.rule-card__body{ position:relative; z-index:1; }
.rule-card__body .rule-card__title{
  font-family:var(--display); font-weight:400; color:var(--chartreuse);
  font-size:clamp(1.5rem,2.3vw,2.1rem); line-height:1.15; margin-bottom:12px;
}
.rule-card__body p{ font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.75; color:var(--on-dark-dim); max-width:40ch; }

/* =========================================================
   MASTERPIECE SLIDER
   ========================================================= */
.masterpiece{ position:relative; background:var(--ink); overflow:hidden; }
.masterpiece__stage{ position:relative; min-height:clamp(560px,86vh,880px); }
.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(70px,9vw,120px) var(--pad);
  opacity:0; transition:opacity .9s var(--ease);
}
.slide[hidden]{ display:none; }
.slide.is-active{ opacity:1; position:relative; }
.slide__media{ position:absolute; inset:0; z-index:0; }
.slide__media img{ width:100%; height:100%; object-fit:cover; }
.slide__media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 58% at 50% 46%, rgba(19,44,27,.80) 0%, rgba(19,44,27,.42) 60%, rgba(19,44,27,.28) 100%),
    linear-gradient(180deg, rgba(19,44,27,.80), rgba(19,44,27,.48) 45%, rgba(19,44,27,.94));
}
.slide__content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,24px);
  max-width:820px;
}
.slide__content .display--xl{ animation:rise .9s var(--ease) both; }
.slide__text{
  font-size:.9rem; line-height:1.85; color:rgba(244,237,225,.78); max-width:60ch;
}

/* Slider controls — a big counter, the three dishes as tabs whose bar fills
   while the slide is on screen (it pauses when you hover the slider), and two
   solid round arrows you can actually hit. */
.slider-ui{
  position:absolute; z-index:3;
  left:var(--pad); bottom:clamp(22px,4vh,44px);
  right:calc(var(--pad) + 74px);               /* keep the arrows clear of the WhatsApp button */
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(18px,3vw,48px);
}
.slider-count{ display:flex; align-items:baseline; gap:8px; color:var(--cream); flex:none; }
.slider-count__now{
  font-family:var(--display); font-size:clamp(2.2rem,3.4vw,3.2rem);
  line-height:.9; letter-spacing:-.02em;
}
.slider-count__all{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; color:var(--chartreuse); }

.dots{ flex:1; display:flex; align-items:flex-end; gap:clamp(12px,2vw,28px); max-width:760px; }
.dot{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:6px 0; background:none; border:0; border-radius:0; text-align:left; cursor:pointer;
}
.dot__name{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.02em;
  color:rgba(244,237,225,.55); white-space:nowrap;
  transition:color .4s var(--ease);
}
.dot:hover .dot__name, .dot.is-active .dot__name{ color:var(--cream); }
.dot__bar{
  display:block; position:relative; overflow:hidden;
  width:100%; height:3px; border-radius:2px;
  background:rgba(244,237,225,.22);
}
.dot__bar::after{
  content:""; position:absolute; inset:0;
  background:var(--chartreuse);
  transform:scaleX(0); transform-origin:left;
}
.dot.is-active .dot__bar::after{ animation:slide-progress 7s linear forwards; }
.masterpiece:hover .dot.is-active .dot__bar::after,
.masterpiece:focus-within .dot.is-active .dot__bar::after{ animation-play-state:paused; }
@keyframes slide-progress{ to{ transform:scaleX(1); } }

.slider-arrows{ display:flex; gap:10px; flex:none; }
.slider-arrow{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream); color:var(--green-deep); border:0;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.slider-arrow svg{ width:20px; height:20px; }
.slider-arrow:hover{ background:var(--chartreuse); transform:scale(1.07); }

/* leave room under the slide's button for the control bar */
.slide{ padding-bottom:clamp(140px,15vw,180px); }

@media (max-width:760px){
  .dot__name{ display:none; }                  /* the slide already names the dish */
  .dots{ gap:8px; }
  .slider-count__now{ font-size:2rem; }
  .slider-arrow{ width:46px; height:46px; }
}

/* =========================================================
   MONOCHROME BLOCK
   ========================================================= */
/* =========================================================
   THE FILMSTRIP — "bërë me dashuri"
   ---------------------------------------------------------
   The section goes dark so the two black-and-white pictures
   read like frames off a reel, with a drawing between them.
   Everything is one grid: add another .mono__frame and the
   strip simply gets another frame.
   ========================================================= */
.mono{
  background:var(--green-deep); color:var(--on-dark);
  padding-block:var(--sec-y);
}
.mono__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
  padding-bottom:clamp(30px,4vw,54px);
}
.mono__title{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.25rem,2.6vw,2.05rem);
  letter-spacing:.005em; line-height:1.24; text-transform:uppercase;
  color:var(--cream);
}
.mono__lede{
  margin-top:18px; max-width:44ch;
  font-size:.82rem; line-height:1.85; color:var(--on-dark-dim);
}
.mono__glyph{ width:30px; height:19px; flex:none; opacity:.6; color:var(--chartreuse); }

/* the heading spans the top; three equal columns sit under it */
.kitchen__head{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:clamp(24px,4vw,64px); align-items:end;
  margin-bottom:clamp(30px,4vw,56px);
}
.kitchen__head .mono__lede{ margin-top:0; }

.kitchen__row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,26px);
  align-items:stretch;
}
.kitchen__photo{ margin:0; display:flex; flex-direction:column; }
.kitchen__photo img{
  width:100%; aspect-ratio:3 / 4; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  transition:transform 1.4s var(--ease);
}
.kitchen__photo:hover img{ transform:scale(1.03); }
/* the drawing panel matches the photograph's frame but contains its art
   rather than cropping it */
.kitchen__panel{ margin:0; display:flex; flex-direction:column; }
/* The drawing is positioned inside the panel rather than centred by the
   grid. It used to rely on max-height:100%, which silently does nothing
   here: the panel's height comes from aspect-ratio, so the percentage has
   no definite height to resolve against and the image drew at its natural
   size — 313px tall inside a 175px box, straight over the navigation.
   Absolute inset always has a definite box to work with. */
.kitchen__panel picture{
  position:relative; display:block;
  aspect-ratio:3 / 4;
  border:1px solid var(--line-dark);
  background:rgba(228,239,166,.04);
}
.kitchen__panel img{
  /* explicit 100%/100% with padding, not inset + auto: an <img> is a
     replaced element, so width:auto falls back to its intrinsic size and
     the inset offsets are ignored. box-sizing:border-box is global, so the
     padding shrinks the content box and object-fit fits the drawing in it. */
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:clamp(16px,2.2vw,34px);
  object-fit:contain;
}

.kitchen__nav{ display:flex; flex-direction:column; }
.kitchen__nav .arrow-list{ margin-top:auto; }
.kitchen__nav .mono__note{ margin-top:auto; padding-top:clamp(22px,3vw,38px); }

@media (max-width:900px){
  .kitchen__head{ grid-template-columns:1fr; align-items:start; }
  .kitchen__row{ grid-template-columns:1fr 1fr; }
  .kitchen__nav{ grid-column:1 / -1; }
  .kitchen__nav .arrow-list,
  .kitchen__nav .mono__note{ margin-top:0; }
  .kitchen__nav .mono__note{ padding-top:clamp(20px,3vw,30px); }
}
@media (max-width:620px){
  .kitchen__row{ grid-template-columns:1fr; }
  /* full width at 3:4 made the portrait 520px tall on a phone — over half
     the screen for one photograph. Shorter crop, head kept in frame. */
  .kitchen__photo img{ aspect-ratio:5 / 4; object-position:center 22%; }
  .kitchen__panel picture{ aspect-ratio:2 / 1; }
  .kitchen__panel img{ padding:14px 18px; }
}

/* navigation and the line that closes the section */
.mono__foot{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(30px,5vw,80px); align-items:start;
  margin-top:clamp(40px,5vw,76px);
}
.mono__navlabel{
  font-size:13px; letter-spacing:.14em; font-weight:500; text-transform:uppercase;
  color:var(--chartreuse);
  margin-bottom:clamp(16px,2.2vw,26px);
}
.arrow-list li + li{ margin-top:2px; }
.arrow-list a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 2px; border-bottom:1px solid var(--line-cream);
  font-size:.86rem; color:var(--on-cream);
  transition:color .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
}
.arrow-list a svg{ width:14px; height:14px; stroke-width:1.1; fill:none; opacity:.65; transition:transform .35s var(--ease); }
.arrow-list a:hover{ color:var(--green); padding-inline:8px 2px; border-bottom-color:var(--green); }
.arrow-list a:hover svg{ transform:translate(3px,-3px); opacity:1; }

/* the list sits on the dark here, so it takes the dark palette */
.mono .arrow-list a{ color:var(--on-dark); border-bottom-color:var(--line-dark); }
.mono .arrow-list a:hover{ color:var(--chartreuse); border-bottom-color:var(--chartreuse); }

.mono__note{
  font-family:var(--script);
  font-size:clamp(1.9rem,3.4vw,3.1rem);
  line-height:1.02; letter-spacing:.005em;
  color:var(--chartreuse); max-width:16ch;
  align-self:end;
}

@media (max-width:900px){
  .mono__foot{ grid-template-columns:1fr; }
  .mono__note{ max-width:none; }
}
@media (max-width:620px){
  /* three tall frames are too narrow on a phone: the drawing steps aside
     and the two photographs share the row */
  .mono__strip{ grid-template-columns:1fr 1fr; }
  .mono__frame--art{ display:none; }
  .mono__head{ flex-direction:column; }
  .mono__glyph{ order:-1; }
}

/* =========================================================
   INVITATION
   ========================================================= */
.invite{
  position:relative; display:grid; place-items:center;
  min-height:clamp(460px,72vh,760px);
  padding:var(--sec-y) var(--pad);
  overflow:hidden;
}
.invite__media{ position:absolute; inset:0; }
.invite__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.invite__media::after{ content:""; position:absolute; inset:0; background:rgba(19,44,27,.42); }
.invite__script{
  position:absolute; left:50%; bottom:clamp(6px,2.4vh,30px);
  transform:translateX(-50%);
  z-index:1;
  font-family:var(--script);
  font-size:clamp(3rem,11.5vw,10.5rem);
  line-height:.92;
  white-space:nowrap;
  color:var(--chartreuse);
  opacity:.42;
  pointer-events:none;
  user-select:none;
}
.invite__card{
  position:relative; z-index:2;
  background:var(--cream-hi); color:var(--on-cream);
  padding:clamp(38px,5vw,76px) clamp(30px,5vw,86px);
  max-width:840px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.invite__card .invite__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.95rem); line-height:1.25;
}
.invite__card p{ font-size:.86rem; line-height:1.8; color:var(--on-cream-dim); max-width:42ch; }
.invite__card a{ margin-top:8px; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ background:var(--ink); padding-block:var(--sec-y) clamp(60px,8vw,110px); overflow:hidden; }
.gallery .display{ margin-bottom:clamp(38px,5vw,70px); }
.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:slide-x 48s linear infinite; }
.marquee__track img{
  width:clamp(230px,26vw,400px); aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(.35); transition:filter .6s var(--ease);
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track img:hover{ filter:grayscale(0); }
@keyframes slide-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   RESERVATION
   ========================================================= */
.reserve{ display:grid; grid-template-columns:1fr 1fr; background:var(--cream); color:var(--on-cream); }
.reserve__media{ position:relative; min-height:clamp(330px,46vw,700px); overflow:hidden; }
.reserve__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reserve__panel{
  padding:clamp(46px,6vw,96px) clamp(24px,5vw,86px);
  display:flex; flex-direction:column; justify-content:center;
}
.reserve__panel .display--sm{ margin-bottom:clamp(26px,3.4vw,42px); }

.form{ display:flex; flex-direction:column; gap:6px; max-width:520px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,26px); }
.field{ position:relative; padding-block:8px 20px; }
.field input, .field select{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line-cream);
  padding:12px 0; font-size:.88rem; color:var(--on-cream);
  font-family:var(--sans); font-weight:300;
  transition:border-color .35s var(--ease);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2316301F'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}
.field input::placeholder{ color:var(--on-cream-dim); }
.field input[type="date"]:invalid{ color:var(--on-cream-dim); }
.field input:focus, .field select:focus{ outline:none; border-bottom-color:var(--green); }
.field input:focus-visible, .field select:focus-visible{ outline:none; }
.field.has-error input, .field.has-error select{ border-bottom-color:#9B3A2E; }
.field__err{
  position:absolute; left:0; bottom:4px;
  font-size:10.5px; letter-spacing:.06em; color:#9B3A2E; opacity:0;
  transition:opacity .3s var(--ease);
}
.field.has-error .field__err{ opacity:1; }

/* WhatsApp — the way most guests here actually book */
.form__or{
  margin:14px 0 10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-cream-dim); text-align:center;
}
.btn--wa{
  gap:10px;
  background:#1FA855; color:#fff;
}
.btn--wa svg{ width:17px; height:17px; flex:none; }
.btn--wa:hover{ background:#17924A; color:#fff; }
.form__call{ align-self:center; margin-top:18px; }

.form__note{
  font-size:.8rem; line-height:1.75; color:var(--on-cream-dim);
  margin:clamp(14px,2vw,22px) 0 clamp(16px,2vw,24px); max-width:44ch;
}
.form__success{
  margin-top:14px; font-size:.82rem; line-height:1.7;
  color:var(--green); border-left:2px solid var(--chartreuse); padding-left:14px;
}

/* =========================================================
   LOCATION
   ========================================================= */
.location{ background:var(--green-dark); padding-block:var(--sec-y); border-top:1px solid var(--line-dark); }
.location__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,5vw,60px); }
.location__big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.85vw,1.65rem); line-height:1.55; color:var(--on-dark);
}
.location__big + .location__big{ margin-top:10px; }
.location__note{
  margin-top:12px; font-size:.85rem; letter-spacing:.02em; color:var(--on-dark-dim);
}
.location__big a{ transition:opacity .3s var(--ease); }
.location__big a:hover{ opacity:.65; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); padding-block:clamp(40px,6vw,70px) 28px; border-top:1px solid var(--line-dark); }
.site-footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:clamp(30px,4vw,50px);
}
.brand--footer{ gap:16px; }
.brand--footer .brand__name{ font-size:1.4rem; }
/* the real badge already carries the wordmark, so the text only shows as a fallback */
.brand__logo:not(.is-missing) + .brand__name--fallback{ display:none; }
.socials{ display:flex; gap:14px; }
.socials a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-dark); border-radius:50%;
  color:var(--on-dark-dim); transition:color .3s var(--ease), border-color .3s var(--ease);
}
.socials svg{ width:15px; height:15px; }
.socials a:hover{ color:var(--chartreuse); border-color:var(--chartreuse); }

.site-footer__nav{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px);
  padding-block:clamp(22px,3vw,34px);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim);
}
.site-footer__nav a{ transition:color .3s var(--ease); }
.site-footer__nav a:hover{ color:var(--chartreuse); }
.site-footer__legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,237,225,.38);
}

/* =========================================================
   REVEAL  —  three movements, mixed
   ---------------------------------------------------------
   1 · SOFT RISE   blocks lift out of a shallow blur
   2 · APERTURE    labels arrive wide-tracked and tighten
   3 · WORD CASCADE headlines resolve a word at a time
   They are layered so a section reads as one shot: the label
   opens, the headline resolves, the copy settles under it.
   ========================================================= */

/* 1 · soft rise ------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  filter:blur(7px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 1.05s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }

/* 2 · aperture — the tracking closes as the label lands ---- */
.eyebrow[data-reveal],
.pd__label[data-reveal]{
  letter-spacing:.46em;
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease),
             filter 1.05s var(--ease), letter-spacing 1.25s var(--ease);
}
.eyebrow[data-reveal].is-in{ letter-spacing:.17em; }
.pd__label[data-reveal].is-in{ letter-spacing:.24em; }

/* 3 · word cascade ---------------------------------------- */
/* a split headline hands its entrance to the words, so the
   block itself must not fade or move as well */
.rv-split[data-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
.rv-w{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  filter:blur(10px);
  transition:opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease);
  transition-delay:var(--wd,0ms);
  will-change:opacity, transform, filter;
}
.rv-split.is-in .rv-w,
.is-in .rv-split .rv-w{ opacity:1; transform:none; filter:blur(0); }

/* headlines that are not themselves reveal targets (the hero,
   the slider) cascade as soon as they are on screen */
.rv-split:not([data-reveal]) .rv-w{ opacity:1; transform:none; filter:blur(0); }
.rv-split.rv-hold:not(.is-in) .rv-w{ opacity:0; transform:translateY(.5em); filter:blur(10px); }

/* the script accent sets its own line — keep it on the baseline */
.display em .rv-w, .pd__title em .rv-w{ line-height:inherit; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .site-nav{ display:none; }
  .burger{ display:block; }

  /* keep the desktop shape — brand left, tools and the chartreuse
     block right — just tightened so it fits a phone */
  .site-header__inner{ min-height:var(--nav-h-m); padding-left:16px; gap:10px; }
  .site-header.is-stuck .site-header__inner{ min-height:var(--nav-h-m); }
  .hero{ padding-top:var(--nav-h-m); }
  .brand{ min-width:0; }
  .brand__logo img{ width:34px; height:34px; }
  .brand-mark{ width:22px; height:22px; }
  .brand__tag{ display:none; }
  .brand__name{ font-size:1rem; letter-spacing:.07em; }
  .header-tools{ margin-left:auto; gap:12px; }
  .lang-switch{ font-size:10px; gap:4px; letter-spacing:.1em; }
  .lang-switch__btn{ padding:3px 1px; }
  .header-cta{ padding:0 16px; font-size:11px; letter-spacing:.04em; }
  .header-cta::after{ display:none; }
  .header-cta__full{ display:none; }
  .header-cta__short{ display:inline; }

  /* comfortable tap targets */
  .lang-switch__btn{ padding:10px 3px; }
  .burger{ height:20px; }
  .arrow-list a{ padding-block:18px; }
  .site-footer__nav a{ padding-block:6px; }

  /* 16px inputs — anything smaller makes iOS zoom the page on focus */
  .field input, .field select{ font-size:16px; padding:13px 0; }
  .form__row{ gap:0; }

  .hero__lede{ font-size:1.14rem; line-height:1.5; }
  .rule-card__body p{ font-size:.95rem; }
  .faq__item p{ font-size:.88rem; }
  .site-header:not(.is-stuck){ background:linear-gradient(180deg, rgba(13,12,10,.75), transparent); }
  .mono__grid{ grid-template-columns:1fr; }
  .reserve{ grid-template-columns:1fr; }
  .reserve__media{ min-height:58vw; }
  .location__grid{ grid-template-columns:1fr; }
  .hero__aside{ margin-left:0; max-width:none; }
}
@media (max-width:620px){
  .rules__grid{ grid-template-columns:1fr; }
  .rule-card{ min-height:280px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .site-footer__top{ flex-direction:column; align-items:flex-start; gap:26px; }
  .mono__head{ flex-direction:column; }
  .mono__glyph{ order:-1; }
  .slider-ui{ gap:16px; }
  .hero{ padding-bottom:86px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .marquee__track{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  .eyebrow[data-reveal]{ letter-spacing:.17em; }
  .pd__label[data-reveal]{ letter-spacing:.24em; }
  .rv-w{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* =========================================================
   INSTAGRAM
   ========================================================= */
.social{ background:var(--cream); color:var(--on-cream); padding-block:var(--sec-y); }
.social__grid{
  display:grid; grid-template-columns:1fr minmax(320px,540px);
  gap:clamp(30px,5vw,80px); align-items:center;
}
.social__text{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2vw,20px); }
.social__text .display{ max-width:14ch; }
.social__lede{ font-size:.9rem; line-height:1.85; color:var(--on-cream-dim); max-width:46ch; }

@media (max-width:900px){
  .social__grid{ grid-template-columns:1fr; }
}

/* anchor offset so fixed header never covers a heading */
section[id]{ scroll-margin-top:0; }   /* no fixed bar to clear any more */

/* =========================================================
   LINE ART  (the brand's own sketches)
   ========================================================= */
/* the long table runs across the top of the card — it is a wide drawing,
   so it takes the card's width rather than sitting as a small glyph */
.invite__art{
  display:block; width:100%; max-width:640px;
  margin-bottom:clamp(6px,1vw,14px);
}
.invite__art img{ width:100%; height:auto; opacity:.92; }

@media (max-width:900px){
}

/* =========================================================
   MAP
   ========================================================= */
.map{
  margin-top:clamp(34px,4.5vw,60px);
  border:1px solid var(--line-dark);
  overflow:hidden;
  background:var(--green-dark);
}
.map iframe{
  display:block; width:100%; height:clamp(300px,42vw,480px); border:0;
  filter:grayscale(.55) contrast(1.05) brightness(.82) sepia(.12) hue-rotate(58deg);
  transition:filter .6s var(--ease);
}
.map:hover iframe{ filter:grayscale(0) contrast(1) brightness(.95); }
.map__foot{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center;
  padding:16px clamp(16px,2vw,24px);
  border-top:1px solid var(--line-dark);
  font-size:.82rem; color:var(--on-dark-dim);
}
.map__foot a{ color:var(--chartreuse); border-bottom:1px solid currentColor; padding-bottom:2px; }
.map__foot a:hover{ opacity:.75; }

/* =========================================================
   FAQ  (visible answers — crawlers and answer engines read
   these directly, so they stay in the markup, not behind JS)
   ========================================================= */
.faq{ padding-block:var(--sec-y); }
/* minimal: the heading holds still on the left, the questions run as one
   hairline list on the right, and each answer opens in place. <details>
   keeps every answer in the HTML — crawlers index it closed or open. */
.faq__layout{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);
  gap:clamp(32px,6vw,110px); align-items:start;
}
.faq__head{ position:sticky; top:calc(var(--nav-h-stuck) + 36px); }
.faq__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.1; letter-spacing:-.01em;
  color:var(--on-cream); max-width:12ch;
}
.faq__list{ border-top:1px solid var(--line-cream); }
.faq__item{ border-bottom:1px solid var(--line-cream); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(18px,2vw,24px) 0;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:focus-visible{ outline:1px solid var(--green); outline-offset:4px; }
.faq__item .faq__q{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(.98rem,1.2vw,1.08rem); line-height:1.45;
  color:var(--on-cream); transition:color .3s var(--ease);
}
.faq__item summary:hover .faq__q{ color:var(--green); }
.faq__icon{ position:relative; width:12px; height:12px; flex:none; }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--green); transition:transform .45s var(--ease);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__item[open] .faq__icon::after{ transform:rotate(0deg); }
.faq__item p{
  font-size:.9rem; line-height:1.8; color:var(--on-cream-dim);
  max-width:60ch; padding-bottom:clamp(18px,2vw,26px);
}
.faq__item[open] p{ animation:faq-open .55s var(--ease); }
@keyframes faq-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:820px){
  .faq__layout{ grid-template-columns:1fr; gap:28px; }
  .faq__head{ position:static; }
}

/* =========================================================
   PRIVATE DINING  —  two-tone modular
   Swiss grid: flush-left sans, deliberate empty middle on the
   cream side, one solid green field carrying the line art.
   ========================================================= */
.pd{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:min(78vh, 660px);
  background:var(--cream);
}
.pd__text{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(40px,7vh,90px);
  padding:clamp(40px,4.8vw,84px) clamp(26px,4vw,74px);
}
.pd__label{
  font-family:var(--sans);
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  color:var(--green); margin-bottom:clamp(20px,2.6vw,34px);
}
.pd__title{
  /* set like every other section heading now — the tracking opens up and
     the size steps back, because the serif runs wider than the sans did */
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,3.4vw,3.1rem);
  line-height:1.14; letter-spacing:-.008em;
  color:var(--on-cream); max-width:16ch;
}
.pd__title em{                    /* the script picks out one word of the serif line */
  font-family:var(--script);
  font-style:normal; font-weight:400;
  font-size:1.5em; line-height:.7;
  letter-spacing:0;
  padding-inline:.04em .2em;      /* the script leans right — buy back the gap */
}
.pd__body{
  font-size:.94rem; line-height:1.78; color:var(--on-cream-dim);
  max-width:40ch; margin-bottom:clamp(22px,2.6vw,32px);
}
.pd__panel{
  background:var(--green); margin:0;
  padding:clamp(26px,3vw,54px);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
.pd__panel img{
  width:100%; max-width:min(520px, 92%);
  align-self:flex-end; height:auto;
}
.pd__line{ align-self:flex-start; margin:clamp(-10px,-1vw,0px) 0 0; }
.pd__script{
  font-family:var(--script);
  font-size:clamp(2.6rem,5.4vw,5rem);
  line-height:.92;
  color:var(--chartreuse);
  max-width:11ch;
  margin:0;
}
.pd__script-tr{
  margin-top:6px;
  font-family:var(--script);
  font-size:clamp(1.35rem,2.3vw,2.05rem);
  line-height:1.1;
  color:var(--chartreuse); opacity:.62;
}
.pd__caption{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.9; color:var(--chartreuse); max-width:38ch; text-wrap:pretty;
}
@media (max-width:900px){
  .pd{ grid-template-columns:1fr; min-height:0; }
  .pd__panel{ padding:clamp(24px,7vw,44px); gap:28px; }
  .pd__panel img{ align-self:center; max-width:82%; }
  .pd__line{ align-self:center; text-align:center; }
  .pd__script{ max-width:none; }
  .pd__script-tr{ text-align:center; }
}

/* =========================================================
   EVENTS  —  weddings · engagements · celebrations
   ---------------------------------------------------------
   Sits between the cream private-dining split and the photo
   invitation, so it takes the deepest green on the page.
   Head follows the .rules__head split (headline left, intro
   dropped right); the figure carries the script line the way
   the private-dining panel does; occasions run as hairline
   rows rather than cards, so the section does not repeat the
   three-card rhythm of the rules grid directly above it.
   ========================================================= */
.events{
  background:var(--cream); color:var(--on-cream);
  padding-block:var(--sec-y);
}
.events__head{
  display:grid; grid-template-columns:1.22fr .78fr;
  gap:clamp(20px,4vw,70px); align-items:end;
  margin-bottom:clamp(38px,5vw,70px);
}
.events__head .display{ font-size:clamp(2.05rem,4vw,3.6rem); }
.events__head .display em{ padding-inline:.04em .16em; }   /* the accent word runs into the next one otherwise */
.events__lede{
  font-size:clamp(.92rem,1.05vw,1rem); line-height:1.8;
  color:var(--on-cream-dim); max-width:52ch; padding-bottom:.4em;
}

/* the line art sits straight on the cream, no plate and no border —
   the PNGs are transparent, so the section colour shows through them */
.events__cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.occasion{ display:flex; flex-direction:column; }
.occasion__art{
  display:grid; place-items:center;
  aspect-ratio:5 / 3;                   /* keeps the three drawings on one baseline */
  margin-bottom:clamp(14px,1.6vw,22px);
}
.occasion__art img{
  width:auto; height:100%;
  max-width:100%; max-height:clamp(104px,12vw,168px);
  object-fit:contain;
}
.occasion .occasion__title{
  font-family:var(--display); font-weight:400; color:var(--green);
  font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.25; margin-bottom:9px;
}
.occasion p{ font-size:.85rem; line-height:1.8; color:var(--on-cream-dim); max-width:38ch; }

.events__cta{
  display:flex; justify-content:center;
  margin-top:clamp(34px,4.4vw,62px);
}
/* the one call to action in the section — it should read like one */
.events__cta .btn{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1rem,1.35vw,1.2rem);
  letter-spacing:.015em;
  padding:clamp(20px,2.2vw,26px) clamp(40px,5vw,72px);
}

@media (max-width:980px){
  .events__head{ grid-template-columns:1fr; align-items:start; }
  .events__lede{ padding-bottom:0; }
  .events__cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .events__cards{ grid-template-columns:1fr; gap:clamp(18px,4vw,28px); }
  .occasion__art{ aspect-ratio:2 / 1; }
  .occasion p{ font-size:.88rem; max-width:none; }
  .events__cta .btn{ width:100%; }
}

/* =========================================================
   VILLA MELAVERDE  (villa/index.html)
   ---------------------------------------------------------
   Every section on the villa page reuses a restaurant
   component. Only three things are new: a hero that works
   without a photograph, a booking panel that carries line
   art, and visible labels so check-in and check-out can't
   be confused (a date field shows no placeholder).
   ========================================================= */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.reserve__media--art{ background:var(--green); display:grid; place-items:center; }
.reserve__media--art img{
  position:static; inset:auto;
  width:min(62%,380px); height:auto; object-fit:contain; opacity:.92;
}

.field__label{
  display:block; margin-bottom:2px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--on-cream-dim);
}


/* =========================================================
   HERO · FRAMED  (H2 — passe-partout)
   ---------------------------------------------------------
   The photograph sits in a cream mount like a print; the
   name runs underneath it in green, the line and the button
   to its right. The header is solid from the first pixel,
   because on the cream mount a see-through header would
   put cream type on cream.
   ========================================================= */
.site-header--solid,
.site-header--solid:not(.is-stuck){
  background:rgba(19,44,27,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}

.hero--framed{
  min-height:0;
  display:block;
  background:var(--cream);
  padding:calc(var(--nav-h) + clamp(10px,1.4vw,18px)) clamp(14px,2.2vw,32px) 0;
}
.hero--framed::after{ display:none; }          /* no fade over the whole section */

.hero__frame{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(360px,64vh,760px);
}
.hero--framed .hero__media{ position:absolute; inset:0; z-index:-2; }
/* "Melaverde Restaurant" — one heading, the script word on the name's baseline */
.hero__name{
  display:flex; align-items:baseline; flex-wrap:wrap;
  column-gap:clamp(10px,1.3vw,20px);
  font-weight:400;                            /* an h1 would fake-bold the script */
}
.hero--framed .hero__script{
  margin:0; color:var(--green); text-shadow:none;
  font-size:clamp(2.2rem,3.8vw,3.8rem);
}

.hero__under{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(18px,3vw,44px); flex-wrap:wrap;
  padding:clamp(22px,3.2vw,52px) 0 clamp(30px,3.4vw,48px);   /* the name needs air under the photo */
}
.hero--framed .hero__title{
  color:var(--green-deep);
  font-size:clamp(3.4rem,11vw,11rem);
  letter-spacing:-.02em;                      /* the serif needs less pull than the grotesque did */
}
.hero--framed .hero__aside{
  margin:0 0 clamp(6px,1.2vw,18px); max-width:300px;
}
/* laptops: the name takes the whole line, the sentence and the button
   run underneath it side by side */
@media (min-width:901px) and (max-width:1180px){
  .hero__under{ flex-direction:column; align-items:stretch; }
  .hero--framed .hero__aside{
    max-width:none; margin:0;
    flex-direction:row; align-items:center; justify-content:space-between; gap:28px;
  }
  .hero--framed .hero__lede{ max-width:46ch; }
}
.hero--framed .hero__lede{
  color:var(--on-cream); text-shadow:none;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
}
@media (max-width:900px){
  .hero--framed{ padding-top:calc(var(--nav-h-m) + 10px); }
  .hero__frame{ height:clamp(300px,56svh,520px); }
  .hero--framed .hero__aside{ max-width:none; }
  .hero--framed .hero__title{ font-size:clamp(3.4rem,17vw,8rem); }   /* fill the phone's width */
}
@media (max-width:620px){
  /* no room beside the name on a phone: the signature drops to the right under it */
  .hero--framed .hero__script{ width:100%; text-align:right; margin-top:-.2em; }
}

/* =========================================================
   "MELAVERDE Restaurant" — written in
   ---------------------------------------------------------
   The name is drawn left to right like a pen stroke, then
   the signature is signed after it, then the line and the
   button arrive. The padding/negative-margin pair gives the
   script's swashes room inside the box, so the wipe never
   cuts a flourish; "backwards" drops the clip once done.
   ========================================================= */
@keyframes write-in{
  from{ clip-path:inset(0 100% 0 0); }
  to{   clip-path:inset(0 0 0 0); }
}
.hero__name .hero__title,
.hero__name .hero__script{
  padding:.2em .24em .3em .08em;
  margin:-.2em -.24em -.3em -.08em;
}
.hero__name .hero__title{  animation:write-in 1.6s cubic-bezier(.62,.04,.34,1) .3s backwards; }
.hero__name .hero__script{ animation:write-in 1.3s cubic-bezier(.45,.05,.3,1) 1.75s backwards; }
.hero--framed .hero__lede[data-reveal]{ transition-delay:2.35s !important; }
.hero--framed .hero__aside .btn[data-reveal]{ transition-delay:2.55s !important; }

/* =========================================================
   HEADER — cream
   ---------------------------------------------------------
   The bar takes the page's cream; its type goes green and
   is set in DM Sans throughout. Hover turns a link apple
   green — "mela verde" — 5:1 on cream, so it stays legible.
   ========================================================= */
:root{ --apple:#467028; }
.site-header--solid,
.site-header--solid:not(.is-stuck),
.site-header--solid.is-stuck{
  background:rgba(244,237,225,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:0;                              /* no line under the bar */
}
/* once content scrolls under it, a soft shadow (not a line) marks the edge */
.site-header--solid.is-stuck{ box-shadow:0 12px 30px -20px rgba(19,44,27,.4); }
.site-header--solid .brand{ color:var(--green-deep); }
.site-header--solid .brand-mark{ color:var(--green); }
.site-header--solid .brand__name{
  font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.2em;
  text-transform:uppercase;            /* the old face was capitals-only; keep the wordmark's look */
}
.site-header--solid .brand__tag{ font-family:var(--sans); font-weight:500; color:var(--green); opacity:.85; }

.site-header--solid .site-nav a{
  /* the cream bar sets its own type, so the serif has to be repeated here
     or the rule above it loses */
  font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.25vw,18px); letter-spacing:.015em;
  color:var(--on-cream); opacity:1;
  transition:color .3s var(--ease), transform .35s var(--ease);
}
.site-header--solid .site-nav a::after{ display:none; }   /* no underline — the word grows instead */
.site-header--solid .site-nav a:hover,
.site-header--solid .site-nav a:focus-visible{ color:var(--apple); transform:scale(1.14); }

.site-header--solid .lang-switch{ gap:10px; }
.site-header--solid .lang-switch__btn{
  display:grid; place-items:center;
  padding:3px; border:0; border-radius:50%;
  opacity:.5; filter:saturate(.3);
  transition:opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header--solid .lang-switch__btn .flag{ display:block; width:22px; height:22px; border-radius:50%; }
.site-header--solid .lang-switch__btn:hover{ opacity:1; filter:none; transform:scale(1.12); }
.site-header--solid .lang-switch__btn.is-active{
  opacity:1; filter:none; border-bottom:0;
  box-shadow:0 0 0 2px var(--cream), 0 0 0 3.5px var(--green);   /* a ring marks the language in use */
}
.site-header--solid .burger span{ background:var(--green-deep); }

.site-header--solid .header-cta{
  font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.25vw,18px); letter-spacing:.01em;
  background:var(--green); color:var(--chartreuse);
}
.site-header--solid .header-cta:hover{ background:var(--apple); color:var(--cream); }
@media (max-width:900px){
  /* DM Sans capitals run wider than the old condensed face — keep clear of AL / EN / DE */
  .site-header--solid .brand__name{ font-size:.8rem; letter-spacing:.12em; }
}
@media (max-width:360px){
  .site-header--solid .brand__name{ display:none; }   /* the badge alone on the narrowest phones */
}

/* =========================================================
   WHATSAPP — floating button, every page
   ---------------------------------------------------------
   WhatsApp's own green so it is recognised at a glance; the
   label that slides out on hover is set dark-on-cream-free
   (cream on deep green) because white on that green is too
   faint to read as text. Touch screens get the icon alone.
   ========================================================= */
.wa-float{
  position:fixed; z-index:90;
  right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px -8px rgba(19,44,27,.6), 0 2px 6px rgba(0,0,0,.2);
  animation:wa-in .7s var(--ease) 1.6s backwards;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 32px -10px rgba(19,44,27,.65), 0 3px 8px rgba(0,0,0,.2);
}
.wa-float__label{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translate(6px,-50%); opacity:0; pointer-events:none;
  white-space:nowrap;
  font-family:var(--sans); font-weight:500; font-size:13px;
  background:var(--green-deep); color:var(--cream);
  padding:8px 13px; border-radius:4px;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{ opacity:1; transform:translate(0,-50%); }
@keyframes wa-in{ from{ opacity:0; transform:translateY(18px) scale(.85); } to{ opacity:1; transform:none; } }
@media (hover:none){ .wa-float__label{ display:none; } }
@media print{ .wa-float{ display:none; } }

@media (max-width:900px){
  .site-header--solid .lang-switch{ gap:6px; }
  .site-header--solid .lang-switch__btn{ padding:4px; }     /* bigger tap targets */
  .site-header--solid .lang-switch__btn .flag{ width:24px; height:24px; }
}

/* The full menu needs a wide screen. Below 1180px — tablets, phones turned
   sideways, phones in "desktop site" mode — it folds into the hamburger.
   (Kept at the end of the file: the base .burger{display:none} above must
   not win over it.) */
@media (max-width:1180px){
  .site-nav{ display:none; }
  .burger{ display:block; }
  .header-tools{ margin-left:auto; }
}
@media (max-width:900px){
  /* phones: no Reserve block in the bar — the WhatsApp button and the
     booking section do that job — so the bar needs its own right margin */
  .header-cta{ display:none; }
  .site-header__inner{ padding-right:16px; }
}
@media (max-width:760px){
  /* phones: lift the slider controls above the WhatsApp button and give
     the progress bars the full width */
  .slider-ui{ right:var(--pad); bottom:92px; }
  .slide{ padding-bottom:190px; }
}

/* Villa hero — the drawing sits on the brand green inside the cream frame,
   and the name reads "Villa Melaverde": the script word leads, so it is
   written first and the name follows. */
.hero--drawing .hero__frame{ background:var(--green); }
.hero__name--lead .hero__script{ animation-delay:.3s; animation-duration:1.1s; }
.hero__name--lead .hero__title{  animation-delay:1.15s; }
@media (max-width:620px){
  .hero__name--lead .hero__script{ width:100%; text-align:left; margin:0 0 -.25em; }
}

/* =========================================================
   GUEST PICKER
   ---------------------------------------------------------
   Restaurant: a table drawn from above in the site's line
   style. Empty chairs are dashed; tap one and a guest sits
   down with a plate set in front of them. Villa: the same
   idea with standing figures.
   ========================================================= */
.picker{ margin:4px 0 6px; }
.picker__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap;
  margin-bottom:6px;
}
.picker__count{ font-family:var(--display); font-size:1.45rem; line-height:1.1; color:var(--green-deep); }
.picker__hint{ font-size:12px; line-height:1.5; color:var(--on-cream-dim); }
.picker__big{ margin-top:6px; font-size:12.5px; color:var(--green); }

.table-svg{ display:block; width:100%; height:auto; overflow:visible; user-select:none; -webkit-user-select:none; }
.table-svg .tbl{ fill:var(--cream-hi); stroke:var(--green); stroke-width:1.6; }
.table-svg .deco{ fill:none; stroke:var(--green); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.65; }

.seat{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.seat__hit{ fill:transparent; }
.seat__in{ transform-box:fill-box; transform-origin:center; transition:transform .3s var(--ease); }
.seat:hover .seat__in, .seat:focus-visible .seat__in{ transform:scale(1.08); }
.seat .chair{
  fill:transparent; stroke:var(--green); stroke-width:1.4; stroke-dasharray:3 3; opacity:.55;
  transition:fill .35s var(--ease), opacity .35s var(--ease);
}
.seat.is-on .chair{ fill:var(--chartreuse); stroke:var(--green-deep); stroke-dasharray:none; opacity:1; }
.seat .who{ fill:var(--cream-hi); stroke:var(--green-deep); stroke-width:1.4; stroke-linecap:round; }
.seat .plate{ fill:#fff; stroke:var(--green); stroke-width:1.2; stroke-linecap:round; }
.seat .who, .seat .plate{ opacity:0; transition:opacity .35s var(--ease); }
.seat.is-on .who, .seat.is-on .plate{ opacity:1; }
.seat:focus-visible .chair{ stroke:var(--apple); stroke-width:2; opacity:1; }

.people{ display:flex; flex-wrap:wrap; gap:4px 6px; }
.person{
  width:44px; height:62px; padding:4px; border:0; border-radius:8px; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease);
}
.person svg{ display:block; width:100%; height:100%; overflow:visible; }
.person .fig{
  fill:transparent; stroke:var(--green); stroke-width:1.6; stroke-dasharray:3 3; opacity:.5;
  transition:fill .3s var(--ease), opacity .3s var(--ease);
}
.person.is-on .fig{ fill:var(--green); stroke:var(--green-deep); stroke-dasharray:none; opacity:1; }
.person:hover{ transform:translateY(-3px); }
.person:focus-visible{ outline:1.5px solid var(--apple); outline-offset:2px; }

/* the last guest can't be taken away — a small shake says so */
.is-nope .seat__in, .person.is-nope svg{ animation:nope .4s var(--ease); }
@keyframes nope{ 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }

/* =========================================================
   PHONES — nothing zooms, blurs or rises as you scroll
   ---------------------------------------------------------
   The scroll reveals stay on desktop; on a phone they read as
   the page zooming, so there content is simply in place. The
   hero's written-in name is not a scroll effect and stays.
   ========================================================= */
@media (max-width:900px){
  [data-reveal], .rv-w{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important; animation:none !important;
  }
  .eyebrow[data-reveal]{ letter-spacing:.17em; }
  .pd__label[data-reveal]{ letter-spacing:.24em; }
}
/* touch screens: a finger scrolling across a photo or a button must not
   leave it stuck in its hover state — which is a zoom for these */
@media (hover:none), (pointer:coarse){
  .mono__figure:hover img,
  .slider-arrow:hover,
  .wa-float:hover,
  .person:hover,
  .site-header--solid .lang-switch__btn:hover,
  .seat:hover .seat__in{ transform:none; }
}

/* =========================================================
   EMBLEM — the arch-and-tree mark from the logo, as a vector
   (assets/logo/melaverde-emblem-*.svg). It is taller than it
   is wide and must not be cropped round like the old badge.
   ========================================================= */
.brand__logo img.emblem{ width:38px; height:43px; border-radius:0; object-fit:contain; }
.brand__logo--lg img.emblem{ width:clamp(64px,7vw,84px); height:auto; }
@media (max-width:900px){
  .brand__logo img.emblem{ width:32px; height:36px; }
}

/* the emblem carries no lettering (the old badge did), so the footer names it */
.brand--footer .brand__logo:not(.is-missing) + .brand__name--fallback{
  display:block;
  font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream);
}

/* =========================================================
   LOGO — logo.png, trimmed (assets/logo/logo.png, and a cream
   copy for the dark footer)
   ========================================================= */
.brand__logo-img{ display:block; height:40px; width:auto; }
.brand__logo-img--footer{ height:clamp(52px,5vw,68px); }
@media (max-width:900px){ .brand__logo-img{ height:32px; } }

/* =========================================================
   OPEN SIGN — letters on hanging cards, like a shop's paper
   "OPEN" sign on string, hung from the top of the hero photo
   ========================================================= */
/* The sign hung inside the hero, over the photograph. It lives in the
   footer now — one place, where someone actually goes looking for hours,
   and nothing floating over the page. */
.open-sign{
  position:static; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start;
}
.open-sign--footer{ align-items:flex-end; }
.open-sign--footer .open-sign__note{ align-self:flex-end; }
.open-sign__cards{ display:flex; align-items:flex-start; gap:clamp(3px,.45vw,6px); }
.open-sign .card{
  --hang:clamp(14px,1.6vw,20px);
  position:relative; display:grid; place-items:center;
  width:clamp(28px,2.9vw,42px); height:clamp(38px,3.9vw,56px);
  margin-top:calc(var(--hang) + 6px);
  background:#F7F2E8; color:var(--green-deep);
  font-family:var(--sans); font-weight:700; font-size:clamp(1.15rem,1.95vw,1.85rem); line-height:1;
  border-radius:2px;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.7);
  transform-origin:50% calc(-1 * var(--hang));        /* it swings from the top of its string */
  transform:rotate(var(--r,0deg));
  animation:card-sway 5.5s ease-in-out infinite; animation-delay:var(--d,0s);
}
.open-sign .card::before, .open-sign .card::after{
  content:""; position:absolute; top:4px; width:4px; height:4px; border-radius:50%;
  background:rgba(19,44,27,.4);                       /* the punched holes */
}
.open-sign .card::before{ left:4px; }
.open-sign .card::after{ right:4px; }
.open-sign .card__loop{                               /* the string, hole to hole */
  position:absolute; left:5px; right:5px;
  top:calc(-1 * var(--hang)); height:calc(var(--hang) + 7px);
  border:1.5px solid rgba(247,242,232,.95); border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
@keyframes card-sway{
  0%,100%{ transform:rotate(var(--r,0deg)); }
  50%{ transform:rotate(calc(var(--r,0deg) * -.55)); }
}
.open-sign__note{
  display:inline-block; margin-top:9px;
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.05em;
  color:var(--cream); background:rgba(19,44,27,.8); padding:5px 11px; border-radius:999px;
}
.open-sign.is-closed .card{ background:#EDE7DC; color:rgba(19,44,27,.8); }   /* muted, still readable */
.open-sign.is-soon .open-sign__note{ background:rgba(150,96,18,.88); }
@media (max-width:620px){
  .open-sign .card{ width:25px; height:34px; font-size:1.05rem; }
  .open-sign--footer{ align-items:flex-start; }
  .open-sign--footer .open-sign__note{ align-self:flex-start; }
}

/* the same status as a line under the opening hours */
.open-line{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:.9rem; color:var(--cream); }
.open-line__dot{ width:9px; height:9px; border-radius:50%; background:#8F9A93; flex:none; }
.open-line.is-open .open-line__dot{ background:#3CC061; animation:open-pulse 2.4s var(--ease) infinite; }
.open-line.is-soon .open-line__dot{ background:#E0A43A; animation:none; }
@keyframes open-pulse{
  0%{ box-shadow:0 0 0 0 rgba(60,192,97,.5); }
  70%{ box-shadow:0 0 0 8px rgba(60,192,97,0); }
  100%{ box-shadow:0 0 0 0 rgba(60,192,97,0); }
}

/* =========================================================
   BACK TO TOP — above the WhatsApp button; bottom-left on
   phones, clear of WhatsApp and the slider controls
   ========================================================= */
.to-top{
  position:fixed; z-index:90;
  right:calc(clamp(16px,2vw,28px) + 6px); bottom:calc(clamp(16px,2vw,28px) + 70px);
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream); color:var(--green-deep); border:1px solid var(--line-cream);
  box-shadow:0 10px 24px -12px rgba(19,44,27,.55);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
.to-top.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--chartreuse); }
.to-top svg{ width:18px; height:18px; }
@media (max-width:760px){ .to-top{ right:auto; left:16px; bottom:16px; } }
@media print{ .to-top{ display:none; } }

/* =========================================================
   REVIEWS — the Google rating, and real quotes if supplied
   ========================================================= */
.reviews{ background:var(--green); color:var(--cream); padding-block:var(--sec-y); }
.reviews__top{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,5vw,80px); align-items:end;
}
.rating{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); }
.rating__num{
  font-family:var(--display); font-size:clamp(4.2rem,9vw,8rem);
  line-height:.8; letter-spacing:-.03em; color:var(--cream);
}
.rating__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.stars{ position:relative; display:inline-block; font-size:clamp(1.2rem,1.8vw,1.6rem); letter-spacing:.12em; line-height:1; }
.stars__base{ color:rgba(244,237,225,.25); }
.stars__fill{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--chartreuse); }
.rating__count{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-dim); }
.rating__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.reviews .link-underline{ color:var(--cream); }
.reviews__quotes{ margin-top:clamp(40px,5vw,70px); border-top:1px solid var(--line-dark); padding-top:clamp(28px,3.4vw,44px); }
.review__stars{ color:var(--chartreuse); letter-spacing:.14em; margin-bottom:16px; }
.review__text{
  margin:0; max-width:36ch;
  font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.3; color:var(--cream);
}
.review__by{ margin-top:18px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--chartreuse); }
.reviews__nav{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.reviews__count{ font-family:var(--display); font-size:1.3rem; min-width:4.5ch; text-align:center; }
@media (max-width:900px){ .reviews__top{ grid-template-columns:1fr; align-items:start; } }

/* =========================================================
   INSTAGRAM — six photos from the feed, each opens the profile
   ========================================================= */
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(6px,.8vw,10px); }
.ig-tile{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--green-dark); }
.ig-tile img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ig-tile__icon{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; background:rgba(19,44,27,.45); opacity:0; transition:opacity .35s var(--ease);
}
.ig-tile__icon svg{ width:30px; height:30px; }
.ig-tile:hover img{ transform:scale(1.05); }
.ig-tile:hover .ig-tile__icon, .ig-tile:focus-visible .ig-tile__icon{ opacity:1; }
@media (hover:none), (pointer:coarse){ .ig-tile:hover img{ transform:none; } }

/* =========================================================
   VILLA — THE FACTS
   ---------------------------------------------------------
   The numbers a guest checks before they write: how many
   people, how many rooms, whether there is a pool. A dark
   band between the cream hero and the cream cards, so the
   figures read as the page's one piece of hard information.
   ========================================================= */
.facts{
  background:var(--green-dark);
  color:var(--on-dark);
  padding-block:clamp(54px,7vw,104px);
}
.facts__head{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(20px,4vw,70px); align-items:end;
  margin-bottom:clamp(34px,4.6vw,64px);
}
.facts__head .display{ font-size:clamp(2.05rem,4vw,3.6rem); }
.facts__head .display em{ padding-inline:.04em .16em; }
.facts__lede{
  font-size:clamp(.92rem,1.05vw,1rem); line-height:1.8;
  color:var(--on-dark-dim); max-width:52ch; padding-bottom:.4em;
}

.facts__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,22px);
}
.fact{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:clamp(20px,2vw,28px) clamp(16px,1.6vw,24px);
  border:1px solid var(--line-dark);
  background:rgba(228,239,166,.035);
}
.fact__icon{ color:var(--chartreuse); margin-bottom:clamp(12px,1.4vw,20px); }
.fact__icon svg{ width:clamp(26px,2.4vw,32px); height:clamp(26px,2.4vw,32px); }
.fact__big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.45rem); line-height:1.2;
  color:var(--cream);
}
.fact__sub{
  font-size:.74rem; letter-spacing:.06em; text-transform:lowercase;
  color:var(--on-dark-dim);
}

/* the smaller comforts — a row of ticks, not a second table */
.facts__am{
  margin-top:clamp(28px,3.4vw,48px);
  padding-top:clamp(24px,2.8vw,38px);
  border-top:1px solid var(--line-dark);
}
.facts__am-title{
  font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--chartreuse); margin-bottom:clamp(14px,1.6vw,20px);
}
.am{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,14px); }
.am__item{
  display:flex; align-items:center; gap:9px;
  padding:9px 16px 9px 13px;
  border:1px solid var(--line-dark); border-radius:999px;
  font-size:.82rem; color:var(--cream);
}
.am__item svg{ width:17px; height:17px; flex:none; color:var(--chartreuse); }
.facts__times{
  margin-top:clamp(16px,1.8vw,22px);
  font-size:.82rem; color:var(--on-dark-dim);
}

@media (max-width:1080px){
  .facts__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .facts__head{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:620px){
  .facts__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .fact{ padding:16px 14px; }
  .fact__icon{ margin-bottom:10px; }
}

/* =========================================================
   VILLA — THE PHOTOGRAPHS
   ---------------------------------------------------------
   One lead picture and five around it. The grid keeps its
   shape on a laptop and folds to two columns on a phone;
   every frame crops rather than stretches.
   ========================================================= */
.vgal-sec{
  background:var(--green-deep);
  padding-block:var(--sec-y);
}
.vgal__head{ margin-bottom:clamp(30px,4vw,54px); }
.vgal__head .display{ font-size:clamp(2.05rem,4vw,3.6rem); }
.vgal__head .display em{ padding-inline:.04em .16em; }

/* the photographs are laid out like prints dropped on a table: white
   borders, a heavier margin under each for the handwritten name, and
   every one tilted a different way. Hovering straightens a print,
   lifts it and brings it to the front. */
.vgal__prints{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(6px,1.4vw,26px);
}
.print{
  position:relative; margin:0;
  width:clamp(190px,25vw,344px);
  background:#fff; padding:11px 11px 46px;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.print img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.print figcaption{
  position:absolute; left:0; right:0; bottom:8px;
  font-family:var(--script); font-size:1.5rem; line-height:1;
  color:var(--green); text-align:center;
}

/* each print lies at its own angle; the reveal hands it that angle as it
   arrives, and the hover takes it away again. !important on the delay:
   main.js writes transition-delay inline onto every [data-reveal]. */
.print[data-reveal]{
  transition:opacity .9s var(--ease), transform .7s var(--ease),
             filter .9s var(--ease), box-shadow .55s var(--ease);
}
.print:nth-child(1){ --tilt:-4.5deg; --drop:0px; }
.print:nth-child(2){ --tilt:2.5deg;  --drop:16px; }
.print:nth-child(3){ --tilt:-1.5deg; --drop:0px; }
.print:nth-child(4){ --tilt:3.5deg;  --drop:10px; }
.print:nth-child(5){ --tilt:-3deg;   --drop:0px; }
.print:nth-child(6){ --tilt:1.5deg;  --drop:18px; }
.print[data-reveal].is-in{ transform:rotate(var(--tilt)) translateY(var(--drop)); }
.print:nth-child(1)[data-reveal]{ transition-delay:0ms   !important; }
.print:nth-child(2)[data-reveal]{ transition-delay:90ms  !important; }
.print:nth-child(3)[data-reveal]{ transition-delay:180ms !important; }
.print:nth-child(4)[data-reveal]{ transition-delay:270ms !important; }
.print:nth-child(5)[data-reveal]{ transition-delay:360ms !important; }
.print:nth-child(6)[data-reveal]{ transition-delay:450ms !important; }

.print:hover,
.print[data-reveal].is-in:hover{
  transform:rotate(0deg) translateY(-10px) scale(1.05);
  box-shadow:0 26px 54px rgba(0,0,0,.45);
  z-index:5;
}
.print:focus-within{ z-index:5; }

@media (max-width:900px){
  .print{ width:clamp(170px,30vw,260px); padding:9px 9px 40px; }
  .print figcaption{ font-size:1.3rem; }
}
@media (max-width:620px){
  .vgal__prints{ gap:10px; }
  .print{ width:calc(50% - 5px); padding:8px 8px 34px; }
  .print figcaption{ font-size:1.15rem; bottom:6px; }
}
@media (prefers-reduced-motion:reduce){
  .print[data-reveal].is-in{ transform:rotate(var(--tilt)); }
  .print:hover,
  .print[data-reveal].is-in:hover{ transform:rotate(var(--tilt)); }
}

/* =========================================================
   VILLA — ON AIRBNB
   ---------------------------------------------------------
   A link to Melaverde's own listing. The Airbnb name and
   mark belong to Airbnb, Inc.; they sit here only to point
   at that listing, never as a badge of partnership.
   ========================================================= */
/* ---------------------------------------------------------
   The listing, inside the photographs
   ---------------------------------------------------------
   More pictures of the house live on Airbnb, so the link to
   it sits under the grid rather than in a band of its own:
   the mark, one sentence and a quiet link on the left, the
   booking button on the right. No frame around any of it.
   --------------------------------------------------------- */
.vgal__foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,3.6vw,52px);
  padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line-dark);
}
.vgal__foot-text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.vgal__foot .abnb__mark img{ width:clamp(104px,10vw,132px); height:auto; }
.vgal__foot-body{
  font-size:.86rem; line-height:1.8; color:var(--on-dark-dim); max-width:56ch;
}
.vgal__foot-link{ font-size:.86rem; color:var(--chartreuse); }
.vgal__foot-cta{ flex:none; }

@media (max-width:760px){
  .vgal__foot{ flex-direction:column; align-items:stretch; }
  .vgal__foot-cta{ align-self:flex-start; }
}

/* =========================================================
   VILLA — THE TEASER on the restaurant's page
   ---------------------------------------------------------
   Built like the private-dining split: photograph on one
   side, the three numbers and a door on the other.
   ========================================================= */
.vteaser{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--green-dark); color:var(--on-dark);
}
.vteaser__media{ overflow:hidden; }
.vteaser__media img{ width:100%; height:100%; object-fit:cover; min-height:clamp(300px,42vw,560px); }
.vteaser__text{
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(20px,2.6vw,36px);
  padding:clamp(40px,5.5vw,92px) clamp(24px,4.5vw,76px);
}
.vteaser__text .display{ font-size:clamp(1.9rem,3.2vw,3rem); }
.vteaser__text .display em{ padding-inline:.04em .16em; }
.vteaser__body{
  font-size:clamp(.92rem,1.05vw,1rem); line-height:1.8;
  color:var(--on-dark-dim); max-width:50ch;
}
.vteaser__facts{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin:clamp(18px,2vw,26px) 0;
}
.vteaser__facts li{
  padding:7px 15px; border:1px solid var(--line-dark); border-radius:999px;
  font-size:.78rem; letter-spacing:.02em; color:var(--chartreuse);
}
@media (max-width:900px){
  .vteaser{ grid-template-columns:1fr; }
  .vteaser__media img{ min-height:clamp(240px,52vw,380px); }
}

/* =========================================================
   THE HERO'S TWO DOORS — the menu and the villa
   ---------------------------------------------------------
   No panels and no buttons: each door is a drawn mark with
   its name under it and one line under that, sitting on the
   page's own cream. The only movement is the mark lifting.
   ========================================================= */
.hero-doors{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,44px); width:100%;
}
.hero-door{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:2px; color:var(--on-cream); padding-top:6px;
}
.hero-door__mark{
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:clamp(10px,1.2vw,16px);
  transition:transform .55s var(--ease);
}
/* the flex child here is <picture>, not <img> — a percentage height on the
   image would resolve against an auto-height parent and let the drawing
   overflow at its natural size. The height goes on the image itself. */
.hero-door__mark picture{ display:block; }
.hero-door__mark img{ height:clamp(54px,5.2vw,76px); width:auto; }
.hero-door:hover .hero-door__mark{ transform:translateY(-6px); }

.hero-door__label{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(.7rem,.8vw,.8rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--green); padding:0 0 3px .24em;   /* the tracking needs the last letter back */
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease);
}
.hero-door:hover .hero-door__label{ border-bottom-color:var(--green); }

/* it arrives after the hero has finished writing itself */
.hero--framed .hero-doors[data-reveal]{ transition-delay:2.55s !important; }

@media (max-width:900px){
  .hero-doors{ max-width:460px; gap:26px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-door:hover .hero-door__mark{ transform:none; }
}

/* ---------------------------------------------------------
   The chef, under the navigation
   ---------------------------------------------------------
   The right-hand column ran out of content halfway down. The
   portrait fills it and keeps the block's black and white.
   --------------------------------------------------------- */
.mono__figure--chef{ margin-top:clamp(30px,4vw,54px); }
.mono__figure--chef img{ aspect-ratio:4 / 5; }
.mono__cap{
  margin-top:12px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-cream-dim);
}
@media (max-width:760px){
  .mono__figure--chef{ display:none; }   /* the block is long enough on a phone */
}

/* =========================================================
   THE VILLA'S HERO IS A DRAWING, NOT A PHOTOGRAPH
   ---------------------------------------------------------
   The orchard is supplied as a transparent sketch, so it
   sits straight on the page's cream with nothing behind it.
   Width leads: the drawing runs the full width of the frame
   and its own proportions set the height. A max-height here
   would shrink the picture and leave cream down both sides.
   ========================================================= */
.hero--drawing .hero__frame{
  background:var(--cream);
  height:auto;
  overflow:visible;
}
.hero--drawing .hero__media{ position:relative; inset:auto; z-index:0; }
.hero--drawing .hero__media img{
  width:100%; height:auto; max-width:none; max-height:none;
  object-fit:contain;
}
.hero--drawing .hero__frame::after{ display:none; }
@media (max-width:900px){
  .hero--drawing .hero__media img{ width:100%; }
}

/* ---------------------------------------------------------
   The facts band, asked for in plain white: the numbers are
   the one thing on this page a guest is scanning for, so
   every word in the section is set at full strength and the
   line art keeps the only colour.
   --------------------------------------------------------- */
.facts .eyebrow,
.facts .display,
.facts .display em,
.facts__lede,
.facts .fact__big,
.facts .fact__sub,
.facts__am-title,
.facts .am__item,
.facts__times{ color:#FFFFFF; }

/* the Airbnb sentence sits on the dark green with the photographs,
   where black cannot be read — it takes the same full white */
.vgal__foot-body,
.vgal__foot-link{ color:#FFFFFF; }

/* ---------------------------------------------------------
   The fact boxes, animated
   ---------------------------------------------------------
   They arrive one after another, left to right, each rising
   a little further than the plain reveal and settling from a
   hair under full size. The stagger has to be !important:
   main.js writes a transition-delay straight onto every
   [data-reveal], and an inline style would otherwise win.
   --------------------------------------------------------- */
.facts__grid .fact[data-reveal]{
  transform:translateY(30px) scale(.97);
  transition:opacity .85s var(--ease), transform .85s var(--ease),
             filter .85s var(--ease), border-color .5s var(--ease),
             background-color .5s var(--ease);
}
.facts__grid .fact[data-reveal].is-in{ transform:none; }
.facts__grid .fact:nth-child(1)[data-reveal]{ transition-delay:0ms !important; }
.facts__grid .fact:nth-child(2)[data-reveal]{ transition-delay:110ms !important; }
.facts__grid .fact:nth-child(3)[data-reveal]{ transition-delay:220ms !important; }
.facts__grid .fact:nth-child(4)[data-reveal]{ transition-delay:330ms !important; }
.facts__grid .fact:nth-child(5)[data-reveal]{ transition-delay:440ms !important; }

.fact:hover{
  border-color:rgba(228,239,166,.55);
  background:rgba(228,239,166,.085);
  transform:translateY(-6px);
}
.fact__icon{ transition:transform .55s var(--ease), color .45s var(--ease); }
.fact:hover .fact__icon{ transform:translateY(-2px) scale(1.09); }

.facts__am .am__item{
  transition:border-color .45s var(--ease), background-color .45s var(--ease),
             transform .45s var(--ease);
}
.facts__am .am__item:hover{
  border-color:rgba(228,239,166,.55);
  background:rgba(228,239,166,.085);
  transform:translateY(-2px);
}

@media (prefers-reduced-motion:reduce){
  .facts__grid .fact[data-reveal]{ transform:none; }
  .fact:hover,
  .facts__am .am__item:hover{ transform:none; }
  .fact:hover .fact__icon{ transform:none; }
}

/* the restaurant's hero carries two marks side by side, so its aside needs
   more room than the villa's single line of text */
/* the two marks are a centred pair, so the line above them is centred on
   the same axis and the whole block reads as one object. The right inset
   keeps the second label clear of the floating WhatsApp button. */
.hero--framed .hero__aside--doors{
  max-width:clamp(300px,26vw,380px);
  align-items:center; text-align:center;
  padding-right:clamp(0px,4vw,62px);
}
.hero--framed .hero__aside--doors .hero__lede{ max-width:26ch; }
@media (max-width:900px){
  .hero--framed .hero__aside--doors{
    max-width:none; align-items:flex-start; text-align:left;
    padding-right:0;
  }
  .hero--framed .hero__aside--doors .hero__lede{ max-width:none; }
  .hero-doors{ margin-inline:auto; }
}

/* the bar shelf in the middle of the private-dining column — it fills the
   gap the layout leaves between the heading and the body */
.pd__art{ margin:0; align-self:stretch; }
.pd__art img{
  width:100%; max-width:440px; height:auto;
  opacity:.92;
}
@media (max-width:900px){
  .pd__art img{ max-width:380px; }
}

/* =========================================================
   A LITTLE LARGER ON THE DESKTOP
   ---------------------------------------------------------
   Everything on the page is sized in rem or in clamp(), so
   lifting the root a single step scales the whole scale at
   once rather than one rule at a time. The clamp ceilings
   still cap the display type, so only the small copy —
   body, ledes, captions, links — really grows.
   ========================================================= */
@media (min-width:1200px){
  html{ font-size:17px; }
  body{ font-size:1rem; }
}
@media (min-width:1600px){
  html{ font-size:17.5px; }
}

/* ---------------------------------------------------------
   Grid and flex items do not shrink below their content's
   intrinsic width unless told to. An <img> inside one still
   reports its natural pixel width as a minimum, which can
   push a single-column phone layout wider than the screen.
   These are guards, not fixes for a known break.
   --------------------------------------------------------- */
.kitchen__row > *,
.kitchen__photo,
.kitchen__panel,
.vgal__prints > *,
.vteaser > *,
.pd > *,
.facts__grid > *{ min-width:0; }
.kitchen__photo picture,
.kitchen__panel picture,
.pd__art picture{ max-width:100%; }

/* =========================================================
   HERO · SPLIT
   ---------------------------------------------------------
   The photograph on the left, one at a time, with the line
   in the top corner and the count in the bottom one. The
   green panel on the right carries the navigation along its
   top and the name across its foot — on the restaurant page
   this panel IS the header. (The villa page keeps its own.)
   ========================================================= */
.hsplit{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  height:100svh; min-height:640px; max-height:1080px;
  background:var(--green-deep);
}
.hsplit__photo{ position:relative; overflow:hidden; isolation:isolate; background:#0E1D13; }
.hsplit__slide{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1.4s var(--ease); }
.hsplit__slide.is-active{ opacity:1; }
.hsplit__slide img{ display:block; width:100%; height:100%; object-fit:cover; }
/* just enough shade in the two corners the type sits in, on any photograph */
.hsplit__photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(78% 40% at 0% 0%,   rgba(6,14,9,.62), transparent 70%),
    radial-gradient(60% 28% at 0% 100%, rgba(6,14,9,.55), transparent 70%);
}
.hsplit__tag, .hsplit__count{
  position:absolute; z-index:2; left:clamp(24px,2.6vw,44px);
  font-family:var(--display); font-weight:400; color:#FBF8F2;
  text-transform:uppercase; letter-spacing:.005em;
}
.hsplit__tag{
  top:clamp(30px,4.6vh,48px); margin:0;
  font-size:clamp(1.3rem,1.85vw,1.9rem); line-height:1.02;
}
.hsplit__tag em{ font-style:italic; }
.hsplit__count{
  bottom:clamp(26px,4.4vh,46px);
  font-size:clamp(1.5rem,2.05vw,2.05rem); line-height:1;
  background:none; border:0; padding:4px 0; cursor:pointer;
  transition:color .3s var(--ease);
}
.hsplit__count:hover, .hsplit__count:focus-visible{ color:var(--chartreuse); }

.hsplit__panel{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(30px,4.6vh,48px) clamp(24px,2.6vw,44px) clamp(26px,4vh,42px);
  color:#FBF8F2;
}
.hsplit__head{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.hsplit__top{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(22px,2.8vw,44px); }
.hsplit__nav{ display:flex; align-items:center; gap:clamp(20px,2.6vw,42px); }
.hsplit__nav a, .hsplit__pill{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,1.24vw,19.5px); letter-spacing:.01em; line-height:1;
}
.hsplit__nav a{ position:relative; padding:6px 0; color:#FBF8F2; transition:color .3s var(--ease); }
.hsplit__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.hsplit__nav a:hover, .hsplit__nav a:focus-visible{ color:var(--chartreuse); }
.hsplit__nav a:hover::after, .hsplit__nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.hsplit__pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 2.5em; border-radius:999px;
  background:#FBF8F2; color:var(--green-deep);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.hsplit__pill:hover, .hsplit__pill:focus-visible{ background:var(--chartreuse); }

/* the three flags, quiet under the button */
.hsplit__lang{ display:flex; gap:10px; }
.hsplit__lang .lang-switch__btn{
  display:grid; place-items:center; padding:3px; border:0; border-radius:50%;
  opacity:.5; filter:saturate(.35);
  transition:opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hsplit__lang .lang-switch__btn .flag{ display:block; width:20px; height:20px; border-radius:50%; }
.hsplit__lang .lang-switch__btn:hover{ opacity:1; filter:none; transform:scale(1.1); }
.hsplit__lang .lang-switch__btn.is-active{
  opacity:1; filter:none; border-bottom:0;
  box-shadow:0 0 0 2px var(--green-deep), 0 0 0 3.5px var(--chartreuse);
}

.hsplit__name{ margin:0; font-weight:400; line-height:0; }
.hsplit__name img{ display:block; width:100%; height:auto; }

/* the menu's own close button — the header that used to carry the X is gone */
.mobile-menu__close{
  position:absolute; top:14px; right:12px; z-index:2;
  width:46px; height:46px; background:none; border:0; cursor:pointer;
}
.mobile-menu__close span{
  position:absolute; left:11px; right:11px; top:50%; height:1.5px; background:var(--cream);
}
.mobile-menu__close span:first-child{ transform:rotate(45deg); }
.mobile-menu__close span:last-child{ transform:rotate(-45deg); }

@media (max-width:900px){
  .hsplit{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; }
  .hsplit__photo{ height:66svh; min-height:400px; max-height:660px; }
  /* shade the top-right corner too — the button and the menu sit there now */
  .hsplit__photo::after{
    background:
      radial-gradient(80% 36% at 0% 0%,   rgba(6,14,9,.62), transparent 70%),
      radial-gradient(70% 30% at 100% 0%, rgba(6,14,9,.55), transparent 70%),
      radial-gradient(70% 26% at 0% 100%, rgba(6,14,9,.55), transparent 70%);
  }
  .hsplit__panel{ padding:22px 18px 28px; gap:26px; }
  /* the bar moves onto the photograph, top right: the button and the menu */
  .hsplit__top{ position:absolute; z-index:5; top:16px; right:14px; gap:14px; }
  .hsplit__nav{ display:none; }
  .hsplit__pill{ font-size:13.5px; padding:.95em 1.5em; }
  .hsplit__burger{ display:block; }
  .hsplit__head{ align-items:flex-start; }
  .hsplit__lang .lang-switch__btn{ padding:6px; }
  .hsplit__tag{ top:22px; left:18px; font-size:1.25rem; }
  .hsplit__count{ left:18px; bottom:16px; font-size:1.45rem; }
}

/* =========================================================
   FOOTER
   ---------------------------------------------------------
   Sage — the colour of the linen on Melaverde's tables —
   with a scalloped edge hanging from the green section above.
   The pages run down the left in large serif capitals; the
   stamp, the address and the numbers sit on the right; the
   wordmark closes the page in the bottom corner.
   ========================================================= */
:root{ --sage-light:#879A85; --sage-ink:#132C1B; }
.mfoot{
  position:relative;
  background:var(--sage-light); color:var(--sage-ink);
  padding:clamp(62px,6.4vw,92px) 0 clamp(24px,2.8vw,38px);
}
.mfoot::before{                      /* scallops, in the colour of the section above */
  content:""; position:absolute; left:0; right:0; top:0; height:15px;
  background:radial-gradient(circle at 50% 0, var(--green-dark) 15px, transparent 15.5px) 0 0 / 30px 15px repeat-x;
}
.mfoot__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr auto;
  column-gap:clamp(30px,5vw,80px);
}
.mfoot__nav{ grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(2px,.4vw,6px); }
.mfoot__nav a{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,3.5vw,3.4rem); line-height:1.08; letter-spacing:.005em;
  color:var(--sage-ink);
  transition:transform .35s var(--ease);
}
/* the word leans into italic and steps forward — the display face has a real italic */
.mfoot__nav a:hover, .mfoot__nav a:focus-visible{ font-style:italic; transform:translateX(8px); }

.mfoot__side{
  grid-column:2; grid-row:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:clamp(24px,2.8vw,36px);
  text-align:right;
}
.mfoot__stamp{
  display:grid; place-items:center;
  width:clamp(88px,7.2vw,110px); aspect-ratio:1; padding:15%;
  background:url("../logo/stamp.svg") center / 100% 100% no-repeat;
  transition:transform .45s var(--ease);
}
.mfoot__stamp:hover, .mfoot__stamp:focus-visible{ transform:rotate(-5deg) scale(1.04); }
.mfoot__stamp img{ display:block; width:100%; height:auto; }
.mfoot__contact{
  display:flex; flex-direction:column; gap:14px;
  font-style:normal; font-family:var(--sans); font-weight:500;
  font-size:.86rem; line-height:1.55;
}
.mfoot__contact p{ margin:0; }
.mfoot__contact a{ color:inherit; text-underline-offset:3px; }
.mfoot__contact a:hover{ text-decoration:underline; }
.mfoot .open-line{ justify-content:flex-end; margin:0; color:var(--sage-ink); font-size:.86rem; }

.mfoot__base{
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:auto auto auto 1fr; align-items:end;
  column-gap:clamp(24px,5vw,90px);
  margin-top:clamp(44px,5.4vw,78px);
}
.mfoot__small{
  margin:0; padding-bottom:.95em;
  font-family:var(--sans); font-weight:500; font-size:.74rem; line-height:1.4;
  color:var(--sage-ink);
}
a.mfoot__small{ text-underline-offset:3px; }
a.mfoot__small:hover{ text-decoration:underline; }
.mfoot__word{ justify-self:end; width:clamp(220px,27vw,420px); }
.mfoot__word img{ display:block; width:100%; height:auto; }

@media (max-width:760px){
  .mfoot__nav a{ font-size:clamp(1.7rem,8.4vw,2.3rem); }
  /* the stamp stays top right beside the list; the address drops beneath it */
  .mfoot__side{ display:contents; }
  .mfoot__stamp{ grid-column:2; grid-row:1; align-self:start; width:84px; }
  .mfoot__contact{ grid-column:1 / -1; grid-row:2; text-align:right; margin-top:34px; }
  .mfoot__base{ grid-row:3; grid-template-columns:1fr; row-gap:6px; margin-top:30px; }
  .mfoot__word{ grid-row:1; width:min(80%,340px); margin-bottom:24px; }
  .mfoot__small{ padding-bottom:0; }
}

/* =========================================================
   HERO · SPLIT — the villa, in the bar and in the panel
   ========================================================= */
/* the two buttons in the bar share one height */
.hsplit__pill, .hsplit__villa-btn{ height:3.1em; padding-block:0; }
.hsplit__pill{ padding-inline:2.4em; }
.hsplit__villa-btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding-inline:1.1em 1.5em; border:1px solid rgba(251,248,242,.5); border-radius:999px;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,1.24vw,19.5px); letter-spacing:.01em; line-height:1; color:#FBF8F2;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.hsplit__villa-btn picture{ display:block; line-height:0; }
.hsplit__villa-btn img{ display:block; width:auto; height:1.3em; }
.hsplit__villa-btn:hover, .hsplit__villa-btn:focus-visible{ border-color:var(--chartreuse); color:var(--chartreuse); }

@media (max-width:900px){
  .hsplit__villa-btn{ display:none; }            /* no room on the photograph — the panel carries the villa */
  .hsplit__pill{ height:auto; padding:.95em 1.5em; }
}

/* the WhatsApp button waits until the hero has scrolled away: the hero has
   its own Reservations button, and the float would sit on the logotype */
.wa-float{ transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .35s var(--ease); }
body.hero-in-view .wa-float{ opacity:0; transform:translateY(14px) scale(.92); pointer-events:none; }

/* =========================================================
   MOBILE MENU — the logo at its head (restaurant page)
   ========================================================= */
.mobile-menu--solo{ padding-top:64px; }
.mobile-menu__logo{ display:block; width:min(58vw,250px); height:auto; }

/* =========================================================
   VILLA SECTION — on its wallpaper
   ---------------------------------------------------------
   The painting fills the section edge to edge; the villa
   block floats on it as a card, so the landscape shows all
   the way round. A light green wash settles the painting so
   the card reads as the thing in front.
   ========================================================= */
.vteaser--wall{
  position:relative; isolation:isolate; display:block;
  padding:clamp(64px,9vw,150px) var(--pad);
  background:#5E6B4E;                         /* the painting's mid-tone while it loads */
}
.vteaser__wall{ position:absolute; inset:0; z-index:-1; display:block; }
.vteaser__wall img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.vteaser__wall::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,44,27,.14), rgba(19,44,27,.32));
}
.vteaser__card{
  display:grid; grid-template-columns:1fr 1fr;
  max-width:1180px; margin-inline:auto;
  background:var(--green-dark); color:var(--on-dark);
  box-shadow:0 50px 90px -40px rgba(8,16,10,.75), 0 0 0 1px rgba(228,239,166,.12);
}
.vteaser__logo{ display:block; width:clamp(150px,14vw,210px); height:auto; margin-bottom:clamp(18px,2vw,28px); }
@media (max-width:900px){
  .vteaser--wall{ padding:clamp(48px,12vw,72px) 14px; }
  .vteaser__card{ grid-template-columns:1fr; }
}
/* the bar's labels never break — "Rreth nesh", "Über uns" stay on one line */
.hsplit__nav a, .hsplit__pill, .hsplit__villa-btn{ white-space:nowrap; }
/* on the restaurant page the float's timed entrance would fire and then be
   hidden by the hero — so there, the fade above is its only entrance */
.has-hsplit .wa-float{ animation:none; }

/* "Restaurant" — signed under the end of the wordmark in the script face */
.hsplit__name{ position:relative; }
.hsplit__script{
  display:block; text-align:right;
  margin:clamp(-26px,-1.6vw,-10px) clamp(2px,.6vw,10px) 0 0;
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.6rem); line-height:1;
  color:var(--chartreuse);
}
@media (max-width:900px){
  .hsplit__script{ font-size:clamp(1.9rem,9vw,2.8rem); margin-top:-8px; }
}

/* the stamp: bigger, and the badge fills it. (It was collapsing: a percentage
   width inside an auto-sized grid track resolves to almost nothing.) */
.mfoot__stamp{
  display:block;
  width:clamp(118px,10vw,156px); padding:13%;
}
.mfoot__stamp img{ width:100%; height:auto; }
@media (max-width:760px){
  .mfoot__stamp{ width:108px; }
}


/* =========================================================
   VILLA PAGE — the nav bar, built like the restaurant's
   ---------------------------------------------------------
   Same green, same serif capitals, the outlined button with
   its drawing (here: back to the restaurant), the cream pill
   for booking, the flags beneath it. It sits in the page
   flow above the hero rather than floating over it.
   ========================================================= */
.vbar{
  position:relative; z-index:100;              /* the burger's X stays above the open menu */
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:clamp(22px,3vh,34px) clamp(24px,2.6vw,44px) clamp(18px,2.4vh,26px);
  background:var(--green-deep); color:#FBF8F2;
}
.vbar__brand{ display:block; flex:none; line-height:0; padding-top:4px; }
.vbar__brand img{ display:block; width:clamp(150px,13vw,210px); height:auto; }
.vbar__right{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.vbar__row{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); }
.vbar__pill-short{ display:none; }
@media (max-width:900px){
  .vbar{ align-items:center; padding:14px 14px 12px 16px; }
  .vbar__brand img{ width:132px; }
  .vbar__right{ gap:10px; }
  .vbar__row{ gap:14px; }
  .vbar .hsplit__pill{ font-size:13.5px; padding:.95em 1.4em; height:auto; }
  .vbar__pill-full{ display:none; }
  .vbar__pill-short{ display:inline; }
}

/* the villa hero: the painting, hung in the cream mount — the bar is in the
   flow now, so the mount only needs its own margin at the top */
.hero--framed.hero--painting{ padding-top:clamp(10px,1.4vw,18px); }
.hero--painting .hero__media img{ object-position:50% 55%; }
@media (max-width:900px){
  .hero--framed.hero--painting{ padding-top:10px; }
}

/* the stamp carries the swash M, centred */
.mfoot__stamp{ display:grid; grid-template-columns:100%; place-items:center; padding:16%; }
.mfoot__stamp img{ width:100%; height:auto; }
/* the M fills the stamp: square framing, little padding, a bigger stamp */
.mfoot__stamp{ width:clamp(132px,11vw,172px); padding:8%; }
@media (max-width:760px){ .mfoot__stamp{ width:118px; } }

/* the stamp carries the tree emblem from the badge, cropped to fill it.
   The emblem is a little taller than wide, so it is sized by width at 90%
   of the stamp's inner box — that keeps its height inside the square. */
.mfoot__stamp{ padding:6%; }
.mfoot__stamp picture{ display:block; width:90%; line-height:0; }
.mfoot__stamp img{ display:block; width:100%; height:auto; }

/* footer links turn white on hover */
.mfoot__nav a{ transition:transform .35s var(--ease), color .3s var(--ease); }
.mfoot__nav a:hover, .mfoot__nav a:focus-visible{ color:#FFFFFF; }

/* =========================================================
   VILLA SECTION — on the orchard drawing
   ---------------------------------------------------------
   Cream, like the drawing was made for. The drawing runs the
   full width at the foot of the section and the card sits
   over its empty sky — the houses in the orchard stay in
   view just below it.
   ========================================================= */
.vteaser--sketch{
  position:relative; display:block; overflow:hidden;
  padding:clamp(56px,7vw,120px) 0 0;
  background:var(--cream);
}
.vteaser--sketch .vteaser__card{
  position:relative; z-index:2;
  width:min(1180px, calc(100% - 2 * var(--pad))); margin-inline:auto;
}
.vteaser__sketch{
  position:relative; z-index:1; display:block; line-height:0;
  margin-top:-11vw;                      /* the card covers the sky, not the houses */
}
.vteaser__sketch img{ display:block; width:100%; height:auto; }
@media (max-width:900px){
  .vteaser--sketch{ padding-top:48px; }
  .vteaser--sketch .vteaser__card{ width:calc(100% - 28px); }
  /* wider than the screen, so the houses are big enough to read */
  .vteaser__sketch{ width:180vw; margin-left:-40vw; margin-top:-18vw; }
}

/* the "…and plenty more" slide: a sentence, not a dish name — set a size down */
.slide--more .display--xl{ font-size:clamp(2.4rem,6.2vw,6rem); line-height:1.02; max-width:15ch; margin-inline:auto; }
.slide--more .display--xl em{ color:var(--chartreuse); }

/* Instagram: the text, the reel, the photo grid */
.social__grid--reel{
  grid-template-columns:minmax(0,.9fr) minmax(326px,380px) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,56px);
}
.social__reel{ min-width:0; }
.social__reel .instagram-media{ min-width:0 !important; width:100% !important; margin:0 auto !important; }
@media (max-width:1200px){
  .social__grid--reel{ grid-template-columns:1fr 1fr; }
  .social__grid--reel .social__text{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .social__grid--reel{ grid-template-columns:1fr; }
  .social__reel{ width:100%; max-width:400px; justify-self:center; }
}
/* the script line's descenders need room above the sentence under it */
.slide--more .display--xl{ padding-bottom:.22em; }

/* a reel in the Instagram grid carries a small play mark, always visible */
.ig-tile__play{
  position:absolute; top:8px; right:8px; z-index:1;
  width:26px; height:26px; display:grid; place-items:center;
  color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); pointer-events:none;
}
.ig-tile__play svg{ width:18px; height:18px; }
/* the FAQ question sits in <summary>, where only inline content is valid — it is a span, set as a block */
.faq__q{ display:block; }