/* ============================================================
   Emigration Brewing Co. — shared stylesheet
   ============================================================ */
:root{
  --bg:#0C0A08; --card:#16120E; --card2:#1E1813;
  --text:#F5EFE6; --body:#C6BCAD; --muted:#9A8F80;
  --accent:#E2591F; --accent-light:rgba(226,89,31,.08); --gold:#D4A24C;
  --border:#2A231C;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:Outfit,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s var(--ease)}
#loader img{width:52px;margin-bottom:20px;opacity:.9}
#loader .bar{width:170px;height:2px;background:var(--border);overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s linear}
#loader .lt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--muted);margin-top:14px;text-transform:uppercase}

/* ---------- ambient background ---------- */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#ambient b{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
#ambient b:nth-child(1){width:46vw;height:46vw;background:rgba(226,89,31,.07);top:-8%;left:-10%;animation:drift1 44s var(--ease) infinite alternate}
#ambient b:nth-child(2){width:38vw;height:38vw;background:rgba(212,162,76,.05);top:40%;right:-12%;animation:drift2 56s var(--ease) infinite alternate}
#ambient b:nth-child(3){width:42vw;height:42vw;background:rgba(226,89,31,.045);bottom:-14%;left:28%;animation:drift3 50s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(16vw,12vh) scale(1.22)}}
@keyframes drift2{to{transform:translate(-14vw,-16vh) scale(1.16)}}
@keyframes drift3{to{transform:translate(10vw,-12vh) scale(1.28)}}
#glow{position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(226,89,31,.07) 0%,transparent 65%);will-change:transform;left:0;top:0}
#noise{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
nav.solid{background:rgba(12,10,8,.93);backdrop-filter:blur(14px);border-bottom-color:var(--border);padding:10px 32px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Libre Baskerville',serif;font-size:14.5px;letter-spacing:.09em;font-weight:700;flex-shrink:0}
.brand img{width:26px;height:auto;flex-shrink:0}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-size:13.5px;font-weight:500;letter-spacing:.03em;color:var(--body);transition:color .4s var(--ease);position:relative}
.navlinks a:hover{color:var(--text)}
.navlinks a[aria-current="page"]{color:var(--accent)}
.navlinks a:not(.nav-cta):after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .4s var(--ease)}
.navlinks a:not(.nav-cta):hover:after{right:0}
.nav-cta{background:var(--accent);color:#fff!important;padding:10px 20px;border-radius:2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nav-cta:after{display:none!important}
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* ============================================================
   MOBILE MENU — rebuilt as a standalone top-level component.
   Two things the previous drawer got wrong:
   1. it lived INSIDE <nav>, which has z-index:100 and therefore its own
      stacking context, so the drawer's z-index:105 was capped at 100 and
      the sibling scrim (104) painted over it and swallowed every click;
   2. it slid in from fully off-screen, so a stalled transition left it
      looking open while sitting outside the viewport, unclickable.
   This version is a sibling of <nav> with its own stacking context, and
   it never travels more than 14px — it can't strand out of reach.
   ============================================================ */
.mnav{position:fixed;inset:0;z-index:900;display:none}
.mnav.is-open{display:block}
.mnav-scrim{position:absolute;inset:0;background:rgba(6,5,4,.66);backdrop-filter:blur(2px);opacity:0;transition:opacity .34s var(--ease)}
.mnav.is-open .mnav-scrim{opacity:1}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);
  background:#0C0A08;border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:78px 30px 36px;
  opacity:0;transform:translateX(14px);
  transition:opacity .3s var(--ease),transform .38s var(--ease)}
.mnav.is-open .mnav-panel{opacity:1;transform:none}
.mnav-close{position:absolute;top:16px;right:18px;width:46px;height:46px;display:grid;place-items:center;
  background:none;border:0;color:var(--text);cursor:pointer;border-radius:2px}
.mnav-close:hover{color:var(--accent)}
.mnav-links{display:flex;flex-direction:column}
.mnav-links a{font-family:'Libre Baskerville',serif;font-size:20px;font-weight:400;color:var(--text);
  padding:15px 0;border-bottom:1px solid rgba(42,35,28,.75);transition:color .3s var(--ease)}
.mnav-links a:hover,.mnav-links a:active{color:var(--accent)}
.mnav-links a[aria-current="page"]{color:var(--accent)}
.mnav-cta{display:flex!important;align-items:center;justify-content:center;gap:9px;
  margin-top:22px;background:var(--accent);color:#fff!important;border:0!important;
  padding:16px 20px!important;border-radius:2px;
  font-family:Outfit,sans-serif!important;font-size:13px!important;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.mnav-cta:hover{background:#f0682c;color:#fff!important}
.mnav-contact{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.mnav-contact a{display:flex;align-items:center;gap:13px;min-height:46px;padding:11px 0;
  font-family:Outfit,sans-serif;font-size:14.5px;font-weight:500;color:var(--body);
  transition:color .3s var(--ease)}
.mnav-contact a:hover,.mnav-contact a:active{color:var(--accent)}
.mnav-contact a svg{color:var(--accent);flex-shrink:0}
.mnav-hours{margin-top:16px;padding-top:16px;border-top:1px solid rgba(42,35,28,.75);
  font-size:12.5px;line-height:1.85;color:var(--muted)}
.mnav-hours b{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-top:10px}
.mnav-hours b:first-child{margin-top:0}
body.mnav-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.mnav-panel,.mnav-scrim{transition:none}}

/* ---------- buttons ---------- */
.btn{padding:13px 28px;border-radius:2px;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;min-height:46px}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:#f0682c}
.btn-s{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}
.btn-over{background:rgba(12,10,8,.7);color:#fff;border:1px solid rgba(245,239,230,.35);backdrop-filter:blur(4px)}
.btn-over:hover{border-color:var(--text);background:rgba(12,10,8,.88)}

/* ---------- scroll hero (home) ---------- */
.hero{height:300vh;position:relative}
.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.heroCanvas{position:absolute;top:0;left:0;display:block;z-index:1}
.hero-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:0 20px}
.hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700;background:rgba(12,10,8,.7);padding:5px 14px;display:inline-block;backdrop-filter:blur(4px);margin-bottom:16px}
.hero h1{font-family:'Libre Baskerville',serif;font-size:clamp(34px,8.5vw,104px);line-height:1.02;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;text-shadow:0 4px 30px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7),0 0 60px rgba(0,0,0,.5)}
.hero .sub{font-size:clamp(13.5px,2vw,18px);font-weight:500;color:#EDE4D8;background:rgba(12,10,8,.7);padding:5px 14px;display:inline-block;backdrop-filter:blur(4px);margin-bottom:6px}
.hero .loc{font-family:'JetBrains Mono',monospace;font-size:clamp(9.5px,1.4vw,11.5px);letter-spacing:.13em;color:#D8CDBE;background:rgba(12,10,8,.7);padding:4px 14px;display:inline-block;backdrop-filter:blur(4px);text-transform:uppercase}
.hero .cta-row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.scroll-hint{margin-top:24px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#D8CDBE;background:rgba(12,10,8,.7);padding:4px 14px;display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(4px)}
.scroll-hint svg{animation:bob 1.9s infinite var(--ease)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- page hero (subpages) ---------- */
.phero{position:relative;min-height:clamp(560px,88svh,940px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:calc(var(--nav-h) + 70px) 24px 70px}
.phero .pbg{position:absolute;inset:0;z-index:0}
.phero .pbg img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.44) saturate(1.05)}
/* canvas is sized in real pixels by the painter — never size it with
   CSS percentages or object-fit, that double-scales and crops badly */
.phero .pbg canvas{display:block;filter:brightness(.5) saturate(1.05)}
.phero .pin{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.phero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700;background:rgba(12,10,8,.7);padding:5px 14px;display:inline-block;backdrop-filter:blur(4px);margin-bottom:16px}
.phero h1{font-family:'Libre Baskerville',serif;font-size:clamp(32px,6.5vw,72px);line-height:1.06;font-weight:700;margin-bottom:12px;text-shadow:0 4px 30px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7)}
.phero p{font-size:clamp(14.5px,1.8vw,17.5px);color:#E4DACB;max-width:56ch;text-shadow:0 2px 14px rgba(0,0,0,.92)}

/* ---------- sections ---------- */
section.pad{padding:110px 32px;position:relative;z-index:3}
section.tight{padding-top:0}
.wrap{max-width:1220px;margin:0 auto}
.narrow{max-width:820px;margin:0 auto}
.label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:11px}
.label:before{content:'';width:26px;height:1px;background:var(--accent);flex-shrink:0}
h2.big{font-family:'Libre Baskerville',serif;font-size:clamp(26px,4.6vw,54px);line-height:1.12;font-weight:700;margin-bottom:20px;letter-spacing:-.01em}
h3.mid{font-family:'Libre Baskerville',serif;font-size:clamp(21px,2.6vw,30px);line-height:1.2;font-weight:700;margin-bottom:14px}
.lede{font-size:clamp(15px,1.6vw,18px);color:var(--body);max-width:64ch;line-height:1.74}
.lede + .lede{margin-top:18px}
.fade-up{opacity:0;transform:translateY(32px)}
.divider{height:1px;background:var(--border);max-width:1220px;margin:0 auto}
.sec-alt{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- generic scroll-scrubbed film section (beer pour) ---------- */
.scrub-sec{height:260vh;position:relative;background:var(--bg)}
.scrub-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-items:center;justify-items:start}
.scrub-sticky canvas{position:absolute;top:0;left:0;display:block;z-index:1}
/* copy sits in the dark left third of the frame, never over the glass */
.scrub-content{position:relative;z-index:3;max-width:min(560px,46vw);padding:0 clamp(20px,5vw,80px)}
.scrub-content .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;background:rgba(12,10,8,.72);padding:5px 13px;display:inline-block;backdrop-filter:blur(4px);margin-bottom:18px}
.scrub-content h2{font-family:'Libre Baskerville',serif;font-size:clamp(26px,3.9vw,50px);line-height:1.12;font-weight:700;margin-bottom:18px;text-shadow:0 4px 30px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.85),0 0 60px rgba(0,0,0,.6)}
.scrub-content p{font-size:clamp(14.5px,1.5vw,17px);line-height:1.7;color:#E7DDCE;text-shadow:0 2px 16px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.9)}
.scrub-content p + p{margin-top:14px}
.scrub-content .cite{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#D8CDBE;background:rgba(12,10,8,.72);padding:4px 13px;display:inline-block;backdrop-filter:blur(4px);margin-top:22px}
@media(max-width:900px){
  .scrub-sec{height:220vh}
  .scrub-sticky{justify-items:center;text-align:center}
  .scrub-content{max-width:92vw}
}

/* ---------- text mask: letters are a window onto the fire ---------- */
.mask-sec{height:260vh;position:relative;background:var(--bg)}
.mask-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.maskCanvas{position:absolute;top:0;left:0;display:block;z-index:1}
.knockout{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;will-change:opacity}
.ko-text{font-family:'Libre Baskerville',serif;font-weight:700;font-size:144px;letter-spacing:.02em;transform-box:fill-box;transform-origin:center;will-change:transform}
.ko-rule{stroke:rgba(245,239,230,.22);stroke-width:1.4}
.mask-sub{position:absolute;bottom:12%;left:0;right:0;text-align:center;opacity:0;z-index:3;padding:0 20px}
.mask-sub p{font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1.5vw,13px);letter-spacing:.3em;text-transform:uppercase;color:#C8BCAA;font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.9)}
@media(max-width:680px){
  .mask-sec{height:210vh}
  .ko-text{font-size:112px}
}

/* ---------- marquee ---------- */
.marquee-band{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0;overflow:hidden;position:relative;z-index:3}
.marquee-track{display:flex;width:max-content}
.marquee-content{display:flex;align-items:center;gap:40px;padding-right:40px;flex-shrink:0}
.marquee-content span{font-family:'Libre Baskerville',serif;font-size:clamp(16px,2.4vw,30px);font-weight:700;color:#4E4034;white-space:nowrap}
.marquee-content span.hl{color:var(--gold)}
.marquee-content i{width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0;display:block}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:52px}
.stat{padding:36px 24px;background:var(--card);border:1px solid var(--border);border-radius:3px;text-align:center;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.stat:hover{border-color:#4a3b2c;transform:translateY(-4px)}
/* Registering --fill as a real <number> makes it animatable by a plain CSS
   transition. GSAP would not tween it reliably here, and this needs no JS
   beyond flipping the value. Unsupported browsers just snap to full. */
/* inherits:true is required — the clip-path and foam live on CHILD elements
   of .odometer, and with inherits:false they would resolve --fill to its
   initial 0 and never fill, even while the parent reads 1. */
@property --fill{syntax:'<number>';inherits:true;initial-value:0}

/* Beer-fill numerals. The gradient lives on the .odometer container and is
   clipped to the text of its descendants, so the liquid line stays put
   while the digit strips roll through it. --fill (0..1) is tweened on
   scroll-in; below the line is amber, right at it a foam band, above it a
   dim "empty glass" tint. */
/* Two stacked copies of the digits: a dim "empty glass" layer and an amber
   layer clipped from the bottom up. background-clip:text was tried first
   but cannot paint through descendants that carry their own transform —
   and every digit strip is translateY'd, so only the suffix ever filled. */
.odometer{
  --fill:0;
  position:relative;height:1.15em;overflow:hidden;
  font-family:'JetBrains Mono',monospace;font-size:clamp(30px,5.4vw,54px);font-weight:700;
  letter-spacing:-.03em;
  transition:--fill 2.1s cubic-bezier(.16,1,.3,1) .12s;
}
.odometer.poured{--fill:1}
.odo-layer{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start}
.odo-empty{color:rgba(212,162,76,.30)}
.odo-full{color:#EFAE49;clip-path:inset(calc(100% - var(--fill) * 100%) 0 0 0)}
/* foam line riding the surface of the pour */
/* Peaks mid-pour and fades to nothing once the glass is full, so no
   permanent rule is left sitting above short numbers like "4". */
.odo-foam{position:absolute;left:14%;right:14%;height:2px;pointer-events:none;
  bottom:calc(var(--fill) * 100% - 1px);
  background:linear-gradient(90deg,transparent,rgba(255,248,233,.9) 22%,rgba(255,255,255,.95) 50%,rgba(255,248,233,.9) 78%,transparent);
  opacity:calc(var(--fill) * (1 - var(--fill)) * 3.4);filter:blur(.3px)}
.odometer .stat-suffix{color:inherit}
@media(prefers-reduced-motion:reduce){.odometer{transition:none}}
.odo-digit{display:inline-block;overflow:hidden;height:1.15em;position:relative}
.odo-strip{display:flex;flex-direction:column;transition:transform 1.6s var(--ease)}
.odo-strip span{display:block;height:1.15em;line-height:1.15}
.odo-sep{display:inline-block;height:1.15em;line-height:1.15}
.stat-suffix{font-family:'JetBrains Mono',monospace;font-size:clamp(22px,3.6vw,38px);font-weight:700;color:var(--gold)}
.stat-label{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ---------- spotlight cards ---------- */
.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:16px;margin-top:48px}
.spot-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:3px;padding:0;overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease);will-change:transform;display:flex;flex-direction:column}
.spot-card:before{content:'';position:absolute;inset:-1px;background:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),rgba(226,89,31,.13),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:3}
.spot-card:hover:before{opacity:1}
.spot-card:hover{border-color:#4a3b2c}
/* photo header — real plates and rooms rather than a generic glyph */
.spot-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0F0C09;flex-shrink:0}
.spot-media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.84) saturate(1.05);transition:transform .8s var(--ease),filter .8s var(--ease)}
.spot-card:hover .spot-media img{transform:scale(1.07);filter:brightness(1.02) saturate(1.12)}
.spot-media .tagpill{position:absolute;top:12px;left:12px;z-index:2;background:rgba(12,10,8,.82);backdrop-filter:blur(5px);border:1px solid var(--border);padding:5px 11px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.spot-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.spot-card h3{font-family:'Libre Baskerville',serif;font-size:19.5px;font-weight:700;margin-bottom:9px}
.spot-card p{font-size:14.5px;color:var(--body);line-height:1.6;margin-bottom:16px}
.spot-card .price{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;font-weight:700;margin-top:auto}
@media(max-width:680px){
  .spot-media{aspect-ratio:16/9}
  .spot-body{padding:20px 20px 24px}
}

/* ---------- accordion gallery ---------- */
.acc{display:flex;gap:6px;height:520px;margin-top:48px;border-radius:3px;overflow:hidden}
.acc-panel{flex:1;position:relative;overflow:hidden;cursor:pointer;transition:flex .65s var(--ease);background:var(--card)}
.acc-panel:hover,.acc-panel.active{flex:4.4}
.acc-panel img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05);transition:filter .65s var(--ease),transform .65s var(--ease)}
.acc-panel:hover img,.acc-panel.active img{filter:brightness(.86) saturate(1.1);transform:scale(1.04)}
.acc-panel .vlabel{position:absolute;bottom:26px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:opacity .4s var(--ease);text-shadow:0 2px 12px rgba(0,0,0,.9);font-weight:600}
.acc-panel:hover .vlabel,.acc-panel.active .vlabel{opacity:0}
.acc-body{position:absolute;left:0;right:0;bottom:0;padding:30px 28px;opacity:0;transform:translateY(14px);transition:all .5s var(--ease) .12s}
.acc-panel:hover .acc-body,.acc-panel.active .acc-body{opacity:1;transform:translateY(0)}
.acc-body h3{font-family:'Libre Baskerville',serif;font-size:24px;font-weight:700;margin-bottom:7px;text-shadow:0 2px 16px rgba(0,0,0,.95);white-space:nowrap}
.acc-body p{font-size:13.5px;color:#E4DACB;max-width:38ch;text-shadow:0 2px 12px rgba(0,0,0,.95);line-height:1.55}
.acc-body .pr{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gold);font-weight:700;margin-top:9px;text-shadow:0 2px 12px rgba(0,0,0,.95)}

/* ---------- photo grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:44px}
.pcell{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--card)}
.pcell.tall{aspect-ratio:3/4}
.pcell.wide{grid-column:span 2;aspect-ratio:16/9}
.pcell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .7s var(--ease);filter:brightness(.82)}
.pcell:hover img{transform:scale(1.06);filter:brightness(1)}
.pcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.95);opacity:0;transform:translateY(10px);transition:all .5s var(--ease)}
.pcell:hover figcaption{opacity:1;transform:translateY(0)}

/* ---------- menu list ---------- */
/* Two predictable columns. CSS multi-column was tried first but its
   balancer handles tall unbreakable blocks badly — it stranded a whole
   empty column on the brunch panel. Grid keeps placement deterministic. */
.menu-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 56px;align-items:start;margin-top:48px}
.menu-cat{min-width:0}
.menu-cat h3{font-family:'Libre Baskerville',serif;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:20px;font-weight:700}
.mi{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(42,35,28,.55)}
.mi:last-child{border-bottom:0}
.mi-n{font-size:15.5px;font-weight:600;color:var(--text)}
.mi-n em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:9.5px;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(212,162,76,.45);padding:1px 5px;margin-left:8px;vertical-align:middle;border-radius:2px}
.mi-d{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.mi-p{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--gold);flex-shrink:0;white-space:nowrap}
.menu-note{margin-top:44px;padding:22px 24px;background:var(--card2);border:1px solid var(--border);border-radius:3px;font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- menu tabs ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:40px;border-bottom:1px solid var(--border)}
.tab{padding:14px 24px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border:0;background:none;cursor:pointer;font-weight:700;border-bottom:2px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease);min-height:48px}
.tab:hover{color:var(--body)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabpanel{display:none}
.tabpanel.on{display:block;animation:tabin .5s var(--ease)}
@keyframes tabin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.season-tag{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,162,76,.35);padding:5px 12px;border-radius:99px;font-weight:700;margin-bottom:22px}
@media(max-width:680px){
  .tabs{gap:0}
  .tab{flex:1 1 44%;padding:13px 8px;font-size:10.5px;letter-spacing:.1em}
}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev .split-img{order:-1}
.split-img{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/5}
.split-img.wide{aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img .badge{position:absolute;top:18px;left:18px;background:rgba(12,10,8,.86);backdrop-filter:blur(6px);border:1px solid var(--border);padding:8px 15px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}

/* ---------- forms (audit §4.4 no inquiry form, §6.11 no email capture) ---------- */
.formwrap{background:var(--card);border:1px solid var(--border);border-radius:3px;padding:34px 30px;margin-top:36px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;margin-bottom:16px}
.fld label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:7px}
.fld input,.fld select,.fld textarea{background:var(--bg);border:1px solid var(--border);border-radius:2px;
  color:var(--text);font-family:Outfit,sans-serif;font-size:15px;padding:13px 14px;min-height:48px;
  transition:border-color .3s var(--ease)}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld input::placeholder,.fld textarea::placeholder{color:#6E6355}
.fhint{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.signup input{flex:1 1 220px;background:rgba(12,10,8,.6);border:1px solid var(--border);border-radius:2px;
  color:var(--text);font-family:Outfit,sans-serif;font-size:15px;padding:13px 14px;min-height:48px}
.signup input:focus{outline:none;border-color:var(--accent)}
.signup button{flex:0 0 auto}
@media(max-width:680px){.frow{grid-template-columns:1fr;gap:0}.formwrap{padding:26px 20px}}

/* ---------- capacity cards ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px}
.cap{background:var(--card2);border:1px solid var(--border);border-radius:3px;padding:24px 20px}
.cap .n{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:700;color:var(--gold);line-height:1}
.cap .l{font-size:13px;color:var(--body);margin-top:8px;font-weight:500}
.cap .s{font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---------- Holladay teaser ---------- */
.teaser{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--card);padding:78px 32px;z-index:3}
.teaser .tin{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.teaser .tag{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,162,76,.4);padding:6px 13px;border-radius:99px;margin-bottom:18px;font-weight:700}
.teaser .tag i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:block;animation:pulse 2.2s infinite var(--ease)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.teaser h2{font-family:'Libre Baskerville',serif;font-size:clamp(24px,3.6vw,42px);line-height:1.14;font-weight:700;margin-bottom:14px}
.teaser p{color:var(--body);font-size:15.5px;max-width:52ch;line-height:1.7}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;margin-top:48px}
.hours-tbl{width:100%;border-collapse:collapse}
.hours-tbl th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:16px 0 9px;border-bottom:1px solid var(--border);font-weight:700}
.hours-tbl td{padding:12px 0;border-bottom:1px solid rgba(42,35,28,.55);font-size:14.5px;color:var(--body)}
.hours-tbl td:last-child{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--text);white-space:nowrap}
.cx{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-bottom:1px solid rgba(42,35,28,.55);min-height:44px}
.cx svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.cx .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.cx .v{font-size:15.5px;font-weight:500;color:var(--text);transition:color .4s var(--ease)}
a.cx:hover .v{color:var(--accent)}
.mapwrap{margin-top:44px;border:1px solid var(--border);border-radius:3px;overflow:hidden;aspect-ratio:21/9;background:var(--card)}
.mapwrap iframe{width:100%;height:100%;border:0;filter:grayscale(.35) invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9)}

/* ---------- final cta ---------- */
.finalcta{position:relative;padding:120px 32px;text-align:center;overflow:hidden;border-top:1px solid var(--border);z-index:3}
.finalcta .bgimg{position:absolute;inset:0;z-index:0}
.finalcta .bgimg img{width:100%;height:100%;object-fit:cover;filter:brightness(.3) saturate(1.1)}
.finalcta .inner{position:relative;z-index:2}
.finalcta h2{font-family:'Libre Baskerville',serif;font-size:clamp(28px,5.4vw,62px);line-height:1.1;font-weight:700;margin-bottom:18px;text-shadow:0 4px 30px rgba(0,0,0,.9)}
.finalcta p{color:#E4DACB;font-size:16.5px;max-width:52ch;margin:0 auto 30px;text-shadow:0 2px 14px rgba(0,0,0,.9)}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--border);padding:56px 32px 32px;position:relative;z-index:3}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;max-width:1220px;margin:0 auto 38px}
.foot-grid h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:700}
.foot-grid a,.foot-grid p{display:block;font-size:14px;color:var(--body);margin-bottom:10px;transition:color .4s var(--ease)}
.foot-grid a:hover{color:var(--accent)}
.foot-bot{max-width:1220px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border:1px solid var(--border);display:grid;place-items:center;color:var(--body);transition:border-color .4s var(--ease),color .4s var(--ease)}
.socials a:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .split,.contact-grid{grid-template-columns:1fr;gap:36px}
  .split.rev .split-img{order:0}
  .split-img{aspect-ratio:16/10;max-height:460px}
  .pcell.wide{grid-column:span 1;aspect-ratio:4/3}
}
@media(max-width:900px){
  /* desktop links are simply not present on mobile — the .mnav component
     owns the mobile experience outright, no shared element, no overrides */
  .navlinks{display:none}
  .burger{display:flex}
  .acc{height:auto;flex-direction:column;gap:8px}
  .acc-panel{height:190px;flex:none!important}
  .acc-panel.active{height:300px}
  .acc-panel img{filter:brightness(.78) saturate(1.05)}
  .acc-panel .vlabel{writing-mode:horizontal-tb;transform:translateX(-50%);bottom:18px;opacity:1}
  .acc-panel.active .vlabel{opacity:0}
  .acc-body{opacity:1;transform:none;background:linear-gradient(to top,rgba(12,10,8,.92),transparent);padding-top:60px}
  .acc-panel:not(.active) .acc-body{opacity:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  nav{padding:12px 18px}
  nav.solid{padding:9px 18px}
  .brand{font-size:12px;letter-spacing:.06em;gap:9px}
  .brand img{width:22px}
  section.pad{padding:70px 18px}
  .teaser{padding:56px 18px}
  .finalcta{padding:84px 18px}
  footer{padding:44px 18px 26px}
  .menu-cols{grid-template-columns:1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .stats-grid,.cap-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:24px 14px}
  .stat-label{font-size:12px}
  .spot-grid,.pgrid{grid-template-columns:1fr}
  .mi{gap:12px}
  .mi-n{font-size:15px}
  .mapwrap{aspect-ratio:4/3}
  .hero .cta-row{width:100%;flex-direction:column;align-items:stretch;padding:0 8px}
  .hero .cta-row .btn{justify-content:center;width:100%}
  #glow{display:none}
  #ambient b{filter:blur(60px)}
  .teaser .tin{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(hover:none){
  #glow{display:none}
  .spot-card:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #ambient b{animation:none}
}