/* =========================================================================
   days.css — the photograph viewer page. Loaded after style.css, which
   supplies the palette, buttons, nav, footer, chips and lightbox shell.
   ========================================================================= */

/* ---------- page head ---------- */
.viewer-page{background:var(--paper)}
.v-head{padding:8.5rem 0 2.4rem}
.v-head h1{font-size:clamp(2.4rem,5.6vw,3.8rem);margin:0}
.v-lede{color:var(--muted);max-width:62ch;margin:1rem 0 0;font-size:1.05rem}

.nav-links a.here{color:var(--gold)}

/* ---------- the sticky control bar ---------- */
.v-tools{
  position:sticky;top:64px;z-index:40;
  background:rgba(251,248,243,.93);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line);
  padding:.85rem 0;
}
.v-tools-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
}
.v-tools .filters{margin:0}
.v-order{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* segmented sequence / shuffled control */
.seg{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:#fff;overflow:hidden
}
.seg button{
  border:0;background:none;padding:.5rem 1.05rem;
  font-family:var(--ui);font-size:.82rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s
}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--green)}
.seg button.on{background:var(--green);color:#F5F0E7}

.icon-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.5rem 1rem;font-family:var(--ui);font-size:.82rem;font-weight:600;
  color:var(--ink-2);transition:border-color .2s,color .2s
}
.icon-btn svg{width:15px;height:15px}
.icon-btn:hover{border-color:var(--green);color:var(--green)}
.icon-btn[hidden]{display:none}

@media (max-width:760px){
  .v-tools{top:58px;padding:.7rem 0}
  .v-tools-in{gap:.7rem}
  .v-order{width:100%}
  .seg{flex:1}
  .seg button{flex:1;text-align:center;padding:.5rem .6rem}
  .icon-btn span{display:none}
  .icon-btn{padding:.5rem .75rem}
}

/* ---------- the grid ---------- */
.v-body{padding:2.4rem 0 5rem}
.v-count{
  font-family:var(--ui);font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.3rem
}
.grid-all{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1200px){.grid-all{grid-template-columns:repeat(5,1fr)}}
@media (max-width:980px) {.grid-all{grid-template-columns:repeat(4,1fr)}}
@media (max-width:720px) {.grid-all{grid-template-columns:repeat(3,1fr);gap:7px}}
@media (max-width:460px) {.grid-all{grid-template-columns:repeat(2,1fr);gap:6px}}

.grid-all .ph{
  margin:0;aspect-ratio:1/1;background:var(--paper-3);
  border-radius:8px;overflow:hidden;border:0;padding:0;position:relative
}
.grid-all .ph img{width:100%;height:100%;object-fit:cover;background:var(--paper-3)}
.grid-all .ph::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(27,25,23,.07);border-radius:8px;pointer-events:none
}
.grid-all .ph:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.v-sentinel{height:4px}
.v-more{text-align:center;margin:2.6rem 0 0}
.v-back{margin:3.4rem 0 0}

.v-empty{
  padding:4rem 0;text-align:center;color:var(--muted);
  font-family:var(--ui);font-size:.95rem
}

/* ---------- lightbox additions ---------- */
.lb.on{display:grid}
.lb img{background:rgba(255,255,255,.04)}
.lb figcaption{padding-bottom:3.6rem}

.lb-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;
  display:flex;gap:.5rem;z-index:5
}
.lb-bar button,.lb-bar a{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  background:rgba(255,255,255,.12);color:#F5F0E7;border:0;border-radius:999px;
  padding:.55rem 1.1rem;font-family:var(--ui);font-size:.8rem;font-weight:600;
  transition:background .2s
}
.lb-bar button:hover,.lb-bar a:hover{background:rgba(255,255,255,.24)}
.lb-bar svg{width:15px;height:15px}
.lb-bar button.playing{background:var(--gold);color:#1B1917}

@media (max-width:640px){
  .lb-bar{bottom:.6rem}
  .lb-bar span{display:none}
  .lb-bar button,.lb-bar a{padding:.55rem .85rem}
  .lb figcaption{padding-bottom:3rem}
}

/* the teaser strip that replaces the curated gallery on the home page */
.days-teaser{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.days-teaser{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.days-teaser{grid-template-columns:repeat(2,1fr);gap:8px}}
.days-teaser .ph{margin:0;aspect-ratio:4/3;background:var(--paper-3);border-radius:8px;overflow:hidden}
.days-teaser .ph img{width:100%;height:100%;object-fit:cover}
.days-cta{margin:2.4rem 0 0;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.days-cta .hint{font-family:var(--ui);font-size:.86rem;color:var(--muted)}