/* ==========================================================================
   NAVIGATION
   A floating glass bar, inset from the viewport edge, carrying its ground at
   all times. Two zones: logo · one CTA. No links — targets were never agreed
   and the bar was built without them by direction (R6e).
   ========================================================================== */

/* R6c — THE BAR FLOATS. By direction, from a supplied reference.
   Was: a full-bleed rail flush to the top edge, transparent at rest, taking a
   ground + blur + bottom border only on scroll.
   Now: an inset rounded bar carrying its ground at all times.

   .nav is no longer the visible element — it is the fixed frame that holds
   the bar off the viewport edge. .nav__inner is the bar. That split is what
   lets the bar have corners: a full-bleed element cannot be rounded.

   GLASS, NOT FILL. The eyebrow it is modelled on is a solid #1A1A1A; this is
   black at 60% + a 28px blur + 180% saturation (R6d), because the header sits
   OVER content and the eyebrow sits in the flow. "Keep it black" is why the
   ground is a black rgba rather than a translucent surface-03 — no new hue
   was introduced. It takes the eyebrow's hairline and its 8px radius, so the
   two read as one family.

   0.72 → 0.60 → 0.45, AND THE LAST STEP WAS ONLY AVAILABLE BECAUSE THE
   CONSTRAINT MOVED. The 0.60 floor was measured against the SAND PHONE LINK
   over §11's 90%-white cells; sand failed first and capped it. R6e deleted
   that element. What sits over the glass now is the logo — a graphic, 3:1
   rather than 4.5:1 — and the CTA, which carries its own ground. White over
   the worst case measures 4.03:1 at 0.45, still past the bar for TEXT.

   Re-measure against the LOGO over §11 before opening it further, not against
   the black the Hero happens to sit on. The full table is in tokens.css.

   ALIGNMENT, DELIBERATE: .nav__inner keeps the shared .container, so at
   viewports past 1312 the bar's 1280 box shares its centre and its padding
   with every section below — the logo lands on the same line as the H1.
   Overriding the container's padding to hug the bar tighter, as the
   reference does, would have broken that. */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--layer-nav);
  padding-block-start: var(--space-sm);
  padding-inline: var(--space-sm);
  pointer-events: none;   /* the frame is not a surface; the bar is */
}

.nav__inner {
  pointer-events: auto;
  inline-size: 100%;
  min-block-size: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background-color: var(--color-surface-glass);
  border: var(--border-hairline) solid var(--color-border-default);
  border-radius: var(--radius-control);
  /* Blur AND saturate — R6d. The blur is what makes content read as passing
     behind the bar; the saturation is what stops the scrim greying it into a
     smudge. A blur alone at this opacity looks like a dirty panel. */
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
          backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  transition: border-color var(--duration-base) var(--ease-standard);
}

/* NO BACKDROP-FILTER SUPPORT → CLOSE THE GLASS. Without the blur the ground
   is a flat 60% black and the page runs through it unsoftened, which is
   illegible rather than merely different. The fallback is the opaque card
   surface: it gives up the effect and keeps the bar readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__inner { background-color: var(--color-surface-card); }
}

/* THE SCROLL BEHAVIOUR SURVIVES, REDUCED. §7 lists "border + blur on scroll"
   as §1's only motion, and a bar that already carries both has nothing left
   to arrive. Rather than let the section go motionless, the border steps
   default → strong on scroll: still a border transition, still on the same
   300ms token, just no longer from nothing. Recorded in design-rules R6c. */
.nav.is-scrolled .nav__inner { border-color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   LOGO
   NOTE: only a 2.9:1 horizontal lockup exists. A stacked or mark-only variant
   is required for this bar — see CLAUDE.md "Unresolved".
   -------------------------------------------------------------------------- */
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { block-size: var(--nav-logo-height); inline-size: auto; }

/* --------------------------------------------------------------------------
   ACTIONS — one control, R6e
   The phone text link is gone; .nav__phone and its hover rule went with the
   element rather than being left as dead selectors. The bar now carries a
   single .btn--solid CTA, identical to the Hero's.
   -------------------------------------------------------------------------- */
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }

/* THE ONLY OVERRIDE THE BAR STILL NEEDS. Page-wide, the primary CTA goes
   full-width below 768 (design-rules §9) — correct for a CTA sitting in a
   section, wrong for one sitting in a 64px bar next to a logo. Everything
   else the nav used to override — 48px label and icon heights — is deleted:
   .btn--solid sizes both blocks off --control-height, and forcing them to 48
   made the button 64px tall and filled the bar edge to edge.

   The tap target is safe without it: the whole control is 52px, past the
   48px minimum. It was the BLOCKS that were being padded to 48, not the
   button, and the button was always the target. */
.nav__actions .btn--primary { display: inline-flex; width: auto; }

/* --------------------------------------------------------------------------
   BELOW DESKTOP — logo only, centred. By direction.

   ⚠⚠ THE POSITION OF THIS BLOCK IS THE RULE, NOT A TIDINESS PREFERENCE.
   It was first written immediately after .nav__logo, which sits EARLIER in
   this file than .nav__actions. Media queries add NO specificity, so
   `.nav__actions { display: none }` inside a query and
   `.nav__actions { display: flex }` outside one are both (0,1,0) — and the
   later one wins. The base rule came second, so the button never hid, at any
   width. Moving the block below the rules it overrides is the entire fix.

   This project has now hit that same trap three times — .room__media and
   .principles__item are the other two. **A media query does not beat source
   order.**

   ≤991, NOT ≤767. The reported case was a viewport around 838px, inside the
   768–991 tablet band, where the first attempt correctly did nothing. 992 is
   the page's own desktop line — where type and section padding reach full
   scale — so "below desktop, logo only" lands on a boundary the system
   already has rather than inventing one.

   justify-content: center rather than removing space-between: with one child
   left, space-between resolves to flex-start and the logo sits hard against
   the padding.

   THE BAR DOES NOT CHANGE HEIGHT. .nav__inner is max(--nav-height, tallest
   child) and --nav-height is 64 here against a 40px logo, so the 52px control
   was never what set it.

   ⚠ The page loses its only persistent route to the form below 992. The form
   is still reachable from the Hero, §7 and §12, but a reader between them
   must scroll to one. Recorded rather than absorbed. */
@media (max-width: 991px) {
  .nav__inner { justify-content: center; }
  .nav__actions { display: none; }
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */