/* Portrait homepage, after the preserved V2. All artwork retains its source ratio. */
.portrait-hero { height:max(100svh,56.2667vw); min-height:640px; overflow:hidden; }
.hero-topbar { position:absolute; inset:clamp(20px,1.75vw,38px) 2.4% auto; display:flex; align-items:center; justify-content:space-between; gap:24px; z-index:6; }
.hero-year { font-family:var(--font-year); font-size:clamp(24px,1.5vw,34px); line-height:1; min-height:44px; display:flex; align-items:center; }
.portrait-nav { display:flex; gap:10px; align-items:center; }
.portrait-nav-links { display:flex; align-items:center; padding:2px 12px; background:var(--color-collection-panel); color:var(--color-collection-ink); border-radius:999px; }
.portrait-nav-links a { font-size:clamp(12px,.85vw,18px); line-height:1.2; min-height:40px; padding:10px clamp(13px,1vw,24px); display:flex; align-items:center; justify-content:center; border-radius:999px; }
.portrait-nav-links a:hover { background:var(--color-panel-hover); }
.portrait-nav-avatar { display:block; width:44px; height:44px; border:2px solid var(--color-collection-panel); border-radius:50%; overflow:hidden; flex:none; }
.portrait-nav-avatar img { width:100%; height:100%; object-fit:cover; }
.ip-avatar { position:relative; background:var(--color-collection-panel); }
.ip-avatar img { position:absolute; left:-160%; top:-42%; width:420%; max-width:none; height:auto; object-fit:contain; }
.portrait-title { position:absolute; top:12.5%; left:8%; width:84%; margin:0; font-family:var(--font-year); font-size:13.2vw; font-weight:400; line-height:1; letter-spacing:-.055em; white-space:nowrap; z-index:1; }
.portrait-title [data-hero-typing] { display:block; }
.portrait-title .type-char { white-space:pre; }
.portrait-title .type-char:nth-child(3) { display:inline-block; width:.38em; letter-spacing:0; }
.portrait-title .type-char:nth-child(7) { display:inline-block; width:.12em; letter-spacing:0; }
.portrait-title .type-char.is-next::before { content:''; position:absolute; height:.73em; width:3px; margin-top:.1em; background:var(--color-accent); }
.portrait-intro { position:absolute; left:8.2%; top:40.5%; width:28%; max-width:530px; font-size:clamp(12px,.92vw,20px); line-height:1.35; z-index:5; }
.portrait-intro p+p { margin-top:1.2em; }
.hero-portrait { position:absolute; left:calc(48% - max(26%,41.5svh)); top:14%; width:max(52%,83svh); max-height:86%; overflow:hidden; display:block; margin:0; padding:0; border:0; background:transparent; line-height:0; border-radius:18%; z-index:4; cursor:default; touch-action:pan-y; }
.hero-portrait:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.hero-portrait-media { display:block; width:100%; aspect-ratio:1086 / 1448; position:relative; }
.hero-portrait img { width:100%; height:auto; pointer-events:none; }
.hero-portrait canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.hero-portrait[data-portrait-rendered="true"] img { visibility:hidden; }
.portrait-contact { position:absolute; top:41.5%; right:9%; z-index:5; min-height:clamp(52px,3.8vw,82px); padding:14px clamp(22px,1.2vw,30px); gap:24px; font-size:clamp(16px,1.15vw,24px); font-weight:400; }
.portrait-contact svg { display:block; width:20px; height:20px; fill:currentColor; }
.portrait-hero .hero-motion-layer { z-index:6; }
.portrait-hero .hero-topbar { z-index:9; }
.portrait-hero .portrait-contact { z-index:8; }
.portrait-hero .hero-motion-trigger { z-index:8; bottom:24px; font-size:11px; border-color:#ffffff14; background:#0a0a0acc; }
@media (min-aspect-ratio:2/1) and (min-width:1024px) { .portrait-hero { min-height:660px; } }
@media (max-width:1023px) and (min-width:768px) {
  .portrait-title { top:18%; font-size:13.2vw; }
  .hero-portrait { width:74%; left:12%; top:24%; max-height:76%; }
  .portrait-intro { top:45%; left:5%; width:30%; font-size:13px; }
  .portrait-contact { top:45%; right:4%; gap:12px; }
}
@media (max-width:767px) {
  .portrait-hero { height:max(760px,100svh); min-height:0; }
  .hero-topbar { inset:18px 20px auto; gap:12px; }
  .hero-year { font-size:24px; }
  .portrait-nav { gap:7px; }
  .portrait-nav-links { padding:2px 5px; }
  .portrait-nav-links a { font-size:11px; padding:10px 8px; min-height:38px; }
  .portrait-nav-avatar { width:38px; height:38px; }
  .portrait-title { top:126px; left:5%; width:90%; font-size:14.1vw; letter-spacing:-.06em; }
  .portrait-title .type-char:nth-child(3) { width:.24em; }
  .portrait-intro { left:7%; top:220px; width:86%; max-width:none; font-size:13px; line-height:1.55; }
  .portrait-intro p+p { margin-top:12px; }
  .hero-portrait { width:140%; left:-20%; top:175px; max-height:calc(100% - 175px); }
  .portrait-contact { top:auto; bottom:70px; right:6%; min-height:48px; font-size:15px; padding:12px 20px; gap:18px; }
  .portrait-hero .hero-motion-trigger { bottom:18px; left:6%; padding:10px 13px; font-size:10px; }
}
@media (max-width:399px) {
  .hero-topbar { inset-inline:16px; }
  .portrait-nav-links a { padding-inline:6px; font-size:10px; }
  .portrait-nav-avatar { width:34px; height:34px; }
  .hero-year { font-size:21px; }
  .portrait-hero { height:max(720px,100svh); }
}
@media (max-width:350px) {
  .hero-topbar { gap:8px; }
  .hero-year { font-size:19px; }
  .portrait-nav-links a { font-size:9px; padding-inline:5px; }
  .portrait-nav { gap:6px; }
  .portrait-nav-avatar { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) { .portrait-title .type-char { visibility:visible !important; }.portrait-title .type-char.is-next::before { display:none; } }

/* Offline per-frame matting retains the original actor on the black hero.
   Falling artwork stays in front; navigation and contact controls remain above it. */
.portrait-hero--video { background:#000; }
.portrait-hero--video .hero-video-portrait {
  left:50%; top:auto; bottom:0; width:auto; height:calc(100% - clamp(170px,14vw,260px));
  max-width:none; max-height:none; aspect-ratio:16 / 9; transform:translateX(-50%);
  border-radius:0; overflow:visible;
}
.portrait-hero--video .portrait-title { z-index:1; }
.hero-video-media {
  width:100%; height:100%; aspect-ratio:16 / 9; overflow:hidden;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-video-media img,.hero-video-media video {
  display:block; width:100%; height:100%; max-width:none; object-fit:contain;
  pointer-events:none; user-select:none;
}
.hero-video-media img { position:absolute; inset:0; z-index:2; }
.hero-video-media video { position:absolute; inset:0; z-index:1; }
@media (min-width:768px) and (max-width:1023px) {
  .portrait-hero--video .hero-video-portrait { width:min(160vw,calc((100svh - 220px) * 16 / 9)); height:auto; }
}
@media (max-width:767px) {
  .portrait-hero--video { height:clamp(720px,85svh,820px); }
  .portrait-hero--video .hero-video-portrait { top:auto; bottom:95px; width:190%; height:auto; }
  .portrait-hero--video .portrait-contact { bottom:38px; }
}