/* The archive occupies the same illustrated world as the shop.
   Only the scenery crops; the shelves retain their physical proportions. */
@font-face{font-family:Zeyada;src:url('../font-study/fonts/Zeyada.ttf')}
html{min-height:100%;background:#fff}
body{background:#f1f0ed;color:#242424;isolation:isolate;overflow-x:hidden}
.archive-environment{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.archive-environment .backdrop{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1)}
main{min-height:100svh;padding:28px 0 92px;align-content:center}
.room{width:min(100%,calc((100svh - 144px)*1.5),1500px);aspect-ratio:auto;min-height:0;background:none;box-shadow:none;overflow:visible}
header{top:2%;}
h1{font-size:clamp(30px,3vw,44px);font-weight:400;background:none;border:0;outline:0;box-shadow:none;padding:0 18px}
header p{font:25px/1 Zeyada,Georgia,serif;margin-top:9px;color:#555}
.back{top:8px;left:3%;font-size:14px;padding:3px 9px;border:9px solid transparent;border-image:url('../assets/game-panel.svg') 18 fill / 9px / 0 stretch;background:none}
.spellbook{bottom:max(22px,env(safe-area-inset-bottom));border:13px solid transparent;border-image:url('../assets/game-panel.svg') 18 fill / 13px / 0 stretch;outline:0;border-radius:0;background:none;box-shadow:none;padding:5px 14px;gap:12px;max-width:calc(100vw - 44px)}
.spellbook button{font-size:17px;color:#242424}
.spellbook button[aria-pressed=true]{border-color:transparent;background:none}
#count{color:#626262}
.lantern-label{background:#f7f6f1e8;color:#242424;border-color:#68686855}
.page-outline{position:fixed;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);z-index:20;pointer-events:none;overflow:visible}
.page-outline path{fill:none;stroke:#171717;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.page-outline .page-outline-backing{stroke:white;stroke-width:3.5;opacity:.85}
.page-outline .page-outline-inner{stroke-width:.7;opacity:.85}
.page-outline .page-outline-pencil{stroke-width:.45;opacity:.35}
.page-outline .page-outline-outside{fill:white;stroke:none;fill-rule:evenodd}
@media(max-width:650px){
 main{padding:20px 0 140px}
 .room{width:100%;min-height:1100px;overflow:hidden}
 /* Crop into the uninterrupted wall on tall screens, without stretching the room. */
 .archive-environment .backdrop{height:125%;object-position:center top}
 header{top:14px}
 header .back{display:table;margin:0 auto 17px;font-size:14px}
 header p{font-size:24px;margin-top:7px}
 .spellbook{width:calc(100vw - 32px);max-width:none;padding:4px 5px;gap:4px;bottom:max(14px,env(safe-area-inset-bottom))}
 .spellbook button{font-size:15px;padding:8px}
 .page-outline{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
}
@media(min-width:651px) and (max-height:620px){
 main{padding-top:22px;padding-bottom:95px}
 .room{width:min(100%,900px)}
}

/* An inked return tab, using the same lettering and pointed arrow as the world UI. */
header .back{position:fixed;left:13px;top:74px;display:flex;align-items:center;justify-content:center;gap:10px;min-width:150px;padding:3px 12px 5px;border-width:12px;border-image-width:12px;color:#252525;transition:translate .2s}
.back svg{width:30px;height:26px;fill:#383838;stroke:none;flex:none}
.back svg path+path{fill:none;stroke:#383838;stroke-width:1}
.back span{display:flex;flex-direction:column;text-align:left;font:25px/1 Pirata,Georgia,serif}
.back small{font:19px/1 Zeyada,cursive;color:#555}
.back:hover{translate:-3px 0}
@media(max-width:650px){header .back{position:static;width:max-content;min-width:145px;margin:0 auto 16px;padding:0 8px 3px}.back span{font-size:22px}.back small{font-size:17px}.back svg{width:25px}}

/* Match the world's settings without interrupting archive browsing. */
.archive-settings-open{position:fixed;right:27px;top:27px;width:44px;height:44px;padding:12px;z-index:25;border:0;background:url('../assets/ui/square-control.svg') center/contain no-repeat}
.archive-settings-open svg{width:100%;height:100%;fill:#333;stroke:#333;stroke-width:1.3}
.archive-settings{width:min(470px,92vw);border:16px solid transparent;border-image:url('../assets/game-panel.svg') 18 fill / 16px / 0 stretch;padding:24px 25px;background:none;color:#242424}
.archive-settings h2{font-size:40px}.archive-settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;font:24px Pirata,serif;border-bottom:1px solid #aaa}
.archive-settings select{min-height:44px;max-width:65%;font:16px Georgia,serif;background:#fff}.archive-settings input{width:24px;height:24px}.archive-settings .setting-note{font:18px/1.3 Zeyada,serif}
.handheld-archive .archive-settings-open{display:none!important}
.reduced-motion .projection,.reduced-motion .relic .projection.is-spinning,.reduced-motion .projection::after{animation:none!important;transition:none!important}

/* Desktop is a stationary two-row wall, with six works per page. */
html:not(.handheld-scene),html:not(.handheld-scene) body{height:100%;overflow:hidden}
html:not(.handheld-scene) main{height:100svh;min-height:0;display:grid;padding:28px 70px 100px;align-content:center}
html:not(.handheld-scene) .room{width:min(100%,calc((100svh - 144px)*1.5),1500px);min-height:0;overflow:visible}
html:not(.handheld-scene) #collection{min-height:0;padding:0;position:static}
.archive-heading{display:flex;flex-direction:column;align-items:center;gap:10px}
.archive-heading #count{font:11px/1.3 monospace;letter-spacing:.1em;color:#4a4a4a}
.shelf-pager{position:fixed;right:25px;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:6}
.shelf-pager button{width:48px;height:48px;display:grid;place-items:center;border:0;padding:13px;background:url('../assets/ui/square-control.svg') center/contain no-repeat;color:#292929;transition:opacity .2s,transform .2s}
.shelf-pager button svg{width:24px;height:20px;fill:currentColor}
.shelf-pager button:hover:not(:disabled){transform:translateY(-2px)}
.shelf-pager button:disabled{opacity:.5;cursor:default}
#shelf-page{font:11px monospace;letter-spacing:.06em;color:#444;background:#f7f6f1;padding:4px 6px;border:1px solid #7778}
.wall-shelf[hidden]{display:none}
.handheld-scene .shelf-pager{display:none}