@import url('./fonts.css');

/* Scoped to this article's static specimens; loaded only with the article body. */
.pb-prose .fp-note { padding: 18px 0; border-block: 1px solid #d5dde3; color: #50616e; font-size: 14px; line-height: 1.7; }
.pb-prose figure.fp-specimen { margin: 32px 0; container-type: inline-size; }
.fp-stage { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 420px; overflow: hidden; background: var(--fp-bg); color: var(--fp-ink); }
.fp-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 30px; }
.fp-label, .fp-folio { font-family: var(--fp-ui); font-weight: var(--fp-ui-weight); font-size: 10px; line-height: 1.5; letter-spacing: .09em; }
.fp-label { min-height: 30px; }
.pb-prose .fp-headline { font-family: var(--fp-display); font-weight: var(--fp-weight); font-size: clamp(38px, 7.5cqi, 68px); line-height: .99; letter-spacing: -.045em; margin: 28px 0 24px; text-wrap: initial; color: inherit; overflow-wrap: normal; }
.pb-prose .fp-body { font-family: var(--fp-body); font-weight: 400; font-size: 15px; line-height: 1.65; margin: 0 0 32px; max-width: 29ch; color: inherit; }
.fp-folio { display: flex; width: 100%; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid currentColor; font-size: 9px; }
.pb-prose .fp-photo { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: 0; box-shadow: none; }
.pb-prose figure.fp-specimen figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; text-align: left; font-family: var(--font-body); font-size: 11px; line-height: 1.7; color: #50616e; margin-top: 10px; }
.pb-prose .fp-specimen figcaption a { color: inherit; font-size: inherit; }
.fp-01 { --fp-bg: #eeeae1; --fp-ink: #283a2f; }
.fp-02 { --fp-bg: #f2eee8; --fp-ink: #332b29; }
.fp-02 .fp-copy { justify-content: center; }
.fp-02 .fp-photo { filter: grayscale(1); }
.fp-03 { --fp-bg: #dbff73; --fp-ink: #1c2516; }
.pb-prose .fp-03 .fp-headline { font-size: clamp(34px, 7.4cqi, 64px); line-height: .94; }
.fp-04 { --fp-bg: #f8e7bd; --fp-ink: #762b16; }
.fp-04 .fp-photo { padding: 30px 20px 30px 0; border-radius: 50% 50% 0 0; }
.fp-05 { --fp-bg: #24252a; --fp-ink: #d6f1a3; }
.pb-prose .fp-05 .fp-headline { font-size: clamp(25px, 4.7cqi, 44px); letter-spacing: -.055em; line-height: 1.15; }
.fp-05 .fp-body { color: #eee9df; }
.fp-06 { --fp-bg: #f2b6c5; --fp-ink: #502a20; }
.fp-06 .fp-photo { padding: 24px 24px 24px 0; border-radius: 100px 100px 0 0; }
.fp-07 { --fp-bg: #e4492e; --fp-ink: #191a16; }
.pb-prose .fp-07 .fp-headline { font-size: clamp(32px, 6.8cqi, 58px); }
.fp-07 .fp-photo { filter: grayscale(1); }
.fp-08 { --fp-bg: #e0e5ee; --fp-ink: #283c55; }
.pb-prose .fp-08 .fp-headline { font-size: clamp(44px, 9cqi, 80px); }
@container (max-width: 480px) {
  .fp-stage { grid-template-columns: 1fr; }
  .fp-copy { padding: 26px; min-height: 370px; }
  .pb-prose .fp-headline { font-size: 58px; }
  .pb-prose .fp-03 .fp-headline { font-size: 54px; }
  .pb-prose .fp-05 .fp-headline { font-size: clamp(27px, 8.4cqi, 40px); }
  .pb-prose .fp-07 .fp-headline { font-size: 48px; }
  .pb-prose .fp-08 .fp-headline { font-size: 66px; }
  .pb-prose .fp-photo { height: 260px; min-height: 0; padding: 0; border-radius: 0; }
  .pb-prose .fp-body { max-width: 34ch; }
}

/* Defer offscreen specimen layout; fonts use swap so reading stays available. */
.pb-prose figure.fp-specimen { content-visibility: auto; contain-intrinsic-size: auto 550px; }
.pb-prose .fp-headline { overflow-wrap: anywhere; letter-spacing: -.035em; }