/* ═══════════════ PORTFOLIO PAGES ═══════════════
   Styles for the generated portfolio pages (category indexes + album
   galleries) and the homepage category tiles. Token-driven off the moody
   theme in site.css — loaded after it. */

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.crumb {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.crumb a { color: var(--eyebrow); }

/* Portfolio pages have no hero — keep content clear of the fixed nav. */
.portfolio-index,
.album { padding-top: clamp(140px, 18vh, 200px); }

.page-lede {
  max-width: 52ch;
  margin-top: clamp(18px, 2.6vw, 26px);
  color: var(--fg-soft);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}

/* h1 reuses the section-header scale on these pages. */
.sec-head h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  max-width: 24ch;
}

/* ── Prose pages (privacy) ────────────────────────────────────────────── */
.prose-block {
  max-width: 62ch;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.prose-block h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  margin-bottom: clamp(10px, 1.2vw, 14px);
}
.prose-block p {
  color: var(--fg-soft);
  line-height: 1.75;
}

/* ── Album index grid ─────────────────────────────────────────────────── */
.album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px) clamp(24px, 3.5vw, 48px);
}
@media (min-width: 620px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); }
}

.album-card {
  display: block;
  text-decoration: none;
  min-width: 0;
}
.album-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ph-1);
}
.album-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}
.album-card-info {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  transition: border-color 0.35s ease;
}
.album-card-info h2 {
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  letter-spacing: var(--disp-track);
}
.album-card-info p {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.album-card:hover .album-card-info,
.album-card:focus-visible .album-card-info { border-top-color: var(--eyebrow); }
.album-card:hover .album-card-info p,
.album-card:focus-visible .album-card-info p { color: var(--eyebrow); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .album-card-media img { transition: opacity 0.5s ease, transform 1.2s var(--ease); }
  .album-card:hover .album-card-media img,
  .album-card:focus-visible .album-card-media img { transform: scale(1.03); }
}
@media (hover: none) {
  .album-card-media img, .g-btn img { transition: opacity 0.5s ease; }
}

/* ── Album gallery (masonry) ──────────────────────────────────────────── */
.gallery {
  columns: 1;
  column-gap: clamp(14px, 2vw, 24px);
}
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }

.g-item {
  break-inside: avoid;
  margin: 0 0 clamp(14px, 2vw, 24px);
}
.g-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--ph-1);
  overflow: hidden;
  cursor: zoom-in;
}
.g-btn img {
  width: 100%; height: auto;
  filter: var(--img-filter);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g-btn img { transition: opacity 0.5s ease, transform 1.2s var(--ease); }
  .g-btn:hover img, .g-btn:focus-visible img { transform: scale(1.02); }
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 250;
  display: grid;
  place-items: center;
  background: rgba(10, 8, 5, 0.96);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lb[hidden] { display: none; }
.lb.open { opacity: 1; }

.lb-stage {
  margin: 0;
  max-width: min(1240px, 92vw);
  text-align: center;
}
.lb-img {
  max-width: 100%;
  max-height: 80svh;
  width: auto; height: auto;
  margin-inline: auto;
  object-fit: contain;
  /* The viewer shows the photograph itself — skip the page grade. */
  filter: none;
}
.lb-cap {
  margin-top: 18px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.lb-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  padding: 12px;
  color: var(--fg);
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.lb-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  padding: 18px;
  color: var(--fg);
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.lb-prev { left: clamp(4px, 2vw, 24px); }
.lb-next { right: clamp(4px, 2vw, 24px); }
.lb-close:hover, .lb-nav:hover,
.lb-close:focus-visible, .lb-nav:focus-visible { opacity: 1; color: var(--eyebrow); }

.lb-count {
  position: absolute;
  bottom: clamp(16px, 3vw, 30px); left: 0; right: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Tap targets stay reachable when the caption wraps on small screens. */
@media (max-width: 620px) {
  .lb-nav { padding: 12px; }
  .lb-stage { max-width: 100vw; }
  .lb-img { max-height: 74svh; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-close, .lb-nav,
  .album-card-media img, .g-btn img,
  .album-card-info { transition: none; }
}

/* ── Homepage category tiles ──────────────────────────────────────────── */
/* Six tiles over the same full-bleed wall geometry as before. Desktop:
   4×2 feature top-left, two singles stacked right, three singles below —
   packs with no holes at 6 cols × 16.4vw rows. Mobile: 2-col, feature
   full-width. */
.wall--categories .tile { display: block; text-decoration: none; grid-column: span 1; }
.wall--categories .tile--feature { grid-column: span 2; }
@media (min-width: 761px) {
  .wall--categories .tile { grid-column: span 2; grid-row: span 1; }
  .wall--categories .tile--feature { grid-column: span 4; grid-row: span 2; }
}

/* Category label + album count ride the existing caption rise. */
.wall--categories .tile figcaption .cat-count {
  display: block;
  margin-top: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--fg-soft);
}
/* Tiles are links now — keep the focus ring inside the frame. */
.wall--categories .tile:focus-visible { outline-offset: -3px; }