/* Noto Sans SC Bold: local subset of the current biography; regenerate when adding new characters. */
@font-face{font-family:AboutSans;src:url('assets/about-noto-sans-sc-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
.about-page{position:fixed;inset:0;z-index:90;overflow:auto;scrollbar-gutter:stable;color:#f6f3ed;background:#252321;isolation:isolate}
.about-page[hidden]{display:none}
.about-page{overflow-x:hidden;will-change:clip-path;overflow-anchor:none}
.detail-corner-footer{box-sizing:border-box;width:100%;min-height:76px;padding:20px 3.35vw 20px 1.7vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.detail-corner-footer .corner-identity,.detail-corner-footer .music-player{position:static;flex-shrink:0}
@media(max-width:650px){.detail-corner-footer{padding:20px 18px 18px}}
@media(max-width:480px){.detail-corner-footer{flex-direction:column;align-items:flex-start;gap:4px}.detail-corner-footer .music-player{align-self:flex-end}}
.about-page::before{content:"";position:fixed;inset:0;background:linear-gradient(#0008,#0008),url('assets/about-background.jpg') center 45%/cover no-repeat;z-index:-1;pointer-events:none}
body[data-about] .topbar{position:absolute;right:auto;left:1.7vw;width:94.95vw;z-index:120}
body[data-about=open] .topbar{color:#f6f3ed;opacity:1}
body[data-about=open] .topbar nav{pointer-events:auto}
body[data-about=opening],body[data-about=rewinding]{background:var(--orange)}
body[data-about=open] .topbar button:focus-visible{outline-color:#fff}
.about-layout{display:grid;grid-template-columns:30.8% 1fr;column-gap:3.8%;row-gap:60px;margin:0 1.8% 0 2.8%;padding-top:max(117px,16vh);padding-bottom:44px}
.about-portrait{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.about-portrait-intro{display:none;position:absolute;inset:0;clip-path:var(--portrait-reveal,inset(0));pointer-events:none;color:#f6f3ed;text-align:left;text-shadow:0 1px 3px #0006}
.about-portrait>.file-card>.about-portrait-intro,
body[data-about-step=unfold] .about-shared-card>.about-portrait-intro,
body[data-about=rewinding] .about-shared-card>.about-portrait-intro{display:block}
.about-portrait-intro-copy{position:absolute;left:6%;bottom:17%;width:43%;font:400 10.5px/1.3 Arial,sans-serif;letter-spacing:0;color:#fa782c}
.about-portrait-intro-copy strong{display:block;margin-bottom:10px;font:italic 700 24px/1.15 Arial,sans-serif;color:#f6f3ed}
.about-portrait-intro-copy p{margin:0}
.about-portrait-intro-copy p+p{margin-top:8px}
.about-portrait-intro-copy p span{color:#f6f3ed}
.about-portrait-intro .about-portrait-intro-signoff{position:absolute;left:6%;bottom:5.5%;width:72%;margin:0;font:700 11px/1.25 Arial,sans-serif;letter-spacing:0;color:#f6f3ed}
.about-portrait-intro-signoff span{display:block;text-align:right}
.file-card>img.about-detail-photo{display:none;clip-path:var(--portrait-reveal,inset(0))}
.about-portrait>.file-card>img.about-detail-photo,
body[data-about-step=unfold] .about-shared-card>img.about-detail-photo,
body[data-about=rewinding] .about-shared-card>img.about-detail-photo{display:block}
.about-left,.about-right{min-width:0}
@media(min-width:701px){
  .about-left{display:flex;flex-direction:column}
  .about-left>.about-portrait,.about-left>.about-logo{flex-shrink:0}
  /* Keep identity attached to the first topic; distribute space after it. */
  .about-left>.about-bio{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
  .about-bio>.about-bio-section{flex-shrink:0}
  .about-bio>.about-bio-section~.about-bio-section{margin-top:auto;padding-top:30px}
  .about-bio>.about-bio-section:last-child{margin-bottom:auto}
}
.about-bio{padding-top:28px;line-height:1.7}
.about-page h1,.about-page h2,.about-page p{margin:0}
.about-page h1,.about-page h2{font-size:17px;font-weight:700;letter-spacing:.06em}
.about-bio h1,.about-bio .about-name{color:#fa782c}
.about-bio .about-name{font-size:22px;margin-top:12px;font-weight:700}
.about-bio .about-role{font-size:15px;margin:3px 0 24px}
.about-bio h2{font:italic 600 25px Arial,sans-serif;letter-spacing:0;margin-bottom:12px}
.about-bio .about-identity{font-size:clamp(16px,1.08vw,21px);line-height:1.65;letter-spacing:0;font-weight:700;text-wrap:pretty}
.about-bio{font-family:AboutSans,"Microsoft YaHei",sans-serif;font-synthesis:none;padding-bottom:16px}
.about-bio-section{margin-top:30px;font-size:clamp(16px,1.05vw,20px);line-height:1.75;font-weight:700;overflow-wrap:break-word}
.about-identity+.about-bio-section{margin-top:0}
.about-bio-section h2{font:inherit;font-weight:700;letter-spacing:0;margin-bottom:4px}
.about-bio-section p+p{margin-top:10px}
.about-placeholder{font-size:16px;line-height:1.65;opacity:.76;margin-top:10px!important}
.about-logo{position:relative;overflow:hidden;margin-top:24px;background:#000;width:100%;aspect-ratio:16/9}
.about-logo-motion{position:absolute;inset:0;display:flex;align-items:center;animation:ada-logo-travel 22s linear -11s infinite;animation-play-state:paused}
.about-logo img{display:block;width:100%;height:auto}
body[data-about=open] .about-logo.is-in-view .about-logo-motion{animation-play-state:running}
@keyframes ada-logo-travel{from{transform:translateX(73%)}to{transform:translateX(-73%)}}
@media(prefers-reduced-motion:reduce){.about-logo-motion{animation:none}}
.personal-archive{position:relative}
.archive-placeholders{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.archive-placeholder{position:relative;aspect-ratio:9/16;border-radius:13px;background:rgba(17,17,17,.57);border:1px solid #ffffff24;min-width:0;display:flex;align-items:center;justify-content:center}
.archive-placeholder>span{font:300 44px Arial,sans-serif;color:#ffffff29}
.archive-placeholder small{position:absolute;left:16px;bottom:17px;font-size:12px;letter-spacing:.05em;color:#ffffff8c}
.creative-profile{margin-top:30px}
.profile-placeholder{min-height:280px;border:1px solid #ffffff24;border-radius:12px;background:rgba(17,17,17,.52);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:35px;padding:28px}
.profile-placeholder p{font-size:14px;color:#ffffff8c}
.profile-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;color:#ffffffa6;font-size:12px}
.about-contact{grid-column:1/-1;border-top:1px solid #ffffff38;display:flex;justify-content:space-between;gap:40px;padding-top:25px}
.about-contact h2{font-size:15px}.about-contact p{font-size:14px;opacity:.65;margin-top:12px}
.about-shared-card{position:fixed!important;z-index:110!important;left:0!important;top:0!important;width:480px!important;height:480px!important;margin:0!important;transform-origin:0 0!important;transition:none!important;pointer-events:none!important}
.about-portrait>.file-card{position:absolute;left:0;top:0;width:480px;height:480px;transform:scale(var(--portrait-scale,1))!important;border-radius:0;box-shadow:none;pointer-events:none;transition:none!important}
.about-shared-card,.about-portrait>.file-card{outline:none!important}
.about-shared-card::after,.about-portrait>.file-card::after{display:none}
.about-shared-card>img,.about-portrait>.file-card>img{transition:none!important}
.about-shared-card .file-controls{visibility:visible;opacity:1}
.about-portrait .file-card>img{transform:none!important}
.about-portrait .file-number,.about-portrait .file-title,.about-portrait .file-controls{visibility:hidden}
.about-portrait .file-card::after{display:none}
/* Retain the same scrolling/compositing surface throughout the reveal. Inert
   already prevents user interaction until the page is committed. */
body[data-about=open] main{visibility:hidden}
body[data-about=opening] main{filter:blur(3px)}
body[data-about=rewinding] main{filter:blur(3px)}
body[data-about=rewinding] .about-page{overflow:hidden}
body[data-about=rewinding] .topbar{color:#f6f3ed;opacity:1}
@media(max-width:700px){.about-layout{grid-template-columns:1fr;margin:0 20px;padding-top:117px;gap:50px}.about-portrait{max-width:480px}.about-right{margin-top:10px}.archive-placeholders{gap:9px}.archive-placeholder small{font-size:9px;left:8px;bottom:12px}.archive-placeholder>span{font-size:28px}.profile-placeholder{min-height:240px}.about-contact{gap:20px}.about-bio{padding-top:24px}}
@media(max-width:650px){body[data-about] .topbar{left:18px;width:calc(100vw - 36px)}}