/* ----- The story so far: a cassette case on every chapter (public/tape.js); the grid and the cases are .case-grid and
   .rw-* in crate.css. The card shows the chapter's opening; the J-card, when the case is pinned, unfolds it in full,
   and on one tape a B side. ----- */
.case-grid.tp-grid > .prose-fact dt { cursor: pointer; color: var(--ink); font: 400 var(--fs-lead)/1.35 var(--font-sans); padding: 0; }
.case-grid.tp-grid > .prose-fact dt:hover, .case-grid.tp-grid > .prose-fact.is-open dt { color: var(--accent); }
.case-grid.tp-grid > .prose-fact dd:not(.case-cue) { margin: 0; color: var(--ink); max-width: 40em; }

.case-grid.tp-grid > .prose-fact > dt, .case-grid.tp-grid > .prose-fact > dd { min-width: 0; }


/* the J-card, unfolded: panel A (the chapter) and, where there is one, panel B */
.jc { display: flex; gap: 0; overflow-x: auto; padding: 14px 2px 18px; perspective: 1400px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.jc-p { flex: 0 1 34em; min-width: min(78vw, 22em); scroll-snap-align: start; margin: 0; padding: 16px 18px; display: grid; align-content: start; gap: 8px;
    background: color-mix(in oklab, var(--bg) 82%, var(--ink) 4%); border: 1px solid var(--line);
    transform-origin: left center; transform: rotateY(-70deg); opacity: 0;
    transition: transform var(--rw-t, .7s) var(--cr-ease), opacity var(--rw-t, .7s) var(--cr-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.jc-p + .jc-p { border-left: 1px dashed var(--line); }
.rw-panel.is-shown .jc-p { transform: none; opacity: 1; }
.jc-side { margin: 0; font: 400 var(--fs-meta)/1 var(--font-mono); color: var(--muted); }   /* sentence case: no tracked capitals on the page */
.jc-h { margin: 0; font-weight: 500; }
.jc-t { margin: 0; max-width: 40em; }
@media (prefers-reduced-motion: reduce) { .jc-p { transition: none; transform: none; } }
@media print { .rw-thumb, .rw-fold { display: none !important; } }

/* the Story, laid out like the record crate (owner, 2026-10-15): two cassettes to a row at every width, each case with
   its caption below it (the chapter's title and an open cue); the chapter itself is on the J-card, which unfolds
   under the row when the case is pinned */
.case-grid.tp-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(12px, 1.6vw, 24px); }
.case-grid.tp-grid.rw-list { --tp-gap: clamp(24px, 4vw, 64px); --tp-cell: calc((min(100vw - 2 * var(--gutter, 20px), var(--content-max, 1320px)) - var(--tp-gap)) / 2);
    /* the case and its open J-card use the middle ~68% of the slot, so the slot may be wider than its cell (the edges are empty) */
    --rw-zoom: 2.9; --rw-w0: min(calc(152 * var(--mm) * var(--rw-zoom) * 240 / 216), calc(var(--tp-cell) / .7)); --tp-shift: calc(var(--rw-w0) * -.174); }   /* 2.9: a cassette case about as wide as a sleeve; the shift puts the case's left edge on the cell's, as a sleeve's is */
.story-section { overflow-x: clip; }
.case-grid.tp-grid > .prose-fact.rw-row > .rw-thumb { max-width: none; margin-left: var(--tp-shift); margin-top: calc(var(--rw-w0) * -.055); }
/* measured (2026-11-01): the open case and its J-card use the slot from 6.4% to 89% of its height, so the slot's top
   5.5% is never drawn on and rows may pull up into it; together with the smaller row gap this shortens the Story by
   about an eighth without anything ever overlapping, closed or open */
.case-grid.tp-grid > .prose-fact.rw-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.case-grid.tp-grid > .prose-fact.rw-row > dd:not(.case-cue) { display: none; }   /* the chapter is read on the J-card */
.case-grid.tp-grid > .prose-fact.rw-row > dt, .case-grid.tp-grid > .prose-fact.rw-row > dd.case-cue { padding-left: 0; }
.case-grid.tp-grid > .prose-fact.rw-row > dt { margin-top: calc(8px - var(--rw-w0) * .12); font: 400 var(--fs-lead)/1.35 var(--font-sans); }   /* the open case never reaches the slot's last eighth */
.story-lead { max-width: 46ch; margin: -8px 0 clamp(24px, 4vw, 40px); font-size: var(--fs-body); color: var(--muted); }
@media (max-width: 860px) {
    .case-grid.tp-grid { column-gap: 14px; }
    .case-grid.tp-grid.rw-list { --tp-gap: 14px; }
    .case-grid.tp-grid > .prose-fact.rw-row > dt { font-size: var(--fs-body); }
}
/* the J-card unfolded: the chapter in full */
.jc-a .jc-h { font: 400 var(--fs-lead)/1.35 var(--font-sans); }
.jc-a .jc-t { font-size: var(--fs-body); line-height: 1.7; }