@import url("/brand-tokens.css?v=20261005t");/* ==========================================================================
   Previously — Unified Navigation · NAV ORDER v3 (2026-09-28)
   --------------------------------------------------------------------------
   Single source: every rebuilt page includes THIS file + nav.js.
   No page carries its own nav markup, order, or styles.

   Order (James, 2026-09-28 — v3, no exceptions):
     Home · Browse · Coming Soon · Games · Podcasts · Sports · Free ·
     Live · Music · Culture (LAST). Library is OUT.

   Namespace: pvn-*. Zero collisions with page CSS.
   Brand accent: Signal Red. No gold anywhere. No white-on-red (near-black
   text on red fills, per the hardened tokens).

   Integration:
     <link rel="stylesheet" href="/shared/nav/nav.css">        (in <head>)
     <div id="pvn-mount"></div>                                 (where nav goes)
     <script src="/shared/nav/nav.js" defer></script>           (before </body>)
     (nav.js auto-loads nav-overlay.css + nav-overlay.js for the menu.)
   ========================================================================== */

/* ---- Tokens, aliased to the hardened design tokens with self-sufficient
   fallbacks, so the nav never breaks if tokens.css loads late or is absent. */
.pvn{
  --pvn-bg:var(--pv-noir, var(--desert-bg));
  --pvn-bg-panel:var(--pv-noir-2, var(--desert-card));
  --pvn-ink:var(--pv-ivory, var(--desert-ink));
  --pvn-ink-dim:var(--pv-ivory-dim, rgba(var(--desert-ink-rgb), 0.62));
  --pvn-ink-faint:var(--pv-ivory-faint, rgba(var(--desert-ink-rgb), 0.38));
  --pvn-accent:var(--pv-red, var(--brand-red));
  --pvn-accent-soft:rgba(var(--brand-red-rgb), 0.14);
  --pvn-line:var(--pv-rule, rgba(var(--desert-ink-rgb), 0.14));
  --pvn-bar-h:var(--pv-nav-h, 64px);
  --pvn-ease:var(--pv-ease, cubic-bezier(0.22, 0.8, 0.28, 1));
  --pvn-focus:var(--pv-focus-outline, 2px solid var(--pv-red, var(--brand-red)));
  --pvn-sans:var(--pv-sans, -apple-system, BlinkMacSystemFont, "Inter",
    "Helvetica Neue", Arial, sans-serif);
  --pvn-serif:var(--pv-serif, "Playfair Display", Georgia, "Times New Roman", serif);

  position:sticky;
  top:0;
  z-index:var(--pv-z-nav, 50);
  background:var(--pvn-bg);
  color:var(--pvn-ink);
  border-bottom:1px solid var(--pvn-line);
  font-family:var(--pvn-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}.pvn *,
.pvn *::before,
.pvn *::after{
  box-sizing:border-box;
}/* Kill the double-tap-zoom / 300ms tap delay on every nav control (2026-10-03) */
.pvn a,
.pvn button{
  touch-action:manipulation;
}/* ---- Bar ---- */
.pvn-bar{
  height:var(--pvn-bar-h);
  max-width:var(--pv-shell-max, 1440px);
  margin:0 auto;
  padding:0 var(--pv-gutter, 32px);
  display:flex;
  align-items:center;
  gap:28px;
}/* ---- Brand: red chevron mark + wordmark, links to / ---- */
.pvn-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px; /* 44px target */
  text-decoration:none;
  color:var(--pvn-ink);
  flex:0 0 auto;
}.pvn-brand svg{
  display:block;
  width:26px;
  height:26px;
  flex:0 0 auto;
}.pvn-brand-name{
  font-family:var(--pvn-serif);
  font-size:19px;
  font-weight:700;
  letter-spacing:0.01em;
  white-space:nowrap;
}/* ---- Desktop links: text-only (icons live in the mobile dropdown) so the
   full 10-item bar fits at 1024px. ---- */
.pvn-links{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0 0 0 auto;
  padding:0;
  flex:0 1 auto;
  min-width:0;
  /* Audit 2026-10-03: guard so link items can never visually spill into .pvn-actions */
  overflow:clip;
}.pvn-links .pvn-link svg{
  display:none;
}.pvn-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px; /* WCAG 2.2 AA target size */
  padding:10px 12px;
  color:var(--pvn-ink-dim);
  text-decoration:none;
  font-size:15px; /* spec-literal; compaction tier below handles 1024–1279px */
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:8px;
  transition:color 160ms var(--pvn-ease), background-color 160ms var(--pvn-ease);
  white-space:nowrap;
  flex:0 0 auto;
}/* Red underline: grows in on hover, persists on the active section. */
.pvn-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--pvn-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 200ms var(--pvn-ease);
}/* Hover tints are scoped to real hover devices (2026-10-03): on touch,
   :hover sticks after a tap and the tint stays glued on. */
@media (hover:hover){
  .pvn-link:hover {
    color:var(--pvn-ink);
    background:rgba(var(--desert-ink-rgb), 0.05);
  }
  .pvn-link:hover::after {
    transform:scaleX(1);
  }
  .pvn-iconbtn:hover {
    color:var(--pvn-ink);
    border-color:var(--pvn-line);
    background:rgba(var(--desert-ink-rgb), 0.05);
  }
  .pvn-burger:hover {
    border-color:rgba(var(--desert-ink-rgb), 0.3);
    background:rgba(var(--desert-ink-rgb), 0.05);
  }
}.pvn-link[aria-current="page"]{
  color:var(--pvn-accent); /* 5.18:1 on noir — clears AA for text */
}.pvn-link[aria-current="page"]::after{
  transform:scaleX(1);
}

/* ---- Icon actions: search → /search/ (global page), account → /account/.
   These are plain icon-links;the in-page search bar is a separate shared
   component (two searches, two jobs — never merged). ---- */
.pvn-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  flex:0 0 auto;
}.pvn-iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; /* WCAG 2.2 AA target size */
  height:44px;
  border-radius:50%;
  color:var(--pvn-ink-dim);
  text-decoration:none;
  border:1px solid transparent;
  transition:color 160ms var(--pvn-ease), border-color 160ms var(--pvn-ease),
    background-color 160ms var(--pvn-ease);
}.pvn-iconbtn svg{
  width:18px;
  height:18px;
}/* ---- Live dot: the lane mark for Previously Live. Red on noir. ---- */
.pvn-livedot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pvn-accent);
  box-shadow:0 0 0 3px var(--pvn-accent-soft);
  flex:0 0 auto;
}

/* ---- Pinned wordmark — Previously. stays fixed in sticky nav (James 2026-10-08) ---- */
.pvn-wordmark{
  font-family:var(--font-serif);
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--pvn-ink);
  text-decoration:none;
  flex:none;
  margin-right:4px;
}
.pvn-wordmark em{
  font-style:normal;
  color:var(--pv-accent);
}
/* ---- Hamburger — ONE menu trigger site-wide (James, 2026-10-02 — "Nice!!").
   Visible on ALL widths next to the wordmark, per the approved drawer mockup.
   Desktop keeps its inline section links;the hamburger opens the drawer. ---- */
/* Menu trigger restyled 2026-10-08 (James): no more pill — clean text button
   with underline that fits the header. */
.pvn-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
  height:44px;
  padding:0 6px;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--pvn-ink);
  cursor:pointer;
  transition:border-color 160ms var(--pvn-ease), color 160ms var(--pvn-ease);
  touch-action:manipulation; /* no double-tap-zoom delay on the menu trigger */
}
.pvn-burger:hover{
  border-bottom-color:var(--pv-accent);
  color:var(--pv-accent);
}.pvn-burger svg{
  width:20px;
  height:20px;
}/* James 2026-10-03: the menu trigger must be unmistakable — labeled pill. */
.pvn-burger-label{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1;
  white-space:nowrap;
}/* ---- Focus visibility (keyboard users): the token's focus indicator ---- */
.pvn a:focus-visible,
.pvn button:focus-visible{
  outline:var(--pvn-focus);
  outline-offset:2px;
  border-radius:8px;
}

/* ---- Compaction tier: 1024px and up. The full 12-item bar at spec-literal
   sizes overflows the 1440px shell (links need ~1183px, ~1087px available);
   this tier shrinks type and gutters so all 12 sections stay visible with
   44px targets intact at every desktop width. (Was 11 items to 1365px;STORY BOARD made it 12 — the bar needs the compact tier at all widths.) ---- */
@media (min-width:1024px){
  .pvn-bar {
    padding:0 16px;
    gap:16px;
  }
  .pvn-brand-name {
    font-size:17px;
  }
  .pvn-brand svg {
    width:24px;
    height:24px;
  }
  .pvn-link {
    font-size:12.5px;
    letter-spacing:0.06em;
    padding:10px 8px;
  }
  .pvn-link::after {
    left:8px;
    right:8px;
  }
  .pvn-actions {
    margin-left:4px;
  }
}/* ---- Mobile/tablet switch (<1024px): 56px bar, hamburger opens the
   full-screen overlay menu ---- */
@media (max-width:1279px) and (min-width: 1024px){
  /* 12 items are tight below 1280px — trim horizontal padding and bar gap
     so NEWS clears the icon actions at every desktop width. */
  .pvn-bar {
    gap:12px;
  }
  .pvn-link {
    padding:10px 6px;
  }
  .pvn-link::after {
    left:6px;
    right:6px;
  }
}@media (max-width:1080px) and (min-width: 1024px){/* Very bottom of the desktop range: one more notch tighter so the 12th
     link (NEWS) never slides under the icon actions at 1024px. */
  .pvn-link{
    font-size:12px;
    letter-spacing:0.04em;
    padding:10px 5px;
  }.pvn-link::after{
    left:5px;
    right:5px;
  }.pvn-bar{
    gap:8px;
    padding:0 12px;
  }
}@media (max-width:1023px){.pvn{
    --pvn-bar-h:56px;
  }.pvn-bar{
    padding:0 16px;
    gap:12px;
  }.pvn-links{
    display:none;
  }.pvn-actions{
    margin-left:auto;
  }.pvn-actions .pvn-iconbtn{
    display:none;
  }.pvn-burger{
    display:inline-flex;
  }.pvn-brand-name{
    font-size:17px;
  }
}/* ---- Phone account door (2026-10-15 header fix, James): at <=640px
   the .pvn bar carries wordmark + bell + Sign up free (signed out) /
   bell + avatar (signed in); the Sign in text link yields so nothing
   crowds or clips — the same treatment pv-account.css gives the
   Bible masthead (.b-m-head). The button's page serves both new and
   returning people. ---- */
@media (max-width:640px){
  .pvn-actions .pv-acct .pv-signin{
    display:none;
  }.pvn-actions .pv-acct .pv-signup{
    height:34px;
    padding:0 12px;
    font-size:11px;
    letter-spacing:.08em;
  }
}
/* ---- Reduced motion: the panel appears instantly, no animation ---- */
@media (prefers-reduced-motion:reduce){
  .pvn *,
  .pvn *::before,
  .pvn *::after {
    animation:none !important;
    transition:none !important;
  }
}/* ---- Forced colors (Windows High Contrast): decoration steps aside,
   structure stays visible. ---- */
@media (forced-colors:active){
  .pvn {
    border-bottom:1px solid CanvasText;
  }
  .pvn-link::after {
    background:CanvasText;
  }
  .pvn-livedot {
    background:CanvasText;
    box-shadow:none;
  }
  .pvn a:focus-visible,
  .pvn button:focus-visible {
    outline:2px solid ButtonText;
    outline-offset:2px;
  }
  .pvn-burger {
    border:1px solid ButtonText;
  }
}

/* ---- Print: the nav is chrome — it never prints. (The hardened tokens
   also hide nav[aria-label="Primary"];this rule keeps the component
   self-sufficient if tokens.css is absent.) ---- */
@media print{
  .pvn {
    display:none !important;
  }
}/* ==========================================================================
   Task M (2026-09-29): seamless, flash-free nav.
   --------------------------------------------------------------------------
   1. Reserve the nav's vertical space BEFORE the nav script renders, so the
      hero and page content never jump when the nav hydrates into #pvn-mount.
   2. Dark page background from the first paint, so there is never a white
      flash between pages or before CSS loads. (Same tones as the nav shell.)
   3. Native cross-document view transitions: the nav carries a stable
      transition name so it persists visually while the page content swaps
      underneath it. No loaders, no splash, no body fade — unsupported
      browsers simply get an immediate, normal navigation.
   ========================================================================== */
html{
  background:#000000;           /* first-paint background: house black (canvas fix 2026-10-17: was var(--desert-bg) #FAF6EE cream, framed the app on real phones) */
  color-scheme:dark;
}#pvn-mount{
  min-height:64px;               /* reserve desktop nav height pre-hydration */
  background:#000000;
  /* DROPDOWN LAYER FIX 2026-10-15: view-transition-name (see below) makes
     #pvn-mount a stacking context; at z-index:auto the entire nav subtree --
     header dropdowns included -- painted in DOM order and lost to later
     positioned page content (article heroes covered the notifications
     panel). Pin the mount itself to the nav layer: above page content,
     below consent (90) / modal (100) / toast (110). */
  position:relative;
  z-index:var(--pv-z-nav, 50);
}@media (max-width:1023.98px){#pvn-mount{ min-height:56px; } /* reserve mobile nav height pre-hydration */
}/* Stable nav across cross-document view transitions (Chrome/Edge/Opera/Safari 18+). */
@supports (view-transition-name:root){
  @media (prefers-reduced-motion:no-preference) {
    .pvnav, .pv-nav, #pvn-mount {
      view-transition-name:pv-site-nav;
    }
  }
}

/* Smooth category switching (James, 2026-10-01): cross-document view transitions
   so switching sections glides instead of flash-reloading. The nav stays pinned
   (pv-site-nav above);page content cross-fades. Respects reduced-motion. */
@supports (view-transition-name:root){
  @media (prefers-reduced-motion:no-preference) {
    @view-transition {
      navigation:auto;
    }
  }
}/* pv-about: editorial "about this section" blocks (enrichment blitz 2026-10-01) */
.pv-about{ margin:48px auto; max-width:860px; padding:0 24px; }.pv-about__copy p{ margin:0 0 1.1em; line-height:1.75; font-size:1.02rem; }.pv-about__copy p:last-child{ margin-bottom:0; }.pv-about__byline{ font-size:0.85rem; font-style:italic; color:var(--desert-ink-dim); margin:0 0 1.2em; letter-spacing:0.02em; }@media (max-width:640px){.pv-about{ margin:36px auto; padding:0 20px; }
}.pv-byline{ font-style:italic; opacity:.75; margin-top:1.2em; font-size:.92rem; }/* pv-about collapsible read-more (standing rule 2026-10-01 — SEO-safe: full text in initial HTML, CSS-only visual collapse) */
.pv-about__wrap[data-collapsible] .pv-about__copy{ max-height:7.5em; overflow:hidden; position:relative; transition:max-height .35s ease; }.pv-about__wrap[data-collapsible] .pv-about__copy::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3em; background:linear-gradient(transparent, var(--pv-bg, var(--surface-dark-deep))); pointer-events:none; transition:opacity .25s; }.pv-about__wrap[data-collapsible].is-open .pv-about__copy{ max-height:none; }.pv-about__wrap[data-collapsible].is-open .pv-about__copy::after{ opacity:0; }.pv-readmore{ display:inline-flex; align-items:center; gap:.4em; margin-top:.8em; background:none; border:none; cursor:pointer; font:inherit; color:inherit; opacity:.85; padding:.3em 0; }.pv-readmore__arrow{ display:inline-block; transition:transform .25s; }.pv-about__wrap[data-collapsible].is-open .pv-readmore__arrow{ transform:rotate(180deg); }.pv-about__wrap[data-collapsible].is-open .pv-readmore__label::after{ content:" less"; }/* ==========================================================================
   LIGHT THEME — follows the device (James, 2026-10-02).
   The nav aliases --pv-* tokens, so the token remap does most of the work.
   This block covers the hardcoded bits: first-paint background (no dark
   flash on light devices), hover tints, and the current-page link color
   (Signal Red as text deepens to keep WCAG AA on paper).
   ========================================================================== */
@media (prefers-color-scheme:light){
  html {
    background:#000000;   /* first-paint: house black on every device (canvas fix 2026-10-17) */
    color-scheme:light;
  }
  #pvn-mount {
    background:#000000;
  }
  @media (hover:hover) {
    .pvn-link:hover,
    .pvn-iconbtn:hover,
    .pvn-burger:hover {
      background:rgba(var(--desert-ink-rgb), .05);
    }
    .pvn-burger:hover {
      border-color:rgba(var(--desert-ink-rgb), .28);
    }
  }
  .pvn-link[aria-current="page"] {
    color:var(--brand-red-deep);
  }
  .pv-about__copy::after {
    background:linear-gradient(transparent, var(--surface-cream));
  }
  .pv-about__byline {
    color:rgba(var(--desert-ink-rgb), .72);
  }
}/* ---------- Header social icons (James, 2026-10-03) ---------- */
.pvn-iconbtn.pvn-social svg{width:16px;height:16px}.pvn-iconbtn.pvn-social:hover{color:var(--brand-red)}/* Audit 2026-10-03: socials are duplicated in the drawer/footer — hide them in
   the header below 1360px so they can't crowd the FREE/NEWSROOM labels. */
@media (max-width:1360px){
  .pvn-iconbtn.pvn-social{display:none}
}@media (max-width:640px){/* keep the phone header uncluttered — socials live in the footer on small screens */
  .pvn-iconbtn.pvn-social{display:none}
}

/* ---------- Full-bleed header mount (visibility audit, 2026-10-03) ----------
   nav.js mounts #pvn-mount wherever the page template puts it — on several
   pages that is inside a narrow .wrap, squeezing .pvn-bar so the desktop
   links slide UNDER the icon actions (social icons overlapping FREE/NEWSROOM).
   Break the mount out to full viewport width;DOM order (below the topbar)
   is unchanged. overflow-x:clip on html/body absorbs vw rounding. */
#pvn-mount{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* ============================================================================
   RAIDERS CONVERSION — PHASE 1 (2026-10-16): the shared pvn bar takes the
   locked black/silver/white tokens, pinned on the component itself so it
   renders identically on every page family regardless of the page's own
   token layer. --bible-* pins ride along so the account cluster the bar
   hosts (pv-account.css consumes --bible-*) resolves to the same scheme.
   Rollback: delete this block (+ restore .bak-raiders1-20261016).
   ========================================================================== */
.pvn{
  --pvn-bg:#000000;--pvn-bg-panel:#101010;--pvn-ink:#A5ACAF;--pvn-ink-dim:#8C9399;--pvn-ink-faint:#8C9399;
  --pvn-accent:#FFFFFF;--pvn-accent-soft:rgba(255,255,255,.12);--pvn-line:#2C2C2C;
  --pvn-focus:2px solid #FFFFFF;
  --bible-bg:#000000;--bible-ink:#A5ACAF;--bible-red:#FFFFFF;--bible-red-deep:#6E7478;--bible-rule:#2C2C2C;
  color:#A5ACAF;
}
@media (hover:hover){
  .pvn-link:hover,.pvn-iconbtn:hover{background:rgba(255,255,255,.06)}
  .pvn-burger:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
}
@media (prefers-color-scheme:light){
  #pvn-mount{background:#000000}
  .pvn-link[aria-current="page"]{color:#FFFFFF}
}
.pvn-iconbtn.pvn-social:hover{color:#FFFFFF}
.pvn .pv-avatar{color:#000000}

/* HEADER SPEC (James, 2026-10-16): wordmark period = signal red #E10600. */
.pvn-wordmark em{color:#E10600}
/* MARATHON FONT — PHASE 1 (2026-10-16): sticky-nav wordmark in
   'Previously Display' Regular 400. Colors untouched (silver text,
   signal-red period per HEADER SPEC above). */
.pvn-wordmark{font-family:'Previously Display',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:0}

/* ALL-RED WORDMARK (James, 2026-10-16 06:22 PT): sticky-nav lockup
   renders entirely in signal red #E10600 — letters and period. */
.pvn-wordmark{color:#E10600}
.pvn-wordmark em{color:#E10600}