/* ============================================================
   CONCEPTO P — THE REGISTER OF NEGATIVES (the Ledger's body; assets/js/rooms/filing.js)
   THE LIST, one of the Ledger's two ways of seeing its negatives (rooms/ledger.js: List · Light table).
   23 October: type, and one picture. A holding is a line: its number in the catalogue's figures and one line
   in the reading face (its film, its format, its frames; where and when, where the register says), every word
   in the full ink. No column, no head, no cell, no strip in the line. The one picture is the negative held at
   the right, a third of the page wide and reaching a little into the list's measure: it is lit again, in place,
   as each line crosses the reading line (two fifths of the way down the screen), and drifts behind the page
   while it runs. On a phone it is held at the head of the screen and the lines pass under it.

   NO LINES AND NO BOXES: the lines are told apart by air and alignment, never by a rule or a fill, and
   nothing is moved sideways. Nothing is set below the full ink at rest. The line the held negative holds,
   and the line under the hand, are told by their number taking the house's gloss (the vinyl), nothing else.

   One vocabulary: --settle, --breath, --lift; --touch, --slow, --slower. Nothing bounces. No ancestor of a
   frame carries a transform, a filter or contain at rest: a frame that leaves for its file travels as a
   fixed copy (rooms/file.js).
   ============================================================ */
.lg{
  --lg-ink:var(--mb-ink, #1A1814);
  --lg-ink-2:var(--mb-ink, #1A1814);
  --lg-ink-3:var(--mb-ink, #1A1814);
  --lg-held:clamp(260px, 31vw, 560px);   /* the held negative's width */
  --lg-reach:3.5vw;                      /* how far it reaches into the list's measure */
  --lg-clear:calc(16vw - var(--gutter)); /* kept clear at the right for Members' key in its corner (filing.js measures it) */
  position:relative; z-index:1;
  display:block;
  overflow-x:clip;
  /* the page's whole width, out of Members' reading column: the list and its held negative are laid across the page */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  /* Members' page already stands under the letterhead (vault.css .vd): the two words come just under it */
  padding:clamp(10px, 2.6vh, 28px) var(--gutter) clamp(96px, 16vh, 180px);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  box-sizing:border-box;
  color:var(--lg-ink);
}
.lg-left{ min-width:0; }
.lg-right, .lg-right[hidden]{ display:none; }

/* ---------- the head: the two ways of seeing, the title (ledger.css), the holdings in one sentence, Find ---------- */
.lg-top{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.lg-hold{
  margin:clamp(14px, 2.2vh, 26px) auto 0; max-width:36em;
  line-height:1.5; color:var(--lg-ink);
  text-wrap:balance;
}
.lg-hl.act{ line-height:1; color:var(--lg-ink); -webkit-text-fill-color:var(--lg-ink); }
.lg-hl.is-here{ cursor:default; }
.lg-findp{ margin:clamp(10px, 1.8vh, 20px) 0 0; }
.lg-findw{
  margin:0; padding:4px 2px; border:0; background:none; cursor:pointer;
  line-height:1; color:var(--lg-ink); -webkit-text-fill-color:currentColor;
}
.lg-findw:focus-visible{ outline:none; -webkit-text-stroke:.022em currentColor; }

/* ---------- the find, opened in place: the field, its facets and the one reading (Negative · Positive) ---------- */
.rf{ margin:clamp(8px, 1.4vh, 16px) auto 0; width:min(100%, 36em); text-align:center; }
.rf[hidden]{ display:none; }
/* the field is a place to write and nothing is drawn round it: its words, and the caret, say so */
.rf-in{
  display:block; width:100%; box-sizing:border-box;
  margin:0; padding:6px 0; border:0; border-radius:0; background:none; text-align:center;
  line-height:1.25; color:var(--lg-ink); -webkit-appearance:none; appearance:none;
  caret-color:var(--lg-ink);
}
.rf-in::placeholder{ color:var(--lg-ink); opacity:1; font-style:italic; }
.rf-in:focus{ outline:none; }
.rf-in:focus::placeholder{ color:transparent; }
.rf-in::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.rf-line{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px 32px; margin:10px 0 0; }
.rf-facets{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 26px; margin:0; }
.rf-f{
  margin:0; padding:4px 0; border:0; background:none; cursor:pointer;
  color:var(--lg-ink); -webkit-text-fill-color:currentColor;
}
.rf-f[aria-expanded="true"]{ -webkit-text-stroke:.03em currentColor; }
/* the one reading: the current word in the gloss, the other plain black, never a quieter ink (fluid.css sets one) */
.lg .ng-word[aria-pressed="false"]{ opacity:1; filter:none; }
.lg .ng-dot{ color:var(--lg-ink); }
.rf-vals{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 22px; margin:6px 0 0; }
.rf-vals[hidden]{ display:none; }
.rf-v{
  margin:0; padding:6px 0; border:0; background:none; cursor:pointer;
  line-height:1.3; color:var(--lg-ink); -webkit-text-fill-color:currentColor; font-style:italic;
}

/* ---------- the list, and the negative held beside it ---------- */
.lg-reg{ margin-top:clamp(22px, 4.4vh, 52px); }
.lg-body{
  display:grid; align-items:start;
  grid-template-columns:minmax(0, 1fr) calc(var(--lg-held) - var(--lg-reach)) var(--lg-clear);
}
/* the lines wrap before the held negative: it reaches into the list's measure, never over a word */
.rg{ grid-column:1; grid-row:1; margin:0; padding:0 calc(var(--lg-reach) + 12px) 0 clamp(0px, 5.2vw, 96px); list-style:none; position:relative; z-index:1; }
.rg-l{ margin:0; padding:0; list-style:none; }
/* a line: its number, and one line of words. Every word in the full ink, with no gloss and no shadow */
.rg-a{
  display:grid; grid-template-columns:var(--rg-nw, 4.4em) minmax(0, 1fr); column-gap:clamp(14px, 1.6vw, 28px);
  align-items:baseline;
  max-height:12em; padding:clamp(11px, 1.35vh, 16px) 0; box-sizing:border-box;
  color:var(--lg-ink); -webkit-text-fill-color:currentColor; text-decoration:none;
  transition:max-height var(--slow) var(--settle), opacity var(--slow) var(--settle), padding var(--slow) var(--settle);
}
.rg-a:focus-visible{ outline:none; }
.rg-no{
  font-family:var(--num); font-variant-numeric:lining-nums tabular-nums;
  font-size:var(--t-num-l, clamp(24px, 21.33px + .679vw, 34.4px)); line-height:1; letter-spacing:.01em;
  color:var(--lg-ink); white-space:nowrap;
}
.rg-w{ min-width:0; color:var(--lg-ink); line-height:1.35; overflow-wrap:break-word; }
/* 23 October (P: no grey shading, no double): the line the held negative holds, or the hand is on, is told by its
   number's ink thickening a hair, never by the gloss's shadow under it */
.rg-no{ -webkit-text-stroke:0 currentColor; transition:-webkit-text-stroke-width var(--touch) var(--settle); }
.rg-l.is-held .rg-no, .rg-l.is-current .rg-no, .rg-a:focus-visible .rg-no{ -webkit-text-stroke-width:.028em; }
@media (hover:hover){ .rg-a:hover .rg-no{ -webkit-text-stroke-width:.028em; } }
.rg-a:focus-visible .rg-w{ -webkit-text-stroke:.018em currentColor; }
.rg-none{ margin:0; padding:12px 0; list-style:none; color:var(--lg-ink); }
/* a find: the lines that do not answer close, height and light together; once closed they leave the layout */
.rg-l.is-off .rg-a, .rg-l.is-opening .rg-a{ overflow:hidden; }
.rg-l.is-off .rg-a{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
.rg-l.is-gone, .ac-row.is-gone{ display:none; }
/* the line opened becomes its entry: it folds away and the entry stands in its place */
.rg-l.is-chosen .rg-a{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; overflow:hidden; }
.ac-row{ list-style:none; margin:0; padding:0; }
.ac-row.is-off .ac-w{ height:0; opacity:0; overflow:hidden; }

/* the held negative: in the column at the right, held level with the reading line while the list passes; it reaches
   into the list's measure, over the ends of the longest lines (it is nearer the eye than the page) */
.lg-held{
  grid-column:2; grid-row:1; position:sticky; z-index:2;
  top:max(calc(var(--nav-h) + 20px), calc(40vh - var(--lg-held) * 35 / 38 / 2));
  width:var(--lg-held); margin:0 0 0 calc(var(--lg-reach) * -1);
  pointer-events:none;
}
.lg-held.is-handed{ visibility:hidden; }
.lg-held-in{ position:relative; width:100%; aspect-ratio:38 / 35; }
.lg-hn{
  position:absolute; inset:0; container-type:inline-size;
  opacity:0; filter:brightness(1.5) saturate(.7);
  transition:opacity .2s var(--settle), filter .2s var(--settle);
}
.lg-hn.is-on{ opacity:1; filter:none; }
.lg-hn.is-off{ opacity:0; filter:none; transition:opacity .2s var(--settle) .04s; }
.lg-hn.is-now{ transition:none; }
/* a frame on its own length of film: 38 mm of it, 35 mm across, eight holes along each edge */
.lg-hn.is-frame{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.06)),
    var(--base, #B9B8B4);
  box-shadow:0 1px 2px rgba(26,24,20,.18), 0 28px 48px -26px rgba(26,24,20,.34), 0 64px 120px -70px rgba(26,24,20,.3);
}
.lg-hn-perf{
  position:absolute; left:0; right:0; top:5.71%; height:7.97%; display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138.5' width='198' height='279' rx='36' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size:12.5% 100%; background-repeat:repeat-x;
}
.lg-hn-perf.is-b{ top:auto; bottom:5.71%; }
.lg-hn-win{ position:absolute; left:2.63%; width:94.74%; top:15.71%; height:68.57%; overflow:hidden; background:rgba(0,0,0,.08); }
.lg-hn-im{ display:block; width:100%; height:100%; object-fit:cover; transition:filter var(--slow) var(--settle); }
.lg-hn-im.is-turned{ position:absolute; left:50%; top:50%; width:66.667%; height:150%; max-width:none; transform:translate(-50%, -50%) rotate(-90deg); }
.lg-hn-im.is-inv{ filter:invert(1); }
.lg.is-pos .lg-hn-im{ filter:invert(1); }
.lg.is-pos .lg-hn-im.is-inv{ filter:none; }
.lg-hn-ep{
  position:absolute; left:4%; bottom:15.2%; transform:translateY(50%);
  font-family:var(--num); font-size:clamp(7px, 1.9cqw, 11px); letter-spacing:.12em; white-space:nowrap;
  color:rgba(255,250,240,.82); pointer-events:none;
}
.lg-hn.is-pale .lg-hn-ep{ color:rgba(26,24,20,.7); }
/* a digital negative: its own sheet, a transparency on the paper */
.lg-hn.is-digital{ display:flex; align-items:center; justify-content:center; }
.lg-hn.is-digital .lg-hn-win{
  position:relative; inset:auto; display:block; height:100%; width:auto; aspect-ratio:var(--ar, .707); max-width:100%;
  padding:3%; box-sizing:border-box; background:#ECEEF0;
  box-shadow:0 1px 3px rgba(26,24,20,.16), 0 28px 48px -26px rgba(26,24,20,.3);
}
.lg-hn.is-digital .lg-hn-im{ object-fit:contain; mix-blend-mode:multiply; }
.lg.is-pos .lg-hn.is-digital .lg-hn-im{ mix-blend-mode:normal; }
/* the soup's photographs: a print, its white border */
.lg-hn.is-print{ display:flex; align-items:center; justify-content:center; }
.lg-hn.is-print .lg-hn-win{
  position:relative; inset:auto; width:86%; height:auto; aspect-ratio:3 / 2; padding:3.5%; box-sizing:border-box; background:#FBFBF9;
  box-shadow:0 1px 2px rgba(26,24,20,.18), 0 26px 44px -26px rgba(26,24,20,.34);
}
.lg-hn.is-print .lg-hn-im{ filter:none; }
/* a roll not yet developed: its cassette, still, as the held negative of that roll */
.lg-hn.is-await{ display:flex; align-items:center; justify-content:center; }
.lg-hn.is-await .cn{ width:92%; }

/* ---------- the entry: the line opened ---------- */
.ac-w{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--touch) var(--lift); }
.ac-row.is-open .ac-w{ grid-template-rows:1fr; transition:grid-template-rows var(--slow) var(--settle); }
.ac-row.is-now .ac-w{ transition:none; }
.ac-in{ min-height:0; overflow:hidden; }
.ac{ padding:18px 12px 52px 0; }
.ac-h{ margin:0; }
.ac-h > *{ margin:0; }
/* what it is, in the catalogue's label voice: small capitals, and figures drawn at their height (Roll 010,
   never the old-style "o1o" that small capitals of the text face would set) */
.ac-kick{
  line-height:1.3; color:var(--lg-ink-2);
}
/* its number, as an object (numerals.css .num-display): lining, firm, tight, in the page's ink */
.ac-no.num-display{
  margin-top:6px; font-size:clamp(84px, 7.4vw, 120px); line-height:.86; letter-spacing:-.03em;
  color:var(--lg-ink); -webkit-text-fill-color:var(--lg-ink);
}
.ac-no.is-name{ line-height:1.02; }
.ac-name{ margin-top:14px !important; line-height:1.12; color:var(--lg-ink); overflow-wrap:break-word; }
.ac-id{ margin-top:10px !important; line-height:1.4; color:var(--lg-ink-2); }
/* the fields: a label in small capitals over its value in the catalogue's text figures; air between, no rule */
.ac-trio, .ac-fs{ margin:0; }
.ac-trio{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:28px; margin-top:28px; }
.ac-trio.is-none{ margin-top:0; }
.ac-trio.is-none + .ac-fs{ margin-top:34px; }   /* the number stands a plane behind: air enough under it for its drift */
.ac-fs{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 28px; margin-top:22px; }
.ac-f{ min-width:0; }
.ac-k{
  display:block; line-height:1.3; color:var(--lg-ink-2);
}
.ac-v{
  display:block; margin:3px 0 0; line-height:1.3; color:var(--lg-ink); overflow-wrap:anywhere;
}
.ac-trio .ac-v{ line-height:1.2; }
/* a value that finds, and a film that opens its material: italic, the voice of a word that acts */
.ac-find, .ac-v .ac-mat{ color:var(--lg-ink); -webkit-text-fill-color:var(--lg-ink); text-decoration:none; }
.ac-note{ margin:24px 0 0; max-width:34em; line-height:1.55; color:var(--lg-ink-2); }
.ac-quiet{ margin:22px 0 0; max-width:30em; line-height:1.5; color:var(--lg-ink-2); }

/* ---------- the light table: a slab of opal, lit from inside ----------
   No case round it, no rim and no hairline: the light is a thing lying on the page, told from the page
   by its own light and by the soft shadow under it, never by an edge drawn round it. The opal falls off
   a little to its edges; its tooth is the house's fibre. */
.lg-light{ display:flex; flex-direction:column; align-items:stretch; }
.lb{
  position:relative; margin:0; box-sizing:border-box;
  width:min(100%, calc((100svh - var(--nav-h) - var(--kc-band) - 112px) * var(--lb-ar, 1.1)));
  aspect-ratio:var(--lb-ar, 1.1);
  border-radius:3px;
  background:#FFFFFF;
  box-shadow:
    0 1px 3px -1px rgba(20,24,30,.12),
    0 26px 46px -26px rgba(20,24,30,.30),
    0 64px 110px -60px rgba(20,24,30,.26);
}
/* the opal, lit; its brightness alone comes up under a sheet just laid (never a filter on the strips' ancestors) */
.lb-lit{
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(130% 120% at 50% 44%, #FFFFFF 0%, #FFFFFF 46%, #FCFCFC 70%, #F3F4F5 92%, #ECEEF0 100%);
  filter:brightness(1);
  transition:filter var(--slow) var(--settle);
}
.lb-lit::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:var(--fibre); background-size:160px 160px; opacity:.5; mix-blend-mode:multiply;
}
.lb.is-dim .lb-lit{ filter:brightness(.86); transition:none; }
.lb-bed{
  position:absolute; inset:0; box-sizing:border-box; padding:5%;
  display:flex; align-items:center; justify-content:center;
}
.lb-sheet{
  width:100%; display:flex; flex-direction:column; gap:7px;
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.lb-sheet.is-lifting{ opacity:0; transform:translate3d(0, -6px, 0); transition:opacity var(--touch) var(--lift), transform var(--touch) var(--lift); }
.lb-sheet.is-lowering{ opacity:0; transform:translate3d(0, -10px, 0); transition:none; }
/* the caption, in the catalogue's voice: Roll 010  Kodak UltraMax 400 · 36 frames; then the two readings */
.lb-cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  width:min(100%, calc((100svh - var(--nav-h) - var(--kc-band) - 112px) * var(--lb-ar, 1.1)));
  margin:20px 0 0;
}
.lb-name{ margin:0; min-width:0; line-height:1.3; }
.lb-nm{ color:var(--lg-ink); }
.lb-more{ color:var(--lg-ink-2); }

/* ---------- a strip of 35 mm film ----------
   35 mm wide; a frame is 36 by 24 mm and owns 38 mm of the length, eight perforations on a 4.75 mm
   pitch; each hole is 1.98 mm along the film and 2.79 mm across it, 2 mm in from the edge, its corners
   rounded as the cutter leaves them, cut through the base so the light behind shows through. Measured
   in the strip's own width (container units): 100cqw is --n frames (six by default, 228 mm). */
.fs{
  position:relative; container-type:inline-size;
  display:flex; width:100%; aspect-ratio:calc(38 * var(--n, 6) / 35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.05)),
    var(--base, #B9B8B4);
  box-shadow:0 1px 2px rgba(26,24,20,.16);
}
.fs-perf{
  position:absolute; left:0; right:0; height:7.97%; pointer-events:none;
  /* one hole in its 4.75 mm pitch, repeated: eight to a frame */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138.5' width='198' height='279' rx='36' fill='%23FDFEFF'/%3E%3C/svg%3E");
  background-size:calc(100cqw / (8 * var(--n, 6))) 100%; background-repeat:repeat-x;
}
.fs-perf-t{ top:5.71%; }
.fs-perf-b{ bottom:5.71%; }
/* the film's own name, printed along the top edge between the holes and the frames */
.fs-en{
  position:absolute; left:4%; top:15.2%; transform:translateY(-50%);
  font-family:var(--mono); font-size:clamp(4px, .92cqw, 7px); letter-spacing:.12em; white-space:nowrap;
  color:rgba(255,250,240,.62); pointer-events:none;
}
.fs.is-pale .fs-en{ color:rgba(26,24,20,.42); }
.fs-c{
  position:relative; flex:0 0 calc(100% / var(--n, 6)); height:100%;
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  transition:opacity var(--slow) var(--settle);
}
.fs-win{
  position:absolute; left:2.63%; width:94.74%; top:15.71%; height:68.57%;
  overflow:hidden; background:rgba(0,0,0,.08);
}
.fs-c.is-empty .fs-win{ background:rgba(0,0,0,.05); }
.fs-im{ display:block; width:100%; height:100%; object-fit:cover; transition:filter var(--slow) var(--settle); }
/* a window on the roll's contact print: the print laid under it, the frame at --c, --r */
.fs-im.is-sprite{
  position:absolute; max-width:none; object-fit:fill;
  left:calc(var(--c, 0) * -100%); top:calc(var(--r, 0) * -100%);
  width:600%; height:calc(var(--rows, 1) * 100%);
}
/* a frame shot upright, from its own scan, lies on its side as the contact print lays it */
.fs-im.is-turned{ position:absolute; left:50%; top:50%; width:66.667%; height:150%; max-width:none; transform:translate(-50%, -50%) rotate(-90deg); }
.fs-im.is-inv{ filter:invert(1); }
.lg.is-pos .fs-im, .nf.is-pos .fs-im{ filter:invert(1); }
.lg.is-pos .fs-im.is-inv, .nf.is-pos .fs-im.is-inv{ filter:none; }
/* the edge print: the roll's number and the frame's, between the frame and the perforations */
.fs-ep{
  position:absolute; left:4%; bottom:15.2%; transform:translateY(50%);
  font-family:var(--mono); font-size:clamp(4.5px, 1.05cqw, 7.5px); letter-spacing:.1em; white-space:nowrap;
  color:rgba(255,250,240,.78); pointer-events:none;
}
.fs.is-pale .fs-ep{ color:rgba(26,24,20,.52); }
.fs-c:focus-visible{ outline:none; }
/* the frame the keyboard is on is told by the light: the others on the sheet step back */
.lb-sheet:has(.fs-c:focus-visible) .fs-c:not(:focus-visible){ opacity:.42; }
.fs-c.is-faint{ opacity:.22; }
.fs-c.is-out{ visibility:hidden; }
/* the soup's two photographs lie on the light as prints */
.lb-sheet.is-prints{ flex-direction:row; align-items:center; justify-content:center; gap:7%; }
.lb-pr-a{ flex:0 1 42%; display:block; }
.lb-pr{ display:block; padding:3.5%; background:#FBFBF9; box-shadow:0 1px 2px rgba(26,24,20,.18), 0 10px 22px -14px rgba(26,24,20,.4); }
.lb-pr-im{ display:block; width:100%; height:auto; }
/* a roll not yet developed lies on the light as its cassette (filing.js canister) */
.lb-sheet.is-await{ align-items:center; justify-content:center; height:100%; }
.lb-sheet.is-await .cn{ width:min(78%, calc(100% * var(--lb-ar, 1.55) * .56)); }
/* a digital negative lies on the light alone, as the transparency it is */
.lb-sheet.is-digital{ align-items:center; height:100%; }
.lb-dn-a{ display:block; height:100%; aspect-ratio:var(--ar, .707); flex:0 0 auto; }
.lb-dn{ display:block; height:100%; box-sizing:border-box; padding:4%; background:rgba(233,236,239,.6); box-shadow:0 1px 3px rgba(26,24,20,.14); }
.lb-dn img{ display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:filter var(--slow) var(--settle); }
.lg.is-pos .lb-dn img{ filter:invert(1); mix-blend-mode:normal; }

/* ---------- a 35 mm cassette, on its side, the leader out (filing.js canister) ----------
   Drawn in its own width: the body is a cylinder 25 by 39 mm seen from the side, the end caps a
   little wider, the spool's knob at the top; from the felt lip at its right the leader comes out,
   35 mm of undeveloped film, dense, its holes the only light through it, its end cut to the tongue. */
.cn{ position:relative; container-type:inline-size; width:100%; aspect-ratio:100 / 42; pointer-events:none; }
.cn i{ position:absolute; display:block; }
.cn-body{
  left:8cqw; top:3cqw; width:22cqw; height:36cqw; border-radius:1.2cqw;
  background:linear-gradient(90deg, #202124 0%, #45474C 18%, #6A6D73 34%, #4A4C51 56%, #2A2B2F 82%, #1A1B1E 100%);
  box-shadow:0 1.2cqw 2.6cqw rgba(10,12,18,.42), 0 .3cqw .6cqw rgba(10,12,18,.3);
}
/* the paper label around the body, printed darker at its two bands */
.cn-label{
  left:0; right:0; top:22%; height:56%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 7%, transparent 7%, transparent 93%, rgba(0,0,0,.28) 93%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 34%, rgba(255,255,255,.04) 60%, rgba(255,255,255,0) 100%),
    #8E8A82;
}
/* the light along the cylinder */
.cn-sheen{ inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.14) 32%, rgba(255,255,255,0) 44%); }
.cn-cap{ left:7cqw; width:24cqw; height:2.4cqw; border-radius:.8cqw; background:linear-gradient(90deg, #26272B, #5A5C62 40%, #2C2D31); box-shadow:0 .4cqw 1cqw rgba(10,12,18,.4); }
.cn-cap-t{ top:1.6cqw; }
.cn-cap-b{ top:38cqw; }
.cn-knob{ left:14.5cqw; top:0; width:9cqw; height:2.2cqw; border-radius:.6cqw .6cqw 0 0; background:linear-gradient(90deg, #333539, #6E7076 45%, #3A3C41); }
.cn-lip{ left:30cqw; top:5.2cqw; width:2.4cqw; height:31.6cqw; background:#111214; border-radius:0 .4cqw .4cqw 0; }
.cn-leader{
  left:32cqw; top:5.5cqw; width:60cqw; height:31cqw;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08)), #3B3C3B;
  /* the leader's tongue: the top half is cut back for the last two frames */
  clip-path:polygon(0 0, 54% 0, 60% 50%, 100% 50%, 100% 100%, 0 100%);
  box-shadow:0 .8cqw 1.6cqw rgba(10,12,18,.28);
}
/* the leader's holes, as the film's: 1.98 mm along, 2.79 mm across, 2 mm in from each edge */
.cn-perf{
  left:0; right:0; height:7.97%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 279' preserveAspectRatio='none'%3E%3Crect x='138.5' width='198' height='279' rx='36' fill='%23FDFEFF'/%3E%3C/svg%3E");
  background-size:8.14cqw 100%; background-repeat:repeat-x;
}
.cn-perf-t{ top:5.71%; }
.cn-perf-b{ bottom:5.71%; }

/* ---------- the read words: Negative · Positive, the one set in the ink, the other quieter ---------- */
.ng-read{ display:inline-flex; align-items:baseline; gap:10px; flex:0 0 auto; }
.ng-word{
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  line-height:1; color:var(--lg-ink, #1A1814); -webkit-text-fill-color:currentColor;
}
.ng-word[aria-pressed="true"]{ cursor:default; }
.ng-dot{ color:var(--lg-ink-2, rgba(26,24,20,.64)); }
@media (pointer:coarse){ .ng-word{ min-height:44px; display:inline-flex; align-items:center; } }

/* ---------- the materials: the register lifts, the map takes its place (rooms/ledger.js) ---------- */
.lg-reg{ transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); }
.lg.is-mapping .lg-reg{ opacity:0; transform:translate3d(0, -8px, 0); transition:opacity var(--touch) var(--lift), transform var(--touch) var(--lift); }
.lg.is-map .lg-reg{ display:none; }
.lg.is-map{ padding-bottom:0; }
.lg.is-unmap .lg-reg{ opacity:0; transform:translate3d(0, 14px, 0); transition:none; }

/* ---------- the arrival, in turn: the title by letters, then its two ways of seeing, the holdings and the register as one block (is-body) (rooms/ledger.js up) ---------- */
.ldg:not(.is-body) .lg-hold, .ldg:not(.is-body) .lg-findp, .ldg:not(.is-body) .lg-reg{ opacity:0; transform:translate3d(0, 14px, 0); }
.ldg.is-now .lg-hold, .ldg.is-now .lg-findp, .ldg.is-now .lg-reg{ transition:none; }
.lg-hold, .lg-findp{ transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); }

/* ---------- a roll's entry, its light at the head of it ---------- */
.ac{ max-width:1040px; }
.ac .lg-light{ margin:28px 0 8px; }
.ac .lb, .ac .lb-cap{ width:min(100%, calc((100svh - var(--nav-h) - 220px) * var(--lb-ar, 1.1))); }
.lb-cap{ box-sizing:border-box; }

/* ---------- a narrower window: the same list, the held negative a little nearer ---------- */
@media (min-width:760px) and (max-width:1099px) and (orientation:landscape){
  .lg{ --lg-held:clamp(240px, 34vw, 380px); --lg-reach:3vw; padding-bottom:clamp(72px, 12vh, 120px); }
  .rg{ padding-left:0; }
  .rg-a{ --rg-nw:3.6em; }
}
/* a short window held sideways: the head is closer, so the list starts inside the first screen */
@media (min-width:760px) and (max-height:700px){
  .lg-hold{ margin-top:10px; }
  .lg-reg{ margin-top:18px; }
}

/* ---------- phone, and an iPad held upright: one column; the held negative at the head of the screen, the lines
   passing under it (filing.js TOPHELD is the same question) ---------- */
@media (max-width:759px), (orientation:portrait) and (max-width:1099px){
  .lg{ --lg-held:min(58vw, 300px, 30vh);
    padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:clamp(72px, 12vh, 120px); }
  .lg-body{ display:flex; flex-direction:column; align-items:stretch; }
  .lg-held{ order:-1; }
  /* it is held under the letterhead on the page's own paper, so the lines go under it as under a sheet laid on them */
  .lg-held{
    position:sticky; top:0; z-index:3;
    width:auto; margin:0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left)));
    padding:calc(var(--nav-h) + 6px) 0 14px;
    background:var(--paper, #FFFFFF);
    display:flex; justify-content:center;
  }
  .lg-held-in{ width:var(--lg-held); }
  .rg{ padding:6px 0 0; }
  .rg-a{ --rg-nw:3.2em; column-gap:14px; padding:12px 0; }
  .ac{ padding:16px 0 34px 0; }
  .ac .lg-light{ margin:22px 0 4px; }
  .ac .lg-light .lb-cap{ margin-top:12px; }
  .lb, .lb-cap, .ac .lb, .ac .lb-cap{ width:100%; }
  .lb{ border-radius:2px; }
  .lb-cap{ flex-wrap:wrap; gap:4px 16px; }
  .ac-no.num-display{ font-size:clamp(76px, 22vw, 96px); }
  .ac-trio{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); row-gap:16px; margin-top:22px; }
  .ac-fs{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px 20px; }
}
@media (pointer:coarse){
  .rf-v, .rf-f, .lg-findw{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (prefers-reduced-motion:reduce){
  .rg-a, .ac-w, .ac-row.is-open .ac-w, .lb-lit, .lb-sheet, .fs-c, .fs-im, .lg-hn, .lg-hn-im,
  .lg-reg, .lg-hold, .lg-findp, .lb-dn img{ transition:none !important; }
  .lg-hn{ filter:none; }
}

/* ============================================================
   28 OCTOBER (P: "list mode needs help in ledger"). The list keeps its lines and its reading line; what changes:
   THE HELD NEGATIVE is the frame alone, upright, the size of a print on the wall (no length of film, no holes, no
   edge print round it), and the lamp of One by one passes down it each time it is lit as another holding.
   THE LINE HELD: its number grows by half and its words lean into italic, so the eye finds where it is in the
   register at a glance while the page runs (in the full ink, no shadow under it: P, 23 October).
   ============================================================ */
.lg{ --lg-held:min(36vw, 640px, 68vh); --lg-reach:2vw; }
.lg-held{ top:max(calc(var(--nav-h) + 16px), calc(50vh - var(--lg-held) / 2)); }
.lg-held-in{ aspect-ratio:1 / 1; }
.lg-hn.is-frame{ display:flex; align-items:center; justify-content:center; background:none; box-shadow:none; }
.lg-hn.is-frame .lg-hn-win{
  position:relative; inset:auto; display:block; width:100%; height:auto; aspect-ratio:var(--ar, 1.5); max-height:100%;
  background:#F1F0EE;
}
.lg-hn.is-frame.is-up .lg-hn-win{ width:auto; height:100%; max-width:100%; }
.lg-hn.is-frame .lg-hn-win, .lg-hn.is-digital .lg-hn-win, .lg-hn.is-print .lg-hn-win{
  box-shadow:0 1px 1px rgba(26,24,20,.06), 0 18px 40px -18px rgba(26,24,20,.42), 0 50px 90px -40px rgba(26,24,20,.28);
}
/* the lamp: a band of white light down the picture as it comes, the one gesture of One by one (ledger-reel.css) */
.lg-hn-win::after{
  content:""; position:absolute; left:-2%; right:-2%; top:0; height:46%; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(232,240,255,.28) 62%, rgba(255,255,255,.9) 96%, rgba(255,255,255,0));
  mix-blend-mode:screen; transform:translate3d(0, -100%, 0);
}
.lg-hn.is-on:not(.is-now) .lg-hn-win::after{ animation:lg-lamp .7s cubic-bezier(.55,.06,.3,1) both; }
@keyframes lg-lamp{
  0%{ transform:translate3d(0, -100%, 0); opacity:1; }
  80%{ opacity:1; }
  100%{ transform:translate3d(0, 230%, 0); opacity:0; }
}
/* the line held: its number grows, its words lean */
.rg-no{ display:inline-block; transform-origin:0 78%; transition:transform .5s var(--settle), -webkit-text-stroke-width var(--touch) var(--settle); }
.rg-l.is-held .rg-no{ transform:scale(1.42); -webkit-text-stroke-width:0; }
.rg-l.is-held .rg-w{ font-style:italic; }

@media (min-width:760px) and (max-width:1099px) and (orientation:landscape){
  .lg{ --lg-held:min(38vw, 420px, 66vh); }
  .rg-a{ --rg-nw:4.3em; }
}
@media (max-width:759px), (orientation:portrait) and (max-width:1099px){
  .lg{ --lg-held:min(74vw, 420px, 36vh); }
  .lg-held{ top:0; }
  .rg-a{ --rg-nw:3.6em; }
  .rg-l.is-held .rg-no{ transform:scale(1.3); }
}
@media (prefers-reduced-motion:reduce){
  .lg-hn-win::after{ display:none; }
  .rg-no{ transition:none; }
}