/* demo4 / nav.css — the trigger + the menu panel + its Spotlight search.
 * LAND-IT D1 D3 D4 D5 (2026-10-31). Carter: "glass and modern, like a Mac
 * Spotlight" · "no EASE in and out of the menu … crude and harsh" · the photo
 * "heavy and unnecessary" · the sub-menu "far away" · mobile "horrendous" ·
 * "UI round, photos clean".
 *
 *   · ONE rounded glass panel (heavy glass, DESIGN § Texture) floats over the
 *     page, which blurs and dims under a veil. Centred and contained.
 *   · Desktop: sections in the left column; a section's sub-items open right
 *     beside it (nav.js writes each sub-list's --y = its row's top).
 *   · Phone: a one-column accordion in a full-height sheet; chevrons; the
 *     open group eases open (grid-rows 0fr → 1fr) and nav.js glides it to centre.
 *   · Search is the panel's top row; typing turns the body into results that
 *     grow the panel. A highlight slides between rows; ember lives only on
 *     the selected row.
 *
 * Values: DESIGN.md only. Radius = --r-ctl / --r-panel / --r-tip, motion =
 * --ease + --dur-* (all on :root in demo3.css, mirrored from DESIGN.md D1/D4).
 * Photos stay square (law D1). No grain here — the glass reads the page's own
 * grain through its blur (law D3). No monospace, no counts (D6, D7).
 * 🔴 TWO BARS, NOT THREE (no_barcodes) — the glyph is two spans morphing to an X.
 */

.mb2-nav-root {
  --nav-bone: #EDE7D8;
  --nav-bone-70: rgba(237, 231, 216, .70);
  --nav-bone-44: rgba(237, 231, 216, .44);
  --nav-bone-14: rgba(237, 231, 216, .14);
  --nav-bone-10: rgba(237, 231, 216, .10);
  --nav-bone-06: rgba(237, 231, 216, .06);
  --nav-ember-t: #FF7D11;
  --nav-disp: "Hanken Grotesk", Inter, system-ui, sans-serif;
  --nav-body: "Instrument Sans", Inter, system-ui, sans-serif;
  --nav-gutter: clamp(20px, 4vw, 64px);
  /* the panel: centred, contained */
  --nav-pw: min(940px, calc(100vw - 2 * var(--nav-gutter)));
  --nav-top: clamp(56px, 11vh, 128px);
  /* focus ring: a bone light, not ember (ember is the selected row's) */
  --nav-ring: 0 0 0 2px rgba(237, 231, 216, .72);
}

/* ── Trigger — fixed top-right, thin glass pill. When the menu opens nav.js
   glides it (`translate`) into the panel's top-right seat, where it is the X.
   51 = one above its own overlay (50). ── */
.mb2-nav__trigger {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-gutter));
  right: var(--nav-gutter);
  z-index: 51;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-ctl);
  padding: 0;
  cursor: pointer;
  color: var(--nav-bone);
  background: linear-gradient(180deg, rgba(26, 26, 26, .34), rgba(10, 10, 10, .46));
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -8px rgba(0, 0, 0, .5);
  translate: 0 0;
  transition:
    translate var(--dur-m-out) var(--ease),
    background-color var(--dur-s) var(--ease),
    box-shadow var(--dur-s) var(--ease),
    scale var(--dur-s) var(--ease);
}
.mb2-nav__trigger:hover { background-color: rgba(237, 231, 216, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 22px -8px rgba(0, 0, 0, .55); }
.mb2-nav__trigger:active { scale: .94; transition-duration: var(--dur-m-out), var(--dur-s-out), var(--dur-s-out), var(--dur-s-out); }
.mb2-nav__trigger:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--nav-ring); }
.mb2-nav-root.is-pointer .mb2-nav__trigger:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -8px rgba(0, 0, 0, .5); }
.mb2-nav__trigger[aria-expanded="true"] {
  translate: var(--nav-tx, 0) var(--nav-ty, 0);
  background-color: var(--nav-bone-06);
  transition-duration: var(--dur-m), var(--dur-s), var(--dur-s), var(--dur-s);
}

/* fix2 (Carter 2026-11-01: "the icons (which should never be obnoxious) are tiny"): the burger/close glyph
   is 22 px with 2 px bars — the same box and stroke as the search · account · cart line icons (.mb2-ico,
   omtb_site_menu_icon() in demo3-nav.php), so the header reads as one family inside 44–48 px hit areas. */
.mb2-nav__glyph { position: relative; width: 22px; height: 14px; }
.mb2-nav__glyph span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--r-ctl);
  background: currentColor;
  transition: transform var(--dur-m-out) var(--ease), top var(--dur-m-out) var(--ease);
}
.mb2-nav__glyph span:first-child { top: 0; }
.mb2-nav__glyph span:last-child { top: 12px; }
.mb2-nav__trigger[aria-expanded="true"] .mb2-nav__glyph span { top: 6px; transition-duration: var(--dur-m); }

/* ── The closed-header cart (fix2, Carter: "Cart should be more obvious and available on the menu… badge
   showing how much is in the cart… on top of the menu").  On the homepage it floats as the trigger's twin,
   directly under it — v4-chrome.js keeps the chapter names out of a clear zone sized to the trigger alone,
   so a twin beside it would sit on the names.  Off the homepage it is a button in the bar (site-chrome.css).
   The count is ember (DESIGN: ember = the one thing to act on) with ink type (6.3:1); the burger carries a
   dot so the cart is announced even where the count is not in view.  nav.js keeps both live. ── */
.mb2-nav__bag {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-gutter) + 56px);
  right: var(--nav-gutter);
  z-index: 50;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  color: var(--nav-bone);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(26, 26, 26, .34), rgba(10, 10, 10, .46));
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -8px rgba(0, 0, 0, .5);
  transition: background-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), opacity var(--dur-m-out) var(--ease);
}
.mb2-nav__bag:hover { background-color: rgba(237, 231, 216, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 22px -8px rgba(0, 0, 0, .55); }
.mb2-nav__bag:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--nav-ring); }
.mb2-nav-root:has(.mb2-nav__trigger[aria-expanded="true"]) .mb2-nav__bag { opacity: 0; pointer-events: none; }
/* 3b item A (2026-11-02): on a phone the chapter title sits in the band BELOW the trigger's row (demo3.css
   .mb4v-band top 72 px at <= 899 px), so a bag under the trigger landed on PHOTOGRAPHY (MEASURED, live 390: cart
   y 76-124 vs title y 84-127).  There the bag is the trigger's twin in the trigger's own row instead, one 8 px
   gap to its left, and the band's rows hold no control at all.  Homepage only (html.mb2). */
@media (max-width: 899px) {
  html.mb2 .mb2-nav__bag { top: calc(env(safe-area-inset-top, 0px) + var(--nav-gutter)); right: calc(var(--nav-gutter) + 56px); }
}
.mb2-nav__bag .mb2-ico { display: block; width: 22px; height: 22px; }
/* the badge's anchor — but NOT on the homepage's floating bag: this rule sits after `.mb2-nav__bag` at the
   same specificity, so it beat `position: fixed` and the bag fell into the document flow (MEASURED on live
   2026-11-01, Stage 3a: inside the M at first paint on Fast 4G, then pushed to y 1,702 — never under the
   trigger).  A fixed box is already the badge's containing block. */
.mb2-cart:not(.mb2-nav__bag) { position: relative; }
.mb2-cart__n {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--r-ctl);
  background: #FF5B04;
  color: #0A0A0A;
  font: 700 11px/18px var(--nav-disp);
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, .88);
  pointer-events: none;
}
.mb2-cart__n[hidden], .mb2-nav__dot[hidden], .mb2-nav__cart b[hidden] { display: none; }
.mb2-cart__n.is-bump { animation: mb2-cart-bump var(--dur-l) var(--ease); }
@keyframes mb2-cart-bump { 0% { transform: scale(.6); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mb2-nav__dot {
  position: absolute;
  top: 5px; right: 5px;                 /* the trigger's corner, clear of the glyph's top bar */
  width: 8px; height: 8px;
  border-radius: var(--r-ctl);
  background: #FF5B04;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, .88);
  transition: opacity var(--dur-s) var(--ease);
}
.mb2-nav__trigger[aria-expanded="true"] .mb2-nav__dot { opacity: 0; }
.mb2-nav__trigger[aria-expanded="true"] .mb2-nav__glyph span:first-child { transform: rotate(45deg); }
.mb2-nav__trigger[aria-expanded="true"] .mb2-nav__glyph span:last-child { transform: rotate(-45deg); }

/* ── Overlay = veil + panel. Close is the reverse, one step faster. ── */
.mb2-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  text-align: left; /* the hero centres its text; reset once here */
  color: var(--nav-bone);
  font-family: var(--nav-body);
  visibility: hidden;
  transition: visibility 0s linear var(--dur-m-out);
}
.mb2-nav.is-open { visibility: visible; transition-delay: 0s; }
.mb2-nav:not(.is-open) { pointer-events: none; }
:where(.mb2-nav) a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:where(.mb2-nav) ul { list-style: none; margin: 0; padding: 0; }

/* the page blurs and dims — the blur is fixed, only the veil's opacity eases */
.mb2-nav__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .52);
  -webkit-backdrop-filter: blur(18px) saturate(.85);
  backdrop-filter: blur(18px) saturate(.85);
  opacity: 0;
  touch-action: none;
  transition: opacity var(--dur-m-out) var(--ease);
}
.mb2-nav.is-open .mb2-nav__veil { opacity: 1; transition-duration: var(--dur-m); }

/* the panel — heavy dark glass, a hairline light edge, a soft shadow */
.mb2-nav__panel {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-top));
  left: 50%;
  width: var(--nav-pw);
  margin-left: calc(var(--nav-pw) / -2);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--nav-top) - env(safe-area-inset-top, 0px) - 32px);
  box-sizing: border-box;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(30, 30, 30, .62), rgba(8, 8, 8, .76));
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(237, 231, 216, .08),
    0 30px 80px -24px rgba(0, 0, 0, .7),
    0 8px 24px -12px rgba(0, 0, 0, .5);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(.985);
  transform-origin: 50% 0;
  transition: opacity var(--dur-m-out) var(--ease), transform var(--dur-m-out) var(--ease);
}
.mb2-nav.is-open .mb2-nav__panel {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-m), var(--dur-l);
}

/* ── the top row: mark · search · cart · (the X lands in the slot) ── */
.mb2-nav__bar {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 48px;
  align-items: center;
  column-gap: 14px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--nav-bone-10);
}
.mb2-nav__mark { display: block; width: 48px; height: 32px; color: var(--nav-bone); opacity: .92; border-radius: var(--r-tip); transition: opacity var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease); }
.mb2-nav__mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.mb2-nav__mark:hover { opacity: 1; }
.mb2-nav__mark:focus-visible { outline: none; box-shadow: var(--nav-ring); }
.mb2-nav__xslot { width: 48px; height: 48px; }

.mb2-nav__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  min-width: 0;
  padding: 0 8px 0 18px;
  box-sizing: border-box;
  border-radius: var(--r-ctl);
  background: var(--nav-bone-06);
  box-shadow: inset 0 0 0 1px var(--nav-bone-10);
  cursor: text;
  transition: background-color var(--dur-s) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.mb2-nav__search:hover { background-color: rgba(237, 231, 216, .08); }
.mb2-nav__search:focus-within {
  background-color: rgba(237, 231, 216, .09);
  box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .24), 0 0 0 4px rgba(237, 231, 216, .05);
}
.mb2-nav__search-i { flex: none; width: 18px; height: 18px; color: var(--nav-bone-70); transition: color var(--dur-s) var(--ease); }
.mb2-nav__search:focus-within .mb2-nav__search-i { color: var(--nav-bone); }
.mb2-nav__q {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  color: var(--nav-bone);
  caret-color: var(--nav-bone);
  font: 500 18px/1 var(--nav-body);
}
.mb2-nav__q::placeholder { color: var(--nav-bone-44); }
.mb2-nav__q::-webkit-search-cancel-button { -webkit-appearance: none; }
.mb2-nav__kbd {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--r-ctl);
  font: 600 12px/1.2 var(--nav-body);
  color: var(--nav-bone-70);
  background: var(--nav-bone-06);
  box-shadow: inset 0 0 0 1px var(--nav-bone-10);
}
.mb2-nav__kbd[data-esc] { display: none; }
.mb2-nav.is-search .mb2-nav__kbd[data-k] { display: none; }
.mb2-nav.is-search .mb2-nav__kbd[data-esc] { display: inline-block; }

.mb2-nav__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-ctl);
  font: 700 12px/1 var(--nav-disp);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nav-bone-70);
  transition: color var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.mb2-nav__cart b { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--r-ctl); background: #FF5B04; color: #0A0A0A; font: 700 11px/18px var(--nav-disp); letter-spacing: 0; text-align: center; }
.mb2-nav__cart:hover { color: var(--nav-bone); background-color: var(--nav-bone-06); }
.mb2-nav__cart:focus-visible { outline: none; box-shadow: var(--nav-ring); }

/* items rise in sequence on open; on close they leave together, faster */
.mb2-nav__bar > *:not(.mb2-nav__xslot),
.mb2-nav__sl {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--dur-s-out) var(--ease), transform var(--dur-s-out) var(--ease),
    color var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.mb2-nav.is-open .mb2-nav__bar > *:not(.mb2-nav__xslot) {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-m), var(--dur-m), var(--dur-s), var(--dur-s), var(--dur-s);
  transition-delay: 40ms, 40ms, 0s, 0s, 0s;
}
.mb2-nav.is-open .mb2-nav__sl {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-m), var(--dur-m), var(--dur-s), var(--dur-s), var(--dur-s);
  transition-delay: calc(80ms + var(--i) * 26ms), calc(80ms + var(--i) * 26ms), 0s, 0s, 0s;
}
/* once risen, a hover answers at once — no stagger delay on the colour */
.mb2-nav.is-settled .mb2-nav__sl { transition-delay: 0s; }

/* ── the body: the IA, or the results. Its height follows its content
   (nav.js writes it), so the panel grows with the results, eased. ── */
.mb2-nav__body {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-bone-14) transparent;
  /* D4b — a row that scrolls under the search pill dissolves instead of being cut.  nav.js writes --fade-t /
     --fade-b = how far the list runs past that edge, capped at 44 px (a whole 20 px row plus its air), so the
     list at rest is unmasked and the fade grows in with the scroll — never a band over the first row. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%);
  transition: height var(--dur-m) var(--ease);
}
.mb2-nav__body.is-instant { transition: none; }

/* ── the IA (desktop): sections left, the active section's items beside it ── */
.mb2-nav__ia {
  position: relative;
  padding: 14px 12px 16px;
  --c2: 42%;
}
.mb2-nav.is-search .mb2-nav__ia { display: none; }
.mb2-nav__secs { width: var(--c2); }   /* NOT positioned: the sub-lists' containing block is the IA */

/* the marker — one glass row that slides to the active section */
.mb2-nav__mk {
  position: absolute;
  top: 0;
  left: 12px;
  width: calc(var(--c2) - 0px);
  height: 52px;
  border-radius: var(--r-tip);
  background: var(--nav-bone-06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translate3d(0, var(--mk-y, 0), 0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease), height var(--dur-m) var(--ease);
}
.mb2-nav.is-open .mb2-nav__ia.has-mk .mb2-nav__mk { opacity: 1; }
.mb2-nav__mk.is-instant { transition: opacity var(--dur-s) var(--ease); }

.mb2-nav__sl {
  position: relative;
  z-index: 1;   /* above the sliding marker */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px 0 16px;
  box-sizing: border-box;
  border-radius: var(--r-tip);
  font: 800 clamp(22px, 1.75vw, 28px)/1 var(--nav-disp);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--nav-bone-44);
}
.mb2-nav__chev { flex: none; width: 16px; height: 16px; color: var(--nav-bone-44); opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity var(--dur-s-out) var(--ease), transform var(--dur-s-out) var(--ease), color var(--dur-s) var(--ease); }
.mb2-nav__sl:hover { color: var(--nav-bone-70); }
.mb2-nav__sec.is-on > .mb2-nav__sl { color: var(--nav-bone); }
.mb2-nav__sec.is-on > .mb2-nav__sl .mb2-nav__chev { opacity: 1; transform: none; color: var(--nav-bone-70); transition-duration: var(--dur-m); }
.mb2-nav__sl:focus-visible { outline: none; box-shadow: var(--nav-ring); }

/* the sub-lists: all live in the DOM (no-JS + crawlable). Each sits beside
   its own row (--y from nav.js); the active one rises in, the last one leaves faster */
.mb2-nav__sub {
  position: absolute;
  top: 0;
  left: calc(var(--c2) + 28px);
  right: 12px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(-8px, var(--y, 14px), 0);
  transition: opacity var(--dur-s-out) var(--ease), transform var(--dur-s-out) var(--ease), visibility 0s linear var(--dur-s-out);
}
.mb2-nav:not(.is-open) .mb2-nav__sub { visibility: hidden; }
.mb2-nav.is-open .mb2-nav__sec.is-on > .mb2-nav__sub {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, var(--y, 14px), 0);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility 0s;
}
.mb2-nav__it {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 11px 16px 12px;
  box-sizing: border-box;
  border-radius: var(--r-tip);
  transition: background-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.mb2-nav__it-t { font: 700 18px/1.2 var(--nav-disp); letter-spacing: -.005em; color: var(--nav-bone); }
.mb2-nav__it-s { font: 500 14px/1.35 var(--nav-body); color: var(--nav-bone-70); transition: color var(--dur-s) var(--ease); }
.mb2-nav__it:hover { background-color: var(--nav-bone-06); }
.mb2-nav__it:hover .mb2-nav__it-s { color: var(--nav-bone); }
.mb2-nav__it:active { transform: scale(.985); }
.mb2-nav__it:focus-visible { outline: none; box-shadow: var(--nav-ring); }
.mb2-nav__spacer { display: block; height: 0; }

/* ── the search results (Spotlight) — inside the body, groups stagger in ── */
.mb2-nav__res { display: none; }
.mb2-nav.is-search .mb2-nav__res {
  position: relative;
  display: block;
  padding: 8px 12px 14px;
}
.mb2-nav__grp { position: relative; z-index: 1; padding-top: 10px; }
.mb2-nav__grp[hidden] { display: none; }
.mb2-nav.is-search .mb2-nav__grp { animation: mb2-rise var(--dur-m) var(--ease) both; animation-delay: calc(var(--g) * 60ms); }
@keyframes mb2-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.mb2-nav__res h2 {
  margin: 0;
  padding: 8px 16px 6px;
  font: 700 11px/1 var(--nav-disp);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-bone-44);
}
.mb2-nav__res a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: var(--r-tip);
  outline: none;
}
.mb2-nav__res b {
  min-width: 0;
  font: 600 16px/1.25 var(--nav-disp);
  color: var(--nav-bone-70);
  transition: color var(--dur-s) var(--ease);
}
.mb2-nav__res mark { background: none; color: var(--nav-bone); font-weight: 800; }
.mb2-nav__res span { font: 500 13px/1.35 var(--nav-body); color: var(--nav-bone-44); }
.mb2-nav__res [data-r="places"] a { justify-content: space-between; }
.mb2-nav__res [data-r="places"] span { flex: none; text-align: right; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb2-nav__res [data-r="posts"] a > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mb2-nav__res [data-r="posts"] a > i { flex: none; display: block; width: 64px; height: 42px; background: var(--nav-bone-06) center / cover no-repeat; }
/* ember lives here only: the selected row */
.mb2-nav__res a.is-sel b, .mb2-nav__res a.is-sel mark { color: var(--nav-ember-t); }
.mb2-nav__res a.is-sel span { color: var(--nav-bone-70); }

.mb2-nav__res [data-r="photos"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 6px 16px 4px; }
.mb2-nav__res [data-r="photos"] a { display: block; padding: 0; min-height: 0; border-radius: 0; background: var(--nav-bone-06); overflow: hidden; }
/* the ratio sits on the IMAGE, never the grid item (DIGEST trap 8: WebKit) */
.mb2-nav__res [data-r="photos"] img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.mb2-nav__res [data-r="photos"] img.is-ready { opacity: 1; }
.mb2-nav__res [data-r="photos"] a.is-sel img { transform: scale(1.04); }
.mb2-nav__res [data-r="photos"] .is-wait { aspect-ratio: 3 / 2; background: var(--nav-bone-06); }
.mb2-nav__res-none { margin: 0; padding: 22px 16px 14px; font: 600 17px/1.3 var(--nav-disp); color: var(--nav-bone-70); }
.mb2-nav__res-none[hidden] { display: none; }

/* the highlight — one glass row that slides between results */
.mb2-nav__hl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--hl-w, 0);
  height: var(--hl-h, 0);
  border-radius: var(--r-tip);
  background: rgba(237, 231, 216, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translate3d(var(--hl-x, 0), var(--hl-y, 0), 0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-s) var(--ease), width var(--dur-s) var(--ease), height var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.mb2-nav__hl.is-on { opacity: 1; }
.mb2-nav__hl.is-instant { transition: opacity var(--dur-s) var(--ease); }
/* on a photo the highlight is a ring just outside the frame (the photo stays square) */
.mb2-nav__hl.is-ph { background: none; box-shadow: 0 0 0 2px var(--nav-ember-t); z-index: 2; }

/* ── The chapter carousel's names never sit under this trigger (CRITIC #5, 2026-10-27) ──
   v4-chrome.js fades each name WHOLE before the clear zones, so no mask may come back. */
html .mb4v-band { -webkit-mask-image: none; mask-image: none; }

/* scroll lock — arms only while the overlay is open */
html.mb2-nav-lock { overflow: hidden; }

/* ── tablet / phone (≤ 899): a full-height sheet, a one-column accordion ── */
@media (max-width: 899px) {
  .mb2-nav-root { --nav-pw: calc(100vw - 20px); --nav-top: 10px; }
  /* the sheet hugs its content (no empty glass below the list); it grows with
     an open group or the results, up to the screen, then its body scrolls */
  .mb2-nav__panel { max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .mb2-nav__bar {
    grid-template-columns: auto minmax(0, 1fr) auto 48px;
    row-gap: 10px;
    padding: 8px 8px 12px 14px;
  }
  .mb2-nav__search { grid-column: 1 / -1; grid-row: 2; height: 46px; }
  .mb2-nav__cart { grid-column: 3; grid-row: 1; }
  .mb2-nav__xslot { grid-column: 4; grid-row: 1; }
  .mb2-nav__kbd { display: none !important; }
  .mb2-nav__body { flex: 0 1 auto; }

  .mb2-nav__ia { padding: 8px 8px 16px; }
  .mb2-nav__secs { width: auto; }
  .mb2-nav__mk { display: none; }
  .mb2-nav__sec { border-bottom: 1px solid var(--nav-bone-10); }
  .mb2-nav__sec:last-child { border-bottom: 0; }
  .mb2-nav__sl { min-height: 50px; padding: 0 12px 0 10px; font-size: 20px; color: var(--nav-bone-70); }
  .mb2-nav__chev { opacity: 1; transform: rotate(90deg); color: var(--nav-bone-44); transition: transform var(--dur-m-out) var(--ease), color var(--dur-s) var(--ease); }
  .mb2-nav__sec.is-on > .mb2-nav__sl .mb2-nav__chev { transform: rotate(-90deg); color: var(--nav-bone); transition-duration: var(--dur-m), var(--dur-s); }
  .mb2-nav__sub {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: grid-template-rows var(--dur-m-out) var(--ease);
  }
  .mb2-nav.is-open .mb2-nav__sec.is-on > .mb2-nav__sub { grid-template-rows: 1fr; transform: none; transition: grid-template-rows var(--dur-m) var(--ease); }
  .mb2-nav__sub-in { min-height: 0; overflow: hidden; }
  .mb2-nav__sub ul { padding: 0 0 10px; }
  .mb2-nav__sub li { opacity: 0; transform: translate3d(0, -4px, 0); transition: opacity var(--dur-s-out) var(--ease), transform var(--dur-s-out) var(--ease); }
  .mb2-nav__sec.is-on .mb2-nav__sub li { opacity: 1; transform: none; transition-duration: var(--dur-m); transition-delay: calc(40ms + var(--j) * 30ms); }
  .mb2-nav__it { min-height: 44px; padding: 8px 10px 9px 22px; gap: 2px; }
  .mb2-nav__it-t { font-size: 16px; }
  .mb2-nav__it-s { font-size: 13px; color: var(--nav-bone-44); }
  .mb2-nav__spacer { transition: none; }

  .mb2-nav.is-search .mb2-nav__res { padding: 4px 8px 16px; }
  .mb2-nav__res [data-r="photos"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 10px 4px; }
  .mb2-nav__res [data-r="photos"] li:nth-child(n+7) { display: none; }
  .mb2-nav__res [data-r="photos"] .is-wait:nth-child(n+4) { display: none; }   /* loading = one clean row of three */
  .mb2-nav__res a { padding: 8px 10px; }
  .mb2-nav__res h2 { padding: 8px 10px 6px; }
  .mb2-nav__res [data-r="posts"] a > i { width: 56px; height: 37px; }
}

/* reduced motion: fades only — nothing travels, nothing scales */
@media (prefers-reduced-motion: reduce) {
  .mb2-nav__panel, .mb2-nav.is-open .mb2-nav__panel,
  .mb2-nav__bar > *, .mb2-nav__sl, .mb2-nav.is-open .mb2-nav__sl,
  .mb2-nav__sub, .mb2-nav.is-open .mb2-nav__sec.is-on > .mb2-nav__sub,
  .mb2-nav__sub li, .mb2-nav__chev, .mb2-nav__it, .mb2-nav__trigger { transform: none !important; scale: none !important; }
  .mb2-nav__trigger, .mb2-nav__trigger[aria-expanded="true"] { transition-property: background-color, box-shadow; }
  .mb2-cart__n.is-bump { animation: none; }
  .mb2-nav__mk, .mb2-nav__hl, .mb2-nav__body { transition-property: opacity; }
  .mb2-nav.is-search .mb2-nav__grp { animation-name: mb2-fade; }
  @keyframes mb2-fade { from { opacity: 0; } to { opacity: 1; } }
  .mb2-nav__sub { transition-property: opacity, visibility; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .mb2-nav__sub, .mb2-nav.is-open .mb2-nav__sec.is-on > .mb2-nav__sub { transition: none; }
}