html, body { overflow-x: hidden; }
body { min-height: 100vh; }
.page { width: min(760px, calc(100% - 32px)) !important; max-width: 760px !important; min-height: 100vh !important; height: auto !important; margin: 0 auto !important; padding: 22px 0 30px !important; display: block !important; }
.topbar { position: relative !important; inset: auto !important; width: 100% !important; margin: 0 0 16px !important; }
.content { min-height: 0 !important; height: auto !important; display: block !important; }
.profile-card { width: 100%; min-height: 0 !important; height: auto !important; margin: 0 0 16px !important; overflow: hidden !important; }
.profile-cover { position: relative !important; width: 100% !important; height: 170px !important; min-height: 170px !important; }
.profile-body { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 46px 24px 26px !important; }
.avatar-wrap { top: -38px !important; left: 24px !important; width: 76px !important; height: 76px !important; }
.profile-body h1 { margin: 0 0 5px !important; font-size: clamp(30px, 5vw, 42px) !important; line-height: 1.15; }
.handle { margin: 0 0 10px !important; }
.bio { max-width: 620px; margin: 0 !important; line-height: 1.75; -webkit-line-clamp: unset !important; overflow: visible !important; }
.directory { width: 100%; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 22px !important; overflow: visible !important; }
.section-head { margin-bottom: 14px !important; }
.section-head h2 { margin: 0 !important; font-size: 26px !important; }
.social-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.social-link { min-width: 0; min-height: 66px !important; padding: 10px 12px !important; border-radius: 15px !important; }
.platform-icon { width: 40px !important; height: 40px !important; }
.link-copy { min-width: 0; }
.link-copy strong { font-size: 15px !important; }
.link-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
footer { position: relative !important; inset: auto !important; width: 100% !important; margin: 16px 0 0 !important; padding: 0 4px !important; }

@media (max-width: 620px) {
  .page { width: calc(100% - 24px) !important; padding-top: 12px !important; }
  .topbar { border-radius: 16px !important; }
  .profile-cover { height: 130px !important; min-height: 130px !important; }
  .profile-body { padding: 42px 18px 22px !important; }
  .avatar-wrap { left: 18px !important; width: 68px !important; height: 68px !important; }
  .profile-body h1 { font-size: clamp(28px, 9vw, 36px) !important; }
  .directory { padding: 18px !important; }
  .social-links { grid-template-columns: 1fr !important; }
  footer { display: flex !important; gap: 12px; align-items: center; justify-content: space-between; }
}

/* Personal directory: narrower than the content sites, but never cramped. */
.avatar-wrap,
.avatar,
.avatar-fallback { border-radius: 18px !important; }

@media (min-width: 900px) {
  .page { width: min(860px, calc(100% - 64px)) !important; max-width: 860px !important; padding: 42px 0 64px !important; }
  .topbar { margin-bottom: 24px !important; }
  .profile-card { margin-bottom: 24px !important; }
  .profile-cover { height: 210px !important; min-height: 210px !important; }
  .profile-body { padding: 54px 34px 36px !important; }
  .avatar-wrap { top: -40px !important; left: 34px !important; width: 80px !important; height: 80px !important; }
  .bio { max-width: 700px; line-height: 1.9; }
  .directory { padding: 30px !important; }
  .section-head { margin-bottom: 20px !important; }
  .social-links { gap: 16px !important; }
  .social-link { min-height: 78px !important; padding: 14px 16px !important; }
}

@media (max-width: 620px) {
  .avatar-wrap { width: 64px !important; height: 64px !important; }
}