/* Michael Cameron Personal Brand — generated from tokens.json */
:root, [data-theme="light"] {
  --mc-paper: #f2efe9;
  --mc-ink: #171c26;
  --mc-navy: #26395c;
  --mc-pewter: #9a9e9f;
  --mc-pewter-light: #c7cacb;
  --mc-graphite: #3f4552;
  --mc-slate: #5f6573;
  --mc-hairline: #d5d1c9;
  --mc-line-cream: rgba(242,239,233,.85);
  --mc-line-navy: rgba(38,57,92,.9);
  --surface-page: var(--mc-paper);
  --surface-panel: var(--mc-navy);
  --surface-deep: var(--mc-ink);
  --text-strong: var(--mc-ink);
  --text-body: var(--mc-graphite);
  --text-muted: var(--mc-slate);
  --text-on-navy: var(--mc-paper);
  --text-on-navy-muted: var(--mc-pewter-light);
  --rule-strong: var(--mc-ink);
  --rule-soft: var(--mc-hairline);
  --rule-on-navy: var(--mc-pewter);
  --accent: var(--mc-navy);
  --accent-metal: var(--mc-pewter);
  --link: var(--mc-navy);
  --link-hover: var(--mc-ink);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 72px;
  --space-9: 120px;
  --radius: 0;
  --page-max: 1200px;
  --page-pad-x: 40px;
  --section-gap: 72px;
  --section-label-col: 220px;
  --measure: 720px;
  --mosaic-gutter-ratio: 1.1%;
  --rule-width: 1px;
  --type-hero: clamp(48px,7vw,96px);
  --type-h1: 72px;
  --type-h2: 32px;
  --type-h3: 24px;
  --type-h4: 22px;
  --type-lead: 19px;
  --type-body: 17px;
  --type-small: 15px;
  --type-label: 12px;
  --type-caption: 11px;
  --leading-display: 1.04;
  --leading-heading: 1.08;
  --leading-body: 1.55;
  --tracking-label: .12em;
  --tracking-display: -.01em;
  --font-display: "Libre Caslon Display", Georgia, serif;
  --font-text: "Libre Caslon Text", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
.hero { font-family: var(--font-display); font-size: 96px; line-height: 1.04; font-weight: 400; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 72px; line-height: 1.04; font-weight: 400; }
.h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.08; font-weight: 400; }
.h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.08; font-weight: 400; }
.h4 { font-family: var(--font-display); font-size: 22px; line-height: 1.08; font-weight: 400; }
.accent { font-family: var(--font-text); font-size: 19px; line-height: 1.55; font-weight: 400; font-style: italic; }
.lead { font-family: var(--font-body); font-size: 19px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; }
.caption { font-family: var(--font-mono); font-size: 11px; font-weight: 400; }