/* ============================================================
   BASE.CSS — Reset · Custom Properties · Typography
   Alkebuleum · alkebuleum.org
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Cinzel:wght@400;600;700;900&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Custom Properties ── */
:root {
  /* Brand Palette */
  --blue:    #0E4F6E;
  --sand:    #CBB294;
  --bronze:  #A97855;
  --ivory:   #FAFAF8;
  --ink:     #0F172A;

  /* Derived */
  --sand-d:  #a89070;
  --blue-d:  #093d56;
  --blue-l:  #1a6a8a;
  --ink-l:   #1a2535;

  /* Kente strip colors */
  --k1: var(--blue);
  --k2: var(--bronze);
  --k3: var(--sand);
  --k4: #2d5a3d;
  --k5: #7a4a2a;

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-body:    'Cormorant Garamond', serif;
  --font-ui:      'DM Mono', monospace;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* Layout */
  --max-w: 1200px;
  --radius: 2px;
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

a, button, input, [role="button"] {
  cursor: pointer;
}

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

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

ul {
  list-style: none;
}

/* ── Typography Scale ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

p {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.85;
}

em {
  font-style: italic;
  color: var(--sand);
}

strong {
  font-weight: 600;
  color: var(--ivory);
}

/* ── Layout Utility ── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Section Labels ── */
.sl {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Section Title ── */
.st {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
}

/* ── Kente Divider ── */
.kente {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--k1) 0px,    var(--k1) 24px,
    var(--k2) 24px,   var(--k2) 48px,
    var(--k3) 48px,   var(--k3) 72px,
    var(--k4) 72px,   var(--k4) 96px,
    var(--k5) 96px,   var(--k5) 120px,
    var(--k3) 120px,  var(--k3) 144px,
    var(--k2) 144px,  var(--k2) 168px,
    var(--k1) 168px,  var(--k1) 192px
  );
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* JS progressively enhances reveals when loaded */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Animations ── */
@keyframes fl {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gp {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.15); }
}