.static-page {
  min-height: 45vh;
  padding-block: var(--space-lg);
}

.static-page__state {
  padding: var(--space-xl) 0;
  display: grid;
  gap: var(--space-sm);
  max-width: 70ch;
}

.static-page__content {
  display: grid;
  gap: var(--space-md);
  max-width: 70ch;

  h1 {
    color: var(--text-primary, #1e3c38);
    margin: 0;
  }
}

// Prose styling for arbitrary CMS-authored HTML rendered via [innerHTML].
// Keeps a readable line length and consistent rhythm regardless of what
// tags the page editor produced, without touching the sanitized markup.
.static-page__html {
  color: var(--text-primary, #1e3c38);
  line-height: var(--line-height-relaxed);

  > * + * {
    margin-top: var(--space-md);
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  h2, h3 {
    margin-top: 1.25rem;
  }

  p, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding-left: var(--space-lg);
  }

  li + li {
    margin-top: var(--space-xs);
  }

  a {
    color: var(--primary-color);

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }

  blockquote {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    text-align: left;
  }
}
