/* ============================================================
   proofs.css — the proof sheet.
   Loads after styles.css and borrows everything it can from it:
   the paper, the strips, the sprockets, the grease marks. This
   file only adds what a strip of photographs needs that a strip
   of words didn't.
   ============================================================ */

.sheet-page .margin-line-head a {
  text-decoration: none;
}
.margin-line__back:hover {
  color: var(--ink);
}

/* ---------- the lockup ---------- */
/* One line, justified to the full width of the paper by proofs.js,
   same trick as the wordmark on the front. Brutal on purpose. */

.sheet-head {
  padding: clamp(0.75rem, 2vw, 1.5rem) 0 clamp(2rem, 4.5vw, 3rem);
  border-bottom: 1px solid var(--paper-edge);
  margin-top: -82px;
}

.sheet-lockup svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sheet-lockup text {
  font-family: var(--display);
  font-weight: 800;
  font-size: 96px;
  fill: var(--ink);
}

.sheet-head__row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 900px) {
  .sheet-head__row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* the bit of masking tape on the enlarger with the roll details */
.darkroom-log {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.darkroom-log div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.875rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--paper-edge);
}

.darkroom-log div:last-child {
  border-bottom: 1px solid var(--paper-edge);
}

.darkroom-log dt {
  color: var(--muted);
}

.darkroom-log dd {
  color: var(--ink);
}

#log-keepers {
  color: var(--china);
  font-weight: 500;
}

/* ---------- the strips ---------- */

/* A short strip at the end of the roll is short, not stretched:
   every frame on the sheet is the same size, like real film. */
@media (min-width: 821px) {
  .sheet .negstrip--a {
    width: calc(99% * var(--count, 4) / 4);
  }
  .sheet .negstrip--b {
    width: calc(96.5% * var(--count, 4) / 4);
  }
}

/* one exposure. Same stacking rule as .frame on the front: no
   z-index, no isolation, so every mark paints above every frame. */
.shot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--paper);
  cursor: zoom-in;
}

.shot__window {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--neg);
}

/* the picture is absolutely placed so a portrait original can't
   push the 3:2 window taller — every frame on a roll is the same size */
.shot__window img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.25s ease;
}

.shot:hover img,
.shot:focus-visible img {
  filter: brightness(1.08) contrast(1.04);
}

/* edge printing: the frame number the film stock burns into the
   rebate, plus a working title in the same hand */
.shot__edge {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.125rem 0;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.shot__num {
  color: var(--amber);
}

.shot__title {
  color: var(--muted-lo);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.shot:hover .shot__title,
.shot:focus-visible .shot__title {
  color: var(--amber);
}

.shot:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* the mark sits on the picture, not the edge print */
.shot .mark {
  inset: -7% -5%;
  width: 110%;
  height: 114%;
}

/* a keeper stays circled */
.shot.is-keeper .mark {
  stroke-dashoffset: 0;
}

.shot:hover .mark,
.shot:focus-visible .mark {
  stroke-dashoffset: 0;
}

/* held vertically on narrow screens — styles.css turns the strip;
   frames keep their own ratio instead of sharing a height */
@media (max-width: 820px) {
  .frames > .shot {
    flex: 0 0 auto;
  }
  .shot__edge {
    padding-bottom: 0.25rem;
  }
}

.sheet-noscript {
  list-style: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  columns: 2;
}

/* ---------- develop-in ---------- */

/* Fill mode is BACKWARDS, not forwards, and there is no resting
   opacity/filter here. That's load-bearing. `forwards` would hold the
   last keyframe on the frame for good, and the browser never lands
   filter on `none`: it interpolates to `contrast(1) brightness(1)`.
   Any filter makes the frame a stacking context, which traps its
   grease mark inside it, and the next frame in the strip then paints
   over any part of the mark that spills right (grease-6 did exactly
   that). `backwards` applies the washed-out first keyframe during the
   stagger delay, then lets go completely when the animation ends. */
@media (prefers-reduced-motion: no-preference) {
  .shot {
    animation: develop 0.85s cubic-bezier(0.25, 0.6, 0.3, 1) backwards;
    animation-delay: calc(0.1s + min(var(--i, 0), 12) * 0.07s);
  }
}

/* ---------- the easel (fslightbox) ---------- */
/* The enlargement comes up as a print: paper border, on the dark
   of the darkroom, with the counter in edge-print amber. */

.fslightbox-container {
  background: rgba(20, 20, 16, 0.96) !important;
  font-family: var(--mono) !important;
}

.fslightbox-container .fslightboxs {
  box-shadow:
    0 0 0 clamp(6px, 1.1vw, 14px) var(--paper),
    0 18px 60px rgba(0, 0, 0, 0.55);
}

.fslightbox-container .fslightboxsn {
  color: var(--amber);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

.fslightbox-container .fslightboxsl {
  background: var(--amber);
}

.fslightbox-container .fslightboxb {
  background: transparent;
}

.fslightbox-container .fslightbox-svgp {
  fill: var(--muted-lo);
}

.fslightbox-container .fslightboxb:hover .fslightbox-svgp,
.fslightbox-container .fslightbox-slide-btn-container:hover .fslightbox-svgp {
  fill: var(--amber);
}