/* The finale: world parts over the shared canvas. Light type on the last light; the end page rises into the night as
   an ordinary page under the lit mark: Hire, the mark you can touch, the colophon. */
.finale_wrap {
  --light: #f6f0e6; --light-2: rgba(246, 240, 230, 0.76); --light-3: rgba(246, 240, 230, 0.52); --line: rgba(246, 240, 230, 0.18); --amber: #f2a76b;
  --serif: 'Stillness Serif', 'Source Serif 4', Georgia, serif; --sans: 'Stillness Sans', 'Albert Sans', system-ui, sans-serif;
  --gut: clamp(18px, 3.4vw, 56px); --col-gap: clamp(12px, 1.6vw, 24px); --vh: 1vh; --expo: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative; color: var(--light); font-family: var(--sans); background: transparent;
}
.finale_wrap .finale_contain { position: relative; pointer-events: none; }
.finale_wrap .finale_part { position: relative; z-index: 1; pointer-events: none; }
.finale_wrap .finale_part.is-last { height: calc(230 * var(--vh)); }
.finale_wrap .finale_stage { position: sticky; top: 0; height: calc(100 * var(--vh)); overflow: clip; }
.finale_wrap .finale_stage::before { content: ''; position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(to top, rgba(8, 7, 6, 0.66), rgba(8, 7, 6, 0)); opacity: var(--scrim, 0); transition: opacity 0.8s; pointer-events: none; }
.finale_wrap :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.finale_wrap .finale_cap { position: absolute; opacity: 0; visibility: hidden; }
.finale_wrap .finale_cap.is-on { visibility: visible; }
.finale_wrap .finale_cap.is-a { left: var(--gut); bottom: calc(9 * var(--vh) + 20px); max-width: 56vw; }
.finale_wrap .finale_cap.is-b { right: var(--gut); bottom: calc(9 * var(--vh) + 20px); width: min(26rem, 32vw); }
.finale_wrap .finale_no { display: flex; gap: 0.9em; align-items: baseline; margin: 0 0 clamp(14px, 2.4 * var(--vh), 26px); font: 500 11px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--light-2); }
.finale_wrap .finale_no span { font: 300 15px/1 var(--serif); letter-spacing: 0.02em; text-transform: none; color: #f2c79c; }
.finale_wrap .finale_h2 { margin: 0; font: 260 min(5.8vw, calc(10 * var(--vh)))/0.94 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -0.035em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); }
.finale_wrap .finale_body { margin: 0; font: 400 clamp(14.5px, 1.08vw, 17px)/1.6 var(--sans); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45); }
.finale_wrap .finale_line { display: block; overflow: hidden; padding: 0.08em 0.04em 0.16em; margin: 0 -0.04em; }
.finale_wrap .finale_line + .finale_line { margin-top: -0.16em; }
.finale_wrap .finale_line_in { display: block; transform: translate3d(0, 108%, 0); transition: transform 1.4s var(--expo); transition-delay: calc(var(--i, 0) * 80ms); }
.finale_wrap .is-in .finale_line_in { transform: none; }

/* the end: an ordinary page in the night, the lit mark left clear above it */
.finale_wrap .finale_part.is-night { height: auto; }
.finale_wrap .finale_part.is-night .finale_stage { position: relative; height: auto; min-height: calc(100 * var(--vh)); overflow: visible; pointer-events: none; }
.finale_wrap .finale_part.is-night .finale_stage::before { display: none; }
.finale_wrap .finale_foot { position: relative; margin-top: calc(48 * var(--vh)); padding: 0 var(--gut) 24px; pointer-events: auto; }
.finale_wrap .finale_foot::before { content: ''; position: absolute; inset: calc(-34 * var(--vh)) 0 calc(-60 * var(--vh)) 0; background: linear-gradient(to bottom, rgba(9, 8, 7, 0), rgba(9, 8, 7, 0.88) calc(30 * var(--vh)), #0a0908 calc(48 * var(--vh))); pointer-events: none; z-index: -1; }
.finale_wrap .finale_foot_top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding-bottom: clamp(28px, 6 * var(--vh), 64px); border-bottom: 1px solid var(--line); }
.finale_wrap .finale_foot_cta { grid-column: 1 / 8; }
.finale_wrap .finale_foot_k { margin: 0 0 16px; font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #f2c79c; }
.finale_wrap .finale_foot_title { margin: 0; font: 230 min(8.4vw, calc(16 * var(--vh)))/0.9 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -0.045em; }
.finale_wrap .finale_foot_line { margin: clamp(16px, 2.6 * var(--vh), 26px) 0 0; max-width: 28em; font: 400 clamp(14.5px, 1.08vw, 17px)/1.55 var(--sans); color: var(--light-2); }
.finale_wrap .finale_foot_btn { margin-top: clamp(18px, 3 * var(--vh), 30px); display: inline-flex; align-items: center; gap: 18px; padding: 16px 26px; border-radius: 999px; background: var(--light); color: #12100e; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; transition: gap 0.6s var(--expo), background 0.4s; }
.finale_wrap .finale_foot_btn:hover { gap: 30px; background: var(--amber); }
.finale_wrap .finale_logo { grid-column: 8 / 13; justify-self: end; width: min(100%, 360px); aspect-ratio: 496 / 381; cursor: pointer; touch-action: manipulation; transform-style: preserve-3d; filter: drop-shadow(0 0 36px rgba(242, 167, 107, 0.28)); }
.finale_wrap .finale_logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.finale_wrap .finale_logo_piece { fill: url(#finale-ee); transform-box: fill-box; transform-origin: center; opacity: 0; }
.finale_wrap .finale_colophon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; padding: clamp(24px, 4.4 * var(--vh), 44px) 0; border-bottom: 1px solid var(--line); }
.finale_wrap .finale_explored { grid-column: 1 / 6; }
.finale_wrap .finale_explored_text { margin: 0; max-width: 34em; font: 300 clamp(16px, 1.25vw, 19px)/1.5 var(--serif); color: var(--light); }
.finale_wrap .finale_cols { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--col-gap); align-content: start; }
.finale_wrap .finale_col { display: flex; flex-direction: column; gap: 6px; font: 400 12.5px/1.5 var(--sans); color: var(--light-3); }
.finale_wrap .finale_col b { font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--light-2); }
.finale_wrap .finale_sign { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px 28px; padding-top: 18px; font: 400 12px/1.4 var(--sans); color: var(--light-3); }
.finale_wrap .finale_legal { margin: 0; font: 300 14px/1.35 var(--serif); color: var(--light-2); }
.finale_wrap .finale_foot_nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.finale_wrap .finale_foot_nav button, .finale_wrap .finale_foot_nav a { appearance: none; border: 0; background: none; padding: 0 0 2px; color: var(--light); cursor: pointer; font: 300 16px/1.3 var(--serif); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.4s; }
.finale_wrap .finale_foot_nav button:hover, .finale_wrap .finale_foot_nav a:hover { border-color: var(--light); }
/* the page's words rise in as it arrives */
.finale_wrap .finale_foot .finale_foot_k, .finale_wrap .finale_foot_line, .finale_wrap .finale_foot_btn, .finale_wrap .finale_colophon, .finale_wrap .finale_sign { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.9s ease, transform 1.2s var(--expo); }
.finale_wrap .finale_foot.is-in .finale_foot_k, .finale_wrap .finale_foot.is-in .finale_foot_line, .finale_wrap .finale_foot.is-in .finale_foot_btn, .finale_wrap .finale_foot.is-in .finale_colophon, .finale_wrap .finale_foot.is-in .finale_sign { opacity: 1; transform: none; }
.finale_wrap .finale_foot.is-in .finale_foot_line { transition-delay: 0.2s; } .finale_wrap .finale_foot.is-in .finale_foot_btn { transition-delay: 0.3s; } .finale_wrap .finale_foot.is-in .finale_colophon { transition-delay: 0.35s; } .finale_wrap .finale_foot.is-in .finale_sign { transition-delay: 0.45s; }

@media (max-width: 1100px) {
  .finale_wrap .finale_h2 { font-size: min(8vw, calc(6.4 * var(--vh))); }
  .finale_wrap .finale_cap.is-a { bottom: calc(22 * var(--vh) + 40px); max-width: 82vw; }
  .finale_wrap .finale_cap.is-b { left: var(--gut); right: auto; width: min(34rem, 80vw); bottom: calc(7 * var(--vh)); }
  .finale_wrap .finale_foot { margin-top: calc(40 * var(--vh)); }
  .finale_wrap .finale_foot_cta { grid-column: 1 / 9; }
  .finale_wrap .finale_logo { grid-column: 9 / 13; }
  .finale_wrap .finale_foot_title { font-size: min(11vw, calc(9 * var(--vh))); }
  .finale_wrap .finale_explored, .finale_wrap .finale_cols { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .finale_wrap { --gut: 18px; }
  .finale_wrap .finale_h2 { font-size: min(11.6vw, calc(5.6 * var(--vh))); }
  .finale_wrap .finale_cap.is-a { bottom: calc(26 * var(--vh) + 30px); right: var(--gut); }
  .finale_wrap .finale_cap.is-b { bottom: calc(5 * var(--vh)); width: auto; right: var(--gut); }
  .finale_wrap .finale_body { font-size: 14.5px; }
  .finale_wrap .finale_foot { margin-top: calc(36 * var(--vh)); padding-bottom: 20px; }
  .finale_wrap .finale_foot_top { grid-template-columns: 1fr; row-gap: 28px; }
  .finale_wrap .finale_foot_cta, .finale_wrap .finale_logo { grid-column: 1; }
  .finale_wrap .finale_logo { grid-row: 1; justify-self: start; width: 150px; }
  .finale_wrap .finale_foot_title { font-size: 19vw; }
  .finale_wrap .finale_foot_btn { padding: 15px 22px; }
  .finale_wrap .finale_explored_text { font-size: 16px; }
  .finale_wrap .finale_cols { grid-template-columns: 1fr; gap: 14px; }
  .finale_wrap .finale_col { font-size: 12.5px; }
  .finale_wrap .finale_sign { flex-direction: column; align-items: flex-start; gap: 14px; }
  .finale_wrap .finale_legal { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale_wrap *, .finale_wrap *::before { transition-duration: 0.2s !important; transition-delay: 0s !important; }
}

/* the editor's canvas: labelled stills of the live page, one per chapter (scene/native.js canvasPosters) */
.finale_wrap.is-canvas { height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; background: #0b0a09; pointer-events: auto !important; }
.finale_wrap.is-canvas .finale_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !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(236, 229, 212, 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: #ece5d8; background: rgba(18, 16, 14, 0.78); }
@media (max-width: 767px) { .finale_wrap .finale_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }