/* ==========================================================================
   BASE — shared across every page (tokens, reset, nav, buttons, footer).
   Page-specific styles (hero, chapters, cards…) live in that page's own CSS
   file (e.g. home.css) and load alongside this one.
   ========================================================================== */

:root{
  --obsidian:#0A0A0C;
  --surface:#15110D;
  --surface-2:#1C1712;
  --hairline:rgba(212,168,67,0.18);
  --hairline-strong:rgba(212,168,67,0.4);
  --ivory:#F2F0E6;
  --ivory-dim:rgba(242,240,230,0.62);
  --ivory-faint:rgba(242,240,230,0.34);
  --gold:#D4A843;
  --gold-bright:#E8C878;
  --gold-dim:#8A6F2E;
  --sage:#8FAE96;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Montserrat', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--gold);color:var(--obsidian)}

.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:18px}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold-dim)}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  background:rgba(10,10,12,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:0.32em;
  color:var(--gold-bright);
  font-weight:600;
}
.nav-cta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--obsidian);
  background:var(--gold);
  padding:10px 18px;
  border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--gold-bright)}

/* ---------- BUTTONS ---------- */
.btn-primary{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--gold);color:var(--obsidian);
  padding:15px 26px;border-radius:2px;text-decoration:none;font-weight:600;
  border:1px solid var(--gold);
}
.btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn-ghost{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ivory-dim);
  padding:15px 8px;text-decoration:none;
  border-bottom:1px solid var(--hairline-strong);
}
.btn-ghost:hover{color:var(--ivory)}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--hairline);
  padding-block:32px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.footer-mark{font-family:var(--font-mono);font-size:11px;color:var(--ivory-faint);letter-spacing:0.05em}
.footer-links{display:flex;gap:22px;font-family:var(--font-mono);font-size:11px;color:var(--ivory-faint)}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--gold)}