/* Keep a coherent composition when browser zoom exposes a larger CSS viewport. */
@media (min-width: 801px) {
  .daylight-site {
    --site-shell-inset: max(4vw, calc((100vw - 1600px) / 2));
    --site-content-inset: max(6vw, calc((100vw - 1450px) / 2));
  }

  .daylight-site .masthead {
    left: var(--site-shell-inset);
    right: var(--site-shell-inset);
    --header-inset: var(--site-shell-inset);
  }

  .daylight-site .chapter {
    padding-inline: var(--site-content-inset);
    min-height: clamp(760px, 100svh, 1040px);
  }

  .daylight-site .intro {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: clamp(32px, 5vw, 80px);
    padding-top: 132px;
    padding-bottom: 108px;
  }

  .daylight-site .intro-copy {
    width: 100%;
    max-width: 600px;
  }

  .daylight-site .ee-stage {
    width: 100%;
    max-width: 640px;
    min-width: 0;
    margin: 0;
    justify-self: end;
  }

  .daylight-site .ee-stage .orb-controls,
  .daylight-site .ee-stage .orb-destination {
    margin-inline: 6%;
  }

  .daylight-site .ee-stage .orb-controls {
    flex-wrap: wrap;
    column-gap: 12px;
  }

  .daylight-site .orb-hint {
    min-width: 0;
    flex: 1 1 160px;
  }

  .daylight-site .orb-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .daylight-site .ee-stage .motion-control {
    width: auto;
    min-width: 64px;
    padding-inline: 12px;
  }

  .daylight-site .orb-replay {
    min-width: 60px;
    justify-content: center;
  }

  .daylight-site .ee-stage .orb-destination > div {
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .daylight-site .scroll-cue {
    left: var(--site-content-inset);
  }

  .daylight-site .chapter-foot,
  .daylight-site .paper .chapter-foot {
    left: var(--site-content-inset);
    right: var(--site-content-inset);
  }

  .daylight-site .site-footer {
    padding-inline: var(--site-content-inset);
  }

  .company-main:has(.company-record) {
    max-width: none;
    margin-inline: var(--site-content-inset);
    padding-inline: 0;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .daylight-site .intro h1 {
    font-size: clamp(36px, 4.5vw, 48px);
  }
}