/* The section nav, for pages that carry no other stylesheet.
   pricing / ascent / circle / claim / tikkun are self-contained pages with their
   own inline <style>, so they cannot pick the nav up from styles.css (index) or
   content.css (the article pages).

   This is a deliberate MIRROR of the .nav-strip block in content.css (and of the
   copy in styles.css, and of the inline copy the nine journal pages each carry) —
   same position, same ground, same sizes, same letter-spacing, same gold, same
   current-page marker. If you change one, change them all, or the strip reads as
   a different component from one page to the next.

   Everything is scoped to .nav-strip and must stay that way: these pages each
   have their own layout to protect. */
.nav-strip {
  /* 2026-09-10 (owner): NOT pinned. The only thing that stays with you at the top
     of the sheet is the parchment roll (js/month-cinema.js, .scroll-roll,
     position:fixed, z-index 44) — the menu belongs to the page and rolls away
     with it. z-index 6 sits above the burnished sheet edges (5) and the unroll
     veil (4) and below the roll, so the roll passes over the strip. */
  position: relative; z-index: 6;
  /* Parchment, not chrome. The strip used to paint its own opaque vellum band
     with a backdrop blur, because content scrolled underneath it; nothing does
     now. Transparent lets each page's own ground show through — real vellum on
     the pages that carry the texture, their own #faf6ed here — so the menu reads
     as part of the sheet rather than a bar laid over it. What stays identical
     everywhere is the typography and the gold: the face below is unchanged. */
  background: transparent;
  border-bottom: 1px solid rgba(168, 136, 74, 0.35);
}
.nav-strip-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 32px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.nav-brand .nav-mono { width: 32px; height: 32px; }
.nav-brand .nav-mark {
  font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  font-size: 14px; letter-spacing: 7px; color: #1a1612; font-weight: 400;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: #1a1612; text-decoration: none; opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; color: #8a6e34; }
/* The page you are on: gold, no underline — the marker content.css already uses. */
.nav-links a.current,
.nav-links a[aria-current="page"] { color: #8a6e34; opacity: 1; }

@media (max-width: 720px) {
  .nav-strip-inner { padding: 18px 22px; }
  .nav-brand .nav-mark { font-size: 12px; letter-spacing: 5px; }
}

/* Mobile: the links get their OWN full-width row. Sharing a row with the brand,
   the ink counter and the language toggle left ~75px of visible link area on a
   390px screen. display:contents lifts .nav-right's children into the strip so
   they can be reordered; the link row then wraps to its own line and scrolls.
   min-width:0 matters: a flex child will not shrink below its content width, so
   without it the row overflows instead of scrolling — and with overflow-x:clip
   on body the far links become UNREACHABLE, not merely off-screen. */
@media (max-width: 860px) {
  .nav-strip-inner { flex-wrap: wrap; row-gap: 8px; align-items: center; min-width: 0; }
  .nav-brand { flex: 0 0 auto; }
  .nav-right { display: contents; }
  .nav-links {
    order: 9; flex: 1 0 100%; width: 100%; min-width: 0;
    gap: 18px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 10px; letter-spacing: 2.4px; white-space: nowrap; }
}
/* nav-tablet (2026-09-14): nine links (Calendar joined) no longer fit beside the brand between the phone
   layout and ~1180px. Tighten them, and let the row scroll rather than cut off the last links or
   push the page sideways. Mirrors content.css and styles.css. */
@media (min-width: 861px) and (max-width: 1180px) {
  .nav-strip-inner { min-width: 0; }
  .nav-right { min-width: 0; }
  .nav-links { gap: 18px; min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; letter-spacing: 2.6px; }
}
@media (prefers-reduced-motion: reduce) { .nav-links a { transition: none; } }