/* Bottle menu page (2026-10-26). One layout for the three venues; each venue sets its own
   colours, type and room photograph below. bottle-menu.js drives the stage. */
html[data-venue=ab] .bm{--bm-night:#120a0e;--bm-hero-a:#3a1a26;--bm-hero-b:#1d0e15;--bm-ink:#f5f0e8;--bm-paper:#e9decd;--bm-soft:#c9b9b7;
  --bm-accent:#dba950;--bm-rgb:219,169,80;--bm-deep:18,10,14;--bm-tint:48,21,31;--bm-glint:255,240,205;--bm-room:url(/codex/assets/abigail-hero.jpg?v=2ff51fb550);--bm-room-fx:sepia(.25);
  --bm-list:#30151f;--bm-list-ink:#e9decd;--bm-list-strong:#f5f0e8;--bm-list-soft:#c9b9b7;--bm-list-head:#dba950;--bm-list-rule:rgba(233,222,205,.1);
  --bm-display:Italiana,Georgia,serif;--bm-display-weight:400;--bm-body:Roboto,Arial,sans-serif}
html[data-venue=sy] .bm{--bm-night:#091320;--bm-hero-a:#1d2b40;--bm-hero-b:#101b2f;--bm-ink:#f8f3e9;--bm-paper:#eee7d9;--bm-soft:#c9c1b1;
  --bm-accent:#af9562;--bm-rgb:175,149,98;--bm-deep:9,19,32;--bm-tint:16,27,47;--bm-glint:255,244,220;--bm-room:url(/codex/assets/saintyves-lounge.jpg?v=917f35bb03);--bm-room-fx:sepia(.12);
  --bm-list:#eee7d9;--bm-list-ink:#232a2a;--bm-list-strong:#232a2a;--bm-list-soft:#575044;--bm-list-head:#80643b;--bm-list-rule:rgba(35,42,42,.14);
  --bm-display:Forum,Georgia,serif;--bm-display-weight:400;--bm-body:'Libre Franklin',Arial,sans-serif}
html[data-venue=st] .bm{--bm-night:#0a0d11;--bm-hero-a:#1c2633;--bm-hero-b:#10151c;--bm-ink:#eef0f3;--bm-paper:#dfe4ea;--bm-soft:#b3bcc7;
  --bm-accent:#8fe3ff;--bm-rgb:143,227,255;--bm-deep:10,13,17;--bm-tint:10,13,17;--bm-glint:225,242,255;--bm-room:url(/codex/assets/strand-room.jpg?v=608a6cc18a);--bm-room-fx:saturate(.9);
  --bm-list:#13161a;--bm-list-ink:#dfe4ea;--bm-list-strong:#eef0f3;--bm-list-soft:#b3bcc7;--bm-list-head:#8fe3ff;--bm-list-rule:rgba(238,240,243,.1);
  --bm-display:'Big Shoulders',Roboto,sans-serif;--bm-display-weight:700;--bm-body:Roboto,Arial,sans-serif}
.bm{background:var(--bm-night);color:var(--bm-paper);font-family:var(--bm-body);overflow:clip}
.bm *{box-sizing:border-box}
.bm-display{font-family:var(--bm-display);font-weight:var(--bm-display-weight);letter-spacing:.02em}

/* hero */
.bm-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px clamp(20px,5.6vw,72px) 80px;
  background:radial-gradient(120% 95% at 74% 40%,var(--bm-hero-a) 0%,var(--bm-hero-b) 48%,var(--bm-night) 100%)}
.bm-hero__copy{position:relative;z-index:5;max-width:560px}
.bm-hero__logo img{height:46px;width:auto;display:block;margin-bottom:56px}
.bm .bm-hero h1{font-size:clamp(56px,7.4vw,112px);line-height:.98;margin:0 0 28px;color:var(--bm-ink)}
.bm-hero h1 em{font-style:normal;color:var(--bm-accent)}
.bm-line{display:block;overflow:hidden;padding-bottom:.06em}
.bm-line>span{display:block}
.bm-ready .bm-line>span{transform:none}
.bm-ready .bm-line:nth-child(2)>span{transition-delay:.12s}
.bm-hero p{font-size:18px;line-height:1.6;color:var(--bm-soft);margin:0 0 30px;max-width:30ch}
.bm-ready .bm-hero p,.bm-ready .bm-hero__more{opacity:1;transform:none}
.bm-hero__more{display:inline-block;font-size:15px;color:var(--bm-accent);text-decoration:underline;text-underline-offset:4px}
/* The hero starts hidden only where a script will reveal it: with JavaScript off the title and line
   stayed hidden, over an empty stage (smoking-section 2026-10-29). */
@media (scripting:enabled){
  .bm-line>span{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
  .bm-hero p{opacity:0;transform:translateY(14px);transition:opacity .9s ease .5s,transform .9s ease .5s}
  .bm-hero__more{opacity:0;transform:translateY(14px);transition:opacity .9s ease .65s,transform .9s ease .65s}
}
@media (scripting:none){.bm-reel,.bm-float{display:none}}
.bm-hero__still{display:none}

/* one bottle: tilt, body with glint, reflection */
.bm-b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform,opacity;pointer-events:none;perspective:900px}
.bm-b__tilt{position:relative;transform-style:preserve-3d;will-change:transform}
.bm-b__body{position:relative;height:var(--bh);width:auto}
.bm-b__body img{display:block;height:var(--bh);width:auto;max-width:none;filter:drop-shadow(0 34px 44px rgba(0,0,0,.65))}
.bm-b__glint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  background:linear-gradient(104deg,transparent 38%,rgba(var(--bm-glint),0) 42%,rgba(var(--bm-glint),.62) 50%,rgba(var(--bm-glint),0) 58%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:var(--gx,140%) 0;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
/* a photo that failed twice (bottle-menu.js): a plain glass outline holds its place under the price */
.bm-b.is-missing img,.bm-b.is-missing .bm-b__glint{visibility:hidden}
.bm-b.is-missing .bm-b__body{width:calc(var(--bh) * .3);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100'%3E%3Cpath d='M12 1h6v22c0 6 9 9 9 19v54c0 2-1 3-3 3H6c-2 0-3-1-3-3V42c0-10 9-13 9-19z' fill='%23ffffff12' stroke='%23ffffff59' stroke-width='.5'/%3E%3C/svg%3E") center/contain no-repeat}
.bm-b__refl{position:absolute;left:0;top:100%;height:var(--bh);width:auto;max-width:none;transform:scaleY(-1);opacity:.16;filter:blur(1.5px);
  -webkit-mask:linear-gradient(to top,rgba(0,0,0,.9),transparent 34%);mask:linear-gradient(to top,rgba(0,0,0,.9),transparent 34%)}

/* the stage */
.bm-reel{position:relative;height:calc(var(--n) * 88svh + 100svh)}
.bm-stage{position:sticky;top:0;height:100svh;overflow:hidden;--bh:min(54svh,500px)}
.bm-bg{position:absolute;inset:-8%;background:var(--bm-room) center/cover;filter:blur(30px) brightness(.32) saturate(.75) var(--bm-room-fx);transform:scale(1.12);will-change:transform}
.bm-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(var(--bm-tint),.35),rgba(var(--bm-tint),.35)),radial-gradient(70% 60% at 50% 50%,rgba(var(--bm-deep),.1),rgba(var(--bm-deep),.88) 80%)}
.bm-bar{position:absolute;left:0;right:0;top:calc(50% + var(--bh) / 2 + 2px);height:1px;background:linear-gradient(90deg,transparent,rgba(var(--bm-rgb),.35),transparent);will-change:transform}
.bm-bar:after{content:"";position:absolute;left:0;right:0;top:1px;height:30svh;background:linear-gradient(rgba(var(--bm-deep),.55),rgba(var(--bm-deep),.92))}
/* --fade is set by bottle-menu.js: the word fades out before the caption side. */
.bm-ghosts{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:var(--fade,none);mask-image:var(--fade,none)}
.bm-ghost{position:absolute;left:50%;top:46%;font-family:var(--bm-display);font-weight:var(--bm-display-weight);font-size:min(12.5vw,210px);line-height:1;white-space:nowrap;color:transparent;
  -webkit-text-stroke:1px rgba(var(--bm-rgb),.32);transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;pointer-events:none;text-transform:uppercase;letter-spacing:.04em}
.bm-glow{position:absolute;left:50%;top:50%;width:70svh;height:70svh;border-radius:50%;transform:translate(-50%,-50%);will-change:transform,opacity;
  background:radial-gradient(circle,rgba(var(--bm-rgb),.42) 0%,rgba(var(--bm-rgb),.1) 42%,transparent 70%);filter:blur(10px)}
.bm-shadow{position:absolute;left:50%;top:calc(50% + var(--bh) / 2 - 8px);width:24svh;height:4.5svh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75) 0%,transparent 72%);filter:blur(6px);will-change:transform}
.bm-cap{position:absolute;top:50%;width:min(380px,30vw);opacity:0;will-change:transform,opacity;z-index:5}
.bm-cap.is-r{right:clamp(20px,7vw,120px)} .bm-cap.is-l{left:clamp(20px,7vw,120px)}
.bm .bm-cap h2{font-family:var(--bm-display);font-weight:var(--bm-display-weight);font-size:clamp(38px,3.6vw,58px);line-height:1.02;letter-spacing:.01em;margin:0 0 18px;color:var(--bm-ink)}
.bm-cap h2:after{content:"";display:block;width:48px;height:1px;background:var(--bm-accent);margin-top:20px}
.bm-cap p{margin:0;font-size:16px;line-height:1.6;color:var(--bm-soft)}
.bm-cap .bm-price{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.bm-price b{font-weight:400;font-size:30px;color:var(--bm-ink)}
.bm-price span{font-size:13px;color:var(--bm-soft)}
/* Each bottle's own text link: the message names the venue and the bottle (smoking-section 2026-10-28). */
.bm-order{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0;font-size:15px;color:var(--bm-accent);text-decoration:underline;text-underline-offset:4px}
.bm-dots{position:absolute;right:clamp(14px,2.4vw,32px);top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:6}
.bm-dots i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,transform .3s}
.bm-dots i.on{background:var(--bm-accent);transform:scale(1.6)}
.bm-float{position:fixed;left:0;top:0;width:100%;height:100svh;z-index:3;pointer-events:none;--bh:min(54svh,500px)}
/* Where the guest is in the reel, and a way out at every bottle (smoking-section 2026-10-29). It sits
   level with the menu button, on the other side. */
.bm-skip{position:absolute;left:clamp(20px,5.6vw,72px);top:54px;z-index:7;display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:14px;color:var(--bm-soft);text-decoration:underline;text-underline-offset:4px}
.bm-skip__n{font-weight:400;color:var(--bm-accent);text-decoration:none;font-variant-numeric:tabular-nums}
.bm-skip__n:empty{display:none}
/* The booking bar goes solid over the full list, so no price shows through it (smoking-section
   2026-10-29: it was 80% see-through, and "$1,550" ran into its button). */
html.bm-list-under body .reservation-dock{background:var(--bm-dock,#101419);backdrop-filter:none}
html[data-venue=ab].bm-list-under{--bm-dock:#32151f}
html[data-venue=sy].bm-list-under{--bm-dock:#101b2f}
html[data-venue=st].bm-list-under{--bm-dock:#13161a}
/* The bar is solid dark here, so keep the club name white even when vip-chat.js marks the ground light (Codex, 2026-10-29). */
html[data-venue].bm-list-under body .reservation-dock.on-light>span:first-child{color:#fff}

/* full menu */
/* the right side ends clear of the menu button in the top-right corner, which prices scrolled under at
   every width from 768 to 1440 (smoking-section 2026-10-29, run 5) */
.bm-list{position:relative;z-index:6;background:var(--bm-list);color:var(--bm-list-ink);padding:110px 96px 140px clamp(20px,5.6vw,72px)}
.bm .bm-list h2{font-size:clamp(40px,5vw,72px);line-height:1;margin:0 0 14px;color:var(--bm-list-strong)}
.bm-list__note{margin:0 0 56px;color:var(--bm-list-soft);font-size:15px}
/* The number is a text link, underlined so it reads as one (smoking-section 2026-10-28). */
.bm-list__note a{color:inherit;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.bm-cols{columns:3 300px;column-gap:64px}
.bm-cat{break-inside:avoid;margin:0 0 44px}
.bm .bm-cat h3{font-family:var(--bm-display);font-weight:var(--bm-display-weight);font-size:26px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--bm-list-head);margin:0 0 14px}
.bm-cat ul{list-style:none;margin:0;padding:0}
.bm-cat li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--bm-list-rule);font-size:16px}
.bm-cat li span{flex:1}
.bm-cat li b{font-weight:400;color:var(--bm-list-strong);font-variant-numeric:tabular-nums}
/* each bottle row is its text link (bottle_menu.py), the whole row a 44 px target */
.bm-cat li:has(>a){padding:0}
.bm-cat li a{display:flex;flex:1;align-items:baseline;gap:10px;min-height:44px;padding:11px 0;box-sizing:border-box;color:inherit;text-decoration:none}
.bm-cat li a:hover span,.bm-cat li a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
/* The floating "Ask a host" button steps aside while the list is under it (bottle-menu.js), so it
   never sits on a price (smoking-section 2026-10-29: it hid "$1,550" on the Rosé). */
html.bm-list-under .vip-chat-launch{opacity:0;visibility:hidden;pointer-events:none}
.vip-chat-launch{transition:opacity .25s,visibility .25s}

/* phone */
@media (max-width:767px){
  .bm-hero{align-items:flex-start;padding-top:96px}
  .bm-hero__logo img{margin-bottom:36px}
  .bm-stage,.bm-float{--bh:min(40svh,330px)}
  .bm-cap,.bm-cap.is-l,.bm-cap.is-r{left:clamp(20px,5.6vw,72px);right:clamp(20px,5.6vw,72px);width:auto;top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}
  .bm .bm-cap h2{font-size:32px;margin-bottom:12px}
  .bm-cap h2:after{margin-top:12px}
  .bm-cap p{display:none}
  .bm-cap .bm-price{margin-top:4px}
  .bm-price b{font-size:26px}
  .bm-order{margin-top:0}
  .bm-ghost{top:22%;font-size:11.5vw}
  .bm-dots{display:none}
  /* in the gap between the caption and the booking bar, clear of the bottle */
  .bm-skip{top:auto;bottom:calc(82px + env(safe-area-inset-bottom))}
  /* prices end clear of the menu button in the top-right corner (it struck through "$50") */
  .bm-list{padding-right:80px}
}
/* a short phone: names on one line, so the bottle keeps its room above the caption */
@media (max-width:767px) and (max-height:720px){
  .bm .bm-cap h2{font-size:26px;margin-bottom:8px}
  .bm-cap h2:after{margin-top:8px}
}
/* a short phone held upright: the hero text ends higher, so the hero bottle has room under it
   above the booking bar (run 5: at 360x640 the Ace stood behind "comes out"; bottle-menu.js heroFit) */
@media (max-width:767px) and (max-height:760px) and (orientation:portrait){
  .bm-hero{padding-top:80px}
  .bm-hero__logo img{margin-bottom:22px}
  .bm .bm-hero h1{font-size:46px;margin-bottom:16px}
  .bm-hero p{font-size:16px;margin-bottom:14px}
}
/* a phone held sideways, any width (bottle-menu.js side() reads this same query): caption on the
   left, bottles on the right, and a hero short enough to sit above the booking bar
   (smoking-section 2026-10-28: the bottle covered "Magnum" and "tax", and the bar covered "menu.",
   at 667x375; 2026-10-29: at 844x390 the desktop caption put its text link under the booking bar) */
@media (orientation:landscape) and (max-height:500px){
  .bm-stage,.bm-float{--bh:min(56svh,330px)}
  .bm-cap,.bm-cap.is-l,.bm-cap.is-r{left:clamp(20px,5.6vw,72px);right:auto;width:min(48vw,340px);top:64px;bottom:auto}
  .bm .bm-cap h2{font-size:26px;margin-bottom:8px}
  .bm-cap h2:after{margin-top:8px}
  .bm-cap p{display:none}
  .bm-cap .bm-price{margin-top:4px}
  .bm-price b{font-size:26px}
  .bm-order{margin-top:0}
  .bm-ghost{top:46%}
  .bm-list{padding-right:80px}
  .bm-skip{top:8px;bottom:auto}
}
/* any short screen held sideways: the hero copy fits above the booking bar, with the title on one line */
@media (orientation:landscape) and (max-height:500px){
  .bm-hero{min-height:auto;align-items:flex-start;padding-top:44px;padding-bottom:110px}
  .bm-hero__logo img{height:28px;margin-bottom:10px}
  .bm .bm-hero h1{font-size:40px;margin-bottom:10px}
  .bm-hero h1 .bm-line{display:inline-block}
  .bm-hero h1 .bm-line+.bm-line{margin-left:.25em}
  .bm-hero p{font-size:15px;margin-bottom:8px;max-width:46ch}
}

/* motion off (the page switch or the guest's setting): no pinning, no float, a plain grid */
.bm.is-still .bm-float,.bm.is-still :is(.bm-glow,.bm-shadow,.bm-dots,.bm-ghost,.bm-bar,.bm-bottles,.bm-skip){display:none}
.bm.is-still .bm-line>span,.bm.is-still .bm-hero p,.bm.is-still .bm-hero__more{transform:none;opacity:1;transition:none}
.bm.is-still .bm-hero__still{display:block;position:absolute;right:clamp(20px,8vw,140px);top:50%;transform:translateY(-50%);height:min(60svh,520px);width:auto}
.bm.is-still .bm-reel{height:auto}
.bm.is-still .bm-stage{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:56px 40px;padding:96px clamp(20px,5.6vw,72px)}
.bm.is-still .bm-bg{position:absolute;inset:0;transform:none}
.bm.is-still .bm-cap{position:relative;inset:auto;opacity:1;transform:none;width:auto}
/* each bottle at its own height, all on one line (--sz from bottle-menu.js; 1.314 is the tallest) */
.bm.is-still .bm-cap:before{content:"";display:block;height:340px;margin-bottom:22px;background:var(--img) center bottom/auto calc(100% * var(--sz,1) / 1.314) no-repeat}
@media (max-width:767px){.bm.is-still .bm-hero__still{display:none}}
/* With JavaScript off the reel is gone, so the hero shows its bottle (smoking-section 2026-10-29: no
   bottle photo appeared anywhere). Not on a phone, where the hero copy takes the width. */
@media (scripting:none) and (min-width:768px){.bm-hero__still{display:block;position:absolute;right:clamp(20px,8vw,140px);top:50%;transform:translateY(-50%);height:min(60svh,520px);width:auto}}