/* ============================================================
   ORON — 1 · nav
   Fixed header. Invisible at rest → warm glass on scroll.
   Brandmark · 4 links anchored to the brand · Kom i gang · drop-sheet.
   ============================================================ */

.s-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);

  /* State vars — flipped by .is-scrolled, which app.js sets past 12px */
  --nav-surface: transparent;
  --nav-sat: 100%;
  --nav-blur: 0px;
  --nav-line: 0;
  --nav-brand-scale: 1;
  --nav-height: calc(var(--nav-h) + 12px);

  /* One source for the link's horizontal padding: the active rule is inset by
     exactly this much, so it always spans the label and nothing else. */
  --nav-link-pad: var(--s-3);
  /* 44px is the touch-target floor, not a spacing value — no --s-* token fits.
     Every hit area in the bar is sized from it so they can never drift apart. */
  --nav-hit: 44px;
}

/* 94 %, not the fashionable 80 %: the page scrolling underneath is 48 px black
   display type, and at 80 % it reads straight through the bar and collides
   with the links. This keeps a whisper of depth without the smear. */
.s-nav.is-scrolled {
  --nav-surface: color-mix(in srgb, var(--or-white) 94%, transparent);
  --nav-sat: 175%;
  --nav-blur: 20px;
  --nav-line: 1;
  --nav-brand-scale: .955;
  --nav-height: var(--nav-h);
}

/* Menu open at the very top of the page: the bar needs a real surface, or the
   page shows through it while the sheet below is solid white. */
:root:has(.nav-drawer.is-open) .s-nav {
  --nav-surface: var(--or-white);
  --nav-line: 1;
  --nav-height: var(--nav-h);
  --nav-brand-scale: .955;
}

/* ---------- Bar ---------- */
/* The surface lives on .nav-bar, never on .s-nav: backdrop-filter would turn
   the header into a containing block and break the fixed sheet inside it.
   Raised above the sheet so the sheet slides out from under it. */
.s-nav .nav-bar {
  position: relative;
  z-index: var(--z-raised);
  background-color: var(--nav-surface);
  -webkit-backdrop-filter: saturate(var(--nav-sat)) blur(var(--nav-blur));
          backdrop-filter: saturate(var(--nav-sat)) blur(var(--nav-blur));
  transition: background-color var(--t-base) var(--e-out),
              -webkit-backdrop-filter var(--t-base) var(--e-out),
              backdrop-filter var(--t-base) var(--e-out);
}

/* Hairline — lands a beat after the glass, so the change reads as one move */
.s-nav .nav-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or-border);
  opacity: var(--nav-line);
  transition: opacity var(--t-base) var(--e-out);
  pointer-events: none;
}
.s-nav.is-scrolled .nav-bar::after { transition-delay: 70ms; }

/* auto 1fr auto, not 1fr auto 1fr: centring the links between two flanks of
   different widths pushes the cluster off optical balance and opens two ~290px
   voids. Anchoring them to the brand — what vercel.com and stripe.com both do —
   makes that imbalance structurally impossible. */
.s-nav .nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  height: var(--nav-height);
  transition: height var(--t-slow) var(--e-out);
}

/* ---------- Brand ---------- */
.s-nav .nav-brand {
  grid-area: 1 / 1;
  justify-self: start;
  transform: scale(var(--nav-brand-scale));
  transform-origin: left center;
  transition: transform var(--t-slow) var(--e-out),
              opacity var(--t-base) var(--e-out);
}

/* ---------- Links ---------- */
.s-nav .nav-links {
  grid-area: 1 / 2;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  /* 32 + the 16px grid gap + 12px link padding = 60px of air off the wordmark */
  margin-inline-start: var(--s-8);
}

.s-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--nav-hit);
  padding-inline: var(--nav-link-pad);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: var(--or-ink-500);
  white-space: nowrap;
  transition: color var(--t-base) var(--e-out);
}

/* Scroll-spy state — the ink darkens and a hairline settles under the label.
   Two signals plus aria-current, so the state is never carried by colour. */
.s-nav .nav-link.is-active { color: var(--or-ink-900); }

.s-nav .nav-link::after {
  content: "";
  position: absolute;
  left: var(--nav-link-pad);
  right: var(--nav-link-pad);
  bottom: var(--s-2);
  height: 2px;
  border-radius: 1px;
  background: var(--or-orange);
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: 50% 50%;
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.s-nav .nav-link.is-active::after { opacity: 1; transform: none; }

/* ---------- Actions ---------- */
.s-nav .nav-actions {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Flat pill. base.css's .btn--primary stacks four gloss cues — a 19 % lightness
   ramp, a dark rim, a white sheen and an orange bloom — for the 58px hero
   button; at 44px in a hairline bar the same treatment reads 2011. One
   1px shadow keeps it *placed* rather than floating. */
.s-nav .nav-cta {
  --btn-h: var(--nav-hit);
  padding-inline: var(--s-5);
  font-size: var(--fs-small);
  background: var(--or-orange);
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--or-orange-deep) 14%, transparent);
  transition: background-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
/* kills the inset white top-highlight base.css paints on .btn--primary */
.s-nav .nav-cta::after { display: none; }

/* ---------- Burger ---------- */
.s-nav .nav-burger {
  display: none;
  width: var(--nav-hit);
  height: var(--nav-hit);
  /* pulls the 20px glyph back out to the gutter line the brand sits on */
  margin-right: calc(var(--s-3) * -1);
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--or-ink-900);
  transition: background-color var(--t-base) var(--e-out);
}

.s-nav .nav-burger__icon { overflow: visible; }

/* One timeline for both strokes. The old 55ms delay on the lower rule meant
   that for the first third of the morph the icon rendered as a lopsided
   chevron instead of a cross. */
.s-nav .nav-burger__line {
  transform-box: view-box;
  transition: transform var(--t-base) var(--e-inout);
}
.s-nav .nav-burger__line--t { transform-origin: 10px 1px; }
.s-nav .nav-burger__line--b { transform-origin: 10px 9px; }

.s-nav .nav-burger[aria-expanded="true"] .nav-burger__line--t {
  transform: translateY(4px) rotate(45deg);
}
.s-nav .nav-burger[aria-expanded="true"] .nav-burger__line--b {
  transform: translateY(-4px) rotate(-45deg);
}

/* ---------- Mobile sheet ---------- */
/* Pinned to --nav-height, the same variable the bar is sized from and with the
   same duration: opening at scroll 0 shrinks the bar 80 → 68 and the sheet's
   top edge rides down with it instead of letting the bar's hairline draw
   *inside* the panel for 400ms.
   Height is content, not viewport: a full-screen panel holding four links is
   two-thirds empty at every size, and no amount of margin tuning fixes that. */
.s-nav .nav-drawer {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: var(--z-base);
  max-height: calc(100vh - var(--nav-height) - var(--s-4));
  max-height: calc(100dvh - var(--nav-height) - var(--s-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--or-white);
  border-bottom: 1px solid var(--or-border);
  border-end-start-radius: var(--r-xl);
  border-end-end-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding-block: var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: top var(--t-slow) var(--e-out),
              opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              visibility 0s linear var(--t-base);
}

.s-nav .nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.s-nav .nav-drawer__nav {
  display: flex;
  flex-direction: column;
}

.s-nav .nav-drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--gutter);
  font-size: clamp(1.0625rem, 3.6vw, 1.1875rem);
  line-height: 1.3;
  font-weight: var(--fw-semi);
  letter-spacing: -0.022em;
  color: var(--or-ink-700);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
  --i: 0;
}

/* Hairlines inset to the gutter, so the rules line up with the labels instead
   of running edge to edge under them. */
.s-nav .nav-drawer__link + .nav-drawer__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--or-border-soft);
}

.s-nav .nav-drawer__link:active { background-color: var(--or-gray-50); }

.s-nav .nav-drawer.is-open .nav-drawer__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 34ms);
}

/* Current section: ink weight plus a dot on the trailing edge — same two-signal
   rule as the bar, mirrored for a list. */
.s-nav .nav-drawer__link.is-active { color: var(--or-ink-900); }
.s-nav .nav-drawer__link.is-active::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or-orange);
}

/* ============================================================
   Hover — pointer devices only, so a tap never leaves a stuck state
   ============================================================ */

@media (hover: hover) {
  .s-nav .nav-brand:hover { opacity: .74; }

  /* Ink shift only. A grey pill behind a 14px label is more furniture than the
     bar can carry — the reference does the same with colour alone. */
  .s-nav .nav-link:hover { color: var(--or-ink-900); }
  /* :not(.is-active) — otherwise this would fade the real state's rule out from
     under the cursor, same specificity, later in source. */
  .s-nav .nav-link:not(.is-active):hover::after { opacity: .22; transform: none; }

  /* Deepen, don't lift. A 1px hop plus a bigger glow was the gloss; a colour
     step is the whole state a flat pill needs. */
  .s-nav .nav-cta:hover {
    background: color-mix(in srgb, var(--or-orange) 62%, var(--or-orange-deep));
  }

  .s-nav .nav-burger:hover { background-color: var(--or-gray-100); }
  .s-nav .nav-drawer__link:hover {
    color: var(--or-ink-900);
    background-color: var(--or-gray-50);
  }
}

/* ============================================================
   Responsive — 1024 / 900 / 768 / 560 only
   ============================================================ */

/* Collapse at 768, not 900. At 901px there was still ~100px of unused slack in
   the bar: the tablet was being handed a menu it did not need. The bar carries
   brand + 4 links + CTA down to 769px with room to spare. */
@media (min-width: 769px) {
  .s-nav .nav-drawer { display: none; }
}

@media (max-width: 768px) {
  .s-nav .nav-inner { grid-template-columns: auto 1fr; }
  .s-nav .nav-links { display: none; }
  .s-nav .nav-actions { grid-area: 1 / 2; }
  .s-nav .nav-burger { display: inline-flex; }
}

/* The CTA stays on the phone. Hiding the one money button behind a tap to avoid
   "two orange pills" trades a conversion for a tidiness that nobody sees — the
   sheet no longer carries a duplicate, so there is only ever one. */
@media (max-width: 560px) {
  .s-nav .nav-cta { padding-inline: var(--s-4); }
  .s-nav .nav-actions { gap: var(--s-2); }
}

/* ------------------------------------------------------------
   No JavaScript. The sheet can never open, so the bar has to carry the links
   itself: they wrap onto a second row under the brand and the bar grows to fit.
   Every href stays reachable at 390px.
   ------------------------------------------------------------ */
@media (scripting: none) {
  /* app.js is what flips .is-scrolled, so without it the bar would stay
     transparent for the life of the page and body copy would scroll straight
     through the links. Ship the scrolled surface from the start instead. */
  .s-nav {
    --nav-surface: var(--or-white);
    --nav-line: 1;
  }
  .s-nav .nav-burger { display: none; }
  .s-nav .nav-drawer { display: none; }
}

@media (scripting: none) and (max-width: 768px) {
  .s-nav .nav-inner {
    grid-template-columns: auto 1fr;
    height: auto;
    row-gap: var(--s-1);
    padding-block: var(--s-3);
  }
  .s-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    grid-area: 2 / 1 / 3 / 3;
    justify-self: start;
    margin-inline-start: 0;
    gap: 0;
  }
  /* first label flush with the wordmark, not with its padding box */
  .s-nav .nav-links > :first-child { margin-inline-start: calc(var(--nav-link-pad) * -1); }
}

/* Landscape phones: the sheet has almost no height to give away */
@media (max-height: 560px) and (max-width: 768px) {
  .s-nav .nav-drawer__link { min-height: var(--nav-hit); }
}

/* base.css zeroes transition-duration but not transition-delay, so without this
   the sheet's rows still arrive staggered up to 136ms with reduced motion on. */
@media (prefers-reduced-motion: reduce) {
  .s-nav .nav-drawer,
  .s-nav .nav-drawer__link { transform: none; }
  .s-nav .nav-drawer.is-open .nav-drawer__link { transition-delay: 0s; }
}