.scene-intro {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
}

.intro-year {
  right: auto;
  width: min(190px, 48vw);
}

.hero-ink-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(138vw, 680px);
  max-width: none;
  opacity: .72;
  transform: translate(-50%, -50%) scale(.92);
  pointer-events: none;
}

.hero-brush-stroke {
  position: absolute;
  top: 51%;
  left: 50%;
  width: min(118vw, 610px);
  max-width: none;
  opacity: .9;
  transform: translate(-50%, -50%) rotate(-3deg);
}

.intro-center {
  position: absolute;
  z-index: 3;
  top: 47%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.intro-title-mask,
.ending-title-mask {
  overflow: hidden;
}

.intro-center h1 {
  font-family: var(--font-serif);
  font-size: clamp(64px, 20vw, 92px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .2em;
  text-indent: .2em;
}

.intro-name {
  margin-top: 34px;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: .18em;
  text-indent: .18em;
}

.intro-date,
.departure-copy small,
.scene-footer > p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.intro-date {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.intro-date i,
.departure-copy small i,
.scene-footer > p i {
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.intro-mark {
  margin-top: 18px;
  transform: rotate(-4deg);
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  justify-items: center;
  color: rgba(28, 28, 25, .52);
  transform: translateX(-50%);
}

.scroll-cue span {
  width: 1px;
  height: 28px;
  background: currentColor;
  transform-origin: 50% 0;
  animation: cue-pulse 1.8s ease-in-out infinite;
}

.scroll-cue small {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: .18em;
  white-space: nowrap;
}

.scene-between-image { height: 188svh; }

.desk-stage {
  background: #16130f;
  color: var(--paper-light);
}

.desk-base { transform: scale(1.035); }
.desk-base img { object-position: 50% 52%; }

.desk-detail,
.ink-layer,
.reading-detail {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(8, 7, 5, .26);
}

.desk-detail img,
.ink-layer img,
.reading-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desk-paper {
  right: -10%;
  bottom: -9%;
  width: min(68vw, 410px);
  height: min(49svh, 470px);
  transform: rotate(-3deg);
}

.desk-book {
  top: 13%;
  left: -12%;
  width: min(51vw, 320px);
  height: min(36svh, 340px);
  transform: rotate(4deg);
}

.desk-warmth {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: linear-gradient(135deg, rgba(236, 190, 121, .28), transparent 52%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.dust-field { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.dust-field i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff6df; opacity: .32; box-shadow: 0 0 8px rgba(255, 239, 201, .55); animation: dust-drift 4.8s ease-in-out infinite alternate; }
.dust-field i:nth-child(1) { top: 18%; left: 12%; }
.dust-field i:nth-child(2) { top: 31%; left: 65%; animation-delay: -.6s; }
.dust-field i:nth-child(3) { top: 46%; left: 24%; animation-delay: -1.2s; }
.dust-field i:nth-child(4) { top: 63%; left: 82%; animation-delay: -2.1s; }
.dust-field i:nth-child(5) { top: 75%; left: 42%; animation-delay: -3.2s; }
.dust-field i:nth-child(6) { top: 24%; left: 89%; animation-delay: -1.8s; }
.dust-field i:nth-child(7) { top: 57%; left: 56%; animation-delay: -2.7s; }
.dust-field i:nth-child(8) { top: 84%; left: 17%; animation-delay: -.9s; }
.dust-field i:nth-child(9) { top: 11%; left: 45%; animation-delay: -3.8s; }

.scene-quote {
  position: absolute;
  z-index: 8;
  bottom: max(72px, 10svh);
  left: var(--space-page);
  font-family: var(--font-serif);
  font-size: clamp(29px, 8vw, 42px);
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: .04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .42);
}

.scene-quote span,
.reading-copy span { display: block; }

.scene-between-text {
  min-height: 84svh;
  overflow: hidden;
}

.between-line {
  position: absolute;
  top: 43%;
  left: clamp(30px, 10vw, 56px);
  max-width: 300px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 6.5vw, 32px);
  line-height: 1.72;
  letter-spacing: .09em;
}

.window-shadow {
  position: absolute;
  right: -38px;
  bottom: -10px;
  width: min(78%, 390px);
  opacity: .075;
}

.scene-memory {
  min-height: 1540px;
  overflow: hidden;
  padding-top: 1px;
}

.memory-meta {
  position: absolute;
  z-index: 8;
  top: 72px;
  left: var(--space-page);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(28, 28, 25, .55);
  font-size: 14px;
  letter-spacing: .12em;
}

.memory-meta i { width: 42px; height: 1px; background: currentColor; opacity: .45; }
.memory-meta small { font-size: 10px; letter-spacing: .14em; }
.memory-gallery { position: absolute; inset: 0; }

.memory-card {
  position: absolute;
  margin: 0;
  padding: 8px 8px 14px;
  background: #f8f4eb;
  box-shadow: 0 16px 50px rgba(30, 25, 18, .11);
}

.memory-card picture,
.memory-card img { width: 100%; }
.memory-card img { height: 100%; object-fit: cover; }
.memory-card figcaption { padding: 9px 2px 0; color: rgba(28, 28, 25, .44); font-size: 10px; letter-spacing: .12em; }

.memory-campus-one {
  top: 150px;
  left: var(--space-page);
  width: min(82vw, 650px);
  transform: rotate(-1deg);
}
.memory-campus-one picture { height: min(51vw, 405px); }

.memory-campus-two {
  top: 570px;
  right: calc(var(--space-page) - 4px);
  width: min(63vw, 430px);
  transform: rotate(1.4deg);
}
.memory-campus-two picture { height: min(45vw, 310px); }

.memory-classroom {
  top: 855px;
  left: 11vw;
  width: min(51vw, 335px);
  transform: rotate(-1.2deg);
}
.memory-classroom picture { height: min(67vw, 440px); }
.memory-classroom img { object-position: 50% 40%; }

.memory-copy {
  position: absolute;
  right: var(--space-page);
  bottom: 250px;
  width: min(76vw, 370px);
  font-family: var(--font-serif);
  font-size: clamp(21px, 5.4vw, 29px);
  line-height: 1.82;
  letter-spacing: .05em;
}

.scene-ink { height: 208svh; }
.ink-stage { background: #191713; color: var(--paper-light); }
.ink-base { opacity: .82; transform: scale(1.035); }
.ink-base img { object-position: 50% 54%; }
.ink-stage::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 9, .08), rgba(12, 11, 9, .52)); }

.ink-paper {
  z-index: 4;
  bottom: -6%;
  left: -8%;
  width: min(78vw, 500px);
  height: min(61svh, 580px);
  transform: rotate(2deg);
}

.ink-brush {
  z-index: 5;
  top: 11%;
  right: -13%;
  width: min(52vw, 340px);
  height: min(52svh, 500px);
  transform: rotate(-2deg);
}

.ink-motion-stroke {
  position: absolute;
  z-index: 7;
  top: 52%;
  left: -10%;
  width: 120%;
  overflow: visible;
  transform: rotate(-3deg);
}

.ink-motion-stroke path { fill: none; stroke: #171714; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ink-motion-stroke path:first-child { stroke-width: 46; opacity: .9; }
.ink-motion-stroke path:last-child { stroke-width: 12; opacity: .48; }

.scene-reading { height: 212svh; }
.reading-stage { background: #201d18; color: var(--paper-light); }
.reading-base { transform: scale(1.025); }
.reading-base img { object-position: 50% 56%; }
.reading-vignette { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 9, .08), rgba(12, 11, 9, .16) 46%, rgba(12, 11, 9, .62)); }

.reading-detail { border: 1px solid rgba(255,255,255,.12); }
.reading-page { z-index: 4; top: 12%; left: -10%; width: min(58vw, 370px); height: min(42svh, 410px); transform: rotate(-4deg); }
.reading-spine { z-index: 5; top: 33%; right: -12%; width: min(51vw, 330px); height: min(37svh, 350px); transform: rotate(4deg); }
.reading-botanical { z-index: 6; bottom: -7%; left: 8%; width: min(66vw, 410px); height: min(46svh, 440px); transform: rotate(-2deg); }

.reading-copy {
  position: absolute;
  z-index: 8;
  bottom: 10svh;
  left: var(--space-page);
  width: min(84vw, 430px);
  font-family: var(--font-serif);
  font-size: clamp(21px, 5.8vw, 30px);
  line-height: 1.82;
  letter-spacing: .04em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

.scene-september {
  min-height: 112svh;
  overflow: hidden;
}

.september-glow {
  position: absolute;
  inset: 12% -20% 8%;
  background: radial-gradient(circle at center, rgba(255, 246, 207, .92), rgba(248, 247, 242, 0) 62%);
  opacity: .65;
}

.september-copy {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.september-copy h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 5vw, 42px);
  font-family: var(--font-serif);
  font-size: clamp(110px, 38vw, 170px);
  font-weight: 500;
  line-height: .92;
}

.september-copy h2 span { display: inline-block; }
.september-copy p { margin-top: 42px; color: rgba(28, 28, 25, .58); font-size: 14px; letter-spacing: .24em; text-indent: .24em; }

.scene-departure { height: 220svh; color: var(--paper-light); }
.departure-stage { background: #11110e; }
.departure-mask { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0); }
.departure-media img { object-position: 56% 50%; transform: scale(1); }
.departure-scrim { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(15, 14, 11, .38), rgba(15, 14, 11, .1) 62%, transparent); }

.departure-copy {
  position: absolute;
  z-index: 6;
  bottom: 13svh;
  left: var(--space-page);
  max-width: 330px;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

.departure-copy h2 { font-family: var(--font-serif); font-size: clamp(30px, 8vw, 43px); font-weight: 500; line-height: 1.45; letter-spacing: .04em; }
.departure-copy p { margin-top: 12px; font-size: 15px; letter-spacing: .05em; }
.departure-copy small { margin-top: 38px; font-size: 11px; letter-spacing: .14em; }

.scene-ending { min-height: 100svh; min-height: 100dvh; }
.ending-center { position: absolute; top: 51%; left: 50%; display: grid; justify-items: center; width: max-content; transform: translate(-50%, -50%); }
.ending-stroke { width: 130px; height: 20px; overflow: visible; }
.ending-stroke path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; opacity: .78; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ending-title-mask { margin-top: 30px; }
.ending-title-mask h2 { font-family: var(--font-serif); font-size: clamp(34px, 9vw, 48px); font-weight: 500; letter-spacing: .12em; text-indent: .12em; }
.ending-mark { margin-top: 22px; transform: rotate(-4deg); }

.scene-footer {
  min-height: 56svh;
  padding: 0 var(--space-page) env(safe-area-inset-bottom);
  color: rgba(28, 28, 25, .54);
  font-size: 11px;
  letter-spacing: .12em;
}

.footer-rule { position: absolute; top: 0; right: var(--space-page); left: var(--space-page); height: 1px; background: rgba(28,28,25,.12); }
.scene-footer > p { position: absolute; bottom: calc(58px + env(safe-area-inset-bottom)); left: var(--space-page); }
.scene-footer > small { position: absolute; right: var(--space-page); bottom: calc(58px + env(safe-area-inset-bottom)); font-size: 10px; }

.share-button {
  position: absolute;
  top: 54px;
  right: var(--space-page);
  display: flex;
  min-width: 116px;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(28, 28, 25, .32);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .06em;
}

.share-button span { color: var(--cinnabar); font-size: 17px; }
.share-button:focus-visible { outline: 1px solid var(--cinnabar); outline-offset: 5px; }

@keyframes cue-pulse { 0%, 100% { transform: scaleY(.5); opacity: .45; } 50% { transform: scaleY(1); opacity: .9; } }
@keyframes dust-drift { from { transform: translate3d(-3px, 7px, 0); } to { transform: translate3d(9px, -11px, 0); } }