@charset "UTF-8";

/* A horizontal exhibition spine; each chapter keeps its own vertical reading space. */
body.horizontal-layout{display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;overflow:hidden}
body.horizontal-layout>header{position:relative;z-index:20;flex:0 0 auto}
body.horizontal-layout>main.horizontal-track{display:flex;flex:1 1 auto;width:100%;min-height:0;max-height:none;margin:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
body.horizontal-layout>main.horizontal-track::-webkit-scrollbar{display:none}
.horizontal-track>.horizontal-panel{position:relative;flex:0 0 100%;width:100%;min-width:0;max-width:none!important;height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;overflow-x:hidden;overflow-y:auto;scroll-snap-align:start;scroll-snap-stop:always;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#b8a47d transparent}
.horizontal-track>.horizontal-panel[hidden]{display:none}
.horizontal-anchor{position:absolute;top:0;left:0;width:1px;height:1px}

.horizontal-pagination{position:relative;z-index:22;display:grid;grid-template-columns:minmax(110px,1fr) minmax(210px,1.2fr) minmax(110px,1fr);align-items:center;gap:16px;flex:0 0 62px;padding:0 clamp(20px,4vw,65px);background:#102b22;color:#f4eddd;border-top:1px solid #486252;box-shadow:0 -8px 25px rgba(7,26,19,.14)}
.horizontal-pagination button{border:0;background:none;color:#e8d0a2;cursor:pointer;font-size:12px;letter-spacing:.08em;white-space:nowrap}
.horizontal-pagination button:disabled{color:#768b78;cursor:default}
.horizontal-previous{text-align:left}.horizontal-next{text-align:right}
.horizontal-pagination-status{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;height:100%;overflow:hidden;white-space:nowrap}
.horizontal-pagination-status strong{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#f6f0df;font-size:12px;font-weight:600;letter-spacing:.08em}
.horizontal-pagination-status span{color:#b4c9b5;font:500 10px/1 Arial,sans-serif;letter-spacing:.06em}
.horizontal-pagination-status i{position:absolute;bottom:0;left:0;height:3px;background:#d2ae70;transition:width .25s ease}
.horizontal-layout .site-guide-launcher{bottom:82px}

.horizontal-route-panel{isolation:isolate;background:#102b25;color:#f7efdf}
.horizontal-route-map{position:absolute;inset:0;z-index:-2;overflow:hidden}
.horizontal-route-map img{width:70%;height:100%;max-width:none;object-fit:cover;object-position:center var(--route-map-y,35%);filter:saturate(.8) contrast(1.02) brightness(.8)}
.horizontal-route-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,28,22,.2) 0%,rgba(11,35,27,.45) 40%,#102b25 70%),linear-gradient(0deg,rgba(7,23,19,.7),transparent 25%);pointer-events:none}
.horizontal-route-panel[data-focus="origin"]{--route-map-y:25%}.horizontal-route-panel[data-focus="lake"]{--route-map-y:40%}.horizontal-route-panel[data-focus="shengle"]{--route-map-y:55%}.horizontal-route-panel[data-focus="pingcheng"]{--route-map-y:70%}.horizontal-route-panel[data-focus="luoyang"]{--route-map-y:86%}
.horizontal-route-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,430px);grid-template-rows:auto 1fr auto;gap:18px 40px;width:min(100% - 88px,1440px);min-height:100%;margin:auto;padding:clamp(32px,5vh,58px) 0 27px}
.horizontal-route-heading{grid-column:1;grid-row:1;align-self:start}
.horizontal-route-heading>span{color:#d6b578;font-size:11px;letter-spacing:.2em;font-weight:700}
.horizontal-route-heading h2{margin:20px 0 10px;font:500 clamp(49px,5.5vw,82px)/1.15 "Songti SC","STSong",serif;letter-spacing:.07em}
.horizontal-route-heading>a{display:inline-block;margin-top:8px;padding-bottom:6px;border-bottom:1px solid #a8b4a1;color:#dae4d5;text-decoration:none;font-size:12px}
.horizontal-route-card{grid-column:2;grid-row:1/3;align-self:center;width:100%;min-height:0;margin:0;padding:clamp(24px,3vw,35px);box-shadow:0 25px 80px rgba(0,0,0,.27)}
.horizontal-route-stops{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:clamp(12px,2vw,31px);min-width:0;padding-top:16px;border-top:1px solid rgba(231,212,170,.4)}
.horizontal-route-stops a{flex:1;min-width:0;padding:7px 0;color:#b6c5b5;text-decoration:none;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.horizontal-route-stops a[aria-current]{color:#f0cd8b;font-weight:700}

.horizontal-film-panel{display:flex;align-items:center;background:#f4f0e6;color:#19332e}
.horizontal-film-panel .hall-film-index.film-archive{width:min(100% - 88px,1440px);padding-top:45px;padding-bottom:45px}
.horizontal-layout .hero-inner{min-height:calc(100% - 115px)}
.horizontal-layout .hero-route{min-height:115px}
.horizontal-layout .history-simple{padding-top:52px;padding-bottom:52px}
.horizontal-layout .history-simple-head{margin-bottom:34px}
.horizontal-layout .source-simple{padding-top:52px;padding-bottom:55px}
.horizontal-layout .museum-world{padding-top:35px}
.horizontal-layout .closing-simple>.footer-simple{position:relative;z-index:2;margin-top:0}

.horizontal-layout .about-hero{grid-template-rows:minmax(0,1fr) auto}
.horizontal-layout .about-hero-copy,.horizontal-layout .about-map{min-height:0}
.horizontal-layout .about-hero>.about-index{grid-column:1/-1;grid-row:2}
.horizontal-layout .chapter-hero{grid-template-rows:minmax(0,1fr) auto}
.horizontal-layout .chapter-hero-art{min-height:0}
.horizontal-layout .chapter-hero>.chapter-nav{grid-column:1/-1;grid-row:2}
.horizontal-layout .chapter-interact>footer{grid-column:1/-1;margin:30px calc(-1 * clamp(22px,5vw,82px)) calc(-1 * 95px)}
.horizontal-layout .letters-next,.horizontal-layout .archive-next{flex-wrap:wrap}
.horizontal-layout .letters-next>footer,.horizontal-layout .archive-next>footer{flex:0 0 100%;margin-top:35px}
.horizontal-layout .archive-next{max-width:none}
.horizontal-layout .archive-workshop{max-width:none}

@media(max-width:900px){
  .horizontal-route-shell,.horizontal-film-panel .hall-film-index.film-archive{width:min(100% - 52px,1440px)}
  .horizontal-route-shell{grid-template-columns:minmax(0,1fr) minmax(290px,48%)}
  .horizontal-route-card{padding:24px}
  .horizontal-route-card .card-color{margin-top:20px}
  .horizontal-route-card h3{font-size:38px}
  .horizontal-route-stops{gap:13px}
  .horizontal-route-stops a{font-size:9px}
  .horizontal-layout .chapter-hero{grid-template-columns:1fr}
  .horizontal-layout .chapter-hero>.chapter-nav{grid-row:auto}
  .horizontal-layout .chapter-hero-art{min-height:310px}
}

@media(max-width:740px){
  .horizontal-pagination{grid-template-columns:62px minmax(0,1fr) 62px;gap:8px;flex-basis:54px;padding:0 14px}
  .horizontal-pagination button{font-size:0}
  .horizontal-pagination button::before{font-size:20px}
  .horizontal-previous::before{content:"←"}
  .horizontal-next::before{content:"→"}
  .horizontal-pagination-status{flex-direction:column;gap:4px}
  .horizontal-pagination-status strong{font-size:11px}
  .horizontal-pagination-status span{font-size:9px}
  .horizontal-layout .site-guide-launcher{bottom:66px}
  .horizontal-route-map img{width:100%;height:72%;object-position:center var(--route-map-y,35%)}
  .horizontal-route-panel::after{background:linear-gradient(0deg,#102b25 0%,rgba(16,43,37,.93) 28%,rgba(12,38,30,.12) 80%)}
  .horizontal-route-shell{display:flex;flex-direction:column;align-items:stretch;width:min(100% - 34px,620px);padding:25px 0 22px}
  .horizontal-route-heading h2{margin:8px 0 3px;font-size:38px}
  .horizontal-route-heading>a{font-size:10px}
  .horizontal-route-card{align-self:stretch;margin-top:clamp(90px,19vh,180px);padding:22px 23px}
  .horizontal-route-card h3{font-size:36px}
  .horizontal-route-stops{flex:0 0 auto;width:100%;overflow-x:auto;gap:20px;scrollbar-width:thin}
  .horizontal-route-stops a{flex:0 0 auto;font-size:10px}
  .horizontal-film-panel .hall-film-index.film-archive{width:min(100% - 34px,1440px);padding-top:30px;padding-bottom:40px}
  .horizontal-layout .hero-inner{min-height:590px}
  .horizontal-layout .history-simple{padding-top:35px;padding-bottom:35px}
  .horizontal-layout .source-simple{padding-top:36px;padding-bottom:40px}
  .horizontal-layout .about-hero{grid-template-rows:auto auto auto}
  .horizontal-layout .about-hero>.about-index{grid-row:3}
  .horizontal-layout .chapter-hero>.chapter-nav{grid-row:3}
  .horizontal-layout .chapter-interact>footer{margin:25px -20px -65px}
}

@media(max-height:550px) and (min-width:620px){
  .horizontal-pagination{flex-basis:46px}
  .horizontal-route-shell{padding-top:15px;padding-bottom:12px}
  .horizontal-route-heading h2{font-size:34px;margin:7px 0}
  .horizontal-route-card{min-height:0;padding:15px 20px}
  .horizontal-route-card .card-color{margin-top:10px}
  .horizontal-route-card h3{font-size:31px;margin-bottom:9px}
  .horizontal-route-card p:not(.card-kicker){font-size:11px;line-height:1.6}
  .horizontal-route-card a{margin-top:9px}
  .horizontal-route-stops{padding-top:6px}
}

@media(prefers-reduced-motion:reduce){
  body.horizontal-layout>main.horizontal-track{scroll-behavior:auto}
  .horizontal-pagination-status i{transition:none}
}
