:root{
  --bg:#0d0c0b;
  --mark:#8a857b;
  --text-dim:#6f6a61;
  --nav-w:118px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  height:100vh;
  width:100vw;
  overflow:hidden;
  user-select:none;
}

/* the frame the exposures share */
.stage{
  position:fixed;
  top:0; left:0; bottom:0;
  right:var(--nav-w);
  overflow:hidden;
  background:var(--bg);
}

/* isolate so the blending stays between the photographs and never touches the page */
.exposures{
  position:absolute;
  inset:0;
  isolation:isolate;
}

/* every photograph is full-bleed and occupies the same space as the others */
.exposure{
  position:absolute;
  inset:0;
  transition:opacity .13s linear;
  will-change:opacity;
}
.exposure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* four additive layers would sum past white, so each is printed down first —
     the darkroom equivalent of cutting exposure time per pass */
  filter:brightness(.58) contrast(1.12) saturate(.92);
  transition:filter .13s linear;
}
/* the exposure on top is held back less, so it stays legible over the others */
.exposure.dominant img{
  filter:brightness(.86) contrast(1.06) saturate(1);
}

/* film grain and a faint tonal veil, held over the whole composition */
.grain{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:200px 200px;
}

/* apertures cut into the composition: each frames a portion of a photograph
   further down the sequence, held sharp and clear against the blended field */
.windows{
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
}
.window{
  position:absolute;
  overflow:hidden;
  cursor:pointer;
  pointer-events:auto;
  outline:1px solid rgba(214,206,192,.5);
  transition:outline-color .13s linear;
}
.window img{
  position:absolute;
  display:block;
  object-fit:cover;
  opacity:.82;
  transition:opacity .13s linear;
}
.window:hover{ outline-color:rgba(238,232,220,.95); }
.window:hover img{ opacity:1; }

/* registration marks and the frame number, as on a contact sheet */
.wtick{
  position:absolute;
  width:11px; height:11px;
  pointer-events:none;
}
.wtick::before,.wtick::after{
  content:"";
  position:absolute;
  background:rgba(226,219,205,.72);
}
.wtick::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.wtick::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.wt-tl{ left:-5px; top:-5px; }
.wt-tr{ right:-5px; top:-5px; }
.wt-bl{ left:-5px; bottom:-5px; }
.wt-br{ right:-5px; bottom:-5px; }

.wlabel{
  position:absolute;
  left:5px; top:4px;
  font-size:8.5px;
  letter-spacing:.12em;
  color:rgba(232,226,213,.82);
  pointer-events:none;
}

/* ---------- the grid: five across, straightforward ---------- */
.sheet{
  position:fixed;
  top:0; left:0; bottom:0;
  right:var(--nav-w);
  overflow-y:auto;
  display:none;
  grid-template-columns:repeat(5, 1fr);
  grid-auto-rows:min-content;
  align-content:start;
  gap:1px;
  background:#000;
  padding:1px;
}
.sheet.on{ display:grid; }
.cell{
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden;
  cursor:pointer;
  background:#0d0c0b;
}
.cell img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86;
  transition:opacity .12s linear;
}
.cell:hover img{ opacity:1; }
.cell-label{
  position:absolute;
  left:6px; bottom:5px;
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(232,226,213,.9);
  opacity:0;
  transition:opacity .12s linear;
  pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.cell:hover .cell-label{ opacity:1; }

/* ---------- one photograph, filling the viewport ---------- */
.viewer{
  position:fixed;
  inset:0;
  z-index:900;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#080807;
  cursor:zoom-out;
}
.viewer.on{ display:flex; }
.viewer img{
  max-width:94vw;
  max-height:88vh;
  object-fit:contain;
}
.viewer-label{
  margin-top:14px;
  font-size:9px;
  letter-spacing:.16em;
  color:#6f6a61;
  text-transform:uppercase;
}

/* ---------- side navigation ---------- */
.nav{
  position:fixed;
  top:0; right:0; bottom:0;
  width:var(--nav-w);
  border-left:1px solid #24211d;
  background:#131211;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
  padding:20px 16px;
  z-index:200;
}
.nav-btn{
  font:inherit;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.13em;
  text-align:left;
  padding:0;
  border:none;
  background:none;
  color:var(--text-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}
.nav-btn::before{
  content:"";
  width:4px; height:4px;
  border-radius:50%;
  border:1px solid var(--text-dim);
  flex:0 0 auto;
  transition:background .15s ease, border-color .15s ease;
}
.nav-group{ display:flex; flex-direction:column; gap:11px; }
.nav-rule{ height:1px; background:#24211d; margin:16px 0; }

.counter{
  margin-top:18px;
  font-size:9px;
  letter-spacing:.16em;
  color:#453f38;
}

.nav-btn:hover{ color:var(--mark); }
.nav-btn.active{ color:#cfc9bd; }
.nav-btn.active::before{ background:#cfc9bd; border-color:#cfc9bd; }

@media(max-width:760px){
  :root{--nav-w:0px}
  .stage{right:0;bottom:44px}
  .nav{
    top:auto; bottom:0; left:0; right:0;
    width:100%; height:auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    padding:12px 14px;
    border-left:none;
    border-top:1px solid #24211d;
    overflow-x:auto;
  }
  .nav-btn{white-space:nowrap}
}