:root {
  --canvas: #fff;
  --surface: #f4f4f1;
  --surface-strong: #ebeae4;
  --ink: #171717;
  --muted: #5a5a55;
  --teal: #087a78;
  --teal-dark: #075f5e;
  --coral: #e4472f;
  --signal: #f1c84b;
  --sage: #dfe8df;
  --line: #c9c8c1;
  --shadow: 8px 8px 0 #171717;
  --radius-sm: 0;
  --radius-md: 0;
  --measure: 70ch;
  --maxw: 80rem;
  --gutter: 1.25rem;
  --baseline: .5rem;
  --font-body: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --font-display: 'Franklin Gothic Medium', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1.0625rem/1.65 var(--font-body); }
a { color: var(--teal-dark); text-underline-offset: .18em; }
a:hover { color: var(--coral); }
.container { width: min(calc(100% - 2rem), var(--maxw)); margin-inline: auto; }
.skip-link { position: fixed; inset: .75rem auto auto .75rem; z-index: 100; padding: .65rem 1rem; background: var(--signal); color: var(--ink); font-weight: 800; transform: translateY(-220%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 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 */