/* Shared site chrome: header, mobile menu, footer, theme tokens.
   Loaded on every page. Home.css / content.css may override page-specific tweaks. */

:root{
  --fm-display:"Geist", system-ui, sans-serif;
  --fm-body:"Geist", system-ui, sans-serif;
  --fm-mono:"Geist Mono", ui-monospace, monospace;
  --fm-weight:500; --fm-style:normal; --fm-track:-0.04em;

  --fs-display:"Instrument Serif", "Times New Roman", serif;
  --fs-body:"Geist", system-ui, sans-serif;
  --fs-mono:"Geist Mono", ui-monospace, monospace;
  --fs-weight:400; --fs-style:normal; --fs-track:-0.025em;

  --fx-display:"Fraunces", "Times New Roman", serif;
  --fx-body:"Geist", system-ui, sans-serif;
  --fx-mono:"Geist Mono", ui-monospace, monospace;
  --fx-weight:600; --fx-style:italic; --fx-track:-0.025em;

  --f-display:var(--fm-display); --f-body:var(--fm-body); --f-mono:var(--fm-mono);
  --d-weight:var(--fm-weight); --d-style:var(--fm-style); --d-track:var(--fm-track);

  --bg:#fafafa;
  --bg-2:#f2f2f0;
  --card:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#52525b;
  --ink-mute:#a1a1aa;
  --rule:#0a0a0a12;
  --rule-strong:#0a0a0a22;
  --accent:#0047ff;
  --accent-soft:#0047ff14;
  --accent-ink:#ffffff;
}
html[data-font="serif"]{
  --f-display:var(--fs-display); --f-body:var(--fs-body); --f-mono:var(--fs-mono);
  --d-weight:var(--fs-weight); --d-style:var(--fs-style); --d-track:var(--fs-track);
}
html[data-font="editorial"]{
  --f-display:var(--fx-display); --f-body:var(--fx-body); --f-mono:var(--fx-mono);
  --d-weight:var(--fx-weight); --d-style:var(--fx-style); --d-track:var(--fx-track);
}
html[data-theme="dark"]{
  --bg:#0a0a0a;
  --bg-2:#141414;
  --card:#111111;
  --ink:#fafafa;
  --ink-soft:#a1a1aa;
  --ink-mute:#52525b;
  --rule:#fafafa14;
  --rule-strong:#fafafa28;
  --accent:#5b8cff;
  --accent-soft:#5b8cff1a;
  --accent-ink:#0a0a0a;
}
html[data-accent="electric"]{ --accent:#2f6bff; --accent-soft:#2f6bff18;}
html[data-accent="cobalt"]  { --accent:#0047ff; --accent-soft:#0047ff14;}
html[data-accent="azure"]   { --accent:#0284c7; --accent-soft:#0284c714;}
html[data-accent="sky"]     { --accent:#0ea5e9; --accent-soft:#0ea5e914;}
html[data-accent="ink-only"]{ --accent:var(--ink); --accent-soft:var(--rule);}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:24px;}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:15.5px;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
  overflow-x:clip;
}
::selection{background:var(--accent); color:var(--accent-ink);}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
svg,img{display:block;}

@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

/* ---------- Header / nav ---------- */

header.nav{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1160px; margin:0 auto;
  padding-block:24px;
  padding-left: max(clamp(18px, 4vw, 34px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 4vw, 34px), env(safe-area-inset-right));
  border-bottom:1px solid var(--rule);
}
header.nav .brand{display:flex; align-items:center; gap:14px;}
header.nav .brand svg{height:32px;}
header.nav .brand .tag{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink-soft);
  padding-left:14px; margin-left:2px;
  border-left:1px solid var(--rule-strong);
  display:inline-flex; align-items:center; gap:6px;
}
header.nav .brand .tag::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite;}
header.nav .links{display:flex; gap:28px;}
header.nav .links a{font-size:14px; color:var(--ink-soft); transition:color .15s;}
header.nav .links a:hover{color:var(--ink);}
header.nav .cta-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); padding:7px 12px; border:1px solid var(--ink); border-radius:7px; transition:background .15s, color .15s;}
header.nav .cta-link:hover{background:var(--ink); color:var(--bg);}
header.nav .nav-theme{width:34px; height:34px; border-radius:7px; display:grid; place-items:center; color:var(--ink-soft); border:1px solid var(--rule-strong); transition:all .15s;}
header.nav .nav-theme:hover{color:var(--ink); border-color:var(--ink-soft); background:var(--bg-2);}

.nav-toggle{
  display:none;
  width:40px; height:40px; border-radius:8px;
  align-items:center; justify-content:center;
  border:1px solid var(--rule-strong);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle svg{width:18px; height:18px;}

/* ---------- Mobile menu ---------- */

.mobile-menu{
  position:fixed; inset:0; z-index:80;
  background:var(--bg);
  display:flex; flex-direction:column;
  padding:20px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  visibility:hidden;
}
.mobile-menu.open{transform:translateX(0); visibility:visible;}
.mobile-menu .mm-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
  margin-bottom:24px;
}
.mobile-menu .mm-head svg{height:24px;}
.mobile-menu .mm-close{
  width:40px; height:40px; border-radius:8px;
  display:grid; place-items:center;
  border:1px solid var(--rule-strong); color:var(--ink);
}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu nav a{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--rule);
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:28px; letter-spacing:var(--d-track); line-height:1;
  color:var(--ink);
}
.mobile-menu nav a .n{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); font-weight:400; font-style:normal; letter-spacing:.08em;}
.mobile-menu .mm-cta{
  margin-top:auto; padding-top:24px;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-menu .mm-cta .btn{width:100%; justify-content:center; padding:16px 20px; font-size:15px;}
.mobile-menu .mm-foot{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-mute);
}
body.menu-open{overflow:hidden; position:fixed; left:0; right:0; width:100%;}

/* .btn used inside mobile menu CTA block */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  background:var(--accent); color:var(--accent-ink);
  border-radius:8px;
  font-size:14px; font-weight:500;
  transition:transform .15s, background .2s, opacity .2s;
}
.btn:hover{transform:translateY(-1px); opacity:.92;}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(3px);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule-strong);}
.btn.ghost:hover{background:var(--bg-2); border-color:var(--ink-soft);}

.dot{width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;}
.dot.live{animation:pulse 2s infinite;}

/* ---------- Footer ---------- */

footer.site-footer{
  border-top:1px solid var(--rule);
  margin-top:240px;
  max-width:1160px; margin-left:auto; margin-right:auto;
  padding:48px max(clamp(18px, 4vw, 34px), env(safe-area-inset-left));
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
  font-size:13px; color:var(--ink-soft);
}
footer.site-footer .brand{font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style); font-size:22px; color:var(--ink); letter-spacing:var(--d-track);}
footer.site-footer .col .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px;}
footer.site-footer .col a{display:block; padding:3px 0;}
footer.site-footer .col a:hover{color:var(--ink);}

/* ---------- Tablet ---------- */

@media (max-width: 1000px){
  header.nav .links{display:none;}
}

/* ---------- Mobile ---------- */

@media (max-width: 680px){
  body{font-size:15px;}

  .nav-toggle{display:inline-flex;}
  header.nav .cta-link{display:none;}
  header.nav .nav-theme{display:none;}

  header.nav{
    padding-block:16px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
  }
  header.nav .brand svg{height:24px;}
  header.nav .brand .tag{display:none;}

  footer.site-footer{
    margin-top:80px;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:32px 20px;
  }
  footer.site-footer > div:first-child{grid-column:1 / -1;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}