/* Gallery page. Builds on the tokens in styles.css. */

.sample-bar { background: var(--ink); color: var(--cream); text-align: center; font-size: 13px; letter-spacing: 0.04em; padding: 9px 16px; }
.nav a[aria-current="page"] { color: var(--olive); }

/* Intro */
.g-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 56px); text-align: center; }
.g-hero h1 { margin: 16px 0 18px; }
.g-hero h1 em { font-style: italic; color: var(--olive); }
.g-hero .lede { margin: 0 auto; }

/* Photo sections */
.g-section { padding: 0 0 clamp(56px, 7vw, 88px); }
.g-section:nth-of-type(even) { background: var(--linen); padding-top: clamp(56px, 7vw, 88px); }
.g-head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--sand); }
.g-head h2 { font-size: clamp(30px, 3.2vw, 42px); font-style: italic; color: var(--olive); }
.g-head p { color: var(--muted); font-size: 16px; }
.g-row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.g-row .g-open { aspect-ratio: 4 / 5; }
.g-row .g-open img { width: 100%; height: 100%; object-fit: cover; }
.g-row .g-item:first-child .g-open { border-radius: 999px 999px 0 0; }
.g-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--stone); cursor: zoom-in; overflow: hidden; }
.g-open img { width: 100%; height: auto; transition: transform 0.8s ease; }
.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; text-align: left;
  background: linear-gradient(to top, rgba(45, 42, 37, 0.62), rgba(45, 42, 37, 0));
  color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 21px;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.g-open:hover img, .g-open:focus-visible img { transform: scale(1.04); }
.g-open:hover .g-cap, .g-open:focus-visible .g-cap { opacity: 1; transform: none; }
@media (hover: none) { .g-cap { opacity: 1; transform: none; } }

/* Closing prompt */
.g-cta { background: var(--stone); padding: clamp(56px, 7vw, 88px) 0; text-align: center; }
.g-cta p { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 22px; }
.g-cta em { font-style: italic; color: var(--olive); }

/* Photo viewer */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(30, 28, 24, 0.9); }
.lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox figure { grid-column: 2; text-align: center; }
.lightbox img { max-width: 100%; max-height: 82vh; margin: 0 auto; }
.lightbox figcaption { margin-top: 14px; color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 22px; }
.lb-nav, .lb-close { background: none; border: 0; color: var(--cream); cursor: pointer; font-size: 46px; line-height: 1; padding: 8px; opacity: 0.8; }
.lb-nav:hover, .lb-close:hover { opacity: 1; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-close { position: fixed; top: 16px; right: 22px; font-size: 40px; }

@media (max-width: 680px) {
  .g-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-cap { font-size: 16px; padding: 28px 12px 10px; }
  .lightbox[open] { grid-template-columns: 40px 1fr 40px; }
}