html[data-view="photography"], html:not([data-view]):has(#photography:target, #gallery:target) { background: var(--photo-paper); color-scheme: dark; --color-paper: var(--photo-paper); --color-surface: var(--photo-surface); --color-surface-deep: var(--photo-surface-deep); --color-ink: var(--photo-ink); --color-muted: var(--photo-muted); --color-rule: var(--photo-rule); --color-accent: var(--photo-accent); --color-accent-dark: var(--photo-accent-dark); --color-accent-ink: var(--photo-accent-ink); --color-backdrop: var(--photo-backdrop); }
#photography, .photo-home-link { display: none; }
html[data-view="photography"] #home, html:not([data-view]):has(#photography:target, #gallery:target) #home { display: none; }
html[data-view="photography"] #photography, html:not([data-view]):has(#photography:target, #gallery:target) #photography { display: block; }
html[data-view="photography"] .photo-home-link, html:not([data-view]):has(#photography:target, #gallery:target) .photo-home-link { display: inline-flex; }
.photography-page ::selection { background: var(--color-accent); color: var(--color-accent-ink); }
.photo-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 3rem; padding-block: 4.5rem 3rem; }
.photo-intro h1 { font: 500 clamp(3rem, 6vw, 5.5rem)/1.3 var(--font-body); letter-spacing: -.045em; margin-top: 1rem; }
.photo-intro-copy { justify-self: end; padding-bottom: .5rem; }
.photo-intro-copy p { font-size: 1.125rem; margin-bottom: .75rem; }
.photo-banner { margin-block: 0; }
.banner-image { position: relative; height: clamp(260px, 34vw, 480px); overflow: clip; }
.banner-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.banner-image > span { position: absolute; bottom: 2rem; left: 2rem; padding: .35rem .6rem; background: var(--color-paper); color: var(--color-ink); font-size: .625rem; letter-spacing: .1em; }
.photo-banner figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; font-size: .6875rem; color: var(--color-muted); }
.gallery-section { padding-block: 5rem; }
.gallery-section .section-head { margin-bottom: 1.25rem; }
.gallery-notice { font-size: .75rem; color: var(--color-muted); max-width: 80ch; margin-bottom: 2rem; }
.gallery-tools { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
#photo-count { font-size: .6875rem; color: var(--color-muted); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; align-items: start; }
.photo-card { margin: 0; min-width: 0; }
.photo-card:nth-child(3n + 2) { margin-top: 3rem; }
.photo-open { display: block; position: relative; overflow: clip; background: var(--color-surface); color: var(--color-ink); }
.photo-open img { width: 100%; aspect-ratio: 1.25; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out); }
.photo-card-tall .photo-open img { aspect-ratio: .82; }
.photo-expand { position: absolute; right: .75rem; bottom: .75rem; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--color-paper); color: var(--color-ink); border-radius: 50%; }
@media (hover: hover) { .photo-open:hover img { transform: scale(1.025); } }
.photo-card figcaption { display: flex; justify-content: space-between; gap: .5rem; margin-top: .875rem; }
.photo-card h3 { font-size: .875rem; line-height: 1.6; }
.photo-card figcaption span { font-size: .625rem; color: var(--color-muted); }
.frame-index { white-space: nowrap; margin-top: .1rem; letter-spacing: .07em; }
.photo-outro { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding-block: 2rem 4rem; }
.photo-outro p { font-size: 1.25rem; line-height: 1.7; }
.lightbox { position: fixed; inset: 0; margin: auto; padding: 0; width: min(1100px, calc(100% - 2rem)); height: fit-content; max-height: 94dvh; background: var(--color-paper); color: var(--color-ink); border: var(--rule); border-radius: var(--radius-sm); overscroll-behavior: contain; }
.lightbox::backdrop { background: var(--color-backdrop); }
.lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.5rem; font-size: .625rem; letter-spacing: .12em; }
.lightbox-image { padding-inline: 1.5rem; display: flex; justify-content: center; }
.lightbox-image img { width: auto; max-width: 100%; height: min(62dvh, 680px); object-fit: contain; }
.lightbox-bottom { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem .5rem; }
.lightbox-bottom h2 { font-size: 1.25rem; }
.lightbox-bottom p { font-size: .625rem; margin-top: .35rem; }
.lightbox-controls { display: flex; align-items: center; gap: .5rem; }
.lightbox-controls span { min-width: 3rem; text-align: center; font-size: .6875rem; white-space: nowrap; }
.lightbox .icon-button { color: var(--color-ink); }
.lightbox .icon-button:hover { background: var(--color-surface); color: var(--color-ink); }
.lightbox :focus-visible { outline-color: var(--color-peach); }
.lightbox-help { margin: .5rem 1.5rem 1.25rem; font-size: .625rem; color: var(--color-muted); }
body:not(.js) .gallery-tools { display: none !important; }
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .photo-card:nth-child(3n + 2) { margin-top: 0; }
  .photo-card:nth-child(2n) { margin-top: 2rem; }
  .photo-card figcaption { flex-direction: column; gap: .25rem; }
}
@media (max-width: 760px) {
  .photo-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2.5rem 2rem; }
  .photo-intro h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .photo-intro-copy { justify-self: start; }
  .photo-intro-copy p { font-size: 1rem; }
  .banner-image { height: 280px; }
  .banner-image > span { bottom: 1.5rem; left: 1.25rem; font-size: .5rem; }
  .photo-banner figcaption { flex-direction: column; gap: .25rem; font-size: .625rem; }
  .gallery-section { padding-block: 3.5rem; }
  .gallery-tools { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.5rem; }
  #photo-count { align-self: flex-end; }
  .gallery-tools button { padding-inline: .65rem; }
  .photo-grid { gap: 1.5rem .875rem; }
  .photo-card h3 { font-size: .8125rem; }
  .photo-expand { width: 36px; height: 36px; right: .5rem; bottom: .5rem; }
  .photo-outro { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-block: 1rem 3rem; }
  .photo-outro p { font-size: 1.125rem; }
  .lightbox-top { padding-inline: 1rem; font-size: .5rem; }
  .lightbox-image { padding-inline: .5rem; }
  .lightbox-image img { max-height: 55dvh; height: auto; }
  .lightbox-bottom { flex-direction: column; align-items: flex-start; padding-inline: 1rem; gap: .75rem; }
  .lightbox-controls { width: 100%; justify-content: space-between; }
  .lightbox-help { margin-inline: 1rem; font-size: .5625rem; }
}