/* =============================================================================
   The Contact Sheet  ·  [data-ks-contact-sheet]
   A 35mm contact sheet the visitor marks up like a photographer choosing
   keepers. Lives on the dark #050505 band of work/photography.html, so ink
   defaults to bone; add .ks-contact-sheet-on-light for a paper section.
   All classes are prefixed ks-contact-sheet- to avoid collisions.
   ========================================================================== */

[data-ks-contact-sheet] {
  --cs-ink: var(--bone);
  --cs-soft: var(--bone-dim);
  --cs-hair: var(--hairline-light);
  color: var(--cs-ink);
}

[data-ks-contact-sheet].ks-contact-sheet-on-light {
  --cs-ink: var(--ink);
  --cs-soft: var(--ink-soft);
  --cs-hair: var(--hairline-dark);
}

/* ---- shell -------------------------------------------------------------- */
.ks-contact-sheet {
  display: grid;
  gap: 22px;
}

.ks-contact-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
}

.ks-contact-sheet-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
}

.ks-contact-sheet-credit {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.42;
}

/* ---- stage -------------------------------------------------------------- */
.ks-contact-sheet-stage {
  position: relative;
  border-top: 1px solid var(--cs-hair);
  border-bottom: 1px solid var(--cs-hair);
  padding: 18px 0;
}

.ks-contact-sheet-film {
  position: relative;
}

.ks-contact-sheet-canvas {
  display: block;
  width: 100%;
  /* explicit fallback height: contact-sheet.js derives the exact height
     from the strip stack and writes it inline */
  height: 420px;
}

.ks-contact-sheet-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---- frame buttons (the invisible grid over the sheet) ------------------- */
.ks-contact-sheet-frames {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ks-contact-sheet-frame {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: crosshair;
  border-radius: 2px;
  touch-action: manipulation;
}

.ks-contact-sheet-frame:hover {
  box-shadow: inset 0 0 0 1px var(--cs-hair), 0 0 0 1px var(--cs-hair);
}

/* ---- loupe -------------------------------------------------------------- */
.ks-contact-sheet-loupe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid rgba(242, 239, 233, 0.4);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.ks-contact-sheet-loupe-on {
  opacity: 1;
  visibility: visible;
}

.ks-contact-sheet-loupecv {
  display: block;
}

/* ---- hint --------------------------------------------------------------- */
.ks-contact-sheet-hint {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.45;
}

/* ---- tally -------------------------------------------------------------- */
.ks-contact-sheet-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 34px;
  border-top: 1px solid var(--cs-hair);
  padding-top: 16px;
}

.ks-contact-sheet-cell {
  display: grid;
  gap: 5px;
  min-width: 84px;
}

.ks-contact-sheet-cellkey {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
}

.ks-contact-sheet-cellval {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ks-contact-sheet-clear {
  margin-left: auto;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cs-ink);
  background: none;
  border: 1px solid var(--cs-hair);
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 24px;      /* WCAG 2.2 minimum target size */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ks-contact-sheet-clear:hover {
  border-color: var(--cs-ink);
}

/* ---- a11y --------------------------------------------------------------- */
.ks-contact-sheet-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ks-contact-sheet :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .ks-contact-sheet-readout { gap: 12px 22px; }
  .ks-contact-sheet-cell { min-width: 72px; }
}

/* ---- reserved height -----------------------------------------------------
   This mount is empty until its script lands, and the script is lazy, so the
   box grew from zero the moment it mounted and shoved everything below it
   down the page. Measured on a throttled phone before this: notes.html was
   CLS 0.67 and work/robotics.html 0.59, against a 0.1 threshold.

   The numbers are the module's own measured built height at each width, not
   estimates. The scripting guard matters: with JavaScript off the feature
   never arrives, and reserving space for it would leave a hole instead of
   the nothing that is there today.
   ------------------------------------------------------------------------ */
@media (scripting: enabled) {
  [data-ks-contact-sheet] { min-height: 776px; }
}
@media (scripting: enabled) and (max-width: 640px) {
  [data-ks-contact-sheet] { min-height: 462px; }
}