/* ═══════════════════════════════════════════════════════════════
   CROWNED MURDER — shared.css
   Base variables, nav, buttons, footer.
   Link this on every page alongside shared.js.
═══════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Barlow+Condensed:wght@300;400;500;600;700&display=swap');

/* ── RESET + BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── DESIGN TOKENS ── */
:root{
  --void:#02000A;--deep:#06021A;--card:#0E082A;--card-hi:#130D32;
  --border:#2A1860;--border-hi:#4A30A0;
  --amethyst:#7B38E8;--lavender:#A855F7;--mist:#C084FC;--stardust:#E9D5FF;
  --scarlet:#B91C1C;--rose:#DC2626;
  --gold:#A07828;--gilded:#C8A040;
  --bone:#EDE0FF;--parchment:#C8B0E8;--ash:#7A6A98;--smoke:#4A3870;
  --font-title:'Cinzel Decorative',serif;
  --font-display:'Cinzel',serif;
  --font-body:'EB Garamond',Georgia,serif;
  --font-ui:'Barlow Condensed',sans-serif;
}

body{
  background:var(--void);color:var(--bone);
  font-family:var(--font-body);overflow-x:hidden;min-height:100vh;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:64px;
  background:rgba(2,0,10,0.88);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,24,96,0.45);
  transition:background 0.3s;
}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-logo-img{height:38px;width:auto;filter:drop-shadow(0 0 8px rgba(168,85,247,0.6));transition:filter 0.3s}
.nav-brand:hover .nav-logo-img{filter:drop-shadow(0 0 16px rgba(168,85,247,1)) drop-shadow(0 0 30px rgba(168,85,247,0.35))}
.nav-links{display:flex;list-style:none;gap:24px;align-items:center}
.nav-links a{
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color 0.2s,border-color 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--mist);border-bottom-color:var(--amethyst)}
.nav-right{display:flex;gap:8px}

/* ── BUTTONS ── */
.btn{
  font-family:var(--font-ui);font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;text-decoration:none;border:none;
  cursor:pointer;border-radius:2px;
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.btn-sm{font-size:10px;padding:6px 13px}
.btn-md{font-size:11px;padding:9px 18px}
.btn-ghost{background:transparent;color:var(--ash);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--bone);border-color:var(--border-hi);background:rgba(90,32,192,0.1)}
.btn-violet{background:var(--amethyst);color:var(--stardust)}
.btn-violet:hover{background:var(--lavender);box-shadow:0 0 0 1px var(--mist),0 6px 22px rgba(168,85,247,0.4);transform:translateY(-1px)}

/* ── FOOTER ── */
footer{
  position:relative;z-index:1;border-top:1px solid var(--border);
  padding:28px 40px;background:var(--deep);
  display:flex;justify-content:space-between;align-items:center;
}
.foot-copy{font-family:var(--font-ui);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--smoke);line-height:1.9}
.foot-links{display:flex;gap:20px}
.foot-links a{font-family:var(--font-ui);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--smoke);text-decoration:none;transition:color 0.2s}
.foot-links a:hover{color:var(--mist)}

/* ── MOBILE ── */
@media(max-width:860px){
  nav{padding:0 20px}
  .nav-links{display:none}
  footer{flex-direction:column;gap:14px;text-align:center}
}