/* Shared editorial type scale. Device-size changes happen here, not per scene.
   App UI mockups, logos, store badges and photo captions keep their own roles. */
:root {
  --type-display: clamp(28px, 3.83vw, 64px);
  --type-section: clamp(24px, 2.4vw, 36px);
  --type-body: clamp(14px, 1.1vw, 18px);
  --type-label: clamp(10px, .8vw, 12px);
  --type-caption: clamp(11px, .85vw, 13px);
  --type-display-leading: 1.3;
  --type-body-leading: 1.9;
}

#main :is(.opening h1,
.story-copy h2,
.delivery-copy h2,
.world-bridge--earth .world-bridge__copy h2,
.world-stage--real-skies .world-chapter__copy h3,
.ranking-intro h2,
.final-lockup h2) {
  font-family: var(--font-story);
  font-size: var(--type-display);
  font-weight: 500;
  font-synthesis: none;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-height: var(--type-display-leading);
  letter-spacing: .015em;
}

.brand-context h2 { font-size: var(--type-section); line-height: 1.5; }
.brand-faq h3 { font-size: var(--type-section); line-height: 1.5; }

.opening__copy > p:not(.scene-label),
.delivery-copy--key > p,
.world-bridge--earth .world-bridge__lead,
.ranking-intro > p:not(.scene-label),
.final-lockup__message,
.brand-context__body > p,
.brand-faq p {
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
}

#main :is(.scene-label, .brand-context__eyebrow) {
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .22em;
}

.opening__identity {
  font-size: var(--type-caption);
  line-height: 1.7;
  letter-spacing: .075em;
}

@media (max-width: 767px) {
  :root {
    --type-display: clamp(25px, 7vw, 40px);
    --type-section: clamp(24px, 6.5vw, 30px);
    --type-body: 14px;
    --type-label: 10px;
    --type-caption: 11px;
  }
}

@media (max-width: 767px) and (max-height: 520px) {
  :root { --type-display: 25px; }
}