/* ============================================================================
   OLLIN-NAV v1 · canonical shared nav stylesheet · 2026-07-03
   Linked by ALL four pages (landing, /beverly-hills, /miami, /new-york) so the
   header + Locations menu + footer + mobile drawer are byte-identical and CANNOT
   drift. Page-specific styles (hero, gallery, menu, visit) stay inline per page.
   Depends on the brand :root tokens (--cream/--black/--burgundy/--ease/--head/--body)
   defined in each page's own <style>. Markup template + per-page diffs: _shared/nav.html.
   ============================================================================ */

/* ---------- HEADER shell ----------
   ALWAYS-LEGIBLE NAV (client 2026-07-05, NY Location Edits.docx — defect #1): the nav
   + a clear Book link must be visible over ANY hero image, on every page. The header
   is transparent over the hero, so a light hero (NY's bright NoMad studio) used to
   swallow the cream nav text entirely. FIX: the transparent header carries a permanent
   soft top-anchored dark scrim — a gentle darkening only at the very top of the frame
   that fades to nothing before the headline, so cream nav text has guaranteed contrast
   over any photograph without dimming the hero itself. A text-shadow is the belt to that
   suspenders. On scroll past the hero the scrim is replaced by the solid cream bar (below).
   ONE shared edit → holds on BH, Miami, NY, and every future location page. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.4vh,26px) clamp(20px,5vw,64px);
  background:linear-gradient(to bottom,rgba(16,11,7,.52) 0%,rgba(16,11,7,.30) 44%,rgba(16,11,7,0) 100%);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease),opacity .8s var(--ease)}
/* over-hero legibility insurance: a soft shadow on the cream marks so they read on a
   bright photo too (removed the instant the header goes solid on cream). */
.hdr:not(.solid) .hdr-brand .wm,
.hdr:not(.solid) .hdr-nav a,
.hdr:not(.solid) .hdr-nav .loc-toggle{text-shadow:0 1px 14px rgba(8,6,4,.5)}
.hdr.solid{background:rgba(249,244,236,.94);backdrop-filter:blur(9px);
  padding-top:clamp(10px,1.8vh,16px);padding-bottom:clamp(10px,1.8vh,16px);
  box-shadow:0 1px 0 rgba(20,19,19,.08)}
.hdr-brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--cream)}
.hdr-brand img{width:clamp(22px,2vw,28px);height:auto;filter:drop-shadow(0 1px 8px rgba(10,8,8,.5))}
.hdr-brand-icon--dark{display:none}
.hdr-brand .wm{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;letter-spacing:.5em;
  font-size:clamp(.82rem,1.1vw,.98rem);text-transform:uppercase;padding-left:.1em}
.hdr.solid .hdr-brand{color:var(--black,var(--ink,#1c1815))}
.hdr.solid .hdr-brand img{filter:none}
.hdr.solid .hdr-brand-icon--cream{display:none}
.hdr.solid .hdr-brand-icon--dark{display:block}

.hdr-nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.3rem)}
.hdr-nav a,.hdr-nav .loc-toggle{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;color:var(--cream);opacity:.94;
  position:relative;padding-bottom:.3em;background:none;border:none;cursor:pointer;line-height:1}
.hdr.solid .hdr-nav a,.hdr.solid .hdr-nav .loc-toggle{color:var(--black,var(--ink,#1c1815));opacity:.72}
.hdr-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .45s var(--ease)}
.hdr-nav a:hover{opacity:1}.hdr-nav a:hover::after{width:100%}
.hdr-nav a[aria-current="page"]{opacity:1}
.hdr-nav a[aria-current="page"]::after{width:100%}
.hdr-nav a.book{border:1px solid currentColor;padding:.6em 1.25em;border-radius:100px;opacity:.92}
.hdr-nav a.book::after{display:none}
.hdr-nav a.book:hover{background:var(--cream);color:var(--burgundy,var(--oxblood,#3e2325))}
.hdr.solid .hdr-nav a.book:hover{background:var(--burgundy,var(--oxblood,#3e2325));color:var(--cream)}

/* ---------- LOCATIONS dropdown ---------- */
.loc-menu{position:relative;display:inline-flex;align-items:center}
.loc-toggle{display:inline-flex;align-items:center;gap:.5em;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:transparent;border:0;-webkit-appearance:none;appearance:none}
.loc-toggle::selection,.loc-toggle .caret::selection{background:transparent}
.loc-toggle:focus{outline:none}
.loc-toggle:focus-visible{outline:1px solid var(--khaki,#b79a85);outline-offset:3px}
.hdr-nav .loc-toggle .caret{background:transparent!important}
.loc-toggle .caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.8;transition:transform .3s var(--ease)}
.loc-menu.open .loc-toggle .caret,.loc-menu:hover .loc-toggle .caret{transform:rotate(180deg)}
.loc-panel{position:absolute;top:calc(100% + .9rem);right:0;z-index:70;
  background:#fff;border:1px solid rgba(20,19,19,.12);border-radius:5px;
  box-shadow:0 14px 44px rgba(20,19,19,.16);width:290px;padding:.5rem 0;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.loc-menu:hover .loc-panel,.loc-menu:focus-within .loc-panel,.loc-menu.open .loc-panel{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* W2-5 hover-persist: the .9rem air gap between the toggle and the panel broke the hover
   chain mid-traverse (the panel loses pointer-events the instant the pointer enters the
   gap, so reaching the options required a click). This corridor makes the gap hoverable
   while the menu is open/hovered, sized to the panel footprint (290px, right-aligned).
   ollin-nav.js adds a 300ms grace timer on fine pointers; touch keeps the click-toggle. */
.loc-menu:hover::after,.loc-menu:focus-within::after,.loc-menu.open::after{
  content:"";position:absolute;top:100%;right:0;width:290px;height:1rem}
.loc-item{display:block;padding:.72rem 1.2rem;text-decoration:none;color:var(--black,var(--ink,#1c1815));
  border-left:2px solid transparent;transition:background .25s var(--ease)}
.loc-item:hover{background:var(--cream)}
/* The loc-item anchors sit INSIDE .hdr-nav, so the .hdr-nav a treatment (cream, .86 opacity,
   underline-on-hover) would leak onto them. Neutralize it with higher specificity so the
   dropdown reads as dark text on the white panel in BOTH header states. */
.hdr-nav .loc-panel a.loc-item,
.hdr.solid .hdr-nav .loc-panel a.loc-item{color:var(--black,var(--ink,#1c1815));opacity:1;padding-bottom:.72rem}
.hdr-nav .loc-panel a.loc-item::after{display:none}
.loc-item .ci{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;display:block;color:var(--black,var(--ink,#1c1815))}
.loc-item .lo{font-family:var(--body);font-style:italic;font-size:.86rem;color:var(--ink-soft);
  display:block;margin-top:.15rem;letter-spacing:0;text-transform:none}
.loc-item.here{border-left-color:var(--burgundy,var(--oxblood,#3e2325));background:rgba(62,35,37,.05);cursor:default}
.loc-item.here .here-tag{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--burgundy,var(--oxblood,#3e2325));display:block;margin-top:.32rem}

/* ---------- MOBILE toggle + drawer ---------- */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;
  padding:6px 2px;z-index:80;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease),opacity .3s var(--ease)}
.hdr.solid .nav-toggle span{background:var(--black,var(--ink,#1c1815))}
/* S155 mobile fix (Peter: "clear buttons… clearly visible"): when the cream drawer is OPEN the
   hamburger→X must go dark, or a cream X sits invisibly on the cream drawer over a dark hero.
   Scoped to body.nav-open so the CLOSED hamburger keeps its cream bars on the dark hero. */
body.nav-open .nav-toggle span{background:var(--ink,#1c1815)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,360px);z-index:75;
  background:var(--cream);color:var(--black,var(--ink,#1c1815));padding:clamp(5rem,14vh,7rem) clamp(1.6rem,6vw,2.6rem) 2.4rem;
  transform:translateX(100%);transition:transform .5s var(--ease);
  box-shadow:-20px 0 60px rgba(20,19,19,.2);overflow-y:auto}
body.nav-open .nav-drawer{transform:none}
.nav-scrim{position:fixed;inset:0;z-index:74;background:rgba(20,19,19,.4);opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s}
body.nav-open .nav-scrim{opacity:1;visibility:visible}
.nav-drawer .d-lbl{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--burgundy,var(--oxblood,#3e2325));display:block;margin:1.6rem 0 .6rem}
.nav-drawer .d-lbl:first-child{margin-top:0}
.nav-drawer a{display:block;font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:300;font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--black,var(--ink,#1c1815));padding:.7rem 0;
  border-bottom:1px solid rgba(20,19,19,.08)}
.nav-drawer a.sub{padding-left:1rem;font-size:.74rem;opacity:.86}
.nav-drawer a.sub .lo{display:block;font-family:var(--body);font-style:italic;font-size:.78rem;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-top:.1rem}
.nav-drawer .here-m{color:var(--burgundy,var(--oxblood,#3e2325));opacity:1}
.nav-drawer a.d-book{margin-top:1.6rem;border:1px solid var(--burgundy,var(--oxblood,#3e2325));border-radius:100px;
  text-align:center;color:var(--burgundy,var(--oxblood,#3e2325));border-bottom:1px solid var(--burgundy,var(--oxblood,#3e2325));padding:.9rem}
@media(max-width:760px){
  .hdr-nav a:not(.book),.hdr-nav .loc-menu{display:none}
  .nav-toggle{display:flex}
}
@media(min-width:761px){ .nav-drawer,.nav-scrim{display:none} }

/* ---------- FOOTER ---------- */
.foot{background:var(--black,var(--ink,#1c1815));color:var(--cream);padding:clamp(3rem,7vh,5rem) 0 clamp(2.2rem,4vh,3rem)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot-col .lbl{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;opacity:.5;display:block;margin-bottom:1rem}
.foot-col a,.foot-col span{display:block;font-family:var(--body);font-weight:300;
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.9;color:var(--cream);opacity:.86;text-decoration:none}
.foot-col a:hover{opacity:1}
.foot-cities a{border-bottom:1px solid transparent;transition:border-color .4s var(--ease);width:fit-content}
.foot-cities a:hover{border-color:rgba(249,244,236,.5)}
.foot-cities .here{opacity:1;color:var(--khaki)}
.foot-base{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2.6rem,6vh,4rem);padding-top:1.6rem;border-top:1px solid rgba(249,244,236,.1)}
.foot-base span,.foot-base a{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:300;font-size:.56rem;
  letter-spacing:.24em;text-transform:uppercase;opacity:.5;text-decoration:none;color:var(--cream)}
.foot-base a:hover{opacity:.85}

/* ---------- BOOKING SHEET (Wave-3 item 5 · 2026-07-11) ----------
   One site-wide booking surface, DOM-injected by ollin-nav.js (the
   BOULEVARD_URLS stub lives there — call-first until Johnny's Boulevard
   URLs exist). Desktop: centered panel. Mobile: bottom sheet in thumb
   reach. The overlay law (body-lock/Lenis/focus trap/Escape/scrim) is
   enforced in the JS; this is presentation only. */
.bs-scrim{position:fixed;inset:0;z-index:84;background:rgba(16,11,7,.5);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s .45s}
body.bs-open .bs-scrim{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.bs-sheet{position:fixed;z-index:85;left:50%;top:50%;width:min(92vw,470px);max-height:88vh;overflow:auto;
  background:var(--cream,#f9f4ec);color:var(--black,var(--ink,#1c1815));
  border-radius:6px;box-shadow:0 30px 90px rgba(16,11,7,.4);
  padding:clamp(2.2rem,5vh,3rem) clamp(1.8rem,3.4vw,2.6rem) clamp(1.8rem,4vh,2.4rem);
  opacity:0;visibility:hidden;transform:translate(-50%,-46%);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
/* visibility leaves the OPEN-state transition list so the sheet is focusable the
   same tick it opens (a transitioned visibility is still 'hidden' at t=0 and
   focus() silently no-ops on hidden elements); the base state keeps the .45s
   delay so the close still fades before it hides. */
body.bs-open .bs-sheet{opacity:1;visibility:visible;transform:translate(-50%,-50%);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bs-kicker{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--burgundy,var(--oxblood,#3e2325));display:block;margin-bottom:.7rem}
.bs-title{font-family:var(--body);font-weight:300;font-size:clamp(1.5rem,2.6vw,1.85rem);
  line-height:1.15;margin:0 0 .55rem;letter-spacing:.01em}
.bs-note{font-family:var(--body);font-style:italic;font-weight:300;font-size:.92rem;line-height:1.55;
  color:var(--ink-soft,#6f665c);margin:0 0 1.4rem}
.bs-rows{border-top:1px solid rgba(20,19,19,.12)}
.bs-row{display:flex;align-items:center;gap:1rem;padding:1.02rem .1rem;text-decoration:none;
  color:var(--black,var(--ink,#1c1815));border-bottom:1px solid rgba(20,19,19,.12);
  transition:background .25s var(--ease)}
.bs-row:hover{background:rgba(62,35,37,.05)}
.bs-city{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase}
.bs-tel{font-family:var(--body);font-weight:300;font-size:.98rem;opacity:.75;margin-left:auto}
.bs-act{font-family:var(--head,var(--micro,"Jost",system-ui,-apple-system,sans-serif));font-weight:400;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--burgundy,var(--oxblood,#3e2325));color:var(--burgundy,var(--oxblood,#3e2325));
  border-radius:100px;padding:.55em 1.15em;transition:background .3s var(--ease),color .3s var(--ease)}
.bs-row:hover .bs-act{background:var(--burgundy,var(--oxblood,#3e2325));color:var(--cream,#f9f4ec)}
.bs-pair{border-bottom:1px solid rgba(20,19,19,.12)}
.bs-pair .bs-row{border-bottom:none}
.bs-alt{display:block;font-family:var(--body);font-style:italic;font-size:.84rem;
  color:var(--ink-soft,#6f665c);text-decoration:none;padding:0 .1rem .9rem}
.bs-alt:hover{color:var(--black,var(--ink,#1c1815))}
.bs-mail{display:block;font-family:var(--body);font-style:italic;font-weight:300;font-size:.9rem;
  color:var(--ink-soft,#6f665c);text-decoration:none;margin-top:1.3rem;text-align:center}
.bs-mail:hover{color:var(--black,var(--ink,#1c1815))}
.bs-close{position:absolute;top:.7rem;right:.85rem;background:none;border:none;cursor:pointer;
  font-size:1.35rem;line-height:1;padding:.45rem;color:var(--black,var(--ink,#1c1815));opacity:.5;
  transition:opacity .3s var(--ease)}
.bs-close:hover{opacity:1}
/* focus made quiet + on-brand (the UA default ring reads orange on cream) */
.bs-sheet a:focus-visible,.bs-close:focus-visible{outline:1px solid var(--burgundy,var(--oxblood,#3e2325));
  outline-offset:3px;border-radius:3px}
@media(max-width:760px){
  /* W5-C: the closed sheet was hidden by transform ALONE (opacity:1) — a CSS
     parse race could flash the phone rows, and the off-screen sheet stayed in
     the tab order. visibility gates both; asymmetric per the S194 focus law
     (instant on open so focus() works, delayed on close so the slide plays). */
  .bs-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:82svh;border-radius:16px 16px 0 0;
    transform:translateY(102%);opacity:1;visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s .45s;
    padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px))}
  body.bs-open .bs-sheet{transform:none;visibility:visible;
    transition:transform .45s var(--ease)}
  .bs-row{flex-wrap:wrap;row-gap:.25rem;padding:1rem .1rem}
  .bs-city{flex:1 1 auto}
  .bs-tel{margin-left:0;flex-basis:100%;order:3;font-size:.94rem}
  .bs-act{margin-left:auto}
}
/* Codex lens E: 44px tap floors — invisible halo on the sheet close; the
   hamburger grows its box (lines stay 24px, centered) — no visual change. */
@media(pointer:coarse){
  .bs-close{position:absolute}
  .bs-close::after{content:"";position:absolute;inset:-10px}
}
/* ---- W5-C unified page-transition veil (Lane G §4.4; JS in ollin-nav.js;
   placed INSIDE the .bs- sync region so the 4 inline copies stay lockstep) ---- */
#ollin-veil{position:fixed;inset:0;z-index:9999;background:var(--veil-bg,var(--cream,#f9f4ec));
  pointer-events:none;opacity:1;visibility:visible;
  transition:opacity 350ms var(--ease,cubic-bezier(.4,0,.2,1)),visibility 0s 350ms}
#ollin-veil.veil-out{opacity:0;visibility:hidden}
#ollin-veil.veil-in{opacity:1;visibility:visible;
  transition:opacity 150ms var(--ease,cubic-bezier(.4,0,.2,1))}
/* veilfix: inline-veil failsafe (JS-fail auto-lift @2.4s; reduced-motion=no veil) */
@media(prefers-reduced-motion:reduce){#ollin-veil{display:none}}
@keyframes ollin-veil-failsafe{to{opacity:0;visibility:hidden}}
#ollin-veil.veil-in{animation:ollin-veil-failsafe 500ms var(--ease,cubic-bezier(.4,0,.2,1)) 2400ms forwards}

@media(prefers-reduced-motion:reduce){
  .bs-scrim,.bs-sheet,body.bs-open .bs-scrim,body.bs-open .bs-sheet,.bs-row,.bs-act,.bs-close{transition:none}
}