/* ============================================================
   krishnaiyer.in  -  gallery, index lists, forms, lightbox
   ============================================================ */

/* ---------- gallery grid (CSS columns = masonry) ---------- */

.grid{column-count:3;column-gap:clamp(.6rem,1.4vw,1.25rem)}
@media (max-width:1100px){.grid{column-count:2}}
@media (max-width:640px){.grid{column-count:1}}

.tile{
  break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1.25rem);
  position:relative;background:var(--card);overflow:hidden;cursor:zoom-in;
}
.tile img{
  width:100%;height:auto;
  transition:transform .7s var(--ease),opacity .4s var(--ease);
  will-change:transform;
}
.tile:hover img{transform:scale(1.02)}
.tile:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

.tile__cap{
  padding:.75rem 0 .1rem;
  font-size:.625rem;font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);
  display:flex;justify-content:space-between;gap:1rem;
}

/* ---------- series index ---------- */

.series-list{border-top:1px solid var(--line)}
.series-row{
  display:grid;grid-template-columns:7rem 1fr auto;
  gap:1rem 2rem;align-items:baseline;
  padding:1.7rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
.series-row:hover{padding-left:.75rem}
.series-row__year{
  font-size:.625rem;font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);
}
.series-row__name{
  font-family:var(--f-display);font-size:clamp(1.1rem,2.8vw,1.85rem);
  letter-spacing:.07em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.series-row__count{
  font-size:.625rem;font-weight:300;letter-spacing:.18em;
  text-transform:uppercase;color:var(--taupe);white-space:nowrap;
}
.series-row:hover .series-row__name{color:var(--clay)}

@media (max-width:700px){
  .series-row{grid-template-columns:1fr auto}
  .series-row__year{grid-column:1/-1}
  .series-row__count{grid-column:1/-1}
}

/* ---------- filter bar ---------- */

.filters{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:2.25rem}
.filters button{
  font-family:var(--f-sans);font-size:.625rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--muted);
  padding:.6rem 1rem;cursor:pointer;border-radius:0;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.filters button:hover{color:var(--ink);border-color:var(--taupe)}
.filters button[aria-pressed="true"]{
  background:var(--clay);border-color:var(--clay);color:#f8f4ee;
}

/* ---------- two-up layout, spec list ---------- */

.pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:820px){.pair{grid-template-columns:1fr}}

dl.spec{margin:0}
dl.spec dt{
  font-size:.625rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--taupe);margin-top:1.6rem;
}
dl.spec dt:first-child{margin-top:0}
dl.spec dd{margin:.4rem 0 0;font-size:1.05rem;font-weight:300}

/* ---------- forms ---------- */

.field{margin-bottom:1.6rem}
.field label{
  display:block;font-size:.625rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:.55rem;
}
.field input,.field textarea,.field select{
  width:100%;padding:.8rem .95rem;font:inherit;font-weight:300;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;
  transition:border-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--clay);outline:none;
}
.field textarea{min-height:9rem;resize:vertical}

/* ---------- lightbox (brand ink) ---------- */

.lb{
  position:fixed;inset:0;z-index:80;background:#151515;
  display:none;place-items:center;opacity:0;
  transition:opacity .3s var(--ease);
}
.lb.is-open{display:grid;opacity:1}
.lb__img{max-width:min(94vw,1600px);max-height:86vh;width:auto;object-fit:contain}
.lb__bar{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1rem var(--gut);
  font-size:.625rem;font-weight:300;letter-spacing:.18em;
  text-transform:uppercase;color:#c9bfb3;border-top:1px solid #2e2c29;
}
.lb button{
  background:none;border:1px solid #3a3936;color:#f8f4ee;
  font-family:var(--f-sans);font-size:.625rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.5rem .85rem;cursor:pointer;border-radius:0;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.lb button:hover{border-color:#b8776a;color:#b8776a}
.lb__nav{display:flex;gap:.5rem}
.lb__close{position:absolute;top:1rem;right:var(--gut)}
body.lb-open{overflow:hidden}

/* ---------- reveal on scroll ---------- */

[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .tile:hover img{transform:none}
}