/* lqdm: ZERO italic anywhere on the site — emphasis is weight/case, never slant
   (founder 2026-06-14). !important so it overrides any page/inline declaration. */
*, em, i, cite, q, dfn, var, address, blockquote { font-style: normal !important; }

/* lqdm: display headings on LIGHT (day) surfaces read as brushed metal catching
   the raking key — a dark metallic sheen instead of flat ink, for more depth/drama
   (founder 2026-06-14). Same 118deg key as the page-ground + card. Scoped to
   day-surface headings only; hero titles over photos / white-on-dark headings are
   intentionally excluded. @supports keeps solid ink where text-clip is unsupported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shop-title,.section-title,.page-title,.build-title,.bento-title,.cover-title,
  .venue-title,.do-card-name,.detail-name,.booking-title,.buy-title{
    background:var(--metal-ink);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    /* background-clip:text clips the gradient to the glyph box; on some renderers
       (notably Windows/Edge — Yarden's screen) a tight line-box cut the descenders
       (g/q/Q) — founder 2026-06-17. Extend the paint box generously + never clip. */
    padding-bottom:0.34em;
    overflow:visible;
    /* the raking light gently drifts across the metal — alive, slow, no spectacle */
    animation:metalSheen 11s var(--ease-in-out) infinite alternate;
  }
  /* em children join the parent's metal clip rather than painting a solid color */
  .shop-title em,.section-title em,.page-title em,.build-title em,.bento-title em,
  .cover-title em,.venue-title em,.do-card-name em,.booking-title em,.buy-title em{
    color:inherit;-webkit-text-fill-color:inherit;background:none;
  }
}
@keyframes metalSheen{ from{background-position:0% 50%} to{background-position:100% 50%} }
@media (prefers-reduced-motion:reduce){
  .shop-title,.section-title,.page-title,.build-title,.bento-title,.cover-title,
  .venue-title,.do-card-name,.detail-name,.booking-title,.buy-title{ animation:none;background-position:50% 50%; }
}

/* Global raking-key ground — one low-angle key grazing the whole matte page,
   light → shade, behind all content (z-index:-1, fixed so the light stays put
   as the page scrolls). Achromatic + matte; principle-zero "light on material"
   applied to the page itself, not just the card. Requires the page body to be
   transparent (set per converted page) so this layer reads through. */
html::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(130% 95% at 12% 4%, var(--bg-rk-bloom) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(118deg, var(--bg-rk-lit) 0%, var(--bg-rk-mid) 42%, var(--bg-rk-shade) 76%, var(--bg-rk-deep) 124%);
}

/* lqdm: in Hebrew, lay out the top nav EXACTLY like the English version — logo at
   the inline-start (left), Bag + language toggle at the inline-end (right). Forcing
   the nav to LTR un-mirrors the flex order; each Hebrew label still renders RTL per
   Unicode bidi. !important overrides the per-page `html[lang="he"] nav#nav{rtl}`
   mirror rules some pages carry (founder 2026-06-16). Sitewide via this sheet. */
html[lang="he"] nav#nav { direction: ltr !important; }
/* The Hebrew brand descriptor "בית מלאכה ליצירת משקאות" is longer than the English
   "house of liquids" — compact it (no caps, tight tracking, one line) so it fits
   under the wordmark on every page. The #nav id beats the per-page nav-sub rules. */
html[lang="he"] #nav .nav-logo-sub { font-size: 10px; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }

/* lqdm: cleaner wordmark on the internal pages — drop the "/ lqdm /" chip and the
   "house of liquids" sub from the nav logo on every page EXCEPT the home (body.home
   keeps the full lockup). And drop both from the footer logo everywhere (founder
   2026-06-17). */
body:not(.home) #nav .nav-logo-code,
body:not(.home) #nav .nav-logo-sub { display: none; }
.footer-logo-code,
.footer-logo-sub { display: none !important; }

/* ============================================================
   MOBILE NAV — BAG icon (replaces the "Bag (n)" text box) sitting beside
   the hamburger on the right; liquidium stays left (founder 2026-06-18).
   #nav specificity (1,1,0) beats the per-page .cart-btn / .nav-right (0,1,0).
============================================================ */
@media (max-width: 768px){
  #nav .nav-right{ margin-inline-start: auto !important; gap: 0 !important; }
  /* shop wraps its cart-btn in an UNCLASSED <div> (not .nav-right) so the
     margin-auto above never matched it → space-between parked the bag in the
     centre. Push any cart-cluster wrapper to the inline-end so the bag sits
     beside the hamburger like home/experiences (founder 268). */
  #nav > div:has(.cart-btn){ margin-inline-start: auto; }
  #nav .nav-hamburger{ margin-inline-start: 12px !important; }
  #nav .cart-btn{
    width: 28px; height: 28px; min-width: 0; padding: 0;
    border: none; background: none; box-shadow: none;
    font-size: 0; letter-spacing: 0; color: var(--fg);
    /* gap:0 — shop's .cart-btn ships gap:10px which, with 3 flex children
       (icon + Bag + count), ate 20px and squished the 24px bag to 8px
       (founder 268). Also hide the count span so the icon centres cleanly. */
    gap: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  #nav .cart-btn > span{ display: none; }
  #nav .cart-btn::before{ flex: 0 0 24px; }
  #nav .cart-btn::before{
    content: ''; width: 24px; height: 24px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.5%207.5L18.5%207.5L17.5%2020.5L6.5%2020.5Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9%207.5V6a3%203%200%200%201%206%200V7.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.5%207.5L18.5%207.5L17.5%2020.5L6.5%2020.5Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9%207.5V6a3%203%200%200%201%206%200V7.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ============================================================
   MOBILE NAV DRAWER — shared hamburger + slide-out menu, injected by
   lqdm-nav.js on every internal page so mobile navigation matches the
   home (founder 2026-06-18: "the different menus should be the same").
   The nav-chrome rules are scoped `body:not(.home)` so the home keeps its
   own bespoke inline drawer untouched; values mirror the home drawer.
============================================================ */
body:not(.home) .nav-hamburger { display: none; }

.mobile-menu-backdrop {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(15,13,11,0.4); opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.mobile-menu-backdrop.open { display: block; opacity: 1; }
.mobile-menu {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 60%; max-width: 320px; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column; align-items: flex-start;
  gap: 24px; padding: 80px 32px 32px;
  transform: translateX(-100%); visibility: hidden; pointer-events: none;
  transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  box-shadow: 4px 0 24px rgba(15,13,11,0.08);
}
.mobile-menu.open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.3s var(--ease), visibility 0s; }
.mobile-menu a {
  font-family: var(--display); font-weight: 500; font-size: 28px;
  letter-spacing: -0.02em; color: var(--fg); text-decoration: none;
  text-transform: lowercase;
}
.mobile-menu-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: none; background: transparent; font-size: 28px; line-height: 1;
  cursor: pointer; color: var(--fg);
}
.mobile-menu .lang-toggle--mobile { display: inline-flex; margin-top: auto; }
/* HE: drawer slides in from the right (reading-direction match). */
html[lang="he"] .mobile-menu { left: auto; right: 0; transform: translateX(100%); box-shadow: -4px 0 24px rgba(15,13,11,0.08); }
html[lang="he"] .mobile-menu.open { transform: translateX(0); }
html[lang="he"] .mobile-menu-close { right: auto; left: 14px; }
html[lang="he"] .mobile-menu a { align-self: stretch; text-align: right; }

@media (max-width: 768px){
  /* show + style the injected hamburger (home uses its own inline rules) */
  body:not(.home) #nav .nav-hamburger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 28px; height: 28px; padding: 0;
    border: none; background: transparent; cursor: pointer;
  }
  body:not(.home) #nav .nav-hamburger span {
    display: block; width: 22px; height: 2px; min-height: 2px;
    flex-shrink: 0; background: var(--fg); transition: background 0.3s ease;
  }
  /* the in-nav language toggle moves into the drawer on mobile */
  body:not(.home) #nav .lang-toggle:not(.lang-toggle--mobile) { display: none; }
  /* 261: inline nav links live in the drawer on mobile, so every internal nav
     reads exactly like the home — liquidium · bag · hamburger (founder 2026-06-19) */
  body:not(.home) #nav .nav-links { display: none; }
  /* hide the "← back to shop" link on mobile so the internal nav matches the
     home exactly (liquidium · bag · hamburger) — the drawer carries navigation
     (founder 2026-06-19, img 279). */
  body:not(.home) #nav .nav-back { display: none; }
  /* match the home wordmark size on mobile — story shipped 16px which read too
     small next to the home's 18px; unify all internal pages to 18px (founder
     2026-06-19, img 277). */
  /* Match the HOME's big SVG wordmark (116×28). The home hides .nav-logo and shows
     a 28px-tall SVG logo; the internal pages use TEXT, so size it up to ~28px so
     "liquidium" reads the SAME size everywhere (founder 2026-06-20, img 303). */
  body:not(.home) #nav .nav-logo-text { font-size: 28px; letter-spacing: -0.03em; }
}

/* ============================================================
   NAV SAFE-AREA — when the internal nav goes solid on scroll, its background
   must extend UP through the iOS status-bar inset so no section content peeks
   above the bar (founder 2026-06-19, screenshots 263→264). Mirrors the home's
   own inline rule. viewport-fit=cover is already set on every page.
============================================================ */
@media (max-width: 768px) {
  /* Floor to 60px: iOS SAFARI reports env(safe-area-inset-top)≈0 (the status
     bar is Safari's chrome, not ours), which left the scrolled nav SHORTER than
     the status bar so iOS sampled section content in the gap → the "peek above
     the nav". max(env,60px) makes the opaque nav a thick bar that always covers
     the status-bar zone, regardless of env() (founder 2026-06-19). */
  body:not(.home) #nav { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  body:not(.home) #nav.scrolled { background: var(--bg); padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  /* OPAQUE STATUS-BAR FILL — founder approved "fully opaque" and sent a screen
     recording showing the previous section peeking in the iOS status-bar strip
     ABOVE the nav (content extends under the bar) + a white band over the hero.
     This is a fixed opaque bar over the status-bar inset on EVERY page, painted
     ABOVE the nav (z-index 250), so nothing can ever show in that strip. Cream
     by default; DARK (.sb-dark) while a dark hero sits under it at the top so it
     reads as the hero, not a band. Height is the inset (0 → harmless). */
  body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--bg);
    z-index: 250;
    pointer-events: none;
    transition: background 0.3s var(--ease);
  }
  body.sb-dark::after { background: #0a0b0d; }
  /* 2026-06-20: REVERTED the internal-page 60px fill + 64px floor. His iOS Safari
     puts the internal pages' content BELOW a clean light status bar (NOT under it),
     so the fill rendered as a fat bar BELOW the status bar and the floor pushed the
     nav down, leaving a gap where the hero peeked. A THIN env-based nav (above) with
     NO extra fill is the right answer for the internal pages — clean status bar, no
     gap, no peek. (The home keeps its own cover: it DOES run the hero under the bar.) */
}