@layer components {

  /* blog: the posts, newest first. */
  .blog {
    max-width: 46rem;
  }

  .blog__lead {
    margin: -2rem 0 2.5rem;
    color: var(--color-ink-muted);
    text-align: center;

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

  .posts {
    display: grid;
    gap: 1rem;
  }

  .post-card {
    position: relative;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    transition: border-color 0.25s, translate 0.25s;

    time {
      color: var(--color-ink-muted);
      font-size: 0.85rem;
    }

    h2 {
      margin: 0.35rem 0 0.5rem;
      font-size: 1.45rem;
    }

    a {
      text-decoration: none;
    }

    a::after {
      /* The whole card is the link. */
      content: "";
      position: absolute;
      inset: 0;
    }

    p {
      margin: 0;
      color: var(--color-ink-muted);
    }
  }

  .post-card:hover {
    border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
    translate: 0 -2px;
  }

  /* post: one article, its pictures as wide as the text column allows. */
  .post {
    max-width: 46rem;
  }

  .post__header {
    margin-bottom: 2.5rem;
    text-align: center;

    h1 {
      margin: 1rem 0 0.75rem;
      font-size: clamp(2rem, 5vw, 3rem);
    }

    time {
      color: var(--color-ink-muted);
    }
  }

  .post__back {
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    text-decoration: none;
  }

  .post__back:hover {
    color: var(--color-primary);
  }

  .post__body {
    color: var(--color-ink-muted);
    font-size: 1.05rem;
    line-height: 1.7;

    h2 {
      margin: 2.5rem 0 0.75rem;
      color: var(--color-ink);
      font-size: 1.5rem;
    }

    strong {
      color: var(--color-ink);
    }

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

    li + li {
      margin-top: 0.4rem;
    }

    img {
      display: block;
      width: calc(100% + 6rem);
      max-width: calc(100vw - 2rem);
      height: auto;
      margin: 2rem -3rem;
    }
  }

  .post__download {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
  }

  @media (max-width: 860px) {
    .post__body img {
      width: 100%;
      margin: 2rem 0;
    }
  }
}