/* ---------- Photography ---------- */

/* shared bits */
.photography button { font: inherit; color: inherit; }
.link-button { background: none; border: 0; padding: 0; color: var(--amber); cursor: pointer; text-decoration: underline; font: inherit; }

.fade-img { opacity: 0; transition: opacity 0.3s; background: var(--bg-2); }
.fade-img.is-ready { opacity: 1; }
.fade-img.is-broken { opacity: 0.25; }
@keyframes pg-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.is-skeleton, .photo-tile, .film, .album-card, .carousel-stage {
    background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%) 0 0 / 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .is-skeleton, .photo-tile, .film, .carousel-stage { animation: pg-shimmer 1.6s linear infinite; }
}

/* ----- toolbar ----- */
.pg-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.pg-toolbar.is-skeleton { height: 2.6rem; background: none; }
.skeleton-bar { display: block; width: 16rem; max-width: 100%; height: 2.6rem; background: var(--bg-2); }
.pg-search { position: relative; flex: 1 1 14rem; max-width: 24rem; }
.pg-search .fa { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pg-search input, .pg-sort select {
    width: 100%; height: 2.6rem; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong);
    font: inherit; padding: 0 0.85rem; border-radius: 0;
}
.pg-search input { padding-left: 2.4rem; }
.pg-search input:focus, .pg-sort select:focus { border-color: var(--amber); outline: none; }
.pg-sort { flex: 0 0 auto; }
.pg-sort select { width: auto; min-width: 10rem; cursor: pointer; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.chip {
    background: transparent; border: 1px solid var(--line-strong); padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.9rem;
    display: inline-flex; gap: 0.4rem; align-items: baseline; transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.chip small { color: var(--muted); font-size: 0.75rem; }
.chip:hover { border-color: var(--amber); }
.chip.is-on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 700; }
.chip.is-on small { color: inherit; opacity: 0.75; }
.pg-count { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.1rem; }

/* ----- album covers ----- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; grid-auto-flow: dense; }
.album-card {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line);
    color: var(--text); text-decoration: none; background-color: var(--bg-2);
}
.album-card.is-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.album-card > .fade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s, transform 0.5s; }
.album-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 15, 28, 0.88), rgba(5, 15, 28, 0) 62%); pointer-events: none; }
.album-card:hover, .album-card:focus-visible { border-color: var(--amber); }
.album-card:hover > .fade-img { transform: scale(1.04); }
.album-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0.9rem 1rem; display: grid; gap: 0.1rem; }
.album-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: 0.01em; }
.is-feature .album-title { font-size: 2rem; }
.album-meta { font-size: 0.8rem; color: var(--muted); }
.album-count {
    position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; background: rgba(5, 15, 28, 0.72); padding: 0.15rem 0.5rem;
    font-size: 0.78rem; backdrop-filter: blur(4px);
}
.album-card.is-skeleton { border-color: transparent; }
@media (max-width: 40rem) {
    .album-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .album-card.is-feature { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
    .album-title { font-size: 1rem; }
    .is-feature .album-title { font-size: 1.5rem; }
    .album-meta { font-size: 0.72rem; }
    .album-caption { padding: 0.6rem 0.7rem; }
}

/* ----- album page ----- */
.crumbs { margin-bottom: 0.5rem; }
.crumbs a { color: var(--amber); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.album-head { display: flex; flex-wrap: wrap; align-items: end; gap: 0.25rem 1.5rem; margin-bottom: 1.1rem; }
.album-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; line-height: 1.05; flex: 1 1 100%; }
.album-head .muted { margin: 0; flex: 1 1 auto; }
.album-desc { display: block; max-width: 44rem; margin-top: 0.3rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); }
.seg button { background: transparent; border: 0; padding: 0.45rem 0.9rem; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.is-on { background: var(--amber); color: var(--amber-ink); font-weight: 700; }
.pg-foot { margin-top: 1.5rem; font-size: 0.9rem; }

/* ----- carousel ----- */
.carousel { max-width: 62rem; }
.carousel-stage { touch-action: pan-y; position: relative; height: min(62vh, 36rem); min-height: 16rem; border: 1px solid var(--line); background-color: #06131f; overflow: hidden; }
.carousel.is-skeleton .carousel-stage { height: min(60vh, 32rem); }
.carousel-photo { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; padding: 0; cursor: zoom-in; display: grid; place-items: center; }
.carousel-photo .fade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: none; }
.carousel-zoom { position: absolute; right: 0.7rem; bottom: 0.7rem; background: rgba(5, 15, 28, 0.7); padding: 0.4rem 0.55rem; opacity: 0; transition: opacity 0.15s; }
.carousel-photo:hover .carousel-zoom, .carousel-photo:focus-visible .carousel-zoom { opacity: 1; }
.carousel-arrow, .lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 4rem; display: grid; place-items: center;
    background: rgba(5, 15, 28, 0.62); border: 1px solid var(--line-strong); cursor: pointer; color: var(--text); font-size: 1.1rem;
    transition: background-color 0.12s, color 0.12s;
}
.carousel-arrow:hover, .lightbox-arrow:hover { background: var(--amber); color: var(--amber-ink); }
.is-prev { left: 0.6rem; }
.is-next { right: 0.6rem; }
.carousel-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; padding: 0.7rem 0.1rem; min-height: 2.6rem; }
.carousel-counter { color: var(--amber); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
.carousel-title { font-weight: 700; }
.carousel-date { color: var(--muted); font-size: 0.9rem; margin-left: auto; }
.filmstrip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.6rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.film { flex: 0 0 auto; width: 5.5rem; height: 5.5rem; padding: 0; border: 2px solid transparent; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; overflow: hidden; }
.film:hover { opacity: 1; }
.film.is-current { opacity: 1; border-color: var(--amber); }
.film .fade-img, .photo-tile .fade-img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 40rem) {
    .carousel-stage { height: 58vh; min-height: 14rem; }
    .carousel-arrow { width: 2.3rem; height: 3.2rem; }
    .carousel-zoom { display: none; }
    .film { width: 4rem; height: 4rem; }
}

/* ----- grid view ----- */
.photo-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.photo-tile { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); cursor: zoom-in; overflow: hidden; }
.photo-tile:hover, .photo-tile:focus-visible { border-color: var(--amber); }
.photo-tile .fade-img { transition: opacity 0.3s, transform 0.4s; }
.photo-tile:hover .fade-img { transform: scale(1.05); }

/* ----- full-screen view ----- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgb(3, 9, 16); display: flex; flex-direction: column; outline: none; }
.lightbox-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.8rem; position: relative; z-index: 2; }
.lightbox-counter { font-family: var(--font-display); font-weight: 800; color: var(--amber); letter-spacing: 0.04em; }
.lightbox-spacer { flex: 1; }
.lightbox-btn { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong); color: var(--text); cursor: pointer; text-decoration: none; }
.lightbox-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.lightbox-stage { flex: 1; min-height: 0; position: relative; margin: 0 0.8rem; touch-action: pan-y; }
.lightbox-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: none; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox-stage.is-zoomed { overflow: auto; touch-action: auto; }
.lightbox-stage.is-zoomed .lightbox-img { position: static; display: block; width: auto; height: auto; max-width: none; margin: 0 auto; cursor: zoom-out; }
.lightbox-arrow { position: absolute; top: 50%; z-index: 2; }
.lightbox-caption { display: grid; gap: 0.15rem; padding: 0.7rem 1rem 1rem; text-align: center; max-width: 52rem; margin: 0 auto; position: relative; z-index: 2; font-size: 0.95rem; }
.lightbox-caption small { color: var(--muted); }
@media (max-width: 40rem) {
    .lightbox-arrow { width: 2.2rem; height: 3rem; top: auto; bottom: 5rem; transform: none; }
    .lightbox-stage { margin: 0; }
}