*{box-sizing:border-box}html{background:#060606;color:#f0ede5;font-family:"Avenir Next","PingFang SC",sans-serif}body{margin:0}button,a{color:inherit;font:inherit}button{cursor:pointer}a{text-decoration:none}header{position:fixed;inset:0 0 auto;z-index:30;height:72px;background:#060606ed;border-bottom:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;padding:0 4vw}header a{font-size:24px;font-weight:700}header span{font-size:11px;color:#999}button{background:#101010;border:1px solid #ffffff30;padding:10px 16px}#journey{height:11000px}.stage{height:100dvh;position:sticky;top:0;overflow:hidden}.heading{position:absolute;z-index:10;top:110px;left:6vw;pointer-events:none;text-shadow:0 3px 22px #000}small{font:10px monospace;letter-spacing:.15em;color:#ae534b}h1{font-size:clamp(40px,6vw,86px);margin:8px 0;font-weight:500;letter-spacing:-.05em}#scene{position:absolute;inset:72px 0 0;perspective:2000px;overflow:hidden}#world{position:absolute;inset:0;transform-style:preserve-3d}.card{position:absolute;left:50%;top:50%;padding:0;border:0;background:none;transform-style:preserve-3d;will-change:auto;pointer-events:none}.card.active{pointer-events:auto}.face{display:block;background:#060606;border:1px solid #ffffff28;border-radius:5px;overflow:hidden;box-shadow:0 24px 55px #0009;transition:filter .18s}.face img{display:block;width:100%;height:auto;object-fit:contain}.card:hover .face,.card:focus-visible .face{filter:brightness(1.2)}.caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000e);padding:30px 12px 12px;font-size:12px;text-align:left;opacity:0;transition:opacity .18s}.card:hover .caption,.card:focus-visible .caption{opacity:1}.card,.card:hover,.card:focus,.card:focus-visible,.card:active{outline:none;outline-offset:0}footer{position:absolute;inset:auto 4vw 24px;display:flex;justify-content:space-between;font-size:11px;color:#aaa;pointer-events:none;z-index:10}.end{min-height:70vh;display:grid;place-content:center;text-align:center;gap:25px}.end p{font-size:clamp(24px,4vw,55px)}dialog{width:min(980px,94vw);max-height:90dvh;background:#101010;color:#f0ede5;border:1px solid #444;padding:25px}dialog::backdrop{background:#000d;backdrop-filter:blur(12px)}#close{position:sticky;top:0;display:block;margin-left:auto;z-index:2}dialog h2{font-weight:400}dialog img,dialog video{max-width:100%;display:block}dialog .detail-cover{max-height:50vh;margin:auto}dialog p{color:#aaa;line-height:1.9}dialog .stills{display:grid;grid-template-columns:1fr 1fr;gap:14px}.directory{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.directory button{padding:0;border:0;text-align:left;background:none}.directory img{width:100%;height:140px;object-fit:contain}.directory span{display:block;font-size:12px;margin-top:8px}@media(max-width:650px){header span{display:none}.heading{top:95px}h1{font-size:46px}.directory{grid-template-columns:1fr 1fr}footer{font-size:9px}dialog .stills{grid-template-columns:1fr}}
#scene,#world{pointer-events:none}.card.active,.card.active .face{pointer-events:auto}
/* The host owns scrolling; the portfolio stays inside one sticky viewport. */
html,body{height:100%;overflow:hidden}#journey{height:100%!important}.stage{height:100%;position:relative}#scene{inset:0}.heading{top:38px}.heading small{display:none}footer{align-items:center;pointer-events:none}footer button{pointer-events:auto;margin-left:auto;margin-right:20px}.digital-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75;mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}
/* Shared site base, including the iframe's full viewport. */
:root{--site-background:#060606}
html,body,#journey,.stage{background:var(--site-background)}
.card.cover-ultrawide .face{aspect-ratio:21/9}
.card.cover-ultrawide .face img{width:100%;height:100%;object-fit:cover;object-position:center}
.directory img[src$="qilele-1-official-cover.jpg"],dialog .detail-cover[src$="qilele-1-official-cover.jpg"]{width:100%;height:auto;max-height:none;aspect-ratio:21/9;object-fit:cover;object-position:center}
/* Studio study 02: characters sit behind opaque, interactive artwork. */
.character-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#scene{z-index:1}
/* Keep scrolling on compositor transforms; hover brightness remains on the face. */
.card{filter:none}.face{box-shadow:0 12px 28px #0007}
#detail-body{transform-origin:center top}
/* Keep detail scrolling without a visible scrollbar track. */
#detail{scrollbar-width:none;-ms-overflow-style:none}
#detail::-webkit-scrollbar{display:none;width:0;height:0}
/* Wide editorial spread: cover on the left, story on the right. */
#detail{width:94vw;max-width:1720px;max-height:94dvh;padding:0;background:#0b0b0b;border:1px solid #38332f;overflow-x:hidden;overscroll-behavior:contain}
#close{top:12px;margin:12px auto 0 24px;z-index:8;background:#0b0b0bf5}
#detail-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);column-gap:5vw;row-gap:28px;padding:28px clamp(22px,5vw,90px) 50px}
.detail-rail{grid-column:1/-1;border-bottom:1px solid #3a302d;padding-bottom:12px;font:10px monospace;letter-spacing:.18em;color:#9b7267}
.detail-heading{grid-column:2;grid-row:2;align-self:start}
.detail-heading small{font:10px monospace;color:#c76b59;letter-spacing:.12em}
#detail .detail-heading h2{font-size:clamp(27px,2.7vw,46px);line-height:1.3;margin:14px 0 0;font-weight:400;letter-spacing:-.025em}
.detail-hero{grid-column:1;grid-row:2/4;align-self:start;background:#060606;min-width:0}
#detail .detail-cover{display:block;width:auto;height:auto;max-width:100%;max-height:76vh;object-fit:contain;margin:auto}
#detail .detail-cover[src$="qilele-1-official-cover.jpg"]{width:100%;max-height:none;aspect-ratio:21/9;object-fit:cover}
#detail .detail-intro{grid-column:2;grid-row:3;align-self:start;font-size:14px;line-height:2;margin:0;color:#aaa}
#detail .stills,#detail-body>video,#detail .detail-link{grid-column:1/-1;min-width:0}
#detail .stills{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#detail .stills:empty{display:none}
#detail-body>video{width:100%;max-height:80vh;background:#060606}
#detail .detail-link a{display:inline-block;border:1px solid #633a32;padding:14px 20px}
@media(max-width:750px){#detail-body{display:flex;flex-direction:column;padding:24px 18px 32px;gap:22px}#close{margin-left:14px;margin-right:auto}.detail-heading{order:0}.detail-hero{width:100%}#detail .detail-heading h2{font-size:29px}#detail .stills{grid-template-columns:1fr;gap:12px}}
/* Media boxes follow their own intrinsic dimensions rather than grid tracks. */
#detail .detail-hero{background:transparent;justify-self:center;width:fit-content;max-width:100%;height:auto}
#detail .detail-cover{width:auto;height:auto;max-width:100%;max-height:76vh;margin:0;aspect-ratio:auto}
#detail .detail-cover[src$="qilele-1-official-cover.jpg"]{width:100%;height:auto;max-height:none;aspect-ratio:21/9;object-fit:cover}
#detail .stills{align-items:start;justify-items:center}
#detail .stills img{width:auto;height:auto;max-width:100%;max-height:76vh;object-fit:contain;align-self:start;justify-self:center;background:transparent}
#detail-body>video{display:block;width:auto;height:auto;max-width:100%;max-height:80vh;justify-self:center;align-self:start;object-fit:contain;background:transparent;padding:0;border:0}
@media(max-width:750px){#detail .detail-hero{align-self:center}#detail-body>video{align-self:center}#detail .stills img{max-height:80vh}}
#detail .detail-intro{white-space:pre-line}
#detail .detail-copyright{grid-column:2;font-size:11px;color:#777;margin:0;line-height:1.7}
#detail .detail-copyright:empty{display:none}
#detail .detail-video{grid-column:1/-1;margin:0;min-width:0;text-align:center}
#detail .detail-video figcaption{font-size:12px;color:#aaa;margin-bottom:14px;text-align:left}
#detail .detail-video video{display:block;width:auto;height:auto;max-width:100%;max-height:80vh;object-fit:contain;background:transparent;margin:0 auto;border:0;padding:0}
#detail video:focus{outline:none}
#detail video::-webkit-media-controls-overflow-button,
#detail video::-webkit-media-controls-picture-in-picture-button{display:none!important}
/* Match the detail controls to the site instead of the browser focus ring. */
#detail #close, #detail #close:focus, #detail #close:focus-visible, #detail #close:active{outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
#detail #close:focus-visible{background:#24211f;border-color:#aaa49b}
#journey{overflow-anchor:none}
/* Match the main site's section-label typography in all three languages. */
@font-face{font-family:"6F Condensed";src:local("DINCondensed-Bold"),local("DIN Condensed Bold");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21FF}
.heading h1{font-family:"6F Condensed","DIN Condensed","Avenir Next Condensed","Arial Narrow","Avenir Next","PingFang SC","Hiragino Sans GB","Hiragino Kaku Gothic ProN","Microsoft YaHei",sans-serif;font-size:clamp(38px,6.3vw,100px);font-weight:700;line-height:1.08;letter-spacing:-.015em;color:#f0ede5;text-wrap:balance;overflow-wrap:anywhere}
@media(max-width:800px){.heading h1{font-size:clamp(34px,7vw,56px)}}