/* Shared clickable tiles. Keep photo framing and gallery layout unchanged. */
:root{--tile-radius:14px}
main .home-album,main .story-preview,main .story-card,main .album-card{border:1px solid var(--color-rule);border-radius:var(--tile-radius);background:var(--color-paper-warm);padding:12px;min-width:0}
main .home-album,main .story-preview,main .story-card{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,translate .18s ease}
main .album-card{transition:border-color .18s ease,box-shadow .18s ease}
main .album-image,main .album-art,main .story-preview-frame,main .story-card-frame,main .portfolio-photo-frame,main .wedding-photo-open,main .photo-grid .photo{border-radius:10px;overflow:hidden}
main .story-card .story-card-frame{display:block;margin-top:0}
main .home-album .album-label{margin-bottom:4px}
main .photo-grid .photo,main .portfolio-photo-link,main .wedding-photo-open{transition:box-shadow .18s ease}
main :is(.home-album,.story-preview,.story-card,.album-art,.portfolio-photo-link,.wedding-photo-open):focus-visible,main .photo-grid .photo:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
main .album-card:focus-within{border-color:var(--color-accent)}
@media(hover:hover) and (pointer:fine){
 main :is(.home-album,.story-preview,.story-card):hover{border-color:var(--color-accent);box-shadow:0 8px 24px #0003;translate:0 -3px}
 main .album-card:hover{border-color:var(--color-accent);box-shadow:0 8px 24px #0003}
 main .photo-grid .photo:hover,main .portfolio-photo-link:hover,main .wedding-photo-open:hover{box-shadow:0 0 0 2px var(--color-accent)}
}
@media(max-width:650px){main .home-album,main .album-card{padding:8px}main .story-preview{padding:12px;grid-template-columns:90px minmax(0,1fr)}main .story-preview-frame,main .story-preview img{width:90px}}
@media(prefers-reduced-motion:reduce){main .home-album,main .story-preview,main .story-card,main .album-card,main .photo-grid .photo,main .portfolio-photo-link,main .wedding-photo-open{transition:none;translate:none}}