/* 21:27 — film shell: tokens, the canvas, stages, leaders, captions and BL's page replica.
   --u is one hundredth of a 16:9 frame's height (10.8 px at 1080p); --p is one pixel of BL's 1440 page, scaled. */
:root {
  --ink: #000; --white: #F3F1EC; --board: #F3F1EC;
  --gold: #857550; --gold-lit: #B2A380; --gold-ink: #6B5E41;
  --sky: #77CCF3; --red: #B4432F; --red-lit: #C8604B;
  --hair: rgba(255, 255, 255, .5);
  --f-brand: "Gill Sans Nova", "Gill Sans", "Gill Sans MT", "Ysabeau Office", Optima, Candara, sans-serif;
  --f-sys: "DM Mono", ui-monospace, Menlo, monospace;
  --u: min(1svh, .5625vw);
  --p: calc(var(--u) * .1234568);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html, body { margin: 0; background: #000; color: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--f-brand); font-variant-numeric: lining-nums; overscroll-behavior: none; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

#gl { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; display: block; z-index: 0; }
/* the loader (index.html): BL's mark and a hairline that fills while the models build, then fades into S0 */
#loader { position: fixed; inset: 0; z-index: 50; background: var(--ink); display: grid; place-content: center; justify-items: center; gap: 30px; transition: opacity .8s ease; }
#loader.out { opacity: 0; pointer-events: none; }
#loader .ld-logo { width: clamp(150px, 13vw, 230px); height: auto; display: block; }
#loader .ld-logo path { fill: var(--gold); }
#loader .ld-logo path.ld-foot { fill: var(--sky); }
#loader .ld-track { width: clamp(120px, 10vw, 180px); height: 2px; background: rgba(178, 163, 128, .18); overflow: hidden; }
#loader .ld-track i { display: block; height: 100%; background: var(--gold-lit); transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { #loader { transition: none; } }
#film { position: relative; z-index: 1; }
.scene { position: relative; display: block; pointer-events: none; }
.tail { height: 100svh; }
/* stages are full-frame and fixed: DOM never scrolls at a scene boundary; only the active one is visible */
.stage { position: fixed; left: 0; top: 0; width: 100vw; height: 100svh; overflow: hidden; z-index: 4; visibility: hidden; pointer-events: none; contain: layout style; }
.stage.on { visibility: visible; }
.stage:not(.on), .stage:not(.on) * { visibility: hidden !important; }   /* no scene's DOM leaks out of an inactive stage */
.stage .interactive, .stage button, .stage [data-interactive] { pointer-events: auto; }

/* ---------------------------------------------------------------- leaders (ctx.overlay) */
.overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.overlay svg.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld { fill: none; stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.ld.gold { stroke: var(--gold-lit); }
.ld.gold-day { stroke: var(--gold); }
.ld.white { stroke: rgba(243, 241, 236, .58); }
.ld.ink { stroke: rgba(15, 14, 12, .55); }
.ld.red { stroke: var(--red-lit); stroke-width: 1.2; }
.ldot { opacity: 0; }
.ldot.gold { fill: var(--gold-lit); } .ldot.gold-day { fill: var(--gold); } .ldot.white { fill: var(--white); } .ldot.ink { fill: #0F0E0C; } .ldot.red { fill: var(--red-lit); }

/* ---------------------------------------------------------------- captions (ctx.caption): headline + one line, opacity only */
.caption { position: fixed; z-index: 6; pointer-events: none; left: calc(var(--u) * 8.9); bottom: calc(var(--u) * 8.4 + var(--cap-lift, 0px)); max-width: calc(var(--u) * 78); color: var(--white); }
.cap-h { margin: 0; font: 300 calc(var(--u) * 4.1)/1.08 var(--f-brand); letter-spacing: .012em; text-transform: uppercase; max-width: 15.5em; text-wrap: balance; opacity: 0; transition: opacity .4s ease; }
.cap-l { margin: calc(var(--u) * 1.7) 0 0; font: 400 calc(var(--u) * 1.85)/1.45 var(--f-brand); letter-spacing: .005em; max-width: 31em; text-wrap: pretty; color: rgba(243, 241, 236, .72); opacity: 0; transition: opacity .4s ease .12s; }
.cap-h.on, .cap-l.on { opacity: 1; }
.caption.on-light { color: #0F0E0C; }
.caption.on-light .cap-l { color: rgba(15, 14, 12, .66); }
.caption.instant .cap-h, .caption.instant .cap-l { transition: none; }

/* ---------------------------------------------------------------- BL's project page hero (ctx.blpage), matched to page-molteni/00.jpg */
.blpage { position: fixed; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; color: #fff; font-family: var(--f-brand); font-weight: 400; }
.blpage.on { visibility: visible; }
.blpage > *, .bp-chrome > *, .bp-bar > * { position: absolute; }
.bp-grad { inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 50%); }
.bp-chrome { inset: 0; }
.bp-logo { left: 2.5%; top: calc(var(--p) * 27); width: calc(var(--p) * 182); height: calc(var(--p) * 50); }
.bp-logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bp-logo svg path { fill: var(--gold); }
.bp-logo svg path.bp-foot { fill: var(--sky); transform-box: fill-box; transform-origin: 0 50%; }
.bp-nav { inset: 0; }
.bp-nav span { position: absolute; top: calc(var(--p) * 40); font-size: calc(var(--p) * 12.6); line-height: 1.3; letter-spacing: .01em; white-space: nowrap; }
.bp-nav span:nth-child(1) { left: 45.69%; } .bp-nav span:nth-child(2) { left: 52.64%; } .bp-nav span:nth-child(3) { left: 59.38%; }
.bp-nav span:nth-child(4) { left: 66.6%; } .bp-nav span:nth-child(5) { left: 73.4%; } .bp-nav span:nth-child(6) { left: 79.2%; } .bp-nav span:nth-child(7) { left: 85.9%; }
.bp-vsep { left: 92.64%; top: calc(var(--p) * 22); height: calc(var(--p) * 75); width: 1px; background: var(--hair); }
.bp-burger { left: 95%; top: calc(var(--p) * 43); width: calc(var(--p) * 24); height: calc(var(--p) * 10); }
.bp-burger i { position: absolute; left: 0; height: 2px; background: #fff; }
.bp-burger i:first-child { top: 0; width: 100%; } .bp-burger i:last-child { top: calc(var(--p) * 7); width: 62%; }
.bp-navline { left: 1.39%; right: 1.39%; top: calc(var(--p) * 97); height: 1px; background: var(--hair); }
.bp-hero { left: 12.15%; top: calc((100% - var(--p) * 104) / 2); transform: translateY(-50%); }
.bp-eye { font-size: calc(var(--p) * 12); line-height: 1.2; letter-spacing: .01em; }
.bp-h1 { margin: calc(var(--p) * 28) 0 0; font: 400 calc(var(--p) * 35)/1.05 var(--f-brand); letter-spacing: -.011em; text-transform: uppercase; white-space: nowrap; }
.bp-more { margin-top: calc(var(--p) * 33); display: flex; align-items: center; gap: calc(var(--p) * 12); font-size: calc(var(--p) * 11.5); letter-spacing: .01em; }
.bp-circ { width: calc(var(--p) * 34); height: calc(var(--p) * 34); }
.bp-circ svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.2; }
.bp-bar { left: 0; right: 0; bottom: 0; height: calc(var(--p) * 104); }
.bp-barline { left: 1.39%; right: 1.39%; top: 0; height: 1px; background: var(--hair); }
.bp-cell { top: 0; bottom: 0; box-sizing: border-box; padding-left: calc(var(--p) * 36); border-left: 1px solid var(--hair); white-space: nowrap; }
.bp-cell:first-of-type { border-left: 0; }
.bp-l { display: block; margin-top: calc(var(--p) * 26); font-size: calc(var(--p) * 11); line-height: 1.45; letter-spacing: .03em; }
.bp-v { display: block; margin-top: calc(var(--p) * 3); font-size: calc(var(--p) * 20); line-height: 1.4; letter-spacing: -.005em; }
.bp-extra { border-left: 0; padding-left: calc(var(--p) * 30); opacity: var(--t, 0); display: none; }
.bp-extra.on { display: block; }
.bp-extra .bp-sep { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--hair); transform-origin: 50% 0; transform: scaleY(var(--t, 0)); }
.bp-extra .bp-l, .bp-extra .bp-v { font-family: var(--f-brand); }
.bp-credit { right: 1.39%; bottom: calc(var(--p) * 114); font-size: calc(var(--p) * 11); letter-spacing: .03em; color: rgba(255, 255, 255, .78); opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- the scrubber (js/engine/timeline.js): bottom band, on hover only */
.tl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: max(10px, calc(var(--u) * 1.4));
  padding: calc(var(--u) * 7) max(16px, calc(var(--u) * 3.2)) max(12px, calc(var(--u) * 1.8));
  background: linear-gradient(0deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, 0)); color: rgba(243, 241, 236, .7);
  font: 400 max(10.5px, calc(var(--u) * 1.05))/1 var(--f-sys); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; user-select: none; -webkit-user-select: none; transition: opacity .5s var(--ease) .45s; }
.tl.on { opacity: 1; transition: opacity .22s var(--ease); }
.tl.on .tl-play, .tl.on .tl-track { pointer-events: auto; }
.tl-play { all: unset; flex: none; display: grid; place-items: center; width: max(22px, calc(var(--u) * 2.2)); aspect-ratio: 1; color: var(--white); opacity: .78; cursor: pointer; transition: opacity .15s; }
.tl-play:hover { opacity: 1; }
.tl-play svg { width: 48%; height: 48%; fill: currentColor; }
.tl-i-pause, .tl.playing .tl-i-play { display: none; }
.tl.playing .tl-i-pause { display: inline; }
.tl-now, .tl-total { flex: none; min-width: 4ch; }
.tl-total { text-align: right; opacity: .55; }
.tl-track { position: relative; flex: 1; height: max(24px, calc(var(--u) * 2.4)); cursor: pointer; touch-action: none; }
.tl-segs { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; transition: transform .2s var(--ease); }
.tl-track:hover .tl-segs, .tl.drag .tl-segs { transform: scaleY(1.75); }
.tl-seg { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: solid transparent; border-width: 0 1px; background: rgba(243, 241, 236, .24) padding-box; overflow: hidden; }
.tl-fill { position: absolute; inset: 0; background: rgba(243, 241, 236, .92); transform-origin: 0 50%; transform: scaleX(0); }
.tl-dw { position: absolute; top: 0; bottom: 0; background: var(--gold-lit); opacity: .85; }
.tl-head { position: absolute; top: 50%; left: 0; width: max(9px, calc(var(--u) * .9)); aspect-ratio: 1; border-radius: 50%; background: var(--white); transform: translate(-50%, -50%) scale(.65); transition: transform .2s var(--ease); }
.tl-track:hover .tl-head, .tl.drag .tl-head { transform: translate(-50%, -50%) scale(1); }
.tl-tip { position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; display: flex; gap: 1.1ch; padding: .55em .8em; white-space: nowrap; color: var(--white);
  background: rgba(15, 14, 12, .82); border: 1px solid rgba(133, 117, 80, .7); transform: translateX(-50%); opacity: 0; transition: opacity .15s; pointer-events: none; }
.tl-tip b { font-weight: 400; color: var(--gold-lit); }
.tl-tip span { opacity: .6; }
.tl-track:hover .tl-tip, .tl.drag .tl-tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .cap-h, .cap-l { transition: none; } }