/* Hire: one sticky screen over a long scroll, at night; the ash gathers into the mark, the call lands with it. */
.finale_wrap {
  --fi-bone: #efe7da; --fi-dim: rgba(239, 231, 218, .74); --fi-faint: rgba(239, 231, 218, .48); --fi-ember: #e8743b;
  --fi-gutter: clamp(16px, 2.6vw, 40px);
  /* it begins one screen early, held over the story's last screen, and fades up there */
  position: relative; z-index: 3; margin-top: -100vh; height: 280vh; color: var(--fi-bone); visibility: hidden;
}
.finale_wrap.is-live { visibility: visible; }   /* once the story has laid itself out (vivre:layout) */
.finale_wrap .finale_contain {
  /* transparent: above the sheet it shows the homage; the sheet (.finale_burn) covers the rest and
     burns away onto the night the world draws */
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transform: translate3d(0, var(--hold, 0px), 0);
}
.finale_wrap .finale_burn { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; display: block; pointer-events: none; }
.finale_wrap .finale_stage { position: absolute; inset: 0; }
.finale_wrap .finale_stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.finale_wrap .finale_layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.finale_wrap .finale_layer > * { opacity: 0; transform: translateY(14px); transition: opacity 1.4s cubic-bezier(.7, 0, .2, 1), transform 1.4s cubic-bezier(.7, 0, .2, 1); }
.finale_wrap.is-hire .finale_layer > * { opacity: 1; transform: none; }
.finale_wrap.is-hire .finale_layer > .finale_line { transition-delay: .2s; }
.finale_wrap.is-hire .finale_layer > .finale_cta { transition-delay: .4s; pointer-events: auto; }   /* clickable only once it shows */
.finale_wrap.is-hire .finale_layer > .finale_hint { transition-delay: 1.4s; opacity: 1; }
/* 終, the end, as a book's last page carries it: small, high, in the gutter */
.finale_wrap .finale_jp {
  position: absolute; top: var(--fi-gutter); left: 50%; translate: -50% 0; margin: 0;
  font-family: 'VC Mincho', serif; font-weight: 500; font-size: 22px; color: var(--fi-ember); writing-mode: vertical-rl;
}
.finale_wrap .finale_title {
  position: absolute; left: 0; right: 0; top: 13vh; margin: 0; padding: 0 var(--fi-gutter); text-align: center;
  font-family: 'VC Mincho', serif; font-weight: 500; letter-spacing: .02em; line-height: 1.05;
  font-size: clamp(34px, min(5vw, 8vh), 84px);
}
.finale_wrap .finale_line {
  position: absolute; left: 0; right: 0; bottom: 22vh; margin: 0; padding: 0 var(--fi-gutter); text-align: center;
  font-family: 'VC Gothic', sans-serif; font-weight: 400; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .04em; color: var(--fi-dim);
}
/* the call is a torn slip of the same paper */
.finale_wrap .finale_cta {
  position: absolute; left: 50%; bottom: 12vh; translate: -50% 0; padding: 15px 34px 16px; white-space: nowrap; pointer-events: none;
  background: var(--fi-bone); color: #17130f; text-decoration: none;
  font-family: 'VC Gothic', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 6%, 9% 0, 23% 5%, 38% 1%, 55% 6%, 71% 0, 86% 4%, 100% 1%, 99% 52%, 100% 96%, 84% 100%, 66% 95%, 49% 100%, 31% 96%, 14% 100%, 0 95%, 1% 48%);
  transition: background .4s, color .4s, opacity 1.4s cubic-bezier(.7, 0, .2, 1), transform 1.4s cubic-bezier(.7, 0, .2, 1);
}
.finale_wrap .finale_cta:hover, .finale_wrap .finale_cta:focus-visible { background: var(--fi-ember); color: #120c08; }
.finale_wrap .finale_hint {
  position: absolute; left: 50%; bottom: calc(12vh - 34px); translate: -50% 0; margin: 0; white-space: nowrap;
  font-family: 'VC Gothic', sans-serif; font-size: 11px; letter-spacing: .12em; color: var(--fi-dim);
}
/* the colophon: a small ruled box at the foot, right, as at the end of a book */
.finale_wrap .finale_okuzuke {
  position: absolute; z-index: 2; right: var(--fi-gutter); bottom: var(--fi-gutter); width: min(340px, calc(100% - 2 * var(--fi-gutter)));
  padding: 12px 14px 10px; border-top: 1px solid var(--fi-faint); border-bottom: 1px solid var(--fi-faint);
  font-family: 'VC Gothic', sans-serif; font-size: 10px; line-height: 1.55; color: var(--fi-dim);
  opacity: 0; translate: 0 12px; transition: opacity 1.2s .9s, translate 1.4s .9s cubic-bezier(.2, .7, .2, 1);
}
.finale_wrap.is-hire .finale_okuzuke { opacity: 1; translate: 0 0; }
/* the colophon arrives as one block once the call has landed */
.finale_wrap .finale_ok_head { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; color: var(--fi-bone); letter-spacing: .14em; text-transform: uppercase; }
.finale_wrap .finale_ok_head [lang="ja"] { font-family: 'VC Mincho', serif; font-size: 13px; letter-spacing: .3em; }
.finale_wrap .finale_okuzuke dl { margin: 0; }
.finale_wrap .finale_okuzuke dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.finale_wrap .finale_okuzuke dt { letter-spacing: .12em; text-transform: uppercase; color: var(--fi-faint); }
.finale_wrap .finale_okuzuke dd { margin: 0; }
/* portrait (phone and tablet): the call under the title, the mark in the middle with its hint, the colophon at the foot */
@media (max-aspect-ratio: 1/1) {
  .finale_wrap .finale_title { top: 9vh; }
  .finale_wrap .finale_line { top: calc(9vh + clamp(34px, min(5vw, 8vh), 84px) * 1.05 + 14px); bottom: auto; }
  .finale_wrap .finale_cta { top: calc(9vh + clamp(34px, min(5vw, 8vh), 84px) * 1.05 + 52px); bottom: auto; }
  .finale_wrap .finale_hint { top: calc(9vh + clamp(34px, min(5vw, 8vh), 84px) * 1.05 + 112px); bottom: auto; }
}
@media (max-width: 767px) {
  .finale_wrap .finale_okuzuke { left: var(--fi-gutter); right: var(--fi-gutter); width: auto; font-size: 9.5px; }
}

/* the editor's canvas (scene/canvas.js): each chapter as a labelled still of the live page, sized in px */
.finale_wrap.is-canvas { position: relative !important; height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; visibility: visible !important; background: #0d0b0a; }
.finale_wrap.is-canvas .finale_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; visibility: visible !important; }
.finale_wrap.is-canvas > :not(.finale_contain), .finale_wrap.is-canvas .finale_contain > :not(.finale_still) { display: none !important; }
.finale_wrap .finale_still { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(239, 233, 223, 0.14); }
.finale_wrap .finale_still figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #efe9df; background: rgba(13, 11, 10, 0.78); }
@media (max-width: 767px) { .finale_wrap .finale_still { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }