:root{color-scheme:dark;--ink:#f0ebdc;--gold:#cabb90;--dark:#0c1510;--muted:#d0d1c3;font-family:'Microsoft JhengHei',sans-serif;background:var(--dark);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}.skip{position:fixed;top:-100px;z-index:30;background:var(--dark);padding:12px}.skip:focus{top:10px}
#journey{height:620vh}#experience{position:fixed;inset:0;overflow:hidden;isolation:isolate}.scene{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#17221b}#world{position:absolute;width:100%;height:100%;transform-origin:65% 61%;will-change:transform}.landscape,.forest-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.forest-canvas{z-index:1}.mist,.sunbeam,.water-shimmer{z-index:2}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#050e0ab5,#050e0a5c 29%,transparent 64%),linear-gradient(0deg,#040a07db,transparent 23%,transparent 83%,#040a0770);pointer-events:none;transition:opacity .5s}
.mist{position:absolute;pointer-events:none;border-radius:50%;filter:blur(18px);background:radial-gradient(ellipse,#eaebd32b,transparent 66%);width:65%;height:24%;left:40%;top:50%;mix-blend-mode:screen;animation:mist 19s ease-in-out infinite alternate}.mist-two{left:53%;top:27%;width:40%;opacity:.5;animation-duration:27s;animation-delay:-8s}.sunbeam{position:absolute;inset:0;background:conic-gradient(from 191deg at 81% 2%,transparent 0deg,#ffe19b15 8deg,transparent 11deg,#ffebaa12 18deg,transparent 24deg);mix-blend-mode:screen;animation:light 13s ease-in-out infinite;pointer-events:none}.water-shimmer{position:absolute;right:0;bottom:2%;width:15%;height:24%;background:repeating-linear-gradient(165deg,transparent 0 12px,#e8e9cc18 13px 14px,transparent 15px 30px);mask-image:radial-gradient(ellipse,black,transparent 69%);animation:water 2.8s linear infinite;mix-blend-mode:screen;pointer-events:none}
.network-response{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity 1s}.network-response svg{width:100%;height:100%;fill:none;stroke:#c8dfad;stroke-width:1;stroke-dasharray:30 500;filter:drop-shadow(0 0 5px #a8ce95)}.respond-tree .network-response{opacity:.65}.respond-tree .network-response path{animation:branch 3s ease-out}.scene.respond-tree .sunbeam{filter:brightness(1.7)}.scene.respond-crystal .water-shimmer{filter:brightness(2)}
header{position:absolute;top:30px;left:4.3%;right:4.3%;display:flex;align-items:center;justify-content:space-between;z-index:6}.brand{display:flex;gap:13px;align-items:center}.brand-symbol{width:38px;height:46px}.brand-name{font-family:'Palatino Linotype',serif;font-size:26px;letter-spacing:-.025em;line-height:1.05}.brand-subtitle{display:block;font-family:'Microsoft JhengHei',sans-serif;font-size:8px;letter-spacing:.49em;margin-top:7px;padding-left:2px}.contact-links{display:flex;gap:30px;align-items:center;font-size:12px;letter-spacing:.04em}.contact-links button{padding:5px 0}.contact-links span{color:var(--gold);margin-left:7px}.contact-links img{width:12px;height:12px}.contact-links :is(a,button),.contact-links button{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:border-color .18s}.contact-links :is(a,button):hover,.contact-links button:hover{border-color:var(--gold)}
.copy-stage{position:absolute;left:10%;top:30%;width:min(550px,43vw);transition:opacity .4s,visibility .4s}.chapter{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .6s,visibility .4s}.chapter.active{opacity:1;transform:none;visibility:visible}.eyebrow{font-size:9px;letter-spacing:.16em;line-height:1.8;color:var(--gold);margin:0 0 23px}.chapter h1,.chapter h2{font-family:'Palatino Linotype',serif;font-size:clamp(45px,5.7vw,88px);font-weight:400;line-height:1.02;letter-spacing:-.045em;margin:0 0 24px;text-wrap:balance}.chapter h2{font-size:clamp(46px,5vw,76px)}em{font-weight:400;color:#d3d0b7}.intro,.portrait-line p{font-size:14px;line-height:2;letter-spacing:.035em;color:var(--muted)}.text-button{display:inline-flex;align-items:center;justify-content:space-between;min-width:193px;margin-top:20px;padding:13px 17px;border:1px solid #c9b77f55;border-radius:3px 17px 3px 3px;background:linear-gradient(110deg,#283a2d80,#13241d30);font-size:12px;letter-spacing:.025em;transition:background .18s,border-color .18s;gap:25px}.text-button span{font-size:18px;transition:transform .18s}.text-button:hover{border-color:#c9b77faa;background:#43513c88}.text-button:hover span{transform:translate(2px,-2px)}.text-button img{width:21px;height:21px;display:block}.portrait-line{display:flex;align-items:center;gap:20px}.portrait-line img{width:80px;height:100px;object-fit:cover;filter:none;border-radius:3px 18px 3px 3px;border:1px solid #d1c8a44d}
.chapters{position:absolute;left:4.1%;top:31%;display:flex;flex-direction:column;gap:12px;z-index:5;transition:opacity .4s,visibility .4s}.chapters button{color:#c6c8bca8;font-size:10px;width:32px;min-height:38px;padding:4px;display:flex;gap:12px;align-items:center;justify-content:center;position:relative;transition:color .18s}.chapters button::before{content:'';position:absolute;left:12px;top:17px;width:6px;height:6px;background:var(--dark);border:1px solid #d4c59755;transform:rotate(45deg);opacity:0}.chapters button[aria-current]{color:var(--gold);border:1px solid #c9b77f70;border-radius:4px;background:#14241db3}.chapters button span{position:absolute;left:40px;white-space:nowrap;opacity:0;pointer-events:none;font-size:11px;background:#101915ed;padding:8px 12px;transition:opacity .18s}.chapters button:hover span,.chapters button:focus-visible span{opacity:1}
#companions{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s}#companions[data-ready]{opacity:1}#walker,#scout{display:block;position:absolute;left:0;top:0;object-fit:contain;will-change:transform;filter:brightness(.82) saturate(.77)}#walker{clip-path:inset(0 56.5% 0 0)}#scout{clip-path:inset(0 0 0 43.5%)}.ground-shadow,.scout-shadow{position:absolute;left:0;top:0;border-radius:50%;background:#04100bdd;filter:blur(3px);transform-origin:50% 0}.plate-fallback #companions{display:none}
.hotspot{position:absolute;left:0;top:0;width:38px;height:38px;border:1px solid #eee9d960;border-radius:50%;display:grid;place-items:center;background:#13241c55;transition:background .18s,opacity .2s;z-index:3;will-change:transform}.hotspot::after{content:'';position:absolute;inset:-5px;border:1px solid #eee9d924;border-radius:50%}.hotspot span{display:grid;place-items:center}.hotspot img{width:19px;height:23px}.hotspot svg{width:21px;height:21px;fill:none;stroke:#ddd2b1;stroke-width:1}.hotspot small{position:absolute;left:48px;font-size:10px;white-space:nowrap;opacity:0;transition:opacity .18s;text-shadow:0 1px 4px black;pointer-events:none}.hotspot:hover,.hotspot:focus-visible{background:#c9b77f50}.hotspot:hover small,.hotspot:focus-visible small{opacity:1}.crystal small{left:auto;right:48px}.partner{width:32px;height:32px}.discovery{position:absolute;right:5%;bottom:20%;width:290px;padding:25px 29px;background:#102019f2;border:1px solid #c9b77f55;border-radius:3px 20px 3px 3px;z-index:8;box-shadow:0 15px 50px #0005}.discovery .eyebrow{margin-bottom:10px;font-family:'Microsoft JhengHei',sans-serif;font-size:21px;letter-spacing:0;color:var(--ink)}.discovery p:last-child{font-size:13px;line-height:1.9;margin:0}.dismiss{position:absolute;right:4px;top:2px;width:34px;height:34px;font-size:20px}
.scene-tools{position:absolute;right:4.3%;bottom:85px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;z-index:7}.scene-tools p{font-size:10px;letter-spacing:.04em;color:#d3d4c3b0;margin:0}.scene-tools button{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #c9b77f55;border-radius:3px;background:#11251bb3;font-size:11px;min-height:40px}.scene-tools button:hover{background:#344333c9}.scene-tools svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.1}.scene-focus .copy-stage,.scene-focus .chapters{opacity:0;visibility:hidden;pointer-events:none}.scene-focus .shade{opacity:.3}.scene-focus .hotspot{opacity:.6}.scene-focus .hotspot:hover{opacity:1}
footer{position:absolute;left:4.3%;right:4.3%;bottom:23px;display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.06em;color:#e4e1caaa;border-top:1px solid #e4e1ca24;padding-top:13px}footer p{margin:0 0 0 auto}#motion{font-size:10px;letter-spacing:.03em;padding:9px 0}#motion span{margin-left:10px;color:var(--gold)}.progress{height:1px;width:90px;background:#e4e1ca44}.progress i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 0}#percent{min-width:30px}
dialog{max-width:660px;width:calc(100% - 32px);max-height:82dvh;border:1px solid #bcae7466;border-radius:3px 28px 3px 3px;background:#16221c;color:var(--ink);padding:55px 48px;overscroll-behavior:contain}dialog::backdrop{background:#020b08b3;backdrop-filter:blur(7px)}dialog h2{font:400 44px 'Palatino Linotype',serif;margin:20px 0}dialog p{font-size:15px;line-height:2}dialog img{display:block;max-width:100%;max-height:350px;object-fit:contain;margin:25px auto}.dialog-close{position:absolute;right:22px;top:18px;font-size:11px;min-height:36px}.note{color:var(--gold)}.no-script{position:fixed;bottom:0;background:var(--dark);padding:12px;z-index:10}
@keyframes mist{from{transform:translateX(-7%) scale(.94)}to{transform:translateX(7%) scale(1.12)}}@keyframes light{0%,100%{opacity:.35}50%{opacity:.9}}@keyframes water{from{background-position:0 0}to{background-position:0 30px}}@keyframes branch{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}html.reduced *,html.reduced *::before{animation:none!important;transition:none!important}html.reduced #world{transform:none!important}.page-hidden *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}.discovery #discovery-text{font-size:13px;line-height:1.9;margin:0}.discovery-action{display:block;border-top:1px solid #c9b77f55;text-align:left;font-size:12px;min-height:44px;margin-top:14px;padding:12px 0 0;color:var(--gold);width:100%}.discovery-action[hidden]{display:none}.discovery-action:hover{text-decoration:underline}

/* Visible environmental motion and discoverable scene controls. */
.mist{background:radial-gradient(ellipse,#eaebd34a,transparent 68%);animation-duration:12s;filter:blur(15px)}
.mist-two{opacity:.7;animation-duration:18s}
.sunbeam{animation-duration:9s}
.water-shimmer{animation-duration:1.8s;opacity:.85}

@keyframes mist{from{transform:translateX(-13%) scale(.94);opacity:.55}to{transform:translateX(13%) scale(1.12);opacity:.95}}
/* Approved john identity; existing controls retain their styles. */
.brand .brand-symbol{width:25px;height:35px}
.brand .brand-wordmark{width:94px;height:40px;display:block}

.partner small{left:auto;right:0;top:44px}

/* Shared dark metal, illuminated from the forest's upper right. */
:root{--metal:linear-gradient(145deg,#151c19 8%,#343d32 46%,#202823 53%,#414839 100%);--metal-edge:#a79e77;--metal-shadow:inset 0 1px 1px #e9d6a14d,inset -1px 0 1px #e9d6a133,inset 0 -2px 2px #030805b3,0 4px 9px #02080580;--glass-control:linear-gradient(145deg,#99988840,#4c5145a6 38%,#252b26bf 75%);--glass-panel:linear-gradient(135deg,#4c5144dc,#202922e6);--glass-edge:#ded6b28c;--glass-shadow:inset 0 1px 1px #fff4d861,inset 0 0 0 3px #e5ddc10b,inset 0 -1px 2px #101810b3,0 4px 10px #03090466}
.brand-symbol,.brand-wordmark{filter:drop-shadow(-1px 2px 1px #000b)}
.brand .brand-symbol{width:30px;height:40px;padding:2px;border:1px solid #938c6580;border-radius:45% 45% 42% 42%;background:var(--metal);box-shadow:var(--metal-shadow)}
.text-button,.scene-tools button{background:var(--metal);border-color:#a79e776e;border-top-color:#c9bc9299;border-right-color:#c9bc9280;box-shadow:var(--metal-shadow);text-shadow:0 1px 2px #000;transition:filter .2s,box-shadow .14s,border-color .2s}
.text-button:hover,.scene-tools button:hover{background:var(--metal);filter:brightness(1.18);border-color:#d4c394bd}
.text-button:active,.scene-tools button:active{box-shadow:inset 0 2px 5px #000b,0 1px 2px #0005;filter:brightness(.95)}
.chapters button[aria-current]{background:var(--metal);box-shadow:var(--metal-shadow);border-color:#d3c18d99}
.hotspot,.partner{width:44px;height:44px;background:radial-gradient(ellipse at 79% 14%,#959b7560,transparent 42%),var(--metal);border:1px solid #b7ae8699;border-top-color:#eddaabcc;border-right-color:#dbc997b3;box-shadow:inset 0 0 0 3px #101b15b3,inset -1px 2px 4px #d4c69555,0 4px 2px #09130cd9,-3px 9px 12px #0007;transition:filter .2s,box-shadow .14s}
.hotspot::after{inset:4px;border-color:#c1b18855;pointer-events:none}
.hotspot svg,.hotspot img{filter:drop-shadow(0 1px 1px #000);opacity:1}
.hotspot svg{stroke:#e3d7b2;stroke-width:1.35}
.hotspot:hover,.hotspot:focus-visible{background:radial-gradient(ellipse at 79% 14%,#b8bf9170,transparent 42%),var(--metal);filter:brightness(1.17)}
.hotspot:active{box-shadow:inset 0 2px 5px #0009,0 2px 3px #0008}
.hotspot small{padding:5px 8px;border-radius:2px;background:#152019ed;border:1px solid #a99c7055;color:#ece1bd}
.scene-focus .hotspot{opacity:.95}


/* Scroll-led story: text over landscape, with a single direct character interaction. */
#journey{height:980vh}header{left:2.2%}.copy-stage{top:26%;width:min(540px,43vw)}
.chapter{background:none;border:0;box-shadow:none;backdrop-filter:none}
.story-copy{font-size:14px;line-height:1.9;color:var(--ink);max-width:440px;text-shadow:0 2px 8px #0008}
.story-copy p{margin:0 0 16px}.story-copy img{max-height:135px;max-width:150px;object-fit:cover;border-radius:10px}
.narrative-detail h2{font-size:clamp(40px,4.5vw,65px)}
.contact-links button,.contact-links :is(a,button),.text-button,#motion,.chapters button[aria-current]{border:1px solid var(--glass-edge);border-radius:30px;background:var(--glass-control);backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);transition:filter .2s,border-color .2s}
.contact-links{gap:10px}.contact-links button,.contact-links :is(a,button){padding:8px 13px}
.text-button:hover,.contact-links button:hover,.contact-links :is(a,button):hover{background:var(--glass-control);filter:brightness(1.12)}
#motion{padding:8px 12px}
.partner-target{position:absolute;left:0;top:0;z-index:3;background:transparent;border:0;padding:0;border-radius:50%;cursor:pointer}
.partner-ripple{position:absolute;inset:12%;border-radius:50%;border:1px solid #e6dab263;opacity:.4;animation:companion-invite 4.8s ease-out infinite;pointer-events:none;box-shadow:0 0 8px #eee6b51a}
.partner-target.responding .partner-ripple{opacity:0;animation:none}.partner-target:hover .partner-ripple{border-color:#fff1bda6}
@keyframes companion-invite{0%,20%{transform:scale(.7);opacity:0}35%{opacity:.4}80%,100%{transform:scale(1.5);opacity:0}}
.contact-status{position:absolute;right:4%;top:85px;z-index:13;pointer-events:none;font-size:12px;max-width:280px;color:#eee9d8;text-shadow:0 2px 5px #000;background:var(--metal);border:1px solid #938c6580;border-radius:12px;padding:8px 12px;overflow-wrap:anywhere}
.contact-status:empty{display:none}

/* More visible wind in the mist. */
.mist{animation-duration:10s}.mist-two{animation-duration:15s}

/* Upright centered j with a slightly larger, non-shrinking touch target. */
.brand{width:44px;height:52px;padding:0;justify-content:center;flex-shrink:0}.brand .brand-symbol{width:36px;height:48px;flex-shrink:0;object-fit:contain;padding:3px}

/* Align the user's existing cover hierarchy on one shared edge. */
.chapter[data-index="0"]{left:-25px}
.chapter[data-index="0"] .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.14em;margin:0 0 28px;transform:none}
#title-home{font-size:clamp(42px,4.55vw,68px);line-height:1.12;letter-spacing:.005em;margin:0 0 24px;transform:none}
#title-home .name-en{display:block;white-space:nowrap}
#title-home .name-line{display:flex;align-items:baseline;gap:.32em;margin-top:.1em;white-space:nowrap}
#title-home .name-zh{font-family:'Microsoft JhengHei',sans-serif;font-size:.83em;font-weight:300;letter-spacing:.045em}
#title-home em{font-size:.94em;letter-spacing:0}
.chapter[data-index="0"] .intro{font-size:14px;line-height:1.95;letter-spacing:.015em;margin:0;transform:none}
.partner-banner{position:absolute;display:flex;align-items:center;gap:6px;width:84px;height:24px;padding:0 7px;border:1px solid #e5d8a52b;border-radius:5px 12px 5px 5px;background:linear-gradient(135deg,#dde4c90b,#111c1720);backdrop-filter:blur(2px);box-shadow:none;color:#eee6cda6;font-size:8px;letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 3px #000;transition:opacity .3s,background .2s;pointer-events:auto}
.partner-banner i{width:2px;height:7px;background:#d1dbb247;border-radius:2px}.partner-banner span{font-size:11px;letter-spacing:0;margin-left:auto}.partner-target:hover .partner-banner{background:#dae3c81c;border-color:#e5d8a568;color:#eee6cdde}.partner-target.responding .partner-banner{opacity:0;pointer-events:none}

.contact-links .contact-icon{width:16px;height:16px;flex-shrink:0}.contact-links :is(a,button){gap:8px}.contact-links .contact-label{display:inline;margin:0;color:inherit}.about-gallery[hidden]{display:none}

/* Header contacts match the j emblem's material and edge lighting. */
header{z-index:12;isolation:isolate;pointer-events:none}
header>.brand,header>.contact-links{pointer-events:auto}
.contact-links :is(a,button){background:var(--glass-control);border:1px solid var(--glass-edge);border-top-color:#eee4c4b3;box-shadow:var(--glass-shadow);border-radius:24px;color:#f0ebd9;backdrop-filter:blur(12px)}
.contact-links :is(a,button):hover{background:var(--glass-control);filter:brightness(1.12);border-color:#e8d7a9cc}.contact-links .contact-icon{color:#e5ddbf;filter:drop-shadow(0 1px 1px #0008)}

/* About: portrait, editable profile, and a quieter photographic column. */
.about-grid{display:grid;grid-template-columns:112px minmax(0,1fr);gap:30px;align-items:start}
.about-portrait img{width:112px;height:144px;display:block;object-fit:cover;border-radius:6px 18px 6px 6px;filter:none}
.about-portrait>p{font-size:11px;line-height:1.9;color:#dedbca;margin:12px 0 0}.about-portrait>p span{font-size:12px}
.experience-row{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:0 0 22px}.experience-year{font-size:12px;color:#c9c6b0;padding-top:3px}.about-profile h3{font-size:14px;font-weight:500;margin:0;line-height:1.7}.experience-row p,.about-interests p{font-size:12px;line-height:1.8;margin:5px 0 0;color:#cbcec0}
.about-profile .experience-section-title{margin:0 0 14px;color:#d8c694;font:400 14px/1.4 'Microsoft JhengHei',sans-serif}.experience-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}.experience-kind{color:#cabb91;font-size:12px;line-height:1.6}
.about-interests{border-top:1px solid #d7d6bd24;padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.about-interests h3{font-family:'Microsoft JhengHei',sans-serif;font-size:17px;color:#e0dcc7}

/* A restrained metal frame ties personal photographs to the forest architecture. */
.partner-banner{color:#eee6cdd4;border-color:#e5d8a54a;background:linear-gradient(135deg,#dde4c913,#111c172c)}.partner-banner i{background:#d1dbb271}
/* Keep photo navigation attached to the frame; descriptions remain accessible. */
.about-grid{grid-template-columns:minmax(0,1fr)}
/* Cover composition follows the user's portrait-left sketch. */
.chapter[data-index="0"]{display:grid;grid-template-columns:124px minmax(0,1fr);column-gap:26px;row-gap:24px;align-items:center}
.chapter[data-index="0"] .eyebrow{grid-column:1/-1;margin:0;font-size:11px}
#title-home{grid-column:2;grid-row:2;font-size:clamp(30px,3.35vw,48px);margin:0;padding:0}
.chapter[data-index="0"] .intro{grid-column:1/-1;margin:0}
/* Option A: landscape-led cover, portrait beside the About profile. */
.chapter[data-index="0"]{display:block}
.chapter[data-index="0"] .eyebrow{font-size:12px;margin:0 0 28px}
#title-home{font-size:clamp(42px,4.55vw,68px);margin:0 0 24px;padding:0}
.about-grid{grid-template-columns:104px minmax(0,1fr);gap:26px}
.about-portrait img{width:104px;height:132px;padding:5px;border:1px solid #c7bd9070;border-radius:5px 16px 5px 16px;background:#14201920;filter:none}
.experience-row{grid-template-columns:66px minmax(0,1fr);gap:12px}
.contact-links button{display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.chapter .intro,.chapter[data-index="0"] .intro,.story-copy{font-size:15px}.about-profile h3{font-size:15px}
.experience-row p,.about-interests p,.experience-year{font-size:13px}
.about-interests h3{font-size:18px}.about-portrait>p{font-size:12px}
.contact-links :is(a,button){font-size:12px}
#title-home{font-size:clamp(44px,4.7vw,70px)}
/* Frame the image itself; the surrounding stage keeps controls stationary. */
.about-grid{grid-template-columns:124px minmax(0,1fr);gap:24px}
.portrait-frame{position:relative;border:1px solid #c4bc898c;border-top-color:#e2d6a5b3;border-radius:5px 14px 5px 14px;padding:4px;box-shadow:inset 0 0 0 1px #152219,0 3px 10px #0003;background:linear-gradient(140deg,#797f5555,#17251e66)}
.about-portrait .portrait-frame img{width:100%;height:auto;padding:0;border:0;border-radius:2px 10px 2px 10px;filter:none;opacity:1;object-fit:contain;image-rendering:auto;background:none}
/* Apply the generated frame to the portrait, matching the life-photo frame. */
.portrait-frame{padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.about-portrait .portrait-frame img{border-radius:0}
/* Quiet navigation lets the framed photograph remain the focal point. */
.about-grid>.about-interests{grid-column:1/-1;margin-top:0}
.about-grid>.about-interests h3{font-weight:500;margin:0;line-height:1.7}
/* Weathered display frame with a readable navigation rail. */
/* Photographic layout: neutral edges, clear controls, no decorative display board. */
.portrait-frame{outline:1px solid #555958b3;outline-offset:3px}
/* The image plate and photo slots share the approved 1672 by 941 composition. */
.about-gallery.hanging-gallery{left:50%;right:auto;top:0;width:max(100vw,177.68vh);height:auto;aspect-ratio:1672/941;transform:translateX(-50%) translateY(calc((1 - var(--photo-reveal,0))*-140px)) scale(var(--gallery-size,1));opacity:var(--photo-reveal,0);pointer-events:none;background:none;border:0;box-shadow:none}
.hanging-grid{position:absolute;inset:0}
.hanging-item{position:absolute;min-width:0}
.hanging-photo{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#263027;pointer-events:auto}
.hanging-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:none;opacity:1}
.hanging-photo:hover{outline:2px solid #fff4cd;outline-offset:-4px}
.hanging-photo:focus-visible{outline:4px solid #fff4cd;outline-offset:-6px}
.gallery-structure{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;filter:url(#vine-matte);z-index:2}
.vine-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.photo-lightbox{padding:48px 24px 24px;border:1px solid var(--glass-edge);background:var(--glass-panel);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow),0 20px 60px #0007;max-width:min(94vw,1100px);max-height:94dvh;border-radius:16px;overflow:auto}
.photo-lightbox::backdrop{background:#030706c9;backdrop-filter:blur(5px)}
.photo-lightbox img{display:block;max-width:100%;max-height:78dvh;width:auto;height:auto;margin:0 auto;object-fit:contain;filter:none}
.photo-lightbox-close{position:absolute;right:8px;top:3px;width:44px;height:44px;font-size:27px;color:#f0ecdd;border:1px solid var(--glass-edge);border-radius:50%;background:var(--glass-control);box-shadow:var(--glass-shadow)}
.experience-year{white-space:nowrap}
.experience-row{grid-template-columns:82px minmax(0,1fr)}

.about-gallery.hanging-gallery{transform-origin:95% 0;animation:gallery-breeze 11s ease-in-out infinite alternate}
@keyframes gallery-breeze{from{rotate:-.12deg}to{rotate:.12deg}}

.about-gallery.hanging-gallery{position:absolute;z-index:4}

.photo-load-notice{display:block;padding:12px;color:#e9e4d5;font-size:12px;line-height:1.6}.photo-load-notice[hidden],.hanging-photo img[hidden],.photo-lightbox img[hidden]{display:none}

/* Give the About profile more weight than the hanging gallery. */
@media(min-width:701px) and (min-height:541px){
 .copy-stage:has(.chapter[data-index="1"].active){width:min(600px,45vw)}
 .chapter[data-index="1"] h2{font-size:76px}
 .about-grid{grid-template-columns:134px minmax(0,1fr);gap:26px}
 .about-profile h3{font-size:16.5px}
 .experience-row p,.experience-year,.about-interests p{font-size:14.5px}
 .about-interests h3{font-size:20px}
 .experience-row{grid-template-columns:88px minmax(0,1fr);padding-bottom:24px}
 .about-gallery.hanging-gallery{--gallery-size:.8}
}

@media(min-width:701px) and (min-height:541px){
 .copy-stage{top:20%;width:min(610px,45vw)}
 .copy-stage:has(.chapter[data-index="1"].active){width:min(640px,47vw)}
 #title-home{font-size:clamp(48px,5.6vw,82px)}
 .chapter[data-index="0"] .eyebrow{font-size:13px}
 .chapter[data-index="0"] .intro,.chapter[data-index="2"] .story-copy{font-size:17px}
 .chapter[data-index="1"] h2{font-size:82px}
 .about-grid{grid-template-columns:144px minmax(0,1fr);gap:28px}
 .about-profile h3{font-size:17.5px}
 .experience-row p,.experience-year,.about-interests p{font-size:15.5px}
 .about-interests h3{font-size:22px}
 .experience-row{grid-template-columns:94px minmax(0,1fr)}
}

@media(min-width:701px){
 .chapters{top:20%;gap:14px}
 .chapters button{width:44px;min-height:44px;font-size:12px}
 .chapters button span{left:52px;font-size:12px}
}
/* Capabilities: editable copy beside a generated forest stele. */
.copy-stage:has(.capabilities-chapter.active){left:10%;top:12%;bottom:auto;width:84%;height:80%;translate:none}
.chapter.capabilities-chapter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:5vw;align-items:center;height:100%}
.capabilities-copy{align-self:start;min-width:0;padding-top:1vh}
.capabilities-chapter h2{font-size:clamp(46px,5.6vw,82px);margin:0 0 3vh;line-height:1.1}
.capability-group{padding:2vh 0;border-bottom:1px solid #bfb18b55}
.capability-group:first-child{padding-top:0}
.capability-group:last-child{border:0;padding-bottom:0}
.capability-group h3{font-family:'Palatino Linotype',serif;font-size:clamp(21px,2vw,30px);font-weight:400;color:#eee9d9;margin:0 0 10px;line-height:1.2}
.capability-group p{font-size:clamp(14px,1.15vw,18px);line-height:1.85;color:#e4e4d8;margin:0;text-wrap:pretty}
.capability-group p+p{margin-top:13px}
.thesis-stele{position:relative;width:100%;height:min(79vh,760px);max-width:540px;justify-self:center;align-self:center;isolation:isolate}
.stone-filter-defs{position:absolute;width:0;height:0}
.thesis-stone{position:absolute;inset:0;width:100%;height:100%;filter:url(#stone-matte);pointer-events:none}
.thesis-inscription{position:absolute;top:18%;left:22%;width:56%;height:59%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#e6d5aa;font-family:'Palatino Linotype','PMingLiU',serif;text-shadow:0 1px 0 #070c08,0 -1px 1px #fff2;}
.thesis-label{font-variant:small-caps;letter-spacing:.2em;font-size:14px;margin:0 0 15px}
.thesis-inscription h3{font-family:inherit;font-weight:400;font-size:clamp(16px,1.35vw,22px);line-height:1.3;margin:0 0 16px;text-wrap:balance}
.thesis-chinese{font-size:clamp(15px,1.2vw,19px);line-height:1.6;letter-spacing:.06em;margin:0;text-wrap:pretty}
.stone-rule{width:30%;border-top:1px solid #b7a57d88;margin:17px 0;flex-shrink:0}
.thesis-description{font-size:clamp(14px,1.05vw,17px);line-height:1.8;margin:0;text-wrap:pretty}
.thesis-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:15px;padding:5px 8px;color:inherit;font-size:16px;text-decoration:none;border-bottom:1px solid #b7a57d88;flex-shrink:0}
.thesis-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2}
.thesis-link:hover{color:#fff3ce;border-color:#fff3ce}
.thesis-link:focus-visible{outline:2px solid #fff3ce;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.capabilities-chapter{transition:none;transform:none}}
/* Latest balance: smaller left content, quiet Chinese-only inscription. */
.copy-stage:not(:has(.capabilities-chapter.active)){transform:scale(.9);transform-origin:top left}
.capabilities-copy{transform:scale(.9);transform-origin:top left}
.thesis-inscription{color:#d0cec1;text-shadow:0 1px 1px #10140f;top:22%;height:49%}
.thesis-inscription .thesis-chinese{font-size:clamp(22px,1.9vw,29px);line-height:1.7;font-weight:400;letter-spacing:.08em;margin:0;text-wrap:balance}
.thesis-label{color:#b9b9a9;letter-spacing:.14em}
.stone-rule{border-color:#b1b0a15c;margin:24px 0}
.thesis-description{font-size:clamp(15px,1.12vw,18px);line-height:1.9;color:#cbcbbf}
.thesis-link{color:#d0d0c2;border-color:#b1b0a15c;margin-top:22px}
.thesis-link:hover{color:#f0eee4;border-color:#e1e0d2}
.thesis-link:focus-visible{outline-color:#e1e0d2}
/* Fixed thesis copy is engraved into the generated stone; semantic text stays accessible. */
.thesis-engraved .thesis-inscription{inset:0;width:100%;height:100%;display:block;pointer-events:none}
.thesis-engraved .thesis-inscription>:not(.thesis-link),.thesis-engraved .thesis-link>*{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.thesis-engraved .thesis-link{position:absolute;left:42%;top:64.5%;width:22%;height:6%;min-height:44px;margin:0;padding:0;border:0;border-radius:3px;pointer-events:auto;background:transparent;touch-action:manipulation}
.thesis-engraved .thesis-link:hover{background:#f6f2db0c}
.thesis-engraved .thesis-link:focus-visible{outline:2px solid #d4d4bf;outline-offset:2px;background:#f6f2db0c}
/* Broader stele, brought closer to the capabilities column. */
@media(min-width:701px) and (min-height:651px){.chapter.capabilities-chapter{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3vw}.thesis-stele{height:min(73vh,680px);max-width:570px}}
.thesis-engraved::before{content:'';position:absolute;left:24%;top:15%;width:54%;height:62%;background:#171916;z-index:-1}
/* A fixed ground edge occludes the slab as it rises, then it settles. */
.thesis-engraved::before{content:none}
.stele-occlusion{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 2%);mask-image:linear-gradient(#000 0 94%,transparent 100%)}
.stele-body{position:absolute;inset:0;isolation:isolate;transform:translateY(100%);transform-origin:50% 96%;will-change:transform}
.stele-body::before{content:'';position:absolute;left:24%;top:15%;width:54%;height:62%;background:#171916;z-index:-1}
.stele-ground-shadow{position:absolute;left:8%;bottom:1%;width:87%;height:9%;background:radial-gradient(ellipse,#030705d9 0%,#08110c90 35%,transparent 72%);filter:blur(5px);transform:rotate(-4deg);opacity:var(--stele-reveal,0);pointer-events:none}
.stele-dust{position:absolute;left:4%;bottom:2%;width:93%;height:10%;background:radial-gradient(ellipse at 25% 65%,#aa9e7a50,transparent 40%),radial-gradient(ellipse at 70% 65%,#a89f8050,transparent 48%);filter:blur(7px);opacity:var(--stele-dust,0);pointer-events:none;transform:scaleX(1.08)}
@media(min-width:701px) and (min-height:651px){.thesis-stele{align-self:end;margin-bottom:-1vh}}
@media(prefers-reduced-motion:reduce){.stele-body{will-change:auto}.stele-dust{display:none}}
/* The outgoing chapter must not reflow into the narrow copy column while fading. */
.chapter.capabilities-chapter:not(.active){opacity:0;visibility:hidden;transition:none;pointer-events:none}

.copy-stage:has(.moments-chapter.active){left:10%;top:12%;width:82%;height:78%;translate:none;transform:none}
.contact-details{display:grid;gap:24px;margin-top:32px}
.contact-details a{display:flex;align-items:center;gap:18px;width:fit-content;max-width:100%;color:#eee9d9;text-decoration:none}
.contact-details svg{box-sizing:border-box;width:48px;height:48px;padding:13px;flex-shrink:0;background:var(--glass-control);border:1px solid var(--glass-edge);border-top-color:#eee4c4b3;border-radius:50%;box-shadow:var(--glass-shadow);color:#e5ddbf}
.contact-detail-label{display:block;font-size:14px;opacity:.82;margin-bottom:5px}
.contact-detail-value{display:block;font-size:clamp(16px,1.5vw,21px);overflow-wrap:anywhere}
.contact-details a:hover .contact-detail-value{text-decoration:underline;text-underline-offset:5px}
.contact-details a:focus-visible{outline:2px solid #eee9d9;outline-offset:6px}


@media(min-width:701px){
 .chapters button span{left:auto;right:calc(100% + 8px);max-width:calc(4.1vw - 12px);width:max-content;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:10px;line-height:1.35;padding:7px 4px;border:1px solid #938c6560;border-radius:7px;background:#152019f2;color:#dfdcc5;box-shadow:0 3px 12px #0005;backdrop-filter:blur(8px)}
}



.moments-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.greenhouse-gallery{position:relative;min-width:0}
.greenhouse-hover{position:relative;width:94%;margin:auto;aspect-ratio:1.22;animation:greenhouse-float 6s ease-in-out infinite;animation-play-state:paused}
.moments-chapter.active .greenhouse-hover{animation-play-state:running}
.greenhouse-gallery:nth-child(2) .greenhouse-hover{animation-delay:-2s}
.greenhouse-frame{position:absolute;inset:0;width:100%;height:100%;filter:url(#stone-matte);pointer-events:none}
.greenhouse-window{position:absolute;left:9.5%;top:15.8%;width:81%;height:58%;overflow:hidden;border-radius:8%;background:#13231d66}
.greenhouse-photo{width:100%;height:100%;object-fit:contain;background:#101a15;display:block}
.greenhouse-photo[hidden]{display:none}
.greenhouse-fog{position:absolute;inset:-25%;background:radial-gradient(ellipse at 25% 70%,#d1dccc38,transparent 50%),radial-gradient(ellipse at 70% 40%,#bccdc329,transparent 45%);filter:blur(14px);animation:greenhouse-fog 12s ease-in-out infinite alternate;animation-play-state:paused}
.moments-chapter.active .greenhouse-fog{animation-play-state:running}
.greenhouse-gallery:not(.is-empty) .greenhouse-fog{display:none}
.greenhouse-exhaust{position:absolute;top:87%;width:4%;height:16%;background:linear-gradient(#fffbea 0%,#ffe39cdc 22%,#e9b96488 55%,transparent 100%);filter:blur(1.5px) drop-shadow(0 0 7px #ffd68bb3);border-radius:50%;transform-origin:top;animation:greenhouse-thrust 2.5s ease-in-out infinite alternate;animation-play-state:paused;pointer-events:none}
.moments-chapter.active .greenhouse-exhaust{animation-play-state:running}
.exhaust-left{left:21.7%}.exhaust-right{left:74%}
.greenhouse-arrow{position:absolute;top:40%;width:34px;height:44px;display:grid;place-items:center;border-radius:8px;border:1px solid #b9aa838f;background:linear-gradient(135deg,#706b60 0%,#252729 28%,#151719 56%,#504a3c 100%);box-shadow:inset 0 1px 1px #f0dfb559,inset 0 -1px 2px #000c,0 3px 9px #0007;color:#e5d8b2;cursor:pointer;transition:filter .2s}
.greenhouse-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.arrow-prev{left:12%}.arrow-next{right:12%}
.greenhouse-arrow:hover:not(:disabled){filter:brightness(1.3)}
.greenhouse-arrow:disabled{opacity:1;cursor:default}
.greenhouse-arrow:focus-visible{outline:2px solid #eee9d9;outline-offset:4px}
@keyframes greenhouse-float{0%,100%{transform:translateY(3px) rotate(-.2deg)}50%{transform:translateY(-6px) rotate(.2deg)}}
@keyframes greenhouse-fog{from{transform:translateX(-5%)}to{transform:translateX(6%)}}
@keyframes greenhouse-thrust{from{opacity:.8;transform:scaleY(.85)}to{opacity:1;transform:scaleY(1.12)}}
@media(prefers-reduced-motion:reduce){.greenhouse-hover,.greenhouse-fog,.greenhouse-exhaust{animation:none}}

.greenhouse-caption{position:absolute;top:77%;left:27%;width:46%;margin:0;text-align:center;color:#e9dfc6;font-family:"Palatino Linotype","Songti TC","PMingLiU",serif;font-size:clamp(18px,1.4vw,24px);font-weight:600;line-height:1.4;letter-spacing:.045em;text-shadow:0 1px 1px #172019,0 2px 5px #000e,0 0 12px #111b15;white-space:pre-line;overflow-wrap:anywhere}



[data-od-id="hero-description"]{white-space:pre-line}

.copy-stage:has(.chapter[data-index="7"].active){width:82%;height:76%;top:12%;translate:none;transform:none}
.chapter[data-index="7"]{height:100%;max-width:none}
.chapter[data-index="7"]>.intro,.chapter[data-index="7"]>.contact-details{max-width:45%}
.contact-collage{position:absolute;right:-2%;top:0;width:53%;height:100%;object-fit:contain;opacity:.57;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 35%,transparent 74%)}

@media(min-width:1101px) and (min-height:601px){
 .copy-stage:has(.chapter[data-index="1"].active){width:min(680px,47vw);transform:none}
 .chapter[data-index="1"] h2{font-size:clamp(76px,5.9vw,86px);margin-bottom:28px}
 .chapter[data-index="1"] .about-grid{grid-template-columns:156px minmax(0,1fr);gap:30px}
 .chapter[data-index="1"] .about-profile h3{font-size:19px;line-height:1.55}
 .chapter[data-index="1"] .about-profile .experience-section-title{font-size:17px}
 .chapter[data-index="1"] .experience-row{grid-template-columns:94px minmax(0,1fr);gap:14px;padding-bottom:28px}
 .chapter[data-index="1"] .experience-year,.chapter[data-index="1"] .experience-row p,.chapter[data-index="1"] .about-interests p{font-size:16.5px}
 .chapter[data-index="1"] .experience-kind{font-size:15px}
 .chapter[data-index="1"] .about-interests{padding-top:20px;gap:28px}
 .chapter[data-index="1"] .about-interests h3{font-size:23px}
}

#world{transform:none!important;will-change:auto;isolation:isolate}
.scene>.shade{z-index:3}
.landscape,.forest-film,.contact-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.landscape{transition:opacity .7s ease}
.forest-film,.contact-landscape{opacity:0;transition:opacity .7s ease}
.forest-film{z-index:1}
.contact-landscape{z-index:2}
#world.film-playing:not(.contact-scene) .forest-film,#world.contact-scene .contact-landscape{opacity:1}
#world.contact-image-error .contact-landscape{display:none}
#experience:has(#world.contact-image-error) .contact-collage{visibility:hidden}
.chapter[data-index="7"].active .contact-collage{opacity:var(--contact-collage-opacity,.57);transition:opacity .25s ease .7s}
.chapter[data-index="7"]:not(.active) .contact-collage{visibility:hidden;opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){.forest-film,.contact-landscape{transition:none}}