/* Shared typography layer, loaded after each page's component styles.
   Keep the original fonts defined: italic type and signatures still use them. */
:root {
  --site-font: MiSans, "Microsoft YaHei", "PingFang SC", sans-serif;
  --site-italic-font: "Neue Montreal", "Microsoft YaHei", "PingFang SC", sans-serif;
}
html, body, button, input, select, textarea,
.headline-text, .section--lede h2, .section__note,
.focus__title, .listening__title, .craft__title, .story__note,
.validation__title, .featured__title, .about__title,
.work__badge, .work__year, .work__name, .work__blurb, .work__note, .work__link,
.about-contact__button, .craft-editorial, .craft-editorial__eyebrow,
.intro__title, .band__title, .metric__value, .next strong,
.section.outro, [data-site-footer].section.outro,
.outro__title, .outro__title span, [data-site-footer] .outro__title,
.boot {
  font-family: var(--site-font);
}
/* Arges only shipped a Black face, even where the old CSS requested 400. */
.work__name { font-weight: 900; }
/* MiSans' Latin glyphs are wider than Arges. Fit the complete hero phrase;
   leave --display unchanged so the English signature keeps its original size. */
.hero__title .headline-text { font-size: min(180px, 100cqi / 9.65); }

/* The highlight effect animates opacity only. Let long Chinese word groups
   wrap across rows while retaining the individual character animation boxes. */
.about__copy [data-highlight-text] p div[aria-hidden="true"] {
  display: inline !important;
}
.about__copy [data-highlight-text] p div[aria-hidden="true"] > div[aria-hidden="true"] {
  display: inline-block !important;
}

/* Preserve the full signature artwork and leave the email its own flex space. */
@media (max-width: 1023px) {
  .hero, .topbar { column-gap: 12px; }
  .hero .brand-logo, .topbar .brand-logo {
    width: clamp(112px, 39vw, 186px);
    height: 36px;
  }
}
@media (max-width: 400px) {
  .hero, .topbar { column-gap: 12px; }
  .hero .hero__mail, .topbar .hero__mail { font-size: 12px; }
  .hero .brand-logo, .topbar .brand-logo {
    width: min(186px, calc(100vw - 200px));
    height: 30px;
  }
}

/* The rolling icon is empty at rest. Fractional line heights in Android
   WebViews can expose the next row's SVG edge; touch devices need no hover row. */
@media (hover: none), (pointer: coarse) {
  .hero__mail .copy-email-icon { display: none; }
}

/* Explicit exceptions: leave italic glyphs and handwritten names unchanged. */
i, em, .craft-editorial__headline-line, .craft-editorial__badge {
  font-family: var(--site-italic-font);
}
.hero__where, .about__copy .about__sign {
  font-family: Signature, "Neue Montreal", cursive;
}