/* =====================================================================
   PROMATHIA — TRACKLIST (v8: the v6 book restored; built by js/liber.js)
   Header, TIMELINE (album strip), 13 folios (one per track), colophon.
   Desktop geometry uses the poster's design unit (1u = stage / 2720) so the
   book scales with the poster; flow mode (< 1000px) uses px. Every rule is
   the sheet hairline (--hair, set by main.js). .is-cur marks the folio that
   is playing; .lb-on is on the section once the album has started.
   ===================================================================== */

.liber {
  --u: calc(100cqw / 2720);
  --lb-hair: var(--hair);
  --lb-fs: calc(35.9 * var(--u));
  --lb-small: calc(24 * var(--u));
  --lb-dot: calc(8.38 * var(--u));
  position: relative;
  z-index: 1;
  padding: calc(150 * var(--u)) calc(68 * var(--u)) calc(260 * var(--u));
  color: var(--ink);
  font-family: var(--mono);
  font-kerning: none;
  font-variant-ligatures: none;
  -webkit-touch-callout: none;
  overflow-x: clip;   /* bleeding discs never widen the page */
}
:where(.liber) :where(p, h2, h3, ol, li) { margin: 0; padding: 0; list-style: none; font-weight: 400; }
.liber .lb-mono { text-transform: uppercase; letter-spacing: .16em; font-variant-numeric: tabular-nums; }

/* ---- crosses (same construction as the poster's .x) ---- */
.lb-x { position: absolute; display: block; pointer-events: none; }
.lb-x i { position: absolute; background: var(--line); }
.lb-x::before, .lb-x::after { content: none; }
.lb-x .xh { left: 0; right: 0; top: calc(50% - var(--t) / 2); height: var(--t); transform-origin: 50% 50%; }
.lb-x .xv { top: 0; bottom: 0; left: calc(50% - var(--t) / 2); width: var(--t); transform-origin: 50% 50%; }
.lb-x--s { width: calc(84 * var(--u)); height: calc(85 * var(--u)); --t: var(--hair); }
.lb-x--r { width: calc(30 * var(--u)); height: calc(30 * var(--u)); --t: var(--hair); } /* registration */

/* ---- halftone lavender disc ---- */
.lb-disc {
  position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: #bdbfcb;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(44, 45, 51, .06);
}
.lb-disc::before {
  content: ""; position: absolute; inset: -42%;
  background-image: radial-gradient(circle at 50% 50%, rgba(98, 100, 116, .36) 0, rgba(98, 100, 116, .36) 30%, rgba(98, 100, 116, 0) 34%);
  background-size: var(--lb-dot) var(--lb-dot);
  transform: rotate(-29.6deg);
}
.lb-disc::after { /* paper grain over the disc */
  content: ""; position: absolute; inset: 0; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .24 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- opening divider (poster divider vocabulary) ---- */
.lb-div { position: relative; height: calc(50 * var(--u)); margin: 0 calc(-4 * var(--u)) 0 calc(-4 * var(--u)); pointer-events: none; }
.lb-div i { position: absolute; background: var(--line); }
.lb-seg { top: calc(25 * var(--u) - var(--hair) / 2); height: var(--lb-hair); }
.lb-seg-l { left: 0; width: calc(181 * var(--u)); transform-origin: 0 50%; }
.lb-seg-m { left: calc(486 * var(--u)); width: calc(1308 * var(--u)); transform-origin: 50% 50%; }
.lb-seg-r { left: calc(2102 * var(--u)); width: calc(179 * var(--u)); transform-origin: 100% 50%; }
.lb-tk { top: calc(3 * var(--u)); width: var(--lb-hair); height: calc(47 * var(--u)); }
.lb-tk-l { left: calc(17.75 * var(--u)); }
.lb-tk-r { left: calc(2261.75 * var(--u)); }

/* ---- header ---- */
.lb-head { position: relative; height: calc(620 * var(--u)); margin-top: calc(60 * var(--u)); }
.lb-head .lb-disc { right: calc(13 * var(--u)); top: calc(-77 * var(--u)); width: calc(700 * var(--u)); height: calc(700 * var(--u)); }
.lb-kick { position: absolute; left: 0; top: 0; font-size: var(--lb-small); letter-spacing: .2em; opacity: .72; }
.lb-title {   /* OPTI Enge Etienne: caps 156u tall, standing 28u clear of the rule; P's stem on the margin */
  position: absolute; left: calc(-3.7 * var(--u)); top: calc(51 * var(--u));
  font-family: var(--display); font-weight: 400; font-kerning: normal; font-synthesis: none;
  font-size: calc(186 * var(--u)); line-height: 1; letter-spacing: .06em; color: var(--line);
  white-space: nowrap; text-transform: uppercase;
}
.lb-hr { position: absolute; left: 0; top: calc(250 * var(--u)); width: calc(1850 * var(--u)); height: calc(18 * var(--u)); background: var(--line); transform-origin: 0 50%; }
.lb-sub { position: absolute; left: 0; top: calc(305 * var(--u)); font-size: var(--lb-fs); line-height: calc(43 * var(--u)); letter-spacing: .2em; white-space: nowrap; }
/* v10: the rabbit (Bun-Log) is printed into the disc where the big cross stood; its ink centroid sits on the
   disc's axis, a touch above centre */
.lb-mark { position: absolute; left: 50%; top: 50%; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* optical centring: each mark's ink centroid (with a slight lift) on the disc centre, not its box */
.lb-mark--rabbit { width: auto; height: 60%; transform: translate(-53.7%, -56%); }
.lb-head .lb-x--s.l { left: calc(1960 * var(--u)); top: calc(231 * var(--u)); }
.lb-head .lb-x--s.r { left: calc(2399 * var(--u)); top: calc(231 * var(--u)); }
.lb-gl {
  position: absolute; right: calc(-4 * var(--u)); top: calc(470 * var(--u)); text-align: right;
  font-size: calc(19.5 * var(--u)); line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none;
}
.lb-gl .gr { display: block; height: calc(18.67 * var(--u)); line-height: calc(18.67 * var(--u)); }
.lb-gl i { display: inline-block; width: calc(16.8 * var(--u)); text-align: center; font-style: normal; }
.lb-gl .s { font-family: "Missal Glyph", "Noto Sans Symbols", "Segoe UI Symbol", sans-serif; transform: translate(-.0564em, -.0154em) scale(.84); }
.lb-gl .a { font-family: "Missal Amp", Georgia, serif; }

/* ---- ROTULUS ---- */
.lb-rot { position: relative; margin-top: calc(40 * var(--u)); padding-top: calc(56 * var(--u)); }
.lb-rot-hd { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: var(--lb-small); letter-spacing: .2em; }
.lb-rot-hd b { font-weight: 400; color: var(--line); }
.lb-rot-read { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-rot-read .d { opacity: .5; }
.lb-rot-bar {
  position: relative; height: calc(150 * var(--u)); cursor: pointer; touch-action: none;
  border-top: var(--lb-hair) solid var(--line); border-bottom: var(--lb-hair) solid var(--line);
  -webkit-user-select: none; user-select: none;
}
.lb-rot-bar:focus-visible { outline: 2px solid var(--line); outline-offset: 4px; }
.lb-rot-bar canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-rot-ink { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translateX(-100%); }
.lb-rot-ink canvas { transform: translateX(100%); }
.lb-rot-seg { position: absolute; top: calc(var(--hair) * -1); bottom: calc(var(--hair) * -1); pointer-events: none; }
.lb-rot-seg::before { content: ""; position: absolute; left: 0; top: calc(-22 * var(--u)); bottom: calc(-22 * var(--u)); width: var(--lb-hair); background: var(--line); }
.lb-rot-seg:first-child::before { top: calc(-30 * var(--u)); bottom: calc(-30 * var(--u)); }
.lb-rot-seg b {
  position: absolute; left: calc(10 * var(--u)); top: calc(100% + 14 * var(--u)); font-weight: 400;
  font-size: var(--lb-small); letter-spacing: .12em; white-space: nowrap; opacity: .7; transition: opacity .2s;
}
.lb-rot-end { position: absolute; right: 0; top: calc(-30 * var(--u)); bottom: calc(-30 * var(--u)); width: var(--lb-hair); background: var(--line); pointer-events: none; }
.lb-rot-seg.is-cur b { opacity: 1; color: var(--line); }
.lb-rot-head, .lb-rot-ghost { position: absolute; top: calc(-18 * var(--u)); bottom: calc(-18 * var(--u)); left: 0; width: var(--hair); margin-left: calc(var(--hair) / -2); background: var(--line); pointer-events: none; opacity: 0; }
.lb-rot-head::before { content: ""; position: absolute; left: calc(var(--hair) / 2 - 9 * var(--u)); top: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: var(--line); }
.lb-rot-ghost { opacity: 0; background: rgba(44, 45, 51, .55); }
.lb-rot-tip, .lb-w-tip {
  position: absolute; bottom: calc(100% + 26 * var(--u)); left: 0; transform: translateX(-50%);
  padding: 4px 5px 3px; background: var(--line); color: var(--paper);
  font-size: 9px; line-height: 1; letter-spacing: .14em; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none;
}
.lb-rot-bar.is-hover .lb-rot-ghost { opacity: 1; }
.lb-rot-bar.is-hover .lb-rot-tip { opacity: 1; }

/* ---- folios ---- */
.liber .lb-folios { position: relative; margin-top: calc(210 * var(--u)); counter-reset: f; }
.lb-f {
  position: relative; height: calc(330 * var(--u));
  --p: 0;
}
.lb-f + .lb-f { margin-top: 0; }
.lb-f-rule { position: absolute; left: 0; right: 0; top: 0; height: var(--lb-hair); background: var(--line); transform-origin: 0 50%; }
.lb-f:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lb-hair); background: var(--line); }
.lb-f .lb-x--r.l { left: calc(-15 * var(--u)); top: calc(-14 * var(--u)); }
.lb-f .lb-x--r.r { right: calc(-15 * var(--u)); top: calc(-14 * var(--u)); }
.lb-f-hit {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lb-f-hit:focus-visible { outline: 2px solid var(--line); outline-offset: calc(-10 * var(--u)); }
.lb-f > *:not(.lb-f-hit):not(.lb-f-wave) { pointer-events: none; }
.lb-f .lb-disc { left: calc(45 * var(--u)); top: calc(56 * var(--u)); width: calc(210 * var(--u)); height: calc(210 * var(--u)); transform-origin: 50% 50%; }
.lb-f-num {   /* sits exactly on the disc's box; one size for every numeral; caps centre on the line box */
  position: absolute; left: calc(45 * var(--u)); top: calc(56 * var(--u));
  width: calc(210 * var(--u)); height: calc(210 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(72 * var(--u)); line-height: 1; letter-spacing: 0; color: var(--line);
  white-space: nowrap; translate: var(--ix, 0) 0;
}
.lb-f-idx { position: absolute; left: 0; top: calc(26 * var(--u)); font-size: var(--lb-small); letter-spacing: .2em; opacity: .72; font-variant-numeric: tabular-nums; }
.lb-f-tx { position: absolute; left: calc(360 * var(--u)); top: calc(46 * var(--u)); width: calc(720 * var(--u)); }
.lb-f-title { font-size: calc(54 * var(--u)); line-height: calc(64 * var(--u)); letter-spacing: .14em; color: var(--line); white-space: nowrap; text-transform: uppercase; }
.lb-f-gloss { margin-top: calc(10 * var(--u)) !important; font-size: var(--lb-fs); line-height: calc(43 * var(--u)); letter-spacing: .16em; white-space: nowrap; }
.lb-f-gloss .d { opacity: .5; }
.lb-f-epi { margin-top: calc(14 * var(--u)) !important; font-size: calc(29 * var(--u)); line-height: calc(38 * var(--u)); opacity: .8; max-width: 40ch; }
.lb-f-epi:empty { display: none; }
.lb-f-meta { position: absolute; left: calc(360 * var(--u)); bottom: calc(40 * var(--u)); font-size: var(--lb-small); letter-spacing: .2em; opacity: .76; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lb-f-wave {
  position: absolute; z-index: 2; left: calc(1130 * var(--u)); right: calc(250 * var(--u)); top: calc(70 * var(--u)); height: calc(190 * var(--u));
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.lb-f-wave:focus-visible { outline: 2px solid var(--line); outline-offset: calc(10 * var(--u)); }
.lb-f-wave canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-w-ink { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translateX(-100%); }
.lb-w-ink canvas { transform: translateX(100%); }
.lb-w-head { position: absolute; top: calc(-14 * var(--u)); bottom: calc(-14 * var(--u)); left: 0; width: var(--hair); margin-left: calc(var(--hair) / -2); background: var(--line); opacity: 0; pointer-events: none; }
.lb-w-head::before { content: ""; position: absolute; left: calc(var(--hair) / 2 - 9 * var(--u)); top: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: var(--line); }
.lb-w-ghost { position: absolute; top: calc(-14 * var(--u)); bottom: calc(-14 * var(--u)); left: 0; width: var(--hair); margin-left: calc(var(--hair) / -2); background: rgba(44, 45, 51, .6); opacity: 0; pointer-events: none; }
.lb-w-tip { bottom: calc(100% + 18 * var(--u)); }
.lb-f-wave.is-hover .lb-w-ghost, .lb-f-wave.is-hover .lb-w-tip { opacity: 1; }
.lb-f-t0, .lb-f-dur { position: absolute; top: calc(276 * var(--u)); font-size: var(--lb-small); letter-spacing: .14em; font-variant-numeric: tabular-nums; opacity: .72; }
.lb-f-t0 { left: calc(1130 * var(--u)); }
.lb-f-dur { right: calc(250 * var(--u)); }
.lb-f-len { position: absolute; right: 0; top: calc(92 * var(--u)); width: calc(220 * var(--u)); text-align: right; font-size: calc(54 * var(--u)); line-height: 1; letter-spacing: .06em; color: var(--line); font-variant-numeric: tabular-nums; }
.lb-f-rlen { position: absolute; right: 0; top: calc(164 * var(--u)); font-size: var(--lb-small); letter-spacing: .14em; opacity: .72; white-space: nowrap; }
.lb-f-now {
  position: absolute; right: 0; top: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u));
  background: var(--line); color: var(--paper); font-size: var(--lb-small); line-height: 1; letter-spacing: .18em; white-space: nowrap;
  opacity: 0; visibility: hidden;
}
.lb-now-x { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }
.lb-now-x::before, .lb-now-x::after { content: ""; position: absolute; background: var(--paper); }
.lb-now-x::before { left: 0; right: 0; top: calc(50% - var(--hair) / 2); height: var(--hair); }
.lb-now-x::after { top: 0; bottom: 0; left: calc(50% - var(--hair) / 2); width: var(--hair); }
.lb-now-b { width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--paper); flex: none; }
.lb-f-bar { position: absolute; left: calc(-68 * var(--u) + 22 * var(--u)); top: calc(30 * var(--u)); bottom: calc(30 * var(--u)); width: calc(18 * var(--u)); background: var(--line); transform-origin: 50% 0; transform: scaleY(0); pointer-events: none; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }

/* the folio that is playing (paused: the badge turns to an outline) */
.lb-f.is-cur .lb-f-now { visibility: visible; opacity: 1; }
.lb-f.is-cur.is-paused .lb-f-now { background: transparent; color: var(--line); box-shadow: inset 0 0 0 var(--hair) var(--line); }
.lb-f.is-cur.is-paused .lb-now-x::before, .lb-f.is-cur.is-paused .lb-now-x::after, .lb-f.is-cur.is-paused .lb-now-b { background: var(--line); }
.lb-f.is-cur .lb-w-head { opacity: 1; }
.lb-f.is-cur .lb-f-bar { transform: scaleY(1); }
.lb-f.is-cur .lb-f-t0 { opacity: 1; color: var(--line); }
.lb-f .lb-hov { position: absolute; left: calc(-30 * var(--u)); right: calc(-30 * var(--u)); top: var(--lb-hair); bottom: 0; background: rgba(44, 45, 51, .045); opacity: 0; transition: opacity .12s steps(2); }
.lb-f-hit:hover ~ .lb-hov, .lb-f-wave:hover ~ .lb-hov { opacity: 1; }
.liber.lb-on .lb-rot-head { opacity: 1; }

/* ---- closing stamp (v12: the colophon column - disc, crosses, text, LAY-LOW row - was removed) ---- */
.lb-colo { position: relative; margin-top: calc(110 * var(--u)); height: calc(56 * var(--u)); }
.lb-colo .lb-gl { right: 0; top: 0; }


/* ------------------------------------------------------------------ */
/* Flow mode (narrow screens)                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 999px) {
  .liber {
    --lb-fs: min(15px, calc((100cqw - 2 * var(--gut)) / 24)); --lb-small: 10px; --lb-dot: 4px;
    padding: 30px var(--gut) 120px;
  }
  .lb-x--s { width: 28px; height: 28px; --t: var(--hair); }
  .lb-x--r { width: 14px; height: 14px; --t: var(--hair); }

  .lb-div { height: 26px; margin: 0; }
  .lb-seg { top: calc(13px - var(--hair) / 2); }
  .lb-seg-l { left: 0; width: 8%; }
  .lb-seg-m { left: 19%; width: 51%; }
  .lb-seg-r { left: auto; right: 0; width: 8%; }
  .lb-tk { top: 2px; height: 24px; }
  .lb-tk-l { left: 1%; }
  .lb-tk-r { left: auto; right: 1%; }

  .lb-head { height: auto; margin-top: 26px; padding-bottom: 6px; }
  .lb-head > * { position: relative; left: auto; top: auto; right: auto; }
  .lb-head .lb-disc { position: absolute; right: -96px; top: -40px; width: 240px; height: 240px; }
  .lb-kick { position: relative; font-size: 10px; }
  .lb-title { position: relative; left: -.02em; margin-top: 12px; font-size: min(88px, calc((100cqw - 2 * var(--gut)) / 4.4)); letter-spacing: .06em; line-height: 1; }
  .lb-hr { position: relative; display: block; width: 100%; height: 6px; margin-top: 14px; }
  .lb-sub { position: relative; margin-top: 12px; font-size: 11px; line-height: 1.3; letter-spacing: .16em; white-space: normal; }
  .lb-head .lb-x--s { display: none; }
  /* the disc runs off the right edge here: seat the rabbit in its visible part, clear of the title rule and the gutter */
  .lb-head .lb-mark { position: absolute; height: 52%; transform: translate(calc(-53.7% - 14px), calc(-56% - 40px)); }
  .lb-head .lb-gl { position: relative; display: block; margin-top: 18px; font-size: 13px; }
  .lb-head .lb-gl .gr { height: 12.5px; line-height: 12.5px; }
  .lb-head .lb-gl i { width: 11.2px; }

  .lb-rot { margin-top: 30px; padding-top: 0; }
  .lb-rot-hd { position: relative; flex-wrap: wrap; row-gap: 4px; column-gap: 12px; margin-bottom: 12px; font-size: 9px; letter-spacing: .14em; }
  .lb-rot-read { white-space: normal; text-align: right; margin-left: auto; }
  .lb-rot-bar { height: 64px; }
  .lb-rot-seg b { display: none; }
  .lb-rot-seg::before { top: -6px; bottom: -6px; }
  .lb-rot-seg:first-child::before, .lb-rot-end { top: -10px; bottom: -10px; }
  .lb-rot-head, .lb-rot-ghost { top: -8px; bottom: -8px; }
  .lb-rot-head::before { left: calc(var(--hair) / 2 - 4px); width: 8px; height: 8px; }
  .lb-rot-tip, .lb-w-tip { bottom: calc(100% + 12px); }
  .lb-rot-nums { display: flex; justify-content: space-between; margin-top: 16px; font-size: 9px; letter-spacing: .1em; opacity: .65; }

  .liber .lb-folios { margin-top: 44px; }
  .lb-f { height: auto; padding: 18px 0 24px; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; grid-template-areas: "num tx len" "wave wave wave" "t0 meta dur"; column-gap: 12px; row-gap: 0; }
  .lb-f > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  .lb-f-rule, .lb-f-hit, .lb-f .lb-hov, .lb-f .lb-x--r, .lb-f-now, .lb-f .lb-disc, .lb-f-idx, .lb-f-bar { position: absolute !important; }
  .lb-f-rule { left: 0 !important; right: 0 !important; top: 0 !important; }
  .lb-f-hit { left: 0 !important; top: 0 !important; }
  .lb-f .lb-hov { left: calc(-1 * var(--gut)) !important; right: calc(-1 * var(--gut)) !important; top: var(--hair) !important; bottom: 0 !important; }
  .lb-f .lb-x--r.l { left: -7px !important; top: -6px !important; }
  .lb-f .lb-x--r.r { right: -7px !important; left: auto !important; top: -6px !important; }
  .lb-f .lb-disc { left: 4px !important; top: 26px !important; width: 58px; height: 58px; }
  .lb-f-idx { display: none; }
  .lb-f-num { grid-area: num; align-self: start; width: 58px; height: 58px; margin: 8px 0 0 4px; font-size: 18px; }
  .lb-f-tx { grid-area: tx; width: auto; padding-top: 10px; min-width: 0; }
  .lb-f-title { font-size: min(18px, calc((100cqw - 2 * var(--gut)) / 19)); line-height: 1.2; letter-spacing: .1em; white-space: normal; }
  .lb-f-gloss { margin-top: 4px !important; font-size: 11px; line-height: 1.25; white-space: normal; letter-spacing: .14em; }
  .lb-f-epi { margin-top: 6px !important; font-size: 11px; line-height: 1.3; }
  .lb-f-len { grid-area: len; width: auto; padding-top: 12px; font-size: 16px; }
  .lb-f-rlen { display: none; }
  .lb-f-wave { grid-area: wave; height: 58px; margin-top: 14px; }
  .lb-w-head, .lb-w-ghost { top: -6px; bottom: -6px; }
  .lb-w-head::before { left: calc(var(--hair) / 2 - 4px); width: 8px; height: 8px; }
  .lb-f-t0 { grid-area: t0; margin-top: 8px; font-size: 10px; }
  .lb-f-meta { grid-area: meta; margin-top: 8px; font-size: 9px; letter-spacing: .14em; white-space: normal; text-align: center; }
  .lb-f-dur { grid-area: dur; margin-top: 8px; font-size: 10px; text-align: right; }
  .lb-f-now { right: 0 !important; top: -9px !important; left: auto !important; z-index: 3; padding: 4px 6px 3px; gap: 6px; font-size: 9px; letter-spacing: .14em; }
  .lb-now-x { width: 9px; height: 9px; }
  .lb-now-b { width: 5px; height: 5px; }
  .lb-f-bar { left: -12px !important; top: 18px !important; bottom: 16px !important; width: 4px; }

  .lb-colo { margin-top: 44px; height: auto; }
  .lb-colo .lb-gl { position: relative; right: auto; top: auto; margin: 0 auto; text-align: center; font-size: 13px; }
  .lb-colo .lb-gl .gr { height: 12.5px; line-height: 12.5px; }
  .lb-colo .lb-gl i { width: 11.2px; }
}
@media (min-width: 1000px) { .lb-rot-nums { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lb-f .lb-hov { transition: none; }
}
.lb-rot-seg.is-hov b { opacity: 1; color: var(--line); }

/* ---- tracklist-first layout (dev panel B / #layout=list): the book opens the page, the poster follows ---- */
.layout-list .liber { padding-top: calc(230 * var(--u)); padding-bottom: calc(190 * var(--u)); }
/* the band that carries the closing stamp at the end of the tracklist-first page (liber.js placeColo) */
.layout-list .liber.lb-end { padding-top: 0; }
@media (max-width: 999px) { .layout-list .liber { padding-top: 64px; padding-bottom: 64px; } }