/* ============================================================
   BLACK SWAN PUB, SHAWNIGAN LAKE
   Brand tokens lifted from the existing logo and printed menu.
   Accent: #09719E (sampled from the logo oval). Locked page-wide.
   Radius rule: buttons + chips = pill (echoes the logo oval),
                cards + media = 14px, nothing else.
   Theme: dark, locked. No section inverts.
   ============================================================ */

:root{
  --ink:      #0B1015;
  --ink-2:    #101820;
  --surface:  #16202A;
  --surface-2:#1C2833;
  --line:     rgba(239,242,241,.13);
  --line-hi:  rgba(239,242,241,.26);

  --brand:    #09719E;   /* exact logo blue */
  --brand-lift:#39A8D6;  /* AA-safe on dark for text */
  --brand-deep:#064C6B;

  --cream:    #EFF2F1;   /* exact logo off-white */
  --muted:    #A2B3BF;
  --muted-2:  #7D8F9C;
  --alert:    #FF6B6B;   /* what is on tonight, red so it reads off the table */

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
  --r: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--brand); color:#fff; }

h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--brand-lift); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- type scale ---------- */
.display{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.006em;
  line-height:.94;
}
.h-xl{ font-size:clamp(2.5rem, 6.6vw, 5.4rem); }
.h-lg{ font-size:clamp(2.1rem, 5.2vw, 4.1rem); }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); }
.ui{
  font-family:'Oswald',Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
}
.script{
  font-family:'Yellowtail',cursive;
  text-transform:none;
  letter-spacing:0;
  color:var(--brand-lift);
  font-size:clamp(1.3rem,2.5vw,2rem);
  line-height:1.15;
  padding-bottom:.18em; /* descender clearance for y, g, j, p, q */
}
.lede{ color:var(--muted); font-size:clamp(1rem,1.25vw,1.13rem); }
.measure{ max-width:56ch; }

/* ============ 1. PRELOADER ============ */
#loader{
  position:fixed; inset:0; z-index:120;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; padding:24px;
  transition:opacity .55s var(--ease), visibility .55s;
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
#loader[hidden]{ display:none !important; }
/* set by the inline head script on any load that must not show the intro */
html[data-nointro] #loader{ display:none !important; }
#loader .lg{
  width:min(340px,74vw); height:auto;
  opacity:0; transform:translateY(14px) scale(.965);
  animation:lgIn .9s var(--ease) .05s forwards;
}
@keyframes lgIn{ to{ opacity:1; transform:none; } }
.bar{
  width:min(320px,68vw); height:3px; border-radius:999px;
  background:rgba(239,242,241,.13); overflow:hidden;
}
.bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand-lift));
  border-radius:999px;
  transition:width .28s linear;
}
.loadtag{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.34em; font-size:10.5px; color:var(--muted-2);
  opacity:0; animation:lgIn .8s var(--ease) .45s forwards;
}

/* ============ 2. TARGET CURSOR ============ */
.cur{ position:fixed; top:0; left:0; z-index:1100; pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0); }
.cur-dot{
  width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--brand-lift);
}
.cur-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1.5px solid rgba(57,168,214,.72);
  transition:width .28s var(--ease), height .28s var(--ease),
             margin .28s var(--ease), background-color .28s var(--ease),
             border-color .28s var(--ease);
}
.cur-ring.hot{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  background:rgba(57,168,214,.14); border-color:rgba(57,168,214,1);
}
@media (hover:hover) and (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button,
  body.cursor-on [role="button"]{ cursor:none; }
  body.cursor-on .cur{ opacity:1; }
}

/* ============ 3. NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:72px;
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(11,16,21,.92), rgba(11,16,21,0));
  transition:background .35s ease, border-color .35s ease, height .35s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:64px;
  background:rgba(11,16,21,.9);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:22px; }
.brandlink{ flex:0 0 auto; display:block; opacity:0; transform:translateY(-5px);
  transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.nav.stuck .brandlink{ opacity:1; transform:none; pointer-events:auto; }
.brandlink img{ height:40px; width:auto; transition:height .35s ease; }
.nav.stuck .brandlink img{ height:34px; }

.navlinks{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.navlinks a{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.11em; font-size:12.5px; font-weight:500;
  color:var(--cream); position:relative; padding:6px 0; white-space:nowrap;
}
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--brand-lift); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlinks a:hover::after{ transform:scaleX(1); }

.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  white-space:nowrap;
}
.status b{ color:var(--cream); font-weight:500; }
.status i{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex:0 0 auto; }
.status.open i{ background:#4BD07E; box-shadow:0 0 0 4px rgba(75,208,126,.16); }
.status.shut i{ background:#E2685C; box-shadow:0 0 0 4px rgba(226,104,92,.14); }

/* buttons: pill, echoing the logo oval */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.11em; font-weight:600; font-size:13px;
  padding:14px 26px; border-radius:999px; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s ease,
             color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 10px 30px -14px rgba(9,113,158,.9); }
@media (hover:hover){ .btn-primary:hover{ background:#0A82B5; transform:translateY(-2px); } }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ border:1.5px solid var(--line-hi); color:var(--cream); }
@media (hover:hover){ .btn-ghost:hover{ border-color:var(--brand-lift); color:var(--brand-lift); transform:translateY(-2px); } }
.btn-ghost:active{ transform:translateY(0) scale(.98); }
.btn-sm{ padding:10px 20px; font-size:12px; }

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border-radius:999px; border:1px solid var(--line);
}
.burger span{
  display:block; width:18px; height:1.6px; background:var(--cream); border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s ease;
}
.burger.on span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* --- mobile drawer, Mobile-Optimization.md Part D ---
   A right side panel that lives directly under <body> (Rule 10), so the header's
   backdrop-filter can never become its containing block. Tokens per 0b:
   --nav-bg brand-deep (white text 9.3:1), --nav-accent brand-lift (black CTA text 7.8:1). */
:root{
  --nav-bg:var(--brand-deep);
  --nav-accent:var(--brand-lift);
  --nav-fg:#ffffff;
  --nav-rule:rgba(255,255,255,.12);
  --nav-cta-fg:#111111;
  --nav-scrim:rgba(11,16,21,.55);
}
.nav-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:var(--nav-scrim);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.show{ opacity:1; visibility:visible; }
.sheet{
  position:fixed; top:0; right:0; bottom:0; left:auto; z-index:1001;
  width:min(86vw,360px);
  background:var(--nav-bg);
  font-family:'Roboto',sans-serif; line-height:1.65;
  display:block; margin:0; gap:0;
  padding:102px 24px 40px;          /* 72px header + 30px, Part D section 1 */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
  transform:translateX(110%); visibility:hidden;
  transition:transform .35s ease, visibility .35s;
}
.sheet.on{ transform:none; visibility:visible; }
.sheet nav{ display:block; }
.sheet nav > a{
  display:block; width:100%; margin:0;
  padding:16px 2px; text-align:left;
  font-size:1.05rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--nav-fg);
  border-bottom:1px solid var(--nav-rule);
}
/* Rule 15: last, full width, label copied from the header CTA */
.sheet .sheet-call{
  display:block; width:100%; margin-top:28px;
  padding:16px 20px; text-align:center;
  font-size:1rem; font-weight:700;
  border-radius:4px; background:var(--nav-accent); color:var(--nav-cta-fg);
}
body.nav-open{ overflow:hidden; }
/* Rule 11: the header rises over the drawer so the burger stays put as the X.
   Its bar goes clear and everything but the burger hides. The blur is dropped only
   while open: the drawer is not inside the header, and the page cannot scroll then. */
body.nav-open .nav{
  z-index:1002; background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.nav-open .nav .brandlink,
body.nav-open .nav .wrap > .btn{ opacity:0; pointer-events:none; }

/* ============ 4. HERO ============ */
.hero{
  position:relative; min-height:100dvh;
  display:flex; align-items:flex-end;
  padding:120px 0 clamp(48px,7vw,86px);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:-8% 0 -8% 0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  opacity:0; transform:scale(1.1);
  transition:opacity 1.5s ease, transform 2.6s var(--ease);
  will-change:transform;
}
.hero-bg img.in{ opacity:1; transform:scale(1.02); }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,16,21,.86) 0%, rgba(11,16,21,.36) 34%, rgba(11,16,21,.9) 82%, var(--ink) 100%),
    linear-gradient(100deg, rgba(11,16,21,.92) 0%, rgba(11,16,21,.5) 46%, rgba(11,16,21,.1) 78%);
}
.hero .wrap{ position:relative; z-index:2; }
/* the old painted sign, kept: their own lockup opens the page */
.hero-mark{ margin-bottom:clamp(20px,3.2vw,34px); }
.hero-mark img{
  display:block; width:clamp(184px,25vw,318px); height:auto;
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.6));
}
/* Lora, the serif the old site set its headings in, kept for the hero only */
.hero h1{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-weight:700; text-transform:none;
  letter-spacing:-.014em; line-height:1.02;
  font-size:clamp(2.35rem, 5.6vw, 4.6rem);
  max-width:15ch; margin-bottom:22px;
  text-shadow:0 2px 30px rgba(11,16,21,.6);
}
.hero h1 .em{ color:var(--brand-lift); font-style:italic; }
.hero p{ max-width:44ch; margin-bottom:34px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* word-by-word rise for display headings */
.rise span.m{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; }
.rise span.w{
  display:inline-block;
  transform:translateY(105%); opacity:0;
  transition:transform .95s var(--ease), opacity .7s ease;
  transition-delay:var(--d,0ms);
}
.rise.in span.w{ transform:none; opacity:1; }
/* Lora italic hangs further below the baseline and past the right edge than Anton,
   so the hero masks get extra room, pulled back with negative margins so the lines do not move */
/* Lora's descenders and its italic g overhang the mask, so the mask gets
   padding and the line pulls it back. Applies wherever Lora is the heading. */
.hero h1.rise span.m{ padding:0 .1em .26em 0; margin:0 -.1em -.2em 0; }

/* ============ 5. TODAY STRIP ============ */
.today{ background:var(--ink-2); border-block:1px solid var(--line); }
.today .wrap{
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:0;
  padding-block:0;
}
.today-cell{ padding:30px 26px 30px 0; }
.today-cell + .today-cell{ padding-left:26px; border-left:1px solid var(--line); }
.today-cell h3{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-size:10.5px; color:var(--muted-2); margin-bottom:9px;
}
.today-cell p{ font-family:'Oswald',sans-serif; font-size:clamp(1rem,1.5vw,1.22rem); font-weight:500; line-height:1.3; }
.today-cell p .amt{ color:var(--brand-lift); }
.today-cell p a{ color:var(--cream); transition:color .25s ease; }
.today-cell p a:hover{ color:var(--brand-lift); }
.today-cell small{ display:block; color:var(--muted); font-size:13px; margin-top:5px; font-family:'Roboto',sans-serif; letter-spacing:0; text-transform:none; }

/* ============ 6. MARQUEE ============ */
.marquee{
  overflow:hidden; padding:20px 0;
  background:var(--brand);
  border-block:1px solid rgba(0,0,0,.22);
}
.marquee-track{ display:flex; width:max-content; animation:slide 90s linear infinite; }
@media (hover:hover){ .marquee:hover .marquee-track{ animation-play-state:paused; } }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }
.marquee span{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:.02em; color:#fff;
  padding:0 26px; white-space:nowrap; display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{ content:"◆"; font-size:.5em; color:rgba(255,255,255,.55); }

/* ============ generic section ============ */
section{ position:relative; }
.pad{ padding-block:clamp(72px,10vw,140px); }
/* the one section with no top padding lands under the fixed header without this (Mobile B.2.7) */
#visit{ scroll-margin-top:calc(72px + 20px); }
.sec-head{ margin-bottom:clamp(34px,5vw,58px); }
.sec-head .script{ display:block; margin-bottom:6px; }
.sec-head p{ margin-top:18px; }

/* reveal */
[data-rv]{ opacity:0; transform:translateY(26px); }
[data-rv].in{
  opacity:1; transform:none;
  transition:opacity .85s ease var(--d,0ms), transform .95s var(--ease) var(--d,0ms);
}
/* photos fade only, never wipe or curtain */
.ph{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface); isolation:isolate; }
.ph img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .95s ease, transform 1.2s var(--ease);
}
.ph img.in{ opacity:1; }
/* a canvas tooth over every photo so the stock shots sit beside the
   hand painted murals instead of fighting them. Static, no animation. */
.ph::before, .door-img::before, .hero-bg::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.085; mix-blend-mode:soft-light;
}
.ph img, .door-img img, .hero-bg img{ filter:saturate(1.07) contrast(1.045); }
.ph.lift img{ transition:opacity .95s ease, transform 1.1s var(--ease); }
@media (hover:hover){ .ph.lift:hover img.in{ transform:scale(1.055); } }

/* ============ 7. STORY / WELCOME ============ */
.story{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
.story-media{ position:relative; }
.story-media .ph.a{ aspect-ratio:5/4; }
.story-media .ph.b{
  position:absolute; right:-5%; bottom:-14%; width:46%; aspect-ratio:4/3;
  border:6px solid var(--ink); border-radius:var(--r);
}
.est{
  position:absolute; left:-4%; top:-5%;
  background:var(--brand); color:#fff; border-radius:999px;
  width:clamp(94px,11vw,128px); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 22px 50px -20px rgba(9,113,158,.85);
}
.est b{ font-family:'Anton',sans-serif; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1; }
.est span{ font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; margin-top:3px; opacity:.9; }
.story h2{ margin-bottom:20px; }
.story p + p{ margin-top:16px; }
.story .sig{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:28px;
}
.story .sig div b{ display:block; font-family:'Anton',sans-serif; font-size:1.5rem; line-height:1; color:var(--brand-lift); }
.story .sig div span{ font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); }

/* ============ 8. THREE DOORS (bento, 3 cells) ============ */
.doors{ display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr auto; gap:16px; }
.door{
  position:relative; overflow:hidden; border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px,3vw,40px); min-height:272px;
  transition:transform .5s var(--ease);
}
@media (hover:hover){ .door:hover{ transform:translateY(-5px); } }
.door.big{ grid-row:span 2; min-height:440px; }
.door > .door-img{ position:absolute; inset:0; z-index:0; }
.door-img img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease, transform 1.1s var(--ease); }
.door-img img.in{ opacity:1; }
@media (hover:hover){ .door:hover .door-img img.in{ transform:scale(1.06); } }
.door::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,16,21,.16) 0%, rgba(11,16,21,.58) 38%, rgba(11,16,21,.9) 72%, rgba(11,16,21,.97) 100%),
    linear-gradient(90deg, rgba(11,16,21,.62) 0%, rgba(11,16,21,.1) 62%);
}
.door > *{ position:relative; z-index:2; }
.door.solid{ background:var(--brand); min-height:0; justify-content:flex-start; padding:clamp(22px,2.4vw,30px); }
.door.solid::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.22) 100%); }
.door h3{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:.98; }
.door p{ color:var(--muted); margin-top:9px; font-size:14.5px; max-width:38ch; }
.door.solid p{ color:rgba(255,255,255,.9); }
.door .go{
  margin-top:18px; display:inline-flex; align-items:center; gap:9px;
  font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-lift);
}
.door.solid .go{ color:#fff; }
.door .go svg{ transition:transform .35s var(--ease); }
@media (hover:hover){ .door:hover .go svg{ transform:translateX(5px); } }

/* ============ 9. SPECIALS (day tabs) ============ */
.specials{ background:var(--ink-2); }
.daybar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vw,48px); }
.day{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(1.05rem,1.9vw,1.45rem); line-height:1;
  padding:14px 26px 13px; border-radius:999px;
  border:1px solid var(--line-hi); color:var(--muted);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){ .day:hover{ border-color:var(--brand-lift); color:var(--cream); transform:translateY(-2px); } }
.day[aria-selected="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 12px 30px -16px rgba(9,113,158,1);
}
.day .tdy{
  font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:.2em;
  font-weight:600; opacity:.9; margin-left:9px; vertical-align:2px;
}
.panel-body .script{ display:block; margin-bottom:2px; }

.panel{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.panel .ph{ aspect-ratio:16/11; }
.panel-body{ min-height:1px; }
.panel-body h3{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1; margin-bottom:16px; }
.panel-body .price{
  display:inline-block; margin-top:22px; text-transform:uppercase;
  font-family:'Anton',sans-serif; font-size:clamp(1.6rem,2.6vw,2.2rem);
  color:var(--brand-lift); line-height:1;
}
.panel-body .price small{ font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:5px; }
.drinks{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); max-width:34rem; }
.drinks h4{ font-family:'Anton',Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.5rem,2.5vw,2.05rem); line-height:1; color:var(--cream); margin-bottom:18px; }
.drinks ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.drinks li{ display:flex; align-items:baseline; align-items:last baseline; gap:12px; font-family:'Roboto',sans-serif; font-size:clamp(.95rem,1.3vw,1.05rem); line-height:1.35; color:var(--cream); }
.drinks li b{ font-weight:500; min-width:0; }
.drinks li i{ flex:1 1 auto; min-width:12px; border-bottom:1px dotted var(--line-hi); transform:translateY(-4px); }
.drinks li em{ font-style:normal; font-family:'Oswald',sans-serif; font-weight:600; color:var(--brand-lift); white-space:nowrap; }
.fade-swap{ animation:fadeSwap .5s var(--ease); }
@keyframes fadeSwap{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ============ 10. HAPPY HOUR BAND ============ */
.happy{ position:relative; overflow:hidden; }
.happy-bg{ position:absolute; inset:0; z-index:0; }
.happy-bg img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.happy-bg img.in{ opacity:.34; }
.happy::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,var(--ink) 0%, rgba(11,16,21,.68) 40%, rgba(11,16,21,.72) 60%, var(--ink) 100%);
}
.happy .wrap{ position:relative; z-index:2; text-align:center; }
.happy h2{ margin-bottom:14px; }
.happy .time{
  font-family:'Anton',sans-serif; color:var(--brand-lift);
  font-size:clamp(2.4rem,6.6vw,5.2rem); line-height:1; margin-bottom:8px;
}
.happy .sub{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.15rem); }
.happy .appys{
  margin-top:38px; display:inline-flex; align-items:center; gap:clamp(18px,3vw,44px);
  flex-wrap:wrap; justify-content:center;
  border:1px solid var(--line); border-radius:999px;
  padding:16px clamp(22px,3vw,40px); background:rgba(22,32,42,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.happy .appys b{ font-family:'Anton',sans-serif; font-size:clamp(1.3rem,2.2vw,1.9rem); color:var(--cream); line-height:1; }
.happy .appys span{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--muted); }

/* ============ 11. MENU GRID ============ */
.menu-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dishes{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.dish{ grid-column:span 2; }
.dish:nth-child(1){ grid-column:span 3; }
.dish:nth-child(2){ grid-column:span 3; }
.dish .ph{ aspect-ratio:4/3; margin-bottom:16px; }
.dish:nth-child(1) .ph, .dish:nth-child(2) .ph{ aspect-ratio:16/9; }
.dish .row{ display:flex; align-items:baseline; gap:14px; }
.dish h3{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600;
  letter-spacing:.045em; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.15;
}
.dish .dots{ flex:1 1 auto; border-bottom:1px dotted var(--line-hi); transform:translateY(-4px); min-width:16px; }
.dish .p{ font-family:'Anton',sans-serif; color:var(--brand-lift); font-size:1.15rem; line-height:1; }
.dish p.d{ color:var(--muted); font-size:14px; margin-top:7px; max-width:48ch; }
.dish.wide{
  display:grid; grid-column:span 6; grid-template-columns:1.05fr 1fr;
  column-gap:clamp(22px,3.5vw,52px); align-items:center; margin-top:8px;
}
.dish.wide .ph{ grid-row:1 / span 2; margin-bottom:0; aspect-ratio:16/9; }
.dish.wide h3{ font-family:'Anton',sans-serif; letter-spacing:.012em; font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1; }
.dish.wide .dots{ display:none; }
.dish.wide .row{ gap:18px; align-items:baseline; }
.dish.wide .p{ font-size:1.4rem; }
.dish.wide .row{ align-self:flex-end; }
.dish.wide p.d{ align-self:flex-start; max-width:44ch; }
.dish .wing-vig::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 88% at 50% 46%, rgba(11,16,21,0) 34%, rgba(11,16,21,.55) 66%, var(--ink) 100%);
}

/* ============ 12. HOURS ============ */
.hours{ background:var(--ink-2); }
/* one row per day, the three counters lined up across it */
.htable{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.htr{ display:grid; grid-template-columns:1.05fr 1.5fr 1.15fr 1.15fr; align-items:center; }
.htr + .htr{ border-top:1px solid var(--line); }
.hthead{ background:var(--ink-2); }
.hth{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.25rem); line-height:1;
  padding:16px clamp(14px,1.6vw,22px); color:var(--cream);
}
.hth:first-child{ color:var(--brand-lift); }
.htd{ padding:16px clamp(14px,1.6vw,22px); color:var(--muted); font-size:14.5px; }
.htd b{ color:var(--cream); font-weight:400; display:block; }
.htd em{ font-style:normal; color:var(--muted-2); font-size:12.5px; display:block; margin-top:3px; }
.htd.dy{
  font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1; color:var(--cream);
}
.htr{ position:relative; }
.htr.now{ background:rgba(9,113,158,.14); }

/* what is on that night, top right of its row */
.ev{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--alert);
  background:rgba(255,107,107,.11);
  border:1px solid rgba(255,107,107,.36);
  border-radius:999px; padding:4px 11px 3px;
}
.ev::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--alert); box-shadow:0 0 0 3px rgba(255,107,107,.2);
}
.htr.now::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand-lift);
}
.htr.now .htd.dy{ color:var(--brand-lift); }
.htr.now .htd.dy::after{
  content:"Today"; font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:.2em;
  font-weight:600; color:var(--muted); margin-left:9px; vertical-align:2px;
}
.hours-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:26px; }
.hours-foot p{ color:var(--muted); font-size:14px; }
.hours-foot .inlink{ color:var(--brand-lift); border-bottom:1px solid rgba(57,168,214,.34); }
.hours-foot .inlink:hover{ border-bottom-color:var(--brand-lift); }

@media (min-width:901px){
  .htr:not(.hthead){ min-height:76px; }
  .ev{ position:absolute; z-index:2; top:9px; right:clamp(14px,1.6vw,22px); }
}

/* ============ 13. LIQUOR SPLIT ============ */
.liquor{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center; }
.liquor-media{ display:grid; gap:14px; }
.liquor-media .ph{ aspect-ratio:4/3; }
.liquor h2{ margin-bottom:20px; }
.liquor ul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.liquor li{ display:flex; gap:13px; align-items:flex-start; color:var(--muted); font-size:15px; }
.liquor li svg{ flex:0 0 auto; margin-top:3px; color:var(--brand-lift); }
.liquor .cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

/* ============ 14. VISIT ============ */
.visit{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,4vw,62px); align-items:stretch; }
.visit-info h2{ margin-bottom:24px; }
.vrow{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.vrow:last-of-type{ border-bottom:1px solid var(--line); }
.vrow svg{ flex:0 0 auto; color:var(--brand-lift); margin-top:2px; }
.vrow b{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--muted-2); margin-bottom:5px; }
.vrow p, .vrow a{ font-size:16px; color:var(--cream); }
.vrow a:hover{ color:var(--brand-lift); }
.map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); min-height:400px; background:var(--surface); }
.map iframe{ width:100%; height:100%; min-height:400px; border:0; filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(175deg); }
.socials{ display:flex; gap:11px; margin-top:26px; }
.socials a{
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:all .3s var(--ease);
}
@media (hover:hover){ .socials a:hover{ border-color:var(--brand-lift); color:var(--brand-lift); transform:translateY(-3px); } }

/* ============ 15. FOOTER ============ */
footer{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,76px) 30px; }
.foot{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:clamp(26px,3.2vw,52px); align-items:start; }
.foot img.fl{ width:min(280px,72vw); margin-bottom:20px; }
.foot p{ color:var(--muted); font-size:14.5px; max-width:38ch; }
.foot h4{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; color:var(--muted-2); margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot ul a, .foot ul li{ color:var(--muted); font-size:14.5px; }
.foot ul a:hover{ color:var(--brand-lift); }
.legal{
  margin-top:clamp(38px,5vw,60px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  color:var(--muted-2); font-size:12.5px;
}

/* ============ sticky mobile call bar ============ */
.callbar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:80;
  display:none; gap:10px;
  transform:translateY(140%); transition:transform .45s var(--ease);
}
.callbar.on{ transform:none; }
.callbar .btn{ flex:1; padding:16px 12px; }

/* ============ responsive ============ */
@media (max-width:820px){
  .htr{ grid-template-columns:1fr; padding:6px 0; }
  .hthead{ display:none; }
  .htd{ padding:7px clamp(16px,4vw,22px); display:flex; flex-wrap:wrap; gap:0 12px; align-items:baseline; }
  .htd.dy{ padding-top:16px; gap:0 12px; }
  .ev{ margin-left:2px; }
  .htd[data-l]::before{
    content:attr(data-l); flex:0 0 92px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em;
    font-size:10.5px; font-weight:600; color:var(--brand-lift);
  }
  .htd:last-child{ padding-bottom:18px; }
  .htd b{ display:inline; flex:1 1 auto; }
  .htd em{ flex:0 0 calc(100% - 104px); margin:2px 0 0 104px; }   /* was 100% + 104px: 88px past the row */
}
@media (max-width:1080px){
  .navlinks{ display:none; }
  .burger{ display:flex; }
  .nav .status{ display:none; }
  .nav .wrap .btn{ margin-left:auto; }
  .burger{ margin-left:0; }
  .today .wrap{ grid-template-columns:1fr 1fr; }
  .today-cell:nth-child(1){ grid-column:1 / -1; border-bottom:1px solid var(--line); }
  .today-cell:nth-child(2){ padding-left:0; border-left:0; }
  .dishes{ grid-template-columns:repeat(4,1fr); }
  .dish{ grid-column:span 2; }
  .dish:nth-child(1), .dish:nth-child(2){ grid-column:span 2; }
  .dish.wide{ grid-column:span 4; }
  .dish:nth-child(1) .ph, .dish:nth-child(2) .ph{ aspect-ratio:4/3; }
}
@media (max-width:1080px){
  .foot{ grid-template-columns:1fr 1fr; }
  .foot h4{ font-size:12px; }   /* Mobile C.4: no footer text under 12px */
}
@media (max-width:860px){
  .story, .panel, .liquor, .visit{ grid-template-columns:1fr; }
  .story-media{ margin-bottom:56px; }
  .story-media .ph.a{ aspect-ratio:4/3; }
  .story-media .ph.b{ width:44%; right:0; bottom:-9%; }
  .est{ left:auto; right:-2%; top:-6%; }
  .doors{ grid-template-columns:1fr; }
  .door.big{ grid-row:auto; min-height:340px; }
  .visit .map{ min-height:320px; order:2; }
}
@media (max-width:640px){
  .foot{ grid-template-columns:1fr; }
  .today .wrap{ grid-template-columns:1fr; }
  .today-cell{ padding:22px 0; }
  .today-cell + .today-cell{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .today-cell:nth-child(1){ border-bottom:0; }
  .dishes{ grid-template-columns:1fr; }
  .dish, .dish:nth-child(1), .dish:nth-child(2){ grid-column:span 1; }
  .dish.wide{ grid-column:span 1; grid-template-columns:1fr; }
  .dish.wide .ph{ grid-row:auto; margin-bottom:16px; aspect-ratio:4/3; }
  .hero{ padding-bottom:110px; }
  .callbar{ display:flex; }
  footer{ padding-bottom:92px; }
  .nav .wrap{ gap:10px; }
  .nav .wrap .btn svg{ display:none; }
  .nav .wrap .btn{ padding:11px 15px; font-size:12px; letter-spacing:.08em; }
  .pad{ padding-block:90px; }
  #story{ padding-top:108px; }
}

/* ============ 16. 404 PAGE ============
   The round 2 interior pages were retired in round 3, so only the two
   components the 404 still uses survive here. */
.alsolinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(40px,5vw,60px); }
.alsolinks a{
  display:block; padding:20px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color .3s ease, transform .3s var(--ease);
}
@media (hover:hover){ .alsolinks a:hover{ border-color:var(--brand-lift); transform:translateY(-3px); } }
.alsolinks b{
  display:block; font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.09em; font-size:13px; font-weight:600; color:var(--cream);
}
.alsolinks span{ display:block; margin-top:6px; color:var(--muted-2); font-size:13.5px; }

.nf{ padding-top:calc(72px + clamp(56px,8vw,110px)); text-align:center; }
.nf h1{ margin:6px 0 18px; }
.nf .lede{ margin:0 auto 30px; max-width:38ch; }
.nf .cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.nf .alsolinks{ text-align:left; max-width:var(--maxw); }

@media (max-width:640px){
  .alsolinks{ grid-template-columns:1fr; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .rise > span > i{ transform:none !important; opacity:1 !important; }
  .ph img, .door-img img, .hero-bg img, .happy-bg img{ opacity:1 !important; transform:none !important; }
  .happy-bg img{ opacity:.34 !important; }
  .marquee-track{ animation:none !important; }
  .cur{ display:none !important; }
}