/* ==========================================================================
   02 THE RECORD — /work/'s spine, and why that page is not a gallery. Five
   jobs, each a frame PAIR beside the record, resolving into what stayed: the
   defect we did NOT remove. Offset alternating — the frames take the start
   edge on odd rows and the end edge on even ones, crossing the container on
   both sides. No hover on a row: a record is an instrument reading, not a
   link, the same decision .refusal__cell and .calendar__row took. Nothing
   invented — tick construction from .ledger, accent grammar from .refusal (a
   numeral and a border, never a word), the site's chamfer, .job--expanded's
   two-frame measurements. 10 images.
   ========================================================================== */

.record { background: var(--surface-sunken); overflow: hidden; }

.record__list { display: grid; gap: var(--space-stack); background: var(--tick-rule); background-position: top; }

.record__row {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--ledger-pad-block);
  background: var(--tick-rule-fine);
  background-position: bottom;
}

.record__idx {
  font-family: var(--font-mono);
  font-size: var(--text-index);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent);
}

/* end-aligned: the operation frame is the shorter of the two, and hung from
   the top it left a dead quadrant beside it. On a common bottom line the pair
   reads as two specimens on one shelf. */
.record__frames { display: grid; align-items: end; gap: var(--grid-gap-tight); }

.record__frame {
  aspect-ratio: var(--ratio-tall);
  border-radius: var(--radius-media);
  clip-path: var(--chamfer-clip);
}
.record__frame::after { background: var(--chamfer-edge), var(--overlay-media); }
/* the operation frame is the smaller of the pair: stretched in a two-track
   row it takes the pair's height, stacked it states its own ratio */
.record__frame--sub { --chamfer: var(--chamfer-sm); aspect-ratio: var(--ratio-card); }

.record__body { display: flex; flex-direction: column; gap: var(--space-xs); }

/* identical construction to .job__paint */
.record__paint { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
.record__title { font-size: var(--text-h3); color: var(--text-primary); }
/* one step above a rail card: these are the page's records, not a scroller */
.record__desc { max-width: var(--width-measure); font-size: var(--text-lead); line-height: var(--leading-body); color: var(--text-muted); }

.record__spec { display: grid; gap: var(--space-3xs); }
.record__spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  background: var(--tick-rule-fine);
  background-position: bottom;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.record__spec-row b { color: var(--text-secondary); font-weight: var(--weight-medium); }
/* same construction as .refusal__why a */
.record__spec-row a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-accent); text-underline-offset: var(--space-3xs); transition: color var(--dur-fast) var(--ease-state); }
.record__spec-row a:hover { color: var(--text-primary); }

/* THE SPINE. Not a footnote at the foot of a card: an inset plate on
   --surface-page inside a --surface-sunken section, carrying the only
   slab-weight accent edge in the row, last and heaviest in every record. The
   eye resolves each reading INTO the thing we could not fix. The accent is a
   FILL here and never the label's ink — "What stayed" is a word. */
.record__stayed {
  --chamfer: var(--chamfer-md);
  margin-block-start: var(--space-2xs);
  padding: var(--card-pad);
  background: var(--chamfer-edge), var(--surface-page);
  border-inline-start: var(--border-width-slab) solid var(--surface-accent);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}
.record__stayed-key { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.record__stayed-val { max-width: var(--width-measure); font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-secondary); }

/* side by side as soon as a track holds a legible frame */
@media (min-width: 768px) {
  .record__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .record__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "idx body" "frames body";
    /* the record is shorter than the frame pair beside it. Centred it floats
       level with the middle of the pair; hung from the top it left ~230px of
       bare ground under the datasheet, and pushed to the foot it opened the
       same gap between the datasheet and the spine plate. Same decision
       .job--expanded took, for the same reason. */
    align-items: center;
    column-gap: var(--space-2xl);
  }
  .record__row:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "body idx" "body frames";
  }
  .record__idx { grid-area: idx; align-self: start; }
  .record__frames { grid-area: frames; }
  .record__body { grid-area: body; }
}

@media (min-width: 1024px) {
  /* THE GRID BREAK. The list crosses BOTH container edges, alternating down
     the page. The reach is the gutter plus whatever outer margin the wrap has
     at this width, measured off the layout exactly as measure.css measures it
     — flush with the container is not a crossing above --bp-2xl. .record
     clips, so nothing here can scroll sideways. */
  /* capped at --width-page: <body> stops there, so above 1,920 the raw
     (100vw - --width-wide)/2 is not the wrap's outer margin any more and the
     break overshot the viewport. Half a scrollbar of residue remains on
     Windows and Linux and cannot be removed in CSS — see base.css .bleed. */
  .record__row { --record-break: calc(var(--gutter) * -1 - max(0px, (min(100vw, var(--width-page)) - var(--width-wide)) / 2)); }
  .record__row:nth-child(odd) .record__frames { margin-inline-start: var(--record-break); }
  .record__row:nth-child(even) .record__frames { margin-inline-end: var(--record-break); }
}