/* Album preview: a grid of sheets from the project album, opened in a viewer.
   Sheets are A3 landscape (1191x842 pt), so every image keeps a 1.414 ratio. */
.album-preview{margin-top:48px}
.album-preview-head{max-width:680px;margin-bottom:28px}
.album-preview-head h3{margin-bottom:10px}
.album-preview-head p{color:var(--muted)}

.album-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin:0;padding:0}
.album-grid li{min-width:0}

.album-sheet{display:block;text-decoration:none;color:inherit}
.album-sheet img{display:block;width:100%;height:auto;aspect-ratio:1191/842;object-fit:contain;background:white;border:1px solid var(--line);transition:border-color .15s}
.album-sheet:hover img,.album-sheet:focus-visible img{border-color:var(--ink)}
.album-sheet-label{display:block;font-size:.9375rem;margin-top:12px;line-height:1.4}
.album-sheet-label::after{content:" ↗";color:var(--muted)}

/* Groups: titled rows on wide screens, swipe strips on phones (see the phone query). */
.album-group{margin-top:30px}
.album-group:first-of-type{margin-top:0}
.album-group-title{font-size:1rem;font-weight:normal;color:var(--muted);margin:0 0 14px;letter-spacing:.02em}

.album-note{color:var(--muted);font-size:.9375rem;margin-top:28px;max-width:680px}

/* Viewer. A native <dialog> gives Esc, focus trapping and the backdrop for free;
   without JavaScript each sheet stays an ordinary link to the larger image. */
.album-viewer{width:min(96vw,1500px);max-width:none;max-height:94vh;border:none;padding:0;background:var(--paper);color:var(--ink)}
.album-viewer::backdrop{background:rgba(10,20,25,.82)}
.album-viewer-frame{display:flex;flex-direction:column;height:100%}
.album-viewer img{display:block;width:100%;height:auto;max-height:calc(94vh - 92px);object-fit:contain;background:var(--soft)}
.album-viewer-bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--line)}
.album-viewer-caption{font-size:1rem;flex:1;min-width:0}
.album-viewer-counter{color:var(--muted);font-size:.875rem;flex:none;font-variant-numeric:tabular-nums}
.album-viewer button{font:inherit;font-size:.9375rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer;min-height:44px;min-width:44px;padding:0 14px}
.album-viewer button:hover,.album-viewer button:focus-visible{border-color:var(--ink)}
.album-viewer .album-close{background:var(--ink);color:var(--paper);border-color:var(--ink)}

@media(max-width:960px){
 .album-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px}
}
@media(max-width:620px){
 /* Each group becomes one swipeable strip: 15 stacked pictures turn into three rows. */
 .album-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:0 22px 14px;margin:0 -22px;scrollbar-width:none}
 .album-strip::-webkit-scrollbar{display:none}
 .album-strip li{flex:0 0 76%;scroll-snap-align:start}
 .album-strip li:last-child{margin-right:22px}
 .album-group{margin-top:22px}
 .album-group-title{margin:0 0 10px}
 .album-group-title::after{content:" · листайте →";color:var(--muted);font-weight:normal;font-size:.875rem}
 .album-sheet-label{font-size:.875rem;margin-top:8px}
 .album-preview{margin-top:36px}
 .album-viewer{width:100vw;max-height:100vh;height:100vh}
 .album-viewer img{max-height:calc(100vh - 104px)}
 .album-viewer-bar{flex-wrap:wrap;gap:10px}
 .album-viewer-caption{flex-basis:100%}
}