.finale_wrap {
  --ink: #07080a; --bone: #ece8df; --mute: rgba(236, 232, 223, 0.58); --line: rgba(236, 232, 223, 0.16); --live: #ff3b2f;
  --sans: 'VG Sans', 'Archivo', system-ui, sans-serif; --mono: 'VG Mono', 'Martian Mono', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 32px);
  position: relative; color: var(--bone); font-family: var(--sans);
}
.finale_wrap.is-live { margin-top: -100vh; }
.finale_wrap .finale_contain { position: relative; }
.finale_wrap .finale_run { position: relative; z-index: 3; }
.finale_wrap.is-live .finale_run + .finale_run { margin-top: -100vh; }
.finale_wrap.is-live .finale_run.is-hire { height: 420vh; }
.finale_wrap.is-live .finale_run.is-credits { height: 260vh; }
.finale_wrap.is-live .finale_stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; transform: translate3d(0, var(--hold, 0px), 0); visibility: hidden; }
.finale_wrap .finale_tag { display: inline-block; font: 600 10px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; padding: 4px 6px 3px; background: var(--bone); color: var(--ink); margin-right: 10px; }
.finale_wrap .finale_tag.is-ink { background: var(--ink); color: var(--bone); }
.finale_wrap .finale_kicker { position: absolute; left: var(--gut); top: calc(var(--gut) + 54px); margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; opacity: var(--k, 0); }
.finale_wrap .finale_freeze { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 34px); margin: 0; max-width: 34ch; font: 400 clamp(15px, 1.25vw, 19px)/1.3 var(--sans); color: var(--mute); opacity: var(--k, 0); }
.finale_wrap .finale_freeze b { color: var(--bone); font-weight: 600; }
.finale_wrap .finale_hire { position: absolute; left: 0; right: 0; bottom: calc(var(--gut) + 30px); padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 36px; opacity: var(--h, 0); pointer-events: none; }
.finale_wrap .finale_hire.is-on { pointer-events: auto; }
.finale_wrap .finale_hire_meta { grid-column: 1 / -1; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.finale_wrap .finale_hire_line { grid-column: 1 / -1; margin: 0; font: 200 clamp(64px, 11.6vw, 220px)/0.8 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 0.2em; }
.finale_wrap .finale_hire_word { display: block; transform: translate3d(0, calc((1 - var(--h, 0)) * 40%), 0); }
.finale_wrap .finale_hire_link { justify-self: start; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); background: var(--bone); text-decoration: none; padding: 14px 18px 13px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s, color 0.25s; }
.finale_wrap .finale_hire_link:hover, .finale_wrap .finale_hire_link:focus-visible { background: var(--live); color: var(--bone); }
.finale_wrap .finale_x { position: relative; width: 14px; height: 14px; }
.finale_wrap .finale_x::before, .finale_wrap .finale_x::after { content: ''; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.finale_wrap .finale_x::before { width: 14px; height: 2px; } .finale_wrap .finale_x::after { width: 2px; height: 14px; }
.finale_wrap .finale_hire_note { margin: 0; font: 400 clamp(14px, 1.1vw, 17px)/1.3 var(--sans); color: var(--mute); max-width: 36ch; }

/* credits: the page turns to bone paper */
.finale_wrap.is-live .finale_stage.is-paper { color: var(--ink); }
.finale_wrap .finale_paper { position: absolute; inset: 0; background: var(--bone); clip-path: inset(calc((1 - var(--rv, 0)) * 100%) 0 0 0); transform: translate3d(0, var(--slide, 0px), 0); min-height: 100%; height: max-content; }
.finale_wrap .finale_grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding: calc(var(--gut) + 64px) var(--gut) 40px; }
.finale_wrap .finale_label { grid-column: 1 / 4; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: flex-start; }
.finale_wrap .finale_explores { grid-column: 4 / 10; }
.finale_wrap .finale_h { margin: 0 0 22px; font: 700 clamp(34px, 4.6vw, 80px)/0.9 var(--sans); font-variation-settings: 'wdth' 62; text-transform: uppercase; }
.finale_wrap .finale_p { margin: 0 0 14px; font: 400 clamp(16px, 1.3vw, 20px)/1.38 var(--sans); max-width: 52ch; }
.finale_wrap .finale_p.is-small { font-size: 14px; color: rgba(7, 8, 10, 0.62); }
.finale_wrap .finale_list { grid-column: 4 / 13; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
.finale_wrap .finale_list div { border-top: 1px solid rgba(7, 8, 10, 0.18); padding: 12px 0 18px; }
.finale_wrap .finale_list dt { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(7, 8, 10, 0.55); margin-bottom: 8px; }
.finale_wrap .finale_list dd { margin: 0; font: 400 13.5px/1.4 var(--sans); }
.finale_wrap .finale_foot { padding: 0 var(--gut) var(--gut); }
.finale_wrap .finale_big { margin: 20px 0 0; font: 200 clamp(90px, 23vw, 440px)/0.78 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.01em; display: flex; justify-content: space-between; }
/* the Exe.Eyes mark: assembles as the footer arrives, tilts and parts under the pointer or a finger */
.finale_wrap .finale_ee { display: block; width: clamp(120px, 13vw, 190px); margin: 34px 0 0; perspective: 600px; color: var(--ink); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.finale_wrap .finale_ee_svg { display: block; width: 100%; height: auto; overflow: visible; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; }
.finale_wrap .finale_ee_p { fill: currentColor; transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg)); transform-box: fill-box; transform-origin: center; opacity: var(--po, 1); transition: transform 0.7s cubic-bezier(.2, .9, .2, 1), opacity 0.5s, fill 0.3s; }
.finale_wrap .finale_ee_p.is-eye { fill: var(--live); }
.finale_wrap .finale_ee:focus-visible { outline: 2px solid var(--live); outline-offset: 6px; }
.finale_wrap .finale_chapters { list-style: none; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(7, 8, 10, 0.18); columns: 4; column-gap: 20px; }
.finale_wrap .finale_chapters a { display: block; padding: 4px 0; color: var(--ink); text-decoration: none; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.finale_wrap .finale_chapters a:hover { color: var(--live); }
.finale_wrap .finale_foot_row { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(7, 8, 10, 0.18); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.finale_wrap .finale_foot_row a { color: var(--ink); }
@media (max-width: 760px) {
  .finale_wrap .finale_kicker { top: calc(var(--gut) + 46px); }
  .finale_wrap .finale_freeze { bottom: auto; top: calc(var(--gut) + 74px); font-size: 14.5px; }
  .finale_wrap .finale_hire { grid-template-columns: 1fr; bottom: calc(var(--gut) + 40px); }
  .finale_wrap .finale_hire_line { font-size: 17.5vw; flex-direction: column; gap: 0; }
  .finale_wrap .finale_grid { display: block; padding-top: calc(var(--gut) + 56px); }
  .finale_wrap .finale_label { margin-bottom: 26px; }
  .finale_wrap .finale_h { font-size: 40px; }
  .finale_wrap .finale_list { grid-template-columns: 1fr; }
  .finale_wrap .finale_chapters { columns: 2; }
  .finale_wrap .finale_foot_row { flex-direction: column; }
}

/* the editor's canvas: this section's chapters as stills (stage.js showPosters) */
.finale_wrap.is-canvas { margin-top: 0; background: #07080a; }
.finale_wrap .finale_poster { position: relative; margin: 0; }
.finale_wrap .finale_poster_img { display: block; width: 100%; height: auto; }
.finale_wrap .finale_poster_cap { position: absolute; left: 16px; bottom: 14px; padding: 4px 6px 3px; background: #ece8df; color: #07080a; font: 600 10px/1 'VG Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }

/* a stage is only a frame: its content takes the taps, and a chapter that has faded out takes none (a stage arriving
   over another must never sit on its controls) */
.finale_wrap.is-live .finale_run, .finale_wrap.is-live .finale_stage { pointer-events: none; }
.finale_wrap.is-live .finale_stage > * { pointer-events: auto; }
.finale_wrap .is-off, .finale_wrap .is-off * { pointer-events: none !important; }
