.album-topbar { padding: 24px clamp(20px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.album-topbar nav { display:flex; flex-wrap:wrap; gap:20px; }
.album-topbar nav a { color:var(--wine); font-size:.85rem; text-decoration:none; }
.album-topbar nav a[aria-current] { text-decoration:underline; text-underline-offset:6px; }
.album-intro { padding:70px 24px 32px; text-align:center; }
.album-intro h1 { font-family:var(--font-serif),serif; font-size:clamp(2.8rem,7vw,5rem); font-weight:400; margin:12px 0; color:var(--wine); }
.album-intro p { line-height:1.7; }
.album-hint { color:var(--muted); font-size:.85rem; }
.album-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:16px 20px 35px; }
.album-tabs a { color:var(--wine); border:1px solid var(--line); border-radius:30px; padding:12px 18px; text-decoration:none; font-size:.85rem; }
.album-tabs a:hover { background:var(--wine); color:white; }
.album-collection { max-width:1280px; margin:auto; padding:0 24px 70px; }
.album-section { scroll-margin-top:24px; margin:28px 0 65px; --accent:#a32d48; }
.album-section#anniversary { --accent:#65375f; }
.album-section#christmas { --accent:#245a46; }
.album-section#mothers { --accent:#b9436a; }
.album-section h2 { font-family:var(--font-serif),serif; font-size:clamp(2rem,5vw,3rem); font-weight:400; color:var(--accent); border-bottom:3px solid var(--accent); padding-bottom:12px; }
.album-year { border-bottom:1px solid var(--line); padding:10px 0; }
.album-year summary { cursor:pointer; padding:16px 4px; font-family:var(--font-serif),serif; font-size:1.8rem; color:var(--accent); }
.album-year summary span { margin-left:20px; font-family:var(--font-sans),sans-serif; font-size:.75rem; color:var(--muted); }
.album-letter { display:inline-block; color:var(--accent); margin:0 0 24px; font-size:.85rem; }
.album-grid { columns:3; column-gap:20px; }
.album-photo { display:block; break-inside:avoid; margin-bottom:20px; background:#f5efe7; border:6px solid white; box-shadow:0 3px 12px #32152112; cursor:zoom-in; }
.album-photo img { display:block; width:100%; height:auto; }
.photo-albums a:focus-visible,.photo-albums summary:focus-visible,.photo-albums button:focus-visible { outline:3px solid #b97842; outline-offset:4px; }
.photo-viewer { width:min(1100px,96vw); max-width:96vw; max-height:95dvh; border:0; padding:16px; background:#30151f; color:white; border-radius:8px; }
.photo-viewer::backdrop { background:#160910e8; }
.photo-viewer > img { display:block; width:100%; height:72dvh; object-fit:contain; }
.photo-viewer button { border:1px solid #ffffff60; background:transparent; color:white; padding:12px 18px; border-radius:6px; cursor:pointer; min-height:44px; }
.viewer-close { display:block; margin:0 0 10px auto; }
.viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; }
.viewer-caption { text-align:center; font-size:.85rem; margin:0; }
body:has(.photo-viewer[open]) { overflow:hidden; }
@media(max-width:760px) { .album-grid { columns:2; column-gap:12px; } .album-photo { margin-bottom:12px; border-width:3px; } .album-topbar { flex-direction:column; } .album-topbar nav { justify-content:center; gap:14px; } .album-collection { padding-inline:16px; } }
@media(max-width:420px) { .album-grid { columns:1; } .album-tabs a { font-size:.75rem; padding:12px; } }