/* ---------------- SHARED NAV ACTIVE STATE ----------------
   Single source of truth for the active-page indicator in the primary nav.
   Linked by every page so the red underline is identical site-wide; the
   matching nav item just needs aria-current="page". Uses each page's own
   --ivory / --red tokens, so it adds no colors/typography of its own. */
.navlinks a[aria-current]{color:var(--ivory);border-bottom:1.5px solid var(--red);padding-bottom:2px}

/* ---------------- SHARED MOBILE NAVIGATION ----------------
   One implementation of the small-screen menu for every page. The hamburger
   is hidden on desktop and revealed at the nav breakpoint; the link list
   collapses into a panel anchored to the nav. Behavior lives in
   /assets/js/site.js. Colors come from each page's --ivory/--red tokens. */
.navtoggle{display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;
  width:42px;height:42px;background:transparent;border:0;cursor:pointer;padding:9px;border-radius:2px}
.navtoggle .bar{display:block;width:24px;height:2px;background:var(--ivory);transition:transform .2s ease,opacity .2s ease}
.navtoggle:focus-visible{outline:3px solid var(--ivory);outline-offset:2px}
nav.open .navtoggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .navtoggle .bar:nth-child(2){opacity:0}
nav.open .navtoggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .navtoggle{display:flex}
  .navlinks{position:absolute;top:100%;right:clamp(14px,4vw,40px);left:auto;
    flex-direction:column;align-items:stretch;gap:0;min-width:200px;
    background:#1c1107;border:1px solid rgba(205,189,159,.18);border-radius:4px;
    box-shadow:0 26px 60px rgba(0,0,0,.55);padding:8px;margin-top:6px;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
  nav.open .navlinks{opacity:1;visibility:visible;transform:none}
  .navlinks a{display:block;padding:13px 14px;font-size:15px;border-radius:3px}
  .navlinks a:not(.pill){color:var(--ivory-soft)}
  .navlinks a:not(.pill):hover{background:rgba(205,189,159,.08);color:var(--ivory)}
  .navlinks a[aria-current]{border-bottom:0;color:var(--ivory);background:rgba(205,189,159,.08)}
  .navlinks .pill{text-align:center;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .navtoggle .bar,.navlinks{transition:none}
}