/* ============================================================
   PHOTOGRAPHY — gallery + viewer
   ============================================================ */
body[data-section="photography"] button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
.ph-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem 3rem; flex-wrap:wrap; padding-top:2.6rem; }
.ph-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,5vw,2.8rem); line-height:1.1; margin:0; letter-spacing:-.01em; }
.ph-intro{ color:var(--ink-soft); max-width:50ch; margin:.6rem 0 0; }
.ph-series{ display:flex; flex-direction:column; gap:.15rem; border-left:3px solid var(--accent); padding-left:1rem; }
.ph-series .k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.15rem; }
.ph-series a{ display:flex; align-items:baseline; gap:.8rem; color:var(--ink); }
.ph-series a:hover .v{ color:var(--accent); }
.ph-series .v{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; transition:color .15s; }
.ph-series .n{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft); }

/* one section per series */
.ph-set{ scroll-margin-top:1.5rem; }
.ph-set + .ph-set{ margin-top:4.5rem; padding-top:2.6rem; border-top:1px solid var(--line); }
.ph-set-head{ display:flex; align-items:baseline; gap:.4rem 1.4rem; flex-wrap:wrap; margin-top:2.6rem; }
.ph-set + .ph-set .ph-set-head{ margin-top:0; }
.ph-set-title{ font-family:var(--f-display); font-weight:600; font-size:1.7rem; margin:0; letter-spacing:-.005em; }
.ph-set-meta{ margin:0; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.ph-set-note{ flex-basis:100%; margin:.2rem 0 0; color:var(--ink-soft); font-size:.95rem; }
.ph-set .ph-grid{ margin-top:1.6rem; }

.ph-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2.2rem 1.2rem; margin-top:2.4rem; }
.ph{ margin:0; min-width:0; }
.ph.s6{ grid-column:span 6; } .ph.s3{ grid-column:span 3; } .ph.s2{ grid-column:span 2; }
.ph-open{ display:block; width:100%; aspect-ratio:1600 / 838; overflow:hidden; background:var(--paper-2); cursor:zoom-in; }
.ph-open img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.ph.tall .ph-open{ aspect-ratio:3 / 4; }   /* upright photos keep an upright frame */
.ph-open:hover img, .ph-open:focus-visible img{ transform:scale(1.015); }
.ph figcaption{ display:flex; gap:.7rem; align-items:baseline; margin-top:.55rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em; color:var(--ink-soft); }
.ph figcaption .no{ color:var(--accent); font-weight:500; }
.ph.lead figcaption{ font-size:.76rem; }
.ph-foot{ margin-top:3rem; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); }
@media (max-width:900px){ .ph.s2{ grid-column:span 3; } .ph.s2:last-child:nth-child(odd){ grid-column:span 6; } }
@media (max-width:640px){
  .ph-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .ph.s6, .ph.s3, .ph.s2{ grid-column:auto; }
}

/* viewer */
.lb{ position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0B0B0D; color:#F0EDE6; }
.lb::backdrop{ background:#0B0B0D; }
.lb[open]{ display:grid; grid-template-rows:1fr auto; }
.lb-stage{ display:grid; place-items:center; min-height:0; padding:3.2rem 4.5rem .6rem; touch-action:pan-y; }
.lb-stage img{ max-width:100%; max-height:100%; max-height:calc(100dvh - 7.5rem); object-fit:contain; transition:opacity .2s ease, filter .3s ease; user-select:none; -webkit-user-drag:none; }
.lb.bw .lb-stage img{ filter:grayscale(1) contrast(1.05); }
.lb-bar{ display:flex; gap:1rem; align-items:baseline; padding:.8rem 4.5rem calc(1rem + env(safe-area-inset-bottom)); font-family:var(--f-mono); font-size:.76rem; letter-spacing:.03em; }
.lb-no{ color:#E08A63; }
.lb-cap{ flex:1; opacity:.85; }
body[data-section="photography"] .lb-bw{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .6rem; border:1px solid rgba(240,237,230,.3); color:#F0EDE6; }
body[data-section="photography"] .lb-bw[aria-pressed="true"]{ background:#F0EDE6; color:#0B0B0D; }
body[data-section="photography"] .lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:3.2rem; height:5rem; font-size:2.4rem; line-height:1; color:#F0EDE6; opacity:.6; }
body[data-section="photography"] .lb-btn:hover{ opacity:1; }
.lb-prev{ left:.5rem; } .lb-next{ right:.5rem; }
body[data-section="photography"] .lb-close{ position:absolute; top:.8rem; right:1rem; width:2.6rem; height:2.6rem; font-size:1.1rem; color:#F0EDE6; opacity:.7; }
body[data-section="photography"] .lb-close:hover{ opacity:1; }
@media (max-width:640px){
  .lb-stage{ padding:3.2rem .5rem .4rem; }
  .lb-bar{ padding:.7rem 1rem calc(1rem + env(safe-area-inset-bottom)); flex-wrap:wrap; }
  body[data-section="photography"] .lb-btn{ top:auto; bottom:3.6rem; transform:none; height:3rem; }
}

/* ---------- places and visits (photography/, built by scripts/build_photos.py) ---------- */
.pl-grid{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.2rem; }
.pl-card{ position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:var(--paper-2); color:#F0EDE6; border-radius:4px; }
.pl-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pl-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,12,.82) 0%, rgba(10,10,12,.35) 45%, rgba(10,10,12,0) 70%); }
.pl-card:hover img, .pl-card:focus-visible img{ transform:scale(1.03); }
.pl-card:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.pl-text{ position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:1; display:flex; flex-direction:column; gap:.2rem; }
.pl-name{ font-family:var(--f-display); font-weight:600; font-size:1.7rem; line-height:1.1; }
.pl-country{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.pl-meta{ font-family:var(--f-mono); font-size:.7rem; opacity:.85; margin-top:.25rem; }
.ph-crumb{ margin:0 0 .5rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); }
.ph-crumb a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.ph-crumb a:hover{ color:var(--ink); }
.ph-place{ align-items:flex-end; }
.ph-set-title a{ color:inherit; }
.ph-set-title a:hover{ color:var(--accent); }
body[data-section="photography"] .ph-share{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; cursor:pointer; }
body[data-section="photography"] .ph-share:hover{ border-color:var(--ink); }
.ph-share svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ph-set-head .ph-share{ margin-left:auto; }
.ph-one .ph-grid{ margin-top:2rem; }
.ph-msg{ position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:30; max-width:calc(100vw - 2rem); margin:0; padding:.6rem 1rem; border-radius:8px; background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:.75rem; overflow-wrap:anywhere; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.ph-msg:not(.show){ width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; box-shadow:none; }   /* kept for screen readers */
.ph-msg input{ font:inherit; color:var(--ink); background:var(--paper); border:0; border-radius:4px; padding:.3rem .45rem; margin:.4rem 0 0; width:100%; box-sizing:border-box; }
body[data-section="photography"] .ph-msg-x{ font:inherit; color:var(--paper); background:transparent; border:1px solid rgba(240,237,230,.5); border-radius:999px; padding:.25rem .7rem; margin-top:.5rem; cursor:pointer; }
@media (max-width:640px){
  .pl-grid{ grid-template-columns:1fr; }
  .ph-set-head .ph-share{ margin-left:0; }
}