/* ============================================================
   THE RECORD · two-speed gallery
   ------------------------------------------------------------
   Companion sheet to js/record-gallery.js. Build-owned.

   WHAT REPLACES WHAT. Beat 04 used to be a camera taking a
   curved pass through four groups of floating plates, with the
   figure set huge and the words hung off it. This is the other
   reading of the same data: two columns running at two speeds,
   a photograph per line, and the stat set SMALL underneath it.

   THE FIGURE IS NO LONGER THE PICTURE. A 119 at display size is
   the page shouting a number; the same 119 set at body size
   under a photograph of the pass that made it is the page
   showing its working. Every line on this beat is now the same
   text size — main column and sub column alike — and what
   separates them is position, rhythm and speed, not scale.

   FOUR SECTIONS, NOT AN INFINITE RUN. The reference this came
   from loops forever because it has nothing to say; this has
   exactly four things to say and then a cabinet to land on.
   ============================================================ */

.k-rec {
  position: relative;
  z-index: 1;
  /* PULLED UP UNDER THE IDENTITY'S LAST SCREEN, exactly the way
     the identity well is pulled up under the hero. The diptych
     parts left and right onto whatever is behind it, and what
     should be behind it is this — so this has to already be
     there, not a screen further down the document. */
  margin-block-start: -100vh;
  margin-block-start: -100dvh;
  background: var(--kdb-surface-ground);
  /* Each section is a viewport, and the run is what the script
     scrubs against. Set per section by the script. */
  --rec-gut: clamp(1.25rem, 4vw, 4.5rem);
}

/* ---- ONE SECTION, ONE VIEWPORT ---------------------------- */
.k-rec__sec {
  position: relative;
  height: var(--rec-run, 260vh);
}
.k-rec__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rec-gut);
  padding-inline: var(--rec-gut);
  box-sizing: border-box;
  /* The whole stage is what flies at the camera on entry and
     slides up on exit — one transform, written by the script. */
  will-change: transform, opacity;
}

/* The cabinet lands centred and alone: one column, one frame. */
.k-rec__sec--solo .k-rec__stage { grid-template-columns: min(46ch, 78vw); justify-content: center; }

/* ---- THE TWO COLUMNS, AT TWO SPEEDS ----------------------- */
.k-rec__col {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vh, 5rem);
  will-change: transform;
}
/* The main column runs SLOW and sits high; the sub column runs
   fast and starts low, so the two are never level and the eye
   always has one of them arriving. */
.k-rec__col--main { padding-block-start: 8vh; }
.k-rec__col--sub { padding-block-start: 34vh; }

/* ---- ONE ITEM: A PHOTOGRAPH, THEN THE STAT ---------------- */
.k-rec__item {
  margin: 0;
  position: relative;
  cursor: pointer;
  /* The fly-at is per item and staggered, so each one carries
     its own depth on the way in. */
  will-change: transform, opacity;
}
.k-rec__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  /* ALMOST NOTHING. This was a solid neutral, so every square the
     stencil had not punched yet showed as a grey block and the
     arrival read as a picture being assembled out of tiles on a
     plate. The picture should come out of the page, not off a
     board — so what is behind the holes is the page, with barely
     enough tone to say a frame is there at all. */
  background: color-mix(in srgb, var(--kdb-neutral-95, #14181d) 4%, transparent);
}
.k-rec__col--sub .k-rec__frame { aspect-ratio: 1 / 1; }

/* THE PICTURE IS BIGGER THAN ITS FRAME, and that headroom is
   what the pointer moves through. 1.14 gives about seven per
   cent of travel in each direction — enough to read as the
   frame being a window onto something larger, not enough for
   the subject to leave it. */
.k-rec__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
  /* The pixellate-in is a stencil over this, not a filter on
     it — see the mask note in record-gallery.js. */
  -webkit-mask-image: var(--rec-mask, none);
  mask-image: var(--rec-mask, none);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- THE STAT, UNDERNEATH, SMALL -------------------------- */
.k-rec__cap {
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--kdb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kdb-text-primary, #14181d);
}
/* Same size as everything else on the line. The figure is told
   apart by weight and by being first, which is all a number
   needs when it is sitting under its own evidence. */
.k-rec__fig { font-weight: 700; }
.k-rec__word { font-weight: 400; }
.k-rec__note {
  flex-basis: 100%;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--kdb-neutral-60, #6b7480);
}

.k-rec__label {
  position: absolute;
  top: var(--rec-gut);
  left: var(--rec-gut);
  margin: 0;
  font-family: var(--kdb-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kdb-neutral-60, #6b7480);
  z-index: 3;
  pointer-events: none;
}

/* ---- THE DETAIL, FULL WIDTH ------------------------------- */
.k-rec__detail {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--kdb-surface-ground);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: var(--rec-gut);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 260ms;
}
.k-rec__detail[data-open] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.k-rec__detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.k-rec__detail-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18rem, 1fr);
  gap: var(--rec-gut);
  overflow-x: auto;
  align-content: center;
}
.k-rec__detail-strip figure { margin: 0; }
.k-rec__detail-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-rec__close {
  border: 1px solid var(--kdb-border-hairline, #d9dde3);
  background: transparent;
  font: inherit;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .k-rec__stage { grid-template-columns: 1fr; }
  .k-rec__col--sub { padding-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .k-rec__stage, .k-rec__col, .k-rec__item { transform: none !important; will-change: auto; }
  .k-rec__frame img { transform: none; -webkit-mask-image: none; mask-image: none; }
}