/* The finale: one sticky screen over a long scroll; the ink opens back into the world, the brand becomes the mark. */
.finale_wrap {
  --fi-bone: #e6e1d8; --fi-bone-dim: rgba(230, 225, 216, .56); --fi-blood-hi: #c8322a; --fi-gutter: clamp(16px, 2.2vw, 32px);
  /* it begins one screen early, held over the chapter's last screen, and fades up there */
  position: relative; z-index: 3; margin-top: -100vh; color: var(--fi-bone);
}
.finale_wrap .finale_contain {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #141110;
  opacity: var(--arrive, 0); transform: translate3d(0, var(--hold, 0px), 0);
}
.finale_wrap .finale_stage { position: absolute; inset: 0; }
.finale_wrap .finale_stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 1; }
.finale_wrap .finale_layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.finale_wrap .finale_layer > * { opacity: 0; transform: translateY(18px); transition: opacity 1.2s cubic-bezier(.7, 0, .2, 1), transform 1.2s cubic-bezier(.7, 0, .2, 1); }
.finale_wrap.is-hire .finale_layer > * { opacity: 1; transform: none; }
.finale_wrap.is-hire .finale_layer > :nth-child(2) { transition-delay: .12s; }
.finale_wrap.is-hire .finale_layer > :nth-child(3) { transition-delay: .3s; }
.finale_wrap.is-hire .finale_layer > :nth-child(4) { transition-delay: .45s; }
.finale_wrap .finale_kicker {
  position: absolute; left: 0; right: 0; top: 13vh; margin: 0; text-align: center; color: var(--fi-bone-dim);
  font-family: 'DS Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.finale_wrap .finale_title {
  position: absolute; left: 0; right: 0; top: 17vh; margin: 0; text-align: center;
  font-family: 'DS Caslon Text', Georgia, serif; font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: .01em;
  font-size: clamp(40px, min(5vw, 8vh), 96px);
}
.finale_wrap .finale_line {
  position: absolute; left: 0; right: 0; bottom: 17vh; margin: 0; padding: 0 var(--fi-gutter); text-align: center;
  font-family: 'DS Garamond', Georgia, serif; font-size: 20px; color: var(--fi-bone-dim);
}
.finale_wrap .finale_cta {
  position: absolute; left: 50%; bottom: 8vh; translate: -50% 0; padding: 14px 34px; white-space: nowrap; pointer-events: auto;
  border: 1px solid var(--fi-bone-dim); border-radius: 999px; color: var(--fi-bone); text-decoration: none;
  font-family: 'DS Caslon Display', Georgia, serif; font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  transition: border-color .4s, color .4s, opacity 1.2s cubic-bezier(.7, 0, .2, 1), transform 1.2s cubic-bezier(.7, 0, .2, 1);
}
.finale_wrap .finale_cta:hover { border-color: var(--fi-blood-hi); color: var(--fi-blood-hi); }
.finale_wrap .finale_kicker, .finale_wrap .finale_line { text-shadow: 0 1px 2px rgba(10, 8, 8, .9), 0 0 18px rgba(10, 8, 8, .8); }
/* the sticky stage holds over this run; then the colophon, a sheet of the chapter's paper, rises over the world */
.finale_wrap .finale_run { height: 160vh; }
.finale_wrap .finale_colophon {
  position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 120px); row-gap: 28px;
  padding: clamp(40px, 7vh, 88px) var(--fi-gutter) clamp(32px, 6vh, 64px); background: #e9e3d6; color: #141110;
  box-shadow: 0 -24px 60px rgba(10, 8, 8, .55);
}
.finale_wrap .finale_colophon::before { content: ''; position: absolute; left: var(--fi-gutter); right: var(--fi-gutter); top: 0; height: 3px; background: #141110; }
.finale_wrap .finale_colophon_head { grid-column: 1; }
.finale_wrap .finale_colophon_kicker, .finale_wrap .finale_colophon_credits dt {
  margin: 0; font-family: 'DS Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a2019;
}
.finale_wrap .finale_colophon_title { margin: 10px 0 0; font-family: 'DS Caslon Text', Georgia, serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 52px); line-height: .95; text-transform: uppercase; }
.finale_wrap .finale_colophon_lede { grid-column: 2; margin: 0; max-width: 58ch; font-family: 'DS Garamond', Georgia, serif; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.42; }
.finale_wrap .finale_colophon_credits {
  grid-column: 2; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 3vw, 48px);
  padding-top: 22px; border-top: 1px solid rgba(20, 17, 16, .25);
}
.finale_wrap .finale_colophon_credits dd { margin: 6px 0 0; font-family: 'DS Garamond', Georgia, serif; font-size: 16px; line-height: 1.35; }
@media (max-width: 767px) {
  .finale_wrap .finale_kicker { top: 15vh; }
  .finale_wrap .finale_title { top: 19vh; font-size: min(12vw, 7vh); }
  .finale_wrap .finale_line { bottom: 19vh; font-size: 17px; }
  .finale_wrap .finale_cta { bottom: 11vh; }
  .finale_wrap .finale_colophon { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .finale_wrap .finale_colophon_head, .finale_wrap .finale_colophon_lede, .finale_wrap .finale_colophon_credits { grid-column: 1; }
  .finale_wrap .finale_colophon_lede { font-size: 18px; }
  .finale_wrap .finale_colophon_credits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* the editor's canvas: the section runs alone in a frame, so it shows labelled stills of the live page (stage.js) */
.finale_wrap.is-canvas { height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; background: #0b0d0f; }
.finale_wrap.is-canvas .finale_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; opacity: 1 !important; }
.finale_wrap.is-canvas > :not(.finale_contain), .finale_wrap.is-canvas .finale_contain > :not(.finale_poster) { display: none !important; }
.finale_wrap .finale_poster { 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(230, 225, 216, 0.14); }
.finale_wrap .finale_poster 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: #e6e1d8; background: rgba(11, 13, 15, 0.78); }
@media (max-width: 767px) { .finale_wrap .finale_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }