/* Smaller screens use the document scroll, with no nested chapter scrollers. */
.about-gallery-viewport{display:none}
.thesis-stele{height:auto;aspect-ratio:1086/1448;width:min(100%,510px)}
.contact-collage{right:4%;top:-7%;opacity:.96;mask-image:none}
@media(min-width:1101px) and (min-height:601px){
 .chapters{left:102px}
 .chapters button span{max-width:none;width:92px;right:calc(100% + 8px);padding:8px;overflow-wrap:normal;font-size:11px}
 .copy-stage{left:max(176px,10%)}
 .copy-stage:has(.capabilities-chapter.active){left:max(176px,10%);width:calc(96% - max(176px,10%))}
}
@media(min-width:1101px) and (max-width:1250px) and (min-height:601px){
 .about-gallery.hanging-gallery{left:calc(50% - 55px);--gallery-size:.74}
}
@media(min-width:1101px) and (min-height:601px) and (max-height:760px){
 :is(#title-capabilities,#title-life,#title-contact){position:relative;top:14px}
}
html.compact #journey{display:none}
html.compact #experience{position:relative;inset:auto;overflow:clip;min-height:100svh;padding:0 0 calc(92px + env(safe-area-inset-bottom))}
html.compact .scene{position:fixed;inset:0;z-index:-2}
html.compact #world{height:100%}
html.compact .landscape,html.compact .forest-canvas{mask-image:none}
html.compact .shade{background:linear-gradient(90deg,#07100bd9,#07100b80 60%,#07100b48),linear-gradient(0deg,#07100b66,transparent 50%)}
html.compact header{position:fixed;top:0;left:0;right:0;padding:16px 6%;height:82px;background:linear-gradient(#07100bd9,transparent);z-index:12}
html.compact .brand .brand-symbol{width:29px;height:39px}
html.compact .contact-links{gap:8px}
html.compact .contact-links :is(a,button){font-size:11px;min-height:44px;padding:8px 12px}
html.compact #experience .copy-stage{position:relative;inset:auto;left:auto;top:auto;bottom:auto;width:100%;height:auto;translate:none;transform:none;transition:none}
html.compact #experience .chapter{position:relative;inset:auto;left:auto;top:auto;width:min(86%,850px);height:auto;min-height:100svh;margin:0 auto;padding:var(--guide-header-clearance,108px) 0 90px;opacity:1;visibility:visible;transform:none;overflow:visible;max-height:none;max-width:none;transition:none;pointer-events:auto}
html.compact #experience .chapter[data-index="0"]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:clamp(150px,23svh,250px);gap:0}
html.compact #title-home{font-size:clamp(39px,7.6vw,72px);line-height:1.12;margin:0 0 26px;letter-spacing:-.025em;padding:0}
html.compact #title-home .name-en{white-space:normal}
html.compact #title-home .name-line{gap:.35em;margin-top:12px}
html.compact #title-home .name-zh{font-size:.78em}
html.compact #title-home em{font-size:.94em}
html.compact .chapter[data-index="0"] .eyebrow{font-size:10px;letter-spacing:.12em;line-height:1.8;margin:0 0 24px;max-width:100%}
html.compact .chapter h2,html.compact .chapter[data-index="1"] h2{font-size:clamp(42px,7vw,64px);line-height:1.06;margin:0 0 32px;letter-spacing:-.035em}
html.compact .chapter .intro,html.compact .chapter[data-index="0"] .intro{font-size:15px;line-height:1.85;letter-spacing:.01em;max-width:440px;margin:0}
html.compact .about-grid{grid-template-columns:112px minmax(0,1fr);gap:28px}
html.compact .about-portrait{width:100%;max-width:112px}
html.compact .about-portrait .portrait-frame img{width:100%;height:auto;object-fit:contain}
html.compact .experience-row{grid-template-columns:88px minmax(0,1fr);gap:14px;padding-bottom:24px}
html.compact .about-profile h3{font-size:16px;line-height:1.6}
html.compact .experience-row p,html.compact .experience-year,html.compact .about-interests p{font-size:14px;line-height:1.8}
html.compact .about-interests{gap:24px;padding-top:20px}
html.compact .about-interests h3{font-size:20px}
html.compact .about-gallery-viewport{display:block;position:relative;width:min(100%,660px);aspect-ratio:790/790;margin:34px auto 0;overflow:hidden}
html.compact .about-gallery.hanging-gallery{display:block;position:absolute;left:calc(-100% * 790 / 790);top:0;width:calc(100% * 1672 / 790);height:auto;aspect-ratio:1672/941;transform:none;opacity:1;--gallery-size:1;animation:none;rotate:none;transform-origin:50% 0}
html.compact #experience .chapter.capabilities-chapter{display:block}
html.compact .capabilities-copy{width:100%;zoom:1;padding:0;transform:none}
html.compact .capability-group{padding:24px 0;border-color:#d7d6bd30}
html.compact .capability-group h3{font-size:26px;margin-bottom:12px}
html.compact .capability-group p{font-size:15px;line-height:1.95;overflow-wrap:anywhere}
html.compact .capability-group p+p{margin-top:13px}
html.compact .thesis-stele{width:min(100%,460px);height:auto;aspect-ratio:1086/1448;max-width:none;margin:38px auto 0;align-self:auto}
html.compact .thesis-engraved .thesis-inscription{inset:0;width:100%;height:100%}
html.compact .moments-columns{grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
html.compact .greenhouse-hover{width:100%;aspect-ratio:1.22}
html.compact .greenhouse-arrow{width:40px;height:44px}
html.compact .greenhouse-caption{font-size:clamp(17px,2.2vw,21px)}
html.compact .chapter[data-index="7"]>.intro,html.compact .chapter[data-index="7"]>.contact-details{max-width:100%;width:100%;position:relative;z-index:1}
html.compact .contact-details{gap:26px;margin-top:34px}
html.compact .contact-detail-label{font-size:13px}
html.compact .contact-detail-value{font-size:19px;line-height:1.45}
html.compact .contact-collage{position:relative;inset:auto;right:auto;width:100%;height:auto;aspect-ratio:1;object-fit:contain;--contact-collage-opacity:.96;margin:16px auto 0;display:block;max-width:580px}
html.compact #chapters{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;z-index:10;padding:8px 5% calc(8px + env(safe-area-inset-bottom));border-top:1px solid #bca37766;background:linear-gradient(180deg,#2b211cf4,#17120ffa);backdrop-filter:blur(18px);box-shadow:0 -12px 30px #05060785,inset 0 1px #ffffff0d}
html.compact #chapters::before{content:'';display:block;position:absolute;inset:0;background:url('../../assets/generated/nav-ancient-vines-v1.png') center top/100% auto no-repeat;opacity:.82;pointer-events:none;z-index:0}
html.compact #chapters::after{display:none}
html.compact #chapters button{display:flex;justify-content:center;width:100%;height:44px;min-width:0;min-height:44px;font-size:13px;border-radius:10px;padding:0;border:0;background:transparent;box-shadow:none;color:#c7b9a4;z-index:1}
html.compact #chapters button[aria-current]{color:#f4dfc2;background:linear-gradient(135deg,#cab08240,#72583b26);border:1px solid #e0c7948c;box-shadow:var(--glass-shadow)}
html.compact #chapters button[aria-current]::after{content:'';position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;background:#d9b67c;border-radius:50%}
html.compact #chapters button span{display:none;max-width:none;width:auto;white-space:nowrap;overflow-wrap:normal;position:absolute;top:-35px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);font-size:11px;line-height:1.3;padding:7px 12px;background:#201813ee;border:1px solid #d4b17d77;border-radius:15px;color:#f4dfc2;opacity:1;pointer-events:none}
html.compact #chapters button[aria-current] span{display:block}
html.compact #chapters button:first-child span{left:0;transform:none}
html.compact #chapters button:last-child span{left:auto;right:0;transform:none}
html.compact footer{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));height:2px;padding:0;border:0;z-index:11;gap:0}
html.compact footer>p,html.compact footer>span{display:none}
html.compact footer .progress{width:100%;height:2px;margin:0;background:transparent}
html.compact .contact-status{position:fixed;top:auto;bottom:115px;left:5%;right:5%;max-width:90%;z-index:20;overflow-wrap:anywhere}
@media(max-width:600px){
 html.compact #experience .chapter{width:86%;padding-top:var(--guide-header-clearance,105px);padding-bottom:85px}
 html.compact #title-home{font-size:clamp(36px,10vw,57px)}
 html.compact .chapter h2,html.compact .chapter[data-index="1"] h2{font-size:clamp(37px,10vw,53px)}
 html.compact .about-grid{grid-template-columns:76px minmax(0,1fr);gap:20px}
 html.compact .experience-row{grid-template-columns:1fr;gap:4px;padding-bottom:22px}
 html.compact .about-profile h3{font-size:14px}
 html.compact .experience-row p,html.compact .experience-year,html.compact .about-interests p{font-size:13px;line-height:1.7}
 html.compact .experience-year{color:#cbbd91}
 html.compact .about-interests{gap:20px}
 html.compact .about-gallery-viewport{margin-top:28px;aspect-ratio:790/800}
 html.compact .capability-group h3{font-size:23px}
 html.compact .capability-group p{font-size:14px;line-height:1.9}
 html.compact .moments-columns{grid-template-columns:1fr;gap:36px;max-width:430px;margin:0 auto}
 html.compact .contact-detail-value{font-size:17px}
 html.compact .contact-details a{gap:15px}
 html.compact .contact-details svg{width:44px;height:44px;padding:12px}
 html.compact .contact-collage{width:100%;max-width:none}
}
@media(min-width:800px) and (max-width:1100px){
 html.compact .chapter[data-index="7"]{display:grid;grid-template-columns:1fr 1.1fr;column-gap:24px;align-content:center}
 html.compact .chapter[data-index="7"] h2{grid-column:1/-1}
 html.compact .chapter[data-index="7"]>.intro{grid-column:1}
 html.compact .contact-collage{grid-column:2;grid-row:2/4;margin:0;align-self:center}
}
@media(max-width:1100px){
 .landscape,.forest-film,.contact-landscape{object-position:70% center}
}
@media(max-width:600px){
 html.compact .chapter[data-index="0"] .eyebrow{color:#eadbb8;text-shadow:0 1px 3px #030604,0 2px 12px #030604}
 html.compact #title-home{color:#f7f2e6;text-shadow:0 2px 4px #030604,0 3px 14px #030604e6}
 html.compact #title-home em{color:#e8e2cd}
 html.compact .chapter[data-index="0"] .intro{color:#f4efe2;letter-spacing:0;text-shadow:0 1px 3px #030604,0 2px 10px #030604,0 0 18px #030604cc}
}
@media(max-width:600px) and (max-height:700px){
 html.compact #experience .chapter[data-index="0"]{padding-top:max(130px,var(--guide-header-clearance,0px))}
 html.compact .chapter[data-index="0"] .eyebrow{margin-bottom:16px}
 html.compact #title-home{font-size:clamp(35px,9vw,48px);margin-bottom:17px}
 html.compact .chapter[data-index="0"] .intro{font-size:14px;line-height:1.7}
}
@media(max-width:340px) and (max-height:600px){
 html.compact #experience .chapter[data-index="0"]{padding-top:max(116px,var(--guide-header-clearance,0px))}
 html.compact .chapter[data-index="0"] .intro{white-space:normal}
}