.logo-cream { display: none; }
.nav-links a { padding: 14px 0; }

/* Nav A — "on the hero": no band. The bar sits straight on whatever the hero is
   (cream, orange or the photograph) and only becomes a cream band once you scroll. */
.navwrap { background: transparent; padding: 12px 0; border: 0; margin-bottom: -76px; transition: background .25s ease; }
/* The bar overlaps whatever comes next, so it reads as sitting on the hero. */
.hero-c { padding-top: calc(clamp(44px, 6vw, 72px) + 76px); }
.vb .over-copy { top: calc(clamp(72px, 9svh, 104px) + 44px); }
.vb .handwrap { height: min(70svh, 740px); margin-bottom: -14svh; }
.navwrap.is-stuck { background: var(--cream); border-bottom: 1px solid var(--hairline); padding: 6px 0; }
.nav { background: transparent; border: 0; border-radius: 0; width: auto; max-width: var(--page); margin: 0 auto; height: 52px; padding: 0 var(--s-xl); gap: var(--s-xxxl); }
.nav-logo img { width: 92px; }
.nav-links a:hover { color: var(--clay); }
.nav .stamp { margin-left: auto; background: var(--primary); color: var(--roast); border-radius: var(--r-control); min-height: 44px; padding: 0 18px; }
.nav .stamp:hover { background: var(--primary-deep); }
/* On the orange field (version 3) the unstuck bar reads cream-on-orange with a roast stamp. */
.navwrap:not(.is-stuck):has(+ main > .hero.on-orange) .logo-orange { display: none; }
.navwrap:not(.is-stuck):has(+ main > .hero.on-orange) .logo-cream { display: block; }
.navwrap:not(.is-stuck):has(+ main > .hero.on-orange) .nav-links a:hover { color: var(--roast-soft); }
.navwrap:not(.is-stuck):has(+ main > .hero.on-orange) .stamp { background: var(--roast); color: var(--cream); }
@media (max-width: 720px) { .navwrap { padding: 8px 0; margin-bottom: -68px; } .nav { padding: 0 var(--s-lg); gap: var(--s-lg); } .hero-c { padding-top: 112px; } }

.announce { display: none; }

/* On the hero (2026-09-11): wordmark left, the links pushed to the right end. The transparent nav stays
   through all three slides; on the night slide its ink turns cream. */
.nav-links { margin-left: auto; }
.navwrap:not(.is-bar):has(+ main > .hero-seq[data-stage="2"]) .logo-orange { display: none; }
.navwrap:not(.is-bar):has(+ main > .hero-seq[data-stage="2"]) .logo-cream { display: block; }
.navwrap:not(.is-bar):has(+ main > .hero-seq[data-stage="2"]) .nav-links a { color: var(--cream); }
.navwrap:not(.is-bar):has(+ main > .hero-seq[data-stage="2"]) .nav-links a:hover { color: var(--sand); }

/* The pill (2026-09-11). As soon as the page scrolls, the nav becomes a short white pill centred on the
   page that follows it down: wordmark and links packed together. script.js animates the change: the
   wordmark and links glide into place and the pill's ground (.nav-ground, which the script adds) closes
   in from the wide bar's edges; scrolling back to the top plays it in reverse. The band keeps the
   transparent nav's height (76px, 68px on phones), so the switch never shifts the page. */
.nav { position: relative; isolation: isolate; }
.nav > * { transform-origin: 0 0; }
.nav-ground {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--r-full);
}
html .navwrap.is-bar.is-stuck { background: transparent; border: 0; padding: 16px var(--s-lg); }
.navwrap.is-bar .nav { width: fit-content; max-width: 100%; margin: 0 auto; height: 44px; padding: 0 20px; gap: 24px; }
.navwrap.is-bar .nav-ground { opacity: 1; }
.navwrap.is-bar .nav-logo { height: 42px; }
.navwrap.is-bar .nav-logo img { width: 68px; }
.navwrap.is-bar .logo-orange { display: block; }
.navwrap.is-bar .logo-cream { display: none; }
.navwrap.is-bar .nav-links { display: flex; margin-left: 0; gap: 18px; font-size: 14px; }
.navwrap.is-bar .nav-links a { padding: 12px 0; color: var(--roast); }
.navwrap.is-bar .nav-links a:hover { color: var(--clay); }
/* Phones: the links hide on the hero but belong in the pill. */
@media (max-width: 720px) {
  html .navwrap.is-bar.is-stuck { padding: 12px; }
  .navwrap.is-bar .nav { padding: 0 18px; gap: 18px; }
  .navwrap.is-bar .nav-links { gap: 14px; }
}
@media (max-width: 359px) {
  .navwrap.is-bar .nav { padding: 0 14px; gap: 12px; }
  .navwrap.is-bar .nav-links { gap: 10px; font-size: 13px; }
}

/* Phones — browser bars (measured iPhone 17 Pro / iOS 26.3, 2026-09-12).
   A full-width sticky header touching the top of the screen makes iOS 26 Safari stop sampling the page
   for the strip behind the status bar: it locks that strip to whatever <body> was at first paint and the
   bar wears one colour for the rest of the visit. So on phones the header is fixed and only as wide as
   what it holds — the wordmark on the hero, the pill once scrolled — which Safari ignores, leaving both
   strips showing the page itself. Auto margins rather than a translate: a translated fixed box with
   width:fit-content collapses the wordmark to zero width in Safari.
   See ~/.claude/skills/mobile-browser-bars. */
@media (max-width: 720px) {
  html .navwrap {
    position: fixed; top: 8px; left: 12px; right: auto;
    width: fit-content; max-width: calc(100% - 24px);
    margin-bottom: 0; padding: 0; z-index: 50;
  }
  html .navwrap.is-bar, html .navwrap.is-bar.is-stuck {
    left: 0; right: 0; margin-left: auto; margin-right: auto; padding: 0;
  }
}