/* ============================================================
   Layout — nav, page shell, hero, sections, footer
   ============================================================ */

/* ---- page shell ------------------------------------------- */
.page {
  max-width: var(--w-page);
  margin: 0 auto;
  /* env() keeps content clear of notches and rounded corners in
     landscape on modern phones; max() means it never shrinks the
     gutter below the design value. */
  padding-left:  max(var(--s-gutter), env(safe-area-inset-left));
  padding-right: max(var(--s-gutter), env(safe-area-inset-right));
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-nav);
}
.nav__inner {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s-4) max(var(--s-gutter), env(safe-area-inset-right)) var(--s-4) max(var(--s-gutter), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.nav__brand {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.nav__brand .mark {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: var(--s-3);
  background: var(--accent);
  transform: rotate(45deg);
  vertical-align: middle;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 1.6vw, var(--s-6));
}
.nav__link {
  position: relative;
  font-size: var(--t-small);
  color: var(--ink-soft);
  padding: var(--s-2) 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }

/* ---- language switch -------------------------------------- */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  padding: 6px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out);
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active { background: var(--accent); color: var(--selection-ink); }

/* ---- mobile nav ------------------------------------------- */
.nav__toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--s-4) var(--s-gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    background: var(--bg-lift);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    border-bottom: 1px solid var(--rule);
  }
  .nav__menu { display: none; }
  .nav__menu.is-open { display: flex; }
  .nav__link {
    width: 100%;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1rem;
  }
  .lang-switch { margin-top: var(--s-5); }
}

/* ============================================================
   HERO — centred, type-led

   The portrait used to sit beside the name at hero scale, which
   made a formal ID photograph the loudest thing on the page. The
   composition is inverted here: the name carries the screen and
   the portrait follows it, smaller, with its lower edge
   dissolving into the paper.
   ============================================================ */
.hero {
  padding: clamp(4rem, 2rem + 8vw, 9rem) 0 0;
  text-align: center;
}

.hero__eyebrow { margin-bottom: var(--s-6); }

.hero__name {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--track-display);
  margin: 0 auto var(--s-5);
  max-width: 16ch;
}
:root[data-lang="cn"] .hero__name {
  letter-spacing: 0.14em;
  font-weight: 650;
  /* the tracking adds a trailing gap that breaks optical centring */
  text-indent: 0.14em;
}

.hero__role {
  font-size: var(--t-h3);
  font-weight: 450;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 auto var(--s-5);
}
.hero__role .sep { color: var(--accent); padding: 0 4px; }

.hero__lede {
  font-size: var(--t-lede);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto var(--s-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

/* ---- portrait ---------------------------------------------
   The source file is pre-composited: its background is already
   the page colour and its lower edge fades out, so it needs no
   frame, no border and no shadow. It simply sits on the paper.
   ----------------------------------------------------------- */
.portrait {
  margin: clamp(var(--s-7), 5vw, var(--s-9)) auto 0;
  width: clamp(200px, 26vw, 330px);
}
.portrait picture,
.portrait img { display: block; width: 100%; }

/* ---- stat rail --------------------------------------------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6) var(--s-5);
  margin-top: clamp(var(--s-7), 6vw, var(--s-9));
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.stat__value {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-3);
}
.stat__value .unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-text);
  margin-left: 3px;
}
.stat__note {
  margin: var(--s-2) auto 0;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 24ch;
}

@media (max-width: 1023px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
}
@media (max-width: 767px) {
  .hero { padding-top: clamp(2.5rem, 1rem + 6vw, 4rem); }
  .hero__actions { gap: var(--s-2); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .portrait { width: clamp(180px, 52vw, 240px); }
}
@media (max-width: 479px) {
  .hero__stats { gap: var(--s-6) var(--s-4); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: var(--s-section) 0 0; }
.section--last { padding-bottom: var(--s-section); }

.section__head {
  max-width: 62ch;
  margin: 0 auto var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.section__num {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--accent-text);
}
.section__title {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--track-display);
}
:root[data-lang="cn"] .section__title { letter-spacing: 0.04em; }
.section__sub {
  margin: var(--s-4) auto 0;
  color: var(--ink-soft);
  font-size: var(--t-lede);
  line-height: 1.72;
}

@media (max-width: 767px) {
  .section__head { margin-bottom: var(--s-7); padding-bottom: var(--s-5); }
  .section__num { margin-bottom: var(--s-3); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-top: var(--s-section);
  border-top: 1px solid var(--rule);
  background: var(--bg-lift);
}
.footer__inner {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s-8) var(--s-gutter) var(--s-7);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s-7) var(--s-6);
}
.footer__name {
  font-size: var(--t-h3);
  font-weight: 550;
  margin-bottom: var(--s-3);
}
.footer__blurb { color: var(--muted); font-size: var(--t-small); max-width: 34ch; }
.footer__col ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.footer__col li { margin-bottom: var(--s-3); }
.footer__col a {
  font-size: var(--t-small);
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--accent-text); }
.footer__base {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s-5) var(--s-gutter) var(--s-7);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
}

@media (max-width: 1023px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
  .footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__col:first-child { grid-column: auto; }
}
.footer__inner,
.footer__base {
  padding-left:  max(var(--s-gutter), env(safe-area-inset-left));
  padding-right: max(var(--s-gutter), env(safe-area-inset-right));
}
.footer__base { padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom)); }