/* ============================================================
   WV Smokehouse — design tokens & base styles
   Saloon / smokehouse signage. Moody at night. Ember-glow.
   ============================================================ */

:root{
  /* ink + smoke (dark substrate) */
  --ink:        #0c0805;
  --smoke:      #15100b;
  --char:       #1f1610;
  --walnut:     #2d1f15;
  --bark:       #3d2a1d;

  /* paper (menu & light moments) */
  --paper:      #f1e5c8;
  --paper-2:    #e6d4ad;
  --paper-3:    #d2bb8a;
  --paper-edge: #b89a64;

  /* ember + brass (heat + metal) */
  --ember:      #d97843;
  --ember-hot:  #f5a35a;
  --ember-deep: #a14a1f;
  --brass:      #c9a567;
  --brass-dim:  #8a7045;

  /* accents */
  --crimson:    #7a2a1f;
  --crimson-d:  #4a160e;
  --smoke-warm: #7a6a5a;

  /* text on dark / light */
  --text-cream: #efe4cc;
  --text-dim:   #b8a98f;
  --text-faint: #7a6a55;
  --text-ink:   #1a120a;
  --text-ink-2: #4a3826;

  /* sizing */
  --max:        1240px;
  --gutter:     clamp(20px, 4vw, 56px);

  /* type */
  --f-display:  "Rye", "Abril Fatface", Georgia, serif;
  --f-editorial:"Abril Fatface", "Rye", Georgia, serif;
  --f-slab:     "Alfa Slab One", "Rye", Georgia, serif;
  --f-body:     "Lora", "Iowan Old Style", Georgia, serif;
  --f-hand:     "Caveat", "Brush Script MT", cursive;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--ink);
  color: var(--text-cream);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
a{ color: inherit; text-decoration: none; }

/* film grain & paper texture — sparing, sets atmosphere */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: .07; mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,210,150,.5) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.5) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* tiny utility: enamel-badge ring (used for the section labels) */
.badge{
  display: inline-flex; align-items:center; gap:.55em;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .9;
}
.badge::before, .badge::after{
  content:""; display:inline-block; width:18px; height:1px; background: currentColor; opacity:.6;
}

/* ornamental rule — vintage signage divider */
.rule{
  display:flex; align-items:center; gap: 14px;
  color: var(--brass);
}
.rule::before, .rule::after{
  content:""; flex:1; height: 1px; background: currentColor; opacity:.45;
}
.rule .diamond{
  width: 8px; height: 8px; transform: rotate(45deg);
  background: currentColor; opacity: .8;
}

/* the come-in CTA — animated ember pulse */
.cta{
  position: relative;
  display: inline-flex; align-items:center; gap: 14px;
  padding: 18px 32px 18px 28px;
  background: linear-gradient(180deg, #e58a4d, #c4612b 60%, #9c4717);
  color: #fff7e6;
  font-family: var(--f-editorial);
  font-size: 22px;
  letter-spacing: .015em;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.45),
    inset 0 -8px 16px rgba(60,18,0,.45),
    0 18px 40px rgba(217,120,67,.32),
    0 0 0 1px rgba(255,180,120,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta::before{
  content:""; position: absolute; inset:-6px; border-radius: 999px;
  background: radial-gradient(50% 60% at 50% 50%, rgba(245,163,90,.55), rgba(245,163,90,0) 70%);
  filter: blur(8px);
  z-index: -1;
  animation: ember-breath 4.6s ease-in-out infinite;
}
.cta:hover{ transform: translateY(-1px); box-shadow:
  inset 0 1px 0 rgba(255,220,170,.55),
  inset 0 -8px 16px rgba(60,18,0,.45),
  0 22px 48px rgba(217,120,67,.45),
  0 0 0 1px rgba(255,180,120,.25);
}
.cta:active{ transform: translateY(0); }
.cta .cta-arrow{
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,247,230,.18); display: grid; place-items: center;
}
.cta .cta-arrow::after{
  content:""; width: 7px; height: 7px;
  border-top: 1.5px solid #fff7e6;
  border-right: 1.5px solid #fff7e6;
  transform: rotate(45deg);
  margin-left: -2px;
}

@keyframes ember-breath{
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.06); }
}

/* focus-visible */
:focus-visible{ outline: 2px solid var(--ember-hot); outline-offset: 3px; border-radius: 4px; }

/* selection */
::selection{ background: var(--ember); color: #fff7e6; }

/* responsive image-replacement utility for tiny screens */
@media (max-width: 720px){
  body{ font-size: 17px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display: flex; align-items:center; justify-content: space-between;
  padding: 18px var(--gutter);
  pointer-events: none;
}
.site-header > *{ pointer-events: auto; }
.site-header.is-scrolled::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,8,5,.95), rgba(12,8,5,.7) 70%, rgba(12,8,5,0));
  z-index:-1; pointer-events:none;
}

.brand{
  position: relative;
  display: flex; align-items:center; gap: 14px;
  color: var(--text-cream);
  isolation: isolate;
}
.brand .mark{
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2b1d14, #0c0805 70%);
  border: 1.5px solid var(--brass-dim);
  box-shadow:
    inset 0 0 0 4px rgba(201,165,103,.08),
    inset 0 0 20px rgba(217,120,67,.25),
    0 4px 18px rgba(0,0,0,.5);
  overflow: hidden;
}
.brand .mark svg{ width: 36px; height: 36px; }

.brand .mark::after{
  /* slow atmospheric smoke layer behind the mark */
  content:"";
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 50%, rgba(201,165,103,.22), rgba(201,165,103,0) 60%);
  filter: blur(8px);
  animation: brand-drift 22s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes brand-drift{
  0%, 100% { transform: translate(0,0) scale(1); opacity: .8; }
  50%      { transform: translate(6%, -4%) scale(1.08); opacity: 1; }
}

.brand .wordmark{
  display: flex; flex-direction: column; line-height: 1;
}
.brand .wordmark .top{
  font-family: var(--f-editorial);
  font-size: 19px; letter-spacing: .01em;
  color: var(--text-cream);
}
.brand .wordmark .bottom{
  font-family: var(--f-hand);
  color: var(--ember-hot);
  font-size: 17px;
  margin-top: 2px;
  letter-spacing: .01em;
}
@media (max-width: 540px){
  .brand .wordmark .top{ font-size: 16px; }
  .brand .wordmark .bottom{ font-size: 15px; }
  .brand .mark{ width: 48px; height: 48px; }
  .brand .mark svg{ width: 30px; height: 30px; }
}

.menu-button{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2b1d14, #0c0805 70%);
  border: 1.5px solid var(--brass-dim);
  color: var(--text-cream);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.menu-button:hover{ border-color: var(--brass); color: var(--ember-hot); }
.menu-button .bars{ display: flex; flex-direction: column; gap: 5px; }
.menu-button .bars span{ width: 22px; height: 1.5px; background: currentColor; display:block; }

/* slide-out nav */
.nav-overlay{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,4,2,.85);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.nav-overlay.is-open{ opacity: 1; visibility: visible; }
.nav-overlay nav{
  display: flex; flex-direction: column; gap: 24px; align-items:center;
  font-family: var(--f-editorial);
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  color: var(--text-cream);
}
.nav-overlay nav a{
  position: relative;
  padding: 4px 16px;
  transition: color .2s;
}
.nav-overlay nav a:hover{ color: var(--ember-hot); }
.nav-overlay nav a::after{
  content:""; position: absolute; left:50%; right:50%; bottom: -2px; height: 1px;
  background: var(--ember-hot); transition: left .25s, right .25s;
}
.nav-overlay nav a:hover::after{ left: 16px; right: 16px; }
.nav-close{
  position: absolute; top: 22px; right: var(--gutter);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--brass-dim);
  color: var(--text-cream);
}
.nav-close:hover{ color: var(--ember-hot); border-color: var(--brass); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  height: 100vh;
  min-height: 820px;
  max-height: 1080px;
  overflow: hidden;
  background: #050302;
  color: var(--text-cream);
  user-select: none;
  touch-action: pan-y;   /* let JS handle horizontal swipe; keep vertical scroll */
}
/* whole-hero swipe: horizontal drags on the overlay content (board, title, etc.)
   must reach the section handler instead of being eaten by the browser. */
.hero-overlay, .hero-overlay *{ touch-action: pan-y; }
.hero-bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 50% 60%, rgba(217,120,67,.10), transparent 70%),
    radial-gradient(40% 50% at 50% 0%,  rgba(201,165,103,.10), transparent 70%),
    linear-gradient(180deg, #0a0604, #060302);
}
.swipe-stage{
  position: absolute; inset: 0;
  cursor: grab;
  touch-action: pan-y;
}
.swipe-stage:active{ cursor: grabbing; }

.swipe-track{
  height: 100%;
  display: flex;
  will-change: transform;
}

.scene{
  flex: 0 0 100vw;
  width: 100vw;
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.scene{
  position: relative;
  overflow: hidden;
}
.scene-svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.scene-photo{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  /* sits on top of the SVG fallback; transparent until the image file exists */
}
.scene-veil{
  position: absolute; inset:0;
  background:
    radial-gradient(55% 35% at 50% 32%, rgba(0,0,0,.55), rgba(0,0,0,.2) 55%, transparent 80%),
    radial-gradient(85% 70% at 50% 60%, rgba(0,0,0,.15), transparent 75%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(7,4,2,.92) 100%);
  pointer-events: none;
}

/* ---- per-scene ambient life ---- */
.fx{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
/* particles run only while their scene is the active one */
.fx > *{ animation-play-state: paused; }
.scene.is-active .fx > *{ animation-play-state: running; }

/* flickering / pulsing light-source glows anchored to lamps & fire */
.glow{
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .6;
  animation-name: glow-pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}
@keyframes glow-pulse{
  0%, 100% { opacity: .5;  transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.18); }
}
.glow-flicker{ animation-name: glow-flicker; animation-timing-function: linear; }
@keyframes glow-flicker{
  0%   { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  15%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
  28%  { opacity: .6;  transform: translate(-50%,-50%) scale(1.02); }
  42%  { opacity: .95; transform: translate(-50%,-50%) scale(1.14); }
  55%  { opacity: .5;  transform: translate(-50%,-50%) scale(.98); }
  70%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.16); }
  84%  { opacity: .65; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
}

/* dust motes (bar) + beam dust (stage) */
.mote{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,234,182,1), rgba(255,200,120,0) 70%);
  box-shadow: 0 0 6px 1px rgba(255,210,140,.6);
  opacity: 0;
  animation-name: mote-float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes mote-float{
  0%   { transform: translate(0,0);                         opacity: 0; }
  10%  { opacity: var(--op, .8); }
  50%  { opacity: var(--op, .8); }
  88%  { opacity: calc(var(--op, .8) * .7); }
  100% { transform: translate(var(--drift,0), var(--rise,-140px)); opacity: 0; }
}
.beam-mote{
  background: radial-gradient(circle, rgba(255,222,160,1), rgba(255,196,116,0) 70%);
  box-shadow: 0 0 8px 2px rgba(255,206,130,.7);
}

/* sharp twinkling glints in the stage beam */
.glint{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0%, rgba(255,220,150,.8) 35%, transparent 70%);
  box-shadow: 0 0 12px 3px rgba(255,224,160,.85);
  opacity: 0;
  animation-name: glint-pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes glint-pulse{
  0%, 100% { opacity: 0; transform: scale(.4); }
  45%      { opacity: 1; transform: scale(1.25); }
  60%      { opacity: .5; transform: scale(.9); }
}

/* stage moving lights */
.stage-sweep{
  position: absolute;
  left: 14%; top: -12%;
  width: 46%; height: 122%;
  background: linear-gradient(180deg, rgba(255,208,135,.32), rgba(255,205,130,0) 66%);
  filter: blur(22px);
  transform-origin: 50% 0%;
  mix-blend-mode: screen;
  animation: stage-sweep 11s ease-in-out infinite;
}
@keyframes stage-sweep{
  0%, 100% { transform: rotate(-6deg) translateX(-4%); opacity: .8; }
  50%      { transform: rotate(7deg)  translateX(9%);  opacity: 1; }
}
.stage-wash{
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  filter: blur(50px);
  mix-blend-mode: screen;
}
.wash-amber{
  left: 3%; top: -6%;
  background: radial-gradient(circle, rgba(245,168,96,.7), transparent 60%);
  animation: wash-a 13s ease-in-out infinite;
}
.wash-crimson{
  right: 6%; top: 24%;
  background: radial-gradient(circle, rgba(170,52,38,.7), transparent 62%);
  animation: wash-b 18s ease-in-out infinite;
}
@keyframes wash-a{
  0%,100% { transform: translate(0,0) scale(1);    opacity: .45; }
  50%     { transform: translate(60px,26px) scale(1.18); opacity: .8; }
}
@keyframes wash-b{
  0%,100% { transform: translate(0,0) scale(1);    opacity: .4; }
  50%     { transform: translate(-48px,-22px) scale(1.16); opacity: .7; }
}

/* fireflies (pit) */
.firefly{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,160,1) 0%, rgba(255,196,70,.9) 40%, rgba(255,170,50,0) 72%);
  box-shadow: 0 0 10px 3px rgba(255,210,96,.8);
  opacity: 0;
  animation-name: firefly-fly, firefly-flick;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  will-change: transform, opacity;
}
@keyframes firefly-fly{
  0%   { transform: translate(0,0); }
  50%  { transform: translate(var(--dx,0), var(--dy,0)); }
  100% { transform: translate(0,0); }
}
@keyframes firefly-flick{
  0%, 100% { opacity: 0; }
  25%      { opacity: 1; }
  50%      { opacity: .55; }
  75%      { opacity: .95; }
}

/* rising embers off the firebox (pit) */
.spark{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff2c4 0%, #ff9a3c 45%, rgba(217,83,31,0) 75%);
  box-shadow: 0 0 8px 2px rgba(255,140,60,.8);
  opacity: 0;
  animation-name: spark-rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes spark-rise{
  0%   { transform: translate(0,0) scale(1);      opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { transform: translate(var(--drift,0), var(--rise,-180px)) scale(.4); opacity: 0; }
}

/* rising smoke wisps off the stack (pit) */
.wisp{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,204,192,.32), rgba(214,204,192,0) 70%);
  filter: blur(8px);
  opacity: 0;
  animation-name: wisp-rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes wisp-rise{
  0%   { transform: translateY(24px) scale(.7);  opacity: 0; }
  22%  { opacity: .7; }
  100% { transform: translateY(-220px) scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .mote, .firefly, .wisp, .spark, .glint, .glow, .stage-sweep, .stage-wash{ animation: none !important; }
  .glow{ opacity: .55 !important; }
  .mote, .firefly, .wisp, .spark, .glint{ opacity: 0 !important; }
}

/* arrow controls */
.arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(12,8,5,.55);
  border: 1px solid rgba(201,165,103,.45);
  color: var(--text-cream);
  display: grid; place-items: center;
  backdrop-filter: blur(2px);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  z-index: 5;
}
.arrow:hover:not(:disabled){
  background: rgba(217,120,67,.18);
  border-color: var(--brass);
  color: var(--ember-hot);
}
.arrow:disabled{ opacity: .25; cursor: default; }
.arrow-l{ left: clamp(12px, 3vw, 36px); }
.arrow-r{ right: clamp(12px, 3vw, 36px); }

/* animated invitation — the side arrows nudge like the swipe cue,
   so it reads as "change scenes here" */
.arrow svg{ animation: none; }
.arrow-l:not(:disabled) svg{ animation: arrow-nudge-l 1.8s ease-in-out infinite; color: var(--ember-hot); }
.arrow-r:not(:disabled) svg{ animation: arrow-nudge-r 1.8s ease-in-out infinite; color: var(--ember-hot); }
.arrow:not(:disabled){ animation: arrow-breath 3.4s ease-in-out infinite; }
.arrow-l:not(:disabled){ animation-name: arrow-breath-l; }
.arrow-r:not(:disabled){ animation-name: arrow-breath-r; }
.arrow:hover:not(:disabled) svg{ animation-play-state: paused; }

@keyframes arrow-nudge-l{
  0%, 100% { transform: translateX(0);   opacity: .85; }
  50%      { transform: translateX(-5px); opacity: 1; }
}
@keyframes arrow-nudge-r{
  0%, 100% { transform: translateX(0);   opacity: .85; }
  50%      { transform: translateX(5px);  opacity: 1; }
}
/* keep the -50% vertical centering while breathing the glow */
@keyframes arrow-breath-l{
  0%, 100% { transform: translateY(-50%); box-shadow: 0 0 0 0 rgba(217,120,67,0); }
  50%      { transform: translateY(-50%); box-shadow: 0 0 18px 2px rgba(217,120,67,.3); border-color: var(--brass); }
}
@keyframes arrow-breath-r{
  0%, 100% { transform: translateY(-50%); box-shadow: 0 0 0 0 rgba(217,120,67,0); }
  50%      { transform: translateY(-50%); box-shadow: 0 0 18px 2px rgba(217,120,67,.3); border-color: var(--brass); }
}

@media (prefers-reduced-motion: reduce){
  .arrow svg, .arrow{ animation: none !important; }
}

@media (max-width: 540px){
  .arrow{ width: 44px; height: 44px; }
}

/* hero overlay — vertical stack of content */
.hero-overlay{
  position: absolute;
  inset: 0;
  padding: clamp(80px, 9vh, 110px) var(--gutter) clamp(20px, 4vh, 36px);
  pointer-events: none;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-overlay > *{ pointer-events: auto; }

.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero-eyebrow .diamond-mark{ color: var(--ember); font-size: 6px; transform: translateY(-2px); }

.hero-title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 8.4vw, 116px);
  line-height: .88;
  letter-spacing: -.005em;
  margin: 0 0 14px;
  color: #fbe9c8;
  text-shadow:
    0 2px 0 rgba(0,0,0,.5),
    0 4px 20px rgba(0,0,0,.7),
    0 0 60px rgba(217,120,67,.35);
}
.hero-title .line-1{ display: block; }
.hero-title .line-2{ display: block; margin-top: 4px; }
.hero-title em{
  font-style: normal;
  color: var(--ember-hot);
  text-shadow:
    0 2px 0 rgba(0,0,0,.5),
    0 0 30px rgba(245,163,90,.6);
}

.hero-sub{
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.45;
  color: var(--text-cream);
  max-width: 580px;
  margin: 0 auto 22px;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* the per-scene info card — the functional content */
.scene-deck{
  position: relative;
  width: min(480px, 92vw);
  height: clamp(244px, 31vh, 286px);
  margin: 0 auto 22px;
}
.info-card{
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  text-align: left;
  padding: 18px 22px 15px;
  background:
    linear-gradient(180deg, rgba(28,18,11,.92), rgba(16,10,6,.94));
  border: 1px solid rgba(201,165,103,.34);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(201,165,103,.14),
    0 22px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .45s ease, transform .55s cubic-bezier(.18,.85,.25,1);
  pointer-events: none;
}
.info-card.is-active{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.info-card::before{
  /* brass top accent */
  content:""; position: absolute; top: -1px; left: 20px; right: 20px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

.info-card-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.info-kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.info-kicker .ornament{ color: var(--brass); font-size: 11px; }
.info-flag{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid rgba(201,165,103,.3);
  border-radius: 999px;
  padding: 3px 8px;
}
.info-line{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201,165,103,.22);
}

.info-rows{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.info-row{
  display: flex; align-items: baseline; gap: 8px;
}
.row-a{
  font-family: var(--f-editorial);
  font-size: 16px;
  line-height: 1.1;
  color: var(--text-cream);
  white-space: nowrap;
}
.info-row.is-hot .row-a{ color: var(--ember-hot); }
.row-smoke{
  display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e6d3a5;
  background: rgba(122,42,31,.55);
  border: 1px solid rgba(201,165,103,.3);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  transform: translateY(-1px);
}
.row-smoke svg{ color: var(--ember-hot); }
.info-row.is-hot .row-smoke{ background: var(--crimson); }
.row-dots{
  flex: 1;
  align-self: flex-end;
  height: 0; margin-bottom: 5px;
  border-bottom: 1.5px dotted rgba(201,165,103,.35);
  min-width: 14px;
}
.row-b{
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}
.kind-taps .row-b, .kind-lineup .row-b{ white-space: normal; max-width: 56%; }
.kind-menu .row-b{
  font-family: var(--f-editorial);
  font-size: 16px;
  color: var(--brass);
}
.info-row.is-hot .row-b{ color: var(--ember-hot); }

.info-foot{
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed rgba(201,165,103,.22);
  font-family: var(--f-hand);
  font-size: 16px;
  line-height: 1.2;
  color: var(--brass);
}

@media (max-width: 560px){
  .scene-deck{ height: clamp(240px, 40vh, 290px); }
  .info-card{ padding: 16px 18px 14px; }
  .row-a{ font-size: 15px; }
  /* Mobile nav is touch-swipe (the "Swipe to look around" cue + drag handlers).
     The absolutely-centered side scene-arrows were overlapping the tap board and
     covering the right end of the descriptions ("...cream al-" cut off). Hide them
     on mobile — swipe remains the affordance — and let descriptions use the full
     board width now that nothing overlays the right edge. */
  .arrow{ display: none; }
  .kind-taps .row-b, .kind-lineup .row-b{ max-width: 64%; }
}

.hero-cta-row{
  display: inline-flex; align-items: center; gap: 22px;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: auto;
}
.cta-support{
  font-family: var(--f-hand);
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  white-space: nowrap;
}

/* bottom row — tabs + cue */
.hero-bottom{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: auto;
}

/* scene tabs (bottom) */
.scene-tabs{
  display: flex; gap: clamp(8px, 2vw, 36px);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.scene-tab{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  color: var(--text-faint);
  transition: color .25s;
}
.scene-tab .tab-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  transition: background .25s, transform .25s;
}
.scene-tab:hover{ color: var(--text-dim); }
.scene-tab.is-active{ color: var(--ember-hot); }
.scene-tab.is-active .tab-dot{ background: var(--ember); transform: scale(1.5); }
.scene-tab.is-active::after{
  content:""; position: absolute; left:0; right:0; bottom:-6px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
}
@media (max-width: 600px){
  .scene-tab .tab-label{ display: none; }
}

/* swipe cue */
.swipe-cue{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-hand);
  font-size: 19px;
  color: var(--text-dim);
  margin-top: 4px;
}
/* lead variant: the cue now sits directly under the board (replacing the old hero
   CTA button) so the triple-hero swipe nav is the obvious next move. */
.swipe-cue--lead{
  display: flex; justify-content: center;
  margin: 30px auto 2px;
}
.cue-arrow{
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  color: var(--ember-hot);
  font-family: var(--f-body);
}
.cue-l{ animation: cue-l 1.8s ease-in-out infinite; }
.cue-r{ animation: cue-r 1.8s ease-in-out infinite; }
@keyframes cue-l{
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(-7px); opacity: 1; }
}
@keyframes cue-r{
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(7px); opacity: 1; }
}

@media (max-height: 820px){
  .hero{ min-height: 880px; }
  .hero-title{ font-size: clamp(40px, 7vw, 88px); }
  .hero-sub{ margin-bottom: 14px; }
  .scene-deck{ height: clamp(232px, 30vh, 270px); }
}

/* ============================================================
   CATERING — paper section + multi-step funnel
   ============================================================ */
.catering{
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 20%, rgba(255,224,170,.45), transparent 70%),
    linear-gradient(180deg, #ede0c2 0%, #e6d4ad 100%);
  color: var(--text-ink);
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(80px, 12vh, 140px);
}
.paper-edge-top{
  position: absolute;
  top: -1px; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, rgba(7,4,2,.92) 0%, transparent 100%);
  pointer-events: none;
}
.catering-inner{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vh, 64px);
}
@media (min-width: 980px){
  .catering-inner{
    grid-template-columns: 5fr 6fr;
    align-items: start;
    gap: 64px;
  }
}

.catering-head{
  position: relative;
}
.catering-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 18px;
}
.catering-eyebrow .ornament{ color: var(--brass-dim); }

.catering-headline{
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 32px;
  color: var(--text-ink);
}
.catering-headline em{
  font-style: italic;
  color: var(--crimson);
  font-family: var(--f-editorial);
}
.catering-headline .ellipsis{
  color: var(--paper-edge);
  font-weight: 400;
  letter-spacing: .05em;
}

.catering-body{
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-ink-2);
  max-width: 460px;
  margin: 0 0 24px;
}

.catering-weddings{
  display: inline-flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px 14px 14px;
  background: rgba(122,42,31,.06);
  border-left: 3px solid var(--crimson);
  border-radius: 2px;
  max-width: 440px;
}
.catering-weddings .hand-arrow{
  font-family: var(--f-hand);
  font-size: 30px;
  line-height: 1;
  color: var(--crimson);
  transform: translateY(-2px);
}
.catering-weddings .hand-line{
  font-family: var(--f-hand);
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-ink);
}
.catering-weddings strong{
  font-family: var(--f-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--crimson);
}

/* the funnel card — looks like a paper inquiry card on a desk */
.funnel-card{
  position: relative;
  background: #faf2db;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 30%),
    repeating-linear-gradient(0deg, transparent 0px, transparent 31px, rgba(122,80,40,.07) 32px);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  padding: 36px clamp(24px, 4vw, 44px) 28px;
  box-shadow:
    0 2px 0 rgba(0,0,0,.04),
    0 22px 50px rgba(45,20,8,.18),
    0 1px 0 rgba(255,255,255,.6) inset;
  min-height: 480px;
  display: flex; flex-direction: column;
}
/* the masking tape across top corners */
.funnel-tape{
  position: absolute;
  top: -10px; left: 22px;
  width: 90px; height: 24px;
  background: rgba(214, 180, 110, .65);
  transform: rotate(-4deg);
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  pointer-events: none;
}
.funnel-tape-right{
  left: auto; right: 22px;
  transform: rotate(3deg);
}
.funnel-tape::before, .funnel-tape::after{
  content:""; position: absolute; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.05));
}
.funnel-tape::before{ left:0; }
.funnel-tape::after{ right:0; }

/* progress pips */
.funnel-progress{
  display: flex; gap: 8px;
  margin-bottom: 22px;
}
.pip{
  height: 4px; flex: 1; max-width: 60px;
  background: rgba(122,80,40,.18);
  border-radius: 2px;
  transition: background .35s ease;
}
.pip.is-on{ background: var(--crimson); }

/* step shell */
.funnel-step-shell{
  flex: 1;
}
.funnel-step{
  animation: step-enter .45s cubic-bezier(.18,.85,.25,1) both;
}
@keyframes step-enter{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0); }
}
.step-meta{
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--paper-edge);
  margin-bottom: 8px;
}
.step-num{ color: var(--brass-dim); }
.step-label{
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  color: var(--text-ink);
  margin: 0 0 22px;
  text-wrap: balance;
}

/* event-type grid */
.event-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 540px){
  .event-grid{ grid-template-columns: 1fr 1fr; }
}
.event-card{
  text-align: left;
  padding: 14px 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(122,80,40,.25);
  border-radius: 3px;
  color: var(--text-ink);
  transition: background .2s, border-color .2s, transform .15s;
  display: flex; flex-direction: column; gap: 4px;
}
.event-card:hover{
  background: rgba(255,255,255,.85);
  border-color: var(--crimson);
}
.event-card.is-selected{
  background: var(--crimson);
  color: #fbe9c8;
  border-color: var(--crimson);
}
.event-card.is-selected .event-note{ color: rgba(251,233,200,.85); }
.event-label{
  font-family: var(--f-editorial);
  font-size: 20px;
  line-height: 1.1;
}
.event-note{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-ink-2);
}

/* date field */
.date-field{ display: flex; flex-direction: column; gap: 10px; }
.text-input{
  font-family: var(--f-editorial);
  font-size: 22px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(122,80,40,.3);
  border-radius: 3px;
  padding: 14px 16px;
  color: var(--text-ink);
  width: 100%;
  outline: none;
  transition: border-color .2s, background .2s;
}
.text-input:focus{ border-color: var(--crimson); background: #fff; }
.date-input{ max-width: 280px; }
.field-note{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  color: var(--text-ink-2);
  margin: 4px 0 0;
}

/* headcount */
.count-field{
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(122,80,40,.3);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.65);
  margin-bottom: 14px;
}
.count-step{
  width: 56px;
  font-family: var(--f-editorial);
  font-size: 28px;
  color: var(--crimson);
  border-right: 1px solid rgba(122,80,40,.2);
  transition: background .15s;
}
.count-step:hover{ background: rgba(122,42,31,.08); }
.count-field .count-step:last-child{ border-right: 0; border-left: 1px solid rgba(122,80,40,.2); }
.count-input{
  width: 130px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--f-editorial);
  font-size: 32px;
  padding: 8px;
  /* hide spinners */
  -moz-appearance: textfield;
}
.count-input::-webkit-outer-spin-button,
.count-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.count-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  padding: 6px 14px;
  border: 1px solid rgba(122,80,40,.3);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-ink-2);
  background: rgba(255,255,255,.4);
  transition: all .15s;
}
.chip:hover{ border-color: var(--crimson); color: var(--crimson); }
.chip.is-selected{ background: var(--crimson); color: #fbe9c8; border-color: var(--crimson); }

/* contact form */
.contact-form{ display: flex; flex-direction: column; gap: 14px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field-label{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.field .text-input{ font-size: 18px; }

/* funnel actions row */
.funnel-actions{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed rgba(122,80,40,.25);
  gap: 12px;
}
.funnel-back, .funnel-next{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-ink-2);
  background: transparent;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.funnel-back:hover:not(:disabled){ color: var(--crimson); }
.funnel-next{
  background: var(--crimson);
  color: #fbe9c8;
  padding: 12px 22px;
  font-family: var(--f-editorial);
  font-size: 16px;
  letter-spacing: .01em;
  text-transform: none;
}
.funnel-next:hover:not(:disabled){ background: var(--crimson-d); }
.funnel-back:disabled, .funnel-next:disabled{
  opacity: .35; cursor: not-allowed;
}

/* paper CTA */
.cta-paper{
  background: linear-gradient(180deg, #8c3a26, #5a1c10);
  font-family: var(--f-editorial);
  font-size: 18px;
  padding: 14px 24px;
  letter-spacing: .005em;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.25),
    0 8px 22px rgba(74,22,14,.35);
}
.cta-paper:hover{ background: linear-gradient(180deg, #a04a32, #6a2515); }
.cta-paper::before{ display: none; }   /* drop the ember pulse on paper */

/* success state */
.success-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left;
  padding: 6px 2px;
}
.success-mark{
  margin-bottom: 4px;
}
.success-title{
  font-family: var(--f-editorial);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  margin: 0;
  color: var(--text-ink);
}
.success-body{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-ink-2);
  margin: 0;
}
.success-body strong{ color: var(--text-ink); font-weight: 700; }
.success-handoff{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  color: var(--text-ink-2);
  margin: 6px 0 8px;
}
.success-restart{
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  color: var(--paper-edge);
  text-decoration: underline;
  margin-top: 2px;
  align-self: flex-start;
  background: transparent;
  border: 0; padding: 0;
}
.success-restart:hover{ color: var(--crimson); }

/* ============================================================
   THE MENU — typeset newsprint / menu card
   ============================================================ */
.menu-section{
  position: relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255,224,170,.35), transparent 60%),
    linear-gradient(180deg, #f1e5c8 0%, #e6d4ad 100%);
  color: var(--text-ink);
  padding: clamp(80px, 12vh, 120px) var(--gutter) clamp(100px, 14vh, 160px);
}
.menu-inner{ max-width: 1200px; margin: 0 auto; }

.menu-head{ text-align: center; max-width: 720px; margin: 0 auto clamp(50px, 7vh, 80px); }
.menu-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 18px;
}
.menu-eyebrow .ornament{ color: var(--brass-dim); }
.menu-title{
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: clamp(54px, 7.5vw, 96px);
  line-height: .94;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  color: var(--text-ink);
}
.menu-sub{
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-ink-2);
  max-width: 540px;
  margin: 0 auto 10px;
  text-wrap: balance;
}
.menu-change{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  color: var(--paper-edge);
  margin: 0;
}
.menu-rule{
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 32px 0 0;
  color: var(--brass-dim);
}
.menu-rule::before, .menu-rule::after{
  content:""; height: 1px; flex: 0 0 80px; background: currentColor; opacity: .5;
}
.menu-rule .diamond{
  width: 6px; height: 6px; background: currentColor; transform: rotate(45deg);
}

.menu-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 9vh, 96px);
}
@media (min-width: 1000px){
  .menu-grid{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(60px, 8vw, 120px);
    row-gap: clamp(56px, 8vh, 80px);
  }
  /* Proteins block spans full width since it's the centerpiece */
  .menu-block:nth-child(2){
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(60px, 8vw, 120px);
    align-items: start;
  }
  .menu-block:nth-child(2) > .block-head,
  .menu-block:nth-child(2) > .block-note{ grid-column: 1 / -1; }
}

.block-head{ display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.block-title{
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--crimson);
  margin: 0;
}
.block-stroke{
  flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--brass-dim) 0 6px, transparent 6px 10px);
  opacity: .8;
  transform: translateY(-4px);
}
.block-note{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-ink-2);
  margin: 0 0 18px;
  max-width: 580px;
}

.item-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.item{ position: relative; }

.item-row{
  display: flex; align-items: baseline;
  gap: 10px;
  font-family: var(--f-editorial);
  color: var(--text-ink);
}
.item-name-wrap{
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.item-name{
  font-family: var(--f-editorial);
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.15;
}
.item.is-proud .item-name{ color: var(--crimson); }
.item.is-featured{
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(122,42,31,.06), rgba(122,42,31,.02));
  border: 1px solid rgba(122,42,31,.25);
  border-radius: 3px;
}
.item.is-featured .item-name{ color: var(--crimson); }
.smoke-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  background: #1a0e07;
  color: #e6d3a5;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
  transform: translateY(-2px);
}
.smoke-tag.is-proud{ background: var(--crimson); color: #fbe9c8; }
.smoke-tag svg{ color: var(--ember-hot); opacity: .9; }
.smoke-tag.is-proud svg{ color: #ffd9a8; }

.leaders{
  flex: 1;
  height: 0; align-self: flex-end; margin-bottom: 6px;
  border-bottom: 1.5px dotted var(--paper-edge);
  opacity: .7;
  min-width: 30px;
}
.item-price{
  font-family: var(--f-editorial);
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--text-ink);
  white-space: nowrap;
}
.item.is-proud .item-price{ color: var(--crimson); }

.item-desc{
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-ink-2);
  margin: 5px 0 0;
  max-width: 560px;
}

.sides-block{
  margin-top: 30px;
  padding: 22px 24px;
  background: rgba(122,80,40,.07);
  border: 1px dashed rgba(122,80,40,.35);
  border-radius: 3px;
}
.sides-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.sides-title{
  font-family: var(--f-editorial);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-ink);
  margin: 0;
}
.sides-price{
  font-family: var(--f-editorial);
  font-size: 16px;
  color: var(--crimson);
}
.sides-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text-ink-2);
  gap: 6px 0;
}
.sides-list li{
  position: relative;
  padding: 0 16px 0 0;
}
.sides-list li::after{
  content:"·";
  position: absolute; right: 6px; color: var(--paper-edge);
}
.sides-list li:last-child::after{ display: none; }

/* ============================================================
   ON THE STAGE — poster wall on smoke
   ============================================================ */
.stage-section{
  position: relative;
  background: linear-gradient(180deg, #1a0e07 0%, #0c0805 100%);
  color: var(--text-cream);
  padding: clamp(80px, 12vh, 130px) var(--gutter) clamp(100px, 14vh, 160px);
  overflow: hidden;
}
.stage-bg{
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 30%, rgba(122,42,31,.18), transparent 70%);
}
.stage-haze{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
  pointer-events: none;
}
.haze-1{ width: 600px; height: 300px; top: 10%; left: -10%; background: rgba(122,42,31,.5); animation: haze-drift 28s ease-in-out infinite alternate; }
.haze-2{ width: 500px; height: 280px; top: 35%; right: -8%; background: rgba(217,120,67,.25); animation: haze-drift 32s ease-in-out infinite alternate-reverse; }
.haze-3{ width: 400px; height: 200px; bottom: 8%; left: 28%; background: rgba(201,165,103,.18); animation: haze-drift 36s ease-in-out infinite alternate; }
@keyframes haze-drift{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, -22px) scale(1.08); }
}

.stage-inner{ position: relative; max-width: 1200px; margin: 0 auto; }
.stage-head{ text-align: center; max-width: 720px; margin: 0 auto 70px; }
.stage-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ember-hot);
  margin-bottom: 18px;
}
.stage-eyebrow .ornament{ color: var(--brass); }
.stage-title{
  font-family: var(--f-editorial);
  font-size: clamp(46px, 6.5vw, 86px);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0 0 32px;
  color: var(--text-cream);
}
.stage-title em{ font-style: italic; color: var(--ember-hot); }
.stage-body{
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  text-wrap: balance;
}

.poster-wall{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  justify-items: center;
  margin: 0 0 60px;
}
@media (min-width: 800px){
  .poster-wall{
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

.poster{
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, #f4e9ce 0%, #e0cd9a 100%);
  color: var(--text-ink);
  border-radius: 2px;
  transform: rotate(var(--rot, 0deg));
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 1px 0 rgba(0,0,0,.05),
    0 14px 30px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.3);
  transition: transform .3s ease;
}
.poster:hover{ transform: rotate(0deg) translateY(-3px); }
.poster-pin{
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4a35a, #6a4a1a 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,238,180,.4);
}
.poster-crimson{ background: linear-gradient(180deg, #f4e0d0 0%, #d8b89a 100%); }
.poster-walnut { background: linear-gradient(180deg, #e6d4ad 0%, #c8a872 100%); }
.poster-ember  { background: linear-gradient(180deg, #f6e1c4 0%, #d8a576 100%); }

.poster-inner{ position: relative; }
.poster-kind{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--crimson);
  text-align: center;
}
.poster-hr{
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--crimson) 0 4px, transparent 4px 8px);
  opacity: .6;
  margin: 12px 0 18px;
}
.poster-date{
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--f-editorial);
  font-size: 14px;
  color: var(--text-ink-2);
}
.day-name{ font-weight: 700; }
.day-num{ font-size: 22px; color: var(--crimson); }
.poster-headline{
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--text-ink);
  margin: 4px 0 6px;
}
.poster-sub{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-ink-2);
  margin: 0;
}
.poster-foot{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(122,42,31,.35);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-ink-2);
}
.poster-stamp{
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .22em;
  padding: 4px 8px;
  border: 1px solid var(--crimson);
  color: var(--crimson);
  opacity: .55;
  transform: rotate(8deg);
}

.stage-foot{
  text-align: center;
}
.booking-line{
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.email-link{ color: var(--ember-hot); border-bottom: 1px dotted; }
.email-link:hover{ color: #fff5dc; }
.ghost-link{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-editorial);
  font-size: 18px;
  color: var(--brass);
  padding: 10px 0;
  border-bottom: 1px solid currentColor;
}
.ghost-link:hover{ color: var(--ember-hot); }

/* ============================================================
   THE BAR
   ============================================================ */
.bar-section{
  position: relative;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(217,120,67,.12), transparent 70%),
    linear-gradient(180deg, #15100b 0%, #1a0e07 100%);
  color: var(--text-cream);
  padding: clamp(80px, 12vh, 130px) var(--gutter);
}
.bar-inner{
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 56px;
}
@media (min-width: 880px){
  .bar-inner{ grid-template-columns: 5fr 4fr; gap: 80px; align-items: center; }
}
.bar-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ember-hot);
  margin-bottom: 18px;
}
.bar-eyebrow .ornament{ color: var(--brass); }
.bar-title{
  font-family: var(--f-editorial);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.02;
  margin: 0 0 28px;
  color: var(--text-cream);
}
.bar-title em{ font-style: italic; color: var(--ember-hot); }
.bar-body{
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 36px;
  max-width: 480px;
}
.bar-stats{
  display: flex; gap: 36px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px dashed rgba(201,165,103,.3);
}
.bar-stats > div{ display: flex; flex-direction: column; gap: 4px; }
.stat-num{
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  color: var(--brass);
}
.stat-lbl{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
  max-width: 110px;
}

.bar-feature{
  position: relative;
  padding: 36px 32px;
  background: linear-gradient(180deg, #2a1810 0%, #15100b 100%);
  border: 1px solid rgba(201,165,103,.3);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(201,165,103,.15),
    0 30px 60px rgba(0,0,0,.4);
}
.bar-feature::before{
  content:"";
  position: absolute; top: -1px; left: 22px; right: 22px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.feature-label{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.feature-name{ margin-bottom: 18px; }
.feature-name .brand{
  display: block;
  font-family: var(--f-display);
  font-size: 36px;
  line-height: 1;
  color: var(--text-cream);
}
.feature-name .line{
  display: block;
  font-family: var(--f-editorial);
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ember-hot);
  margin-top: 6px;
}
.feature-tasting{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.feature-meta{
  display: flex; gap: 10px; align-items: center;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.feature-meta .dot{ color: var(--brass-dim); }

/* ============================================================
   THE PIT — Jimmy & craft (smoke drifts)
   ============================================================ */
.pit-section{
  position: relative;
  background:
    radial-gradient(50% 50% at 50% 60%, rgba(122,42,31,.18), transparent 75%),
    linear-gradient(180deg, #0c0805 0%, #15100b 100%);
  color: var(--text-cream);
  padding: clamp(100px, 14vh, 160px) var(--gutter);
  overflow: hidden;
}
.pit-bg{ position: absolute; inset: 0; pointer-events: none; }
.pit-smoke{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .4;
}
.pit-smoke-1{ width: 700px; height: 360px; top: -10%; left: 25%; background: rgba(80,55,40,.55); animation: smoke-rise 32s ease-in-out infinite; }
.pit-smoke-2{ width: 520px; height: 280px; top: 25%; left: -8%; background: rgba(122,42,31,.3); animation: smoke-rise 38s ease-in-out infinite reverse; }
.pit-smoke-3{ width: 600px; height: 320px; bottom: -5%; right: -8%; background: rgba(60,40,30,.5); animation: smoke-rise 42s ease-in-out infinite; }
@keyframes smoke-rise{
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { transform: translate(40px,-30px) scale(1.05) rotate(2deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}

.pit-inner{ position: relative; max-width: 980px; margin: 0 auto; }
.pit-content{ text-align: center; }
.pit-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ember-hot);
  margin-bottom: 22px;
}
.pit-eyebrow .ornament{ color: var(--brass); }
.pit-title{
  font-family: var(--f-editorial);
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 1.0;
  letter-spacing: -.012em;
  margin: 0 0 36px;
  color: var(--text-cream);
}
.pit-title em{ font-style: italic; color: var(--ember-hot); }
.pit-body{
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-cream);
  max-width: 620px;
  margin: 0 auto 24px;
  text-wrap: balance;
}
.pit-atmos{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 660px;
  margin: 0 auto 56px;
  text-wrap: balance;
}

.pit-proof{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 0 auto 40px;
}
@media (min-width: 720px){ .pit-proof{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px){ .pit-proof{ grid-template-columns: repeat(6, 1fr); } }
.proof-tile{
  position: relative;
  padding: 22px 16px 18px;
  border: 1px solid rgba(201,165,103,.28);
  background: rgba(122,42,31,.07);
  border-radius: 3px;
  text-align: center;
}
.proof-tile:first-child{
  background: linear-gradient(180deg, rgba(217,120,67,.25), rgba(122,42,31,.15));
  border-color: var(--ember);
}
.proof-num{
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  font-family: var(--f-display);
  color: var(--ember-hot);
}
.proof-big{ font-size: 48px; line-height: 1; }
.proof-unit{ font-size: 16px; color: var(--brass); }
.proof-label{
  margin-top: 6px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pit-tagline{ margin-top: 20px; }
.pit-tagline .hand-line{
  font-family: var(--f-hand);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--brass);
}

/* ============================================================
   FIND US
   ============================================================ */
.findus-section{
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255,224,170,.25), transparent 70%),
    linear-gradient(180deg, #f1e5c8 0%, #e0cd9a 100%);
  color: var(--text-ink);
  padding: clamp(80px, 12vh, 130px) var(--gutter);
}
.findus-inner{ max-width: 1120px; margin: 0 auto; }
.findus-head{ text-align: center; max-width: 720px; margin: 0 auto 56px; }
.findus-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 18px;
}
.findus-eyebrow .ornament{ color: var(--brass-dim); }
.findus-title{
  font-family: var(--f-editorial);
  font-size: clamp(54px, 7vw, 92px);
  line-height: 1.02;
  margin: 0 0 28px;
  color: var(--text-ink);
}
.findus-title em{ font-style: italic; color: var(--crimson); }
.findus-body{
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-ink-2);
  margin: 0;
  text-wrap: balance;
}
.findus-body em{ font-style: italic; color: var(--crimson); font-weight: 600; }

.findus-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 800px){
  .findus-grid{
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 28px;
    align-items: stretch;
  }
}

.findus-card{
  position: relative;
  padding: 30px 28px;
  background: #faf2db;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 36px rgba(45,20,8,.18);
}
.card-label{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 14px;
}
.card-body{
  font-family: var(--f-editorial);
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-ink);
  margin: 0 0 16px;
}
.card-body.big{ font-size: 28px; line-height: 1.25; }
.card-body.big strong{ display: inline-block; font-size: 38px; font-weight: 400; color: var(--crimson); }
.card-sub{
  font-family: var(--f-hand);
  font-size: 20px;
  color: var(--text-ink-2);
  margin: 0;
}
.card-cta{
  font-family: var(--f-editorial);
  font-size: 17px;
  color: var(--crimson);
  border-bottom: 1px solid;
  padding-bottom: 1px;
}
.card-cta:hover{ color: var(--crimson-d); }

.findus-cta-card{
  background: linear-gradient(180deg, #2a1610 0%, #150a07 100%);
  color: var(--text-cream);
  border-color: rgba(217,120,67,.3);
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.findus-cta-card .ember-glow{
  position: absolute; inset: -40% -10% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(217,120,67,.45), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.big-cta-title{
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  color: var(--text-cream);
  margin: 0;
}
.big-cta-body{
  position: relative;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}
.findus-cta-card .cta{ position: relative; align-self: flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: #0c0805;
  color: var(--text-dim);
  padding: clamp(60px, 8vh, 100px) var(--gutter) 30px;
  border-top: 1px solid rgba(201,165,103,.18);
}
.footer-inner{ max-width: 1200px; margin: 0 auto; }
.footer-brand{
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(201,165,103,.15);
}
.footer-mark{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2b1d14, #0c0805 70%);
  border: 1.5px solid var(--brass-dim);
}
.footer-name .top{
  font-family: var(--f-editorial);
  font-size: 22px;
  color: var(--text-cream);
  line-height: 1.1;
}
.footer-name .bottom{
  font-family: var(--f-hand);
  font-size: 18px;
  color: var(--ember-hot);
  margin-top: 4px;
}

.footer-cols{
  display: grid; grid-template-columns: 1fr; gap: 36px;
}
@media (min-width: 720px){
  .footer-cols{ grid-template-columns: 1.6fr 1fr 1fr; gap: 56px; }
}
.footer-col-label{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.footer-emails{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-emails li{ display: flex; flex-direction: column; gap: 2px; }
.ftr-role{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-emails a{
  font-family: var(--f-editorial);
  font-size: 18px;
  color: var(--text-cream);
  border-bottom: 1px dotted rgba(201,165,103,.3);
  padding-bottom: 1px;
  align-self: flex-start;
}
.footer-emails a:hover{ color: var(--ember-hot); border-color: var(--ember-hot); }
.footer-addr{
  font-family: var(--f-editorial);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-cream);
  margin: 0;
}
.ftr-hours{
  display: inline-block;
  margin-top: 8px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
}

.social-row{ display: flex; gap: 10px; margin-bottom: 18px; }
.social{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201,165,103,.3);
  color: var(--text-cream);
  transition: color .2s, border-color .2s, background .2s;
}
.social:hover{ color: var(--ember-hot); border-color: var(--brass); background: rgba(217,120,67,.08); }
.gift-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 15px;
  color: var(--text-dim);
  border-bottom: 1px dotted;
  padding-bottom: 1px;
  align-self: flex-start;
}
.gift-link:hover{ color: var(--ember-hot); }

.footer-bottom{
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(201,165,103,.12);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text-faint);
}
.ftr-tag{ font-family: var(--f-hand); font-size: 16px; color: var(--brass-dim); }