:root {
  --ink: #203d80;
  --soft-ink: #52689c;
  --line: rgba(50, 82, 150, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font: 15px/1.6 "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #eef5ff;
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px clamp(24px, 6vw, 82px);
}

.logo { display: block; width: clamp(112px, 12vw, 162px); }
.logo img, .hero-logo { display: block; width: 100%; height: auto; }

.enter-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  color: #284b94;
  font-weight: 600;
  letter-spacing: .08em;
}

.enter-link span { font-size: 20px; transition: transform .2s ease; }
.enter-link:hover span { transform: translateY(4px); }

.hero {
  position: relative;
  display: grid;
  min-height: max(700px, 100svh);
  padding: 130px 24px 86px;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(244, 248, 255, .40), rgba(244, 248, 255, .04) 48%, rgba(244, 248, 255, .24)),
    url("../img/top_bg.png") center / cover no-repeat;
}

.hero::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  content: "";
  background: linear-gradient(0deg, rgba(229, 239, 255, .78), transparent);
}

.hero-content {
  width: min(560px, 100%);
  margin: 4vh 29vw 0 0;
  text-align: center;
  animation: rise .9s ease both;
}

.hero-logo { width: min(390px, 82%); margin: 0 auto 10px; mix-blend-mode: multiply; }

.eyebrow {
  margin: 0 0 18px;
  color: #4a63a0;
  font: 600 14px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .24em;
}

h1 {
  margin: 0;
  font: 900 clamp(44px, 5.5vw, 76px)/1.2 "STSong", "Songti SC", serif;
  letter-spacing: .18em;
  text-indent: .18em;
  text-shadow: 0 5px 20px rgba(255, 255, 255, .82);
}

.intro {
  margin: 23px auto 33px;
  color: var(--soft-ink);
  font: 500 clamp(16px, 1.6vw, 19px)/2 "STSong", "Songti SC", serif;
  letter-spacing: .08em;
}

.start-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: 99px;
  background: linear-gradient(115deg, #ee9bc6, #a990e7);
  box-shadow: 0 13px 28px rgba(128, 105, 188, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.start-link:hover { box-shadow: 0 17px 32px rgba(128, 105, 188, .38); transform: translateY(-3px); }
.start-link span { font-size: 19px; }

.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  color: rgba(43, 69, 136, .68);
  font: 600 10px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  transform: translateX(-50%);
}

.scroll-hint span { display: inline-block; width: 28px; height: 1px; background: currentColor; }

.mist { position: absolute; z-index: -1; width: 33vw; height: 14vw; filter: blur(28px); opacity: .45; border-radius: 50%; }
.mist-left { bottom: 8%; left: -10%; background: #e4c9f7; }
.mist-right { top: 18%; right: -13%; background: #c5d7ff; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(24px, 6vw, 82px);
  color: rgba(36, 61, 125, .7);
  font-size: 12px;
  background: #edf4ff;
  border-top: 1px solid rgba(255, 255, 255, .8);
}

.letter-section,
.companion-section,
.island-section,
.ending-section {
  position: relative;
  display: grid;
  min-height: 86vh;
  padding: 120px clamp(28px, 14vw, 220px);
  overflow: hidden;
  place-items: center;
}

.letter-section {
  grid-template-columns: minmax(80px, .5fr) minmax(0, 2fr);
  color: #294788;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 202, 225, .58), transparent 22%),
    linear-gradient(140deg, #fcfaff, #edf5ff 64%, #e3efff);
}

.section-mark {
  align-self: start;
  color: rgba(70, 98, 164, .44);
  font: 600 clamp(42px, 6vw, 88px)/1 Georgia, "Times New Roman", serif;
}

.letter-copy,
.island-copy,
.ending-copy { max-width: 690px; }

.section-kicker {
  margin: 0 0 24px;
  color: #8b7fba;
  font: 600 13px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .24em;
}

.letter-copy h2,
.island-copy h2,
.ending-copy h2 {
  margin: 0 0 40px;
  font: 800 clamp(35px, 4.2vw, 62px)/1.35 "STSong", "Songti SC", serif;
  letter-spacing: .08em;
}

.letter-copy > p:not(.section-kicker),
.companion-copy > p:not(.section-kicker),
.island-copy > p:not(.section-kicker),
.ending-copy > p:not(.section-kicker) {
  margin: 10px 0;
  color: #5a6c9c;
  font: 500 clamp(17px, 1.7vw, 22px)/1.9 "STSong", "Songti SC", serif;
  letter-spacing: .07em;
}

.companion-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: clamp(42px, 9vw, 140px);
  align-items: center;
  min-height: 78vh;
  padding: 120px clamp(28px, 14vw, 220px);
  overflow: hidden;
  color: #294788;
  background:
    radial-gradient(circle at 84% 23%, rgba(204, 185, 247, .6), transparent 22%),
    radial-gradient(circle at 14% 82%, rgba(179, 218, 255, .6), transparent 25%),
    linear-gradient(135deg, #f7f4ff, #eaf5ff 58%, #fdf7fc);
}

.companion-section::before,
.companion-section::after {
  position: absolute;
  width: min(28vw, 380px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(103, 115, 188, .16);
  border-radius: 50%;
}

.companion-section::before { top: -12%; right: 7%; }
.companion-section::after { right: 17%; bottom: -24%; transform: scale(.65); }

.companion-copy,
.companion-notes { position: relative; z-index: 1; }
.companion-copy { max-width: 710px; }
.companion-copy h2 { margin: 0 0 40px; font: 800 clamp(35px, 4.2vw, 62px)/1.35 "STSong", "Songti SC", serif; letter-spacing: .08em; }

.companion-notes {
  padding: 12px 0;
  border-top: 1px solid rgba(72, 98, 166, .3);
}

.companion-notes p {
  display: flex;
  gap: 15px;
  align-items: baseline;
  margin: 0;
  padding: 19px 0;
  color: #52689c;
  font: 500 clamp(15px, 1.35vw, 18px)/1.65 "STSong", "Songti SC", serif;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(72, 98, 166, .2);
}

.companion-notes span { color: #957fbe; font: 600 13px/1 Georgia, "Times New Roman", serif; letter-spacing: .12em; }

.feature-section {
  padding: 120px clamp(28px, 10vw, 156px);
  color: #294788;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 201, 225, .52), transparent 19%),
    radial-gradient(circle at 92% 80%, rgba(185, 215, 255, .7), transparent 23%),
    linear-gradient(145deg, #fffaff, #eef6ff 58%, #f7f4ff);
}

.feature-heading { width: min(720px, 100%); margin-bottom: 54px; }
.feature-heading h2 { margin: 0 0 22px; font: 800 clamp(34px, 4vw, 58px)/1.35 "STSong", "Songti SC", serif; letter-spacing: .07em; }
.feature-heading > p:not(.section-kicker) { margin: 0; color: #5a6c9c; font: 500 clamp(16px, 1.5vw, 19px)/1.9 "STSong", "Songti SC", serif; letter-spacing: .05em; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { min-height: 235px; padding: 28px; border: 1px solid rgba(88, 104, 177, .18); border-radius: 22px; background: rgba(255, 255, 255, .55); box-shadow: 0 16px 34px rgba(83, 105, 171, .08); }
.feature-number { display: block; margin-bottom: 42px; color: #987ebb; font: 600 12px/1 Georgia, "Times New Roman", serif; letter-spacing: .18em; }
.feature-card h3 { margin: 0 0 12px; color: #2e4b91; font: 800 21px/1.4 "STSong", "Songti SC", serif; letter-spacing: .04em; }
.feature-card p { margin: 0; color: #5a6c9c; font-size: 14px; line-height: 1.8; }
.feature-cta, .ending-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 44px; padding-bottom: 8px; color: #5468aa; font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid currentColor; transition: gap .2s ease, color .2s ease; }
.feature-cta:hover, .ending-link:hover { gap: 18px; color: #8a72ba; }

.island-section {
  min-height: 94vh;
  color: #f3f6ff;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(135, 157, 244, .38), transparent 18%),
    radial-gradient(circle at 77% 18%, rgba(241, 164, 211, .2), transparent 20%),
    linear-gradient(150deg, #162d6c, #284987 58%, #344a9e);
}

.island-copy { z-index: 1; }
.island-copy h2 { color: #fff; }
.island-copy .section-kicker { color: #d8d9ff; }
.island-copy > p:not(.section-kicker) { color: #e1e8ff; }

.island-orbit {
  position: absolute;
  border: 1px solid rgba(229, 235, 255, .22);
  border-radius: 50%;
}

.orbit-one { width: min(72vw, 850px); height: min(72vw, 850px); }
.orbit-two { width: min(52vw, 620px); height: min(52vw, 620px); transform: rotate(62deg) scaleY(.44); }

.ending-section {
  min-height: 72vh;
  text-align: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 222, 235, .82), transparent 30%),
    linear-gradient(#f7f7ff, #e7f1ff);
}

.ending-copy h2 { color: #304b91; }
.ending-link { margin-top: 28px; }

.reveal-line {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s ease var(--line-delay, 0ms), transform .72s cubic-bezier(.22, .61, .36, 1) var(--line-delay, 0ms);
}

.reveal-line.is-visible { opacity: 1; transform: translateY(0); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
  .site-header { padding-top: 18px; }
  .enter-link { font-size: 13px; }
  .hero { min-height: 680px; padding-top: 116px; background-position: 59% center; }
  .hero-content { margin: 0; transform: translateY(-3vh); }
  .hero-logo { width: min(310px, 88%); }
  .eyebrow { font-size: 12px; }
  .intro { max-width: 290px; margin-top: 18px; }
  footer { align-items: center; flex-direction: column; padding-block: 15px; text-align: center; }
  .mist { width: 70vw; height: 30vw; }
  .letter-section, .companion-section, .island-section, .ending-section { min-height: 76vh; padding: 90px 28px; }
  .letter-section { grid-template-columns: 1fr; }
  .companion-section { grid-template-columns: 1fr; gap: 44px; }
  .feature-section { padding: 90px 28px; }
  .feature-heading { margin-bottom: 34px; }
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { min-height: 0; padding: 24px; }
  .feature-number { margin-bottom: 26px; }
  .section-mark { margin-bottom: 35px; }
  .letter-copy h2, .companion-copy h2, .island-copy h2, .ending-copy h2 { margin-bottom: 28px; }
  .letter-copy > p:not(.section-kicker), .companion-copy > p:not(.section-kicker), .island-copy > p:not(.section-kicker), .ending-copy > p:not(.section-kicker) { font-size: 16px; }
  .orbit-one { width: 125vw; height: 125vw; }
  .orbit-two { width: 92vw; height: 92vw; }
}