/* One scale for page covers. Loaded after the individual page styles. */
:root {
  --cover-height: clamp(600px, 45vw, 720px);
  --cover-gutter: 48px;
  --cover-title: clamp(64px, 5.8vw, 96px);
  --cover-art-height: clamp(360px, 34vw, 520px);
}

body main,
.business-page main {
  max-width: 1320px;
  padding-inline: var(--cover-gutter);
}

main > .site-cover:is(.home-banner, .page-hero, .business-hero) {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: var(--cover-height);
  margin-block: 0;
  padding: 32px 0;
  border: 0;
  overflow: visible;
}

/* Query the usable page width, excluding the browser scrollbar. */
@supports (width: 100cqw) {
  body { container-type: inline-size; }
  main > .site-cover:is(.home-banner, .page-hero, .business-hero) {
    width: 100cqw;
    margin-inline: calc(50% - 50cqw);
  }
}

.site-cover:not(.home-banner):not(.catalog-hero):not(.combos-hero):not(.business-hero) {
  padding-inline: var(--cover-gutter);
}

.site-cover .cover-inner {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: var(--cover-gutter);
}

.site-cover .cover-copy { width: 100%; min-width: 0; }

main > .site-cover h1:not(.home-banner-title) {
  font-family: Anton, Impact, 'Arial Narrow', sans-serif;
  font-size: var(--cover-title);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.5px;
  margin: 16px 0;
  text-wrap: balance;
}

.site-cover .crumbs { margin: 0 0 16px; font-size: 13px; }
.site-cover .eyebrow { font-size: 12px; letter-spacing: 2px; }
.site-cover :is(.page-lead, .business-hero-copy > p) {
  max-width: 560px;
  margin: 0;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
}

.site-cover .cover-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  min-width: 0;
  height: var(--cover-art-height);
  max-width: none;
  aspect-ratio: auto;
  top: auto;
  left: auto;
  transform: none;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

.site-cover .cover-art picture { display: block; width: 100%; height: 100%; }
.site-cover .cover-art img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.site-cover .combos-hero-art::after {
  background: linear-gradient(to bottom, var(--bg), transparent 4%, transparent 96%, var(--bg)),
    linear-gradient(to right, var(--bg), transparent 5%, transparent 96%, var(--bg));
}

.site-cover .plan-terms { margin-top: 20px; font-size: 15px; padding: 12px 6px; }
.site-cover .plan-terms :is(strong, span) { gap: 7px; padding-inline: 10px; }
.site-cover .plan-terms svg { width: 18px; height: 18px; }
.site-cover .jump-links { margin-top: 18px; gap: 8px; }
.site-cover .jump-links a { font-size: 14px; }

/* The original home artwork contains its wordmark: fit the whole scene. */
main > .home-banner.site-cover { gap: 8px; padding: 12px 0; background: #000; }
.site-cover .home-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1680px;
  height: calc(var(--cover-height) - 120px);
  margin: 0 auto;
}
.site-cover .home-stage img { width: 100%; height: 100%; object-fit: contain; }
.site-cover .home-paths { width: calc(100% - 2 * var(--cover-gutter)); max-width: 1440px; margin: 0 auto; }
.home-banner.site-cover + .explore { padding-top: 28px; }

@media (max-width: 1050px) {
  :root { --cover-gutter: 24px; }
  .site-cover .cover-inner { gap: 24px; }
  .site-cover .plan-terms { font-size: 12px; }
  .site-cover .plan-terms :is(strong, span) { gap: 5px; padding-inline: 7px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  :root { --cover-height: 560px; --cover-title: clamp(54px, 6vw, 64px); --cover-art-height: 340px; }
  .site-cover .home-paths a { gap: 10px; padding: 10px; }
  .site-cover .home-path-icon { width: 32px; height: 32px; }
  .site-cover .home-paths strong { font-size: 22px; }
  .site-cover .home-paths small { font-size: 11px; line-height: 1.4; }
  .site-cover .home-path-arrow { display: none; }
}

@media (max-width: 760px) {
  :root {
    --cover-height: 644px;
    --cover-gutter: 20px;
    --cover-title: clamp(40px, 10.8vw, 52px);
    --cover-art-height: 260px;
  }
  main > .site-cover:is(.home-banner, .page-hero, .business-hero) { width: 100%; margin-inline: 0; padding: 24px 0; }
  .site-cover .cover-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-inline: 0; }
  .site-cover .cover-copy { min-height: 320px; }
  .site-cover .business-hero-copy { display: flex; flex-direction: column; justify-content: center; }
  .site-cover :is(.page-lead, .business-hero-copy > p) { font-size: 16px; }
  .site-cover .plan-terms { margin-top: 18px; font-size: 12px; }
  .site-cover .plan-terms :is(strong, span) { gap: 5px; padding-inline: 7px; }
  .site-cover .plan-terms svg { width: 16px; height: 16px; }
  .site-cover .jump-links a { font-size: 11px; padding-inline: 10px; }
  .site-cover.combos-hero .jump-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-cover.combos-hero .jump-links a { justify-content: center; padding: 6px; font-size: 10px; text-align: center; }
  .site-cover.combos-hero .jump-links svg { display: none; }
  .site-cover .cover-art { width: calc(100% + 2 * var(--cover-gutter)); margin-inline: calc(-1 * var(--cover-gutter)); }
  .site-cover .business-cover-art img { max-width: none; }
  main > .home-banner.site-cover { padding: 24px 0; gap: 16px; }
  .site-cover .home-stage { height: 88px; }
  .site-cover .home-stage img { max-width: none; }
  .site-cover .home-paths { width: 100%; }
  .site-cover .home-mobile-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 2 * var(--cover-gutter));
    max-width: none;
    height: 364px;
    margin-inline: calc(-1 * var(--cover-gutter));
  }
  .site-cover .home-mobile-scene picture { display: block; width: 100%; height: 100%; }
  .site-cover .home-mobile-scene img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
}

@media (max-width: 370px) {
  :root { --cover-height: 712px; }
  .site-cover .cover-copy { min-height: 388px; }
  .site-cover .plan-terms { font-size: 11px; padding-inline: 2px; }
  .site-cover .plan-terms :is(strong, span) { gap: 4px; padding-inline: 5px; }
  .site-cover .jump-links a { font-size: 10px; padding-inline: 8px; }
}