/* ---------------------------------- *\
   #BASE
\* ---------------------------------- */

:root {
  --font-sans:
    Bahnschrift, "DIN Condensed", "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-text: var(--font-serif);
  --font-display: var(--font-sans);

  --size-10: calc(var(--size-0) * pow(var(--size-ratio), 10));

  --color-paper: oklch(0.8939 0.0464 103.26);
  --color-ink: #000;
  --color-primary: oklch(0.5659 0.2087 32.46);
}

html {
  font-size: clamp(var(--size-0), var(--size--1) + 0.5vw, var(--size-2));
}

:where(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5ch;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--color-primary);
}

@supports (text-decoration-skip-ink: auto) {
  a {
    text-decoration-color: var(--color-primary);
  }
}

/* ---------------------------------- *\
   #BLOCKS
\* ---------------------------------- */

/**
 * Banner
 */

[role="banner"] a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: var(--size-10);
  font-weight: 700;
  font-variation-settings: "wdth" 75;
}

/**
 * Lettering
 */

.lettering {
  column-gap: 2ch;
}

.lettering__word {
  flex: 1;
  flex-wrap: nowrap;
}

/**
 * Text
 */

.text hr {
  clear: both;
}

/* Overhanging lists, module needs padding to display list-style-type */
.text > :where(ul, ol) {
  padding-inline-start: 0;
}

/* Lead paragraph */
.text > p:first-child {
  font-size: var(--size-2);
}

/* Run-ins */
.text h3 + p::first-line {
  font-size: var(--size-1);
  font-variant-caps: small-caps;
}