/* ══════════════════════════════════════════════════════════════
   NAVIGATION — Lovable-blueprint style. Hamburger on left,
   centered logo, language + search on right.
   Opens a fullscreen overlay menu with editorial typography.
   ══════════════════════════════════════════════════════════════ */
.bi-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 500ms ease, border-color 500ms ease, backdrop-filter 500ms ease,
              transform 300ms ease;
  background: linear-gradient(180deg, hsl(var(--bg-hsl) / .6) 0%, transparent 100%);
  /* no-repeat is load-bearing (869e40hae): the gradient spans the padding
     box, but paints across the border box — and the 1px transparent
     border-bottom row below it gets the REPEATED gradient, i.e. a fresh
     .6-alpha start. That painted as a permanent 1px dark line under the
     transparent header at scroll-top. */
  background-repeat: no-repeat;
  border-bottom: 1px solid transparent;
}
.bi-nav.is-scrolled {
  background: hsl(var(--bg-hsl) / .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--gold-hsl) / .15);
}
/* 09-09 meeting (task 3057, closing 869etqynu's open mobile question):
   transparent doesn't work at phone sizes — photos render small and the
   header collides with them. Force a fully opaque bar at every scroll
   position on mobile; desktop keeps the transparent/veil treatment above
   this breakpoint (BrandStyle.php still owns the desktop-only auto-hide
   taskbar behavior, gated at min-width:1025px, so it never touches mobile). */
@media (max-width: 640px) {
  .bi-nav,
  .bi-nav.is-scrolled {
    background: hsl(var(--bg-hsl) / 1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
  }
}
.bi-nav__bar {
  position: relative;
  /* One declared height at every width (3336, Martien 11-09: 50px — was
     80px desktop / 64px phone). tokens.css owns the value; the measured
     --bi-header-h (header.php) picks it up automatically for the offsets. */
  height: var(--bi-nav-bar-h, 50px);
  display: flex;
  align-items: center;
  padding-inline: 32px;
}
@media (max-width: 640px) { .bi-nav__bar { padding-inline: var(--bi-shell-gutter); } }

/* Notched phones: pad the fixed header down from the true top edge so its
   content clears the status bar/notch, while .bi-nav's background still
   paints flush to the edge (env() resolves to 0 without viewport-fit=cover,
   so this is a no-op everywhere else). Skipped when the WP admin toolbar is
   showing — that offset is the separate, intentional .admin-bar rule below.
   (.bi-main's offset used to be duplicated here as a hard-coded 64px + inset
   sum — it's now driven by the single --bi-header-h var below, which already
   includes this same safe-area padding via the header's measured height.) */
@media (max-width: 640px) {
  body:not(.admin-bar) .bi-nav { padding-top: env(safe-area-inset-top); }
}

/* Round 6 (869ehnavq): the floating-pill treatment from 869ea1cap (side
   margins + rounded corners + a frosted edge) is reversed — the mobile
   header is a flush, full-width, square-cornered bar like desktop. .bi-nav
   already has no left/right inset or border-radius outside this block, so
   removing it is sufficient; no replacement rule needed. */

.bi-nav__menu {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  padding: 8px 4px;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: var(--bi-size-button, 11px); /* task 1638: was hardcoded 11px */
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  transition: color .2s;
}
.bi-nav__menu:hover { color: var(--gold); }
.bi-nav__menu-icon {
  position: relative;
  width: 22px; height: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bi-nav__menu-icon span {
  display: block;
  height: 1px; width: 100%;
  background: currentColor;
  transition: transform 300ms ease;
}
.bi-nav__menu.is-open .bi-nav__menu-icon span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}
.bi-nav__menu.is-open .bi-nav__menu-icon span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}
@media (max-width: 640px) { .bi-nav__menu-label { display: none; } }

/* Brand wordmark (869etqynh, Joe 01-09: wordmark in the nav, B-plate dropped).
   Both the desktop/tablet wordmark and the mobile B-emblem are transparent
   vectors with no plaque background, so — unlike the old bordered-plate
   lockup this replaces — they're vertically centered in the bar rather than
   pinned flush to its top edge.
   Horizontal placement (Martien 10-09): centered on the viewport at every
   width above the phone breakpoint. This supersedes the 16-08 alignment,
   where on split-hero desktop widths the mark's LEFT edge lined up with the
   hero-split line. The rule below is now the only positioning rule — the
   ≥1025px block only scales the mark; ≤640px takes it out of flow entirely
   (see the note there for why phone cannot centre a wordmark). */
.bi-nav__logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 0; /* no stray line-box gap under the img */
  text-decoration: none;
}
.bi-nav__logo-img {
  display: block;
  /* 30px tall → the 787:63 wordmark renders ~375px wide (Martien 01-09,
     testing failed: the old 80px — tuned for the 1600:321 bordered-plate
     lockup — blew the wordmark up to ~1000px). The responsive blocks below
     only ever shrink from here. */
  height: 30px;
  width: auto;
  /* Escape main.css's global `img { max-width:100% }`: for this abs-pos
     shrink-to-fit anchor "100%" resolves against the space left of the
     anchor's own offset, which silently capped the width and squished the
     lockup's aspect (measured live: 400x88 at 800px viewport). */
  max-width: none;
}
.bi-nav__logo-img--mobile { display: none; }
/* Desktop (≥1025px): viewport-centered, same as every other width.
   This used to pin the wordmark's LEFT edge to the hero split line
   (`left: var(--bi-hero-split, 38%)`), per the 16-08 feedback rounds where
   the approved mock had it starting exactly where the hero photo starts.
   Martien 10-09 asked for it dead-centre on the page instead, so that
   override is gone and the centered base rule above now applies at every
   width. Consequence worth knowing: the nav is no longer coupled to
   `--bi-hero-split` at all — changing the Brand Style hero_split setting
   moves the hero panels only, and the wordmark stays put.
   The height budget changes with it. Centered means the mark is bounded by
   whichever side is wider, and that is `.bi-nav__right`'s icon cluster
   (~310px with its text labels, +32px bar padding, +15px breathing room =
   357px). A centered mark spends that budget symmetrically, so the width it
   may span is 100vw - 2x357px; /12.492 converts that width budget to a
   height via BI_full_horizontal_Vector.svg's 787:63 aspect (869etqynh — was
   /5 for the old 1600:321 bordered-plate lockup this replaces). Capped at
   30px (~375px wide; Martien 01-09: the earlier 40px cap still read far too
   big), which it reaches from ~1090px viewport width up. */
@media (min-width: 1025px) {
  .bi-nav__logo-img { height: min(30px, calc((100vw - 714px) / 12.492)); }
}
/* Stacked-hero mid-range (641-1024px): no split line exists, so the
   wordmark is viewport-centered, scaled so its half-width never crosses the
   icon cluster's edge (~191px once its text labels are hidden below, + 32px
   bar padding → the wordmark may span 100vw - 2x~235px). Same /12.492
   aspect conversion and 30px cap as the ≥1025px rule above (full size from
   ~845px viewport width up). */
@media (max-width: 1024px) and (min-width: 641px) {
  .bi-nav__logo-img { height: min(30px, calc((100vw - 470px) / 12.492)); }
  /* The label-less icons are what makes the width budget above hold —
     with "Search / Ask AI / Info" spelled out the cluster is ~310px and
     even a shrunken wordmark collides. Same hide rule brand-home.css applies
     below 640px, extended over this range. */
  .bi-nav__search-toggle-label,
  .bi-nav__icon-label { display: none; }
}
/* Below 641px there is no single-row width at which a centered, still
   readable wordmark clears both the menu button and the icon cluster
   (869e6zb8z was this same collision back when the logo was text — its
   in-flow fix parked the logo left of center, rejected 16-08: must stay
   centered like the mock) — this is why phone uses the compact B-emblem
   instead of the wordmark (869etqynh, Joe 01-09), in flow at the left of a
   single-row bar (PR #1191) rather than absolutely centered.
   --bi-header-h is measured from the header's real rendered height, so
   .bi-main / hero offsets absorb the taller header automatically. */
@media (max-width: 640px) {
  .bi-nav__bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .bi-nav__logo {
    position: static;
    left: auto; top: auto;
    transform: none;
    order: 0;
    flex: 0 0 auto;
    display: block;
    margin-right: 8px;
  }
  .bi-nav__logo-img--desktop { display: none; }
  /* BI_emblem_vector.svg is 60:67 (not square) — width:auto
     preserves its native aspect instead of the old bordered-plate PNG's
     forced 40x40. */
  .bi-nav__logo-img--mobile { display: block; height: 40px; width: auto; }

  /* 3001: hamburger moves to the far right of the bar (was left-most, hard
     for a thumb to reach). No DOM move — the desktop layout relies on
     .bi-nav__menu being first in source order while .bi-nav__logo is
     absolutely positioned out of flow — so this is CSS-only, scoped to this
     same phone breakpoint. margin-left:auto absorbs the row's free space
     (same technique .bi-nav__right uses on desktop), pushing it to the bar's
     right edge regardless of how many icons remain in .bi-nav__right. */
  .bi-nav__menu {
    order: 3;
  }
}

.bi-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* The auto margin above is what pushes this to the far right on desktop
   (where the logo is absolutely positioned and out of flow). Once the logo
   re-enters the flex flow below 640px, that auto margin would swallow all the
   free space before `.bi-nav__bar`'s own `justify-content: space-between` gets
   a chance to distribute it, cancelling the space-between fix above and packing
   the menu button and logo back together at the left edge.

   That reasoning stopped applying when the phone bar moved to `flex-start` and
   the hamburger took the auto margin instead (3001). What was left was the auto
   margin sitting on the hamburger alone, so the free space opened up *between*
   the icons and the hamburger: measured at 430px the language, search and chat
   icons ran from 60px to 194px, hard against the B emblem, with 190px of empty
   bar to their right and the hamburger alone at the far edge. The icons read as
   belonging to the logo rather than to the controls.

   Martien, 10-09 (3193): "die icons met wereldbol vergrootglas en praatwolkje
   die moeten rechts uitgelijnd zijn." Moving the auto margin back onto this cluster
   collects all the free space in one place, directly after the emblem, so the
   three icons and the hamburger travel together as one right-aligned group and
   the last of them ends on the same gutter as everything below. The hamburger's
   own auto margin is dropped in the block above · with two auto margins in the
   row the space would split between them and neither group would be flush. */
@media (max-width: 640px) {
  /* Matches .bi-nav__right's own icon gap, so the hamburger reads as the fourth
     control in the cluster rather than a separate thing parked at the edge. */
  .bi-nav__menu { margin-left: 20px; }
}
.bi-nav__language { position: relative; }
.bi-nav__lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  padding: 6px 0;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: var(--bi-size-button, 11px); /* task 1638: was hardcoded 11px */
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  transition: color .2s;
}
.bi-nav__lang-trigger:hover { color: var(--gold); }
/* 3001: phone bar shows the globe icon alone — the "EN"-style short code
   next to it read as clutter next to the other bar icons. The dropdown
   itself (button/select) is untouched: it still lists every language's full
   name and still works exactly the same, only the trigger's own visible
   code is hidden. */
@media (max-width: 640px) {
  .bi-nav__lang-trigger #bi-language-label { display: none; }
}
.bi-nav__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: hsl(var(--bg-hsl) / .98);
  border: 1px solid hsl(var(--gold-hsl) / .2);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 200ms ease;
}
.bi-nav__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Mobile (869et6py8): `right: 0` above anchors to `.bi-nav__language`'s own
   right edge, which on phone widths sits well left of the viewport edge —
   the search/Ask AI/tour icons in `.bi-nav__right` occupy the space to its
   right, so the 180px panel drifts off-screen (left ≈ -45.7px at 375px),
   and main.css's global `overflow-x: clip` turns that overflow into clipped
   label text instead of a scrollbar. Anchoring to the viewport instead of
   that inner trigger wrapper fixes it regardless of how many icons sit to
   the trigger's right · the phone gutter token matches `.bi-nav__bar`'s own
   padding-inline at this breakpoint, so the panel's right edge lines up
   with the bar's own right inset exactly like the desktop rule's intent.
   (3191) Was a hardcoded 16px; it is the shared token now, so it cannot
   drift away from the bar again. */
@media (max-width: 640px) {
  .bi-nav__lang-menu {
    position: fixed;
    top: calc(var(--bi-header-h, 50px) + 8px);
    right: var(--bi-shell-gutter);
  }
}
.bi-nav__lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--fg);
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: var(--bi-size-button, 11px); /* task 1638: was hardcoded 11px */
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bi-nav__lang-menu button:hover,
.bi-nav__lang-menu button[aria-selected="true"] { background: hsl(var(--gold-hsl) / .08); color: var(--gold); }
/* Visually-hide the native <select> off the left edge so it never contributes
   to document width / horizontal overflow but remains in the DOM for the
   custom language menu to read from. */
.bi-nav__lang-select { position: absolute; left: -9999px; top: 0; opacity: 0; pointer-events: none; }

/* Icon + spelled-out label, not an icon alone — the bare magnifying glass
   used to read as too inconspicuous to notice at a glance (869egbvpp).
   Reuses the visual weight ("The Vault" link's uppercase/letter-spaced
   label) freed up by removing that link from this same row. Label hides
   below 640px, matching `.bi-nav__menu-label` next to it, so the mobile
   floating pill stays compact — the icon (with its 8px padding tap target)
   and the button's own aria-label keep it identifiable and accessible there. */
.bi-nav__search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  padding: 8px;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: var(--bi-size-button, 11px); /* task 1638: was hardcoded 11px */
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  transition: color .2s;
}
.bi-nav__search-toggle:hover { color: var(--gold); }
@media (max-width: 640px) { .bi-nav__search-toggle-label { display: none; } }

/* Ask AI icon-link — sits beside the search toggle so both of the site's
   core actions are one click away from every page (869egbcg6). Matches the
   neighboring .bi-tour-trigger-icon's circular tap-target sizing. */
.bi-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  color: var(--fg);
  text-decoration: none;
  transition: color .2s;
}
/* Round 6 (869ehnavq): no ring at rest or on hover — the gold color shift
   on the icon itself is affordance enough (also drops the round-5 patch
   that only masked this via a body.bi-brand-skin override elsewhere). */
.bi-nav__icon:hover, .bi-nav__icon:focus-visible { color: var(--gold); }

.bi-nav__search {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease;
  border-top: 1px solid transparent;
}
.bi-nav__search.is-open {
  max-height: 100px;
  border-top-color: hsl(var(--gold-hsl) / .15);
}
.bi-nav__search-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.bi-nav__search-glass { color: hsl(var(--fg-hsl) / .5); flex-shrink: 0; }
.bi-nav__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid hsl(var(--fg-hsl) / .2);
  color: var(--fg);
  font-family: var(--f-display);
  font-size: 20px;
  padding: 10px 0;
  /* 3124: `outline: none` removed from the base rule. focus.css draws the
     gold underline; the :focus rule below turns this 1px bottom rule gold
     at the same time, so the two read as one line thickening. */
}
.bi-nav__search-input::placeholder { color: hsl(var(--fg-hsl) / .35); font-style: italic; }
.bi-nav__search-input:focus { border-bottom-color: var(--gold); }
.bi-nav__search-go {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--gold);
  color: var(--bg);
  border: 0;
  width: 38px; height: 38px;
  cursor: pointer;
  transition: opacity .2s;
}
.bi-nav__search-go:hover { opacity: .85; }

/* ── FULLSCREEN OVERLAY ──────────────────────────────────────── */
.bi-nav-overlay {
  position: fixed;
  inset: 0;
  /* Dynamic viewport height, not just inset:0 — makes the box's size follow
     Safari's collapsing toolbar explicitly instead of the implicit (and on
     iOS, inconsistently-resolved) viewport a fixed-position inset:0 box
     otherwise sizes against, which is what left a gap above the close
     button / below the menu foot instead of the overlay reaching edge to
     edge (869ea1cap). */
  height: 100dvh;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  /* visibility (delayed until the fade-out ends) makes the CLOSED overlay
     truly inert: pointer-events:none on this container alone is NOT enough,
     because the unconditional pointer-events:auto on __list/__foot below
     re-enabled hit-testing inside it — the invisible menu rows sat over the
     homepage hero and swallowed its clicks (era rail lands on /bcc,
     /collection, /chat: 869e3xx0j). visibility:hidden also drops the closed
     menu's links from the Tab order, matching its aria-hidden="true". */
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.bi-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 700ms ease;
}
.bi-nav-overlay__shade {
  position: absolute; inset: 0;
  background: hsl(var(--bg-hsl));
}
.bi-nav-overlay__grain {
  position: absolute; inset: 0;
  opacity: .04; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}
.bi-nav-overlay__inner {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(32px, 5vw, 80px);
  max-height: 100svh;
  overflow-y: auto;
  /* Full block width/height means this otherwise swallows every click before it can
     reach .bi-nav-overlay__shade — pass clicks through except on the actual interactive
     children, so backdrop-click-to-close still works in the padding/whitespace around them. */
  pointer-events: none;
}
/* Scoped to .is-open: when closed, the parent overlay is pointer-events:none
   and a child's `auto` would re-enable hit-testing straight through it. */
.bi-nav-overlay.is-open .bi-nav-overlay__list,
.bi-nav-overlay.is-open .bi-nav-overlay__foot,
.bi-nav-overlay.is-open .bi-nav-overlay__help {
  pointer-events: auto;
}

/* 3001: phone-only "Help" control — a direct child of #bi-nav-overlay (not
   __inner), so it rides the overlay's own opacity/visibility/pointer-events
   fade (open/closed) without needing its own transition rules, same as
   __shade/__grain above. Hidden outright on desktop/tablet — the icon it
   replaces there (.bi-tour-trigger-icon) stays exactly where it already was,
   in the bar. Fixed-positioned in the gap directly below the persistent
   header bar (the hamburger/Close button lives there too, at the same right
   edge — see .bi-nav__menu's mobile order/margin above), same anchoring
   technique as .bi-nav__lang-menu's mobile position. */
.bi-nav-overlay__help { display: none; }
@media (max-width: 640px) {
  .bi-nav-overlay__help {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: calc(var(--bi-header-h, 50px) + 14px);
    right: var(--bi-shell-gutter);
    z-index: 1;
    background: none;
    border: 0;
    color: var(--fg);
    cursor: pointer;
    padding: 8px 4px;
    font-family: var(--f-label), system-ui, sans-serif;
    font-size: var(--bi-size-button, 11px);
    letter-spacing: var(--bi-ls-button, 1px);
    text-transform: uppercase;
    transition: color .2s;
  }
  .bi-nav-overlay__help:hover, .bi-nav-overlay__help:focus-visible { color: var(--gold); }
}
.bi-nav-overlay__eyebrow {
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}
.bi-nav-overlay__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.bi-nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: 0ms;
}
.bi-nav-overlay.is-open .bi-nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(150ms + var(--bi-step, 0) * 70ms);
}
.bi-nav-overlay__item a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  color: hsl(var(--fg-hsl) / .85);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid hsl(var(--fg-hsl) / .05);
  transition: color .3s ease, border-color .3s ease;
}
.bi-nav-overlay__item:last-child a { border-bottom: 0; }
.bi-nav-overlay__item a:hover,
.bi-nav-overlay__item a.is-active {
  color: var(--gold);
  border-bottom-color: hsl(var(--gold-hsl) / .4);
}
.bi-nav-overlay__num {
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
  width: 28px;
  flex-shrink: 0;
}
.bi-nav-overlay__label {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: 0;
  transition: font-style .4s ease, letter-spacing .4s ease;
}
.bi-nav-overlay__item a:hover .bi-nav-overlay__label {
  font-style: italic;
  letter-spacing: .005em;
}
.bi-nav-overlay__foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--gold-hsl) / .15);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: hsl(var(--fg-hsl) / .5);
}
.bi-nav-overlay__foot-label {
  color: hsl(var(--fg-hsl) / .8);
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .bi-nav-overlay__inner { padding-top: 96px; padding-bottom: 40px; }
  .bi-nav-overlay__eyebrow { margin-bottom: 32px; }
  .bi-nav-overlay__foot { margin-top: 36px; gap: 20px 40px; }

  /* Same notch clearance as .bi-nav above, applied to the overlay's own
     96px top clearance so its content doesn't sit under the status bar/notch
     either. Skipped when the WP admin toolbar is showing, matching .bi-nav. */
  body:not(.admin-bar) .bi-nav-overlay__inner {
    padding-top: calc(96px + env(safe-area-inset-top));
  }
  /* Clear the home-indicator area on notched phones so the enquiries/foot
     row isn't the last thing crammed against the bottom edge (869ea1cap). */
  .bi-nav-overlay__inner {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* The two-row phone header (logo row + controls row, see the .bi-nav__logo
   block above) is taller than the single bar the fixed 96px clearance above
   was calibrated for — derive the clearance from the header's measured
   height instead. --bi-header-h already includes the notch safe-area (it is
   the header's real rendered height, padding included), so this REPLACES
   the body:not(.admin-bar) env() variant above; both selectors are repeated
   here so this later block outranks each of them at equal specificity. */
@media (max-width: 640px) {
  .bi-nav-overlay__inner,
  body:not(.admin-bar) .bi-nav-overlay__inner {
    padding-top: calc(var(--bi-header-h, 50px) + 16px);
  }
  /* (3191) The overlay's own clamp bottoms out at 32px, so on a phone the
     menu items sat 14px inboard of the logo still visible in the bar behind
     them · opening the menu shifted the page's left edge. Vertical padding
     is untouched. */
  .bi-nav-overlay__inner { padding-inline: var(--bi-shell-gutter); }
}

/* Background scroll lock while the menu is open — overflow:hidden alone
   does not stop iOS Safari's rubber-band scroll behind a fixed overlay;
   body{position:fixed} (offset restored by setOverlayOpen in header.php)
   does (869ea1cap). */
html.bi-menu-open,
html.bi-menu-open body {
  overflow: hidden;
}
/* :not(.admin-bar): WordPress's own mobile admin bar (#wpadminbar switches to
   position:absolute at <=600px) expects body to stay in normal flow — giving
   it position:fixed here would make body the bar's containing block instead
   of the viewport and mis-position it for the whole time the menu stays
   open. This ticket's scope is the public/anonymous site (no admin bar), so
   the fixed-position lock only takes over there; the admin-bar case still
   gets the overflow:hidden above. */
html.bi-menu-open body:not(.admin-bar) {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100%;
}

body.bi-menu-open .bi-nav__logo,
body.bi-menu-open .bi-nav__right {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Hide the legacy chrome the new layout replaces */
.site-header, .site-header__nav, .site-header__inner, .site-header__logo,
.site-header__right, .site-header__language, .site-header__search-bar,
.site-header__icon-btn, .site-header__account { display: none !important; }

/* Push the main content below the fixed nav. Mobile uses --bi-header-h (set
   in header.php from the header's actual measured rendered height) instead
   of a hard-coded value, so it stays correct across notch safe-area insets,
   the WP admin bar shift, and the collapsible search row (869ea1cap). */
.bi-main { padding-top: var(--bi-nav-bar-h, 50px); }
@media (max-width: 640px) { .bi-main { padding-top: var(--bi-header-h, 50px); } }

/* When the WordPress admin bar is visible (logged-in users), shift the fixed
   nav below it so it doesn't overlap. Admin bar is 32 px on desktop, 46 px
   on mobile (≤782 px), matching WordPress core breakpoints. */
.admin-bar .bi-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .bi-nav { top: 46px; }
}

/* The fullscreen overlay must shift down by the same admin-bar offset as
   .bi-nav above, or its fixed padding-top clearance (calibrated for a
   non-shifted header) falls short once the header moves — reproducing this
   ticket's own "Close" vs "Index — The Living Archive" collision for
   logged-in users. Shifting both by the same amount preserves the header's
   existing clearance math regardless of admin-bar state. */
.admin-bar .bi-nav-overlay { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .bi-nav-overlay { top: 46px; }
}

/* ══════════════════════════════════════════════════════════════
   ERA RIBBON — adds editorial photographic backgrounds to the
   chronology section. Override of Frank's text-only styling.
   ══════════════════════════════════════════════════════════════ */
.bi-era-ribbon__item.has-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.bi-era-ribbon__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(var(--bg-hsl) / .35) 0%, hsl(var(--bg-hsl) / .55) 55%, hsl(var(--bg-hsl) / .9) 100%),
    linear-gradient(0deg, hsl(var(--bg-hsl) / .25), transparent 50%);
  pointer-events: none;
  transition: background 400ms ease;
}
.bi-era-ribbon__item.has-image:hover .bi-era-ribbon__shade {
  background:
    linear-gradient(180deg, hsl(var(--bg-hsl) / .15) 0%, hsl(var(--bg-hsl) / .35) 55%, hsl(var(--bg-hsl) / .85) 100%);
}
.bi-era-ribbon__body {
  position: relative; z-index: 1;
  padding: 20px 22px;
}
.bi-era-ribbon__item.has-image .bi-era-ribbon__count { color: var(--gold); }
.bi-era-ribbon__item.has-image .bi-era-ribbon__name { color: var(--fg); text-shadow: 0 1px 2px hsl(var(--bg-hsl) / .9); }
.bi-era-ribbon__item.has-image .bi-era-ribbon__note { color: hsl(var(--fg-hsl) / .8); }

/* ══════════════════════════════════════════════════════════════
   BCC FLOW STEPS — subtle bronze-tinted gradient backgrounds
   instead of flat text-only cards.
   ══════════════════════════════════════════════════════════════ */
/* (3128) The base layer was hsl( var(--bg2) ), but --bg2 is a whole colour,
   not a channel triple, so the substitution produced hsl(hsl(220 40% 8%)) ·
   invalid at computed-value time, which throws away the ENTIRE background
   shorthand, gradient included. These cards have been painting nothing at
   all. The token they wanted is the surface. Same defect three declarations
   down on .bi-stakeholder. */
.bi-bcc-flow--editorial .bi-bcc-flow__step {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(140deg, hsl(var(--gold-hsl) / .08) 0%, hsl(var(--bg-hsl) / .25) 100%),
    var(--sur);
  border: 1px solid hsl(var(--gold-hsl) / .12);
  transition: border-color 200ms ease, background 200ms ease;
}
.bi-bcc-flow--editorial .bi-bcc-flow__step:hover {
  border-color: hsl(var(--gold-hsl) / .35);
  background:
    linear-gradient(140deg, hsl(var(--gold-hsl) / .14) 0%, hsl(var(--bg-hsl) / .3) 100%),
    var(--sur);
}
.bi-bcc-flow--editorial .bi-bcc-flow__num {
  color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   STAKEHOLDERS — bronze-tinted card surface so they feel like
   institutional plates, not flat text.
   ══════════════════════════════════════════════════════════════ */
.bi-stakeholders--editorial .bi-stakeholder {
  position: relative;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, hsl(var(--gold-hsl) / .08), transparent),
    var(--sur);
  border: 1px solid hsl(var(--gold-hsl) / .15);
  padding: 28px 24px;
  transition: border-color 200ms ease, transform 300ms ease;
}
.bi-stakeholders--editorial .bi-stakeholder:hover {
  border-color: hsl(var(--gold-hsl) / .4);
  transform: translateY(-2px);
}

/* ── Nav search: reduce padding on phones ── */
@media (max-width: 640px) {
  .bi-nav__search-inner { padding: 12px var(--bi-shell-gutter); }
  .bi-nav__search-input { font-size: 16px; }
}

/* 09-09 meeting (task 3057): mobile nav icons read as too small — larger
   glyphs and tap targets at phone widths. Desktop keeps the existing sizes;
   final positioning still needs a pass against Joe's phone/desktop nav
   mockups once delivered (869etqynu). .bi-tour-trigger-icon (Info) is
   already dropped from the mobile bar entirely (task 3001, see tour.css) so
   it needs no sizing here. Selector is scoped 2 classes deep so it wins the
   cascade regardless of stylesheet load order. */
@media (max-width: 640px) {
  .bi-nav__menu-icon { width: 26px; height: 15px; }
  .bi-nav__menu.is-open .bi-nav__menu-icon span:first-child { transform: translateY(7px) rotate(45deg); }
  .bi-nav__menu.is-open .bi-nav__menu-icon span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .bi-nav__right .bi-icon { width: 20px; height: 20px; }
  .bi-nav__right .bi-nav__icon { width: 38px; height: 38px; }
}

/* Phone landscape: slide the header out of view so the hero image/video fills
   the full screen. max-height:500px discriminates phones (landscape height
   ≤430px) from tablets (landscape height ≥768px). pointer-events:none ensures
   the invisible bar doesn't block taps on the hero. JS in header.php sets
   --bi-header-h to 0 when this query matches, so .bi-main and hero push-downs
   collapse to the top edge automatically. The floating landscape toggle button
   (#bi-nav-landscape-toggle) takes over as the only entry point to the menu. */
@media (orientation: landscape) and (max-height: 500px) {
  .bi-nav {
    transform: translateY(-100%);
    pointer-events: none;
  }
  .bi-nav__landscape-toggle {
    display: flex;
  }
}

/* Floating menu button shown only in phone landscape when the header is hidden.
   Hidden at every other breakpoint — portrait phone uses the in-bar toggle,
   desktop never needs this. Sits above the overlay (z-index 102) so it stays
   reachable while the overlay animates in. */
.bi-nav__landscape-toggle {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  right: var(--bi-shell-gutter, 16px);
  z-index: 102;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: hsl(var(--bg-hsl) / .9);
  border: 1px solid hsl(var(--gold-hsl) / .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}
.bi-nav__landscape-toggle:hover { color: var(--gold); }
.bi-nav__landscape-toggle .bi-nav__menu-icon {
  width: 22px; height: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bi-nav__landscape-toggle .bi-nav__menu-icon span {
  display: block;
  height: 1px; width: 100%;
  background: currentColor;
  transition: transform 300ms ease;
}
.bi-nav__landscape-toggle.is-open .bi-nav__menu-icon span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}
.bi-nav__landscape-toggle.is-open .bi-nav__menu-icon span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}