/* ============================================================
   THE LEDGER'S STAGE (rooms/ledger-stage.js)
   The light table in the dark, after the register. The room's lights go down as the stage comes up
   (.ls-dim, one layer over the whole room, its opacity the scroll's) and come up again as it goes:
   no edge is ever drawn between the white page and the dark. The table is drawn by CP.gl: no case
   round it, only the opal's light and the light it lets fall on the desk, square to the eye (nothing
   tilted), and large: it is the room, not the other half of it. The words stand in
   the dark at its left (under it on a phone), never on the light, a nearer plane: each comes in from
   the left and drifts a little against the table while it is held.
   The words are the ledger's: its number as a display numeral in the catalogue face, the name in
   the display serif, the film and the count in the catalogue's text figures, the way in as a label.
   Light ink on the dark, the same ink at a lower strength for what is quieter: never a grey of its own.
   Nothing is laid under the letterhead: the room is dark under it as everywhere else, and the
   letterhead reads light ink (data-nav-ink, set by the stage while the room is dark).
   ============================================================ */
.ls{
  --ls-room:#0C0C0D;
  --ls-ink:#F3F1EC;
  --ls-ink-2:rgba(243,241,236,.72);
  --ls-ink-3:rgba(243,241,236,.56);
  position:relative; z-index:2; margin:0; color:var(--ls-ink);
  /* the stage is the room, edge to edge: the Members column it is laid in is narrower than the screen, and in it
     the words stood on the light (20 October). Its own measures (--ls-w, the words' width) are the screen's */
  width:100vw; margin-left:calc(50% - 50vw);
}
.ls[hidden]{ display:none !important; }
/* the room's lights: one layer over everything the room holds, under the stage's own things and the letterhead */
.ls-dim{
  position:fixed; inset:0; z-index:0; display:block; pointer-events:none;
  background:var(--ls-room); opacity:0;
}
.ls-track{ position:relative; z-index:1; }
/* the page ends where the room's last act ends: the whole ledger lying on the light, in the dark. Nothing
   follows the stage in the room, so no stretch of page is kept after it to bring the lights up on: that
   stretch was the room's last screen, and it was plain white */
.ls-release{ display:none; }
.ls-stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.ls-gl{ position:absolute; inset:0; }
.ls-gl canvas{ display:block; }

/* ---------- where the table lies: the page keeps its place, the GL camera fills it (ledger-stage.js fit) ----------
   On a desk, most of the stage, square to the eye, as large as the screen's height allows and leaving the
   words their narrow dark at the left; its proportion is the table's own (1.72 by 1.32). */
.ls{ --ls-w:min(66vw, calc((100svh - 64px) * 1.303), 1640px); }
.ls-place{
  position:absolute; visibility:hidden; pointer-events:none;
  right:max(var(--gutter), env(safe-area-inset-right));
  top:50%;
  width:var(--ls-w);
  aspect-ratio:1.303;
  transform:translateY(-50%);
}

/* ---------- the words, in the dark beside the light ---------- */
.ls-words{
  position:absolute; z-index:2;
  left:max(var(--gutter), env(safe-area-inset-left));
  top:var(--nav-h); bottom:0;
  width:calc(100vw - var(--ls-w) - max(var(--gutter), env(safe-area-inset-right)) - max(var(--gutter), env(safe-area-inset-left)) - clamp(28px, 3.4vw, 64px));
  max-width:520px;
  display:grid; align-items:center; pointer-events:none;
  transform:translate3d(0, calc(var(--ls-drift, 0) * 1px), 0);
}
.ls-beat{ grid-area:1 / 1; min-width:0; pointer-events:none; }
.ls-beat.is-here{ pointer-events:auto; }
.ls-beat > *{ margin:0; }
/* the kicker: what the thing is, in the catalogue's small capitals */
.ls-kick{
  line-height:1.3; color:var(--ls-ink-3);
}
/* the ledger's number, as an object: lining figures cut firm, set tight, in the light ink */
.ls-no{
  margin-top:clamp(10px, 1.6vh, 18px);
  font-size:clamp(112px, 12.2vw, 212px); line-height:.8; letter-spacing:-.03em;
  color:var(--ls-ink); -webkit-text-fill-color:var(--ls-ink);
}
.ls-name{
  margin-top:clamp(18px, 3vh, 30px);
  line-height:1.08; color:var(--ls-ink); -webkit-text-fill-color:var(--ls-ink);
  overflow-wrap:break-word; padding-bottom:.06em;
}
.ls-beat.is-intro .ls-name{ line-height:1; margin-top:clamp(14px, 2vh, 22px); }
.ls-film, .ls-n{
  line-height:1.45;
  color:var(--ls-ink-2); max-width:26em;
}
.ls-film{ margin-top:14px; }
.ls-n{ margin-top:2px; }
.ls-go{ margin-top:clamp(14px, 2.4vh, 26px); display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 30px; }
.ls-way{ color:var(--ls-ink); -webkit-text-fill-color:var(--ls-ink); }
.ls-way:focus-visible{ outline:none; }

/* set and let go: the number first (it is the object), then the name by its letters, then the lines
   in turn a hush apart; a beat let go leaves all at once and a little upward */
.ls-beat .ls-kick, .ls-beat .ls-no, .ls-beat .ls-film, .ls-beat .ls-n, .ls-beat .ls-go{
  opacity:0; transform:translate3d(-28px, 0, 0);
  transition:opacity var(--touch) var(--lift), transform var(--touch) var(--lift);
}
.ls-beat.is-here .ls-kick, .ls-beat.is-here .ls-no, .ls-beat.is-here .ls-film, .ls-beat.is-here .ls-n, .ls-beat.is-here .ls-go{
  opacity:1; transform:none;
  transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle);
}
.ls-beat.is-here .ls-kick{ transition-delay:0s; }
.ls-beat.is-here .ls-no{ transition-delay:.06s; }
.ls-beat.is-here .ls-film{ transition-delay:calc(.14s + var(--hush)); }
.ls-beat.is-here .ls-n{ transition-delay:calc(.2s + var(--hush)); }
.ls-beat.is-here .ls-go{ transition-delay:calc(.28s + var(--hush)); }
.ls-beat:not(.is-here) .ls-name{ opacity:0; transition:opacity var(--touch) var(--lift); }
.ls-beat.is-here .ls-name{ opacity:1; }
/* the holding under the hand is written in place: its words change where they stand */
.ls-beat.is-pick .ls-name{ opacity:0; transform:translate3d(0, 14px, 0); transition:opacity var(--touch) var(--lift), transform var(--touch) var(--lift); }
.ls-beat.is-pick.is-here .ls-name{ opacity:1; transform:none; transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); transition-delay:.1s; }
.ls-beat.is-pick.is-here.is-new > *{ animation:ls-anew var(--slow) var(--settle) both; }
.ls-beat.is-pick.is-here.is-new > :nth-child(2){ animation-delay:.03s; }
.ls-beat.is-pick.is-here.is-new > :nth-child(3){ animation-delay:.07s; }
.ls-beat.is-pick.is-here.is-new > :nth-child(n+4){ animation-delay:.11s; }
@keyframes ls-anew{ from{ opacity:0; transform:translate3d(0, 8px, 0); } to{ opacity:1; transform:none; } }

/* ---------- the hand on the light: an anchor over each holding, live once every one lies there ---------- */
.ls-pick{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ls-pick.is-live{ pointer-events:auto; }
.ls-pick:not(.is-live) .ls-a{ visibility:hidden; }
.ls-a{ position:absolute; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ls-a:focus-visible{ outline:none; }

/* ---------- phone: the table at the head of the stage, the words under it ---------- */
@media (max-width:759px){
  .ls-place{
    left:max(16px, env(safe-area-inset-left)); right:max(16px, env(safe-area-inset-right)); width:auto;
    top:calc(var(--nav-h) + 6px); transform:none;
  }
  .ls-words{
    left:max(16px, env(safe-area-inset-left)); right:max(16px, env(safe-area-inset-right)); width:auto; max-width:none;
    top:calc(var(--nav-h) + 6px + (100vw - 32px) / 1.303 + 34px); bottom:auto;
    align-items:start;
  }
  .ls-no{ font-size:clamp(76px, 22vw, 104px); margin-top:8px; }
  .ls-name{ margin-top:14px; }
  .ls-film{ margin-top:10px; }
  .ls-go{ margin-top:10px; }
}
/* an iPad held upright: as on a phone, the table across the screen's width at its head, the words under it */
@media (min-width:760px) and (orientation:portrait){
  .ls-place{
    left:max(var(--gutter), env(safe-area-inset-left)); right:max(var(--gutter), env(safe-area-inset-right)); width:auto;
    top:calc(var(--nav-h) + 4svh); transform:none;
  }
  .ls-words{
    left:max(var(--gutter), env(safe-area-inset-left)); right:max(var(--gutter), env(safe-area-inset-right)); width:auto; max-width:34em;
    top:calc(var(--nav-h) + 4svh + (100vw - 2 * var(--gutter)) / 1.303 + 44px); bottom:auto;
    align-items:start;
  }
}
/* a short screen held sideways: the number steps down so the words keep their place beside the light */
@media (min-width:760px) and (max-height:620px){
  .ls-no{ font-size:clamp(72px, 9vw, 120px); }
  .ls-name{ margin-top:12px; }
}

/* ---------- reduced motion: nothing held, nothing darkens the page ----------
   One dark section with soft edges, the whole ledger lying positive on the light, its words set. */
.ls.is-still{ background:linear-gradient(180deg, rgba(12,12,13,0) 0, var(--ls-room) 22svh, var(--ls-room) calc(100% - 22svh), rgba(12,12,13,0) 100%); padding:22svh 0; }
.ls.is-still .ls-dim, .ls.is-still .ls-release{ display:none; }
.ls.is-still .ls-stage{ position:relative; height:max(100svh, 640px); }
.ls.is-still .ls-beat *, .ls.is-still .ls-beat{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce){
  .ls-beat *, .ls-beat{ transition:none !important; animation:none !important; }
}

/* ============================================================
   THE LIGHT TABLE, THE LEDGER'S SECOND VIEW (ledger-stage.js CP.ledgerTable; rooms/ledger.js List · Light table)
   One screen. The room is dark round the light (TABLE_GROUND "white" keeps the paper); the light and the film
   are drawn by CP.gl where the table's own measure puts them (--lt-px … --lt-ph). No word ever lies on the
   light: the two ways of seeing stand where they stood on the paper; every holding's number is an index at
   the left (under the light on a phone); one line stands under the light, a chosen roll's facts in its place;
   the holding under the hand is written beside the light while the hand is there. Full ink, light on the
   dark: no grey, no rule, no box.
   ============================================================ */
.lt{
  --lt-ink:#F3F1EC;
  position:fixed; inset:0; z-index:3; margin:0; overflow:hidden;
  color:var(--lt-ink); pointer-events:auto;
}
.lt.is-white{ --lt-ink:var(--mb-ink, #1A1814); }
.lt[hidden]{ display:none !important; }
.lt-gl{ position:absolute; inset:0; }
.lt-gl canvas{ display:block; }
.lt-probe{ position:absolute; left:0; top:0; display:block; width:var(--gutter, 24px); height:var(--nav-h, 56px); visibility:hidden; pointer-events:none; }
.lt-words{ position:absolute; inset:0; pointer-events:none; }
.lt-head, .lt-index, .lt-foot{ pointer-events:auto; }
.lt.is-beat .lt-words *, .lt.is-beat .lt-place{ pointer-events:none !important; }

/* ---------- the light: the hand moves the film on it ---------- */
.lt-place{
  position:absolute; left:var(--lt-px, 0); top:var(--lt-py, 0); width:var(--lt-pw, 0); height:var(--lt-ph, 0);
  outline:none; touch-action:none; cursor:default;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
}
.lt-place.is-over{ cursor:pointer; }
.lt-place.is-dragging{ cursor:grabbing; }

/* ---------- the head: the two ways of seeing, where they stood on the paper ---------- */
.lt-head{
  position:absolute; left:0; right:0; top:var(--lt-head-top, calc(var(--nav-h, 56px) + 14px));
  display:flex; justify-content:center; pointer-events:none;
}
.lt-head > *{ pointer-events:auto; }
.lt .ldg-view, .lt .ldg-views-dot{ color:var(--lt-ink); -webkit-text-fill-color:var(--lt-ink); }
/* the current word wears the gloss (ivory here, house.css), the other is plain ivory: the gloss is the current one's alone */
.lt .ldg-view[aria-pressed="false"]{ filter:none; }
/* on the dark the ivory gloss and the plain ivory read alike: the current word is also set a weight heavier, so which
   way the ledger is seen is evident at a glance (both stay in the full ink) */
.lt.is-dark .ldg-view[aria-pressed="true"]{ -webkit-text-stroke:.045em currentColor; }

/* ---------- the index: every holding's number, a column at the left edge ---------- */
.lt-index{
  position:absolute; left:var(--lt-ix-left, 24px); top:var(--lt-ix-top, 120px); width:var(--lt-ix-w, auto);
  margin:0; padding:0; list-style:none;
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--lt-ix-rows, 22), auto);
  column-gap:12px; justify-content:start; align-content:start;
}
.lt-ixl{ margin:0; padding:0; list-style:none; }
.lt-ixl::marker{ content:none; }
.lt-ix{
  display:block; margin:0; padding:2px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--num); font-size:16px; line-height:1.25; letter-spacing:.05em;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1, "tnum" 1;
  color:var(--lt-ink); -webkit-text-fill-color:var(--lt-ink);
  transition:translate var(--touch) var(--settle);
}
/* the number under the hand, or of the roll in the middle: it steps a little toward the light, in the gloss */
.lt-ix.is-over, .lt-ix[aria-current="true"]{ translate:5px 0; filter:url(#cp-vinyl-w-xs); }
.lt-ix:focus-visible{ outline:none; translate:5px 0; -webkit-text-stroke:.03em currentColor; }
@media (hover:hover){ .lt-ix:hover{ translate:5px 0; filter:url(#cp-vinyl-w-xs); } }
/* on the paper's white (TABLE_GROUND "white") the gloss is the black vinyl */
.lt.is-white :is(.lt-ix.is-over, .lt-ix[aria-current="true"]){ filter:url(#cp-vinyl-xs); }
@media (hover:hover){ .lt.is-white .lt-ix:hover{ filter:url(#cp-vinyl-xs); } }
/* a phone, an iPad held upright: the numbers wrap in rows under the light */
.lt.is-narrow .lt-index{
  grid-auto-flow:row; grid-template-rows:none; grid-template-columns:repeat(var(--lt-ix-cols, 9), minmax(0, 1fr));
  column-gap:8px; justify-content:stretch;
}
.lt.is-narrow .lt-ix{ padding:3px 0; text-align:center; width:100%; }
.lt.is-narrow .lt-ix.is-over, .lt.is-narrow .lt-ix[aria-current="true"], .lt.is-narrow .lt-ix:focus-visible{ translate:0 -3px; }
@media (pointer:coarse){ .lt-ix{ min-height:28px; } }

/* ---------- the foot: one line under the light, or a chosen roll's facts ---------- */
.lt-foot{ position:absolute; left:var(--lt-foot-left, 24px); top:var(--lt-foot-top, 80vh); width:var(--lt-foot-w, auto); min-height:44px; }
.lt-sum{
  margin:0; text-align:center; line-height:1.35; color:var(--lt-ink);
  transition:opacity var(--touch) var(--settle), visibility 0s linear 0s;
}
.lt.is-roll .lt-sum{ opacity:0; visibility:hidden; transition:opacity var(--touch) var(--lift), visibility 0s linear var(--touch); }
.lt-facts{
  position:absolute; left:0; top:0; margin:0;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px clamp(20px, 2.6vw, 44px);
  opacity:0; visibility:hidden;
  transition:opacity var(--touch) var(--lift), visibility 0s linear var(--touch), filter .075s linear;
}
.lt.is-roll .lt-facts{ opacity:1; visibility:visible; transition:opacity var(--slow) var(--settle) .12s, visibility 0s linear 0s, filter .075s linear; }
/* the facts change through a blur (0.15 s: out, then in) */
.lt-facts.is-changing{ filter:blur(5px); }
.lt-f{ margin:0; min-width:0; }
.lt-fl{ display:block; margin:0; color:var(--lt-ink); }
.lt-fv{
  display:block; margin:3px 0 0; line-height:1.15;
  font-family:var(--serif); font-size:var(--t-lead); color:var(--lt-ink);
}
.lt-f:is(.is-roll, .is-frames, .is-date) .lt-fv{ font-family:var(--num); font-variant-numeric:lining-nums tabular-nums; letter-spacing:.03em; }
.lt.is-narrow .lt-sum{ text-align:left; }

/* ---------- the holding under the hand: its number and one line, centred just over its strip, on the lit glass ----------
   (v08 t2: the name just above the thing, only while the hand is there). It stands on the opal, so it is in the dark
   ink whatever the room round the light; it is placed by ledger-stage.js (placeLabel), inside the light's edge */
.lt-label{
  position:absolute; left:0; top:0; margin:0; pointer-events:none; white-space:nowrap;
  translate:var(--lt-label-x, -999px) var(--lt-label-y, -999px);
  display:flex; align-items:baseline; gap:.5em;
  color:#1A1814; -webkit-text-fill-color:currentColor;
  opacity:0; transition:opacity var(--touch) var(--lift);
}
.lt-label.is-on{ opacity:1; transition:opacity .18s var(--settle); }
/* on the lit glass: the dark ink, with no gloss (house.css gives the light ink's gloss to words on the dark) */
.lt .lt-words .lt-label, .lt .lt-words .lt-label :is(.lt-label-no, .lt-label-w){ filter:none; text-shadow:none; color:#1A1814; -webkit-text-fill-color:#1A1814; }
/* the strip over it is soft and out of reach; where the words lie on it, the opal's own light shines round each
   letter (white on the white light: no grey, no second copy), so the words read as set on the light, not on film */
.lt .lt-words .lt-label :is(.lt-label-no, .lt-label-w){ text-shadow:0 0 .12em #FFFFFF, 0 0 .35em #FFFFFF, 0 0 .7em #FFFFFF, 0 0 1.1em rgba(255,255,255,.9); }
.lt-label-no{ font-family:var(--num); font-size:var(--t-lead); line-height:1.2; letter-spacing:.03em; font-variant-numeric:lining-nums tabular-nums; }
.lt-label-w{ line-height:1.2; }

/* ---------- the held negative, carried from the paper onto the light (a copy of the register's own) ---------- */
.lt-pieces{ position:absolute; inset:0; pointer-events:none; }
.lt-piece{ position:absolute; transform-origin:0 0; will-change:transform, opacity; }
.lt-piece, .lt-piece *{ transition:none !important; animation:none !important; }
.lt-piece.is-pos .lg-hn-im{ filter:invert(1); }
.lt-piece.is-pos .lg-hn-im.is-inv{ filter:none; }
.lt-piece.is-pos .lg-hn.is-digital .lg-hn-im{ mix-blend-mode:normal; }
.lt-piece .lg-hn.is-print .lg-hn-im{ filter:none; }

/* a frame's place on the light, for its file to lift from and fold home to (rooms/file.js) */
.lt-ats{ position:absolute; inset:0; pointer-events:none; }
.lt-at{ position:fixed; display:block; pointer-events:none; visibility:hidden; }

/* ---------- the one nav over the table: ivory in full ink, the room it is in told by its gloss ----------
   On the dark room the letterhead's black vinyl (type.css .t-label) drew its light words as grey on black. While the
   table is up on its dark (html.lt-dark, never the stage's end plate) the four words and the P are ivory at full ink; the room's
   word keeps the gloss, in ivory. Written at the letterhead's own weight, so a dark-ground rule of the letterhead's
   (type.css, body[data-tone="dark"]) still has the last word. */
html.lt-dark #nav:not(.is-hidden){ --nav-rest:1; opacity:1; }
html.lt-dark #nav .nav-mark{ color:#F3F1EC; -webkit-text-fill-color:currentColor; filter:url(#cp-vinyl-w-s); }
html.lt-dark #nav .nav-links a{ color:inherit; -webkit-text-fill-color:currentColor; opacity:1; filter:url(#cp-vinyl-w-xs); }
html.lt-dark #nav .nav-links a:not(.is-here){ filter:none; }

/* the house's vignette for a dark room (push.css #push-dark) would lie over the index and the line under the light,
   and sink their ink at the screen's edges: the table's dark is its own (the room drawn round the opal), so it is off */
html.lt-dark body #push-dark{ opacity:0; transition:none; }

/* ---------- while the table or the stage's dark is up, the corner key steps aside (as vault.css .kc-aside) ---------- */
html:is(.ls-dark, .lt-up) :is(.mbr-ring.is-pinned, .mbr-corner-v .kc){
  translate:calc(100% + 28px) 0; opacity:0; pointer-events:none;
  transition:translate var(--slow) var(--lift), opacity var(--touch) var(--lift), filter var(--slow) var(--settle);
}

/* ---------- reduced motion: each view is simply there ---------- */
.lt.is-still :is(.lt-sum, .lt-facts, .lt-label, .lt-ix){ transition:none !important; }
@media (prefers-reduced-motion:reduce){
  .lt :is(.lt-sum, .lt-facts, .lt-label, .lt-ix){ transition:none !important; }
  html:is(.ls-dark, .lt-up) :is(.mbr-ring.is-pinned, .mbr-corner-v .kc){ transition:none; }
}