/* ═══════════════════════════════════════════════════════
   BRIO — Rosa-inspired editorial restaurant design
   Palette: teal + sage (Dulux Cheeky Grey) + burnt wood
═══════════════════════════════════════════════════════ */

/* ─── TOKENS ───────────────────────────────────────── */
:root {
  /* Teal — основной бренд (цвет логотипа #A0CDCA) */
  --teal-50:  #f0fafa;
  --teal-100: #d0eeec;
  --teal-200: #b8dedd;
  --teal-300: #A0CCCA;   /* цвет логотипа */
  --teal-500: #A0CCCA;   /* цвет логотипа — основной акцент */
  --teal-600: #7DBDBA;   /* темнее — для hover */
  --teal-700: #4a9994;
  --teal-800: #1f5e5b;
  --teal-900: #152f2e;

  /* Sage — Dulux Cheeky Grey 78GG 19/078 */
  --sage:       #567876;   /* сам цвет со стены */
  --sage-dark:  #3d5654;   /* темнее, для фонов */
  --sage-mid:   #6b8f8c;   /* чуть светлее */
  --sage-light: #e8efee;   /* очень светлый, для фонов */
  --sage-pale:  #f2f6f5;   /* почти белый с зеленоватым */

  /* Wood — обожжённое дерево */
  --wood:       #241409;   /* очень тёмный, почти чёрный с коричневым */
  --wood-dark:  #1a0e06;   /* ещё темнее — для акцентов фона */
  --wood-mid:   #7a4a2a;   /* средний — для цен и деталей */
  --wood-warm:  #b87048;   /* тёплый — для маленьких акцентов */
  --wood-light: #e8d5c0;   /* светлый бежевый-дерево */

  --white:    #ffffff;      /* только для текста на тёмных фонах */
  --cream:    #EFE0C3;     /* Tikkurila G398 Манная каша */
  --gray-100: #E5D5B5;     /* тёплый — согласован с кремом */
  --gray-200: #D9CEBA;
  --gray-400: #8a8078;
  --gray-600: #4a433b;
  --gray-900: #1c1510;     /* тёмно-коричневый вместо чёрного */

  --bg:       var(--cream);   /* Tikkurila Манная каша — фон страницы */
  --surface:  var(--cream);   /* карточки, секции — тот же тёплый крем */
  --text:     var(--gray-900);
  --text-2:   var(--gray-600);
  --text-3:   var(--gray-400);
  --accent:   var(--teal-500);

  --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px;--sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;

  --r-sm:4px; --r-md:10px; --r-lg:18px; --r-full:9999px;

  --shadow-sm: 0 1px 4px rgba(15,40,39,.07);
  --shadow-md: 0 4px 20px rgba(15,40,39,.10);
  --shadow-lg: 0 16px 48px rgba(15,40,39,.15);
  --shadow-xl: 0 32px 80px rgba(15,40,39,.2);

  --dur-fast:150ms; --dur:220ms; --dur-slow:380ms; --dur-xslow:600ms;
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --font-serif: 'Montserrat', system-ui, sans-serif;
  --font-sans:  'Montserrat', system-ui, sans-serif;
  --font-script:'Montserrat', system-ui, sans-serif;
}

/* ─── RESET ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-sans);font-size:1rem;line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}


/* ─── FOCUS ─────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;border-radius:var(--r-sm)}

/* ─── UTILS ─────────────────────────────────────────── */
.container{width:min(1140px,100% - var(--sp-8));margin-inline:auto}

/* Eyebrow — фланкирующие линии по бокам текста (editorial style) */
.eyebrow{
  display:flex;align-items:center;justify-content:flex-start;
  gap:var(--sp-3);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage);margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:'';display:inline-block;flex-shrink:0;
  width:24px;height:1px;background:currentColor;opacity:.6;
}
/* Для центрированных eyebrow — линии с обеих сторон */
.section-header .eyebrow,
.gallery-eyebrow{
  justify-content:center;
}
.section-header .eyebrow::after,
.gallery-eyebrow::after{
  content:'';display:inline-block;flex-shrink:0;
  width:24px;height:1px;background:currentColor;opacity:.6;
}

.section-title{
  font-family:var(--font-serif);
  font-size:clamp(2rem,4.5vw,3.25rem);
  font-weight:700;line-height:1.12;
  color:var(--text);margin-bottom:var(--sp-6);
}
.section-title--light{color:var(--white)}
.section-header{margin-bottom:var(--sp-12);text-align:center}

/* ─── KEYFRAMES ─────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoReveal{from{opacity:0}to{opacity:1}}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
@keyframes lightboxIn{0%{opacity:0;transform:scale(.88)}100%{opacity:1;transform:scale(1)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Фоновые орбы в hero — медленный дрейф */
@keyframes orbDrift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(40px,-30px) scale(1.07)}
}
@keyframes orbDrift2{
  0%{transform:translate(0,0)}
  33%{transform:translate(-28px,20px)}
  66%{transform:translate(20px,-22px)}
  100%{transform:translate(0,0)}
}
/* Мерцающие частицы — летят вверх */
@keyframes particleFly{
  0%{transform:translateY(0) translateX(0);opacity:.6}
  70%{opacity:.15}
  100%{transform:translateY(-80vh) translateX(12px);opacity:0}
}

/* ─── SCROLL PROGRESS ───────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(to right,var(--teal-300),var(--teal-500),var(--wood-warm));
  z-index:201;pointer-events:none;
  transition:width 80ms linear;
}

/* ─── API WAKING / ERROR STATES ─────────────────────────── */
.api-waking{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-4);padding:var(--sp-16) var(--sp-8);
}
.api-waking__dots{display:flex;gap:8px;margin-bottom:var(--sp-2)}
.api-waking__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-500);
  animation:dotPulse 1.3s ease-in-out infinite;
}
.api-waking__dot:nth-child(2){animation-delay:.2s}
.api-waking__dot:nth-child(3){animation-delay:.4s}
.api-waking__text{
  font-size:.875rem;color:var(--text-3);
  font-style:italic;letter-spacing:.04em;
}
.api-error{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5);padding:var(--sp-12) var(--sp-8);text-align:center;
}
.api-error__text{font-size:.9375rem;color:var(--text-3)}
@keyframes dotPulse{
  0%,80%,100%{transform:scale(.75);opacity:.25}
  40%        {transform:scale(1.25);opacity:1}
}

/* ─── SKELETON ──────────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
  background-size:800px 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--r-sm);
}
.skeleton--tab{height:40px;width:110px;border-radius:var(--r-full)}
.skeleton--line{height:20px;width:80%;margin-bottom:var(--sp-4)}

/* ─── BUTTONS ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 var(--sp-8);border-radius:var(--r-full);
  font-family:var(--font-sans);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border:1.5px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;
  touch-action:manipulation; /* убирает 300ms задержку на мобильном */
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.95)} /* чёткий отклик на тап */
.btn .ripple{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  animation:rippleAnim 280ms linear;background:rgba(255,255,255,.3);
}
.btn--light{background:var(--cream);color:var(--teal-900)}
.btn--light:hover{background:var(--teal-100);transform:translateY(-2px);box-shadow:0 8px 24px rgba(239,224,195,.35)}
.btn--ghost{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8);transform:translateY(-2px)}
.btn--teal{background:var(--teal-500);color:var(--teal-900);border-color:var(--teal-500)}
.btn--teal:hover{background:var(--teal-600);border-color:var(--teal-600);transform:translateY(-2px);box-shadow:0 8px 24px rgba(130,207,202,.4)}
.btn--outline-light{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:var(--white)}

/* ─── HEADER ────────────────────────────────────────── */
.header{
  position:fixed;inset:0 0 auto;z-index:100;padding:var(--sp-5) 0;
  transition:background var(--dur) var(--ease),padding var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.header.scrolled{
  background:var(--teal-900); /* чистый тёмный тил, не размытый */
  padding:var(--sp-3) 0;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(10,25,24,.4);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6)}

.nav__logo{flex-shrink:0;display:flex;align-items:center;transition:transform var(--dur) var(--spring)}
.nav__logo:hover{transform:scale(1.04)}
.nav__logo-img{
  height:42px;width:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 16%,black 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 16%,black 84%,transparent 100%);
}

.nav__links{display:flex;gap:var(--sp-8)}
.nav__link{
  color:rgba(255,255,255,.75);font-size:.8125rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:var(--sp-3) var(--sp-2);position:relative; /* min ~44px hit area */
  min-height:44px;display:inline-flex;align-items:center;
  touch-action:manipulation;
  transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:'';position:absolute;bottom:4px;left:var(--sp-2);right:var(--sp-2);height:1px;width:0;
  background:var(--teal-300);transition:width var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link.active{color:var(--white)}
.nav__link:hover::after,
.nav__link.active::after{width:calc(100% - var(--sp-4))}
.nav__link:active{color:var(--teal-300);opacity:.8}

.nav__close{display:none}
.nav__burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;
  border-radius:var(--r-sm);flex-shrink:0;
}
.nav__burger:hover{background:rgba(255,255,255,.08)}
.burger__line{
  display:block;width:22px;height:1.5px;background:var(--white);border-radius:1px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
  transform-origin:center;
}
.nav__burger[aria-expanded="true"] .burger__line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .burger__line:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__burger[aria-expanded="true"] .burger__line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─── HERO ──────────────────────────────────────────── */
.hero{
  position:relative;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:var(--teal-900); /* чистый тёмный тил, без смешивания */
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 60%,rgba(255,255,255,.04) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%,rgba(109,196,191,.08) 0%,transparent 60%);
}

/* Orbs */
.hero__orbs{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12;will-change:transform}
.orb--1{width:520px;height:520px;background:var(--teal-700);top:-100px;left:-100px;animation:orbDrift 16s ease-in-out infinite alternate}
.orb--2{width:380px;height:380px;background:rgba(255,255,255,.6);bottom:5%;right:5%;animation:orbDrift2 20s ease-in-out infinite}
.orb--3{width:260px;height:260px;background:var(--teal-500);top:35%;left:58%;animation:orbDrift 13s ease-in-out infinite alternate-reverse}

/* Particles */
.hero__particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);animation:particleFly linear infinite}
.particle:nth-child(1){width:3px;height:3px;left:12%;bottom:15%;animation-duration:6s;animation-delay:0s}
.particle:nth-child(2){width:4px;height:4px;left:28%;bottom:22%;animation-duration:8s;animation-delay:1.5s}
.particle:nth-child(3){width:3px;height:3px;left:48%;bottom:18%;animation-duration:5.5s;animation-delay:3s}
.particle:nth-child(4){width:5px;height:5px;left:62%;bottom:30%;animation-duration:7s;animation-delay:.8s}
.particle:nth-child(5){width:3px;height:3px;left:78%;bottom:12%;animation-duration:9s;animation-delay:2s}
.particle:nth-child(6){width:4px;height:4px;left:90%;bottom:25%;animation-duration:6.5s;animation-delay:4s}

.hero__content{position:relative;z-index:1;padding-top:72px;padding-bottom:var(--sp-20)}

/* ── Hero элементы — плавное появление по очереди ── */
.hero__welcome {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;font-weight:300;
  font-size: clamp(2rem, 4vw, 3rem);
  color: rgba(255,255,255,.65);
  margin-bottom: var(--sp-4);
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

/* Молдинг-линия вокруг лого — такая же как между секциями */
.molding-line {
  display: block;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  height: 8px;
  background: linear-gradient(
    to bottom,
    #8a5030  0px,
    #8a5030  1px,
    #4e2810  1px,
    #4e2810  6px,
    #1a0e06  6px,
    #1a0e06  8px
  );
  flex-shrink: 0;
}

/* Логотип — тиловая полоса на всю ширину экрана */
.hero__logo-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-bottom: 0;
  background-color: #3ea39e;
  line-height: 0; /* убираем пустой пробел под img */
}
.hero__logo {
  width: 100%;
  height: auto;
  display: block;
  animation: logoReveal 1.4s ease-out 300ms both;
}

.hero__tagline {
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--sp-10);
  animation: fadeUp 1s cubic-bezier(0.22,1,0.36,1) 800ms both;
}
.hero__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 1s cubic-bezier(0.22,1,0.36,1) 1100ms both;
}

/* Scroll indicator */
.hero__scroll{
  position:absolute;bottom:var(--sp-8);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  z-index:1;
}
.hero__scroll-line{
  display:block;width:1px;height:48px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}

/* ─── МОЛДИНГ — тонкая коричневая линия между секциями ── */
.molding {
  height: 8px;
  background: linear-gradient(
    to bottom,
    #8a5030  0px,
    #8a5030  1px,
    #4e2810  1px,
    #4e2810  6px,
    #1a0e06  6px,
    #1a0e06  8px
  );
  flex-shrink: 0;
}

/* ─── MARQUEE ───────────────────────────────────────── */
.marquee-band{
  background: #3ea39e;
  padding:var(--sp-5) 0;
  overflow:hidden;
}
.marquee__track{
  display:flex;gap:var(--sp-10);align-items:center;
  width:max-content;
  animation:marqueeScroll 28s linear infinite;
}
.marquee__track span{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(1rem,2vw,1.25rem);
  color:#fff;white-space:nowrap;
}
.marquee__sep{color:#fff;opacity:.5;font-style:normal;font-size:.9rem}
.marquee-band:hover .marquee__track{animation-play-state:paused}

/* ─── ABOUT ─────────────────────────────────────────── */
.about{padding:var(--sp-32) 0;background:var(--surface)}
.about__grid{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:var(--sp-16) var(--sp-20);align-items:start;
}
.about__quote{
  padding-top:var(--sp-6);
  /* Цветная акцентная линия — тёплое дерево */
  border-top:3px solid var(--wood-warm);
  position:relative;
}
.about__quote-mark{
  display:block;font-family:var(--font-serif);font-size:11rem;line-height:.5;
  color:var(--teal-100);margin-bottom:var(--sp-6);user-select:none;
  /* Лёгкий градиентный fade — верх яркий, низ прозрачный */
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(to bottom,var(--teal-200) 0%,var(--teal-50) 100%);
  background-clip:text;
}
.about__quote blockquote{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1.38;color:var(--teal-900);font-weight:400;
  /* Тонкая левая линия — как в журналах */
  border-left:3px solid var(--teal-300);
  padding-left:var(--sp-5);
  margin-left:calc(-1 * var(--sp-5) - 3px);
}

.about__body p{font-size:1.0625rem;color:var(--text-2);margin-bottom:var(--sp-5);line-height:1.7}

.about__features{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.about__feature{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:.9375rem;color:var(--text-2);
  transition:transform 280ms cubic-bezier(.34,1.56,.64,1),color 220ms;
  cursor:default;
}
.about__feature:hover{transform:translateX(8px);color:var(--teal-700)}
.about__feature svg{
  flex-shrink:0;color:var(--sage);
  transition:transform 280ms cubic-bezier(.34,1.56,.64,1),color 220ms;
}
.about__feature:hover svg{transform:scale(1.25) rotate(-10deg);color:var(--teal-500)}

/* ─── PILLARS — философия кафе ──────────────────────── */
.pillars-section{
  background:var(--sage-dark);
  padding:var(--sp-24) 0;
  position:relative;overflow:hidden;
}
/* Тонкая декоративная текстура — радиальное свечение */
.pillars-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(160,204,202,.06) 0%,transparent 70%);
}
.pillars__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;position:relative;z-index:1;
}
.pillar{
  padding:var(--sp-12) var(--sp-10);text-align:center;
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
}
.pillar:last-child{border-right:none}
/* Иконка */
.pillar__icon{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--wood-warm);
  margin-bottom:var(--sp-2);
  transition:background var(--dur),transform var(--dur) var(--spring);
}
.pillar:hover .pillar__icon{
  background:rgba(160,204,202,.12);
  transform:scale(1.08);
}
/* Заголовок */
.pillar__title{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:400;
  color:var(--white);line-height:1.2;
}
/* Декоративная черта под заголовком */
.pillar__title::after{
  content:'';display:block;
  width:28px;height:1px;
  background:var(--wood-warm);opacity:.6;
  margin:var(--sp-3) auto 0;
}
/* Описание */
.pillar__desc{
  font-size:.9375rem;color:rgba(255,255,255,.45);
  line-height:1.7;max-width:22ch;
}

/* ─── MENU ──────────────────────────────────────────── */
.menu-section{padding:var(--sp-32) 0;background:var(--bg)}

.menu__tabs{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;
  margin-bottom:var(--sp-12);min-height:44px;
}
.menu__tab{
  min-height:44px;padding:0 var(--sp-6);border-radius:var(--r-full);
  border:1px solid var(--gray-200);background:var(--surface);
  color:var(--text-2);font-family:var(--font-sans);font-size:.875rem;
  font-weight:500;letter-spacing:.04em;cursor:pointer;
  touch-action:manipulation;
  transition:all var(--dur-fast) var(--ease);
}
.menu__tab:hover{border-color:var(--sage);color:var(--sage)}
.menu__tab:active{transform:scale(.96);opacity:.85}
.menu__tab[aria-selected="true"]{
  background:var(--sage-dark);border-color:var(--sage-dark);
  color:var(--white);box-shadow:0 4px 16px rgba(61,86,84,.3);
}

/* Price-list style menu */
.menu__list-wrap{opacity:1;transition:opacity var(--dur) var(--ease)}
.menu-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 var(--sp-16);
}
.menu-list__item{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-5) 0 var(--sp-5) var(--sp-1);
  border-bottom:1px solid var(--gray-100);
  border-left:2px solid transparent;
  transition:background 220ms var(--ease),padding-left 220ms var(--ease),border-color 220ms;
}
.menu-list__item:hover{
  background:linear-gradient(to right,var(--sage-pale),transparent);
  padding-left:var(--sp-4);
  border-left-color:var(--teal-500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}

.menu-list__info{flex:1;min-width:0}
.menu-list__name{
  font-family:var(--font-serif);font-size:1rem;font-weight:700;
  color:var(--text);margin-bottom:2px;line-height:1.3;
}
.menu-list__name-it{font-size:.75rem;color:var(--text-3);font-style:italic;margin-bottom:var(--sp-1)}
.menu-list__desc{
  font-size:.875rem;color:var(--text-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.menu-list__right{
  flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.menu-list__price{
  font-family:var(--font-serif);font-size:1.25rem;font-weight:700;
  /* цвет обожжённого дерева — тёплый, как чернила в старом меню */
  color:var(--wood-mid);white-space:nowrap;
  letter-spacing:-.01em;
}
.menu-list__weight{font-size:.75rem;color:var(--text-3);white-space:nowrap}
.menu-list__tags{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-2)}

.tag{font-size:.6875rem;font-weight:600;letter-spacing:.03em;padding:4px 8px;border-radius:var(--r-full)}
.tag--vegetarian{background:#e8f5e9;color:#2e7d32}
.tag--vegan     {background:#e8f5e9;color:#1b5e20}
.tag--spicy     {background:#fce4ec;color:#c62828}
.tag--gluten-free{background:#fff8e1;color:#e65100}
.tag--special   {background:#fff3cd;color:#92600a}

.menu-list__dot{display:none} /* fallback */
.menu__empty{
  grid-column:1/-1;padding:var(--sp-16);
  text-align:center;color:var(--text-3);font-style:italic;
}

/* ─── CTA BAND ──────────────────────────────────────── */
.cta-band{
  background:var(--sage-dark);
  padding:var(--sp-32) 0;
  text-align:center;position:relative;overflow:hidden;
}
.cta-band__deco{
  position:absolute;right:-80px;top:50%;transform:translateY(-50%);
  width:400px;height:400px;opacity:.5;pointer-events:none;
}
.cta-band__deco svg{width:100%;height:100%}
.cta-band__inner{position:relative;z-index:1}
.cta-band__eyebrow{
  display:block;font-family:var(--font-script);font-size:2.25rem;
  color:var(--teal-300);margin-bottom:var(--sp-4);
  line-height:1.2;
}
.cta-band__title{
  font-family:var(--font-serif);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700;line-height:1.1;color:var(--white);
  margin-bottom:var(--sp-5);
}
.cta-band__sub{
  font-size:1.0625rem;color:rgba(255,255,255,.5);
  margin-bottom:var(--sp-10);max-width:480px;margin-inline:auto;
}
.cta-band__actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap}
.cta-band__phone{
  display:block;font-family:var(--font-serif);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.25rem);
  color:var(--teal-200);margin-bottom:var(--sp-8);
  letter-spacing:.02em;
  transition:color var(--dur-fast);
}
.cta-band__phone:hover{color:var(--white)}

/* ─── GALLERY ───────────────────────────────────────── */
.gallery-section{
  background:var(--teal-900); /* ← чистый тёмный тил */
  padding:var(--sp-32) 0;
  position:relative;overflow:hidden;
}
.gallery-section .container{position:relative;z-index:1}
.gallery-eyebrow{
  color:rgba(255,255,255,.5)!important;
}
.gallery__grid{
  columns:3;column-gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.gallery__item{
  break-inside:avoid;display:block;border-radius:var(--r-md);
  overflow:hidden;cursor:pointer;position:relative;
  margin-bottom:var(--sp-3);border:none;padding:0;background:none;
  width:100%;opacity:0;transform:translateY(16px);
  touch-action:manipulation;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.gallery__item:active{opacity:.85}
.gallery__item.visible{opacity:1;transform:none}
.gallery__item img{width:100%;height:auto;display:block;transition:transform 300ms cubic-bezier(0.22,1,0.36,1)}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item__overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(21,47,46,.6) 0%,rgba(42,122,118,.35) 100%);
  opacity:0;
  display:flex;align-items:center;justify-content:center;color:var(--white);
  transition:opacity 300ms var(--ease);
}
.gallery__item:hover .gallery__item__overlay{opacity:1}
.gallery__empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);padding:var(--sp-16) var(--sp-8);
  color:rgba(255,255,255,.35);border:1px dashed rgba(255,255,255,.15);
  border-radius:var(--r-lg);text-align:center;font-size:.9375rem;
}

/* ─── LIGHTBOX ──────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-6)}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(10,22,22,.93);cursor:pointer}
.lightbox__img{
  position:relative;max-width:90vw;max-height:85dvh;
  border-radius:var(--r-md);object-fit:contain;z-index:1;
  box-shadow:var(--shadow-xl);
  animation:lightboxIn 320ms var(--spring) both;
}
.lightbox__close{
  position:absolute;top:var(--sp-5);right:var(--sp-5);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:var(--white);border-radius:var(--r-full);cursor:pointer;z-index:2;
  transition:background var(--dur-fast),transform var(--dur) var(--spring);
}
.lightbox__close:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}

/* ─── CONTACTS ──────────────────────────────────────── */
.contacts-section{padding:var(--sp-32) 0;background:var(--surface)}
.contacts__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-16);align-items:start}

.contacts__list{font-style:normal;margin-top:var(--sp-2)}
.contact-item{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-4);border-radius:var(--r-md);
  touch-action:manipulation;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.contact-item:hover{background:var(--bg);transform:translateX(4px)}
.contact-item__icon{
  width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  /* sage светлый — тонкий, как плитка в итальянском кафе */
  background:var(--sage-dark);color:#fff;border-radius:var(--r-md);
  transition:background var(--dur),color var(--dur),transform var(--dur) var(--spring);
}
.contact-item:hover .contact-item__icon{background:var(--sage);color:#fff;transform:scale(1.08) rotate(-6deg)}
.contact-item__label{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.contact-item__value{font-size:1rem;font-weight:600;color:var(--text)}
.contact-item__value a{color:var(--sage-dark);transition:color var(--dur-fast)}
.contact-item__value a:hover{color:var(--sage)}

.hours{margin-top:var(--sp-8);padding:var(--sp-6);background:var(--sage-dark);border-radius:var(--r-md);border:1px solid rgba(255,255,255,.1)}
.hours__title{font-size:.9375rem;font-weight:600;color:#fff;margin-bottom:var(--sp-5);display:flex;align-items:center;gap:var(--sp-2)}
.hours__list{display:grid;gap:2px}
.hours__row{display:flex;justify-content:space-between;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);transition:background var(--dur-fast)}
.hours__row:hover{background:rgba(255,255,255,.1)}
.hours__row:nth-child(odd){background:rgba(255,255,255,.07)}
.hours__row:nth-child(odd):hover{background:rgba(255,255,255,.15)}
.hours__day{font-size:.9375rem;color:rgba(255,255,255,.8)}
.hours__time{font-size:.9375rem;font-weight:600;color:#fff}
.hours__time--closed{color:#c62828}

.socials{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.social-link{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-full);
  background:var(--bg);border:1px solid var(--gray-200);
  color:var(--text-2);font-size:.875rem;font-weight:500;
  touch-action:manipulation;
  transition:all var(--dur-fast) var(--ease);
}
.social-link:hover{background:var(--sage-dark);border-color:var(--sage-dark);color:var(--white);transform:translateY(-2px)}
.social-link:active{transform:scale(.95);opacity:.85}

.contacts__map{border-radius:var(--r-lg);overflow:hidden;min-height:420px}
.contacts__map iframe{width:100%;height:100%;min-height:420px;border:0}
.map-placeholder{
  width:100%;min-height:420px;border-radius:var(--r-lg);
  background:var(--sage-dark); /* ← чистый sage */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);color:rgba(255,255,255,.45);text-align:center;padding:var(--sp-8);
}

/* ─── FOOTER ────────────────────────────────────────── */
.footer{
  background:var(--teal-900);
  padding:var(--sp-16) 0 var(--sp-10);position:relative;
}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);text-align:center}
.footer__logo-img{
  width:80px;height:80px;object-fit:cover;
  border-radius:16px;opacity:.9;
  transition:opacity var(--dur-fast),transform var(--dur) var(--spring);
}
.footer__logo-img:hover{opacity:1;transform:scale(1.04)}
.footer__nav{display:flex;gap:var(--sp-8);flex-wrap:wrap;justify-content:center}
.footer__nav a{
  font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);transition:color var(--dur-fast),opacity var(--dur-fast);
  min-height:44px;display:inline-flex;align-items:center;
  touch-action:manipulation;
}
.footer__nav a:hover{color:rgba(255,255,255,.85)}
.footer__nav a:active{opacity:.6}
.footer__copy{font-size:.8125rem;color:rgba(255,255,255,.25)}

/* ─── REVEAL ────────────────────────────────────────── */
.reveal{
  transition:
    opacity  650ms cubic-bezier(0.22,1,0.36,1),
    transform 750ms cubic-bezier(0.22,1,0.36,1);
}
.reveal--up   {opacity:0;transform:translateY(32px)}
.reveal--left {opacity:0;transform:translateX(-32px)}
.reveal--right{opacity:0;transform:translateX(32px)}
.reveal[style*="--i"]{transition-delay:calc(var(--i,0) * 100ms)}
.reveal.visible{opacity:1;transform:none}

/* ─── SPLASH ─────────────────────────────────────────── */
html{ scrollbar-gutter:stable; }

.splash{
  position:fixed;inset:0;z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);cursor:pointer;pointer-events:all;
}

/* Занавесы */
.splash__panel{
  position:absolute;left:0;right:0;
  background:var(--teal-900);
}
.splash__panel--top{ top:0;    height:50.5%; }
.splash__panel--btm{ bottom:0; height:50.5%; }

/* Текст поверх занавесов */
.splash__body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
}

/* «Benvenuti» */
.splash__welcome{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;font-weight:300;
  font-size:clamp(2rem,5vw,3rem);
  color:var(--teal-300);letter-spacing:.06em;
  animation:splashFadeUp 900ms ease 250ms both;
}
.splash__rule{
  height:1px;width:0;background:var(--teal-300);opacity:.6;
  animation:splashRuleDraw 600ms ease 500ms both;
}
.splash__title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(5rem,16vw,9rem);font-weight:300;
  line-height:.9;letter-spacing:.08em;color:var(--white);
  animation:splashFadeUp 900ms ease 600ms both;
}
.splash__tagline{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.85rem;font-weight:300;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  animation:splashFadeUp 900ms ease 900ms both;
}

.splash.done{ display:none!important }

/* ─── АНИМАЦИИ SPLASH ────────────────────────────────── */
@keyframes splashFadeUp{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
@keyframes splashRuleDraw{
  from{ width:0;  opacity:0 }
  to  { width:80px; opacity:1 }
}



/* ─── RESPONSIVE ────────────────────────────────────── */
@media(max-width:1024px){
  .about__grid{grid-template-columns:1fr}
  .about__quote{display:none}
  .menu-list{grid-template-columns:1fr}
}

@media(max-width:768px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(280px,80vw);
    background:var(--teal-900);flex-direction:column;justify-content:center;
    align-items:center;gap:var(--sp-8);
    transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
    z-index:99;box-shadow:-4px 0 32px rgba(10,22,22,.4);
  }
  .nav__links.open{transform:none}
  .nav__link{font-size:1.125rem;letter-spacing:.06em}
  .nav__link::after{width:calc(100% - var(--sp-4))}
  .nav__burger{display:flex;margin-left:auto}
  .nav__close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:var(--sp-4);right:var(--sp-4);
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.08);border:none;
    color:var(--white);font-size:1.125rem;cursor:pointer;
    transition:background var(--dur) var(--ease);
  }
  .nav__close:hover{background:rgba(255,255,255,.16)}

  .pillars__grid{grid-template-columns:1fr}
  .pillar{border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:var(--sp-10) var(--sp-6)}
  .pillar:last-child{border-bottom:none}

  .contacts__grid{grid-template-columns:1fr}
  .contacts__map{min-height:280px}
  .map-placeholder{min-height:280px}
  .gallery__grid{columns:2}

  .cta-band__deco{display:none}
}

@media(max-width:480px){
  /* Кнопки на мобильном — компактнее, рядом а не столбиком */
  .hero__actions{flex-direction:row;align-items:center;justify-content:center;gap:var(--sp-3)}
  .hero__actions .btn{min-height:44px;padding:0 var(--sp-5);font-size:.75rem}
  .hero__logo-wrap{width:100vw;left:50%;margin-left:-50vw}
  .gallery__grid{columns:1}
  .stats__grid{grid-template-columns:1fr 1fr}
  .footer__nav{gap:var(--sp-5)}
}