:root{
  color-scheme: dark;
  --ink:#f1ebdf; --muted:#b9ae9b; --panel:rgba(22,19,16,.9); --line:#6d5b3f;
  --brass:#d2ae66; --ground:#15120f; --focus:#ffd98a;
}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 "Libre Franklin",system-ui,sans-serif;overflow:hidden}
#stage{position:fixed;inset:0;outline:none}
#stage:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)}
canvas{display:block;touch-action:none}
a{color:var(--brass)}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--brass);color:#1a1409;padding:8px 12px;border-radius:4px}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px #120e0a}
.hud{position:fixed;z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(4px)}
#title{top:calc(12px + env(safe-area-inset-top,0px));left:16px;padding:10px 14px;max-width:min(440px,calc(100% - 32px))}
#title h1{font:700 18px/1.2 Cinzel,Georgia,serif;letter-spacing:.05em;margin:0;text-wrap:balance}
#title p{margin:4px 0 0;color:var(--muted);font-size:12.5px}
#help{bottom:calc(12px + env(safe-area-inset-bottom,0px));left:16px;padding:8px 12px;font-size:12.5px;color:var(--muted);max-width:calc(100% - 32px)}
#help kbd{font:600 11px/1 "Libre Franklin",sans-serif;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:2px 5px;color:var(--ink)}
#info{right:16px;top:calc(12px + env(safe-area-inset-top,0px));width:min(380px,calc(100% - 32px));max-height:calc(100% - 110px);overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
#info h2{font:700 16px/1.25 Cinzel,Georgia,serif;letter-spacing:.03em;margin:0;text-wrap:balance}
#info .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
#info p{margin:0}
#info ul{margin:0;padding-left:18px}
#info img{width:100%;height:auto;border-radius:3px;background:#000}
#info .more{max-height:9.5em;overflow:auto;color:var(--muted);font-size:13.5px}
#buttons{position:fixed;z-index:10;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:8px}
#buttons button{position:static;padding:8px 14px;color:var(--ink);font:600 13px "Libre Franklin",sans-serif;cursor:pointer}
#list{inset:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:20;overflow:auto;padding:0 18px 18px;background:rgba(18,15,12,.97)}
#list .listhead{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding-block:12px;background:rgba(18,15,12,.97)}
#list h2{font:700 20px Cinzel,serif;margin:0}
#list h3{font:700 16px Cinzel,serif;letter-spacing:.04em;margin:22px 0 6px;color:var(--brass)}
#list p{max-width:70ch;color:var(--muted);margin:0 0 10px}
#list .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#list figure{margin:0;display:flex;flex-direction:column;gap:4px}
#list figure img{width:100%;aspect-ratio:1;object-fit:contain;background:#0c0a08;border-radius:3px}
#list figcaption{font-size:12.5px}
#list .walk{background:none;border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:3px 8px;font:12px "Libre Franklin",sans-serif;cursor:pointer;align-self:flex-start}
#list button#closeList{background:var(--brass);color:#1a1409;border:0;border-radius:4px;padding:6px 12px;font:600 13px "Libre Franklin",sans-serif;cursor:pointer}
#list table{border-collapse:collapse;font-size:13px}
#list td,#list th{border-bottom:1px solid rgba(210,174,102,.2);padding:4px 10px 4px 0;text-align:left}
#list .tablewrap{overflow-x:auto}
#pad{position:fixed;z-index:10;left:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:none;grid-template-columns:repeat(3,48px);gap:6px}
#pad button{height:48px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:18px}
@media (pointer:coarse){#pad{display:grid}#help{display:none}}
@media (max-width:640px){#info{top:calc(64px + env(safe-area-inset-top,0px));max-height:38vh}#title p{display:none}#help{display:none}#info img{max-height:18vh;object-fit:contain}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#loading{position:fixed;inset:0;display:grid;place-items:center;font:600 14px Cinzel,serif;letter-spacing:.1em;color:var(--muted);z-index:5}
.framelink{color:var(--brass);text-decoration:underline;padding:.7em 1em;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.framelink:focus{outline:3px solid var(--focus);outline-offset:2px}
.swtoast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:.6em;max-width:calc(100vw - 32px);padding:.6em .8em;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 13px system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.swtoast button{background:var(--brass);color:#20180c;border:0;border-radius:5px;padding:.4em .7em;font:inherit;font-weight:700;cursor:pointer}
.swtoast button:focus{outline:3px solid var(--focus);outline-offset:2px}
.swtoast .swtoast-x{background:transparent;color:var(--muted);font-weight:400;font-size:16px;padding:.1em .4em}
.clipoffline{margin:.6em 0 0}
.offlinepage{background:var(--ground);color:var(--ink)}
.offlinewrap{max-width:640px;margin:0 auto;padding:2.5rem 20px;line-height:1.55}
.offlinewrap h1{font-family:Cinzel,serif;letter-spacing:.04em}
.offlinewrap hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
.offlineact a{color:var(--brass)}
.offlineattr{color:var(--muted);font-size:.92em}
.resumebar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:22;display:flex;flex-wrap:wrap;align-items:center;gap:.6em;max-width:calc(100vw - 32px);padding:.7em .9em;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 13px system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.resumebar p{margin:0}
.resumebar button{background:var(--brass);color:#20180c;border:0;border-radius:5px;padding:.45em .8em;font:inherit;font-weight:700;cursor:pointer}
.resumebar .resume-secondary{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.resumebar button:focus{outline:3px solid var(--focus);outline-offset:2px}

.ts{display:inline-block;font:600 11px "Libre Franklin",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1a1409;background:var(--brass);border-radius:3px;padding:2px 6px;margin:0}
#list h4{font:700 14px Cinzel,serif;margin:14px 0 6px;color:var(--ink)}
#list .walk:disabled{opacity:.45;cursor:not-allowed}
#list .walk{border-color:#8a7650}

#viewer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:rgba(8,6,4,.84);backdrop-filter:blur(3px)}
#viewer[hidden]{display:none}
#viewer .vbox{position:relative;margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;background:#1b1611;border:1px solid var(--line);border-radius:8px;padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#viewer img{display:block;max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;background:#efe6d2;border:6px solid #b08a45;border-radius:2px}
#viewer figcaption{text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
#viewer h2{font:700 20px/1.25 Cinzel,Georgia,serif;letter-spacing:.03em;margin:0;text-wrap:balance}
#viewer #viewerMeta{margin:0;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
#viewer a{font-size:13px}
#viewerClose{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--brass);background:#231a12;color:var(--ink);font:400 26px/1 "Libre Franklin",sans-serif;cursor:pointer;display:grid;place-items:center}
#viewerClose:hover{background:#3a2a18}
@media (max-width:640px){#viewerClose{top:6px;right:6px}#viewer .vbox{padding:44px 10px 12px}}

#reader{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(10,8,6,.62);backdrop-filter:blur(2px)}
#reader[hidden]{display:none}
#reader .rhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:rgba(27,22,17,.92);border:1px solid var(--line);border-radius:6px;padding:8px 14px;max-width:100%}
#reader h2{font:700 17px/1.25 Cinzel,Georgia,serif;margin:0;text-wrap:balance}
#readerPage{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
#readerPdf,#readerDl{font-size:13px}
#readerClose{width:36px;height:36px;border-radius:50%;border:1px solid var(--brass);background:#231a12;color:var(--ink);font:400 24px/1 "Libre Franklin",sans-serif;cursor:pointer}
#reader .rstage{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
#readerImg{max-height:100%;max-width:min(100%,1000px);object-fit:contain;background:#fbf8f0;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4)}
#reader .rarrow{position:absolute;top:50%;transform:translateY(-50%);width:min(110px,16vw);height:60%;border:0;border-radius:14px;background:rgba(30,22,14,.28);color:rgba(255,240,210,.78);font:300 min(120px,18vw)/1 Georgia,serif;cursor:pointer;transition:background .15s}
#reader .rarrow:hover{background:rgba(30,22,14,.55)}
#readerPrev{left:0}#readerNext{right:0}
#reader .rarrow:disabled{opacity:.15;cursor:default}
#readerTextBox{max-width:min(1000px,100%);max-height:22vh;overflow:auto;background:rgba(27,22,17,.92);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13.5px;color:var(--ink)}
#readerTextBox summary{cursor:pointer;color:var(--brass)}
#reader .rhelp{margin:0;color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){#reader .rarrow{transition:none}}
/* the reader opens as if the book came off the shelf toward you; pages settle in as they turn */
#reader:not([hidden]) .rstage{animation:rOpen .35s ease-out}
@keyframes rOpen{from{transform:scale(.55) translateY(12%);opacity:0}to{transform:none;opacity:1}}
#readerImg.turn{animation:rTurn .22s ease-out}
@keyframes rTurn{from{opacity:.25;transform:translateX(0) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#reader:not([hidden]) .rstage,#readerImg.turn{animation:none}}
#reader .rarrow:focus-visible,#readerClose:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
/* book covers in the Gallery list, and the plaque in the info panel, are buttons */
button.cover,button.plaque{display:block;padding:0;border:1px solid var(--line);background:#120e0a;cursor:zoom-in;border-radius:3px}
button.cover img{display:block;width:100%;height:auto}
button.plaque img{display:block;width:140px;height:auto}
ul.dir{list-style:none;padding:0;margin:.2em 0 .6em}
ul.dir li{margin:.25em 0}
#info{box-sizing:border-box}
@media (max-width:640px){#reader .rarrow{width:12vw;background:rgba(30,22,14,.14)}#reader{padding-left:8px;padding-right:8px}}
/* the music button shows its state in words and in colour, not colour alone */
#musicCtl{position:static;display:flex;align-items:center;gap:8px;padding:0 10px 0 0}
#musicCtl #musicBtn{background:transparent;border:0}
#musicVol{width:90px;accent-color:var(--brass)}
#musicVol:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:640px){#musicVol{width:64px}}
#musicBtn[aria-pressed="true"]{color:#f6e7c4}
#musicBtn[aria-pressed="true"] #musicState{color:var(--brass)}
#musicState{font-weight:700;margin-left:2px}
/* on a phone the music control stacks above the Gallery list, clear of the touch pad */
@media (max-width:640px){#buttons{flex-direction:column;align-items:flex-end}}

/* the gear: hides every control at once, and brings them back */
#hudToggle{position:fixed;z-index:12;top:calc(12px + env(safe-area-inset-top,0px));left:16px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;padding:0;background:var(--panel);border:1px solid var(--line);color:var(--brass);cursor:pointer;backdrop-filter:blur(4px)}
#hudToggle:hover{color:#f0cf8a}
#hudToggle:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
#hudToggle svg{transition:transform .35s ease}
body.hud-hidden #hudToggle svg{transform:rotate(90deg)}
#title{left:70px;max-width:min(440px,calc(100% - 86px))}
body.hud-hidden #title,body.hud-hidden #info,body.hud-hidden #help,body.hud-hidden #pad,body.hud-hidden #buttons,body.hud-hidden #list{display:none!important}
/* each box opens and closes on its own */
.boxToggle{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border-radius:4px;background:transparent;border:1px solid var(--line);color:var(--brass);cursor:pointer;font-size:14px;line-height:1}
.boxToggle:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
.boxToggle span{display:inline-block;transition:transform .2s}
.collapsed .boxToggle span{transform:rotate(-90deg)}
#title{padding-right:44px}#info{padding-top:14px}#infoBody{display:flex;flex-direction:column;gap:8px;padding-right:26px}
#title.collapsed #titleMore{display:none}
#info.collapsed{cursor:pointer}
#info.collapsed #infoBody>:not(.eyebrow):not(h2){display:none}
@media (prefers-reduced-motion:reduce){#hudToggle svg,.boxToggle span{transition:none}}

/* the guide: an arrow that turns toward the next arch, then the exhibit */
#gps{right:16px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;max-width:calc(100% - 100px)}
#gps[hidden]{display:none}
#gpsArrow{color:var(--brass);flex:none;transition:transform .15s linear}
#gpsText{font:600 14px "Libre Franklin",sans-serif;color:var(--ink)}
#gpsStop{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
#gpsStop:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
body.guiding #info{top:calc(70px + env(safe-area-inset-top,0px))}
body.hud-hidden #gps{display:none!important}
@media (prefers-reduced-motion:reduce){#gpsArrow{transition:none}}
/* the help line keeps clear of the buttons at the bottom right */
#help{max-width:calc(100% - 640px)}
@media (max-width:1240px){#help{display:none}}

/* the Librarian: a button in the museum's own brass and walnut, a voice switch, and the Librarian opened in place */
#libCtl{position:fixed;z-index:10;left:16px;top:calc(108px + env(safe-area-inset-top,0px));display:flex;gap:8px;align-items:center}
#libCtl button{position:static;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;color:var(--ink);font:600 13px "Libre Franklin",sans-serif;cursor:pointer}
#libBtn .libicon{width:30px;height:30px;color:var(--brass)}
#libBtn:hover .libicon{color:#f0cf8a}
#libCtl button:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
#voiceBtn .mic{width:10px;height:10px;border-radius:50%;background:#6b5d49;box-shadow:0 0 0 2px #2a2016}
#voiceBtn.listening .mic{background:#d24b3a;animation:micPulse 1.4s ease-in-out infinite}
#voiceBtn #voiceState{color:var(--brass)}
#voiceBtn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 2px #2a2016,0 0 0 0 rgba(210,75,58,.6)}50%{box-shadow:0 0 0 2px #2a2016,0 0 0 7px rgba(210,75,58,0)}}
@media (prefers-reduced-motion:reduce){#voiceBtn.listening .mic{animation:none}}
body.hud-hidden #libCtl{display:none!important}
#title.collapsed~#libCtl{top:calc(66px + env(safe-area-inset-top,0px))}
@media (max-width:640px){#libCtl{left:auto;right:16px;top:auto;bottom:calc(178px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-end}}
#librarian{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(10,8,6,.62);backdrop-filter:blur(2px)}
#librarian[hidden]{display:none}
#librarian .lhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(27,22,17,.94);border:1px solid var(--line);border-radius:6px;padding:8px 12px}
#librarian .lhead .libicon{width:40px;height:40px;color:var(--brass);flex:none}
#librarian .ltitle{flex:1;min-width:180px}
#librarian h2{font:700 18px/1.2 Cinzel,Georgia,serif;margin:0}
#librarian .ltitle p{margin:2px 0 0;color:var(--muted);font-size:13px}
#libOut{font-size:13px}
#libClose{width:36px;height:36px;border-radius:50%;border:1px solid var(--brass);background:#231a12;color:var(--ink);font:400 24px/1 "Libre Franklin",sans-serif;cursor:pointer}
#libClose:focus-visible,#libCopy:focus-visible,#libOut:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
#libAsked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(27,22,17,.94);border:1px solid var(--brass);border-radius:6px;padding:8px 12px}
#libAsked[hidden]{display:none}
#libAsked .lq{color:var(--brass);font:600 12px "Libre Franklin",sans-serif;text-transform:uppercase;letter-spacing:.1em}
#libQ{font:italic 16px Georgia,serif;color:var(--ink)}
#libCopy{padding:4px 12px;border-radius:4px;border:1px solid var(--line);background:#231a12;color:var(--ink);cursor:pointer}
#libAsked .lhint{color:var(--muted);font-size:12.5px}
#libFrame{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff}
#librarian:not([hidden]) #libFrame{animation:rOpen .3s ease-out}
@media (prefers-reduced-motion:reduce){#librarian:not([hidden]) #libFrame{animation:none}}

/* the welcome: a few directions, and the way to Curt's classic site */
#welcome{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:rgba(10,8,6,.55);backdrop-filter:blur(2px)}
#welcome[hidden]{display:none}
#welcome .wbox{max-width:620px;width:100%;max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--brass);border-radius:8px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
#welcome h2{font:700 22px/1.25 Cinzel,Georgia,serif;margin:0 0 8px;text-wrap:balance}
#welcome p{margin:0 0 10px;color:var(--ink)}
#welcome .wsteps{margin:4px 0 14px;padding-left:20px;display:grid;gap:6px}
#welcome .wsteps b{color:#f6e7c4}
body.touch #welcome .kb,body:not(.touch) #welcome .touch{display:none}
#welcome .wclassic{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.2)}
#welcome .wfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
#welcome .wfoot label{color:var(--muted);font-size:13px;display:flex;gap:6px;align-items:center}
#welcomeGo{padding:10px 18px;border-radius:6px;border:1px solid var(--brass);background:#3a2a17;color:#f6e7c4;font:700 15px "Libre Franklin",sans-serif;cursor:pointer}
#welcomeGo:focus-visible,#welcome a:focus-visible,#welcomeHide:focus-visible{outline:3px solid var(--focus);box-shadow:0 0 0 6px #120e0a}
.linklike{background:none;border:0;padding:0;color:var(--brass);text-decoration:underline;font:inherit;cursor:pointer}
.linklike:focus-visible{outline:3px solid var(--focus)}
/* fail-down: the classic museum, offered when 3D cannot run well here */
#failDown{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,8,6,.8)}
#failDown[hidden]{display:none}
#failDown .fdbox{max-width:520px;width:100%;background:var(--panel);border:1px solid var(--brass);border-radius:8px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
#failDown h2{font:700 21px/1.25 Cinzel,Georgia,serif;margin:0 0 10px;text-wrap:balance}
#failDown #fdGo{font-weight:600}
.noscript{padding:16px;color:#f1ebdf}
/* ?debug=1 only */
#debug{position:fixed;left:8px;bottom:8px;z-index:70;margin:0;padding:8px 10px;max-width:min(420px,calc(100% - 16px));max-height:45vh;overflow:auto;
  font:12px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#d9f7c9;background:rgba(0,0,0,.78);border:1px solid #3c5a33;border-radius:4px;pointer-events:none;white-space:pre-wrap}
#debug[hidden]{display:none}
#failDown .walk{background:none;border:1px solid #8a7650;color:var(--ink);border-radius:4px;padding:6px 12px;font:600 13px "Libre Franklin",sans-serif;cursor:pointer}
/* the viewer's arrows: step through the photographs in the display the visitor clicked, and only that display */
#viewer .varrow{position:absolute;top:42%;transform:translateY(-50%);width:56px;height:120px;border:0;border-radius:12px;background:rgba(30,22,14,.5);
  color:rgba(255,240,210,.9);font:300 64px/1 Georgia,serif;cursor:pointer;z-index:2}
#viewer .varrow:hover{background:rgba(30,22,14,.75)}
#viewer .varrow:focus-visible{outline:3px solid #f3cf86;outline-offset:2px}
#viewerPrev{left:26px}#viewerNext{right:26px}
#viewer #viewerPos{margin:0;color:var(--muted);font-size:13px}
@media (max-width:640px){#viewer .varrow{width:40px;height:90px;font-size:44px}#viewerPrev{left:12px}#viewerNext{right:12px}}
/* the clipboard: walnut board, steel clip, a sheet of paper; docked low on the left so the visitor can keep walking */
#clipboard{position:fixed;z-index:15;left:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(300px,calc(100% - 32px));max-height:calc(100% - 190px);
  display:flex;flex-direction:column;padding:20px 10px 10px;border-radius:10px;background:linear-gradient(100deg,#5a3a20,#6e4a2a 40%,#5e3e22 70%,#6a4626);
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.4)}
#clipboard[hidden]{display:none}
#clipboard .clipclip{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:6px 6px 10px 10px;
  background:linear-gradient(180deg,#e6e8ec,#9aa0a8 55%,#c8ccd2);box-shadow:0 2px 4px rgba(0,0,0,.45)}
#clipboard .paper{overflow:auto;background:#f6f1e4;color:#2a2016;border-radius:2px;padding:12px 14px 14px;font-size:13.5px;line-height:1.45;box-shadow:0 1px 0 rgba(0,0,0,.2)}
#clipboard .cliphead{display:flex;justify-content:space-between;align-items:center}
#clipboard h2{font:700 17px Cinzel,Georgia,serif;margin:0;color:#2a2016}
#clipClose{width:32px;height:32px;border-radius:50%;border:1px solid #8a6a42;background:transparent;color:#2a2016;font:400 22px/1 "Libre Franklin",sans-serif;cursor:pointer}
#clipboard .clipnote{margin:4px 0 8px;color:#5a4a36;font-size:12.5px}
#clipboard fieldset{border:0;border-top:1px solid #d6c8a8;margin:8px 0 0;padding:8px 0 0}
#clipboard legend{font:700 12px "Libre Franklin",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6a3c12;padding:0 6px 0 0}
#clipboard label{display:flex;gap:8px;align-items:center;margin:3px 0;cursor:pointer}
#clipboard input{accent-color:#6a3c12;width:16px;height:16px;margin:0}
#clipboard select{box-sizing:border-box;margin:2px 0 4px 24px;width:calc(100% - 24px);font:13px "Libre Franklin",sans-serif;padding:3px;border:1px solid #8a6a42;border-radius:4px;background:#fffdf6;color:#2a2016}
#clipboard .clipnow{margin:0 0 6px;font-style:italic;color:#3e2e1c}
#clipboard details{margin-top:6px}#clipboard summary{cursor:pointer;color:#6a3c12}
#clipboard .clipkeep{columns:2;column-gap:10px;font-size:12.5px;margin-top:4px}
#clipboard .clipkeep label{break-inside:avoid;margin:2px 0}
#clipboard .clipreset{margin-top:12px;width:100%;padding:7px 10px;border-radius:5px;border:1px solid #8a6a42;background:#efe4c8;color:#2a2016;font:600 13px "Libre Franklin",sans-serif;cursor:pointer}
#clipboard :focus-visible{outline:3px solid #8a4b00;outline-offset:2px;box-shadow:none}
body.clip-open #help{display:none}
body.hud-hidden #clipboard{display:none!important}
@media (pointer:coarse){#clipboard{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));max-height:calc(100% - 250px)}}
/* per-period lettering in The Story of the Office: the side panel's heading takes the room's typeface */
body[data-letter=serif] #info h2{font-family:'Old Standard TT',Georgia,serif}
body[data-letter=typewriter] #info h2{font-family:'Courier Prime','Courier New',monospace;letter-spacing:0}
body[data-letter=deco] #info h2{font-family:'Josefin Sans','Libre Franklin',sans-serif;font-weight:600;letter-spacing:.06em}
/* the builder's note, only on the Film Room fresco */
#infoBody .friend{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-style:italic;color:var(--muted)}
#infoBody .friend p{margin:0 0 6px}
#infoBody .friend .by{font-style:normal;color:var(--ink)}
/* Curt's own words about a piece (curtSays in museum.js) */
#info .curt{margin:.6em 0 .2em;padding:.45em .7em;border-left:3px solid var(--brass);background:rgba(210,174,102,.08);max-height:13em;overflow:auto}
#info .curt:focus{outline:2px solid var(--focus);outline-offset:2px}
#info .curt-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .25em}
#info .curt blockquote{margin:.25em 0 0;font-style:italic;font-size:13.5px}
#info .curt-src{font-size:12px;color:var(--muted);margin:.1em 0 .35em}
/* A citation that opens Curt's book in the museum's reader; looks like a link, is a button for the in-app action. */
#info .curt-src .srclink,#info ul.bookcase .srclink{font:inherit;color:var(--brass);background:none;border:0;padding:0;margin:0;
  text-align:left;text-decoration:underline;cursor:pointer}
#info .curt-src .srclink:hover,#info ul.bookcase .srclink:hover{text-decoration:none}
#info .curt-src .srclink:focus-visible,#info ul.bookcase .srclink:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* One-time "Add to Home Screen" hint, shown on iPhone only (js/a2hs.js). Classes only: the CSP forbids inline styles. */
.a2hs{position:fixed;left:0;right:0;bottom:0;z-index:16;display:none;align-items:center;gap:12px;
  padding:12px calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  background:var(--panel);border-top:2px solid var(--brass);color:var(--ink);font-size:14px;line-height:1.4;backdrop-filter:blur(6px)}
.a2hs.a2hs--show{display:flex}
.a2hs p{margin:0;flex:1}
.a2hs b{color:var(--brass);font-weight:700}
.a2hs button{flex:none;background:none;border:1px solid var(--brass);color:var(--brass);border-radius:6px;padding:7px 12px;font:inherit;cursor:pointer}
.a2hs button:hover{background:rgba(210,174,102,.12)}
.a2hs button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-contrast:high){.a2hs{border-top-width:3px}.a2hs button{border-width:2px}}

/* Share button on the photograph viewer (js/museum.js shareItem). */
#viewerShare{font:inherit;font-size:13px;background:none;border:1px solid var(--brass);color:var(--brass);border-radius:6px;padding:5px 12px;cursor:pointer}
#viewerShare:hover{background:rgba(210,174,102,.12)}
#viewerShare:focus-visible{outline:3px solid var(--focus);outline-offset:2px}