/* The last page. The group figure from the graduation stands large on the
   paper, the book's photographs pass through one small print, and the page
   ends on the line the book ends on. No scene hinges on this page, so the
   whole leaf is paper. Sizes follow --ph/--pw so phones and tablets keep the
   same page without scrolling. */
.paper.t-finale {
  padding: calc(var(--ph) * .035) calc(var(--pw) * .07) calc(var(--ph) * .035);
  align-items: center; text-align: center;
  font-size: var(--fs); line-height: 1.7;
  background: linear-gradient(160deg, #FFF3DD 0%, #F5E4C8 55%, #EBD6B8 100%);
}
.paper.t-finale .kicker { margin: 0 0 .2em; font-size: .74em; letter-spacing: .1em; }

.finale-figure, .finale-figure:hover {
  width: 100%; margin: 0 auto; padding: 0;
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
  background: none; box-shadow: none; transform: none; cursor: zoom-in;
}
.finale-figure::before, .finale-figure::after { display: none; }
.finale-figure .finale-glow {
  position: absolute; left: 50%; top: 56%; width: 125%; height: 72%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse at center, #ffe9b8d9 0%, #f4d59a66 42%, #f4d59a00 72%);
}
.finale-figure picture { position: relative; display: flex; justify-content: center; flex: 0 1 auto; min-height: 0; width: 100%; }
.finale-figure img {
  display: block; position: relative;
  height: 100%; max-height: calc(var(--ph) * .46); width: auto; max-width: 100%; margin: 0 auto; object-fit: contain;
  filter: drop-shadow(0 12px 14px #3c1e0538);
  transition: transform .5s ease;
}
.finale-figure:hover img, .finale-figure:focus-visible img { transform: translateY(-3px); }
.finale-figure figcaption { position: relative; flex-shrink: 0; margin-top: .3em; font-size: .8em; letter-spacing: .05em; color: var(--ink-soft); }

.flashback { width: 50%; max-width: 270px; margin: .75em auto 0; padding: 4px 4px 6px; transform: rotate(-1.6deg); }
.flashback .fb-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #E3D5B9; }
.flashback .fb-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
  filter: sepia(.22) saturate(1.08) brightness(1.03);
}
.flashback .fb-frame img.is-on { opacity: 1; }
.flashback .fb-leak {
  position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(45% 60% at 30% 30%, #ffe0a0b0, #ffb86a40 40%, #ff984000 70%);
  mix-blend-mode: screen; opacity: .55;
  animation: fb-leak 11s ease-in-out infinite alternate;
}
@keyframes fb-leak { from { transform: translate(-12%, -8%); } to { transform: translate(14%, 10%); } }
.flashback figcaption { min-height: 1.5em; margin-top: .35em; font-size: .74em; }

.finale-line { margin: auto 0 0; padding-top: .7em; font-size: 1.02em; letter-spacing: .06em; line-height: 1.7; text-wrap: balance; }
.book.single .finale-line { font-size: .88em; letter-spacing: .03em; }
.book.single .finale-line-en { font-size: .74em; }
.finale-line-en { margin: .15em 0 0; font: italic .82em var(--font-latin); letter-spacing: .03em; color: var(--ink-soft); }

/* The very last thing the reader sees: a line under the name on the back board. */
.paper.t-back .back-line { margin: 0; font: italic .8em var(--font-latin); color: #b7b390; letter-spacing: .04em; }

/* Lighter devices and 靜心閱讀 keep the frame, without the drifting light. */
.lite .flashback .fb-leak, .still .flashback .fb-leak { animation: none; }
.still .flashback .fb-frame img { transition: none; }
@media (prefers-reduced-motion: reduce) { .flashback .fb-leak { animation: none; } }

/* Short landscape screens: figure and print side by side, the line beneath. */
@media (max-height: 559px) {
  .paper.t-finale { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 4%; padding: 6px 16px 6px; }
  .paper.t-finale .kicker, .finale-figure figcaption, .finale-line-en { display: none; }
  .finale-figure { width: auto; margin: 0; }
  .finale-figure picture { width: auto; }
  .finale-figure img { height: calc(var(--ph) * .64); max-height: none; }
  .flashback { width: calc(var(--ph) * .58); margin: 0; }
  .flashback figcaption { min-height: 0; margin-top: .2em; font-size: .68em; line-height: 1.3; }
  .finale-line { flex-basis: 100%; margin: .15em 0 0; padding-top: 0; font-size: .8em; line-height: 1.4; }
}