@charset "UTF-8";
:root{--brown:#644012;--ink:#593b1d;--paper:#f5edda;--gold:#b57209;--header-height:68px;--progress:0;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}body{margin:0;background:var(--gold) url('assets/ochre.webp') repeat;color:var(--ink);font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}button{border:0;background:none}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}img{display:block;max-width:100%;height:auto}.skip-link{position:fixed;left:20px;top:-80px;background:var(--paper);padding:12px;z-index:100}.skip-link:focus{top:10px}
.header{position:sticky;top:0;z-index:30;height:var(--header-height);display:flex;align-items:center;gap:35px;padding:0 3.5%;background:#5c360cf2;color:#fff6e3;border-bottom:1px solid #dfb25a44;box-shadow:0 2px 10px #41240012}.brand{width:196px;flex:none}.brand img{width:100%;max-height:48px;object-fit:contain}.desktop-nav{display:flex;align-items:center;justify-content:space-around;flex:1;gap:12px}.desktop-nav a{position:relative;white-space:nowrap;font-size:13px;letter-spacing:.1em;padding:25px 4px}.desktop-nav a:after{content:"";height:1px;background:#e4be79;position:absolute;bottom:15px;left:50%;right:50%;transition:left .2s,right .2s}.desktop-nav a:hover:after{left:10%;right:10%}.header-actions{display:flex;gap:24px;align-items:center;flex:none;font-size:12px;letter-spacing:.08em}.header-actions button{padding:8px 0;display:flex;align-items:center;gap:7px;white-space:nowrap}.language svg{width:12px}.flag{font-family:Arial,sans-serif;font-size:16px}.member svg{width:15px;fill:currentColor;stroke-width:1}.menu-toggle{display:none!important}.mobile-nav{position:fixed;inset:var(--header-height) 0 auto;z-index:29;background:#5c360c;color:var(--paper);padding:20px 7%;box-shadow:0 16px 30px #41240033}.mobile-nav[hidden]{display:none}.mobile-nav a{display:block;border-bottom:1px solid #b8935044;padding:17px 0;letter-spacing:.15em}
.journey{height:145svh;min-height:980px}.stage{height:calc(100svh - var(--header-height));min-height:620px;position:sticky;top:var(--header-height);overflow:hidden;isolation:isolate;background:var(--gold) url('assets/ochre.webp') repeat}.road{position:absolute;inset:0;z-index:-1;background:var(--paper) url('assets/paper.webp') repeat;clip-path:polygon(34% 49%,66% 49%,87% 100%,13% 100%)}.scene-title{position:absolute;top:5%;left:50%;transform:translate(-50%,calc(var(--progress)*-80px));display:flex;align-items:center;gap:18px;opacity:calc(1 - var(--progress)*1.5)}.scene-title img{width:152px}.title-line{width:42px;height:1px;background:#ecd4a76e}.hall-position{position:absolute;top:17.5%;left:50%;width:35%;transform:translate(-50%,calc(var(--progress)*-35px));z-index:2}.hall-link{display:block;transition:filter .3s}.hall-link:hover{filter:brightness(1.06)}.hall{width:100%;animation:hall-in 1.8s cubic-bezier(.18,.65,.2,1) both}.cloud{position:absolute;pointer-events:none;will-change:transform;z-index:3;opacity:calc(1 - var(--progress)*1.3)}.cloud img{width:100%;animation:cloud-drift 9s ease-in-out infinite alternate}.cloud-one{width:18%;left:7%;top:37%;transform:translateX(calc(var(--progress)*-45vw))}.cloud-two{width:32%;left:-3%;top:64%;transform:translateX(calc(var(--progress)*-50vw))}.cloud-three{width:17%;left:22%;top:58%;transform:translateX(calc(var(--progress)*-40vw))}.cloud-four{width:31%;right:2%;top:35%;transform:translateX(calc(var(--progress)*50vw))}.cloud-five{width:16%;right:-1%;top:70%;transform:translateX(calc(var(--progress)*40vw))}.cloud-two img{animation-delay:-3s}.cloud-three img{animation-delay:-6s}.cloud-four img{animation-delay:-2s}.cloud-five img{animation-delay:-5s}.traveler-position{position:absolute;width:6%;left:50%;bottom:15%;transform:translate(-50%,calc(var(--progress)*-150px)) scale(calc(1 - var(--progress)*.45));opacity:calc(1 - var(--progress)*1.15);transform-origin:50% 100%;z-index:4}.traveler{width:100%;animation:traveler-in 2.4s cubic-bezier(.15,.7,.25,1) both .5s}.hero-footer{position:absolute;bottom:3.2%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;opacity:calc(1 - var(--progress)*1.5)}.hero-footer>img{width:252px}.scroll-cue{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.25em}.scroll-cue svg{width:10px;height:20px;animation:arrow 2s ease-in-out infinite}.side-caption{position:absolute;left:3.7%;top:49%;display:flex;gap:13px;align-items:center;writing-mode:vertical-rl;font:8px/1.5 Georgia,serif;letter-spacing:.18em;opacity:.62}.side-caption i{height:35px;width:1px;background:currentColor}.replay{position:absolute;right:3.3%;bottom:4%;display:flex;align-items:center;gap:8px;color:#4f330f;font-size:10px;letter-spacing:.12em;opacity:.7}.replay:hover{opacity:1}.replay svg{width:15px;height:15px}.stage.restarting *{animation:none!important}.stage.is-loading .title-entry,.stage.is-loading .hall,.stage.is-loading .cloud-entry,.stage.is-loading .traveler{animation:none!important;visibility:hidden}
.roots-section{padding:65px 8% 70px;background:var(--paper) url('assets/paper.webp') repeat;position:relative;z-index:5;border-top:1px solid #7e501c33}.section-number{font:13px Georgia,serif;letter-spacing:.13em;display:flex;gap:18px;align-items:center;border-bottom:1px solid #92632744;padding-bottom:18px}.section-number>span{font-size:10px;letter-spacing:.2em}.roots-layout{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:8%;padding:70px 0 80px}.eyebrow{font-size:12px;letter-spacing:.3em;color:#946b35;margin:0 0 22px}h1{font-weight:400;letter-spacing:.12em;font-size:clamp(28px,3.4vw,48px);line-height:1.65;margin:0 0 24px}.intro{font-size:14px;letter-spacing:.1em;line-height:2.4;color:#765d40}.text-link{display:inline-flex;align-items:center;gap:40px;padding:16px 0 10px;border-bottom:1px solid #77512d;font-size:13px;letter-spacing:.13em;margin-top:12px}.text-link>span:last-child{font-size:20px}.heritage-art{margin:0}.heritage-art img{width:100%}.heritage-art figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #96704466;margin-top:28px;padding-top:15px;font-size:11px;letter-spacing:.15em}.heritage-art figcaption span:last-child{font:8px Georgia,serif;letter-spacing:.06em}.chapter-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.chapter-links :is(button,a){text-align:left;border-top:1px solid #96704477;padding:22px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px}.chapter-links small{grid-column:1/-1;font:9px Georgia,serif;letter-spacing:.13em;color:#97774b}.chapter-links span{font-size:20px;letter-spacing:.16em}.chapter-links b{font-size:23px;font-weight:400;transition:transform .2s}.chapter-links :is(button,a):hover b{transform:translate(3px,-3px)}.footer{padding:30px 5%;background:#5b370e;color:#e7d1a7;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer img{width:180px}.footer>span{font:9px Georgia,serif;letter-spacing:.15em}.back-top{font-size:11px;letter-spacing:.12em}
.content-dialog{width:min(680px,calc(100% - 32px));padding:65px;border:1px solid #94714b;color:var(--ink);background:var(--paper) url('assets/paper.webp');max-height:85svh;box-shadow:0 25px 90px #26140455}.content-dialog::backdrop{background:#28170899;backdrop-filter:blur(4px)}.dialog-close{position:absolute;top:18px;right:20px;font:30px/1 Arial,sans-serif;padding:5px}.dialog-content h2{font-size:30px;font-weight:400;letter-spacing:.16em;line-height:1.5;margin:12px 0 24px}.dialog-content p{font-size:15px;line-height:2.2;letter-spacing:.06em}.dialog-content .eyebrow{font-size:10px}.dialog-content img{max-height:260px;object-fit:contain;margin:25px auto}.dialog-note{border-top:1px solid #a2855955;padding-top:18px;color:#876f4e;font-size:12px!important}.gallery-items{display:grid;grid-template-columns:1fr 1fr;gap:20px}.gallery-items figure{margin:0}.gallery-items figcaption{font-size:12px;text-align:center}
@keyframes hall-in{from{opacity:0;transform:translateY(-65px)}to{opacity:1;transform:translateY(0)}}@keyframes title-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes cloud-left{from{opacity:0;transform:translateX(-110vw)}to{opacity:1;transform:translateX(0)}}@keyframes cloud-right{from{opacity:0;transform:translateX(110vw)}to{opacity:1;transform:translateX(0)}}@keyframes traveler-in{from{opacity:0;transform:translateY(220px)}to{opacity:1;transform:translateY(0)}}@keyframes cloud-drift{from{transform:translate(0,0)}to{transform:translate(10px,-8px)}}@keyframes arrow{50%{translate:0 5px}}
body,.stage{background-size:140px 140px}.road,.roots-section,.content-dialog{background-size:140px 140px}
@media(min-width:1600px){.header{padding-inline:5%;gap:60px}.brand{width:225px}.desktop-nav a{font-size:14px}.hall-position{width:34%;top:16.5%}}
@media(max-width:1100px){.header{padding-inline:3%;gap:20px}.brand{width:160px}.desktop-nav{gap:8px}.desktop-nav a{font-size:11px;letter-spacing:.03em}.header-actions{gap:15px;font-size:11px}.stage{min-height:530px}.hall-position{width:40%;top:22%}.road{clip-path:polygon(31% 51%,69% 51%,90% 100%,10% 100%)}.scene-title{top:6%}.traveler-position{width:6.5%}.side-caption{display:none}.cloud-one{top:37%;width:20%;left:5%}.cloud-four{top:36%;right:0%;width:32%}.journey{min-height:850px}}
@media(max-width:780px){:root{--header-height:64px}.header{padding-inline:5%;justify-content:space-between}.brand{width:175px}.desktop-nav{display:none}.header-actions{gap:20px}.member{display:none!important}.menu-toggle{display:flex!important;flex-direction:column;gap:6px!important;justify-content:center;width:24px;height:32px}.menu-toggle span{display:block;width:23px;height:1px;background:currentColor;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.journey{height:135svh;min-height:0}.stage{--scene-height:calc(100svh - var(--header-height));--hall-width:min(72vw,calc(var(--scene-height)*.85));--hall-top:26%;height:var(--scene-height);min-height:0}.scene-title{top:6%}.title-entry{gap:14px}.scene-title img{width:135px}.title-line{width:24px}.hall-position{width:var(--hall-width);top:var(--hall-top)}.road{clip-path:polygon(16% 51%,84% 51%,115% 100%,-15% 100%)}.cloud-one{width:39%;left:-9%;top:35%}.cloud-two{width:70%;left:-28%;top:65%}.cloud-three{width:32%;left:8%;top:55%}.cloud-four{width:58%;right:-24%;top:40%}.cloud-five{width:35%;right:-10%;top:73%}.traveler-position{width:min(11.5vw,calc(var(--scene-height)*.12));bottom:20%}.hero-footer{bottom:5%;gap:12px}.hero-footer>img{width:200px}.replay{right:5%;bottom:max(8px,env(safe-area-inset-bottom));min-height:44px;padding:10px 0;font-size:10px}.roots-section{padding:40px 7%}.roots-layout{grid-template-columns:1fr;padding:45px 0;gap:50px}h1{font-size:32px}.intro{font-size:13px}.heritage-art{width:100%;margin:0 auto}.chapter-links{gap:15px}.chapter-links span{font-size:16px;letter-spacing:.07em}.chapter-links small{font-size:7px}.chapter-links b{font-size:18px}.heritage-art figcaption{font-size:10px}.heritage-art figcaption span:last-child{font-size:6px}.footer{padding:30px 7%;flex-wrap:wrap}.footer img{width:165px}.footer>span{order:3;width:100%;font-size:8px}.content-dialog{padding:50px 28px}.dialog-content h2{font-size:26px}}
@media(min-width:781px) and (max-width:1100px){.road{clip-path:polygon(31% 48%,69% 48%,90% 100%,10% 100%)}}
@media(max-width:780px){body,.stage,.road,.roots-section,.content-dialog{background-size:90px 90px}.road{clip-path:polygon(16% 45%,84% 45%,115% 100%,-15% 100%)}}
@media(max-width:380px){.brand{width:150px}.header-actions{gap:14px}.stage{min-height:0}.traveler-position{bottom:20%}.chapter-links{grid-template-columns:1fr}.chapter-links :is(button,a){grid-template-columns:1fr 1fr auto}.chapter-links small{grid-column:auto}.chapter-links span{font-size:18px}}
.title-entry{display:flex;align-items:center;gap:18px;animation:title-in 1.7s both .15s}.cloud-one .cloud-entry{animation:cloud-left 2.2s cubic-bezier(.15,.7,.25,1) both .2s}.cloud-two .cloud-entry{animation:cloud-left 2.4s cubic-bezier(.15,.7,.25,1) both .1s}.cloud-three .cloud-entry{animation:cloud-left 2.7s cubic-bezier(.15,.7,.25,1) both .4s}.cloud-four .cloud-entry{animation:cloud-right 2.5s cubic-bezier(.15,.7,.25,1) both .15s}.cloud-five .cloud-entry{animation:cloud-right 2.5s cubic-bezier(.15,.7,.25,1) both .5s}
@media(max-width:780px){.title-entry{gap:14px}.road{clip-path:polygon(calc(50% - var(--hall-width)*.48) calc(var(--hall-top) + var(--hall-width)*.55 - 3px),calc(50% + var(--hall-width)*.48) calc(var(--hall-top) + var(--hall-width)*.55 - 3px),115% 100%,-15% 100%)}}
@media(max-width:780px) and (max-height:740px){.stage{--hall-top:23%}.scene-title{top:4%}.scene-title img{width:112px}}
@media(max-height:500px) and (orientation:landscape){:root{--header-height:54px}.journey{height:145svh;min-height:0}.stage{--scene-height:calc(100svh - var(--header-height));--hall-width:min(42vw,calc(var(--scene-height)*.8));--hall-top:8%;height:var(--scene-height);min-height:0}.hall-position{width:var(--hall-width);top:var(--hall-top)}.scene-title{left:15%;top:14%}.scene-title img{width:90px}.title-line{display:none}.road{clip-path:polygon(calc(50% - var(--hall-width)*.48) calc(var(--hall-top) + var(--hall-width)*.55 - 3px),calc(50% + var(--hall-width)*.48) calc(var(--hall-top) + var(--hall-width)*.55 - 3px),80% 100%,20% 100%)}.traveler-position{width:4.5%;bottom:9%}.cloud-one{width:20%;left:-5%;top:37%}.cloud-two{width:38%;left:-10%;top:58%}.cloud-three{width:20%;left:15%;top:60%}.cloud-four{width:32%;right:-8%;top:25%}.cloud-five{width:22%;right:-4%;top:70%}.hero-footer{left:4%;bottom:5%;transform:none;gap:8px;align-items:flex-start}.hero-footer>img{width:160px}.scroll-cue{font-size:9px}.replay{bottom:8px;min-height:44px}.side-caption{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.cloud,.hall-position,.traveler-position,.scene-title{transform:none!important;opacity:1!important}.hall-position,.traveler-position,.scene-title{transform:translateX(-50%)!important}.hero-footer{opacity:1}}