.portrait-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero-portrait{position:absolute;right:-3%;bottom:90px;width:min(68vw,calc(100svh - 180px),1100px);aspect-ratio:1;margin:0;pointer-events:none;z-index:1;mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
.hero-portrait img,.hero-portrait canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}
.hero-portrait canvas{visibility:hidden}
.hero-portrait.gaze-ready canvas{visibility:visible}
.intro-copy,.intro-footnote,.specimen-note{z-index:2}
.quote-attribution{color:var(--muted);font-size:.82rem;letter-spacing:.04em;margin:0 0 24px}
@media(min-width:760px){
  .introduction .intro-copy{flex-shrink:0}
  .introduction .intro-copy h1{font-size:clamp(3rem,5vw,5.8rem)}
  .introduction .intro-copy .lede{margin:16px 0 14px}
  .introduction .quote-attribution{margin-bottom:16px}
  .cinematic .introduction .intro-layout{justify-content:safe center}
  .cinematic .introduction .intro-footnote{position:static;inset:auto;order:2;flex-shrink:0;width:100%;margin-top:24px}
}
.specimen-note{top:auto;bottom:175px}
@media(min-width:760px) and (max-height:700px){.hero-portrait{width:min(68vw,calc(100svh - 145px));right:-3%;bottom:60px}}
html:not(.cinematic) .portrait-layer{position:relative;inset:auto;height:400px;min-height:400px;order:1;margin-top:16px}
html:not(.cinematic) .hero-portrait{width:400px;right:calc(50% - 200px);bottom:0}
html:not(.cinematic) .intro-footnote{order:2;margin-top:24px}
html:not(.cinematic) .specimen-note{display:none}
@media(max-width:759px){
  .introduction{--mobile-portrait-size:clamp(210px,32svh,300px)}
  html .introduction .intro-layout{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:110px;
    padding-bottom:40px;
  }
  html.cinematic .introduction .intro-layout{
    padding-top:100px;
    padding-bottom:105px;
  }
  html.reading-mode .introduction .intro-layout{padding-top:20px}
  html .introduction .portrait-layer{
    position:relative;
    inset:auto;
    order:0;
    flex:0 0 var(--mobile-portrait-size);
    width:100%;
    height:var(--mobile-portrait-size);
    min-height:var(--mobile-portrait-size);
    margin:0 0 20px;
  }
  html .introduction .hero-portrait{
    left:50%;
    right:auto;
    top:0;
    bottom:auto;
    width:var(--mobile-portrait-size);
    height:var(--mobile-portrait-size);
    transform:translateX(-50%);
  }
  .introduction .intro-copy{
    order:1;
    flex-shrink:0;
    width:100%;
    max-width:none;
  }
  .introduction .intro-copy .eyebrow{margin-bottom:14px}
  .introduction .intro-copy h1{
    font-size:clamp(2.5rem,11.3vw,3.4rem);
    margin-bottom:16px;
  }
  .introduction .intro-copy .lede{
    max-width:34ch;
    margin:16px 0;
    background:transparent;
    font-size:.88rem;
  }
  html .introduction .intro-footnote{
    position:static;
    inset:auto;
    order:2;
    flex-shrink:0;
    width:100%;
    gap:20px;
    margin-top:24px;
  }
  .introduction .intro-footnote>span:first-child{max-width:170px}
  .introduction .intro-footnote .scroll-note{max-width:110px}
}
@media(prefers-reduced-motion:reduce){.hero-portrait canvas{visibility:hidden!important}}
@media print{.hero-portrait{display:none}}