/* ============================================================
   TOP BAR — fixed announcement strip above the main nav, replacing the
   old inline "Coming 2026" pill. Solid blue, identical height/style on
   every breakpoint (not responsive on purpose — a plain technical
   strip, not an editorial element).
   ============================================================ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 41; /* above .site-nav (40) — it sits physically above it */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue);
  /* max(16px, env(...)) not just env(...) — env() resolves to 0 on a
     device with no notch/cutout (or in a browser without support), so
     the plain 16px inset is always the floor. On a notched iPhone held
     in landscape (where the sensor housing sits on a SIDE, not the top)
     this keeps the centred banner text from running under it — requires
     viewport-fit=cover on the meta tag (Layout.mjs), otherwise env()
     always evaluates to 0. */
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.top-bar-text {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-inverse);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* on the smallest phones the single-line ellipsis truncated the one
   instruction in the banner ("join the founding members waitlist") down
   to "...join the founding mem…" — confirmed at 320-360px wide. Let it
   wrap to two lines instead of losing the second half of the message;
   --topbar-h is a shared token (site-nav's own top offset, .scroll-stage
   padding — see base.css) so growing it here keeps every dependent
   measurement correct automatically. */
@media (max-width: 480px) {
  :root { --topbar-h: 46px; }
  .top-bar { padding-block: 6px; }
  .top-bar-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
}

/* ============================================================
   HEADER — persistent, near-invisible top navigation, fixed right
   below the top bar. Floats transparently over the hero; after ~48px
   of scroll a frosted backdrop (white 82% + 18px blur + hairline
   border) fades in over 300ms. Only opacity/blur ever animate — never
   height, never size, never the logo. The brand mark lives here alone
   now (the hero's own masthead was removed), so the bar reads as
   architectural chrome rather than decoration.
   ============================================================ */
.site-nav {
  /* the page scrolls inside .scroll-stage, not the document, so a body-level
     sticky wouldn't move — fixed-at-top is the sticky-at-top equivalent here */
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  /* 64px reads as an actual nav bar, not a half-empty banner — the previous
     80px only made sense back when the CTA inside it was sized like a hero
     button (48px); once the CTA below is right-sized for chrome (40px) a
     tighter bar keeps the whole thing visually tight instead of floaty. */
  height: 64px;
  z-index: 40;
}
/* the frosted panel is its own layer that fades opacity 0→1 on scroll, so
   background, blur and border all arrive together with no jump or reflow */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  pointer-events: none;
}
.site-nav.scrolled::before { opacity: 1; }

/* the bar's own inner row is a constrained, centred container — never
   edge-to-edge. `width` (not max-width) since --container already
   resolves the shrink-or-cap itself (min(100% - 80px, 1120px) desktop,
   flattening to a plain side-inset on tablet/mobile — see tokens.css). */
.site-nav-inner {
  position: relative; /* sits above the ::before backdrop */
  height: 100%;
  width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* logo is the only thing in the brand group now (the "Coming 2026"
   badge moved to .top-bar above) */
.site-nav-brand {
  display: flex;
  align-items: center;
}

/* logo — a quiet wordmark next to the nav CTA and 11px nav type, not a
   headline. Weight/tracking still matched to the wordmark as it appears on
   the product labels (thin 200, tracked ~0.45em off the label's own
   letterform gaps); nudged up slightly from 16-18px so it reads with actual
   presence now that the CTA beside it is sized like chrome, not a hero
   button — the old pairing (16px wordmark next to a 48px pill) was the
   imbalance, not the wordmark being wrong in isolation. */
.site-nav-logo {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 200;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* primary CTA — the existing outlined pill button, resized to actually fit
   a 64px chrome bar. It used to reuse the hero CTA's own box metrics (48px
   tall, 32px sides) — correct for a hero, but a persistent nav bar isn't a
   hero: at 48px the pill nearly filled the whole 80px bar and dwarfed the
   16px wordmark next to it. 40px/22px reads like a real nav action instead
   of an oversized button that happens to live in a nav. Hover is a very
   quiet fill, not the full black invert it used to do. margin-left:auto
   pushes it to the row's right edge, inside the constrained container —
   never against the viewport edge. Shown on mobile too (used to be
   desktop-only, swapped for a hamburger there) — there's no mobile menu to
   open any more, so this one action is persistent at every breakpoint. */
.site-nav-cta {
  font-family: inherit;
  /* 44px — Apple HIG's tap-target minimum. Was 40px; the bar (64px) has
     comfortable room to spare either way. */
  height: 44px;
  padding: 0 22px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-indent: 0.09em; /* re-centre the tracked caps inside the symmetric padding */
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-full);
  transition: background 200ms ease;
}
.site-nav-cta:hover { background: rgba(17, 17, 17, 0.05); }

@media (max-width: 767px) {
  .site-nav { height: 56px; }
  /* was 36px — under the 44px tap-target minimum */
  .site-nav-cta { height: 44px; padding: 0 16px; font-size: 10.5px; }
}

/* genuinely thin mode: short/landscape viewports (a resized laptop window
   or a landscape phone, e.g. iPhone Air at 912×420) — same trigger the hero
   already special-cases (see css/sections/hero.css's matching max-height:600
   query). A 64px bar eats a much bigger share of a 420px-tall viewport than
   of a normal 900px one, so it shrinks further here on top of the general
   resize above. Coupled with hero.css's clearance numbers in the same
   bucket — if this changes, update those too. */
@media (min-width: 768px) and (max-height: 600px) {
  .site-nav { height: 56px; }
  /* was 36px (with a 52px bar) — bumped both together to keep the
     44px tap-target minimum without leaving the button edge-to-edge
     with the bar. */
  .site-nav-cta { height: 44px; padding: 0 18px; font-size: 11px; }
}
/* chrome hide once the caps section ("More fun, more smiles") has fully
   scrolled past (js/nav.js toggles .at-final-chrome-hide on <html> via an
   IntersectionObserver on #s-caps) — on every viewport, not just short
   landscape ones: by the time the visitor is this far down the page
   (caps is the second-to-last section, right before the closing CTA),
   the persistent nav is no longer needed and the page reads calmer
   without it for the closing stretch. Was previously scoped to
   max-height:600 only (a narrower, short-viewport-specific fix); removed
   per explicit request to apply everywhere. */
html.at-final-chrome-hide .top-bar,
html.at-final-chrome-hide .site-nav {
  display: none;
}