/* Approved portrait media stays external; name and caption remain in normal flow. */
.brand .editor-brand-logo{display:block;width:200px;height:80px;object-fit:contain}
.hero{min-height:100svh;overflow:hidden}
.hero-topline{top:119px;font-size:12px}
.hero .hero-content{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:clamp(28px,4vw,64px);padding:150px var(--pad) 26px;flex:1}
.hero-portrait{margin:0;min-width:0;align-self:center}
.hero-portrait>img{display:block;width:100%;height:min(50svh,510px);object-fit:contain;object-position:center bottom}
.hero-portrait .hero-identity{display:flex;position:static;flex-direction:column;align-items:center;justify-items:center;gap:7px;margin:10px 0 0;text-align:center;letter-spacing:normal}
.hero-portrait .hero-name{display:block;font:400 clamp(32px,3.1vw,48px)/1.15 var(--serif);letter-spacing:.005em;white-space:nowrap}
.hero-character{font:400 19px/1.3 var(--serif);color:#c4cbb9;letter-spacing:.02em}
.hero-portrait .hero-profession{font-size:12px;letter-spacing:.1em;gap:10px;margin-top:4px}
.hero-story{min-width:0;padding:0 15px 12px 0}
.hero .hero-story h1{font-size:clamp(66px,7.8vw,124px);line-height:1.01;letter-spacing:-.015em;margin:0 0 28px;max-width:none}
.hero-story .hero-under p{font-size:18px;line-height:1.75;max-width:600px;color:#e0e5d8}
.hero .hero-bottom{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;margin:0 var(--pad);padding:20px 0 23px;align-items:center;border-top:1px solid #eae7df30}
.hero-bottom .hero-work-nav{grid-column:1/-1;margin:0;max-width:none}
.hero-bottom .hero-work-nav>p{font-size:11px;margin:0 0 11px;color:#cbd2c0}
.hero-bottom .hero-work-links{display:flex;flex-wrap:wrap;gap:8px}
.hero-bottom .hero-work-links a{font-size:18px;min-height:45px;padding:11px 18px;background:#101b146b}
.hero-bottom .hero-work-links a:hover,.hero-bottom .hero-work-links a[aria-current=true]{background:#d8ddc5;color:#172016}
.hero .hero-bottom>.cinema-entry{position:static;inset:auto;grid-column:1;grid-row:auto;min-height:40px;gap:10px;padding:4px 0;border:0;background:transparent;justify-self:start}
.hero-bottom .cinema-entry .cinema-play{width:30px;height:30px;font-size:18px}
.hero-bottom .cinema-entry strong{font-size:13px;margin:0;font-weight:500}
.hero-bottom .cinema-entry .entry-arrow{font-size:17px}
.hero .hero-bottom>.timecode{grid-column:2;grid-row:auto;font-size:12px;justify-self:end}
.hero-scene-controls{position:absolute;z-index:3;right:12px;top:46%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .scene-choices{display:flex;position:static;flex-direction:column;align-items:center;justify-content:center;gap:0;width:auto;overflow:visible;margin:0;grid-column:auto;grid-row:auto}
.hero .scene-choices button{display:grid;place-items:center;width:30px;height:30px;min-height:30px;padding:0;border:0;border-radius:50%;color:white;background:transparent}
.hero .scene-choices button>span{display:block;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55;transition:opacity .3s,box-shadow .3s,transform .3s}
.hero .scene-choices button[aria-pressed=true]>span{opacity:1;transform:scale(1.2);box-shadow:0 0 0 4px #ffffff20}
.hero .scene-choices button[aria-pressed=true]::after{content:none}
.hero .scene-choices button:hover>span{opacity:1}
.hero .scene-choices button:focus-visible,#hero-motion:focus-visible{outline:2px solid #fff;outline-offset:1px}
#hero-motion{display:grid;place-items:center;width:32px;height:32px;min-height:32px;border:1px solid #ffffff45;border-radius:50%;font:14px/1 var(--sans);color:#fff;background:#101a1440}
.page-hidden .hero-world .scene-picture{animation-play-state:paused!important}
@media(min-width:1600px){.hero .hero-content{padding-top:160px;padding-bottom:35px}.hero .hero-bottom{padding-bottom:28px}}
@media(max-width:1100px){.brand .editor-brand-logo{width:170px;height:68px}.site-header{gap:22px}.desktop-nav{gap:22px}.hero .hero-story h1{font-size:clamp(60px,7.5vw,82px)}.hero .hero-content{gap:25px}.hero-portrait .hero-name{font-size:35px}.hero-story .hero-under p{font-size:17px}.hero-scene-controls{right:7px}}
@media(max-width:760px){.hero .hero-content{padding-top:148px;gap:24px}.hero .hero-story h1{font-size:clamp(49px,7.5vw,65px)}.hero-portrait .hero-name{font-size:30px}.hero-character{font-size:18px}.hero-portrait .hero-profession{font-size:11px}.hero-story .hero-under p{font-size:16px}.hero-bottom .hero-work-links a{font-size:16px;padding:11px 15px}.hero .hero-bottom{gap:12px 20px}.hero .hero-topline{top:119px}.hero .hero-bottom>.timecode{font-size:11px}}
@media(max-width:600px){.brand .editor-brand-logo{width:155px;height:62px}.site-header{height:96px;min-height:96px;padding-top:0;align-items:center;gap:12px}.header-controls{gap:8px}.site-header .sound-switch{width:44px;justify-content:center}.site-header [data-sound-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-header .control-divider{display:none}.site-header .language{font-size:13px}.hero .hero-topline{top:112px;font-size:11px}.hero .hero-content{grid-template-columns:minmax(0,1fr);padding:140px var(--pad) 30px;gap:28px;flex:none}.hero-portrait{width:min(100%,300px);justify-self:center}.hero-portrait>img{height:min(48svh,350px)}.hero-portrait .hero-identity{margin-top:8px}.hero-portrait .hero-name{font-size:36px}.hero-portrait .hero-profession{font-size:12px}.hero .hero-story{padding:0;max-width:520px;justify-self:center;width:100%}.hero .hero-story h1{font-size:clamp(48px,10vw,64px);margin-bottom:20px}.hero-story .hero-under p{font-size:17px;line-height:1.7}.hero-scene-controls{top:330px;transform:none;right:5px;gap:5px}.hero .hero-bottom{padding-top:20px;padding-bottom:22px;gap:15px;margin-top:auto}.hero-bottom .hero-work-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hero-bottom .hero-work-links a{font-size:15px;padding:12px 8px;min-height:46px}.hero .hero-bottom>.timecode{display:none}.hero .hero-bottom>.cinema-entry{grid-column:1/-1}.hero-bottom .cinema-entry strong{font-size:14px}}
@media(max-width:380px){.brand .editor-brand-logo{width:140px;height:56px}.hero .hero-content{padding-top:135px}.hero-portrait{width:260px;max-width:100%}.hero-portrait .hero-name{font-size:33px}.hero .hero-story h1{font-size:46px}.hero-bottom .hero-work-links{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-bottom .hero-work-links a{font-size:16px}.hero-scene-controls{right:3px;top:290px}.hero .scene-choices button{width:28px;height:28px;min-height:28px}.hero .hero-bottom{gap:14px}}
@media(prefers-reduced-motion:reduce){.hero .scene-choices button>span{transition:none}}

/* On phones the work choices lead, before the full portrait and its caption. */
@media(max-width:600px){
 .hero .hero-topline{display:none}
 .hero .hero-bottom{order:-1;margin:110px var(--pad) 0;padding-top:14px;padding-bottom:18px;flex-shrink:0}
 .hero .hero-content{order:0;padding-top:24px}
 .hero-scene-controls{top:395px}
}
@media(max-width:380px){.hero-scene-controls{top:440px}}

/* Let the illustration belong to the scene instead of ending at a paper edge. */
.hero-portrait{position:relative;isolation:isolate}
.hero-portrait::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:8% -20% -6% -28%;background:radial-gradient(ellipse closest-side at 45% 58%,#030806b3 0%,#03080666 48%,transparent 100%)}
.hero-portrait>img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,#000e 73%,#0008 84%,#0002 93%,transparent 99%);mask-image:linear-gradient(to bottom,#000 0%,#000 64%,#000e 73%,#0008 84%,#0002 93%,transparent 99%)}
@media(min-width:761px){
 .hero .hero-content{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:28px;padding-bottom:18px}
 .hero-portrait>img{width:120%;max-width:none;height:clamp(450px,calc(100svh - 420px),1000px);margin-left:-15%;object-fit:cover;object-position:center top}
 .hero-portrait .hero-identity{margin-top:0}
 .hero-story{position:relative;z-index:1;padding-right:12px}
}
@media(min-width:1600px){.hero .hero-content{padding-top:150px}}
@media(max-width:760px){.hero-portrait::before{inset:12% -10% 48px -10%}}