* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
@media (prefers-reduced-motion: reduce) { * { transition: none } }
html body { margin: 0; padding-bottom: 80px; font: 400 17px/1.6 var(--hmr-sans); color: var(--hmr-ink); background: var(--hmr-paper); -webkit-font-smoothing: antialiased; overflow-wrap: break-word }
body img { display: block; max-width: 100%; height: auto }
body a { color: inherit }
body :focus-visible { outline: 3px solid var(--hmr-focus); outline-offset: 3px }
body h1 { margin: 0 }
body h2 { margin: 0 }
body h3 { margin: 0 }
body p { margin: 0 }
body ul { margin: 0 }
body ol { margin: 0 }
body h1 { font-family: var(--hmr-serif); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance }
body h2 { font-family: var(--hmr-serif); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance }
body h1 { font-size: clamp(2.25rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1.05 }
body h2 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.1 }
body p { text-wrap: pretty; max-width: var(--hmr-measure) }
body blockquote { margin: 0 }
body blockquote p { font: 500 clamp(1.3rem, 1rem + 1.6vw, 2.1rem)/1.3 var(--hmr-serif); max-width: 32ch }
body blockquote cite { display: block; margin-top: var(--hmr-s4); font: 600 0.95rem var(--hmr-sans); color: var(--hmr-muted); font-style: normal }
body footer { background: var(--hmr-ink); color: var(--hmr-on-slate-muted); padding-block: var(--hmr-s7); font-size: 0.9rem }
body footer .grid { display: grid; grid-template-columns: 1fr; gap: var(--hmr-s6) }
body footer p { max-width: 70ch }
body footer p + p { margin-top: var(--hmr-s3) }
body footer strong { color: var(--hmr-on-slate) }
body footer nav { display: flex; flex-wrap: wrap; gap: var(--hmr-s1) var(--hmr-s5); margin-bottom: var(--hmr-s4) }
body footer nav a { display: inline-block; padding-block: var(--hmr-s2) }
body footer p a { display: inline-block; padding-block: var(--hmr-s2) }
body footer a { color: var(--hmr-on-slate); text-underline-offset: 3px }
@media (min-width: 900px) { html body { font-size: 18px } }
@media (min-width: 900px) { body footer .grid { grid-template-columns: 1.3fr 1fr; gap: var(--hmr-s7) } }
@media (min-width: 900px) { body footer nav a { padding-block: 0 } }
@media (min-width: 900px) { body footer p a { padding-block: 0 } }
@media (min-width: 1100px) { html body { padding-bottom: 0 } }
/* Etch and Automatic.css style headings, blockquotes and lists on their own; make our design win. */
html body h1, html body h2, html body h3, html body h4 { color: inherit; }
/* Text on dark sections must always be light. */
.hero, .page-hero, .how, .final, footer { color: var(--hmr-on-slate); }
.hero h1, .hero h2, .hero h3, .page-hero h1, .page-hero h2, .page-hero h3, .how h1, .how h2, .how h3, .final h1, .final h2, .final h3, footer h1, footer h2, footer h3 { color: var(--hmr-on-slate); }
html body blockquote { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; quotes: none; }
html body blockquote::before, html body blockquote::after { content: none; }
html body cite { font-style: normal; }
/* Etch's container uses its own content width; use the design width (1160px). */
html body [data-etch-element="container"] { max-inline-size: 1160px; }