/* The coda every page ends on: back to the studio (finale.js).

   With motion it is a long passage over one pinned stage: the cover returns
   as a card and grows to the screen, then the room (inside its computer) or
   a still of the desk (on its own) takes it onto the monitor. Without motion
   it is simply the end frame: the desk, the words, the way in.

   Self-contained, so it sits the same at the foot of the homepage, the
   reading pages, the photobook and the arcade: the studio's tokens are used
   where a page has them, with the studio's values as fallbacks. */

.finale {
  position: relative;
  height: 100svh;
  background: #171513;
  color: #F1EBE0;
  font-family: var(--sans, "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* About one screen of scrolling from the start of the coda to the room: it
   was 2.4, which read as the page refusing to end. */
.finale.is-live { height: 200svh; }
.finale__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.finale__room,
.finale__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.finale__room { object-fit: cover; }
.finale__screen { display: none; }
.is-live .finale__room,
.is-live .finale__screen {
  transform-origin: 0 0;
  will-change: transform;
}
.is-live .finale__room { width: auto; height: auto; max-width: none; object-fit: fill; }
.is-live .finale__screen { display: block; object-fit: fill; }

.finale__copy,
.finale__end {
  position: absolute;
  z-index: 2;
  left: var(--margin, clamp(20px, 4.4vw, 76px));
  right: var(--margin, clamp(20px, 4.4vw, 76px));
}
.finale__copy { top: calc(var(--hd-h, 72px) + clamp(24px, 6vh, 64px)); }
.finale__tag {
  margin: 0;
  font-size: var(--f-label, .75rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(241, 235, 224, .62);
}
.finale__title {
  max-width: 16ch;
  margin: 14px 0 0;
  font-family: var(--serif, "Fraunces", "Iowan Old Style", Georgia, serif);
  font-size: var(--f-display, clamp(2.6rem, 5.4vw, 6rem));
  font-weight: 320;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Where the reader is going, and how far there is left (finale.js). */
.finale__hint {
  position: absolute;
  z-index: 2;
  left: var(--margin, clamp(20px, 4.4vw, 76px));
  bottom: clamp(28px, 7vh, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: var(--f-small, .875rem);
  color: rgba(241, 235, 224, .78);
}
.finale__hint i {
  position: relative;
  flex: 0 0 clamp(64px, 9vw, 120px);
  height: 1px;
  background: rgba(241, 235, 224, .22);
  overflow: hidden;
}
.finale__hint b {
  position: absolute;
  inset: 0;
  background: #C8A863;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.finale__hint svg { width: 14px; height: 14px; flex: none; animation: finale-nudge 1.8s ease-in-out infinite; }
@keyframes finale-nudge { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .finale__hint svg { animation: none; } }
.is-leaving .finale__hint { opacity: 0 !important; }

.finale__end {
  bottom: clamp(28px, 7vh, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.finale__end p { max-width: 36ch; margin: 0; font-size: var(--f-small, .875rem); color: rgba(241, 235, 224, .78); }
.finale__enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #F1EBE0;
  color: #1F2022;
  font-size: var(--f-small, .875rem);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease, transform .2s ease;
}
.finale__enter:hover { background: #C8A863; }
.finale__enter:active { transform: scale(.97); }
.finale__enter:focus-visible { outline: 2px solid #C8A863; outline-offset: 3px; }
/* Words are laid over the desk, so the still is dimmed where they sit. */
.finale__stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 10, 8, .72), rgba(12, 10, 8, 0) 34%),
    linear-gradient(to top, rgba(12, 10, 8, .78), rgba(12, 10, 8, 0) 30%);
  pointer-events: none;
}
/* The dimming is for words over the desk, so it is there only once the desk
   is: over the plain night it drew a seam at the top of the stage, and inside
   the room the screen must be exactly the monitor's picture. */
.is-live .finale__stage::after { opacity: 0; transition: opacity .5s ease; }
.is-live .finale__stage.is-room::after { opacity: 1; }
/* Leaving for the room: the words and the dimming go, so the last frame is
   exactly the still the room opens on. */
.finale__end { transition: opacity .3s ease; }
.is-leaving .finale__end,
.is-leaving .finale__stage::after { opacity: 0 !important; }
@media (max-width: 760px) {
  .finale__end { flex-direction: column; align-items: flex-start; }
}

/* While the coda is the room, nothing floats over its way in. */
.finale-room .project-assistant-shell:not([data-open="true"]) { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }