/* --- Film-edge header strip ------------------------------------------- */
.edge-strip {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1rem);
  padding: .5rem .75rem;
  background: var(--frame);
  color: var(--edge);
  white-space: nowrap;
}

/* The sprocket runs are the only flexible part of the strip, so the
   captions never wrap on a narrow phone. */
.edge-strip .sprockets {
  flex: 1 1 auto;
  height: 9px;
  min-width: .5rem;
  background-image: repeating-linear-gradient(90deg,
      rgba(224, 138, 30, .55) 0 7px,
      transparent 7px 16px);
  border-radius: 1px;
}

.status {
  color: var(--edge);
  font-weight: 500;
}

/* --- Frames -----------------------------------------------------------
   Every link is one exposure on the sheet. */
.frame {
  position: relative;
  display: block;
  padding: 8px 8px 0;
  background: var(--frame);
}

.frame-media {
  display: block;
  position: relative;
  aspect-ratio: var(--frame-aspect);
  overflow: hidden;
  background: #232326;
}

.frame-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: scale .5s var(--ease), filter .5s var(--ease);
}

.frame:hover .frame-media img,
.frame:focus-visible .frame-media img {
  scale: 1.04;
  filter: grayscale(1) contrast(1.15) brightness(1.08);
}

.frame-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .1rem .5rem;
  color: rgba(233, 229, 221, .82);
}

.frame-id {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}

.frame-no {
  flex: none;
  color: var(--edge);
}

.frame-name {
  font-weight: 600;
  font-size: clamp(.9rem, 2.4vw, 1.02rem);
  letter-spacing: -.01em;
  color: #edeae3;
}

.frame-count {
  flex: none;
  color: rgba(233, 229, 221, .5);
}

@media (max-width: 430px) {
  .frame-count {
    display: none;
  }
}

/* --- Grease pencil ----------------------------------------------------
   On a real contact sheet the editor rings the frames worth printing. The
   two selects are ringed already; the rest get ringed as you reach them. */
/* The ring sits exactly over the exposure, and its viewBox has the same
   aspect as the frame, so the stroke never stretches. Change
   --frame-aspect and the ring follows. */
.grease {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: auto;
  aspect-ratio: var(--frame-aspect);
  overflow: visible;
  pointer-events: none;
}

/* The ring comes in through <use>, which builds a shadow tree no document
   selector can reach — so it is styled entirely through inherited
   properties set here on the <svg> itself.

   `pathLength="100"` on the sprite path normalises the ring's length, so
   the dash maths below holds at every frame size. The gap is longer than
   the dash so that, when the ring is parked out of sight, no dash boundary
   lands on the path and leaves a stray round cap behind. */
.grease {
  fill: none;
  stroke: var(--grease);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 200;
  stroke-dashoffset: 100;
  opacity: .9;
  transition: stroke-dashoffset .55s var(--ease);
}

.frame:hover .grease,
.frame:focus-visible .grease,
.frame-select .grease {
  stroke-dashoffset: 0;
}

/* The pre-ringed selects draw themselves once, on arrival. */
@keyframes ring-in {
  from {
    stroke-dashoffset: 100;
  }
}

.frame-select .grease {
  animation: ring-in .9s var(--ease) .35s backwards;
}

/* --- Footer marks ------------------------------------------------------ */
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.mark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark:hover,
.mark:focus-visible {
  background: var(--frame);
  border-color: var(--frame);
  color: var(--sheet);
}

.contact {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--ink);
}

.contact strong {
  font-weight: 600;
  letter-spacing: -.01em;
  border-bottom: 1.5px solid var(--grease);
}

.contact:hover strong {
  color: var(--grease);
}

@media (prefers-reduced-motion: reduce) {
  .frame-media img,
  .grease,
  .mark {
    transition: none;
  }

  .frame:hover .frame-media img,
  .frame:focus-visible .frame-media img {
    scale: 1;
  }

  .frame-select .grease {
    animation: none;
  }
}