/* ==========================================================================
   Embers Hudson — "Evening service"
   Tokens: copy/brand-kit.md. Display: Bodoni Moda (echoes the Didone wordmark
   in the logo). Text: Hanken Grotesk. Motion lives in assets/js/site.js and
   only runs when the visitor has not asked for reduced motion.
   ========================================================================== */

:root {
  --charcoal: #1A1714;
  --night: #120F0D;
  --ash: #25201B;
  --paper: #F5EFE6;
  --bone: #F3ECE2;
  --char: #1F1A15;
  --smoke: #A89C8D;
  --smoke-deep: #6B5F52;
  --brass: #C49A62;
  --brass-soft: #D9B98A;
  --brass-deep: #7E5A2E;
  --claret: #8F1D1F;
  --cinder: #3A322A;
  --paper-line: #DDD2C2;
  --field-paper: #8F806D;

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --wrap: 84rem;
  --header-h: 5rem;
  --bar-h: 0px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 63.99rem) { :root { --bar-h: 3.75rem; --header-h: 4.25rem; } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: .55s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--night); }
body {
  margin: 0; background: var(--charcoal); color: var(--bone);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 64rem) { body { font-size: 1.125rem; } }
::selection { background: var(--brass); color: var(--night); }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; max-width: 62ch; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.paper :focus-visible { outline-color: var(--brass-deep); }

h1, h2, h3, .display {
  font-family: var(--display); font-weight: 400; margin: 0;
  font-variation-settings: "opsz" 96; letter-spacing: -.015em; line-height: 1;
  text-wrap: balance;
}
h1 { font-size: clamp(3.25rem, 9vw, 9.5rem); }
h2 { font-size: clamp(2.5rem, 5.4vw, 5.25rem); }
h3 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.1; }
.lede { font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem); line-height: 1.55; color: var(--bone); }
.muted { color: var(--smoke); }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 200; background: var(--brass); color: var(--night); padding: .8rem 1.1rem; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Film grain over the whole site: the warmth of a photograph, not a flat screen. */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { .grain { animation: grain 1.1s steps(6) infinite; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Text that reveals line by line: lines sit in a mask and rise into place. */
.split-line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- Buttons: label rolls up on hover ---------- */
.btn {
  --bg: var(--brass); --fg: var(--night); --bd: var(--brass);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.75rem; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 600 .9375rem/1 var(--text); letter-spacing: .02em; overflow: hidden; isolation: isolate;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn__label { display: block; position: relative; overflow: hidden; line-height: 1.25; }
.btn__label span { display: block; transition: transform .55s var(--ease); }
.btn__label span + span { position: absolute; inset: 0; transform: translateY(110%); }
.btn:hover .btn__label span:first-child, .btn:focus-visible .btn__label span:first-child { transform: translateY(-110%); }
.btn:hover .btn__label span + span, .btn:focus-visible .btn__label span + span { transform: translateY(0); }
.btn--solid:hover { --bg: var(--bone); --bd: var(--bone); }
.btn--ghost { --bg: transparent; --fg: var(--bone); --bd: rgba(243, 236, 226, .38); backdrop-filter: blur(6px); }
.btn--ghost:hover { --bd: var(--bone); --bg: rgba(243, 236, 226, .08); }
.paper .btn--solid { --bg: var(--char); --fg: var(--paper); --bd: var(--char); }
.paper .btn--solid:hover { --bg: var(--brass-deep); --bd: var(--brass-deep); }
.paper .btn--ghost { --fg: var(--char); --bd: var(--field-paper); backdrop-filter: none; }
.paper .btn--ghost:hover { --bd: var(--char); --bg: rgba(31, 26, 21, .05); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Underline that draws in from the left. */
.link {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--bone); text-decoration: none; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: background-size .6s var(--ease), color .3s;
}
.link:hover { background-size: 0 1px; background-position: 100% calc(100% - .55rem); color: var(--brass); }
.paper .link { color: var(--char); }
.paper .link:hover { color: var(--brass-deep); }

/* ---------- Curtain (first visit of the session only) ---------- */
.curtain { display: none; }
.js-curtain .curtain {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 150; background: var(--night);
}
.curtain img { width: 7.5rem; opacity: 0; }
/* Hold the hero copy until GSAP takes over (set in <head>); a failsafe reveals it after 3 s regardless. */
.js-anim .hero__content { opacity: 0; animation: failsafe 0s linear 3s forwards; }
@keyframes failsafe { to { opacity: 1; } }
.js-curtain .curtain { animation: curtain-failsafe 0s linear 4s forwards; }
@keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } }
.hero__zoom { position: absolute; inset: 0; }

/* ---------- Header: logo centred, navigation either side ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header-h);
  transition: transform .6s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(18, 15, 13, .82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(58, 50, 42, .7); }
.site-header.is-hidden:not(.nav-open) { transform: translateY(-100%); }
.page-inner .site-header { background: rgba(18, 15, 13, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(58, 50, 42, .7); }
.header-grid { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.brand { justify-self: center; display: block; padding: .25rem; }
.brand img { height: calc(var(--header-h) - 1.5rem); width: auto; transition: height .5s var(--ease); }
.nav-left, .nav-right { display: flex; align-items: center; gap: .25rem; }
.nav-right { justify-content: flex-end; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem;
  color: var(--bone); text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
}
.nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .55rem; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--brass-soft); }
.lang { font-size: .8125rem; letter-spacing: .12em; font-weight: 600; }
.header-reserve { min-height: 2.75rem; padding: 0 1.25rem; margin-left: .5rem; }

.nav-toggle {
  display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .25rem; background: none; border: 0;
  color: var(--bone); font: 500 .9375rem var(--text); cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 1.5rem; height: .6rem; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: calc(100% - 1.5px); }
.nav-open .nav-toggle__bars::before { top: calc(50% - .75px); transform: rotate(45deg); }
.nav-open .nav-toggle__bars::after { top: calc(50% - .75px); transform: rotate(-45deg); }

.mobile-nav { display: none; }
@media (max-width: 63.99rem) {
  .nav-left .nav-link, .nav-right .nav-link:not(.lang), .header-reserve { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 70; padding: calc(var(--header-h) + 2rem) var(--gutter) calc(var(--bar-h) + 2rem);
    background: var(--night); clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .75s var(--ease-in-out), visibility 0s .75s;
  }
  .nav-open .mobile-nav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s var(--ease-in-out), visibility 0s; }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav li { overflow: hidden; }
  .mobile-nav a.big {
    display: block; padding: .3rem 0; color: var(--bone); text-decoration: none;
    font: 400 clamp(2.5rem, 11vw, 4rem)/1.1 var(--display); font-variation-settings: "opsz" 96;
    transform: translateY(105%); transition: transform .8s var(--ease);
  }
  .nav-open .mobile-nav a.big { transform: none; }
  .nav-open .mobile-nav li:nth-child(1) a.big { transition-delay: .18s; }
  .nav-open .mobile-nav li:nth-child(2) a.big { transition-delay: .23s; }
  .nav-open .mobile-nav li:nth-child(3) a.big { transition-delay: .28s; }
  .nav-open .mobile-nav li:nth-child(4) a.big { transition-delay: .33s; }
  .nav-open .mobile-nav li:nth-child(5) a.big { transition-delay: .38s; }
  .nav-open .mobile-nav li:nth-child(6) a.big { transition-delay: .43s; }
  .mobile-nav a.big[aria-current="page"] { color: var(--brass); }
  .mobile-nav .nav-meta { display: grid; gap: .25rem; color: var(--smoke); opacity: 0; transition: opacity .6s .45s; }
  .nav-open .mobile-nav .nav-meta { opacity: 1; }
  .mobile-nav .nav-meta a { color: var(--bone); text-decoration: none; display: inline-flex; min-height: 2.75rem; align-items: center; }
}
.no-scroll { overflow: hidden; }

/* ---------- Bottom action bar (phones) ---------- */
.action-bar {
  position: fixed; inset: auto 0 0; z-index: 75; display: grid; grid-template-columns: 1fr 1fr 1.2fr;
  background: rgba(18, 15, 13, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--cinder); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.action-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--bar-h); color: var(--bone); text-decoration: none; font-size: .875rem; font-weight: 600; }
.action-bar svg { width: 1.125rem; height: 1.125rem; color: var(--brass); }
.action-bar a.is-primary { background: var(--brass); color: var(--night); }
.action-bar a.is-primary svg { color: var(--night); }
@media (min-width: 64rem) { .action-bar { display: none; } }

/* ==========================================================================
   HERO — a living photograph: the room's own lights breathe, embers rise.
   ========================================================================== */
.hero { position: relative; height: calc(100svh - var(--bar-h)); min-height: 34rem; overflow: hidden; background: var(--night); }
.hero__stage { position: absolute; inset: -4%; will-change: transform; }
.hero__stage img, .hero__light { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__stage img { object-fit: cover; object-position: 60% 45%; }
.hero__light { mix-blend-mode: screen; pointer-events: none; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 100%, rgba(18, 15, 13, .92) 0%, rgba(18, 15, 13, .55) 38%, rgba(18, 15, 13, 0) 70%),
    linear-gradient(to bottom, rgba(18, 15, 13, .55) 0%, rgba(18, 15, 13, 0) 22%),
    linear-gradient(to top, rgba(18, 15, 13, .9) 0%, rgba(18, 15, 13, 0) 40%);
}
.hero__content {
  position: absolute; inset: auto 0 0; padding-bottom: clamp(1.75rem, 5vh, 4rem);
  display: grid; gap: 2rem; align-items: end;
}
@media (min-width: 64rem) { .hero__content { grid-template-columns: 1fr auto; } }
.hero h1 { font-size: clamp(3.4rem, 10.5vw, 10.5rem); line-height: .9; letter-spacing: -.03em; max-width: 11ch; }
.hero__sub { margin: 1.5rem 0 1.75rem; max-width: 30rem; font-size: clamp(1.0625rem, .5vw + 1rem, 1.3125rem); color: var(--bone); }
.tonight {
  display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1.75rem; padding: .55rem 1.25rem .55rem .55rem;
  border: 1px solid rgba(243, 236, 226, .16); border-radius: 999px; background: rgba(18, 15, 13, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--bone); text-decoration: none; transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.tonight:hover { border-color: rgba(196, 154, 98, .6); background: rgba(18, 15, 13, .65); }
.tonight__badge { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--night); border: 1px solid var(--cinder); flex: none; }
.tonight__badge img { width: 1.9rem; height: auto; }
.tonight__badge .status__dot { position: absolute; right: -.05rem; top: .1rem; border: 2px solid var(--night); width: .75rem; height: .75rem; }
.tonight strong { display: block; font: 500 1rem/1.2 var(--display); font-variation-settings: "opsz" 24; letter-spacing: .01em; }
.tonight [data-status] { display: block; font-size: .8125rem; color: var(--smoke); line-height: 1.35; }
.hero__aside { display: grid; gap: .25rem; justify-items: start; padding-bottom: .35rem; }
@media (max-width: 63.99rem) { .hero__aside { display: none; } }
@media (min-width: 64rem) { .hero__aside { justify-items: end; text-align: right; } }
.status { display: inline-flex; align-items: center; gap: .65rem; font-size: .9375rem; color: var(--bone); }
.status__dot { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: var(--smoke); flex: none; }
.is-open .status__dot { background: var(--brass); box-shadow: 0 0 0 0 rgba(196, 154, 98, .6); }
@media (prefers-reduced-motion: no-preference) { .is-open .status__dot { animation: pulse 2.4s var(--ease) infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 .7rem rgba(196, 154, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 154, 98, 0); } }
.hero__aside a { color: var(--smoke); text-decoration: none; font-size: .9375rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.hero__aside a:hover { color: var(--bone); }
.scroll-cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: clamp(2.5rem, 7vh, 4.5rem); background: rgba(243, 236, 226, .18); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; inset: 0; background: var(--brass); transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) { .scroll-cue::after { animation: cue 2.6s var(--ease-in-out) infinite 1.8s; } }
@keyframes cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@media (max-width: 63.99rem) { .scroll-cue { display: none; } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { position: relative; padding-block: clamp(5rem, 12vw, 11rem); }
.section--tight { padding-block: clamp(4rem, 8vw, 7rem); }
.section--ash { background: var(--ash); }
.section--night { background: var(--night); }

/* Welcome: a large statement in the owners' words, then the rest of their text in a narrow column. */
.welcome { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 64rem) { .welcome { grid-template-columns: 7fr 4fr; align-items: end; } }
.statement {
  font: 400 clamp(1.85rem, 3.4vw, 3.6rem)/1.14 var(--display); font-variation-settings: "opsz" 72;
  letter-spacing: -.015em; max-width: 24ch; margin: 0; text-wrap: pretty;
}
.statement .w { opacity: 1; }
.welcome__body p { color: var(--smoke); }
.welcome__body p:last-of-type { color: var(--bone); font-family: var(--display); font-size: 1.5rem; font-variation-settings: "opsz" 48; }

/* Signature dishes: pinned horizontal tasting on wide screens, swipe on phones. */
.tasting { background: var(--night); overflow: hidden; }
.tasting__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; padding-top: clamp(5rem, 10vw, 8rem); }
.tasting__head p { color: var(--smoke); margin: 0; max-width: 28rem; }
.tasting__track { display: flex; gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 7rem); width: max-content; }
.dish { width: clamp(16.5rem, min(28vw, calc((100svh - 21rem) * .8)), 30rem); flex: none; margin: 0; }
@media (min-width: 64rem) {
  .tasting { height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .tasting__head { padding-top: calc(var(--header-h) + 1rem); }
  .tasting__track { padding-block: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 4vh, 3rem); }
}
.dish__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ash); }
.dish__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.dish:hover .dish__frame img { transform: scale(1.02); }
.dish figcaption { padding-top: 1.25rem; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .5rem; }
.dish__name { font: 400 clamp(1.375rem, 1.2vw + 1rem, 1.875rem)/1.1 var(--display); font-variation-settings: "opsz" 48; }
.dish__price { color: var(--brass); font-variant-numeric: tabular-nums; padding-top: .3rem; font-size: .9375rem; white-space: nowrap; }
.dish__desc { grid-column: 1 / -1; color: var(--smoke); font-size: .9375rem; line-height: 1.55; margin: 0; }
.tasting__end { flex: none; width: clamp(16rem, 24vw, 22rem); display: grid; align-content: center; gap: 1.25rem; }
.tasting__end p { color: var(--smoke); margin: 0; font-size: .9375rem; }
@media (max-width: 63.99rem) {
  .tasting__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .tasting__track::-webkit-scrollbar { display: none; }
  .dish { width: 78vw; scroll-snap-align: start; }
  .tasting__end { width: 70vw; scroll-snap-align: start; }
}
.progress { height: 1px; background: var(--cinder); margin: 0 var(--gutter); position: relative; }
.progress span { position: absolute; inset: 0; background: var(--brass); transform-origin: left; transform: scaleX(0); }
@media (max-width: 63.99rem) { .progress { display: none; } }

/* Full-bleed kitchen pass with the line James chose. */
.pass { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.pass__img { position: absolute; inset: -12% 0; }
.pass__img img { width: 100%; height: 100%; object-fit: cover; }
.pass::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(18, 15, 13, .94) 0%, rgba(18, 15, 13, .35) 55%, rgba(18, 15, 13, .15) 100%); }
.pass blockquote { position: relative; z-index: 2; margin: 0; padding-block: clamp(4rem, 10vw, 8rem); }
.pass blockquote p {
  font: 400 clamp(2rem, 4.6vw, 4.75rem)/1.08 var(--display); font-variation-settings: "opsz" 96; letter-spacing: -.02em;
  max-width: 20ch; margin: 0 0 1.5rem;
}
.pass cite { font-style: normal; color: var(--smoke); }

/* Team: photograph unveiled as you arrive. */
.people { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 64rem) { .people { grid-template-columns: 6fr 5fr; } }
.people__img { overflow: hidden; }
.people__img img { width: 100%; }
.people h2 { margin-bottom: 2rem; }
.partners-inline { list-style: none; margin: 2rem 0; padding: 0; border-top: 1px solid var(--cinder); }
.partners-inline li { border-bottom: 1px solid var(--cinder); }
.partners-inline a {
  display: flex; justify-content: space-between; align-items: center; min-height: 4rem; text-decoration: none; color: var(--bone);
  font: 400 clamp(1.375rem, 1vw + 1rem, 1.75rem) var(--display); font-variation-settings: "opsz" 48;
  transition: padding-left .6s var(--ease), color .3s;
}
.partners-inline a:hover { padding-left: 1rem; color: var(--brass-soft); }
.partners-inline a span { font: 500 .875rem var(--text); color: var(--smoke); }

/* Reservation finale: the room again, lights low. */
.finale { position: relative; overflow: hidden; text-align: center; padding-block: clamp(7rem, 16vw, 14rem); }
.finale__bg { position: absolute; inset: -10% 0; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 30%; filter: saturate(.9); }
.finale::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(18, 15, 13, .78); }
.finale .wrap { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.5rem; }
.finale h2 { font-size: clamp(2.75rem, 7.5vw, 7.5rem); max-width: 14ch; }
.finale p { color: var(--smoke); margin: 0; }
.finale .btn-row { justify-content: center; }

/* Hours board */
.visit { display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 64rem) { .visit { grid-template-columns: 5fr 4fr; } }
.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .board td { padding: 1rem 0; border-bottom: 1px solid var(--cinder); text-align: left; font-weight: 400; }
.board th { font: 400 clamp(1.25rem, .8vw + 1rem, 1.625rem) var(--display); font-variation-settings: "opsz" 48; }
.board td { text-align: right; color: var(--bone); }
.board .closed { color: var(--smoke); }
.board tr.is-today th, .board tr.is-today td { color: var(--brass-soft); }
.board tr.is-today th::after { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; margin-left: .75rem; vertical-align: middle; }
.paper .board th, .paper .board td { border-color: var(--paper-line); color: var(--char); }
.visit__info h3 { margin-bottom: 1rem; }
.visit__info address { font-style: normal; font-size: 1.25rem; line-height: 1.5; margin-bottom: 1.25rem; }
.visit__block + .visit__block { margin-top: 3rem; }
.contact { list-style: none; margin: 0; padding: 0; display: grid; }
.contact a { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; color: var(--bone); text-decoration: none; }
.contact a:hover { color: var(--brass-soft); }
.contact svg { width: 1.125rem; height: 1.125rem; color: var(--brass); flex: none; }

/* ---------- Inner page heads ---------- */
.page-head { position: relative; padding-top: calc(var(--header-h) + clamp(4rem, 10vw, 9rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-head h1 { font-size: clamp(3.25rem, 9vw, 8.5rem); letter-spacing: -.03em; line-height: .92; }
.page-head .lede { margin-top: 1.75rem; color: var(--smoke); max-width: 40rem; }
.rule { height: 1px; background: var(--cinder); transform-origin: left; }
.paper .rule { background: var(--paper-line); }

.banner { position: relative; height: clamp(16rem, 48vw, 34rem); overflow: hidden; }
.banner img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }

/* ---------- Menu: the printed card on the table ---------- */
.menu-page { background: var(--charcoal); }
.menu-toolbar { position: sticky; top: var(--header-h); z-index: 20; background: rgba(26, 23, 20, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cinder); }
.menu-toolbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; overflow-x: auto; scrollbar-width: none; }
.tabs { display: inline-flex; padding: .25rem; border: 1px solid var(--cinder); border-radius: 999px; flex: none; }
.tab {
  appearance: none; border: 0; background: transparent; color: var(--smoke); cursor: pointer; border-radius: 999px;
  font: 600 .9375rem var(--text); min-height: 2.75rem; padding: 0 1.4rem; transition: background-color .5s var(--ease), color .5s var(--ease);
}
.tab[aria-selected="true"] { background: var(--bone); color: var(--night); }
.tab:not([aria-selected="true"]):hover { color: var(--bone); }
.cat-links { display: flex; gap: .25rem; flex: none; }
.cat-links a { color: var(--smoke); text-decoration: none; font-size: .9375rem; padding: 0 .75rem; min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
.cat-links a:hover { color: var(--bone); }
@media (max-width: 47.99rem) { .cat-links { display: none; } }

.card-wrap { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(5rem, 10vw, 8rem); }
.card {
  position: relative; max-width: 64rem; margin-inline: auto; padding: clamp(2rem, 6vw, 5.5rem) clamp(1.25rem, 6vw, 5.5rem);
  background: var(--paper); color: var(--char);
  box-shadow: 0 2.5rem 6rem -2rem rgba(0, 0, 0, .7), 0 .5rem 1.5rem -.5rem rgba(0, 0, 0, .5);
}
.card::before, .card::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--paper-line); }
.card::before { inset: clamp(.6rem, 1.4vw, 1rem); }
.card::after { inset: clamp(.95rem, 1.9vw, 1.4rem); border-color: rgba(126, 90, 46, .35); }
.card__paper {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.card > * { position: relative; }
.card__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.card__head img { width: 5.5rem; margin: 0 auto 1.25rem; filter: invert(1) brightness(.2) sepia(.3); }
.card__head h2 { font-size: clamp(2.5rem, 5vw, 4rem); font-style: italic; font-variation-settings: "opsz" 96; }
.card__head p { margin: .75rem auto 0; color: var(--smoke-deep); font-size: .9375rem; }
.tab-panel[hidden] { display: none; }

.course { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--paper-line); scroll-margin-top: calc(var(--header-h) + 5rem); }
.course:first-of-type { border-top: 0; padding-top: 0; }
.course__title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; }
.course__title h3 {
  font-family: var(--display); font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); font-variant-caps: all-small-caps;
  letter-spacing: .14em; font-variation-settings: "opsz" 24; flex: none;
}
.course__title::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
.course__img { float: right; width: clamp(7rem, 18vw, 12rem); aspect-ratio: 4 / 5; object-fit: cover; margin: 0 0 1rem 2rem; }
@media (max-width: 47.99rem) { .course__img { display: none; } }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem clamp(2rem, 5vw, 4rem); }
@media (min-width: 56rem) { .items { grid-template-columns: 1fr 1fr; } .course--img .items { grid-template-columns: 1fr; } }
.item__head { display: flex; align-items: baseline; gap: .6rem; }
.item__name { font: 500 1.0625rem/1.3 var(--display); font-variation-settings: "opsz" 18; letter-spacing: .02em; }
.item__lead { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--field-paper); transform: translateY(-.3em); }
.item__price { font: 600 1rem var(--text); color: var(--brass-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__desc { margin: .35rem 0 0; color: var(--smoke-deep); font-size: 1rem; line-height: 1.55; }
.item__tag { display: inline-block; margin-top: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--claret); }
.wings { text-align: center; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--paper-line); clear: both; }
.wings .item__name { font-size: 1.1875rem; }
.wings .or { margin: .6rem auto; color: var(--smoke-deep); font-style: italic; font-family: var(--display); }
.wings .sauces { margin: 1.25rem auto 0; color: var(--smoke-deep); font-size: 1rem; max-width: 40rem; }
.wings .sauces strong { color: var(--char); font-weight: 600; }
.allergy { text-align: center; color: var(--claret); font-weight: 600; letter-spacing: .1em; font-size: .875rem; margin: 2.5rem auto 0; }
.signoff { text-align: center; margin-top: 2.5rem; font: italic 400 clamp(1.25rem, 1vw + 1rem, 1.625rem)/1.4 var(--display); }
.signoff span { display: block; font: 500 .9375rem var(--text); font-style: normal; color: var(--smoke-deep); margin-top: .35rem; }
.card-foot { max-width: 64rem; margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; color: var(--smoke); font-size: .875rem; }

/* ---------- About ---------- */
.vision { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 64rem) { .vision { grid-template-columns: 5fr 6fr; align-items: start; } }
.vision__img { overflow: hidden; }
.bios { display: grid; gap: 0; border-top: 1px solid var(--cinder); }
.bio { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--cinder); }
@media (min-width: 64rem) { .bio { grid-template-columns: 4fr 7fr; } }
.bio h3 { font-size: clamp(2rem, 3.5vw, 3.5rem); }
.bio p { color: var(--smoke); }
.bio p:first-of-type { color: var(--bone); }
.bio blockquote { margin: 1.5rem 0 0; font: italic 400 clamp(1.375rem, 1.5vw + 1rem, 2rem)/1.3 var(--display); color: var(--brass-soft); }
.bio blockquote p { color: inherit; margin: 0 0 .5rem; }
.bio blockquote footer { font: 500 .9375rem var(--text); font-style: normal; color: var(--smoke); }

/* ---------- Generic inner content ---------- */
.two-col { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 64rem) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.notes { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--cinder); }
.notes li { padding: 1.25rem 0; border-bottom: 1px solid var(--cinder); display: grid; grid-template-columns: 2rem 1fr; }
.notes li::before { content: ""; width: .5rem; height: .5rem; margin-top: .6em; border: 1px solid var(--brass); border-radius: 50%; }
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); margin: 3rem 0 1rem; }
.prose a { color: var(--brass-soft); }
.small-note { color: var(--smoke); font-size: .875rem; margin-top: 1rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--night); padding-top: clamp(5rem, 10vw, 8rem); overflow: hidden; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h2 { font-size: 1.375rem; margin-bottom: 1.25rem; font-variation-settings: "opsz" 36; }
.footer-grid p, .footer-grid address { color: var(--smoke); font-style: normal; }
.footer-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-variant-numeric: tabular-nums; color: var(--smoke); font-size: .9375rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 17rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--bone); text-decoration: none; font-size: .9375rem; }
.footer-list a:hover { color: var(--brass-soft); }
.wordmark {
  display: block; margin-top: clamp(3rem, 8vw, 6rem); text-align: center; line-height: .78; user-select: none;
  font: 400 clamp(5rem, 24vw, 26rem) var(--display); font-variation-settings: "opsz" 96; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 154, 98, .35);
}
.footer-base { border-top: 1px solid var(--cinder); margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-block: 1.25rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--smoke); font-size: .875rem; }
.footer-base a { color: var(--smoke); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-base a:hover { color: var(--bone); }
.footer-base nav { display: flex; gap: 1.5rem; }

.not-found { min-height: 100svh; display: grid; place-items: center; text-align: center; }

/* Reduced motion: everything static and readable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .dish__frame img { transform: none; }
}

/* ==========================================================================
   v5 — "Evening service" refined (brief of 2026-10-12)
   Real photography, symmetrical navigation, centred hero over video,
   Our Story card, kitchen plates, Lunch / Dinner cards.
   ========================================================================== */
:root { --script: "Pinyon Script", "Snell Roundhand", cursive; --header-h: 6rem; }
@media (max-width: 47.99rem) { :root { --header-h: 6.75rem; } }
.script { font-family: var(--script); font-weight: 400; font-size: clamp(1.75rem, 2.4vw, 2.5rem); line-height: 1; color: var(--brass-soft); margin: 0 0 .35em; letter-spacing: 0; text-transform: none; }
.paper .script { color: var(--brass-deep); }

/* ---------- Header: [lang] Menu  Our Story  (emblem)  Reservations  Contact [Book] ---------- */
.header-grid { grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 3rem); }
.nav-side { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.nav-side--left { justify-content: space-between; }
.nav-side--right { justify-content: space-between; }
.nav-links { display: flex; align-items: center; gap: clamp(.25rem, 1.6vw, 1.75rem); }
.nav-side--left .nav-links { margin-left: auto; }
.nav-side--right .nav-links { margin-right: auto; }
.nav-link { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 0 .4rem; }
.nav-link::after { left: .4rem; right: .4rem; bottom: .5rem; }
.brand img { height: calc(var(--header-h) - 1.4rem); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.1rem;
  border: 1px solid rgba(243, 236, 226, .32); border-radius: 2px; color: var(--bone); text-decoration: none;
  font: 600 .72rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.pill:hover { border-color: var(--bone); background: rgba(243, 236, 226, .06); }
.pill--brass { border-color: var(--brass); color: var(--brass-soft); }
.pill--brass:hover { background: var(--brass); color: var(--night); border-color: var(--brass); }
.lang__short { display: none; }
.nav-toggle, .mobile-nav, .lang-mobile { display: none !important; }
.nav-row { display: none; }
@media (max-width: 74.99rem) { .lang__long { display: none; } .lang__short { display: inline; } }
@media (max-width: 63.99rem) {
  .nav-link { letter-spacing: .14em; font-size: .72rem; }
  .header-reserve { display: none; }
}
@media (max-width: 47.99rem) {
  .site-header { height: var(--header-h); }
  .header-grid { height: auto; padding-top: .45rem; grid-template-columns: 1fr auto 1fr; }
  .nav-side .nav-links { display: none; }
  .nav-side--left { justify-content: flex-start; }
  .brand img { height: 3.1rem; }
  .pill.lang { min-height: 2.5rem; padding: 0 .8rem; }
  .nav-row { display: flex; justify-content: center; gap: .15rem; padding: .15rem .5rem .35rem; }
  .nav-row .nav-link { font-size: .68rem; letter-spacing: .12em; padding: 0 .55rem; min-height: 2.75rem; }
  .nav-row .nav-link::after { left: .55rem; right: .55rem; bottom: .6rem; }
}
.page-home .site-header:not(.is-solid) { background: linear-gradient(to bottom, rgba(18, 15, 13, .78), rgba(18, 15, 13, 0)); }

/* ---------- Hero: centred, the room moving behind ---------- */
.hero__scroll { position: absolute; inset: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__video.is-playing ~ .hero__light { opacity: 0; }
.hero__shade {
  background:
    radial-gradient(70% 60% at 50% 58%, rgba(18, 15, 13, .72) 0%, rgba(18, 15, 13, .35) 55%, rgba(18, 15, 13, 0) 80%),
    linear-gradient(to bottom, rgba(18, 15, 13, .6) 0%, rgba(18, 15, 13, 0) 24%),
    linear-gradient(to top, rgba(18, 15, 13, .92) 0%, rgba(18, 15, 13, 0) 34%);
}
.hero__content {
  inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-top: var(--header-h); padding-bottom: clamp(3rem, 8vh, 6rem); grid-template-columns: none !important;
}
.hero h1 { font-size: clamp(3.4rem, 9.5vw, 9rem); max-width: 12ch; margin-inline: auto; line-height: .92; }
.hero__script { font-size: clamp(1.9rem, 3vw, 2.9rem); margin-bottom: .25rem; }
.hero__sub { margin: 1.4rem auto 2rem; font-size: clamp(1.0625rem, .5vw + 1rem, 1.3125rem); max-width: 34rem; }
.hero .btn-row { justify-content: center; }
.hero .tonight { margin: 1.75rem 0 0; padding: .55rem 1.1rem; gap: .7rem; }
.hero .tonight .status__dot { position: static; width: .55rem; height: .55rem; border: 0; }
.hero .tonight strong { display: inline; font-size: .9375rem; }
.hero .tonight [data-status] { display: inline; font-size: .875rem; }
.hero__aside { display: none !important; }

/* ---------- Intro statement ---------- */
.intro { text-align: center; }
.intro__inner { display: grid; justify-items: center; gap: 2rem; }
.intro__badge { width: 4.5rem; opacity: .9; }
.intro .statement { max-width: 28ch; margin-inline: auto; font-size: clamp(1.75rem, 3.2vw, 3.25rem); }
.intro__sign { font-family: var(--script); font-size: clamp(1.75rem, 2.6vw, 2.5rem); color: var(--brass-soft); margin: 0; }

/* ---------- Our Story: photograph with an overlapping card ---------- */
.story { position: relative; padding-block: clamp(4rem, 10vw, 9rem); background: var(--charcoal); }
.story__inner { display: grid; align-items: center; }
@media (min-width: 64rem) {
  .story__inner { grid-template-columns: repeat(12, 1fr); }
  .story__img { grid-column: 1 / span 8; grid-row: 1; }
  .story__card { grid-column: 7 / span 6; grid-row: 1; z-index: 2; }
}
.story__img { overflow: hidden; }
.story__img img { width: 100%; }
.story__card { position: relative; padding: clamp(2rem, 4vw, 3.5rem); box-shadow: 0 2rem 5rem -1.5rem rgba(0, 0, 0, .75); }
@media (max-width: 63.99rem) { .story__card { margin: -3rem 1rem 0; } }
.story__card h2 { font-size: clamp(2.25rem, 3.6vw, 3.5rem); margin-bottom: 1.25rem; }
.story__card p { color: var(--char); }
.story__partners { list-style: none; margin: 1.5rem 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.story__partners a { color: var(--char); text-decoration: none; font: 400 1.25rem var(--display); font-variation-settings: "opsz" 36; border-bottom: 1px solid var(--paper-line); padding-bottom: .15rem; transition: border-color .4s, color .4s; }
.story__partners a:hover { color: var(--brass-deep); border-color: var(--brass-deep); }

/* ---------- From our kitchen: real plates on black ---------- */
.kitchen { background: var(--night); padding-block: clamp(5rem, 12vw, 10rem); overflow: hidden; }
.kitchen__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(3rem, 7vw, 6rem); }
.kitchen__head h2 { margin-bottom: 1rem; }
.plate { display: grid; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(3rem, 8vw, 7rem); }
@media (min-width: 64rem) {
  .plate { grid-template-columns: 7fr 5fr; }
  .plate--flip { grid-template-columns: 5fr 7fr; }
  .plate--flip .plate__img { order: 2; }
}
.plate__img { position: relative; display: grid; place-items: center; }
.plate__img::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(196, 154, 98, .16), rgba(196, 154, 98, 0)); filter: blur(10px); }
.plate__img img { position: relative; width: min(100%, 38rem); filter: drop-shadow(0 2.5rem 3rem rgba(0, 0, 0, .65)); will-change: transform; }
.plate__text h3 { font-size: clamp(2rem, 3.2vw, 3.25rem); margin-bottom: 1.5rem; }
.plate__items { list-style: none; margin: 0; padding: 0; max-width: 28rem; }
.plate__items li { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--cinder); }
.plate__items .dots { flex: 1; border-bottom: 1px dotted rgba(168, 156, 141, .45); transform: translateY(-.3em); }
.plate__items .price { color: var(--brass); font-variant-numeric: tabular-nums; }
.kitchen__cta { justify-content: center; }
.kitchen__note { text-align: center; color: var(--smoke); font-size: .8125rem; margin: 1.5rem auto 0; }

/* ---------- Finale: plain, centred ---------- */
.finale { background: var(--charcoal); }
.finale::before { display: none; }
.finale__bg { display: none; }

/* ---------- Menu page: two cards, Lunch then Dinner ---------- */
.menu-head { text-align: center; }
.menu-head .lede { margin-inline: auto; }
.menu-jump { display: flex; justify-content: center; gap: .75rem; margin-top: 2rem; }
.menu-toolbar { display: none; }
.menu-block + .menu-block { margin-top: clamp(4rem, 8vw, 7rem); }
.card__title { font-size: clamp(3.5rem, 7vw, 5.5rem); color: var(--char); margin: 0; line-height: 1.1; }
.card__head img { display: none; }
.course__img { display: none !important; }
.items { grid-template-columns: 1fr 1fr; }
@media (max-width: 55.99rem) { .items { grid-template-columns: 1fr; } }

/* ---------- Our Story page ---------- */
.story-intro { max-width: 46rem; margin-inline: auto; text-align: center; font: 400 clamp(1.25rem, 1.2vw + 1rem, 1.6rem)/1.55 var(--display); font-variation-settings: "opsz" 24; }
.story-intro p { max-width: none; }
.story__card { background: var(--paper); color: var(--char); }
.story__card h2 { color: var(--char); }
.story__card .link { color: var(--char); }
@media (max-width: 47.99rem) {
  .nav-row .nav-link { font-size: .72rem; padding: 0 .45rem; }
  .hero__stage img, .hero__video { object-position: 80% 45%; }
}

/* Smooth Ken Burns: one GPU layer, no per-frame JS transforms, no cursor shift. */
.hero__zoom { will-change: transform; backface-visibility: hidden; transform-origin: 62% 40%; }
.hero__stage { inset: 0; will-change: auto; transform: none !important; }
.hero__video { transition: opacity 2s var(--ease); }
/* Short screens: size the headline by height too, and keep the copy clear of the navigation. */
.hero__content { justify-content: safe center; padding-top: calc(var(--header-h) + 1.25rem); }
.hero h1 { font-size: clamp(3rem, min(9.5vw, 12.5vh), 9rem); }
@media (max-height: 760px) and (max-width: 47.99rem) { .hero__script { display: none; } .hero__sub { margin: 1rem auto 1.5rem; } .hero .tonight { margin-top: 1.25rem; } }

/* Ken Burns, final: one slow move on the real photograph, run by the compositor (no JavaScript per frame).
   Starts wide, drifts in toward the EMBERS mirror over 40 s, eases back, repeats. */
@keyframes ken-burns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -.7%, 0); }
}
.hero__zoom { transform-origin: 66% 38%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__zoom { animation: ken-burns 40s cubic-bezier(.45, .05, .55, .95) infinite alternate both; }
}
.hero__scroll { transform: none !important; }

/* Ken Burns v2: a wider, more noticeable journey, still one smooth compositor animation.
   Starts wide and slightly left, travels in and across toward the EMBERS mirror, eases back. */
@keyframes ken-burns-2 {
  from { transform: scale(1.03) translate3d(1.5%, .8%, 0); }
  to   { transform: scale(1.22) translate3d(-3.5%, -1.8%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__zoom { animation: ken-burns-2 30s cubic-bezier(.42, 0, .58, 1) infinite alternate both; }
}

/* Menu atmosphere: smoke and seasoning sit behind the heading and the top of the card. */
.menu-page { position: relative; overflow: hidden; }
.menu-smoke { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 0; }
.menu-head, .card-wrap { position: relative; z-index: 1; }
/* A gentle brass highlight when a dish is hovered, the leader line warming with it. */
.items li { transition: transform .5s var(--ease); }
.items .item__name, .items .item__price { transition: color .4s var(--ease); }
.items .item__lead { transition: border-color .4s var(--ease); }
@media (hover: hover) {
  .items li:hover { transform: translateX(4px); }
  .items li:hover .item__name { color: var(--brass-deep); }
  .items li:hover .item__lead { border-bottom-color: var(--brass-deep); }
}

/* Rectangular buttons everywhere, matching the header's "Book a table" frame. */
.btn { border-radius: 2px; }

.tonight, .hero .tonight, .tabs, .tab { border-radius: 2px; }
.status__dot { border-radius: 50%; }

/* Phone action bar, refined: one warm brown, brass hairline, fine dividers, spaced capitals. */
.action-bar {
  grid-template-columns: 1fr 1fr 1fr;
  background: #2A2019;
  border-top: 1px solid rgba(196, 154, 98, .55);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.action-bar a {
  position: relative; gap: .55rem; color: var(--bone);
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
.action-bar a + a::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(196, 154, 98, .3);
}
.action-bar a svg { width: 1rem; height: 1rem; color: var(--brass); stroke-width: 1.4; }
.action-bar a.is-primary { background: transparent; color: var(--brass-soft); }
.action-bar a.is-primary svg { color: var(--brass-soft); }
.action-bar a:active { background: rgba(196, 154, 98, .1); }

/* ==========================================================================
   Booking: calendar, times, guests, seating sketch, details, live summary
   ========================================================================== */
.booking-wrap { padding-bottom: clamp(3rem, 7vw, 6rem); }
.booking { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 64rem) { .booking { grid-template-columns: minmax(0, 1fr) 22rem; } }
.booking__steps { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; }
.bstep { border: 0; margin: 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--ash); border: 1px solid var(--cinder); min-width: 0; }
.bstep legend { float: left; width: 100%; display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; padding: 0;
  font: 400 clamp(1.5rem, 1.4vw + 1rem, 2rem) var(--display); font-variation-settings: "opsz" 48; color: var(--bone); }
.bstep legend + * { clear: both; }
.bstep__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--brass); color: var(--brass-soft);
  font: 600 .8rem var(--text); border-radius: 2px; flex: none; }
.bnote { color: var(--smoke); font-size: .9375rem; margin: 1rem 0 0; }
.bnote.is-flash { color: var(--brass-soft); }

/* Calendar */
.cal { max-width: 30rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal__month { margin: 0; font: 400 1.375rem var(--display); font-variation-settings: "opsz" 36; text-transform: capitalize; }
.cal__nav { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 1px solid var(--cinder); color: var(--bone); cursor: pointer; border-radius: 2px; transition: border-color .3s, color .3s; }
.cal__nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cal__nav:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-soft); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal__dow span { text-align: center; font-size: .75rem; letter-spacing: .14em; color: var(--smoke); padding: .3rem 0; }
.cal__day { aspect-ratio: 1; min-height: 2.75rem; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--bone);
  font: 500 .95rem var(--text); cursor: pointer; border-radius: 2px; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s; }
.cal__day:hover:not(:disabled) { border-color: rgba(196, 154, 98, .6); }
.cal__day:disabled { color: rgba(168, 156, 141, .35); cursor: default; }
.cal__day.is-closed { text-decoration: line-through; text-decoration-color: rgba(168, 156, 141, .35); }
.cal__day.is-today { border: 1px dashed rgba(196, 154, 98, .55); color: var(--smoke); }
.cal__day.is-selected { background: var(--brass); border-color: var(--brass); color: var(--night); }

/* Time slots */
.slots__group + .slots__group { margin-top: 1.25rem; }
.slots__label { margin: 0 0 .6rem; font-family: var(--script); font-size: 1.6rem; color: var(--brass-soft); line-height: 1; }
.slots__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot { min-height: 2.75rem; min-width: 5.5rem; padding: 0 1rem; background: transparent; border: 1px solid var(--cinder); color: var(--bone);
  font: 500 .9375rem var(--text); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 2px; transition: border-color .3s, background-color .3s, color .3s; }
.slot:hover { border-color: var(--brass); }
.slot.is-selected { background: var(--brass); border-color: var(--brass); color: var(--night); }

/* Guests */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--cinder); border-radius: 2px; }
.stepper button { width: 3rem; height: 3rem; background: none; border: 0; color: var(--brass-soft); font-size: 1.4rem; cursor: pointer; transition: background-color .3s; }
.stepper button:hover { background: rgba(196, 154, 98, .1); }
.stepper output { min-width: 3.5rem; text-align: center; font: 400 1.75rem var(--display); font-variation-settings: "opsz" 36; }

/* Seating sketch */
.room { margin-bottom: 1.25rem; }
.room__plan { width: 100%; height: auto; max-width: 40rem; }
.room__walls { fill: rgba(18, 15, 13, .6); stroke: rgba(196, 154, 98, .55); stroke-width: 1.5; }
.room__line, .room__door { fill: none; stroke: rgba(196, 154, 98, .7); stroke-width: 1.5; }
.room__door { stroke: var(--ash); stroke-width: 6; }
.room__table { fill: none; stroke: rgba(243, 236, 226, .45); stroke-width: 1.2; }
.room__bar, .room__banquette { fill: rgba(196, 154, 98, .18); stroke: rgba(196, 154, 98, .6); stroke-width: 1.2; }
.room__stool { fill: none; stroke: rgba(243, 236, 226, .4); stroke-width: 1.2; }
.room__mirror { fill: rgba(196, 154, 98, .5); stroke: var(--brass); }
.room__chandelier { fill: none; stroke: rgba(217, 185, 138, .5); stroke-dasharray: 2 3; }
.zone { cursor: pointer; outline: none; }
.zone__hit { fill: rgba(196, 154, 98, 0); stroke: rgba(196, 154, 98, 0); stroke-width: 1.5; transition: fill .45s var(--ease), stroke .45s var(--ease); }
.zone__label { fill: var(--smoke); font: 600 11px var(--text); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; transition: fill .4s; }
.zone:hover .zone__hit, .zone.is-hover .zone__hit, .zone:focus-visible .zone__hit { fill: rgba(196, 154, 98, .1); stroke: rgba(196, 154, 98, .55); }
.zone:hover .zone__label, .zone.is-hover .zone__label, .zone:focus-visible .zone__label { fill: var(--brass-soft); }
.zone.is-selected .zone__hit { fill: rgba(196, 154, 98, .2); stroke: var(--brass); }
.zone.is-selected .zone__label { fill: var(--bone); }
.room__caption { font-size: .8125rem; }
.seat-cards { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .seat-cards { grid-template-columns: 1fr 1fr; } }
.seat-card { position: relative; display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--cinder); border-radius: 2px; cursor: pointer; transition: border-color .35s, background-color .35s; }
.seat-card input { position: absolute; opacity: 0; pointer-events: none; }
.seat-card__name { font: 400 1.125rem var(--display); font-variation-settings: "opsz" 24; }
.seat-card__desc { font-size: .875rem; color: var(--smoke); line-height: 1.45; }
.seat-card:hover, .seat-card.is-hover { border-color: rgba(196, 154, 98, .6); }
.seat-card.is-selected { border-color: var(--brass); background: rgba(196, 154, 98, .08); }
.seat-card:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Details */
.fields { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .fields { grid-template-columns: 1fr 1fr; } .field--wide, .consent { grid-column: 1 / -1; } }
.field { display: grid; gap: .4rem; }
.field span { font-size: .875rem; color: var(--smoke); }
.field input, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; background: rgba(18, 15, 13, .55); border: 1px solid #7A6C5C;
  color: var(--bone); font: 400 1rem var(--text); border-radius: 2px; transition: border-color .3s; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: var(--smoke); cursor: pointer; }
.consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--brass); flex: none; }
.berror { min-height: 1.5rem; color: #E8A39A; font-size: .9375rem; margin: 1rem 0 .5rem; }
.booking__send { margin-top: .25rem; }

/* Live summary: the menu's paper card */
.booking__summary { position: relative; padding: 1.75rem 1.75rem 1.5rem; background: var(--paper); color: var(--char); box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, .7); }
@media (min-width: 64rem) { .booking__summary { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.booking__summary::before { content: ""; position: absolute; inset: .6rem; border: 1px solid var(--paper-line); pointer-events: none; }
.booking__summary .script { color: var(--brass-deep); font-size: 2.2rem; margin-bottom: .75rem; }
.sum { margin: 0; }
.sum div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--paper-line); }
.sum dt { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke-deep); font-weight: 600; }
.sum dd { margin: 0; text-align: right; font: 400 1.0625rem var(--display); font-variation-settings: "opsz" 24; }
.sum__notes { list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: .8125rem; color: var(--smoke-deep); display: grid; gap: .5rem; }

/* Confirmation */
.booking__done { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; background: var(--ash); border: 1px solid var(--cinder); }
.booking__done h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 1.25rem 0 .75rem; }
.booking__done p { margin: 0 auto 1.75rem; color: var(--smoke); max-width: 34rem; }
.done__ring { width: 5rem; height: 5rem; margin: 0 auto; fill: none; stroke: var(--brass); stroke-width: 2; }
.done__ring circle, .done__ring path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* 360 tour dialog */
.tour { width: min(96vw, 72rem); height: min(86vh, 46rem); padding: 0; border: 1px solid var(--cinder); background: var(--night); color: var(--bone); }
.tour::backdrop { background: rgba(10, 8, 7, .82); backdrop-filter: blur(6px); }
.tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1.25rem; border-bottom: 1px solid var(--cinder); }
.tour__bar p { margin: 0; font: 400 1.125rem var(--display); }
.tour iframe { display: block; width: 100%; height: calc(100% - 3.9rem); border: 0; }
.tour-open { margin-top: .25rem; }
.tour { overflow: hidden; }
.tour .pill { background: transparent; cursor: pointer; font-family: var(--text); }
.tour .pill:hover { background: rgba(243, 236, 226, .08); }

/* Seating step: the live 360 tour, framed like the menu card, with area choices beneath. */
.tour-inline { position: relative; aspect-ratio: 16 / 10; background: var(--night); border: 1px solid var(--cinder); outline: 1px solid rgba(196, 154, 98, .35); outline-offset: 5px; margin: .5rem 0 1.25rem; overflow: hidden; }
@media (max-width: 47.99rem) { .tour-inline { aspect-ratio: 4 / 5; } }
.tour-inline iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-inline__veil { position: absolute; inset: 0; display: grid; place-items: center; background: var(--night); pointer-events: none;
  transition: opacity .6s var(--ease); }
.tour-inline__veil span { font-family: var(--script); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--brass-soft); }
.tour-inline.is-ready .tour-inline__veil { opacity: 0; }
.tour-inline.is-turning .tour-inline__veil { opacity: 1; transition-duration: .35s; }
.seat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.seat-chip { min-height: 2.75rem; padding: 0 1.1rem; background: transparent; border: 1px solid var(--cinder); color: var(--bone); border-radius: 2px;
  font: 600 .72rem var(--text); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.seat-chip:hover { border-color: var(--brass); color: var(--brass-soft); }
.seat-chip.is-selected { background: var(--brass); border-color: var(--brass); color: var(--night); }
.seat-desc { min-height: 1.5em; color: var(--bone); }
.room, .seat-cards, .tour-open { display: none !important; }

/* "Your table" follows the scroll: sticky beside the steps on wide screens, a compact card above the phone bar on small ones. */
.booking__summary { will-change: transform; }
@media (max-width: 63.99rem) {
  .booking__summary { position: sticky; bottom: calc(var(--bar-h) + .75rem + env(safe-area-inset-bottom, 0px)); z-index: 6; padding: .9rem 1.1rem .8rem; }
  .booking__summary::before { inset: .35rem; }
  .booking__summary .script { font-size: 1.5rem; margin-bottom: .2rem; }
  .booking__summary .sum { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .booking__summary .sum div { padding: .35rem 0; }
  .booking__summary .sum dt { font-size: .62rem; }
  .booking__summary .sum dd { font-size: .9375rem; }
  .booking__summary .sum__notes { display: none; }
  .booking__summary.is-final { position: relative; bottom: auto; }
}
/* Phones: the following card becomes a slim strip so it never hides the tour. */
@media (max-width: 63.99rem) {
  .booking__summary { padding: .55rem .9rem; }
  .booking__summary .script { display: none; }
  .booking__summary .sum { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .6rem; }
  .booking__summary .sum div { display: grid; gap: .1rem; padding: .2rem 0; border-bottom: 0; }
  .booking__summary .sum dd { text-align: left; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 26rem) { .booking__summary .sum { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Welcome scene: the room glows behind the words while the section is held on screen.
   The photograph eases back, the sentence lights up word by word, and the sign-off is written in.
   ========================================================================== */
.intro { position: relative; padding: 0; background: var(--night); }
.intro.is-live { height: 260vh; }
.intro__stick { position: sticky; top: 0; height: 100svh; min-height: 32rem; overflow: hidden; display: grid; place-items: center; }
.intro__bg { position: absolute; inset: 0; }
.intro__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 38%; transform-origin: 66% 38%; transform: scale(1.35); opacity: .42; will-change: transform; }
.intro__stick::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(18, 15, 13, .5), rgba(18, 15, 13, .94) 78%),
    linear-gradient(var(--night), rgba(18, 15, 13, 0) 16%, rgba(18, 15, 13, 0) 84%, var(--night));
}
.intro__inner { position: relative; z-index: 1; gap: clamp(1.5rem, 3vw, 2.5rem); }
.intro__badge { width: 4rem; opacity: .9; }
.intro .statement { color: var(--bone); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.intro__sign { position: relative; padding-bottom: .5rem; }
.intro__ink { display: inline-block; padding: 0 .35em .1em; }
.intro__sign::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  transform: scaleX(var(--rule, 1)); transform-origin: 50% 50%;
}

/* ==========================================================================
   Phones: the bottom bar is gone. One small Embers emblem floats in the corner;
   a tap unfolds Call, Directions and Reserve above it.
   ========================================================================== */
:root { --bar-h: 0px; }
@media (max-width: 63.99rem) { :root { --bar-h: 0px; } }
.action-bar { display: none; }
.quick {
  position: fixed; z-index: 75; right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  transition: opacity .4s var(--ease);
}
@media (min-width: 64rem) { .quick { display: none; } }
body:has(.nav-open) .quick { opacity: 0; pointer-events: none; }
body:has(.booking) .quick { display: none; }
.quick__toggle {
  width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(18, 15, 13, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 98, .55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 0 0 3px rgba(18, 15, 13, .86), inset 0 0 0 4px rgba(196, 154, 98, .18);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.quick__toggle img { width: 1.9rem; height: auto; transition: transform .6s var(--ease), opacity .4s var(--ease); }
.quick__toggle:active { transform: scale(.94); }
.quick__toggle:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.quick.is-open .quick__toggle { border-color: var(--brass); }
.quick.is-open .quick__toggle img { transform: rotate(-14deg) scale(.9); opacity: .85; }
.quick__menu { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.quick__menu a {
  min-height: 2.75rem; display: flex; align-items: center; padding: .5rem 1.15rem;
  font-family: var(--display); font-size: 1.1rem; color: var(--bone); text-decoration: none;
  background: rgba(18, 15, 13, .92); border: 1px solid rgba(196, 154, 98, .35); border-radius: 2px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.quick__menu a.is-primary { background: var(--brass); border-color: var(--brass); color: var(--night); }
.quick.is-open .quick__menu a { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s; }
.quick.is-open .quick__menu a:nth-child(2) { transition-delay: .06s; }
.quick.is-open .quick__menu a:nth-child(1) { transition-delay: .12s; }

/* ==========================================================================
   Menu page: Lunch and Dinner are two sides of one card. Choosing the other turns the card over.
   ========================================================================== */
.menu-flip { position: relative; perspective: 2400px; }
.menu-flip.is-live .menu-block { margin-top: 0; }
.menu-flip.is-live .menu-block[hidden] { display: none; }
.menu-flip .menu-block { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.menu-jump .pill { transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.menu-jump .pill[aria-selected="true"] { border-color: var(--brass); color: var(--brass-soft); background: rgba(196, 154, 98, .1); }

/* The sign-off stays on one line so it can be written in, left to right. */
.intro__sign { white-space: nowrap; font-size: clamp(1.4rem, 6.2vw, 2.5rem); }
@media (min-width: 48rem) { .intro__sign { font-size: clamp(1.75rem, 2.6vw, 2.5rem); } }

/* Seating: real views of each area (from the restaurant's Go360 tour), one fades in per choice and drifts slowly. */
.seat-view .seat-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transform-origin: 50% 60%;
  transition: opacity .8s var(--ease), transform 7s cubic-bezier(.2, .6, .3, 1);
}
.seat-view .seat-shot.is-on { opacity: 1; transform: scale(1); }
.seat-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(18, 15, 13, .55); }
@media (prefers-reduced-motion: reduce) { .seat-view .seat-shot { transform: none; transition: opacity .3s; } }

/* ==========================================================================
   Hero colour, toned down: a softer, warmer grade on the real photograph (no new image).
   ========================================================================== */
.hero__stage img { filter: saturate(.48) brightness(.7) contrast(.92) sepia(.16); }
/* The quote sits on the restaurant's wall of string lights (from the 360 tour), dimmed so the lights glow. */
.pass__img img { filter: saturate(.9) brightness(.78); }

/* ==========================================================================
   The menu page's look, shared by Our Story, Contact and Reservations
   ========================================================================== */
.menu-page { overflow: clip; }
.themed-page > :not(canvas) { position: relative; z-index: 1; }
.card-photo { margin: clamp(.5rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; outline: 1px solid var(--paper-line); outline-offset: 6px; }
.card-photo img { width: 100%; height: auto; display: block; filter: saturate(.85) sepia(.06); }
.card .prose { max-width: 44rem; margin-inline: auto; font: 400 clamp(1.0625rem, .4vw + 1rem, 1.25rem)/1.7 var(--display); font-variation-settings: "opsz" 18; color: var(--char); }
.card .prose p { max-width: none; margin: 0 0 1.1em; }
.card .prose p:last-child { margin-bottom: 0; }
.card-quote { margin: 1.75rem 0 0; padding-left: 1.25rem; border-left: 1px solid var(--brass-deep); font: italic 400 clamp(1.25rem, 1vw + 1rem, 1.6rem)/1.4 var(--display); color: var(--brass-deep); }
.card-quote p { margin: 0 0 .4rem; }
.card-quote footer { font: 500 .875rem var(--text); font-style: normal; color: var(--smoke-deep); }
.prose-line { margin: 1.25rem 0 0; color: var(--smoke-deep); }
.items--single { grid-template-columns: 1fr !important; max-width: 40rem; }
.card .items a.item__price { text-decoration: none; }
.card .items a.item__price:hover { color: var(--char); }
.find address { font: 400 1.375rem/1.5 var(--display); font-style: normal; margin-bottom: 1.5rem; }
.card-wrap--after { padding-top: 0; }
.card .notes { border-top-color: var(--paper-line); margin-top: 0; }
.card .notes li { border-bottom-color: var(--paper-line); color: var(--char); }
.card .notes li::before { border-color: var(--brass-deep); }

/* Opening hours set like menu lines: day, dotted leader, hours. */
.card .board tr { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 0; }
.card .board tr::after { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--field-paper); transform: translateY(-.3em); }
.card .board th { order: 0; padding: 0; border: 0; font: 500 1.0625rem/1.3 var(--display); letter-spacing: .02em; color: var(--char); }
.card .board td { order: 2; padding: 0; border: 0; font: 600 1rem var(--text); color: var(--brass-deep); white-space: nowrap; }
.card .board .closed { color: var(--smoke-deep); font-weight: 500; }
.card .board tr.is-today th, .card .board tr.is-today td { color: var(--claret); }
.card .board { max-width: 40rem; }
.card .board tr { transition: transform .5s var(--ease); }
@media (hover: hover) { .card .board tr:hover { transform: translateX(4px); } }

/* ==========================================================================
   Reservations on paper: the steps sit on one menu card, each step a course.
   ========================================================================== */
.booking-wrap { padding-top: clamp(1rem, 3vw, 2rem); }
.booking__steps.card { max-width: none; margin: 0; padding: clamp(1.75rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem); gap: 0; display: grid; }
.paper .bstep { background: none; border: 0; border-top: 1px solid var(--paper-line); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.paper .bstep:first-of-type { border-top: 0; padding-top: 0; }
.paper .bstep:last-of-type { padding-bottom: 0; }
.paper .bstep legend { color: var(--char); font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); font-variant-caps: all-small-caps; letter-spacing: .14em; font-variation-settings: "opsz" 24; }
.paper .bstep legend::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
.paper .bstep__num { border-color: var(--brass-deep); color: var(--brass-deep); font-variant-caps: normal; letter-spacing: 0; }
.paper .bnote { color: var(--smoke-deep); }
.paper .bnote.is-flash { color: var(--claret); }
.paper .cal__month { color: var(--char); }
.paper .cal__nav { border-color: var(--paper-line); color: var(--char); }
.paper .cal__nav:hover:not(:disabled) { border-color: var(--brass-deep); color: var(--brass-deep); }
.paper .cal__dow span { color: var(--smoke-deep); }
.paper .cal__day { color: var(--char); }
.paper .cal__day:hover:not(:disabled) { border-color: var(--brass-deep); }
.paper .cal__day:disabled { color: rgba(107, 95, 82, .38); }
.paper .cal__day.is-closed { text-decoration-color: rgba(107, 95, 82, .45); }
.paper .cal__day.is-today { border-color: rgba(126, 90, 46, .6); color: var(--smoke-deep); }
.paper .slots__label { color: var(--brass-deep); }
.paper .slot, .paper .seat-chip { border-color: var(--paper-line); color: var(--char); }
.paper .slot:hover, .paper .seat-chip:hover { border-color: var(--brass-deep); color: var(--brass-deep); }
.paper .cal__day.is-selected, .paper .slot.is-selected, .paper .seat-chip.is-selected { background: var(--char); border-color: var(--char); color: var(--paper); }
.paper .stepper { border-color: var(--paper-line); }
.paper .stepper button { color: var(--brass-deep); }
.paper .stepper button:hover { background: rgba(126, 90, 46, .08); }
.paper .stepper output { color: var(--char); }
.paper .seat-desc { color: var(--char); }
.paper .tour-inline { border-color: var(--paper-line); outline-color: rgba(126, 90, 46, .4); }
.paper .field span { color: var(--smoke-deep); }
.paper .field input, .paper .field textarea { background: rgba(255, 255, 255, .5); border-color: var(--field-paper); color: var(--char); }
.paper .field input:focus, .paper .field textarea:focus { border-color: var(--brass-deep); }
.paper .consent { color: var(--smoke-deep); }
.paper .berror { color: var(--claret); }
/* Small touches: a chosen day, time or seat settles in with a soft press. */
@media (prefers-reduced-motion: no-preference) {
  .cal__day.is-selected, .slot.is-selected, .seat-chip.is-selected { animation: press .45s var(--ease); }
}
@keyframes press { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }

/* Phones: keep the seven calendar columns inside the paper card. */
@media (max-width: 30rem) {
  .booking__steps.card { padding-inline: 1.15rem; }
  .paper .cal__dow, .paper .cal__grid { gap: .15rem; }
  .paper .cal__day { min-height: 2.5rem; }
}

/* Our Story, the partners: one card each, portrait beside their words (alternating sides). */
.partners-stack { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.partners-stack .card__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.partner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 48rem) {
  .partner { grid-template-columns: minmax(12rem, 17rem) 1fr; }
  .partner--flip { grid-template-columns: 1fr minmax(12rem, 17rem); }
  .partner--flip .partner__photo { order: 2; }
}
.partner__photo { margin: 0 auto; width: min(100%, 17rem); overflow: hidden; outline: 1px solid var(--paper-line); outline-offset: 6px; }
.partner__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.8) sepia(.08); }
.partner__words { margin: 0; }
.partner__words p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .85; padding: .06em .1em 0 0; color: var(--brass-deep); }

/* Kitchen motifs above headlines: a fine brass drawing between two short rules. */
.ornament { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0 auto 1.4rem; color: var(--brass); width: max-content; max-width: 100%; }
.ornament__line { width: clamp(2.25rem, 6vw, 4rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(196, 154, 98, .75)); }
.ornament__line:last-child { background: linear-gradient(90deg, rgba(196, 154, 98, .75), transparent); }
.ornament svg { width: 1.85rem; height: 1.85rem; fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.paper .ornament { color: var(--brass-deep); }
#visit .ornament { margin-left: 0; }
#visit .ornament .ornament__line:first-child { display: none; }

/* Page changes: the header and the floating emblem stay perfectly still; only the page content fades. */
.site-header { view-transition-name: site-header; }
.quick { view-transition-name: quick; }
::view-transition-group(site-header), ::view-transition-group(quick) { animation: none; }
::view-transition-old(site-header), ::view-transition-old(quick) { display: none; }
::view-transition-new(site-header), ::view-transition-new(quick) { animation: none; }

/* Display W: close the gap the typeface leaves after it. */
.kern-w { margin-right: -.085em; }

/* Real ingredients resting at the edges of headings (photographed, cut out, toned to the room). */
.menu-head, .kitchen__head { position: relative; }
.menu-head > :not(.garnish), .kitchen__head > :not(.garnish) { position: relative; z-index: 1; }
.garnish { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.garnish .g { position: absolute; display: block; width: clamp(120px, 13vw, 200px); }
.garnish img { display: block; width: 100%; height: auto; filter: saturate(.78) brightness(.8) contrast(.98) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); opacity: .9; }
.garnish .g--l { left: max(-1rem, calc(50% - 36rem)); top: 46%; }
.garnish .g--l img { transform: rotate(-22deg); }
.garnish .g--r { right: max(-1rem, calc(50% - 36rem)); top: 24%; }
.garnish .g--r img { transform: rotate(16deg); }
.garnish .g--s { right: calc(50% - 25rem); bottom: 4%; width: clamp(64px, 6.5vw, 96px); }
.garnish .g--s img { opacity: .75; transform: rotate(10deg); }
.kitchen__head .garnish .g--l { top: 30%; }
.kitchen__head .garnish .g--r { top: 6%; }
@media (max-width: 47.99rem) {
  .garnish .g { width: 104px; }
  .garnish .g--l { left: -46px; top: 30%; }
  .garnish .g--r { right: -40px; top: 58%; }
  .garnish .g--s { display: none; }
}

/* Home 'Our menu': the heading block is narrow, so the ingredients sit outside it, clear of the text. */
.kitchen { overflow-x: clip; }
.kitchen__head .garnish .g--l { left: -8.5rem; top: -4%; }
.kitchen__head .garnish .g--r { right: -8.5rem; top: -10%; }
@media (max-width: 47.99rem) { .kitchen__head .garnish .g--l { left: -60px; top: -10%; } .kitchen__head .garnish .g--r { right: -54px; top: -14%; } }

/* Reservations: a "Reserved" card, two glasses mid-toast and a lit candle (glasses/candle shot on black, screened onto the page). */
.garnish .g--glow img { mix-blend-mode: screen; filter: brightness(.9) saturate(.9); opacity: 1; }
.garnish .g--reserved img { transform: rotate(-9deg); }
.garnish .g--glasses { width: clamp(150px, 15vw, 230px); }
.garnish .g--glasses img { transform: none; }
.garnish .g--candle { width: clamp(46px, 4.2vw, 64px); bottom: -2%; }
.garnish .g--candle img { transform: none; opacity: 1; }

/* Light-wall quote: shape the section like the photograph (wide), so it isn't cropped and zoomed. */
.pass { min-height: clamp(26rem, 58vw, 100svh); }
.pass__img { inset: -10% 0; }

/* The Embers emblem as a heading mark, in brass. */
.ornament__logo { display: block; width: 3.1rem; height: 2.87rem; background: currentColor; -webkit-mask: url('../img/logo-badge-white-320.png') center / contain no-repeat; mask: url('../img/logo-badge-white-320.png') center / contain no-repeat; }

/* Reservations, final: an Embers-embossed napkin on the left; a dressed old fashioned with a hurricane candle behind it on the right. */
.garnish .g--embers-napkin { width: clamp(150px, 17vw, 250px); top: 40%; }
.garnish .g--embers-napkin img { transform: rotate(-11deg); opacity: .95; }
.garnish .g--cocktail { width: clamp(96px, 10vw, 150px); top: auto; bottom: 14%; }
.garnish .g--cocktail img, .garnish .g--hurricane img { transform: none; opacity: .97; }
.garnish .g--hurricane { width: clamp(52px, 5.4vw, 80px); top: auto; bottom: 22%; right: calc(max(-1rem, calc(50% - 36rem)) + clamp(78px, 8.2vw, 124px)); }
@media (max-width: 47.99rem) {
  .garnish .g--embers-napkin { width: 120px; left: -40px; top: 26%; }
  .garnish .g--cocktail { width: 84px; right: -14px; bottom: 6%; top: auto; }
  .garnish .g--hurricane { display: block; width: 44px; right: 56px; bottom: 12%; }
}

.garnish .g--embers-napkin img { filter: brightness(.92) saturate(.9) drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
.garnish .g--cocktail { bottom: 30%; }
.garnish .g--hurricane { bottom: 38%; }
@media (max-width: 47.99rem) { .garnish .g--cocktail { bottom: 6%; } .garnish .g--hurricane { bottom: 12%; } }

.card-foot { justify-content: center; }

/* Photos that zoom while being revealed stay inside their frame. */
[data-unveil] { overflow: hidden; }

/* Phones: keep the cocktail and candle in the heading's top-right corner (as on PC), clear of the booking card. */
@media (max-width: 47.99rem) {
  .garnish .g--cocktail { top: 2%; bottom: auto; right: -12px; width: 80px; }
  .garnish .g--hurricane { top: 0; bottom: auto; right: 58px; width: 40px; }
  .garnish .g--embers-napkin { top: 30%; }
}

@media (max-width: 47.99rem) {
  .garnish .g--cocktail { top: 112px; right: -16px; width: 72px; }
  .garnish .g--hurricane { top: 104px; right: 50px; width: 36px; }
}

/* The chef's quote: a fine brass rule down the left, the last clause in brass italic, the name in plain spaced capitals. */
.pass__quote { border-left: 1px solid var(--brass); padding-left: clamp(1rem, 2.4vw, 1.75rem); }
.pass__quote p { margin-bottom: 1.1rem; }
.pass__quote em { font-style: italic; color: var(--brass-soft); }
.pass__quote cite { font: 600 .75rem var(--text); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-soft); }

/* ==========================================================================
   Phones: a brighter, better-framed version of the same design (PC is unchanged).
   ========================================================================== */
@keyframes ken-burns-m { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, 1%, 0); } }
@media (max-width: 47.99rem) {
  :root { --smoke: #C2B7A9; }
  /* Hero: the glowing EMBERS mirror sits in the top of the screen, the words in the lower half. */
  .hero__stage img { object-position: 84% 26%; filter: saturate(.62) brightness(.98) contrast(.95) sepia(.12); }
  .hero__zoom { transform-origin: 78% 28%; }
  .hero__shade { background: linear-gradient(to bottom, rgba(18, 15, 13, .55) 0%, rgba(18, 15, 13, .05) 20%, rgba(18, 15, 13, .1) 38%, rgba(18, 15, 13, .78) 60%, rgba(18, 15, 13, .95) 100%); }
  .hero__content { justify-content: flex-end; padding-bottom: 2.25rem; }
  .hero h1 { font-size: clamp(2.9rem, 13.5vw, 3.6rem); }
  .hero .btn-row { gap: .6rem; }
  /* Brighter photos and decorations on small screens. */
  .pass__img img { filter: saturate(.95) brightness(1); }
  .seat-view .seat-shot { filter: brightness(1.22) contrast(1.02); }
  .garnish img { filter: saturate(.88) brightness(.97) drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
  .card-photo img, .story__img img, .partner__photo img { filter: brightness(1.04); }
  .plate__img img { filter: brightness(1.08); }
  .muted, .lede, .page-head .lede { color: var(--smoke); }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .hero__zoom { animation: ken-burns-m 30s cubic-bezier(.42, 0, .58, 1) infinite alternate both; }
}

@media (max-width: 47.99rem) {
  .hero__stage img { object-position: 84% 18%; }
  .hero__content { padding-bottom: 5.25rem; }
  .hero__script { margin-bottom: .2rem; }
  .hero__sub { margin: .9rem auto 1.4rem; }
  .hero .tonight { margin-top: 1.1rem; }
}

/* Floating emblem removed (client request); the hero no longer needs room for it. */
.quick { display: none !important; }
@media (max-width: 47.99rem) { .hero__content { padding-bottom: 2.75rem; } }

/* Phones: the four menu links always fit on one line, in French too. */
@media (max-width: 47.99rem) {
  .nav-row { justify-content: space-evenly; gap: 0; padding-inline: 4px; }
  .nav-row .nav-link { white-space: nowrap; padding: 0 .3rem; letter-spacing: .1em; }
}
@media (max-width: 24rem) { .nav-row .nav-link { font-size: .64rem; letter-spacing: .08em; padding: 0 .22rem; } }

/* ==========================================================================
   Phones: tighter, even rhythm between sections; matching stacked buttons.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .section { padding-block: 3.75rem; }
  .section--tight { padding-block: 3rem; }
  .story, .kitchen { padding-block: 3.75rem; }
  .finale { padding-block: 4.5rem; }
  .site-footer { padding-top: 3.5rem; }
  .footer-grid { gap: 2.25rem; }
  .page-head { padding-bottom: 2.25rem; }
  .card-wrap { padding-block: 1.5rem 3.5rem; }
  .menu-block + .menu-block { margin-top: 3rem; }
  .plate { margin-bottom: 2.5rem; }
  /* Stacked call-to-action buttons share one width. */
  .kitchen__cta, .finale .btn-row, .card-wrap > .btn-row { flex-direction: column; align-items: center; }
  .kitchen__cta .btn, .finale .btn-row .btn, .card-wrap > .btn-row .btn { width: min(100%, 17.5rem); justify-content: center; }
  .kitchen__note { margin-top: 1.25rem; padding-inline: .5rem; }
  .visit__block + .visit__block { margin-top: 2.25rem; }
  .footer-base { gap: .75rem 1.5rem; padding-block: 1.25rem 1.75rem; }
  .wordmark { margin-top: 1.5rem; }
}

/* Left-aligned page headings (Events, Privacy): the motif lines up with the title. */
.page-head:not(.menu-head) .ornament { margin-left: 0; }
.page-head:not(.menu-head) .ornament .ornament__line:first-child { display: none; }
@media (max-width: 47.99rem) {
  .find .btn-row { flex-direction: column; align-items: stretch; }
  .find .btn-row .btn { width: 100%; justify-content: center; }
}

/* Phones only: headings in Bodoni Italic, a little heavier, for a high-end, slightly cursive feel. PC is unchanged. */
@media (max-width: 47.99rem) {
  h1, h2:not(.script) {
    font-style: italic; font-weight: 500; font-variation-settings: "opsz" 48; letter-spacing: -.01em;
  }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 3.5rem); line-height: 1.02; }
  .page-head h1 { font-size: clamp(2.9rem, 14vw, 3.75rem); line-height: 1.02; }
  .kern-w { margin-right: -.02em; }
}

/* Page changes: a quick, soft cross-fade (no movement). */
::view-transition-old(root) { animation: .22s ease-out both vt-out; }
::view-transition-new(root) { animation: .32s ease-out both vt-in; }

/* Always reserve the scrollbar's space, so the centred logo and menu never shift between pages. */
html { scrollbar-gutter: stable; }

/* The quote is set smaller than the page headings, so it uses Bodoni's matching optical size (crisp hairlines, same look as 'Menu'). */
.pass__quote p, .pass__quote em { font-variation-settings: "opsz" 40; }
.pass__quote p { letter-spacing: -.01em; line-height: 1.12; }

/* Reservation call-out: drifting embers behind the words. */
.embers-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.finale > .wrap { position: relative; z-index: 1; }

.pass blockquote.pass__quote p, .pass blockquote.pass__quote em { font-variation-settings: "opsz" 40; }

/* A faint warmth along the bottom, as if the smoke rises off the grill. */
.finale::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; z-index: 0; background: radial-gradient(70% 90% at 50% 100%, rgba(196, 120, 60, .12), rgba(196, 120, 60, 0) 70%); }

/* ==========================================================================
   Phones, final polish: decorations sit in the heading's top corners (never on words),
   comfortable tap targets, readable menu links.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .menu-head .garnish .g--l { top: 104px; left: -34px; width: 92px; }
  .menu-head .garnish .g--r { top: 100px; right: -30px; width: 92px; }
  .menu-head .garnish .g--s { display: none; }
  .kitchen__head .garnish .g--l { top: -64px; left: -40px; width: 92px; }
  .kitchen__head .garnish .g--r { top: -70px; right: -34px; width: 92px; }
  .kitchen__head { margin-top: 2.5rem; }
  /* reservations keep their own arrangement */
  .menu-head .garnish .g--embers-napkin { top: 104px; left: -40px; width: 104px; }
  .menu-head .garnish .g--cocktail { top: 112px; right: -16px; width: 72px; }
  .menu-head .garnish .g--hurricane { display: block; top: 104px; right: 50px; width: 36px; }
  /* Contact card: each line is a full, easy tap. */
  .card .items a.item__price { display: inline-flex; align-items: center; min-height: 44px; }
  .card .items li { padding-block: 0; }
  /* Top menu links: a little larger, still on one line. */
  .nav-row .nav-link { font-size: .7rem; letter-spacing: .06em; }
}
@media (max-width: 24rem) { .nav-row .nav-link { font-size: .66rem; letter-spacing: .04em; } }

/* Even line breaks: no single word left dangling on headings, subtitles and sign-offs. */
h1, h2, h3, .lede, .signoff, .card__head p, .hero__sub, .kitchen__note, .finale p, .pass__quote p { text-wrap: balance; }

/* ==========================================================================
   Home hero, slideshow edition: three full-screen pictures cross-fading slowly,
   three centred links in Heebo (a clean, high-end sans), nothing else.
   ========================================================================== */
.hero--slides { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; background: var(--night); }
.slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; z-index: 0; transition: opacity 1.8s cubic-bezier(.45, 0, .2, 1); }
.slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
.slide.is-on { opacity: 1; z-index: 2; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s cubic-bezier(.25, .1, .25, 1); filter: saturate(.9) brightness(.86); }
.slide.is-on img, .slide.is-leaving img { transform: scale(1); }
.slide.is-leaving img { transition: none; }
.hero--slides .hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(18, 15, 13, .38), rgba(18, 15, 13, .6)),
              linear-gradient(rgba(18, 15, 13, .55), rgba(18, 15, 13, 0) 24%, rgba(18, 15, 13, 0) 72%, rgba(18, 15, 13, .7)); }
.hero__links {
  position: absolute; inset: 0; z-index: 4; margin: auto; width: min(92vw, 34rem); height: max-content;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35em 1.5em;
  font-family: "Heebo", "Hanken Grotesk", sans-serif; font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 2rem);
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; text-align: center;
}
.hero__links a { position: relative; color: var(--bone); text-decoration: none; padding: .2em 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); transition: color .4s var(--ease); }
.hero__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.hero__links a:hover { color: #fff; }
.hero__links a:hover::after, .hero__links a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 47.99rem) {
  .hero__links { flex-direction: column; align-items: center; gap: .55rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .slide img { transform: none !important; transition: none; } .slide { transition: opacity .8s linear; } }

/* Keep each slide's subject in view on narrower screens. */
.slide:nth-child(1) img { object-position: 42% 50%; }
.slide:nth-child(2) img { object-position: 40% 45%; }
.slide:nth-child(3) img { object-position: 62% 45%; }

/* ==========================================================================
   HOME HERO ONLY (Atomix-style): full-screen cross-fading photos, Embers emblem top-left,
   three-line menu top-right, three centred links. Nothing outside .hero--slides changes.
   ========================================================================== */
.page-home .site-header { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.page-home .site-header:not(.is-solid) { opacity: 0; pointer-events: none; transform: translateY(-12px); }
.hero--slides { height: 100svh; }
.hero--slides .slide img { object-position: 50% 50%; filter: none; }
.hero--slides .hero__shade { background: rgba(18, 15, 13, .32); }
.hero__bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(1.6rem, env(safe-area-inset-top)) 11vw 0; }
.hero__logo { display: block; width: clamp(52px, 11vw, 78px); opacity: .92; }
.hero__logo img { width: 100%; height: auto; display: block; }
.hero__burger { width: 30px; height: 22px; padding: 0; position: relative; background: none; border: 0; cursor: pointer; display: grid; align-content: space-between; }
.hero__burger span { display: block; height: 1.5px; background: var(--bone); transition: transform .45s var(--ease), opacity .3s; }
.hero__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hero__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hero__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.hero__burger:focus-visible, .hero__logo:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 6px; }
.hero-menu { position: fixed; inset: 0; z-index: 5; background: rgba(18, 15, 13, .94); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.hero-menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.hero-menu nav { display: grid; gap: 1.1rem; text-align: center; }
.hero-menu a { font: 400 clamp(1.25rem, 3.4vw, 1.75rem) "Heebo", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); text-decoration: none; }
.hero-menu a:hover { color: var(--brass-soft); }
.hero-menu .hero-menu__lang { margin-top: 1rem; font-size: .9rem; color: var(--smoke); }
.hero__links { z-index: 4; font-family: "Heebo", sans-serif; font-weight: 400; letter-spacing: .08em;
  font-size: clamp(1.25rem, 4.6vw, 1.9rem); gap: .25em 1.1em; width: min(86vw, 36rem); }
.hero__links a { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
@media (max-width: 47.99rem) {
  .hero__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .25em 1.1em; }
}
.hero--slides .slide { transition: opacity 2s cubic-bezier(.45, 0, .2, 1); }
.hero--slides .slide img { transform: scale(1.05); transition: transform 8s linear; }
.hero--slides .slide.is-on img, .hero--slides .slide.is-leaving img { transform: scale(1); }

/* Hero links and bar fade in once, on load (CSS, independent of scroll scripts). */
@keyframes hero-in { from { opacity: 0; transform: translateY(10px); } }
.hero__links a, .hero__bar { animation: hero-in 1.1s cubic-bezier(.22,1,.36,1) both; }
.hero__links a:nth-child(2) { animation-delay: .12s; }
.hero__links a:nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .hero__links a, .hero__bar { animation: none; } }

/* Wide screens: wide photos, links on one line, emblem and menu lines sized like the reference on desktop. */
.hero--slides picture { display: block; width: 100%; height: 100%; }
@media (min-aspect-ratio: 4/5) {
  .hero__bar { padding: 2.2rem 4.5vw 0; }
  .hero__logo { width: clamp(58px, 4.6vw, 76px); }
  .hero__links { flex-wrap: nowrap; width: auto; font-size: clamp(1.25rem, 1.7vw, 1.75rem); gap: 1.6em; }
  .hero--slides .slide img { object-position: 50% 50%; }
}

/* ==========================================================================
   White header bar and footer (client request; the previous brown is kept above for an easy revert:
   delete this block to go back).
   ========================================================================== */
.site-header.is-solid, .page-inner .site-header {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #e8e1d6;
}
.site-header.is-solid .nav-link, .page-inner .site-header .nav-link,
.site-header.is-solid .pill, .page-inner .site-header .pill { color: #1F1A15; }
.site-header.is-solid .nav-link[aria-current="page"], .page-inner .site-header .nav-link[aria-current="page"] { color: #7E5A2E; }
.site-header.is-solid .pill.lang, .page-inner .site-header .pill.lang { border-color: rgba(31, 26, 21, .35); }
.site-header.is-solid .pill--brass, .page-inner .site-header .pill--brass { border-color: #7E5A2E; color: #7E5A2E; }
.site-header.is-solid .brand img, .page-inner .site-header .brand img { filter: invert(1) brightness(.18); }
.site-header.is-solid .nav-row, .page-inner .site-header .nav-row { border-top-color: #eee7dc; }

/* White footer on PC/laptop only; phones keep the original brown footer. */
@media (min-width: 64rem) {
.site-footer { background: #fff; color: #1F1A15; }
.site-footer h2, .site-footer .footer-list a { color: #1F1A15; }
.site-footer .footer-list a:hover, .site-footer .footer-base a:hover { color: #7E5A2E; }
.site-footer p, .site-footer address, .site-footer .footer-hours, .site-footer .footer-base, .site-footer .footer-base a { color: #6B5F52; }
.site-footer .wordmark { -webkit-text-stroke: 1px rgba(126, 90, 46, .35); }
.site-footer .footer-base { border-top-color: #e8e1d6; }
.site-footer .btn--solid { --bg: #1F1A15; --fg: #fff; --bd: #1F1A15; }
}

/* Home hero menu: the three lines stay three lines when the menu is open (no X). */
.hero__burger[aria-expanded="true"] span { transform: none !important; opacity: 1 !important; }
.hero__bar { z-index: 7; }

/* Reservations on phones: the Date / Time / Guests / Seating bar stays pinned at the bottom, always visible. */
@media (max-width: 63.99rem) {
  .booking__summary, .booking__summary.is-final {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60; transform: none !important; opacity: 1 !important; margin: 0;
  }
  .booking-wrap { padding-bottom: 7.5rem; }
}

/* Phones only: Our Story and Menu card content centred. */
@media (max-width: 47.99rem) {
  .card .course__title { justify-content: center; }
  .card .course__title::before { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
  .card .course__title h3 { text-align: center; }
  .themed-page .card .prose, .themed-page .card .prose p { text-align: center; }
  .partner__words p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
  .card-quote { border-left: 0; padding-left: 0; text-align: center; }
  .items .item__desc, .items .item__tag { text-align: center; }
  .items .item__head { justify-content: center; }
}

/* ==========================================================================
   ONE HEADER ON EVERY PAGE (Atomix style): Embers emblem left, three lines right.
   Transparent over the page at the top; a white bar with dark marks once you scroll.
   ========================================================================== */
.site-header--min {
  display: flex; align-items: center; justify-content: space-between;
  height: auto; padding: max(1.6rem, env(safe-area-inset-top)) 11vw 1rem;
  background: transparent !important; border-bottom-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.page-home .site-header--min:not(.is-solid) { opacity: 1; pointer-events: auto; transform: none; }
.site-header--min.is-solid { background: #fff !important; border-bottom: 1px solid #e8e1d6 !important; padding-top: .8rem; padding-bottom: .8rem; }
.site-header--min .brand { display: block; width: clamp(52px, 11vw, 78px); transition: width .4s var(--ease); }
.site-header--min.is-solid .brand { width: clamp(44px, 8vw, 58px); }
.site-header--min .brand img { width: 100%; height: auto; display: block; filter: none; transition: filter .4s var(--ease); }
.site-header--min.is-solid .brand img { filter: invert(1) brightness(.18); }
.site-burger { width: 30px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; align-content: space-between; }
.site-burger span { display: block; height: 1.5px; background: var(--bone); transition: background-color .4s var(--ease); }
.site-header--min.is-solid .site-burger span { background: #1F1A15; }
.site-burger:focus-visible, .site-header--min .brand:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 6px; }
.site-menu { position: fixed; inset: 0; z-index: 79; background: rgba(18, 15, 13, .96); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.site-menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.site-menu nav { display: grid; gap: 1.1rem; text-align: center; }
.site-menu a { font: 400 clamp(1.25rem, 3.4vw, 1.75rem) "Heebo", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); text-decoration: none; }
.site-menu a:hover, .site-menu a[aria-current="page"] { color: var(--brass-soft); }
.site-menu .site-menu__lang { margin-top: 1rem; font-size: .9rem; color: var(--smoke); }
/* While the menu is open the header stays light over the dark menu. */
body.no-scroll .site-header--min { background: transparent !important; border-bottom-color: transparent !important; }
body.no-scroll .site-header--min .brand img { filter: none; }
body.no-scroll .site-header--min .site-burger span { background: var(--bone); }
@media (min-aspect-ratio: 4/5) { .site-header--min { padding-left: 4.5vw; padding-right: 4.5vw; } .site-header--min .brand { width: clamp(58px, 4.6vw, 76px); } }
/* Inner pages: room under the floating header. */
.page-inner main { padding-top: 0; }

/* Home section headings (Our Vision, Our menu, Starters, Steaks ...): Cormorant Garamond. */
.page-home .story h2, .page-home .kitchen h2, .page-home .plate__text h3, .page-home .finale h2, .page-home #visit h2 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-style: normal; font-variation-settings: normal; letter-spacing: 0;
}
.page-home .story h2 { font-size: clamp(2.6rem, 5vw, 4rem); }
.page-home .kitchen h2 { font-size: clamp(3rem, 6vw, 5rem); }
.page-home .plate__text h3 { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; }

/* Menu open: the header (emblem + lines) always stays visible on top so the menu can be closed. */
body.no-scroll .site-header--min { transform: none !important; opacity: 1 !important; z-index: 81; }

/* Inner pages, top of page: emblem stays white on the dark page (overrides the older white-bar rule). */
.page-inner .site-header--min:not(.is-solid) .brand img, body.no-scroll .page-inner .site-header--min .brand img { filter: none; }
.page-inner .site-header--min.is-solid .brand img { filter: invert(1) brightness(.18); }

/* Page titles centred on every device (also the split-line wrappers the title animation creates). */
.menu-head, .menu-head h1, .menu-head .split-mask-line-mask, .menu-head .split-line { text-align: center !important; }
.menu-head h1 { margin-inline: auto; width: 100%; }

/* Header: never a bar. Only the emblem and the three lines, floating and always visible.
   mix-blend-mode makes them read light over dark areas and dark over the cream cards. */
.site-header--min, .site-header--min.is-solid {
  background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
  padding-top: max(1.6rem, env(safe-area-inset-top)) !important; padding-bottom: 1rem !important;
  mix-blend-mode: difference; transform: none !important;
}
.site-header--min .brand img, .site-header--min.is-solid .brand img,
.page-inner .site-header--min .brand img, .page-inner .site-header--min.is-solid .brand img { filter: none !important; }
.site-header--min .site-burger span, .site-header--min.is-solid .site-burger span { background: #fff !important; }
.site-header--min.is-solid .brand { width: clamp(52px, 11vw, 78px); }
@media (min-aspect-ratio: 4/5) { .site-header--min.is-solid .brand { width: clamp(58px, 4.6vw, 76px); } }
body.no-scroll .site-header--min { mix-blend-mode: normal; }

/* "Embers Hudson" and "Events" (home Visit section) and the footer headings: same Cormorant Garamond as the other headings. */
.visit__block h3, .site-footer h2 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-style: normal; font-variation-settings: normal; letter-spacing: 0;
}
.visit__block h3 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.1; margin-bottom: 1rem; }
.site-footer h2 { font-size: clamp(1.55rem, 1.9vw, 1.8rem); }

/* Phone browser bars (Safari's top strip and bottom toolbar) take their colour from the page background:
   make that white, and keep the dark colour on the page content itself. */
html, body { background: #fff; }
main { background: var(--charcoal); }

/* Phones only: the Embers emblem in the header a little bigger so it reads clearly. */
@media (max-aspect-ratio: 4/5) {
  .site-header--min .brand, .site-header--min.is-solid .brand { width: clamp(64px, 17.5vw, 86px); }
}

/* Our Story: the cheers animation (real Embers glasses) on the page's own dark background, the Our Vision card under it.
   The video's edges fade into the page so its background and the page read as one surface. */
.story--cheers { z-index: 2; padding-top: clamp(1rem, 4vw, 3rem); }
.story--cheers .story__inner { display: flex; flex-direction: column; align-items: center; }
.story__media { position: relative; width: min(100%, 34rem); aspect-ratio: 1; margin-inline: auto; }
.story__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--charcoal);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.story--cheers .story__card { position: relative; z-index: 2; width: min(100%, 44rem); margin: -4.5rem auto 0; }
@media (max-width: 63.99rem) {
  .story--cheers { padding-bottom: 6rem; }
  .story__media { width: 100%; max-width: 30rem; margin-inline: auto; }
  .story--cheers .story__card { margin: -3.5rem 0 0; width: 100%; }
}
@media (min-width: 64rem) {
  .story__media { width: clamp(30rem, 40vw, 40rem); }
  .story--cheers .story__card { width: min(100%, 52rem); margin-top: -2rem; padding: clamp(2.5rem, 4vw, 3.75rem) clamp(2.5rem, 5vw, 4.5rem); text-align: center; }
  .story--cheers .story__partners { justify-content: center; }
}

/* Header emblem and three lines: always pure white (no colour inversion, which tinted them blue over the brown page).
   A soft shadow keeps them readable when they pass over the cream cards. */
.site-header--min, .site-header--min.is-solid, body.no-scroll .site-header--min { mix-blend-mode: normal !important; }
.site-header--min .brand img, .site-header--min.is-solid .brand img,
.page-inner .site-header--min .brand img, .page-inner .site-header--min.is-solid .brand img { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)) !important; }
.site-header--min .site-burger span, .site-header--min.is-solid .site-burger span { background: #fff !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); }

/* Emblem and three lines sit a little closer to the screen edges. */
.site-header--min { padding-left: 7vw !important; padding-right: 7vw !important; }
@media (min-aspect-ratio: 4/5) { .site-header--min { padding-left: 3vw !important; padding-right: 3vw !important; } }

/* Partners' names under Our Vision: Cormorant Garamond, like the other headings. */
.story__partners a { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-style: normal; font-variation-settings: normal; letter-spacing: .01em; font-size: 1.4rem; }

/* Our menu: headings (Starters, Steaks ...) and their dish lists centred on every device. */
.page-home .kitchen__head, .page-home .kitchen__head h2, .page-home .kitchen__head .split-mask-line-mask, .page-home .kitchen__head .split-line { text-align: center !important; }
.page-home .plate__text { text-align: center; }
.page-home .plate__text h3 { text-align: center; margin-inline: auto; }
.page-home .plate__items { max-width: 26rem; margin-inline: auto; text-align: left; }
.page-home .kitchen__cta { justify-content: center; }
.page-home .kitchen__note { text-align: center; }

/* PC/laptop: page changes are instant (no fade), so each page and its smoke/ember background appear straight away. */
@media (min-width: 64rem) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Phones: "Make a reservation today" block centred, every line. */
@media (max-width: 63.99rem) {
  .finale .wrap, .finale h2, .finale .split-mask-line-mask, .finale .split-line, .finale p { text-align: center !important; }
  .finale h2 { margin-inline: auto; text-wrap: balance; }
  .finale .btn-row { justify-content: center; align-items: center; }
}

/* Home ending: "Hours" (just the opening hours, centred) and one short line with the address, phone and directions. */
.page-home #visit .wrap { text-align: center; }
.page-home #visit h2 { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.hours-end { max-width: 30rem; margin-inline: auto; }
.hours-end .board { width: 100%; text-align: left; }
.hours-end__line { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; color: var(--smoke); font-size: .95rem; line-height: 1.8; }
.hours-end__line a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(196, 154, 98, .45); }
.hours-end__line a:hover { color: var(--brass-soft); }
@media (max-width: 63.99rem) { .page-home #visit { padding-bottom: 4.5rem; } }

/* Footer (every page): calm and centred. Emblem, address, phone and email, socials, then the small print. */
.site-footer { padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer-clean { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.footer-clean__logo { display: block; width: 72px; }
.footer-clean__logo img { width: 100%; height: auto; display: block; }
.footer-clean__addr { font-style: normal; color: var(--smoke); font-size: .95rem; line-height: 1.8; }
.footer-clean__addr a { color: var(--bone); text-decoration: none; }
.footer-clean__social { display: flex; gap: 1.75rem; }
.footer-clean__social a { color: var(--bone); text-decoration: none; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; min-height: 2.75rem; display: inline-flex; align-items: center; }
.footer-clean__social a:hover, .footer-clean__addr a:hover { color: var(--brass-soft); }
.footer-clean .footer-base { width: 100%; justify-content: center; gap: .5rem 1.5rem; margin-top: .5rem; }
@media (max-width: 63.99rem) { .footer-clean .footer-base { flex-direction: column; align-items: center; } }
@media (min-width: 64rem) {
  .footer-clean__logo img { filter: invert(1) brightness(.2); }
  .footer-clean__addr, .footer-clean .footer-base, .footer-clean .footer-base a { color: #6B5F52; }
  .footer-clean__addr a, .footer-clean__social a { color: #1F1A15; }
  .footer-clean__social a:hover, .footer-clean__addr a:hover { color: #7E5A2E; }
}
.page-home #visit .ornament { margin-left: auto; margin-right: auto; }
.board th { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-variation-settings: normal; letter-spacing: 0; }
.footer-clean .footer-base { flex-direction: column; align-items: center; text-align: center; }
.footer-clean .footer-base nav { justify-content: center; }
.page-home #visit .ornament .ornament__line:first-child { display: block; }