@font-face { font-family: "Dr Bo Title"; src: url("../assets/fonts/cinzel/dr-bo.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #181818;
  --surface: #212121;
  --text: #e8e8e8;
  --body: #c8c8c8;
  --muted: #a1a1a1;
  --accent: #9470c2;
  --accent-hover: #9470c2;
  --pet-gold: #dba74f;
  --pet-highlight: #fff0bc;
  --pet-shadow: #a66d29;
  --line: #303030;
  --font: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --type-name: 1.5rem;
  --type-section: 1.25rem;
  --type-body: 1rem;
  --type-meta: .8125rem;
  --section-gap: 56px;
  --entry-gap: 24px;
  --detail-gap: 8px;
  --topbar-height: 64px;
  --sidebar-top: 112px;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f4f3;
  --surface: #ebebea;
  --text: #2b2b2b;
  --body: #4b4b4b;
  --muted: #6b6b6b;
  --accent: #654091;
  --accent-hover: #654091;
  --pet-gold: #996419;
  --pet-highlight: #bf862a;
  --pet-shadow: #76501e;
  --line: #d8d8d6;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--topbar-height) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body { margin: 0; background: var(--bg); color: var(--body); font: var(--type-body)/1.7 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #4c4e57; color: #fff; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.about a, .news-list a { text-decoration: underline; text-decoration-color: var(--muted); }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a, button { transition: color 160ms, background-color 160ms, border-color 160ms; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { color: var(--text); font-weight: 600; }
h3 { color: var(--body); font-size: var(--type-body); font-weight: 600; line-height: 1.7; }
button { font: inherit; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }
.skip-link { position: fixed; left: 20px; top: -100px; padding: 10px 16px; background: var(--surface); z-index: 20; }
.skip-link:focus { top: 10px; }
.topbar { height: var(--topbar-height); position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1136px; margin: 0 auto; height: 100%; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font: 600 var(--type-name)/1 var(--mono); color: var(--body); letter-spacing: -1.5px; }
.wordmark span { color: var(--muted); }
.wordmark:hover { text-decoration: none; }
nav { display: flex; gap: 30px; align-items: center; }
nav a { padding: 20px 0; color: var(--muted); font-size: var(--type-meta); position: relative; white-space: nowrap; }
nav a:hover, nav a:focus-visible, nav a[aria-current] { text-decoration: none; color: var(--body); }
nav a::after { content: ''; height: 2px; width: 16px; position: absolute; bottom: 0; left: calc(50% - 8px); background: var(--accent); opacity: 0; }
nav a:is(:hover, :focus-visible, [aria-current])::after { opacity: 1; }
nav:has(a:hover) a:not(:hover)::after { opacity: 0; }
.nav-label-short { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-toggle { width: 36px; height: 36px; flex-shrink: 0; border: 0; padding: 0; color: var(--muted); background: transparent; display: grid; place-items: center; cursor: pointer; }
.theme-toggle:hover { color: var(--accent); }
.language-toggle { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: 500 var(--type-meta)/1 var(--mono); }
.language-toggle:hover { color: var(--accent); }
.theme-toggle .moon { display: none; }
[data-theme='light'] .theme-toggle .moon { display: block; }
[data-theme='light'] .theme-toggle .sun { display: none; }
.pet-card { display: block; position: relative; }
.pet-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: 600 var(--type-body)/1 var(--mono); }
.pet-toggle:hover { color: var(--body); }
.pet-toggle[aria-pressed='true'], .pet-toggle[data-pressing='true'] { color: #c58049; }
.pet-toggle svg { width: 18px; height: 18px; }
.pet-portrait { position: fixed; top: auto; right: calc(16px + env(safe-area-inset-right, 0px)); left: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: 160px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / .24); text-align: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 4000ms cubic-bezier(.33, 0, .67, 1), visibility 0s linear 4000ms; }
.pet-card[data-open='true'] .pet-portrait { visibility: visible; opacity: 1; transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.pet-photo { display: block; width: 92px; height: 92px; overflow: hidden; border-radius: 50%; border: 1px solid var(--line); margin: 0 auto 8px; }
.pet-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); transform-origin: 60% 68%; }
.pet-name { color: var(--body); font-size: var(--type-meta); line-height: 1.7; }
.pet-title { display: block; margin: 4px 0 2px; font: 600 1.2rem/1.35 "Dr Bo Title", Georgia, serif; letter-spacing: .06em; color: var(--pet-gold); }
.pet-role { display: block; color: var(--pet-gold); font: var(--type-meta)/1.8 var(--mono); white-space: nowrap; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .pet-title { background: linear-gradient(180deg, var(--pet-highlight) 10%, var(--pet-gold) 44%, var(--pet-shadow) 55%, var(--pet-highlight) 82%); background-clip: text; -webkit-background-clip: text; color: transparent; }
  .pet-role { width: fit-content; margin-inline: auto; background-image: linear-gradient(90deg, var(--pet-highlight), var(--pet-shadow) 20%, var(--pet-gold) 50%, var(--pet-shadow) 80%, var(--pet-highlight)); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: pet-color-flow 8s linear infinite; }
}
@keyframes pet-color-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
.page-layout { max-width: 1136px; margin: 0 auto; padding: 48px 28px 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 64px; align-items: start; }
.sidebar { position: sticky; top: var(--sidebar-top); height: calc(100vh - var(--sidebar-top) - 24px); height: calc(100dvh - var(--sidebar-top) - 24px); min-height: 480px; display: flex; flex-direction: column; }
.profile-photo { display: block; width: 128px; height: 128px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); margin-bottom: 24px; }
.identity h1 { font-size: var(--type-name); line-height: 1.3; letter-spacing: -.6px; }
.role { color: var(--muted); font: var(--type-meta)/1.8 var(--mono); margin-top: 8px; }
.affiliation { font-size: var(--type-meta); color: var(--muted); margin-top: 2px; }
.affiliation a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.company-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.profile-contact { margin-top: 24px; font-size: var(--type-meta); }
.profile-contact a, .location { display: flex; align-items: center; gap: 10px; min-height: 35px; color: var(--muted); }
.profile-contact a { width: fit-content; }
.profile-contact a:hover { color: var(--accent); text-decoration: none; }
.profile-contact svg { width: 15px; height: 15px; opacity: .85; }
.contact-arrow { margin-left: 2px; }
.location-toggle, .location-tooltip { display: none; }
.content { min-width: 0; }
.content > .about { position: relative; margin-bottom: 32px; }
.cat-walk { position: absolute; pointer-events: none; opacity: 0; }
.about > p + p { margin-top: 16px; }
.about p { font-size: var(--type-body); line-height: 1.7; }
.background-details { margin-top: 16px; }
.background-details > summary { display: none; }
details summary { list-style: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; font-size: var(--type-meta); }
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: var(--accent-hover); }
details summary > span[aria-hidden='true'] { font: var(--type-body)/1 var(--mono); transition: transform 160ms; }
details[open] > summary > span[aria-hidden='true'] { transform: rotate(45deg); }
.section-disclosure { border-top: 1px solid var(--line); }
.section-disclosure > .section-heading { width: 100%; min-height: 64px; margin: 0; padding: 16px 0; border: 0; justify-content: space-between; gap: 16px; }
.section-heading h2 { transition: color 160ms; }
.section-heading:hover h2 { color: var(--accent-hover); }
.section-toggle { flex-shrink: 0; }
.section-body { padding: 8px 0 32px; }
.section-body > .additional-publications, .section-body > .older-updates { margin-top: var(--entry-gap); }
.section-heading h2 { font-size: var(--type-section); line-height: 1.4; letter-spacing: -.3px; }
.work-list, .publication-list { display: grid; gap: var(--entry-gap); }
.work-entry, .publication { display: flex; flex-direction: column; gap: var(--detail-gap); min-width: 0; }
.work-entry > p { font-size: var(--type-body); line-height: 1.7; }
.entry-footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--muted); font: var(--type-meta)/1.8 var(--mono); }
.entry-meta { white-space: nowrap; }
.resource-link { display: inline-flex; gap: 6px; align-items: baseline; color: var(--muted); }
.pub-authors { color: var(--muted); font-size: var(--type-meta); line-height: 1.7; }
.pub-authors strong { color: inherit; font-weight: 600; }
.publication-reference { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--muted); font-size: var(--type-meta); }
.publication-reference a { text-decoration: underline; }
.news-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--entry-gap); }
.news-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.news-list time { font: var(--type-meta)/1.8 var(--mono); color: var(--muted); }
.news-list li > div { min-width: 0; font-size: var(--type-body); line-height: 1.7; }
footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; border-top: 1px solid var(--line); padding: 24px 0 32px; color: var(--muted); font-size: var(--type-meta); }
@media (min-width: 1100px) {
  :root { --cat-lane-left: max(28px, calc((100% - 1136px) / 2 + 28px)); --cat-lane-width: 216px; }
  .pet-portrait { left: calc(var(--cat-lane-left) + (var(--cat-lane-width) - 160px) / 2); right: auto; bottom: 64px; border: 0; background: transparent; box-shadow: none; }
  .pet-portrait .pet-photo { border: 0; }
  .identity { text-align: center; }
  .profile-photo { margin-left: auto; margin-right: auto; }
  .profile-contact { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
}
@media (min-width: 1100px) and (max-height: 740px) {
  :root { --sidebar-top: 92px; }
  .page-layout { padding-top: 28px; }
  .sidebar { min-height: 0; }
  .profile-photo { width: 96px; height: 96px; margin-bottom: 16px; }
  .profile-contact { margin-top: 16px; }
  .profile-contact a, .location { min-height: 30px; }
}
@media (min-width: 1100px) and (max-height: 580px) {
  .sidebar { position: static; height: auto; }
}
@media (width < 1100px) {
  :root { --topbar-height: 60px; }
  .content > .about { margin-bottom: 56px; }
  .background-details > summary { display: flex; }
  .background-details > p { margin-top: 12px; }
  .background-details[data-expanded='false'] > summary > span[aria-hidden='true'] { transform: none; }
  .header-actions > .pet-card { display: block; }
  .pet-portrait {
    border: 0; background: transparent; box-shadow: none;
    transition: opacity 4000ms cubic-bezier(.33, 0, .67, 1), visibility 0s linear 4000ms;
  }
  .pet-card[data-open='true'] .pet-portrait {
    transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }
  .pet-portrait .pet-photo {
    border: 0; filter: blur(1.2px);
    transition: filter 4000ms cubic-bezier(.33, 0, .67, 1);
  }
  .pet-card[data-open='true'] .pet-photo {
    filter: blur(0);
    transition-duration: 360ms;
  }
  .topbar-inner { max-width: 856px; padding: 0 28px; }
  nav { gap: 24px; }
  nav a { padding: 18px 0; }
  .page-layout { display: block; max-width: 856px; padding: 32px 28px 0; }
  .sidebar { --profile-size: 88px; position: static; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 32px; }
  .identity { display: flex; align-items: center; justify-content: flex-start; gap: 20px; min-width: 0; }
  .identity-text { text-align: center; min-width: 0; }
  .profile-photo { width: var(--profile-size); height: var(--profile-size); margin: 0; flex-shrink: 0; }
  .role { margin-top: 5px; }
  .profile-contact { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; height: var(--profile-size); gap: 0; margin: 0; }
  .profile-contact > a, .profile-contact .location { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 600px) {
  .topbar-inner { max-width: 480px; padding: 0 12px; gap: 16px; }
  .wordmark { display: none; }
  nav { flex: 1; min-width: 0; justify-content: flex-start; gap: 6px; }
  .theme-toggle, .pet-toggle, .language-toggle { width: 32px; height: 32px; }
  .page-layout { max-width: 480px; padding: 24px 20px 0; }
  .sidebar { --profile-size: 80px; gap: 24px; }
  .identity { gap: 16px; }
  .profile-contact { width: 44px; align-items: center; }
  .profile-contact .contact-label, .profile-contact .contact-arrow, .location-static-icon { display: none; }
  .profile-contact > a { width: 44px; justify-content: center; gap: 0; }
  .profile-contact svg { width: 18px; height: 18px; }
  .location { position: relative; width: 44px; }
  .location-toggle { display: inline-flex; width: 44px; height: calc(var(--profile-size) / 3); padding: 0; align-items: center; justify-content: center; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
  .location-toggle:hover { color: var(--accent); }
  .location-tooltip { display: block; position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 6; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--body); white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; }
  .location-tooltip::before { content: ''; position: absolute; top: -9px; right: 0; left: 0; height: 9px; }
  .location[data-open='true'] .location-tooltip { visibility: visible; opacity: 1; pointer-events: auto; }
  .background-details > summary { display: flex; }
  .background-details > p { margin-top: 12px; }
  .news-list li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 400px) {
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
}
@media (max-width: 360px) {
  .topbar-inner { padding-inline: 8px; gap: 16px; }
  .header-actions { gap: 4px; }
  .theme-toggle, .pet-toggle, .language-toggle { width: 28px; height: 32px; }
  nav { gap: 4px; }
  nav a { font-size: .75rem; }
  .sidebar, .identity { gap: 12px; }
  .sidebar { --profile-size: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .pet-role { animation: none; background-position: 50% 50%; }
}
@media (forced-colors: active) {
  .pet-title, .pet-role { background: none; color: CanvasText; animation: none; }
}
@media print {
  :root { --bg: #fff; --text: #111; --body: #333; --muted: #555; --accent: #542b8c; --line: #ddd; }
  .topbar, .sidebar > .pet-card, footer, .skip-link { display: none; }
  .page-layout { display: block; padding: 0; }
  .sidebar { display: block; position: static; height: auto; min-height: 0; margin-bottom: 24px; }
  .identity { display: flex; align-items: center; gap: 24px; }
  .profile-photo { width: 72px; height: 72px; margin: 0; }
  .profile-contact { display: flex; gap: 20px; }
  .publication, .work-entry { break-inside: avoid; }
}

/* Main navigation uses the same family, with restrained emphasis. */
.topbar nav a { font-weight: 500; }

/* Full-page refinement: shared text, measured hierarchy, quiet technical details. */
:root {
  --font: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text: #dedede;
  --body: #c1c1c1;
  --muted: #989898;
  --line: #2e2e2e;
  --type-section: 1.125rem;
  --entry-gap: 28px;
  --detail-gap: 7px;
  --intro-text: #d1d1d1;
  --link-rule: #747474;
}
:root[data-theme='light'] {
  --text: #2d2d2d;
  --body: #515151;
  --muted: #6a6a6a;
  --line: #dadada;
  --intro-text: #444444;
  --link-rule: #989898;
}
body { font-family: var(--font); }
.topbar-inner { position: relative; }
.header-actions { margin-left: auto; }
.topbar nav a { font-weight: 400; letter-spacing: .005em; }
.wordmark { font-weight: 500; letter-spacing: -1.2px; }
.identity h1 { font-weight: 500; letter-spacing: -.025em; }
.role, .affiliation { line-height: 1.75; }
.profile-contact svg { opacity: 1; stroke-width: 1.4; }
.contact-arrow, .resource-link > span[aria-hidden], .publication-reference span[aria-hidden], footer span[aria-hidden] {
  font: 400 .75rem/1 var(--mono);
  opacity: .72;
}
.header-actions svg { stroke-width: 1.4; }
.about [data-i18n='intro'] {
  max-width: none;
  color: var(--intro-text);
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  text-wrap: pretty;
}
/* This is deliberately one paragraph; its first sentence has no special styling. */
.about .background-details { margin-top: 20px; }
.about .background-details > summary {
  gap: 14px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: .78125rem;
  font-weight: 400;
  letter-spacing: .01em;
}
.about .background-details > summary > span[aria-hidden='true'] { font-size: .875rem; }
.about .background-details > p {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--body);
  text-wrap: pretty;
}
.about a, .news-list a, .publication-reference a {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-rule);
  text-underline-offset: .22em;
}
.about a:hover, .news-list a:hover, .publication-reference a:hover { text-decoration-color: currentColor; }
.section-disclosure > .section-heading { min-height: 64px; padding-block: 18px; }
.section-heading h2 { font-weight: 500; line-height: 1.4; letter-spacing: -.012em; }
.section-heading .section-toggle {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: .875rem;
  font-weight: 400;
}
.section-body { padding-top: 10px; padding-bottom: 30px; }
.work-entry h3, .publication h3 { color: var(--text); font-weight: 500; line-height: 1.55; letter-spacing: -.006em; }
.work-entry > p { line-height: 1.75; text-wrap: pretty; }
.entry-footer { gap: 4px 18px; font-size: .75rem; line-height: 1.85; padding-top: 2px; }
.resource-link { gap: 5px; }
.pub-authors { line-height: 1.8; }
.pub-authors strong { font-weight: 500; }
.publication-reference { gap: 6px 16px; padding-top: 2px; font-size: .8125rem; }
.news-list { gap: 18px; }
.news-list time { font-size: .75rem; line-height: 1.85; font-variant-numeric: tabular-nums; }
.news-list li > div { font-size: .9375rem; line-height: 1.8; text-wrap: pretty; }
footer { padding-block: 22px 28px; font-size: .75rem; }
:lang(zh-CN) .role,
:lang(zh-CN) .identity h1,
:lang(zh-CN) .about,
:lang(zh-CN) .section-heading h2 { font-family: var(--font); letter-spacing: 0; }
:lang(zh-CN) .about .background-details > summary { font-family: var(--font); }
@media (min-width: 601px) and (max-width: 700px) {
  .topbar nav { gap: 16px; }
}
@media (min-width: 601px) {
  .topbar nav { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .topbar nav { justify-content: center; }
  :root { --entry-gap: 24px; }
  .about [data-i18n='intro'] { font-size: .9375rem; line-height: 1.8; }
  .about .background-details { margin-top: 16px; }
  .section-disclosure > .section-heading { min-height: 62px; padding-block: 18px; }
  .entry-footer { column-gap: 14px; }
  .news-list { gap: 18px; }
}
@media (forced-colors: active) {
  .about [data-i18n='intro'] { color: CanvasText; }
  .about a, .news-list a, .publication-reference a { text-decoration-color: LinkText; }
}

/* Tablet identity and contact details form one centered, compact group. */
@media (min-width: 601px) and (max-width: 1099px) {
  .sidebar { grid-template-columns: max-content max-content; justify-content: center; }
  .profile-contact { justify-self: start; }
}

/* One reading column and type scale across compact layouts. */
@media (max-width: 1099px) {
  :root {
    --type-body: clamp(1rem, .875rem + .25vw, 1.0625rem);
    --type-meta: .8125rem;
    --type-section: 1.125rem;
  }
  .topbar-inner, .page-layout { max-width: 784px; }
  .about [data-i18n='intro'] { max-width: none; }
  .about [data-i18n='intro'], .about .background-details > p,
  .work-entry > p, .news-list li > div {
    font-size: var(--type-body);
    line-height: 1.78;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .about .background-details > summary { font-size: var(--type-meta); }
  .work-entry h3, .publication h3 { font-size: var(--type-body); line-height: 1.55; text-wrap: pretty; }
  .pub-authors { font-size: var(--type-meta); line-height: 1.75; }
  .entry-footer, .news-list time { font-size: .78125rem; }
  .news-list li { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 16px; }
  .about p:lang(zh-CN) { line-break: strict; }
}
@media (max-width: 600px) {
  :root { --type-body: .96875rem; --type-meta: .8125rem; --type-name: 1.375rem; --type-section: 1.09375rem; }
  .topbar-inner, .page-layout { max-width: 480px; padding-inline: 20px; }
  .topbar-inner { gap: 12px; }
  .topbar nav { gap: 8px; justify-content: space-between; }
  .topbar nav a { font-size: .78125rem; letter-spacing: 0; }
  .header-actions { gap: 4px; }
  .news-list li { grid-template-columns: 3.75rem minmax(0, 1fr); gap: 12px; }
}
/* A short landscape viewport needs compact leading, not enlarged Safari text. */
@media (min-width: 601px) and (max-width: 1099px) and (max-height: 500px) and (orientation: landscape) {
  :root { --type-body: 1rem; }
  .topbar-inner, .page-layout { max-width: 744px; }
  .about [data-i18n='intro'], .about .background-details > p,
  .work-entry > p, .news-list li > div { line-height: 1.7; }
}
@media (max-width: 360px) {
  .topbar-inner { padding-inline: 16px; }
  .topbar nav { gap: 3px; }
  .topbar nav a { font-size: .75rem; }
}
/* Wide iPads retain their existing layout while sharing the tablet reading scale. */
@media (min-width: 1100px) and (hover: none) and (pointer: coarse) {
  .content { --type-body: 1.0625rem; --type-meta: .875rem; }
  .about [data-i18n='intro'] { max-width: none; }
  .about [data-i18n='intro'], .about .background-details > p,
  .work-entry > p, .news-list li > div { font-size: var(--type-body); line-height: 1.78; text-wrap: pretty; }
  .about p:lang(zh-CN) { line-break: strict; }
}

/* Fill narrow prose lines using language-aware word breaks, keeping the final line natural. */
.about [data-i18n='intro'], .about .background-details > p,
.work-entry > p, .news-list li > div { -webkit-hyphens: none; hyphens: none; }
@media (max-width: 600px), (min-width: 601px) and (max-width: 1099px) and (max-height: 500px) and (orientation: landscape) {
  .about [data-i18n='intro'], .about .background-details > p,
  .work-entry > p, .news-list li > div {
    text-align: justify;
    text-align-last: start;
    text-wrap: wrap;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    word-break: normal;
  }
}
/* Keep Chinese names and short terms intact without stretching glyph spacing. */
.about p:lang(zh-CN) {
  text-align: start;
  text-align-last: auto;
  text-wrap: wrap;
  word-break: normal;
  line-break: strict;
  -webkit-hyphens: none;
  hyphens: none;
}

.about .zh-unit { white-space: nowrap; }
.role:lang(zh-CN) { text-wrap: balance; }

/* Desktop prose follows the same column edges in both languages. */
@media (min-width: 1100px) {
  .about [data-i18n='intro'], .about .background-details > p,
  .work-entry > p, .news-list li > div {
    text-align: justify;
    text-align-last: start;
    text-wrap: pretty;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    word-break: normal;
  }
  .about p:lang(zh-CN) {
    text-align: justify;
    text-align-last: start;
    text-justify: inter-character;
    text-wrap: wrap;
    -webkit-hyphens: none;
    hyphens: none;
  }
}