/* Shared outer spacing for the landing page and all three labs. */
body{
  --site-content-max:1440px;
  --site-gutter:clamp(24px,4vw,64px);
  --site-frame-width:min(var(--site-content-max),calc(100% - 2 * var(--site-gutter)));
  --site-workspace-gap:20px;
}
body>.header>.header-inner{
  width:var(--site-frame-width)!important;
  max-width:var(--site-content-max)!important;
  margin:0 auto!important;
  padding-inline:0!important;
}
body>main,
body>.footer.wrap{
  width:var(--site-frame-width);
  max-width:var(--site-content-max);
  margin-inline:auto;
  min-width:0;
}
body[data-page=fonts] #font-page .wrap,
#main .landing-page,
#main .bz-sponsor-home{
  width:100%;
  max-width:none;
  margin-inline:0;
}
#main .landing-page{
  min-height:calc(100svh - var(--lab-header-height));
}
body[data-page=fonts] #font-page .font-hero.wrap{
  margin-top:var(--site-workspace-gap);
  padding-inline:clamp(24px,3vw,48px);
  container-type:inline-size;
}
body[data-page=colors]>main,
body[data-page=layout]>main{
  padding-block:var(--site-workspace-gap);
}
body[data-page=colors] #color-page,
body[data-page=layout] #layout-page{
  height:calc(100dvh - var(--lab-header-height) - 2 * var(--site-workspace-gap));
  min-height:0;
}
.compare-bar{
  max-width:var(--site-frame-width);
}
@media(min-width:1101px){
  body[data-page=fonts] #font-page .font-hero.wrap{padding-inline:clamp(40px,5.3vw,80px)}
  .font-hero-copy{width:100%;justify-self:start;padding-inline:0}
  .font-hero.lab-hero h1{font-size:clamp(38px,4.1cqw,54px)}
  .font-hero.lab-hero p{font-size:clamp(13px,1.05cqw,15px)}
}
@media(max-width:900px){
  body{--site-gutter:24px;--site-workspace-gap:16px}
}
@media(max-width:620px){
  body{--site-gutter:20px;--site-workspace-gap:12px}
  .font-hero.lab-hero h1{font-size:clamp(30px,8.8vw,46px)}
}
@media(max-width:380px){
  body>.header nav{gap:12px!important}
}