/* Independent, editable poster layers; the moving silhouette stays in front. */
:root{--poster-display:'Arial Narrow','Bahnschrift',sans-serif;--card-body:'Arial Narrow','Bahnschrift',sans-serif;--card-script:Georgia,'Times New Roman',serif;--record-color:#6e527f}
.about .about-top{grid-template-columns:.78fr 1.22fr;gap:26px}
.about-intro{align-self:center}
.about-intro .eyebrow{position:relative;top:var(--profile-eyebrow-offset,0px);max-width:440px}
.about .about-intro h2{font-size:clamp(32px,3.2vw,58px);line-height:1.5;letter-spacing:-1.6px;margin:30px 0 35px}
.about #about-copy{gap:15px}
.about #about-copy p{font-size:clamp(12px,.98vw,16px);line-height:1.9;white-space:nowrap}
.profile-poster{container-type:inline-size;position:relative;isolation:isolate;margin:0;width:100%;max-width:1200px;aspect-ratio:1.4;justify-self:start;overflow:visible;clip-path:inset(-12% 0 0);background:var(--bg);color:#eeeaf3}
.profile-poster *{box-sizing:border-box}
.poster-name{position:absolute;z-index:2;top:12%;font-family:var(--poster-display);font-stretch:condensed;font-style:italic;font-size:16cqw;font-weight:800;line-height:1;letter-spacing:-.6cqw;color:#d7c6ee}
.poster-name.wan{left:18.5%}.poster-name.ting{right:5.5%}
.poster-vinyl{position:absolute;z-index:1;width:46%;aspect-ratio:1;left:49%;top:1.5%;border-radius:50%;color:var(--record-color)}
.poster-vinyl svg{display:block;width:100%;height:100%}.poster-vinyl circle{vector-effect:non-scaling-stroke}
.poster-vinyl:before{content:'';position:absolute;inset:33%;border:.6px solid var(--record-color);border-radius:50%;background:var(--record-color)}
.poster-vinyl:after{content:'';position:absolute;inset:49%;border-radius:50%;background:#0b0b0e}
.poster-type{position:absolute;z-index:2;margin:0!important;max-width:none!important;font-family:var(--poster-display);font-weight:800;line-height:1.02!important;letter-spacing:.015em;white-space:nowrap}
.poster-type.imaginative{left:77%;top:34%;z-index:4;font-size:4cqw!important;color:#f3f0f7!important;transform:rotate(-13deg);transform-origin:50% 50%}
.poster-type.in-life{left:16.5%;top:40%;font-size:3.15cqw!important;color:var(--purple)!important}
.poster-type.curious{left:21%;top:94.5%;font-size:3.7cqw!important;color:var(--purple)!important}
.poster-type.beauty{left:2.5%;top:35%;font-size:2.05cqw!important;color:#aaa4b4!important}
.poster-type.detail{left:83%;top:54%;font-size:2.65cqw!important;color:#aaa4b4!important}
.poster-portrait{position:absolute;z-index:3;left:28%;top:-12%;width:60%;aspect-ratio:1080/1630;pointer-events:none}
.poster-portrait img,.poster-portrait video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.poster-portrait video{opacity:0}
.profile-poster.has-frame .poster-portrait video{opacity:1}
.profile-poster.has-frame .poster-portrait img{opacity:0}
.profile-poster.media-failed .poster-portrait video{display:none}
.profile-poster.media-failed .poster-portrait img{opacity:1}
.profile-card{position:absolute;z-index:5;left:13.5%;top:46%;width:26%;padding:1.55cqw 3.5cqw 1.6cqw 1.75cqw;background:#c4afe0;color:#24192e;border-radius:.3cqw;transform:rotate(-6deg);box-shadow:0 1.3cqw 3cqw #0003;mask-image:radial-gradient(circle at 90% 0%,transparent 0 1cqw,#000 1.1cqw),radial-gradient(circle at 90% 100%,transparent 0 1cqw,#000 1.1cqw);mask-composite:intersect}
.profile-card:after{content:'';position:absolute;top:1.6cqw;bottom:1.6cqw;right:10%;width:1px;background:repeating-linear-gradient(to bottom,#60477870 0 5px,transparent 5px 10px)}
.profile-card small,.interests-card small{display:block;font:.8cqw var(--card-body);letter-spacing:.13em;white-space:nowrap}
.profile-card small{color:#4d365f}
.profile-card h3,.interests-card h3{font-family:var(--card-script);font-style:italic;font-weight:400;letter-spacing:-.055em;white-space:nowrap}
.profile-card h3{font-size:3.15cqw;line-height:1.25;margin:1cqw 0 1.1cqw;padding-bottom:.9cqw;border-bottom:1px solid #68517d70}
.profile-card dl{margin:0;display:grid;gap:0;font:1.55cqw/1.2 var(--card-body)}
.profile-card dl div{display:flex;gap:1cqw;align-items:baseline;padding:.55cqw 0}
.profile-card dl div+div{border-top:1px solid #68517d50}
.profile-card dl div:first-child{padding-top:0}.profile-card dl div:last-child{padding-bottom:0}
.profile-card dt{font-weight:400}.profile-card dd{margin:0}
.ticket-barcode{position:absolute;right:3.3%;top:36%;bottom:25%;width:1.5cqw;background:repeating-linear-gradient(90deg,#624c78 0 .5px,transparent .5px 1.5px,#624c78 1.5px 2px,transparent 2px 3px)}
.interests-card{position:absolute;z-index:5;left:74%;top:66%;width:22%;padding:1.45cqw 1.6cqw 1.5cqw;background:#1d1726;border:1px solid #b89bce;border-radius:1.6cqw;outline:1px solid #685279;outline-offset:-.6cqw;transform:rotate(7deg);box-shadow:0 1.5cqw 4cqw #0003}
.interests-card small{color:#b39cc9;font-size:.8cqw}
.interests-card h3{font-size:2.85cqw;line-height:1.2;margin:1cqw 0 1cqw}
.interests-card ol{list-style:none;padding:0;margin:0;border-top:1px solid #64516f}
.interests-card li{display:flex;align-items:center;gap:1.3cqw;padding:.85cqw 0;border-bottom:1px solid #45354f;font:1.55cqw/1.2 var(--card-body)}
.interests-card li:last-child{border-bottom:0;padding-bottom:0}
.interests-card li span{font:.8cqw var(--card-body);color:#b298c6}
.interests-card li i{margin-left:auto;color:#bda0de;font-size:1.2cqw;font-style:normal;letter-spacing:-.1em;transform:rotate(180deg)}
.record-sticker{position:absolute;z-index:1;left:25.5%;top:69%;width:18%;aspect-ratio:1;color:var(--record-color)}
.record-sticker svg{height:100%;width:100%;overflow:visible}
.poster-spark{position:absolute;color:var(--purple);font:4cqw/1 Georgia,serif;z-index:4}
.poster-spark.one{left:29%;top:36%}.poster-spark.two{left:94%;top:50%;font-size:3.8cqw}
.poster-spark.white-one{left:15%;top:85%;font-size:4cqw;color:#f4f0f9}
.about .contact-grid{grid-template-columns:1.15fr 1fr 1fr;gap:40px;border-bottom:1px solid var(--line)}
.about .contact-cell{position:relative;display:flex;align-items:center;gap:18px;border-right:0;margin-right:0;padding:14px 0 15px}
.about .contact-cell small{flex:none;color:#878091;font-size:10px;white-space:nowrap}
.about .contact-value{flex:1;min-width:0;font-size:var(--profile-body-size,14px);font-weight:400;color:#aaa4b4;margin:0;line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.contact-value>a{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}
.about .wechat-value>span{color:#aaa4b4;font-weight:400}
#wechat-copy{display:grid;place-items:center;padding:4px;background:transparent;color:#ad98c3;border-radius:4px}
#wechat-copy:hover{color:#ece1f6;background:#b099ff12}
.contact-feedback{position:absolute;left:0;bottom:0;font-size:10px;color:var(--purple)}
.gallery-bottom .view-toggle,.about .footer .view-toggle{width:max-content;display:flex;align-items:center;justify-content:flex-start;gap:12.5px;color:var(--purple);font-size:12px;letter-spacing:.5px;white-space:nowrap;padding:0}
.gallery-bottom .view-toggle span,.about .footer .view-toggle span{margin-left:0}
@media(min-width:701px){
 .about{height:auto;min-height:calc(100svh - 94px);padding-top:20px}
 .about .about-top{flex:1;min-height:0}
 .profile-poster{width:min(100%,calc((100svh - 300px)*1.4));min-width:0}
 .about .contact-grid{margin-top:10px}
 .about .footer{min-height:58px}
}
@media(max-width:1100px) and (min-width:701px){.about .about-top{grid-template-columns:.75fr 1.25fr;gap:12px}.about .about-intro h2{font-size:30px;letter-spacing:-1px;margin:24px 0}.about #about-copy{gap:10px}.about #about-copy p{font-size:10px}.about-intro .eyebrow{font-size:7px!important;letter-spacing:1px!important}.about .contact-grid{gap:22px}}
@media(max-width:700px){
 .about{padding:42px 22px 0;height:auto;min-height:0}
 .about .about-top{display:flex;flex-direction:column;gap:18px;align-items:stretch}
 .about .about-intro h2{font-size:30px;line-height:1.5;letter-spacing:-1px;margin:22px 0}
 .about #about-copy{gap:8px}.about #about-copy p{font-size:12px;line-height:1.85;white-space:normal}
 .profile-poster{width:calc(100% + 16px);max-width:none;margin-left:-8px;margin-top:4px}
 .profile-card small,.interests-card small{font-size:1.05cqw}.profile-card dl,.interests-card li{font-size:1.8cqw}
 .about .contact-grid{grid-template-columns:1fr;gap:0;margin-top:28px}
 .about .contact-cell{border-bottom:1px solid var(--line);padding:16px 0 18px}
 .about .contact-value{font-size:14px;margin-top:0}
 .gallery-bottom .view-toggle,.about .footer .view-toggle{gap:18.5px;font-size:10px}
}
