:root{--maroon:#5c120c;--ink:#562504;--gold:#e8b563;--orange:#d88e37;--cream:#f4dfc4;--header-height:clamp(66px,5.52vw,106px);--serif:"Noto Serif TC","Songti TC","PMingLiU",serif;--sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
body{margin:0;background:var(--maroon);color:var(--ink);font-family:var(--serif)}
button,a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #8bbbc7;outline-offset:6px}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:sticky;top:0;z-index:20;height:var(--header-height);background:var(--maroon);color:white}
.site-header nav{height:100%;max-width:1920px;margin:auto;display:flex;align-items:center;justify-content:space-evenly;padding:0 5.5%;gap:16px}
.site-header nav a{position:relative;text-decoration:none;white-space:nowrap;font-size:clamp(18px,2.083vw,40px);font-weight:700;letter-spacing:.04em;padding:10px 0;transition:color .2s}
.site-header nav a:hover,.site-header nav a[aria-current="location"]{color:#ffd77a}
.site-header nav a::after{position:absolute;content:"";bottom:2px;left:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transition:transform .2s}
.site-header nav a[aria-current="location"]::after{transform:scaleX(1)}
.mobile-brand,.menu-toggle{display:none}
.mobile-credits{display:none}
.mobile-map{display:none}
main,.scene-footer{width:100%;margin:0}
.scene{position:relative;container-type:inline-size;aspect-ratio:var(--scene-ratio);isolation:isolate;scroll-margin-top:0}
.copy[id]{scroll-margin-top:16px}
.scene-art{display:block;width:100%;height:auto}
.copy{position:absolute;left:var(--x);top:var(--y);width:var(--w);font-family:var(--sans);font-size:1.5625cqw;line-height:1.78}
.copy h2,.copy h3,.copy p{margin:0}
.copy h2{font-family:var(--serif);font-size:2.708333cqw;font-weight:700;line-height:1.18}
.copy .english{font-family:Georgia,"Times New Roman",serif;font-size:1.875cqw;line-height:1.22;margin-top:.15em}
.copy h3{font-family:var(--serif);font-size:1.875cqw;font-weight:600;line-height:1.35;margin:1.1em 0 .9em}
.copy>p:not(.english):not(.interaction-label):not(.availability):not(.scroll-button)+p{margin-top:1.7em}
.copy.light{color:#fff2df}
.gold-heading h2,.gold-heading .english{color:#f1c163}
.copy.align-right{text-align:right}
@media(min-width:701px){
 .scene-about .copy>p:not(.english){font-size:1.458333cqw;line-height:1.9}
 .scene-about .copy>p:not(.english)::before{content:"";float:left;width:31%;height:14em;shape-outside:polygon(0 3.8em,100% 3.8em,100% 100%,0 100%)}
}
.quote-copy{font-family:var(--serif);text-align:center;color:#fff9e7;font-size:1.875cqw;line-height:1.65;white-space:nowrap}
.quote-copy>p+p{margin-top:0!important}
.biography{font-size:1.145833cqw;line-height:2.05}
.biography h2{font-family:var(--sans);font-size:1.6667cqw;line-height:1.3;margin-bottom:.7em;font-weight:700}
.biography>p+p{margin-top:0!important}
.interaction{font-family:var(--sans);font-size:1.25cqw;color:var(--orange);line-height:1.5}
.interaction-label{font-size:2.29167cqw;font-weight:700;color:white;line-height:1.35;width:11.5cqw;white-space:nowrap;margin-left:.12em!important}
.interaction h3{font-family:var(--sans);font-size:2.29167cqw;font-weight:700;line-height:1.3;margin:1.35em 0 .25em .6em;white-space:nowrap}
.interaction>p:not(.interaction-label){margin-left:1.15em;max-width:21cqw}
.utility-title{color:#a96822}
.utility-action{text-align:center;color:#a96822}
.scroll-button{display:flex;align-items:center;justify-content:center;text-decoration:none;aspect-ratio:1002/366;width:100%;font-family:var(--serif);font-size:2.70833cqw;font-weight:700;line-height:1.2;background:transparent url('assets/scroll-frame.webp') center/100% 100% no-repeat;border:0}
.scroll-button.is-unavailable{cursor:default}
.availability{font-family:var(--sans);font-size:1cqw;letter-spacing:.12em;line-height:1.6;margin-top:.6em!important}
.map-hitarea{position:absolute;left:43.3%;top:21.6%;width:37.4%;height:67.7%;border:0;background:transparent;cursor:zoom-in}
.map-hitarea:hover{outline:2px solid #a96822;outline-offset:6px}
.back-to-top{position:fixed;bottom:24px;right:24px;z-index:15;width:48px;height:48px;display:grid;place-items:center;background:var(--maroon);color:var(--gold);border:1px solid var(--gold);border-radius:50%;box-shadow:0 3px 14px #31070030}
.back-to-top[hidden]{display:none}
.skip-link{position:fixed;top:8px;left:8px;z-index:40;padding:12px 20px;background:#fff;color:var(--maroon);transform:translateY(-150%);font-family:var(--sans);font-size:16px}
.skip-link:focus{transform:translateY(0)}
.sr-only,.hero-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{width:min(880px,92vw);max-height:92dvh;padding:20px;border:1px solid #b58448;background:#eee6d9;color:var(--maroon);border-radius:4px;overscroll-behavior:contain}
dialog::backdrop{background:#290b07cc}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.dialog-header h2{font-size:26px;margin:0}
.dialog-close{display:grid;place-items:center;width:44px;height:44px;background:transparent;border:1px solid #a06c47;color:var(--maroon)}
dialog>img{display:block;width:100%;height:auto}
.panorama-embed{display:block;width:88%;height:80cqw;margin:0 auto;border:0;max-height:740px}
.has-panorama{aspect-ratio:auto;padding-bottom:40px;background:#ddd9d3}

@media(min-width:1921px){:root{--header-height:106px}.site-header nav a{font-size:40px}}
@media(max-width:700px){
 :root{--header-height:64px}
 .site-header{display:flex;justify-content:space-between;align-items:center;padding:0 22px}
 .mobile-brand{display:block;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:.08em}
 .menu-toggle{display:flex;gap:10px;align-items:center;padding:10px 0 10px 14px;border:0;background:none;color:#fff;font-family:var(--sans);font-size:16px}
 .site-header nav{position:absolute;top:64px;left:0;right:0;display:none;height:auto;padding:10px 22px 18px;background:var(--maroon);box-shadow:0 8px 18px #32060030}
 .site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .site-header nav a{font-size:18px;letter-spacing:.05em;padding:14px 6px;min-height:48px;border-top:1px solid #ffffff1c}
 .site-header nav a::after{display:none}
 .scene{aspect-ratio:auto;min-height:0;container-type:inline-size}
 .scene-art{position:relative;width:100%;height:auto}
 picture{display:block}
 picture .scene-art{aspect-ratio:auto}
 .copy{position:relative;left:auto;top:auto;width:auto;margin:0 24px;padding:28px 0 36px;font-size:17px;line-height:1.9}
 .copy h2{font-size:30px;line-height:1.35;letter-spacing:.015em}
 .copy .english{font-size:18px;line-height:1.4;margin-top:.3em}
 .copy h3{font-size:21px;line-height:1.5;margin:1.2em 0 .75em}
 .copy>p:not(.english):not(.interaction-label):not(.availability):not(.scroll-button)+p{margin-top:1.2em}
 .copy.align-right{text-align:left}
 .hero-accessible{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:24px;background:#804817;color:#fff2df}
 .hero-accessible h1{font-size:25px;line-height:1.5;margin:0 0 14px;letter-spacing:.03em}
 .hero-accessible p{font-family:var(--sans);font-size:16px;line-height:1.7;margin:0}
 .scene-quote{background:#c99c51}
 .quote-copy{font-size:19px;line-height:1.9;white-space:normal;text-align:center;padding:20px 0 44px}
 .scene-intro{background:#ffd77a}
 .scene-intro>.copy:first-of-type{background:#faecd0;padding:28px 22px;border-top:4px solid #dda45a;margin:0 18px}
 .biography{margin:28px 22px 0;padding:24px;background:#c6ad16;max-width:calc(100% - 44px)}
 .biography h2{font-size:25px;line-height:1.4;margin-bottom:.6em}
 .biography p{font-size:16px}
 .scene-robbery{background:#7e481c}
 .scene-about,.scene-waves{background:#d88e37}
 .scene-fingerprint,.scene-stamp,.scene-science,.scene-naming{background:#f4dfc4}
 .scene-legacy{background:#f4d28d}
 .scene-restoration{background:#f5d596}
 .scene-return,.scene-future{background:#5c120c}
 .interaction{font-size:16px;line-height:1.8;padding:28px 0}
 .interaction .interaction-label{display:inline-block;width:auto;padding:7px 22px 8px 12px;font-size:19px;background:#596a55;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);margin:0!important}
 .interaction.pink .interaction-label{background:#d87097}
 .interaction.maroon .interaction-label{background:#984b47}
 .interaction h3{font-size:23px;margin:.75em 0 .4em;white-space:normal}
 .interaction>p:not(.interaction-label){margin-left:0;max-width:none}
 .scene-education,.scene-floor-plan,.scene-panorama{background:#ddd9d3}
 .utility-title{padding:16px 0 12px;margin:0 24px}
 .utility-title h2{font-size:29px}
 .utility-action{padding:16px 0 40px}
 .scroll-button{min-height:64px;font-size:26px}
 .availability{font-size:14px;margin-top:12px!important}
 .map-hitarea,.scene-floor-plan>.scene-art{display:none}
 .mobile-map{display:block;width:calc(100% - 48px);margin:0 24px 32px;border:0;padding:0;background:transparent;color:#a96822;font-family:var(--sans);font-size:14px;line-height:1.8;cursor:zoom-in}
 .mobile-map img{display:block;width:100%;height:auto;margin-bottom:12px}
 .scene-footer .scene-art{display:none}
 .mobile-credits{display:block;background:var(--maroon);color:#fff2df;padding:22px 24px 34px;font-family:var(--sans);font-size:14px;line-height:1.8}
 .mobile-credits p{margin:16px 0}
 .mobile-credits span{display:block;color:var(--gold);font-size:13px;letter-spacing:.12em;margin-bottom:4px}
 .back-to-top{bottom:18px;right:16px;width:44px;height:44px}
 dialog{padding:14px}
 .dialog-header h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.site-header,.back-to-top,.menu-toggle,dialog,.skip-link{display:none}main{max-width:none}.copy{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
