/*
  Public-site refinement layer.
  Scope: visual system only. Keep the existing page structure and layout intact.
*/

:root {
  --ink: #141414;
  --muted: #605d57;
  --quiet: #7a756d;
  --paper: #f3eee5;
  --paper-deep: #e7ded1;
  --forest: #092031;
  --forest-2: #061521;
  --gold: #6f6559;
  --line: rgba(20, 20, 20, 0.13);
  --line-dark: rgba(255, 255, 255, 0.17);
  --state-line: rgba(20, 20, 20, 0.36);
  --state-line-dark: rgba(255, 255, 255, 0.28);
  --tone-title-light: rgba(20, 20, 20, 0.94);
  --tone-primary-light: rgba(20, 20, 20, 0.78);
  --tone-secondary-light: rgba(20, 20, 20, 0.64);
  --tone-label-light: rgba(20, 20, 20, 0.52);
  --tone-faint-light: rgba(20, 20, 20, 0.38);
  --tone-title-dark: rgba(255, 255, 255, 0.96);
  --tone-primary-dark: rgba(255, 255, 255, 0.78);
  --tone-secondary-dark: rgba(255, 255, 255, 0.62);
  --tone-label-dark: rgba(255, 255, 255, 0.48);
  --tone-faint-dark: rgba(255, 255, 255, 0.34);
  --font-ui: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-body: 400;
  --weight-quiet: 400;
  --weight-medium: 500;
  --weight-ui: 500;
  --weight-semibold: 600;
  --weight-heading: 600;
}

@media (min-width: 681px) {
  html[lang="zh-CN"] .page-shell section.profile-lead .profile-identity > .summary {
    display: none !important;
  }
}

/* Only the visible desktop gallery slide should receive image interactions. */
.page-shell .about-gallery-slide {
  pointer-events: none !important;
  z-index: 0 !important;
}

.page-shell .about-gallery-slide.active {
  pointer-events: auto !important;
  z-index: 1 !important;
}

html[lang="en"] {
  --font-ui: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display-en: Georgia, "Times New Roman", serif;
  --font-display: var(--font-display-en);
}

body {
  font-family: var(--font-ui);
}

.page-shell {
  --text-title: var(--tone-title-light);
  --text-primary: var(--tone-primary-light);
  --text-secondary: var(--tone-secondary-light);
  --text-label: var(--tone-label-light);
  --text-faint: var(--tone-faint-light);
  --muted: var(--text-secondary);
  --quiet: var(--text-label);
  color: var(--text-primary);
}

.page-shell .footer,
.page-shell .mobile-menu,
.page-shell section.profile-lead,
.page-shell .about-panel.dark,
.page-shell .highlight-section,
.page-shell .service-preview,
.page-shell .digest-section.services,
.page-shell .site-header[data-menu-open] {
  --text-title: var(--tone-title-dark);
  --text-primary: var(--tone-primary-dark);
  --text-secondary: var(--tone-secondary-dark);
  --text-label: var(--tone-label-dark);
  --text-faint: var(--tone-faint-dark);
  --muted: var(--text-secondary);
  --quiet: var(--text-label);
  color: var(--text-primary);
}

.page-shell .service-preview,
.page-shell .digest-section.services {
  background: var(--forest-2) !important;
  background-image: none !important;
}

::selection {
  background: rgba(9, 32, 49, 0.18) !important;
}

/*
  Display serif roles:
  - Chinese: identity, homepage/profile display names, and footer signature.
  - English: the same identity roles, but with Georgia before Times.
  Subpage titles, working content, labels, dates, article titles, and data-like text use sans.
*/
.page-shell .subpage-hero h1,
.page-shell .page-hero h1 {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-ui) !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

.page-shell .subpage-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.page-shell .subpage-hero p {
  display: none !important;
}

.page-shell .section-heading h2,
.page-shell .section-title h2,
.page-shell .case-group-heading h2,
.page-shell .timeline-body h3,
.page-shell .case-item h3,
.page-shell .date-block time,
.page-shell .update-list strong,
.page-shell .matter-list strong,
.page-shell .index-meta time,
.page-shell .index-copy h3,
.page-shell .home-contact-channel [data-email-link],
.page-shell .channel-main [data-email-link],
.page-shell .article-title h1,
.page-shell .article-heading,
.page-shell .article-meta time {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-heading) !important;
  letter-spacing: 0 !important;
}

.page-shell .section-heading h2,
.page-shell .section-title h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: var(--weight-ui) !important;
  line-height: 1.18 !important;
}

.page-shell .case-group-heading h2 {
  font-size: clamp(24px, 2.7vw, 34px) !important;
  font-weight: var(--weight-ui) !important;
  line-height: 1.3 !important;
}

.page-shell .case-group-heading::marker {
  content: "";
}

.page-shell .case-group-heading::-webkit-details-marker {
  display: none;
}

.page-shell .case-group-heading:after {
  content: none !important;
  display: none !important;
}

.page-shell .timeline-body h3,
.page-shell .case-item h3,
.page-shell .index-copy h3,
.page-shell .article-title h1 {
  line-height: 1.35 !important;
}

.page-shell .date-block time,
.page-shell .index-meta time,
.page-shell .article-meta time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: var(--weight-ui) !important;
}

.page-shell .date-block time,
.page-shell .index-meta time {
  font-size: clamp(22px, 2.25vw, 30px) !important;
}

.page-shell .timeline-body h3,
.page-shell .index-copy h3 {
  font-size: clamp(21px, 2.1vw, 29px) !important;
  font-weight: var(--weight-heading) !important;
}

.page-shell .case-item h3 {
  font-weight: var(--weight-heading) !important;
}

.page-shell .article-title h1 {
  font-size: clamp(34px, 4vw, 54px) !important;
  font-weight: var(--weight-heading) !important;
  line-height: 1.24 !important;
}

.page-shell .article-heading {
  font-size: clamp(28px, 2.9vw, 38px) !important;
  font-weight: var(--weight-heading) !important;
  line-height: 1.35 !important;
}

.page-shell .channel-main [data-email-link] {
  font-size: clamp(24px, 3.1vw, 42px) !important;
  font-weight: var(--weight-ui) !important;
  line-height: 1.16 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-variant-ligatures: no-common-ligatures;
}

.page-shell .desktop-nav a,
.page-shell .mobile-menu a,
.page-shell .mobile-primary-nav a,
.page-shell .lang-link,
.page-shell .contact-link,
.page-shell .footer-nav a,
.page-shell .btn,
.page-shell .text-link,
.page-shell .section-link,
.page-shell .case-grid-head span,
.page-shell .case-meta span,
.page-shell .case-scope dt,
.page-shell .timeline-body small,
.page-shell .channel-main a:last-child,
.page-shell dt {
  font-weight: var(--weight-ui) !important;
}

.page-shell .hero h1 small {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-ui) !important;
  letter-spacing: 0 !important;
}

.page-shell .hero-role-line {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-quiet) !important;
  line-height: 1.58 !important;
}

.page-shell .lead-primary {
  font-family: var(--font-ui) !important;
  max-width: min(100%, 20em) !important;
  font-weight: var(--weight-ui) !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  word-break: normal !important;
}

.page-shell .lead-secondary {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-quiet) !important;
  line-height: 1.66 !important;
  hyphens: none !important;
}

/* Tonal hierarchy: title, reading text, supporting text, labels, and faint notes. */
.page-shell h1,
.page-shell h2,
.page-shell h3,
.page-shell .lead-primary,
.page-shell .article-title h1,
.page-shell .article-heading,
.page-shell .article-subheading,
.page-shell .case-item h3,
.page-shell .timeline-body h3,
.page-shell .index-copy h3,
.page-shell .update-list strong,
.page-shell .matter-list strong,
.page-shell .service-list strong,
.page-shell .channel-main [data-email-link],
.page-shell .home-contact-channel [data-email-link] {
  color: var(--text-title) !important;
}

.page-shell p,
.page-shell li,
.page-shell dd,
.page-shell .profile-lead,
.page-shell .profile-lead p,
.page-shell .profile-lead .role,
.page-shell .profile-lead dd,
.page-shell .profile-content p,
.page-shell .profile-content li,
.page-shell .prose p,
.page-shell .line-list li,
.page-shell .article-paragraph,
.page-shell .article-body > .article-paragraph:first-child,
.page-shell .footer-nav a,
.page-shell .footer-email {
  color: var(--text-primary) !important;
}

.page-shell .section-heading p,
.page-shell .subpage-hero p,
.page-shell .summary,
.page-shell .profile-lead .summary,
.page-shell .lead-secondary,
.page-shell .case-item p,
.page-shell .timeline-body p,
.page-shell .index-copy p,
.page-shell .service-row p,
.page-shell .service-detail p,
.page-shell .service-body p,
.page-shell .group-heading p,
.page-shell .section-note,
.page-shell .profile-summary,
.page-shell .resume-copy p,
.page-shell figcaption,
.page-shell .footer p,
.page-shell .footer-bottom {
  color: var(--text-secondary) !important;
}

.page-shell .section-kicker,
.page-shell .section-link,
.page-shell .panel-label,
.page-shell .footer-label,
.page-shell .date-block span,
.page-shell .service-detail span,
.page-shell .service-body span,
.page-shell .group-heading span,
.page-shell .case-grid-head span,
.page-shell .case-meta span,
.page-shell .home-contact-kicker,
.page-shell .home-contact-channel span,
.page-shell .mobile-hero-channel dt,
.page-shell .index-meta span,
.page-shell .article-meta span,
.page-shell .article-meta strong,
.page-shell .channel-label span,
.page-shell .source-link,
.page-shell dt {
  color: var(--text-label) !important;
}

.page-shell .article-meta small,
.page-shell .timeline-body small,
.page-shell .case-scope dt,
.page-shell .channel-main a:last-child {
  color: var(--text-faint) !important;
}

/* Quiet the repeated gold micro-label system. */
.page-shell .footer-label,
.page-shell .panel-label,
.page-shell .date-block span,
.page-shell .service-detail span,
.page-shell .service-body span,
.page-shell .group-heading span,
.page-shell .section-kicker,
.page-shell .section-link,
.page-shell .case-meta span,
.page-shell .home-contact-kicker,
.page-shell .home-contact-channel span,
.page-shell .mobile-hero-channel dt,
.page-shell .index-meta span,
.page-shell .article-meta span,
.page-shell .article-meta strong,
.page-shell .channel-label span,
.page-shell .source-link,
.page-shell .channel-main a:last-child {
  color: var(--quiet) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.page-shell .panel-label,
.page-shell .footer-label,
.page-shell .date-block span,
.page-shell .service-detail span,
.page-shell .service-body span,
.page-shell .group-heading span,
.page-shell .case-meta span,
.page-shell .home-contact-kicker,
.page-shell .home-contact-channel span,
.page-shell .index-meta span,
.page-shell .article-meta span,
.page-shell .article-meta strong,
.page-shell .channel-label span {
  font-size: 12px !important;
  font-weight: var(--weight-ui) !important;
}

.page-shell .group-heading span,
.page-shell .service-body span,
.page-shell .service-detail span,
.page-shell .article-meta span,
.page-shell .article-meta strong {
  margin-bottom: 5px !important;
}

/* Keep state marks neutral; no warm gold as a system accent. */
.page-shell .desktop-nav a:after,
.page-shell .mobile-hero-gallery-dots button,
.page-shell .about-gallery-dots button[data-active] {
  background: var(--state-line) !important;
}

.page-shell .mobile-hero-gallery-dots button {
  background: rgba(255, 255, 255, 0.26) !important;
}

.page-shell .mobile-hero-gallery-dots button[data-active] {
  background: rgba(255, 255, 255, 0.54) !important;
}

@media (min-width: 821px) {
  .page-shell .about-section .about-grid > .photo-panel + .about-panel {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .page-shell .about-section .about-grid > .split-panel {
    border-top: 0 !important;
  }

  html[lang="en"] .page-shell .about-section .about-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: clamp(28px, 4vw, 58px) !important;
  }

  html[lang="en"] .page-shell .about-section .about-grid > .photo-panel {
    grid-column: 1 / span 3 !important;
  }

  html[lang="en"] .page-shell .about-section .about-grid > .photo-panel + .about-panel {
    grid-column: 4 / span 3 !important;
  }

  html[lang="en"] .page-shell .about-section .about-grid > .split-panel {
    grid-column: 1 / span 4 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 58px) !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html[lang="en"] .page-shell .about-section .about-grid > .expertise-panel {
    grid-column: 5 / span 2 !important;
    padding-top: clamp(24px, 3.4vw, 44px) !important;
    border-top: 1px solid var(--line) !important;
  }

  html[lang="en"] .page-shell .about-section .split-panel > div {
    padding-top: clamp(24px, 3.4vw, 44px) !important;
    border-top: 1px solid var(--line) !important;
  }

  html[lang="en"] .page-shell .about-section .split-panel li,
  html[lang="en"] .page-shell .about-section .expertise-panel li {
    font-size: clamp(18px, 1.18vw, 20px) !important;
    line-height: 1.72 !important;
  }
}

html[lang="en"] .page-shell #bio .prose {
  max-width: 48rem !important;
  gap: 16px !important;
}

html[lang="en"] .page-shell #bio .prose p {
  font-size: clamp(17px, 1.08vw, 19px) !important;
  line-height: 1.72 !important;
  font-weight: var(--weight-body) !important;
}

html[lang="en"] .page-shell #bio .prose p:first-child {
  color: var(--text-title) !important;
  font-weight: var(--weight-body) !important;
}

html[lang="en"] .page-shell section.profile-lead .profile-identity {
  min-width: min(100%, 27rem) !important;
}

html[lang="en"] .page-shell section.profile-lead h1 {
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

html[lang="en"] .page-shell section.profile-lead h1:after {
  font-size: clamp(17px, 1.6vw, 19px) !important;
  font-weight: var(--weight-ui) !important;
}

html[lang="en"] .page-shell section.profile-lead .role {
  margin: 19px 0 22px !important;
  font-size: clamp(19px, 1.5vw, 21px) !important;
  line-height: 1.54 !important;
  font-weight: var(--weight-ui) !important;
}

html[lang="en"] .page-shell section.profile-lead .contact-lines dd {
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.58 !important;
  font-weight: var(--weight-body) !important;
}

@media (min-width: 901px) {
  .page-shell .service-group {
    align-items: start !important;
  }

  .page-shell .service-group:not([open]) {
    display: block !important;
    padding: 26px 0 !important;
  }

  .page-shell .service-group[open] {
    grid-template-columns: minmax(240px, 0.3fr) minmax(0, 0.7fr) !important;
    gap: clamp(42px, 6vw, 88px) !important;
  }

  .page-shell .group-heading {
    cursor: pointer !important;
    transition: color 0.16s ease, opacity 0.16s ease;
  }

  .page-shell .group-heading:focus-visible,
  .page-shell .service-disclosure summary:focus-visible {
    outline: 2px solid rgba(20, 20, 20, 0.34);
    outline-offset: 8px;
  }

  .page-shell .group-toggle {
    display: inline-grid !important;
    place-items: center;
    width: 24px;
    height: 30px;
    color: var(--text-label) !important;
    font-size: 18px;
    line-height: 1;
  }

  .page-shell .group-heading:hover h2,
  .page-shell .service-disclosure summary:hover h3 {
    color: var(--text-title) !important;
  }

  .page-shell .group-heading:hover .group-toggle,
  .page-shell .service-disclosure summary:hover em {
    color: var(--text-primary) !important;
  }

  .page-shell .service-group:not([open]) .group-heading {
    grid-template-columns:
      minmax(96px, 0.14fr)
      minmax(260px, 0.38fr)
      minmax(260px, 0.48fr)
      auto !important;
    gap: clamp(20px, 3vw, 46px) !important;
    align-items: start !important;
  }

  .page-shell .service-group:not([open]) .group-heading span {
    grid-column: 1 !important;
    margin-top: 5px !important;
  }

  .page-shell .service-group:not([open]) .group-heading h2 {
    grid-column: 2 !important;
    max-width: 18em !important;
  }

  .page-shell .service-group:not([open]) .group-heading p {
    grid-column: 3 !important;
    max-width: 34em !important;
    margin-top: 2px !important;
  }

  .page-shell .service-group:not([open]) .group-toggle {
    grid-column: 4 !important;
    justify-self: end !important;
    margin-top: 1px !important;
  }

  .page-shell .service-group[open] .group-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 18px !important;
    padding-right: clamp(8px, 2vw, 24px) !important;
  }

  .page-shell .service-group[open] .group-heading span,
  .page-shell .service-group[open] .group-heading p {
    grid-column: 1 / -1 !important;
  }

  .page-shell .service-group[open] .group-heading h2 {
    grid-column: 1 !important;
  }

  .page-shell .service-group[open] .group-toggle {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
  }

  .page-shell .service-group[open] .service-disclosures {
    padding-top: 4px !important;
  }

  .page-shell .service-disclosure summary {
    min-height: 52px;
  }

  .page-shell .service-disclosure summary em {
    width: 22px !important;
    height: 28px !important;
    color: var(--text-label) !important;
    transition: color 0.16s ease;
  }
}

.page-shell .mobile-menu a:hover,
.page-shell .mobile-menu a:focus-visible,
.page-shell .mobile-menu a[aria-current="page"] {
  color: #fff !important;
  border-bottom-color: var(--state-line-dark) !important;
}

.page-shell .channel-main a:last-child {
  border-bottom-color: rgba(20, 20, 20, 0.24) !important;
}

.page-shell .contact-channel .channel-main a:last-child {
  color: var(--text-secondary) !important;
  border-bottom-color: rgba(20, 20, 20, 0.24) !important;
}

.page-shell .article-heading {
  border-top-color: var(--line) !important;
}

.page-shell .article-hero-grid:before {
  background: var(--state-line) !important;
}

.page-shell .article-follow {
  border-color: rgba(20, 20, 20, 0.18) !important;
}

.page-shell .timeline li:before,
.page-shell .service-detail li:before,
.page-shell .home-contact-channel [data-email-link]:after {
  background: rgba(20, 20, 20, 0.32) !important;
}

.page-shell .about-gallery-arrows button:hover {
  border-color: rgba(20, 20, 20, 0.42) !important;
}

/* Remove disabled decoration systems left behind by earlier iterations. */
.page-shell .subpage-hero:after,
.page-shell .hero:before,
.page-shell .hero-copy:after,
.page-shell .text-link:after,
.page-shell h1:before {
  content: none !important;
  display: none !important;
}

.page-shell .home-contact-grid {
  border-top: 0 !important;
}

.page-shell section.profile-lead .contact-lines {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.page-shell section.profile-lead .portrait-block figcaption {
  display: none !important;
}

.page-shell .timeline-card {
  grid-template-columns: clamp(200px, 18vw, 260px) minmax(0, 1fr) !important;
  gap: clamp(28px, 3.7vw, 54px) !important;
  min-height: 0 !important;
  align-items: center !important;
}

.page-shell .timeline-card:has(.media-slot img) {
  grid-template-columns: clamp(200px, 18vw, 260px) minmax(0, 1fr) clamp(190px, 16.8vw, 248px) !important;
}

.page-shell .timeline-card .date-block span,
.page-shell .timeline-card .timeline-body small {
  display: none !important;
}

.page-shell .timeline-card .media-slot:not(:has(img)) {
  display: none !important;
}

.page-shell .timeline-card .media-slot {
  display: grid !important;
  place-items: center;
  width: 100%;
  margin: 0 !important;
  aspect-ratio: 3 / 2;
  align-self: center !important;
  overflow: hidden;
  border-radius: 6px !important;
  background: rgba(20, 20, 20, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.1);
}

.page-shell .timeline-card .media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(0.98);
  transition: transform 0.24s ease, filter 0.24s ease;
}

.page-shell .timeline-card:has(.media-slot img):hover .media-slot img {
  filter: saturate(1) contrast(1);
  transform: scale(1.025);
}

.page-shell .news-index-item {
  grid-template-columns: clamp(220px, 20vw, 286px) minmax(0, 1fr) !important;
  gap: clamp(28px, 3.7vw, 54px) !important;
}

.page-shell .news-index-item.has-media {
  grid-template-columns: clamp(220px, 20vw, 286px) minmax(0, 1fr) clamp(190px, 16.8vw, 248px) !important;
  gap: clamp(28px, 3.7vw, 54px) !important;
  align-items: center !important;
}

.page-shell .news-index-item .index-meta span,
.page-shell .news-index-item .index-copy small {
  display: none !important;
}

.page-shell .news-index-media {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  align-self: center;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.05);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.1);
}

.page-shell .news-index-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(0.98);
  transition: transform 0.24s ease, filter 0.24s ease;
}

.page-shell .news-index-item.has-media:hover .news-index-media img {
  filter: saturate(1) contrast(1);
  transform: scale(1.025);
}

/* Publication pages use dense editorial spreads that need more width than body copy. */
.page-shell .publication-article .article-figure:not(.publication-cover) {
  position: relative;
  left: 50%;
  width: min(1120px, calc(100vw - 48px));
  transform: translateX(-50%);
}

.page-shell .publication-article .publication-cover {
  width: min(520px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.page-shell .publication-article .article-figure img {
  border-radius: 4px;
}

@media (max-width: 980px) and (min-width: 681px) {
  .page-shell .news-index-item {
    grid-template-columns: clamp(190px, 24vw, 232px) minmax(0, 1fr) !important;
    gap: clamp(22px, 3.2vw, 38px) !important;
  }

  .page-shell .news-index-item.has-media {
    grid-template-columns: clamp(190px, 24vw, 232px) minmax(0, 1fr) clamp(148px, 21vw, 196px) !important;
    gap: clamp(22px, 3.2vw, 38px) !important;
  }
}

@media (max-width: 980px) and (min-width: 681px) {
  .page-shell .timeline-card {
    grid-template-columns: clamp(160px, 24vw, 210px) minmax(0, 1fr) !important;
    gap: clamp(22px, 3.2vw, 38px) !important;
  }

  .page-shell .timeline-card:has(.media-slot img) {
    grid-template-columns: clamp(160px, 24vw, 210px) minmax(0, 1fr) clamp(148px, 21vw, 196px) !important;
  }
}

@media (max-width: 680px) {
  .page-shell .hero,
  .page-shell .contact-channel {
    --text-title: var(--tone-title-dark);
    --text-primary: var(--tone-primary-dark);
    --text-secondary: var(--tone-secondary-dark);
    --text-label: var(--tone-label-dark);
    --text-faint: var(--tone-faint-dark);
    --muted: var(--text-secondary);
    --quiet: var(--text-label);
  }

  .page-shell .section-heading h2,
  .page-shell .section-title h2 {
    color: var(--text-title) !important;
    font-size: clamp(27px, 7.2vw, 32px) !important;
    line-height: 1.2 !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .date-block time,
  .page-shell .index-meta time {
    color: var(--text-secondary) !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .date-block span {
    color: var(--text-label) !important;
    font-size: 0.82rem !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .mobile-digest .update-list span,
  .page-shell .mobile-digest .matter-list span {
    color: rgba(20, 20, 20, 0.58) !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    font-weight: var(--weight-ui) !important;
    letter-spacing: 0 !important;
  }

  .page-shell .timeline-body h3,
  .page-shell .case-item h3,
  .page-shell .index-copy h3 {
    color: rgba(20, 20, 20, 0.86) !important;
    font-size: clamp(18px, 4.9vw, 19.5px) !important;
    line-height: 1.46 !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .update-list strong,
  .page-shell .matter-list strong {
    color: rgba(20, 20, 20, 0.86) !important;
    font-family: var(--font-ui) !important;
    font-size: clamp(18px, 4.9vw, 19.5px) !important;
    line-height: 1.46 !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .mobile-digest .update-list a {
    grid-template-columns: 1fr !important;
    grid-template-areas: none;
    gap: 8px !important;
    padding: 20px 0 !important;
  }

  .page-shell .mobile-digest .update-list a:has(.update-list-media) {
    grid-template-columns: minmax(0, 1fr) clamp(112px, 31vw, 128px) !important;
    grid-template-areas:
      "meta media"
      "title media";
    column-gap: 16px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  .page-shell .mobile-digest .update-list a:has(.update-list-media) span {
    grid-area: meta;
  }

  .page-shell .mobile-digest .update-list a:has(.update-list-media) strong {
    grid-area: title;
    -webkit-line-clamp: 2;
  }

  .page-shell .mobile-digest .update-list strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .page-shell .mobile-digest .update-list-media {
    grid-area: media;
    width: 100%;
    margin: 0;
    aspect-ratio: 3 / 2;
    align-self: center;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.05);
    box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.1);
  }

  .page-shell .mobile-digest .update-list-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page-shell .case-group-heading h2 {
    font-family: var(--font-ui) !important;
    font-size: clamp(18px, 4.9vw, 21px) !important;
    font-weight: var(--weight-ui) !important;
    line-height: 1.42 !important;
  }

  .page-shell .case-group-heading {
    grid-template-columns: minmax(0, 1fr) 2ch !important;
    align-items: start !important;
  }

  .page-shell .case-group-heading:after {
    content: "-" !important;
    display: block !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-label) !important;
    font-size: 24px !important;
    font-weight: var(--weight-ui) !important;
    line-height: 1.15 !important;
  }

  .page-shell .case-group:not([open]) .case-group-heading:after {
    content: "+" !important;
  }

  .page-shell .case-group-heading:focus-visible {
    outline: 1px solid rgba(20, 20, 20, 0.28) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
  }

  .page-shell .channel-main [data-email-link] {
    font-size: clamp(20px, 6vw, 25px) !important;
    line-height: 1.22 !important;
  }

  .page-shell .service-body span,
  .page-shell .service-detail span,
  .page-shell .group-heading span,
  .page-shell .section-kicker {
    letter-spacing: 0 !important;
  }

  .page-shell .hero-role-line {
    color: var(--text-secondary) !important;
    font-weight: var(--weight-quiet) !important;
  }

  .page-shell .lead {
    max-width: min(100%, 24em) !important;
  }

  .page-shell .lead-primary {
    max-width: min(100%, 19em) !important;
    font-weight: var(--weight-ui) !important;
    line-height: 1.46 !important;
  }

  .page-shell .lead-secondary {
    color: var(--text-secondary) !important;
    line-height: 1.68 !important;
  }

  .page-shell .mobile-hero-channel dt {
    color: var(--text-label) !important;
    font-weight: var(--weight-ui) !important;
  }

  .page-shell .mobile-hero-channel dd,
  .page-shell .mobile-hero-channel a {
    color: var(--text-primary) !important;
    font-weight: var(--weight-quiet) !important;
  }

  .page-shell .contact-channel .channel-main a:last-child {
    color: var(--text-secondary) !important;
    border-bottom-color: rgba(255, 255, 255, 0.26) !important;
  }

  .page-shell .news-index-item {
    grid-template-columns: 1fr !important;
    grid-template-areas: none;
    gap: 8px !important;
    padding: 26px 0 !important;
  }

  .page-shell .news-index-item.has-media {
    grid-template-columns: minmax(0, 1fr) clamp(112px, 31vw, 128px) !important;
    grid-template-areas:
      "meta media"
      "copy media";
    column-gap: 16px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  .page-shell .news-index-item .index-meta {
    gap: 0 !important;
  }

  .page-shell .news-index-item .index-copy {
    gap: 0 !important;
  }

  .page-shell .news-index-item.has-media .index-meta {
    grid-area: meta;
  }

  .page-shell .news-index-item.has-media .index-copy {
    grid-area: copy;
  }

  .page-shell .news-index-item.has-media .news-index-media {
    grid-area: media;
    align-self: center;
    aspect-ratio: 3 / 2;
    margin-top: 0;
  }

  .page-shell .news-index-item.has-media .index-copy h3 {
    max-width: 100% !important;
    -webkit-line-clamp: 2;
  }

  .page-shell .news-index-item .index-copy h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

/*
  The homepage hero now uses a practice-area line instead of a short slogan.
  Let it read as a compact text block instead of forcing the old narrow poster width.
*/
.page-shell .hero .lead {
  max-width: min(100%, 36rem) !important;
}

.page-shell .hero .lead-primary {
  display: block !important;
  max-width: min(100%, 36rem) !important;
  line-height: 1.32 !important;
}

html[lang="zh-CN"] .page-shell .hero .lead-primary {
  line-break: loose;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media (min-width: 681px) and (max-width: 1120px) {
  html[lang="en"] .page-shell .profile-document-grid,
  html[lang="en"] .page-shell .highlight-section,
  html[lang="en"] .page-shell .support-grid {
    grid-template-columns: 1fr !important;
  }

  html[lang="en"] .page-shell .profile-side-nav {
    display: none !important;
  }

  html[lang="en"] .page-shell .profile-content,
  html[lang="en"] .page-shell .prose {
    max-width: 100% !important;
  }
}

@media (min-width: 861px) {
  html[lang="en"] .page-shell section.profile-lead .profile-lead-inner {
    grid-template-columns: minmax(420px, 0.58fr) minmax(300px, 0.42fr) !important;
    gap: clamp(28px, 3.6vw, 48px) !important;
  }

  .page-shell .support-section .support-grid .line-list li {
    font-size: clamp(18px, 1.06vw, 19px) !important;
    line-height: 1.68 !important;
    font-weight: var(--weight-body) !important;
  }
}

@media (min-width: 681px) {
  .page-shell .hero .lead-primary {
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.42 !important;
    font-weight: var(--weight-medium) !important;
  }

  html[lang="en"] .page-shell .hero .lead {
    max-width: min(100%, 48rem) !important;
  }

  html[lang="en"] .page-shell .hero .lead-primary {
    max-width: min(100%, 48rem) !important;
    font-size: clamp(22px, 1.65vw, 28px) !important;
    line-height: 1.44 !important;
    font-weight: var(--weight-medium) !important;
  }

  html[lang="en"] .page-shell .hero-copy {
    max-width: min(100%, 50rem) !important;
  }
}

@media (max-width: 680px) {
  .page-shell .hero .lead {
    max-width: min(100%, 30rem) !important;
    margin-top: -2px !important;
  }

  .page-shell .hero .lead-primary {
    max-width: min(100%, 30rem) !important;
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.52 !important;
    font-weight: var(--weight-medium) !important;
  }

  html[lang="zh-CN"] .page-shell .hero .lead {
    max-width: min(100%, 21rem) !important;
    margin-top: 0 !important;
  }

  html[lang="zh-CN"] .page-shell .hero .lead-primary {
    max-width: min(100%, 21rem) !important;
    font-size: clamp(18px, 5.05vw, 20px) !important;
    line-height: 1.5 !important;
    font-weight: var(--weight-heading) !important;
  }

  html[lang="en"] .page-shell .hero .lead-primary {
    font-size: clamp(18px, 4.6vw, 21px) !important;
    line-height: 1.52 !important;
  }

  .page-shell .hero .button-row {
    margin-top: 0 !important;
  }

  html[lang="en"] .page-shell #bio .prose {
    gap: 18px !important;
    max-width: 34em !important;
  }

  html[lang="en"] .page-shell #bio .prose p {
    color: rgba(20, 20, 20, 0.82) !important;
    font-size: 1.0625rem !important;
    line-height: 1.76 !important;
    font-weight: var(--weight-body) !important;
    letter-spacing: 0 !important;
    font-kerning: normal !important;
  }

  html[lang="en"] .page-shell #bio .prose p:first-child {
    font-size: 1.0625rem !important;
    line-height: 1.76 !important;
    font-weight: var(--weight-body) !important;
  }

  html[lang="en"] .page-shell .profile-content .line-list li {
    font-weight: var(--weight-body) !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .profile-lead-inner {
    min-height: 248px !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .portrait-block {
    right: -18px !important;
    width: min(220px, 56vw) !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .profile-identity {
    width: min(68vw, 272px) !important;
    bottom: 20px !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead h1 {
    font-size: clamp(36px, 10vw, 40px) !important;
    gap: 9px !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead h1:after {
    font-size: 13px !important;
    font-weight: var(--weight-heading) !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .role {
    max-width: min(68vw, 272px) !important;
    margin: 9px 0 12px !important;
    font-size: 13.5px !important;
    line-height: 1.46 !important;
    font-weight: var(--weight-heading) !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .contact-lines {
    width: min(68vw, 272px) !important;
    margin-top: 12px !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .contact-lines dd {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html[lang="zh-CN"] .page-shell section.profile-lead .contact-lines dd a:before {
    content: "邮箱：";
  }

  html[lang="zh-CN"] .page-shell .profile-document {
    padding-top: 28px !important;
  }

  html[lang="zh-CN"] .page-shell .expertise-section .expertise-list {
    padding-left: 18px !important;
  }

  html[lang="en"] .page-shell section.profile-lead .profile-identity {
    width: min(72vw, 286px) !important;
    min-width: 0 !important;
    bottom: 20px !important;
  }

  html[lang="en"] .page-shell section.profile-lead h1:after {
    font-size: 13px !important;
    font-weight: var(--weight-ui) !important;
  }

  html[lang="en"] .page-shell section.profile-lead .role {
    max-width: min(72vw, 286px) !important;
    margin: 11px 0 13px !important;
    font-size: 13.75px !important;
    line-height: 1.5 !important;
    font-weight: var(--weight-ui) !important;
  }

  html[lang="en"] .page-shell section.profile-lead .contact-lines {
    width: min(72vw, 286px) !important;
    margin-top: 12px !important;
  }

  html[lang="en"] .page-shell section.profile-lead .contact-lines dd {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
  }

  html[lang="en"] .page-shell section.profile-lead .contact-lines dd a:before {
    content: "Email: ";
  }
}

@media (min-width: 1121px) {
  html[lang="en"] .page-shell .support-section .support-grid {
    grid-template-columns:
      minmax(250px, 1fr)
      minmax(250px, 1fr)
      minmax(250px, 1fr) !important;
    gap: clamp(30px, 2.4vw, 38px) !important;
  }

  html[lang="en"] .page-shell .support-section .support-grid .line-list li,
  html[lang="en"] .page-shell .support-block .line-list li,
  html[lang="en"] .page-shell .work-history .line-list li {
    padding: 14px 0 !important;
    font-size: clamp(15.75px, 0.92vw, 17px) !important;
    line-height: 1.56 !important;
  }

  html[lang="en"] .page-shell .support-section .section-label {
    margin-bottom: 20px !important;
  }
}