/* ===================================================================
   Digital Futurist — one photo collection page (shared by all 4).
   "Historic" signaled through typography and framing, not a sepia
   filter - a thin mat border like a physical print, a mono dateline-
   style caption, real photos shown in their own actual color. Built
   entirely on the --df-* tokens from homepage-redesign.css.
   =================================================================== */

.df-photo-page { max-width:1040px; margin:0 auto; padding:26px 24px 56px; }

.df-photo-crumb {
  font-family:'IBM Plex Mono', monospace; font-size:.74rem; letter-spacing:.04em;
  color:var(--df-muted); margin-bottom:20px;
}
.df-shell .df-photo-crumb a { color:var(--df-muted); text-decoration:none; }
.df-photo-crumb a:hover { color:var(--df-accent); }

.df-photo-grid {
  columns:3 260px; column-gap:18px; margin-top:8px;
}
.df-photo-print {
  display:inline-block; width:100%; margin:0 0 18px; break-inside:avoid;
  border:1px solid var(--df-border); background:var(--df-panel);
  padding:8px 8px 0; border-radius:3px; cursor:zoom-in;
}
.df-photo-print img { width:100%; display:block; border-radius:1px; }
.df-photo-print-cap {
  font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.02em;
  line-height:1.5; color:var(--df-muted); padding:8px 2px 10px; text-align:left;
}

@media (max-width:720px) {
  .df-photo-grid { columns:2 200px; }
}
@media (max-width:460px) {
  .df-photo-grid { columns:1; }
}

.df-photo-empty { color:var(--df-muted); font-size:.9rem; padding:20px 2px; }

/* ---- lightbox ---- */
.df-photo-lb {
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(0,0,0,.88); align-items:center; justify-content:center;
  padding:40px;
}
.df-photo-lb.is-open { display:flex; }
.df-photo-lb-figure { max-width:min(92vw, 1100px); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.df-photo-lb-img { max-width:100%; max-height:74vh; object-fit:contain; border-radius:2px; }
.df-photo-lb-cap {
  font-family:'IBM Plex Mono', monospace; font-size:.8rem; line-height:1.6;
  color:#e9e8e4; text-align:center; max-width:64ch;
}
.df-photo-lb-close, .df-photo-lb-prev, .df-photo-lb-next {
  position:absolute; background:transparent; border:1px solid rgba(255,255,255,.25); color:#e9e8e4;
  border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; line-height:1;
}
.df-photo-lb-close:hover, .df-photo-lb-prev:hover, .df-photo-lb-next:hover { border-color:var(--df-accent); color:var(--df-accent); }
.df-photo-lb-close { top:22px; right:22px; }
.df-photo-lb-prev { left:22px; top:50%; transform:translateY(-50%); }
.df-photo-lb-next { right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:640px) {
  .df-photo-lb { padding:16px; }
  .df-photo-lb-prev, .df-photo-lb-next { width:38px; height:38px; }
}