/* ============================================================
   THE LEDGER, ONE BY ONE (rooms/ledger-reel.js)
   One holding a screen on white: the plate as large as the screen allows,
   its number in glossy black over its corner, one line of words beside it.
   The lamp: the positive uncovered from the top down, a filament of light at
   its edge and its glow trailing behind, over the negative underneath.
   No rule, no box, no icon: every action is a word.
   ============================================================ */
.lr{
  position:fixed; inset:0; z-index:3; margin:0; overflow:hidden;
  background:var(--paper, #FFFFFF); color:var(--ink, #1A1814);
  opacity:0; transition:opacity .42s var(--settle);
  -webkit-user-select:none; user-select:none; touch-action:none; outline:none;
}
.lr[hidden]{ display:none !important; }
.lr.is-on{ opacity:1; }

.lr-head{
  position:absolute; left:0; right:0; top:calc(var(--nav-h) + 4px); z-index:4;
  display:flex; justify-content:center; pointer-events:none;
}
.lr-head > *{ pointer-events:auto; }

.lr-stage{ position:absolute; inset:0; }
.lr-slide{
  position:absolute; inset:0;
  transition:transform .78s var(--settle), opacity .6s var(--settle);
  will-change:transform, opacity;
}
.lr-slide.is-from-down{ transform:translate3d(0, 14vh, 0) scale(.985); opacity:0; transition:none; }
.lr-slide.is-from-up{ transform:translate3d(0, -14vh, 0) scale(.985); opacity:0; transition:none; }
.lr-slide.is-out-up{ transform:translate3d(0, -12vh, 0) scale(.97); opacity:0; transition:transform .6s var(--breath), opacity .34s var(--lift); pointer-events:none; }
.lr-slide.is-out-down{ transform:translate3d(0, 12vh, 0) scale(.97); opacity:0; transition:transform .6s var(--breath), opacity .34s var(--lift); pointer-events:none; }

/* ---------- the plate ---------- */
.lr-hold{
  position:absolute; left:47%; top:51%; transform:translate(-50%, -50%);
  display:grid; place-items:center;
}
.lr-hold > .lr-plate{ grid-area:1 / 1; }
.lr-plate{
  position:relative; display:block; padding:0; margin:0; border:0; background:#111;
  overflow:hidden; cursor:pointer; border-radius:1px;
  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);
  transition:transform .5s var(--settle), opacity .42s var(--settle), box-shadow .5s var(--settle);
  -webkit-tap-highlight-color:transparent;
}
.lr-plate:focus-visible{ outline:1px solid currentColor; outline-offset:6px; }
.lr-plate.is-from-right{ transform:translate3d(9vw,0,0); opacity:0; transition:none; }
.lr-plate.is-from-left{ transform:translate3d(-9vw,0,0); opacity:0; transition:none; }
.lr-plate.is-off-left{ transform:translate3d(-9vw,0,0); opacity:0; pointer-events:none; }
.lr-plate.is-off-right{ transform:translate3d(9vw,0,0); opacity:0; pointer-events:none; }
.lr-im{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
  -webkit-user-drag:none; pointer-events:none;
}
.lr-im.is-inv{ filter:invert(1); }
/* the negative waits a little dim and soft, as film on a dark table does */
.lr-neg{ transform:scale(1.04); transition:transform 2.2s var(--settle), filter .5s var(--settle); }
.lr-neg:not(.is-inv){ filter:brightness(.92) contrast(1.05); }
.lr-neg.is-inv{ filter:invert(1) brightness(.92) contrast(1.05); }
.lr-read{
  position:absolute; inset:0; display:block; overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.55s cubic-bezier(.55,.06,.3,1), opacity .28s var(--settle);
}
.lr-pos{ transform:scale(1.04); transition:transform 2.4s var(--settle); }
.lr-beam{
  position:absolute; left:-4%; right:-4%; top:-100%; height:100%; z-index:2; pointer-events:none;
  transform:translate3d(0, 0, 0); opacity:0;
  transition:transform 1.55s cubic-bezier(.55,.06,.3,1), opacity .5s var(--settle) 1.3s;
}
/* the filament, white hot, with its bloom; and, behind it, the glow the lamp leaves on what it has read */
.lr-beam::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:#FFFFFF;
  box-shadow:0 0 6px 2px rgba(255,255,255,.95), 0 0 24px 8px rgba(214,232,255,.7), 0 0 60px 18px rgba(190,214,255,.35);
}
.lr-beam::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%; min-height:60px;
  transform:translateY(0);
  background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,.18) 40%, rgba(255,255,255,0));
  mix-blend-mode:screen;
}
.lr-plate.is-read .lr-read{ clip-path:inset(0 0 0 0); }
.lr-plate.is-read .lr-pos, .lr-plate.is-read .lr-neg{ transform:scale(1); }
.lr-plate.is-read .lr-beam{ transform:translate3d(0, 100%, 0); opacity:0; }
.lr-plate:not(.is-read) .lr-beam{ opacity:1; transition:none; }
.lr-plate.is-quick .lr-read, .lr-plate.is-quick .lr-beam{ transition-duration:.72s; }
.lr-plate.is-quick .lr-beam{ transition:transform .72s cubic-bezier(.55,.06,.3,1), opacity .3s var(--settle) .55s; }
/* held: the negative it was read from */
.lr-plate.is-neg .lr-read{ opacity:0; transition:opacity .22s var(--settle); }

.lr-plate.is-blank{ background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(26,24,20,.1), 0 30px 60px -40px rgba(26,24,20,.25); cursor:default; display:grid; place-items:center; }
.lr-await{ margin:0; font-family:var(--display); font-style:italic; font-size:clamp(22px, 2.4vw, 34px); color:rgba(26,24,20,.55); }

/* ---------- the number, glossy, over the plate's corner ---------- */
.lr-no{
  position:absolute; left:var(--gutter); bottom:clamp(18px, 5vh, 56px); z-index:3; margin:0;
  font-family:var(--display); font-weight:400; line-height:.8; letter-spacing:-.035em;
  font-size:clamp(120px, 19vw, 330px); color:var(--ink, #1A1814);
  font-variant-numeric:lining-nums; filter:url(#cp-vinyl); pointer-events:none;
  transition:transform .9s var(--settle) .06s;
}
.lr-nº{ font-size:.22em; letter-spacing:0; vertical-align:top; position:relative; top:.5em; margin-right:.06em; }
.lr-slide.is-from-down .lr-no{ transform:translate3d(0, 8vh, 0); }
.lr-slide.is-from-up .lr-no{ transform:translate3d(0, -8vh, 0); }

/* ---------- its words: the film, one line of facts, the frames, Open ---------- */
.lr-words{
  position:absolute; right:var(--gutter); bottom:clamp(26px, 6vh, 64px); z-index:3;
  width:min(22rem, 21vw); text-align:right;
  transition:transform .9s var(--settle) .1s, opacity .6s var(--settle) .1s;
}
.lr-slide.is-from-down .lr-words{ transform:translate3d(0, 6vh, 0); }
.lr-slide.is-from-up .lr-words{ transform:translate3d(0, -6vh, 0); }
.lr-name{
  margin:0; font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(26px, 2.6vw, 42px); line-height:1.02; letter-spacing:-.01em; filter:url(#cp-vinyl-s);
}
.lr-facts{ margin:.7em 0 0; font-family:var(--serif); font-size:clamp(13px, 1.05vw, 16px); line-height:1.5; color:rgba(26,24,20,.72); }
.lr-frames{ margin:1.1em 0 0; display:flex; justify-content:flex-end; align-items:baseline; gap:.9em; font-family:var(--serif); font-size:clamp(13px, 1.05vw, 15px); }
.lr-fno{ color:rgba(26,24,20,.6); font-variant-numeric:lining-nums tabular-nums; }
.lr-step, .lr-open{
  padding:6px 0; margin:0; border:0; background:none; color:inherit; cursor:pointer;
  font-family:var(--display); font-style:italic; font-size:clamp(17px, 1.3vw, 21px); letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
}
.lr-step:disabled{ opacity:.25; cursor:default; }
.lr-open{ display:block; margin:.5em 0 0 auto; font-size:clamp(22px, 1.8vw, 30px); filter:url(#cp-vinyl-s); }

.lr-count{
  position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 12px); z-index:4; margin:0;
  font-family:var(--serif); font-size:14px; color:rgba(26,24,20,.6); font-variant-numeric:lining-nums tabular-nums;
}
.lr-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:4; margin:0;
  font-family:var(--display); font-style:italic; font-size:15px; color:rgba(26,24,20,.5);
  transition:opacity .6s var(--settle);
  animation:lr-hint 2.4s var(--breath) 1.2s infinite;
}
.lr-hint.is-gone{ opacity:0; animation:none; }
@keyframes lr-hint{ 0%, 100%{ translate:0 0; } 50%{ translate:0 5px; } }

/* the list's own page stays still while the reel is up */
html.has-reel .ldg, html.has-reel .ls-stage{ visibility:hidden; }

/* ---------- a phone: one column, the plate, its number cut into its foot, the words under it ---------- */
@media (max-width:759px), (orientation:portrait) and (max-width:1099px){
  .lr-slide{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:calc(var(--nav-h) + 52px) var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .lr-hold{ position:relative; left:auto; top:auto; transform:none; }
  .lr-no{ position:relative; left:auto; bottom:auto; align-self:flex-start; margin:-.34em 0 0 -.02em; font-size:clamp(104px, 34vw, 170px); }
  .lr-words{ position:relative; right:auto; bottom:auto; align-self:stretch; width:auto; margin-top:10px; text-align:left; }
  .lr-name{ font-size:24px; }
  .lr-frames{ justify-content:flex-start; gap:.7em; }
  .lr-open{ position:absolute; right:0; top:0; margin:0; }
  .lr-count, .lr-hint{ display:none; }
}
@media (orientation:portrait) and (min-width:760px) and (max-width:1099px){ .lr-name{ font-size:34px; } .lr-facts, .lr-frames{ font-size:16px; } }
/* a short window: the number steps down a size so the plate keeps its place */
@media (min-width:760px) and (orientation:landscape), (min-width:1100px){ .lr-hold{ top:53%; } }
@media (min-width:760px) and (max-height:700px){ .lr-no{ font-size:clamp(100px, 14vw, 200px); } }

@media (prefers-reduced-motion:reduce){
  .lr, .lr-slide, .lr-plate, .lr-read, .lr-beam, .lr-neg, .lr-pos, .lr-no, .lr-words{ transition:none !important; }
  .lr-beam{ display:none; }
  .lr-hint{ animation:none; }
}

/* ============================================================
   28 OCTOBER: THE RAIL, AND THE FRAMES BY ARROWS
   Every holding is one mark on a rail at the right edge (along the head on a phone): the one seen is long and
   carries its number, the hand over another shows that one's. Pressed, a mark is that holding; drawn along, the
   rail runs through them. The frames of a roll: an arrow either side of "02 / 06".
   ============================================================ */
.lr-rail{
  position:absolute; z-index:4; right:calc(var(--gutter) - 8px); top:calc(var(--nav-h) + 56px);
  height:min(44vh, 460px, calc(100vh - var(--nav-h) - 320px)); width:84px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  touch-action:none; cursor:pointer;
}
.lr-mark{
  position:relative; flex:1 1 0; min-height:0; margin:0; padding:0 8px 0 0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:flex-end; color:var(--ink, #1A1814);
  -webkit-tap-highlight-color:transparent;
}
.lr-tick{
  display:block; width:10px; height:1.5px; background:currentColor; opacity:.26;
  transition:width .38s var(--settle), opacity .38s var(--settle);
}
.lr-mno{
  position:absolute; right:52px; top:50%; transform:translate(4px, -50%);
  font-family:var(--display); font-style:italic; font-size:16px; line-height:1; white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums; opacity:0; pointer-events:none;
  transition:opacity .3s var(--settle), transform .3s var(--settle);
}
.lr-mark.is-here .lr-tick{ width:38px; opacity:1; }
.lr-mark.is-here .lr-mno{ opacity:1; transform:translate(0, -50%); }
@media (hover:hover){
  .lr-mark:hover .lr-tick{ width:22px; opacity:.75; }
  .lr-mark.is-here:hover .lr-tick{ width:38px; opacity:1; }
  .lr-rail:hover .lr-mark.is-here:not(:hover) .lr-mno{ opacity:.3; }
  .lr-mark:hover .lr-mno{ opacity:1; transform:translate(0, -50%); }
}
.lr-mark:focus-visible{ outline:none; }
.lr-mark:focus-visible .lr-tick{ width:30px; opacity:1; }
.lr-mark:focus-visible .lr-mno{ opacity:1; transform:translate(0, -50%); }

/* the frames: an arrow either side of the count */
.lr-frames{ gap:.2em; align-items:center; }
.lr-step{ position:relative; width:40px; height:34px; padding:0; font-size:0; }
.lr-step::before{
  content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M8 17h24M24 10l8 7-8 7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 30px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M8 17h24M24 10l8 7-8 7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 30px no-repeat;
  transition:transform .3s var(--settle);
}
.lr-step.is-before::before{ transform:scaleX(-1); }
@media (hover:hover){
  .lr-step.is-after:not(:disabled):hover::before{ transform:translateX(4px); }
  .lr-step.is-before:not(:disabled):hover::before{ transform:scaleX(-1) translateX(4px); }
}
.lr-step:disabled{ opacity:.2; }
.lr-fno{ font-family:var(--display); font-style:italic; font-size:clamp(17px, 1.3vw, 21px); color:var(--ink, #1A1814); min-width:4.2em; text-align:center; }

@media (max-width:759px), (orientation:portrait) and (max-width:1099px){
  .lr-slide{ padding-top:calc(var(--nav-h) + 92px); }
  .lr-rail{
    left:var(--gutter); right:var(--gutter); top:calc(var(--nav-h) + 50px); width:auto; height:30px;
    flex-direction:row;
  }
  .lr-mark{ padding:0; align-items:center; justify-content:center; }
  .lr-tick{ width:1.5px; height:8px; transition:height .38s var(--settle), opacity .38s var(--settle); }
  .lr-mark.is-here .lr-tick{ width:1.5px; height:22px; }
  .lr-mno{ display:none; }
  .lr-frames{ margin-left:-10px; }
}
@media (prefers-reduced-motion:reduce){ .lr-tick, .lr-mno, .lr-step::before{ transition:none; } }