/* Rules that belong to one page. The pages layer outranks components, so a page can adjust a unit without fighting specificity. */
@layer pages {

  /* ABOUT — bio */
  .bio { display: flex; align-items: flex-start; gap: 22px; }
  .bio-pic {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    border: 1px solid var(--line);
    border-radius: 10px;
    object-fit: cover;
  }
  .bio-text p { max-width: 60ch; margin: 0 0 12px; color: var(--ink2); font-size: var(--fs-bul); line-height: 1.6; }
  .bio-text p:last-child { margin-bottom: 0; }
  @media (max-width: 560px) {
    .bio { flex-direction: column; gap: 16px; }
    .bio-pic { width: 110px; height: 110px; }
  }

  /* ABOUT — resume. The download serves every width; a PDF viewer inside a phone scroll is unusable, so the preview is desktop only. */
  .cv-preview { margin-top: 14px; }
  .cv-embed {
    display: block;
    width: 100%;
    /* Opening scrolls it into view, so it can take the screen below the nav; capped so a tall monitor does not stretch it absurdly */
    height: min(calc(100vh - var(--nav-h) - 32px), 1100px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
  }
  .cv-fallback { margin: 0; color: var(--ink3); }
  @media (max-width: 760px) {
    .resume .disclosure, .cv-preview { display: none; }
  }
}