/* ================================================================
   Fleming Academic — Colors & Type
   A warm editorial system. Cream + ink + one terracotta accent.
   ================================================================ */

/* Type stack mirrors the LaTeX paper.sty:
     XCharter        — main text + display (serif)
     Source Code Pro — monospace + tabular
   No sans family. UI labels and group titles use XCharter
   small-caps / tracked uppercase to do the work of a sans.
   Math (when added later) will follow the newtxmath[xcharter] split. */
@import url("https://fonts.googleapis.com/css2?family=XCharter:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:wght@400;500;700&display=swap");

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:         #F5F0E8;   /* warm cream — page background */
  --paper:      #FAF7F1;   /* lighter cream — cards, chips, raised surfaces */

  /* ---------- Color: ink (foreground scale) ---------- */
  --ink:        #1A1915;   /* body ink — not pure black */
  --ink-muted:  #6B655A;   /* captions, metadata, secondary text */
  --ink-faint:  #A8A296;   /* slide numbers, faintest labels */

  /* ---------- Color: rules + accent ---------- */
  --rule:       #D9D2C3;   /* hairline dividers */
  --accent:     #C96442;   /* terracotta — alerts, section markers only */
  --accent-ink: #8F3F22;   /* darker accent — italic labels, hover ink */
  --accent-wash:#F2DCCF;   /* 12% accent mixed with bg — for tag backgrounds */

  /* ---------- Typography: XCharter (serif) + Source Code Pro (mono) ---------- */
  /* --serif is the canonical token. --sans is kept as an alias so
     legacy references don't break — it resolves to XCharter and
     leans on tracked uppercase / small caps for UI label flavour.
     --mono is Source Code Pro. */
  --serif: "XCharter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "XCharter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:  "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography: scale ---------- */
  --fs-xs:   0.78rem;   /* group titles (uppercase tracked) */
  --fs-sm:   0.88rem;   /* nav, chips, meta */
  --fs-base: 1.0625rem; /* 17px body */
  --fs-md:   1.15rem;   /* h3 */
  --fs-lg:   1.3rem;    /* pullquote, lede small */
  --fs-xl:   1.45rem;   /* lede */
  --fs-2xl:  2.6rem;    /* h2 (cap) */
  --fs-3xl:  5.75rem;   /* hero name (cap) */

  /* ---------- Type weights ---------- */
  --w-light:    400;   /* XCharter has no light; collapse to regular */
  --w-book:     400;   /* (was Fraunces 380; XCharter is a static face) */
  --w-regular:  400;
  --w-medium:   400;   /* XCharter has no medium; semantic = regular */
  --w-bold:     700;

  /* ---------- Line + letter ---------- */
  --lh-tight:   1.1;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --lh-lede:    1.45;
  --tracking-neg: -0.01em;
  --tracking-caps: 0.14em;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10:6rem;

  /* ---------- Layout ---------- */
  --measure: 36rem;                                 /* ~65ch reading column */
  --content-max: 64rem;                             /* overall max width */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);            /* page padding */

  /* ---------- Borders + radii ---------- */
  --hairline: 1px solid var(--rule);
  --radius-xs: 2px;   /* buttons */
  --radius-sm: 3px;   /* tags */
  --radius-pill: 999px; /* chips */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-slow: 0.9s;
}

/* ================================================================
   Semantic element styles — use these directly as a baseline,
   or copy their weight / style settings into new contexts.
   ================================================================ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--paper); }

/* ---------- Headings: XCharter, sized + weighted ---------- */
h1, .h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-neg);
  color: var(--ink);
  margin: 0 0 1.75rem;
}
h1 em, .h1 em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-ink);
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 2rem;
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.35;
  margin: 0 0 0.35rem;
}

/* ---------- Lede — the one-paragraph intro under a heading ---------- */
.lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: var(--lh-lede);
  color: var(--ink);
}

/* ---------- Eyebrow — italic terracotta mini-label, used THROUGHOUT ---------- */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--accent-ink);
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
}

/* ---------- Section label — lowercase italic, sits above h2 ---------- */
.section-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--accent-ink);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

/* ---------- Group title — uppercase tracked XCharter, replaces sans usage ---------- */
.group-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
  padding-bottom: 0.5rem;
  border-bottom: var(--hairline);
}

/* ---------- UI label — small tracked XCharter ---------- */
.ui-label {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* ---------- Body copy ---------- */
p { margin: 0 0 1.1rem; text-wrap: pretty; }

/* ---------- Pullquote — italic XCharter with a left terracotta rule ---------- */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 2rem 0;
}

/* ---------- Brand wordmark (nav) — XCharter bold + terracotta dot ---------- */
.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.brand-dot { color: var(--accent); }

/* ---------- Links — ink with hairline underline, terracotta on hover ---------- */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- Code / tabular — Source Code Pro ---------- */
code, pre, .mono {
  font-family: var(--mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

/* ---------- Tabular numerics for CVs, dates, year columns ---------- */
.tabular { font-variant-numeric: tabular-nums; }