:root {
  --paper: #f6f1e7;
  --paper-deep: #e9dfce;
  --ink: #172238;
  --ink-soft: #4c566b;
  --cobalt: #1557ff;
  --cobalt-dark: #0d36a6;
  --coral: #ff684d;
  --lime: #d8f45a;
  --line: #172238;
  --white: #fffdf8;
  --on-dark-muted: #e6ebf4;
  --card-copy-max-lines: 4;
  --display: Georgia, "Times New Roman", serif;
  --body: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --mono: "Courier New", Courier, monospace;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --radius-small: 4px;
  --radius-large: 24px;
  --shadow-offset: 9px 9px 0 var(--ink);
  --measure: 74ch;
  --wide: 1180px;
  --qa-cols: 12;
  --qa-gutter: 1rem;
  --qa-baseline: 8px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
}
a {
  color: var(--cobalt-dark);
  text-underline-offset: 0.18em;
}
img,
svg {
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
}
:focus-visible {
  outline: 4px solid var(--coral);
  outline-offset: 3px;
}
::selection {
  color: var(--ink);
  background: var(--lime);
}
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  color: var(--white);
  background: var(--ink);
}
.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* support-sites:related-reading:start */
.related-reading{width:min(68rem,calc(100% - 2.5rem));margin:clamp(2rem,6vw,4rem) auto;padding:1.4rem 0;border-block:1px solid currentColor}
.related-reading-label{margin:0 0 .75rem;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.related-reading ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0;padding:0;list-style:none}
.related-reading a{display:block;height:100%;padding:.85rem;border:1px solid currentColor;text-decoration:none}
.related-reading a:hover{text-decoration:underline}
@media(max-width:720px){.related-reading ul{grid-template-columns:1fr}}
/* support-sites:related-reading:end */