/* The Work, v2 — the photograph fills the screen; the page stays paper. */
html{scroll-snap-type:y proximity}
.work .intro{padding-bottom:6vh}

.sequence{display:flex;flex-direction:column;align-items:center}
.shot{margin:0;padding:5vh 4vw;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  scroll-snap-align:center}
.shot picture{display:block}
.shot img{width:min(92vw, calc(86svh * var(--r)));max-width:none;height:auto}
.shot figcaption{margin:1rem auto 0;
  font-style:italic;font-size:16px;color:var(--ink-soft);text-align:center}
.shot .no{font-style:normal;font-size:12px;letter-spacing:.18em;margin-right:.6em}

/* index: the whole sequence at a glance, in order */
.index{padding:10vh 7vw 0;max-width:1400px;margin:0 auto}
.index h2{font:400 13px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:2rem}
.thumbs{display:flex;flex-wrap:wrap;gap:22px 22px;align-items:flex-end}
.thumbs a{border:0;display:block}
.thumbs img{height:150px;width:auto;max-width:none}
.thumbs a:hover img{outline:1px solid var(--gilt);outline-offset:4px}

.to-index{position:fixed;right:22px;bottom:18px;border:0;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  background:var(--paper);padding:6px 10px}

@media (max-width:820px){
  .shot{min-height:auto;padding:4vh 0}
  .shot img{width:min(94vw, calc(80svh * var(--r)))}
  .thumbs{gap:10px}
  .thumbs img{height:84px}
}