/* ==========================================================================
   base.css — design tokens, reset, typography, shared layout primitives
   Loaded on every page, before any component stylesheet.
   ========================================================================== */

:root{
  --night:#0F2027;
  --teal:#1E4A47;
  --teal-light:#2E6B62;
  --gold:#C9A24B;
  --gold-soft:#DDBE7C;
  --cream:#EDE6D6;
  --stone:#3D4A4A;
  --stone-light:#6C7877;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;

  --max-width:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--night);
  font-family:var(--font-body);
  font-weight:400;
  overflow-x:hidden;
}

h1,h2,h3,.serif{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none;}

img,svg{display:block;max-width:100%;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- shared section layout ---------- */
main{display:block;}

section{
  position:relative;
  padding:120px 6vw;
}

.section-inner{
  max-width:var(--max-width);
  margin:0 auto;
}

.eyebrow{
  font-size:0.85rem;
  letter-spacing:0.03em;
  color:var(--teal-light);
  margin-bottom:14px;
}

.section-head{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  margin-bottom:70px;
  align-items:end;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.1;
}
.section-head .lede{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--stone);
}
@media (max-width:820px){
  .section-head{grid-template-columns:1fr;gap:24px;}
}

/* ---------- page-level hero (non-3D pages) ---------- */
.page-hero{
  padding:180px 6vw 90px;
  background:var(--night);
  color:var(--cream);
}
.page-hero .eyebrow{color:var(--gold-soft);}
.page-hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.06;
  max-width:760px;
}
.page-hero p{
  margin-top:20px;
  max-width:560px;
  font-size:1.05rem;
  line-height:1.65;
  color:rgba(237,230,214,0.75);
}

/* ---------- generic buttons / links ---------- */
.btn{
  display:inline-block;
  padding:14px 26px;
  border:1px solid currentColor;
  font-size:0.92rem;
  transition:background .3s ease, color .3s ease;
}
.btn-solid{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--night);
}
.btn-solid:hover{
  background:var(--gold-soft);
  border-color:var(--gold-soft);
}
.btn-outline{
  color:inherit;
}
.btn-outline:hover{
  background:rgba(255,255,255,0.08);
}