/* 财富自由是你的必经之路 · 30天共读社群
   视觉取自海报：暖米灰墙面 + 窗光 + 地平线落日，朱红点睛 */

:root {
  --wall-1: #dcd2c3;
  --wall-2: #d9d5cc;
  --wall-3: #d2d6d4;
  --ink: #2a2420;
  --ink-2: #4b443f;
  --ink-3: #7b746d;
  --ghost: #8a847d;
  --red: #a3201b;
  --red-deep: #861711;
  --red-soft: #c0453b;
  --ring: rgba(184, 74, 64, .36);
  --sun-hi: #f6c07a;
  --sun-1: #ec8a4e;
  --sun-2: #df6638;
  --sun-3: #c84b2c;
  --paper: #efe8dd;

  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --brush: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  --type: "Special Elite", "Courier New", monospace;
  --latin: "Cormorant Garamond", "Times New Roman", serif;
  --thin: "Josefin Sans", "Helvetica Neue", sans-serif;

  --gutter: clamp(16px, 5vw, 72px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wall-2);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
/* 胶片颗粒 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .25  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.wall {
  position: relative;
  background: linear-gradient(176deg, var(--wall-1) 0%, var(--wall-2) 48%, var(--wall-3) 100%);
}
.wall.rev { background: linear-gradient(176deg, var(--wall-3) 0%, var(--wall-2) 52%, var(--wall-1) 100%); }
.sunset {
  position: relative;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(196, 70, 40, .35), rgba(196, 70, 40, 0) 30%),
    url("../assets/sunset.jpg") center bottom / cover no-repeat,
    linear-gradient(180deg, var(--sun-3), var(--sun-2) 40%, var(--sun-1) 80%, var(--sun-hi));
}

/* 共用小件 */
.ghost { color: var(--ghost); --c: var(--ghost); }
.ring {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--ring);
}
.sundot {
  display: inline-block;
  position: relative;
  width: .9em;
  height: .9em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: middle;
  flex: none;
}
.sundot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.you { font-family: var(--brush); color: var(--red); font-weight: 400; }

.sec-tag {
  position: absolute;
  top: clamp(28px, 5vw, 56px);
  left: var(--gutter);
  font-family: var(--thin);
  font-weight: 200;
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--ink-3);
  display: flex;
  align-items: baseline;
  gap: 1em;
}
.sec-tag span {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--ink);
}
#frequency .sec-tag span { color: var(--red-soft); }

.ghost-date {
  position: absolute;
  left: -.12em;
  top: 14%;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(60, 50, 44, .07);
  pointer-events: none;
  user-select: none;
}
.v-note {
  position: absolute;
  left: max(6px, calc(var(--gutter) * .3));
  top: 24%;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink-2);
}


/* 油墨斑驳：用文字裁切一层静态噪点，模拟海报大字的印刷质感（比 SVG 滤镜轻得多） */
.ghost, .heavy, .stats b, .price b, .price span, .w-fortune .en b, .w-power .en b {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .83  0 0 0 0 .79  9 0 0 0 -5.6'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    linear-gradient(var(--c, currentColor), var(--c, currentColor));
}
.heavy { --c: var(--ink); }
.stats b { --c: var(--ghost); }
.price b, .price span { --c: var(--red); }
.w-fortune .en b, .w-power .en b { --c: var(--red); }

/* ================= 导航 ================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  padding: 22px var(--gutter) 18px;
  font-size: 15px;
  letter-spacing: .25em;
  transition: background .4s, padding .4s;
}
.nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; }
.nav a.is-red { color: var(--red-soft); }
.nav a:hover { color: var(--red); }
.nav.is-solid {
  background: rgba(220, 212, 200, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 14px;
  padding-bottom: 12px;
}

/* ================= HERO ================= */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.hero-wall {
  flex: 1;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px var(--gutter) 40px;
  overflow: hidden;
}
.hero-wall::before {           /* 墙上的窗光 */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/light.jpg") 58% 0 / auto 130% no-repeat;
  opacity: .55;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(70% 90% at 58% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 58% 30%, #000 30%, transparent 75%);
}
.hero-wall .v-note { top: 30%; }

.mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vh, 14px);
}
.mark .ring { width: clamp(52px, 9vh, 104px); aspect-ratio: 1; }
.mark .ring.r3 { width: clamp(40px, 7vh, 80px); }
.word { position: relative; display: flex; align-items: baseline; font-family: var(--serif); white-space: nowrap; }
.word .zh { font-weight: 900; font-size: clamp(46px, 8.4vh, 84px); line-height: 1; letter-spacing: .02em; }
.word .en { font-family: var(--latin); color: var(--ink-3); font-size: clamp(22px, 3.6vh, 36px); line-height: 1; }
.word .en b { font-family: var(--serif); font-weight: 900; color: var(--red); }

.w-fortune { transform: translateX(16%); }
.w-fortune .en b { font-size: 1.9em; margin-left: -.95em; margin-right: -.02em; }

.w-power { transform: translateX(-6%); }
.w-power .en { display: inline-flex; flex-direction: column; align-items: flex-start; margin-right: -.4em; z-index: 1; }
.w-power .en b { font-size: 2.1em; line-height: .8; }
.w-power .en small { font-size: .8em; color: var(--red-soft); margin-top: -.45em; margin-left: .2em; }

.w-transition { flex-direction: column; align-items: center; }
.w-transition .zh { color: var(--ink); font-weight: 600; font-size: clamp(44px, 7.6vh, 76px); letter-spacing: .12em; }
.w-transition .en { color: var(--red-soft); font-size: clamp(22px, 3.4vh, 34px); margin-top: -.3em; }
.w-transition .en b { font-size: 1.4em; }

.breakdown { position: relative; height: clamp(90px, 15vh, 160px); width: 60px; font-family: var(--type); color: var(--ink-2); font-size: 18px; }
.breakdown span { position: absolute; left: 50%; }
.breakdown span:nth-child(1) { top: 0;   transform: translateX(-130%); font-size: 22px; }
.breakdown span:nth-child(2) { top: 12%; transform: translateX(-20%); }
.breakdown span:nth-child(3) { top: 22%; transform: translateX(-90%); }
.breakdown span:nth-child(4) { top: 30%; transform: translateX(60%); }
.breakdown span:nth-child(5) { top: 42%; transform: translateX(10%); }
.breakdown span:nth-child(6) { top: 50%; transform: translateX(-80%); font-size: 22px; }
.breakdown span:nth-child(7) { top: 58%; transform: translateX(80%); }
.breakdown span:nth-child(8) { top: 70%; transform: translateX(-40%); }
.breakdown span:nth-child(9) { top: 84%; transform: translateX(-10%); }

/* 字母坠落 */
.fall { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; pointer-events: none; z-index: 1; }
.fall span {
  position: absolute;
  left: 50%;
  top: 0;
  font-family: var(--type);
  color: var(--ink-2);
  opacity: 0;
  animation: drop var(--dur) linear var(--delay) infinite;
}
@keyframes drop {
  0%   { opacity: 0; transform: translate(var(--x0), 0) rotate(0deg); }
  12%  { opacity: .75; }
  80%  { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--x1), var(--h)) rotate(var(--rot)); }
}

.hero-sun {
  min-height: clamp(300px, 40vh, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px var(--gutter) 40px;
  gap: 22px;
}
.lockup {
  position: relative;
  font-family: var(--serif);
  color: var(--red-deep);
  line-height: 1;
  display: grid;
  justify-items: start;
  width: max-content;
}
.lk-1 { display: flex; align-items: flex-start; gap: .25em; }
.lk-cn { font-weight: 900; font-size: 40px; letter-spacing: .02em; }
.lk-1 .sundot { font-size: 22px; margin-top: -4px; }
.lk-thin { font-family: var(--thin); font-weight: 200; font-size: 24px; letter-spacing: .02em; color: rgba(255, 238, 225, .62); }
.lk-abundant { margin-top: -.75em; }
.lk-3 { display: flex; align-items: baseline; gap: .3em; }
.lk-3 .lk-cn { letter-spacing: .25em; }
.lk-4 { font-size: 21px; font-weight: 600; letter-spacing: .02em; margin: .2em 0 .1em; }

.hero-slogan { text-align: center; margin-top: auto; }
.hero-slogan h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: .06em;
  color: rgba(255, 236, 220, .82);
  text-shadow: 0 1px 0 rgba(150, 50, 20, .25);
}
.hero-slogan h1 .you { font-size: 1.15em; color: var(--red-deep); }
.hero-slogan p { font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .12em; color: rgba(255, 240, 228, .92); margin: 4px 0 0; }
.hero-slogan p b { color: var(--red-deep); font-size: 1.2em; }

/* ================= 认知 ================= */
.about { padding: clamp(110px, 14vw, 170px) var(--gutter) clamp(80px, 10vw, 140px); }
.about-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.kicker { font-size: 13px; letter-spacing: .3em; color: var(--red-soft); margin-bottom: 26px; }
.h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.3;
  letter-spacing: .04em;
}
.h2 em { font-style: normal; color: var(--red); white-space: nowrap; }
.lead { margin-top: 30px; font-size: clamp(17px, 1.7vw, 20px); line-height: 2; color: var(--ink-2); max-width: 30em; }
.folder { color: var(--ink); font-weight: 500; white-space: nowrap; }
.brush { margin-top: 38px; font-family: var(--brush); font-size: clamp(26px, 3vw, 36px); color: var(--ink); letter-spacing: .06em; }
.red-line { margin-top: 10px; font-family: var(--serif); font-weight: 600; color: var(--red); letter-spacing: .2em; font-size: 16px; }

.about-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4.2;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(70, 50, 30, .45);
}
.ap-light { position: absolute; inset: 0 0 30% 0; background: url("../assets/light.jpg") 40% 0 / cover; }
.ap-sun { position: absolute; inset: 70% 0 0 0; background: url("../assets/sunset.jpg") center bottom / cover; }
.ap-v {
  position: absolute; left: 14px; top: 16px;
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(60, 50, 44, .55);
}
.about-photo figcaption {
  position: absolute; right: 18px; top: 70%;
  transform: translateY(-100%);
  padding-bottom: 8px;
  text-align: right; line-height: 1.4;
}
.about-photo figcaption .type { display: block; font-family: var(--type); font-size: 13px; color: var(--ink-2); }
.about-photo figcaption b { font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .08em; color: var(--ink); }

/* ================= 技能 ================= */
.skill { padding: clamp(110px, 13vw, 160px) var(--gutter) clamp(90px, 11vw, 150px); }
.skill-head { max-width: 1120px; margin: 0 auto; }
.heavy {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 76px);
  letter-spacing: .02em;
  line-height: 1.2;
}
.soft-red { margin-top: 22px; color: var(--red-soft); font-size: clamp(17px, 1.9vw, 22px); letter-spacing: .1em; line-height: 1.8; }

.stats {
  list-style: none;
  padding: 0;
  max-width: 1120px;
  margin: clamp(56px, 8vw, 96px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(60, 50, 44, .18);
}
.stats li {
  padding: 28px 18px 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}
.stats li + li { padding-left: 22px; border-left: 1px solid rgba(60, 50, 44, .12); }
.stats b { font-family: var(--latin); font-variant-numeric: lining-nums; font-weight: 500; font-size: clamp(48px, 6vw, 80px); line-height: 1; color: var(--ghost); }
.stats span { font-family: var(--serif); font-weight: 600; color: var(--red); font-size: 17px; white-space: nowrap; }
.stats em { flex-basis: 100%; font-style: normal; font-size: 14px; color: var(--ink-3); letter-spacing: .1em; margin-top: 6px; }

.steps {
  list-style: none;
  padding: 0;
  max-width: 1120px;
  margin: clamp(64px, 8vw, 110px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 31px; left: 32px; right: 10%;
  border-top: 1px dashed var(--ring);
}
.steps li { position: relative; }
.steps .ring { width: 64px; height: 64px; background: var(--wall-2); position: relative; }
.steps .ring.dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); transform: translate(-50%, -50%);
}
.steps h3 { margin-top: 24px; font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: .08em; }
.steps h3 small { display: block; font-family: var(--latin); font-variant-numeric: lining-nums; font-weight: 500; font-size: 16px; color: var(--red-soft); letter-spacing: .1em; margin-bottom: 4px; }
.steps p { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.9; max-width: 20em; }
.bug { font-family: var(--type); color: var(--red); font-weight: 700; }

/* ================= 频率 ================= */
.freq { padding: clamp(110px, 13vw, 160px) var(--gutter) clamp(80px, 10vw, 130px); }
.freq-title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: .18em;
  color: var(--ink);
}
.freq-title i { font-style: normal; color: var(--red); }
.cards {
  max-width: 1200px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.card {
  position: relative;
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
  background: linear-gradient(178deg, #ddd5c8 0%, #dad8d1 60%, #d4d8d6 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 50px -32px rgba(60, 40, 20, .5);
}
.card::after {               /* 卡片底部的落日一线 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background: url("../assets/sunset.jpg") center 85% / cover;
}
.card h3 {
  position: absolute;
  left: 0; right: 0; top: 34%;
  text-align: center;
  font-family: var(--serif);
  z-index: 2;
  pointer-events: none;
}
.card h3 .ghost { display: block; font-weight: 400; font-size: clamp(68px, 8.4vw, 116px); line-height: 1; opacity: .82; letter-spacing: -.02em; }
.card h3 b {
  position: absolute; right: 10%; top: 72%;
  font-weight: 900; font-size: clamp(20px, 2.3vw, 30px); color: var(--red); letter-spacing: .04em;
}
.card-foot {
  position: absolute; left: 20px; top: 18px; z-index: 2;
  font-family: var(--thin); font-weight: 200; font-size: 12px; letter-spacing: .4em; color: var(--ink-3);
}
.card-foot small { font-family: var(--latin); font-variant-numeric: lining-nums; color: var(--red-soft); letter-spacing: .1em; margin-right: 10px; font-size: 13px; }
.deco { position: absolute; inset: 0; z-index: 1; }
.deco span { position: absolute; font-family: var(--sans); color: var(--ink-2); line-height: 1; white-space: nowrap; }
.deco svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.card[data-kind="thought"] .deco span { animation: hover-drift 6s ease-in-out var(--d) infinite alternate; }
@keyframes hover-drift { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

.wave text { font-family: var(--sans); font-size: 9.6px; fill: var(--ink-2); }
.action-ring { transform-origin: 50% 77%; animation: spin 40s linear infinite; }
.action-ring text { font-family: var(--type); font-size: 9px; fill: var(--paper); letter-spacing: 2px; }

.loop {
  margin-top: clamp(44px, 6vw, 72px);
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .5em;
  color: var(--ink-2);
  display: flex; justify-content: center; align-items: center; gap: .8em;
}
.loop .sundot { color: var(--red); font-size: 20px; }

/* ================= 心力课 ================= */
.book {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 70px) var(--gutter) clamp(80px, 10vw, 120px);
  background: linear-gradient(180deg, var(--wall-3) 0%, #d8d0c3 30%, #e7c3a0 70%, #ec9c68 100%);
}
.book-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(56px, 13.5vw, 196px);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  color: rgba(90, 70, 55, .1);
  letter-spacing: -.02em;
  margin: 0 calc(var(--gutter) * -1);
}
.book-stage {
  position: relative;
  max-width: 820px;
  margin: clamp(-30px, -3vw, -10px) auto 0;
  aspect-ratio: 1 / 1.02;
  display: grid;
  place-items: center;
}
.orbit { position: absolute; inset: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1; }
.orbit text { font-family: var(--thin); font-weight: 300; font-size: 15px; letter-spacing: 3px; fill: rgba(60, 50, 44, .55); }
.orbit .s2 text { font-family: var(--serif); font-size: 15px; letter-spacing: 6px; fill: rgba(163, 32, 27, .55); }
.spin { transform-origin: 300px 300px; animation: spin 90s linear infinite; }
.spin.s2 { animation-duration: 70s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.book-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -98%); z-index: 2; }
.lockup-ink { color: var(--red); }
.lockup-ink .lk-thin { color: rgba(70, 60, 54, .55); }
.lockup-ink .lk-4 { color: var(--red-soft); font-weight: 400; }
.book-img {
  position: absolute;
  left: 50%; bottom: 0;
  width: 112%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 52%, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 52%, #000 72%, transparent 100%);
}
.book-foot { text-align: center; margin-top: clamp(16px, 3vw, 36px); position: relative; }
.book-foot h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: .06em; color: var(--ink-2); }
.book-foot h2 .you { font-size: 1.15em; }
.book-foot p { margin-top: 8px; font-family: var(--serif); font-weight: 600; letter-spacing: .16em; font-size: clamp(16px, 2vw, 22px); color: var(--ink-2); }
.book-foot p i { font-style: normal; color: var(--red); }

/* ================= 加入 ================= */
.join-wall {
  min-height: clamp(420px, 62vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 120px var(--gutter) 14px;
}
.join-wall::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/light.jpg") 50% 20% / cover no-repeat;
  opacity: .85;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent 100%);
}
.open-date {
  position: absolute; left: clamp(70px, 12vw, 180px); top: 34%;
  display: grid; gap: 4px;
  font-family: var(--serif);
}
.open-date span { font-size: 13px; letter-spacing: .5em; color: var(--ink-3); }
.open-date b { font-family: var(--latin); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: .06em; color: var(--ink); }
.open-date em { font-style: normal; font-size: 14px; letter-spacing: .15em; color: var(--red-soft); }
.price {
  position: relative;
  display: flex; align-items: flex-end;
  line-height: .78;
  color: var(--red);
  margin-right: clamp(0px, 4vw, 70px);
}
.price b { font-family: var(--serif); font-weight: 900; font-size: clamp(110px, 17vw, 230px); letter-spacing: -.03em; }
.price span { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.6vw, 48px); margin-left: .1em; padding-bottom: .1em; }

.join-sun { padding: clamp(50px, 7vw, 80px) var(--gutter) clamp(110px, 14vw, 170px); text-align: center; }
.overprint { position: relative; display: inline-grid; place-items: center; }
.overprint > * { grid-area: 1 / 1; }
.op-cn { font-family: var(--sans); font-weight: 300; font-size: clamp(22px, 3.2vw, 38px); color: rgba(150, 30, 20, .75); letter-spacing: .04em; }
.op-en { font-family: var(--thin); font-weight: 100; font-size: clamp(26px, 4.2vw, 50px); letter-spacing: .12em; color: rgba(255, 236, 220, .7); transform: translateY(.38em); }
.join-h {
  margin-top: 26px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(26px, 4.4vw, 54px);
  letter-spacing: .04em;
  color: var(--red-deep);
  line-height: 1.3;
}
.join-h span { display: inline-block; }
.join-sub { margin-top: 14px; font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2.2vw, 26px); color: #2e1a12; letter-spacing: .06em; line-height: 1.6; }
.join-sub small { font-size: .74em; font-weight: 400; }
.join-sub b { color: var(--red-deep); }

.join-card {
  max-width: 760px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: clamp(24px, 3.5vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  text-align: left;
  background: rgba(239, 232, 221, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(90, 25, 10, .55);
}
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.incl li { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .06em; }
.incl .sundot { color: var(--red); font-size: 16px; }
.join-action { text-align: center; display: grid; justify-items: center; gap: 12px; }
.ja-price { font-family: var(--serif); font-size: 16px; color: var(--ink-2); letter-spacing: .1em; }
.ja-price b { font-family: var(--latin); font-variant-numeric: lining-nums; font-weight: 500; font-size: 40px; color: var(--red); letter-spacing: 0; }
.ja-tip { font-size: 13px; letter-spacing: .2em; color: var(--ink-3); }
.journey { margin-top: clamp(36px, 5vw, 56px); font-size: clamp(15px, 1.8vw, 20px); letter-spacing: .12em; color: rgba(60, 20, 10, .78); }


/* ================= 主理人 ================= */
.host { padding: clamp(110px, 13vw, 160px) var(--gutter) clamp(90px, 11vw, 140px); }
.host-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}
.avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  /* 没放头像时，用落日做底 */
  background: url("../assets/sunset.jpg") center bottom / cover, var(--sun-2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ph { display: none; }
.avatar.is-empty .avatar-ph {
  display: grid; place-items: center; position: absolute; inset: 0;
  font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: rgba(255, 240, 228, .85);
}
.host-avatar { position: relative; margin: 0; padding: 22px; }
.host-avatar::before {            /* 海报里的细线圆环 */
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--ring); border-radius: 50%;
}
.host-avatar .avatar {
  width: clamp(200px, 24vw, 290px);
  aspect-ratio: 1;
  box-shadow: 0 30px 60px -28px rgba(90, 40, 20, .55);
}
.host-avatar .sundot { position: absolute; right: 12%; top: 6%; color: var(--red); font-size: 26px; background: var(--wall-2); }
.host-role { margin-top: -12px; font-size: 14px; letter-spacing: .3em; color: var(--ink-3); }
.host-words {
  position: relative;
  margin: 34px 0 0;
  padding-left: 28px;
  border-left: 1.5px solid var(--ring);
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 2.1;
  color: var(--ink-2);
}
.host-words p + p { margin-top: .9em; }
.host-words em { font-style: normal; color: var(--red); font-weight: 600; }
.host-sign { margin-top: 26px; text-align: right; font-family: var(--brush); font-size: clamp(24px, 2.6vw, 30px); color: var(--ink); }

/* ================= 页脚 ================= */
.foot {
  padding: 60px 0 calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #c3492b 0%, #a5361f 55%, #7c2415 100%);
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.marquee { overflow: hidden; }
.track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.track span {
  font-family: var(--serif); font-weight: 900; font-size: clamp(24px, 3.4vw, 40px);
  color: rgba(255, 214, 190, .22); letter-spacing: .08em; white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
.foot-line { margin-top: 18px; text-align: center; font-family: var(--serif); font-size: 14px; letter-spacing: .14em; color: rgba(255, 240, 228, .9); padding: 0 var(--gutter); }
.foot-copy { margin-top: 8px; text-align: center; font-size: 12px; letter-spacing: .14em; color: rgba(255, 240, 228, .7); padding: 0 var(--gutter); }

/* 进场动效（仅在 JS 可用时隐藏） */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .steps li:nth-child(2) { transition-delay: .15s; }
.js .steps li:nth-child(3) { transition-delay: .3s; }
.js .card:nth-child(2) { transition-delay: .15s; }
.js .card:nth-child(3) { transition-delay: .3s; }

/* ================= 响应式 ================= */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; width: 100%; justify-self: center; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid rgba(60, 50, 44, .12); }
  .cards { grid-template-columns: 1fr; max-width: 440px; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { top: 32px; bottom: 60px; left: 31px; right: auto; border-top: 0; border-left: 1px dashed var(--ring); }
  .steps li { padding-left: 92px; }
  .steps .ring { position: absolute; left: 0; top: 0; }
  .steps h3 { margin-top: 6px; }
  .host-grid { grid-template-columns: 1fr; justify-items: center; }
  .host-text { width: 100%; max-width: 560px; }
}
@media (max-width: 640px) {
  .nav { font-size: 14px; }
  .hero-wall .v-note, .ghost-date { display: none; }
  .hero-wall { min-height: 0; padding: 78px 16px 24px; }
  .mark { gap: 6px; }
  .mark .ring { width: 44px; }
  .mark .ring.r3 { width: 34px; }
  .word .zh { font-size: 44px; }
  .w-transition .zh { font-size: 42px; }
  .breakdown { height: 96px; font-size: 15px; }
  .hero-sun { min-height: 0; padding-top: 20px; gap: 18px; }
  .join-wall .v-note { display: none; }
  .lk-cn { font-size: 34px; }
  .lk-thin { font-size: 20px; }
  .lk-4 { font-size: 18px; }
  .join-card { grid-template-columns: 1fr; }
  .open-date { left: var(--gutter); top: 120px; }
  .book-stage { aspect-ratio: 1 / 1.25; }
  .book-center { transform: translate(-50%, -110%); }
  .book-img { width: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fall, .track { animation: none !important; }
  .fall span, .spin, .action-ring, .card .deco span { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}