/* Portrait-led About composition; card mechanics retain their existing anchors. */
#about.about-desk{padding:clamp(64px,7.5vw,120px) 20px 0;overflow:clip;border-top:0;background:linear-gradient(155deg,#101314,#222627)}
#about .about-layout{display:block;min-height:680px;isolation:isolate}
#about .about-personal-copy{display:contents}
#about .about-label{display:none}
#about .about-title{position:absolute;z-index:1;left:0;right:0;top:48px;margin:0;font-family:'Ballet',cursive;font-size:clamp(64px,9.5vw,180px);line-height:1.25;font-weight:400;letter-spacing:0;text-align:center;white-space:nowrap;color:#ffffff;pointer-events:none}
#about .about-portrait-stage{position:relative;width:580px;max-width:100%;height:680px;margin:0 auto;padding:26px 0 0;z-index:auto}
#about .about-portrait{position:relative;z-index:auto;width:340px;height:440px;margin:0 auto;overflow:visible;border:0;border-radius:0;background:none;transform:none;will-change:auto}
#about .about-portrait::before{content:'';position:absolute;inset:auto;left:50%;top:50%;width:76%;height:auto;aspect-ratio:220 / 285;border:0;border-radius:4px;background:var(--card-back-color,var(--accent)) url('about-card-back-pattern.svg') center / 100% 100% no-repeat;box-shadow:0 12px 30px #0004;transform:translate(-50%,-50%) rotate(-3deg);z-index:0}
#about .about-portrait img{position:absolute;z-index:2;max-width:none;width:590px;height:630px;left:50%;top:24px;translate:-50% 0;object-fit:contain;object-position:50% 100%;transform:none;transition:none}
#about .about-introduction{position:absolute;left:0;bottom:42px;width:23%;max-width:320px;z-index:3}
#about .about-introduction p{font-size:clamp(12px,1vw,16px);line-height:1.5;margin:0 0 16px}
#about .about-discovery-home{position:absolute;right:88px;bottom:38px;min-height:0;margin:0;z-index:4}
#about .about-discovery-controls{width:76px}
#about .about-thread-label{top:50%;left:calc(100% + 12px);transform:translateY(-50%);font-size:11px}
#about .about-pull-string{z-index:1}
#about .about-portrait-stage>.about-card-slot{width:250px;--desk-card-width:250px;--desk-card-height:310px;height:310px}
@media(min-width:1800px){#about .about-layout{max-width:1800px;margin:auto}}
@media(min-width:651px) and (max-width:1000px){#about .about-introduction{width:25%}#about .about-portrait-stage{width:480px;margin-left:26%}#about .about-discovery-home{right:70px}#about .about-thread-button{width:60px;height:60px}}
@media(max-width:650px){
 #about.about-desk{margin-inline:-12px;padding:64px 12px 0;height:100svh;min-height:0;overflow:clip}
 #about .about-layout{height:100%;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0}
 #about .about-title{position:relative;top:auto;left:auto;right:auto;order:0;flex:none;font-size:min(9.2vw,6svh);white-space:nowrap;line-height:1.3;width:100%;text-align:center;margin:0 0 26px;letter-spacing:0}
 #about .about-introduction{position:relative;left:auto;bottom:auto;width:94%;max-width:430px;margin:0 auto;order:1;flex:none;text-align:center}
 #about .about-introduction p{font-size:clamp(11px,1.65svh,14px);line-height:1.4;margin-bottom:18px;letter-spacing:0}
 #about .about-introduction p:last-child{margin-bottom:0}
 #about .about-discovery-home{position:relative;right:auto;bottom:auto;align-self:center;order:2;flex:none;width:60px;margin:32px auto 0;min-height:0}
 #about .about-discovery-controls{width:60px;align-items:center}
 #about .about-thread-button{width:60px;height:60px;touch-action:none}
 #about .about-thread-drawing{transform:rotate(-90deg)}
 #about .about-thread-label{left:calc(100% + 10px);max-width:90px;white-space:nowrap;font-size:11px}
 #about .about-portrait-stage{order:3;flex:1;min-height:0;width:100%;height:auto;margin:0;padding:0}
 #about .about-portrait{position:absolute;bottom:0;left:15%;width:70%;height:calc(100% - 110px);margin:0}
 #about .about-portrait::before{inset:auto;left:50%;top:50%;width:76%;height:auto;aspect-ratio:220 / 285;transform:translate(-50%,-50%) rotate(-10deg);z-index:2}
 #about .about-portrait img{width:126%;height:90%;top:auto;bottom:0;z-index:3}
 #about .about-portrait-stage>.about-card-slot{width:min(220px,55vw);--desk-card-width:220px;--desk-card-height:285px;height:285px}
}

/* Desktop composition and explicit shared stacking order. */
@media(min-width:651px){
 #about .about-layout{padding-top:0;min-height:680px}
 #about .about-title{top:24px;line-height:1.6;padding:12px 0 28px;overflow:visible;z-index:3}
 #about .about-portrait::before{width:110%;z-index:2}
 #about .about-portrait img{z-index:4}
 #about .about-introduction{left:0;bottom:20px}
 #about .about-discovery-home{right:80px;bottom:20px}
 #about .about-thread-label{left:auto;right:calc(100% + 12px)}
}

@media(min-width:651px){
 #about .about-layout{max-width:none;margin:0}
 #about .about-introduction p:last-child{margin-bottom:0}
}

#about .about-thread-button>.about-thread-hint{display:none}
@media(min-width:651px){
 #about .about-discovery-home,#about .about-discovery-controls{width:240px}
 #about .about-thread-label{left:calc(100% + 14px);right:auto;top:25px;transform:none;font-size:14px;max-width:none}
 #about .about-thread-button>.about-thread-hint{display:block;position:absolute;left:calc(100% + 14px);top:46px;margin:0;white-space:nowrap;font-size:11px;color:var(--muted);pointer-events:none}
}

@media(min-width:651px){#about .about-discovery-controls{width:100%}}

/* Keep the mobile rear deck smaller than the portrait backing card. */
@media(max-width:650px){
 #about .about-pocket-stack{transform:scale(.78);transform-origin:50% 50%}
 #about .about-pocket-back{inset:11%}
}

/* The separate rear deck represents unrevealed cards. The live face slot has
   no visible content between pulls, including after returning the whole fan. */
#about .about-portrait-stage>.about-card-slot:not(.has-card){visibility:hidden;pointer-events:none}

/* Match the backing to the actual card face at every responsive size. */
#about.about-desk .about-portrait::before{width:calc(var(--portrait-card-width,250px) * var(--rear-card-scale,1));height:calc(var(--portrait-card-height,310px) * var(--rear-card-scale,1));aspect-ratio:auto;translate:0 -24px}
/* The backing matches the rear deck's visible size, including its mobile scale. */
#about{--rear-card-scale:1}
@media(max-width:650px){#about{--rear-card-scale:.78}}
@media(min-width:651px) and (max-width:1366px) and (any-pointer:coarse) and (orientation:landscape){#about{--rear-card-scale:.78}}