/* 7 · Portrait — full-width photo hero with name overlay, stats */
.sx-t-portrait .sx-hero { position: relative; height: 440px; overflow: hidden; background: var(--c-text); }
.sx-t-portrait .sx-hero-img { width: 100%; height: 100%; object-fit: cover; }
.sx-t-portrait .sx-hero-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 60%, var(--c-bg)), var(--c-primary));
}
.sx-t-portrait .sx-hero-ph span {
  margin-top: -90px;
  font-family: var(--f-heading); font-size: 96px; font-weight: 700;
  color: color-mix(in srgb, var(--c-bg) 70%, transparent);
}
.sx-t-portrait .sx-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--c-text) 88%, transparent) 100%);
}
.sx-t-portrait .sx-name-wrap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; color: var(--c-bg); }
.sx-t-portrait .sx-name { font-size: 37px; font-weight: 700; line-height: 1; }
.sx-t-portrait .sx-role { margin-top: 7px; font-size: 14px; opacity: .88; }
.sx-t-portrait .sx-verified {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 12px; padding: 4px 10px; border-radius: 99px;
  background: var(--c-accent); color: var(--c-on-accent, var(--c-text));
  font-size: 12px; font-weight: 700;
}
.sx-t-portrait .sx-body { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
.sx-t-portrait .sx-act {
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-text) 10%, var(--c-bg));
  color: var(--c-primary);
}
.sx-t-portrait .sx-stats { background: var(--c-text); color: var(--c-bg); }
.sx-t-portrait .sx-stats b { color: var(--c-accent-on-text, var(--c-accent)); }
.sx-t-portrait .sx-stats span { color: inherit; opacity: .75; }
.sx-t-portrait .sx-list {
  background: var(--c-surface); border-radius: 16px; padding: 2px 16px;
  border: 1px solid color-mix(in srgb, var(--c-text) 8%, var(--c-bg));
}
.sx-t-portrait .sx-li + .sx-li { border-top: 1px solid color-mix(in srgb, var(--c-text) 7%, var(--c-surface)); }
.sx-t-portrait .sx-li .sx-i { color: var(--c-primary); }
.sx-t-portrait .sx-save { background: var(--c-primary); color: var(--c-button-text); }
.sx-t-portrait .sx-soc a { background: color-mix(in srgb, var(--c-text) 7%, var(--c-bg)); }