/* Shared portfolio design system — edit once, used by every page. */
:root {
  --navy: #10283f;
  --blue: #446c8f;
  --rose: #e8aba6;
  --blush: #f6e9e6;
  --cream: #fbfaf7;
  --paper: #fff;
  --white: #fff;
  --ink: #233342;
  --text: #233342;
  --muted: #657583;
  --line: #dfe5e8;
  --shadow: 0 24px 70px rgba(22,43,61,.12);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --box-cream: #f6f1e9;
}

/* Shared baseline and typography. Page-specific layouts/artwork remain in each HTML. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
}
h1, h2, h3, h4, h5, h6,
.wordmark, .logo {
  font-family: var(--font-serif);
}
button, input, select, textarea {
  font: inherit;
}
a { color: inherit; }

/* Shared warm-cream treatment for information cards, not campaign artwork. */
.case-sidebar, .highlight-item, .phase-card, .journey-step,
.sidebar-card, .info-card, .project-card, .personal-card,
.sample-card, .sleepy-showcase, .outcome-box, .case-stat,
.metric-card, .role-card, .timeline-card {
  background-color: var(--box-cream);
}