/* ============================================================================
   LOADING SCREEN VARIATIONS — the showcase page (index.php)
   Title, rule and lede are the site's own (.section-title, .section-divider,
   the --s-* scale). Each variation is a darkroom sheet at the darkroom's
   square shape (since 2026-10-19; it was 41:33): the frame (sheet.php) carries the paper and the
   animation; this page adds what a frame would clip, the sheet's shadow and
   its kraft photo corners (the turn card's, .jd-turn-corner in
   junk-drawer.css: same gradient, the same cut, scaled with the sheet).
   ========================================================================== */
/* the lede is the page's ordinary text, the full content width (owner,
   2026-10-20: "normal text content … like any other page") */
.lsv-lede { margin: 0 0 var(--s-3); }
.lsv-lede:last-of-type { margin-bottom: var(--s-5); }   /* the intro is two paragraphs; the grid starts after the last */

/* THE DRAWER'S SIZE (owner, 2026-10-20: "no differences in size or
   dimension … the ones that appear on the variations page should be the
   same as the ones I'm seeing in the instrument"). Each sheet is
   exactly the size of a sheet on the Junk Drawer's loading screen in the
   same window — the drawer's own sizing, restated here (PAIRED with THE
   SQUARE SHEETS and THE ONE EXCEPTION in junk-drawer.css; nothing reads one
   from the other, so a change to either is a change to both):
   DESK (≥ 900px): the loading card is min(900px, the window less the
     banner and 24px) tall; its title row, its waiting-line band, its bar,
     its padding and rules take 158px, and the two rows of sheets with a
     label under each (26px) and the 24px gap between take the rest:
     (card − 158 − 2×26 − 24) / 2 = (card − 234) / 2 — 243px on a 1280×800
     window, 293px on 1440×900, 333px on 1920×1080 and larger.
   PHONE: the drawer's pile is the window less 50px (the card's 8px insets,
     its 16px padding and its rules) and its two columns meet 16px apart:
     (window − 50 − 16) / 2 — 162px on a 390px phone. THE ONE COLUMN (owner,
     2026-11-07) breaks the pairing on phones and tablets only: the showcase
     shows its sheets one to a row there, as wide as the window less the
     page's 24px a side (342px on a 390px phone), so each is twice the
     drawer's. The desk and the narrow desk keep the drawer's size. */
/* THREE ACROSS (owner, 2026-10-20): the page's 912px measure holds three
   sheets only up to 288px, so the GRID ALONE runs wider than the page — the
   title and lede keep the site's measure — centred under them: as wide as
   three sheets and their gaps, never wider than the window less 24px a side
   (a classic scrollbar included). Where three will not fit in that, it
   drops to two (auto-fill), still centred — on a desk; a phone or tablet
   has one (THE ONE COLUMN, above). */
.lsv-grid {
  --lsv-sw: max(60px, calc(100vw - 48px));   /* THE ONE COLUMN: a phone or tablet, one sheet a row */
  --lsv-gap: 16px;
  --lsv-w: min(calc(3 * var(--lsv-sw) + 2 * var(--lsv-gap)), calc(100vw - 48px));
  /* one gap both ways (owner, 2026-10-20: a neat grid, the rows as far
     apart as the columns — the titles under the sheets went to THE TAB) */
  display: grid; gap: var(--lsv-gap);
  grid-template-columns: repeat(auto-fill, var(--lsv-sw));
  justify-content: center;
  width: var(--lsv-w);
  margin-left: calc((100% - var(--lsv-w)) / 2);
}
/* a desktop window narrowed under 900px keeps the drawer's two columns and
   its cap (THE NARROW DESK in junk-drawer.css): never larger than the desk's
   own sheet */
@media (max-width: 899px) and (hover: hover) and (pointer: fine) {
  .lsv-grid {
    --lsv-sw: max(60px, min(calc((100vw - 66px) / 2),
                            calc((min(900px, 100dvh - 56px - 24px) - 234px) / 2)));
  }
}
@media (min-width: 900px) {
  .lsv-grid {
    --lsv-sw: calc((min(900px, 100dvh - var(--banner-h, 56px) - 24px) - 234px) / 2);
    --lsv-gap: 24px;
  }
}
.lsv-item { margin: 0; min-width: 0; }

.lsv-sheet {
  position: relative;
  /* square by an explicit height, the same length as the width, NOT by
     aspect-ratio: Safari does not reliably recompute an aspect-ratio grid
     item's height when the window is resized, and a stale, too-tall sheet
     overlapped the row below and stayed overlapped (owner report,
     2026-10-20). The drawer's own sheets are sized the same way. */
  width: var(--lsv-sw); height: var(--lsv-sw); max-width: 100%;
  box-shadow: 0 4px 10px -3px rgba(46, 34, 12, 0.5),
              0 1px 3px rgba(46, 34, 12, 0.35);
  background: #f8f3e2;   /* the plate paper, under the frame while it loads */
  z-index: 0;   /* a stacking context for the corners and THE TAB */
  container-type: inline-size;   /* the corners scale with the sheet */
}
.lsv-sheet iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}
/* the corners scale with their sheet, as the drawer's do (THE SCALED
   CORNERS, junk-drawer.css): 6.6% of its width, 9–22px, the overhang with
   them — a fixed 22px was twice the share of a phone's sheet */
.lsv-corner {
  --cw: clamp(9px, 6.6cqw, 22px);
  position: absolute; z-index: 2; width: var(--cw); height: var(--cw); pointer-events: none;
  background: linear-gradient(135deg, #dfcd9a, #c3aa6e);
  filter: drop-shadow(0 1px 1.5px rgba(46, 34, 12, 0.45));
}
.lsv-corner.tl { top: calc(var(--cw) * -0.18); left: calc(var(--cw) * -0.18); clip-path: polygon(0 0, 100% 0, 0 100%); }
.lsv-corner.tr { top: calc(var(--cw) * -0.18); right: calc(var(--cw) * -0.18); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lsv-corner.bl { bottom: calc(var(--cw) * -0.18); left: calc(var(--cw) * -0.18); clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(45deg, #c3aa6e, #dfcd9a); }
.lsv-corner.br { bottom: calc(var(--cw) * -0.18); right: calc(var(--cw) * -0.18); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(-45deg, #c3aa6e, #dfcd9a); }

/* THE TAB (owner, 2026-10-20: "the title of each of the variations is only
   shown when I hover over them … a tastefully designed tab in the top of
   each container … only after you hover over it for a few moments"; then
   "in the center at the top, but overlaid on top … over the squares"). A
   label of the photo corners' kraft, hung from the middle of the sheet's top
   edge over the animation, its lower corners rounded; the title in small
   spaced capitals. After 0.7s of hover it drops into place and fades in;
   leaving takes it away at once. A screen that cannot hover never shows it;
   the caption is still read aloud (.lsv-vh). */
.lsv-tab {
  position: absolute; z-index: 3; top: 0; left: 50%;
  max-width: calc(100% - 2 * clamp(9px, 6.6cqw, 22px) - 16px);
  padding: 4px 12px 4px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #d4bd84, #e6d6a8);
  box-shadow: 0 1px 3px rgba(46, 34, 12, 0.35);
  font-family: var(--font-mono, "Courier Prime", "Courier New", monospace);
  font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #3e2e12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 0.12s ease-in, transform 0.12s ease-in;
}
@media (hover: hover) {
  .lsv-item:hover .lsv-tab {
    opacity: 1; transform: translate(-50%, 0);
    transition: opacity 0.22s ease-out 0.7s, transform 0.28s cubic-bezier(.2, .8, .25, 1) 0.7s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lsv-tab, .lsv-item:hover .lsv-tab { transform: translate(-50%, 0); }
}

/* THE ENLARGEMENT (owner, 2026-10-20; lsv.js): each sheet is a button
   (an invisible one over the frame, which takes no clicks of its own) that
   opens it in the dialog, scaled up whole. The enlarged sheet has no photo
   corners (owner: "don't show the corners on the enlarged version"); its
   title hangs from the top as THE TAB does, always shown, and the × sits on
   the paper in its top right corner. */
.lsv-sheet iframe { pointer-events: none; }
.lsv-open {
  position: absolute; inset: 0; z-index: 1;
  margin: 0; padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.lsv-open:focus-visible { outline: 2px solid var(--jd-ruling-ink, #4a628a); outline-offset: 3px; }
.lsv-zoom {
  padding: 0; margin: auto; border: 0; background: none; overflow: visible;
  max-width: none; max-height: none;
}
.lsv-zoom::backdrop { background: rgba(26, 22, 14, 0.72); }
.lsv-zoom[open] { animation: lsv-zoom-in 0.22s cubic-bezier(.2, .8, .25, 1); }
@keyframes lsv-zoom-in { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .lsv-zoom[open] { animation: none; } }
.lsv-zoom-stage { position: relative; }
.lsv-zoom-scale { transform-origin: 0 0; }
.lsv-zoom-scale .lsv-sheet { max-width: none; }
.lsv-zoom-title {
  position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 96px);
  padding: 5px 16px 5px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #d4bd84, #e6d6a8);
  box-shadow: 0 1px 3px rgba(46, 34, 12, 0.35);
  font-family: var(--font-mono, "Courier Prime", "Courier New", monospace);
  font-size: 13px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #3e2e12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsv-zoom-close {
  position: absolute; z-index: 3; top: 10px; right: 10px;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: #f8f3e2; color: #3e2e12;
  box-shadow: 0 1px 3px rgba(46, 34, 12, 0.45);
  font-size: 24px; line-height: 36px; cursor: pointer;
}
.lsv-zoom-close:focus-visible { outline: 2px solid #4a628a; outline-offset: 2px; }

/* visually hidden, still read: the caption THE TAB stands in for */
.lsv-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lsv-title { font-weight: 600; font-size: var(--fs-md); line-height: 1.3; }
.lsv-text { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.5; }

/* THE PAGER (owner, 2026-10-20): nine to a page; at the foot, back, the pages
   by number and forward, in the label face. The page on screen is inked; a
   step with nowhere to go stays in place, faint, so the row never shifts. */
.lsv-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-5) 0 0;
  font-family: var(--font-mono, "Courier Prime", "Courier New", monospace);
  font-size: var(--fs-sm, 14px);
  letter-spacing: 0.04em;
}
.lsv-pg-list { display: flex; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.lsv-pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--s-1);
  box-sizing: border-box;
  color: var(--ink); text-decoration: none;
  border: 1px solid transparent;
}
a.lsv-pg:hover, a.lsv-pg:focus-visible { border-color: var(--ink); }
.lsv-pg.is-current { background: var(--ink); color: var(--paper, #fff); }
.lsv-pg[aria-disabled="true"] { opacity: 0.35; }