@layer pages {
  .promo {
    margin-block-end: calc(-1 * (var(--space-16) + 1lh));
    padding-block-start: var(--space-16);

    @media (max-width: 650px) {
      margin-block-end: 0;
      padding-block: calc(var(--logo-overlap) + var(--space-16)) var(--space-24);

      & + .intro {
        padding-block-start: 0;
      }
    }
  }

  .intro > .page-heading {
    grid-column: 1 / -1;
  }

  .entries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
    padding-block-end: var(--space-64);

    & > .pagination {
      grid-column: 1 / -1;
      margin-block: var(--space-8) 0;

      & ul {
        justify-content: center;
      }
    }

    @media (width <= 950px) {
      padding-block-end: var(--space-32);
    }

    @media (width <= 790px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .entry {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    margin: 0;
    padding: var(--space-16) var(--space-16) var(--space-24);
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background-color: var(--color-paper);
    box-shadow: var(--shadow-flat);

    & > :not(.post-cover) {
      margin-inline: var(--space-8);
    }

    & > .post-cover {
      order: -1;
      margin: 0 0 var(--space-16);
    }

    & > header {
      display: flex;
      flex-direction: column;
      margin-block-end: var(--space-8);
    }

    & h2 {
      margin: 0;
      font-size: var(--text-h3);
      line-height: var(--leading-h3);

      & a::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
      }

      & a:focus-visible {
        outline: none;
      }
    }

    & .keywords {
      order: -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4);
      margin-block-end: var(--space-12);

      & > time {
        flex-basis: 100%;
        margin: 0;
      }

      & a:last-child {
        margin-inline-end: 0;
      }
    }

    & :is(.keywords, .introduction, .continue) a {
      position: relative;
      z-index: 1;
    }

    & > .introduction {
      display: -webkit-box;
      overflow: hidden;
      color: var(--color-charcoal);
      font-size: var(--text-ui);
      line-height: var(--leading-ui);
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;

      & > * {
        margin-block: 0;
      }
    }

    & > .continue {
      display: none;
    }

    &:has(h2 a:focus-visible) {
      outline: 2px solid var(--focus-color);
      outline-offset: 2px;
    }

    @media (hover: hover) {
      &:hover {
        box-shadow: var(--shadow-raised);
        translate: 0 -2px;

        & h2 a::after {
          inset-block-end: calc(-1 * var(--space-4));
        }
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition:
        box-shadow var(--transition-state),
        translate 80ms ease-out;
    }
  }

  .entry:where(
    :nth-child(1 of .entry),
    :nth-child(6 of .entry),
    :nth-last-child(1 of .entry):is(
      :nth-child(2 of .entry),
      :nth-child(4 of .entry),
      :nth-child(7 of .entry),
      :nth-child(9 of .entry)
    )
  ) {
    grid-column: 1 / -1;

    @media (width > 790px) {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-rows: 1fr repeat(3, auto) 1fr;
      column-gap: var(--space-32);
      padding: var(--space-24) var(--space-32) var(--space-24) var(--space-24);

      & > :not(.post-cover) {
        grid-column: 2;
        margin-inline: 0;
      }

      & > header {
        grid-row: 2;
      }

      & > .introduction {
        grid-row: 3;
      }

      & > .continue {
        grid-row: 4;
      }

      & > .post-cover {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: center;
        margin: 0;
      }

      &:not(:has(> .post-cover)) {
        grid-template-columns: minmax(0, 1fr);

        & > :not(.post-cover) {
          grid-column: 1;
        }
      }
    }

    & h2 {
      font-size: var(--text-h2);
      line-height: var(--leading-h2);
    }

    & > .introduction {
      display: block;
      overflow: visible;
      color: var(--color-ink);
      font-size: var(--text-body);
      line-height: var(--leading-body);
    }

    & > .continue {
      display: block;
      margin-block-start: var(--space-20);
    }
  }

  .entry:nth-child(6 of .entry):has(> .post-cover) {
    @media (width > 790px) {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      padding: var(--space-24) var(--space-24) var(--space-24) var(--space-32);

      & > :not(.post-cover) {
        grid-column: 1;
      }

      & > .post-cover {
        grid-column: 2;
      }
    }
  }

  .entry[data-type='quote'] {
    justify-content: center;
    padding: var(--space-32) var(--space-24);
    border-color: transparent;
    background: none;
    box-shadow: none;
    text-align: center;

    & > header::before {
      content: '“' / '';
      display: block;
      block-size: 0.5em;
      color: var(--color-cyan);
      font: italic var(--weight-heading) 5rem / 1 var(--font-display);
    }

    & .keywords,
    & > .continue {
      display: none;
    }

    & h2 {
      max-inline-size: 32ch;
      margin-inline: auto;
      text-wrap: balance;

      &::before {
        content: '«';
      }

      &::after {
        content: '»';
      }
    }

    & > .introduction {
      display: block;
      margin-block-start: var(--space-12);
      color: var(--color-muted);
    }

    & > :not(.post-cover) {
      margin-inline: 0;
    }

    @media (hover: hover) {
      &:hover {
        box-shadow: none;
        translate: none;
      }
    }

    &:where(
        :nth-child(1 of .entry),
        :nth-child(6 of .entry),
        :nth-last-child(1 of .entry):is(
          :nth-child(2 of .entry),
          :nth-child(4 of .entry),
          :nth-child(7 of .entry),
          :nth-child(9 of .entry)
        )
      )
      h2 {
      font-size: var(--text-h1);
      line-height: var(--leading-h1);
    }
  }

  .entry[data-type='video'] {
    & .screen a {
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-card);
      background:
        var(--pattern-noise),
        linear-gradient(var(--color-muted), var(--color-charcoal)) var(--color-charcoal);
      box-shadow:
        inset 0 10px 15px -10px var(--color-ink),
        inset 0 -10px 15px -10px var(--color-ink);
    }

    & .post-cover a {
      position: relative;

      &::before,
      &::after {
        content: '';
        position: absolute;
        z-index: 1;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 72px;
        aspect-ratio: 1;
        translate: -50% -50%;
      }

      &::before {
        border-radius: 50%;
        corner-shape: round;
        background-color: color-mix(in oklch, var(--color-green) 92%, transparent);
        box-shadow: var(--shadow-raised);
      }

      &::after {
        background-color: var(--color-green-ink);
        mask: var(--icon-play) center / 28px no-repeat;
      }
    }

    & .introduction iframe {
      display: none;
    }
  }
}