/* Dianne’s — Ember: dark, cinematic and type-led. Content remains readable without JavaScript. */
/* Local stand-ins sized to the headline face, so long words still fit while it loads or if it never does. */
@font-face {font-family:'Serif Fallback'; src:local('Georgia'), local('Noto Serif'), local('Times New Roman'); size-adjust:76%}
@font-face {font-family:'Serif Fallback'; font-style:italic; src:local('Georgia Italic'), local('Georgia-Italic'), local('Noto Serif Italic'), local('Times New Roman Italic'); size-adjust:79%}
:root {
  --bg:#0d0b0a; --bg-2:#141110; --bg-3:#1b1714;
  --cream:#f0e6d8; --text:#d8ccbd; --muted:#a39687;
  --line:rgba(240,230,216,.13); --line-2:rgba(240,230,216,.26);
  --ember:#ff6a2b; --ember-2:#ff8752; --gold:#e7b25e; --on-ember:#1b0c05;
  --max:1240px; --gutter:40px; --radius:16px; --radius-sm:10px;
  --serif:'Instrument Serif','Serif Fallback',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --navh:84px; --callbarh:0px;
  /* Fixed top padding for the dark openings, so the slimmer bar never shifts their contents. */
  --headroom:84px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:calc(var(--navh) + 20px); scroll-padding-bottom:calc(var(--callbarh) + 16px); -webkit-text-size-adjust:100%; background:var(--bg); color-scheme:dark}
body {margin:0; color:var(--text); background:var(--bg); font:400 1rem/1.65 var(--sans); padding-bottom:var(--callbarh); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
/* A fine film grain over the whole page keeps the dark surfaces from looking flat. */
body::after {content:''; position:fixed; inset:0; z-index:90; pointer-events:none; background-image:var(--grain); background-size:200px; opacity:.07}
h1,h2,h3,h4,p,figure,ul,ol {margin:0}
a {color:inherit; text-underline-offset:5px; text-decoration-thickness:1px}
a,button,input,select {-webkit-tap-highlight-color:transparent}
button,input,select {font:inherit}
button,a,input,select {touch-action:manipulation}
button {cursor:pointer; color:inherit}
img {display:block; max-width:100%; height:auto}
svg {width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
[hidden] {display:none!important}
:focus-visible {outline:2px solid var(--ember); outline-offset:4px}
::selection {background:rgba(255,106,43,.38); color:#fff}
.wrap {width:min(100%,var(--max)); padding-inline:var(--gutter); margin-inline:auto}
.vh {position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip {position:fixed; top:-100px; left:16px; z-index:200; background:var(--cream); color:var(--bg); padding:10px 20px; border-radius:999px; font-weight:600; text-decoration:none}
.skip:focus {top:12px}
.nw,a[href^="tel:"] {white-space:nowrap}
/* The main region takes focus only from the skip link; it is not a control, so it draws no ring. */
main:focus {outline:none}

/* Type: a tall editorial serif for headings and a clean sans for everything else, small labels included. */
h1,h2,h3 {font-family:var(--serif); font-weight:400; line-height:.95; letter-spacing:-.02em; color:var(--cream); text-wrap:balance}
h1 {font-size:clamp(5rem,13vw,11.5rem); line-height:.85; letter-spacing:-.03em}
h2 {font-size:clamp(3.75rem,8.4vw,7.5rem); line-height:.88; letter-spacing:-.025em}
h3 {font-size:2rem; line-height:1.05; letter-spacing:-.01em}
h4 {font:600 1rem/1.35 var(--sans); color:var(--cream)}
p {text-wrap:pretty}
.eyebrow {font:500 .75rem/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.eyebrow+h1,.eyebrow+h2 {margin-top:16px}
.eyebrow-rule {display:flex; align-items:center; gap:14px}
.eyebrow-rule::before {content:''; width:28px; height:1px; background:currentColor; opacity:.7}
.fine {font-size:.8125rem; color:var(--muted); line-height:1.5}

/* Buttons and links */
.ctas {display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.btn {display:inline-flex; min-height:52px; align-items:center; justify-content:center; gap:10px; padding:12px 26px; border:1px solid transparent; border-radius:999px; font:500 .9375rem/1.25 var(--sans); text-decoration:none; transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn svg {width:18px; height:18px}
.btn-solid {background:var(--ember); color:var(--on-ember)}
.btn-solid:hover {background:var(--ember-2); color:var(--on-ember)}
.btn-ghost,.btn-outline {border-color:var(--line-2); color:var(--cream); background:rgba(13,11,10,.25)}
.btn-ghost:hover,.btn-outline:hover {border-color:var(--cream); color:var(--cream); background:rgba(240,230,216,.06)}
.btn:active {transform:translateY(1px)}
.text-link {display:inline-flex; align-items:center; gap:8px; min-height:44px; font:500 .9375rem/1.3 var(--sans); color:var(--cream); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:7px; transition:color .2s,text-decoration-color .2s}
.text-link:hover {color:var(--ember); text-decoration-color:currentColor}
.text-link svg {width:17px; height:17px; transition:transform .2s}
.text-link:hover svg {transform:translateX(3px)}

/* Header: fixed and clear over the opening image, smoked glass once the page moves. Being fixed rather
   than sticky, focusing a link in it never makes the browser scroll the page to reveal it. */
.sitenav {position:fixed; top:0; left:0; right:0; z-index:70; padding-top:var(--safe-top); color:var(--cream); background:rgba(13,11,10,0); transition:background-color .3s,box-shadow .3s}
.no-js .sitenav,.sitenav.is-scrolled,.drawer-open .sitenav {background:rgba(13,11,10,.86); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 var(--line)}
/* Further down the page the bar slims, leaving more room for the content. */
.sitenav.is-condensed .nav-inner {min-height:66px; padding-block:9px}
.sitenav.is-condensed .brand-title {font-size:1.75rem}
.sitenav.is-condensed .nav-call {min-height:42px}
.nav-inner {max-width:var(--max); margin:auto; padding:16px var(--gutter); min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; transition:min-height .25s ease,padding .25s ease}
.brand {display:flex; align-items:center; flex-shrink:0; text-decoration:none; color:var(--cream); line-height:1}
.brand-text {display:flex; flex-direction:column}
.brand-title {font:italic 400 2rem/1 var(--serif); letter-spacing:-.01em; transition:font-size .25s ease}
.brand-sub {margin-top:7px; font:500 .6875rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.nav-links {display:flex; gap:2px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(13,11,10,.38); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.nav-links a {display:flex; align-items:center; min-height:40px; padding:0 17px; border-radius:999px; font:500 .875rem/1 var(--sans); color:rgba(240,230,216,.8); text-decoration:none; transition:background-color .2s,color .2s}
.nav-links a:hover {color:var(--cream); background:rgba(240,230,216,.08)}
.nav-links a[aria-current] {color:var(--bg); background:var(--cream)}
.nav-call {display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:48px; padding:0 22px 0 18px; border-radius:999px; background:var(--ember); color:var(--on-ember); text-decoration:none; transition:background-color .2s,min-height .25s ease}
.nav-call:hover {background:var(--ember-2); color:var(--on-ember)}
.nav-call>svg {width:17px; height:17px; stroke-width:2}
.nav-call-text {display:flex; align-items:center}
.nav-call-label {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.nav-call-number {font:600 .9375rem/1 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap}
.nav-toggle {display:none; position:relative; width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%; background:rgba(13,11,10,.3); color:var(--cream)}
.nav-toggle span {position:absolute; left:14px; right:14px; top:18px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .2s,top .2s}
.nav-toggle span+span {top:26px}
.nav-toggle.active span {top:22px; transform:rotate(45deg)}
.nav-toggle.active span+span {transform:rotate(-45deg)}
.mobile-drawer {display:none}

/* Home opening: the building under a stormy sky, with the name set large across it. */
.hero {position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:clamp(560px,calc(100vh - var(--callbarh)),1000px); min-height:clamp(560px,calc(100svh - var(--callbarh)),1000px); color:var(--cream); background:var(--bg)}
.hero-bg {position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:saturate(.72) contrast(1.08) brightness(.8)}
.hero::before {content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(55% 45% at 12% 100%,rgba(255,106,43,.4),rgba(255,106,43,0) 70%),radial-gradient(40% 35% at 92% 8%,rgba(231,178,94,.14),rgba(231,178,94,0) 70%),linear-gradient(180deg,rgba(13,11,10,.82) 0%,rgba(13,11,10,.46) 18%,rgba(13,11,10,.4) 40%,rgba(13,11,10,.28) 56%,rgba(13,11,10,.55) 72%,rgba(13,11,10,.96) 92%,var(--bg) 100%)}
.hero-inner {flex:1; display:flex; flex-direction:column; padding-top:calc(var(--headroom) + 26px); padding-bottom:44px}
.hero-meta {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px}
.hero-meta .eyebrow {display:flex; flex-wrap:wrap; gap:4px 28px; color:rgba(240,230,216,.8)}
/* The headline also scales with the window's height, so "Barbeque" stays above the roof sign and the
   whole opening fits on shorter laptop screens. A word that still cannot fit breaks rather than clips. */
.hero h1 {margin-top:clamp(20px,3vw,36px); font-size:min(14.6vw, max(6rem, calc((52vh - 172px) / 1.68)), 13.25rem); line-height:.8; letter-spacing:-.025em; overflow-wrap:anywhere}
.hero h1 .line {display:block}
.hero h1 em {display:block; padding:0 0 .08em 23%; font-style:italic; color:var(--ember)}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero h1 em,.feast-price {background:linear-gradient(95deg,var(--gold) 0%,var(--ember) 50%,var(--ember-2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
}
.hero-foot {margin-top:auto; padding-top:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px}
.hero-services {color:var(--cream); letter-spacing:.2em}
.hero-actions {display:flex; align-items:center; gap:22px}
.hero-round {display:grid; place-content:center; flex-shrink:0; width:138px; height:138px; border-radius:50%; background:var(--cream); color:var(--bg); text-align:center; text-decoration:none; font:500 .6875rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; box-shadow:0 0 0 10px rgba(240,230,216,.08); transition:transform .3s,background-color .3s,box-shadow .3s}
/* A quiet label above one large word. */
.hero-round span {opacity:.7}
.hero-round em {display:block; margin-top:6px; font:italic 400 2.75rem/.9 var(--serif); letter-spacing:-.01em; text-transform:none}
.hero-round:hover {background:#fff; color:var(--bg); transform:scale(1.04); box-shadow:0 0 0 14px rgba(240,230,216,.1)}

/* A ribbon of real dishes that glides once when it comes into view, then settles (script.js adds
   .is-gliding). Decorative: the same dishes are listed below it. */
.marquee {overflow:hidden; padding:18px 0 22px; border-block:1px solid var(--line); -webkit-user-select:none; user-select:none}
.marquee-track {display:flex; align-items:center; width:max-content}
.marquee.is-gliding .marquee-track {animation:marquee-glide 4.6s cubic-bezier(.16,.84,.3,1) both}
.marquee-track>* {flex:none}
.marquee span {font:400 clamp(2.25rem,4.2vw,3.75rem)/1.15 var(--serif); color:var(--cream)}
/* A small ember dot between dishes. */
.marquee i {width:clamp(5px,.5vw,7px); height:clamp(5px,.5vw,7px); margin:0 clamp(20px,2.6vw,36px); border-radius:50%; background:var(--ember)}
@keyframes marquee-glide {to {transform:translateX(-360px)}}

.facts {border-bottom:1px solid var(--line)}
.facts-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.fact {min-width:0; padding:32px 32px 36px; border-left:1px solid var(--line)}
.fact:first-child {padding-left:0; border-left:0}
.fact p+p {margin-top:12px; font:400 1.3125rem/1.4 var(--sans); color:var(--cream)}
.fact a {text-decoration:none}
.fact a:hover {color:var(--ember)}
.fact-note {font-size:.9375rem; color:var(--muted)}

/* Shared section heading */
.section-heading {display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px}

/* Menu highlights: an index of dishes beside one photograph of the ribs. */
.food-section {padding:130px 0 110px; background:radial-gradient(640px 640px at 88% 34%,rgba(255,106,43,.11),rgba(255,106,43,0) 70%)}
.dish-index {display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:80px; align-items:start}
.dish-rows {list-style:none; padding:0}
.dish-row {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:30px 18px 32px 0; border-top:1px solid var(--line); color:var(--cream); text-decoration:none; transition:background-color .35s}
.dish-row h3 {font-size:clamp(2.5rem,4.3vw,3.875rem); line-height:1; transition:color .35s}
.dish-row p {margin-top:10px; max-width:44ch; font-size:1rem; line-height:1.55; color:var(--muted)}
.dish-price {font:500 .9375rem/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--cream); white-space:nowrap}
/* One row lights up: the row under the pointer, else the focused row, else the first. The left edge
   never moves. */
.dish-row:hover,.dish-rows:not(:hover) .dish-row:focus-visible,.dish-rows:not(:hover):not(:focus-within) li:first-child .dish-row {background:linear-gradient(90deg,rgba(255,106,43,.13),rgba(255,106,43,0) 80%)}
.dish-row:hover h3,.dish-rows:not(:hover) .dish-row:focus-visible h3,.dish-rows:not(:hover):not(:focus-within) li:first-child h3 {font-style:italic; color:var(--ember)}
.dish-peek {position:sticky; top:calc(var(--navh) + 40px); justify-self:end; width:100%; max-width:430px; margin-top:8px}
.dish-peek-frame {position:relative; aspect-ratio:1; overflow:hidden; border-radius:10px; transform:rotate(2.5deg); background:var(--bg-3); box-shadow:0 60px 110px -30px rgba(255,106,43,.55),0 0 0 1px var(--line)}
.dish-peek img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* One quiet line: the label, the sides with small dots between them, and the link. */
.house-sides {display:flex; align-items:center; gap:10px 36px; margin-top:56px; padding:14px 0; border-block:1px solid var(--line)}
.house-sides .eyebrow {flex-shrink:0}
.house-sides ul {list-style:none; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; flex:1; min-width:0}
.house-sides li {display:inline-flex; align-items:center; font-size:.9375rem; color:var(--cream)}
.house-sides li+li::before {content:''; width:3px; height:3px; margin:0 14px; border-radius:50%; background:var(--muted)}
.house-sides .text-link {flex-shrink:0; min-height:36px; font-size:.875rem}

/* Catering, with the Family Feast set out as a lit card. */
.catering-section {padding:130px 0; border-block:1px solid var(--line); background:radial-gradient(700px 480px at 90% 10%,rgba(255,106,43,.16),rgba(255,106,43,0) 70%),radial-gradient(520px 360px at 0% 100%,rgba(231,178,94,.07),rgba(231,178,94,0) 70%),var(--bg-2)}
.catering-grid {display:grid; grid-template-columns:1.1fr .9fr; gap:88px; align-items:center}
.catering-description {margin-top:28px; max-width:44ch; font-size:1.125rem; color:var(--text)}
.catering-points {list-style:none; padding:0; margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.catering-points li {padding:20px 22px 22px; border:1px solid var(--line); border-radius:var(--radius)}
.catering-points strong {display:block; margin-bottom:6px; font:400 1.75rem/1.1 var(--serif); color:var(--cream)}
.catering-points span {display:block; font-size:.9375rem; line-height:1.55; color:var(--muted)}
.catering-section .ctas {margin-top:34px}
.contact-note {display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:22px; font:400 .875rem/1.5 var(--sans); color:var(--muted)}
.contact-note a {color:var(--cream); text-decoration-color:var(--line-2)}
.contact-note a:hover {color:var(--ember)}
.feast-card {position:relative; padding:46px 42px 34px; border:1px solid var(--line-2); border-radius:22px; background:linear-gradient(180deg,rgba(38,32,28,.95),rgba(20,17,16,.95)); box-shadow:0 70px 120px -50px rgba(255,106,43,.5),inset 0 1px 0 rgba(240,230,216,.06)}
.feast-card h3 {margin-top:12px; font-size:clamp(2.5rem,3.6vw,3.25rem)}
.feast-price {margin:12px 0 26px; font:400 clamp(4.5rem,7vw,6.25rem)/.9 var(--serif); letter-spacing:-.03em; color:var(--gold)}
.feast-list {list-style:none; padding:22px 0 0; display:grid; gap:12px; border-top:1px solid var(--line)}
.feast-list li {display:flex; gap:12px; align-items:flex-start; line-height:1.5; color:var(--text)}
.feast-list svg {width:18px; height:18px; margin-top:3px; color:var(--ember); stroke-width:2}
.feast-foot {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line)}

/* Reviews: the numbers, large. */
.reviews-strip {padding:130px 0}
.reviews-inner {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end}
.reviews-heading {padding-right:40px}
.reviews-note {margin-top:22px; font:400 .8125rem/1.5 var(--sans); color:var(--muted)}
.review-card {display:flex; flex-direction:column; gap:30px; min-width:0; padding:0 40px 0 44px; border-left:1px solid var(--line)}
.review-score {display:grid; grid-template-columns:auto 1fr; align-items:end; gap:8px 18px}
.review-score strong {grid-row:1 / span 2; font:400 clamp(5.5rem,9vw,8.5rem)/.8 var(--serif); letter-spacing:-.04em; color:var(--cream); white-space:nowrap}
.review-score strong span {margin-left:4px; font-size:.32em; letter-spacing:0; color:var(--muted)}
.review-symbols {display:flex; align-items:center; gap:3px; color:var(--gold)}
.review-stars svg {width:17px; height:17px; fill:currentColor; stroke-width:1.1}
.review-recommendation svg {width:22px; height:22px}
.review-score-label {align-self:start; font:500 .6875rem/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.review-details {display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line)}
.review-details h3 {font:500 1rem/1.4 var(--sans); letter-spacing:0}
.review-details h3 a {display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-block:-10px; color:var(--cream); text-decoration-color:var(--line-2)}
.review-details h3 a:hover {color:var(--ember)}
.review-details svg {width:15px; height:15px}
.review-details p {font:400 .875rem/1.4 var(--sans); color:var(--muted)}

/* Visit */
.visit-section {padding:130px 0; border-top:1px solid var(--line)}
.visit-grid {display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:center}
address {font-style:normal}
.visit-grid address {display:flex; align-items:center; gap:18px; margin-top:30px; font:400 clamp(1.875rem,2.6vw,2.375rem)/1.15 var(--serif); color:var(--cream)}
.copy-btn {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; background:transparent; color:var(--muted); transition:color .2s,border-color .2s}
.copy-btn svg {width:17px; height:17px}
.copy-btn:hover,.copy-btn.did-copy {color:var(--ember); border-color:var(--ember)}
.visit-details {display:grid; margin:30px 0 34px; border-top:1px solid var(--line)}
.visit-details>div {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 16px; padding:16px 0; border-bottom:1px solid var(--line)}
.visit-details a {font-weight:500; color:var(--cream); text-decoration:none; overflow-wrap:anywhere}
.visit-details a:hover {color:var(--ember); text-decoration:underline}
.map-card {overflow:hidden; border:1px solid var(--line-2); border-radius:20px; background:var(--bg-3); box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
/* The map is drawn dark to sit with the page; its roads and labels stay legible. */
.map-card iframe {display:block; width:100%; height:460px; border:0; filter:grayscale(.25) invert(.9) hue-rotate(180deg) brightness(.92) contrast(.95)}
.map-caption {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-top:1px solid var(--line); font:500 .75rem/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cream); text-decoration:none}
.map-caption:hover {color:var(--ember)}
.map-caption:focus-visible {outline-offset:-3px}

/* Inner page openings run under the clear header, like the home page. */
.page-head {position:relative; isolation:isolate; padding-top:var(--headroom); color:var(--cream); background:radial-gradient(820px 520px at 86% 0%,rgba(255,106,43,.2),rgba(255,106,43,0) 70%),radial-gradient(600px 400px at 0% 100%,rgba(231,178,94,.07),rgba(231,178,94,0) 70%),var(--bg)}

/* About */
.about-intro .wrap {padding-top:64px}
.about-intro-grid {display:grid; grid-template-columns:1.05fr 1fr; gap:72px; align-items:end; margin:22px 0 64px}
.about-intro-grid h1 {font-size:clamp(6rem,16vw,13rem); line-height:.8}
.about-intro-grid .lede {margin-bottom:14px; font:400 1.25rem/1.55 var(--sans); color:var(--cream)}
.about-intro-grid .text-link {margin-top:12px}
.about-building {position:relative; z-index:1; margin-bottom:-120px}
.about-building img {width:100%; aspect-ratio:1600/880; object-fit:cover; object-position:center 72%; border-radius:20px; filter:saturate(.8) contrast(1.05); box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.about-building figcaption {position:absolute; left:20px; bottom:20px; padding:9px 16px; border-radius:999px; background:rgba(13,11,10,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:500 .8125rem/1.4 var(--sans); color:var(--cream)}
.about-table {padding:200px 0 120px; border-bottom:1px solid var(--line); background:var(--bg-2)}
.about-table-grid {display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start}
.about-dining {display:flex; align-items:center; gap:22px; margin-top:36px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-3)}
.about-dining img {width:200px; flex-shrink:0; border-radius:10px}
.about-dining p {font-size:.9375rem}
.about-dining a {color:var(--ember); font-weight:500}
.about-options {display:grid; gap:14px}
.about-options article {display:grid; grid-template-columns:auto 1fr; gap:4px 18px; padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-3)}
.about-icon {grid-row:1 / span 3; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(255,106,43,.12); color:var(--ember)}
.about-icon svg {width:22px; height:22px}
.about-options h3 {margin-bottom:4px}
.about-options p {font-size:.9375rem; color:var(--muted)}
.about-options .text-link {justify-self:start; margin-top:4px}
.about-invitation {padding:84px 0; background:radial-gradient(900px 420px at 12% 100%,rgba(255,106,43,.26),rgba(255,106,43,0) 70%),var(--bg)}
.invitation-inner {display:flex; justify-content:space-between; align-items:center; gap:24px}
/* The hours as a small timetable: days on the left, times on the right, in the plain text face. */
.hours-list {display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px 40px; margin:18px 0 0; font:400 clamp(1.375rem,2vw,1.75rem)/1.3 var(--sans); font-variant-numeric:tabular-nums}
.hours-list div {display:contents}
.hours-list dt {color:var(--muted)}
.hours-list dd {margin:0; font-weight:500; color:var(--cream)}

/* Not-found page: the same opening as the inner pages, with a way back. */
.error-head {padding-bottom:96px; border-bottom:1px solid var(--line)}
.error-inner {padding-top:72px}
.error-head h1 {font-size:clamp(4.5rem,11vw,9rem); line-height:.85}
.error-lede {margin-top:26px; max-width:40ch; font-size:1.125rem}
.error-head .ctas {margin-top:32px}
.error-hours {margin-top:28px; font-size:.9375rem; color:var(--muted)}

/* Menu: the whole menu on one board, read like the one on the wall. */
.menu-heading {padding-bottom:56px; border-bottom:1px solid var(--line)}
.menu-heading-inner {display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding-top:56px}
.menu-heading h1 {font-size:clamp(6rem,16vw,13rem); line-height:.8}
.menu-disclaimer {margin-top:26px; font:400 .9375rem/1.6 var(--sans); color:var(--muted)}
.menu-heading-note {flex-shrink:0; min-width:280px; padding:22px 26px; border:1px solid var(--line-2); border-radius:var(--radius); background:rgba(240,230,216,.03)}
.menu-heading-note a {display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:4px; font:400 2rem/1.1 var(--serif); color:var(--cream); text-decoration:none; font-variant-numeric:lining-nums}
.menu-heading-note a:hover {color:var(--ember)}
.menu-heading-note svg {color:var(--ember)}
.menu-section {padding:64px 0 110px}
.board {columns:3 19rem; column-gap:64px}
.board-group {break-inside:avoid; padding-bottom:44px}
.board h3,.board-cater h3 {display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:clamp(1.875rem,2.4vw,2.25rem); line-height:1.05}
.h-price {font:500 .9375rem/1 var(--sans); letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; color:var(--ember); white-space:nowrap}
.board-note {margin-top:8px; max-width:52ch; font-size:.8125rem; line-height:1.55; color:var(--muted)}
.board-foot {margin-top:12px}
/* Each row: name, a faint dotted leader, then the price; any description runs underneath. */
.board-list {list-style:none; padding:0; margin:12px 0 0}
.board-list li {display:grid; grid-template-columns:minmax(0,max-content) minmax(18px,1fr) auto; align-items:baseline; column-gap:10px; padding:6px 0}
.board-list li::after {content:''; grid-column:2; grid-row:1; align-self:baseline; border-bottom:1px dotted var(--line-2); transform:translateY(-.3em)}
.board-list .n {grid-column:1; grid-row:1; font-size:.9375rem; font-weight:500; line-height:1.4; color:var(--cream)}
.board-list .p {grid-column:3; grid-row:1; font:500 .9375rem/1.4 var(--sans); font-variant-numeric:tabular-nums; color:var(--ember); white-space:nowrap}
.board-list small {grid-column:1/-1; grid-row:2; max-width:46ch; font-size:.8125rem; line-height:1.5; color:var(--muted)}
.board-tags {list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.board-tags li {padding:4px 0; font-size:.9375rem; line-height:1.4; color:var(--cream)}
.board-tags small {display:block; font-size:.75rem; color:var(--muted)}
.board-tags+.board-list {margin-top:10px; padding-top:6px; border-top:1px solid var(--line)}
.board-cater {padding-top:48px; border-top:1px solid var(--line)}
.cater-cols {display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:32px 64px; margin-top:24px}
.cater-cols h4 {display:flex; align-items:baseline; justify-content:space-between; gap:12px; font:500 .75rem/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.cater-cols .board-list {margin-top:8px}
.cater-cols .board-note {margin-top:12px; font-size:.875rem}
.cater-call {margin-top:36px; font-size:.9375rem; color:var(--muted)}
.cater-call a {color:var(--cream); font-weight:500}

/* Footer and supporting controls. */
footer {padding:96px 0 0; border-top:1px solid var(--line); background:var(--bg); color:var(--muted)}
.footer-grid {display:grid; grid-template-columns:1.35fr 1fr 1fr .7fr; gap:48px; padding-bottom:56px}
footer .brand-title {font-size:2.25rem}
footer p,footer address {font-size:.9375rem; line-height:1.75}
.footer-intro p {margin:20px 0 10px; max-width:30ch}
.footer-title {margin-bottom:16px; font:500 .75rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
footer a {color:var(--cream); text-decoration:none}
footer a:hover {color:var(--ember)}
footer .text-link {font-size:.9375rem; text-decoration:none}
footer p+p {margin-top:4px}
.footer-links {display:flex; flex-direction:column; align-items:flex-start}
.footer-links a {display:flex; align-items:center; min-height:34px; font-size:.9375rem}
.email {overflow-wrap:anywhere}
.footer-bottom {position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px 88px; font:400 .8125rem/1.5 var(--sans)}
.footer-bottom::before {content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line)}
.callbar {display:none}
.to-top-btn {position:fixed; bottom:24px; right:20px; z-index:45; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%; background:var(--bg-3); color:var(--cream); box-shadow:0 12px 28px -12px rgba(0,0,0,.8); opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s,background-color .2s,color .2s}
.to-top-btn:hover {background:var(--ember); color:var(--on-ember)}
.to-top-btn.show {opacity:1; visibility:visible}
.toast {position:fixed; z-index:150; bottom:calc(var(--callbarh) + 22px); left:50%; width:max-content; max-width:calc(100% - 32px); padding:12px 22px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg-3); color:var(--cream); font-size:.875rem; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:opacity .2s,transform .2s}
/* Hidden by opacity only, so screen readers keep the live region and announce each message. */
.toast.show {opacity:1; transform:translate(-50%,0)}
.no-js .copy-btn,.no-js .to-top-btn {display:none}

/* At smaller widths, preserve the actions and let the content do the wrapping. */
@media (max-width:1100px) {
  :root {--gutter:32px}
  .nav-inner {gap:16px}.nav-links a {padding:0 13px}.nav-call {padding:0 18px 0 15px}
  .dish-index {gap:48px}
  .catering-grid {gap:56px}.visit-grid {gap:48px}.about-intro-grid,.about-table-grid {gap:48px}
  .reviews-inner {grid-template-columns:1fr 1fr; row-gap:48px}.reviews-heading {grid-column:1/-1; padding-right:0}
  .reviews-heading+.review-card {padding-left:0; border-left:0}
  .footer-grid {gap:36px}
}
@media (max-width:880px) {
  :root {--navh:72px; --headroom:72px; --callbarh:calc(67px + var(--safe-bottom)); --gutter:24px}
  .nav-inner {min-height:72px; padding:12px 24px}
  .nav-links,.nav-call {display:none}.nav-toggle {display:block}
  .brand-title {font-size:1.75rem}
  .sitenav.is-condensed .nav-inner {min-height:60px; padding-block:7px}.sitenav.is-condensed .brand-title {font-size:1.5rem}
  .mobile-drawer.open {display:flex; flex-direction:column; position:fixed; inset:var(--navh) 0 0; z-index:65; padding:16px 24px calc(30px + var(--safe-bottom)); overflow:auto; background:var(--bg)}
  .mobile-drawer>a:not(.btn) {padding:14px 0; border-bottom:1px solid var(--line); font:400 2.5rem/1.1 var(--serif); letter-spacing:-.01em; text-decoration:none; color:var(--cream)}
  .mobile-drawer>a[aria-current] {font-style:italic; color:var(--ember)}
  .mobile-drawer .btn {margin-top:30px}
  .mobile-drawer p {margin-top:18px; font:400 .875rem/1.5 var(--sans); color:var(--muted)}
  .drawer-open {overflow:hidden}
  .no-js .sitenav {position:relative}.no-js .nav-inner {flex-wrap:wrap}.no-js .nav-links {display:flex; flex-wrap:wrap; width:100%}.no-js .nav-toggle {display:none}
  .hero h1 {font-size:19vw}.hero h1 em {padding-left:12%}
  .hero-foot {flex-direction:column; align-items:stretch}
  .hero-actions {justify-content:flex-end}
  /* The fixed call bar already offers the call on these screens. */
  .hero-actions .btn {display:none}
  .hero-round {width:120px; height:120px}.hero-round em {font-size:2.375rem}
  .fact {padding:26px 22px 30px}.fact p+p {font-size:1.125rem}
  .food-section,.catering-section,.reviews-strip,.visit-section {padding:96px 0}
  .dish-index {grid-template-columns:1fr; gap:40px}
  .dish-peek {position:relative; top:auto; order:-1; justify-self:start; max-width:420px}
  .catering-grid {grid-template-columns:1fr; gap:56px}.feast-card {max-width:560px}
  .visit-grid {grid-template-columns:1fr; gap:44px}.map-card iframe {height:380px}
  .about-intro-grid {grid-template-columns:1fr; gap:24px; margin-bottom:48px}
  .about-building {margin-bottom:-72px}.about-table {padding:150px 0 90px}
  .about-table-grid {grid-template-columns:1fr; gap:44px}
  .menu-heading-inner {flex-direction:column; align-items:flex-start; gap:28px}.menu-heading-note {min-width:0}
  .footer-grid {grid-template-columns:1fr 1fr; gap:40px 32px}.footer-intro {grid-column:1/-1}
  .callbar {position:fixed; bottom:0; left:0; right:0; z-index:60; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left)); background:rgba(13,11,10,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
  .callbar a {min-height:46px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--line-2); border-radius:999px; font-size:.9375rem; font-weight:500; line-height:1.3; text-decoration:none; color:var(--cream)}
  .callbar a:first-child {background:var(--ember); border-color:var(--ember); color:var(--on-ember)}
  .callbar a:active {opacity:.85}
  .callbar svg {width:17px; height:17px}
  .to-top-btn {bottom:calc(var(--callbarh) + 12px); right:12px}
  .footer-bottom {padding-bottom:76px}
}
@media (max-width:640px) {
  :root {--navh:66px; --headroom:66px; --gutter:20px}
  .nav-inner {min-height:66px; padding:10px 20px}
  .brand-title {font-size:1.625rem}.brand-sub {margin-top:6px; font-size:.5625rem; letter-spacing:.2em}
  .sitenav.is-condensed .nav-inner {min-height:58px; padding-block:6px}.sitenav.is-condensed .brand-title {font-size:1.4rem}
  h2 {font-size:4rem}
  .section-heading {flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:36px}
  .hero {min-height:max(480px,calc(100vh - var(--callbarh))); min-height:max(480px,calc(100svh - var(--callbarh)))}
  .hero-bg {object-position:55% 80%}
  .hero-inner {padding-top:calc(var(--headroom) + 20px); padding-bottom:28px}
  .hero-meta {flex-direction:column; align-items:flex-start; gap:10px}
  .hero-meta .eyebrow {gap:2px 18px; font-size:.6875rem}
  .hero h1 {margin-top:40px; font-size:26vw; line-height:.86}.hero h1 em {padding-left:0}
  .hero-round {width:108px; height:108px; font-size:.625rem}.hero-round em {font-size:2.125rem}
  /* Hours get the full width so each range stays on one line; address and phone share the row below. */
  .facts-grid {grid-template-columns:1fr 1fr}
  .fact {padding:22px 0 24px; border-left:0}
  .fact:first-child {grid-column:1/-1}
  .fact:nth-child(2) {padding-right:16px; border-top:1px solid var(--line)}
  .fact:nth-child(3) {padding-left:20px; border-left:1px solid var(--line); border-top:1px solid var(--line)}
  .fact p+p {font-size:1.0625rem}
  .food-section {padding:72px 0}
  .dish-row {grid-template-columns:minmax(0,1fr); gap:6px 12px; padding:24px 0 26px}
  .dish-row h3 {font-size:2.5rem}
  .dish-price {margin-top:4px}
  .dish-peek {max-width:none; justify-self:stretch}.dish-peek-frame {aspect-ratio:1.25; transform:none}
  .house-sides {flex-direction:column; align-items:flex-start; gap:10px; margin-top:44px; padding:16px 0}
  .house-sides ul {display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; width:100%}
  .house-sides li+li::before {display:none}
  .catering-section {padding:72px 0}.catering-points {grid-template-columns:1fr; gap:10px}
  .catering-section .ctas .btn {flex:1 1 auto}
  .feast-card {padding:34px 24px 26px}.feast-price {font-size:4.5rem}
  .reviews-strip {padding:72px 0}.reviews-inner {grid-template-columns:1fr; row-gap:36px}
  .review-card,.reviews-heading+.review-card {padding:28px 0 0; border-left:0; border-top:1px solid var(--line)}
  .review-score strong {font-size:5.5rem}
  .visit-section {padding:72px 0}.visit-grid address {font-size:1.625rem}
  .visit-details {margin:24px 0 28px}.visit-section .ctas .btn {flex:1 1 auto}.map-card iframe {height:300px}
  .about-intro .wrap {padding-top:40px}.about-intro-grid h1 {font-size:28vw}
  .about-building {margin-bottom:-48px}.about-building img {border-radius:14px}
  .about-building figcaption {left:12px; bottom:12px; font-size:.6875rem}
  .about-table {padding:100px 0 72px}
  .about-dining {gap:16px; padding:12px}.about-dining img {width:120px}.about-dining p {font-size:.875rem}
  .about-options article {padding:22px; gap:4px 14px}.about-icon {width:42px; height:42px}
  .about-invitation {padding:56px 0}.invitation-inner {flex-direction:column; align-items:flex-start; gap:22px}
  .menu-heading {padding-bottom:36px}.menu-heading-inner {padding-top:32px; gap:22px}.menu-heading h1 {font-size:30vw}
  .menu-disclaimer {margin-top:16px; font-size:.75rem}
  .menu-heading-note {display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 18px}
  .menu-heading-note a {margin-top:0; font-size:1.5rem; gap:8px; white-space:nowrap}.menu-heading-note svg {width:17px}
  .menu-section {padding:40px 0 64px}.board-group {padding-bottom:36px}.board h3,.board-cater h3 {font-size:2rem}.board-list li {padding:7px 0}
  footer {padding-top:64px}.footer-grid {gap:32px 20px; padding-bottom:28px}
  .footer-bottom {flex-direction:column; align-items:flex-start; gap:6px; padding-block:18px 76px}
}
@media (max-height:450px) and (orientation:landscape) {
  :root {--callbarh:0px}
  .callbar {display:none}
}
@media (max-width:880px) and (max-height:450px) and (orientation:landscape) {
  .nav-call {display:flex; justify-content:center; width:46px; min-height:46px; margin-left:auto; padding:0}.nav-call-number {display:none}
  .hero h1 {margin-top:16px; font-size:min(19vw, 22vh)}
}
@media (max-width:359px) {
  :root {--gutter:16px}
  .nav-inner {padding-inline:16px}
  .brand-sub {display:none}
  .hero h1 {font-size:25vw}
  .hero-actions .btn {padding-inline:18px}
  .menu-heading-note {flex-direction:column; align-items:flex-start; gap:2px}
  .footer-grid {grid-template-columns:1fr}
}
@media (forced-colors:active) {
  .nav-toggle span {background:CanvasText}
  .nav-links a[aria-current] {outline:2px solid CanvasText; outline-offset:-4px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}*,*::before,*::after {transition:none!important; animation:none!important}
}
@media print {
  @page {margin:12mm}
  html,body {padding:0; font-size:10pt; color-scheme:light; background:white!important}
  /* The page is dark on screen; on paper everything is black on white. */
  *,*::before,*::after {background:transparent!important; color:black!important; -webkit-text-fill-color:currentColor!important; box-shadow:none!important; text-shadow:none!important; filter:none!important}
  body::after,.sitenav,.mobile-drawer,.skip,.callbar,.to-top-btn,.toast,.copy-btn,.map-card,.ctas,footer,.hero-bg,.hero-meta,.hero-actions,.marquee,.facts,.dish-peek,.house-sides,.about-invitation,.about-building {display:none!important}
  .hero,.page-head,.food-section,.catering-section,.reviews-strip,.visit-section,.about-table {min-height:0; margin:0!important; padding:0 0 12px!important; border:0}
  .hero-inner,.about-intro .wrap,.menu-heading-inner {padding:0!important}
  .wrap {width:auto; max-width:none; padding:0}.menu-section {padding:0}
  .print-head[hidden] {display:block!important; border-bottom:2px solid black; padding-bottom:10px; margin-bottom:12px}
  .print-head strong {font-size:18pt; display:block}.print-head>span {display:block; font-size:9pt}
  h1,.hero h1,.menu-heading h1,.about-intro-grid h1 {font-size:28pt; line-height:1}
  h2 {font-size:18pt}
  .menu-heading {padding:0 0 10px!important; border:0}.menu-heading-note,.menu-heading .eyebrow {display:none}.menu-disclaimer {font-size:0}.menu-disclaimer::after {content:'Prices may change; call to confirm.'; font-size:8pt}
  .board {columns:2; column-gap:20px; padding-top:12px}
  .board-group {padding:8px 0 14px; border-top:1px solid black}
  .board h3,.board-cater h3 {font-size:15pt}.h-price {font-size:10pt}
  .board-note,.cater-call {font-size:8pt}
  .board-list {margin-top:6px}.board-list li {padding:3px 0}.board-list .n,.board-list .p,.board-tags li {font-size:9pt}.board-list small {font-size:8pt}
  .board-list li::after {border-color:#999}.board-tags li {padding:2px 0}
  .board-cater {break-inside:avoid; padding-top:8px; border-top:1px solid black}.cater-cols {grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
  a {text-decoration:none}
  .text-link {display:none!important}
  .about-intro-grid,.about-table-grid,.visit-grid,.catering-grid,.reviews-inner,.dish-index {display:block}
  .dish-row {display:block; padding:6px 0; border-color:#ccc}.dish-row h3 {font-size:13pt; font-style:normal}
  .feast-card {border:1px solid #888}
  .review-card {padding:8px 0; border:0}
}