/* The top bar: one bar on every page of quiver.fm (S1, S5 in
   plans/website-next-2026-10-07/analysis.md). Owner: P2.
   The journey's bar is the spec. This file is its one stylesheet: the proof and
   the front page link it before css/journey.css, and every other page links the
   synced copy (/journey/page/css/bar.css) from SiteHead.astro. The markup is the
   same everywhere (src/components/Nav.astro writes what index.html has by hand):

     header.nav[data-tone?] > a.logo > img
                            + nav[aria-label=Main] > ul > li > a[data-led] (carve, gate, roll, mangler)
                                                         + li.nav-utility > a (support, sign in)

   Tones: night (the default: transparent with a soft scrim, over the journey's
   room and the product pages' heroes) and bone (data-tone="bone": ink on bone,
   for support, account and legal). The logo's dot is lit in both.
   Lights: a[data-led-state] = on (steady: an instrument you can get) or breath
   (the workshop). The journey drives --breath from its clock; elsewhere the
   breath is a CSS animation. Self-contained: it reads no page's custom
   properties, so the bar is the same pixels on every page.
   The bar stays put on the journey (journey.css: position fixed) and scrolls
   away everywhere else (position absolute at the top of the document; the
   .nav-room after it keeps the bar's height in the flow on bone pages). */

.nav {
  --bar-gut: clamp(16px, 6.4vw, 104px);
  --bar-on: #ece6dc;
  --bar-dim: rgba(236,230,220,.66);
  --bar-light: #f2ae55;
  --bar-light-3: #ffe0a3;
  --bar-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar-ease: cubic-bezier(.2, .8, .2, 1);
  position: absolute; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box; height: auto; margin: 0; gap: 0;
  padding: max(10px, env(safe-area-inset-top)) var(--bar-gut) 0;
  pointer-events: none;
  transition: opacity .35s var(--bar-ease);
  view-transition-name: vt-bar;
}
.nav > * { pointer-events: auto; position: relative; }
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 112px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,10,9,.55), rgba(11,10,9,.24) 55%, rgba(11,10,9,0));
}
.nav a { color: inherit; text-decoration: none; }
.logo { display: flex; align-items: center; min-height: 44px; margin-left: -2px; }
.logo img { width: 98px; height: auto; display: block; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 34px); margin: 0; padding: 0; list-style: none; font-size: inherit; }
.nav li a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--bar-mono); font-stretch: 100%; letter-spacing: .02em; font-weight: 400;
  font-size: 12px; line-height: 1.5; color: var(--bar-dim);
  transition: color .3s var(--bar-ease);
}
.nav li a:hover, .nav li a[aria-current="page"] { color: var(--bar-on); }
@media (max-width: 520px) {
  .nav .nav-utility { display: none; }
}
.nav a[data-led] .led {
  display: inline-block; flex: none; border-radius: 50%;
  width: 0; height: 6px; margin-right: 0; opacity: 0;
  background: radial-gradient(circle at 40% 35%, rgba(236,230,220,.34), rgba(236,230,220,.16));
  box-shadow: none;
  transition: width .4s var(--bar-ease), margin .4s var(--bar-ease), opacity .4s var(--bar-ease);
}
.nav a[data-led-state="on"], .nav a[data-led-state="breath"] { color: var(--bar-on); }
.nav a[data-led-state="on"] .led, .nav a[data-led-state="breath"] .led {
  width: 6px; margin-right: 8px;
  background: radial-gradient(circle at 40% 35%, var(--bar-light-3), var(--bar-light) 62%);
}
.nav a[data-led-state="on"] .led { opacity: 1; box-shadow: 0 0 6px 1px rgba(242,174,85,.6); }
/* the breath without the journey's clock: 4.6 s, the journey's BREATH_SECONDS */
.nav a[data-led-state="breath"] .led { animation: bar-breath 4.6s ease-in-out infinite; }
@keyframes bar-breath {
  0%, 100% { opacity: .3; box-shadow: 0 0 2px 1px rgba(242,174,85,.2); }
  50% { opacity: 1; box-shadow: 0 0 7px 1px rgba(242,174,85,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .nav a[data-led-state="breath"] .led { animation: none; opacity: .72; box-shadow: 0 0 5px 1px rgba(242,174,85,.44); }
}

/* bone: ink on bone, the dot still lit (the logo file is the ink one with the lit dot) */
.nav[data-tone="bone"] { --bar-on: #1f1d1a; --bar-dim: rgba(31,29,26,.66); }
.nav[data-tone="bone"]::before { display: none; }
.nav[data-tone="bone"] a[data-led-state="on"] .led { box-shadow: 0 0 0 1px rgba(194,124,26,.35), 0 0 6px 1px rgba(242,174,85,.55); }

/* the room the bar keeps in the flow where it scrolls away over bone */
.nav-room { height: 76px; }

/* tall screens (phones, portrait tablets): the journey's rule, aspect below 0.85 */
@media (max-aspect-ratio: 17/20) {
  .nav { --bar-gut: 20px; padding-top: max(4px, env(safe-area-inset-top)); }
  .logo img { width: 86px; }
  .nav ul { gap: 15px; }
  .nav li a { font-size: 11px; font-stretch: 87.5%; }
  .nav-room { height: 64px; }
}
html.touch .nav li a { min-width: 44px; justify-content: center; }
html.touch .nav ul { gap: 8px; }
/* Wide phones: a stronger scrim, the copy sits in the clear band below the bar */
@media (orientation: landscape) and (max-height: 500px) {
  .nav::before { background: linear-gradient(to bottom, rgba(11,10,9,.94), rgba(11,10,9,.88) 55%, rgba(11,10,9,0)); }
}
@media (max-width: 360px) {
  .nav ul { gap: 11px; }
  .logo img { width: 80px; }
}
/* Keep the four instruments within the phone bar (320 px: 306 px used, touch, 2026-10-09). */
@media (max-width: 520px) {
  .nav a[data-led] .led { display: none; }
  .nav ul { gap: 10px; }
}