/* ============================================================
   SHARED / GLOBAL — brand tokens, base reset, header, footer.
   Loaded by every page. Edit nav links, logo, or footer copy
   here once and it updates everywhere.
   ============================================================ */

:root{
  --bg:#121212;
  --bg-alt:#181818;
  --card:#1B1B1B;
  --card-border:rgba(240,231,218,0.14);
  --ink:#f0e7da;
  --ink-dim:rgba(240,231,218,0.62);
  --ink-faint:rgba(240,231,218,0.34);
  --accent1:#cdc69e;
  --accent2:#ffaa6e;
  --line:rgba(240,231,218,0.12);
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
html,body{background:var(--bg); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent2); color:#121212;}
img{max-width:100%; display:block;}

.wrap{max-width:1280px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}

/* ---------- HEADER MOUNT (skeleton height avoids layout jump while header.html loads) ---------- */
#site-header-mount{min-height:73px;}

/* ---------- HEADER / NAV ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(18,18,18,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.site-header nav{border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:16px;}
.logo .dot{width:8px; height:8px; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 3px rgba(255,170,110,0.15);}
.logo span.dim{color:var(--ink-dim); font-weight:400; margin-left:2px;}
.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks a{font-size:14px; color:var(--ink-dim); transition:color .2s ease;}
.navlinks a:hover{color:var(--ink);}
.nav-cta{
  font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:10px 18px; border-radius:7px; background:var(--accent1); color:#121212;
  transition:transform .15s ease, background .2s ease;
}
.nav-cta:hover{background:var(--accent2); transform:translateY(-1px);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:36px 0; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}

@media (max-width:900px){
  .navlinks{display:none;}
  footer{flex-direction:column; text-align:center;}
}