/* Shared styles for the static pages (blog, gifts, Boy Edition pages …).
   Loaded by every static page through the site:css marker, which the stamp
   script (tools/stamp-static-pages.mjs) fills with a versioned link, so a
   change here reaches every page and every browser on the next build.
   Page-specific styles stay in each page's own <style> block. */

/* ── Top menu — sized to match the React Navbar (logo 60px, 12.75px links,
      85px volume slider in the site's navy) ──────────────────────────── */
.nav{position:sticky;top:0;z-index:50;padding:.5rem 42.5px;border-bottom:1px solid rgba(217,163,32,.3);background:rgba(29,15,64,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:61px}
.nav-logo{height:60px;width:auto;display:block}
.nav-toggle{display:none;background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;padding:8px}
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-family:'Nunito',sans-serif;font-size:12.75px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:#D9A320}
/* Background-music control (js/site.js) — same look as the React menu's */
.nav-right{display:flex;align-items:center;gap:.5rem}
.nav-audio{display:flex;align-items:center;gap:.5rem}
.nav-audio[hidden]{display:none}
.nav-audio input[type=range]{width:85px;height:4px;accent-color:#1F307A;cursor:pointer;opacity:.8}
.nav-mute{background:none;border:none;padding:.5rem;border-radius:999px;color:rgba(255,255,255,.6);cursor:pointer;display:flex;transition:color .3s}
.nav-mute:hover,.nav-mute:focus-visible{color:#fff}
.nav-mute .icon-off{display:none}
.nav-mute.is-muted .icon-on{display:none}
.nav-mute.is-muted .icon-off{display:block}
@media (max-width:1099px){
  .nav{padding-left:25.5px;padding-right:25.5px}
  .nav-audio input[type=range]{width:68px}
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:78px;left:0;right:0;background:#1D0F40;flex-direction:column;align-items:flex-start;padding:1.25rem 1.5rem;gap:1.1rem;border-bottom:1px solid rgba(217,163,32,.3);display:none}
  .nav-links.open{display:flex}
}

/* ── Footer ───────────────────────────────────────────────── */
.footer{background:#1D0F40;padding:4rem 1.5rem 2.5rem;margin-top:3rem}
.footer-inner{max-width:900px;margin:0 auto}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:1.3rem;color:#fff;font-weight:700;margin:.75rem 0}
.footer-inner>p{color:rgba(255,255,255,.5);font-size:.9rem;max-width:320px;line-height:1.6;margin:0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin:2.5rem 0 3rem}
.footer-grid h4{font-family:'Playfair Display',serif;color:#fff;font-size:.9rem;margin:0 0 1rem}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.75rem}
.footer-grid a{color:rgba(255,255,255,.6);font-size:.9rem;text-decoration:none}
.footer-grid a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center}
.footer-bottom p{color:rgba(255,255,255,.7);font-size:.85rem;margin:0 0 .25rem}
.footer-social{display:flex;justify-content:center;gap:1.4rem;margin-bottom:1.4rem}
.footer-social a{color:rgba(255,255,255,.6);transition:color .3s}
.footer-social a:hover{color:#fff}
.footer-social svg{display:block}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}