/* One continuous, sideways exhibition. The original room artwork and film player remain intact. */
:root{--topbar:76px;--bottombar:70px}
html,body{width:100%;height:100%;overflow:hidden}
body{overscroll-behavior:none}
.page-shell{width:100%;height:100svh;min-height:0;max-width:none;display:grid;grid-template-rows:var(--topbar) minmax(0,1fr) var(--bottombar);overflow:hidden}
.portal-intro{display:none}
.site-header{height:auto;min-height:0;padding:0 clamp(24px,3.6vw,68px);gap:24px;background:rgba(3,17,24,.96);border-bottom:1px solid rgba(228,194,139,.27);z-index:20}
.brand{min-width:205px}
.brand-seal{border-radius:3px;transform:rotate(-5deg);box-shadow:inset 0 0 0 3px #08242b,inset 0 0 0 4px rgba(224,195,143,.35)}
.brand-name strong{font-size:20px;letter-spacing:.2em}
.header-intro{display:none}
.header-marker{min-width:auto;gap:4px;letter-spacing:.17em;color:#9ca9a7}
.header-marker b{font-size:11px;color:#ddbd82}
.chapter-nav{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.45vw,28px);min-width:0;margin-left:auto}
.chapter-nav button{position:relative;min-height:54px;padding:0 5px;border:0;background:none;color:#98aaa9;white-space:nowrap;cursor:pointer;font:12px/1.2 "Songti SC","STSong",serif;letter-spacing:.13em;transition:color .2s}
.chapter-nav button:hover,.chapter-nav button.is-active{color:#f1dbb3}
.chapter-nav button.is-active::after{content:"";position:absolute;left:5px;right:5px;bottom:6px;height:1px;background:#d6b476;box-shadow:0 0 12px #d6b47688}
.chapter-nav button:focus-visible,.chapter-arrow:focus-visible{outline:2px solid #ecc88c;outline-offset:3px}

.horizontal-experience{position:relative;display:flex;width:100%;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#04131c}
.horizontal-experience::-webkit-scrollbar{display:none}
.museum-grid{display:contents}
.museum-panel,.panel-music,.panel-civilization,.panel-lushun,.panel-portrait,.panel-atelier,.screening-section{flex:0 0 100%;width:100%;height:100%;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0;border:0}
.museum-panel{overflow:hidden}
.museum-panel::after{inset:20px;border-color:rgba(242,207,147,.13)}
.museum-panel:hover::after{border-color:rgba(242,207,147,.27)}
.panel-top{top:clamp(28px,5vh,55px);left:clamp(34px,5.4vw,104px);right:clamp(34px,5.4vw,104px);font-size:11px;letter-spacing:.23em}
.panel-top i{width:36px}
.open-state,.preview-state{font-size:11px}
.panel-copy,.panel-music .panel-copy,.panel-civilization .panel-copy,.panel-lushun .panel-copy,.panel-atelier .panel-copy{left:clamp(42px,7.6vw,145px);right:auto;bottom:clamp(62px,10vh,125px);width:min(44vw,630px);max-width:none}
.panel-kicker,.panel-lushun .panel-kicker{margin-bottom:18px;font-size:11px;letter-spacing:.35em}
.panel-copy h1,.panel-copy h2,.panel-music .panel-copy h1,.panel-civilization .panel-copy h2,.panel-lushun .panel-copy h2,.panel-atelier .panel-copy h2{font-size:clamp(60px,6.6vw,112px);font-weight:400;line-height:1.1;letter-spacing:.09em;white-space:normal}
.panel-subtitle,.panel-music .panel-subtitle,.panel-civilization .panel-subtitle,.panel-lushun .panel-subtitle,.panel-atelier .panel-subtitle{margin-top:20px;font-size:clamp(18px,1.75vw,28px);letter-spacing:.2em}
.panel-desc,.panel-music .panel-desc,.panel-civilization .panel-desc,.panel-lushun .panel-desc,.panel-atelier .panel-desc{max-width:510px;margin-top:22px;font-size:14px;line-height:1.9;letter-spacing:.09em}
.panel-action,.panel-civilization .panel-action,.panel-lushun .panel-action,.panel-atelier .panel-action{min-width:246px;min-height:54px;margin-top:26px;font-size:17px}
.panel-edge{display:block;right:clamp(30px,4vw,78px);font-size:10px}

.panel-music .panel-image{background-size:auto 126%;background-position:right center}
.panel-music::before{background:linear-gradient(90deg,#021116 0%,rgba(2,17,22,.98) 16%,rgba(2,18,23,.73) 37%,rgba(1,17,22,.18) 70%,rgba(1,17,22,.03)),linear-gradient(0deg,rgba(0,14,18,.68),transparent 48%)}
.panel-music .music-lines{left:46%;top:11%;height:62%;width:50%;opacity:.3}
.panel-music .panel-copy h1{font-size:clamp(76px,8vw,132px)}

.panel-civilization{background:radial-gradient(ellipse 60% 80% at 72% 48%,#703a2c,#2d1515 53%,#12090c 100%)}
.panel-civilization::before{background:linear-gradient(90deg,rgba(16,7,9,.98) 0%,rgba(24,9,10,.94) 30%,rgba(19,8,10,.15) 67%),linear-gradient(0deg,rgba(18,8,9,.68),transparent 65%)}
.civilization-case{left:73%;top:47%;width:min(27vw,470px);height:67%;border-color:rgba(239,200,137,.64)}
.civilization-case img{width:75%;max-height:84%}
.panel-civilization .civilization-vault i:nth-child(1){left:52%}
.panel-civilization .civilization-vault i:nth-child(2){left:73%}
.panel-civilization .civilization-vault i:nth-child(3){right:7%}

.panel-lushun{background:radial-gradient(ellipse 53% 84% at 73% 43%,#1a4059 0%,#071a31 58%,#030b19 100%)}
.panel-lushun::before{background:linear-gradient(90deg,rgba(2,8,22,.95),rgba(2,10,24,.85) 34%,rgba(2,10,24,.04) 70%),linear-gradient(0deg,rgba(1,6,17,.6),transparent 60%)}
.panel-lushun .cosmic-glow,.panel-lushun .celestial-ring{left:72%;top:46%}
.panel-lushun .cosmic-glow{width:58%}
.panel-lushun .ring-one{width:43%}.panel-lushun .ring-two{width:31%}.panel-lushun .ring-three{width:13%;height:58%}
.hero-star{left:73%;top:43%;width:11px;height:11px}
.panel-lushun .sky-coordinate{top:clamp(76px,11vh,122px);right:6vw;font-size:10px}

.panel-portrait{background:radial-gradient(ellipse 83% 120% at 74% 46%,#fff5df 0%,#e9dac3 57%,#c6b293 100%)}
.panel-portrait:before{background:linear-gradient(90deg,rgba(255,248,232,.72),rgba(246,232,210,.15) 64%),radial-gradient(ellipse 70% 83% at 75% 38%,#fff4df,#d0bca0)}
.portrait-copy{left:clamp(42px,7.6vw,145px);right:auto;bottom:clamp(74px,11vh,134px);width:min(42vw,585px)}
.portrait-copy .panel-kicker{font-size:11px;margin-bottom:19px}
.portrait-copy h2{font-size:clamp(61px,6.4vw,110px);line-height:1.11;white-space:normal}
.portrait-copy p{max-width:510px;margin-top:19px;font-size:20px;line-height:1.8}
.portrait-copy .panel-action{min-width:245px;min-height:54px;margin-top:28px;font-size:17px}
.souvenir-card,.panel-portrait .souvenir-card{top:14%;right:13%;width:min(24vw,335px);height:min(68vh,495px);padding:19px;border-width:11px;transform:rotate(6deg);box-shadow:24px 36px 48px rgba(65,51,38,.33),0 0 0 1px #ae9b7b}
.panel-portrait:hover .souvenir-card{transform:rotate(2deg) translateY(-10px)}
.panel-portrait .souvenir-card strong{font-size:26px;margin:10px 0}
.panel-portrait .card-topline{font-size:7px}
.panel-portrait .card-photo{height:59%}
.panel-portrait .card-photo .gold-object{width:138%;right:-34%;bottom:1%}
.panel-portrait .card-caption{font-size:12px;margin-top:10px}
.panel-portrait .card-foot{font-size:7px;margin-top:9px}
.panel-portrait .card-orbit{right:10%;width:33%}

.panel-atelier .atelier-panel-scene{background-size:cover;background-position:center center}
.panel-atelier::before{background:linear-gradient(90deg,rgba(24,6,5,.97),rgba(29,8,6,.87) 35%,rgba(29,8,6,.18) 73%),linear-gradient(0deg,rgba(17,5,4,.73),transparent 52%)}
.panel-atelier .atelier-panel-object{left:72%;top:47%;width:30%;height:76%;filter:drop-shadow(0 26px 27px #0a0202b9)}

/* The final chapter stays within the same horizontal route. Its archive scrolls sideways. */
.screening-section{display:grid;grid-template-rows:auto minmax(0,1fr) 135px;gap:clamp(9px,1.6vh,17px);overflow:hidden;padding:clamp(16px,2.4vh,27px) clamp(38px,5vw,92px) 12px;background:radial-gradient(ellipse 62% 80% at 38% 51%,#102833 0%,#071822 52%,#03121c 100%)}
.screening-heading{min-height:0;align-items:end;padding:0 0 7px}
.screening-heading h2{margin-top:5px;font-size:clamp(34px,3.2vw,54px)}
.screening-heading p{font-size:12px;line-height:1.7}
.screening-layout{min-height:0;height:100%;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);align-items:stretch;gap:clamp(22px,3.2vw,52px)}
.screening-frame{height:100%;width:auto;max-width:100%;aspect-ratio:16/9;justify-self:center;align-self:center}
.screening-sidebar{height:100%;min-height:0;padding:2px 0}
.screening-sidebar h3{min-height:0;margin:12px 0 10px;font-size:clamp(22px,2.25vw,38px)}
.screening-sidebar>p:not(.screening-status){min-height:0;font-size:11px;line-height:1.6}
.screening-chapters{padding-top:8px}
.screening-chapters-title{margin-bottom:2px;font-size:8px}
.screening-chapters div{min-height:30px;font-size:11px}
.screening-navigation{margin-top:11px}
.screening-navigation button{min-height:36px}
.screening-status{margin-top:7px}
.screening-library{height:135px;min-height:0;margin:0;overflow:hidden}
.screening-library-heading{margin-bottom:3px;padding-bottom:3px;align-items:center}
.screening-library-heading h3{margin-top:2px;font-size:clamp(19px,1.8vw,28px)}
.screening-film-grid{display:flex;height:82px;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#ac8d5f #10232b;padding-bottom:3px}
.screening-film-card{flex:0 0 145px;width:145px;height:76px;min-height:0;overflow:hidden;padding:0 0 2px;scroll-snap-align:start}
.screening-film-card:hover{transform:none}
.screening-film-card img{height:43px;aspect-ratio:auto;object-fit:cover}
.screening-film-card>span{grid-template-columns:24px 1fr;gap:3px;padding:6px 7px 0}
.screening-film-card small{font-size:9px}
.screening-film-card strong{min-height:0;font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screening-film-card em{display:none}

.site-footer{position:relative;min-height:0;height:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,3vw,52px);padding:0 clamp(28px,3.6vw,68px);background:#04141c;border-top:1px solid rgba(223,190,135,.23);font-size:10px;letter-spacing:.09em}
.chapter-controls{display:flex;align-items:center;gap:17px;min-width:0;color:#e8d3ae}
.chapter-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(224,188,131,.5);background:transparent;color:#ecd4a7;font:19px/1 system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.chapter-arrow:hover{background:#d2ac6d22;border-color:#e6c58e}
.chapter-arrow:disabled{opacity:.28;cursor:default}
.chapter-position{display:flex;align-items:center;gap:8px;color:#849aa0;font:12px/1 system-ui,sans-serif;white-space:nowrap}
.chapter-position b{color:#e8c48b;font-weight:500;font-size:19px}
.chapter-position i{height:1px;width:20px;background:#8d7962}
.chapter-current-name{margin-left:9px;color:#d8c9aa;font-size:12px;letter-spacing:.13em;white-space:nowrap}
.chapter-instruction{justify-self:center;margin:0;color:#849da1;font:9px/1.3 system-ui,sans-serif;letter-spacing:.2em;white-space:nowrap}
.footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;color:#819ba0;font:8px/1.3 system-ui,sans-serif;letter-spacing:.1em;white-space:nowrap}
.footer-meta span:last-child{color:#6d878f}
.footer-meta a:hover{color:#d7bd8c}
.chapter-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#223037}
.chapter-progress span{display:block;height:100%;width:16.6667%;background:#ddb879;box-shadow:0 0 14px #e8c58a99;transition:transform .45s ease}

@media(max-width:1100px){
  .chapter-nav{gap:3px}.chapter-nav button{font-size:10px;letter-spacing:.04em;padding:0 4px}
  .header-marker{display:none}
  .panel-copy,.panel-music .panel-copy,.panel-civilization .panel-copy,.panel-lushun .panel-copy,.panel-atelier .panel-copy{width:min(49vw,570px)}
  .panel-copy h1,.panel-copy h2,.panel-music .panel-copy h1,.panel-civilization .panel-copy h2,.panel-lushun .panel-copy h2,.panel-atelier .panel-copy h2{font-size:clamp(55px,6vw,82px)}
  .screening-section{grid-template-rows:auto minmax(0,1fr) 135px;padding-left:30px;padding-right:30px}
  .screening-library{height:135px}.screening-film-grid{height:82px}.screening-film-card{height:76px}.screening-film-card img{height:43px}
  .screening-layout{grid-template-columns:minmax(0,1.4fr) minmax(260px,.7fr)}
  .footer-meta{display:none}.site-footer{grid-template-columns:auto 1fr}.chapter-instruction{justify-self:end}
}

@media(max-width:760px){
  :root{--topbar:62px;--bottombar:64px}
  .site-header{padding:0 19px}.brand{min-width:0}.brand-seal{width:34px;height:34px;font-size:15px}.brand-name strong{font-size:16px}.brand-name small{font-size:8px}
  .chapter-nav{display:none}.header-marker{display:flex;margin-left:auto;font-size:8px}.header-marker b{font-size:9px}
  .museum-panel{height:100%;min-height:0}
  .panel-top{top:23px;left:23px;right:23px;font-size:8px;letter-spacing:.1em}.open-state,.preview-state{font-size:8px;letter-spacing:.04em}.panel-top i{width:12px}
  .panel-copy,.panel-music .panel-copy,.panel-civilization .panel-copy,.panel-lushun .panel-copy,.panel-atelier .panel-copy{left:26px;right:26px;bottom:clamp(54px,9vh,92px);width:auto}
  .panel-kicker,.panel-lushun .panel-kicker{margin-bottom:10px;font-size:8px;letter-spacing:.18em}
  .panel-copy h1,.panel-copy h2,.panel-music .panel-copy h1,.panel-civilization .panel-copy h2,.panel-lushun .panel-copy h2,.panel-atelier .panel-copy h2{font-size:clamp(43px,10vw,66px)}
  .panel-subtitle,.panel-music .panel-subtitle,.panel-civilization .panel-subtitle,.panel-lushun .panel-subtitle,.panel-atelier .panel-subtitle{margin-top:12px;font-size:15px}
  .panel-desc,.panel-music .panel-desc,.panel-civilization .panel-desc,.panel-lushun .panel-desc,.panel-atelier .panel-desc{max-width:370px;margin-top:12px;font-size:11px;line-height:1.65}
  .panel-action,.panel-civilization .panel-action,.panel-lushun .panel-action,.panel-atelier .panel-action{min-width:190px;min-height:41px;margin-top:11px;font-size:13px}
  .panel-edge{display:none}
  .panel-music .panel-image{background-size:auto 90%;background-position:center top}
  .panel-music::before{background:linear-gradient(0deg,#021116 0%,rgba(2,17,22,.95) 26%,rgba(2,17,22,.45) 67%,rgba(2,17,22,.02) 100%)}
  .civilization-case{left:53%;top:33%;width:39%;height:43%}
  .panel-civilization::before{background:linear-gradient(0deg,#140a0b 0%,rgba(20,8,9,.93) 31%,rgba(20,8,9,.18) 80%)}
  .panel-lushun::before{background:linear-gradient(0deg,#020916 0%,rgba(2,9,22,.9) 30%,rgba(2,9,22,.02) 84%)}
  .panel-lushun .cosmic-glow,.panel-lushun .celestial-ring{left:50%;top:34%}
  .panel-lushun .ring-one{width:81%}.panel-lushun .ring-two{width:57%}.panel-lushun .ring-three{width:24%;height:52%}.hero-star{left:50%;top:31%}
  .panel-lushun .sky-coordinate{top:58px;right:25px;font-size:8px}
  .portrait-copy{left:26px;right:26px;bottom:clamp(54px,9vh,92px);width:auto}
  .portrait-copy .panel-kicker{margin-bottom:8px;font-size:8px}.portrait-copy h2{font-size:clamp(43px,10vw,66px)}.portrait-copy p{margin-top:11px;font-size:12px}.portrait-copy .panel-action{min-width:190px;min-height:41px;margin-top:11px;font-size:13px}
  .souvenir-card,.panel-portrait .souvenir-card{top:9%;right:50%;width:170px;height:252px;padding:10px;border-width:7px;transform:translateX(50%) rotate(6deg)}
  .panel-portrait:hover .souvenir-card{transform:translateX(50%) rotate(3deg)}
  .panel-portrait .souvenir-card strong{font-size:15px;margin:5px 0}.panel-portrait .card-topline{font-size:4px}.panel-portrait .card-photo{height:60%}.panel-portrait .card-caption{font-size:6px;margin-top:5px}.panel-portrait .card-foot{font-size:4px;margin-top:5px}
  .panel-atelier::before{background:linear-gradient(0deg,#180705 0%,rgba(25,7,5,.95) 32%,rgba(25,7,5,.16) 87%)}
  .panel-atelier .atelier-panel-object{left:52%;top:29%;width:59%;height:48%}
  .screening-section{display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;height:100%;padding:24px 20px 28px}
  .screening-heading{padding:0 0 13px}.screening-heading h2{font-size:35px}.screening-heading p{font-size:10px}
  .screening-layout{display:block;height:auto}.screening-frame{width:100%;height:auto;aspect-ratio:16/9}.screening-sidebar{height:auto;padding-top:16px}
  .screening-sidebar h3{font-size:28px}.screening-chapters{margin-top:10px}.screening-library{height:auto;margin-top:26px;overflow:visible}.screening-library-heading h3{font-size:22px}.screening-library-credit{display:none}
  .screening-film-grid{height:128px}.screening-film-card{flex-basis:154px;width:154px;height:120px}.screening-film-card img{height:81px}
  .site-footer{display:flex;justify-content:space-between;padding:0 19px}.chapter-controls{gap:11px}.chapter-arrow{width:34px;height:34px}.site-footer .chapter-controls .chapter-position{display:flex;gap:5px}.chapter-position b{font-size:17px}.chapter-position i{width:12px}.site-footer .chapter-controls .chapter-current-name{display:none}.chapter-instruction{display:none}
}

@media(max-height:690px) and (min-width:761px){
  .panel-copy,.panel-music .panel-copy,.panel-civilization .panel-copy,.panel-lushun .panel-copy,.panel-atelier .panel-copy,.portrait-copy{bottom:30px}
  .panel-copy h1,.panel-copy h2,.panel-music .panel-copy h1,.panel-civilization .panel-copy h2,.panel-lushun .panel-copy h2,.panel-atelier .panel-copy h2,.portrait-copy h2{font-size:clamp(48px,5vw,72px)}
  .panel-desc,.panel-music .panel-desc,.panel-civilization .panel-desc,.panel-lushun .panel-desc,.panel-atelier .panel-desc{margin-top:10px}
  .panel-action,.panel-civilization .panel-action,.panel-lushun .panel-action,.panel-atelier .panel-action{margin-top:10px}
  .screening-section{grid-template-rows:auto minmax(0,1fr) 125px;gap:10px;padding-top:15px;padding-bottom:10px}
  .screening-heading h2{font-size:33px}.screening-heading p{display:none}
  .screening-library{height:125px}.screening-library-heading{margin-bottom:5px;padding-bottom:3px}.screening-library-heading h3{font-size:19px}
  .screening-film-grid{height:90px}.screening-film-card{height:86px;flex-basis:135px;width:135px}.screening-film-card img{height:54px}
  .screening-sidebar>p:not(.screening-status),.screening-chapters{display:none}
}

@media(max-height:620px) and (max-width:760px){
  .panel-copy,.panel-music .panel-copy,.panel-civilization .panel-copy,.panel-lushun .panel-copy,.panel-atelier .panel-copy,.portrait-copy{bottom:21px}
  .panel-desc,.panel-music .panel-desc,.panel-civilization .panel-desc,.panel-lushun .panel-desc,.panel-atelier .panel-desc{display:none}
  .souvenir-card,.panel-portrait .souvenir-card{top:13px;width:132px;height:196px}
}

@media(prefers-reduced-motion:reduce){.horizontal-experience{scroll-behavior:auto}.chapter-progress span{transition:none}}