/* Desktop-only identity refinement. Keep the existing mobile profile layout
   intact while giving the desktop portrait more visual weight and aligning
   the About surface with the identity-copy column below it. */
@media (min-width: 701px) {
  body.profile-page .profile-identity-card {
    --profile-avatar-size: 220px;
    --profile-identity-rail: min(var(--profile-content-max-width, 1120px), calc(100% - 32px));
  }

  body.profile-page .profile-identity-card .profile-avatar-wrap {
    width: var(--profile-avatar-size) !important;
    height: var(--profile-avatar-size) !important;
    flex-basis: var(--profile-avatar-size) !important;
  }

  body.profile-page .profile-identity-card .profile-avatar-wrap > :is(.profile-avatar, .profile-avatar-art, .profile-avatar-generated, .profile-avatar-initials) {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
  }

  body.profile-page .profile-identity-card .profile-identity-copy {
    box-sizing: border-box;
  }

  body.profile-page .profile-identity-card > .profile-details-view {
    width: calc(var(--profile-identity-rail) - var(--profile-avatar-size) - 18px) !important;
    margin-inline-start: calc((100% - var(--profile-identity-rail)) / 2 + var(--profile-avatar-size) + 18px) !important;
    margin-inline-end: 0 !important;
    margin-block-start: 20px !important;
    box-sizing: border-box;
  }

  /* Match the identity-copy glass surface exactly, including its border,
     radius, blur, and readable text treatment. */
  body.profile-page .profile-identity-card > .profile-details-view > .profile-about-summary {
    box-sizing: border-box;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 16px !important;
    background: rgba(255, 253, 249, .68) !important;
    box-shadow: 0 14px 30px rgba(10, 28, 37, .12), inset 0 1px 0 rgba(255, 255, 255, .52) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }
}
