#head-stage{width:100%;aspect-ratio:16/9;position:relative;align-self:start;display:flex;align-items:center;justify-content:center;}
#floating-head{display:block;height:auto;width:45.978%;aspect-ratio:470/575;border:0;padding:0;background:transparent;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
#floating-head:focus:not(:focus-visible){outline:none}
#floating-head:focus-visible{outline:1px dashed var(--line);outline-offset:5px;}
#head-canvas{display:block;width:100%;height:auto;aspect-ratio:470/575;pointer-events:none;}
@media(max-width:600px){.site-header .theme-toggle{left:auto;right:20px;top:18px;bottom:auto;transform:none;}}

/* The home portrait always uses its light treatment, inside a full-width white band. */
.home{display:block}
.home-band{display:grid;grid-template-columns:1fr 1fr;gap:4vw;position:relative;isolation:isolate;color:#111}
.home-band::before{content:"";position:absolute;z-index:-1;top:-30px;bottom:-60px;left:50%;width:100vw;transform:translateX(-50%);background:#fff;pointer-events:none}
@media(max-width:900px){.home-band{gap:30px}}
@media(max-width:600px){
 .home-band{grid-template-columns:1fr;gap:34px;color:inherit}
 .home-band::before{display:none}
 #head-stage{isolation:isolate}
 #head-stage::before{content:"";position:absolute;z-index:-1;inset:-10px auto -24px 50%;width:100vw;transform:translateX(-50%);background:#fff;pointer-events:none}
}

body{overflow-x:clip}
.home-band>p{position:relative;z-index:1}
.home-band{color-scheme:light}
@media(max-width:600px){.home-band{color-scheme:inherit}#head-stage{color-scheme:light}}

/* Inset the mobile portrait panel to the same side margins as the page content. */
@media(max-width:600px){#head-stage::before{left:0;right:0;width:auto;transform:none}}