/* ============================================================
   HEARTLINE FILMS — films-page-only styles
   Loaded by films.html AFTER css/site.css.
   The contact sheet: grease-pencil filter marks, the sheet
   chassis (perfs + edge print), and frame hide/show states.
   ============================================================ */

/* the sheet escapes the shared measure; intro copy stays flush left */
.archive > .sheet { max-width: none; }
.archive-note {
  color: var(--bone-dim);
  max-width: 44em;
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
  margin-right: auto;
}

/* ---------- grease-pencil filter marks ---------- */
.mark-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.7rem;
  margin-top: 1.9rem;
}
.mark-bar-label {
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--safelight);
  margin-right: 0.3rem;
}
.mark {
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-dim);
  background: none;
  border: 1px dashed rgba(232, 160, 76, 0.45);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.mark:hover { color: var(--kodak); border-color: var(--kodak); }
.mark[aria-pressed="true"] {
  color: var(--kodak);
  border: 2px solid var(--safelight);
  padding: calc(0.55rem - 1px) calc(0.9rem - 1px);
  transform: rotate(-1.2deg);
  box-shadow: 0 0 18px rgba(194, 47, 62, 0.25);
}
.mark-count {
  color: var(--safelight);
  margin-left: 0.35rem;
}
.sheet-count {
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone-dim);
  margin: 1rem auto 0;
}

/* ---------- the Super 8 mark: a splice of real stock in the row ---------- */
.mark-bar-sep {
  align-self: stretch;
  width: 1px;
  background: var(--line);
  margin: 0 0.35rem;
}
@media (max-width: 700px) {
  .mark-bar-sep { display: none; } /* wrapped rows make the divider a stray stroke */
}
.mark-s8 {
  color: var(--kodak);
  border: 1px solid rgba(242, 193, 78, 0.7);
  background-color: #0c0905;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='7'><rect x='3.5' y='1' width='6' height='5' rx='1.5' fill='%23141008' stroke='%23f2c14e' stroke-opacity='0.4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='7'><rect x='3.5' y='1' width='6' height='5' rx='1.5' fill='%23141008' stroke='%23f2c14e' stroke-opacity='0.4'/></svg>");
  background-position: left 0.3rem top 0.2rem, left 0.3rem bottom 0.2rem;
  background-repeat: repeat-x, repeat-x;
  padding: 0.8rem 1rem;
}
.mark-s8:hover {
  color: var(--kodak);
  border-color: var(--kodak);
  box-shadow: 0 0 18px rgba(242, 193, 78, 0.25);
}
.mark-s8[aria-pressed="true"] {
  color: var(--kodak);
  padding: calc(0.8rem - 1px) calc(1rem - 1px);
  box-shadow: 0 0 18px rgba(194, 47, 62, 0.3), 0 0 34px rgba(242, 193, 78, 0.18);
}

/* ---------- stock stamp on the five Super 8 prints ---------- */
.s8-stamp {
  position: absolute;
  top: -0.6rem; right: 0.55rem;
  z-index: 2;
  pointer-events: none;
  font-family: var(--mono); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  color: var(--kodak);
  background: #0c0905;
  border: 1px solid rgba(242, 193, 78, 0.65);
  padding: 0.3rem 0.55rem 0.3rem 1.35rem;
  transform: rotate(1.6deg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.s8-stamp::before { /* the single perf of real Super 8 stock */
  content: ""; position: absolute;
  left: 0.38rem; top: 50%; transform: translateY(-50%);
  width: 0.55rem; height: 0.55rem;
  border: 1px solid rgba(242, 193, 78, 0.55);
  border-radius: 2px;
  background: #141008;
}
/* payoff when the Super 8 mark is active */
.sheet-s8 .s8-stamp {
  border-color: var(--kodak);
  box-shadow: 0 0 18px rgba(242, 193, 78, 0.45);
}

/* ---------- the sheet chassis ---------- */
.sheet {
  position: relative;
  margin-top: 2.2rem;
  background: linear-gradient(#2a2013, #241b10 55%, #2a2013);
  border-top: 3px solid #0c0905;
  border-bottom: 3px solid #0c0905;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 160, 76, 0.07);
  padding: 3.4rem clamp(1.25rem, 4vw, 3rem) 3rem;
}
.sheet-perfs {
  position: absolute; top: 0.55rem; left: 0; right: 0; height: 1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='24'><rect x='18' y='3' width='20' height='18' rx='4' fill='%23141008'/><rect x='18' y='3' width='20' height='18' rx='4' fill='none' stroke='%23f2c14e' stroke-opacity='0.18'/></svg>");
  background-repeat: repeat-x;
}
.sheet .frame-grid {
  max-width: var(--measure);
  margin: 0 auto;
}
.sheet-edge {
  position: absolute; left: 0; right: 0; bottom: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(242, 193, 78, 0.45);
  margin: 0;
}

/* filtered-out prints leave the sheet entirely */
.sheet .frame[hidden] { display: none; }

/* when a mark leaves few prints, the grid still starts at the left edge */
.sheet .frame-grid { justify-items: stretch; }

@media (prefers-reduced-motion: reduce) {
  .mark { transition: none; }
  .mark[aria-pressed="true"] { transform: none; }
}