/* ===========================================================
   Photography — gallery-style layout (listing page + set pages)
   Loaded by photography.html and photo-set.html only.
   =========================================================== */
.photo-page{background:#fff; color:#1e1e1e}
.photo-page .topbar{background:rgba(255,255,255,.9)}
.photo-page footer{background:var(--bg)}
.photo-main{--pp-ink:#1e1e1e; --pp-soft:rgba(30,30,30,.6); font-family:"Mulish",var(--font-text)}

/* ---- Listing page header ---- */
.pp-head{max-width:1145px; margin:0 auto; padding:clamp(48px,8vw,96px) var(--gutter) 0; text-align:center}
.pp-name{font-family:"Raleway",var(--font-display); font-weight:700; font-size:clamp(1.4rem,3.4vw,1.9rem);
  letter-spacing:.14em; text-transform:uppercase; color:var(--pp-ink); line-height:1.2}
.pp-sub{margin-top:var(--s-3); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pp-soft); font-weight:600}
.pp-contact{display:flex; justify-content:center; align-items:center; gap:var(--s-6); flex-wrap:wrap; margin-top:var(--s-8); color:var(--pp-ink)}
.pp-contact a{display:inline-flex; align-items:center; gap:var(--s-2); font-size:.95rem; transition:opacity .3s}
.pp-contact a:hover{opacity:.6}
.pp-contact svg{width:20px; height:20px; flex:0 0 auto}
.pp-rule{width:150px; height:1px; border:0; background:rgba(30,30,30,.12); margin:var(--s-12) auto var(--s-8)}
.pp-tabs{display:flex; justify-content:center; gap:var(--s-8); flex-wrap:wrap}
.pp-tabs[hidden]{display:none}
.pp-tab{background:none; border:0; border-bottom:1px solid transparent; cursor:pointer; padding:0 0 4px;
  font:600 11.5px "Raleway",var(--font-text); letter-spacing:.105em; text-transform:uppercase; color:var(--pp-soft);
  transition:color .3s, border-color .3s}
.pp-tab:hover{color:var(--pp-ink)}
.pp-tab.selected{color:var(--pp-ink); border-bottom-color:var(--pp-ink)}

/* ---- Listing grid of set covers ---- */
.pp-grid{max-width:1145px; margin:clamp(40px,6vw,72px) auto 0; padding:0 var(--gutter) clamp(64px,9vw,120px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:70px 30px}
.pp-item[hidden]{display:none}
.pp-item{display:block; text-align:center; color:var(--pp-ink)}
.pp-cover{aspect-ratio:3/2; overflow:hidden; background:#f1f1f1}
.pp-cover img{width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .4s}
.pp-item:hover .pp-cover img{transform:scale(1.03); opacity:.92}
.pp-title{margin:20px 0 0; font:700 16px/1.4 "Raleway",var(--font-text); letter-spacing:.09em; text-transform:uppercase}
.pp-date{margin:6px 0 0; font:600 11px/1.4 "Raleway",var(--font-text); letter-spacing:.2em; text-transform:uppercase; color:var(--pp-soft)}
@media(max-width:1000px){.pp-grid{grid-template-columns:repeat(2,1fr); gap:56px 24px}}
@media(max-width:640px){.pp-grid{grid-template-columns:1fr; gap:48px}}
.pp-empty{grid-column:1/-1; text-align:center; color:var(--pp-soft); padding:var(--s-12) 0}

/* ---- Set (gallery) page ---- */
.ps-hero{position:relative; height:calc(100vh - 60px); height:calc(100svh - 60px); min-height:460px; overflow:hidden; background:#111; color:#fff}
.ps-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%}
.ps-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.08) 55%,rgba(0,0,0,.22))}
.ps-back{position:absolute; top:clamp(20px,3vw,36px); left:clamp(20px,4vw,48px); z-index:2;
  font:600 11.5px "Mulish",var(--font-text); letter-spacing:.17em; text-transform:uppercase; color:#fff; opacity:.9; transition:opacity .3s}
.ps-back:hover{opacity:.6}
.ps-detail{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:0 clamp(20px,4vw,60px) clamp(32px,5vw,60px)}
.ps-title{font-family:"Raleway",var(--font-display); font-weight:200; font-size:clamp(2.2rem,6vw,3.75rem); line-height:1.1; letter-spacing:.01em; color:#fff}
.ps-date{margin-top:var(--s-3); font:300 14px "Mulish",var(--font-text); letter-spacing:.2em; text-transform:uppercase; color:#fff}
.ps-scroll{margin-top:var(--s-6); height:44px; padding:0 24px; background:transparent; color:#fff; cursor:pointer;
  border:.8px solid #fff; font:400 11.5px "Mulish",var(--font-text); letter-spacing:.175em; text-transform:uppercase;
  transition:background .3s, color .3s}
.ps-scroll:hover{background:#fff; color:#111}

.ps-bar{position:sticky; top:60px; z-index:30; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(30,30,30,.08);
  backdrop-filter:blur(6px)}
.ps-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); min-height:64px;
  padding:0 clamp(16px,3vw,40px)}
.ps-bar-left{display:flex; flex-direction:column; gap:3px; min-width:0}
.ps-bar-brand{font:400 9px "Mulish",var(--font-text); letter-spacing:.18em; text-transform:uppercase; color:rgba(30,30,30,.6)}
.ps-bar-name{font:500 14px "Raleway",var(--font-text); letter-spacing:.03em; color:#1e1e1e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ps-bar-right{display:flex; align-items:center; gap:var(--s-6); flex:0 0 auto}
.ps-bar-right a{font:500 13px "Raleway",var(--font-text); letter-spacing:.04em; color:rgba(30,30,30,.6); transition:color .3s}
.ps-bar-right a:hover{color:#1e1e1e}
@media(max-width:560px){.ps-bar-right .ps-bar-all{display:none}}

.ps-gallery{padding:clamp(8px,1.6vw,20px) clamp(8px,1.6vw,20px) clamp(40px,6vw,80px)}
.ps-masonry{display:flex; gap:8px; align-items:flex-start}
.ps-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px}
.ps-photo{display:block; width:100%; padding:0; border:0; background:#f1f1f1; cursor:zoom-in; overflow:hidden}
.ps-photo img{width:100%; height:auto; transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .4s}
.ps-photo:hover img{transform:scale(1.025); opacity:.93}
.ps-missing{text-align:center; padding:var(--s-24) var(--gutter); color:rgba(30,30,30,.6)}
.ps-missing a{color:#1e1e1e; text-decoration:underline}

/* Lightbox extras for the set page: caption + counter along the bottom. */
.lightbox-meta{position:fixed; left:0; right:0; bottom:var(--s-6); z-index:91; display:flex; justify-content:center; gap:var(--s-4);
  pointer-events:none; color:rgba(255,255,255,.75); font:600 11px "Mulish",var(--font-text); letter-spacing:.18em; text-transform:uppercase}
.lightbox:not(.open) .lightbox-meta{display:none}