.profile-page-body { background: var(--paper-2); }

.profile-hero {
  position: relative;
  min-height: 720px;
  padding: 142px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(123,142,210,.22), transparent 31%),
    radial-gradient(circle at 8% 86%, rgba(103,115,197,.12), transparent 37%),
    radial-gradient(circle at 52% 7%, rgba(197,167,96,.09), transparent 23%),
    linear-gradient(145deg, #fafafb 0%, #eceef3 54%, #e1e5ec 100%);
}

.profile-orbit { position: absolute; border: 1px solid rgba(103,115,197,.17); border-radius: 50%; pointer-events: none; }
.profile-orbit-one { width: 760px; height: 760px; right: -250px; top: -210px; }
.profile-orbit-two { width: 460px; height: 460px; right: -50px; top: 5px; border-color: rgba(197,167,96,.18); }
.profile-back { position: relative; z-index: 2; display: inline-block; margin-bottom: 42px; color: var(--red-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profile-back:hover { color: var(--red); }

.profile-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); gap: 80px; align-items: center; }
.profile-portrait { position: relative; width: min(100%,350px); margin: 0; }
.profile-portrait::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid rgba(103,115,197,.28); border-radius: 50%; }
.profile-portrait img { position: relative; width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 30%; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: #e2e5ec; box-shadow: 0 28px 75px rgba(43,49,67,.22); }
.profile-intro { max-width: 720px; }
.profile-intro h1 { margin: 0 0 18px; font-size: clamp(48px,5.2vw,72px); }
.profile-role { max-width: 680px; margin: 0 0 18px; color: var(--red-dark); font-family: var(--display); font-size: clamp(21px,2vw,29px); line-height: 1.24; }
.profile-affiliations { display: grid; gap: 4px; color: var(--muted); font-size: 15px; }
.profile-affiliations p { margin: 0; }
.profile-contacts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 9px; }
.profile-contacts a { padding: 9px 13px; border: 1px solid rgba(64,70,88,.16); border-radius: 999px; background: rgba(247,248,250,.62); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 1px rgba(255,255,255,.8); }
.profile-contacts a:hover { border-color: rgba(103,115,197,.4); color: var(--red-dark); }

.profile-main { padding: 110px 0 130px; }
.profile-layout { display: grid; grid-template-columns: 220px minmax(0,780px); gap: clamp(60px,9vw,125px); justify-content: center; align-items: start; }
.profile-index { position: sticky; top: 125px; padding-top: 8px; }
.profile-index nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.profile-index nav a { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.35; }
.profile-index nav a:hover { color: var(--red-dark); }
.profile-article { min-width: 0; }
.profile-article::before { content: "PROFILE"; display: block; margin-bottom: 36px; color: rgba(37,41,52,.08); font-family: var(--display); font-size: clamp(62px,9vw,112px); line-height: .75; letter-spacing: -.06em; }
.profile-article h2 { margin: 72px 0 25px; padding-top: 16px; border-top: 1px solid var(--line); font-size: clamp(31px,3vw,42px); scroll-margin-top: 120px; }
.profile-article h2:first-of-type { margin-top: 0; }
.profile-article p, .profile-article li { color: var(--muted); font-size: 16px; line-height: 1.75; }
.profile-article ul, .profile-article ol { margin: 0 0 26px; padding-left: 22px; }
.profile-article li + li { margin-top: 9px; }
.profile-article strong { color: var(--ink); font-weight: 700; }
.profile-article a { color: var(--red-dark); text-decoration: underline; text-decoration-color: rgba(103,115,197,.35); text-underline-offset: 4px; }

.profile-continuation { padding: 110px 0 120px; background: linear-gradient(145deg,#e2e6ed 0%,#f5f7fa 52%,#e8eaf2 100%); }
.profile-continuation-heading { max-width: 820px; margin-bottom: 55px; }
.profile-continuation-heading h2 { font-size: clamp(38px,4vw,54px); }
.profile-neighbours { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.profile-neighbour { min-height: 205px; padding: 28px; display: grid; grid-template-columns: 90px 1fr; gap: 22px; align-items: center; border: 1px solid rgba(64,70,88,.13); border-radius: 24px; background: rgba(247,248,250,.75); box-shadow: 0 18px 50px rgba(43,49,67,.08), inset 0 1px rgba(255,255,255,.88); }
.profile-neighbour:hover { border-color: rgba(103,115,197,.35); transform: translateY(-2px); }
.profile-neighbour img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; }
.profile-neighbour small { display: block; margin-bottom: 7px; color: var(--red-dark); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-neighbour strong { display: block; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.1; }
.profile-neighbour span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .profile-hero-grid { gap: 48px; }
  .profile-layout { grid-template-columns: 180px minmax(0,1fr); gap: 55px; }
}

@media (max-width: 820px) {
  .profile-hero { min-height: auto; padding: 125px 0 85px; }
  .profile-hero-grid { grid-template-columns: 1fr; }
  .profile-portrait { width: min(68vw,300px); }
  .profile-layout { grid-template-columns: 1fr; gap: 50px; }
  .profile-index { position: static; }
  .profile-index nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
  .profile-neighbours { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .profile-back { margin-bottom: 32px; }
  .profile-intro h1 { font-size: 46px; }
  .profile-role { font-size: 21px; }
  .profile-main, .profile-continuation { padding: 82px 0; }
  .profile-index nav { grid-template-columns: 1fr; }
  .profile-article::before { font-size: 62px; }
  .profile-article h2 { margin-top: 58px; font-size: 32px; }
  .profile-article p, .profile-article li { font-size: 15px; }
  .profile-neighbour { grid-template-columns: 72px 1fr; padding: 22px; }
  .profile-neighbour img { width: 72px; height: 72px; }
}