.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);
    }

    .about-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(2rem, 1rem + 5vw, 6rem);

      .media {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .note {
        position: absolute;
        left: var(--space-5);
        bottom: var(--space-5);
        padding: var(--space-3) var(--space-5);
        font-size: var(--fs-xs);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        background: rgb(255 255 255 / 0.92);
      }
    }

    .beliefs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-block: 1px solid var(--color-border);

      li {
        padding: var(--space-7) var(--space-6);

        & + li {
          border-left: 1px solid var(--color-border);
        }
      }

      b {
        font-size: var(--fs-xs);
        letter-spacing: 0.18em;
        color: var(--color-muted);
      }

      h3 {
        margin-top: var(--space-3);
        font-family: var(--font-serif);
        font-size: var(--fs-lg);
        font-weight: 600;
      }

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

    .making {
      padding-block: var(--section-y);

      ol {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
        counter-reset: step;
      }

      li {
        position: relative;
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-text);
        counter-increment: step;

        &::before {
          content: "0" counter(step);
          font-size: var(--fs-xs);
          letter-spacing: 0.16em;
          color: var(--color-muted);
        }
      }

      img {
        width: 100%;
        aspect-ratio: 1;
        margin-top: var(--space-4);
        object-fit: cover;
        background: var(--product-bg);
      }

      h3 {
        margin-top: var(--space-4);
        font-size: var(--fs-md);
        font-weight: 600;
      }

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

    .quote-band {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-6);
      margin-bottom: var(--section-y);

      blockquote {
        max-width: 30ch;
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
      }

      cite {
        display: block;
        margin-top: var(--space-3);
        font-size: var(--fs-xs);
        font-style: normal;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgb(238 241 244 / 0.8);
      }

      .acts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
      }
    }

    .promise-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
      padding-bottom: var(--section-y);

      li {
        padding: var(--space-6) var(--space-5);
        background: var(--color-surface-soft);
      }

      .icon {
        width: 26px;
        height: 26px;
      }

      h3 {
        margin-top: var(--space-4);
        font-size: var(--fs-sm);
        font-weight: 600;
      }

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

    @media (max-width: 1024px) {
      .about-hero,
      .quote-band {
        grid-template-columns: 1fr;
      }

      .about-hero .media {
        aspect-ratio: 4 / 3;
      }

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

    @media (max-width: 640px) {
      .beliefs {
        grid-template-columns: 1fr;

        li + li {
          border-left: 0;
          border-top: 1px solid var(--color-border);
        }
      }

      .making ol,
      .promise-grid {
        grid-template-columns: 1fr;
      }
    }