/* ============================================================
   Caleb Lesa — Authority Design System
   Drop-in theme variables + base type. Enqueue AFTER the
   existing theme stylesheet so these win on cascade.
   ============================================================ */

:root {
  /* Core */
  --cl-ink:            #17150F;  /* primary text, dark surfaces */
  --cl-paper:          #F5F1E8;  /* primary background */
  --cl-bone:           #FBF9F3;  /* lightest surface, text on dark */
  --cl-brass:          #B4894A;  /* HERO accent */
  --cl-brass-soft:     #C9A468;  /* accent on dark surfaces */

  /* Support */
  --cl-evergreen:      #26362B;
  --cl-evergreen-soft: #33493A;
  --cl-graphite:       #3A362E;  /* secondary text */
  --cl-sand:           #E7DFCD;  /* borders, hairlines */
  --cl-ink-deep:       #0F0E0A;  /* footer */
  --cl-ink-card:       #1E1B15;  /* card on ink */
  --cl-ink-line:       #2A2721;  /* hairline on ink */
  --cl-mute-on-ink:    #8B8578;  /* muted label on ink */
  --cl-alert:          #B0533E;  /* sparing "don't" red */

  /* Type */
  --cl-font-display: 'Archivo', system-ui, sans-serif;
  --cl-font-serif:   'Newsreader', Georgia, serif;
  --cl-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --cl-container: 1280px;
  --cl-gutter: clamp(20px, 5vw, 64px);
  --cl-radius-card: 14px;
  --cl-radius-btn: 7px;
}

/* --- Base ------------------------------------------------- */

body {
  background: var(--cl-paper);
  color: var(--cl-ink);
  font-family: var(--cl-font-display);
  font-size: 17px;
  line-height: 1.75;
}

a { color: var(--cl-brass); text-decoration: none; }
a:hover { color: var(--cl-ink); }
::selection { background: var(--cl-brass); color: var(--cl-bone); }

/* --- Type scale ------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--cl-font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(40px, 6.2vw, 86px); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.6vw, 60px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

p { margin: 0 0 1.2em; max-width: 66ch; }

/* Editorial lead line — under a heading, sparing */
.cl-lead {
  font-family: var(--cl-font-serif);
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.5;
  color: var(--cl-graphite);
  max-width: 54ch;
}

/* Section kicker — the mono micro-label above every heading */
.cl-kicker {
  font-family: var(--cl-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cl-brass);
}

/* Brass accent rule — sits under a headline */
.cl-rule {
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: var(--cl-brass);
}

/* --- Surfaces --------------------------------------------- */
/* Alternate down the page: ink → paper → evergreen → paper → ink */

.cl-surface-ink       { background: var(--cl-ink);       color: var(--cl-bone); }
.cl-surface-paper     { background: var(--cl-paper);     color: var(--cl-ink); }
.cl-surface-evergreen { background: var(--cl-evergreen); color: var(--cl-bone); }

/* On dark surfaces the kicker and metric numbers switch to brass soft */
.cl-surface-ink .cl-kicker,
.cl-surface-evergreen .cl-kicker { color: var(--cl-brass-soft); }

/* 4px brass rule marks a major surface transition */
.cl-edge-top    { border-top: 4px solid var(--cl-brass); }
.cl-edge-bottom { border-bottom: 4px solid var(--cl-brass); }

.cl-container {
  max-width: var(--cl-container);
  margin: 0 auto;
  padding-inline: var(--cl-gutter);
}

.cl-section { padding-block: clamp(64px, 8vw, 120px); }

/* --- Components ------------------------------------------- */

.cl-btn {
  display: inline-block;
  font-family: var(--cl-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 17px 30px;
  border-radius: var(--cl-radius-btn);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cl-btn--brass { background: var(--cl-brass); color: var(--cl-ink); }
.cl-btn--brass:hover { background: var(--cl-brass-soft); color: var(--cl-ink); }

.cl-btn--ink { background: var(--cl-ink); color: var(--cl-bone); }
.cl-btn--ink:hover { background: var(--cl-brass); color: var(--cl-ink); }

.cl-btn--ghost { background: transparent; border: 1.5px solid var(--cl-ink); color: var(--cl-ink); }
.cl-btn--ghost:hover { background: var(--cl-ink); color: var(--cl-bone); }

.cl-surface-ink .cl-btn--ghost,
.cl-surface-evergreen .cl-btn--ghost { border-color: #4A463D; color: var(--cl-bone); }
.cl-surface-ink .cl-btn--ghost:hover,
.cl-surface-evergreen .cl-btn--ghost:hover { background: transparent; border-color: var(--cl-brass-soft); color: var(--cl-brass-soft); }

.cl-card {
  background: var(--cl-bone);
  border: 1px solid var(--cl-sand);
  border-radius: var(--cl-radius-card);
  padding: clamp(26px, 3vw, 40px);
}

.cl-surface-ink .cl-card { background: var(--cl-ink-card); border-color: var(--cl-ink-line); }
.cl-surface-evergreen .cl-card { background: var(--cl-evergreen-soft); border-color: transparent; }

.cl-pill {
  display: inline-block;
  font-family: var(--cl-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--cl-brass);
  border-radius: 20px;
  padding: 6px 13px;
  color: var(--cl-ink);
}

/* Metric callout — Archivo 900 number + mono label */
.cl-metric__value {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cl-ink);
}
.cl-surface-ink .cl-metric__value,
.cl-surface-evergreen .cl-metric__value { color: var(--cl-brass-soft); }

.cl-metric__label {
  font-family: var(--cl-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--cl-graphite);
}
.cl-surface-ink .cl-metric__label,
.cl-surface-evergreen .cl-metric__label { color: var(--cl-mute-on-ink); }

/* Step number — 01 / 02 / 03 */
.cl-step {
  font-family: var(--cl-font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--cl-brass);
}
.cl-surface-ink .cl-step, .cl-surface-evergreen .cl-step { color: var(--cl-brass-soft); }

/* Pull-quote */
.cl-quote {
  font-family: var(--cl-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.45;
  margin: 0;
}

/* --- Scroll reveal ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  [data-reveal].is-pending.is-visible { opacity: 1; transform: translateY(0); }
}