@import '@fontsource/cormorant-garamond/400.css';
@import '@fontsource/cormorant-garamond/600.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

p { max-width: var(--measure); }
p + p { margin-top: 1em; }

a { color: var(--color-accent); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }