/*
 * ACEwithCrystal — Base Styles
 * css/base.css
 *
 * CSS reset, global typography, layout primitives, utility classes.
 * Depends on: variables.css
 */

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--off);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-sans); }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; }

/* ─── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.1;
  font-weight: 600;
  color: var(--ink);
}
h1 { font-size: clamp(36px, 5vw, 66px); }
h2 { font-size: clamp(26px, 3.5vw, 42px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 18px; }
h5 { font-size: 15px; }

p { color: var(--ink2); line-height: 1.75; }
small { font-size: 12px; color: var(--muted); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* ─── Layout ────────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

/* Section defaults */
section {
  padding: var(--section-v) 0;
}
section + section {
  border-top: 1px solid var(--border);
}

/* Background variants */
.bg-purple    { background: var(--purple); }
.bg-cream     { background: var(--cream); }
.bg-cream2    { background: var(--cream2); }
.bg-white     { background: var(--white); }
.bg-gold-lt   { background: var(--gold-lt); }

/* ─── Grid Helpers ──────────────────────────────────────────────────────── */
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2-1 { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.grid-sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ─── Typography Utilities ──────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow.gold  { color: var(--gold); }
.eyebrow.white { color: rgba(255,255,255,0.4); }
.eyebrow.mb    { margin-bottom: 10px; display: block; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-tag);
  padding: 3px 10px;
  border: 1px solid;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(196, 154, 60, 0.3);
  border-radius: var(--r-tag);
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ─── Section Header Block ──────────────────────────────────────────────── */
.sec-head {
  margin-bottom: 48px;
}
.sec-title {
  font-size: clamp(28px, 3.5vw, 42px);
  margin-bottom: 12px;
}
.sec-sub {
  font-size: 15px;
  color: var(--ink3);
  line-height: 1.75;
  max-width: 580px;
}

/* Dark section overrides */
.dark-section { background: var(--purple); padding: var(--section-v) 0; border-top: none !important; }
.dark-section .sec-title { color: #fff; }
.dark-section .sec-sub   { color: rgba(255,255,255,0.5); }
.dark-section .eyebrow   { color: rgba(255,255,255,0.35); }

/* ─── Page Routing ──────────────────────────────────────────────────────── */
.page {
  display: none;
  min-height: calc(100vh - var(--nav-h));
}
.page.active {
  display: block;
}

/* ─── Misc Utilities ────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-white  { color: #fff; }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--muted); }
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 16px; }
.mt-lg  { margin-top: 32px; }
.mb-sm  { margin-bottom: 8px; }
.mb-md  { margin-bottom: 16px; }
.mb-lg  { margin-bottom: 32px; }
.full-w { width: 100%; }
.flex   { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 32px; }