.photography-page { --collection-nav-height: 51px; scroll-padding-top: calc(var(--site-header-height) + var(--collection-nav-height) + 12px); }
.photography { flex: 1; width: calc(100% - 96px); max-width: var(--page-width); margin: auto; }
.photography-intro { padding: 72px 0 42px; }
.photography-intro h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.055em; line-height: 1.08; font-weight: 600; }
.photography-intro p { margin: 18px 0 0; font-size: 17px; letter-spacing: -.2px; color: var(--muted); }
.collections { background: var(--glass-nav-sheen), var(--glass-nav-background); -webkit-backdrop-filter: var(--collection-glass-filter, blur(var(--glass-nav-blur)) saturate(1.4)); backdrop-filter: var(--collection-glass-filter, blur(var(--glass-nav-blur)) saturate(1.4)); display: flex; gap: 28px; overflow-x: auto; position: sticky; top: var(--site-header-height); z-index: 11; border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Keep category text above the shared backdrop, without filtering it a second time. */
.photography-page.collections-docked { --site-glass-extension: var(--collection-nav-height); }
.collections-docked .collections { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .collections { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .collections { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.collections a { flex-shrink: 0; font-size: 13px; color: var(--muted); padding: 17px 0; border-bottom: 1px solid transparent; transition: color .2s; }
.collections a:hover, .collections a[aria-current] { color: var(--ink); }
.collections a[aria-current] { border-color: var(--ink); }
.collection { margin: 0 0 96px; }
.collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0 26px; }
.collection-heading h2 { font-size: 19px; font-weight: 500; letter-spacing: -.4px; margin: 0 0 7px; }
.collection-heading p, .collection-heading > span { font-size: 12px; line-height: 1.5; margin: 0; color: var(--muted); }
.collection-heading > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.photo-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.photo { display: block; position: relative; background: var(--placeholder); flex-grow: var(--ratio); flex-basis: calc(var(--ratio) * 300px); aspect-ratio: var(--ratio); overflow: hidden; cursor: zoom-in; }
/* Keep the photographed black levels intact, including while hovering. */
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-grid.is-laid-out .photo { flex: none; }
.photo.is-unavailable::after { content: "Image unavailable · open original ↗"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.photography-footer { padding: 0 0 48px; text-align: center; color: var(--muted); }
.photography-footer p { font-size: 11px; line-height: 1.7; margin: 5px 0; }
.photography-footer p[lang] { letter-spacing: 2px; font-size: 12px; }
.pswp { --pswp-bg: #101010; --pswp-icon-color: #f5f5f7; --pswp-icon-color-secondary: #101010; }
.pswp__photography-caption { position: absolute; bottom: 22px; left: 70px; right: 70px; text-align: center; color: #ddd; font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
.pswp__original-link { position: absolute; left: 70px; top: 0; height: 60px; display: flex; align-items: center; color: #ddd; font-size: 12px; }
@media (max-width: 800px) {
  .photography { flex: 1; width: calc(100% - 56px); }
  .photography-intro { padding-top: 54px; }
  .collections { gap: 25px; }
  .photo-grid { gap: 10px; }
}
@media (max-width: 600px) {
  .photography-page { --collection-nav-height: 46px; }
  .photography { flex: 1; width: calc(100% - 40px); }
  .photography-intro { padding: 42px 0 28px; }
  .photography-intro p { font-size: 15px; margin-top: 14px; }
  .collections a { padding: 15px 0; font-size: 12px; }
  .collection-heading { padding: 27px 0 22px; }
  .collection-heading h2 { font-size: 18px; }
  .photo-grid { gap: 8px; }
  .collection { margin-bottom: 44px; }
  .photography-footer { padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}