:root {
  --ink: #171613;
  --ink-soft: #24211d;
  --paper: #eee8db;
  --paper-soft: #f7f2e8;
  --gold: #c9a15d;
  --gold-light: #e3c58e;
  --wine: #6f2733;
  --sage: #a7ad91;
  --line: rgba(23, 22, 19, 0.18);
  --max: 1240px;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(22px, 4vw, 64px);
  color: var(--paper-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: padding 250ms ease, color 250ms ease, background 250ms ease, border 250ms ease;
}
.site-header.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--ink);
  background: rgba(238, 232, 219, 0.94);
  border-color: var(--line);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 25px; letter-spacing: 0.04em; }
.brand-mark { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 42px); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.main-nav a { position: relative; }
.main-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 220ms ease; }
.main-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 12px 18px; color: var(--ink); background: var(--gold-light); }
.site-header.is-scrolled .nav-cta { color: var(--paper-soft); background: var(--ink); }
.menu-button { display: none; color: inherit; background: transparent; border: 0; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: 4vw;
  padding: 132px clamp(22px, 7vw, 108px) 84px;
  color: var(--paper-soft);
  background:
    radial-gradient(circle at 74% 42%, rgba(201, 161, 93, 0.16), transparent 22%),
    linear-gradient(125deg, #151411 0%, #211c18 60%, #171512 100%);
  isolation: isolate;
  overflow: hidden;
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(227, 197, 142, 0.18); border-radius: 50%; }
.hero-orbit--one { width: min(66vw, 960px); aspect-ratio: 1; right: -24vw; top: -27vw; }
.hero-orbit--two { width: min(42vw, 620px); aspect-ratio: 1; left: 48%; bottom: -29vw; }
.eyebrow, .kicker { margin: 0 0 24px; font-size: 11px; font-weight: 750; letter-spacing: 0.22em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--gold-light); }
.eyebrow span { width: 38px; height: 1px; background: currentColor; }
.hero h1, .section h2, .booking h2, .contact h2 { margin: 0; font-family: var(--serif); font-size: clamp(62px, 7.4vw, 122px); font-weight: 400; line-height: 0.85; letter-spacing: -0.055em; }
.hero h1 em, .section h2 em, .booking h2 em, .contact h2 em { color: var(--gold-light); font-weight: 400; }
.hero-intro { max-width: 580px; margin: 34px 0 0; color: rgba(247, 242, 232, 0.72); font-family: var(--serif); font-size: clamp(20px, 1.8vw, 27px); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid transparent; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button--light { color: var(--ink); background: var(--gold-light); }
.button--dark { color: var(--paper-soft); background: var(--ink); }
.button--outline { border-color: var(--ink); }
.button--outline:hover { color: var(--paper-soft); background: var(--ink); }
.text-link { padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.text-link span { display: inline-block; margin-left: 8px; transition: transform 180ms ease; }
.text-link:hover span { transform: translate(3px, 3px); }
.text-link--dark { border-color: var(--line); }
.hero-art { position: relative; display: grid; place-items: center; min-height: 520px; }
.hero-disc { position: relative; width: min(40vw, 520px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, rgba(17,16,14,.05), rgba(17,16,14,.58)), url("assets/facade.webp") center / cover; box-shadow: inset -35px -30px 80px rgba(20,14,8,.18), 0 60px 120px rgba(0,0,0,.28); overflow: hidden; }
.hero-disc::before { content: ""; position: absolute; z-index: 1; inset: 6%; border: 1px solid rgba(247,242,232,.55); border-radius: inherit; }
.hero-disc__word { position: absolute; z-index: 2; top: 12%; max-width: 70%; color: var(--paper-soft); font-size: 9px; font-weight: 800; letter-spacing: .3em; text-align: center; }
.hero-disc__caption { position: absolute; z-index: 2; bottom: 12%; color: var(--paper-soft); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-note { position: absolute; right: -2vw; bottom: 2%; margin: 0; padding-left: 18px; border-left: 1px solid var(--gold-light); color: rgba(247,242,232,.62); font-family: var(--serif); font-size: 15px; font-style: italic; }
.scroll-cue { position: absolute; bottom: 0; left: clamp(22px, 4vw, 64px); display: flex; align-items: center; gap: 12px; padding: 20px 0; color: rgba(247,242,232,.6); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.scroll-cue i { display: block; width: 42px; height: 1px; background: currentColor; }

.marquee { overflow: hidden; color: var(--ink); background: var(--gold-light); border-block: 1px solid var(--ink); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 34px; padding: 17px 0; animation: marquee 24s linear infinite; }
.marquee span { font-family: var(--serif); font-size: 19px; font-style: italic; }
.marquee i { font-style: normal; font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 118px clamp(22px, 7vw, 108px); }
.section-label { display: flex; gap: 13px; align-items: center; margin-bottom: 68px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.section-label span { display: grid; place-items: center; width: 31px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
.section-label--light { color: var(--paper-soft); }
.story { background: var(--paper); }
.story-heading { width: min(100%, 1000px); margin-left: auto; }
.story-heading h2 { font-size: clamp(50px, 6.4vw, 96px); }
.story-heading h2 em { color: var(--wine); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr .74fr; gap: 18px; align-items: stretch; margin-top: 72px; }
.story-card { min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }
.story-card--gold { background: var(--gold-light); }
.story-card--ink { color: var(--paper-soft); background: var(--ink); }
.story-card--photo { position: relative; color: var(--paper-soft); background-position: center; background-size: cover; overflow: hidden; }
.story-card--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,10,.16), rgba(12,11,10,.85)); }
.story-card--photo > * { position: relative; z-index: 1; }
.story-card--cocktails { background-image: url("assets/cocktails.webp"); }
.story-card--platter { background-image: url("assets/platter.webp"); }
.card-number { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; font-family: var(--serif); font-style: italic; }
.card-kicker { margin: 0 0 8px; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.story-card h3 { margin: 0; font-family: var(--serif); font-size: 46px; font-weight: 400; }
.story-card p:last-child { max-width: 400px; margin: 18px 0 0; opacity: .72; }
.story-quote { display: flex; flex-direction: column; justify-content: flex-end; gap: 26px; padding: 28px 10px 28px 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.story-quote svg { width: 48px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.story-quote blockquote { margin: 0; font-family: var(--serif); font-size: 24px; font-style: italic; line-height: 1.35; }

.menu-section { color: var(--paper-soft); background: var(--wine); }
.menu-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 9vw; }
.menu-intro h2 { font-size: clamp(50px, 5.8vw, 86px); }
.menu-intro h2 em { color: var(--gold-light); }
.menu-intro > p:not(.kicker) { max-width: 500px; margin: 30px 0 0; color: rgba(247,242,232,.68); font-family: var(--serif); font-size: 20px; }
.menu-note { padding-left: 16px; border-left: 1px solid var(--gold-light); font-family: var(--sans) !important; font-size: 11px !important; letter-spacing: .04em; }
.menu-list article { display: grid; grid-template-columns: 38px 1fr auto; gap: 18px; padding: 25px 0; border-top: 1px solid rgba(247,242,232,.24); }
.menu-list article:last-child { border-bottom: 1px solid rgba(247,242,232,.24); }
.menu-index { padding-top: 9px; color: var(--gold-light); font-size: 9px; font-weight: 800; }
.menu-list h3 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); font-weight: 400; }
.menu-list p { margin: 7px 0 0; color: rgba(247,242,232,.62); }
.menu-symbol { font-size: 22px; transition: transform 180ms ease; }
.menu-list article:hover .menu-symbol { transform: translate(4px, -4px); }

.events { background: var(--paper-soft); }
.events-head { display: grid; grid-template-columns: .5fr 1.5fr; align-items: end; gap: 4vw; }
.events-head h2 { font-size: clamp(50px, 6vw, 92px); }
.events-head h2 em { color: var(--wine); }
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 70px; }
.event-card { min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; color: var(--paper-soft); background: var(--ink-soft); }
.event-card--featured { color: var(--ink); background: var(--gold-light); }
.event-date { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.event-card p { margin: 0 0 7px; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; opacity: .58; }
.event-card h3 { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; }
.event-arrow { position: absolute; align-self: flex-end; font-size: 20px; }
.events-note { max-width: 720px; margin: 24px 0 0 auto; color: rgba(23,22,19,.56); font-size: 12px; text-align: right; }

.booking { display: grid; grid-template-columns: .84fr 1.16fr; gap: 9vw; padding: 120px clamp(22px, 10vw, 155px); color: var(--paper-soft); background: var(--gold); }
.booking-copy { align-self: center; color: var(--ink); }
.booking h2 { font-size: clamp(58px, 6.6vw, 100px); }
.booking h2 em { color: var(--wine); }
.booking-copy > p:last-child { max-width: 460px; margin-top: 28px; font-family: var(--serif); font-size: 19px; }
.booking-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); color: var(--ink); background: var(--paper-soft); }
.booking-card__label { margin: 0 0 28px; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.booking-card__phone { display: inline-block; font-family: var(--serif); font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -.035em; }
.booking-card > p:not(.booking-card__label) { margin: 26px 0 0; color: rgba(23,22,19,.65); font-family: var(--serif); font-size: 18px; }
.booking-card__actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.booking-card__actions .button span { margin-left: 20px; }

.contact { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; min-height: 650px; overflow: hidden; background: var(--sage); }
.contact-monogram { position: absolute; left: -3vw; bottom: -23vw; color: rgba(23,22,19,.07); font-family: var(--serif); font-size: min(72vw, 1000px); line-height: .7; pointer-events: none; }
.contact-content, .contact-facts { position: relative; }
.contact h2 { font-size: clamp(62px, 7vw, 105px); }
.contact h2 em { color: var(--wine); }
.contact-content > p:not(.kicker) { max-width: 550px; margin: 28px 0 0; font-family: var(--serif); font-size: 20px; }
.contact-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.contact-facts { margin: 0; padding: 26px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.contact-facts div { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(23,22,19,.15); }
.contact-facts div:last-child { border: 0; }
.contact-facts dt { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-facts dd { margin: 0; font-family: var(--serif); font-size: 19px; }
.contact-facts dd span { display: block; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; padding: 30px clamp(22px, 4vw, 64px); color: var(--paper-soft); background: var(--ink); }
.site-footer p { margin: 0; color: rgba(247,242,232,.55); font-size: 10px; text-align: center; }
.site-footer > a:last-child { justify-self: end; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.brand--footer { font-size: 20px; }
.brand--footer .brand-mark { width: 27px; }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .site-header { padding: 16px 22px; }
  .menu-button { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
  .menu-button__label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .menu-button__lines { display: grid; gap: 5px; width: 24px; }
  .menu-button__lines i { display: block; height: 1px; background: currentColor; transition: transform 200ms ease; }
  .menu-button[aria-expanded="true"] .menu-button__lines i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-button__lines i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 64px 0 auto; display: grid; gap: 0; padding: 20px 22px 30px; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--ink); transform: translateY(-130%); transition: transform 250ms ease; }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { margin-top: 12px; padding: 14px; color: var(--paper-soft); background: var(--ink); border: 0; text-align: center; }
  .hero { grid-template-columns: 1fr; padding-top: 140px; }
  .hero-copy { position: relative; z-index: 2; }
  .hero-art { min-height: 420px; margin-top: -30px; opacity: .82; }
  .hero-disc { width: min(72vw, 480px); }
  .hero-note { right: 4vw; }
  .scroll-cue { display: none; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-quote { grid-column: 1 / -1; min-height: 220px; }
  .menu-layout, .booking { grid-template-columns: 1fr; }
  .events-head { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 70px; }
}

@media (max-width: 680px) {
  .brand { font-size: 22px; }
  .brand-mark { width: 28px; }
  .hero { min-height: auto; padding: 125px 22px 70px; }
  .hero h1 { font-size: clamp(53px, 17vw, 74px); }
  .hero-intro { font-size: 19px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-art { min-height: 360px; margin-top: 0; }
  .hero-disc { width: min(88vw, 360px); }
  .hero-note { display: none; }
  .section { padding: 82px 22px; }
  .section-label { margin-bottom: 45px; }
  .story-heading h2, .menu-intro h2, .events-head h2 { font-size: clamp(45px, 14vw, 63px); }
  .story-grid, .events-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .story-card { min-height: 360px; }
  .story-quote { grid-column: auto; }
  .menu-layout { gap: 58px; }
  .menu-list article { grid-template-columns: 30px 1fr; }
  .menu-symbol { display: none; }
  .events-note { text-align: left; }
  .booking { padding: 82px 22px; }
  .booking h2 { font-size: clamp(54px, 16vw, 72px); }
  .booking-card { padding: 34px 24px; }
  .booking-card__actions { align-items: flex-start; flex-direction: column; }
  .contact { padding-bottom: 100px; }
  .contact h2 { font-size: clamp(57px, 17vw, 78px); }
  .contact-actions { align-items: flex-start; flex-direction: column; }
  .contact-facts div { grid-template-columns: 1fr; gap: 7px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer .brand, .site-footer > a:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}