/* ===========================================================
   The Emporium Restaurant — Hawk Springs, Wyoming
   Lodgepole pine · aged brass · bone · night.
   =========================================================== */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#12100E; --ink-2:#1A1815; --ink-3:#24211D; --ink-4:#342F28;
  --bone:#F1EADD; --bone-2:#E2D8C6; --bone-3:#CBBFA8; --paper:#FFFCF6;
  --body:#57503F; --muted:#8E856F;
  --pine:#2F4A3A; --pine-2:#1E3227; --pine-hi:#6D9B7C;
  --brass:#C39B4E; --brass-hi:#E8C583;
  --line:rgba(241,234,221,.13); --line-2:rgba(241,234,221,.07);
  --line-dk:rgba(18,16,14,.13);
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.02;letter-spacing:-.014em}
::selection{background:var(--pine);color:var(--bone)}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(70px,9vw,132px) 0;position:relative}
.lead{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.72;color:var(--body)}
.dark{background:var(--ink);color:var(--bone)}
.dark .lead{color:rgba(241,234,221,.72)}
.dark h2,.dark h3{color:var(--bone)}
.alt{background:var(--bone-2)}

.h1{font-size:clamp(50px,8.4vw,124px);line-height:.96;letter-spacing:-.022em}
.h2{font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:-.02em}
.h2 em,.h1 em{font-style:italic;color:var(--pine)}
.dark .h2 em,.dark .h1 em{color:var(--pine-hi)}

.label{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--pine)}
.label::before{content:"";width:22px;height:1px;background:var(--pine)}
.label.center{justify-content:center}
.label.center::after{content:"";width:22px;height:1px;background:var(--pine)}
.dark .label{color:var(--brass-hi)}
.dark .label::before,.dark .label.center::after{background:var(--brass-hi)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.04em;
  padding:17px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer;background:transparent;color:inherit;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn--pine{background:var(--pine);color:#fff;box-shadow:0 16px 34px -18px rgba(47,74,58,.95)}
.btn--pine:hover{background:var(--pine-2);transform:translateY(-2px)}
.btn--brass{background:var(--brass);color:var(--ink)}
.btn--brass:hover{background:var(--brass-hi);transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}
.btn--bone{background:var(--bone);color:var(--ink)}
.btn--bone:hover{background:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-dk);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.dark .btn--ghost,.hero .btn--ghost,.cta .btn--ghost{border-color:var(--line);color:var(--bone)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.cta .btn--ghost:hover{border-color:var(--brass-hi);color:var(--brass-hi)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s,box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(241,234,221,.95);backdrop-filter:blur(14px);border-color:var(--line-dk);box-shadow:0 12px 34px -28px rgba(18,16,14,.55)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--pine)}
.nav--on-dark:not(.scrolled) .brand{color:var(--brass-hi)}
.brand-txt{line-height:1}
.brand-txt b{display:block;font-family:var(--disp);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:.01em}
.brand-txt small{display:block;font-weight:600;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--pine);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-weight:400;font-size:14.5px;color:var(--ink);opacity:.76;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current]{opacity:1;color:var(--pine)}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink);white-space:nowrap;transition:color .2s}
.nav-tel:hover{color:var(--pine)}
.nav-cta{white-space:nowrap;font-weight:600;font-size:12.5px;letter-spacing:.04em;background:var(--pine);color:#fff;padding:14px 22px;border-radius:2px;transition:background .3s,transform .2s}
.nav-cta:hover{background:var(--pine-2);transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.nav-toggle span{width:23px;height:1.6px;background:var(--ink);transition:.3s}
.nav--on-dark:not(.scrolled) .brand-txt b{color:var(--bone)}
.nav--on-dark:not(.scrolled) .brand-txt small{color:rgba(241,234,221,.6)}
.nav--on-dark:not(.scrolled) .nav-links a{color:var(--bone)}
.nav--on-dark:not(.scrolled) .nav-links a[aria-current]{color:var(--brass-hi)}
.nav--on-dark:not(.scrolled) .nav-tel{color:var(--bone)}
.nav--on-dark:not(.scrolled) .nav-toggle span{background:var(--bone)}
@media(max-width:1080px){.nav-links,.nav-tel{display:none}.nav-toggle{display:flex}}
@media(max-width:760px){.nav-cta{display:none}.nav-in{height:70px}.brand-txt b{font-size:20px}}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body.menu-open .nav-overlay{opacity:1;visibility:visible}
.nav-overlay a{font-family:var(--disp);font-weight:600;font-size:clamp(32px,8vw,58px);color:var(--bone);padding:12px 0;border-bottom:1px solid var(--line);transition:color .25s,padding-left .35s var(--ease)}
.nav-overlay a:hover{color:var(--brass-hi);padding-left:12px}
.nav-overlay .ov-foot{margin-top:28px;font-size:15px;color:rgba(241,234,221,.62)}
.nav-overlay .ov-foot a{color:var(--brass-hi);border:0;padding:0;font-family:var(--sans);font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(600px,90vh,920px);display:flex;align-items:flex-end;overflow:hidden;padding:132px 0 clamp(40px,4.6vw,70px);background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;animation:kb 19s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.05) translate3d(1%,.5%,0)}to{transform:scale(1.15) translate3d(-1.4%,-1%,0)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,16,14,.7) 0%,rgba(18,16,14,.18) 34%,rgba(18,16,14,.95) 100%),
  linear-gradient(100deg,rgba(18,16,14,.86) 0%,rgba(18,16,14,.22) 60%,rgba(18,16,14,.02) 100%)}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero .label{color:var(--brass-hi);margin-bottom:20px}
.hero .label::before{background:var(--brass-hi)}
/* no max-width: the <br> owns the break, so the only constraint is that the
   longest line clears the wrap at the top of the clamp */
.hero h1{font-size:clamp(42px,6.6vw,96px);color:var(--bone);line-height:1;letter-spacing:-.024em;text-shadow:0 8px 46px rgba(0,0,0,.55)}
.hero h1 em{font-style:italic;color:var(--brass-hi)}
.hero .lead{margin-top:22px;max-width:52ch;color:rgba(241,234,221,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:rgba(241,234,221,.74)}
.hero-trust b{color:var(--bone);font-weight:600}
.hero-trust .s{color:var(--brass-hi);letter-spacing:2px}
.hero-trust .sep{width:1px;height:15px;background:var(--line)}
/* wrapped rows leave the divider stranded at the end of a line */
@media(max-width:620px){.hero-trust{gap:8px 0;flex-direction:column;align-items:flex-start}.hero-trust .sep{display:none}}

/* ---------- ticker ---------- */
.ticker{background:var(--ink-2);color:var(--bone);overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(195,155,78,.24);border-bottom:1px solid rgba(195,155,78,.24)}
.ticker-track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:slide 42s linear infinite}
.ticker-track span{font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:40px;color:rgba(241,234,221,.86)}
.ticker-track span::after{content:"◆";color:var(--brass-hi);font-size:7px}
@keyframes slide{to{transform:translateX(-50%)}}

.sec-head{max-width:800px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:16px}
.sec-head p{margin-top:19px}

/* ===========================================================
   SIGNATURE — "THE SMOKE": scroll-driven photoreal cook
   =========================================================== */
.fire{background:var(--ink);color:var(--bone);position:relative}
.fire-rail{height:520vh;min-height:3000px;position:relative}
.fire-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
/* must beat `.fire-stage>*{position:relative}` below — it is a direct child too */
.fire-stage>.fire-frames{position:absolute;inset:0;z-index:0}
.fire-frame{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.fire-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.fire-frames::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(18,16,14,.9) 0%,rgba(18,16,14,.62) 22%,rgba(18,16,14,.18) 42%,rgba(18,16,14,.55) 68%,rgba(18,16,14,.96) 100%)}
.fire-stage>*{position:relative;z-index:3}
.fire-top{position:absolute!important;top:0;left:0;right:0;padding:96px var(--pad) 0;z-index:4}
.fire-top .label{color:var(--brass-hi)}
.fire-top .label::before{background:var(--brass-hi)}
.fire-top h2{margin-top:12px;color:var(--bone);max-width:17ch}
/* .fire is not .dark, so the default dark-pine em would land unreadably on a lit photo */
.fire-top h2 em{color:var(--brass-hi)}
.fire-hint{display:flex;align-items:center;gap:10px;font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,234,221,.6);margin-top:16px}
.fire-hint .bar{width:54px;height:1px;background:var(--line);position:relative;overflow:hidden}
.fire-hint .bar::after{content:"";position:absolute;inset:0;width:38%;background:var(--brass-hi);animation:hint 2.5s var(--ease) infinite}
@keyframes hint{0%{transform:translateX(-110%)}60%,100%{transform:translateX(270%)}}
@media(max-width:820px){.fire-hint{display:none}}
.fire-read{padding:0 var(--pad) clamp(26px,4vw,52px);display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end;max-width:1280px;margin:0 auto;width:100%}
@media(max-width:820px){.fire-read{grid-template-columns:1fr}}
.fire-stagename{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.6vw,68px);color:var(--bone);line-height:1;letter-spacing:-.02em}
.fire-note{font-size:clamp(15px,1.5vw,18px);color:rgba(241,234,221,.78);margin-top:12px;max-width:44ch;line-height:1.6}
.fire-gauges{display:flex;gap:clamp(18px,3vw,40px);align-items:flex-end}
.gauge b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.6vw,46px);color:var(--brass-hi);line-height:1}
.gauge span{display:block;margin-top:8px;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,234,221,.55)}
.fire-ticks{display:flex;gap:6px;padding:0 var(--pad) clamp(22px,3vw,34px);max-width:1280px;margin:0 auto;width:100%}
.fire-ticks i{flex:1;height:2px;background:rgba(241,234,221,.16);display:block;transition:background .4s}
.fire-ticks i.on{background:var(--brass-hi)}
.fire-ticks i.done{background:rgba(232,197,131,.45)}
/* the fixed call bar would sit on top of the tick rail */
@media(max-width:1080px){.fire-ticks{padding-bottom:74px}}

/* ===========================================================
   THE PRIME RIB TABLE — reservation request
   =========================================================== */
.res{border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,rgba(241,234,221,.05),rgba(241,234,221,.014));
  box-shadow:0 56px 108px -56px #000,0 0 0 1px rgba(195,155,78,.08)}
.res-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,2.4vw,30px);border-bottom:1px solid var(--line);background:rgba(18,16,14,.44)}
.res-live{display:flex;align-items:center;gap:12px}
.res-dot{width:9px;height:9px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 0 0 rgba(232,197,131,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(232,197,131,0)}100%{box-shadow:0 0 0 0 rgba(232,197,131,0)}}
.res-live b{font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.4vw,27px);color:var(--bone);display:block}
.res-live span{font-size:12.5px;color:var(--muted);display:block;margin-top:1px}
.res-badge{font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:9px 15px;border-radius:2px;border:1px solid;white-space:nowrap}
.res-badge.on{color:var(--brass-hi);border-color:rgba(232,197,131,.5);background:rgba(195,155,78,.14)}
.res-badge.off{color:var(--muted);border-color:var(--line);background:rgba(241,234,221,.04)}

.res-body{display:grid;grid-template-columns:1.25fr .75fr}
@media(max-width:980px){.res-body{grid-template-columns:1fr}}
.res-main{padding:clamp(24px,3vw,40px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
@media(max-width:980px){.res-main{border-right:0;border-bottom:1px solid var(--line)}}
.res-grp>.rlab{display:block;font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-family:var(--sans);font-weight:500;font-size:13.5px;color:rgba(241,234,221,.8);background:rgba(241,234,221,.04);
  border:1px solid var(--line);border-radius:2px;padding:12px 17px;cursor:pointer;transition:.22s;text-align:left}
.pill:hover{color:var(--bone);border-color:rgba(241,234,221,.32)}
.pill.on{background:var(--pine);border-color:var(--pine-hi);color:#fff}
.pill b{display:block;font-weight:600}
.pill span{display:block;font-size:11px;opacity:.72;margin-top:2px}
.step{display:flex;align-items:center;gap:14px}
.step button{width:44px;height:44px;border-radius:2px;border:1px solid var(--line);background:rgba(241,234,221,.04);
  color:var(--bone);font-size:20px;cursor:pointer;transition:.22s;font-family:var(--sans);line-height:1}
.step button:hover{border-color:var(--brass-hi);color:var(--brass-hi)}
.step b{font-family:var(--disp);font-weight:600;font-size:34px;color:var(--bone);min-width:2.2em;text-align:center}
.step em{font-style:normal;font-size:13px;color:var(--muted)}

.res-side{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;background:rgba(18,16,14,.4)}
/* The form column is much taller, so the summary sticks beside it. A sticky grid
   item can't stretch, so the column tint moves to the grid itself — the stop matches
   the 1.25fr / .75fr split exactly, since there is no gap between the tracks. */
@media(min-width:981px){
  .res-body{background:linear-gradient(90deg,transparent 62.5%,rgba(18,16,14,.4) 62.5%)}
  .res-side{background:transparent;position:sticky;top:100px;align-self:start}
}
.res-sum dl{display:grid}
.res-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.res-line:last-child{border-bottom:0}
.res-line dt{color:var(--muted)}
.res-line dd{color:var(--bone);font-weight:500;text-align:right}
.res-line dd.pending{color:var(--muted);font-style:italic;font-weight:400}
.res-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:14px}
.res-done{display:none;text-align:center;padding:clamp(34px,5vw,64px) var(--pad)}
.res-done.show{display:block}
.res-done .tick{width:58px;height:58px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;margin:0 auto 22px;font-size:26px}
.res-done h3{font-size:clamp(28px,3.4vw,42px);color:var(--bone);margin-bottom:12px}
.res-done p{color:rgba(241,234,221,.74);max-width:50ch;margin:0 auto;font-size:15.5px}
.res-done .when{display:inline-block;margin-top:22px;padding:14px 24px;border:1px solid var(--brass-hi);border-radius:2px;
  font-family:var(--disp);font-size:20px;color:var(--brass-hi)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;border-radius:2px;overflow:hidden;background:var(--paper);border:1px solid var(--line-dk);transition:transform .38s var(--ease),box-shadow .38s}
.card:hover{transform:translateY(-6px);box-shadow:0 44px 80px -46px rgba(18,16,14,.42)}
.dark .card{background:var(--ink-2);border-color:var(--line)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:clamp(24px,2.6vw,34px)}
.card h3{font-size:clamp(26px,2.8vw,34px);color:var(--ink)}
.dark .card h3{color:var(--bone)}
.card p{margin-top:11px;font-size:15px;color:var(--body)}
.dark .card p{color:rgba(241,234,221,.68)}
.card .go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.dark .card .go{color:var(--brass-hi)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.split.rev .split-media{order:2}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:38px}.split.rev .split-media{order:0}}
.frame{position:relative;border-radius:2px;overflow:hidden;background:var(--ink-2);box-shadow:0 46px 88px -50px rgba(18,16,14,.55)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.tall{aspect-ratio:4/5}.frame.wide{aspect-ratio:4/3}.frame.cine{aspect-ratio:16/9}
.frame .tag{position:absolute;left:0;bottom:0;z-index:3;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);background:rgba(18,16,14,.82);backdrop-filter:blur(4px);padding:10px 16px}

/* ---------- checks ---------- */
.checks{list-style:none;margin-top:8px}
.checks li{padding:18px 0;border-bottom:1px solid var(--line-dk);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.checks li:first-child{border-top:1px solid var(--line-dk)}
.dark .checks li{border-color:var(--line)}
.checks .mk{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--pine);color:var(--pine);display:grid;place-items:center;margin-top:3px;font-size:11px}
.dark .checks .mk{border-color:var(--brass-hi);color:var(--brass-hi)}
.checks h3{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:0}
.dark .checks h3{color:var(--bone)}
.checks p{color:var(--body);font-size:14.5px;margin-top:4px}
.dark .checks p{color:rgba(241,234,221,.68)}

/* ---------- index rows ---------- */
.index-rows{list-style:none;border-top:1px solid var(--line-dk)}
.dark .index-rows{border-color:var(--line)}
.index-rows li{border-bottom:1px solid var(--line-dk)}
.dark .index-rows li{border-color:var(--line)}
.index-rows a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(20px,2.6vw,30px) 6px;transition:padding .35s var(--ease)}
.index-rows a:hover{padding-left:18px}
.index-rows .n{font-family:var(--disp);font-size:17px;color:var(--pine);min-width:2.6em}
.dark .index-rows .n{color:var(--brass-hi)}
.index-rows h3{font-size:clamp(24px,3vw,38px);color:var(--ink)}
.dark .index-rows h3{color:var(--bone)}
.index-rows p{font-size:14.5px;color:var(--body);margin-top:7px;max-width:56ch}
.dark .index-rows p{color:rgba(241,234,221,.66)}
.index-rows .go{font-size:20px;color:var(--pine);opacity:0;transform:translateX(-6px);transition:.35s var(--ease)}
.dark .index-rows .go{color:var(--brass-hi)}
.index-rows a:hover .go{opacity:1;transform:none}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:780px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--ink);padding:clamp(28px,3vw,44px) 18px;text-align:center}
.stat b{font-family:var(--disp);font-weight:600;font-size:clamp(40px,5.4vw,68px);color:var(--bone);line-height:1;display:block}
.stat b .u{color:var(--brass-hi);font-size:.5em}
.stat span{display:block;margin-top:13px;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- quote / reviews ---------- */
.quote-big{max-width:1000px;margin:0 auto;text-align:center}
.quote-big p{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(28px,4vw,54px);line-height:1.22;color:var(--bone)}
.light-q .quote-big p{color:var(--ink)}
.quote-big cite{display:block;margin-top:26px;font-style:normal;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi)}
.light-q .quote-big cite{color:var(--pine)}
.quote-big cite span{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:13px;margin-top:7px;font-family:var(--sans)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}
.rev{border-top:1px solid var(--line-dk);padding-top:22px;display:flex;flex-direction:column}
.dark .rev{border-color:var(--line)}
.rev .s{color:var(--brass);letter-spacing:3px;font-size:13px}
.rev p{margin-top:14px;font-size:18px;line-height:1.5;color:var(--ink);flex:1;font-family:var(--disp);font-weight:500}
.dark .rev p{color:var(--bone)}
.rev cite{display:block;margin-top:18px;font-style:normal;font-weight:600;font-size:13px;color:var(--ink)}
.dark .rev cite{color:var(--bone)}
.rev cite span{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px}

/* ---------- menu ---------- */
.menu-nav{position:sticky;top:84px;z-index:40;background:rgba(241,234,221,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dk);overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu-nav-in{display:flex;gap:4px;padding:12px var(--pad);width:max-content;min-width:100%}
.menu-nav a{white-space:nowrap;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);padding:10px 15px;border-radius:2px;transition:.22s}
.menu-nav a:hover{background:rgba(18,16,14,.06);color:var(--ink)}
@media(max-width:1080px){.menu-nav{top:70px}}
.mgroup{margin-bottom:clamp(44px,5vw,72px);scroll-margin-top:150px}
.mgroup-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.dark .mgroup-head{border-color:var(--brass-hi)}
.mgroup-head h2{font-size:clamp(30px,3.8vw,48px)}
.mgroup-head .note{font-size:12.5px;color:var(--body)}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px)}
@media(max-width:860px){.mlist{grid-template-columns:1fr}}
.mitem{padding:18px 0;border-bottom:1px solid var(--line-dk)}
.mitem h3{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.mitem p{margin-top:7px;font-size:14px;color:var(--body);line-height:1.6;max-width:56ch}
.mitem .flag{display:inline-block;margin-top:8px;font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);border:1px solid rgba(47,74,58,.4);border-radius:2px;padding:4px 9px}
.mnote{background:var(--bone-2);border-left:3px solid var(--pine);padding:18px 22px;font-size:14.5px;color:var(--body);margin-bottom:clamp(34px,4vw,54px)}
.mnote b{color:var(--ink)}

/* ---------- forms ---------- */
.form-card{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:clamp(26px,3.4vw,44px)}
.form-card h3{font-size:clamp(26px,3vw,36px);color:var(--bone);margin-bottom:8px}
.form-card .sub{font-size:14px;color:var(--muted);margin-bottom:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--bone);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:11px 2px;transition:.22s;border-radius:0}
.field select{cursor:pointer}
.field select option{background:var(--ink-2);color:var(--bone)}
.field input::placeholder,.field textarea::placeholder{color:rgba(142,133,111,.75)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass-hi)}
.field textarea{min-height:96px;resize:vertical}
.form-success{display:none;text-align:center;padding:clamp(28px,4vw,48px) 10px}
.form-success.show{display:block}
.form-success .tick{width:54px;height:54px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;margin:0 auto 20px;font-size:24px}
.form-success p{color:rgba(241,234,221,.72);max-width:44ch;margin:0 auto;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-weight:500;font-size:12.5px;color:rgba(241,234,221,.76);background:rgba(241,234,221,.05);
  border:1px solid var(--line);border-radius:100px;padding:10px 17px;cursor:pointer;transition:.24s}
.chip:hover{color:var(--bone);border-color:rgba(241,234,221,.3)}
.chip.on{background:var(--pine);border-color:var(--pine);color:#fff}

/* ---------- gallery / map / info ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
@media(max-width:860px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal-slot{aspect-ratio:4/3;border:1px dashed var(--line-dk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:22px;background:rgba(18,16,14,.02)}
.dark .gal-slot{border-color:var(--line);background:rgba(241,234,221,.03)}
.gal-slot svg{color:var(--pine);opacity:.8}
.dark .gal-slot svg{color:var(--brass-hi)}
.gal-slot b{font-weight:600;font-size:13.5px;color:var(--ink)}
.dark .gal-slot b{color:var(--bone)}
.gal-slot span{font-size:12px;color:var(--muted);max-width:24ch}
.map-embed{border:1px solid var(--line-dk);border-radius:2px;overflow:hidden;background:var(--bone-2)}
.map-embed iframe{display:block;width:100%;height:clamp(290px,42vw,440px);border:0}
.info-list{list-style:none;margin-top:22px}
.info-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-dk);font-size:15px;color:var(--body)}
.dark .info-list li{border-color:var(--line);color:rgba(241,234,221,.72)}
.info-list li .ic{color:var(--pine);flex:none;margin-top:3px}
.dark .info-list li .ic{color:var(--brass-hi)}
.info-list li b{color:var(--ink);display:block;margin-bottom:2px;font-weight:600}
.dark .info-list li b{color:var(--bone)}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-dk);font-size:15px}
.dark .hours-row{border-color:var(--line)}
.hours-row dt{color:var(--body)}.dark .hours-row dt{color:rgba(241,234,221,.7)}
.hours-row dd{color:var(--ink);font-weight:600}.dark .hours-row dd{color:var(--bone)}
.hours-row.is-today dt,.hours-row.is-today dd{color:var(--pine)}
.dark .hours-row.is-today dt,.dark .hours-row.is-today dd{color:var(--brass-hi)}
.hours-row .nowtag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-left:8px}

/* ---------- blocks ---------- */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.blocks{grid-template-columns:1fr}}
.block{border-top:2px solid var(--pine);padding-top:22px}
.dark .block{border-top-color:var(--brass-hi)}
.block h3{font-size:clamp(21px,2.3vw,28px);color:var(--ink);margin-bottom:10px}
.dark .block h3{color:var(--bone)}
.block p{font-size:14.5px;color:var(--body)}
.dark .block p{color:rgba(241,234,221,.68)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;background:var(--ink);color:var(--bone)}
.cta::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,16,14,.88),rgba(18,16,14,.95)),
  radial-gradient(62% 92% at 50% 0%,rgba(47,74,58,.55),transparent 66%),
  url("hero.jpg") center/cover no-repeat}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:var(--bone)}.cta h2 em{color:var(--brass-hi)}
.cta .lead{color:rgba(241,234,221,.8);margin:18px auto 0;max-width:52ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.cta-tel{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(34px,6vw,72px);color:var(--bone);margin-top:8px}
.cta-tel:hover{color:var(--brass-hi)}

/* ---------- page header ---------- */
.phead{position:relative;overflow:hidden;padding:172px 0 clamp(54px,7vw,92px);background:var(--ink);color:var(--bone)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img,.phead-bg video{width:100%;height:100%;object-fit:cover;animation:kbh 25s ease-in-out infinite alternate}
@keyframes kbh{from{transform:scale(1.04) translate3d(-.8%,0,0)}to{transform:scale(1.13) translate3d(1%,-.9%,0)}}
/* pheads sit over some very bright rooms — the scrim has to carry small brass type */
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,16,14,.9) 0%,rgba(18,16,14,.72) 46%,rgba(18,16,14,.96) 100%),
  linear-gradient(112deg,rgba(18,16,14,.82) 0%,rgba(18,16,14,.3) 62%,rgba(18,16,14,.1) 100%)}
.phead::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 108% at 22% 0%,rgba(47,74,58,.5),transparent 62%)}
.phead-in{position:relative;z-index:3;max-width:900px}
.phead h1{font-size:clamp(40px,7vw,96px);color:var(--bone);margin-top:22px;line-height:1.02;letter-spacing:-.02em;text-shadow:0 8px 44px rgba(0,0,0,.5)}
.phead .label{margin-top:14px}
.crumb+.label{margin-top:16px}
.phead h1 em{font-style:italic;color:var(--brass-hi)}
.phead p{margin-top:19px;max-width:58ch;color:rgba(241,234,221,.78)}
.crumb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,234,221,.5)}
.crumb a:hover{color:var(--brass-hi)}

/* ---------- footer ---------- */
footer{background:var(--ink-2);color:rgba(241,234,221,.62);padding-top:clamp(54px,6vw,84px);position:relative;overflow:hidden}
.foot-word{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(46px,15vw,210px);line-height:.8;color:var(--bone);opacity:.05;text-align:center;white-space:nowrap;user-select:none}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:clamp(28px,3vw,46px)}
@media(max-width:960px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-top{grid-template-columns:1fr;gap:28px}}
.foot-brand p{color:rgba(241,234,221,.5);margin-top:14px;max-width:34ch;font-size:14.5px}
.foot-col h4{font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:16px}
.foot-col a,.foot-col span{display:block;color:rgba(241,234,221,.58);font-size:14.5px;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:12.5px;color:rgba(241,234,221,.4)}

/* ---------- mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;box-shadow:0 -14px 32px rgba(18,16,14,.34)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-weight:600;font-size:13px}
.mbar .call{background:var(--ink);color:var(--bone)}
.mbar .book{background:var(--pine);color:#fff}
@media(max-width:1080px){.mbar{display:flex}footer{padding-bottom:66px}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-bg img,.hero-bg video,.phead-bg img,.phead-bg video{animation:none}
  body::after{display:none}
}

/* ---------- hero photo -------------------------------------------------
   The hero is now a real photograph of the building rather than a generated
   video. A very slow drift keeps it from feeling like a dead JPEG; reduced
   motion switches it off entirely. */
.hero-bg .hero-photo{ width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: no-preference){
  .hero-bg .hero-photo{ animation: heroDrift 26s ease-in-out infinite alternate;
    transform-origin:60% 55%; }
  @keyframes heroDrift{ from{ transform:scale(1.04); } to{ transform:scale(1.11); } }
}

/* ---------- hero parallax -----------------------------------------------
   Depth for the real photo, not a replacement of it. site.js drives this
   element's transform from mouse position and scroll offset; this rule just
   gives it room to move (10% oversize on every side, -5% inset) and a short
   transition so JS updates ease rather than jump. The inner .hero-photo's own
   zoom-drift animation is untouched — the two transforms live on separate
   elements, so they compose instead of overwriting each other. Text/CTAs are
   deliberately NOT part of this — a headline or button that drifts under the
   cursor is a click-accuracy problem, not a premium detail. */
.hero-parallax{ position:absolute; inset:-5%; width:110%; height:110%; }
@media (prefers-reduced-motion: no-preference){
  .hero-parallax{ transition:transform .5s cubic-bezier(.22,1,.36,1); will-change:transform; }
}

/* seasonal footnote beside a day that isn't a simple open/closed */
.hrs-note{ font-style:normal; opacity:.62; font-size:.86em; }

/* ---------- gallery photos (party room) --------------------------------
   .gal already lays out a 3-up grid for the placeholder slots; these are the
   real photographs that go in it. */
.gal-photo{margin:0;position:relative;overflow:hidden;background:var(--bone-2)}
/* height:auto is load-bearing — the width/height attributes on these <img>
   tags become presentational hints, and a hint of height:1067px beats the
   aspect-ratio, which rendered every photo as a tall narrow crop. */
.gal-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .6s var(--ease)}
.gal-photo:hover img{transform:scale(1.03)}
.gal-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-size:12px;letter-spacing:.04em;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%)}

/* ---------- job application form ---------------------------------------
   Reuses .field / .f-row from the reservation form so the two forms on the
   site behave and look identical. */
.jobform{background:var(--bone-2);border:1px solid var(--line-dk);padding:clamp(22px,3vw,34px)}
.dark .jobform{background:rgba(241,234,221,.04);border-color:var(--line)}
.jobform .rlab{display:block;font-weight:600;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.jobform select{width:100%;font:inherit;font-size:15px;padding:13px 14px;
  border:1px solid var(--line-dk);border-radius:2px;background:#fff;color:var(--ink)}
.jobform select:focus{outline:none;border-color:var(--pine)}
/* The day chips are <label>s, and the site's global `.field label` rule sets
   uppercase / 9.5px / wide tracking for form labels — which mangled these and
   pushed the text clean outside its box. They live outside .field now, and
   these declarations put the type back explicitly so the global rule can
   never reach them again. */
.field-group{margin-bottom:18px}
.field-group .flab{display:block;font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.daygrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.daygrid .day{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border:1px solid var(--line-dk);border-radius:2px;cursor:pointer;font-size:13.5px;
  background:#fff;transition:border-color .2s,background .2s}
.daygrid .day:hover{border-color:var(--pine)}
.daygrid .day input{accent-color:var(--pine);flex:none}
.daygrid .day span{line-height:1.25;text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:400;color:var(--ink);margin:0;display:inline;
  min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.daygrid{grid-template-columns:1fr}}
/* honeypot — off-screen rather than display:none so bots still fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* "Join the Team" sits in the main nav but reads as a quieter, secondary
   invitation — it shouldn't compete with Menu or Prime Rib for a diner's eye. */
.nav-join{position:relative;color:var(--brass-hi)!important}
.nav-join::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--brass-hi);opacity:.55}
@media(max-width:1120px){.nav-join{display:none}}

/* ---------- reservations by phone --------------------------------------
   The booking form was removed at the owner's request: everything except the
   job application now points at the telephone. The panel keeps the useful
   detail (which nights, seatings, party sizes) so the page still answers the
   questions the form used to collect. */
.res-body--call{display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.res-body--call .res-plain{margin:0;font-size:15.5px;line-height:1.6;color:rgba(241,234,221,.72)}
.res-body--call .res-plain b{color:var(--bone);font-weight:600}
@media(max-width:860px){.res-body--call{grid-template-columns:1fr}}