/* latin-ext */
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/enriqueta-ext-400.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/enriqueta-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/enriqueta-ext-700.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/enriqueta-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --color-page: #fbf7ef;
  --color-ink: #111;
  --color-accent: #f57c00;
  --color-accent-dark: #8a4300;
  --color-focus: #9c4d00;
  --measure-page: 60rem;
  --measure-copy: 36ch;
  --measure-heading: 18ch;
  --space-2: 1rem;
  --space-4: 2rem;
  --logo-size: 12rem;
  --border-accent: 2px solid var(--color-accent);
}

/* Mobile-first base styles */
* {
  box-sizing: border-box;
}

html {
  margin: 0;
}

body {
  margin: 0;
  font: 18px "Enriqueta", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;
  line-height: 1.6;
  background: var(--color-page);
  color: var(--color-ink);
}

main {
  width: min(100% - 2rem, var(--measure-page));
  margin-inline: auto;
  margin-block: var(--space-4);
}

.site-logo {
  display: block;
  width: min(100%, var(--logo-size));
  height: auto;
  margin-inline: auto;
}

h1 {
  max-width: var(--measure-heading);
  margin-inline: auto;
  text-align: center;
  text-transform: uppercase;
}

p {
  width: 100%;
  max-width: var(--measure-copy);
  margin-inline: auto;
}

.announcement {
  margin-top: var(--space-4);
  padding: var(--space-2) 1.25rem;
  border-block: var(--border-accent);
  color: var(--color-accent-dark);
  font-weight: 700;
}

footer {
  width: min(100% - 2rem, var(--measure-page));
  margin: var(--space-4) auto 0;
  text-align: center;
}

.social {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--color-accent-dark);
}

.social svg {
  width: 1.5rem;
  height: 1.5rem;
}

.copyright {
  margin-top: var(--space-2);
  font-size: 0.8em;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}