/* Phone layout only. The approved desktop and tablet styles stay in ccst.css. */
@media (max-width: 600px) {
  html { scroll-padding-top: 88px; }
  .nav-wrap { min-height: 68px; padding-block: 12px; }
  .brand small { display: none; }
  .menu-toggle { min-width: 76px; min-height: 44px; font-size: 12px; }

  .lede { font-size: 16px; line-height: 1.8; }
  .hero-copy > p,
  .research-card p,
  .research-detail p,
  .project-detail > div > p:not(.serif-sub),
  .home-people p:not(.eyebrow),
  .split p,
  .max-text { font-size: 15px; line-height: 1.8; }
  .hero .button { font-size: 12px; }
  .hero .text-link { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero-topics { gap: 4px 22px; }
  .hero-topics a { min-height: 44px; font-size: 12px; display: inline-flex; align-items: center; }
  .publication p { font-size: 14px; line-height: 1.8; }

  /* Keep the name and role beside the portrait; let the biography use the full width.
     Explicit frame dimensions override imported HTML image height attributes. */
  .person {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 20px;
    align-content: start;
  }
  .person > img,
  .person > figure {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 104px;
    height: 128px;
    margin: 0 0 22px;
    align-self: start;
  }
  .person > img,
  .person > figure img {
    width: 104px;
    height: 128px;
    object-fit: cover;
    object-position: center 35%;
  }
  .person > figure:has(figcaption) { height: auto; }
  .person > .eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1.6;
  }
  .person > h2 {
    grid-column: 2;
    grid-row: 2;
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 22px;
    align-self: start;
  }
  .person > :is(p:not(.eyebrow), a, div) { grid-column: 1 / -1; }
  .person > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
  .person > a { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
  .people-grid { gap: 34px; }
  .people-invite { padding: 24px; }

  .profile-lead {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0 20px;
    padding-bottom: 34px;
  }
  .profile-lead > img {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 112px;
    height: 152px;
    object-fit: cover;
    object-position: center 35%;
    margin-bottom: 22px;
  }
  .profile-lead > div { display: contents; }
  .profile-lead > div > .eyebrow {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    margin: 0 0 8px;
    align-self: end;
  }
  .profile-lead > div > h2 {
    grid-column: 2;
    grid-row: 2;
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 10px;
  }
  .profile-lead > div > .role {
    grid-column: 2;
    grid-row: 3;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .profile-lead > div > :is(p:not(.eyebrow):not(.role), .profile-links) { grid-column: 1 / -1; }
  .profile-lead > div > p:not(.eyebrow):not(.role) { font-size: 15px; line-height: 1.8; }
  .profile-links { margin-top: 6px; gap: 8px 24px; }
  .profile-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }

  .filters button,
  .project-jump-links a,
  .publication-profiles a { min-height: 44px; display: inline-flex; align-items: center; }
  .project-jump-links { gap: 8px 20px; }
  .footer-grid > div > a:not(.footer-brand) { min-height: 36px; font-size: 13px; margin-bottom: 4px; }

  /* Maps, diagrams and funding marks must remain complete, including their labels. */
  a.project-card[href*="soil-atlas"] .feature-photo img { object-fit: contain; }
  .cms-lead-image img { width: 100%; height: auto; max-height: 360px; object-fit: contain; }
}

/* On phones, use one separator per content group instead of stacking rules. */
@media (max-width: 600px) {
  .section-top { border-bottom: 0!important; padding-bottom: 0!important; }
  .section-top .text-link,
  .research-card .text-link {
    border-bottom: 0;
    text-decoration: none;
    padding-bottom: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--blue);
  }
  .project-card .card-bottom { border-top: 0; padding-top: 0; }
  .research-card:first-child { border-top: 0; }
  .research-card:last-child { border-bottom: 0; }
  .max-text a { overflow-wrap: anywhere; }
}