/*
  Responsive viewport refinement — Snippet Publisher v5
  Additive layer, loaded after existing site styles on every HTML document.
  Fluid type and content bounds avoid oversized hero text on large screens and
  undersized labels on narrow screens. No SEO or content modifications.
*/

:root {
  --viewport-safe-gutter: clamp(12px, 2.4vw, 36px);
  --viewport-reading-line: 72ch;
}

/* Permit flex/grid children to shrink, without clipping intentional carousels. */
:where(main, article, section, aside, .wrap, .container, .card, .global-footer-col,
  .mission-v3-shell, .mission-v3-card, .dashboard-container, .brochure-hero-copy) {
  min-inline-size: 0;
}

/* Content media, unlike decorative full-bleed imagery, retains natural aspect. */
:where(article, .article-body, .publication-detail-main, .site-long-brief,
  .mission-v3-detail, .research-story) :where(img, video, picture, iframe) {
  max-inline-size: 100%;
}
:where(article, .article-body, .publication-detail-main, .site-long-brief,
  .mission-v3-detail, .research-story) :where(img, video) {
  block-size: auto;
}
:where(article, .article-body, .publication-detail-main, .site-long-brief) :where(pre, table) {
  max-inline-size: 100%;
}
:where(article, .article-body, .publication-detail-main, .site-long-brief) pre {
  overflow-x: auto;
}

/* The mission hero was as large as 122px at 1920px, and ~50px at 320px.
   Keep the same typographic hierarchy but scale continuously between devices. */
body.mission-v3 .mission-v3-hero h1 {
  font-size: clamp(2.05rem, 5.2vw, 5.15rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  text-wrap: balance;
}
html[dir="rtl"] body.mission-v3 .mission-v3-hero h1 {
  letter-spacing: 0;
}
body.mission-v3 .mission-v3-hero h2 {
  font-size: clamp(1rem, 1.35vw, 1.35rem) !important;
  line-height: 1.5 !important;
}
body.mission-v3 .mission-v3-hero p {
  font-size: clamp(.9rem, 1.03vw, 1.08rem) !important;
  line-height: 1.65 !important;
}

/* Heritage has extra-large fixed hero headings; use readable fluid typography.
   Retain the dedicated mobile backgrounds, overlays and RTL layout. */
body.site-heritage .brochure-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 5rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
body.site-heritage .page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 4.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
body.site-heritage .site-page-hero h1 {
  font-size: clamp(2.15rem, 4.8vw, 4.45rem) !important;
  line-height: 1.09 !important;
  text-wrap: balance;
}
html[dir="rtl"] body.site-heritage :is(.brochure-hero h1, .page-hero h1, .site-page-hero h1) {
  letter-spacing: 0 !important;
}
body.site-heritage .brochure-hero-copy {
  max-inline-size: min(780px, 100%);
}
body.site-heritage .brochure-hero-copy p {
  font-size: clamp(.94rem, 1.16vw, 1.08rem) !important;
  line-height: 1.62 !important;
}
body.site-heritage .page-hero p {
  font-size: clamp(.875rem, 1.1vw, 1.03rem) !important;
  line-height: 1.68 !important;
}
body.site-heritage .brochure-eyebrow {
  font-size: clamp(.625rem, .8vw, .75rem) !important;
}
body.site-heritage :is(.dest-card p, .research-story p) {
  font-size: clamp(.82rem, .98vw, 1rem) !important;
}

/* Avoid unusably small metric labels on phone-sized screens. */
@media (max-width: 720px) {
  body.site-heritage .brochure-stats > div {
    min-inline-size: 0;
    block-size: auto;
  }
  body.site-heritage .brochure-stats small {
    font-size: clamp(.56rem, 1.8vw, .69rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    letter-spacing: 0 !important;
  }
  body.site-heritage .brochure-hero-copy p {
    max-inline-size: 100%;
  }
  body.site-heritage :is(.brochure-gold-btn, .brochure-ghost-btn) {
    font-size: max(.75rem, 12px);
    white-space: normal;
    text-align: center;
  }
}

/* Very narrow devices: prevent oversized paddings from squeezing content. */
@media (max-width: 380px) {
  body.mission-v3 .mission-v3-hero-inner {
    padding-block-start: clamp(32px, 7svh, 53px);
  }
  body.site-heritage .page-hero,
  body.site-heritage .section {
    padding-inline: var(--viewport-safe-gutter) !important;
  }
  body.site-heritage .brochure-hero h1 {
    letter-spacing: -.015em !important;
  }
  body.site-heritage .brochure-stats > div {
    padding-inline: 4px;
  }
}

/* Short landscape windows should not inherit a desktop hero's huge empty floor. */
@media (max-height: 600px) and (min-width: 650px) {
  body.site-heritage .brochure-hero,
  body.site-heritage .hero,
  body.mission-v3 .mission-v3-hero {
    min-height: min(650px, 100svh);
  }
  body.site-heritage .brochure-hero-copy {
    padding-block-start: clamp(52px, 10svh, 90px);
    padding-block-end: clamp(52px, 10svh, 95px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}