/* Eight shared roles. Layout and illustration scale belong in the component CSS. */
:root {
  --type-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --type-h1: 600 clamp(2.5rem, 7vw, 6.5rem)/1.05 var(--type-family);
  --type-h2: 600 clamp(2rem, 5.25vw, 4.5rem)/1.1 var(--type-family);
  --type-h3: 600 clamp(1.625rem, 3.2vw, 2.75rem)/1.15 var(--type-family);
  --type-h4: 600 clamp(1.25rem, 2vw, 1.75rem)/1.25 var(--type-family);
  --type-h5: 500 clamp(1.125rem, 1.6vw, 1.375rem)/1.4 var(--type-family);
  --type-h6: 500 clamp(.75rem, .96vw, .875rem)/1.45 var(--type-family);
  --type-body: 400 clamp(1rem, 1.2vw, 1.125rem)/1.6 var(--type-family);
  --type-button: 600 clamp(.875rem, 1.05vw, 1rem)/1.2 var(--type-family);
}

/* Compact viewports use the same roles, with a scale that fits the fixed stage. */
@media (max-height: 700px) {
  :root {
    --type-h1: 600 clamp(2.25rem, 6vw, 3.75rem)/1.05 var(--type-family);
    --type-h2: 600 clamp(1.875rem, 4vw, 2.75rem)/1.1 var(--type-family);
    --type-h3: 600 1.5rem/1.15 var(--type-family);
    --type-h4: 600 1.25rem/1.25 var(--type-family);
    --type-h5: 500 1.0625rem/1.4 var(--type-family);
    --type-h6: 500 .75rem/1.45 var(--type-family);
    --type-body: 400 .875rem/1.6 var(--type-family);
    --type-button: 600 .875rem/1.2 var(--type-family);
  }
}

/* Inline emphasis inherits its role; no browser-synthesized weights or small text. */
strong, b, small, i, em, input, textarea, select, option { font: inherit; letter-spacing: inherit; }

body, p, .type-body {
  font: var(--type-body);
  letter-spacing: 0;
}

h1, .type-h1,
.cinema-room-copy h2,
.cinema-finale-copy h2, .cinema-verbs, .word-ribbon-track, .closing-word,
.clock-face > span:first-child, .guest-panel::before {
  font: var(--type-h1);
  letter-spacing: -.035em;
}

h2, .type-h2 {
  font: var(--type-h2);
  letter-spacing: -.03em;
}

h3, .type-h3, .cinema-launch-copy h2, .cinema-door-copy h2, .cinema-pass-code, .floating-detail .code-numerals,
.clock-period {
  font: var(--type-h3);
  letter-spacing: -.025em;
}

h4, .type-h4, .cinema-feature h3,
.venue-index-list summary > span:nth-child(2), .cinema-booking-choice > strong,
.venue-index-plus {
  font: var(--type-h4);
  letter-spacing: -.02em;
}

h5, .type-h5, .hero-description, .faq-list summary, .cinema-bento h3,
.hero-ticket strong, .floating-detail strong,
.cinema-receipt strong, .cinema-workspace-ticket strong, .cinema-location strong,
.cinema-visit-row strong, .brand-browser-nav strong, .brand-browser-sticker,
.clock-code {
  font: var(--type-h5);
  letter-spacing: -.015em;
}

h6, .type-h6, .eyebrow, .cinema-eyebrow, small, .screen-note,
.stage-caption, .pair-label, .site-footer, .site-footer p, .contact-email,
.hero-ticket small, .floating-detail > span,
.clock-top, .clock-door-label, .clock-controls label, .clock-labels,
.cinema-header > span, .cinema-controls, .cinema-phone-drag > span,
.cinema-receipt > div > span, .cinema-workspace-ticket > span,
.cinema-network-label, .cinema-bento-note, .cinema-door-number,
.cinema-phone-back-note, .cinema-browser-top, .cinema-booking-choice > span,
.cinema-pass-top, .cinema-pass-labels, .cinema-board-top, .cinema-visit-row span,
.brand-stage-topline, .brand-stage-bottom, .brand-browser-toolbar,
.brand-browser-nav > span, .brand-browser-room > span, .brand-browser-footer,
.venue-index-number, .venue-index-answer > div,
.setup-runway-bottom > span, .guest-tour .tour-tabs button > span {
  font: var(--type-h6);
  letter-spacing: 0;
}

button, .button, .type-button, nav a, .text-link, .cinema-skip, .cinema-enter,
.cinema-photo-credit, .cinema-bento-link, .brand-stage-link, .brand-book-button,
.venue-index-answer > a, .venue-index-foot > a, .site-footer > a:not(.wordmark), .footer-contact > a {
  font: var(--type-button);
  letter-spacing: 0;
}