:root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #18363a;
  background: #f4f8f7;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
.site-header, .hero, .showcase, .site-footer { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; }
.wordmark { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; white-space: nowrap; }
.wordmark-cn { font-size: 30px; font-weight: 700; letter-spacing: -.11em; }
.wordmark-en { font-family: "Avenir Next", "Trebuchet MS", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.header-link { font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.header-link span { margin-left: 5px; }

.hero { min-height: min(790px, calc(100svh - 96px)); display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(36px, 6vw, 90px); padding: 36px 0 82px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-label, .detail-label { margin: 0; color: #378c84; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.eyebrow span { margin-inline: 7px; color: #8baaa4; }
.hero h1, .showcase h2, .document h1 { font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; font-weight: 600; }
.hero h1 { font-size: clamp(68px, 7.4vw, 122px); line-height: 1.16; letter-spacing: -.085em; margin: 26px 0 12px; }
.hero h1 span { color: #378c84; }
.english-line { margin: 0; font-family: "Avenir Next", "Trebuchet MS", sans-serif; font-size: 15px; letter-spacing: .08em; }
.hero-description { max-width: 540px; margin: 34px 0 0; color: #476267; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.action { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 178px; min-height: 54px; padding: 15px 19px; text-decoration: none; font-size: 14px; font-weight: 650; transition: transform .2s ease, background-color .2s ease; }
.action:hover { transform: translateY(-3px); }
.action-primary { background: #18363a; color: #f4f8f7; }
.action-primary:hover { background: #27605f; }
.action-secondary { background: #dce7e4; color: #18363a; }
.action-secondary:hover { background: #c8ddda; }
.availability { margin: 15px 0 0; color: #56706f; font-size: 12px; line-height: 1.6; }

.hero-art { min-width: 0; margin: 0; }
.stage { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(420px, 41vw, 540px); overflow: hidden; background: #18363a; }
.stage-light { position: absolute; inset: -25% -34%; transform: rotate(-25deg); background: linear-gradient(90deg, transparent 0 37%, #e3b783 37% 53%, #b8d7d1 53% 60%, transparent 60%); opacity: .82; }
.proposal-cover { position: relative; display: flex; flex-direction: column; width: min(73%, 370px); min-height: 420px; padding: 26px 28px 30px; transform: rotate(-4deg); background: #f4f8f7; box-shadow: 20px 26px 50px #0d242a88; }
.cover-top, .cover-bottom { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.cover-top span:last-child { font-family: "Avenir Next", "Trebuchet MS", sans-serif; letter-spacing: .14em; }
.cover-title { margin-top: auto; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: clamp(37px, 4.5vw, 59px); font-weight: 600; line-height: 1.24; letter-spacing: -.06em; }
.cover-rule { width: 54px; height: 3px; margin: 26px 0 18px; background: #378c84; }
.cover-bottom { align-items: end; line-height: 1.6; }
.cover-bottom span:last-child { max-width: 72px; text-align: right; }
.hero-art figcaption { margin-top: 12px; color: #56706f; font-size: 11px; line-height: 1.5; text-align: right; }

.showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 130px); border-top: 1px solid #c7d8d3; padding: 83px 0 104px; }
.showcase h2 { margin: 22px 0 0; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.35; letter-spacing: -.06em; }
.showcase-detail { align-self: center; }
.showcase-brief { padding: 0 0 28px; border-bottom: 1px solid #b8d0ca; }
.showcase-brief p { margin: 14px 0 0; color: #476267; font-size: 16px; line-height: 1.8; }
.deliverables { margin: 0; }
.deliverables div { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid #b8d0ca; }
.deliverables dt { color: #56706f; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.deliverables dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #c7d8d3; padding: 22px 0 34px; color: #56706f; font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #18363a; }
.footer-brand span { display: flex; flex-direction: column; gap: 2px; }
.footer-brand strong { font-size: 12px; }
.footer-brand small { font-family: "Avenir Next", "Trebuchet MS", sans-serif; font-size: 9px; letter-spacing: .15em; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.document-page { min-height: 100vh; display: flex; flex-direction: column; }
.document { flex: 1; width: min(760px, calc(100% - 48px)); margin: 55px auto 110px; }
.document h1 { font-size: clamp(46px, 6vw, 78px); line-height: 1.25; letter-spacing: -.065em; margin: 22px 0 35px; }
.document p:not(.eyebrow) { color: #476267; font-size: 16px; line-height: 1.95; margin: 23px 0; }
.document a { color: #276e69; }
:focus-visible { outline: 3px solid #378c84; outline-offset: 4px; }

@media (max-width: 980px) {
  .site-header, .hero, .showcase, .site-footer { width: min(100% - 48px, 760px); }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 44px; padding-top: 60px; }
  .hero h1 { font-size: clamp(70px, 12vw, 112px); }
  .stage { min-height: 500px; }
  .showcase { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .site-header, .hero, .showcase, .site-footer { width: calc(100% - 40px); }
  .site-header { padding: 23px 0; }
  .wordmark-cn { font-size: 25px; }
  .wordmark-en { font-size: 9px; letter-spacing: .12em; }
  .header-link { font-size: 11px; }
  .hero { padding: 54px 0 68px; }
  .hero h1 { font-size: clamp(61px, 15vw, 85px); margin-top: 20px; }
  .hero-description { margin-top: 27px; }
  .hero-actions { gap: 10px; margin-top: 28px; }
  .action { flex: 1 1 150px; min-width: 0; gap: 16px; padding-inline: 14px; font-size: 13px; }
  .stage { min-height: 370px; }
  .proposal-cover { min-height: 318px; padding: 19px 20px 21px; }
  .cover-title { font-size: 38px; }
  .cover-top, .cover-bottom { font-size: 8px; }
  .hero-art figcaption { text-align: left; }
  .showcase { padding: 57px 0 67px; }
  .showcase h2 { font-size: 42px; }
  .deliverables div { grid-template-columns: 82px 1fr; gap: 12px; }
  .deliverables dd { font-size: 15px; }
  .site-footer { align-items: start; flex-wrap: wrap; padding-bottom: 30px; }
  .site-footer p { flex-basis: 100%; order: 2; }
  .site-footer nav { margin-left: auto; }
  .document { margin-top: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action { transition: none; }
  .action:hover { transform: none; }
}