:root{font-family:'Zodiak',Georgia,serif;font-weight:400;color:#161616;background:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
body.viewer-open{overflow:hidden}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #7489ae;outline-offset:5px}
.navigation{position:absolute;z-index:2;top:20px;left:clamp(20px,3.4vw,65px);right:clamp(20px,3.4vw,65px);display:flex;align-items:center;justify-content:space-between;min-height:36px;font-size:12px}
.gallery{display:grid;align-items:center;min-height:100svh;padding:84px clamp(20px,3.4vw,65px) 32px;margin:auto}
.photo-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));height:min(660px,calc(100svh - 116px));gap:clamp(16px,4vh,40px) clamp(18px,2.8vw,44px)}
.photo-tile{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;min-width:0;cursor:url('/assets/site/plus-cursor.svg') 12 12,crosshair}
.photo-grid{opacity:0;visibility:hidden}
.photo-grid.is-ready{opacity:1;visibility:visible}
.photo-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.photo-tile:focus-visible{outline-offset:8px}
.home-tile{grid-column:-2 / -1;grid-row:-2 / -1}
.photo-viewer.dotted-page{position:fixed;inset:0;width:100%;height:100%;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#161616;background:#fff;overflow:auto}
/* Keep the grid visible underneath while the viewer fades in. */
.photo-viewer::backdrop{background:transparent}
.photo-viewer[open]{animation:viewer-appear 500ms cubic-bezier(.22,.61,.36,1)}
@keyframes viewer-appear{from{opacity:0}to{opacity:1}}
.back-to-grid{border:0;padding:10px 0;background:transparent;cursor:pointer}
.back-to-grid:hover{text-decoration:underline;text-underline-offset:4px}
.playback{display:flex;gap:8px;align-items:center}
.playback button{display:grid;place-items:center;width:36px;height:36px;border:0;background:transparent;color:#666;cursor:pointer}
.playback button:hover{color:#161616}
.playback svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#photo-count{min-width:48px;text-align:center;color:#666;font-size:11px;font-variant-numeric:tabular-nums}
.viewer-stage{display:grid;place-items:center;min-height:100svh;padding:84px clamp(24px,5vw,100px)}
.scene{position:relative;margin:0;width:min(100%,calc((100svh - 168px)*1.5));aspect-ratio:3/2;overflow:hidden;background:#fff;mix-blend-mode:multiply}
.scene>img,.scene canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.scene canvas{pointer-events:none}
.scene.dots>img{opacity:0}.scene.dots #colour{visibility:hidden}
.viewer-status{position:absolute;top:64px;left:24px;right:24px;margin:0;text-align:center;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));height:calc(100svh - 116px);gap:20px}}
@media(max-width:550px){.gallery{padding:76px 20px 24px}.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));height:calc(100svh - 100px);gap:14px 12px}.viewer-stage{padding:84px 20px}.scene{width:100%;height:min(70svh,calc(100svh - 168px));aspect-ratio:auto}.playback{gap:0}.viewer-navigation{font-size:11px}}
@media(max-height:450px) and (min-width:551px){.viewer-navigation{top:8px}.viewer-stage{padding:52px 24px}.scene{width:min(100%,calc((100svh - 104px)*1.5))}}
@media(prefers-reduced-motion:reduce){.photo-viewer[open]{animation:none}.photo-grid{transition:none}}

.photo-viewer.is-closing{pointer-events:none}

.home-tile{position:relative}
.home-tile-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:10px/1.3 system-ui,sans-serif;letter-spacing:.025em;color:#666}
.home-tile-label span{margin-left:3px}
.home-tile:hover .home-tile-label{color:#161616}