.collection-intro { padding: 64px 0 40px; max-width: 720px; }
.collection-intro h1 { margin: 12px 0 16px; }
.collection-hero { margin-bottom: var(--space-4); }
.eyebrow { font: 12px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--travertine-deep); }
.collection-controls { display: flex; align-items: end; gap: 24px; padding: 24px 0; border-block: 1px solid var(--border-soft); margin-bottom: 32px; }
.collection-controls label { display: grid; gap: 6px; flex: 1; }
.collection-controls p { font-size: .9rem; padding-bottom: 10px; }
input, select, textarea { font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: 0; background: var(--bg); padding: 10px 12px; min-width: 0; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, .studio-button { color: var(--text); background: var(--marble-light); border: 1px solid var(--marble-deep); padding: 9px 16px; cursor: pointer; text-decoration: none; }
button:hover, .studio-button:hover { color: var(--text); border-color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
.book-entry { display: grid; grid-template-columns: 50px 1fr auto; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--border-soft); }
.book-number { font: 14px var(--font-display); color: var(--travertine-deep); padding-top: 4px; }
.book-entry h2 { font-size: 1.35rem; }
.book-author { margin: 8px 0 12px; }
.book-note { white-space: pre-wrap; max-width: 64ch; }
.book-status { align-self: start; font-size: .85rem; border: 1px solid var(--border-soft); padding: 3px 10px; }
.book-meta { margin-top: 12px; font-size: .9rem; }
.photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px; }
.photo-card { margin: 0; min-width: 0; }
.photo-card button { display: block; width: 100%; border: 0; padding: 0; background: var(--surface); }
.photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; image-rendering: auto; }
.photo-card figcaption { padding-top: 14px; }
.photo-card h2 { font-size: 1.12rem; }
.photo-card p { margin-top: 6px; font-size: .95rem; white-space: pre-wrap; }
.collection-empty { grid-column: 1 / -1; padding: 48px 0 80px; }
.collection-empty h2 { margin-bottom: 16px; }
#photo-viewer { color: var(--text); background: var(--bg); border: 1px solid var(--border); max-width: 1100px; width: calc(100% - 32px); max-height: 95dvh; padding: 20px; }
#photo-viewer::backdrop { background: rgba(40,35,28,.85); }
#photo-viewer figure { margin: 16px 0; }
#viewer-image { margin: auto; max-height: 68dvh; object-fit: contain; width: auto; }
#viewer-caption { margin-top: 16px; text-align: center; white-space: pre-wrap; }
.viewer-close { display: block; margin-left: auto; }
.viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media(max-width:640px) { .collection-intro { padding-top: 40px; } .collection-controls { flex-wrap: wrap; gap: 16px; } .collection-controls label:first-child { flex-basis: 100%; } .photo-grid { grid-template-columns: 1fr; } .book-entry { grid-template-columns: 28px 1fr; gap: 14px; } .book-status { grid-column: 2; grid-row: 2; justify-self: start; } }

.photo-group { border-top: 1px solid var(--border-soft); padding: 28px 0 44px; }
.photo-group > h2 { margin-bottom: 24px; font-size: 1.45rem; }
.photo-subgroup + .photo-subgroup { margin-top: 40px; }
.photo-subgroup > h3 { margin-bottom: 20px; font-size: 1.15rem; }
.photo-card h4 { font-size: 1.12rem; }
.photo-groups .photo-grid { align-items: start; }
@media(max-width:760px) { .collection-controls { flex-wrap: wrap; } .collection-controls label { flex-basis: 40%; } .collection-controls label:first-child { flex-basis: 100%; } }
.photo-card > button { transition: transform 160ms ease, box-shadow 160ms ease; cursor: zoom-in; }
@media(hover:hover) { .photo-card > button:hover { transform: translateY(-4px); box-shadow: 0 7px 16px rgba(60,50,35,.14); } }
.photo-card > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; box-shadow: 0 7px 16px rgba(60,50,35,.14); }
@media(prefers-reduced-motion:reduce) { .photo-card > button { transition: none; } .photo-card > button:hover { transform: none; } }


/* Photo albums use the same paper, fine rules and serif labels as the site. */
.album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:28px 24px; align-items:start; }
.album-trigger { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; }
.album-mosaic { display:grid; aspect-ratio:1; padding:5px; border:1px solid var(--border-soft); gap:3px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); transition:border-color 180ms ease,transform 240ms ease; }
.album-mosaic img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; image-rendering:auto; }
.mosaic-1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.mosaic-2 { grid-template-rows:1fr; }
.mosaic-3 img:first-child { grid-row:span 2; }
.album-label { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-top:12px; }
.album-label strong { font:500 .95rem var(--font-display); overflow-wrap:anywhere; }
.album-label > span { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.album-open-icon { display:none; }
@media(hover:hover) { .album-trigger:hover .album-mosaic { border-color:var(--accent); transform:translateY(-3px); } }
.album-explorer { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:24px 32px; border:0; color:var(--text); background:var(--bg); overflow:auto; overscroll-behavior:contain; }
.album-explorer::backdrop { background:var(--bg); }
.album-spread-shell { max-width:1100px; min-height:100%; margin:auto; display:flex; flex-direction:column; }
.album-spread-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border-soft); padding-bottom:14px; font-size:.85rem; }
.album-spread-bar > span { font-family:var(--font-display); letter-spacing:.04em; }
.album-spread-bar button { background:transparent; border:0; padding:8px 0 8px 12px; font-size:.85rem; }
.album-spread-bar button:hover { color:var(--accent); }
.album-subfilters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; padding:16px 0 0; }
.album-subfilters button { background:transparent; border:0; border-bottom:1px solid transparent; padding:3px 0; font-size:.9rem; }
.album-subfilters button[aria-pressed=true] { border-color:var(--accent); }
.album-subfilters span { margin-left:4px; color:var(--muted); font-size:.75rem; }
.album-spread { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:22px 40px; height:min(72dvh,700px); min-height:420px; margin:auto 0; padding:24px 0; }
.album-spread .photo-card { display:flex; align-items:center; justify-content:center; min-height:0; }
.album-spread .photo-card > button { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:transparent; box-shadow:none; }
.album-spread .photo-card img { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }
.album-pagination { display:flex; align-items:center; justify-content:center; gap:24px; padding-top:16px; border-top:1px solid var(--border-soft); }
.album-pagination p { color:var(--muted); font-size:.8rem; }
.album-pagination button { background:transparent; border:0; padding:8px; font-size:.9rem; }
.album-pagination button:disabled { cursor:default; opacity:.3; }
.gallery-controls { justify-content:space-between; padding:16px 0; }
.gallery-controls label { flex:0 1 360px; }
.gallery-controls > p { font-size:.85rem; }
#viewer-caption { display:none; }
@media(max-width:700px) {
 .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
 .album-label { display:block; padding-top:8px; }
 .album-label strong { display:block; font-size:.9rem; }
 .album-label > span { display:block; margin-top:3px; }
 .gallery-controls label { flex-basis:100%; }
 .album-explorer { padding:16px; }
 .album-spread-bar > span { font-size:.75rem; }
 .album-spread-bar button { font-size:.8rem; }
 .album-pagination { margin-top:auto; }
}
@media(prefers-reduced-motion:reduce) { .album-mosaic { transition:none; } .album-trigger:hover .album-mosaic { transform:none; } }

/* A focused photo spread, with the original page still visibly underneath. */
body:has([data-collection="photography"]) > .page-header { position:sticky; top:0; z-index:10; background:var(--bg); }
.album-explorer { inset:92px 0 24px; width:calc(100% - 96px); max-width:1040px; height:calc(100dvh - 116px); max-height:720px; padding:0; margin:auto; background:transparent; overflow:visible; }
.album-explorer[open] { display:flex; flex-direction:column; animation:album-arrive 240ms ease-out both; }
.album-explorer::backdrop { background:rgba(55,49,40,.12); animation:album-backdrop-arrive 240ms ease-out both; }
.album-explorer .album-spread-shell { position:relative; flex:1; min-height:0; width:100%; padding:28px 32px; border:1px solid var(--border-soft); background:var(--bg); margin:0 auto; overflow:hidden; box-shadow:0 14px 48px rgba(45,35,22,.12); }
.album-dismiss { position:absolute; top:8px; right:12px; z-index:2; padding:5px 9px; border:0; background:transparent; font-size:24px; line-height:1; color:var(--muted); }
.album-dismiss:hover { background:transparent; color:var(--text); }
.album-subfilters,.album-pagination { flex-shrink:0; }
.album-explorer .album-subfilters { padding:0 24px 8px; }
.album-explorer .album-spread { flex:1; height:auto; min-height:0; padding:12px 0; }
.album-explorer .album-spread .photo-card { min-height:0; }
html:has([data-collection="photography"]) { scrollbar-gutter:stable; }
.album-explorer.is-entering .photo-card { opacity:0; }
.album-explorer.is-closing { animation:album-depart 260ms ease-in both; }
.album-explorer.is-closing::backdrop { animation:album-backdrop-depart 260ms ease-in both; }
.album-explorer[data-input="pointer"] button:focus,
#photo-viewer[data-input="pointer"] button:focus { outline:none; box-shadow:none; }
@keyframes album-arrive { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@keyframes album-depart { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.97); } }
@keyframes album-backdrop-arrive { from { background:rgba(55,49,40,0); } to { background:rgba(55,49,40,.12); } }
@keyframes album-backdrop-depart { from { background:rgba(55,49,40,.12); } to { background:rgba(55,49,40,0); } }
@media(max-width:800px) {
 .album-explorer { top:150px; bottom:16px; width:calc(100% - 32px); height:calc(100dvh - 166px); }
}
@media(max-width:700px) {
 .album-explorer .album-spread-shell { padding:28px 16px 12px; }
 .album-explorer .album-spread { grid-template-rows:auto repeat(var(--spread-rows),minmax(0,1fr)); gap:12px; }
 .album-explorer .album-subfilters { gap:4px 12px; padding:0 12px 6px; }
 .album-explorer .album-pagination { padding-top:6px; gap:12px; }
}

/* Individual photos float above the spread without replacing it with another page. */
#photo-viewer { inset:92px 0 24px; width:fit-content; max-width:calc(100% - 80px); max-height:calc(100dvh - 116px); margin:auto; padding:36px 0 0; border:0; background:transparent; overflow:visible; }
#photo-viewer[open] { display:flex; flex-direction:column; align-items:center; animation:photo-arrive 220ms ease-out both; }
#photo-viewer::backdrop { background:rgba(20,18,15,.88); }
#photo-viewer figure { margin:0; min-height:0; }
#viewer-image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 210px); filter:drop-shadow(0 8px 24px rgba(30,25,20,.2)); }
#photo-viewer .viewer-close { position:absolute; right:0; top:-8px; display:grid; place-items:center; width:32px; height:32px; margin:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.04); color:rgba(255,255,255,.85); padding:0; font:24px/1 var(--font-body); transition:background 160ms ease,border-color 160ms ease; }
#photo-viewer .viewer-close:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
#photo-viewer .viewer-controls { align-self:stretch; margin-top:12px; padding:0; background:transparent; color:rgba(255,255,255,.5); font-size:.75rem; letter-spacing:.04em; }
#photo-viewer .viewer-controls button { background:transparent; border:0; padding:8px 0; color:rgba(255,255,255,.8); font-size:.8rem; transition:color 160ms ease; }
#photo-viewer .viewer-controls button:hover { color:#fff; }
#photo-viewer button:focus-visible { outline:1px solid rgba(255,255,255,.85); outline-offset:4px; }
#photo-viewer .viewer-controls button:disabled { cursor:default; opacity:.3; }
#photo-viewer.is-closing { animation:photo-depart 180ms ease-in both; }
.album-grid[data-input="pointer"] button:focus { outline:none; box-shadow:none; }
@keyframes photo-arrive { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
@keyframes photo-depart { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.98); } }
@media(max-width:800px) {
 #photo-viewer { inset:150px 0 16px; max-width:calc(100% - 48px); max-height:calc(100dvh - 166px); }
 #viewer-image { max-height:calc(100dvh - 250px); }
}
@media(prefers-reduced-motion:reduce) {
 .album-explorer[open],.album-explorer::backdrop,#photo-viewer[open] { animation:none; }
}
/* Keep controls and photos inside the visible viewport at every header size. */
.album-explorer { inset:var(--gallery-top,92px) 0 16px; height:calc(100dvh - var(--gallery-top,92px) - 32px); }
.album-share { position:absolute; top:12px; left:16px; z-index:2; padding:6px 8px; font-size:.75rem; background:transparent; border:0; color:var(--muted); }
.album-explorer .album-subfilters { padding-inline:72px; }
#photo-viewer { inset:var(--gallery-top,92px) 0 16px; width:min(1000px,calc(100% - 64px)); max-width:none; height:calc(100dvh - var(--gallery-top,92px) - 32px); max-height:900px; padding:44px 0 0; }
#photo-viewer figure { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
#viewer-image { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; touch-action:pan-y pinch-zoom; }
#photo-viewer .viewer-close { width:40px; height:40px; top:0; }
#photo-viewer .viewer-controls { flex:none; min-height:44px; margin-top:8px; }
#photo-viewer .viewer-controls button { min-height:44px; padding:8px; }
.viewer-info { display:flex; align-items:center; justify-content:center; gap:16px; }
#photo-viewer .viewer-info button { font-size:.7rem; color:rgba(255,255,255,.65); }
@media(max-width:700px), (max-height:540px) {
 .album-explorer { width:calc(100% - 24px); }
 .album-explorer .album-spread-shell { padding:46px 12px 10px; }
 .album-explorer .album-subfilters { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:0 0 4px; min-height:40px; }
 .album-explorer .album-subfilters button { flex-shrink:0; min-height:40px; }
 .album-explorer .album-spread { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto repeat(var(--spread-rows),minmax(0,1fr)); gap:10px; margin:0; padding:4px 0; }
 .album-explorer .album-pagination { padding-top:0; gap:10px; }
 .album-explorer .album-pagination button { min-height:40px; }
 .album-dismiss { top:2px; right:4px; width:44px; height:44px; }
 .album-share { top:2px; left:4px; min-height:44px; }
 #photo-viewer { width:calc(100% - 24px); padding-top:42px; }
 .viewer-info { gap:4px; flex-direction:column; }
 #photo-viewer .viewer-info button { min-height:30px; padding:4px 8px; }
 #photo-viewer .viewer-controls { gap:4px; }
}

/* A compact heading above balanced, uncropped rows; the motion still radiates out. */
.album-explorer .album-spread-shell { padding:20px 24px 14px; }
.album-heading { flex:none; text-align:center; padding:0 80px 12px; }
.album-heading h2 { font-size:1.05rem; line-height:1.4; overflow-wrap:anywhere; }
.album-heading p { font-size:.72rem; color:var(--muted); margin-top:3px; }
.album-explorer .album-subfilters { gap:4px 10px; padding:0 0 12px; }
.album-subfilters button { padding:6px 10px; border:1px solid transparent; color:var(--muted); transition:background 160ms ease,color 160ms ease,border-color 160ms ease; }
.album-subfilters button[aria-pressed=true] { color:var(--text); background:var(--marble-light); border-color:var(--border); box-shadow:inset 0 -2px 0 var(--accent); }
.album-subfilters button[aria-pressed=true] span { color:inherit; }
.album-explorer .album-spread { display:flex; flex-direction:column; gap:16px; margin:0; padding:0 0 14px; }
.photo-row { display:flex; flex:1; gap:16px; min-height:0; justify-content:center; }
.album-explorer .photo-row .photo-card { flex:0 1 auto; aspect-ratio:var(--photo-ratio); min-width:0; height:100%; }
.album-explorer .photo-row .photo-card img { object-fit:contain; }
.album-explorer .album-pagination { padding-top:6px; }
@media(max-width:700px), (max-height:540px) {
 .album-explorer .album-spread-shell { padding:12px 12px 8px; }
 .album-heading { padding:0 66px 8px; }
 .album-heading h2 { font-size:.9rem; }
 .album-heading p { font-size:.68rem; }
 .album-explorer .album-subfilters { gap:4px; padding:0 0 8px; }
 .album-subfilters button { padding:6px 9px; font-size:.82rem; }
 .album-explorer .album-spread { gap:10px; padding-bottom:8px; }
 .photo-row { gap:10px; }
 .album-share { font-size:.68rem; padding-inline:5px; }
}
@media(prefers-reduced-motion:reduce) { .album-subfilters button { transition:none; } }

/* Edge cues appear only while more country filters are out of view. */
.album-subfilters-wrap { position:relative; flex-shrink:0; min-width:0; }
@media(max-width:700px), (max-height:540px) {
 .album-subfilters-wrap::before,.album-subfilters-wrap::after { position:absolute; z-index:1; top:0; bottom:8px; width:26px; display:flex; align-items:center; pointer-events:none; color:var(--muted); font-size:20px; }
 .album-subfilters-wrap.can-scroll-left::before { content:'‹'; left:0; justify-content:flex-start; background:linear-gradient(to right,var(--bg) 30%,transparent); }
 .album-subfilters-wrap.can-scroll-right::after { content:'›'; right:0; justify-content:flex-end; background:linear-gradient(to left,var(--bg) 30%,transparent); }
}