/* ============================================================
   Khai — shared site styles (used by project + blog pages)
   Load with: <link rel="stylesheet" href="../../assets/site.css">
============================================================ */

:root{
  --navy:#15224A;
  --navy-2:#1C2E63;
  --navy-deep:#0d1738;
  --gold:#D4A857;
  --gold-2:#E8C078;
  --cream:#F1ECE0;
  --cream-2:#FAF6EC;
  --ink:#0B1020;
  --paper:#FBFAF6;
  --line:rgba(11,16,32,.14);
  --line-faint:rgba(11,16,32,.06);
  --line-on-navy:rgba(241,236,224,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--ink)}

/* ============ SHARED NAV (matches landing) ============ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding:14px 36px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(251,250,246,.85);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.site-nav .mark{
  display:inline-flex;align-items:baseline;
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size:22px;letter-spacing:-.03em;color:var(--ink);
}
.site-nav .mark .d{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-left:3px;
  align-self:flex-end;margin-bottom:5px;
}
.site-nav ul{display:flex;gap:32px;list-style:none}
.site-nav ul a{
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.72;transition:opacity .25s;
}
.site-nav ul a:hover{opacity:1}
.site-nav .back{
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.72;
  display:inline-flex;align-items:center;gap:8px;
  transition:opacity .25s, gap .25s;
}
.site-nav .back:hover{opacity:1;gap:14px}
.site-nav .back::before{content:"←";font-size:14px}
@media(max-width:900px){
  .site-nav{padding:12px 20px}
  .site-nav ul{display:none}
}

/* ============ CONTAINER ============ */
.container{max-width:1200px;margin:0 auto;padding:0 36px}
.container-narrow{max-width:760px;margin:0 auto;padding:0 36px}
@media(max-width:900px){
  .container,.container-narrow{padding:0 20px}
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.eyebrow{
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);opacity:.55;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px rgba(212,168,87,.55);
}
h1.display{
  font-family:"Instrument Serif",serif;
  font-size:clamp(56px,9vw,140px);
  line-height:.92;letter-spacing:-.035em;
  color:var(--ink);
}
h1.display em{font-style:italic;color:var(--navy)}
h2.section{
  font-family:"Instrument Serif",serif;
  font-size:clamp(36px,5vw,72px);
  line-height:.95;letter-spacing:-.025em;
  color:var(--ink);
}
h2.section em{font-style:italic;color:var(--navy)}
h3.sub{
  font-family:"Instrument Serif",serif;
  font-size:clamp(24px,3vw,36px);
  line-height:1.1;letter-spacing:-.02em;
  color:var(--ink);
}
h3.sub em{font-style:italic;color:var(--gold)}
p.lead{
  font-family:"Instrument Serif",serif;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.35;letter-spacing:-.01em;
  color:#1d243a;
}
p.lead em{font-style:italic;color:var(--navy)}
p.body{
  font-size:17px;line-height:1.7;
  color:#1d243a;
}
p.body em{font-style:italic;color:var(--navy)}

/* ============ BUTTONS / LINKS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;
  font-family:"Geist",sans-serif;font-size:14px;font-weight:500;
  letter-spacing:-.01em;text-decoration:none;
  transition:background .25s, color .25s, border-color .25s, gap .25s;
}
.btn-primary{background:var(--navy);color:var(--cream);border:1px solid var(--navy)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);gap:16px}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--navy);opacity:.85}
.btn-outline:hover{opacity:1;background:var(--navy);color:var(--cream);gap:16px}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.7;
  text-decoration:none;
  transition:opacity .2s, gap .25s;
}
.link-arrow::after{content:"→"}
.link-arrow:hover{opacity:1;gap:14px}

/* ============ FOOTER (compact, matches landing tone) ============ */
.site-foot{
  background:var(--ink);color:var(--cream);
  padding:80px 36px 32px;margin-top:96px;
}
.site-foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
  max-width:1200px;margin:0 auto;
}
.site-foot h4{
  font-family:"Instrument Serif",serif;
  font-size:clamp(40px,5vw,72px);line-height:.9;
  letter-spacing:-.03em;color:var(--cream);
}
.site-foot h4 em{font-style:italic;color:var(--gold-2)}
.site-foot h4 .sp{
  display:inline-block;width:.08em;height:.08em;
  background:var(--gold);border-radius:50%;
  vertical-align:top;margin-top:.3em;margin-left:.04em;
}
.site-foot h5{
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  opacity:.55;margin-bottom:16px;
}
.site-foot ul{
  list-style:none;display:flex;flex-direction:column;gap:8px;
  font-family:"Instrument Serif",serif;font-size:18px;
  letter-spacing:-.01em;
}
.site-foot ul em{font-style:italic;color:var(--gold-2)}
.site-foot ul a{position:relative;padding-bottom:2px}
.site-foot ul a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--gold);transition:width .3s;
}
.site-foot ul a:hover::after{width:100%}
.site-foot-base{
  max-width:1200px;margin:56px auto 0;
  padding-top:20px;border-top:1px solid var(--line-on-navy);
  display:flex;justify-content:space-between;
  font-family:"Geist Mono",monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;opacity:.55;
  flex-wrap:wrap;gap:16px;
}
@media(max-width:900px){
  .site-foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .site-foot h4{grid-column:span 2}
}