/* One deliberate selection at a time, on an open editorial stage. */
.portrait-story{--portrait-paper:#f2f2ef;--portrait-ink:#292a29;--portrait-muted:#73766e;--portrait-gutter:5.1vw;position:relative;margin:100px calc(-1 * var(--portrait-gutter)) 0;background:var(--portrait-paper);color:var(--portrait-ink);scroll-margin-top:30px;isolation:isolate}
.portrait-stage{position:relative;padding:35px var(--portrait-gutter) 30px;overflow:clip}
.portrait-heading{position:relative;z-index:5;display:flex;align-items:baseline;gap:24px;pointer-events:none;padding-right:35px}
.journey .portrait-heading h2{font:500 15px/1.4 var(--sans);letter-spacing:-.25px;margin:0}
.portrait-heading>span{font-size:12px;color:var(--portrait-muted);letter-spacing:-.1px}
.portrait-chapter{position:relative;min-height:740px;margin:25px 0 50px;mix-blend-mode:multiply}
.portrait-name{position:absolute;z-index:2;left:0;top:24%;margin:0;font:400 clamp(100px,11vw,190px)/1.03 Georgia,'Times New Roman',serif;letter-spacing:-.065em;pointer-events:none}
.portrait-name>span{color:#8b978b}
.portrait-figure{position:absolute;display:block;left:66%;top:1%;height:96%;max-width:58%;aspect-ratio:9/16;transform:translateX(-50%);outline-offset:6px;z-index:1;cursor:pointer;-webkit-user-drag:none}
.portrait-figure img,.portrait-figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;user-select:none;-webkit-user-drag:none;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 96%,transparent);-webkit-mask-composite:source-in}
.portrait-figure video{opacity:0;transition:opacity .35s ease}
.portrait-figure[data-ready=true] video{opacity:1}
[data-portrait-cutout]{mix-blend-mode:normal}
[data-portrait-cutout] .portrait-figure img{mask-image:none;-webkit-mask-image:none}
[data-portrait-cutout] .portrait-figure video{opacity:0;pointer-events:none}
.portrait-cutout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.portrait-figure[data-matte-ready=true] .portrait-cutout{opacity:1}
.portrait-figure[data-matte-ready=true]>img{visibility:hidden}
/* Feather the Explorer studio corner without touching his head or silhouette. */
[data-portrait-chapter=player] .portrait-figure{mask-image:radial-gradient(ellipse 40% 20% at 0 0,transparent 82%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 40% 20% at 0 0,transparent 82%,#000 100%)}
.portrait-link-hint{position:absolute;z-index:3;left:50%;bottom:9%;display:flex;align-items:center;gap:18px;transform:translate(-50%,6px);padding:10px 0;white-space:nowrap;background:var(--portrait-paper);color:var(--portrait-ink);font:12px/1.4 var(--sans);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.portrait-link-hint>span{font-size:19px}
.portrait-figure:focus-visible .portrait-link-hint{opacity:1;transform:translate(-50%,0)}
.portrait-caption{position:absolute;z-index:3;left:0;bottom:19%;margin:0;max-width:34ch;font:400 15px/1.75 var(--sans);letter-spacing:-.25px;pointer-events:none}
.portrait-caption>span{color:var(--portrait-muted);font-size:12px;letter-spacing:0}
.portrait-footer{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:28px}
.portrait-about{display:inline-flex;align-items:center;gap:28px;font:12px/1.5 var(--sans);color:#5f625d;min-height:44px}
.portrait-about>span{font-size:20px;color:var(--portrait-ink);transition:transform .2s}
.portrait-about:hover>span{transform:translate(2px,-2px)}
.portrait-progress{display:none;align-items:center;gap:13px;color:var(--portrait-muted);font:10px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:1px}
.portrait-number{color:var(--portrait-ink)}
.portrait-progress-line{position:relative;display:block;width:clamp(55px,8vw,135px);height:1px;background:#cccec7;overflow:hidden}
.portrait-progress-line i{position:absolute;inset:0;background:var(--portrait-ink);transform:scaleX(var(--portrait-progress,.3333));transform-origin:left;transition:transform .7s cubic-bezier(.2,.75,.15,1)}
.portrait-motion{position:absolute;z-index:8;top:24px;right:calc(var(--portrait-gutter) - 12px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;border-radius:0;color:#6d706a;font:12px/1 var(--sans)}
.portrait-motion[hidden]{display:none}
.portrait-motion:hover{color:var(--portrait-ink)}
.portrait-pagination,.portrait-arrows{display:none}
.portrait-story.is-carousel .portrait-stage{height:clamp(650px,90svh,940px);min-height:0;padding-bottom:25px}
.is-carousel .portrait-sequence{position:absolute;inset:0;touch-action:pan-y pinch-zoom}
.is-carousel .portrait-chapter{position:absolute;inset:0;min-height:0;margin:0;visibility:hidden;opacity:0;pointer-events:none}
.is-carousel .portrait-chapter.is-current,.is-carousel .portrait-chapter.is-leaving{visibility:visible;opacity:1}
.is-carousel .portrait-chapter.is-current .portrait-figure{pointer-events:auto}
.is-carousel.is-changing .portrait-figure{pointer-events:none}
.is-carousel .portrait-name{left:var(--portrait-gutter);top:29%}
.is-carousel .portrait-figure{top:8%;height:77%;max-width:55%}
.is-carousel .portrait-caption{left:var(--portrait-gutter);bottom:26%}
.is-carousel .portrait-footer{position:absolute;inset:auto var(--portrait-gutter) 22px}
.is-carousel .portrait-progress{display:flex}
.is-carousel .portrait-pagination{position:absolute;z-index:6;left:var(--portrait-gutter);bottom:99px;display:flex;align-items:center;gap:33px}
.portrait-pick{appearance:none;position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#8a8c83;font:400 13px/1.5 var(--sans);letter-spacing:-.15px;cursor:pointer;transition:color .25s}
.portrait-pick:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .4s}
.portrait-pick[aria-selected=true]{color:var(--portrait-ink)}
.portrait-pick[aria-selected=true]:before{transform:scale(1)}
.portrait-pick:hover{color:var(--portrait-ink)}
.is-carousel .portrait-arrows{position:absolute;right:calc(var(--portrait-gutter) - 10px);bottom:99px;z-index:6;display:flex;gap:22px}
.portrait-arrow{appearance:none;display:grid;place-items:center;width:48px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--portrait-ink);font:300 26px/1 var(--sans);cursor:pointer}
.portrait-arrow span{display:block;transition:transform .25s}
.portrait-arrow:first-child:hover span{transform:translateX(-4px)}
.portrait-arrow:last-child:hover span{transform:translateX(4px)}
.portrait-story :focus-visible{outline:1px solid #747b6a;outline-offset:6px}
@media(min-width:1700px){.portrait-name{font-size:12vw}.portrait-figure{left:68%}}
@media(max-width:1050px){.portrait-name{font-size:11.5vw}.portrait-figure{left:68%;max-width:61%}.is-carousel .portrait-figure{max-width:61%}.portrait-caption{font-size:14px;max-width:29ch}.portrait-caption>span{font-size:12px}}
@media(max-width:720px){
  .portrait-story{--portrait-gutter:6vw;margin-top:44px}
  .portrait-stage{padding:24px var(--portrait-gutter) 22px}
  .portrait-heading{gap:14px;align-items:center}
  .journey .portrait-heading h2{font-size:13px}
  .portrait-heading>span{font-size:10px}
  .portrait-chapter{min-height:620px;margin:36px 0}
  .portrait-name{font-size:21vw;top:1%;left:0;letter-spacing:-.065em}
  .portrait-figure{left:50%;top:12%;height:77%;max-width:100%}
  .portrait-caption{bottom:0;max-width:none;font-size:14px;line-height:1.7}
  .portrait-caption>span{font-size:11px}
  .portrait-motion{top:13px;right:calc(var(--portrait-gutter) - 11px);font-size:11px}
  .portrait-about{font-size:10px;gap:14px}
  .portrait-about>span{font-size:18px}
  .portrait-progress{font-size:9px;gap:9px}
  .portrait-progress-line{width:38px}
  .portrait-story.is-carousel .portrait-stage{height:clamp(630px,91svh,780px);padding-top:24px}
  .is-carousel .portrait-name{top:11.5%;font-size:20vw}
  .is-carousel .portrait-figure{left:50%;top:22%;height:53%;max-width:100%}
  .is-carousel .portrait-caption{bottom:126px;font-size:13px;line-height:1.6}
  .is-carousel .portrait-caption>span{font-size:11px}
  .is-carousel .portrait-footer{bottom:11px;gap:15px}
  .is-carousel .portrait-pagination{left:var(--portrait-gutter);right:var(--portrait-gutter);bottom:66px;justify-content:space-between;gap:10px}
  .portrait-pick{font-size:12px;gap:8px}
  .is-carousel .portrait-arrows{left:calc(var(--portrait-gutter) - 8px);right:calc(var(--portrait-gutter) - 8px);top:48%;bottom:auto;justify-content:space-between;pointer-events:none}
  .portrait-arrow{pointer-events:auto;font-size:25px;width:44px}
}
@media(max-width:380px){.portrait-heading>span{font-size:9px}.portrait-heading{gap:11px}.portrait-about{font-size:9px;gap:9px}.portrait-progress{gap:6px}.portrait-progress-line{width:30px}.portrait-pick{font-size:11px}.is-carousel .portrait-caption{font-size:12px}.is-carousel .portrait-caption>span{font-size:10px}}
@media(max-width:720px) and (max-height:650px){
  .portrait-story{scroll-margin-top:0}
  .portrait-story.is-carousel .portrait-stage{height:clamp(520px,calc(100svh - 20px),590px)}
  .is-carousel .portrait-name{top:10%}
  .is-carousel .portrait-figure{top:23%;height:47%}
  .is-carousel .portrait-caption{bottom:118px}
  .is-carousel .portrait-pagination{bottom:59px}
  .is-carousel .portrait-footer{bottom:5px}
}
@media(max-width:950px) and (max-height:500px) and (pointer:coarse){
  .portrait-story{margin-top:45px}
  .portrait-story.is-carousel .portrait-stage{height:560px;padding-top:24px}
  .is-carousel .portrait-name{font-size:11vw;top:27%}
  .is-carousel .portrait-figure{left:69%;top:10%;height:73%;max-width:50%}
  .is-carousel .portrait-caption{bottom:29%;font-size:14px;max-width:27ch}
  .is-carousel .portrait-caption>span{font-size:11px}
  .is-carousel .portrait-pagination{bottom:87px}
  .is-carousel .portrait-arrows{top:auto;left:auto;bottom:87px;right:calc(var(--portrait-gutter) - 10px);gap:20px}
}
@media(prefers-reduced-motion:reduce){.portrait-story *, .portrait-story *:before,.portrait-story *:after{transition:none!important;animation:none!important}.portrait-figure video,.portrait-cutout{display:none}.portrait-figure img{opacity:1!important;visibility:visible!important}}