html.intro-pending::before { content:""; position:fixed; inset:0; background:#ffffff; z-index:10000; }
html.intro-running { overflow:hidden; }
html.intro-running .site-navbar .nav-brand { visibility:hidden; }
.intro-overlay[hidden] { display:none; }
.intro-overlay { position:fixed; inset:0; z-index:10001; overflow:hidden; color:#262626; }
.intro-backdrop { position:absolute; inset:0; background:#ffffff; }
.intro-name { position:absolute; top:0; left:0; z-index:3; margin:0; white-space:nowrap; transform-origin:top left; pointer-events:none; }
.intro-photo { position:absolute; --photo-width:clamp(105px,13vw,190px); width:var(--photo-width); aspect-ratio:3/4; height:auto; object-fit:cover; border-radius:5px; z-index:2; opacity:0; }
/* Keep the composition anchored around the name, rather than viewport edges. */
.intro-photo:nth-of-type(1) { left:calc(50% - clamp(170px,21vw,300px)); top:calc(50% - var(--photo-width)*4/3 - 70px); }
.intro-photo:nth-of-type(2) { right:calc(50% - clamp(170px,21vw,300px)); top:calc(50% - var(--photo-width)*4/3 - 65px); }
.intro-photo:nth-of-type(3) { left:calc(50% - clamp(280px,33vw,460px)); top:calc(50% - var(--photo-width)*2/3); }
.intro-photo:nth-of-type(4) { right:calc(50% - clamp(280px,33vw,460px)); top:calc(50% - var(--photo-width)*2/3); }
.intro-photo:nth-of-type(5) { left:calc(50% - clamp(165px,20vw,280px)); top:calc(50% + 85px); }
.intro-photo:nth-of-type(6) { right:calc(50% - clamp(165px,20vw,280px)); top:calc(50% + 90px); }
.intro-skip { position:absolute; top:28px; right:28px; z-index:4; padding:10px 4px; border:0; background:#ffffff; color:#737373; cursor:pointer; }
.intro-skip:focus-visible { outline:2px solid #262626; outline-offset:4px; }
@media(max-width:600px) {
 .intro-photo { --photo-width:100px; width:var(--photo-width); }
 .intro-photo:nth-of-type(1) { left:calc(50% - 130px); top:calc(50% - 205px); }
 .intro-photo:nth-of-type(2) { right:calc(50% - 130px); top:calc(50% - 190px); }
 .intro-photo:nth-of-type(3) { left:calc(50% - 55px); top:calc(50% + 75px); bottom:auto; width:110px; }
 .intro-photo:nth-of-type(n+4) { display:none; }
 .intro-skip { top:17px; right:22px; }
}
@media(prefers-reduced-motion:reduce) {
 html.intro-pending::before,.intro-overlay { display:none; }
 html.intro-running { overflow:visible; }
 html.intro-running .site-navbar .nav-brand { visibility:visible; }
}