/*
 * CSS architecture
 * ----------------
 * Component files load after the legacy sheets. New visual work belongs in the
 * component that owns it; do not append rules to layout-fixes.css.
 *
 * Tokens remain intentionally small: only values shared by multiple
 * components belong here. Page-specific values stay inside their component.
 */
:root {
  --tsf-color-ink: var(--ink, #171513);
  --tsf-color-red: var(--red, #c6192e);
  --tsf-color-paper: #fffaf4;
  --tsf-font-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
  --tsf-font-ui: var(--font-ui, Inter, Arial, sans-serif);
}

/* Every component must own its box model. This prevents an adjacent section
 * from changing its dimensions through inherited layout assumptions. */
.tsf-component,
.tsf-component *,
.tsf-component *::before,
.tsf-component *::after {
  box-sizing: border-box;
}