/* Kingdom — Hire, at night on the paper, and the colophon as a stele rubbing. */
.finale_wrap {
  --paper: #ece6d8; --ink: #121110; --red: #b5321f; --night: #171614;
  --brush: 'KD Brush', 'KD Mincho', serif; --serif: 'KD Serif', Georgia, serif;
  position: relative; margin-top: -100vh; margin-top: -100svh; color: var(--paper); font-family: var(--serif); font-weight: 300; z-index: 3;
}
.finale_wrap .finale_contain { position: relative; }
.finale_wrap .finale_sound { position: fixed; right: clamp(16px, 2.6vw, 40px); bottom: clamp(16px, 3vh, 34px); z-index: 50; display: flex; align-items: flex-end; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 12px var(--serif); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s, color 0.4s; }
.finale_wrap .finale_sound.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s, color 0.4s; }
.finale_wrap .finale_sound > span:last-child { background: var(--paper); padding: 3px 7px; }
.finale_wrap .finale_sound_jp { display: inline-block; writing-mode: vertical-rl; font-family: 'KD Mincho', serif; font-weight: 600; font-size: 13px; line-height: 1; padding: 8px 5px; min-height: 36px; background: var(--ink); color: var(--paper); box-sizing: border-box; text-align: center; }
.finale_wrap .finale_sound[aria-pressed='true'] .finale_sound_jp { background: var(--red); }
.finale_wrap .finale_sound:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.finale_wrap .finale_run { height: 150vh; }
.finale_wrap .finale_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; transform: translateY(var(--hold, 0px)); background: rgba(23, 22, 20, var(--night-a, 0)); visibility: var(--vis, hidden); }
.finale_wrap .finale_wipe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.finale_wrap .finale_host { position: absolute; inset: 0; opacity: var(--canvas-a, 0); }
.finale_wrap .finale_host canvas { width: 100%; height: 100%; display: block; }
.finale_wrap .finale_corner { position: absolute; top: clamp(16px, 3vh, 34px); margin: 0; font-size: 12px; font-weight: 500; opacity: calc(var(--words-a, 0) * var(--stay-a, 1)); background: var(--paper); color: var(--ink); padding: 5px 10px 6px; }
.finale_wrap .finale_corner.is-tl { left: clamp(16px, 2.6vw, 40px); }
.finale_wrap .finale_corner.is-tr { right: clamp(16px, 2.6vw, 40px); }
.finale_wrap .finale_hire { position: absolute; left: 50%; bottom: clamp(56px, 11vh, 120px); transform: translate(-50%, calc(18px - var(--push, 0px))); width: min(760px, calc(100% - 32px)); text-align: center; opacity: 0; transition: opacity 1.1s, transform 1.1s cubic-bezier(.2, .7, .1, 1); pointer-events: none; }
.finale_wrap.is-hire .finale_hire { opacity: 1; transform: translate(-50%, calc(0px - var(--push, 0px))); pointer-events: auto; }
.finale_wrap .finale_title { margin: 0; font-size: clamp(44px, 6vw, 96px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.02; }
.finale_wrap .finale_line { margin: 26px 0 26px; font-size: clamp(17px, 1.4vw, 21px); color: rgba(236, 230, 216, 0.78); }
.finale_wrap .finale_cta { display: inline-flex; align-items: stretch; color: var(--ink); background: var(--paper); text-decoration: none; font-size: 16px; font-weight: 500; border: 3px solid var(--paper); box-shadow: 6px 6px 0 var(--red); transition: transform 0.18s, box-shadow 0.18s; }
.finale_wrap .finale_cta > span:last-child { padding: 14px 20px; align-self: center; }
.finale_wrap .finale_cta:hover, .finale_wrap .finale_cta:focus-visible { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--red); }
.finale_wrap .finale_cta_seal { width: 52px; display: grid; place-items: center; font-family: var(--brush); font-size: 30px; color: var(--paper); background: var(--ink); }
.finale_wrap .finale_hint { position: absolute; left: 50%; top: clamp(60px, 10vh, 100px); transform: translateX(-50%); margin: 0; font-size: 12px; color: rgba(236, 230, 216, 0.6); opacity: calc(var(--words-a, 0) * var(--stay-a, 1)); white-space: nowrap; }

.finale_wrap .finale_stele {
  position: relative; min-height: 80vh; padding: 14vh clamp(16px, 6vw, 110px) 8vh; box-sizing: border-box; clip-path: var(--torn, none);
  background: radial-gradient(120% 80% at 50% 0%, #22201d, #0f0e0d 70%); color: rgba(236, 230, 216, 0.86);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; gap: 4vh 5vw; overflow: hidden; isolation: isolate;
}
.finale_wrap .finale_rubbing { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; z-index: -1; mix-blend-mode: screen; opacity: 0.32; filter: grayscale(1) contrast(1.2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); clip-path: inset(0 0 var(--rub, 0%) 0); }
.finale_wrap .finale_stele_cols { position: relative; }
.finale_wrap .finale_stele_col { background: rgba(15, 14, 13, 0.72); padding: 16px 18px; border-top: 2px solid var(--paper); }
.finale_wrap .finale_stele_jp { grid-row: 1 / span 3; margin: 0; font-family: var(--brush); writing-mode: vertical-rl; font-size: clamp(90px, 16vh, 160px); line-height: 1; color: rgba(236, 230, 216, 0.9); text-shadow: 0 0 1px rgba(236, 230, 216, 0.6); }
.finale_wrap .finale_stele_cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; align-content: start; }
.finale_wrap .finale_stele_lede { grid-column: 2; margin: 0; max-width: 62ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--paper); }
.finale_wrap .finale_stele_h { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--paper); }
.finale_wrap .finale_stele_p { margin: 0; font-size: 13px; line-height: 1.6; }
.finale_wrap .finale_stele_by { margin: 0; font-size: 13px; align-self: end; }

@media (max-width: 900px) {
  .finale_wrap .finale_sound > span:last-child { display: none; }
  .finale_wrap .finale_stele { grid-template-columns: 1fr; padding-top: 10vh; }
  .finale_wrap .finale_stele_jp { grid-row: auto; writing-mode: horizontal-tb; font-size: 72px; }
  .finale_wrap .finale_stele_cols { grid-template-columns: 1fr; gap: 28px; }
  .finale_wrap .finale_stele_lede { grid-column: auto; font-size: 16px; }
  .finale_wrap .finale_corner.is-tr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .finale_wrap .finale_hire, .finale_wrap .finale_cta { transition: none; }
}

/* 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: #0b0907; }
.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: #ece5d4; background: rgba(11, 9, 7, 0.78); }
@media (max-width: 767px) { .finale_wrap .finale_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }