/* 5. Included — a sky of words parting around the title (cloud.js draws it). */
.sky {
  --sky-top: #84ace6;
  --sky-mid: #9dc0ef;
  --sky-low: #c2d8f5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 15 / 8;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(45% 40% at 50% 50%, rgb(255 255 255 / 24%), transparent 75%),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-low));
}
.sky-stage { width: min(100%, var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Staged (cloud.js adds .is-staged): the sky is laid out at screen size and
   shown as a scaled, clipped card; pinned in the track, it opens to the whole
   screen, stays open, and closes back near the end. */
.included.is-staged { padding-block: 0; }
.is-staged .sky-track { height: 300vh; }
.is-staged .sky-stage { position: sticky; top: 0; width: 100%; height: 100vh; padding: 0; }
.is-staged .sky { height: 100%; aspect-ratio: auto; border-radius: 0; transform-origin: 50% 50%; }
.is-staged .sky-copy h2 { font-size: calc(var(--heading) / var(--sky-rest, 1)); }
.is-staged .cloud-tag { font-size: calc(11px / var(--sky-rest, 1)); }

/* While the sky fills the screen the header is thin sky glass with white type:
   the words pass behind it, softened just enough for the links to read. */
.site-header { transition: background-color var(--dur-ui) ease, backdrop-filter var(--dur-ui) ease, color var(--dur-ui) ease; }
.site-header.on-sky { color: #fff; background: rgb(98 140 210 / 30%); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); }
.site-header.on-sky .desktop-nav a, .site-header.on-sky .nav-signin { color: rgb(255 255 255 / 90%); }
.site-header.on-sky .desktop-nav a:hover, .site-header.on-sky .nav-signin:hover { color: #fff; }
.site-header.on-sky .menu-toggle span { background: #fff; }
.site-header.on-sky .button { --btn-bg: #fff; --btn-fg: var(--ink); --btn-border: #fff; }
.site-header.on-sky .button:hover { --btn-bg: rgb(255 255 255 / 88%); --btn-border: rgb(255 255 255 / 88%); }
.site-header.on-sky .button-outline { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 60%); }
.site-header.on-sky .button-outline:hover { --btn-bg: rgb(255 255 255 / 16%); --btn-border: #fff; }

.cloud { position: absolute; inset: 0; z-index: 1; }
.cloud canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sky-copy {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 24px;
  text-align: center; pointer-events: none;
}
.sky-copy h2 { color: #fff; }

/* Hover and selection, drawn like a design tool's. */
.cloud-box {
  position: absolute; left: 0; top: 0;
  border: 1px solid var(--accent);
  pointer-events: none;
  transition: transform 90ms var(--ease-out), width 90ms var(--ease-out), height 90ms var(--ease-out);
}
.cloud-box[hidden] { display: none; }
.cloud-box.is-hover { border-color: rgb(59 91 219 / 75%); }
.cloud-box i { position: absolute; width: 6px; height: 6px; background: #fff; border: 1px solid var(--accent); }
.cloud-box i:nth-child(1) { left: -3.5px; top: -3.5px; }
.cloud-box i:nth-child(2) { right: -3.5px; top: -3.5px; }
.cloud-box i:nth-child(3) { left: -3.5px; bottom: -3.5px; }
.cloud-box i:nth-child(4) { right: -3.5px; bottom: -3.5px; }
.cloud-tag {
  position: absolute; left: -1px; top: calc(100% + 6px);
  padding: 1px 6px; border-radius: 4px;
  background: var(--accent); color: #fff;
  font: 500 11px/1.6 var(--sans); white-space: nowrap;
}
.cloud-tag[hidden] { display: none; }

/* The list carries the same words for screen readers, and without JavaScript. */
.included-list { margin-top: 32px; }
.included-list > div { display: grid; gap: 6px; padding: 18px 0; }
.included-list h3 { font-size: 22px; }
.included-list p { color: var(--muted); font-size: 15px; }
.js .included-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.js) .cloud { display: none; }

@media (max-width: 1080px) {
  .sky { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .sky { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
}