.gallery-page{background:#edece8}.gallery-header{display:flex;align-items:center;gap:20px;padding:18px 4%;border-bottom:1px solid var(--ink);background:var(--surface)}.gallery-header h1{font:700 clamp(18px,3vw,30px) var(--font-mono);margin:0;letter-spacing:-1px}.gallery-header button{border:1px solid var(--ink);padding:12px;min-height:44px}.gallery-header #map-toggle{margin-left:auto}.gallery-header button[aria-pressed=true]{background:var(--ink);color:white}.gallery-page main{padding:18px 4%}.gallery-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font:12px var(--font-mono)}.gallery-controls input{accent-color:var(--accent)}.gallery-hint,#gallery-note{font-size:12px;color:var(--ink-2)}.gallery-stage{position:relative}#viewport{height:clamp(420px,67vh,850px);position:relative;perspective:800px;perspective-origin:50% 50%;overflow:hidden;background:#ddd9ce;touch-action:none;outline-offset:4px}#viewport:focus-visible{outline:3px solid var(--accent)}#scene{position:absolute;left:50%;top:50%;transform-style:preserve-3d}.room-surface,.wall-work,.door-label,.door-portal,.corridor-sign{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}.room-surface{background:#f4f0e7;backface-visibility:visible}.room-floor{background:repeating-linear-gradient(90deg,#bbad96 0px,#bbad96 98px,#a49782 100px)}.room-ceiling{background:#e9e4da}.wall-work{padding:16px;background:#fff;border:7px solid #292b29;box-shadow:0 5px 12px #0002;cursor:pointer}.wall-work img{width:100%;height:100%;object-fit:contain;pointer-events:none}.photo-space{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;height:100%;width:100%;background:#f3f0e9;border:1px dashed #d4cfc4;color:#837e73;font:10px var(--font-mono);padding:12px;text-align:center;pointer-events:none}.photo-space .empty-mark{font-size:30px;font-weight:200;line-height:1}.photo-space small{font-size:8px;letter-spacing:1px}.wall-work .plaque{position:absolute;left:0;right:0;top:calc(100% + 18px);padding:8px;background:#f8f6f0;font:11px var(--font-mono);text-align:left;color:#333}.wall-work:focus-visible,.door-portal:focus-visible{outline:5px solid var(--accent)}.door-label{padding:12px 18px;background:#242724;color:white;font:16px var(--font-mono);text-align:center;width:260px;left:-130px;top:-30px}.door-portal{background:transparent;border:0;cursor:pointer;opacity:0}.door-portal:focus-visible{opacity:1;background:#c3332520}.corridor-sign{width:320px;height:130px;left:-160px;top:-65px;padding:20px;background:#242724;color:white;font:24px var(--font-mono);text-align:center;line-height:1.4}.room-caption{position:absolute;bottom:16px;left:16px;pointer-events:none;background:#fffffff0;padding:10px;font:12px var(--font-mono)}.walk-controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:15px 0}.walk-controls button{border:1px solid var(--ink);padding:12px;background:#fcfcf8;font:12px var(--font-mono);min-height:44px;touch-action:none}#map-panel{position:absolute;right:14px;top:14px;width:230px;padding:14px;background:#fffffff2;border:1px solid #c7c3b8;box-shadow:0 4px 20px #0001;z-index:4}.map-title{display:flex;align-items:center;justify-content:space-between;font:10px var(--font-mono)}#map-close{padding:5px 10px;font-size:19px}#map{display:block;width:100%;height:245px}#map-panel p{font:10px/1.5 var(--font-mono);margin:0}#map [role=button]{cursor:pointer}#map [role=button]:focus-visible rect{stroke:#c33325;stroke-width:40}#map text{font-family:var(--font-mono);fill:#343832;font-size:125px;pointer-events:none}#map [aria-current=true] rect{fill:#ead9c6;stroke:#c33325;stroke-width:25}#flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-top:24px}#flat button{padding:14px;background:#fff;border:1px solid var(--grid);text-align:left}#flat .flat-photo{display:grid;place-items:center;height:260px}#flat .photo-space{width:auto}#flat img{width:100%;height:100%;object-fit:contain}#flat .flat-title{display:block;margin-top:14px;font:12px var(--font-mono)}#closer{width:min(1500px,96vw);max-height:96dvh;background:#fff}#closer>header{position:sticky;top:0;background:white;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #ddd;gap:20px}#closer h2{font:700 20px var(--font-mono);margin:0}#closer button{border:1px solid #555;padding:10px 14px;min-height:44px}#piece{height:62dvh;display:grid;place-items:center;padding:24px}#piece img{width:100%;height:100%;object-fit:contain}#piece .photo-space{max-width:500px;max-height:50vh;font-size:15px}#piece .photo-space small{font-size:12px}.closer-tools{display:flex;flex-wrap:wrap;gap:15px;align-items:center;padding:16px 24px;font-size:12px}#piece-description,#piece-status{font-size:12px;padding:0 24px}#closer:fullscreen{max-width:none;max-height:none;width:100%;height:100%;margin:0}#closer:fullscreen #piece{height:75vh}@media(max-width:700px){.gallery-header{gap:10px;flex-wrap:wrap;padding:12px}.gallery-header h1{order:4;width:100%}.gallery-header a{font-size:12px}.gallery-header button{font-size:11px;padding:9px}.gallery-page main{padding:12px}.gallery-controls{gap:12px}#map-panel{width:170px;padding:10px;right:8px;top:8px}#map{height:190px}#viewport{height:58vh;min-height:390px}.walk-controls button{font-size:11px;padding:10px}#piece{height:50dvh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Paper architecture: opaque white walls retain occlusion, shading is pen hatching. */
.gallery-page{background:#fff;color:#20252a}
.gallery-header{background:#fff;border-bottom-color:#aeb6bc}
.gallery-header button,.walk-controls button{background:#fff;color:#343d43;border-color:#aeb6bc}
.gallery-header button[aria-pressed=true]{background:repeating-linear-gradient(135deg,transparent 0 5px,#80929533 5px 6px);color:#20252a;border-color:#60777b}
#viewport{background:#fff;border:1px solid #aeb6bc}
.room-surface{background:#fff!important;border:1px solid #4c555b;--room-ink:#7c8b91}
.room-surface:not(.room-floor):not(.room-ceiling):after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 8px,var(--room-ink) 8px 9px);opacity:.24;clip-path:polygon(0 100%,0 89%,100% 97%,100% 100%)}
.room-floor{background:repeating-linear-gradient(135deg,transparent 0 15px,#a2b3b640 15px 16px),repeating-linear-gradient(90deg,#fff 0 129px,#657078 129px 130px)!important}
.room-ceiling{background:repeating-linear-gradient(45deg,#fff 0 29px,#84939730 29px 30px)!important}
.wall-work{border:2px solid #303a40;box-shadow:none;padding:16px;outline:1px solid #a5adb0;outline-offset:4px}
.wall-work:after{content:"";position:absolute;inset:8px -12px -12px 8px;z-index:-1;background:repeating-linear-gradient(135deg,transparent 0 4px,#89959a 4px 5px);clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 0)}
.photo-space{background:#fff;border:1px dashed #a8b1b7;color:#69767d}
.photo-space .empty-mark{color:#6d8b8e}
.wall-work .plaque{background:#fff;color:#47545c;border-top:1px solid #aeb6bc;padding:8px 0}
.door-label,.corridor-sign{background:#fff;color:#283239;border:1px solid #48575e;outline:1px solid #a8b3b8;outline-offset:5px}
.corridor-sign small{color:#6b858a;font-size:14px}
.room-caption{background:#fff;border:1px solid #b6c0c5;color:#44555e}
#map-panel{background:#fff;border-color:#8b999f;box-shadow:none;outline:1px solid #c7d0d3;outline-offset:4px}
#map [aria-current=true] rect{fill:white;stroke:#729094;stroke-width:25;stroke-dasharray:35 18}
#map [role=button]:hover rect{stroke:#729094;stroke-width:25}
#map-player{fill:white;stroke:#729094;stroke-width:25}
#map-heading{stroke:#729094}
#map text{fill:#3e4e57}
#flat button{border-color:#aeb9bf}

#viewport:focus-visible,.wall-work:focus-visible,.door-portal:focus-visible{outline:2px solid #607e83;outline-offset:4px}

/* Thumbnails fit the available card width while preserving the print proportions. */
#flat{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
#flat button,#flat .flat-photo{min-width:0}
#flat .flat-reserved{display:block;max-width:100%;max-height:100%}
#flat .photo-space{width:100%;min-width:0}
#flat img{min-width:0;max-width:100%;max-height:100%;object-fit:contain}
#flat .flat-title{overflow-wrap:anywhere}
#flat .flat-photo{grid-template-columns:minmax(0,1fr)}#flat .flat-reserved{min-width:0;justify-self:center}

/* The walkable view is a WebGL canvas (gallery-gl.js); overlays sit above it. */
#viewport{isolation:isolate;z-index:0}
.gallery-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#map-panel,.room-caption{z-index:5}

/* #scene is the keyboard and screen-reader index of doors and prints: hidden until a button in it has focus. */
#scene{position:absolute;left:12px;top:12px;transform:none;z-index:6}
#scene ul{list-style:none;margin:0;padding:0}
#scene button{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font:12px var(--font-mono);background:#fff;border:1px solid #607e83}
#scene button:focus{width:auto;height:auto;padding:10px 14px;min-height:44px;overflow:visible;clip-path:none;outline:2px solid #607e83;outline-offset:2px}

/* Phone: a small corner map that leaves the room in view. */
#map text{font-size:270px}
@media(max-width:700px){#map-panel{width:118px;padding:6px;right:6px;top:6px;outline:none}#map{height:150px}#map-panel p{display:none}.map-title{font-size:8px}#map-close{padding:2px 6px;font-size:14px;min-height:0}}

/* Close look at a 3D piece: drag the box round (a single CSS cube in the dialog).
   Faces are flat and the box has no bottom, so nothing shares a plane. */
.cube{position:absolute;left:0;top:0;transform-style:preserve-3d}
.cube-face{position:absolute;display:block;transform-style:flat;backface-visibility:hidden;overflow:hidden}
.box-at .cube-face,.cube .cube-face{background:#fff;border:2px solid #303a40}
.box-at .face-top,.cube .face-top{background:repeating-linear-gradient(45deg,#fff 0 9px,#c7d0d3 9px 10px)}
.cube-face img{width:100%;height:100%;object-fit:cover}
.cube-face .photo-space{width:100%;height:100%;border:0;font-size:9px;gap:4px}
.cube-face .photo-space .empty-mark{font-size:20px}
.cube-stage{width:100%;height:100%;display:grid;place-items:center;perspective:900px;cursor:grab;touch-action:none}
.cube-stage:active{cursor:grabbing}
.cube-stage .cube{position:relative;left:auto;top:auto;width:0;height:0}

/* Held buttons and the view are controls, not text: no selection, callout or tap flash while a finger is down. */
.walk-controls,.walk-controls button,.gallery-stage,#viewport,#map-panel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.walk-controls button{touch-action:none}
/* The folded map: a small button docked where the map panel opens. */
#map-toggle{position:absolute;right:14px;top:14px;z-index:6;border:1px solid #8b999f;background:#fff;color:#343d43;padding:10px 14px;min-height:44px;font:12px var(--font-mono);box-shadow:0 2px 8px #0001}
#map-toggle[hidden]{display:none}
@media(max-width:700px){#map-toggle{right:6px;top:6px;padding:8px 12px}}
.gallery-header #simplify{margin-left:auto}

/* Gallery tabs: the six-room print gallery and the one-room Inktober hall share one page shell. */
.gallery-tabs{display:flex;gap:4px;padding:10px 4% 0;border-bottom:1px solid #aeb6bc;background:#fff;font:12px var(--font-mono)}
.gallery-tabs a{padding:10px 16px;border:1px solid transparent;border-bottom:0;margin-bottom:-1px;color:#47545c;text-decoration:none;letter-spacing:.5px}
.gallery-tabs a:hover{background:repeating-linear-gradient(135deg,transparent 0 5px,#80929522 5px 6px)}
.gallery-tabs a[aria-current=page]{border-color:#aeb6bc;background:#fff;color:#20252a;font-weight:700}
.gallery-tabs .ink-tab:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#15181c;margin-right:8px;vertical-align:1px}
.ink-page .gallery-tabs .ink-tab[aria-current=page]{background:#15181c;color:#fff;border-color:#15181c}
.ink-page .gallery-tabs .ink-tab[aria-current=page]:before{background:#c33325}
.ink-page .gallery-header h1{letter-spacing:-1.5px}
@media(max-width:700px){.gallery-tabs{padding:8px 12px 0}.gallery-tabs a{padding:9px 12px;font-size:11px}}
/* Close look (2026-10-07): the photo fills the height that is left and never scrolls, and the tools and caption sit in their
   own white strip under it. Before, a tall print overflowed a widescreen dialog, so it took scrolling to see an eighth of
   it at a time, and the caption and Fullscreen button landed on top of the photo with nothing behind them. */
#closer[open]{display:flex;flex-direction:column;height:96dvh;max-height:96dvh;overflow:hidden}
#closer>header{flex:none}
#piece{flex:1 1 auto;min-height:0;height:auto;position:relative;padding:16px 24px}
#piece>img{position:absolute;inset:16px 24px;width:calc(100% - 48px);height:calc(100% - 32px);object-fit:contain}
#closer .closer-tools{flex:none;background:#fff;border-top:1px solid #ddd;padding:10px 24px}
#closer #piece-description,#closer #piece-status{flex:none;background:#fff;margin:0;padding:2px 24px 8px}
#closer #piece-status:empty{display:none}
#closer:fullscreen{height:100%;max-height:none}
#closer:fullscreen #piece{height:auto}
@media(max-width:700px){#closer[open]{height:96dvh}#piece{height:auto}}