/* The profile hero (2026-10-19, Connor: the banner header should "look nice"). One treatment for the owner hero on
   /profile/ (.studio-hero) and the public profile on /collectors/?slug= (.collector-detail .collector-hero, its loading
   skeleton included so nothing moves when the profile arrives). Loaded by those two pages only, after profile-studio.css,
   community.css and profile-showcase.css.
   - The banner fills a real hero area: covered, centred focal crop, 28% of the card's width (about 3.5:1 on a desktop,
     capped at 320px) and never under 188px on a phone.
   - An eased scrim melts its foot into the card's own colour (no hard edge); a top shade and a light vignette keep the
     tags and the name readable on any photo. Overlays only: the picture itself is never filtered or recoloured.
   - The avatar sits across the banner's bottom edge, then the role line, name, handle and chips, bio and actions on the
     centre line.
   - No banner: Connor's hallway art (assets/site-upgrade/gang-*.webp, the same scene as the signed-out sample profile),
     dimmed. A phone fetches the 960px copy only. The owner's state comes from the inline script after #profile-hero
     (#profile-banner[data-banner="own" | "none"]); the public page draws a <div class="collector-banner"> only when the
     collector has no banner. Until then a plain dark gradient holds the space, so no picture is fetched for nothing.
   Motion: the identity settles in once, only under html.motion-ok (no reduced motion, no Save-Data). */

.studio-hero,
.collector-detail .collector-hero { --hero-avatar: 104px; --hero-h: clamp(188px, 28cqi, 320px); container-type: inline-size; }
@supports not (height: 1cqi) { .studio-hero, .collector-detail .collector-hero { --hero-h: clamp(188px, 22vw, 320px); } }
@media (min-width: 751px) { .studio-hero, .collector-detail .collector-hero { --hero-avatar: 132px; } }

/* ---- the card and the banner */
body.portal[data-page="profile"] .studio-hero,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 16px; border: 1px solid var(--line-strong, #2e2e2e); border-radius: 20px; background: var(--hero-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
body.portal[data-page="profile"] .studio-hero { --hero-bg: var(--studio-panel, #161616); margin-left: auto; margin-right: auto; }
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-hero { --hero-bg: #0d0e10; margin-bottom: 22px; }

body.portal[data-page="profile"] .studio-hero-banner,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-hero .collector-banner { position: relative; z-index: 0; display: block; width: 100%; height: var(--hero-h); margin: 0; background: radial-gradient(130% 110% at 50% 0%, #2a2a2a, var(--hero-bg) 72%) var(--hero-bg) no-repeat; background-size: cover; background-position: 50% 45%; }
body.portal[data-page="collectors"] .collector-detail .collector-hero img.collector-banner { object-fit: cover; object-position: 50% 45%; }

/* The scrim: an eased fade into the card (first layer, so the foot ends exactly on the card colour), a top shade for the
   tags, and a soft vignette. The owner's sits on the banner itself; the public one on the hero, over the <img>. */
body.portal[data-page="profile"] .studio-hero-banner::after,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--hero-h); pointer-events: none;
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--hero-bg) 8%, transparent) 47%, color-mix(in srgb, var(--hero-bg) 26%, transparent) 59%, color-mix(in srgb, var(--hero-bg) 50%, transparent) 70%, color-mix(in srgb, var(--hero-bg) 74%, transparent) 81%, color-mix(in srgb, var(--hero-bg) 92%, transparent) 91%, var(--hero-bg)),
    linear-gradient(180deg, rgba(0, 0, 0, .36), transparent 30%),
    radial-gradient(130% 100% at 50% 32%, transparent 52%, rgba(0, 0, 0, .38)); }
body.portal[data-page="profile"] .studio-hero-banner::after { z-index: 0; }
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-hero::before { z-index: 1; }

/* No banner yet: Connor's hallway art, dimmed (an overlay layer, not a filter). Phones take the 960px copy. */
body.portal[data-page="profile"] #profile-banner[data-banner="none"],
body.portal[data-page="collectors"] .collector-detail.showcase .collector-hero div.collector-banner { background-image: linear-gradient(rgba(12, 12, 12, .42), rgba(12, 12, 12, .42)), url('/assets/site-upgrade/gang-960.webp'); background-position: 50% 62%; }
@media (min-width: 751px) {
  body.portal[data-page="profile"] #profile-banner[data-banner="none"],
  body.portal[data-page="collectors"] .collector-detail.showcase .collector-hero div.collector-banner { background-image: linear-gradient(rgba(12, 12, 12, .42), rgba(12, 12, 12, .42)), url('/assets/site-upgrade/gang-1280.webp'); background-image: linear-gradient(rgba(12, 12, 12, .42), rgba(12, 12, 12, .42)), image-set(url('/assets/site-upgrade/gang-1280.webp') 1x, url('/assets/site-upgrade/gang-1920.webp') 2x); background-position: 50% 58%; }
}

/* ---- the owner's tools on the banner: what this view is (left) and the way to change the picture (right). The
   EDIT BANNER link goes to step 03 of the form (PHOTO + BANNER). */
.studio-hero-tools { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.studio-hero-tools > * { pointer-events: auto; }
body.portal[data-page="profile"] .studio-hero-tag { position: static; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(10, 10, 10, .62); color: #ececec; font: 700 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; }
.studio-hero-edit { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(10, 10, 10, .66); color: #fff; font: 700 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.studio-hero-edit:hover { border-color: #f2f2f0; background: #f2f2f0; color: #111; }
.studio-hero-edit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 750px) { .studio-hero-edit { min-height: 44px; } }
.portal[data-page='profile'] .studio-section { scroll-margin-top: 16px; }

/* ---- the identity: the avatar across the banner's edge, then the words on the centre line */
body.portal[data-page="profile"] .studio-hero-body,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-identity { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; margin: calc(var(--hero-avatar) / -2) 0 0; padding: 0 20px 28px; text-align: center; }
body.portal[data-page="profile"] .studio-avatar-ring,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-identity .collector-avatar-ring { --tone: #d9dadc; flex: none; width: var(--hero-avatar); height: var(--hero-avatar); margin: 0; padding: 4px; border-radius: 50%; background: conic-gradient(from 210deg, #f2f2f0, #6f7279, #f2f2f0); box-shadow: 0 0 0 5px var(--hero-bg), 0 18px 40px rgba(0, 0, 0, .45); }
body.portal[data-page="collectors"] .collector-detail.collector-detail-skeleton .collector-identity .collector-avatar-ring { background: #222326; }
body.portal[data-page="profile"] .studio-avatar,
body.portal[data-page="collectors"] .collector-detail .collector-identity .collector-avatar-ring :is(img, i) { border: 3px solid var(--hero-bg); }

body.portal[data-page="profile"] .studio-hero-copy,
body.portal[data-page="collectors"] .collector-detail:is(.showcase, .collector-detail-skeleton) .collector-identity-copy { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; min-width: 0; max-width: 680px; margin: 18px auto 0; padding: 0; }
body.portal[data-page="profile"] #profile-eyebrow,
body.portal[data-page="collectors"] .collector-detail .collector-identity-copy > .eyebrow { margin: 0 0 10px; font-size: 10px; letter-spacing: .16em; }
body.portal[data-page="profile"] .studio-hero-copy h1,
body.portal[data-page="collectors"] .collector-detail .collector-identity .collector-name { margin: 0; font-size: clamp(34px, 5vw, 60px); font-size: clamp(34px, 6cqi, 60px); font-weight: 800; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
body.portal[data-page="profile"] .studio-hero-meta,
body.portal[data-page="collectors"] .collector-detail .collector-handles { justify-content: center; margin: 14px 0 0; gap: 8px 10px; }
body.portal[data-page="profile"] .studio-bio,
body.portal[data-page="collectors"] .collector-detail .collector-identity .collector-bio { max-width: 56ch; margin: 14px auto 0; color: var(--studio-ink-soft, #c9c9c9); font-size: 15px; line-height: 1.55; text-align: center; }
body.portal[data-page="collectors"] .collector-detail .collector-identity .community-badges { justify-content: center; margin: 16px 0 0; }
body.portal[data-page="collectors"] .collector-detail .collector-handles .community-handle { margin: 0; }
body.portal[data-page="profile"] .studio-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 560px; margin: 22px auto 0; }
body.portal[data-page="profile"] .studio-hero-actions .button { flex: 1 1 200px; justify-content: center; }
body.portal[data-page="profile"] #profile-share { display: flex; justify-content: center; }
@media (max-width: 559px) { body.portal[data-page="profile"] :is(#profile-share, #profile-share .sc-share) { width: 100%; } body.portal[data-page="profile"] #profile-share .sc-share .button { flex: 1 1 100%; } }
@media (min-width: 560px) { body.portal[data-page="profile"] .studio-hero-actions .button { flex: 0 1 auto; } }

/* ---- the public profile's blocks on a desktop (Connor, 2026-10-19: two blocks side by side, "easier to go through
   everything"; the owner page's pair is in profile-studio.css). From 1024px the hero, the look (already two columns
   inside) and the back link keep the full width; rarest pieces, PFPs held and collections held pair up two to a row,
   and an odd one out takes the whole row. Phones and tablets keep one column. */
@media (min-width: 1024px) {
  body.portal[data-page="collectors"] .collector-detail.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; }
  body.portal[data-page="collectors"] .collector-detail.showcase > :not(.sc-rare, .community-showcase) { grid-column: 1 / -1; }
  body.portal[data-page="collectors"] .collector-detail.showcase > :is(.sc-rare, .community-showcase) { margin: 0 0 22px; }
  body.portal[data-page="collectors"] .collector-detail.showcase > :is(.sc-rare, .community-showcase):nth-last-child(2):nth-child(odd of .sc-rare, .community-showcase) { grid-column: 1 / -1; }
}

/* ---- motion: the identity settles in once (only with motion allowed) */
@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } }
html.motion-ok body.portal[data-page="profile"].is-authenticated .studio-hero-body > *,
html.motion-ok body.portal[data-page="collectors"] .collector-detail.showcase .collector-identity > * { animation: hero-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
html.motion-ok body.portal[data-page="profile"].is-authenticated .studio-hero-body > :nth-child(2),
html.motion-ok body.portal[data-page="collectors"] .collector-detail.showcase .collector-identity > :nth-child(2) { animation-delay: .07s; }
html.motion-ok body.portal[data-page="profile"].is-authenticated .studio-hero-body > :nth-child(3) { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .studio-hero-body > *, .collector-identity > * { animation: none !important; } .studio-hero-edit { transition: none; } }