@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: fallback;
  src: url("/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf")
    format("truetype");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: fallback;
  src: url("/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf")
    format("truetype");
}

html {
  font-size: calc(85% + 0.5dvw);
  line-height: 1.6;
  font-family: "Atkinson Hyperlegible Next", Verdana, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-wrap: pretty;
  color-scheme: light dark;
  background-color: color-mix(in srgb, Canvas, CanvasText 3%);
  color: color-mix(in srgb, CanvasText, Canvas 12%);
}
h1 {
  line-height: 1.45;
}
h1,
h2,
h1 + p {
  text-wrap: balance;
}
body {
  margin: calc(1em + 1dvw);
}
main {
  margin: auto;
  max-width: 60ch;
}
a {
  text-underline-offset: 0.25em;
}

.subtitle {
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

ol {
  padding-left: min(2.5em, 7vw);
}
hr {
  margin: 1.6rem 0;
}

html.ihra :is(h1, h2) {
  text-transform: uppercase;
  font-weight: 800;
}
html.ihra :is(h1, .subtitle) {
  text-align: center;
}
html.ihra h1 {
  font-size: clamp(2rem, calc(1.5rem + 2vw), 2.5rem);
  margin: 1.2rem 0 1rem 0;
  line-height: 1.15;
}
html.ihra h2 {
  font-size: clamp(1.5rem, calc(1.4rem + 1vw), 1.6rem);
  margin: 1.7rem 0 1rem 0;
  line-height: 1.25;
}
html.ihra .subtitle {
  margin: 1rem 0;
}

ul.home-links {
  display: block;
  padding: 0;
  overflow-wrap: break-word;
}