:root {
  --char: #16110d;
  --char-2: #1f1914;
  --bone: #efe6d8;
  --ash: #8a7f72;
  --line: rgba(239, 230, 216, 0.14);
  --ember: #e0602a;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--char); color: var(--bone); font: 17px/1.55 var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ember); color: var(--char); }
button, input, select { font: inherit; color: inherit; }

.h2 { font: 300 clamp(56px, 8vw, 128px)/0.9 var(--serif); letter-spacing: -0.03em; font-variation-settings: "SOFT" 100, "opsz" 144; }

.btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(239,230,216,.45); font-size: 15px; font-weight: 500; cursor: pointer; background: transparent;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.btn:hover { background: var(--bone); color: var(--char); border-color: var(--bone); }
.btn--ember { background: var(--ember); border-color: var(--ember); color: var(--char); height: 54px; padding: 0 28px; }
.btn--ember:hover { background: var(--bone); border-color: var(--bone); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter); transition: background-color .5s, transform .6s var(--ease);
}
.nav.is-solid { background: rgba(22,17,13,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__left { display: flex; gap: 28px; font-size: 15px; }
.nav__left a { opacity: .8; transition: opacity .3s; }
.nav__left a:hover { opacity: 1; }
.nav__logo { font: 400 24px var(--serif); letter-spacing: -0.01em; font-variation-settings: "SOFT" 100; }
.nav__logo span, .hero__title em { font-style: italic; color: var(--ember); }
.nav__right { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__left { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: #000; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,17,13,.55) 0%, rgba(22,17,13,0) 28%, rgba(22,17,13,0) 50%, rgba(22,17,13,.92) 100%);
}
.hero__content {
  position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}
.hero__title { font: 300 clamp(64px, 11.5vw, 200px)/0.86 var(--serif); letter-spacing: -0.04em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.hero__title .ln { display: block; }
.hero__info { text-align: right; font-size: 15px; color: rgba(239,230,216,.75); padding-bottom: .6em; }
@media (max-width: 700px) {
  .hero__content { flex-direction: column; align-items: flex-start; }
  .hero__info { text-align: left; }
}

/* ---------- intro ---------- */
.intro { padding: clamp(120px, 18vw, 240px) var(--gutter); display: flex; justify-content: center; }
.intro__text {
  max-width: 20ch; text-align: center; font: 300 clamp(34px, 4.6vw, 72px)/1.08 var(--serif); letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "opsz" 96;
}

/* ---------- fire ---------- */
.fire { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); padding: 0 var(--gutter); }
.fire__media { position: sticky; top: 0; height: 100svh; padding: 90px 0 var(--gutter); }
.fire__img { position: absolute; inset: 90px 0 var(--gutter); border-radius: 4px; overflow: hidden; clip-path: inset(100% 0 0 0); }
.fire__img.is-on { clip-path: inset(0 0 0 0); }
.fire__img img { width: 100%; height: 100%; object-fit: cover; }
.fire__steps { padding: 30vh 0 20vh; }
.fire__step { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 30ch; }
.fire__big { font: 300 clamp(110px, 14vw, 230px)/0.85 var(--serif); letter-spacing: -0.05em; font-variation-settings: "SOFT" 100, "opsz" 144; color: var(--bone); }
.fire__big small { font-size: .22em; letter-spacing: 0; margin-left: .2em; color: var(--ember); font-style: italic; }
.fire__step p:not(.fire__big) { color: rgba(239,230,216,.72); font-size: 19px; }
.fire__inline { display: none; }
@media (max-width: 860px) {
  .fire { grid-template-columns: 1fr; }
  .fire__media { display: none; }
  .fire__steps { padding: 0; }
  .fire__step { min-height: 0; padding: 0 0 72px; max-width: none; }
  .fire__inline { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
}

/* ---------- menu ---------- */
.menu { padding: clamp(140px, 18vw, 240px) var(--gutter) clamp(100px, 12vw, 180px); position: relative; }
.menu__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; }
.tabs button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 15px; color: rgba(239,230,216,.7); transition: background-color .4s var(--ease), color .4s; }
.tabs button[aria-selected="true"] { background: var(--bone); color: var(--char); }
.menu__list { border-top: 1px solid var(--line); }
.dish {
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 24px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--line); cursor: default; position: relative;
}
.dish h3 { font: 300 clamp(30px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; transition: transform .6s var(--ease), color .4s; }
.dish p { color: var(--ash); font-size: 16px; }
.dish span { font: 400 22px var(--serif); }
.dish span::before { content: "$"; font-size: .7em; vertical-align: .3em; margin-right: 1px; color: var(--ash); }
@media (hover: hover) {
  .menu__list:hover .dish h3 { color: rgba(239,230,216,.35); }
  .menu__list .dish:hover h3 { color: var(--bone); transform: translateX(14px); }
}
.menu__float {
  position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 5; pointer-events: none; z-index: 30;
  border-radius: 4px; overflow: hidden; opacity: 0; will-change: transform;
}
.menu__float img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .dish { grid-template-columns: 64px 1fr auto; gap: 4px 16px; }
  .dish::before { content: ""; grid-row: span 2; width: 64px; height: 64px; border-radius: 4px; background: var(--thumb) center/cover; }
  .dish p { grid-column: 2; }
  .dish span { grid-row: 1; grid-column: 3; }
  .menu__float { display: none; }
}

/* ---------- chef ---------- */
.chef { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: 0 var(--gutter) clamp(120px, 14vw, 200px); }
.chef__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.chef__img img { width: 100%; height: 100%; object-fit: cover; }
.chef__quote p { font: 300 clamp(30px, 3.4vw, 54px)/1.1 var(--serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
.chef__quote cite { display: block; margin-top: 24px; font-style: normal; color: var(--ash); }
@media (max-width: 860px) { .chef { grid-template-columns: 1fr; } }

/* ---------- gallery ---------- */
.gallery { overflow: hidden; padding-bottom: clamp(120px, 14vw, 200px); }
.gallery__track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.gallery__track img { height: clamp(260px, 36vw, 520px); width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.gallery__track img:nth-child(even) { aspect-ratio: 4 / 3; }

/* ---------- visit ---------- */
.visit { padding: 0 var(--gutter) clamp(120px, 14vw, 200px); }
.visit .h2 { margin-bottom: 48px; }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 40px; align-items: start; }
.hours { border-top: 1px solid var(--line); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--ash); }
.visit__where { display: flex; flex-direction: column; gap: 8px; }
.visit__addr { font: 300 34px/1.1 var(--serif); font-variation-settings: "SOFT" 100; }
.visit__where p:last-child { color: var(--ash); }
.map { width: 100%; height: auto; border-radius: 4px; }
.map__pulse { transform-origin: 270px 150px; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (max-width: 960px) { .visit__grid { grid-template-columns: 1fr 1fr; } .map { grid-column: 1 / -1; } }
@media (max-width: 600px) { .visit__grid { grid-template-columns: 1fr; } }

/* ---------- reserve ---------- */
.reserve { margin: 0 var(--gutter); padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px); background: var(--char-2); border-radius: 6px; text-align: center; }
.reserve__title { font: 300 clamp(56px, 8vw, 128px)/0.9 var(--serif); letter-spacing: -0.03em; font-variation-settings: "SOFT" 100, "opsz" 144; margin-bottom: 48px; }
.booking { display: inline-flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.booking label { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; color: var(--ash); }
.booking input, .booking select {
  height: 54px; min-width: 150px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--char);
  color-scheme: dark; outline: none; transition: border-color .3s;
}
.booking input:focus, .booking select:focus { border-color: var(--bone); }
.booking__note { margin-top: 18px; font-size: 14px; color: var(--ash); opacity: 0; transition: opacity .5s; }
.booking.is-done + .booking__note { opacity: 1; }

/* ---------- footer: fire band ---------- */
.footer { padding: clamp(100px, 12vw, 160px) var(--gutter) 28px; }
.outro { position: relative; height: min(70svh, 640px); border-radius: 6px; overflow: hidden; background: #000; display: grid; place-items: center; text-align: center; }
.outro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.outro__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0 20px; }
.outro__title { font: 300 clamp(48px, 7vw, 120px)/0.95 var(--serif); letter-spacing: -0.03em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.outro__title em { color: var(--ember); }
.footer__row { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 14px; color: var(--ash); }
.footer__row a:hover { color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}