/* English typography. The base sheets are set for Chinese: wide tracking, tall leading, CJK-sized type.
   EB Garamond wants the opposite — larger type, tighter tracking, shorter lines — and true capitals for labels. */
html[lang="en"] {
  --t-label: .8125rem;                                    /* 13   uppercase labels */
  --t-xs: .875rem;                                        /* 14 */
  --t-sm: .9375rem;                                       /* 15 */
  --t-md: 1rem;                                           /* 16 */
  --t-lg: 1.0625rem;                                      /* 17 */
  --t-body: clamp(1.0625rem, 1.02rem + .25vw, 1.15625rem); /* 17 -> 18.5 */
  --t-h5: clamp(1.1875rem, 1.14rem + .2vw, 1.25rem);      /* 19 -> 20 */
  --t-h4: clamp(1.3125rem, 1.24rem + .3vw, 1.4375rem);    /* 21 -> 23 */
  --t-h3: clamp(1.5rem, 1.38rem + .5vw, 1.6875rem);       /* 24 -> 27 */
  --t-h2: clamp(1.75rem, 1.55rem + .9vw, 2.125rem);       /* 28 -> 34 */
}
html[lang="en"] body { line-height: 1.6; }
html[lang="en"] [lang="en"] { letter-spacing: 0; }
/* English runs ragged-right and unhyphenated: justified lines open gaps between words, and
   hyphens in narrow columns (cards, lists) cut words at every other line */
html[lang="en"] p, html[lang="en"] li, html[lang="en"] dd { hyphens: manual; -webkit-hyphens: manual; }
html[lang="en"] .prose p, html[lang="en"] .proj-row p, html[lang="en"] .member__bio p, html[lang="en"] .event-page__summary p,
html[lang="en"] .member-page__bio p, html[lang="en"] .history p, html[lang="en"] .project p:not(.project__en),
html[lang="en"] .visiting__body p, html[lang="en"] .textblock__body p { text-align: left; text-wrap: pretty; }

/* labels: real capitals, moderate tracking */
html[lang="en"] .kicker { letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
html[lang="en"] .kicker span { text-transform: none; letter-spacing: 0; }
html[lang="en"] .crumbs, html[lang="en"] .tag, html[lang="en"] .hero__spot-tag, html[lang="en"] .member__position,
html[lang="en"] .member-head__position, html[lang="en"] .member__facts dt, html[lang="en"] .member-page__facts dt,
html[lang="en"] .event-page dt, html[lang="en"] .visiting dt, html[lang="en"] .event-head__tags span,
html[lang="en"] .roster th, html[lang="en"] .statsblock span, html[lang="en"] .proj-row .facts span,
html[lang="en"] .event-page__poster p, html[lang="en"] .member__post { letter-spacing: .1em; text-transform: uppercase; }
html[lang="en"] .crumbs { letter-spacing: .06em; text-transform: none; }
html[lang="en"] .member__position, html[lang="en"] .member-head__position { letter-spacing: .14em; }

/* navigation, links, buttons */
html[lang="en"] .nav__name { letter-spacing: .01em; font-weight: 600; }
html[lang="en"] .nav__menu a { letter-spacing: .02em; font-size: var(--t-lg); font-weight: 500; }
html[lang="en"] .nav__menu .nav__lang { letter-spacing: .06em; font-size: var(--t-xs); }
html[lang="en"] .hero__spot { letter-spacing: .01em; }
html[lang="en"] .sec-link, html[lang="en"] .more, html[lang="en"] .event__more, html[lang="en"] .mcard__more,
html[lang="en"] .longtext__more, html[lang="en"] .filters button { letter-spacing: .04em; }
html[lang="en"] .btn { letter-spacing: .06em; font-weight: 600; }
html[lang="en"] .footer__brand strong { letter-spacing: .01em; line-height: 1.4; }
html[lang="en"] .footer__brand .footer__parent { font-style: normal; font-size: var(--t-sm); line-height: 1.5; opacity: .7; }
html[lang="en"] .footer address { line-height: 1.75; }
html[lang="en"] .footer__copy { letter-spacing: .04em; }

/* headings: Garamond carries its own air, so almost no tracking and tighter leading */
html[lang="en"] .page-head h1 { letter-spacing: .005em; line-height: 1.12; font-weight: 600; }
html[lang="en"] .page-head--event h1, html[lang="en"] .page-head--member h1 { letter-spacing: 0; line-height: 1.2; }
html[lang="en"] .page-head__lead { line-height: 1.55; max-width: 620px; }
html[lang="en"] .hero__title { letter-spacing: .01em; }
html[lang="en"] .prose h2, html[lang="en"] .group__title, html[lang="en"] .list-head, html[lang="en"] .group__list-title,
html[lang="en"] .event-page__summary h2, html[lang="en"] .member-page__bio h2, html[lang="en"] .proj-row h2,
html[lang="en"] .textblock__title, html[lang="en"] .blocktitle, html[lang="en"] .visiting__title,
html[lang="en"] .project h3, html[lang="en"] .events h3, html[lang="en"] .steps strong { letter-spacing: .005em; font-weight: 600; }
html[lang="en"] .prose h2, html[lang="en"] .group__title, html[lang="en"] .list-head { line-height: 1.2; }
html[lang="en"] .visiting__title { line-height: 1.25; }
html[lang="en"] .textblock__title, html[lang="en"] .blocktitle { line-height: 1.2; }

/* running text */
html[lang="en"] .prose p, html[lang="en"] .proj-row p, html[lang="en"] .textblock__body p, html[lang="en"] .visiting__body p,
html[lang="en"] .member__bio p { line-height: 1.62; }
html[lang="en"] .event-page__summary p, html[lang="en"] .member-page__bio p { line-height: 1.62; }
html[lang="en"] .history p { line-height: 1.7; font-size: var(--t-h4); text-align: left; }
html[lang="en"] .history__lead { line-height: 1.6; }
html[lang="en"] .project p:not(.project__en) { line-height: 1.62; }
html[lang="en"] .contact-card, html[lang="en"] .contact address { line-height: 1.7; }
html[lang="en"] .member__facts, html[lang="en"] .event-page dd, html[lang="en"] .member-page__facts dd,
html[lang="en"] .mcard__focus, html[lang="en"] .member__role, html[lang="en"] .mcard .member__role { line-height: 1.5; }

/* people: English name first; the Chinese name beneath stays upright in its own face */
html[lang="en"] .member h3, html[lang="en"] .mcard h3 { letter-spacing: .005em; line-height: 1.2; font-weight: 600; }
html[lang="en"] .member h3 small, html[lang="en"] .mcard h3 small, html[lang="en"] .page-head--member h1 span {
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-style: normal; letter-spacing: .1em; font-size: var(--t-md);
}
html[lang="en"] .mcard h3 small { margin-top: 5px; }
html[lang="en"] .pubs cite { letter-spacing: 0; }

/* events: the month badge is a word now */
html[lang="en"] .events time { letter-spacing: .06em; text-transform: uppercase; }
html[lang="en"] .events time b { font-size: var(--t-sm); font-weight: 600; }
html[lang="en"] .events h3 small { letter-spacing: 0; }
html[lang="en"] .event-page__when dd { letter-spacing: 0; }
html[lang="en"] .news time { letter-spacing: .04em; }

/* phones: the English name is long, keep the brand on one readable line */
@media (max-width: 600px) {
  html[lang="en"] .nav__name { font-size: var(--t-sm); }
  html[lang="en"] .page-head h1 { line-height: 1.15; }
}
html[lang="en"] .longtext__more { letter-spacing: .06em; text-transform: uppercase; }

/* ---- second pass: labels that sit in narrow columns ---- */
/* the position line above the title (關於 page cards, staff grid): its own line, not a bar next to the title */
html[lang="en"] .member__post {
  display: block; margin: 0 0 3px; padding: 0; border: 0;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* fact labels: small capitals on a wider column, so "Research interests" never breaks mid-word */
html[lang="en"] .member__facts dt, html[lang="en"] .member-page__facts dt, html[lang="en"] .event-page dt {
  text-transform: none; font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: var(--t-sm); padding-top: .15em;
}
html[lang="en"] .member__facts dl div { grid-template-columns: 7.5em 1fr; }
html[lang="en"] .member-page__facts div, html[lang="en"] .event-page dl div { grid-template-columns: 7.5em 1fr; }
@media (max-width: 720px) {
  html[lang="en"] .member__facts dl div, html[lang="en"] .member-page__facts div, html[lang="en"] .event-page dl div { grid-template-columns: 6.5em 1fr; }
}
/* the roster header, tags and positions keep true capitals; balance role lines in cards */
html[lang="en"] .member__role, html[lang="en"] .mcard .member__role { text-wrap: pretty; }

/* phones: the full English name does not fit on one line beside the menu button; two short lines do */
@media (max-width: 820px) {
  html[lang="en"] .nav__name { white-space: normal; overflow: visible; text-overflow: clip; max-width: 13.5em; font-size: 13px; line-height: 1.2; text-wrap: balance; }
}