@font-face {
  font-family: "Literata";
  src: url("./assets/fonts/literata-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  color: #202622;
  background: #fbfaf6;
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 17px; line-height: 1.7; }
a { color: #173f3c; text-underline-offset: 0.18em; }
a:hover { color: #8a681b; }
.shell { width: min(100% - 2.5rem, 920px); margin-inline: auto; }
.legal-header { border-bottom: 1px solid #d7d8cf; background: #f5f1e7; }
.legal-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }
.wordmark { color: #173f3c; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.wordmark span { color: #b18422; }
.legal-header nav { display: flex; flex-wrap: wrap; gap: 0.65rem 1.35rem; font-size: 0.88rem; }
.legal-header nav a { text-decoration: none; }
main { padding-block: clamp(3rem, 7vw, 6rem); }
.eyebrow { margin: 0 0 0.75rem; color: #8a681b; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
h1, h2 { font-family: "Literata", Georgia, serif; color: #173f3c; line-height: 1.22; }
h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 400; }
h2 { margin: 2.6rem 0 0.55rem; font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 400; }
p, li { max-width: 72ch; }
.intro { max-width: 65ch; font-size: 1.15rem; }
.updated { color: #6f7871; font-size: 0.85rem; }
.callout { margin-block: 2rem; padding: 1.3rem 1.5rem; border-left: 4px solid #b18422; background: #f5f1e7; }
.callout p { margin: 0; }
ul { padding-left: 1.35rem; }
li + li { margin-top: 0.4rem; }
.legal-footer { border-top: 1px solid #d7d8cf; padding-block: 2rem; background: #f5f1e7; }
.legal-footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.legal-footer p { margin: 0; color: #59645e; font-size: 0.85rem; }
@media (max-width: 620px) {
  .legal-header .shell { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
  .legal-header nav { gap: 0.5rem 1rem; }
}