/* ---------- Tokens ---------- */
:root{
  --bg:        #F6F1E8;
  --bg-deep:   #EDE5D2;
  --paper:    #FBF7EE;
  --sage:      #9CBEB4;
  --sage-deep: #5C8079;
  --sage-ink:  #2C413C;
  --cream:     #F0CF89;
  --cream-deep:#E2B663;
  --ink:       #221F1A;
  --ink-soft:  #5C544A;
  --line:      #E0D7C3;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max:   72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
}

/* ---------- Reset-lite ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--sage-deep) }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:4px }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--gutter);
  z-index:50;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
  background:rgba(246,241,232,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 var(--line);
  padding:.5rem var(--gutter);
}
.brand{
  display:inline-flex; align-items:center; gap:.65rem;
  color:#fff;
  font-family:var(--serif); font-weight:500;
  font-size:1.35rem; letter-spacing:-.01em;
  font-variation-settings: "SOFT" 60;
  transition:color .35s ease;
}
.brand img{ width:40px; height:40px; border-radius:50% }
.site-header.is-scrolled .brand{ color:var(--ink) }

.nav{
  display:flex; gap:1.75rem;
  font-size:.95rem; font-weight:500;
  color:#fff;
  letter-spacing:.01em;
  transition:color .35s ease;
}
.nav a{ position:relative; padding:.4rem 0 }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:.1rem;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.nav a:hover::after{ transform:scaleX(1) }
.nav .lang-switch,
.mobile-nav .lang-switch{
  font-size:.78rem;
  letter-spacing:.18em;
  padding:.25rem .55rem;
  border:1px solid currentColor;
  border-radius:999px;
  margin-left:.5rem;
  opacity:.85;
}
.nav .lang-switch:hover{ opacity:1 }
.nav .lang-switch::after{ display:none }
.site-header.is-scrolled .nav{ color:var(--ink) }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:10px;
  flex-direction:column; justify-content:space-between;
  color:#fff;
}
.nav-toggle span{
  display:block; height:1.5px; background:currentColor; transition:transform .3s, opacity .3s;
  border-radius:2px;
}
.site-header.is-scrolled .nav-toggle{ color:var(--ink) }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg) }

@media (max-width:740px){
  .nav{ display:none }
  .nav-toggle{ display:flex }
}

.mobile-nav{
  position:fixed; inset:0; z-index:40;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem;
  background:var(--bg);
  font-family:var(--serif);
  font-size:2rem;
  font-variation-settings: "SOFT" 80;
}
.mobile-nav.is-open{ display:flex }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 5rem;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  transform:scale(1.04);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(34,31,26,.55) 0%, rgba(34,31,26,.35) 35%, rgba(34,31,26,.65) 100%),
    linear-gradient(105deg, rgba(34,31,26,.55) 0%, rgba(34,31,26,.15) 55%, rgba(34,31,26,0) 100%);
}
.hero__title{
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero__tagline,
.eyebrow{
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.hero__inner{
  max-width:var(--max); margin:0 auto; width:100%;
}
.eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 1.25rem;
  font-weight:500;
  opacity:.95;
}
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(4rem, 14vw, 9rem);
  line-height:.9;
  margin:0 0 1.5rem -.05em;
  letter-spacing:-.04em;
  font-variation-settings: "SOFT" 90, "opsz" 144;
}
.hero__tagline{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.15rem, 2.3vw, 1.55rem);
  line-height:1.45;
  max-width:36rem;
  margin:0 0 2.25rem;
  font-variation-settings: "SOFT" 50, "opsz" 30;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem }
.btn{
  display:inline-block;
  padding:.95rem 1.6rem;
  border-radius:999px;
  font-weight:500;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary{
  background:var(--cream);
  color:var(--ink);
}
.btn--primary:hover{ background:var(--cream-deep); color:var(--ink) }
.btn--ghost{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
}
.btn--ghost:hover{ background:rgba(255,255,255,.1); color:#fff }

.hero__scroll{
  position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);
  width:24px; height:40px;
  border:1px solid rgba(255,255,255,.6); border-radius:14px;
  display:flex; justify-content:center; padding-top:6px;
}
.hero__scroll span{
  width:2px; height:8px; background:#fff; border-radius:2px;
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:1 }
  50%   { transform:translateY(10px); opacity:.2 }
}

/* ---------- Sections ---------- */
section{ scroll-margin-top:5rem }
.section-eyebrow{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage-deep);
  margin:0 0 1rem;
  font-weight:500;
}
.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 5vw, 3.25rem);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 2.5rem;
  font-variation-settings: "SOFT" 70, "opsz" 60;
}

/* ---------- About ---------- */
.about{ padding:8rem var(--gutter) 5rem }
.about__inner{ max-width:46rem; margin:0 auto; text-align:center }
.about__lede{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.5rem, 3.5vw, 2.25rem);
  line-height:1.3;
  letter-spacing:-.015em;
  margin:0;
  color:var(--ink);
  font-variation-settings: "SOFT" 60, "opsz" 60;
}
.about__lede em{
  font-style:italic;
  font-variation-settings: "SOFT" 100, "opsz" 60;
  color:var(--sage-deep);
}

/* ---------- Menu ---------- */
.menu{
  padding:5rem var(--gutter) 7rem;
  background:var(--paper);
  position:relative;
}
.menu::before, .menu::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--line);
}
.menu::before{ top:0 } .menu::after{ bottom:0 }

.menu__inner{ max-width:46rem; margin:0 auto }
.menu .section-eyebrow,
.menu__section-title{ text-align:center }
.menu__section-title{
  font-size:clamp(1.6rem, 3.5vw, 2.25rem);
  margin:0 0 2rem;
}
.menu__section-title + .menu__list{ margin-bottom:2rem }
.menu__list + .menu__section-title{ margin-top:5rem }
.menu__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1.4rem;
}
.menu__desc{
  display:block;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink-soft);
  margin-top:.2rem;
  font-style:italic;
}
.menu__item{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:baseline;
  gap:1rem;
  font-family:var(--serif);
  font-size:clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight:400;
  font-variation-settings: "SOFT" 40, "opsz" 30;
}
.menu__name{ color:var(--ink) }
.menu__leader{
  display:block;
  border-bottom:1px dotted var(--line);
  align-self:end;
  margin-bottom:.45em;
}
.menu__price{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:500;
  color:var(--sage-deep);
  letter-spacing:.01em;
}
.menu__footnote{
  margin:3rem 0 0;
  font-size:.95rem;
  color:var(--ink-soft);
  text-align:center;
  font-style:italic;
}
.menu__footnote a{
  border-bottom:1px solid var(--sage);
}

/* ---------- Gallery ---------- */
.gallery{ padding:7rem var(--gutter) 7rem }
.gallery__head{ max-width:var(--max); margin:0 auto 3rem }
.gallery__grid{
  max-width:var(--max); margin:0 auto;
  column-count:3;
  column-gap:1rem;
}
@media (max-width:900px){ .gallery__grid{ column-count:2 } }
@media (max-width:520px){ .gallery__grid{ column-count:1 } }

.gallery__item{
  display:block;
  break-inside:avoid;
  margin:0 0 1rem;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-deep);
  cursor:zoom-in;
  transition:transform .35s ease, box-shadow .35s ease;
}
.gallery__item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px -10px rgba(34,31,26,.25);
}
.gallery__item img{
  width:100%; height:auto; display:block;
}

/* ---------- Visit ---------- */
.visit{
  background:var(--sage);
  color:var(--sage-ink);
  padding:7rem var(--gutter);
  position:relative;
  overflow:hidden;
}
.visit__inner{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem; align-items:start;
}
@media (max-width:820px){
  .visit__inner{ grid-template-columns:1fr; gap:2.5rem }
}
.visit .section-eyebrow{ color:var(--sage-ink); opacity:.7 }
.visit .section-title{ color:var(--sage-ink) }
.visit__facts{ margin:0; display:flex; flex-direction:column; gap:1.75rem }
.visit__row dt{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.5rem;
  opacity:.7;
  font-weight:500;
}
.visit__row dd{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.2rem;
  line-height:1.55;
  font-variation-settings: "SOFT" 40, "opsz" 30;
}
.visit__hours{ font-variant-numeric:tabular-nums }
.visit__hours span{ display:inline-block; min-width:7.5em }
.visit__socials{ display:flex; gap:1.25rem; font-size:1.1rem }
.visit__socials a{
  border-bottom:1px solid currentColor;
  padding-bottom:.1rem;
}
.visit__map{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio: 4 / 3.2;
  background:rgba(0,0,0,.05);
  box-shadow:0 10px 30px -15px rgba(34,31,26,.3);
}
.visit__map iframe{
  width:100%; height:100%; border:0; display:block;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:#D9D2C5;
  padding:3.5rem var(--gutter);
}
.site-footer__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.site-footer__brand{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--serif); font-size:1.1rem;
  font-variation-settings: "SOFT" 50;
}
.site-footer__brand img{ border-radius:50% }
.site-footer__meta{ font-size:.9rem; color:#A89F8E; margin:0 }
.site-footer__meta a{ border-bottom:1px solid currentColor }

/* ---------- Lightbox ---------- */
.lightbox{
  padding:0; border:0; max-width:none; max-height:none;
  width:100vw; height:100vh;
  background:rgba(15,13,10,.96);
  color:#fff;
}
.lightbox::backdrop{ background:rgba(15,13,10,.96) }
.lightbox figure{
  margin:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 5vw, 3rem);
}
.lightbox img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  color:#fff;
  font-size:2.5rem;
  line-height:1;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.15) }
.lightbox__close{ top:1rem; right:1rem }
.lightbox__nav{ top:50%; transform:translateY(-50%) }
.lightbox__nav--prev{ left:1rem }
.lightbox__nav--next{ right:1rem }
@media (max-width:520px){
  .lightbox__nav{ top:auto; bottom:1.25rem; transform:none }
  .lightbox__nav--prev{ left:calc(50% - 60px) }
  .lightbox__nav--next{ left:calc(50% + 12px) }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .hero__scroll span{ animation:none }
}