/* Shared hero geometry
   Every hero uses the same shell and gives the primary message the available
   width. Secondary media or evidence panels keep a deliberate column instead
   of leaving an unused strip beside a narrow text measure. */
.home-hero .hero-grid,
.page-hero>.shell,
.article-hero-inner,
.article-cover,
.magazine-hero,
.resources-hero-grid{
  width:var(--shell);
  max-width:none;
  margin-inline:auto;
}

.hero-grid{
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:clamp(38px,4vw,58px);
}
.page-hero-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:clamp(38px,4vw,56px);
}
.tool-hero-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:clamp(38px,4vw,56px);
}
.resources-hero-grid{
  grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
  gap:clamp(38px,4vw,56px);
}

.hero-grid>*:first-child,
.page-hero-grid>*:first-child,
.tool-hero-grid>*:first-child,
.resources-hero-grid>*:first-child{
  width:100%;
  min-width:0;
  max-width:none;
}

.hero-copy h1,
.hero-copy>p,
.page-hero h1,
.page-hero p,
.tool-hero h1,
.tool-hero p,
.resources-hero h1,
.resources-hero p,
.article-hero h1,
.article-hero .dek,
.article-meta,
.magazine-mast h1,
.magazine-mast p{
  width:100%;
  max-width:none;
}

.article-hero-inner,
.article-cover{
  padding-inline:0;
}
.article-hero h1{
  text-wrap:balance;
}
.page-hero h1,
.tool-hero h1,
.resources-hero h1,
.hero-copy h1,
.magazine-mast h1{
  text-wrap:pretty;
}

/* Landscape tablets retain two intentional columns without squeezing the
   headline back to the old narrow desktop measure. */
@media(max-width:1050px) and (min-width:901px){
  .hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
    gap:32px;
  }
  .page-hero-grid,
  .tool-hero-grid,
  .resources-hero-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:32px;
  }
  .hero-copy h1{font-size:clamp(46px,5.2vw,54px)}
  .page-hero h1{font-size:clamp(44px,5vw,52px)}
  .article-hero h1{font-size:clamp(48px,5.6vw,58px)}
}

/* Portrait tablets use the full shell for copy, then place supporting media
   or evidence beneath it. */
@media(max-width:900px){
  .hero-grid,
  .page-hero-grid,
  .tool-hero-grid,
  .resources-hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .hero-grid{
    min-height:auto;
    padding-top:52px;
    padding-bottom:64px;
  }
  .hero-copy{
    width:100%;
    max-width:none;
    text-align:left;
  }
  .hero-copy h1,
  .hero-copy>p{
    margin-left:0;
    margin-right:0;
  }
  .hero-actions,
  .hero-proof{
    justify-content:flex-start;
  }
  .hero-visual,
  .page-hero-visual,
  .catalog-hero-panel,
  .profile-facts,
  .resource-standard{
    width:100%;
    max-width:680px;
    justify-self:start;
  }
  .tool-hero-points{
    width:100%;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tool-hero-points li:first-child{
    grid-column:auto;
  }
  .resources-hero-grid .resource-standard{
    max-width:680px;
  }
  .article-meta{
    flex-wrap:wrap;
  }
}

/* Phones keep a comfortable gutter and scale long titles without forcing
   one or two words onto isolated lines. */
@media(max-width:640px){
  .home-hero .hero-grid,
  .page-hero>.shell,
  .article-hero-inner,
  .article-cover,
  .magazine-hero,
  .resources-hero-grid{
    width:calc(100% - 28px);
  }
  .page-hero,
  .resources-hero{
    padding-top:52px;
    padding-bottom:52px;
  }
  .hero-grid{
    gap:26px;
    padding-top:38px;
    padding-bottom:50px;
  }
  .page-hero-grid,
  .tool-hero-grid,
  .resources-hero-grid{
    gap:25px;
  }
  .hero-copy h1,
  .page-hero h1,
  .tool-hero h1,
  .resources-hero h1,
  .article-hero h1{
    font-size:clamp(32px,9.5vw,40px);
    line-height:1.08;
    letter-spacing:-.045em;
  }
  .hero-copy>p,
  .page-hero p,
  .tool-hero p,
  .resources-hero p,
  .article-hero .dek{
    font-size:15px;
    line-height:1.65;
  }
  .hero-actions{
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .hero-actions .button{
    width:100%;
  }
  .tool-hero-points{
    grid-template-columns:minmax(0,1fr);
  }
  .article-hero{
    padding-top:42px;
  }
  .article-meta{
    gap:8px 12px;
  }
  .article-meta span+span{
    padding-left:0;
    border-left:0;
  }
  .magazine-mast h1{
    font-size:clamp(38px,13vw,52px);
    line-height:.96;
  }
}

@media(max-width:380px){
  .home-hero .hero-grid,
  .page-hero>.shell,
  .article-hero-inner,
  .article-cover,
  .magazine-hero,
  .resources-hero-grid{
    width:calc(100% - 20px);
  }
  .hero-copy h1,
  .page-hero h1,
  .tool-hero h1,
  .resources-hero h1,
  .article-hero h1{
    font-size:30px;
  }
}