@font-face { font-family: "Inter"; src: url(assets/fonts/inter-latin-var.woff2) format("woff2-variations"), url(assets/fonts/inter-latin-var.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Gilda Display"; src: url(assets/fonts/gilda-display.woff2) format("woff2"); font-display: swap; }
:root {
  --bg: #1f1e1a; /* average of stone.webp */
  --fg: #F2EFE8;
  --mute: #ADA79C;
  --gold: #C9A96E;
  --gold-h: #D8BC86;
  --line: rgb(242 239 232 / .14);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-body: 450; /* body sits a touch heavier than Inter Regular */
  --w-caps: 500; /* small uppercase labels, nav, buttons */
  --ls-caps: .16em;
  --display: "Gilda Display", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --top-h: 72px;
  --badge-room: 52px; /* space for Netlify's badge, bottom-right. Set to 0 once the badge is off. */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h, 120px) + 16px); scroll-padding-bottom: calc(var(--badge-room) + 16px); }
body { margin: 0; background: var(--bg) url(assets/img/stone.webp) 0 0 / 1600px repeat; color: var(--fg); font: var(--w-body) 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; box-shadow: 0 0 0 5px #000; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.75rem; }
p { margin: 0 0 1em; }
.wrap { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.label { font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; color: var(--gold); margin-bottom: 1.5em; }
.fine { font-size: .875rem; color: var(--mute); }
.skip { position: absolute; left: -999px; top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--fg); color: var(--bg); padding: .75rem 1rem; }

/* one filled style, gold, for Reserve only */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 2rem; text-decoration: none; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; border: 1px solid var(--gold); transition: background .3s, color .3s, border-color .3s; }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-h); border-color: var(--gold-h); }
.btn-sm { min-height: 44px; padding: .5rem 1.25rem; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .5em; }
.link:hover { color: var(--gold); }

/* demo notice + header stick together; the header overlaps the hero, the notice doesn't */
.bar { position: sticky; top: 0; z-index: 20; margin-bottom: calc(var(--top-h) * -1); }
.demo { display: flex; justify-content: center; padding: 0 1rem; background: var(--fg); color: var(--bg); font-size: .8125rem; text-align: center; }
.demo p { margin: 0; }
.demo a { display: inline-block; padding-block: .5rem; }
.nowrap { white-space: nowrap; }
@media (max-width: 759.98px) { .nowrap { display: block; } .lead-sep { display: none; } }

/* Selma-style header: logo centered, two links each side. Clear over the hero, frosted glass once you scroll. */
.top { position: relative; height: var(--top-h); display: flex; align-items: center; padding-inline: clamp(.75rem, 4vw, 3rem); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(31 30 26 / .72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top::before { background: rgb(31 30 26 / .97); } }
.top.solid::before { opacity: 1; }
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 112px; }
.top nav { flex: 1; }
.top ul { list-style: none; margin: 0; padding: 0; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; }
.top nav a:hover { color: var(--gold); }
.nav-reserve { text-decoration: underline !important; text-decoration-color: var(--gold) !important; text-underline-offset: .5em; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: -.5rem; background: none; border: 0; color: var(--fg); cursor: pointer; }
@media (max-width: 759px) {
  #nav-links { position: absolute; left: 0; right: 0; top: 100%; padding: .5rem clamp(.75rem, 4vw, 3rem) 1rem; background: rgb(31 30 26 / .97); border-bottom: 1px solid var(--line); }
  #nav-links:not(.open) { display: none; }
  #nav-links a { width: 100%; min-height: 56px; border-bottom: 1px solid var(--line); }
  #nav-links li:last-child a { border-bottom: 0; }
}

/* hero */
.hero { position: relative; }
.hero-pin { position: relative; height: calc(100svh - var(--bar-h, 120px) + var(--top-h)); min-height: 560px; overflow: hidden; display: grid; align-items: end; }
.hero-media { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .6) 55%, rgb(0 0 0 / .6)); }
.hero-text { position: relative; z-index: 1; padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(6rem, 12vh, 8rem); max-width: 54rem; }
.hero .label { color: var(--fg); }
.lede { font-size: 1.3125rem; letter-spacing: -.01em; max-width: 32rem; margin-bottom: 2.5rem; }
.vid-toggle { position: absolute; z-index: 2; right: clamp(1.25rem, 4vw, 3rem); top: calc(var(--top-h) + 1rem); min-height: 44px; padding: 0 1rem; background: rgb(0 0 0 / .6); color: var(--fg); border: 1px solid var(--line); font: inherit; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; cursor: pointer; }

section { padding-block: clamp(6rem, 14vw, 11rem); }
.hero { padding: 0; }
.head { max-width: 40rem; margin-bottom: 4rem; }
.head p:last-child { color: var(--mute); }

/* big type reveal */
.big { font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.18; letter-spacing: -.025em; max-width: 22em; margin: 0; }

.chef { display: grid; gap: 4rem; align-items: center; }
.chef-art { position: relative; margin: 0; width: min(100%, 460px); aspect-ratio: 4 / 5; }
.chef-brush { position: absolute; right: 0; top: 0; width: 66%; aspect-ratio: 4 / 5; object-fit: cover; }
.chef-cut { position: absolute; left: 0; bottom: 0; z-index: 1; width: 58%; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .6)); }
.chef p:not(.label) { color: var(--mute); max-width: 34rem; }

/* sticky tiers */
.tiers { display: grid; gap: 2rem; margin-bottom: 6rem; }
/* Mobile: no pinning. Each tier shows its own photo above its text, so a photo never sits on top of copy. */
.tier-pics { display: none; }
.tier-pic { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.75rem; background: #000; }
.tier-pic img { width: 100%; height: 100%; object-fit: cover; }
.tier-list { list-style: none; margin: 0; padding: 0; }
.tier-list li { padding: 3rem 0; border-top: 1px solid var(--line); min-height: 60svh; }
.price { font-family: var(--display); font-size: 3.5rem; line-height: 1; margin-bottom: .4em; font-variant-numeric: lining-nums; }
.when { font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; color: var(--mute); }
.tier-list p:last-child { color: var(--mute); max-width: 30rem; }

.menu-cols { display: grid; gap: 3rem; margin-bottom: 3rem; }
.note { font-size: .875rem; color: var(--mute); margin-top: -.6em; }
.items { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.items li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
.items span { display: block; font-size: .875rem; color: var(--mute); }

/* parallax stack */
.grill { display: grid; gap: 4rem; align-items: center; }
.grill-text p:not(.label) { color: var(--mute); max-width: 26rem; }
.stack { position: relative; aspect-ratio: 1; }
.stack > * { position: absolute; margin: 0; }
.stack img { width: 100%; height: 100%; object-fit: cover; }
.stack > :nth-child(1) { left: 0; top: 4%; width: 48%; height: 72%; }
.stack > :nth-child(2) { right: 0; top: 0; width: 42%; height: 44%; }
.stack > :nth-child(3) { right: 6%; bottom: 0; width: 38%; height: 48%; z-index: 1; }
.stack > :nth-child(4) { left: 20%; bottom: -6%; width: 30%; height: 34%; z-index: 2; }
.card { background: #000; padding: 10px; border: 1px solid var(--line); box-shadow: 0 20px 50px rgb(0 0 0 / .5); }

/* locations */
.visit { border-top: 1px solid var(--line); }
.locs { display: grid; gap: 5rem; }
.locs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 2rem; }
address { font-style: normal; margin-bottom: 1.5rem; }
address a { display: inline-block; padding-block: .25rem; text-decoration-color: var(--line); text-underline-offset: .3em; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0 0 2rem; }
dt { color: var(--mute); }
dd { margin: 0; }
dd small { display: block; color: var(--mute); font-size: .875rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 0; }

/* gallery */
.gallery { position: relative; padding-bottom: clamp(4rem, 8vw, 6rem); overflow: hidden; }
.gallery .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; max-width: none; }
.gallery .head h2 { margin: 0; }
.g-ctl { display: flex; gap: .5rem; }
.g-ctl button { min-width: 48px; min-height: 48px; padding: 0 1.25rem; background: transparent; color: var(--fg); border: 1px solid var(--line); font: inherit; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s; }
.g-ctl button:hover { border-color: var(--gold); color: var(--gold); }
.g-ctl .g-step { padding: 0; font-size: 1.1rem; letter-spacing: 0; }
.reel { overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; }
.reel::-webkit-scrollbar { display: none; }
.reel.drag { cursor: grabbing; }
.reel ul { list-style: none; margin: 0; padding: 0 0 1.5rem; display: flex; gap: 30px; width: max-content; }
.reel li { flex: none; overflow: hidden; }
.reel img { height: 300px; width: auto; user-select: none; -webkit-user-drag: none; transition: transform .5s var(--ease); transform: scale(var(--s, 1)); }
.reel-cards ul { gap: 24px; padding-block: .5rem 1.5rem; }
.reel-cards li { background: #000; padding: 10px; border: 1px solid var(--line); }
.reel-cards img { height: 220px; }
.reel:focus-visible { outline-offset: -4px; }
.g-hint { font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; color: var(--mute); margin-top: 1rem; }
.cursor { position: fixed; left: 0; top: 0; z-index: 30; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--gold); color: var(--bg); font-size: .75rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(.4); transition: opacity .3s, transform .3s var(--ease); }
.cursor.on { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1); transition: opacity .3s, transform .08s linear; }
.cursor.press { transform: translate(var(--x, 0), var(--y, 0)) scale(.75); }

.cta { position: relative; text-align: center; overflow: hidden; }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .68); }
.cta > div { position: relative; z-index: 1; padding-inline: 1.5rem; }
.cta p { margin-bottom: 2.5rem; }
.cta .actions { justify-content: center; }

.foot { padding-block: 4rem 7rem; border-top: 1px solid var(--line); color: var(--mute); }
.foot .wrap { display: grid; gap: 1.5rem; }
.foot img { width: 110px; }
.foot p { margin: 0; }
.foot a { display: inline-block; padding-block: .6rem; color: var(--fg); }
.legal { font-size: .8125rem; color: var(--mute); max-width: 60rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal a { padding-block: .25rem; }
.foot-h { font: .8125rem/1 var(--sans); letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; color: var(--fg); margin-bottom: .6rem; }

.mbar { position: fixed; z-index: 15; inset: auto 0 0; display: flex; padding-bottom: var(--badge-room); background: rgb(31 30 26 / .96); border-top: 1px solid var(--line); transition: transform .3s; }
.mbar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; text-decoration: none; font-size: .8125rem; letter-spacing: var(--ls-caps); font-weight: var(--w-caps); text-transform: uppercase; }
.mbar .mbar-gold { background: var(--gold); color: var(--bg); }
.mbar.away { transform: translateY(100%); visibility: hidden; transition: transform .3s, visibility 0s .3s; }
@media (max-width: 759px) {
  html { scroll-padding-bottom: calc(56px + var(--badge-room) + 16px); }
  .hero-text { padding-bottom: calc(56px + var(--badge-room) + 2.5rem); }
}

@media (min-width: 760px) {
  .mbar { display: none; }
  .nav-toggle { display: none; }
  .top ul { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; max-width: 1100px; margin-inline: auto; }
  .top li:nth-child(3) { grid-column: 4; }
  .brand img { width: 132px; }
  .chef { grid-template-columns: 460px 1fr; gap: 6rem; }
  .tiers { grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
  /* Desktop: the photo is pinned in its own column, beside the tiers, and cross-fades as each tier becomes active. */
  .tier-pic { display: none; }
  .tier-pics { position: sticky; display: grid; overflow: hidden; background: #000; aspect-ratio: 4 / 5; top: calc(var(--bar-h, 120px) + 3vh); height: calc(100svh - var(--bar-h, 120px) - 6vh); width: auto; max-width: 100%; }
  .tier-pics img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); }
  .tier-pics img.on { opacity: 1; transform: none; filter: none; }
  .tier-list li { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; }
  .menu-cols { grid-template-columns: 1fr 1fr; gap: 6rem; }
  .grill { grid-template-columns: 1fr 1.4fr; gap: 6rem; }
  .locs { grid-template-columns: 1fr 1fr; gap: 6rem; }
  .reel img { height: 440px; }
  .reel-cards img { height: 300px; }
  .foot { padding-bottom: 4rem; }
  .foot .wrap { grid-template-columns: auto 1fr 1fr; column-gap: 4rem; align-items: start; }
  .foot .wrap > p { grid-column: 1 / -1; }
}

/* ---------- motion: only when the user hasn't asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-io .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js-io .reveal.in { opacity: 1; transform: none; }
  .js-io [data-words] .w { opacity: .2; transition: opacity .6s var(--ease); }
  .js-io [data-words].in .w { opacity: 1; }

  @supports (animation-timeline: view()) {
    /* hero is 170svh, so the pinned stretch is cover 37% to 63% (1/2.7 to 1.7/2.7).
       Selma-style hero, desktop only (on a phone the shrunk frame is just a grey square): the pin holds while the frame shrinks and the copy lifts away */
    @media (min-width: 760px) {
      .hero { height: 170svh; view-timeline: --hero block; }
      .hero-pin { position: sticky; top: 0; }
      .hero-media { animation: shrink linear both; animation-timeline: --hero; animation-range: cover 37% cover 63%; }
      .hero-text { animation: lift linear both; animation-timeline: --hero; animation-range: cover 39% cover 55%; }
      .hero-media::after { animation: unscrim linear both; animation-timeline: --hero; animation-range: cover 46% cover 63%; }
    }
    @keyframes shrink { to { transform: scale(.8); } }
    @keyframes unscrim { to { opacity: .2; } }
    @keyframes lift { to { transform: translateY(-14vh) scale(.92); opacity: 0; } }

    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } }

    [data-words] .w { animation: lit linear both; animation-timeline: view(); animation-range: entry 80% cover 50%; }
    @keyframes lit { from { opacity: .2; } }

    .chef-cut { animation: drift linear both; animation-timeline: view(); --d: 8vh; }
    .stack > * { animation: drift linear both; animation-timeline: view(); }
    .stack > :nth-child(1) { --d: 4vh; }
    .stack > :nth-child(2) { --d: 12vh; }
    .stack > :nth-child(3) { --d: 20vh; }
    .stack > :nth-child(4) { --d: 28vh; }
    @keyframes drift { from { transform: translateY(var(--d)); } to { transform: translateY(calc(var(--d) * -1)); } }

    .cta img { animation: zoom linear both; animation-timeline: view(); }
    @keyframes zoom { from { transform: scale(1.15); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .reel { scroll-snap-type: x mandatory; }
  .reel li { scroll-snap-align: start; }
  .cursor { display: none; }
}