/* Mantuo / brand opening and a six-project moving portfolio. */
.studio-opening{background:var(--paper);overflow:hidden;color:var(--dark);border-bottom:1px solid var(--line)}
.studio-opening>.container{min-height:calc(100svh - 94px);display:flex;flex-direction:column;padding-top:36px;position:relative}
.opening-top{display:flex;justify-content:space-between;gap:25px;font-size:14px;letter-spacing:.055em;color:var(--purple)}
.opening-top>span:last-child{letter-spacing:0;color:var(--muted)}
.studio-opening h1{font-size:clamp(58px,7.15vw,110px);line-height:1.04;letter-spacing:-.065em;padding:clamp(52px,8vh,95px) 0 30px;position:relative;z-index:1;font-weight:500}
.studio-opening h1>span,.studio-opening h1>em{display:block}
.studio-opening h1>em{font-size:1.09em;line-height:1.1;letter-spacing:-.06em;color:var(--purple)}
.opening-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 0 30px;position:relative;z-index:1}
.opening-bottom p{font-size:20px;line-height:1.5;color:var(--dark)}
.opening-scroll{display:flex;align-items:center;gap:45px;font-size:16px;color:var(--purple);white-space:nowrap}
.opening-scroll>span{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b9abc8;border-radius:50%;font-size:23px;transition:background .25s,color .25s,transform .3s}
.opening-scroll:hover>span{background:var(--purple);color:var(--paper);transform:translateY(4px)}
.studio-opening h1>*,.opening-top,.opening-ambition,.opening-bottom,.opening-destinations{animation:brand-arrive .9s cubic-bezier(.16,.8,.2,1) both}
.studio-opening h1>em{animation-delay:.13s}.opening-ambition{animation-delay:.2s}.opening-bottom{animation-delay:.25s}.opening-destinations{animation-delay:.3s}
@keyframes brand-arrive{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.studio-projects{padding:90px 0 60px;background:var(--paper)}
.studio-project-heading{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:65px}
.studio-project-heading>.section-label{grid-column:1/-1;margin:0}
.studio-project-heading h2{font-size:clamp(42px,4.8vw,70px);line-height:1.02;letter-spacing:-.055em}
.studio-project-heading>a{display:flex;gap:30px;font-size:16px;align-items:center;color:var(--purple);padding-bottom:5px}
.studio-project-heading>a>span{font-size:28px}
.studio-project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:80px 36px;align-items:start}
.studio-project{grid-column:span 7;min-width:0}
.studio-project:nth-child(4n+2),.studio-project:nth-child(4n+3){grid-column:span 5}
.studio-project:nth-child(2n){margin-top:100px}
.studio-panel-top{display:flex;gap:25px;justify-content:space-between;margin-bottom:14px;font-size:13px;line-height:1.4;color:#6f6478}
.studio-panel-top>span:first-child{font:13px/1.4 ui-monospace,monospace}
.studio-project-visual{display:block;position:relative;width:100%;padding:0;border-radius:10px;overflow:hidden;aspect-ratio:1.42;background:var(--scene-bg,#151b21);isolation:isolate;cursor:pointer}
.studio-driverlab .studio-project-visual{aspect-ratio:1.6}
.studio-project-visual>video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.studio-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.studio-scene canvas{width:100%;height:100%;display:block}
.scene-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;color:inherit;letter-spacing:-.05em;opacity:.55}
.scene-ready .scene-fallback{display:none}
.project-visual-label{position:absolute;left:20px;bottom:20px;font-size:12px;line-height:1.4;color:var(--scene-ink,#f2f3f6);opacity:.8;z-index:2;pointer-events:none}
.project-enter{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:#f7f4efed;color:#2d233b;display:flex;align-items:center;justify-content:center;font-size:25px;transition:width .3s,background .3s;z-index:3;white-space:nowrap;overflow:hidden}
.project-enter>span{max-width:0;opacity:0;font-size:13px;transition:max-width .3s,opacity .3s;margin-right:0}
.studio-project-visual:hover .project-enter,.studio-project-visual:focus-visible .project-enter{width:160px;background:var(--paper);gap:12px}
.studio-project-visual:hover .project-enter>span,.studio-project-visual:focus-visible .project-enter>span{max-width:125px;opacity:1}
.studio-project-visual:hover>video{transform:scale(1.035)}
.studio-panel-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:22px}
.studio-panel-caption h3{font-size:clamp(27px,2.8vw,41px);letter-spacing:-.04em;margin-bottom:9px}
.studio-panel-caption p{font-size:16px;line-height:1.55;color:#6c6271}
.project-author{display:flex;gap:18px;white-space:nowrap;color:var(--purple);font-size:14px}
.studio-gallery-end{display:flex;justify-content:space-between;gap:25px;align-items:baseline;border-top:1px solid var(--line);padding-top:28px;margin-top:70px}
.studio-gallery-end>p{font-size:13px;line-height:1.6;max-width:470px}
.studio-geolens{--scene-bg:#082c27;--scene-ink:#d4e7bd}.studio-physics{--scene-bg:#dbe0d6;--scene-ink:#47574e}.studio-lucy{--scene-bg:#eecdbb;--scene-ink:#78462f}.studio-mquant{--scene-bg:#0c1c27;--scene-ink:#91c5b9}.studio-finditem{--scene-bg:#b4c8d3;--scene-ink:#27465a}
.motion-enabled .studio-project .studio-project-visual{clip-path:inset(0 0 8% 0 round 20px);transform:translateY(35px);opacity:0;transition:clip-path 1.1s cubic-bezier(.15,.75,.15,1),transform 1.1s cubic-bezier(.15,.75,.15,1),opacity .8s}
.motion-enabled .studio-project.is-revealed .studio-project-visual{clip-path:inset(0 round 10px);transform:translateY(0);opacity:1}
.motion-enabled .studio-project .studio-panel-caption{opacity:0;transform:translateY(20px);transition:opacity .6s .2s,transform .8s .2s}
.motion-enabled .studio-project.is-revealed .studio-panel-caption{opacity:1;transform:none}
.driver-cinema{max-width:none;max-height:none;inset:0;width:100%;height:100dvh;border:0;padding:24px 4vw;background:#14121a;color:var(--paper);overflow:auto}
.driver-cinema[open]{display:flex;flex-direction:column;animation:cinema-enter .65s cubic-bezier(.18,.7,.2,1) both}
.driver-cinema::backdrop{background:#14121a}
.cinema-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;flex:none;gap:25px}
.cinema-top>div{display:flex;align-items:baseline;gap:28px}.cinema-top span{font-size:13px;color:#c6bed2}.cinema-top h2{font-size:28px}
.cinema-top>button{font-size:34px;width:48px;height:48px;line-height:1;border:1px solid #ffffff44;border-radius:50%;flex:none}
.driver-cinema>video{width:100%;min-height:0;flex:1;object-fit:contain;border-radius:8px;background:#08090b}
.cinema-bottom{display:flex;justify-content:flex-end;align-items:baseline;gap:30px;padding-top:20px;font-size:14px;flex:none}.cinema-bottom>p{margin-right:auto;color:#b9b2c2;font-size:13px}.cinema-bottom>a{white-space:nowrap}
@keyframes cinema-enter{from{clip-path:inset(15% 13% round 24px);opacity:.5;transform:scale(.95)}to{clip-path:inset(0 round 0);opacity:1;transform:scale(1)}}
.cinema-open{overflow:hidden}
/* Pointer feedback changes the actual render, without a cursor-following decoration. */
.studio-scene-error{display:grid;place-items:center;font-size:24px}
.motion-paused .studio-project .studio-project-visual,.motion-paused .studio-project .studio-panel-caption{opacity:1;transform:none;clip-path:none}
@media(min-width:1600px){.studio-opening>.container{min-height:820px;max-height:1000px}.studio-project-grid{gap:100px 50px}}
@media(max-width:1000px){.studio-project-grid{gap:65px 25px}.studio-project:nth-child(2n){margin-top:75px}.studio-panel-caption{display:block}.project-author{margin-top:15px}.studio-opening h1{font-size:7.3vw}}
@media(max-width:760px){.studio-opening>.container{min-height:calc(100svh - 77px);padding-top:28px}.opening-top{font-size:12px;letter-spacing:.025em}.studio-opening h1{font-size:clamp(47px,9.7vw,70px);letter-spacing:-.06em;padding-top:clamp(60px,12vh,110px);padding-bottom:26px;line-height:1.04}.studio-opening h1>em{font-size:1.14em;line-height:1.02;margin-top:12px;max-width:650px}.opening-bottom{align-items:flex-start;flex-direction:column;gap:24px;padding:15px 0 36px}.opening-bottom p{font-size:17px;max-width:310px}.opening-scroll{font-size:14px;gap:26px}.opening-scroll>span{width:39px;height:39px;font-size:21px}.studio-projects{padding:55px 0 40px}.studio-project-heading{grid-template-columns:1fr;margin-bottom:38px;gap:22px}.studio-project-heading h2{font-size:43px}.studio-project-heading>a{font-size:15px;gap:25px}.studio-project-grid{display:block}.studio-project{margin:0 0 46px!important}.studio-panel-top{font-size:11px;gap:15px;margin-bottom:10px}.studio-project-visual,.studio-driverlab .studio-project-visual{aspect-ratio:1.24;border-radius:8px}.studio-driverlab .studio-project-visual{aspect-ratio:1.6}.studio-panel-caption{display:flex;gap:15px;padding-top:18px}.studio-panel-caption h3{font-size:29px;margin-bottom:7px}.studio-panel-caption p{font-size:14px;max-width:260px}.project-author{font-size:12px;gap:8px;margin-top:0}.project-visual-label{font-size:10px;left:15px;bottom:15px}.project-enter{top:14px;right:14px;width:36px;height:36px;font-size:22px}.studio-gallery-end{display:block;margin-top:30px;padding-top:22px}.studio-gallery-end>p{font-size:12px;margin-bottom:18px}.studio-gallery-end>a{font-size:15px}.driver-cinema{padding:17px}.cinema-top>div{display:block}.cinema-top span{font-size:11px}.cinema-top h2{font-size:25px;margin-top:5px}.cinema-top>button{width:40px;height:40px;font-size:30px}.cinema-bottom{flex-wrap:wrap;gap:20px;justify-content:flex-start;font-size:13px;padding-top:15px}.cinema-bottom>p{flex-basis:100%;font-size:12px}.driver-cinema>video{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.studio-opening *,.studio-project *,.driver-cinema[open]{animation:none!important;transition:none!important}.motion-enabled .studio-project .studio-project-visual,.motion-enabled .studio-project .studio-panel-caption{opacity:1;transform:none;clip-path:none}}
html[lang=zh-CN] .studio-opening h1{font-size:clamp(50px,6.1vw,94px);line-height:1.15;letter-spacing:-.055em}
@media(max-width:760px){html[lang=zh-CN] .studio-opening h1{font-size:clamp(40px,9.5vw,65px);line-height:1.18}html[lang=zh-CN] .studio-opening h1>em{max-width:340px;line-height:1.18}}
.scene-overlay{position:absolute;inset:0;pointer-events:none;padding:7.5% 8%;color:var(--scene-ink);display:flex;align-items:flex-start;flex-direction:column;z-index:1}
.scene-overlay>span{font:10px/1.5 ui-monospace,monospace;letter-spacing:.08em;opacity:.75}.scene-overlay>strong{font-size:clamp(23px,3.25vw,46px);font-weight:400;letter-spacing:-.05em;line-height:1.02;margin-top:20px}.scene-overlay>small{font:10px/1.5 ui-monospace,monospace;letter-spacing:.03em;margin-top:auto;margin-bottom:30px;max-width:240px}
.studio-geolens .scene-overlay>strong{font-family:Georgia,serif}.studio-geolens .scene-overlay>small{position:absolute;right:8%;bottom:12%;margin:0;font-size:9px}.studio-finditem .scene-overlay>strong{font-size:clamp(24px,2.8vw,38px)}
@media(max-width:760px){.scene-overlay>strong{font-size:29px;margin-top:14px}.scene-overlay>span{font-size:9px}.scene-overlay>small{font-size:9px;margin-bottom:25px;max-width:190px}}
.site-header{background:var(--paper)}
.studio-opening h1{padding-top:clamp(35px,6vh,70px)}
@media(max-width:760px){.studio-opening h1{padding-top:clamp(54px,11vh,95px)}}
/* Let the model carry the image; keep the project name and question outside it. */
.scene-overlay>strong{display:none}
.scene-overlay>small{margin-bottom:25px}
@media(max-width:760px){.opening-zh-line{display:block}html[lang=zh-CN] .studio-opening h1>em{font-size:1em;line-height:1.18}}

/* Student value first; the navigation carries the Mantuo identity. */
.studio-opening>.container{padding-top:30px;min-height:calc(100svh - 94px)}
.opening-top{font-size:14px;letter-spacing:0}
.studio-opening h1{padding-top:clamp(32px,5vh,62px);padding-bottom:20px}
.opening-ambition{font-size:clamp(21px,2.2vw,30px);line-height:1.4;color:var(--dark);letter-spacing:-.025em}
.opening-bottom{padding:25px 0 28px;gap:35px}
.opening-benefits{display:flex;gap:38px;align-items:baseline;flex-wrap:wrap}
.opening-benefits p{font-size:17px;line-height:1.55;color:var(--dark);padding-left:15px;border-left:2px solid #b5a4c8}
.opening-scroll{font-size:15px;gap:25px}
.opening-destinations{margin-top:auto;border-top:1px solid var(--line);padding:18px 0 21px}
.opening-destinations>p{font-size:13px;color:var(--muted);line-height:1.4}
.university-ambitions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px;align-items:center;margin-top:17px}
.ambition-logo{height:54px;display:flex;align-items:center;justify-content:center;min-width:0}
.ambition-logo>img{display:block;object-fit:contain;width:auto;height:auto;max-width:100%;max-height:46px}
.ambition-yale>img{max-height:39px}.ambition-mit>img{max-height:43px}.ambition-upenn>img{max-height:51px}
@media(min-width:1600px){.studio-opening>.container{min-height:740px;max-height:none}}
@media(max-width:1000px){.opening-benefits{gap:11px;display:grid}.opening-bottom{align-items:center}.university-ambitions{gap:25px}.ambition-logo{height:48px}.ambition-logo>img{max-height:40px}}
@media(max-width:760px){.studio-opening>.container{padding-top:26px;min-height:calc(100svh - 77px)}.opening-top{font-size:12px}.studio-opening h1{padding-top:clamp(35px,6vh,60px);padding-bottom:20px}.opening-ambition{font-size:21px;max-width:330px}.opening-bottom{padding:22px 0 25px;align-items:flex-start;gap:24px}.opening-benefits{gap:9px}.opening-benefits p{font-size:15px;padding-left:12px}.opening-scroll{font-size:14px;gap:25px}.opening-destinations{padding-top:17px;padding-bottom:22px}.opening-destinations>p{font-size:12px}.university-ambitions{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 24px;margin-top:16px}.ambition-logo{height:38px}.ambition-logo>img{max-height:33px}.ambition-yale>img{max-height:32px}.ambition-mit>img{max-height:32px}.ambition-upenn>img{max-height:37px}}
/* Keep the official artwork intact; frame its generous source-canvas margins. */
.ambition-mit,.ambition-upenn{overflow:hidden}
.ambition-mit>img{width:260px;max-width:none;max-height:none;flex:none}
.ambition-upenn>img{width:180px;max-width:none;max-height:none;flex:none}
@media(max-width:760px){.ambition-mit>img{width:180px;max-height:none}.ambition-upenn>img{width:110px;max-height:none}}
@media(max-width:360px){html[lang=en] .studio-opening h1{font-size:42px}.header-inner{gap:10px}.header-actions{gap:6px}.language{white-space:nowrap;flex:none}}