/* ==========================================================================
   FINAL RITUAL · 送光

   This layer is intentionally self-contained.  The final scene should feel
   like one held cinematic frame: two cities, an old route, and one warm light.
   ========================================================================== */

.scroll-painting #daybreak {
  --ritual-night: #030a12;
  --ritual-night-soft: #071522;
  --ritual-blue: #102536;
  --ritual-blue-faint: #526979;
  --ritual-paper: #e9dcc3;
  --ritual-paper-muted: #aaacaa;
  --ritual-gold: #d5aa70;
  --ritual-gold-bright: #efd6aa;
  --ritual-cinnabar: #8f443b;
  --ritual-ease: cubic-bezier(.2, .72, .22, 1);
}

/* A full-width dusk frame replaces the pale map without changing the dawn
   sequence above it. */
.scroll-painting #daybreak .colophon {
  position: relative;
  z-index: 4;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  min-height: max(620px, 96svh);
  margin: clamp(64px, 9vh, 104px) calc(50% - 50vw) 0;
  padding:
    clamp(44px, 7svh, 78px)
    max(clamp(22px, 5vw, 76px), env(safe-area-inset-right))
    clamp(54px, 8svh, 90px)
    max(clamp(22px, 5vw, 76px), env(safe-area-inset-left));
  grid-template-columns: 1fr auto 1fr;
  align-content: center;
  overflow: clip;
  border: 0;
  color: var(--ritual-paper);
  background:
    radial-gradient(ellipse 50% 54% at 76% 32%, rgb(123 153 169 / .12), transparent 72%),
    radial-gradient(ellipse 54% 48% at 18% 72%, rgb(26 62 70 / .27), transparent 76%),
    linear-gradient(118deg, #02080f 0%, #061321 48%, #071725 70%, #0a1720 100%);
  box-shadow:
    inset 0 1px rgb(220 224 214 / .045),
    inset 0 -120px 160px rgb(0 3 8 / .38),
    0 52px 88px 26px rgb(3 10 18 / .96);
}

.scroll-painting #daybreak .colophon::before {
  position: absolute;
  z-index: -2;
  inset: -12%;
  width: auto;
  height: auto;
  border-radius: 0;
  content: "";
  opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgb(225 212 180 / .095) 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 78% 24%, rgb(184 199 199 / .07) 0 8%, transparent 23%),
    radial-gradient(ellipse 38% 14% at 74% 72%, rgb(192 155 108 / .06), transparent 72%),
    radial-gradient(ellipse 44% 20% at 22% 68%, rgb(50 99 101 / .11), transparent 70%);
  filter: none;
  transform: none;
  transition: opacity 2.2s ease, background 2.2s ease;
}

.scroll-painting #daybreak .colophon::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  content: "";
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(0 3 8 / .42),
      transparent 17%,
      transparent 58%,
      rgb(3 10 18 / .34) 73%,
      #030a12 100%
    ),
    radial-gradient(ellipse 82% 72% at 50% 52%, transparent 48%, rgb(0 3 8 / .54) 100%),
    repeating-linear-gradient(0deg, rgb(236 221 193 / .008) 0 1px, transparent 1px 5px);
  mix-blend-mode: normal;
  transform: none;
}

/* The three old colophon labels repeated information already present in the
   scene.  Keep them in the document, but remove them from the final frame. */
.scroll-painting #daybreak .colophon > .colophon__title,
.scroll-painting #daybreak .colophon > .colophon__places,
.scroll-painting #daybreak .colophon > .colophon__end,
.scroll-painting #daybreak .colophon > .page-warmth-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The two-city frame
   -------------------------------------------------------------------------- */

.scroll-painting #daybreak .city-pair {
  --route-progress: 0;
  position: relative;
  z-index: 1;
  isolation: isolate;
  grid-column: 1 / -1;
  width: min(1440px, 100%);
  height: clamp(470px, 70svh, 760px);
  min-height: clamp(470px, 70svh, 760px);
  margin: 0 auto;
  overflow: hidden;
  contain: layout paint;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
}

.scroll-painting #daybreak .city-pair::before {
  position: absolute;
  z-index: -1;
  inset: 4% 0 2%;
  border-radius: 0;
  content: "";
  opacity: .78;
  pointer-events: none;
  background:
    radial-gradient(ellipse 27% 25% at 78% 34%, rgb(221 207 177 / .075), transparent 74%),
    radial-gradient(ellipse 34% 22% at 19% 76%, rgb(40 91 93 / .17), transparent 76%),
    linear-gradient(180deg, transparent 35%, rgb(10 29 39 / .22) 64%, rgb(2 9 15 / .34));
  filter: none;
  transform: none;
  transition: opacity 1.8s ease, background 2.2s ease;
}

.scroll-painting #daybreak .city-pair::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  content: "";
  opacity: .84;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(2 8 14 / .18), transparent 28%, transparent 68%, rgb(2 7 12 / .26)),
    radial-gradient(ellipse 34% 20% at 78% 72%, rgb(209 165 111 / .045), transparent 73%);
  mix-blend-mode: normal;
  transform: none;
  transition: opacity 1.8s ease, background 2.2s ease;
}

.scroll-painting #daybreak .city-pair svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
  opacity: .62;
  filter: saturate(.7) contrast(1.08) brightness(.82);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 76% 58%;
  touch-action: pan-y;
  transition:
    opacity 1.4s ease,
    filter 1.6s ease,
    transform 2.2s var(--ritual-ease);
}

.scroll-painting #daybreak .city-pair.is-ritual-ready svg,
.scroll-painting #daybreak .city-pair[data-ritual="travelling"] svg {
  opacity: .98;
  filter: saturate(.82) contrast(1.14) brightness(.94);
}

.scroll-painting #daybreak .city-pair__wash-river {
  fill: #102630;
  opacity: .42;
}

.scroll-painting #daybreak .city-pair__wash-ink {
  fill: #0a1d29;
  opacity: .68;
  filter: blur(6px);
}

.scroll-painting #daybreak .city-pair__moon-wash {
  fill: #d4c7a5;
  opacity: .075;
  filter: blur(.5px);
  transform: scale(.76);
  transform-box: fill-box;
  transform-origin: center;
}

.scroll-painting #daybreak .city-pair__moon-water {
  stroke: rgb(210 173 123 / .16);
  stroke-width: 8;
  opacity: .34;
  filter: blur(5px);
}

.scroll-painting #daybreak .city-pair__mist {
  opacity: .32;
  animation: none;
}

.scroll-painting #daybreak .city-pair__mist path {
  stroke: rgb(116 144 151 / .27);
}

.scroll-painting #daybreak .city-pair__birds {
  stroke: rgb(146 159 158 / .28);
}

.scroll-painting #daybreak .city-pair__ridge {
  fill: none;
  stroke: rgb(111 145 149 / .55);
}

.scroll-painting #daybreak .city-pair__ridge--near {
  fill: rgb(25 59 65 / .58);
  stroke: rgb(119 153 153 / .6);
}

.scroll-painting #daybreak .city-pair__ridge--far {
  stroke: rgb(103 137 141 / .46);
}

.scroll-painting #daybreak .city-pair__water,
.scroll-painting #daybreak .city-pair__river {
  stroke: rgb(125 151 156 / .46);
}

.scroll-painting #daybreak .city-pair__village rect,
.scroll-painting #daybreak .city-pair__bund rect,
.scroll-painting #daybreak .city-pair__tower,
.scroll-painting #daybreak .city-pair__pearl circle {
  fill: rgb(17 31 41 / .72);
  stroke: rgb(145 158 161 / .58);
}

.scroll-painting #daybreak .city-pair__pearl line {
  stroke: rgb(148 161 164 / .6);
  opacity: .72;
}

.scroll-painting #daybreak .city-pair__reflections line {
  stroke: rgb(181 145 105 / .24);
}

.scroll-painting #daybreak .city-pair__window {
  fill: var(--ritual-gold);
  opacity: .46;
  filter: drop-shadow(0 0 2px rgb(213 170 112 / .32));
}

/* The unlit path is an old ink trace.  It becomes clearer when a returning
   visit has route history, while the path the visitor operates stays warm. */
.scroll-painting #daybreak .city-pair__route {
  fill: none;
  stroke: rgb(144 162 169 / .56);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 2.2 5.8;
  opacity: .5;
  vector-effect: non-scaling-stroke;
  filter: none;
  transition: opacity 1.2s ease, stroke 1.2s ease;
}

body.has-route-history.scroll-painting #daybreak .city-pair__route {
  stroke: rgb(157 174 179 / .62);
  opacity: .64;
}

.scroll-painting #daybreak .city-pair__route-progress {
  fill: none;
  stroke: var(--ritual-gold);
  stroke-width: 2.15;
  stroke-linecap: round;
  opacity: .94;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: calc(var(--route-progress) * 100) 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgb(213 170 112 / .48));
  transition: opacity 1.6s ease .45s, filter 1.6s ease;
}

.scroll-painting #daybreak .city-pair[data-ritual="travelling"] .city-pair__route-progress {
  stroke: var(--ritual-gold-bright);
  opacity: .98;
  filter: drop-shadow(0 0 5px rgb(220 177 119 / .5));
}

.scroll-painting #daybreak .city-pair__route-light {
  stroke: var(--ritual-gold-bright);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 4px rgb(225 183 126 / .38));
}

.scroll-painting #daybreak .city-pair__arrival {
  fill: #aab9b9;
  opacity: .54;
}

.scroll-painting #daybreak .city-pair__arrival--to {
  fill: var(--ritual-gold);
}

.scroll-painting #daybreak .city-pair__handle {
  cursor: grab;
  transition: opacity 1.15s ease;
}

.scroll-painting #daybreak .city-pair__handle:active {
  cursor: grabbing;
}

.scroll-painting #daybreak .city-pair__handle-halo {
  fill: rgb(213 170 112 / .12);
  stroke: rgb(232 205 164 / .7);
  stroke-width: 1.15;
  opacity: .72;
  filter: drop-shadow(0 0 5px rgb(213 170 112 / .28));
  animation: none;
}

.scroll-painting #daybreak .city-pair.is-ritual-ready:not(.has-route-arrived) .city-pair__handle-halo {
  opacity: .82;
  animation: final-ritual-handle-in 1.9s var(--ritual-ease) 1 both;
}

.scroll-painting #daybreak .city-pair__handle-core {
  fill: var(--ritual-gold-bright);
  stroke: rgb(255 241 211 / .82);
  stroke-width: .75;
  filter: drop-shadow(0 0 4px rgb(226 182 120 / .72));
}

@keyframes final-ritual-handle-in {
  0% { opacity: .18; transform: scale(.72); }
  52% { opacity: .94; transform: scale(1.08); }
  100% { opacity: .82; transform: scale(1); }
}

/* History markers are retained as quiet pinpricks, not labels. */
.scroll-painting #daybreak .city-pair__imprint-word,
.scroll-painting #daybreak .city-pair__memory-exposure-word {
  display: none;
}

.scroll-painting #daybreak .city-pair__imprints,
.scroll-painting #daybreak .city-pair__memory-exposures {
  opacity: .24;
  transition: opacity .9s ease;
}

.scroll-painting #daybreak .city-pair__imprint-halo,
.scroll-painting #daybreak .city-pair__memory-exposure-wash {
  fill: rgb(104 124 132 / .035);
  stroke: rgb(132 148 153 / .25);
  filter: none;
}

.scroll-painting #daybreak .city-pair__imprint-core,
.scroll-painting #daybreak .city-pair__memory-exposure-core {
  fill: rgb(153 164 163 / .42);
  filter: none;
}

/* One readable instruction and two place names are enough. */
.scroll-painting #daybreak #closingPrompt,
.scroll-painting #daybreak .city-weather,
.scroll-painting #daybreak .page-warmth-echo {
  display: none !important;
}

.scroll-painting #daybreak .city-pair__place {
  z-index: 4;
  bottom: 4.5%;
  display: flex;
  align-items: baseline;
  gap: .72em;
  color: rgb(225 223 211 / .84);
  opacity: 1;
  text-shadow: 0 2px 16px rgb(0 4 8 / .72);
  transition:
    opacity 1.15s ease,
    filter 1.15s ease,
    transform 1.3s var(--ritual-ease);
}

.scroll-painting #daybreak .city-pair__place b {
  font-size: clamp(.9rem, 1.25vw, 1.08rem);
  font-weight: 400;
  letter-spacing: .22em;
}

.scroll-painting #daybreak .city-pair__place small {
  display: inline;
  color: rgb(184 192 191 / .72);
  font-size: .61rem;
  letter-spacing: .15em;
  opacity: 1;
}

.scroll-painting #daybreak .city-pair__place--yunnan {
  left: 3.6%;
}

.scroll-painting #daybreak .city-pair__place--shanghai {
  right: 3.6%;
}

.scroll-painting #daybreak .city-pair__gesture-hint {
  z-index: 5;
  top: 12%;
  bottom: auto;
  left: 50%;
  display: grid;
  width: min(34em, 76vw);
  gap: 8px;
  margin: 0;
  color: rgb(234 224 204 / .88);
  font-family: var(--serif);
  font-size: clamp(.92rem, 1.12vw, 1.08rem);
  letter-spacing: .1em;
  line-height: 1.75;
  text-align: center;
  text-shadow: 0 2px 24px rgb(0 4 8 / .82);
  opacity: .9;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    top 1.8s var(--ritual-ease),
    opacity 1.2s ease,
    transform 1.8s var(--ritual-ease);
}

.scroll-painting #daybreak .city-pair__gesture-hint > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  opacity: 1;
}

.scroll-painting #daybreak .city-pair__gesture-hint small {
  color: rgb(173 187 190 / .72);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .11em;
  line-height: 1.6;
  opacity: 1;
  white-space: normal;
  transition: opacity .8s ease;
}

.scroll-painting #daybreak .city-pair:has(.city-pair__range:focus-visible) {
  outline: 1px solid rgb(229 206 165 / .7);
  outline-offset: -8px;
}

.scroll-painting #daybreak .city-pair:has(.city-pair__range:focus-visible) .city-pair__handle-halo {
  fill: rgb(213 170 112 / .24);
  stroke: #fff0cf;
  stroke-width: 2;
}

/* While the route is being made, everything that does not help the gesture
   steps out of frame. */
.scroll-painting #daybreak .city-pair[data-ritual="travelling"] .city-pair__imprints,
.scroll-painting #daybreak .city-pair[data-ritual="travelling"] .city-pair__memory-exposures {
  opacity: 0;
}

.scroll-painting #daybreak .city-pair[data-ritual="travelling"] .city-pair__gesture-hint small {
  opacity: 0;
}

.scroll-painting #daybreak .city-pair[data-ritual="travelling"] .city-pair__place small {
  opacity: 0;
}

body.is-city-pair-active.scroll-painting #daybreak .daybreak__copy,
body.is-city-pair-active.scroll-painting #daybreak .closing-gesture {
  opacity: .04;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 1.25s ease, filter 1.25s ease;
}

body.is-city-pair-active.scroll-painting #daybreak .closing-after,
body.is-final-bloom.scroll-painting #daybreak .closing-after,
body.has-route-arrived.scroll-painting #daybreak .closing-after {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

body.is-city-pair-active.scroll-painting #lightNote,
body.is-final-bloom.scroll-painting #lightNote,
body.has-route-arrived.scroll-painting #lightNote {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Arrival: one restrained push, then a single landing sentence.
   Both the current state class and the persistent body classes are supported.
   -------------------------------------------------------------------------- */

.scroll-painting #daybreak .city-pair.has-route-arrived svg,
body.has-route-arrived.scroll-painting #daybreak .city-pair svg,
body.is-final-bloom.scroll-painting #daybreak .city-pair svg {
  opacity: 1;
  filter: saturate(.9) contrast(1.18) brightness(1);
  transform: translate3d(0, -1.2%, 0) scale(1.055);
}

.scroll-painting #daybreak .city-pair.has-route-arrived::before,
body.has-route-arrived.scroll-painting #daybreak .city-pair::before,
body.is-final-bloom.scroll-painting #daybreak .city-pair::before {
  opacity: .98;
  background:
    radial-gradient(ellipse 30% 28% at 78% 34%, rgb(230 207 166 / .13), transparent 73%),
    radial-gradient(ellipse 38% 24% at 20% 74%, rgb(49 98 98 / .2), transparent 76%),
    linear-gradient(180deg, transparent 33%, rgb(13 34 44 / .28) 65%, rgb(3 10 16 / .42));
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__place,
body.has-route-arrived.scroll-painting #daybreak .city-pair__place,
body.is-final-bloom.scroll-painting #daybreak .city-pair__place {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(12px);
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__imprints,
.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__memory-exposures,
body.has-route-arrived.scroll-painting #daybreak .city-pair__imprints,
body.has-route-arrived.scroll-painting #daybreak .city-pair__memory-exposures,
body.is-final-bloom.scroll-painting #daybreak .city-pair__imprints,
body.is-final-bloom.scroll-painting #daybreak .city-pair__memory-exposures {
  opacity: 0;
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__handle,
body.has-route-arrived.scroll-painting #daybreak .city-pair__handle,
body.is-final-bloom.scroll-painting #daybreak .city-pair__handle {
  opacity: 0;
  pointer-events: none;
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__route,
body.has-route-arrived.scroll-painting #daybreak .city-pair__route,
body.is-final-bloom.scroll-painting #daybreak .city-pair__route {
  opacity: .42;
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__route-progress,
body.has-route-arrived.scroll-painting #daybreak .city-pair__route-progress,
body.is-final-bloom.scroll-painting #daybreak .city-pair__route-progress {
  opacity: .34;
  filter: drop-shadow(0 0 2px rgb(213 170 112 / .2));
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__gesture-hint,
body.has-route-arrived.scroll-painting #daybreak .city-pair__gesture-hint,
body.is-final-bloom.scroll-painting #daybreak .city-pair__gesture-hint {
  top: 47%;
  width: min(31em, 82vw);
  color: rgb(241 226 197 / .94);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  letter-spacing: .11em;
  line-height: 1.9;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: .5s;
}

.scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__gesture-hint small,
body.has-route-arrived.scroll-painting #daybreak .city-pair__gesture-hint small,
body.is-final-bloom.scroll-painting #daybreak .city-pair__gesture-hint small {
  display: none;
}

/* JS adds this class for 2.8 seconds.  The light travels once and settles; it
   never blinks or loops. */
.scroll-painting #daybreak .city-pair.is-touch-connecting .city-pair__route-light--touch {
  display: block;
  stroke: var(--ritual-gold-bright);
  stroke-width: 2.35;
  opacity: 0;
  animation: final-ritual-afterglow 2.6s var(--ritual-ease) 1 both;
}

@keyframes final-ritual-afterglow {
  0% { opacity: 0; stroke-dashoffset: 102; }
  26% { opacity: .62; }
  72% { opacity: .38; }
  100% { opacity: 0; stroke-dashoffset: -99; }
}

body.has-route-arrived.scroll-painting #daybreak .colophon::before,
body.is-final-bloom.scroll-painting #daybreak .colophon::before {
  background:
    radial-gradient(circle at 78% 24%, rgb(238 218 177 / .14) 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 78% 24%, rgb(203 205 183 / .1) 0 9%, transparent 25%),
    radial-gradient(ellipse 42% 15% at 74% 72%, rgb(213 172 116 / .09), transparent 74%),
    radial-gradient(ellipse 44% 20% at 22% 68%, rgb(55 105 104 / .13), transparent 72%);
}

/* --------------------------------------------------------------------------
   Private archive: a paper envelope with a seal, not another horizontal CTA.
   The breathing room is deliberate but no longer a full empty screen.
   -------------------------------------------------------------------------- */

.scroll-painting #daybreak .archive-door {
  --archive-breath: clamp(220px, 36svh, 380px);
  --archive-tail: clamp(100px, 16svh, 180px);
  position: relative;
  z-index: 4;
  isolation: isolate;
  display: grid;
  width: min(700px, calc(100% - 40px));
  max-width: 700px;
  grid-column: 3 / 11;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
  margin: var(--archive-breath) auto var(--archive-tail);
  padding: 0;
  border: 0;
  color: var(--ritual-paper);
  background: transparent;
  box-shadow: none;
  text-align: center;
  backdrop-filter: none;
}

.scroll-painting #daybreak .archive-door::after {
  position: absolute;
  z-index: -1;
  /* Deliberately overlap the closing frame. Sub-pixel rounding between the
     full-bleed colophon and this negative-margin field otherwise leaves a
     bright horizontal seam on some viewport heights. */
  top: calc(0px - var(--archive-breath) - 56px);
  right: calc(50% - 50vw);
  bottom: calc(0px - var(--archive-tail));
  left: calc(50% - 50vw);
  width: auto;
  height: auto;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 24% at 50% 56%, rgb(138 93 65 / .07), transparent 76%),
    linear-gradient(
      180deg,
      transparent 0,
      #030a12 56px,
      #050e18 48%,
      #07111a 100%
    );
}

.scroll-painting #daybreak .archive-door::before {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 1px;
  height: clamp(56px, 8svh, 84px);
  margin: 0 auto clamp(28px, 4svh, 42px);
  content: "";
  opacity: .74;
  background: linear-gradient(180deg, transparent, rgb(203 178 139 / .48));
  transform: scaleY(1);
  transform-origin: center top;
}

.scroll-painting #daybreak .archive-door__copy {
  max-width: 34em;
  margin: 0 auto;
}

.scroll-painting #daybreak .archive-door__copy .eyebrow {
  color: rgb(202 174 133 / .74);
  font-size: .65rem;
  letter-spacing: .2em;
}

.scroll-painting #daybreak .archive-door__copy h2 {
  max-width: none;
  margin: 20px auto 0;
  color: rgb(237 225 203 / .96);
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.28;
  text-wrap: balance;
}

.scroll-painting #daybreak .archive-door__copy > p:last-child {
  max-width: 35em;
  margin: 25px auto 0;
  color: rgb(178 183 180 / .76);
  font-size: clamp(.86rem, 1.02vw, .98rem);
  line-height: 2;
}

.scroll-painting #daybreak .archive-door__action {
  width: min(440px, 100%);
  margin: clamp(38px, 5svh, 54px) auto 0;
  padding: 0;
}

.scroll-painting #daybreak .archive-door__button {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 190px;
  grid-template-columns: 1fr;
  place-items: start center;
  gap: 0;
  overflow: hidden;
  padding: 34px 28px 70px;
  border: 1px solid rgb(213 192 157 / .3);
  border-radius: 2px;
  color: rgb(234 218 191 / .94);
  background:
    linear-gradient(145deg, transparent 49.6%, rgb(218 194 157 / .14) 49.8% 50.2%, transparent 50.4%) left bottom / 51% 66% no-repeat,
    linear-gradient(215deg, transparent 49.6%, rgb(218 194 157 / .14) 49.8% 50.2%, transparent 50.4%) right bottom / 51% 66% no-repeat,
    linear-gradient(180deg, rgb(32 38 39 / .93), rgb(18 28 33 / .96));
  box-shadow:
    0 28px 80px rgb(0 2 6 / .32),
    inset 0 1px rgb(255 244 217 / .055);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color .7s ease,
    background .9s ease,
    box-shadow .9s ease;
}

.scroll-painting #daybreak .archive-door__button::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 31%;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(54 57 53 / .78), rgb(26 36 39 / .92));
  clip-path: polygon(0 0, 50% 76%, 100% 0);
  opacity: .78;
  transform: translateY(-42%);
  transform-origin: top center;
  transition: transform 1s var(--ritual-ease), opacity .8s ease;
}

.scroll-painting #daybreak .archive-door__button::after {
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: 47px;
  left: 12%;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(215 190 153 / .24), transparent);
}

.scroll-painting #daybreak .archive-door__button > span {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: none;
}

.scroll-painting #daybreak .archive-door__button strong {
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 400;
  letter-spacing: .14em;
}

.scroll-painting #daybreak .archive-door__button small {
  color: rgb(174 182 181 / .7);
  font-size: .65rem;
  letter-spacing: .08em;
}

.scroll-painting #daybreak .archive-door__button > i {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgb(190 108 93 / .74);
  border-radius: 48% 52% 46% 54%;
  color: rgb(246 224 193 / .95);
  background: rgb(128 55 49 / .94);
  box-shadow:
    inset 0 0 0 3px rgb(255 225 190 / .055),
    0 9px 24px rgb(0 2 5 / .28);
  transform: translateX(-50%) rotate(-3deg);
  transition:
    background .65s ease,
    box-shadow .65s ease,
    transform .8s var(--ritual-ease);
}

.scroll-painting #daybreak .archive-door__button > i::before,
.scroll-painting #daybreak .archive-door__button > i::after {
  display: none;
}

.scroll-painting #daybreak .archive-door__button > i b {
  color: inherit;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

.scroll-painting #daybreak .archive-door__button:hover,
.scroll-painting #daybreak .archive-door__button:focus-visible {
  border-color: rgb(229 202 161 / .54);
  background:
    linear-gradient(145deg, transparent 49.6%, rgb(230 206 168 / .2) 49.8% 50.2%, transparent 50.4%) left bottom / 51% 66% no-repeat,
    linear-gradient(215deg, transparent 49.6%, rgb(230 206 168 / .2) 49.8% 50.2%, transparent 50.4%) right bottom / 51% 66% no-repeat,
    linear-gradient(180deg, rgb(38 44 43 / .96), rgb(20 31 36 / .98));
  box-shadow:
    0 34px 92px rgb(0 2 6 / .4),
    0 0 0 1px rgb(224 198 158 / .06),
    inset 0 1px rgb(255 244 217 / .08);
}

.scroll-painting #daybreak .archive-door__button:hover::before,
.scroll-painting #daybreak .archive-door__button:focus-visible::before {
  opacity: .92;
  transform: translateY(-36%);
}

.scroll-painting #daybreak .archive-door__button:hover > i,
.scroll-painting #daybreak .archive-door__button:focus-visible > i,
.scroll-painting #daybreak .archive-door__button.is-magnetized > i {
  background: rgb(146 61 53 / .98);
  box-shadow:
    inset 0 0 0 3px rgb(255 225 190 / .07),
    0 12px 28px rgb(0 2 5 / .34);
  transform: translateX(-50%) rotate(0deg) scale(1.035);
}

.scroll-painting #daybreak .archive-door__button.is-magnetized > span {
  transform: none;
}

.scroll-painting #daybreak .archive-door__button:focus-visible {
  outline: 2px solid rgb(238 217 179 / .86);
  outline-offset: 6px;
}

.scroll-painting #daybreak .archive-door__button:active {
  transform: none;
}

.scroll-painting #daybreak .archive-door__action > p {
  margin: 17px auto 0;
  color: rgb(152 164 165 / .7);
  font-size: .64rem;
  letter-spacing: .09em;
  line-height: 1.7;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive direction
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .scroll-painting #daybreak .colophon {
    min-height: max(600px, 92svh);
    padding:
      clamp(38px, 6svh, 58px)
      max(18px, env(safe-area-inset-right))
      clamp(46px, 7svh, 68px)
      max(18px, env(safe-area-inset-left));
  }

  .scroll-painting #daybreak .city-pair {
    width: 100%;
    height: clamp(410px, 64svh, 580px);
    min-height: clamp(410px, 64svh, 580px);
    margin: 0;
  }

  .scroll-painting #daybreak .city-pair svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 156%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 72% 58%;
  }

  .scroll-painting #daybreak .city-pair.has-route-arrived svg,
  body.has-route-arrived.scroll-painting #daybreak .city-pair svg,
  body.is-final-bloom.scroll-painting #daybreak .city-pair svg {
    transform: translate(-50%, -1.2%) scale(1.045);
  }

  .scroll-painting #daybreak .city-pair__place {
    bottom: 5%;
  }

  .scroll-painting #daybreak .city-pair__place small {
    display: none;
  }

  .scroll-painting #daybreak .city-pair__gesture-hint {
    top: 10%;
    width: min(31em, 86vw);
    font-size: clamp(.9rem, 3.1vw, 1.02rem);
  }

  .scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__gesture-hint,
  body.has-route-arrived.scroll-painting #daybreak .city-pair__gesture-hint,
  body.is-final-bloom.scroll-painting #daybreak .city-pair__gesture-hint {
    top: 42%;
    width: min(22em, 82vw);
    font-size: clamp(1.12rem, 4.4vw, 1.45rem);
  }

  .scroll-painting #daybreak .city-pair__route-progress {
    stroke-width: 2.15;
  }

  .scroll-painting #daybreak .city-pair__route {
    stroke-width: 1.3;
  }

  .scroll-painting #daybreak .archive-door {
    --archive-breath: clamp(215px, 36svh, 360px);
    width: min(620px, calc(100% - 32px));
    grid-column: 2 / 12;
  }
}

@media (max-width: 560px) {
  .scroll-painting #daybreak .colophon {
    min-height: max(560px, 88svh);
    margin-top: 54px;
    padding:
      max(34px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      42px
      max(12px, env(safe-area-inset-left));
  }

  .scroll-painting #daybreak .city-pair {
    height: clamp(390px, 62svh, 500px);
    min-height: clamp(390px, 62svh, 500px);
  }

  .scroll-painting #daybreak .city-pair svg {
    width: 156%;
  }

  .scroll-painting #daybreak .city-pair__place {
    bottom: 3.5%;
  }

  .scroll-painting #daybreak .city-pair__place b {
    font-size: .88rem;
    letter-spacing: .18em;
  }

  .scroll-painting #daybreak .city-pair__place--yunnan {
    left: 3%;
  }

  .scroll-painting #daybreak .city-pair__place--shanghai {
    right: 3%;
  }

  .scroll-painting #daybreak .city-pair__gesture-hint {
    top: 8%;
    width: min(24em, 88vw);
    gap: 7px;
    font-size: .91rem;
    letter-spacing: .075em;
  }

  .scroll-painting #daybreak .city-pair__gesture-hint small {
    font-size: .59rem;
    letter-spacing: .075em;
  }

  .scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__gesture-hint,
  body.has-route-arrived.scroll-painting #daybreak .city-pair__gesture-hint,
  body.is-final-bloom.scroll-painting #daybreak .city-pair__gesture-hint {
    top: 39%;
    width: min(20em, 84vw);
    font-size: clamp(1.08rem, 5.2vw, 1.34rem);
    letter-spacing: .08em;
    line-height: 1.8;
  }

  .scroll-painting #daybreak .archive-door {
    --archive-breath: clamp(190px, 35svh, 310px);
    width: calc(100% - 24px);
    grid-column: 1 / -1;
    margin-bottom: max(92px, calc(72px + env(safe-area-inset-bottom)));
  }

  .scroll-painting #daybreak .archive-door::before {
    height: 52px;
    margin-bottom: 28px;
  }

  .scroll-painting #daybreak .archive-door__copy .eyebrow {
    font-size: .61rem;
  }

  .scroll-painting #daybreak .archive-door__copy h2 {
    margin-top: 17px;
    font-size: clamp(1.92rem, 9.4vw, 2.55rem);
    line-height: 1.32;
  }

  .scroll-painting #daybreak .archive-door__copy > p:last-child {
    margin-top: 22px;
    padding-inline: 4px;
    font-size: .86rem;
    line-height: 1.95;
  }

  .scroll-painting #daybreak .archive-door__action {
    width: min(100%, 390px);
    margin-top: 36px;
  }

  .scroll-painting #daybreak .archive-door__button {
    min-height: 174px;
    padding: 30px 18px 66px;
  }

  .scroll-painting #daybreak .archive-door__button strong {
    font-size: 1.02rem;
  }

  .scroll-painting #daybreak .archive-door__button small {
    font-size: .61rem;
  }

  .scroll-painting #daybreak .archive-door__button > i {
    bottom: 17px;
    width: 48px;
    height: 48px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .scroll-painting #daybreak .colophon {
    min-height: 520px;
    padding-block: 28px;
  }

  .scroll-painting #daybreak .city-pair {
    height: 430px;
    min-height: 430px;
  }

  .scroll-painting #daybreak .city-pair__gesture-hint {
    top: 5%;
  }

  .scroll-painting #daybreak .city-pair.has-route-arrived .city-pair__gesture-hint,
  body.has-route-arrived.scroll-painting #daybreak .city-pair__gesture-hint,
  body.is-final-bloom.scroll-painting #daybreak .city-pair__gesture-hint {
    top: 38%;
  }

  .scroll-painting #daybreak .archive-door {
    --archive-breath: 240px;
  }
}

/* --------------------------------------------------------------------------
   Motion and contrast contracts
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .scroll-painting #daybreak .colophon::before,
  .scroll-painting #daybreak .city-pair::before,
  .scroll-painting #daybreak .city-pair::after,
  .scroll-painting #daybreak .city-pair svg,
  .scroll-painting #daybreak .city-pair__route,
  .scroll-painting #daybreak .city-pair__route-progress,
  .scroll-painting #daybreak .city-pair__handle,
  .scroll-painting #daybreak .city-pair__handle-halo,
  .scroll-painting #daybreak .city-pair__place,
  .scroll-painting #daybreak .city-pair__gesture-hint,
  .scroll-painting #daybreak .city-pair__gesture-hint small,
  .scroll-painting #daybreak .archive-door__button,
  .scroll-painting #daybreak .archive-door__button::before,
  .scroll-painting #daybreak .archive-door__button > i {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .scroll-painting #daybreak .city-pair.has-route-arrived svg,
  body.has-route-arrived.scroll-painting #daybreak .city-pair svg,
  body.is-final-bloom.scroll-painting #daybreak .city-pair svg {
    transform: none;
  }

  .scroll-painting #daybreak .city-pair.is-touch-connecting .city-pair__route-light--touch {
    display: none;
  }

  body.is-city-pair-active.scroll-painting #daybreak .daybreak__copy,
  body.is-city-pair-active.scroll-painting #daybreak .closing-gesture {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .scroll-painting #daybreak .city-pair svg,
  .scroll-painting #daybreak .city-pair.has-route-arrived svg,
  body.has-route-arrived.scroll-painting #daybreak .city-pair svg,
  body.is-final-bloom.scroll-painting #daybreak .city-pair svg {
    transform: translateX(-50%);
  }
}

body.is-data-saver.scroll-painting #daybreak .city-pair__wash-ink,
body.is-data-saver.scroll-painting #daybreak .city-pair__moon-water,
body.is-data-saver.scroll-painting #daybreak .city-pair__window,
body.is-data-saver.scroll-painting #daybreak .city-pair__route-progress {
  filter: none;
}

@media (forced-colors: active) {
  .scroll-painting #daybreak .colophon,
  .scroll-painting #daybreak .archive-door,
  .scroll-painting #daybreak .archive-door__button {
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .scroll-painting #daybreak .colophon::before,
  .scroll-painting #daybreak .colophon::after,
  .scroll-painting #daybreak .city-pair::before,
  .scroll-painting #daybreak .city-pair::after,
  .scroll-painting #daybreak .archive-door::after,
  .scroll-painting #daybreak .archive-door__button::before,
  .scroll-painting #daybreak .archive-door__button::after,
  .scroll-painting #daybreak .city-pair__wash,
  .scroll-painting #daybreak .city-pair__mist,
  .scroll-painting #daybreak .city-pair__memory-exposures,
  .scroll-painting #daybreak .city-pair__imprints {
    display: none;
  }

  .scroll-painting #daybreak .city-pair__ridge,
  .scroll-painting #daybreak .city-pair__water,
  .scroll-painting #daybreak .city-pair__river,
  .scroll-painting #daybreak .city-pair__route,
  .scroll-painting #daybreak .city-pair__route-progress,
  .scroll-painting #daybreak .city-pair__pearl line {
    stroke: CanvasText;
    filter: none;
  }

  .scroll-painting #daybreak .city-pair__place,
  .scroll-painting #daybreak .city-pair__gesture-hint,
  .scroll-painting #daybreak .city-pair__gesture-hint small,
  .scroll-painting #daybreak .archive-door__copy .eyebrow,
  .scroll-painting #daybreak .archive-door__copy h2,
  .scroll-painting #daybreak .archive-door__copy > p:last-child,
  .scroll-painting #daybreak .archive-door__action > p {
    color: CanvasText;
    text-shadow: none;
  }

  .scroll-painting #daybreak .archive-door__button {
    border: 1px solid ButtonText;
  }

  .scroll-painting #daybreak .archive-door__button > i {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }

  .scroll-painting #daybreak .city-pair__range {
    position: relative;
    left: auto;
    width: min(420px, 90%);
    height: auto;
    margin: 0 auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}