/* Site-wide role scale. Layout, margins, colours, hero art and numeric displays
   stay with their components. Screen-only rules preserve article print styles. */
:root,:host{
  --type-family:Manrope,system-ui,sans-serif;
  --type-section:clamp(32px,3.1vw,48px);
  --type-card:clamp(23px,1.8vw,26px);
  --type-subheading:20px;
  --type-body:16px;
  --type-lead:clamp(18px,1.4vw,22px);
  --type-reading:18px;
  --type-caption:13px;
  --type-label:12px;
  --type-body-leading:1.5;
  --type-body-tracking:-.025em;
  --type-heading-tracking:-.05em;
  --type-story-title:clamp(27px,2.25vw,33px);
  --type-story-body:15px;
  --type-compact:13px;
}
@media screen{
  body{font-family:var(--type-family);font-size:var(--type-body)}
  /* Timeline labels and story feature tiles are visualisation typography;
     let their original component styles (including breakpoints) own them. */
  body :is(h2,.onboarding-heading h2,.portfolio-heading h2):not(:where(.day-plan *)){font-size:var(--type-section);line-height:1.1;font-weight:600;letter-spacing:var(--type-heading-tracking)}
  body :is(h3,.onboarding-copy h3,.project-copy h3,.principle-card h3,.tab-panel h3):not(:where(.day-plan *,#tour-plaques *)){font-size:var(--type-card);line-height:1.2;font-weight:600;letter-spacing:var(--type-heading-tracking)}
  body :is(.industry-card h3,.benefit h2,.direction h3,.story-card h3){font-size:var(--type-card);line-height:1.2;font-weight:600;letter-spacing:var(--type-heading-tracking)}
  body :is(.support-pill h2,.audience-grid h3,.how-support h3){font-size:var(--type-subheading);line-height:1.2}
  body :is(.industry-card p,.onboarding-copy p:not(.onboarding-days),.project-description,.chart-caption p,
    .principle-card p,.tab-panel p,.why-copy,.section-heading>p,.partner-copy>p:not(.eyebrow),.closing-copy>p,
    .steps p,.benefit-card p,.cabinet-benefits p,.how-support p,.faq p,.faq-content,
    .tier-detail p,.benefits-intro p,.application-copy>p:not(.eyebrow),.application-note p,.form-heading p,
    .cabinet-update p,.after-launch-card p,.node-copy p,.partner-options-heading p,
    .featured-story p,.direction p,.story-card p,.comparison-cards p,.article-steps p,.forecast-link p,.example p){
    font-size:var(--type-body);font-weight:400;line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking);
  }
  body #partnership .tier-detail p{font-size:var(--type-body);line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking)}
  body :is(.hero-description,.hero-positioning,.hero-deck,.hub-hero>p,.onboarding-heading p){
    font-size:var(--type-lead);font-weight:400;line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking);
  }
  body .article{font-size:var(--type-reading);line-height:1.75;letter-spacing:-.015em}
  body .article-section h2{font-size:clamp(27px,2.5vw,34px);line-height:1.2}
  body :is(.article .lead,.article blockquote p){font-size:var(--type-card);line-height:1.5;letter-spacing:var(--type-body-tracking)}
  body :is(.eyebrow,.section-num,.section-label){font-size:var(--type-label);line-height:1.5;font-weight:600;letter-spacing:.1em}
  body :is(.breadcrumbs,.meta,.art-tag,.hero-art figcaption,.system-visual figcaption,.example>small,.stat>small,.article .editorial-note,.forecast-preview>span){
    font-size:var(--type-caption);line-height:1.5;letter-spacing:0;
  }
  /* Existing compact story roles remain compact: these cards share a viewport
     with the 3D scene, rather than a full-width reading column. */
  #tour-plaques :is(.tour-intro,.tour-solar,.tour-bess,.tour-facility,.tour-summary) h2{
    font-size:var(--type-story-title);font-weight:600;line-height:1.1;letter-spacing:var(--type-heading-tracking);
  }
  #tour-plaques :is(.tour-intro .intro-copy,.solar-copy,.bess-copy,.facility-copy,.summary-copy) p{
    font-size:var(--type-story-body);line-height:1.5;letter-spacing:var(--type-body-tracking);
  }
  /* Let newly wrapped descriptions grow; do not clip copy to a fixed height. */
  body :is(.project-copy,.onboarding-copy,.chart-caption>div,.principle-card){min-width:0}
}
@media screen and (max-width:1100px){:root,:host{--type-story-body:14px;--type-caption:12px}}
@media screen and (min-width:761px) and (max-height:780px){#tour-plaques{--type-story-title:28px;--type-story-body:14px;--type-caption:12px}}
@media screen and (max-width:760px){:root,:host{--type-reading:16px;--type-lead:18px;--type-story-title:25px;--type-story-body:13px}}