/* Self-hosted variable fonts (single file covers the whole weight range).
   Only the two "Regular" files below are preloaded (see templates/base.html); the
   italic cut loads on demand with font-display: swap so text never blocks
   render. Source: github.com/google/fonts (OFL) — see public/fonts/OFL-*.txt. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2-variations'), url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata.woff2') format('woff2-variations'), url('/fonts/literata.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src:
    url('/fonts/literata-italic.woff2') format('woff2-variations'),
    url('/fonts/literata-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-serif);
  line-height: var(--lh-tight);
  font-weight: 700;
}

h1 {
  font-size: var(--fs-3xl);
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--fs-2xl);
  }
}

a {
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.container {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--s-5);
  }
}

/* Visible only when focused, per the skip link in base.html. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-1) var(--s-2);
  background: var(--c-button-primary-bg);
  color: #fff;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--s-2);
}

.text-muted {
  color: var(--c-text-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}