/* Minimal element defaults so a bare HTML page already reads as Carolyn.G. */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font: var(--type-hero); }
h2 { font: var(--type-h1); }
h3 { font: var(--type-h2); }
h4 { font: var(--type-h3); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--pink-700); text-decoration: none; border-bottom: 1px solid var(--pink-300); transition: var(--transition-control); }
a:hover { color: var(--ink-900); border-bottom-color: var(--gold-400); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--radius-sm); }
img { max-width: 100%; display: block; }
small { font-size: var(--text-sm); color: var(--text-muted); }
hr { border: none; height: 1px; background: var(--rule-ink); margin: var(--space-8) 0; }
::selection { background: var(--pink-300); color: var(--ink-900); }
:root { color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}