/* The artwork fits the available window; monitor resolution is not a breakpoint. */
:root{--display-scale:1}
@media(min-width:601px){
 .site-header{height:calc(90px * var(--display-scale))}
 .site-header .brand{font-size:calc(48px * var(--display-scale))}
 .header-caption,.site-header .quiet{font-size:calc(14px * var(--display-scale))}
 .header-caption .en{font-size:calc(12px * var(--display-scale))}
 .cover{height:calc(100svh - 150px * var(--display-scale));padding-bottom:calc(60px * var(--display-scale))}
 .folder-scene{height:calc(100svh - 210px * var(--display-scale));width:min(60vw,calc((100svh - 210px * var(--display-scale)) * .95))}
 .cover-controls #flip{font-size:calc(14px * var(--display-scale));min-height:calc(44px * var(--display-scale))}
 .side-note{font-size:calc(33px * var(--display-scale))}
 .side-note>span,.side-note small{font-size:calc(12px * var(--display-scale))}
 .yellow-note{transform:rotate(8deg) scale(var(--display-scale));transform-origin:center right}
 .site-footer{font-size:calc(12px * var(--display-scale));padding-top:calc(20px * var(--display-scale))}
 .site-footer>span:last-child{font-size:calc(11px * var(--display-scale))}
 .world-mode:not(.reading-mode) .archive{width:92%;max-width:none;padding:calc(15px * var(--display-scale)) calc(32px * var(--display-scale)) 0}
 .world-mode:not(.reading-mode) .dossier{height:min(calc(100svh - 175px * var(--display-scale)),64vw);min-height:300px;max-height:none}
 .world-mode:not(.reading-mode) .archive-toolbar{height:calc(43px * var(--display-scale));margin-bottom:calc(10px * var(--display-scale));font-size:calc(12px * var(--display-scale))}
 .world-mode:not(.reading-mode) .archive-toolbar button{font-size:calc(14px * var(--display-scale))}
 .world-mode:not(.reading-mode) .file-tabs{right:calc(-30px * var(--display-scale));gap:calc(12px * var(--display-scale))}
 .world-mode:not(.reading-mode) .file-tabs button{font-size:calc(14px * var(--display-scale));padding:calc(15px * var(--display-scale)) calc(11px * var(--display-scale))}
 .world-mode:not(.reading-mode) .world-controls{gap:calc(20px * var(--display-scale));padding-top:calc(10px * var(--display-scale));flex-wrap:wrap}
 .world-mode:not(.reading-mode) .world-pagination,.world-mode:not(.reading-mode) .world-options{gap:calc(14px * var(--display-scale))}
 .world-mode:not(.reading-mode) .world-controls button{font-size:calc(14px * var(--display-scale))}
 .world-mode:not(.reading-mode) .world-controls span,.world-mode:not(.reading-mode) .archive-footer{font-size:calc(12px * var(--display-scale))}
 .world-mode:not(.reading-mode) .archive-footer{padding:calc(20px * var(--display-scale)) 0}
 #archive-magnifier{font-size:calc(12px * var(--display-scale));padding:calc(10px * var(--display-scale)) calc(14px * var(--display-scale));min-height:calc(44px * var(--display-scale));border-radius:calc(24px * var(--display-scale))}
 #archive-magnifier svg{width:calc(20px * var(--display-scale));height:calc(20px * var(--display-scale))}
}
@media(min-width:601px) and (max-width:1000px){
 .world-mode:not(.reading-mode) .dossier{height:min(calc(100svh - 205px),70vw)}
 .side-note{font-size:22px;left:4%;top:65%}
}
/* Short windows can scroll instead of cropping the cover or hiding controls. */
@media(min-width:601px) and (max-height:650px){
 .world-mode:not(.reading-mode) .world-options>span{display:none}
}
/* Hide controls during the return gesture, while the canvas remains visible. */
.packing .side-note,.packing .yellow-note,.packing .cover-controls,.packing .site-footer{opacity:0;pointer-events:none}
.packing .site-header{pointer-events:none}