:root{--color-text:#fff;--color-ink:#202124;--color-accent:#a63446;--color-accent-strong:#7c2130;--color-background:#eee;--color-focus:#ffd166;--border-width:5px;--space-xs:.375rem;--space-s:.75rem;--space-m:1.5rem}*,:before,:after{box-sizing:border-box}html{background:var(--color-background);min-height:100%;color:var(--color-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{grid-template-columns:auto minmax(0,1fr);block-size:100dvh;margin:0;display:grid;overflow:hidden}img{block-size:auto;max-inline-size:100%;display:block}:focus{outline:none}:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.site-header{background:var(--color-accent);min-inline-size:5rem;color:var(--color-text);padding:var(--space-m) var(--space-s);place-items:center;display:grid;position:relative}.site-header h1{writing-mode:vertical-rl;white-space:nowrap;margin:0;font-size:clamp(1.5rem,4vmin,3rem);font-weight:300;line-height:1;transform:rotate(180deg)}.gallery{grid-template-columns:minmax(5rem,10vmin) minmax(0,1fr) minmax(7rem,14vmin);min-width:0;min-height:100dvh;display:grid;position:relative}.rail{overscroll-behavior:contain;align-items:center;gap:var(--space-s);min-height:0;max-height:100dvh;padding:var(--space-m) var(--space-s);scrollbar-color:var(--color-accent) transparent;flex-direction:column;display:flex;overflow-y:auto}.thumbnail{border:var(--border-width) solid var(--color-text);background:var(--color-text);color:inherit;flex:none;display:block;box-shadow:0 0 0 1px #20212429}.thumbnail:hover,.thumbnail.is-selected{border-color:var(--color-accent)}.thumbnail:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;box-shadow:0 0 0 6px var(--color-accent-strong), 0 0 0 1px #20212429}.thumbnail--portrait{inline-size:8vmin}.thumbnail--landscape{inline-size:12vmin}.thumbnail picture,.thumbnail img{inline-size:100%}.frame{min-width:0;min-height:0;padding:var(--space-m);display:grid}.frame-content{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;min-width:0;min-height:0;display:grid;position:relative}.frame-content.is-loading:after{content:"";border:4px solid #20212433;border-block-start-color:var(--color-accent);border-radius:50%;block-size:3rem;inline-size:3rem;margin:auto;animation:.8s linear infinite spin;position:absolute;inset:0}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.frame-content.is-loading:after{animation:none}}.frame-preload{pointer-events:none;block-size:0;inline-size:0;position:absolute;overflow:hidden}.frame-figure{inline-size:min(100%, (100dvh - 5rem) * var(--frame-ratio,1));margin:0}.frame-figure picture{display:block}.frame-figure img{border:var(--border-width) solid var(--color-text);background:var(--color-text);object-fit:contain;block-size:auto;max-block-size:calc(100dvh - 5rem);inline-size:100%;box-shadow:0 0 0 1px #20212429}.slideshow-toggle{background:var(--color-accent-strong);color:var(--color-text);font:inherit;cursor:pointer;border:0;border-radius:4px;justify-self:center;padding:.45rem .75rem;font-size:.875rem;line-height:1;display:none;position:absolute;inset-block-start:var(--space-s)}.js .slideshow-toggle{display:block}.slideshow-toggle:hover{background:#5f1724}@media (width<900px){body{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.site-header{padding:var(--space-s)}.slideshow-toggle{inset-block-start:50%;inset-inline:auto var(--space-s);transform:translateY(-50%)}.site-header h1{writing-mode:horizontal-tb;font-size:clamp(1.5rem,7vw,2rem);transform:none}.gallery{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-height:0}.rail{min-width:0;max-height:none;padding:var(--space-xs) var(--space-s);flex-direction:row;justify-content:flex-start;overflow:auto hidden}.rail--portraits{grid-row:1}.rail--landscapes{grid-row:3}.thumbnail{inline-size:auto}.thumbnail--portrait img{block-size:12vmin;inline-size:auto}.thumbnail--landscape img{block-size:8vmin;inline-size:auto}.frame{padding:var(--space-s);grid-row:2}.frame-figure{inline-size:min(100%, (100dvh - 12rem) * var(--frame-ratio,1))}.frame-figure img{max-block-size:calc(100dvh - 12rem)}}