html {
      font-family: "Fira Sans", sans-serif;
      font-family: var(--font-fira-sans);
      font-weight: 400;
      font-style: normal;

      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    @layer {
      #lundi-dev > * {
        padding-inline: calc(max((100dvw - 51.25rem) / 2, 1rem));
      }
    }

    .main-header h1,
    .main-header .tagline,
    .main-footer .tagline,
    .main-footer .home-link {
      font-family: "Fira Code", monospace;
      font-family: var(--font-fira-code);
    }

    .main-header {
      margin-top: 0;
      background-color: var(--ld-top-bg);
      border-bottom: 1.25rem solid var(--ld-top-border-color);
      min-height: 7.5rem;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: baseline;
      align-content: end;
      column-gap: 1.25rem;
      padding-bottom: 0.8rem;

      h1 {
        margin-block: 0;
        padding-top: 2rem;
        font-weight: 600;

        a {
          color: inherit;
          text-decoration: none;

          &:hover,
          &:focus-visible {
            text-decoration: underline;
          }
        }
      }

      .tagline {
        font-size: 1.5rem;
        letter-spacing: -4%;
        color: var(--ld-tint-fg);
        text-transform: lowercase;
      }

      .top-links {
        align-self: end;
        margin-bottom: 0.2rem;
        display: flex;
        align-items: start;
        gap: 1.5rem;

        a {
          flex-shrink: 0;
          color: var(--ld-tint-fg);

          svg {
            display: block;
          }
        }
      }

      @media (max-width: 50rem) {
        grid-template-columns: 1fr auto;

        .tagline {
          grid-row: 2;
          grid-column: 1 / span 2;
          font-size: 1.15rem;
          letter-spacing: -6%;
        }
      }
    }

    .main-footer {
      background-color: var(--ld-soft-bg);
      padding-block: 1.75rem;

      display: grid;
      grid-template-columns: 8rem 1fr;
      grid-template-rows: auto 1fr;
      row-gap: 0.5rem;
      column-gap: 2rem;

      a {
        color: inherit;
      }

      .home-link {
        grid-column: 1;

        font-size: 0.938rem;
        font-weight: 600;
        text-decoration: none;
      }

      .tagline {
        grid-column: 1;

        font-size: 0.813rem;
        font-weight: 400;
        text-decoration: none;
        letter-spacing: -4%;
        line-height: 1.1;
        color: var(--ld-tint-fg);
      }

      .footer-footprints {
        grid-row: 1 / span 2;
        grid-column: 2;

        p {
          font-size: 0.75rem;
          margin-top: 0;
          margin-bottom: 0.25rem;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      @media (max-width: 50rem) {
        grid-template-columns: 1fr;

        .footer-footprints {
          grid-row: auto;
          grid-column: 1;
          margin-top: 0.5rem;
        }
      }
    }.back-to-opus-list {
    margin-top: 2rem;
    margin-bottom: -1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    width: max-content;
    gap: 0.8rem;
    align-items: center;

    a,
    a:visited,
    svg {
      color: var(--ld-tint-fg);
    }
  }

  .newsletter-opus {
    margin-block: 3rem;

    .lundi-dev-email {
      max-width: 40rem;
      margin-inline: auto;
    }

    h1 {
      font-family: monospace;
      font-size: 2.8rem;
      padding-bottom: 0.5rem;
      border-bottom: 0.4rem solid var(--ld-top-border-color);
      margin-top: 1rem;
      margin-bottom: 3rem;
    }

    p,
    li {
      font-size: 1.15rem;
      line-height: 1.45;
    }

    h1 img {
      vertical-align: -0.4rem;
    }

    h1 small {
      font-size: 1.35rem;
    }

    h2 {
      font-size: 1.9rem;
    }

    code {
      font-size: 15px;
    }

    hr {
      width: 160px;
      height: 2px;
      border: 0 none;
      background-color: var(--ld-lite-fg);
      margin: 48px auto;
    }

    a {
      color: var(--ld-tint-fg);
    }

    a:visited {
      color: var(--ld-lite-fg);
    }

    li ~ li {
      margin-top: 8px;
    }

    .fineprint {
      line-height: 13px;
      margin-top: 16px;
      margin-bottom: 48px;
    }

    .fineprint small {
      font-size: 12px;
    }
  }

  .this-is-a-newsletter-archive {
    background-color: var(--ld-soft-bg);
    padding: 0.75rem 1.5rem 0.75rem 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5rem;
    border-radius: 1rem;
    border: 2px solid var(--ld-tint-fg);
    margin-top: 6rem;

    svg {
      color: var(--ld-tint-fg);
    }

    p {
      margin: 0.5rem 0 0.5rem 0;

      a,
      a:visited {
        color: var(--ld-tint-fg);
      }
    }

    .archive-date {
      font-weight: 500;
    }

    .archive-date ~ p {
      font-size: 0.9rem;
    }
  }