/* Compact public-site type and component scale. Loaded after page/language styles.
   Wide desktop (>= 1180px), motion and sticky tracks stay untouched.
   Role-specific rules deliberately override legacy !important type declarations;
   do not scale the root font or the whole page to fit a smaller viewport. */
/* Empty editorial covers use a clearly branded placeholder, not a broken img.
   The published article stays untouched and a later uploaded cover replaces it. */
main .insights-cover-placeholder { background: #f3f0eb; }
main .insights-cover-placeholder img { object-fit: contain; padding: 18%; }

/* Touch feedback belongs to the control, not the browser's blue rectangle.
   Leave selection/callouts on article text and links, and :focus-visible intact. */
@media (hover: none) and (pointer: coarse) {
  /* Inherited by every public-page control, including SVG, labels and
     custom clickable wrappers. This does not disable text selection. */
  html { -webkit-tap-highlight-color: transparent; }
  :where(a[href], button, [role="button"], summary):active { opacity: .72; }
}

/* An unfolded phone can have the wide header without a mouse. Keep its menu
   scrollable within the screen and its destinations comfortably tappable. */
@media (min-width: 981px) and (hover: none) and (pointer: coarse) {
  .nav-menu.nav-mega-menu {
    min-height: 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-mega-menu-about .nav-mega-group-link { min-height: 44px; }
  .nav-menu .nav-contact a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Narrow/touch maps have a separate detail row above the canvas. The desktop
   overlay retains its original parent and positioning in script.js. */
.coverage-panel[data-coverage-layout="stacked"] { min-height: 0; }
[data-coverage-layout="stacked"] .coverage-map {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  min-height: 0;
}
[data-coverage-layout="stacked"] .coverage-map-canvas { width: 100%; aspect-ratio: 695.61 / 511.7; }
[data-coverage-layout="stacked"] .coverage-map-copy {
  position: static;
  width: 100% !important;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px;
  pointer-events: auto;
  transform: none !important;
  filter: none;
  will-change: auto;
}
[data-coverage-layout="stacked"] .coverage-point::before,
[data-coverage-layout="stacked"] .coverage-point::after { pointer-events: none; }

@media (max-width: 1179px) {
  html:root {
    --compact-display: clamp(32px, calc(24px + 2.5vw), 54px);
    --compact-section: clamp(26px, calc(22px + 1.25vw), 37px);
    --compact-subtitle: clamp(20px, calc(17px + .8vw), 26.5px);
    --compact-card: clamp(18px, calc(16.5px + .65vw), 24px);
    --compact-body: clamp(15px, calc(14px + .2vw), 16px);
    --compact-reading: clamp(16px, calc(15px + .25vw), 18px);
    --compact-heading-gap: clamp(18px, 2.5vw, 30px);
  }

  html[lang="en"] {
    --en-display: var(--compact-display);
    --en-heading: var(--compact-section);
    --en-subheading: var(--compact-subtitle);
    --en-body: var(--compact-body);
  }

  html:root body main :is(h1, .secondary-hero-copy h1) {
    font-size: var(--compact-display) !important;
    line-height: 1.2 !important;
  }

  html:root body main .secondary-hero-copy h1 span {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  html:root body:not(.secondary-body) main .hero-copy h1 {
    font-size: clamp(32px, calc(14px + 4.6vw), 68px) !important;
    line-height: 1.2 !important;
  }

  html:root body main :is(
    .section-heading .char-title, .funding-data-heading .char-title,
    .impact-title, .anniversary-feature-heading .char-title, .insights-heading .char-title,
    .funding-section-heading h2, .funding-risk-assessment-heading h2,
    .funding-management-copy h2, .business-section h2, .cases-intro h2,
    .about-editorial-title, .about-values-heading h2, .about-offices-heading h2,
    .about-structure-heading h2, .ann-page h2, .insights-section-heading h2
  ) {
    font-size: var(--compact-section) !important;
    line-height: 1.3 !important;
  }

  html:root body main .funding-spotlight h2 {
    font-size: clamp(30px, calc(20px + 2.8vw), 54px) !important;
    line-height: 1.25 !important;
  }

  html:root body main :is(
    .ecosystem-accordion-title, .funding-hero-headline,
    .funding-process-static-copy h3, .funding-process-panel-copy h3,
    .impact-honors-heading h3, .anniversary-expand-copy h3,
    .cooperation-type h2, .cooperation-copy h2,
    .business-section-subtitle, .business-section-feature h3,
    .application-cta-copy h2, .secondary-detail h2,
    .business-detail-research-lead, .business-detail-services h2,
    .business-detail-research > h2, .leader-detail h1,
    .media-resource-group-header h2, .ann-feature-copy h3,
    .ann-page .ann-speaker-title, .ann-page .ann-album-title,
    .ann-page .ann-archive-details h3, .ann-page .ann-card-label
  ) {
    font-size: var(--compact-subtitle) !important;
    line-height: 1.4 !important;
  }

  html:root body main :is(
    .forum-copy h3, .impact-panel-copy h3, .funding-feature-item h3,
    .funding-risk-dimension h3, .funding-case h3,
    .cases-card-header h2, .secondary-list-copy h3, .secondary-card h3,
    .insights-featured-lead-overlay h3, .about-history h3,
    .about-values-slides h3, .leader-card h2
  ) {
    font-size: var(--compact-card) !important;
    line-height: 1.45 !important;
  }

  html:root body main :is(
    .hero-lead, .section-heading > p, .funding-spotlight-summary,
    .ecosystem-accordion-lead, .forum-copy p, .impact-panel-copy p,
    .anniversary-expand-copy p, .about-overview-hero-description,
    .about-brand-story p, .about-institution-copy > p, .about-values-heading p,
    .about-values-slides p, .about-editorial-copy > p:last-child,
    .about-offices-heading > p, .business-section-intro, .business-section-heading-intro,
    .cooperation-intro p, .insights-hero p, .media-resources-hero p
  ) {
    font-size: var(--compact-body) !important;
    line-height: 1.8 !important;
  }

  html:root body main :is(
    .insight-content-paragraph, .leader-biography p, .leader-education,
    .business-detail-service p, .business-detail-research-direction p,
    .business-detail-research-overview
  ) {
    font-size: var(--compact-reading) !important;
    line-height: 1.85 !important;
  }

  /* Keep title/description spacing proportional without changing section tracks. */
  html:root body main :is(.section-heading > p, .about-values-heading p,
    .about-offices-heading > p, .business-section-subtitle) {
    margin-top: var(--compact-heading-gap);
  }

  /* A minimum media height must not make aspect-ratio widen a narrow page. */
  .ann-page :is(.ann-feature, .ann-film-stage) {
    width: 100%;
    min-width: 0;
  }

  /* Fixed rem-sized radial stops cover progressively more of a narrow page.
     Scale their radius with the viewport, retaining the approved colors/stops. */
  body:not(.secondary-body) {
    background:
      radial-gradient(ellipse at 86% 4%, rgba(255, 194, 77, .11), transparent min(36rem, 49vw)),
      radial-gradient(ellipse at 8% 12%, rgba(251, 235, 221, .34), transparent min(44rem, 60vw)),
      radial-gradient(ellipse at 78% 58%, rgba(255, 138, 61, .028), transparent min(48rem, 65vw)),
      linear-gradient(180deg, #fffefd 0%, #fffdfb 32%, #fffaf6 68%, #fdf4ec 100%);
  }

  body:not(.secondary-body) > main::before {
    background:
      radial-gradient(ellipse at 10% 18%, rgba(251, 235, 221, .26), transparent min(42rem, 57vw)),
      radial-gradient(ellipse at 92% 34%, rgba(255, 194, 77, .07), transparent min(40rem, 55vw)),
      radial-gradient(ellipse at 52% 72%, rgba(255, 138, 61, .026), transparent min(46rem, 63vw)),
      linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(251, 235, 221, .08) 48%, rgba(255, 255, 255, 0) 78%);
  }

  body:not(.secondary-body) .funding-coverage-shell {
    background:
      radial-gradient(ellipse at 8% 4%, rgba(255, 194, 77, .15), transparent min(26rem, 35.5vw)),
      radial-gradient(ellipse at 88% 94%, rgba(255, 138, 61, .08), transparent min(34rem, 46vw)),
      linear-gradient(135deg, rgba(255, 251, 247, .92), rgba(251, 235, 221, .42));
  }

  body:not(.secondary-body) .forum-stage {
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 194, 77, .18), transparent min(30rem, 41vw)),
      linear-gradient(145deg, rgba(255, 253, 249, .86), rgba(251, 235, 221, .72));
  }

  .anniversary-expand-copy .button {
    margin-top: clamp(20px, 2.5vw, 28px);
    max-width: 100%;
    min-height: 46px;
    padding: 12px clamp(18px, 2vw, 22px);
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }

  .section-heading .char-title::after {
    width: clamp(8px, .32em, 12px);
    height: clamp(8px, .32em, 12px);
  }

  /* Keep a practical touch target; the arrow glyph/progress ring is unchanged. */
  :is(.forum-nav-button, .funding-case-controls button, .ann-round) {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  :is(.ecosystem-more-link, .impact-honor-trigger, main .nav-action) { min-height: 44px; }
}

@media (max-width: 980px) {
  .mobile-nav { background: var(--navigation-paper); }
  .mobile-nav-group { padding-block: 10px; gap: 4px; }
  .mobile-nav a:not([data-nav-contact-link]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }
  html:root body .mobile-nav .mobile-nav-primary {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4;
  }
  .mobile-nav-sub { gap: 0 20px; padding-right: 0; }
  .mobile-nav-subgroup { flex: 1 1 150px; min-width: 0; }
  .mobile-nav-subgroup h3 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
  .mobile-nav-subgroup-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .mobile-nav-sub .nav-contact { flex: 0 0 100%; }
}

@media (max-width: 760px) {
  /* One public-phone scale; tablet and desktop retain their existing tokens.
     Keep browser zoom available, but avoid mobile text inflation changing
     card geometry after a real-device font has been substituted. */
  html:root {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --compact-display: clamp(1.625rem, calc(1.5rem + .7vw), 1.75rem);
    --compact-section: clamp(1.25rem, calc(1.125rem + .65vw), 1.375rem);
    --compact-subtitle: 1.125rem;
    --compact-card: 1.0625rem;
    --compact-body: .875rem;
    --compact-reading: 1rem;
    --compact-heading-gap: 16px;
  }
  html:root body main :is(h1, h2, h3, .char-title, .char-title span) {
    font-weight: 600 !important;
    font-variation-settings: normal;
  }
  html:root body main h2 { font-size: var(--compact-section) !important; }
  html:root body main h3 { font-size: var(--compact-card) !important; }
  html:root body main :is(.char-title span, h1 a, h2 a, h3 a) {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
  html:root body main :is(.cases-section-heading h2, .cooperation-form-heading,
    .about-structure > .about-shell > h2) { font-size: var(--compact-section) !important; }
  html:root body main :is(.application-title, .application-panel h2,
    .cooperation-contact h3, .about-structure-card h3, .about-office-card h3,
    .funding-faq-item h3) { font-size: var(--compact-card) !important; }
  html:root body main :is(.about-origin p, .about-history .milestone-a__track p,
    .about-structure-summary, .about-structure-business, .application-description) {
    font-size: var(--compact-body) !important;
    line-height: 1.75 !important;
  }
  html:root body main :is(.button, .nav-action, .funding-button) {
    font-size: .875rem !important;
    min-height: 44px;
  }

  /* Phones read the five latest stories in document flow, not a swipe rail. */
  .insights-sticky .news-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    padding: 0;
    overflow: visible !important;
    transform: none !important;
    touch-action: auto;
  }
  .insights-more .insights-more-desktop { display: none; }
  .insights-more .insights-more-phone { display: inline; }
  .insights-more .button {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 22px;
    line-height: 1.5;
  }
  .news-card {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
    display: grid;
    grid-template-columns: clamp(80px, 25vw, 110px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
  }
  .news-card .news-media { grid-column: 1; grid-row: 1; aspect-ratio: 1; min-height: 0; height: auto; padding: 0; }
  .news-card .news-media span { display: none; }
  .news-card .news-card-copy { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; padding: 0; }
  html:root body main :is(.news-card h3, .insights-featured-lead-overlay h3) {
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }

  :is(.button, .funding-button, main .nav-action) {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Long article titles are editorial headings, not full-screen hero slogans. */
  html:root body main .insight-article-header h1 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }

  html:root body main .funding-management-copy h2 {
    white-space: normal;
  }

  /* Keep inputs readable in both languages; small headings must not mean tiny
     controls or automatic zoom when a mobile browser focuses a text field. */
  html:root body :is(.application-form, .cooperation-form, .funding-application-form)
    :is(input:not([type="hidden"]), textarea, select, .custom-select-trigger) {
    font-size: 16px !important;
    min-height: 44px;
  }
  html:root body main input[type="search"] { font-size: 16px !important; }

  html:root body main :is(.insight-content-heading, .insight-article-body h2,
    .insight-article-body h3, .privacy-section h2) {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
  }

  /* News rows grow with the complete title + metadata, never with a fixed
     cover height. All list variants use the same rhythm and role sizes. */
  :is(.insights-aggregation-results, .insights-featured-cards,
    .insights-overview-grid--latest, .insights-overview-grid--forum) {
    grid-auto-rows: auto;
    align-items: start;
    row-gap: 28px;
  }
  :is(.insights-aggregation-card, .insights-featured-card,
    .insights-aggregation-card-copy, .insights-featured-card-copy,
    .insights-featured-primary, .insights-featured-lead-overlay) {
    height: auto;
    max-height: none;
    min-width: 0;
  }
  :is(.insights-aggregation-card-copy, .insights-featured-card-copy) {
    min-height: 0;
    flex: none;
  }
  html:root body main :is(.insights-aggregation-card h2, .insights-featured-card h3,
    .insights-featured-lead-overlay h3) {
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-wrap: wrap;
    -webkit-line-clamp: unset;
  }
  :is(.insights-aggregation-card, .insights-featured-card, .insights-featured-lead-meta) time {
    flex-shrink: 0;
    font-size: .75rem;
    line-height: 1.5;
  }
  :is(.insights-aggregation-card, .insights-featured-card, .insights-featured-lead-meta) .insights-chip-row {
    flex-shrink: 0;
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .anniversary-expand-card { padding: clamp(20px, 4vw, 24px); }
}

/* Preserve the two-column metric layout and 32px numeral floor on small phones.
   Longer Chinese units must fit too, including after an English/HK round trip. */
@media (max-width: 360px) {
  html:not([lang="en"]) .metric strong { gap: 6px !important; }
  html:not([lang="en"]) .metric strong em { font-size: clamp(16px, 5vw, 18px) !important; }
}