:root {
  --bg: #0c0a08;
  --ink: #ece4d6;
  --mute: #a39784;
  --brass: #c9a46c;
  --bone: #ebe4d8;
  --espresso: #1a1410;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --gut: clamp(16px, 4.2vw, 72px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: inherit; }

/* ---------- stage ---------- */
#gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 0; opacity: 0; filter: blur(14px);
}
.veil { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 95% at 58% 42%, rgba(12,10,8,0) 40%, rgba(9,7,6,.8) 100%);
}
.veil::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); background-size: 160px;
  opacity: .045; mix-blend-mode: overlay; }
main { position: relative; z-index: 2; }
/* while the scene builds (a few seconds on an integrated GPU): the hero type and the nav wait for the intro, and a
   thin brass line runs at the foot of the screen. The reveal animation is a safety net: never hide the page for good. */
.is-loading .hero__inner, .is-loading .nav { opacity: 0; animation: load-reveal .8s 14s forwards; }
@keyframes load-reveal { to { opacity: 1; } }
.loader { position: fixed; left: 50%; bottom: clamp(28px, 6.5vh, 70px); width: 72px; height: 1px; margin-left: -36px; z-index: 3;
  background: rgba(236,228,214,.16); overflow: hidden; pointer-events: none; transition: opacity .8s var(--ease); }
.loader::after { content: ''; position: absolute; inset: 0; background: var(--brass); transform: translateX(-100%);
  animation: cue 2.2s var(--ease) infinite; }
html:not(.is-loading) .loader { opacity: 0; }
html:not(.is-loading) .loader::after { animation: none; }

/* ---------- type atoms ---------- */
.eyebrow { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.btn { display: inline-flex; align-items: center; gap: .8em; font: 500 12px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; padding: 15px 22px; border-radius: 2px; transition: background .5s var(--ease), color .5s var(--ease); }
.btn--line { border: 1px solid rgba(236,228,214,.38); }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn--solid { background: var(--ink); color: var(--espresso); padding: 19px 28px; }
.btn--solid:hover { background: var(--brass); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut); mix-blend-mode: difference; color: var(--ink); border-bottom: 1px solid transparent; }
/* over the light section: its own bone bar, no blend (see main.js) */
.nav--light { mix-blend-mode: normal; background: #ebe4d8; color: var(--espresso); border-bottom-color: rgba(26,20,16,.12); }
.nav--light .btn--line { border-color: rgba(26,20,16,.32); }
.nav--light .btn--line:hover { background: var(--espresso); color: var(--bone); }
.brand { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
.nav__links { display: flex; align-items: center; gap: 34px; font-size: 13.5px; letter-spacing: .01em; }
.nav__links a:not(.btn) { opacity: .82; transition: opacity .4s; }
.nav__links a:not(.btn):hover { opacity: 1; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) clamp(28px, 6.5vh, 70px); }
.hero__eyebrow { margin-bottom: 26px; }
.hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(50px, 7.3vw, 132px); line-height: .96;
  letter-spacing: -.028em; font-variation-settings: "opsz" 144; max-width: 9.5em; }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(26px, 5vh, 52px); }
.hero__lede { max-width: 25em; color: var(--mute); font-size: 15px; line-height: 1.55; }
.cue { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.cue__line { width: 56px; height: 1px; background: rgba(236,228,214,.25); position: relative; overflow: hidden; }
.cue__line::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%);
  animation: cue 2.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- story ---------- */
.story { position: relative; height: 500vh; }
.story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scrim { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(70% 75% at 0% 18%, rgba(12,10,8,.66) 0%, rgba(12,10,8,.3) 55%, rgba(12,10,8,0) 100%); }
.topshade { display: none; }
.captions { position: absolute; left: var(--gut); top: max(120px, 19vh); width: min(31rem, 36vw); height: 12rem; }
.cap { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
.cap__label { display: flex; gap: 14px; font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 20px; overflow: hidden; }
.cap__label span { color: var(--mute); }
.cap__line { font-family: var(--serif); font-weight: 300; font-size: clamp(27px, 2.75vw, 46px); line-height: 1.1;
  letter-spacing: -.016em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.rail { position: absolute; left: var(--gut); bottom: clamp(28px, 6.5vh, 70px); display: flex; gap: 8px; }
.rail i { display: block; width: 44px; height: 1px; background: rgba(236,228,214,.2); position: relative; overflow: hidden; }
.rail i::after { content: ''; position: absolute; inset: 0; background: var(--brass); transform-origin: 0 50%;
  transform: scaleX(var(--f, 0)); }

/* ---------- hand-off ---------- */
.handoff { position: relative; height: 100vh; display: flex; align-items: flex-end; padding: 0 var(--gut) 21vh; }
.handoff__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.75vw, 46px);
  line-height: 1.1; letter-spacing: -.012em; opacity: 0; transform: translateY(60px); }

/* ---------- about (light) ---------- */
.about { position: relative; background: var(--bone); color: var(--espresso); min-height: 100vh;
  padding: clamp(110px, 22vh, 220px) var(--gut) clamp(80px, 16vh, 160px); }
.about__eyebrow { color: #8a6a3e; margin-bottom: 34px; }
.about__text { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4.1vw, 70px); line-height: 1.06;
  letter-spacing: -.022em; max-width: 16.5em; font-variation-settings: "opsz" 120; }
.about__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(80px, 15vh, 150px); border-top: 1px solid rgba(26,20,16,.16); padding-top: 26px; }
.col h3 { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.col p { max-width: 21em; color: #5b4f44; font-size: 15px; line-height: 1.55; }

/* ---------- CTA (the scene returns) ---------- */
/* at least the LARGE viewport (lvh): on iOS the toolbars collapse near the end of the page and the visible area grows
   past 100svh; a section of 100svh left the bottom of the light "The room" section showing above it, as a bone band
   under the nav (which also stayed on its bone bar) */
.cta { position: relative; min-height: 100vh; min-height: 100lvh; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(110px, 24vh, 240px) var(--gut) 26px;
  background: linear-gradient(90deg, rgba(12,10,8,.78) 0%, rgba(12,10,8,.25) 48%, rgba(12,10,8,0) 70%); }
.cta__title { font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 8vw, 142px); line-height: .95;
  letter-spacing: -.03em; margin: 26px 0 44px; font-variation-settings: "opsz" 144; }
.foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; padding-top: 22px;
  border-top: 1px solid rgba(236,228,214,.14); font-size: 13px; color: var(--mute); }
.foot__brand { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.foot__demo { margin-left: auto; }
.foot__demo b { font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  border: 1px solid rgba(236,228,214,.35); padding: 4px 7px 3px; margin-right: 10px; border-radius: 2px; }
.foot__demo a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(236,228,214,.35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.foot__demo a:hover { text-decoration-color: currentColor; }

/* ---------- the same restaurant in the other packages, directly above the footer ----------
   One quiet line: the label in the Demo mark's small capitals, the other two packages underlined like the footer's
   links, the current one in brass and no link. The CTA's free space stays above it (margin-top: auto), so the title
   and the button keep their place; every link is 44 px tall to tap. */
.xtier { margin-top: auto; padding-top: 32px; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 26px;
  font-size: 13px; }
.xtier__label { font: 500 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.xtier__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.xtier__list li { display: flex; align-items: center; }
.xtier__list li + li::before { content: '\00B7'; content: '\00B7' / ''; margin: 0 12px; color: rgba(236,228,214,.32); }
.xtier a, .xtier__cur { display: inline-block; min-width: 44px; padding: 12px 0; line-height: 20px; }
.xtier a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(236,228,214,.35); text-underline-offset: 3px;
  transition: text-decoration-color .3s; }
.xtier a:hover { text-decoration-color: currentColor; }
.xtier__cur { color: var(--brass); }
/* phones: the CTA stacks from the foot of the screen. Everything under the eyebrow lifts it, and the closing shot is
   fitted between the nav and the eyebrow (scene.js fitCta), so the band is one 44 px row (12 px under the button, its
   foot on the footer's rule, the label in two short lines beside the links) and its height comes back out of the
   CTA's own spacing: gap 40 to 32, the title's margins 18/30 to 10/22. The eyebrow ends where it did before the band,
   so fitCta frames the same closing shot ("Reservations" clear of the wordmark and the charger's rim on an SE).
   Under 360 px it wraps: the label on one line, the links under it. */
@media (max-width: 760px) {
  .xtier { margin: -20px 0 -32px; padding-top: 0; column-gap: 16px; }
  .xtier__label { max-width: 11em; text-wrap: balance; }
  .xtier__list li + li::before { margin: 0 10px; }
}
@media (max-width: 359px) {
  /* two rows here, so they sit closer (8 px under the button, 6 between the label and the links, the links 9 px
     over the rule) and the eyebrow on a 320x568 screen stays clear of the wordmark as before the band */
  .xtier { margin: -24px 0 -35px; }
  .xtier__label { max-width: none; }
  .xtier__list { margin-top: -6px; }
}

.fps { position: fixed; right: 10px; bottom: 10px; z-index: 50; font: 500 11px/1 ui-monospace, monospace; color: #9f9;
  background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 3px; }

/* SplitText masks */
.line-mask { overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; } /* room for Fraunces descenders at line-height .95 */

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .nav { padding: 16px var(--gut); }
  .brand { font-size: 21px; }
  .nav__links a:not(.btn) { display: none; }
  .btn--line { padding: 11px 14px; font-size: 11px; }
  .hero { padding-bottom: 30px; }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__title { font-size: 13.2vw; }
  .hero__foot { margin-top: 20px; }
  .hero__lede { font-size: 14px; max-width: 19em; }
  .cue { display: none; }
  .about { padding-top: max(128px, 18vh); }
  .about__cols { grid-template-columns: 1fr; gap: 30px; }
  .cta { background: linear-gradient(0deg, rgba(12,10,8,.9) 30%, rgba(12,10,8,.2) 75%, rgba(12,10,8,0)); justify-content: flex-end; gap: 32px;
    padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .cta__title { margin: 10px 0 22px; }   /* gap 40 and 18/30 before the package band, see .xtier */
  /* the footer in calm rows: name, hours, the demo note, then the two links as full-width rows (46 px tap targets) */
  .foot { display: block; padding-top: 22px; font-size: 14px; line-height: 1.5; }
  .foot__brand { display: block; font-size: 22px; line-height: 1.2; }
  .foot__meta { display: block; margin-top: 3px; }
  .foot__demo { display: block; margin-top: 18px; }
  .foot__demo b { display: inline-block; vertical-align: 1px; line-height: 1.2; }
  .foot__links { display: block; margin-top: 10px; border-top: 1px solid rgba(236,228,214,.12); }
  .foot__dot { display: none; }
  .foot__demo .foot__links a { display: block; position: relative; padding: 13px 32px 13px 0; line-height: 20px;
    border-bottom: 1px solid rgba(236,228,214,.12); text-decoration: none; }
  .foot__demo .foot__links a::first-letter { text-transform: uppercase; }
  .foot__demo .foot__links a::after { content: ''; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 1em; height: 1em; color: var(--brass); background-color: currentColor;
    -webkit-mask: var(--ic-arr) center/contain no-repeat; mask: var(--ic-arr) center/contain no-repeat;
    transition: transform .4s var(--ease); }
  .foot__demo .foot__links a:hover::after { transform: translate(4px, -50%); }
}

/* portrait screens (phones, tablets upright): the scene sits high, captions sit low */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .scrim { background: linear-gradient(to top, rgba(12,10,8,.92) 0%, rgba(12,10,8,.8) 26%, rgba(12,10,8,0) 58%); }
  .captions { left: var(--gut); right: var(--gut); width: auto; max-width: 34rem; top: auto; bottom: 88px; }
  .cap { top: auto; bottom: 0; }
  .rail { bottom: 48px; }
  /* the closing shot faces the banquette wall: a soft shade under the nav, and the nav in plain bone there
     (difference blending turned the wordmark blue over the sconces) */
  .topshade { display: block; position: fixed; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .8s var(--ease);
    background: linear-gradient(rgba(12,10,8,.7), rgba(12,10,8,.42) 50%, rgba(12,10,8,0)); }
  .at-cta .topshade { opacity: 1; }
  .at-cta .nav:not(.nav--light) { mix-blend-mode: normal; }
}
@media (max-width: 760px) {
  .cap__line { font-size: 27px; }
  .rail i { width: 34px; }
  /* the flat lay fills a phone: the line sits low, in the dark under the table, and carries its own soft scrim for
     the moment "The room" pushes it up across the lamp and the bread */
  .handoff { padding-bottom: 11vh; }
  .handoff__line { position: relative; isolation: isolate; }
  .handoff__line::before { content: ''; position: absolute; inset: -55% -18% -55% -30%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(12,10,8,.62), rgba(12,10,8,.35) 55%, rgba(12,10,8,0)); }
}

/* ---------- reduced motion: the finished table, standing still ---------- */
.reduced #gl { opacity: 1; filter: none; }
.reduced .story { height: auto; }
.reduced .story__sticky { position: relative; height: auto; overflow: visible; padding: 20vh 0; }
.reduced .captions { position: relative; left: auto; bottom: auto; width: auto; height: auto; padding: 0 var(--gut);
  display: grid; gap: 12vh; max-width: 36rem; }
.reduced .cap { position: relative; visibility: visible; }
.reduced .rail { display: none; }
.reduced .handoff__line { opacity: 1; transform: none; }
.reduced .cue__line::after { animation: none; transform: none; }