/* Side Studies non-Side hero system · 2026-10-18
   GEOMETRY, not just typography:
   Desktop: first hero eyebrow begins 72px below the header, on the
   common 1320px content grid (minimum 48px gutters).
   Mobile <=760px: 48px below the header and 19px gutters.
   The H1 begins exactly 22px below the eyebrow (18px on mobile).
   Applies only to non-Side HTML routes that include this stylesheet. */
:root{
  --ss-hero-inset:max(48px, calc((100vw - 1320px)/2));
  --ss-hero-top:var(--ss-header-to-hero-gap,72px);
  --ss-hero-title-gap:22px;
}
.hero-eyebrow-standard{
  display:block!important;
  width:max-content;
  max-width:100%;
  margin:0 0 var(--ss-hero-title-gap)!important;
  padding:0!important;
  border:0!important;
  font:700 11px/1.35 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.hero-eyebrow-standard+h1{margin-top:0!important}
.catalog-page .catalog-hero .hero-eyebrow-standard{color:#b6d6b4!important}

/* Four primary navigation destinations: identical X and Y offsets.
   Layout engines must NOT vertically center or bottom-align the title cell. */
.atlas-hero{
  padding-top:var(--ss-hero-top)!important;
  padding-left:var(--ss-hero-inset)!important;
  padding-right:var(--ss-hero-inset)!important;
  align-items:start!important;
}
.atlas-hero-copy{
  justify-content:flex-start!important;
  align-self:start!important;
}
.ss-home .ss-hero .ss-wrap,
.ss-pro .ss-pro-hero .ss-wrap,
.catalog-page .catalog-hero .catalog-shell,
.map-page .map-hero .map-shell{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
}
.ss-home .ss-hero-grid{
  padding-top:var(--ss-hero-top)!important;
  align-items:start!important;
}
.ss-home .ss-hero-copy{
  padding-top:0!important;
  align-self:start!important;
}
.ss-pro .ss-pro-hero{padding-top:var(--ss-hero-top)!important}
.ss-pro .ss-pro-hero-grid{align-items:start!important}
.catalog-page .catalog-hero-grid{
  padding-top:var(--ss-hero-top)!important;
  align-items:start!important;
}
.map-page .map-hero-heading{
  padding-top:var(--ss-hero-top)!important;
  align-items:start!important;
}

/* Research, editorial exploration, and operational non-Side routes:
   same anchor, regardless of the underlying legacy page frame. */
.explore-hero{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
  padding-top:var(--ss-hero-top)!important;
  align-items:start!important;
}
.explore-hero .explore-crumb{
  display:inline-block;
  margin-top:24px;
}
:is(.research-hero.shell,.ws-hero.shell,.hero.shell,.obs-hero.shell,.uaei-hero.shell){
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
  padding-top:var(--ss-hero-top)!important;
  align-items:start!important;
}
.module-main{padding-top:var(--ss-hero-top)!important}
.module-main .module-shell{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
}
.module-main .module-shell>:not(.hero-eyebrow-standard):not(h1):not(.module-back){max-width:890px}
#portfolio-main:has(>header>.hero-eyebrow-standard){padding-top:var(--ss-hero-top)!important}
#portfolio-main:has(>header>.hero-eyebrow-standard)>header{margin-top:0!important}

/* Independent experimental non-Side applications retain their behaviour
   but no longer opt out of the shared first-screen anchor. */
body:has(.screen-intro .hero-eyebrow-standard) .screen.active{
  padding-top:var(--ss-hero-top)!important;
  align-items:flex-start!important;
}
body:has(.screen-intro .hero-eyebrow-standard) .screen .shell.narrow{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
}
body:has(.screen-intro .hero-eyebrow-standard) .screen .shell.narrow>*{
  max-width:930px;
}
body:has(.topic-lab):has(.hero .hero-eyebrow-standard)>.shell{max-width:none;width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))}
body:has(.topic-lab):has(.hero .hero-eyebrow-standard)>.shell .hero{padding-top:var(--ss-hero-top)!important;align-items:start!important}
body:has(main>.hero-eyebrow-standard) main{padding-top:var(--ss-hero-top)!important}

/* Registry pages whose existing .shell is on main rather than the hero. */
body:has(.ws-hero .hero-eyebrow-standard) main#portfolio-main.shell,
body:has(.pipeline-hero .hero-eyebrow-standard) main#portfolio-main.shell{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
}
.ws-hero,.pipeline-hero{
  padding-top:var(--ss-hero-top)!important;
}

/* Technical laboratories with custom site shells also share the anchor. */
body:has(main#portfolio-main>header>.hero-eyebrow-standard) main#portfolio-main{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
  padding-top:var(--ss-hero-top)!important;
}
body:has(main>.kicker.hero-eyebrow-standard) .wrap{
  width:calc(100% - var(--ss-hero-inset) - var(--ss-hero-inset))!important;
  max-width:1320px!important;
}
body:has(main>.kicker.hero-eyebrow-standard) main{
  padding-top:var(--ss-hero-top)!important;
}
body:has(main>.kicker.hero-eyebrow-standard) main>*{max-width:920px}
@media(max-width:760px){
  :root{
    --ss-hero-inset:19px;
    --ss-hero-top:var(--ss-header-to-hero-gap-mobile,48px);
    --ss-hero-title-gap:18px;
  }
  .hero-eyebrow-standard{font-size:10px!important}
  .explore-hero .explore-crumb{margin-top:20px}
}