@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    font-weight: 700
  }

  h1 {
    font-size: clamp(2.4rem, 1.9rem + 2.4vw, 4.2rem)
  }

  h2 {
    font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem)
  }

  h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem)
  }

  p {
    max-width: 62ch;
    color: var(--humo)
  }

  a {
    text-underline-offset: 0.2em
  }

  strong {
    color: var(--niebla)
  }

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

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.9rem;
    color: var(--humo);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase
  }

  .eyebrow::before {
    content: "[";
    color: var(--lava)
  }

  .eyebrow::after {
    content: "]";
    color: var(--lava)
  }

  .text-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px hsl(214 9% 68% / 0.75)
  }

  .num-lava {
    color: var(--lava);
    font-variant-numeric: tabular-nums
  }

  .section-head {
    max-width: 44rem;
    margin-block-end: var(--gap-md)
  }

  .section-head p {
    margin-block-start: 0.75rem
  }

  blockquote {
    position: relative;
    max-width: 34rem;
    padding-inline-start: 1.4rem;
    border-inline-start: 3px solid var(--lava);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: normal;
    color: var(--niebla)
  }

  blockquote footer {
    margin-block-start: 0.75rem;
    color: var(--humo);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase
  }
}