/* Shared homepage and advertiser navigation. */
.logo{
  display:block; line-height:0; margin:0;
}
/* The mark is 1845x283 (6.52:1), so the width sets the height. 150px puts about
   23px of ink on screen, which is the same optical weight the live-type
   wordmark it replaced had — keep it there if the art is ever re-cut. */
.logo img{ display:block; width:150px; height:auto; }

/* ---- top nav -------------------------------------------------------------
   Three columns with the side columns at 1fr each and the mark on auto: that
   keeps the wordmark dead centre in the VIEWPORT no matter how wide the links
   either side get, which a plain flex row with space-between would not. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(20px,4vw,56px); padding:var(--nav-y) clamp(18px,3vw,40px) 0;
  isolation:isolate;
}
/* A soft backing keeps the violet navigation readable over passing artwork. */
.nav::before{
  content:""; position:absolute; inset:0 0 -48px; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(250,247,255,.98) 0%, rgba(250,247,255,.96) 55%,
    rgba(250,247,255,.65) 78%, rgba(250,247,255,0) 100%);
  opacity:0; pointer-events:none; transition:opacity .8s ease;
}
.nav.has-scroll-backdrop::before{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .nav::before{ transition:none; }
}
/* Scrolled state. No bar: past the hero the chrome goes WHITE so it reads
   over every beat (violet, the scenes, the sky), and the two link groups get
   out of the way — they hide while the reader scrolls down and come back,
   white, on the first scroll up. The script sets .is-scrolled and .is-down. */
.nav.is-scrolled a, .nav.is-scrolled button{ color:#fff; }
.nav.is-scrolled a:hover, .nav.is-scrolled button:hover,
.nav.is-scrolled button[aria-expanded="true"]{ color:rgba(255,255,255,.72); }
/* Each beat declares data-nav="dark" or "light" and the script copies the
   one under the bar onto the nav as data-theme. Dark = the hero's own
   treatment (violet mark, grey links), for beats on the pale field. */
.nav.is-scrolled[data-theme="dark"] a, .nav.is-scrolled[data-theme="dark"] button{ color:var(--nav-ink); }
.nav.is-scrolled[data-theme="dark"] a:hover, .nav.is-scrolled[data-theme="dark"] button:hover,
.nav.is-scrolled[data-theme="dark"] button[aria-expanded="true"]{ color:var(--nav-ink-hov); }
.nav__side{ transition:opacity .25s ease, translate .25s ease; }
.nav.is-scrolled.is-down .nav__side{ opacity:0; translate:0 -6px; pointer-events:none; }
/* The mark carries both cuts and crossfades between them. */
.logo{ position:relative; }
.logo img{ transition:opacity .3s ease; }
/* Anchored to the block's centre, not its left edge: on mobile the .logo
   block is the full row (it centres the mark with flex), so an inset:0
   overlay would sit at the row's left, and the white mark slid left on the
   swap. */
.logo .logo__white{ position:absolute; top:0; left:50%; translate:-50% 0; width:150px; opacity:0; }
.nav.is-scrolled:not([data-theme="dark"]) .logo .logo__violet{ opacity:0; }
.nav.is-scrolled:not([data-theme="dark"]) .logo .logo__white{ opacity:1; }
.nav__side{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); }
.nav__side--left { justify-content:flex-end; }
.nav__side--right{ justify-content:flex-start; }

/* No box, no outline, no fill — the links are just type. Sentence case, so the
   only tracked caps left on the page are the legal links at the foot. */
.nav a, .nav button{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:300 14px Inter, system-ui, sans-serif; letter-spacing:normal;
  text-transform:none; text-decoration:none; white-space:nowrap;
  color:var(--nav-ink); cursor:pointer;
  transition:color .18s ease;
}
.nav a:hover, .nav button:hover, .nav button[aria-expanded="true"]{ color:var(--nav-ink-hov); }
/* Social icons: same ink as the links, sized to their x-height, a hair more
   space between them than between the words. */
.nav__social{ display:inline-flex; align-items:center; gap:14px; margin-left:4px; }
.nav__icon{ display:inline-flex; line-height:0; }
.nav__icon svg{ width:16px; height:16px; }

.nav__mobile{ display:none; }


@media (max-width:640px), (max-aspect-ratio:3/4){
  :root{ --nav-y:20px; }
  .logo img{ width:112px; }
  .logo .logo__white{ width:112px; }
  .nav{
    display:flex; justify-content:center; align-items:center;
    height:64px; padding:0 14px;
  }
  .logo{ display:flex; justify-content:center; }
  .nav__side{ display:none; }
  .nav__mobile{ display:block; position:absolute; right:12px; top:10px; }
  .nav__mobile summary{
    display:grid; place-content:center; gap:5px; width:44px; height:44px;
    cursor:pointer; list-style:none; color:#6844bd; border-radius:50%;
    background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 4px 20px rgba(56,32,105,.08); backdrop-filter:blur(16px);
  }
  .nav__mobile summary::-webkit-details-marker{ display:none; }
  .nav__mobile summary:focus-visible{ outline:2px solid #6844bd; outline-offset:3px; }
  .nav__mobile summary span{ width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .18s ease; }
  .nav__mobile[open] summary span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav__mobile[open] summary span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
  .nav__mobile-links{
    position:absolute; right:0; top:54px; width:190px; padding:10px;
    display:grid; border-radius:20px; background:rgba(250,247,255,.96);
    border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(20px);
    box-shadow:0 12px 40px rgba(56,32,105,.15);
  }
  .nav .nav__mobile-links a{ display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; font-size:14px; color:#54416f; }
  .nav .nav__mobile-links a:hover, .nav .nav__mobile-links a:focus-visible{ background:#ede5fa; color:#6844bd; }
  @media (prefers-reduced-motion:reduce){ .nav__mobile summary span{ transition:none; } }
}