:root {
  --paper: #fffdf7;
  --paper-raised: #f6f1e6;
  --paper-blue: #e9f0f3;
  --paper-moss: #edf2eb;
  --ink: #172337;
  --ink-soft: #526071;
  --blue: #194d71;
  --blue-dark: #103a58;
  --rust: #b54a2f;
  --moss: #47735d;
  --rule: #d8d1c2;
  --focus: #f3b53f;
  --error: #a32d25;
  --success: #26734d;
  --font-display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --font-body: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: clamp(1rem, .35vw + .94rem, 1.125rem);
  --text-lg: clamp(1.15rem, .7vw + 1rem, 1.45rem);
  --text-h3: clamp(1.25rem, 1vw + 1rem, 1.65rem);
  --text-h2: clamp(1.65rem, 2vw + 1rem, 2.6rem);
  --text-h1: clamp(2.3rem, 5vw + .7rem, 5rem);
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s18: 4.5rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow: 0 12px 30px rgba(23, 35, 55, .08);
  --shell: 73.75rem;
  --measure: 72ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: var(--moss); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--rust); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--text-h1); letter-spacing: -.045em; }
h2 { font-size: var(--text-h2); letter-spacing: -.025em; }
h3 { font-size: var(--text-h3); }
p, li { text-wrap: pretty; }
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .7rem 1.1rem; border: 1px solid var(--moss); border-radius: var(--radius-sm); background: var(--moss); color: white; font-weight: 700; text-decoration: none; }
.button:hover { background: var(--rust); color: white; transform: translateY(-1px); }
.eyebrow { color: var(--rust); font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !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 */

/* Fix: remove underlines from card links */
.featured-choice, .decision-card, .shelf-card, .home-directory a {
  text-decoration: none;
}
.featured-choice h2, .featured-choice p, .featured-choice strong,
.decision-card h2, .decision-card p,
.shelf-card h3, .shelf-card span {
  text-decoration: none;
}
a.featured-choice, a.decision-card, a.shelf-card {
  text-decoration: none;
  color: inherit;
}
a.featured-choice:hover, a.decision-card:hover, a.shelf-card:hover {
  text-decoration: none;
}
