/* ============================================================================
   gallery.css
   ----------------------------------------------------------------------------
   Page-specific styles only. The shared shell (colour tokens, base type, skip
   link, hero, nav, footer) lives in site.css, which every page loads first.
   site.css is generated: edit it in the root repo's _shared/ and run sync.py,
   never here.
   ========================================================================== */

:root{
  /* images, so wider than the prose sites */
  --maxw:1140px;
}

.intro{max-width:660px;margin:44px auto 0;font-size:19px;color:var(--text)}
.intro h2{
  font-size:clamp(23px,3.6vw,30px);
  line-height:1.25;margin:0 0 6px;font-weight:650;letter-spacing:-.01em;color:#f0f6fb;
}
p{margin:0 0 16px}

/* ---------- filter chips ---------- */
.filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:44px 0 26px;padding:0;list-style:none;
}
.filters .label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-right:6px;
}
.chip{
  font:inherit;font-size:14px;
  background:var(--bg-soft);color:var(--muted);
  border:1px solid var(--border);border-radius:100px;
  padding:5px 15px;cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s;
}
.chip:hover{color:var(--text);border-color:#2a3d55}
.chip[aria-pressed="true"]{
  color:var(--bg);background:var(--green);border-color:var(--green);font-weight:600;
}
.count{color:var(--muted);font-size:14px;margin:0 0 26px}

/* ---------- grid ----------
   CSS columns rather than a JS masonry library. Reading order stays DOM order;
   visual order runs down each column, which is normal for a photo grid. */
.grid{columns:3;column-gap:18px;margin:0;padding:0;list-style:none}
@media(max-width:900px){.grid{columns:2}}
@media(max-width:560px){.grid{columns:1}}
.grid li{break-inside:avoid;margin:0 0 18px}

figure{margin:0}

/* the clickable photo tile */
.tile{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;text-align:left;
}
.frame{
  position:relative;display:block;overflow:hidden;
  border-radius:12px;border:1px solid var(--border);
  background:var(--bg-soft);
  line-height:0;
}
.frame img.photo{
  width:100%;height:auto;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1),opacity .3s;
}
.tile:hover .frame img.photo{transform:scale(1.022)}
.tile:hover .frame{border-color:#2a3d55}

/* ---------- signature ----------
   There is no signature rule here any more, and that is the point.

   This used to be a CSS overlay positioned bottom-right over each photo. Two
   problems. It was presentation only, so a downloaded or hotlinked file was
   unsigned. And it sized badly: width was clamp(90px, 18%, 180px), but a grid
   tile is only about 368px wide, so 18% came to 66px and the 90px floor bound
   on every single photo. Everything rendered at 24% of tile width instead of
   the intended 18%, and the inset drifted between 8px and 26px because a
   percentage `bottom` resolves against height while `right` resolves against
   width.

   resize.sh now composites the signature into the pixels at a fixed 18% of
   image width, inset 3% of the shorter edge, so it is identical in every
   variant and survives a download. See "The signature" in the README.
   ------------------------------------------------------------------------ */

/* ---------- caption ---------- */
figcaption{
  color:var(--muted);font-size:14px;line-height:1.55;
  margin-top:10px;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;
}
figcaption .t{color:var(--text);font-weight:600}
figcaption .sep{opacity:.45}
figcaption .s{
  flex-basis:100%;font-size:13px;color:var(--muted);opacity:.85;
  font-variant-numeric:tabular-nums;
}

/* ---------- series cards ---------- */
.series-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:40px 0 0;padding:0;list-style:none}
.series-card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;height:100%;
}
.series-card:hover{border-color:#2a3d55}
.series-card .thumb{position:relative;line-height:0;border-bottom:1px solid var(--border)}
.series-card .thumb img{width:100%;height:180px;object-fit:cover;display:block}
.series-card .body{padding:18px 20px 20px}
.series-card h3{margin:0 0 6px;font-size:18px;font-weight:650;color:#e6eef6}
.series-card h3 a{color:inherit;border:0}
.series-card h3 a:hover{color:var(--green)}
.series-card p{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.6}
.series-card .n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.series-note{max-width:660px;color:var(--muted);font-size:17px;margin:14px 0 0}
.back{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:rgba(8,13,20,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:clamp(12px,3vw,40px);
}
.lb[open],.lb.is-open{display:flex}
.lb-inner{
  position:relative;
  max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lb-frame{
  position:relative;line-height:0;
  border-radius:12px;border:1px solid var(--border);overflow:hidden;
  background:var(--bg-soft);
}
.lb-frame img.photo{
  display:block;
  max-width:min(100%, 1600px);
  max-height:calc(100vh - 190px);
  width:auto;height:auto;
}
.lb figcaption{justify-content:center;text-align:center;max-width:640px}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(18,28,42,.85);border:1px solid var(--border);
  color:var(--text);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lb-btn:hover{background:var(--panel);border-color:var(--green);color:var(--green)}
.lb-prev{left:-6px}
.lb-next{right:-6px}
.lb-close{
  position:absolute;top:-6px;right:-6px;transform:none;
  width:40px;height:40px;font-size:18px;
}
.lb-pos{
  color:var(--muted);font-size:12px;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
@media(max-width:640px){
  .lb-prev{left:0}
  .lb-next{right:0}
  .lb-btn{width:40px;height:40px}
  .lb-frame img.photo{max-height:calc(100vh - 230px)}
}

.tags{margin-top:18px}
.tag{
  display:inline-block;font-size:12px;color:var(--muted);
  border:1px solid var(--border);border-radius:100px;
  padding:3px 11px;margin:0 4px 8px 0;
}

/* ---------- motion ----------
   The shared reset lives in site.css; this is the one gallery-only addition. */
@media(prefers-reduced-motion:reduce){
  .tile:hover .frame img.photo{transform:none}
}

/* ---------- no-JS fallback ----------
   Without JS the grid never renders, so show a plain list of links instead. */
.nojs{display:none}
.no-js .nojs{display:block}
.no-js .filters,.no-js .count{display:none}