/* ============================================================
   HOTEL EARTH — home view. Consumes the tokens in brand.css.
   Hero → the idea → front desk → two keys → the book → doors →
   house practice → pass the key.
   ============================================================ */

/* ---------- HERO — always the night side, in both themes ---------- */
.he-hero {
  --he-scroll: 0;
  --he-porcelain: #F3EFF2; --he-silver: #B9B2BE; --he-faint: #8A8394; --he-ink: #07060B;
  --he-hair-strong: rgba(243, 239, 242, .28);
  --he-dawn-text: linear-gradient(90deg, #8C9BEA 0%, #B48BDD 46%, #F27AA6 100%);
  --planet: clamp(1000px, 170vw, 3200px);      /* diameter of the planet */
  --limb: clamp(96px, 15vh, 170px);            /* how far the horizon rises into the hero */
  background: #07060B; color: #F3EFF2;
  min-height: min(100svh, 980px);
  padding-top: calc(72px + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: calc(var(--limb) + clamp(2rem, 5vh, 4rem));
  justify-content: center;
}
.he-hero::after { display: none; }              /* no seam: the horizon is the edge */
.he-hero__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* night sky: a breath of violet haze above the horizon + a scatter of stars */
.he-hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 11% 18%, rgba(243,239,242,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 23% 41%, rgba(243,239,242,.55) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 34% 12%, rgba(243,239,242,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 27%, rgba(243,239,242,.45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 58% 9%, rgba(243,239,242,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 66% 36%, rgba(243,239,242,.5) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 77% 20%, rgba(243,239,242,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 44%, rgba(243,239,242,.5) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 93% 13%, rgba(243,239,242,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 52%, rgba(243,239,242,.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 40% 58%, rgba(243,239,242,.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 61%, rgba(243,239,242,.32) 50%, transparent 52%),
    radial-gradient(ellipse 90% 46% at 50% 100%, rgba(107,58,138,.34) 0%, rgba(62,76,136,.12) 46%, transparent 72%),
    linear-gradient(180deg, #05040A 0%, #07060B 55%, #0B0814 100%);
  animation: heSky 60s ease-in-out infinite alternate;
}
@keyframes heSky { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10px, -14px, 0); } }

/* the planet: a huge circle whose top arc is the horizon */
.he-hero__planet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  transform: translate3d(0, calc(var(--he-scroll) * 60px), 0);
  opacity: calc(1 - var(--he-scroll) * .7);
  /* the dawn is brightest dead ahead and falls away along the horizon */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  animation: heRise 2.2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes heRise { from { transform: translate3d(0, 46px, 0); opacity: 0; } }
.he-hero__planet > * {
  position: absolute; left: 50%; top: calc(100% - var(--limb));
  width: var(--planet); height: var(--planet); margin-left: calc(var(--planet) / -2); border-radius: 50%;
}
/* fear → love, read left to right along the horizon (only the middle of the circle is on screen) */
.he-glow, .he-rim { background: linear-gradient(90deg, #5B6FD0 30%, #8A5BB8 47%, #E8578F 62%, #F9B4CB 72%, #E8578F 84%); }
.he-glow--far  { filter: blur(70px); opacity: .5; transform: translateY(-26px) scale(1.012); animation: heBreathe 9s ease-in-out infinite alternate; }
.he-glow--near { filter: blur(16px); opacity: .85; transform: translateY(-6px); }
.he-rim        { filter: blur(.6px); transform: translateY(-1.5px); background: linear-gradient(90deg, #8C9BEA 30%, #C9A6EC 47%, #FFC2D6 62%, #FFF1F5 71%, #FFB5CE 84%); }
.he-body       { background: radial-gradient(ellipse 60% 22% at 58% 0%, #1B1233 0%, #0D0A18 42%, #07060B 78%); }
@keyframes heBreathe { from { opacity: .38; } to { opacity: .62; } }

.he-hero__inner { max-width: 1240px; }

/* crest */
.he-crest { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-bottom: clamp(1.4rem, 3.4vh, 2.4rem); }
.he-crest__mark { width: 62px; height: 62px; color: #F3EFF2; margin-bottom: -.35rem; }
.he-crest__word {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(.95rem, .8rem + .5vw, 1.2rem);
  --he-track: .62em; padding-left: .62em; text-transform: uppercase; color: #F3EFF2; line-height: 1;
}
.he-crest__est { font-size: .6rem; font-weight: 600; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--he-faint); }
html[lang^='zh'] .he-crest__est { font-size: .74rem; letter-spacing: .3em; text-indent: .3em; }

/* headline */
.he-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.85rem, 1rem + 5.5vw, 6.3rem); line-height: 1.02; letter-spacing: -.012em; color: #F3EFF2;
  text-wrap: balance;
}
.he-hero__title em {
  font-style: italic; font-weight: 400; padding-right: .06em;
  background: var(--he-dawn-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[lang^='zh'] .he-hero__title { font-weight: 500; font-size: clamp(2.05rem, 1rem + 4.4vw, 4.6rem); line-height: 1.28; letter-spacing: .04em; }
html[lang^='zh'] .he-hero__title em { font-style: normal; }
.he-hero__sub {
  margin: clamp(1.4rem, 3.2vh, 2.2rem) auto 0; max-width: 40rem;
  font-size: clamp(1rem, .94rem + .35vw, 1.2rem); line-height: 1.62; color: var(--he-silver);
}
.he-hero__cta { margin-top: clamp(1.8rem, 4vh, 2.8rem); align-items: center; gap: var(--space-3) var(--space-4); }
.he-hero__cta .btn--primary, .he-hero__cta .btn--primary:hover { background: #F3EFF2; color: #07060B; border-color: #F3EFF2; }
.he-hero__cta .btn--primary:hover { box-shadow: 0 12px 40px rgba(232,87,143,.28), 0 2px 18px rgba(138,91,184,.3); }
.he-hero__cta .btn--ghost { color: #F3EFF2; border-color: rgba(243,239,242,.3); }
.he-hero__cta .btn--ghost:hover { border-color: #F3EFF2; color: #F3EFF2; background: rgba(243,239,242,.05); }
.he-hero__cta .btn--ghost svg { width: .8em; height: .8em; }
.he-hero__pdf {
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--he-silver);
  padding: 1em .4em; border-bottom: 1px solid transparent; flex-basis: 100%; text-align: center; width: max-content; flex-grow: 0;
}
.he-hero__cta { flex-wrap: wrap; }
.he-hero__pdf span { border-bottom: 1px solid rgba(243,239,242,.3); padding-bottom: .35em; }
.he-hero__pdf:hover { color: #F3EFF2; }
html[lang^='zh'] .he-hero__pdf { font-size: .85rem; letter-spacing: .14em; }
.he-hero__scroll { bottom: clamp(1rem, 3vh, 2rem); height: 40px; }
.he-hero__scroll .hero__scroll-line { background: linear-gradient(180deg, transparent, #F3EFF2 50%, transparent); }

@media (max-width: 560px) {
  .he-hero { padding-top: calc(72px + 1.2rem); --limb: clamp(70px, 10vh, 110px); padding-bottom: calc(var(--limb) + 2.2rem); }
  .he-crest { margin-bottom: 1.4rem; gap: .7rem; }
  .he-crest__mark { width: 50px; height: 50px; }
  .he-hero__title { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  html[lang^='zh'] .he-hero__title { font-size: clamp(1.6rem, 8vw, 2.3rem); letter-spacing: .02em; }
  .he-hero__sub { font-size: .98rem; line-height: 1.55; }
  .he-hero__cta { gap: .7rem; }
  .he-hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .he-hero__sky, .he-hero__planet, .he-glow--far { animation: none; }
  .he-hero__planet { transform: none; opacity: 1; }
}

/* ---------- THE IDEA ---------- */
.he-stay { text-align: center; background: var(--he-ink); padding-block: clamp(5rem, 11vw, 10rem); }
.he-stay__quote {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.7rem, 1rem + 2.9vw, 3.35rem); line-height: 1.24; letter-spacing: -.005em;
  max-width: 21em; margin: 0 auto; color: var(--he-porcelain); text-wrap: balance;
}
html[lang^='zh'] .he-stay__quote { font-style: normal; font-weight: 500; font-size: clamp(1.35rem, .95rem + 1.9vw, 2.3rem); line-height: 1.7; letter-spacing: .04em; max-width: 19em; }
.he-stay__cite { margin-top: var(--space-10); font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--he-faint); }
.he-stay__cite::before { content: ""; display: block; width: 46px; height: 1px; margin: 0 auto var(--space-5); background: var(--he-dawn); }
html[lang^='zh'] .he-stay__cite { font-size: .8rem; letter-spacing: .24em; }

/* ---------- THE FRONT DESK — a hotel directory board ---------- */
.he-desk { background: var(--he-ink-2); border-block: 1px solid var(--he-line-soft); }
.he-desk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--space-8), 5vw, var(--space-20)); max-width: 1060px; margin-inline: auto; border-top: 1px solid var(--he-line); }
.he-desk__opt {
  position: relative; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; padding: 1.25rem .25rem; border-bottom: 1px solid var(--he-line); color: var(--he-silver);
  transition: color var(--transition), padding var(--transition);
}
.he-desk__opt::after { content: "→"; font-size: 1rem; color: var(--he-faint); transition: transform var(--transition), color var(--transition); }
.he-desk__opt::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--he-dawn); transition: width 420ms cubic-bezier(.16, 1, .3, 1); }
.he-desk__no { font-size: .68rem; font-weight: 600; letter-spacing: .22em; color: var(--he-faint); font-variant-numeric: tabular-nums; }
.he-desk__label { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.2; color: var(--he-porcelain); }
html[lang^='zh'] .he-desk__label { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; }
.he-desk__opt:hover, .he-desk__opt.is-active { padding-left: .7rem; }
.he-desk__opt:hover::before, .he-desk__opt.is-active::before { width: 100%; }
.he-desk__opt:hover::after, .he-desk__opt.is-active::after { transform: translateX(4px); color: var(--he-love); }
.he-desk__opt.is-active .he-desk__no { color: var(--he-love); }

.he-desk__result {
  position: relative; max-width: 760px; margin: clamp(var(--space-10), 5vw, var(--space-16)) auto 0; text-align: center;
  padding: clamp(var(--space-8), 5vw, var(--space-16)); border: 1px solid var(--he-line); border-radius: var(--radius-card);
  background: radial-gradient(120% 90% at 50% 0%, var(--he-glow-violet) 0%, transparent 62%), var(--he-panel);
  overflow: hidden;
}
.he-desk__result::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--he-dawn); }
.he-desk__result.is-open { animation: heOpen .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes heOpen { from { opacity: 0; transform: translateY(14px); } }
.he-desk__room { font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--he-love); margin-bottom: var(--space-4); }
html[lang^='zh'] .he-desk__room { font-size: .82rem; letter-spacing: .22em; }
.he-desk__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.12; margin-bottom: var(--space-5); }
.he-desk__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.45; color: var(--he-silver); max-width: 30em; margin: 0 auto var(--space-8); }
html[lang^='zh'] .he-desk__quote { font-style: normal; font-size: 1.12rem; line-height: 1.8; }
.he-desk__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) { .he-desk__grid { grid-template-columns: 1fr; } .he-desk__opt { grid-template-columns: 2.6rem 1fr auto; padding-block: 1.05rem; } }

/* ---------- TWO KEYS ---------- */
.he-keys { background: var(--he-ink); overflow: hidden; }
.he-keys__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(var(--space-4), 2.4vw, var(--space-8)); max-width: 1060px; margin-inline: auto; }
.he-key {
  --key: var(--he-fear-soft); --key-glow: var(--he-glow-fear);
  position: relative; padding: clamp(var(--space-8), 4vw, var(--space-12)); border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--key) 34%, var(--he-line));
  background: radial-gradient(130% 80% at 50% 0%, var(--key-glow) 0%, transparent 60%), var(--he-panel);
  overflow: hidden;
}
.he-key--love { --key: var(--he-love); --key-glow: var(--he-glow-love); }
.he-key::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--key); opacity: .9; }
/* the punched hole of a key card */
.he-key::after { content: ""; position: absolute; top: 1.5rem; right: 1.5rem; width: 34px; height: 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--key) 50%, transparent); }
.he-key__head { margin-bottom: var(--space-8); }
.he-key__no { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--he-faint); margin-bottom: var(--space-3); }
.he-key__head h3 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1; font-weight: 400; font-style: italic; color: var(--key); }
html[lang^='zh'] .he-key__head h3 { font-style: normal; font-weight: 500; font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); }
.he-key__list { list-style: none; display: flex; flex-direction: column; }
.he-key__list li { padding: var(--space-5) 0; border-top: 1px solid var(--he-line); display: flex; flex-direction: column; gap: .45rem; }
.he-key__label { font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--he-faint); }
html[lang^='zh'] .he-key__label { font-size: .8rem; letter-spacing: .18em; }
.he-key__value { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.3; color: var(--he-porcelain); }
html[lang^='zh'] .he-key__value { font-size: 1.15rem; line-height: 1.6; }
.he-keys__or { align-self: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.5rem; color: var(--he-silver); width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 1px solid var(--he-line); border-radius: 50%; background: var(--he-ink); }
html[lang^='zh'] .he-keys__or { font-family: var(--font-display); font-style: normal; font-size: 1.1rem; }
.he-keys__ask { text-align: center; margin: clamp(var(--space-10), 5vw, var(--space-16)) auto 0; max-width: 30em; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.3; color: var(--he-silver); }
.he-keys__ask em { font-style: italic; background: var(--he-dawn-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[lang^='zh'] .he-keys__ask { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.7; }
html[lang^='zh'] .he-keys__ask em { font-style: normal; }
.he-keys__cta { text-align: center; margin-top: var(--space-8); }
@media (max-width: 760px) {
  .he-keys__pair { grid-template-columns: 1fr; }
  .he-keys__or { justify-self: center; margin-block: -.4rem; z-index: 1; }
}

/* ---------- THE BOOK IN EVERY ROOM ---------- */
.he-book { background: var(--he-ink-2); border-block: 1px solid var(--he-line-soft); overflow: hidden; }
.he-book__grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
.he-book__copy h2 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem); line-height: 1.02; margin-bottom: var(--space-2); }
html[lang^='zh'] .he-book__copy h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); line-height: 1.3; }
.he-book__by { font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--he-faint); margin-bottom: var(--space-8); }
html[lang^='zh'] .he-book__by { font-size: .84rem; letter-spacing: .2em; }
.he-book__copy .muted { color: var(--he-silver); font-size: 1.04rem; line-height: 1.72; max-width: 36rem; }
.he-book__copy .muted strong { color: var(--he-porcelain); font-weight: 600; }
.he-book__bridge {
  margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 1px solid transparent; position: relative; max-width: 34rem;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.4; color: var(--he-porcelain);
}
.he-book__bridge::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; background: linear-gradient(180deg, var(--he-fear), var(--he-violet), var(--he-love)); }
html[lang^='zh'] .he-book__bridge { font-style: normal; font-size: 1.12rem; line-height: 1.85; }
.he-book__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.he-book__object { position: relative; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.he-book__object::before { content: ""; position: absolute; inset: 4% -12% -6%; background: radial-gradient(closest-side, var(--he-glow-love) 0%, var(--he-glow-violet) 45%, transparent 72%); filter: blur(10px); }
.he-book .book-cover {
  position: relative; max-width: min(430px, 86%); border: 0; border-radius: 4px 8px 8px 4px; transform: rotate(-3deg);
  box-shadow: -1px 0 0 rgba(255,255,255,.35) inset, 0 2px 2px rgba(0,0,0,.4), 0 28px 60px -12px rgba(0,0,0,.8), 0 60px 120px -30px rgba(0,0,0,.7);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.he-book .book-cover:hover { transform: rotate(-1deg) translateY(-6px) scale(1.015); }
@media (max-width: 900px) { .he-book__grid { grid-template-columns: 1fr; } .he-book__object { order: -1; } .he-book .book-cover { max-width: 250px; } }

/* ---------- INSIDE — six doors ---------- */
.he-inside { background: var(--he-ink); }
.he-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--he-line); border-left: 1px solid var(--he-line); }
.he-doors .card {
  text-align: left; background: transparent; border: 0; border-right: 1px solid var(--he-line); border-bottom: 1px solid var(--he-line);
  border-radius: 0; padding: clamp(var(--space-6), 3vw, var(--space-10)); position: relative; color: inherit;
  transition: background var(--transition);
}
.he-doors .card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; min-height: 250px; }
.he-doors .card:hover { transform: none; box-shadow: none; background: var(--he-ink-2); }
.he-doors .card::after { content: "→"; position: absolute; right: 1.6rem; top: 1.7rem; color: var(--he-faint); transition: transform var(--transition), color var(--transition); }
.he-doors .card:hover::after { transform: translateX(4px); color: var(--he-love); }
.he-doors .card__num { font-family: 'Inter Tight', sans-serif; font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .26em; color: var(--he-faint); margin-bottom: var(--space-8); }
.he-doors .card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; margin-bottom: var(--space-3); color: var(--he-porcelain); }
.he-doors .card p { font-size: .98rem; line-height: 1.6; color: var(--he-silver); }
.he-inside__cta { text-align: center; margin-top: var(--space-12); }
@media (max-width: 900px) { .he-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .he-doors { grid-template-columns: 1fr; } }

/* ---------- HOUSE PRACTICE ---------- */
.he-practice { background: var(--he-ink-2); border-top: 1px solid var(--he-line-soft); }
.he-practice .section-head { max-width: 52rem; }

.he-move {
  position: relative; max-width: 680px; margin-inline: auto; text-align: center; overflow: hidden;
  padding: clamp(var(--space-8), 5vw, var(--space-16)); border-radius: 22px; border: 1px solid var(--he-line);
  background: radial-gradient(120% 80% at 50% 110%, var(--he-glow-love) 0%, var(--he-glow-violet) 40%, transparent 70%), var(--he-panel);
  transition: border-color 600ms ease, box-shadow 600ms ease;
}
.he-move::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--he-dawn); }
.he-move__label { font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--he-love); margin-bottom: var(--space-6); }
.he-move__date { color: var(--he-faint); margin-left: .8em; }
html[lang^='zh'] .he-move__label { font-size: .82rem; letter-spacing: .22em; }
.he-move__title { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.1; margin-bottom: var(--space-5); }
html[lang^='zh'] .he-move__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.4; }
.he-move__body { color: var(--he-silver); font-size: 1.05rem; line-height: 1.7; max-width: 32rem; margin: 0 auto var(--space-8); }
.he-move__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.he-move__next { display: block; margin: var(--space-5) auto 0; }
.he-move__streak { margin-top: var(--space-6); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--he-porcelain); min-height: 1.4em; }
html[lang^='zh'] .he-move__streak { font-style: normal; font-size: 1.05rem; }
.he-move.is-dealing .he-move__title, .he-move.is-dealing .he-move__body { animation: heDeal .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes heDeal { from { opacity: 0; transform: translateY(10px); } }
.he-move.is-done { border-color: color-mix(in srgb, var(--he-love) 55%, var(--he-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--he-love) 20%, transparent), 0 30px 80px -30px var(--he-glow-love); }

/* ---------- PASS THE KEY (closing) ---------- */
.he-pass { background: var(--he-ink); position: relative; overflow: hidden; text-align: center; padding-block: clamp(5rem, 10vw, 9rem); }
.he-pass::before { content: ""; position: absolute; left: 50%; bottom: -55%; width: min(1200px, 150vw); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, var(--he-glow-love) 0%, var(--he-glow-violet) 34%, transparent 62%); pointer-events: none; }
.he-pass .wrap { position: relative; }
.he-pass h2 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem); line-height: 1.05; margin-bottom: var(--space-5); }
html[lang^='zh'] .he-pass h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1.35; }
.he-pass__p { max-width: 34rem; margin: 0 auto var(--space-10); color: var(--he-silver); }
.he-pass__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .he-desk__actions .btn, .he-move__actions .btn, .he-pass__cta .btn, .he-book__cta .btn { flex: 1 1 100%; }
  .he-hero__cta .btn { flex: 1 1 100%; }
}

/* ---------- graphics: chapter line-icons, the shift as one line, a horizon over "the idea" ---------- */
.card__icon, .he-desk__icon, .outline-row__icon svg { color: var(--he-porcelain); }
.card__icon circle, .card__icon path, .card__icon line, .card__icon rect, .card__icon polyline, .card__icon ellipse,
.he-desk__icon circle, .he-desk__icon path, .he-desk__icon line, .he-desk__icon rect, .he-desk__icon polyline, .he-desk__icon ellipse,
.outline-row__icon circle, .outline-row__icon path, .outline-row__icon line, .outline-row__icon rect, .outline-row__icon polyline, .outline-row__icon ellipse { stroke: currentColor; fill: none; stroke-width: 2.2; }
.card__icon .gold, .he-desk__icon .gold, .outline-row__icon .gold { stroke: var(--he-love); }
.card__icon .goldfill, .he-desk__icon .goldfill, .outline-row__icon .goldfill { fill: var(--he-love); stroke: none; }
.he-doors .card__icon { width: 54px; height: 54px; margin-bottom: var(--space-6); opacity: .9; transition: transform 600ms cubic-bezier(.16,1,.3,1); }
.he-doors .card:hover .card__icon { transform: translateY(-3px); }
.he-doors .card__num { margin-bottom: var(--space-3); }
.he-desk__icon { width: 64px; height: 64px; margin: 0 auto var(--space-5); display: block; }
.he-desk__icon:empty { display: none; }

/* the four-step shift reads as one line running from fear to love */

/* a quiet horizon above the idea — the hero's planet, echoed as a single line */
.he-stay { position: relative; overflow: hidden; }
.he-stay::before { content: ""; position: absolute; left: 50%; top: clamp(1.5rem, 4vw, 3rem); width: min(1500px, 190vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  border-top: 1px solid rgba(243,239,242,.13); -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 38%, #000 62%, transparent 88%); mask-image: linear-gradient(90deg, transparent 12%, #000 38%, #000 62%, transparent 88%); pointer-events: none; }
.he-stay .wrap { position: relative; }