:root {
  color-scheme: dark;
  --plum: #291d32;
  --cream: #fff5e9;
  --peach: #f1b493;
  --rose: #d9b9c7;
  --body-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display-font: "HanziPen SC", "Hannotate SC", "Xingkai SC", "STXingkai", "华文行楷", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --side: clamp(24px, 6vw, 96px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; background: var(--plum); }
body { margin: 0; color: var(--cream); font-family: var(--body-font); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }
button { border: 0; cursor: pointer; }
svg { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--peach); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 30; top: -60px; left: 18px; padding: 12px 18px; background: var(--cream); color: var(--plum); }
.skip-link:focus { top: 12px; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 96px; display: flex; align-items: center; padding: 0 var(--side); background: linear-gradient(180deg, rgba(31, 20, 37, .52), transparent); }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; min-height: 50px; flex: 0 1 auto; white-space: nowrap; }
.brand-mark-tile { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 16px; background: rgba(255,245,233,.94); box-shadow: 0 7px 24px rgba(24,13,30,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.brand-logo { display: block; width: 44px; height: 44px; object-fit: contain; }
.brand-wordmark { color: var(--cream); font: 700 30px/1 "Futura", "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.075em; text-shadow: 0 2px 16px rgba(24,13,30,.24); }
.brand-wordmark span { color: var(--peach); }
.header-cta { display: inline-flex; align-items: center; gap: 15px; min-height: 42px; margin-left: auto; padding: 0 18px; border: 1px solid rgba(255,245,233,.48); border-radius: 24px; background: rgba(45,30,48,.18); font-size: 12px; letter-spacing: .06em; transition: background .2s, border-color .2s; }
.header-cta:hover { background: rgba(255,245,233,.13); border-color: var(--cream); }
.header-cta span { font-size: 16px; }

.story-screen { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100vh; min-height: 100vh; height: 100svh; min-height: 100svh; overflow: hidden; scroll-snap-align: start; background: var(--plum); }
@supports (height: 100dvh) {
  .story-screen { height: 100dvh; min-height: 100dvh; }
}
.screen-art, .screen-still, .screen-video, .screen-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen-art { z-index: -1; overflow: hidden; background: var(--plum); }
.screen-still, .screen-video { object-fit: cover; object-position: center; }
.screen-video { opacity: 0; transition: opacity 1.1s ease; }
.story-screen.has-video .screen-video { opacity: 1; }
.screen-shade { background: linear-gradient(90deg, rgba(31,20,38,.52) 0%, rgba(39,25,46,.3) 34%, rgba(40,25,46,.08) 62%, transparent 88%), linear-gradient(180deg, rgba(31,20,38,.22), transparent 24%, transparent 72%, rgba(31,20,38,.38)); }
.screen-copy { position: relative; z-index: 2; justify-self: start; width: min(680px, 54vw); margin: 0 auto 0 var(--side); padding: 20px 0 10px; text-align: left; opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.story-screen.is-active .screen-copy { opacity: 1; transform: translateY(0); }
.eyebrow { display: flex; align-items: center; justify-content: flex-start; gap: 11px; margin: 0 0 16px; color: #f0d5d6; font-size: 11px; letter-spacing: .18em; }
.eyebrow span { width: 25px; height: 1px; background: var(--peach); }
h1, h2 { margin: 0; font-family: var(--display-font); font-size: clamp(38px, 4.25vw, 58px); line-height: 1.48; font-weight: 400; letter-spacing: .005em; text-wrap: pretty; text-shadow: 0 2px 28px rgba(25,13,29,.34); }
h1 em, h2 em { color: #f7d7c2; font-style: normal; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 21px; min-height: 46px; margin-top: 23px; padding: 0 21px; border: 1px solid transparent; border-radius: 30px; background: var(--peach); color: #422935; box-shadow: 0 8px 28px rgba(28,13,32,.15); font-size: 12px; letter-spacing: .06em; transition: transform .2s, background .2s, box-shadow .2s; }
.button-primary:hover { transform: translateY(-2px); background: #ffccb0; box-shadow: 0 12px 32px rgba(28,13,32,.25); }
.button-primary span { font-size: 18px; transition: transform .2s; }
.button-primary:hover span { transform: translateX(3px); }
.screen-hero .screen-still, .screen-hero .screen-video { object-position: 66% center; }
.ending-contact { position: absolute; z-index: 3; left: var(--side); right: clamp(92px, 10vw, 140px); bottom: 64px; display: grid; grid-template-columns: max-content max-content max-content; align-items: center; justify-content: start; column-gap: clamp(18px, 2.4vw, 28px); text-shadow: 0 1px 12px rgba(25,13,29,.8); }
.ending-contact-label { display: inline-flex; justify-self: start; align-items: center; gap: 6px; min-height: 44px; color: var(--peach); font-size: 13px; letter-spacing: .08em; transition: color .2s; }
.ending-contact-label:hover { color: #ffd0b2; }
.ending-contact-details, .ending-contact-legal { display: grid; grid-template-rows: repeat(2, 26px); align-items: center; gap: 0; }
.ending-contact-email, .ending-contact-address { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; margin: 0; color: #f7d7c2; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.ending-contact-email { transition: color .2s; }
.ending-contact-email:hover { color: var(--peach); }
.ending-contact-email svg, .ending-contact-address svg { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: var(--peach); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ending-contact-address { color: rgba(255,245,233,.78); font-style: normal; }
.ending-contact-legal { justify-items: start; color: rgba(255,245,233,.76); font-size: 10px; line-height: 1.5; letter-spacing: .02em; text-align: left; }
.ending-contact-legal p { margin: 0; }

.screen-navigation { position: fixed; z-index: 18; top: 50%; right: clamp(20px, 3.3vw, 52px); display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateY(-50%); }
.screen-nav-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,245,233,.34); border-radius: 50%; background: rgba(41,29,50,.4); color: var(--cream); box-shadow: 0 8px 24px rgba(24,13,30,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s, opacity .2s; }
.screen-nav-button:hover:not(:disabled) { transform: scale(1.07); border-color: rgba(255,245,233,.75); background: rgba(241,180,147,.22); }
.screen-nav-button:disabled { cursor: default; opacity: .35; }
.screen-nav-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.progress-count { display: flex; align-items: baseline; gap: 4px; color: rgba(255,245,233,.56); font: 10px "Avenir Next", sans-serif; letter-spacing: .12em; }
.progress-count span { color: var(--cream); font-size: 13px; }
.progress-count i { font-style: normal; opacity: .55; }
.motion-toggle { position: fixed; z-index: 18; right: var(--side); bottom: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 0 7px 10px; background: transparent; color: rgba(255,245,233,.8); font-size: 10px; letter-spacing: .06em; }
.motion-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.motion-toggle .icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }
.motion-toggle[hidden] { display: none; }

@media (max-width: 1050px) {
  :root { --side: 5vw; }
  .site-header { height: 82px; }
  .header-cta { min-height: 39px; padding: 0 14px; }
  .screen-copy { width: min(620px, 58vw); }
  h1, h2 { font-size: clamp(36px, 4.5vw, 50px); }
}

@media (max-width: 820px) {
  :root { --side: 22px; }
  .site-header { height: 72px; }
  .brand-lockup { gap: 9px; min-height: 46px; }
  .brand-mark-tile { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
  .brand-logo { width: 41px; height: 41px; }
  .brand-wordmark { font-size: 27px; }
  .header-cta { margin-left: auto; min-height: 37px; padding: 0 14px; gap: 10px; font-size: 10px; }
  .screen-copy { width: calc(100% - 48px); margin-left: var(--side); padding: 12px 0 20px; }
  .eyebrow { gap: 9px; margin-bottom: 14px; font-size: 10px; }
  .eyebrow span { width: 20px; }
  h1, h2 { font-size: clamp(27px, 7vw, 40px); line-height: 1.5; letter-spacing: 0; }
  .button-primary { min-height: 43px; margin-top: 18px; padding: 0 17px; gap: 16px; font-size: 11px; }
  .screen-shade { background: linear-gradient(90deg, rgba(31,20,38,.52), rgba(39,25,46,.28) 50%, rgba(40,25,46,.06) 100%), linear-gradient(180deg, rgba(31,20,38,.28), transparent 24%, transparent 72%, rgba(31,20,38,.48)); }
  .screen-navigation { top: auto; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; flex-direction: row; gap: 14px; transform: translateX(-50%); }
  .screen-nav-button { width: 40px; height: 40px; }
  .previous-screen svg { transform: rotate(-90deg); }
  .next-screen svg { transform: rotate(-90deg); }
  .progress-count { min-width: 34px; justify-content: center; }
  .motion-toggle { right: 14px; bottom: 66px; font-size: 9px; }
  #screen-06 .screen-copy { padding-bottom: clamp(96px, 16vh, 132px); }
  .ending-contact { right: var(--side); bottom: 108px; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 4px; }
  .ending-contact-label { min-height: 40px; justify-self: start; }
  .ending-contact-email, .ending-contact-address { min-height: 26px; font-size: 11px; }
  .ending-contact-legal { font-size: 9px; }
}

@media (max-width: 380px) {
  .site-header { height: 64px; }
  .brand-lockup { gap: 8px; min-height: 42px; }
  .brand-mark-tile { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-wordmark { font-size: 23px; }
  .header-cta { min-height: 34px; padding: 0 11px; }
  .screen-copy { width: calc(100% - 36px); }
  h1, h2 { font-size: clamp(26px, 7vw, 30px); }
  .ending-contact { bottom: 108px; }
  .ending-contact-email { font-size: 11px; }
}

@media (max-height: 620px) {
  .site-header { height: 62px; }
  .screen-copy { padding-top: 20px; padding-bottom: 16px; }
  .eyebrow { margin-bottom: 10px; }
  h1, h2 { font-size: clamp(32px, 6.5vh, 48px); line-height: 1.34; }
  .button-primary { min-height: 40px; margin-top: 13px; }
  .motion-toggle { bottom: 10px; }
  .ending-contact { bottom: 70px; }
}

@media (max-width: 820px) and (max-height: 620px) {
  .screen-copy { padding-bottom: 44px; }
  h1, h2 { font-size: clamp(26px, 5.5vh, 34px); }
  .screen-navigation { bottom: max(6px, env(safe-area-inset-bottom)); }
  .motion-toggle { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}