/* =========================================================
   Zhiyan Showcase v29 — strict light/dark typography parity
   Same component = same size, width, line-height and spacing.
   Themes may only change color/surface treatment.
   ========================================================= */
:root{
  --v29-hero-size:clamp(52px,4.65vw,76px);
  --v29-section-size:clamp(37px,3.0vw,50px);
  --v29-compact-size:clamp(34px,2.6vw,44px);
  --v29-panel-size:clamp(25px,1.85vw,33px);
  --v29-body-size:15px;
  --v29-body-lg:16px;
  --v29-ui-title:13px;
  --v29-ui-copy:10px;
  --v29-label:10px;
}

/* --- 1. Display typography: exact parity across light/dark --- */
html[data-theme="light"] .hero h1,
html[data-theme="dark"] .hero h1{
  font-size:var(--v29-hero-size)!important;
  line-height:1.045!important;
  letter-spacing:-.052em!important;
  max-width:720px!important;
  font-weight:750!important;
}
html[data-theme="light"] .continuity-title-block h2,
html[data-theme="dark"] .continuity-title-block h2,
html[data-theme="light"] .organization-v15-head h2,
html[data-theme="dark"] .organization-v15-head h2,
html[data-theme="light"] .instrument-v14-title h2,
html[data-theme="dark"] .instrument-v14-title h2{
  font-size:var(--v29-section-size)!important;
  line-height:1.07!important;
  letter-spacing:-.05em!important;
  font-weight:740!important;
}
html[data-theme="light"] .contact-copy h2,
html[data-theme="dark"] .contact-copy h2,
html[data-theme="light"] .final-cta h2,
html[data-theme="dark"] .final-cta h2{
  font-size:var(--v29-compact-size)!important;
  line-height:1.08!important;
  letter-spacing:-.048em!important;
  font-weight:740!important;
}

/* Same line lengths in both themes. */
html[data-theme="light"] .continuity-title-block h2,
html[data-theme="dark"] .continuity-title-block h2{max-width:720px!important}
html[data-theme="light"] .organization-v15-head h2,
html[data-theme="dark"] .organization-v15-head h2{max-width:700px!important}
html[data-theme="light"] .instrument-v14-title h2,
html[data-theme="dark"] .instrument-v14-title h2{max-width:720px!important}
html[data-theme="light"] .contact-copy h2,
html[data-theme="dark"] .contact-copy h2{max-width:560px!important}
html[data-theme="light"] .final-cta h2,
html[data-theme="dark"] .final-cta h2{max-width:760px!important}

/* --- 2. Body copy parity --- */
html[data-theme="light"] .hero-copy>p,
html[data-theme="dark"] .hero-copy>p,
html[data-theme="light"] .continuity-v10-copy>p,
html[data-theme="dark"] .continuity-v10-copy>p,
html[data-theme="light"] .organization-v15-head>p,
html[data-theme="dark"] .organization-v15-head>p,
html[data-theme="light"] .instrument-v14-title>p,
html[data-theme="dark"] .instrument-v14-title>p,
html[data-theme="light"] .contact-copy>p,
html[data-theme="dark"] .contact-copy>p,
html[data-theme="light"] .final-cta p,
html[data-theme="dark"] .final-cta p{
  font-size:var(--v29-body-lg)!important;
  line-height:1.88!important;
  letter-spacing:-.008em!important;
}
html[data-theme="light"] .continuity-v10-copy>p,
html[data-theme="dark"] .continuity-v10-copy>p,
html[data-theme="light"] .organization-v15-head>p,
html[data-theme="dark"] .organization-v15-head>p,
html[data-theme="light"] .instrument-v14-title>p,
html[data-theme="dark"] .instrument-v14-title>p{max-width:570px!important}

/* --- 3. Institution card typography parity --- */
html[data-theme="light"] .institution-pane-copy h3,
html[data-theme="dark"] .institution-pane-copy h3{
  font-size:var(--v29-panel-size)!important;
  line-height:1.12!important;
  letter-spacing:-.04em!important;
  font-weight:730!important;
  max-width:490px!important;
  margin:13px 0 17px!important;
}
html[data-theme="light"] .institution-pane.hdu .institution-pane-copy h3,
html[data-theme="dark"] .institution-pane.hdu .institution-pane-copy h3{max-width:500px!important}
html[data-theme="light"] .institution-pane-copy p,
html[data-theme="dark"] .institution-pane-copy p{
  font-size:15px!important;
  line-height:1.88!important;
  max-width:520px!important;
}
html[data-theme="light"] .institution-pane-copy>small,
html[data-theme="dark"] .institution-pane-copy>small{
  font-size:10px!important;
  line-height:1.55!important;
  letter-spacing:.115em!important;
}
html[data-theme="light"] .institution-inline-meta span,
html[data-theme="dark"] .institution-inline-meta span{
  font-size:11px!important;
  line-height:1!important;
}
html[data-theme="light"] .institution-pane-head button,
html[data-theme="dark"] .institution-pane-head button{font-size:11px!important}
html[data-theme="light"] .engineering-layer b,
html[data-theme="dark"] .engineering-layer b{font-size:12px!important}
html[data-theme="light"] .engineering-layer small,
html[data-theme="dark"] .engineering-layer small,
html[data-theme="light"] .engineering-layer span,
html[data-theme="dark"] .engineering-layer span{font-size:10px!important}
html[data-theme="light"] .academic-label,
html[data-theme="dark"] .academic-label{font-size:11px!important}

/* --- 4. Continuity / tool UI parity --- */
html[data-theme="light"] .context-scenarios button b,
html[data-theme="dark"] .context-scenarios button b,
html[data-theme="light"] .instrument-tabs-v11 button b,
html[data-theme="dark"] .instrument-tabs-v11 button b,
html[data-theme="light"] .contact-channels b,
html[data-theme="dark"] .contact-channels b{
  font-size:var(--v29-ui-title)!important;
  font-weight:700!important;
}
html[data-theme="light"] .context-scenarios button small,
html[data-theme="dark"] .context-scenarios button small,
html[data-theme="light"] .instrument-tabs-v11 button small,
html[data-theme="dark"] .instrument-tabs-v11 button small,
html[data-theme="light"] .contact-channels small,
html[data-theme="dark"] .contact-channels small{
  font-size:var(--v29-ui-copy)!important;
  line-height:1.55!important;
}
html[data-theme="light"] .workbench-controls-v11 button,
html[data-theme="dark"] .workbench-controls-v11 button{font-size:10px!important}
html[data-theme="light"] .instrument-workbench-footer-v11,
html[data-theme="dark"] .instrument-workbench-footer-v11{font-size:10px!important}
html[data-theme="light"] .eyebrow,
html[data-theme="dark"] .eyebrow{font-size:var(--v29-label)!important;letter-spacing:.16em!important}

/* --- 5. Header/footer parity --- */
html[data-theme="light"] .site-header .desktop-nav a,
html[data-theme="dark"] .site-header .desktop-nav a,
html[data-theme="light"] .header-actions .text-link,
html[data-theme="dark"] .header-actions .text-link{font-size:13px!important;font-weight:640!important}
html[data-theme="light"] .brand-text strong,
html[data-theme="dark"] .brand-text strong{font-size:17px!important;font-weight:740!important}
html[data-theme="light"] .brand-text small,
html[data-theme="dark"] .brand-text small{font-size:8px!important;letter-spacing:.16em!important}
html[data-theme="light"] .header-actions .button,
html[data-theme="dark"] .header-actions .button{font-size:12px!important}
html[data-theme="light"] .footer-brand-block p,
html[data-theme="dark"] .footer-brand-block p{font-size:12px!important}
html[data-theme="light"] .footer-links a,
html[data-theme="dark"] .footer-links a{font-size:11px!important}
html[data-theme="light"] .footer-links strong,
html[data-theme="dark"] .footer-links strong{font-size:9px!important}
html[data-theme="light"] .footer-bottom,
html[data-theme="dark"] .footer-bottom{font-size:9px!important}

/* --- 6. Shared section composition: same geometry in both themes --- */
.continuity-v9-head,
.organization-v15-head,
.instrument-v11-head{
  grid-template-columns:minmax(0,1fr) minmax(380px,.68fr)!important;
  gap:clamp(48px,4.8vw,78px)!important;
  align-items:start!important;
  margin-bottom:34px!important;
}
.organization-v15{padding-top:104px!important;padding-bottom:112px!important}
.institution-duet{min-height:620px!important}
.institution-pane{padding:32px 36px 36px!important}
.institution-pane-copy{margin-top:48px!important;max-width:550px!important}
.context-scenarios button{min-height:86px!important}
.instrument-tabs-v11 button{min-height:68px!important}
.contact-channels button{min-height:70px!important}

/* --- 7. Theme may change only color, never dimensions --- */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .continuity-title-block h2,
html[data-theme="light"] .organization-v15-head h2,
html[data-theme="light"] .instrument-v14-title h2,
html[data-theme="light"] .contact-copy h2,
html[data-theme="light"] .final-cta h2{color:#19223d!important}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .continuity-title-block h2,
html[data-theme="dark"] .organization-v15-head h2,
html[data-theme="dark"] .instrument-v14-title h2,
html[data-theme="dark"] .contact-copy h2,
html[data-theme="dark"] .final-cta h2{color:#dde6fb!important}
html[data-theme="light"] .hero h1 span,
html[data-theme="light"] .continuity-title-block h2 em,
html[data-theme="light"] .organization-v15-head h2 em,
html[data-theme="light"] .instrument-v14-title h2 em{color:#5f70e8!important}
html[data-theme="dark"] .hero h1 span,
html[data-theme="dark"] .continuity-title-block h2 em,
html[data-theme="dark"] .organization-v15-head h2 em,
html[data-theme="dark"] .instrument-v14-title h2 em{color:#99aaff!important}

/* --- 8. Responsive parity --- */
@media(max-width:1180px){
  .continuity-v9-head,.organization-v15-head,.instrument-v11-head{grid-template-columns:1fr!important;gap:18px!important}
  html[data-theme="light"] .continuity-v10-copy>p,
  html[data-theme="dark"] .continuity-v10-copy>p,
  html[data-theme="light"] .organization-v15-head>p,
  html[data-theme="dark"] .organization-v15-head>p,
  html[data-theme="light"] .instrument-v14-title>p,
  html[data-theme="dark"] .instrument-v14-title>p{max-width:760px!important}
}
@media(max-width:720px){
  :root{
    --v29-hero-size:clamp(40px,11vw,50px);
    --v29-section-size:clamp(31px,8.4vw,38px);
    --v29-compact-size:clamp(29px,7.8vw,36px);
    --v29-panel-size:clamp(24px,6.8vw,30px);
    --v29-body-lg:14px;
  }
  html[data-theme="light"] .hero h1,
  html[data-theme="dark"] .hero h1,
  html[data-theme="light"] .continuity-title-block h2,
  html[data-theme="dark"] .continuity-title-block h2,
  html[data-theme="light"] .organization-v15-head h2,
  html[data-theme="dark"] .organization-v15-head h2,
  html[data-theme="light"] .instrument-v14-title h2,
  html[data-theme="dark"] .instrument-v14-title h2{
    line-height:1.08!important;
    letter-spacing:-.045em!important;
  }
  .organization-v15{padding-top:82px!important;padding-bottom:88px!important}
  .institution-pane{padding:24px 22px 28px!important}
  .institution-pane-copy{margin-top:40px!important;max-width:none!important}
}