/*
 * 第二剪辑：环境先于装饰，真实记忆先于虚构人物。
 * This file is intentionally last in the cascade. It changes composition and
 * camera language without starting another permanent animation system.
 */

.scroll-painting {
  --world-x: 0px;
  --world-y: 0px;
  --world-near-x: 0px;
  --world-near-y: 0px;
  --world-scale: 1.055;
  --world-route: 0;
  --world-light: 0;
  --world-river-x: 0px;
  --world-river-y: 0px;
  --world-river-opacity: 0.08;
}

.scroll-painting .two-city-world {
  position: fixed;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  pointer-events: none;
  background: #07111b;
  filter: saturate(0.82) contrast(1.04) brightness(0.78);
  transition:
    opacity 1.45s cubic-bezier(.2, .72, .22, 1),
    filter 1.65s ease;
}

.scroll-painting .two-city-world picture,
.scroll-painting .two-city-world__image,
.scroll-painting .two-city-world__near,
.scroll-painting .two-city-world__river,
.scroll-painting .two-city-world__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scroll-painting .two-city-world picture {
  transform:
    translate3d(var(--world-x), var(--world-y), 0)
    scale(var(--world-scale));
  transform-origin: 50% 58%;
  transition: transform 1.35s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.scroll-painting .two-city-world__image {
  object-fit: cover;
  object-position: 50% 51%;
}

.scroll-painting .two-city-world__near {
  z-index: 1;
  inset: -2%;
  width: 104%;
  height: 104%;
  opacity: 0.18;
  background: url("../assets/generated/two-cities-moonlit-v2.webp") 50% 51% / cover no-repeat;
  filter: saturate(0.78) contrast(1.08) brightness(0.72) blur(1.2px);
  mask-image: linear-gradient(180deg, transparent 48%, rgb(0 0 0 / 0.28) 63%, #000 88%);
  transform:
    translate3d(var(--world-near-x), var(--world-near-y), 0)
    scale(1.055);
  transform-origin: 50% 82%;
  transition:
    transform 1.15s cubic-bezier(.16, 1, .3, 1),
    opacity 1.4s ease;
  will-change: transform;
}

.scroll-painting .two-city-world__river {
  z-index: 2;
  opacity: var(--world-river-opacity);
  background:
    radial-gradient(ellipse 12% 47% at 51% 73%, rgb(226 228 218 / 0.26), transparent 74%),
    linear-gradient(112deg, transparent 34%, rgb(182 204 211 / 0.08) 51%, rgb(228 210 177 / 0.11) 67%, transparent 79%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: translate3d(var(--world-river-x), var(--world-river-y), 0);
  transition:
    opacity 1.2s ease,
    transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting .two-city-world__veil {
  z-index: 3;
  background:
    linear-gradient(90deg, rgb(2 7 14 / 0.5), rgb(3 9 17 / 0.12) 44%, rgb(3 8 15 / 0.15) 68%, rgb(2 6 12 / 0.34)),
    linear-gradient(180deg, rgb(2 6 12 / 0.18), transparent 38% 70%, rgb(2 6 12 / 0.38));
  transition: background 1.4s ease;
}

.scroll-painting:not(.has-entered) .two-city-world {
  opacity: 0.035;
}

.scroll-painting.has-entered[data-chapter="01"] .two-city-world {
  opacity: 0.16;
}

.scroll-painting.has-entered[data-chapter="02"] .two-city-world {
  opacity: 0.52;
  filter: saturate(0.72) contrast(1.05) brightness(0.72);
}

.scroll-painting.has-entered[data-chapter="03"] .two-city-world {
  opacity: 0.68;
  filter: saturate(0.86) contrast(1.04) brightness(0.76);
}

.scroll-painting.has-entered[data-chapter="04"] .two-city-world {
  opacity: 0.22;
  filter: sepia(0.1) saturate(0.62) contrast(0.96) brightness(1.02);
}

.scroll-painting.has-entered[data-chapter="05"] .two-city-world {
  opacity: 0.74;
  filter: sepia(0.08) saturate(0.88) contrast(0.98) brightness(1.09);
}

.scroll-painting.has-entered[data-chapter="02"] .portrait-world,
.scroll-painting.has-entered[data-chapter="03"] .portrait-world,
.scroll-painting.has-entered[data-chapter="04"] .portrait-world,
.scroll-painting.has-entered[data-chapter="05"] .portrait-world,
.scroll-painting[data-transition-from="02"][data-transition-to="03"].is-chapter-transitioning .portrait-world {
  opacity: 0 !important;
  visibility: hidden;
}

.scroll-painting.is-world-listening .two-city-world__near {
  opacity: 0.27;
}

.scroll-painting.is-world-lit .two-city-world__river {
  animation: second-cut-river-answer 1.6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes second-cut-river-answer {
  0% { opacity: 0.08; filter: blur(11px); }
  38% { opacity: 0.39; filter: blur(5px); }
  100% { opacity: var(--world-river-opacity); filter: blur(8px); }
}

/* The old memory sky remains an API surface. Only its photographic exposure is
   allowed back on screen; its decorative mountains and duplicate stars stay off. */
.scroll-painting .memory-sky {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
  background: transparent !important;
}

.scroll-painting .memory-sky > :not(#memoryProjection) {
  display: none !important;
}

.scroll-painting #memoryProjection {
  position: absolute;
  inset: 0;
  display: block !important;
  pointer-events: none;
}

.scroll-painting #memoryProjection > * {
  display: none !important;
}

/* One chapter leaves before the next title enters. The 02→03 cut is an empty
   moon-road shot rather than another portrait or a bright ruler. */
body.scroll-painting[data-transition-from="02"][data-transition-to="03"].is-chapter-transitioning
  .scroll-transition {
  opacity: 0.44;
  background:
    radial-gradient(ellipse 10% 56% at 50% 66%, rgb(232 229 210 / 0.19), transparent 73%),
    radial-gradient(circle at 50% 24%, rgb(235 233 215 / 0.16), transparent 9%),
    linear-gradient(180deg, rgb(4 11 20 / 0.04), rgb(4 12 21 / 0.38) 58%, rgb(3 9 16 / 0.54));
  mix-blend-mode: screen;
  animation: second-cut-water-handoff 1.46s cubic-bezier(.2, .72, .22, 1) both;
}

body.scroll-painting[data-transition-from="02"][data-transition-to="03"].is-chapter-transitioning
  #contact-sheet .section-heading {
  opacity: 0 !important;
  transform: translate3d(0, -22px, 0);
}

body.scroll-painting[data-transition-from="02"][data-transition-to="03"].is-chapter-transitioning
  #ordinary-days .ordinary-days__heading {
  opacity: 0 !important;
}

@keyframes second-cut-water-handoff {
  0% { opacity: 0; transform: scale(1.025) translate3d(0, 18px, 0); }
  43% { opacity: 0.44; }
  100% { opacity: 0; transform: scale(1.075) translate3d(0, -18px, 0); }
}

/* Real photographs are the shot; prose becomes its counter-shot. */
@media (min-width: 901px) {
  .scroll-painting .memory {
    min-height: min(980px, 108svh);
    column-gap: clamp(34px, 5vw, 84px);
  }

  .scroll-painting .memory__visual {
    grid-column: 1 / 8;
    box-shadow: 0 34px 110px rgb(0 0 0 / 0.38);
    transition:
      opacity 1.1s ease,
      filter 1.15s ease,
      transform 1.25s cubic-bezier(.16, 1, .3, 1),
      box-shadow 1.2s ease;
  }

  .scroll-painting .memory:nth-child(even) .memory__visual {
    grid-column: 6 / 13;
  }

  .scroll-painting .memory:nth-child(2) .memory__visual {
    grid-column: 7 / 13;
  }

  .scroll-painting .memory__copy {
    grid-column: 9 / 13;
    padding-left: 0;
  }

  .scroll-painting .memory:nth-child(even) .memory__copy {
    grid-column: 1 / 5;
    grid-row: 1;
    padding: 0;
  }

  .scroll-painting .memory:nth-child(2) .memory__copy {
    grid-column: 1 / 6;
  }

  .scroll-painting .memory:not(.is-near) .memory__visual {
    opacity: 0.62;
    filter: saturate(0.72) brightness(0.84);
    transform: scale(0.975);
  }

  .scroll-painting .memory.is-near .memory__visual {
    opacity: 1;
    filter: none;
    transform: scale(1);
    box-shadow:
      0 42px 124px rgb(0 0 0 / 0.46),
      0 0 0 1px rgb(231 210 185 / 0.1);
  }

  .scroll-painting .memory:not(.is-near) .memory__copy {
    opacity: 0.56;
    transform: translateY(12px);
  }

  .scroll-painting .memory.is-near .memory__copy {
    opacity: 1;
    transform: none;
  }

  .scroll-painting .memory__copy {
    transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
  }
}

.scroll-painting .contact-sheet,
.scroll-painting .ordinary-days {
  background: transparent !important;
}

.scroll-painting .light-note {
  width: min(760px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  color: rgb(237 226 210 / 0.8);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 2px 22px rgb(0 0 0 / 0.8);
}

/* Chapter three becomes a full water-screen. Lines enter one breath at a time. */
.scroll-painting .ordinary-days__layout > .truth-beat,
.scroll-painting #truthTideScene {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: clamp(116px, 19vh, 220px) 0 0;
  padding: clamp(88px, 13vh, 150px) max(7vw, 28px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgb(3 9 17 / 0.12), rgb(3 10 18 / 0.42) 72%, rgb(2 7 13 / 0.58));
  box-shadow: none;
  isolation: isolate;
}

.scroll-painting #truthTideScene::before {
  opacity: 0.5;
  background:
    radial-gradient(ellipse 13% 50% at 76% 57%, rgb(226 221 195 / 0.14), transparent 75%),
    linear-gradient(180deg, transparent 45%, rgb(10 25 36 / 0.18));
}

.scroll-painting #truthBeatLine {
  position: relative;
  z-index: 5;
  width: min(9.6em, 72vw);
  max-width: none;
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 6.7rem);
  line-height: 1.12;
  white-space: normal;
}

.scroll-painting #truthBeatLine .truth-line {
  display: block;
  max-width: none;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 26px, 0);
}

.scroll-painting #truthTideScene.is-truth-screening #truthBeatLine .truth-line {
  animation: second-cut-truth-line 1.25s cubic-bezier(.16, 1, .3, 1) both;
}

.scroll-painting #truthTideScene.is-truth-screening #truthBeatLine .truth-line:nth-child(2) {
  animation-delay: 220ms;
}

.scroll-painting #truthTideScene.is-truth-screening #truthBeatLine .truth-line:nth-child(3) {
  animation-delay: 440ms;
}

.scroll-painting #truthTideScene.is-truth-screening #truthBeatLine .truth-line:nth-child(4) {
  animation-delay: 660ms;
}

@keyframes second-cut-truth-line {
  to { opacity: 1; filter: blur(0); transform: none; }
}

.scroll-painting #truthBeatAfter {
  position: relative;
  z-index: 5;
  max-width: 31em;
  margin: clamp(44px, 7vh, 78px) 0 0 12%;
  color: rgb(229 222 211 / 0.8);
  opacity: 0;
  transform: translateY(18px);
}

.scroll-painting #truthTideScene.is-truth-screening #truthBeatAfter {
  color: rgb(236 229 216 / 0.92);
  opacity: 0.94;
  transform: none;
  transition:
    opacity 1.4s ease 900ms,
    transform 1.45s cubic-bezier(.16, 1, .3, 1) 900ms;
}

.scroll-painting #truthTideMoonTrigger {
  top: clamp(18px, 4.5%, 42px);
  left: calc(24% - 52px);
  width: clamp(88px, 7.4vw, 108px);
  height: clamp(88px, 7.4vw, 108px);
  border-color: rgb(244 225 192 / 0.08);
  background: radial-gradient(circle, rgb(255 242 208 / 0.09), transparent 67%);
  box-shadow: 0 0 68px rgb(226 202 158 / 0.08);
  backdrop-filter: none;
}

.scroll-painting #truthTideMoonTrigger::before {
  display: none;
}

/* The secret is now a paper seal discovered inside the letter. */
.scroll-painting .letter-fold #moonGate {
  position: relative !important;
  inset: auto !important;
  display: grid;
  width: min(100%, 280px);
  min-width: 0;
  min-height: 64px;
  margin: 26px 0 0 auto;
  padding: 10px 14px 10px 10px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgb(101 72 57 / 0.18);
  border-radius: 2px;
  color: rgb(75 54 44 / 0.74);
  background:
    linear-gradient(90deg, rgb(255 252 242 / 0.72), rgb(238 221 193 / 0.34)),
    rgb(247 238 221 / 0.4);
  box-shadow: 0 18px 54px rgb(79 52 37 / 0.08);
  opacity: 1;
  transform: none;
  backdrop-filter: none;
}

.scroll-painting .letter-fold #moonGate > i {
  width: 42px;
  border-color: rgb(123 84 68 / 0.2);
  background:
    radial-gradient(circle at 63% 42%, rgb(255 241 205 / 0.96) 0 14%, rgb(171 112 97 / 0.12) 16% 38%, transparent 64%);
  box-shadow: 0 0 28px rgb(175 117 91 / 0.09);
}

.scroll-painting .letter-fold #moonGate small {
  color: rgb(92 68 56 / 0.6);
}

.scroll-painting .letter-fold #moonGate:hover,
.scroll-painting .letter-fold #moonGate:focus-visible {
  border-color: rgb(135 84 67 / 0.38);
  color: rgb(71 46 38 / 0.92);
  box-shadow:
    0 22px 62px rgb(79 52 37 / 0.11),
    inset 3px 0 0 rgb(142 76 63 / 0.28);
  transform: translateY(-2px);
}

body.is-moon-gate-unlocked .letter-fold #moonGate {
  animation: second-cut-moon-seal 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes second-cut-moon-seal {
  from { opacity: 0; filter: blur(5px); transform: translateY(16px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Puzzle stages are different framings of one remembered object, not flashes. */
.scroll-painting .puzzle-story[data-stage="0"] .puzzle-story__image {
  object-position: 50% 34%;
  scale: 1.045;
}

.scroll-painting .puzzle-story[data-stage="1"] .puzzle-story__image {
  object-position: 50% 48%;
  scale: 1.025;
}

.scroll-painting .puzzle-story[data-stage="2"] .puzzle-story__image {
  object-position: 50% 55%;
  scale: 1;
}

.scroll-painting .puzzle-story__image {
  transition:
    object-position 1.15s cubic-bezier(.16, 1, .3, 1),
    scale 1.2s cubic-bezier(.16, 1, .3, 1),
    translate 1.15s cubic-bezier(.16, 1, .3, 1),
    filter 1.25s ease;
}

body.scroll-painting.is-final-still .daybreak__copy {
  opacity: 0.82;
}

.scroll-painting .daybreak__copy h2 {
  color: rgb(31 27 31 / 0.94);
  text-shadow: 0 1px 0 rgb(255 250 236 / 0.25);
}

.scroll-painting .daybreak__lines {
  color: rgb(35 33 34 / 0.88);
  text-shadow:
    0 1px 0 rgb(255 252 240 / 0.25),
    0 12px 32px rgb(250 244 225 / 0.24);
}

.scroll-painting .daybreak__open-line {
  color: rgb(35 31 33 / 0.92);
}

.scroll-painting .closing-after {
  position: relative;
  padding: 28px 30px;
  border-left-color: rgb(96 61 47 / 0.36);
  background:
    radial-gradient(circle at 12% 20%, rgb(248 224 188 / 0.22), transparent 42%),
    linear-gradient(90deg, rgb(255 250 237 / 0.36), transparent);
}

.scroll-painting .closing-after p,
.scroll-painting .closing-after span {
  color: rgb(48 39 34 / 0.78);
}

/* Guidance behaves like a temporary film annotation, not a floating product
   toast. It stays readable while leaving the central composition untouched. */
@media (min-width: 701px) {
  .scroll-painting .scene-ritual-hint {
    right: 30px;
    bottom: 28px;
    left: auto;
    max-width: min(28vw, 350px);
    padding: 7px 0 7px 15px;
    border: 0;
    border-left: 1px solid rgb(232 207 180 / 0.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: left;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.82);
    transform: translate3d(12px, 0, 0);
  }

  .scroll-painting .scene-ritual-hint.is-visible {
    transform: none;
  }
}

body.archive-is-open .two-city-world,
body.moon-secret-is-open .two-city-world {
  opacity: 0 !important;
}

body.is-data-saver.scroll-painting .two-city-world__near,
body.is-data-saver.scroll-painting .two-city-world__river {
  display: none;
}

body.is-data-saver.scroll-painting .two-city-world picture {
  transform: none;
  transition: none;
}

@media (max-width: 900px) {
  .scroll-painting .two-city-world__near {
    background-image: url("../assets/generated/two-cities-moonlit-mobile-v2.webp");
    background-position: 50% 50%;
    opacity: 0.13;
  }

  .scroll-painting .two-city-world__image {
    object-position: 50% 50%;
  }

  .scroll-painting .two-city-world__veil {
    background:
      linear-gradient(90deg, rgb(2 7 14 / 0.32), transparent 54%, rgb(2 6 12 / 0.18)),
      linear-gradient(180deg, rgb(2 6 12 / 0.18), transparent 30% 67%, rgb(2 6 12 / 0.46));
  }

  .scroll-painting.has-entered[data-chapter="01"] .two-city-world {
    opacity: 0.1;
  }

  .scroll-painting.has-entered[data-chapter="02"] .two-city-world {
    opacity: 0.46;
  }

  .scroll-painting.has-entered[data-chapter="03"] .two-city-world {
    opacity: 0.62;
  }

  .scroll-painting.has-entered[data-chapter="04"] .two-city-world {
    opacity: 0.18;
  }

  .scroll-painting.has-entered[data-chapter="05"] .two-city-world {
    opacity: 0.67;
  }

  .scroll-painting .memory {
    min-height: auto;
    padding-block: clamp(54px, 9svh, 90px);
  }

  .scroll-painting .memory__visual,
  .scroll-painting .memory:nth-child(even) .memory__visual,
  .scroll-painting .memory:nth-child(2) .memory__visual {
    width: 100%;
    max-width: 100%;
    opacity: 1;
  }

  .scroll-painting .memory__scene {
    max-height: min(68svh, 620px);
  }

  .scroll-painting .memory:nth-child(1) .memory__scene,
  .scroll-painting .memory:nth-child(2) .memory__scene {
    max-height: min(62svh, 540px);
  }

  .scroll-painting .ordinary-days__layout > .truth-beat,
  .scroll-painting #truthTideScene {
    min-height: 100svh;
    margin-top: 92px;
    padding: 108px 24px 92px;
  }

  .scroll-painting #truthBeatLine {
    width: min(8.6em, 86vw);
    font-size: clamp(2.55rem, 12vw, 4.8rem);
    line-height: 1.12;
  }

  .scroll-painting #truthBeatAfter {
    max-width: 26em;
    margin: 48px 0 0 9%;
    font-size: 0.9rem;
    line-height: 2;
  }

  .scroll-painting #truthTideMoonTrigger {
    top: 66px;
    right: auto;
    left: calc(40% - 35px);
    width: 70px;
    height: 70px;
  }

  .scroll-painting #truthTideMoonTrigger::after {
    right: auto;
    left: 50%;
    transform: translate(-50%, -5px);
  }

  .scroll-painting #truthTideMoonTrigger:hover::after,
  .scroll-painting #truthTideMoonTrigger:focus-visible::after {
    transform: translate(-50%, 0);
  }

  .scroll-painting .letter-body {
    padding-top: 48px;
  }

  .scroll-painting .letter-body__salutation {
    margin-top: 0;
  }

  .scroll-painting .letter-fold #moonGate {
    width: 100%;
    margin-top: 22px;
  }

  .scroll-painting .scene-ritual-hint {
    max-width: calc(100vw - 96px);
    padding: 7px 10px 7px 8px;
    border-color: rgb(238 220 198 / 0.1);
    color: rgb(242 227 207 / 0.7);
    background: rgb(5 11 18 / 0.34);
    box-shadow: none;
    backdrop-filter: blur(7px);
  }
}

@media (max-width: 380px) {
  .scroll-painting .first-frame {
    min-height: 118svh;
  }

  .scroll-painting #truthBeatLine {
    font-size: clamp(2.25rem, 11.5vw, 3.1rem);
  }

  .scroll-painting .memory__scene {
    max-height: 58svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-painting .two-city-world,
  .scroll-painting .two-city-world picture,
  .scroll-painting .two-city-world__near,
  .scroll-painting .two-city-world__river,
  .scroll-painting .memory__visual,
  .scroll-painting .memory__copy,
  .scroll-painting .puzzle-story__image {
    transition-duration: 0.01ms !important;
  }

  .scroll-painting .two-city-world picture,
  .scroll-painting .two-city-world__near,
  .scroll-painting .two-city-world__river {
    transform: none !important;
    animation: none !important;
  }

  .scroll-painting #truthBeatLine .truth-line,
  .scroll-painting #truthTideScene.is-truth-screening #truthBeatLine .truth-line,
  .scroll-painting #truthBeatAfter,
  .scroll-painting #truthTideScene.is-truth-screening #truthBeatAfter {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
    transition: none !important;
  }

  body.scroll-painting.is-moon-gate-unlocked .letter-fold #moonGate,
  body.scroll-painting[data-transition-from="02"][data-transition-to="03"].is-chapter-transitioning
    .scroll-transition {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .scroll-painting .two-city-world,
  .scroll-painting #memoryProjection {
    display: none !important;
  }

  .scroll-painting .letter-fold #moonGate {
    border: 2px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
    forced-color-adjust: auto;
  }
}

/* 凌晨五点：不是一张新卡片，而是第三幕里被按亮的一格时间。 */
.scroll-painting .five-am-memory {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 5vw, 82px);
  align-items: start;
  width: min(100%, 1060px);
  margin: clamp(36px, 8vh, 96px) auto clamp(54px, 10vh, 126px);
  padding-block: clamp(22px, 4vw, 42px);
  border-block: 1px solid rgb(225 212 194 / 0.14);
}

.scroll-painting .five-am-memory::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(56px, 9vw, 118px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgb(194 148 105 / 0.76), transparent);
  transition: width 780ms cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting .five-am-memory.is-open::before {
  width: min(46%, 430px);
}

.scroll-painting .five-am-memory__clock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 0;
  border: 0;
  color: rgb(238 228 211 / 0.86);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.scroll-painting .five-am-memory__clock time {
  color: rgb(219 190 152 / 0.84);
  font-family: var(--serif);
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 14px 46px rgb(5 9 15 / 0.38);
  transition:
    color 420ms ease,
    text-shadow 520ms ease,
    transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting .five-am-memory__clock > span {
  display: grid;
  gap: 9px;
}

.scroll-painting .five-am-memory__clock small {
  color: rgb(200 163 121 / 0.72);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}

.scroll-painting .five-am-memory__clock strong {
  max-width: 15em;
  color: rgb(237 229 216 / 0.8);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.7vw, 1.22rem);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.05em;
}

.scroll-painting .five-am-memory__clock:hover time,
.scroll-painting .five-am-memory__clock:focus-visible time,
.scroll-painting .five-am-memory.is-open .five-am-memory__clock time {
  color: rgb(247 219 179 / 0.98);
  text-shadow: 0 0 34px rgb(208 161 105 / 0.22);
  transform: translateY(-3px);
}

.scroll-painting .five-am-memory__clock:focus-visible {
  outline: 1px solid rgb(213 169 117 / 0.72);
  outline-offset: 9px;
}

.scroll-painting .five-am-memory__hint {
  grid-column: 1;
  margin: -12px 0 0;
  padding-left: clamp(4px, 1vw, 12px);
  color: rgb(226 216 201 / 0.45);
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.scroll-painting .five-am-memory__words {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: 4px 0 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(18px);
  transition:
    opacity 460ms ease,
    clip-path 820ms cubic-bezier(.16, 1, .3, 1),
    transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting .five-am-memory.is-open .five-am-memory__words {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

.scroll-painting .five-am-memory__words p {
  margin: 0;
  color: rgb(240 232 219 / 0.88);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.62rem);
  line-height: 2.05;
  letter-spacing: 0.035em;
  text-wrap: pretty;
}

.scroll-painting .five-am-memory__words footer {
  max-width: 34em;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgb(226 211 192 / 0.11);
  color: rgb(225 214 198 / 0.62);
  font-family: var(--serif);
  font-size: clamp(0.82rem, 1.25vw, 0.95rem);
  line-height: 2;
  letter-spacing: 0.045em;
}

@media (max-width: 700px) {
  .scroll-painting .five-am-memory {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    margin-block: 34px 76px;
    padding-block: 22px 30px;
  }

  .scroll-painting .five-am-memory__clock {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .scroll-painting .five-am-memory__clock time {
    width: max-content;
    font-size: clamp(3.2rem, 18vw, 4.8rem);
  }

  .scroll-painting .five-am-memory__clock > span {
    max-width: 19rem;
  }

  .scroll-painting .five-am-memory__hint {
    grid-column: 1;
    margin-top: -8px;
    padding-left: 0;
    font-size: 0.64rem;
  }

  .scroll-painting .five-am-memory__words {
    grid-column: 1;
    grid-row: auto;
    padding-top: 9px;
  }

  .scroll-painting .five-am-memory__words p {
    font-size: clamp(1.06rem, 4.8vw, 1.34rem);
    line-height: 1.95;
  }

  .scroll-painting .five-am-memory__words footer {
    margin-top: 20px;
    padding-top: 16px;
    font-size: 0.81rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-painting .five-am-memory,
  .scroll-painting .five-am-memory::before,
  .scroll-painting .five-am-memory__clock time,
  .scroll-painting .five-am-memory__words {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .scroll-painting .five-am-memory,
  .scroll-painting .five-am-memory__words footer {
    border-color: CanvasText;
  }

  .scroll-painting .five-am-memory__clock {
    color: ButtonText;
  }
}