html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 82px; }

.site {
  background:
    repeating-linear-gradient(126deg, rgba(233,96,63,.05) 0 1px, transparent 1px 26px),
    var(--bg);
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.anim-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.anim-on .reveal.in { opacity: 1; transform: none; }
.shell { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

.snav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(21, 24, 29, 0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.snav__inner {
  max-width: 1180px; margin: 0 auto; padding: 14px clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.snav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.snav__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.snav__links { display: flex; align-items: center; gap: 26px; }
.snav__links a:not(.snav__cta) { position: relative; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; padding: 4px 1px; transition: color .2s; }
.snav__links a:not(.snav__cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--honey); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.snav__links a:not(.snav__cta):hover { color: var(--honey); }
.snav__links a:not(.snav__cta):hover::after,
.snav__links a:not(.snav__cta).active::after { transform: scaleX(1); }
.snav__cta {
  display: inline-block; transform: skewX(-9deg);
  background: var(--honey); color: #2a160f; text-decoration: none;
  padding: 9px 18px; border-radius: 4px; font-weight: 800; font-size: 14px;
}
.snav__cta > span { display: inline-block; transform: skewX(9deg); }

.hero {
  position: relative; min-height: 92svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; color: var(--ink);
  background: #12141a url("/assets/img/hero-poster.jpg") center/cover;
}
.hero * { box-sizing: border-box; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(14,16,21,.94) 0%, rgba(14,16,21,.62) 34%, rgba(14,16,21,.18) 64%, rgba(14,16,21,0) 88%),
    linear-gradient(0deg, rgba(14,16,21,.92) 2%, rgba(14,16,21,.25) 34%, rgba(14,16,21,0) 60%);
}
.hero__hatch {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(126deg, rgba(233,96,63,.06) 0 1px, transparent 1px 24px);
}
.hero__hair {
  position: absolute; z-index: 2; top: -10%; right: 24%; width: 2px; height: 130%;
  background: linear-gradient(180deg, transparent, var(--plum), transparent);
  transform: rotate(-30deg); transform-origin: top; opacity: .5; pointer-events: none;
}

.hero__content {
  position: relative; z-index: 3; margin-top: auto;
  padding: 0 clamp(20px, 5vw, 56px) clamp(72px, 12vh, 130px); max-width: 760px;
}
.hero__kicker {
  display: inline-block; transform: skewX(-9deg);
  background: rgba(244,122,82,.14); border: 1px solid rgba(244,122,82,.4);
  color: var(--honey); padding: 7px 15px; border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px;
}
.hero__kicker > span { display: inline-block; transform: skewX(9deg); }
.hero__title {
  margin: 0; font-weight: 800; font-size: clamp(40px, 7vw, 80px); line-height: 1.02; letter-spacing: -0.025em;
  text-shadow: 0 3px 40px rgba(14,16,21,.6);
}
.hero__title em { font-style: normal; color: var(--plum); }
.hero__sub { margin: 26px 0 0; max-width: 52ch; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6; color: #ddd5ca; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.cbtn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cbtn--primary { background: var(--plum); color: #fff; box-shadow: 0 12px 34px -12px rgba(233,96,63,.85); }
.cbtn--primary:hover { transform: translateY(-2px); background: var(--plum-2); box-shadow: 0 18px 44px -12px rgba(233,96,63,.95); }
.cbtn--primary svg { transition: transform .2s ease; }
.cbtn--primary:hover svg { transform: translateX(3px); }
.cbtn--ghost { background: rgba(234,240,232,.05); color: var(--ink); border: 1px solid var(--copper); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cbtn--ghost:hover { transform: translateY(-2px); background: rgba(201,73,47,.16); border-color: var(--honey); }

.hero__cards {
  position: absolute; z-index: 3; right: clamp(20px, 5vw, 56px); top: 50%; transform: translateY(-44%);
  display: flex; flex-direction: column; gap: 16px; width: 270px; pointer-events: none;
}
.hcard {
  background: rgba(28, 32, 39, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 15px 17px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.hcard--1 { transform: rotate(-3deg); border-bottom: 3px solid var(--honey); }
.hcard--2 { transform: rotate(2deg); border-bottom: 3px solid var(--plum); }
.hcard--3 { transform: rotate(-1.5deg); border-bottom: 3px solid var(--copper); }
.hcard__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hcard__big { font-size: 19px; font-weight: 800; margin-top: 4px; color: var(--ink); }
.hcard__big b { color: var(--honey); }
.hcard__stars { color: var(--honey); letter-spacing: 2px; font-size: 14px; }

.anim-on .hero__kicker { animation: fadeUp .7s .15s both; }
.anim-on .hero__title { animation: fadeUp .8s .28s both; }
.anim-on .hero__sub { animation: fadeUp .8s .42s both; }
.anim-on .hero__cta { animation: fadeUp .8s .56s both; }
.anim-on .hcard { animation: fadeIn .9s both; }
.anim-on .hcard--1 { animation-delay: .6s; } .anim-on .hcard--2 { animation-delay: .74s; } .anim-on .hcard--3 { animation-delay: .88s; }

.sec { position: relative; padding: clamp(64px, 10vw, 120px) 0; }
.sec--tight { padding: clamp(48px, 7vw, 84px) 0; }
.sec--diag {
  clip-path: polygon(0 3.4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -3.4vw; background: var(--bg-2); z-index: 2;
  padding-top: calc(clamp(64px, 10vw, 120px) + 3vw);
}
.sec--diag-up {
  clip-path: polygon(0 0, 100% 3.4vw, 100% 100%, 0 100%);
}
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--honey); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--plum); display: inline-block; transform: skewX(-30deg); }
.sec__title { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 0; }
.sec__lead { color: var(--ink-2); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; max-width: 60ch; margin-top: 16px; }

.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about__body p { color: var(--ink-2); line-height: 1.75; margin-top: 16px; font-size: 16px; }
.about__body p:first-of-type { margin-top: 22px; }
.about__media { position: relative; transform: rotate(-1.5deg); }
.about__media img { width: 100%; height: 100%; min-height: 380px; max-height: 540px; object-fit: cover; border-radius: 16px; display: block; filter: saturate(1) brightness(.92); }
.about__media::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--copper); pointer-events: none; }
.facts { display: flex; gap: 0; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 26px; }
.fact { flex: 1; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact__num { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.fact__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--honey); margin-top: 6px; }

.dishes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.dish { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.dish img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,.84,.4,1); filter: saturate(1) brightness(.88); }
.dish:hover img { transform: scale(1.06); }
.dish__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,14,.92) 4%, rgba(8,10,14,.2) 48%, transparent 72%); }
.dish__name { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.dish__price {
  position: absolute; top: 14px; right: 14px; transform: skewX(-9deg);
  background: var(--honey); color: #2a160f; padding: 5px 12px; border-radius: 4px; font-weight: 800; font-size: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.dish__price > span { display: inline-block; transform: skewX(9deg); }
.dishes__more { margin-top: 30px; }

.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; margin-top: 40px; grid-auto-flow: dense; }
.mtile { overflow: hidden; border-radius: 12px; background: var(--bg-2); }
.mtile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96) brightness(.82); transition: transform .9s cubic-bezier(.16,.84,.4,1), filter .5s ease; }
.mtile:hover img { transform: scale(1.05); filter: saturate(1.05) brightness(.96); }
.mtile--wide { grid-column: span 2; }
.mtile--tall { grid-row: span 2; }
.mtile--big { grid-column: span 2; grid-row: span 2; }

.reserve { position: relative; overflow: hidden; border-radius: 20px; isolation: isolate; }
.reserve__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.reserve__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(14,16,21,.95) 0%, rgba(14,16,21,.7) 46%, rgba(34,39,48,.4) 100%); }
.reserve__inner { position: relative; z-index: 2; padding: clamp(40px, 6vw, 80px); max-width: 600px; }
.reserve__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.reserve__text { color: #ddd5ca; line-height: 1.7; margin: 18px 0 28px; }

.info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.hours { list-style: none; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hours li span:first-child { color: var(--ink-2); }
.hours li.today { color: var(--honey); font-weight: 700; }
.hours li.today span:first-child { color: var(--honey); }
.contact-block { margin-top: 6px; }
.contact-block h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--honey); margin-bottom: 8px; font-weight: 700; }
.contact-block p { color: var(--ink); font-size: 17px; line-height: 1.7; }
.contact-block a { color: var(--ink); text-decoration: none; }
.contact-block .sep { height: 1px; background: var(--line); margin: 22px 0; }

.foot2 { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.foot2__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.foot2__brand { font-size: 18px; font-weight: 800; }
.foot2__links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot2__links a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.foot2__links a:hover { color: var(--honey); }
.foot2__credit { margin-top: 22px; font-size: 12px; color: var(--ink-3); }
.foot2__credit a { color: var(--ink-2); text-decoration: none; font-weight: 600; }

@media (max-width: 980px) {
  .snav__links a:not(.snav__cta) { display: none; }
  .hero__cards { display: none; }
  .about { grid-template-columns: 1fr; }
  .about__media { order: -1; transform: none; }
  .dishes-grid { grid-template-columns: repeat(2, 1fr); }
  .info { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mtile--big, .mtile--wide, .mtile--tall { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 560px) {
  .hero { min-height: 88svh; }
  .hero__hair { display: none; }
  .hero__title { font-size: clamp(34px, 11vw, 48px); }
  .hero__cta .cbtn { flex: 1; justify-content: center; padding: 15px 18px; }
  .sec--diag { clip-path: none; margin-top: 0; padding-top: clamp(48px, 12vw, 80px); }
  .facts { flex-wrap: wrap; gap: 18px 0; }
  .fact { flex: 1 1 50%; }
  .fact + .fact { padding-left: 0; border-left: 0; }
  .fact:nth-child(2) { padding-left: 18px; border-left: 1px solid var(--line); }
  .dishes-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mosaic { grid-auto-rows: 130px; }
  .about__media { transform: none; }
}
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0)) {
  .sec--diag { clip-path: none; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video, .reserve__video { display: none; }
  .dish img, .mtile img, .cbtn, .cbtn svg { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__kicker, .hero__title, .hero__sub, .hero__cta, .hcard { animation: none; }
}