/* =====================================================================
   WORKS INDEX — Patina system, digital B&W grid
   (loads after ../css/main.css; reuses its variables)
   ===================================================================== */

.nav__menu a.is-current{ color:var(--rust); }

/* ---------- Page head ---------- */
.page-head{
  padding:clamp(7rem,15vh,10.5rem) var(--pad) clamp(1.5rem,4vh,3rem);
}
.page-title{
  font-size:clamp(3rem, 11vw, 9rem); font-weight:700;
  letter-spacing:-.03em; line-height:.88; margin:.2em 0 0;
}
.page-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--rust); }
.page-intro{
  max-width:52ch; margin-top:clamp(1rem,2vw,1.6rem);
  font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.5; color:var(--fg);
}
.page-intro .serif{ font-family:var(--serif); font-style:italic; }

/* ---------- Filter ---------- */
.filter{
  position:sticky; top:var(--nav-h); z-index:600;
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  padding:1rem var(--pad);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--line-soft);
}
.filter__btn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  color:var(--muted); background:none; border:1px solid var(--line);
  border-radius:100px; padding:.5rem .95rem; text-transform:uppercase;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.filter__btn sup{ font-size:.62em; margin-left:.35em; opacity:.7; }
.filter__btn:hover{ color:var(--fg); border-color:var(--muted); }
.filter__btn.is-active{ color:#1a1209; background:var(--rust); border-color:var(--rust); }

/* ---------- Cards — grid masonry (row-wise fill, packs shortest column) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(1rem,2.2vw,2rem);
  row-gap:clamp(1rem,2.2vw,2rem);           /* no-JS fallback spacing */
  align-items:start;
  padding:clamp(2rem,5vh,4rem) var(--pad) clamp(5rem,12vh,9rem);
}
.js .cards{ row-gap:0; grid-auto-rows:8px; } /* JS sets each card's row-span (gap baked in) */
/* Works-page scroll reveal (the .card visual component itself lives in main.css) */
.card{
  margin:0;
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.card.in{ opacity:1; transform:none; }
.card.is-hidden{ display:none; }

.works-empty{ column-span:all; font-family:var(--mono); color:var(--muted); padding:3rem 0; }

@media (max-width:1080px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  /* Single column: the row-span masonry is unnecessary and, if JS spans
     aren't applied, would collapse every card into an 8px row (overlap +
     a too-short page that scroll-snaps). Stack naturally instead. */
  .js .cards{ grid-auto-rows:auto; row-gap:clamp(1rem,4.5vw,1.6rem); }
  .js .card{ grid-row-end:auto !important; }
}
/* smaller tiles / more columns on large screens */
@media (min-width:1500px){ .cards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1920px){ .cards{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (min-width:2500px){ .cards{ grid-template-columns:repeat(6, minmax(0,1fr)); } }