:root {
  color-scheme: light;
  --paper: #F4EFE6;
  --ink: #4A5560;
  --terracotta: #B56A4A;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  font-size: 17px;
  line-height: 1.65;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration-color: var(--terracotta); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
main:focus { outline: none; }
p, h1 { margin: 0; }
p { max-width: 58ch; }
h1 { font-weight: 600; }
.wrap { width: min(100% - 40px, 960px); margin-inline: auto; }
.site-header { padding-block: 22px; }
.wordmark { font-size: 1.65rem; font-weight: 650; letter-spacing: -.065em; text-decoration: none; }
.wordmark span { color: var(--terracotta); }
.skip-link { position: absolute; left: 20px; top: 8px; padding: 8px 12px; background: var(--paper); z-index: 1; clip-path: inset(50%); }
.skip-link:focus { clip-path: none; }
.home { padding-top: 38px; padding-bottom: 58px; }
.glossary { max-width: 680px; }
.glossary h1 { font-size: clamp(3.5rem, 10vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.usage { margin-top: 12px; }
.definition { margin-top: 24px; font-size: 1.12rem; line-height: 1.65; max-width: 54ch; }
.studio-note { margin-top: 36px; }
.contact-email { display: inline-block; margin-top: 28px; font-size: 1.4rem; }
.site-footer { padding-block: 28px; border-top: 1px solid var(--ink); }
.colophon { max-width: 58ch; }
.footer-bottom { margin-top: 22px; }

@media (min-width: 720px) {
  .site-header { padding-block: 28px; }
  .home { padding-top: 54px; padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}