/* ACKER presentation: native scroll snap, timed scene fades, first-visit reveals.
   Visual composition and brand typography are preserved. */

/* Clear entry points without adding a conventional menu to the five-scene story.
   The ordinary research anchor also works when JavaScript is unavailable. */
.hero-layout{flex-direction:column;gap:clamp(24px,4svh,44px)}
.hero-navigation{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.3svh,12px)
}
.hero-navigation a{
  text-decoration:none;text-align:center;
  transition:background-color .18s ease,color .18s ease
}
.hero-scroll-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 14px;
  color:var(--white);text-decoration:underline;text-underline-offset:6px;
  font-size:var(--acker-type-body);font-weight:600;line-height:1.3;letter-spacing:-.025em
}
.hero-scroll-link:hover,.hero-scroll-link:focus-visible{color:var(--accent)}
.scroll-mobile-label{display:none}
@media(max-width:740px){
  .scroll-desktop-label{display:none}
  .scroll-mobile-label{display:inline}
}
@media(max-height:620px){
  .hero-layout{gap:clamp(10px,2svh,18px)}
  .hero-navigation{gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .hero-navigation a{transition:none}
}


/* Before the first scroll-position-aware render, suppress the native
   hero. The tiny synchronous preflight runs only with JavaScript enabled,
   while the non-JS document fallback remains visible. */
html.story-awaiting-first-frame .home-page .hero{visibility:hidden}

/* Stable native-document fallback when the scroll story has not initialized. */
.story-runway,.story-stage{display:contents}
.story-scroll-spacer,.story-scenes,.story-snap-points{display:none}

/* Keep desktop runway and mobile spacer travel identical. Four native snap
   stops align with the hero and the three fully readable story scenes. */
html.has-scroll-story{scroll-snap-type:y mandatory}
html.has-scroll-story .home-page{display:block;min-height:0;width:100%;overflow-x:clip}
html.has-scroll-story .story-runway{display:block;position:relative;height:360svh}
html.has-scroll-story .story-snap-points{
  display:block;position:absolute;inset:0;pointer-events:none;opacity:0
}
html.has-scroll-story .story-snap-point{
  position:absolute;left:0;width:1px;height:1px;
  scroll-snap-align:start;scroll-snap-stop:always
}
/* Stops correspond to the hero, combined research/commercialization, pediatric
   approvals, and ACKER finale. The physical travel is 260svh on both devices. */
html.has-scroll-story .story-snap-point:nth-child(1){top:0}
html.has-scroll-story .story-snap-point:nth-child(2){top:72.8svh}
html.has-scroll-story .story-snap-point:nth-child(3){top:166.4svh}
html.has-scroll-story .story-snap-point:nth-child(4){top:260svh}
html.has-scroll-story .story-stage{
  display:grid;
  grid-template-rows:120px minmax(0,1fr) auto;
  position:sticky;top:0;height:100svh;min-height:400px;
  overflow:clip;isolation:isolate;background:var(--navy);
}
html.has-scroll-story .story-stage>main{min-width:0;min-height:0}
html.has-scroll-story .story-stage>.site-header{
  position:relative;z-index:8;opacity:1!important;filter:none!important;transform:none!important
}
html.has-scroll-story .story-stage>.site-footer{
  position:relative;z-index:7;opacity:1!important;filter:none!important;transform:none!important
}
html.has-scroll-story .story-stage .footer-policy-links,
html.has-scroll-story .story-stage .footer-copyright{
  opacity:var(--story-legal-opacity,0);
  visibility:var(--story-legal-visibility,hidden)
}

/* Shared page gutters, content rhythm and body-copy measure. */
html.has-scroll-story .story-scenes{
  /* Match the hero .wrap: 40px gutters until its 1260px maximum width. */
  --story-gutter:max(40px,calc((100vw - 1260px)/2));
  --story-content-max:1120px;
  --story-top:120px;
  --story-bottom:88px;
  --story-paragraph-gap:clamp(var(--space-4),2.3svh,var(--space-6));
  --story-ink-muted:rgba(248,251,253,.83);
  --story-caption-gap:clamp(var(--space-2),1svh,var(--space-3));
  --story-source-gap:clamp(var(--space-3),1.4svh,var(--space-4));
  position:absolute;inset:0;z-index:2;display:block;pointer-events:none
}
@media(min-width:961px){
  html.has-scroll-story .story-stage{
    grid-template-rows:var(--desktop-header-height) minmax(0,1fr) auto
  }
  html.has-scroll-story .story-scenes{--story-top:var(--desktop-header-height)}
}
.story-scene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--story-top) var(--story-gutter) var(--story-bottom);
  opacity:0;visibility:hidden
}
/* The browser determines the active snap stop. The scene change is a
   fixed-duration editorial fade, independent of scroll speed or momentum.
   Outgoing text fades away before the new headline becomes visible. */
html.has-scroll-story .story-stage .hero{opacity:0;visibility:hidden}
html.has-scroll-story .story-stage .hero.story-visible,
html.has-scroll-story .story-scene.story-visible{opacity:1;visibility:visible}
html.story-animations-ready .story-stage .hero,
html.story-animations-ready .story-scene{
  transition:opacity 170ms ease,visibility 0s linear 170ms
}
html.story-animations-ready .story-stage .hero.story-visible,
html.story-animations-ready .story-scene.story-visible{
  transition:opacity 340ms cubic-bezier(.22,.7,.26,1) 150ms,visibility 0s
}
/* A fresh intentional push can complete the current fade sooner;
   the input still cannot queue a jump past an unread slide. */
html.story-animations-ready.story-fast-transition .story-stage .hero.story-visible,
html.story-animations-ready.story-fast-transition .story-scene.story-visible{
  transition-duration:160ms;
  transition-delay:0ms
}
html.story-animations-ready .story-stage .footer-policy-links,
html.story-animations-ready .story-stage .footer-copyright{
  transition:opacity 330ms ease
}
/* Only the first forward visit animates the photo and illustration. */
@keyframes acker-research-arrival{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.story-research-first .story-research-photo{
  animation:acker-research-arrival 700ms ease-out 80ms both
}
.story-research-first .story-pair-research .story-pair-stat{
  animation:acker-research-arrival 720ms ease-out 160ms both
}
.story-scene h2,.story-scene p,.story-scene figure{margin:0}
.story-stat-copy{width:100%;max-width:1040px;min-width:0}
.story-headline{
  font-size:clamp(68px,9.2vw,138px);
  font-weight:600;line-height:1.035;letter-spacing:-.07em;
  white-space:nowrap
}
.story-headline em{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-style:italic;
  font-size:.72em;letter-spacing:-.025em
}
.story-scene .story-copy{
  margin-top:var(--story-paragraph-gap);
  max-width:720px;
  color:var(--story-ink-muted);
  font-size:clamp(19px,1.65vw,24px);
  font-weight:400;line-height:1.47;letter-spacing:-.022em;
  text-wrap:balance
}

/* The pediatric headline uses the same centered content measure as the hero. */
.story-race .story-stat-copy{max-width:var(--story-content-max);text-align:center}
.story-race .story-copy{margin-inline:auto;max-width:none;font-size:clamp(16px,1.42vw,21px);line-height:1.4;white-space:nowrap;text-wrap:nowrap}
/* A single editorial line. "decade" is the only emphasized italic. */
.story-race .story-headline{
  font-size:clamp(52px,7vw,100px);
  line-height:1.07;letter-spacing:-.064em;
}
.story-race .story-headline em{font-size:1.02em}
.story-race .story-stat-copy .story-race-intro{
  margin:0 auto var(--space-3);
  font-size:clamp(20px,1.6vw,24px);
  line-height:1.4;white-space:normal;text-wrap:balance
}

/* Research and commercialization now share one balanced two-column scene.
   See the centralized .story-combined layout and its responsive adaptations. */
/* Close the story with a single statement and the persistent navigation above. */
.story-ending-copy{
  width:100%;max-width:1120px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  text-align:center
}
.story-ending-headline{
  max-width:950px;margin:0;
  font-size:clamp(56px,7vw,106px);
  font-weight:600;line-height:1.12;letter-spacing:-.052em;
  text-wrap:balance;color:var(--white)
}
.story-ending-headline span{display:block}
.story-ending-headline em{
  display:block;font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-style:italic;font-size:1.08em;
  line-height:1.05;letter-spacing:-.04em
}

/* The server-rendered masked footer must not paint before email-reveal.js
   restores an already-verified contact. The head preflight sets the story
   class before first paint; a DOMContentLoaded fallback reveals the masked
   state if the contact script never starts. No-JS remains readable. */
html.has-scroll-story:not(.contact-state-ready) .site-footer .footer-email{
  visibility:hidden
}

/* Preserve the fixed 100svh mobile stage and the shared 260svh story timeline. */


/* On short phones protect the header/footer without making the typography
   disproportionately small or silently hiding the grid. */



@media(prefers-reduced-motion:reduce){
  .story-scene,.story-research-photo,.story-pair-stat{will-change:auto}
  html.story-animations-ready .story-stage .hero,
  html.story-animations-ready .story-scene,
  html.story-animations-ready .story-stage .footer-policy-links,
  html.story-animations-ready .story-stage .footer-copyright{
    transition:none!important
  }
  .story-research-first .story-research-photo,
  .story-research-first .story-pair-research .story-pair-stat{animation:none!important}
}

/* The authentic research photograph retains its original navy edge blending. */
.story-research-photo{
  position:relative;display:block;flex:none;margin-inline:auto;
  width:min(100%,920px);
  max-height:min(40svh,420px);
  aspect-ratio:2.1;
  overflow:hidden;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
  /* Hide a little more of the ceiling at the top; preserve the frame, focal crop,
     bottom edge, and navy dissolve. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 7%,#000 19%,#000 83%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 7%,#000 19%,#000 83%,transparent 100%)
}
.story-research-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,var(--navy) 0%,transparent 12%,transparent 88%,var(--navy) 100%),
    linear-gradient(180deg,rgba(31,41,53,.18),transparent 42%,rgba(31,41,53,.16))
}
.story-research-photo picture,
.story-research-photo img{
  display:block;width:100%;height:100%
}
.story-research-photo img{
  object-fit:cover;object-position:50% 33%;
  filter:saturate(.72) contrast(1.07) brightness(.82)
}
.story-race-graph{
  /* The plot scales as one unit; its tighter SVG bounds eliminate
     excess blank space above the data without moving any actual values. */
  width:min(100%,1024px,110svh);
  max-width:1024px;
  margin-inline:auto;flex:none
}
@media(min-width:741px) and (max-height:700px){
  .story-race{gap:var(--space-4)}
  .story-race .story-headline{font-size:clamp(50px,5.5vw,75px)}
  .story-race-graph{width:min(100%,920px,86svh)}
  .story-race-legend{margin-top:8px}
  .story-race-graph .story-approvals-source{margin-top:9px}
}
.story-race-graph svg{display:block;width:100%;height:auto;overflow:visible}
.story-approvals-mobile{display:none!important}
.story-approvals-heading{
  fill:var(--white);font-size:20px;font-weight:500;
  font-family:"Open Sauce One",sans-serif;letter-spacing:-.02em
}
.story-approvals-tick{fill:rgba(248,251,253,.76);font-size:14px;font-family:"Open Sauce One",sans-serif}
.story-approvals-year{font-size:14px}
.story-approval-bar-nonpediatric{fill:#F8FBFD}
.story-approval-bar-pediatric{fill:#348FC5}
.story-race-graph .story-approvals-source{
  /* Distinct line of metadata, never visually attached to the legend. */
  margin:var(--space-2) 0 0;
  color:rgba(248,251,253,.7);text-align:center;
  font-size:clamp(11px,1vw,13px);line-height:1.35
}
.story-source{
  margin:0;color:rgba(248,251,253,.7);
  font-size:clamp(11px,1vw,13px);line-height:1.35;
  text-align:center
}
.story-approvals-source a,.story-source a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;pointer-events:auto
}
.story-approvals-source a:focus-visible,.story-source a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px
}
/* Counts are faithfully drawn from the published FDA dataset, not interpolated. */
/* Shared photo dimensions and aligned captions live in the paired composition. */
.story-race{gap:clamp(var(--space-6),3.5svh,var(--space-10))}
@media(min-width:741px) and (max-height:700px){
  .story-race{gap:var(--space-4)}
}
.story-race .story-copy{margin-top:clamp(10px,1.5svh,16px)}
/* Scroll controls bar height from zero to each source count's fixed maximum.
   Both series rise together and reverse cleanly without data interpolation. */
/* Keep both illustrations within the fixed header/footer frame on all devices. */




/* Progressive enhancement: all three story sections remain legible as ordinary
   document content when script execution is disabled or initialization fails.
   The SVG is only a static backup for the canvas grid visualization. */
.story-grid-fallback{display:none}
html:not(.has-scroll-story) .story-scenes{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,3vw,48px);
  width:100%;
  margin-inline:auto
}
html:not(.has-scroll-story) .story-scene{
  position:relative;inset:auto;
  opacity:1;visibility:visible;
  min-height:clamp(380px,82svh,800px);
  padding-block:clamp(54px,8svh,90px);
  filter:none!important
}
html:not(.has-scroll-story) .story-grid-fallback{
  display:block;width:100%;height:auto;aspect-ratio:1
}
html:not(.has-scroll-story) #story-inventions-grid{display:none}
html:not(.has-scroll-story) .story-research-photo{opacity:1}
/* SVG clip masks are full-width by default so no-JS visitors see every bar. */


/* The fixed mobile scroll runway is keyboard-focusable. Outline is inset so
   it remains visible without changing scroll distances or site geometry. */


/* A concise legend uses the exact SVG stroke colors and sits directly
   beneath the illustration without axes, values, or explanatory callouts. */
.story-race-legend{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  margin-top:var(--space-3);
  color:rgba(248,251,253,.82);
  font-size:clamp(13px,1.1vw,16px);
  font-weight:400;line-height:1.35;letter-spacing:-.01em;
}
.story-race-legend-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.story-race-key{display:block;width:12px;height:12px;flex:none}
.story-race-key-adult{background:#F8FBFD}
.story-race-key-pediatric{background:#348FC5}




/* Final-slide destinations are provided by the shared persistent header. */

/* MOBILE STORY: one intentional composition per slide. The opening hero
   and scroll/swipe mechanism are deliberately unchanged. */
@media(max-width:740px){
  .hero-layout{gap:clamp(14px,2.8svh,26px)}
  .hero-navigation{gap:clamp(2px,.9svh,8px)}
  html.has-scroll-story,html.has-scroll-story .home-page{
    height:100%;overflow:hidden;overscroll-behavior-y:none
  }
  html.has-scroll-story{scroll-snap-type:none}
  html.has-scroll-story .story-runway{
    position:fixed;inset:0;width:100%;height:100svh;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior-y:none;scrollbar-width:none;scroll-snap-type:y mandatory
  }
  html.has-scroll-story .story-runway::-webkit-scrollbar{display:none}
  html.has-scroll-story .story-scroll-spacer{
    display:block;height:260svh;pointer-events:none;flex:none
  }
  html.has-scroll-story .story-stage{
    position:sticky;top:0;inset-inline:0;width:100%;height:100svh;
    min-height:0;transform:none;contain:none
  }
  html.has-scroll-story .story-scenes{
    /* Tablet hero .wrap uses 28px margins. */
    --story-gutter:28px;
    --story-top:120px;
    --story-bottom:clamp(82px,11svh,96px);
    --story-paragraph-gap:clamp(10px,1.5svh,15px)
  }
  .story-scene{gap:clamp(10px,1.8svh,17px);text-align:center;transform:none!important;filter:none!important}
  .story-stat-copy{max-width:540px;text-align:center}
  .story-scene .story-copy{
    width:100%;max-width:510px;margin-inline:auto;
    font-size:clamp(17px,4.55vw,20px);
    line-height:1.38;text-align:center;text-wrap:pretty
  }
  .story-source{font-size:clamp(10px,2.9vw,12px)}
  /* Decade lag: hero-aligned text and a broad, nearly full-bleed plot. */
  /* Balance the introductory line with the headline, while the FDA plot
     remains clearly separated. Short screens retain compact spacing. */
  .story-race{gap:clamp(var(--space-4),3svh,var(--space-8))}
  .story-race .story-headline{
    font-size:clamp(33px,9.8vw,70px);
    line-height:1.07;letter-spacing:-.057em;white-space:nowrap
  }
  .story-race .story-stat-copy .story-race-intro{
    font-size:clamp(17px,4.65vw,21px);
    line-height:1.28;margin-bottom:var(--space-2)
  }
  .story-race .story-copy{
    margin-top:clamp(10px,1.4svh,15px);
    max-width:540px;font-size:clamp(17px,4.65vw,21px);
    line-height:1.4;white-space:normal;text-wrap:balance
  }
  .story-race-graph{width:min(100%,480px);max-width:none}
  .story-approvals-desktop{display:none!important}
  .story-approvals-mobile{display:block!important}
  .story-approvals-mobile .story-approvals-year{font-size:13px}
  .story-race-graph .story-approvals-source{
    font-size:clamp(11px,2.9vw,13px);margin-top:var(--space-2)
  }
  .story-race-legend{
    font-size:clamp(13px,3.3vw,15px);
    gap:var(--space-2) var(--space-4);
    margin-top:var(--space-2)
  }
  .story-race-legend-item{gap:7px}
  .story-race-key{width:12px}
  /* Closing frame: balanced touch targets. */
  .story-ending-copy{gap:clamp(22px,3.5svh,36px)}
  .story-ending-headline{
    max-width:560px;font-size:clamp(44px,12.2vw,68px);
    line-height:1.14;letter-spacing:-.048em
  }
  html:not(.has-scroll-story) .story-scene{min-height:clamp(500px,89svh,900px)}
  html.has-scroll-story .story-runway:focus-visible{
    outline:2px solid var(--accent);outline-offset:-3px
  }
}
@media(max-width:600px){
  html.has-scroll-story .story-stage{grid-template-rows:100px minmax(0,1fr) auto}
  html.has-scroll-story .story-scenes{
    --story-top:100px;
    --story-gutter:20px; /* Identical to the opening hero .wrap. */
  }
}
@media(max-width:740px) and (max-height:700px){
  html.has-scroll-story .story-scenes{
    --story-top:88px;--story-bottom:78px;--story-paragraph-gap:9px
  }
  .story-scene{gap:9px}
  .story-scene .story-copy{font-size:clamp(16px,4.3vw,18px);line-height:1.33}
  .story-race{gap:var(--space-4)}
  .story-race .story-headline{font-size:clamp(32px,9.5vw,59px)}
  .story-race .story-copy{font-size:clamp(16px,4.35vw,19px);line-height:1.35}
  .story-race-legend{margin-top:var(--space-2)}
  .story-race-graph .story-approvals-source{margin-top:var(--space-2)}
  .story-ending-copy{gap:clamp(17px,2.8svh,26px)}
  .story-ending-headline{font-size:clamp(38px,10.5vw,54px)}
}
@media(max-width:740px) and (max-height:570px){
  html.has-scroll-story .story-scenes{--story-top:82px;--story-bottom:68px}
  .story-race{gap:var(--space-3)}
  .story-race .story-headline{font-size:clamp(30px,9vw,55px)}
  .story-race .story-copy{margin-top:6px;font-size:clamp(15px,4.2vw,18px)}
  .story-race-graph{width:min(100%,42svh,480px)}
  .story-race-legend{font-size:12px;margin-top:var(--space-2);gap:var(--space-1) var(--space-3)}
  .story-race-graph .story-approvals-source{margin-top:var(--space-1)}
  .story-race-key{width:12px}
  .story-ending-copy{gap:14px}
  .story-ending-headline{font-size:clamp(34px,9.6vw,48px);line-height:1.1}
}



/* Keep the story's fixed scene inset exactly aligned with the shared
   always-visible mobile navigation header at every responsive height. */
@media(max-width:960px){
  html.has-scroll-story .story-stage{
    grid-template-rows:var(--mobile-header-height) minmax(0,1fr) auto
  }
  html.has-scroll-story .story-scenes{--story-top:var(--mobile-header-height)}
}


/* COMBINED RESEARCH + COMMERCIALIZATION. Both media have the identical
   square dimensions. One parent grid owns the five row tracks, and two
   semantic child articles share those tracks through CSS subgrid. */
.story-combined{
  --pair-column-gap:clamp(var(--space-6),2.5vw,var(--space-10));
  --pair-media-size:min(calc(50vw - var(--story-gutter,40px) - var(--space-8)),41svh,420px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:var(--pair-media-size) min-content min-content minmax(2.7em,auto) min-content;
  column-gap:var(--pair-column-gap);row-gap:clamp(4px,.65svh,8px);
  align-content:center;justify-items:center
}
.story-combined .story-pair-card{
  display:grid;grid-template-rows:subgrid;grid-row:1 / span 5;
  min-width:0;width:100%;justify-items:start;align-items:center;text-align:left
}
.story-combined .story-pair-research{grid-column:1}
.story-combined .story-pair-commercial{grid-column:2}
.story-combined .story-pair-media{
  grid-column:1;grid-row:1;
  width:var(--pair-media-size);height:var(--pair-media-size);
  max-width:none;max-height:none;min-width:0;min-height:0;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  justify-self:start;align-self:center;margin:0;position:relative
}
.story-combined .story-grid-art canvas{
  display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain
}
.story-combined .story-research-photo img{object-position:50% 33%}
.story-combined .story-pair-intro{
  grid-column:1;grid-row:2;margin:0;
  color:var(--story-ink-muted);font-size:clamp(16px,1.6vw,21px);
  line-height:1.25;letter-spacing:-.022em;text-wrap:balance
}
.story-combined .story-pair-stat{
  grid-column:1;grid-row:3;margin:0;color:var(--white);
  font-size:clamp(52px,6.6vw,103px);line-height:1;
  letter-spacing:-.068em;font-weight:600;white-space:nowrap
}
.story-combined .story-pair-stat em{
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;font-weight:400;font-size:.76em;letter-spacing:-.026em
}
.story-combined .story-pair-stat-commercial{font-size:clamp(76px,9vw,142px)}
.story-combined .story-pair-stat-commercial em{font-size:1em}
.story-combined .story-pair-description{
  grid-column:1;grid-row:4;margin:0;max-width:36ch;
  color:var(--story-ink-muted);font-size:clamp(16px,1.48vw,20px);
  line-height:1.33;letter-spacing:-.018em;text-wrap:balance;text-align:left
}
.story-combined .story-source{grid-column:1;grid-row:5;align-self:end;justify-self:start;text-align:left}

/* Keep the two aligned columns together instead of spanning the entire
   desktop viewport. Media, statistic and copy all start on the same left edge. */
@media(min-width:741px){
  .story-combined{
    padding-inline:max(var(--story-gutter,40px),calc((100vw - 1040px)/2))
  }
}

/* Shorter laptops still retain the two square media and all text. */
@media(min-width:741px) and (max-height:700px){
  .story-combined{
    --pair-media-size:min(calc(50vw - var(--story-gutter,40px) - var(--space-8)),31svh,320px)
  }
  .story-combined .story-pair-stat{font-size:clamp(42px,5vw,70px)}
  .story-combined .story-pair-stat-commercial{font-size:clamp(66px,8vw,112px)}
  .story-combined .story-pair-intro{font-size:clamp(15px,1.5vw,19px)}
  .story-combined .story-pair-description{font-size:clamp(15px,1.35vw,18px)}
}
@media(min-width:741px) and (max-height:570px){
  .story-combined{
    --pair-media-size:min(calc(50vw - var(--story-gutter,40px) - var(--space-8)),24svh,260px);
    row-gap:var(--space-1)
  }
  .story-combined .story-pair-stat{font-size:clamp(35px,4vw,54px)}
  .story-combined .story-pair-stat-commercial{font-size:clamp(52px,7vw,88px)}
  .story-combined .story-pair-intro{font-size:14px}
  .story-combined .story-pair-description{font-size:14px}
  .story-combined .story-source{font-size:11px}
}

/* Mobile keeps the panels paired and identical, but stacks the semantic
   groups instead of reducing each square to an illegible narrow column. */
@media(max-width:740px){
  .story-combined{
    --pair-media-size:min(19svh,40vw,188px);
    display:flex;flex-direction:column;
    gap:clamp(8px,1.5svh,14px);
    justify-content:center;align-items:center
  }
  .story-combined .story-pair-card{
    display:grid;width:100%;max-width:560px;grid-row:auto;grid-column:auto;
    grid-template-rows:var(--pair-media-size) min-content min-content auto min-content;
    row-gap:clamp(3px,.5svh,6px);
    justify-items:center;align-items:center;text-align:center
  }
  .story-combined .story-pair-media{justify-self:center}
  .story-combined .story-source{justify-self:center;text-align:center}
  .story-combined .story-pair-intro{font-size:clamp(14px,3.5vw,17px);line-height:1.2}
  .story-combined .story-pair-stat{font-size:clamp(44px,12vw,63px);line-height:1}
  .story-combined .story-pair-description{
    max-width:35ch;font-size:clamp(14px,3.5vw,17px);line-height:1.25;text-align:center
  }
  .story-combined .story-source{font-size:clamp(10px,2.65vw,12px);line-height:1.2}
  .story-combined .story-research-photo img{object-position:50% 33%}
}
@media(max-width:740px) and (min-height:701px) and (max-height:810px){
  .story-combined{--pair-media-size:min(15svh,38vw,150px)}
}
@media(max-width:740px) and (max-height:700px){
  .story-combined{--pair-media-size:min(14svh,38vw,110px);gap:var(--space-2)}
  .story-combined .story-pair-card{row-gap:var(--space-1)}
  .story-combined .story-pair-stat{font-size:clamp(35px,9vw,50px)}
  .story-combined .story-pair-intro{font-size:clamp(13px,3.4vw,16px)}
  .story-combined .story-pair-description{font-size:clamp(13px,3.4vw,16px)}
  .story-combined .story-source{font-size:11px}
}
@media(max-width:740px) and (max-height:570px){
  .story-combined{--pair-media-size:min(12svh,36vw,82px);gap:var(--space-1)}
  .story-combined .story-pair-card{row-gap:3px}
  .story-combined .story-pair-stat{font-size:clamp(32px,8.5vw,44px)}
  .story-combined .story-pair-intro{font-size:clamp(12px,3vw,14px)}
  .story-combined .story-pair-description{font-size:clamp(12px,3.2vw,14px);line-height:1.18}
}