.crumbs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      padding-block: var(--space-5);
      font-size: var(--fs-xs);
      letter-spacing: 0.04em;
      color: var(--color-muted);

      li + li::before {
        content: "/";
        margin-right: var(--space-2);
        color: var(--c-mist-300);
      }

      a:hover {
        color: var(--color-text);
      }

      [aria-current] {
        color: var(--color-text);
      }
    }

    .page-hero {
      padding-block: var(--space-6) var(--space-8);

      .serif {
        max-width: 18ch;
        margin-top: var(--space-4);
        font-size: var(--fs-2xl);

        em {
          display: block;
          color: var(--color-text-soft);
        }
      }

      .lead {
        max-width: 56ch;
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }
    }

    .band {
      padding: clamp(2rem, 1rem + 3vw, 3.5rem);
      color: #eef1f4;
      background: var(--c-ink-950);
    }

    .feature {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      margin-bottom: var(--space-8);

      .media {
        aspect-ratio: 4 / 3;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1.2s var(--ease-out);
        }
      }

      &:hover .media img {
        transform: scale(1.04);
      }

      h2 {
        margin-top: var(--space-3);
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 600;
        line-height: 1.15;
      }

      p {
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .link-line {
        margin-top: var(--space-6);
      }
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      font-size: var(--fs-2xs);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-muted);

      b {
        font-weight: 600;
        color: var(--color-text);
      }
    }

    .topics {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-6);
      padding-block: var(--space-4);
      overflow-x: auto;
      border-block: 1px solid var(--color-border);
      scrollbar-width: none;

      button {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: var(--fs-xs);
        letter-spacing: 0.06em;
        color: var(--color-text-soft);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        transition: color var(--dur-fast), border-color var(--dur-fast);

        &:hover,
        &[aria-pressed="true"] {
          color: var(--color-text);
          border-color: var(--c-ink-950);
        }

        &[aria-pressed="true"] {
          font-weight: 600;
        }
      }
    }

    .posts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-7) var(--space-5);
    }

    /* cards share row tracks so meta, titles and excerpts line up across a row */
    .post {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-content: start;
      row-gap: 0;

      &[hidden] {
        display: none;
      }

      .media {
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--product-bg);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1.2s var(--ease-out);
        }
      }

      h3 {
        margin-top: var(--space-2);
        font-size: var(--fs-md);
        font-weight: 600;
        line-height: 1.3;

        a {
          background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
          transition: background-size var(--dur-base) var(--ease-out);
        }
      }

      .meta {
        margin-top: var(--space-4);
      }

      p {
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
      }

      &:hover {
        .media img {
          transform: scale(1.05);
        }

        h3 a {
          background-size: 100% 1px;
        }
      }
    }

    .more {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-8);
      font-size: var(--fs-xs);
      color: var(--color-muted);

      [hidden] {
        display: none;
      }
    }

    .news {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: var(--space-6);
      margin-block: var(--section-y);

      h2 {
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 600;
        color: #fff;
      }

      p {
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        color: rgb(238 241 244 / 0.85);
      }

      form {
        display: flex;
        background: var(--c-white);

        input {
          flex: 1;
          min-width: 0;
          padding: 0 var(--space-4);
          color: var(--c-ink-950);
          border: 0;
          outline: 0;
        }
      }
    }

    @media (max-width: 1024px) {
      .feature,
      .news {
        grid-template-columns: 1fr;
      }

      .posts {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .posts {
        grid-template-columns: 1fr;
      }

      .news form {
        flex-direction: column;

        input {
          min-height: 52px;
        }
      }
    }