/* Homepage reading scale. Keep shared navigation and other pages unchanged. */
body[data-page=home]{--body-copy-size:17px;--body-copy-line-height:1.8;--feature-heading-gap:24px;--feature-heading-gap-small:20px}
body[data-page=home] .hero h1{font-size:clamp(44px,4.4vw,56px);line-height:1.18;letter-spacing:-.025em;max-width:700px;margin-block:20px 28px}
body[data-page=home] .hero-description{font-size:18px;line-height:1.8;margin-bottom:32px}
body[data-page=home] .section-heading .section-title{font-size:clamp(30px,3vw,40px);line-height:1.3;letter-spacing:-.025em}
body[data-page=home] .section-heading p{font-size:17px;line-height:1.8;max-width:640px;margin-top:16px}
body[data-page=home] .feature-copy h3{font-size:clamp(24px,2.2vw,28px);line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
body[data-page=home] .feature-copy .caption{font-size:13px;line-height:1.6;margin-bottom:12px}
body[data-page=home] .feature-row+.feature-row{margin-top:72px}
body[data-page=home] .research{padding-block:72px 96px}
body[data-page=home] .evaluation-card .evaluation-description{font-size:16px;line-height:1.75;min-height:112px}
body[data-page=home] .evaluation-card--featured .evaluation-description{font-size:18px;min-height:0}
body[data-page=home] .evaluation-score__label,body[data-page=home] .evaluation-card .card-link{font-size:15px;line-height:1.65}
body[data-page=home] .closing-eyebrow{font-size:18px;line-height:1.6;margin-bottom:18px}
body[data-page=home] .closing h2{font-size:clamp(32px,3.4vw,44px);line-height:1.35;letter-spacing:-.025em;margin-bottom:24px;text-wrap:balance}
body[data-page=home] .closing-description{font-size:18px;line-height:1.8;max-width:680px;margin-bottom:36px}
@media(max-width:860px){body[data-page=home] .evaluation-card .evaluation-description{min-height:0}}
@media(max-width:760px){
 body[data-page=home]{--body-copy-size:16px;--body-copy-line-height:1.8}
 body[data-page=home] .hero.hero-frame h1{font-size:clamp(36px,8.5vw,44px);line-height:1.22;margin-block:18px 24px;max-width:100%}
 body[data-page=home] .hero-description{font-size:17px;line-height:1.8}
 body[data-page=home] .section-heading .section-title{font-size:30px;line-height:1.35}
 body[data-page=home] .feature-copy h3{font-size:24px;line-height:1.45}
 body[data-page=home] .research{padding-block:60px 72px}
 body[data-page=home] .closing-description{font-size:17px;line-height:1.8}
 body[data-page=home] .evaluation-card--featured .evaluation-description{font-size:17px}
}

/* Keep the prominent rank numeral while spelling the English ranking as No.1. */
body[data-page=home] .rank-prefix{font:400 16px/1.25 var(--font-body);letter-spacing:0;margin-right:1px}
html:not([lang=en]) body[data-page=home] .rank-prefix{display:none}
body[data-page=home] .rank-copy{max-width:none;flex:1}

/* The scene releases the copy near the end of its orbit. The CSS delay also
   provides a standalone entrance when WebGL is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy-intro { --copy-start: 1.8s; }
  [data-copy-intro="waiting"] .hero-copy-intro > :is(.caption2,h1,.hero-description,.button-primary) { opacity: 0; animation: none; }
  [data-copy-intro="playing"] .hero-copy-intro { --copy-start: 0s; }
  .hero-copy-intro > .caption2 {
    --travel: 22px;
    animation: hero-copy-settle .65s ease-out var(--copy-start) backwards;
  }
  .hero-copy-intro > h1 {
    animation: hero-title-unveil 1s cubic-bezier(.18,.72,.24,1) calc(var(--copy-start) + .10s) backwards;
  }
  .hero-copy-intro > .hero-description {
    --travel: 32px;
    animation: hero-copy-settle .8s ease-out calc(var(--copy-start) + .30s) backwards;
  }
  .hero-copy-intro > .button-primary {
    --travel: 24px;
    animation: hero-copy-settle .7s ease-out calc(var(--copy-start) + .46s) backwards;
  }
  [data-hero-frame] .hero-copy-intro > .button-primary:focus-visible { opacity: 1; animation: none; }
}
@keyframes hero-title-unveil {
  from { opacity: 0; transform: translateY(.85em); clip-path: inset(0 0 100%); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-.1em); }
}
@keyframes hero-copy-settle {
  from { opacity: 0; transform: translateY(var(--travel)); }
  to { opacity: 1; transform: translateY(0); }
}