/* Photography page. Loaded after /styles.css, which holds tokens, base, header and footer. */

.page-head { padding-block: clamp(40px, 8vw, 96px) var(--s6); }
.page-head h1 { font-size: clamp(3.2rem, 11vw, 8rem); line-height: .96; letter-spacing: -.05em; }
.page-head .prose { margin-top: var(--s5); color: var(--muted); font-size: 1.15rem; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.filters button {
  min-height: 44px; padding: 0 var(--s4);
  font: 400 .8rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.filters button:hover { color: var(--text); border-color: var(--muted); }
.filters button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* Justified rows: every photo keeps its own aspect ratio (--r) and the order is preserved. */
.gallery { display: flex; flex-wrap: wrap; gap: var(--s3); }
.gallery::after { content: ""; flex-grow: 1000000; }
.shot { margin: 0; position: relative; overflow: hidden; background: var(--surface); flex: 1 1 100%; }
.shot[hidden] { display: none; }
.shot a { display: block; cursor: zoom-in; }
.shot img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.02); }
@media (min-width: 640px)  { .shot { flex: var(--r) 1 calc(var(--r) * 200px); max-width: calc(var(--r) * 340px); } }
@media (min-width: 1000px) { .shot { flex-basis: calc(var(--r) * 240px); max-width: calc(var(--r) * 380px); } }

/* Lightbox */
.lb { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: rgb(6 8 12 / .97); color: var(--text); }
.lb::backdrop { background: rgb(6 8 12 / .97); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; }
.lb figure { margin: 0; display: grid; place-items: center; min-height: 0; padding: var(--s6) var(--s6) var(--s3); }
.lb img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s5) var(--s5); }
.lb-cap { color: var(--muted); font-size: .95rem; max-width: 70ch; }
.lb-btns { display: flex; gap: var(--s2); flex: none; }
.lb-btns button {
  min-width: 44px; min-height: 44px; padding: 0 var(--s4);
  font: 400 .8rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--line); cursor: pointer;
}
.lb-btns button:hover { border-color: var(--accent); }
@media (max-width: 599px) {
  .lb figure { padding: var(--s4) var(--s3) 0; }
  .lb-bar { flex-direction: column; align-items: flex-start; padding: var(--s3) var(--s4) var(--s4); }
}

/* Exhibitions and awards */
.timeline { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.timeline .yr { font: 400 .85rem var(--font-mono); letter-spacing: .06em; color: var(--accent); padding-top: .4em; }
.timeline h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 4px; }
.timeline p { color: var(--muted); max-width: 60ch; }
@media (max-width: 599px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* With JS on (wide screens), rows are computed so every row fills the full width. */
.gallery.is-justified::after { display: none; }
.gallery.is-justified .shot { flex: none; max-width: none; }
.gallery.is-justified .shot img { height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { .shot img { transition: none; } }