:root {
  color-scheme: light;
  --cream: #F7EBD7;
  --navy: #223C63;
  --red: #B33A3A;
  --yellow: #F2C14E;
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  background: var(--cream);
  color: var(--navy);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

* { box-sizing: border-box; }
body { margin: 0; border-top: 8px solid var(--red); }
::selection { background: var(--yellow); color: var(--navy); }
html { scrollbar-color: var(--navy) var(--cream); }
.brand, main, footer {
  width: min(100% - var(--space-12), 42rem);
  margin-inline: auto;
}
.brand { padding-top: var(--space-6); }
.brand img { display: block; width: 180px; height: auto; }
main { padding-top: var(--space-6); }
h1, h2 { font-weight: 750; line-height: 1.2; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.75rem); letter-spacing: -0.025em; }
.updated { margin-top: var(--space-2); font-size: 0.875rem; }
.intro { margin-top: var(--space-8); font-size: 1.3rem; font-weight: 650; line-height: 1.45; }
h2 { margin: var(--space-12) 0 var(--space-3); font-size: 1.25rem; }
p { margin: 0 0 var(--space-5); }
a { color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 2px; }
footer { margin-top: var(--space-12); padding-block: var(--space-6) var(--space-12); border-top: 1px solid var(--navy); font-size: 0.875rem; }
@media (max-width: 480px) {
  .brand, main, footer { width: calc(100% - var(--space-12)); }
  .brand img { width: 144px; }
}