/* Language switcher + Traditional Chinese typography.
   Loaded only by the zh page and by index.html (for the switcher itself). */

.langsw {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.langsw__opt {
  display: inline-block;
  /* 7px vertical keeps the hit area at ~26px. WCAG 2.2 SC 2.5.8 (AA) wants at
     least 24×24 CSS px, and 5px padding left these at 20px. */
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  line-height: 1;
  transition: color .22s ease, background-color .22s ease;
}

.langsw__opt:hover { color: #fff; }

.langsw__opt.is-on {
  color: #16241C;
  background: #EEF2EC;
  font-weight: 600;
}

/* The fixed header turns light once the journey ends — invert there.
   site.js toggles `.scrolled` on .nav (site.js:63); an earlier guess at
   `.is-solid` matched nothing, so these rules never applied. */
.nav.scrolled .langsw,
.nojourney .nav .langsw {
  border-color: rgba(22,36,28, .16);
  background: rgba(22,36,28, .04);
}
.nav.scrolled .langsw__opt,
.nojourney .nav .langsw__opt { color: rgba(22,36,28, .55); }
.nav.scrolled .langsw__opt:hover,
.nojourney .nav .langsw__opt:hover { color: #16241C; }
.nav.scrolled .langsw__opt.is-on,
.nojourney .nav .langsw__opt.is-on { color: #FFF; background: #16241C; }

.langsw--v { margin-left: 14px; }

/* Hero switcher.
   The fixed header carries `.nav--hidden` for the whole Earth→KL journey, so
   the very first screen a visitor sees had no way to switch language. This one
   lives inside the journey and hands off to the header switcher the moment the
   header appears — .nav precedes .journey as a sibling, so it can drive that.

   Deliberately NOT tagged .jhero__fade: site.js runs a GSAP .from() over that
   class, and an appended fourth element was left stranded at the tween's start
   value (inline opacity:0). Own entrance instead, so this never depends on the
   hero's animation timeline. */
.langsw--hero {
  position: absolute;
  top: clamp(22px, 3.4vh, 40px);
  right: var(--gutter);
  z-index: 6;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* `backwards`, not `both`: a filled-forwards animation keeps its final opacity
   at animation priority, which outranks normal declarations and would defeat
   the handoff rule below. This applies the start frame during the delay only,
   then hands the element back to the cascade. */
.anim .langsw--hero { animation: langswIn .9s var(--ease) .75s backwards; }

@keyframes langswIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anim .langsw--hero { animation: none; }
}

.nav:not(.nav--hidden) ~ .journey .langsw--hero {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

@media (max-width: 820px) {
  /* .jside labels are hidden at this width; keep the switcher, it is the only
     language control on the first screen. */
  .langsw--hero { top: clamp(16px, 2.6vh, 28px); }
}

/* The fixed header is transparent for the whole journey sequence, so the
   video-hero switcher is the only one on the first screen. It must survive
   every width — .vnav stays visible on mobile even though .vnav__links don't. */
@media (max-width: 900px) {
  .langsw { font-size: 11.5px; padding: 2px; }
  .langsw__opt { padding: 6px 10px; }   /* ~24px, the SC 2.5.8 floor */
  .langsw--v { margin-left: 8px; }
}

@media (max-width: 620px) {
  .vnav { gap: 8px; padding: 8px 9px 8px 11px; }
  .langsw--v { margin-left: 6px; }
  .langsw--v .langsw__opt { padding: 7px 9px; font-size: 11px; }  /* 7px keeps the hit area ≥24px */

  /* Three languages, a wordmark and a CTA do not fit across 375px. The fixed
     header is still `.nav--hidden` at the video hero, so this switcher is the
     only language control on that screen and cannot be dropped — and shrinking
     it far enough took the tap target under the 24px floor. So the wordmark
     gives way instead: the logo mark alone still identifies the brand, and it
     buys enough room for all three languages at a proper size. */
  .vnav .vnav__brand .brand__txt { display: none; }
}

/* ── Traditional Chinese typography ──────────────────────────────────────── */
/* Chinese has no ascenders/descenders and reads denser than Latin, so the
   Latin line-heights run tight and the display tracking runs loose. */
/* Traditional and Simplified want different faces: the TC and SC cuts differ in
   glyph shape for shared characters, so serving TC fonts to a Simplified page
   renders some characters in Traditional-style forms. */
html[lang^="zh-Hant"] {
  --zh-sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
             "Hiragino Sans CNS", "Heiti TC", sans-serif;
}

html[lang^="zh-Hans"] {
  --zh-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
             "Hiragino Sans GB", "Heiti SC", sans-serif;
}

html[lang^="zh"] body { font-family: var(--zh-sans); }

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .jtitle,
html[lang^="zh"] .vhead {
  font-family: var(--zh-sans);
  letter-spacing: .02em;      /* Latin display faces are tracked tight; CJK needs air */
}

/* Display sizes can run tight; CJK has no descender slack, so anything set in a
   height-constrained box needs more. 1.24 clipped the hub headings by 3px. */
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] .jtitle,
html[lang^="zh"] .vhead { line-height: 1.24; }

/* ── Hero title: CJK needs a full em per character ──────────────────────────
   site.css sizes .jtitle--top at min(clamp(2.6rem,9vw,10rem),15.5vh) = 160px on
   a 1920px screen, inside a 560px .jhero__tl. That was measured against "home
   in" — 7 Latin glyphs at roughly half an em each, so ~560px. 「第二個家」 is 4
   glyphs at a FULL em each = 640px, which overflowed and broke the line into
   您的 / 第二 / 個家. The extra line then pushed the CTAs down into the scroll
   cue. Widen the column and ease the cap so the longest Chinese line always
   fits on one line. A slightly smaller px size reads the same optical weight in
   CJK, because every glyph fills its em box where Latin does not. */
html[lang^="zh"] .jhero__tl { max-width: min(92vw, 680px); }

html[lang^="zh"] .jtitle--top,
html[lang^="zh"] .jtitle--bottom {
  font-size: min(clamp(2.4rem, 8vw, 9rem), 14vh);
  letter-spacing: -0.01em;   /* the Latin display face is tracked -0.045em, which collides CJK glyphs */
}

/* Each hero line is a single short phrase — never let one break mid-phrase. */
html[lang^="zh"] .jtitle--top span[data-split],
html[lang^="zh"] .jtitle--bottom span[data-split] { white-space: nowrap; }

/* Chinese hero copy is taller than the English it replaced — denser glyphs at
   line-height 1.85 — so on a short laptop the CTAs come down to meet the scroll
   cue (6px apart at 668px tall). site.css only relieves this below 660px.
   Drop the cue rather than the copy: the primary CTA directly above it already
   reads 「開始降落 ↓」, so the affordance survives and the value proposition
   stays on screen. */
@media (max-height: 780px) {
  html[lang^="zh"] .scrollcue { display: none; }
}

html[lang^="zh"] h3 { line-height: 1.4; }

html[lang^="zh"] p,
html[lang^="zh"] li,
html[lang^="zh"] .v,
html[lang^="zh"] .a p { line-height: 1.85; }

/* Chinese has no hyphenation to soak up a ragged edge, so a short final line
   reads as a mistake rather than as rag. Two subheads were ending on a
   3-character orphan; `pretty` pulls a word down to even the last lines out. */
html[lang^="zh"] p,
html[lang^="zh"] li,
html[lang^="zh"] .v { text-wrap: pretty; }

/* Headings are short enough that balancing beats filling — stops a two-line
   Chinese headline leaving one or two characters stranded on line two.
   The lead paragraphs get `balance` too, not `pretty`: `pretty` only rescues
   single-WORD orphans, and CJK has no word boundaries for it to act on, so it
   left 3-character last lines untouched. These run 2–3 lines, well inside the
   line budget where a browser will balance. */
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .ptier__desc,
html[lang^="zh"] .tiers__head p,
html[lang^="zh"] .faqx__head p,
html[lang^="zh"] .feat__copy > p,
html[lang^="zh"] .phz__intro p,
html[lang^="zh"] .ctax__l p,
html[lang^="zh"] .film__head p,
html[lang^="zh"] .foot__blurb { text-wrap: balance; }

/* Never break a line before closing punctuation or after an opening bracket. */
html[lang^="zh"] { line-break: strict; overflow-wrap: break-word; }

/* The italic serif accent is a Latin-only face — fall back to the CJK stack so
   the script fragments don't render in a substituted font mid-heading.
   Colour is deliberately NOT set here: refine.css makes the hero accent mint and
   leaves body accents gold, and hardcoding one here overrode both, leaving the
   Chinese hero gold while the English hero was mint. */
html[lang^="zh"] .u-script,
html[lang^="zh"] .script {
  font-family: var(--zh-sans);
  font-style: normal;
  font-weight: 500;
}

/* Small caps / wide tracking is a Latin device; it shreds CJK. */
html[lang^="zh"] .u-eyebrow,
html[lang^="zh"] .jside,
html[lang^="zh"] .scrollcue,
html[lang^="zh"] .beat .k {
  letter-spacing: .12em;
  font-variant: normal;
  text-transform: none;
}

/* Application quiz. The mono counter is tracked at .18em, which pushes visible
   gaps around CJK punctuation (第 1 步 ， 共 4). Body copy on this page also
   wants the CJK line-height the marketing page gets. */
html[lang^="zh"] .quiz__count { letter-spacing: .06em; }
html[lang^="zh"] .step__sub,
html[lang^="zh"] .opt__d,
html[lang^="zh"] .consent,
html[lang^="zh"] .done__p { line-height: 1.8; }
html[lang^="zh"] .opt__t { line-height: 1.5; }

/* Tier names stay Latin — keep the original display face on those. */
html[lang^="zh"] .ptier__name,
html[lang^="zh"] .foot__big,
html[lang^="zh"] .brand__name { font-family: inherit; }

/* Vertical side labels.
   .jside--l pairs writing-mode:vertical-rl with rotate(180deg) so Latin reads
   bottom-to-top. CJK glyphs stay upright in vertical mode, so that same rotation
   renders them upside down. Drop the flip and let it read top-to-bottom, which
   is the correct direction for Chinese anyway. text-orientation stays `mixed`:
   CJK upright, the Latin runs (MM2H, 2014, 3°08′) rotated — standard practice. */
html[lang^="zh"] .jside--l {
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}
html[lang^="zh"] .jside {
  letter-spacing: .16em;
  font-family: var(--zh-sans);
}

/* This sheet loads after refine.css, so the mobile legibility floor for the
   switcher has to live here or it is overridden. 11px is under the ~12px
   floor where small UI text stays comfortable on a phone, and the option is
   a tap target as well as a label. */
@media (max-width: 860px) {
  .langsw__opt { font-size: 12.5px; min-height: 38px; display: inline-flex; align-items: center; }
}

/* The video hero's switcher has its own 11px rule below 620px at higher
   specificity, which the floor above cannot reach. Matched here. */
@media (max-width: 620px) {
  .langsw--v .langsw__opt, .langsw--hero .langsw__opt { font-size: 12.5px; }
}