/* Bá Xuyên · editorial type system, 29 October 2026.
   Presentation only: the original content, translations and compact CTA arrows remain unchanged. */
:root {
  --type-display: clamp(2.625rem, 5vw, 4.625rem);
  --type-heading: clamp(2.125rem, 3.7vw, 3.375rem);
  --type-body: .9375rem;
  --type-meta: .75rem;
  --muted: #536774;
  --ease-editorial: cubic-bezier(.22, 1, .36, 1);
}
body { font-size: var(--type-body); line-height: 1.8; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
p, dd, figcaption { text-wrap: pretty; }
h1, h2 { font-weight: 500; }
h2 { font-size: var(--type-heading); line-height: 1.27; letter-spacing: -.045em; margin-bottom: 28px; }
h3 { font-weight: 600; letter-spacing: -.025em; }
h1 em, h2 em { font-weight: 600; }
h2 em { background: linear-gradient(90deg, #228b451a, #1565c00c) left 95% / 100% .17em no-repeat; }
.journey h2 em, .contact h2 em { background-image: linear-gradient(90deg, #a8e5bd33, #a8e5bd08); }
.eyebrow, .section-top .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.6; }
.section-top .eyebrow { gap: 14px; }
.section-top .eyebrow span { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; border-radius: 2px; padding: 5px 9px; }
.section-top .eyebrow::after { content: ''; display: block; width: 42px; height: 1px; flex: 0 0 42px; background: linear-gradient(90deg, var(--blue), var(--green)); opacity: .6; }
.journey .section-top .eyebrow::after { background: #a8e5bd; }
.section-note { font-size: 10px; letter-spacing: .11em; line-height: 1.7; }
.section { padding-block: clamp(64px, 7.2vw, 108px); }
.section-top { margin-bottom: 40px; }
.header { box-shadow: none; }
.header nav a { position: relative; font-size: 13px; font-weight: 500; border: 0; }
.header nav a::after { content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--green), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-editorial); }
.header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
.language-control select { font-size: 11px; }
.hero-story { padding-top: 66px; padding-bottom: 112px; max-width: 860px; }
.hero-story .eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 30px; }
.project-title { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: #e4eff5; margin-bottom: 20px; }
.hero-story h1, html[lang="en"] .hero-story h1 { font-size: var(--type-display); line-height: 1.18; letter-spacing: -.052em; font-weight: 500; margin-bottom: 28px; }
.hero-story h1 em { color: #a8e5bd; background: linear-gradient(90deg, #a8e5bd60, #a8e5bd00) left 100% / 100% 1px no-repeat; padding-bottom: .06em; }
.hero-description { font-size: 15px; line-height: 1.85; max-width: 460px; color: #edf3f6; margin-bottom: 30px; }
.hero-visual:after { background: linear-gradient(90deg, rgba(6,30,47,.94) 0%, rgba(6,35,54,.77) 43%, rgba(6,40,62,.12) 80%), linear-gradient(0deg, rgba(6,30,46,.45), transparent 45%); }
.hero-visual figcaption { font-size: 10px; line-height: 1.75; letter-spacing: .015em; padding: 11px 24px; background: rgba(7,30,45,.9); }
.button { font-size: 13px; font-weight: 500; line-height: 1.6; min-height: 46px; transition: background .22s ease, transform .3s var(--ease-editorial); }
.hero-actions .button { font-weight: 600; }
.dossier-button, .brochure-download .button { background: #1d7d3d; }
.dossier-button:hover, .brochure-download .button:hover { background: var(--deep); }
.metrics { padding-top: 40px; padding-bottom: 16px; }
.metrics strong { font-size: clamp(36px, 3.7vw, 52px); font-weight: 500; letter-spacing: -.055em; line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.metrics strong span { font-size: 14px; font-weight: 400; margin-left: 7px; color: var(--muted); }
.metrics p { font-size: 12px; line-height: 1.6; margin-top: 9px; }
.metric-note span { font-size: 10px; letter-spacing: .13em; }
.metric-note p, html[lang="en"] .metric-note p { font-size: 15px; line-height: 1.65; margin-top: 9px; }
.overview-copy .lead { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.7; letter-spacing: -.025em; color: var(--ink); margin-bottom: 22px; }
.overview-copy > p:not(.lead) { font-size: 15px; line-height: 1.85; }
.project-facts div { grid-template-columns: 128px minmax(0,1fr); gap: 20px; padding-block: 20px; }
.project-facts dt { font-size: 12px; font-weight: 500; line-height: 1.7; }
.project-facts dd { font-size: 14px; line-height: 1.75; }
.small-note { font-size: 11px !important; line-height: 1.85 !important; letter-spacing: 0; color: var(--muted); }
.location-heading, .industry-heading { gap: 64px; }
.location-heading > p, .industry-heading > p { font-size: 15px; line-height: 1.85; }
.location-heading > p { max-width: 355px; }
.location .text-link { font-size: 12px; line-height: 1.6; }
.routes { box-shadow: none; }
.routes-title { font-size: 10px; letter-spacing: .06em; line-height: 1.6; gap: 16px; }
.routes-title > span { font-size: 10px !important; text-align: right; }
.routes > div:not(.routes-title) { gap: 20px; padding-block: 17px; }
.routes > div:not(.routes-title) > span { font-size: 14px; line-height: 1.7; }
.routes strong { font-size: 29px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.routes small { font-size: 13px; }
.map-open > span { font-size: 13px; font-weight: 500; padding-block: 14px; }
.map-language-note { font-size: 11px; line-height: 1.8; }
.industry-list article { box-shadow: none; transition: transform .35s var(--ease-editorial), border-color .25s ease; }
.industry-list article:hover { box-shadow: none; border-color: #9abeb2; transform: translateY(-3px); }
.industry-list article > div { padding: 28px 28px 30px; }
.industry-list h3, html[lang="en"] .industry-list h3 { font-size: 24px; line-height: 1.45; margin-bottom: 11px; transition: color .2s ease; }
.industry-list article:hover h3 { color: var(--blue); }
.industry-list p { font-size: 14px; line-height: 1.85; }
.industry-visual figcaption { font-size: 11px; line-height: 1.65; padding: 10px 16px; color: #4a6272; }
.notice p { font-size: 12px; line-height: 1.85; color: #405c49; }
.notice > span { margin-top: 2px; }
.project-docs > h2 { max-width: 1000px; margin-bottom: 42px; }
.planning-grid { align-items: start; }
.planning-grid figcaption { font-size: 11px; line-height: 1.85; }
.infra-cards h3 { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.infra-cards p { font-size: 15px; line-height: 1.8; }
.brochure-download h3 { font-size: 25px; line-height: 1.4; }
.brochure-download p { font-size: 14px; line-height: 1.8; }
.brochure-download small { font-size: 12px; }
.steps { gap: 32px; margin-top: 54px; }
.steps article { border-top-width: 1px; padding-top: 22px; }
.steps article > span { font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-bottom: 28px; color: #bcebd0; }
.steps h3, html[lang="en"] .steps h3 { font-size: 19px; line-height: 1.55; font-weight: 500; margin-bottom: 16px; }
.steps p { font-size: 14px; line-height: 1.85; color: #e0ecf6; }
.faq summary { font-size: 16px; line-height: 1.7; font-weight: 500; padding-block: 25px; }
.faq details p { font-size: 14px; line-height: 1.85; }
.contact-inner { padding-block: 80px; gap: 64px; }
.contact-inner > div > p:not(.eyebrow) { font-size: 14px; line-height: 1.8; color: #d5e5da; }
.contact .eyebrow { font-size: 11px; letter-spacing: .14em; }
.contact .big-phone { font-size: clamp(30px, 2.65vw, 39px); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.contact .fb-link { font-size: 12px; line-height: 1.75; }
.footer-top > p { font-size: 11px; letter-spacing: .07em; line-height: 1.8; }
.footer-top > p > span { font-size: 12px; }
.back-top { font-size: 12px; }
.footer-bottom, .sources, .sources summary { font-size: 11px; line-height: 1.8; }
.sources p { line-height: 1.9; }
dialog p { font-size: 12px; line-height: 1.8; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { letter-spacing: -.025em; }
html[lang="zh-CN"] .eyebrow, html[lang="ko"] .eyebrow { letter-spacing: .08em; }
@media (max-width: 1100px) {
  .header nav { gap: 20px; }
  .overview-grid { gap: 46px; }
  .metrics > div { padding-inline: 20px; }
  .location-heading, .industry-heading { gap: 40px; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
  .brochure-download { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --type-body: .875rem; --type-display: clamp(2.25rem, 10.6vw, 3.125rem); --type-heading: clamp(2rem, 8.7vw, 2.625rem); }
  .wrap { width: calc(100% - 40px); }
  .hero { width: calc(100% - 24px); }
  .header { padding-inline: 18px; gap: 10px; }
  .header nav { gap: 7px; }
  .header nav a { font-size: 14px; }
  .language-control select { font-size: 10px; }
  .section { padding-block: 64px; }
  .section-top { margin-bottom: 28px; }
  .eyebrow, .section-top .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .section-top .eyebrow { gap: 10px; }
  .section-top .eyebrow span { font-size: 10px; padding: 4px 8px; }
  .section-top .eyebrow::after { width: 25px; flex-basis: 25px; }
  h2, html[lang="en"] h2, html[lang="ko"] h2, .journey h2, .contact h2 { font-size: var(--type-heading); line-height: 1.32; letter-spacing: -.04em; }
  .hero-visual { min-height: 610px; }
  .hero-story, html[lang="en"] .hero-story { padding: 38px 22px 128px; max-width: none; }
  .hero-story .eyebrow { font-size: 9px; letter-spacing: .11em; margin-bottom: 27px; }
  .project-title { font-size: 10px; line-height: 1.75; letter-spacing: .08em; margin-bottom: 18px; }
  .hero-story h1, html[lang="en"] .hero-story h1, html[lang="ko"] .hero-story h1 { font-size: var(--type-display); line-height: 1.24; letter-spacing: -.045em; margin-bottom: 24px; }
  .hero-description { font-size: 14px; line-height: 1.85; max-width: 460px; margin-bottom: 25px; }
  .hero-visual:after { background: linear-gradient(180deg, rgba(6,30,47,.94) 0%, rgba(6,35,54,.82) 56%, rgba(6,40,62,.3) 100%); }
  .hero-actions { gap: 10px; }
  .hero-actions .button, html[lang="en"] .hero-actions .button { font-size: 11px; line-height: 1.6; padding: 12px 13px; gap: 12px; min-height: 44px; }
  .hero-visual figcaption, html[lang="zh-CN"] .hero-visual figcaption, html[lang="ko"] .hero-visual figcaption { font-size: 9px; line-height: 1.7; padding: 9px 12px; }
  .hero-corner { bottom: 75px; }
  .metrics { padding-block: 28px 0; }
  .metrics > div, .metrics > div:first-child { padding-inline: 9px; }
  .metrics strong { font-size: clamp(27px, 7.6vw, 36px); letter-spacing: -.06em; }
  .metrics strong span { font-size: 11px; margin-left: 3px; }
  .metrics p { font-size: 11px; line-height: 1.65; max-width: none; margin-top: 7px; }
  .overview-copy .lead { font-size: 20px; line-height: 1.75; }
  .overview-copy > p:not(.lead), .location-heading > p, .industry-heading > p { font-size: 14px; line-height: 1.85; }
  .project-facts div { grid-template-columns: 88px minmax(0,1fr); gap: 14px; padding: 18px 14px; }
  .project-facts dt { font-size: 11px; }
  .project-facts dd { font-size: 13px; }
  .small-note { font-size: 11px !important; }
  .location .section-top { flex-wrap: wrap; gap: 18px; }
  .location .text-link { font-size: 11px; max-width: none; padding: 10px 13px; }
  .routes { padding: 20px 18px; }
  .routes > div:not(.routes-title) > span, html[lang="en"] .routes > div:not(.routes-title) > span { font-size: 13px; max-width: 65%; }
  .routes > div:not(.routes-title) { gap: 14px; padding-block: 15px; }
  .routes strong { font-size: 27px; }
  .routes small { font-size: 12px; }
  .routes-title, .routes-title > span { font-size: 9px !important; letter-spacing: .035em; }
  .map-open > span { font-size: 12px; }
  .map-language-note { font-size: 11px; }
  .industry-list article > div { padding: 24px 22px 26px; }
  .industry-list h3, html[lang="en"] .industry-list h3 { font-size: 22px; line-height: 1.5; }
  .industry-list p { font-size: 14px; }
  .industry-visual figcaption { font-size: 10px; padding: 10px 13px; }
  .notice { padding: 18px 15px; }
  .notice p { font-size: 11px; }
  .project-docs > h2 { margin-bottom: 30px; }
  .infra-cards { gap: 12px; }
  .infra-cards article { padding: 20px 15px; }
  .infra-cards h3 { font-size: 13px; line-height: 1.6; }
  .infra-cards p { font-size: 13px; }
  .brochure-download h3 { font-size: 23px; }
  .brochure-download p { font-size: 13px; }
  .brochure-download small { font-size: 11px; }
  .steps { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .steps article { position: relative; padding: 24px 0 0 52px; }
  .steps article > span { position: absolute; top: 25px; left: 0; font-size: 27px; }
  .steps h3, html[lang="en"] .steps h3 { font-size: 18px; margin-bottom: 12px; }
  .steps p { font-size: 14px; line-height: 1.85; }
  .faq { padding-inline: 18px; }
  .faq summary { font-size: 14px; line-height: 1.75; padding-block: 22px; gap: 16px; }
  .faq details p { font-size: 13px; line-height: 1.85; padding-right: 0; }
  .contact-inner { padding-block: 58px; }
  .contact-inner > div > p:not(.eyebrow) { font-size: 14px; }
  .contact .big-phone { font-size: clamp(28px, 8vw, 36px); }
  .contact .fb-link { font-size: 12px; }
  .footer-top { gap: 22px; }
  .footer-top > p { font-size: 10px; letter-spacing: .025em; }
  .footer-top > p > span { font-size: 11px; }
  .footer-bottom { flex-direction: column; gap: 0; font-size: 10px; }
  .sources, .sources summary, .back-top { font-size: 11px; }
  dialog p { font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-story > * { animation: type-arrive .7s var(--ease-editorial) both; }
  .hero-story > :nth-child(2) { animation-delay: .05s; }
  .hero-story > :nth-child(3) { animation-delay: .1s; }
  .hero-story > :nth-child(4) { animation-delay: .15s; }
  .hero-story > :nth-child(5) { animation-delay: .2s; }
  @keyframes type-arrive { from { opacity: .72; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @supports (animation-timeline: view()) {
    .overview-grid > *, .location-heading, .industry-heading, .project-docs > h2, .steps article, .contact-inner > div {
      animation: type-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .industry-list article:hover { transform: none; }
}
/* Keep the semantic line break: hiding it joined words in the mobile overview. */
@media (max-width: 760px) { .overview-grid h2 br:nth-child(2) { display: initial; } }
.routes-title { color: var(--muted); }