:root {
  --sheet: #ffffff;
  --ink: #1b2440;
  --body: #4f5566;
  --rule: #dcdfe4;
  --tile: #f4f5f7;
  --gold: #f2e6c9;
  --apricot: #ebc3a2;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Archivo', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block: 28px 100px; }
body { margin: 0; background-color: var(--sheet); color: var(--ink); font-family: var(--sans); font-size: 18px; font-weight: 400; line-height: 1.65; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -0.018em; text-wrap: balance; }
h1 { font-size: clamp(54px, 5.28vw, 76px); line-height: 1.06; }
h2 { font-size: clamp(38px, 3.62vw, 52px); line-height: 1.12; }
h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; font-weight: 400; }
p { max-width: 66ch; margin: 0 0 20px; color: var(--body); }
a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, progress:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
img { display: block; max-width: 100%; object-fit: cover; background-color: #ece7db; color: var(--ink); font: 16px/1.5 var(--sans); }
section[id] { scroll-margin-block-start: 32px; }
ul { margin: 24px 0; padding-inline-start: 22px; }
li { margin: 0 0 10px; padding-inline-start: 5px; color: var(--body); }
::selection { background-color: var(--gold); color: var(--ink); }
@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.65; }
  h1 { font-size: clamp(41px, 11.7vw, 58px); line-height: 1.07; letter-spacing: -0.015em; }
  h2 { font-size: 38px; line-height: 1.15; }
  h3 { font-size: 22px; }
  p { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }