/* ──────────────────────────────────────────────
   CC BASE STYLES — locked 8 May 2026
   Reset + typography baseline + link/button defaults.
   Loads after tokens.css.
   ────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--dark-text);
  background: var(--page-bg);  /* off-white default; cream becomes a feature surface */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ── Typography baseline ─────────────────────── */
/* Default headings = Bricolage Grotesque heavy. Burnt orange for h1/h2 (orange-dominant rule). */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-heading);
  color: var(--dark-text);
  letter-spacing: var(--ls-h2);
}

h1 {
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--burnt-orange);  /* orange-dominant: h1 in burnt orange */
}

h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: var(--burnt-orange);
}

/* Mobile typography scale - default H1/H2 sizes are display-grade on desktop and overflow on narrow viewports */
@media (max-width: 600px) {
  h1 { font-size: 2.5rem; line-height: 1.02; letter-spacing: -1.2px; text-wrap: balance; }
  h2 { font-size: 1.875rem; line-height: 1.1; text-wrap: balance; }
}

@media (max-width: 380px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.625rem; }
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--dark-text);
}

h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dark-text);
  opacity: 0.85;
}

/* Italic emphasis inside any heading - dark red on orange headlines for differentiation */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: var(--fw-semibold);
  color: var(--dark-red);
}

/* Headings on dark/sage surfaces switch to cream */
.surface-thinking h1,
.surface-thinking h2,
.surface-thinking h3 { color: var(--cream); }
.surface-thinking h1 em,
.surface-thinking h2 em,
.surface-thinking h3 em { color: var(--cream); }

/* Body paragraphs */
p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--dark-text);
  max-width: 60ch;
}

p.lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  opacity: 0.78;
}

/* Eyebrow labels - 11px uppercase Bricolage 600, burnt orange */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--burnt-orange);
  margin-bottom: var(--space-4);
  display: inline-block;
}

/* Pull quote */
blockquote, .pull {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: 1.4;
  padding-left: var(--space-5);
  border-left: 4px solid var(--dark-red);
  color: var(--dark-text);
  opacity: 0.92;
  max-width: 60ch;
}

/* Caption */
.caption {
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0.65;
}

/* ── Links ───────────────────────────────────── */
/* Inline links = burnt orange + underline (dark red is reserved for CTA only) */
a {
  color: var(--burnt-orange);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--duration-base) var(--ease-out);
}

a:hover {
  color: var(--burnt-orange-hover);
}

/* Subtle/secondary link - bottom border style */
.link-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--burnt-orange);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1.5px solid var(--burnt-orange);
  padding-bottom: 3px;
  transition: gap var(--duration-base) var(--ease-out);
}

.link-secondary:hover {
  gap: 12px;
  color: var(--burnt-orange-hover);
  border-color: var(--burnt-orange-hover);
}

/* Reset link colour inside buttons (button defines its own colour) */
.btn a, a.btn { text-decoration: none; }

/* ── Buttons ─────────────────────────────────── */
/* Primary CTA = burnt orange background, cream text (orange-dominant rule) */
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--burnt-orange);
  color: var(--cream);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}

.btn:hover,
.btn-primary:hover {
  background: var(--burnt-orange-hover);
  color: var(--cream);
}

/* Secondary / ghost button */
.btn-secondary {
  background: transparent;
  color: var(--burnt-orange);
  border: 1.5px solid var(--burnt-orange);
  padding: 12px 26px;
}

.btn-secondary:hover {
  background: var(--burnt-orange);
  color: var(--cream);
}

/* Dark-red CTA reserved for high-emphasis decision moments only */
.btn-decision {
  background: var(--dark-red);
}

.btn-decision:hover {
  background: var(--dark-red-hover);
}

/* ── Lists ───────────────────────────────────── */
ul, ol { padding-left: 1.25rem; }

ul li::marker {
  color: var(--burnt-orange);
}

ol li::marker {
  color: var(--burnt-orange);
  font-weight: var(--fw-semibold);
}

li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-base);
}

/* ── Selection ───────────────────────────────── */
::selection {
  background: var(--burnt-orange);
  color: var(--cream);
}

/* ── Focus ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--burnt-orange);
  outline-offset: 3px;
}

/* ── Long-form essay (single-purpose Newsreader override) ── */
/* Apply .essay class to a wrapping element to flip default sans body to Newsreader serif */
.essay h1,
.essay h2,
.essay h3,
.essay p {
  font-family: var(--font-serif);
}

.essay h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  letter-spacing: -1px;
  color: var(--dark-text);
}

.essay h1 em {
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--burnt-orange);
}

.essay p {
  font-weight: var(--fw-normal);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 65ch;
}

.essay blockquote,
.essay .pull {
  font-family: var(--font-serif);
  font-size: 1.625rem; /* 26px */
  line-height: 1.4;
}