/* Xanna Cafe — redesign 2026 v4. Cinematic dark theme: espresso-black base, glowing copper/amber
   accent, deep emerald secondary jewel tone. Fraunces/Space Grotesk. */

:root{
  --bg: #14100c;
  --bg-alt: #1b1510;
  --bg-elevated: #241c15;
  --ink: #f4ead9;
  --ink-muted: #bcab93;
  --ink-faint: #8c795f;
  --line: rgba(244,234,217,.10);
  --line-strong: rgba(244,234,217,.20);
  --terracotta: #e08a3f;
  --terracotta-light: #f5ab68;
  --terracotta-pale: #f8c896;
  --terracotta-dark: #b5601f;
  --terracotta-rgb: 224,138,63;
  --sage: #3f9a72;
  --sage-dark: #256b4c;
  --sage-rgb: 63,154,114;
  --mustard: #e2b355;
  --mustard-rgb: 226,179,85;
  --paper: #221a14;
  --shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  --radius-sm: 6px;
  --radius: 4px 22px 4px 22px;
  --radius-lg: 6px 46px 6px 46px;
  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --header-h: 92px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--terracotta);color:#fff}

.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}

/* background texture — grain + soft citrus washes instead of gold glow */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 800px 480px at 8% -8%, rgba(var(--terracotta-rgb),.10), transparent 60%),
    radial-gradient(ellipse 700px 520px at 105% 8%, rgba(var(--sage-rgb),.10), transparent 55%);
  pointer-events:none;
  z-index:0;
}

/* ===== persistent site-wide 3D background scene (js/bg-3d.js) ===== */
/* Fixed, full-viewport, behind ALL content on every page. pointer-events:none is load-bearing —
   without it this canvas would sit on top of the stacking order for hit-testing purposes and
   could swallow clicks even though it's visually behind everything. */
.bg-3d-canvas{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;display:block;
}

/* ===== Typography ===== */
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracotta-dark);font-weight:600;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--terracotta)}
.section-head{max-width:640px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:14px;font-style:italic}
.section-head p{color:var(--ink-muted);margin-top:16px;font-size:1.05rem}

/* ===== Buttons — rectangular with clipped corner, not pills ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;font-weight:600;font-size:.92rem;letter-spacing:.01em;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:transform .4s var(--ease),background .3s,box-shadow .3s,color .3s;
  white-space:nowrap;
  transform-style:preserve-3d;
}
.btn-gold{
  background:var(--terracotta);
  color:#fff8ee;
  box-shadow:0 14px 28px -12px rgba(var(--terracotta-rgb),.55);
}
.btn-gold:hover{transform:perspective(600px) translateZ(14px) translateY(-4px) rotateX(-5deg);background:var(--terracotta-dark)}
.btn-ghost{
  border:1.5px solid var(--line-strong);color:var(--ink);background:transparent;
}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--terracotta-dark);transform:perspective(600px) translateZ(10px) translateY(-4px) rotateX(-5deg)}
.btn-sm{padding:11px 22px;font-size:.82rem}

/* ===== Card surface — paper card, no blur-glass ===== */
.glass{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(42,29,20,.03);
}

/* ================= HEADER + NAV ================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:26px 0;
  transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:2px solid transparent;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header.scrolled{
  padding:14px 0;
  background:rgba(15,11,8,.86);
  border-bottom-color:var(--line-strong);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

.logo{font-family:var(--font-serif);font-size:1.7rem;font-weight:700;letter-spacing:-.01em;font-style:italic;display:flex;align-items:center;gap:2px;z-index:1200;position:relative;color:var(--ink);transform-style:preserve-3d;transition:transform .4s var(--ease)}
.logo:hover{transform:perspective(300px) rotateY(-10deg) translateZ(6px)}
.logo .dot{color:var(--terracotta)}

.nav-desktop{display:flex;align-items:center;gap:4px;perspective:400px}
.nav-desktop a{
  padding:10px 16px;font-size:.9rem;font-weight:500;color:var(--ink-muted);
  transition:color .35s var(--ease), opacity .5s var(--ease), transform .35s var(--ease);
  position:relative;transform-style:preserve-3d;
}
.nav-desktop a:hover{transform:translateZ(10px) translateY(-2px) rotateX(8deg)}
.nav-desktop a::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-desktop a:hover{color:var(--ink)}
.nav-desktop a:hover::after{transform:scaleX(1)}
.nav-desktop a.active{color:var(--terracotta-dark);font-weight:600}
.nav-desktop a.active::after{transform:scaleX(1)}

.header-right{display:flex;align-items:center;gap:14px}
.header-phone{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-muted);transition:opacity .5s var(--ease), transform .5s var(--ease)}
.header-phone svg{width:16px;height:16px;stroke:var(--terracotta)}
.header-phone:hover{color:var(--ink)}

.site-header.scrolled .nav-desktop a{opacity:0;transform:translateY(-6px);pointer-events:none;width:0;padding-left:0;padding-right:0;overflow:hidden}
.site-header.scrolled .header-phone{opacity:0;transform:translateY(-6px);pointer-events:none;width:0;overflow:hidden}
.site-header.scrolled .nav-desktop{gap:0}

/* when the overlay is open, the header itself must rise above it (z-index 1100) so the
   logo + morphed close (×) button stay visible/clickable — otherwise they'd be painted
   over by the overlay's own stacking context. The rest of the inline header content
   (desktop nav, phone, book button) fades out so the overlay reads as the sole nav. */
body.menu-open .site-header{z-index:1400}
body.menu-open .nav-desktop a,
body.menu-open .header-phone,
body.menu-open .header-right > .btn{
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease), transform .3s var(--ease);
}

/* ===== animated burger — square not circular ===== */
.burger{
  position:relative;z-index:1200;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1.5px solid var(--line-strong);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease-spring);
}
.burger .bars{position:relative;width:20px;height:14px}
.burger .bars span{
  position:absolute;left:0;width:100%;height:2px;background:var(--ink);
  transition:transform .45s var(--ease-spring), opacity .3s var(--ease), top .45s var(--ease-spring), width .3s var(--ease), background .3s;
}
.burger .bars span:nth-child(1){top:0}
.burger .bars span:nth-child(2){top:6px}
.burger .bars span:nth-child(3){top:12px}

.site-header.scrolled .burger{
  border-color:var(--terracotta);
  background:rgba(var(--terracotta-rgb),.08);
}
.site-header.scrolled .burger .bars span{background:var(--terracotta-dark)}

.burger:hover{border-color:var(--terracotta)}

body.menu-open .burger .bars span:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .burger .bars span:nth-child(2){opacity:0;width:0;left:50%}
body.menu-open .burger .bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
body.menu-open .burger{border-color:var(--terracotta);background:rgba(var(--terracotta-rgb),.12);box-shadow:0 0 0 6px rgba(var(--terracotta-rgb),.1)}
body.menu-open .burger .bars span{background:var(--terracotta-dark)}

/* ===== fullscreen overlay nav — circular wipe expanding from the burger button ===== */
/* --menu-origin-x/-y are set inline by js/main.js (openMenu) to the burger's exact
   viewport position, so the wipe always originates from the button regardless of
   breakpoint/header state. Falls back to the top-right corner before JS runs. */
.nav-overlay{
  position:fixed;inset:0;z-index:1100;
  background:
    radial-gradient(ellipse 800px 600px at 85% 15%, rgba(var(--terracotta-rgb),.14), transparent 60%),
    var(--bg-alt);
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;
  clip-path:circle(0% at var(--menu-origin-x,100%) var(--menu-origin-y,0%));
  transition:clip-path .85s cubic-bezier(.65,0,.35,1), visibility 0s linear .85s;
}
body.menu-open .nav-overlay{
  visibility:visible;
  clip-path:circle(150% at var(--menu-origin-x,100%) var(--menu-origin-y,0%));
  transition:clip-path .85s cubic-bezier(.65,0,.35,1), visibility 0s;
}

.nav-overlay-inner{width:100%;max-width:640px;padding:0 24px;text-align:center}
.nav-overlay-links{display:flex;flex-direction:column;gap:6px;margin-bottom:44px;perspective:1200px}
.nav-overlay-links a{
  font-family:var(--font-serif);font-size:clamp(2.1rem,6vw,3.2rem);font-weight:600;font-style:italic;color:var(--ink-faint);
  padding:8px 0;position:relative;display:block;transform-origin:50% 100%;
  opacity:0;transform:translateY(34px) rotateX(-55deg);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.nav-overlay-links a .idx{
  font-family:var(--font-sans);font-size:.8rem;color:var(--terracotta);opacity:.8;font-style:normal;
  vertical-align:super;margin-right:10px;font-weight:600;
}
.nav-overlay-links a:hover, .nav-overlay-links a.active{color:var(--ink)}
.nav-overlay-links a:hover .idx, .nav-overlay-links a.active .idx{opacity:1}
body.menu-open .nav-overlay-links a{opacity:1;transform:translateY(0) rotateX(0)}
body.menu-open .nav-overlay-links a:nth-child(1){transition-delay:.12s}
body.menu-open .nav-overlay-links a:nth-child(2){transition-delay:.17s}
body.menu-open .nav-overlay-links a:nth-child(3){transition-delay:.22s}
body.menu-open .nav-overlay-links a:nth-child(4){transition-delay:.27s}
body.menu-open .nav-overlay-links a:nth-child(5){transition-delay:.32s}
body.menu-open .nav-overlay-links a:nth-child(6){transition-delay:.37s}
body.menu-open .nav-overlay-links a:nth-child(7){transition-delay:.42s}

.nav-overlay-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;
  padding-top:28px;border-top:1px solid var(--line);
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s;
}
body.menu-open .nav-overlay-foot{opacity:1;transform:translateY(0)}
.nav-overlay-foot a{color:var(--ink-muted);font-size:.9rem;transition:color .3s}
.nav-overlay-foot a:hover{color:var(--terracotta-dark)}

/* lang switcher */
.lang-switcher{display:flex;align-items:center;gap:2px;background:var(--paper);border:1.5px solid var(--line-strong);padding:3px}
.lang-btn{padding:6px 11px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);transition:all .3s var(--ease)}
.lang-btn.active{background:var(--terracotta);color:#fff}
.lang-btn:not(.active):hover{color:var(--ink)}

/* ================= HERO — split layout: copy left, big 3D stage right ================= */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 80px;overflow:hidden;
}
.hero .container{position:relative;z-index:1}
.hero-split{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero-content{max-width:600px}
.hero .badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  font-size:.8rem;font-weight:600;color:var(--terracotta-dark);margin-bottom:26px;
}
.hero .badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--terracotta);position:relative}
.hero .badge .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--terracotta);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);margin-bottom:22px;font-style:italic}
.hero h1 .accent{color:var(--terracotta)}
.hero p.lead{font-size:1.12rem;color:var(--ink-muted);max-width:520px;margin-bottom:36px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.scroll-cue{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.scroll-cue .line{width:1px;height:38px;background:linear-gradient(180deg,var(--terracotta),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--terracotta-light);animation:scrollline 2s var(--ease) infinite}
@keyframes scrollline{0%{top:-100%}100%{top:100%}}

/* 3D stage — large, front-and-center, not a background layer */
.hero-3d-stage{
  position:relative;width:100%;aspect-ratio:1/1;max-height:640px;
  display:flex;align-items:center;justify-content:center;
}
.hero-3d-stage::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--terracotta-rgb),.16), rgba(var(--sage-rgb),.10) 55%, transparent 75%);
  filter:blur(2px);
}
.hero-3d-canvas{
  position:relative;width:100%;height:100%;z-index:1;
  display:block;opacity:0;transition:opacity 1.2s var(--ease);
  touch-action:pan-y;
}
.hero-3d-canvas.ready{opacity:1}
.hero-3d-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:5rem;font-style:italic;color:rgba(var(--terracotta-rgb),.35);
}
.hero-3d-canvas.ready + .hero-3d-fallback{display:none}

.stats-bar{position:relative;z-index:1;margin-top:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat-item{background:var(--paper);padding:30px 20px;text-align:center}
.stat-item .num{font-family:var(--font-serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--terracotta);font-weight:700;font-style:italic}
.stat-item .label{font-size:.78rem;color:var(--ink-muted);margin-top:6px;letter-spacing:.02em}

/* ================= PAGE HERO (inner pages) ================= */
.page-hero{
  position:relative;padding:calc(var(--header-h) + 80px) 0 70px;overflow:hidden;text-align:left;
}
.page-hero .container{position:relative;z-index:1;max-width:900px}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 900px 500px at 0% 0%, rgba(var(--terracotta-rgb),.12), transparent 65%);
}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);font-style:italic}
.page-hero p{color:var(--ink-muted);font-size:1.1rem;margin-top:16px;max-width:560px}
.page-hero .eyebrow::before{display:none}

/* ================= SECTIONS ================= */
section{position:relative;z-index:1}
.sec{padding:110px 0}
.sec-alt{background:var(--bg-alt)}

/* Why-us features */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feature-card{
  padding:38px 30px;background:var(--paper);
  transition:transform .4s var(--ease), background .4s;
}
.feature-card:hover{transform:translateY(-6px);background:#2b2118}
.feature-card .icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--terracotta-rgb),.12);
  margin-bottom:22px;border-radius:50%;
}
.feature-card .icon svg{width:24px;height:24px;stroke:var(--terracotta-dark)}
.feature-card h3{font-size:1.15rem;margin-bottom:10px;font-style:italic}
.feature-card p{color:var(--ink-muted);font-size:.92rem}

/* Menu teaser tiles */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat-tile{
  position:relative;overflow:hidden;aspect-ratio:4/3;
  transition:transform .5s var(--ease);border-radius:var(--radius);
}
.cat-tile:hover{transform:translateY(-6px)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cat-tile:hover img{transform:scale(1.08)}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(42,29,20,.85) 100%)}
.cat-tile-text{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.cat-tile-text h3{font-size:1.3rem;color:#fff8ee;font-style:italic}
.cat-tile-text p{font-size:.82rem;color:#e9dcc8;margin-top:4px}

/* Private cabins section */
.cabin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cabin-card{overflow:hidden;transition:transform .5s var(--ease);border-radius:var(--radius-lg);border:1px solid var(--line)}
.cabin-card:hover{transform:translateY(-6px)}
.cabin-card-media{aspect-ratio:16/10;overflow:hidden}
.cabin-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cabin-card:hover .cabin-card-media img{transform:scale(1.06)}
.cabin-card-body{padding:30px 30px 34px;background:var(--paper)}
.cabin-card-icons{display:flex;gap:10px;margin-bottom:18px}
.cabin-card-icons span{
  width:38px;height:38px;border-radius:50%;background:rgba(var(--sage-rgb),.16);
  display:flex;align-items:center;justify-content:center;
}
.cabin-card-icons svg{width:17px;height:17px;stroke:var(--sage-dark)}
.cabin-card-body h3{font-size:1.3rem;margin-bottom:12px;font-style:italic}
.cabin-card-body p{color:var(--ink-muted);font-size:.95rem;line-height:1.65}

/* CTA band */
.cta-band{position:relative;overflow:hidden;padding:90px 40px;text-align:center;border-radius:var(--radius-lg)}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,29,20,.5),rgba(42,29,20,.88));z-index:0}
.cta-band-content{position:relative;z-index:1;max-width:600px;margin:0 auto}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:16px;color:#fff8ee;font-style:italic}
.cta-band p{color:#e9dcc8;margin-bottom:34px;font-size:1.05rem}

/* ================= ABOUT — pull-quote + timeline values ================= */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.about-media{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--radius-lg)}
.about-media img{width:100%;height:100%;object-fit:cover}
.about-badge{
  position:absolute;left:20px;bottom:20px;padding:18px 24px;
  display:flex;flex-direction:column;background:var(--paper)!important;
  border:1px solid var(--line-strong);
}
.about-badge .num{font-family:var(--font-serif);font-size:1.8rem;color:var(--terracotta);font-style:italic}
.about-badge .label{font-size:.78rem;color:var(--ink);opacity:.85}
.about-text p{color:var(--ink-muted);margin-bottom:18px;font-size:1.02rem}
.about-text h2{margin:14px 0 22px;font-style:italic}

.values-list{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--line-strong)}
.value-row{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:24px;align-items:baseline;padding:32px 4px;border-bottom:1px solid var(--line-strong);transition:background .3s}
.value-row:hover{background:rgba(var(--terracotta-rgb),.05)}
.value-row .num{font-family:var(--font-serif);font-size:1.6rem;color:rgba(var(--terracotta-rgb),.5);font-style:italic}
.value-row h3{font-size:1.15rem;font-style:italic}
.value-row p{color:var(--ink-muted);font-size:.92rem}

/* ================= MENU PAGE — editorial index list, not tile grid ================= */
.menu-toolbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:36px;padding:18px;border:1px solid var(--line-strong);background:var(--paper);
}
.menu-search{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  padding:12px 18px;border:1px solid var(--line);background:var(--bg);
}
.menu-search svg{width:17px;height:17px;stroke:var(--ink-faint);flex-shrink:0}
.menu-search input{background:none;border:none;outline:none;color:var(--ink);width:100%;font-size:.92rem}
.menu-search input::placeholder{color:var(--ink-faint)}
.menu-sort{
  padding:12px 18px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink-muted);font-size:.85rem;outline:none;cursor:pointer;
}
.menu-sort:focus{border-color:var(--terracotta)}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.chip{
  padding:9px 18px;border:1px solid var(--line-strong);font-size:.85rem;color:var(--ink-muted);
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--terracotta);color:var(--ink)}
.chip.active{background:var(--terracotta);border-color:var(--terracotta);color:#fff;font-weight:600}

.menu-count{font-size:.85rem;color:var(--ink-faint);margin-bottom:20px;text-transform:uppercase;letter-spacing:.08em}

/* index-list rows instead of card grid */
.menu-grid{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.menu-card{
  display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;
  padding:18px 6px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.menu-card:hover{background:rgba(var(--terracotta-rgb),.05)}
.menu-card-media{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0}
.menu-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.menu-card:hover .menu-card-media img{transform:scale(1.12)}
.menu-card-tag{
  position:absolute;bottom:-2px;left:0;right:0;padding:2px 0;text-align:center;
  background:rgba(42,29,20,.65);font-size:.5rem;color:#fff8ee;font-weight:700;letter-spacing:.03em;
}
.menu-card-body h3{font-family:var(--font-sans);font-size:1.02rem;font-weight:600;line-height:1.3}
.menu-card-price{display:flex;align-items:baseline;gap:10px;justify-content:flex-end;text-align:right}
.menu-card-price .price{color:var(--terracotta-dark);font-weight:700;font-size:1.08rem;white-space:nowrap;font-family:var(--font-serif);font-style:italic}
.menu-card-price .price .cur{font-size:.72rem;color:var(--ink-faint);font-weight:500;font-family:var(--font-sans);font-style:normal;margin-left:3px}
.menu-card-price .price2{color:var(--ink-faint);font-size:.78rem;font-family:var(--font-sans);font-style:normal}

.menu-empty{display:none;text-align:center;padding:80px 20px;color:var(--ink-muted)}
.menu-empty.show{display:block}
.menu-empty button{margin-top:18px}

/* ================= GALLERY — editorial masonry columns ================= */
.gallery-grid{columns:3 260px;column-gap:18px}
.gallery-item{position:relative;overflow:hidden;cursor:pointer;break-inside:avoid;margin-bottom:18px;border-radius:var(--radius)}
.gallery-item:nth-child(3n+1){border-radius:var(--radius-lg)}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(42,29,20,.85));opacity:0;transition:opacity .4s}
.gallery-item:hover::after{opacity:1}
.gallery-item .zoom-ic{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(42,29,20,.55);
  opacity:0;transform:scale(.8);transition:all .4s var(--ease);
}
.gallery-item:hover .zoom-ic{opacity:1;transform:scale(1)}
.gallery-item .zoom-ic svg{width:16px;height:16px;stroke:#fff}

.lightbox{
  position:fixed;inset:0;z-index:2000;background:rgba(20,14,9,.94);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.lightbox img{max-width:90vw;max-height:82vh;box-shadow:var(--shadow)}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;transition:all .3s;background:rgba(255,255,255,.08);color:#fff8ee;
}
.lightbox-close{top:24px;right:24px}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{border-color:var(--terracotta-light);color:var(--terracotta-light)}
.lightbox-prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox svg{width:18px;height:18px}
.lightbox-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:#e9dcc8;font-size:.85rem}

/* ================= REVIEWS ================= */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.review-card{padding:34px 30px;background:var(--paper)}
.review-stars{display:flex;gap:3px;margin-bottom:18px}
.review-stars svg{width:15px;height:15px;fill:var(--mustard);stroke:none}
.review-card p{color:var(--ink-muted);font-size:.95rem;margin-bottom:22px;font-style:italic}
.review-who{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--terracotta);color:#fff8ee;font-weight:700;font-family:var(--font-serif);font-style:italic;
  flex-shrink:0;
}
.review-name{font-weight:600;font-size:.9rem}
.review-date{font-size:.78rem;color:var(--ink-faint)}

/* ================= CONTACTS ================= */
.contacts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:60px;background:var(--line);border:1px solid var(--line)}
.contact-card{padding:32px 26px;background:var(--paper);transition:transform .4s var(--ease)}
.contact-card:hover{transform:translateY(-6px)}
.contact-card .icon{width:44px;height:44px;border-radius:50%;background:rgba(var(--terracotta-rgb),.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.contact-card .icon svg{width:20px;height:20px;stroke:var(--terracotta-dark)}
.contact-card .label{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:8px}
.contact-card .val{font-size:1rem;font-weight:500}
.contact-card a.val:hover{color:var(--terracotta-dark)}

.map-wrap{overflow:hidden;border:1px solid var(--line-strong);height:440px;border-radius:var(--radius-lg)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:invert(.92) grayscale(.15) brightness(.9) contrast(.92) hue-rotate(180deg)}

/* ================= RESERVATION ================= */
.reservation-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.reservation-side h2{margin:14px 0 18px;font-style:italic}
.reservation-side p{color:var(--ink-muted);margin-bottom:28px}
.side-info{display:flex;flex-direction:column;gap:18px;margin-bottom:32px}
.side-info-row{display:flex;gap:14px;align-items:flex-start}
.side-info-row .icon{width:38px;height:38px;border-radius:50%;background:rgba(var(--sage-rgb),.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-info-row .icon svg{width:17px;height:17px;stroke:var(--sage-dark)}
.side-info-row .t{font-size:.78rem;color:var(--ink-faint)}
.side-info-row .v{font-weight:500}
.side-media{overflow:hidden;aspect-ratio:16/10;border-radius:var(--radius-lg)}
.side-media img{width:100%;height:100%;object-fit:cover}

.res-form{padding:36px;background:var(--paper);border:1px solid var(--line-strong)}
.field{margin-bottom:20px}
.field label{display:block;font-size:.78rem;color:var(--ink-faint);margin-bottom:8px;letter-spacing:.02em}
.field input, .field select, .field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);outline:none;transition:border-color .3s;
  font-size:.92rem;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--terracotta)}
.field textarea{resize:vertical;min-height:90px}
.field-checkbox{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;cursor:pointer;
  font-size:.88rem;color:var(--ink-muted);
}
.field-checkbox input{width:17px;height:17px;accent-color:var(--terracotta);flex-shrink:0}
.field-checkbox span{display:inline-flex;align-items:center;gap:6px}
.field-checkbox svg{width:15px;height:15px;stroke:var(--terracotta-dark)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.res-form .btn{width:100%;margin-top:8px}
.res-actions{display:flex;gap:12px;margin-top:14px}
.res-actions a{flex:1}

.res-success{display:none;text-align:center;padding:40px 10px}
.res-success.show{display:block}
.res-success .icon{
  width:64px;height:64px;border-radius:50%;background:rgba(var(--sage-rgb),.14);margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
}
.res-success .icon svg{width:28px;height:28px;stroke:var(--sage-dark)}
.res-success h3{font-size:1.3rem;margin-bottom:10px;font-style:italic}
.res-success p{color:var(--ink-muted)}
.res-form form.hide-form{display:none}

/* ================= FOOTER ================= */
footer{border-top:2px solid var(--line-strong);padding:80px 0 30px;position:relative;z-index:1;background:var(--bg-alt)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px}
.footer-logo{font-family:var(--font-serif);font-size:1.6rem;margin-bottom:16px;display:inline-flex;font-style:italic}
.footer-about p{color:var(--ink-muted);font-size:.9rem;max-width:300px}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:20px}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a, .footer-col span{color:var(--ink-muted);font-size:.92rem;transition:color .3s}
.footer-col a:hover{color:var(--terracotta-dark)}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);
}
.footer-social a:hover{border-color:var(--terracotta);background:rgba(var(--terracotta-rgb),.1);transform:translateY(-3px)}
.footer-social svg{width:17px;height:17px;stroke:var(--ink)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:30px;border-top:1px solid var(--line-strong);font-size:.82rem;color:var(--ink-faint)}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal-stagger.in-view > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.4s}

/* preloader */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;transition:opacity .6s var(--ease), visibility 0s linear .6s}
.preloader.hide{opacity:0;visibility:hidden}
.preloader .pl-logo{font-family:var(--font-serif);font-size:1.9rem;font-style:italic}
.preloader .pl-logo .dot{color:var(--terracotta)}
.preloader .pl-bar{width:160px;height:2px;background:var(--line-strong);overflow:hidden}
.preloader .pl-bar::after{content:"";display:block;height:100%;width:40%;background:var(--terracotta);animation:load 1.1s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}

/* back to top */
.to-top{
  position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;z-index:900;
  display:flex;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--line-strong);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .4s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:18px;height:18px;stroke:var(--terracotta-dark)}
.to-top:hover{border-color:var(--terracotta)}

/* whatsapp/telegram floating quick contact */
.quick-contact{position:fixed;bottom:28px;left:28px;z-index:900;display:flex;flex-direction:column;gap:12px}
.quick-contact a{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1.5px solid var(--line-strong);transition:all .4s var(--ease);
}
.quick-contact a:hover{transform:translateX(4px);border-color:var(--terracotta)}
.quick-contact svg{width:20px;height:20px;stroke:var(--ink)}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .hero-split{grid-template-columns:1fr;gap:30px}
  .hero-3d-stage{max-height:380px;order:-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .menu-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .contacts-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .reservation-wrap{grid-template-columns:1fr;gap:40px}
  .cabin-grid{grid-template-columns:1fr}
  .gallery-grid{columns:2 220px}
  .value-row{grid-template-columns:60px 1fr;row-gap:8px}
  .value-row p{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--header-h:78px}
  .nav-desktop, .header-phone{display:none}
  .site-header{padding:18px 0}
  .site-header.scrolled{padding:12px 0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid, .cat-grid, .reviews-grid, .contacts-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{columns:2 160px;column-gap:10px}
  .gallery-item{margin-bottom:10px}
  .footer-grid{grid-template-columns:1fr}
  .sec{padding:80px 0}
  .quick-contact{left:16px;bottom:16px}
  .to-top{right:16px;bottom:16px}
  .hero-3d-stage{max-height:300px}
}
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .feature-grid, .cat-grid, .reviews-grid, .contacts-grid, .gallery-grid{grid-template-columns:1fr}
  .gallery-grid{columns:1}
  .field-row{grid-template-columns:1fr}
  .hero .cta-row{flex-direction:column}
  .hero .cta-row .btn{width:100%}
  .menu-card{grid-template-columns:56px 1fr auto;gap:12px}
  .menu-card-media{width:56px;height:56px}
}

/* ================= 3D TILT (desktop hover) + SCROLL-REVEAL TILT (touch) ================= */
.tilt-3d{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.tilt-3d.tilting{transition:transform .08s linear}
.tilt-3d:hover{box-shadow:0 46px 85px -30px rgba(42,29,20,.4), 0 14px 30px -12px rgba(42,29,20,.28)}
.tilt-3d > *{transform:translateZ(0)}
.tilt-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(var(--terracotta-rgb),.14), transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);z-index:2;
}
.tilt-3d:hover .tilt-glow{opacity:1}

/* touch devices: 3D card entrance handled by JS adding .tilt-touch-in (see tilt-3d.js) */
.tilt-touch{transform:perspective(900px) rotateX(10deg) rotateY(-6deg) translateY(18px) scale(.97);opacity:0}
.tilt-touch.tilt-touch-in{transform:perspective(900px) rotateX(0) rotateY(0) translateY(0) scale(1);opacity:1;transition:transform .7s var(--ease-spring), opacity .6s var(--ease)}

/* ================= SITE-WIDE 3D SCROLL-DRIVEN SECTION REVEAL (js/scroll-3d.js) ================= */
/* perspective lives on the <section>, the actual 3D transform on its .container child — never on
   <body>/<html>, so it can't hijack the containing block of position:fixed elements (header,
   nav overlay, back-to-top, bg-3d canvas, etc). Runs on every .sec / .stats-bar, every page. */
section.sec, .stats-bar{perspective:900px}
.sec3d{
  transform-style:preserve-3d;
  opacity:0;
  transform:perspective(900px) rotateX(32deg) translateZ(-260px) translateY(110px) scale(.94);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:transform,opacity;
}
.sec3d.sec3d-in{
  opacity:1;
  transform:perspective(900px) rotateX(0deg) translateZ(0) translateY(0) scale(1);
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .tilt-3d, .tilt-touch{transition:none!important;transform:none!important;opacity:1!important}
  .sec3d{opacity:1!important;transform:none!important;transition:none!important}
  .hero-3d-canvas{display:none!important}
  .hero-3d-fallback{display:flex!important}
  .bg-3d-canvas{display:none!important}
  .logo, .nav-desktop a, .btn-gold, .btn-ghost{transform:none!important}
  .nav-overlay{clip-path:none!important;transition:none!important}
  .nav-overlay-links a, .nav-overlay-foot{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}