/* Smoke, cinnabar and fire: an independent museum identity. */
:root{--museum-navy:#172c2d;--museum-gold:#d5ba86}
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;background:#172c2d;border-bottom:1px solid #b6996655}
.masthead .brand{justify-self:start;font-size:24px;gap:12px}.masthead .brand small{font-size:8px;letter-spacing:.08em}.masthead nav{grid-column:2;margin:0;height:auto;gap:9px}.masthead nav a,.masthead nav button{position:relative;padding:18px 18px;border:0;font-size:16px;letter-spacing:.08em;color:#d7ceb9;background:none!important;gap:0}.masthead nav a:before,.masthead nav button:before{display:none}.masthead nav [aria-current=page]{color:#f7e5bf}.masthead nav [aria-current=page]:after{content:'';position:absolute;left:calc(50% - 3px);bottom:3px;width:6px;height:6px;border:0;background:#ba5942;transform:rotate(45deg)}.masthead nav a:hover,.masthead nav button:hover{color:#ffe5aa}.masthead .seal{border:1px solid #bd8064;color:#dfb394;border-radius:3px 9px 3px 3px}
.gate .gate-heading{top:17%}.gate .gate-entry{margin-top:24px}.gate .gate-image{filter:brightness(1.25) saturate(.94);transform-origin:72% 50%}.gate-shade{background:linear-gradient(90deg,#0b222b99,transparent 73%),linear-gradient(0deg,#10252777,transparent 30%)}
#enter.light-entry{position:relative;display:flex;align-items:center;justify-content:center;width:146px;height:104px;padding:0;border:0;color:#fbe4b8;background:transparent;font:21px var(--serif);letter-spacing:.15em;isolation:isolate}
#enter.light-entry:before{content:'';position:absolute;inset:0 11px;border:1px solid #d5bd8355;border-top-color:#f5d49b;border-right-color:transparent;border-radius:50%;transform:rotate(-27deg);transition:transform .8s,border-color .8s}
#enter.light-entry:after{content:'';position:absolute;left:29px;top:11px;width:5px;height:5px;background:#ffedba;border-radius:50%;box-shadow:0 0 12px 4px #ffc57577;animation:entry-glow 3s ease-in-out infinite}
#enter.light-entry:hover:before{transform:rotate(12deg) scale(1.08);border-left-color:#f5d49b}#enter.light-entry:hover{color:#fff6df}#enter.light-entry:focus-visible{outline:2px solid #eec786;outline-offset:8px;border-radius:50%}
@keyframes entry-glow{50%{opacity:.45;box-shadow:0 0 20px 7px #ffc57533}}
.gate-threshold{position:absolute;inset:0;pointer-events:none;z-index:2;perspective:900px;overflow:hidden}.gate-threshold i{position:absolute;top:-4%;bottom:-4%;width:4.8%;background:repeating-linear-gradient(90deg,#142829dd 0 8px,#75624488 9px 10px,#1b2826dd 11px 25px);box-shadow:0 0 45px #071a21aa;border-inline:1px solid #ac8b5055}.gate-threshold i:first-child{left:0;transform-origin:left}.gate-threshold i:last-child{right:0;transform-origin:right}
.gate-transit{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(ellipse at 72% 50%,#ffda8544,transparent 45%),linear-gradient(90deg,#14272e00,#14272e22)}
#skip-journey{position:absolute;right:5%;bottom:65px;z-index:7;color:#f2dfbb;border-bottom:1px solid #c3a67688;padding:8px;font:12px var(--sans)}
#gate.is-travelling .gate-image{animation:travel-landscape 2.6s cubic-bezier(.45,0,.18,1) forwards!important}
#gate.is-travelling .gate-heading{animation:travel-copy .65s ease forwards!important;pointer-events:none}
#gate.is-travelling .gate-threshold i:first-child{animation:travel-door-left 2.6s ease-in forwards}#gate.is-travelling .gate-threshold i:last-child{animation:travel-door-right 2.6s ease-in forwards}
#gate.is-travelling .gate-transit{animation:travel-light 2.6s ease-in-out forwards}#gate.is-travelling .mist{animation:travel-mist 2.6s ease-in forwards}.theatre.arriving{animation:arrival 1s ease-out!important}
@keyframes travel-landscape{0%{transform:scale(1.055)}100%{transform:scale(1.65) translateX(-4%);filter:brightness(1.45) saturate(.85)}}
@keyframes travel-copy{to{opacity:0;translate:-25px 0}}@keyframes travel-door-left{to{transform:translateX(-160%) rotateY(-65deg) scale(1.5)}}@keyframes travel-door-right{to{transform:translateX(160%) rotateY(65deg) scale(1.5)}}@keyframes travel-light{0%{opacity:0}65%{opacity:.85}100%{opacity:1;background-color:#14272e}}
@keyframes travel-mist{to{transform:scale(1.5) translateY(8%);opacity:.4}}@keyframes arrival{from{opacity:.15;filter:brightness(1.3)}to{opacity:1;filter:brightness(1)}}
@media(max-width:1250px){.masthead{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}.masthead .brand{font-size:20px;gap:8px}.masthead .brand small{font-size:7px}.masthead nav{justify-self:center}.masthead nav a,.masthead nav button{padding:18px 12px;font-size:14px}}
@media(min-width:1450px){.masthead .brand{font-size:27px}.masthead nav a,.masthead nav button{padding-inline:22px}}
@media(max-width:950px){.masthead{display:flex}.masthead nav{background:#172c2d;justify-content:center}.masthead nav a,.masthead nav button{justify-content:center;padding:18px 14px}.gate .gate-heading{top:16%}#enter.light-entry{width:135px;height:96px;font-size:20px}}
@media(prefers-reduced-motion:reduce){#enter.light-entry:after,.gate.is-travelling *,.theatre.arriving{animation:none!important;transition:none!important}.gate-threshold{display:none}}

.theatre #group-sample{color:#dec398;font-size:11px;border-bottom:1px solid #d3b27b55;margin-top:0;padding:4px 0 9px}.theatre .step-nav{margin-top:16px}
/* Disable the old paper-white page-change veil. */
#gate.is-travelling:after{content:none;animation:none}

/* Keep the magnified exhibit visible beside its explanatory label. */
#reader.detail-performance::backdrop{background:#14233120;backdrop-filter:none}