/* styles/sections/founder-letter.css
 * A founder's letter: portrait and caption beside a serif narrative, on white with the bottom
 * dither edge (About frames JRb7P 1440, AJ5hT 390, k8tZl 1920). Paragraphs are Piazzolla on the
 * frames' whole-pixel lines: 17/27 (editorial role, M), 18/29 (editorial, D), 20/32 (W). The h2 is
 * .display-heading; the frames' 16px spacer and its two 24 gaps put the first paragraph 64
 * under it. The sign-off is mono caps.
 * From D the portrait, its 80 (W 120) gutter, the narrative and the trailing space share the row
 * as the frames divide it (440, 80, 680, 80 at 1440; 600, 120, 820, 140 at 1920), so narrower
 * D widths keep the proportions and the portrait keeps its 4:5 crop. On M the portrait is 550
 * tall and 24 short of the column, cropped to cover. */
@layer sections {
  .founder-letter {
    padding-block: var(--section-xl) var(--section-2xl);
    background: var(--white);
    color: var(--ink);
  }

  .founder-letter__inner {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  .founder-letter__portrait {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
    padding: 8px 24px 0 0;
  }

  .founder-letter__image {
    display: block;
    width: 100%;
    height: 550px;
    object-fit: cover;
  }

  .founder-letter__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .founder-letter__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2px;
  }

  .founder-letter__role {
    font-size: 14px;
    line-height: 17px;
    color: var(--ink-2);
  }

  .founder-letter__narrative {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .founder-letter__heading {
    margin-bottom: var(--space-40);
  }

  .founder-letter__para {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: 27px;
  }

  .founder-letter__sign {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.9px;
    color: var(--ink-80);
  }

  @media (min-width: 900px) {
    .founder-letter__inner {
      display: grid;
      grid-template-columns: minmax(0, 440fr) minmax(0, 80fr) minmax(0, 680fr) minmax(0, 80fr);
      align-items: start;
      gap: 0;
    }

    .founder-letter__portrait {
      padding-right: 0;
    }

    .founder-letter__image {
      height: auto;
      aspect-ratio: 4 / 5;
    }

    .founder-letter__name {
      line-height: 18px;
      letter-spacing: 0;
    }

    .founder-letter__narrative {
      grid-column: 3;
    }

    .founder-letter__para {
      line-height: 29px;
    }
  }

  @media (min-width: 1680px) {
    .founder-letter__inner {
      grid-template-columns: minmax(0, 600fr) minmax(0, 120fr) minmax(0, 820fr) minmax(0, 140fr);
    }

    .founder-letter__name {
      line-height: 16px;
      letter-spacing: -0.28px;
    }

    .founder-letter__para {
      font-size: 20px;
      line-height: 32px;
    }
  }
}