/*
 * Rendering-only performance layer. These rules preserve the existing visual
 * geometry and content while avoiding work for hidden or off-screen media.
 */

.site-header .nav-mega {
  content-visibility: hidden;
  contain-intrinsic-size: auto 360px;
}

.site-header .nav-item:hover .nav-mega,
.site-header .nav-item:focus-within .nav-mega {
  content-visibility: visible;
}

/* Match the first rendered mobile masthead to the values applied by the
   scroll controller later in the document, preventing an initial reflow. */
@media (max-width: 1060px) {
  .site-header:not(.is-condensed) {
    --fa-brand-height: 72px;
    --fa-logo-box-height: 46px;
    --fa-logo-box-width: 218.07px;
    --fa-logo-scale: 1;
    --fa-action-scale: 1;
    --fa-meta-opacity: 1;
  }
}

@media (max-width: 760px) {
  .site-header:not(.is-condensed) {
    --fa-brand-height: 64px;
    --fa-logo-box-height: 39px;
    --fa-logo-box-width: 184.89px;
  }
}

@supports (content-visibility: auto) {
  .magazine-cover-card {
    aspect-ratio: 3 / 4;
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
  }
}

@media print {
  .site-header .nav-mega,
  .magazine-cover-card {
    content-visibility: visible;
  }
}