@font-face{font-family:SPPhotosCygre;src:url('fonts/cygre-semibold.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:SPPhotosOnest;src:url('fonts/onest-regular.woff') format('woff');font-weight:400;font-display:swap}
.photos-section{margin-top:var(--section-gap);padding:0 var(--content-gutter) 80px;color:#E8E8E8}
.photos-section h2{margin:0 0 24px;text-align:center;font:400 var(--section-title-size)/1.2 var(--display-font)}
.photo-mosaic{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:clamp(138px,45vw,175px);gap:4px}
.photo-open{display:block;position:relative;min-width:0;overflow:hidden;border-radius:9px;background:#1B1B1D;text-decoration:none;cursor:zoom-in}
.photo-mosaic .photo-open:nth-child(6n+1),.photo-mosaic .photo-open:nth-child(6n+4),.photo-mosaic .photo-open:nth-child(6n+5){grid-column:span 2}
.photo-mosaic .photo-open:nth-child(6n+2),.photo-mosaic .photo-open:nth-child(6n+3),.photo-mosaic .photo-open:nth-child(6n+6){grid-column:span 3}
.photo-open img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.photo-mosaic .photo-open:first-child img{object-position:60% 45%}
.photo-mosaic .photo-open:nth-child(2) img{object-position:65% 45%}
.photo-mosaic .photo-open:nth-child(3) img{object-position:58% 50%}
.photo-mosaic .photo-open:nth-child(4) img{object-position:50% 40%}
.photo-mosaic .photo-open:nth-child(6) img{object-position:50% 42%}
.photos-more{margin-top:24px}
.photo-open:focus-visible{outline:2px solid #E5F36B;outline-offset:3px}
@media(hover:hover){.photo-open:hover img{transform:scale(1.035)}}
/* Full photo library keeps the original proportions of every photograph. */
.photos-library-body{margin:0;color:#E8E8E8;font-family:SPPhotosOnest,Arial,sans-serif}
.photos-page{box-sizing:border-box;width:min(100%,390px);margin-inline:auto;padding:32px 20px 80px}
.photos-page *{box-sizing:border-box}
.photos-navigation{display:flex;justify-content:flex-end;margin-bottom:24px}
.photos-back{width:auto;min-height:38px;padding:10px 16px;font-size:10px}
.photos-header{text-align:center;margin-bottom:32px}
.photos-header>a{display:block;width:fit-content;margin:0 auto 32px}
.photos-logo{display:block;width:146px;height:auto}
.photos-header h1{margin:0;color:#E8E8E8;font:400 22px/1.2 SPPhotosCygre,Arial,sans-serif}
.photo-library{columns:2;column-gap:6px}
.photo-library .photo-open{break-inside:avoid;margin-bottom:6px}
.photo-library img{height:auto}
/* Native dialog provides focus trapping, Escape and focus restoration. */
body.photo-viewer-open{overflow:hidden}
.photo-viewer{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(1100px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:0;border:0;background:transparent;color:#E8E8E8;overflow:visible}
.photo-viewer::backdrop{background:rgba(0,0,0,.94);backdrop-filter:blur(6px)}
.photo-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;height:48px;gap:12px}
.photo-viewer-count{margin:0;font:400 14px/17px SPPhotosOnest,Arial,sans-serif;color:#D2D2D2}
.photo-viewer-controls{display:flex;gap:4px}
.photo-viewer button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#E8E8E8;cursor:pointer}
.photo-viewer button:focus-visible{outline:2px solid #E5F36B;outline-offset:0}
.photo-viewer svg{width:22px;height:22px;pointer-events:none}
.photo-viewer-image{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100svh - 96px);object-fit:contain;margin:0 auto;border-radius:6px;touch-action:pan-y pinch-zoom}
@media(prefers-reduced-motion:reduce){.photo-open img{transition:none}}

/* Light home gallery matches the repertoire section. */
#photos.photos-section{padding:40px var(--content-gutter);background:#E8E8E8;color:#1B1B1D}

/* Photo categories share the site's lavender accent and compact navigation. */
.photo-tabs{display:flex;gap:6px;padding:4px;margin:0 0 24px;border:1px solid #e8e8e833;border-radius:999px;background:#2B2B2B}
.photo-tab{flex:1;min-width:0;min-height:44px;padding:10px 12px;border:0;border-radius:999px;background:transparent;color:#E8E8E8;font:400 13px/18px SPPhotosOnest,Arial,sans-serif;cursor:pointer}
.photo-tab[aria-selected=true]{background:#E5F36B;color:#1B1B1D}
.photo-tab:focus-visible{outline:2px solid #E5F36B;outline-offset:2px}
.photo-panel[hidden]{display:none}
.photo-panel:focus-visible{outline:2px solid #A895D8;outline-offset:5px}

.photos-page .photos-back{background:transparent;color:#E8E8E8;border-color:#e8e8e85c}
.photos-page .photos-back:hover{background:#e8e8e812}