/* Phone layout and shared navigation/footer alignment. */
@media (max-width: 767.98px),
  (max-width: 1023.98px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  :root { --header-height: 58px; --footer-height: 64px; --bar-padding: 8px; }
  body { padding-bottom: 0; }
  .navigation { justify-content: space-between; gap: 2px; padding: 0 var(--bar-padding); }
  .navigation a, .footer-inner { font-size: 12px; letter-spacing: .02em; }
  .navigation a {
    min-height: 44px;
    padding: 12px 6px;
  }
  .page-shell { display: block; margin-top: 18px; padding: 0 16px; }
  .profile-card {
    display: grid;
    grid-template-columns: clamp(96px, 26vw, 128px) minmax(0, 1fr);
    column-gap: 14px;
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 24px;
    padding: 16px;
  }
  .portrait {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
  }
  .profile-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: clamp(22px, 5.5vw, 26px);
  }
  .profile-title { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .profile-details {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 12px;
    margin-top: 16px;
  }
  .profile-details dt, .profile-details dd { margin: 0; }
  .profile-details dt { padding-top: 12px; }
  .profile-details dd { grid-column: 2; min-width: 0; }
  .profile-details a { display: flex; align-items: center; min-height: 44px; padding: 7px 0; }
  .content-section { padding: 22px 0; }
  .content-section h2 { font-size: 20px; }
  .publication-filters button, .button { min-height: 44px; }
  .site-footer { position: static; margin-top: 24px; }
  .footer-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 10px var(--bar-padding);
    text-align: left;
  }
  .footer-inner > * { flex: 0 0 auto; white-space: nowrap; }
  .footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 359.98px) {
  :root { --bar-padding: 4px; }
  .footer-inner { gap: 2px; }
}