/* photos.html — the full photograph wall. Builds on variants/alice.css (same tokens, top bar, wall and contact styles). */

.masthead { margin-bottom: 0; }
.mast-nav a[aria-current="page"] { color: var(--muted); }

/* head: label column | note, like the section heads on the home page */
.photos-intro { padding-block: 88px 40px; }
.photos-title { font: 600 46px/1.1 var(--font-body); letter-spacing: -.03em; }
.photos-note { margin-top: 14px; font-size: 1.05rem; color: var(--muted); max-width: 56ch; }
.photos-note a { color: var(--ink); }
.photos-note a:hover { color: var(--link-hover); }
@media (max-width: 760px) { .photos-intro { padding-block: 56px 28px; } }

/* every photo, balanced across the columns by photos.js */
.photo-wall-all { margin: 0; }
@media (max-width: 760px) { .photo-wall-all { gap: 8px; } .photo-wall-all .wall-col { gap: 14px; } .photo-wall-all .wall-col:nth-child(n) { margin-top: 0; } }

.contact { padding-block: 120px 24px; }
.contact::before { display: none; } /* no dotted band above the footer on these pages */
.contact-links { margin-top: 4px; }

/* film.html and music.html: a still with a play button, swapped for the real player on click (gallery.js) */
.media-tile { display: grid; gap: 8px; }
.media-still { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }
.media-still::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background .3s; }
.media-still:hover::after { background: rgba(0, 0, 0, .12); }
.media-still .play { position: absolute; z-index: 1; left: 14px; bottom: 14px; width: 46px; height: 46px; padding-left: 3px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: .85rem; transition: scale .3s var(--ease-spring); }
.media-still:hover .play { scale: 1.12; }
.media-still:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.media-player { background: #000; }
.media-player iframe, .media-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-player video { object-fit: cover; background: #000; } /* tall phone videos sit in 4:5 tiles, like an Instagram grid */
.media-tile figcaption { display: block; font: 500 12.5px/1.45 var(--font-body); color: var(--muted); }
.media-title { color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.media-role { display: block; }
a.media-title { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
a.media-title:hover { text-decoration-color: currentColor; }
.photos-more { display: grid; grid-template-columns: minmax(0, var(--leftcol)) minmax(0, 1fr); column-gap: var(--cgap); margin-top: 40px; font: 500 .95rem var(--font-body); }
.photos-more a { grid-column: 2; justify-self: start; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.photos-more a:hover { color: var(--link-hover); border-color: var(--link-hover); }
@media (max-width: 760px) { .photos-more { grid-template-columns: 1fr; } .photos-more a { grid-column: 1; } }