/* ============================================================
   QUILL & COMPASS — THE SHARED MASTHEAD
   One nav, one brand treatment, every page.

   This file exists because the site had FOUR different brand implementations
   (.wordmark.brand + .brand-logo on index and the four SEO pages, a bare .brand with a
   613x160 logo on map.html, .lbrand with an unclassed <img> on ledger.html, and
   .rbrand + .rbrand-logo on realms.html) and NO top navigation anywhere — the only
   links between pages lived in the footers of five of them, so ledger.html,
   realms.html and map.html were dead ends you could not navigate out of.

   Load order: tokens.css FIRST (palette + type), then this, then the page's own sheet.

   It deliberately keeps the floating-overlay pattern every page already used
   (position:fixed, pointer-events:none, nothing reserves layout space for it) rather
   than becoming a solid bar, because no page reserves room at the top and a solid bar
   would crop the hero art on index, map and realms.

   The plaque is paper-100 — one plate lighter than the parchment ground — so the same
   object reads on the light pages AND on the dimmed realms stage without a variant.
   ============================================================ */
:root{
  /* self-sufficient: styles.css declares its own --cut-lift, but map.css, ledger.css
     and realms.css do not all agree, and this component loads on every page. */
  --qnav-lift:3px 3px 0 rgba(74,51,32,.30);
  --qnav-gap:clamp(.5rem,1.4vw,1.1rem);
  /* The room the floating plaque occupies. Pages whose old header sat IN FLOW (only
     ledger.html did) must reserve this, or their first line slides under the nav —
     measured: the plaque runs 21-72px on desktop and 11-116px on mobile, where the
     routes wrap to a second row. Pages with an already-fixed header need nothing. */
  --qnav-space:88px;
}
@media (max-width:760px){ :root{ --qnav-space:132px } }

/* z-index 62 is inherited from the .masthead this plaque replaced, and it is
   load-bearing: .qc-foot is 61, so at 60 the footer painted OVER the fixed masthead
   and killed its links for the whole footer scroll (hit-tested: elementFromPoint at
   the plaque returned the footer). 62 clears the footer and stays under
   .road-progress (63), which is meant to sit over everything. */
.qnav{position:fixed;inset:0 0 auto 0;z-index:62;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(.7rem,1.8vw,1.3rem) clamp(.8rem,3vw,2.3rem);
  gap:.6rem}

/* the plaque: a cut chip of lighter stock, the same object on every page */
.qnav-plaque{pointer-events:auto;display:flex;align-items:center;gap:var(--qnav-gap);
  background-color:var(--paper-100);border:1px solid var(--ink-500);
  box-shadow:var(--qnav-lift);
  padding:.35rem .5rem .35rem .7rem;
  max-width:calc(100vw - 2rem)}

.qnav-brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.qnav-brand img{display:block;height:clamp(26px,3.2vw,38px);width:auto}
.qnav-brand:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px}

/* a printed rule between the mark and the routes */
.qnav-links{display:flex;align-items:center;gap:var(--qnav-gap);flex-wrap:wrap;
  border-left:1px solid rgba(74,51,32,.32);padding-left:var(--qnav-gap)}
/* well below the 1.6rem display floor, so body at 700 with tracking */
.qnav-links a{font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(.6rem,1.05vw,.72rem);line-height:1.1;
  color:var(--ink-700);text-decoration:none;white-space:nowrap;
  padding:.25rem 0;border-bottom:2px solid transparent;
  transition:color .16s var(--calm),border-color .16s var(--calm)}
.qnav-links a:hover{color:var(--ink-900);border-bottom-color:var(--ink-500)}
.qnav-links a:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px}
/* the page you are on, marked in the rubric red the manuscript grammar reserves for it */
.qnav-links a[aria-current="page"]{color:var(--rubric-deep);border-bottom-color:var(--rubric-deep)}

/* page-specific controls (index's mute) sit opposite the plaque and stay clickable */
.qnav > .qnav-aside{pointer-events:auto;display:flex;align-items:center;gap:.5rem}

@media (max-width:760px){
  /* the routes drop under the mark rather than pushing the plaque off the sheet */
  .qnav-plaque{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.4rem .6rem}
  .qnav-links{border-left:0;padding-left:0;border-top:1px solid rgba(74,51,32,.32);
    padding-top:.35rem;gap:.55rem}
  .qnav-links a{font-size:.62rem;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  :root:not(.force-motion) .qnav-links a{transition:none}
}