/* =========================================================
   photos.srinivas.cv — gallery
   Deliberately unlike the CV site: serif masthead, photographs
   at their true aspect ratio, almost no chrome.
   ========================================================= */

:root{
  --bg:      #0a0a0b;
  --text:    #ededee;
  --muted:   #8e8e95;
  --dim:     #64646b;
  --line:    #1f1f22;
  --hair:    #2a2a2e;

  --page:    1180px;
  --serif:   ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease:    cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; background:#1a1a1c; padding:10px 16px; z-index:50; }

/* ───────────────── masthead ───────────────── */

.masthead{
  max-width:var(--page);
  margin:0 auto;
  padding:88px 28px 40px;
  text-align:center;
}
.masthead__eyebrow{
  margin:0 0 18px;
  font-size:11px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--dim);
}
.masthead__title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(38px, 7vw, 66px);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.05;
}
.masthead__intro{
  margin:22px auto 0;
  max-width:44ch;
  color:var(--muted);
  font-size:15.5px;
}

.is-hidden{ display:none !important; }

/* ───────────────── view switch ───────────────── */

.views{
  max-width:var(--page); margin:0 auto;
  padding:26px 28px 0;
  display:flex; justify-content:center; gap:34px;
}
.view{
  padding:4px 0 8px;
  font-family:var(--serif);
  font-size:17px;
  color:var(--dim);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.view:hover{ color:var(--muted); }
.view.is-on{ color:var(--text); border-bottom-color:var(--text); }

/* ───────────────── about page ───────────────── */

.aboutpage{
  max-width:640px; margin:0 auto;
  padding:44px 28px 80px;
}
.aboutpage h2{
  margin:0 0 20px;
  font-size:11px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim);
}
.cred__preview{
  display:block; width:100%;
  padding:0; margin:0 0 22px;
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.cred__preview img{ width:100%; height:auto; display:block; }
.cred__preview:hover{ transform:translateY(-3px); border-color:#3a3a40; }
.cred__name{ margin:0; font-family:var(--serif); font-size:19px; }
.cred__meta{ margin:5px 0 0; color:var(--muted); font-size:14px; }
.cred__verify{
  display:inline-block; margin-top:14px;
  font-size:13px; color:var(--muted);
  border-bottom:1px solid #2f2f34;
}
.cred__verify:hover{ color:var(--text); }

.kitlist{ margin-top:52px; }
.kitlist div{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.kitlist div:last-child{ border-bottom:0; }
.kitlist b{ font-weight:500; color:var(--muted); }

.masthead__credmeta{
  display:block;
  font-size:11.5px;
  letter-spacing:.04em;
  margin-top:2px;
}
.masthead__cred a{
  color:var(--muted);
  border-bottom:1px solid #2f2f34;
}
.masthead__cred a:hover{ color:var(--text); }

/* ───────────────── filters ───────────────── */

.filters{
  max-width:var(--page);
  margin:0 auto;
  padding:34px 28px 30px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px;
  border-bottom:1px solid var(--line);
}
.chip{
  padding:2px 0 6px;
  font-size:13px; letter-spacing:.04em;
  color:var(--dim);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{ color:var(--text); }
.chip__n{
  margin-left:6px;
  font-size:11px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.chip.is-on .chip__n{ color:var(--muted); }
.chip.is-on{ color:var(--text); border-bottom-color:var(--text); }

/* ───────────────── grid ─────────────────
   CSS columns keep every photograph at its own aspect ratio —
   the opposite of the CV site's square crops. */

.grid{
  max-width:var(--page);
  margin:0 auto;
  padding:38px 28px 70px;
  column-count:3;
  column-gap:22px;
}
@media (max-width:900px){ .grid{ column-count:2; column-gap:16px; } }
@media (max-width:560px){ .grid{ column-count:1; padding:26px 18px 50px; } }

.shot{
  display:block;
  width:100%;
  break-inside:avoid;
  margin:0 0 22px;
  position:relative;
  background:#141416;
  overflow:hidden;
  text-align:left;
  padding:0;
}
@media (max-width:560px){ .shot{ margin-bottom:16px; } }

.shot img{
  width:100%; height:auto;   /* width/height attrs reserve space; CSS keeps it fluid */
  transition:opacity .3s var(--ease), transform .6s var(--ease);
}
.shot:hover img{ opacity:.82; transform:scale(1.02); }

.shot__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 16px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  opacity:0;
  transition:opacity .25s var(--ease);
}
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap{ opacity:1; }
.shot__t{
  display:block;
  font-family:var(--serif);
  font-size:17px;
  color:#fff;
}
.shot__m{
  display:block;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin-top:3px;
}

.empty{ color:var(--dim); text-align:center; padding:60px 0; }

/* ───────────────── footer ───────────────── */

.foot{
  max-width:var(--page);
  margin:0 auto;
  padding:30px 28px 60px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px;
}
.foot__back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; color:var(--muted);
  transition:color .2s var(--ease);
}
.foot__back:hover{ color:var(--text); }
.foot__back svg{ width:16px; height:16px; }
.foot__note{ margin:0; font-size:12.5px; color:var(--dim); }

/* ───────────────── viewer ───────────────── */

.viewer{
  position:fixed; inset:0; z-index:60;
  background:rgba(6,6,7,.97);
  display:flex; align-items:center; justify-content:center;
  padding:26px;
  animation:fade .22s var(--ease);
}
.viewer[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.viewer__figure{
  margin:0;
  max-width:min(1400px,100%);
  max-height:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:20px;
}
.viewer__figure img{
  max-width:100%;
  max-height:74vh;
  width:auto; height:auto;
  object-fit:contain;
}
.viewer__cap{
  text-align:center;
  max-width:62ch;
}
.viewer__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:23px;
}
.viewer__desc{ margin:7px 0 0; color:var(--muted); font-size:14.5px; }
.viewer__meta{
  margin:12px 0 0;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

.viewer__count{
  margin:14px 0 0;
  font-size:11px; letter-spacing:.16em;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

.viewer__btn{
  position:fixed; z-index:61;
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.07);
  transition:background .2s var(--ease);
}
.viewer__btn:hover{ background:rgba(255,255,255,.19); }
.viewer__close{ top:20px; right:20px; }
.viewer__prev{ left:20px;  top:50%; transform:translateY(-50%); }
.viewer__next{ right:20px; top:50%; transform:translateY(-50%); }

@media (max-width:640px){
  .masthead{ padding:56px 20px 28px; }
  .filters{ gap:18px; padding:26px 20px 22px; }
  .viewer{ padding:14px; }
  .viewer__figure img{ max-height:62vh; }
  .viewer__close{ top:12px; right:12px; }
  .viewer__prev{ left:10px; }
  .viewer__next{ right:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .shot:hover img{ transform:none; }
}