/* The products: DX Sidekick and CØ (assets/bodies-products.js). Every block reads in a plain layout of its own; the
   scenes take over only under html.bodies-live. The only pictures are the products' own films and stills. */

[data-topic="constellation-zero"] { --b-bg: #05070c; }

/* the closes. Each stands outside .b, in the ending screen, where the heading's default margins would come back and push
   the ending past one screen; so each sets its own spacing, and on a phone its type steps down a size */
.t-end > .b-close .b-h { margin: 0; }
.t-end > .b-close .b-h + .b-p { margin-top: 3.4vh; }
.t-end > .b-close .b-close-p { margin-top: 0; }
.t-end > .b-close .b-close-p + .b-h { margin-top: 3.2vh; }
@media (max-width: 760px) {
  .t-end > .b-close .b-h { font-size: clamp(32px, 9.4vw, 40px); }
  .t-end > .b-close .b-p { font-size: 16px; }
  .t-end > .b-close .b-h + .b-p { margin-top: 2.2vh; }
  .t-end > .b-close .b-close-p + .b-h { margin-top: 2.4vh; }
}

/* ---- the heroes ---- */
/* DX Sidekick: the name and the promise cross the empty diagonal the two ribbons leave between them, the name high and to
   the right, the promise low and to the left */
.t-hero-text.at-diag { top: 0; bottom: 0; left: 17vw; right: 17vw; width: auto; display: flex; flex-direction: column; justify-content: center; }
.t-hero-text.at-diag .t-title { align-self: flex-end; text-align: right; font-size: clamp(64px, 9.6vw, 184px); line-height: .9; letter-spacing: -.02em; }
.t-hero-text.at-diag .t-statement { align-self: flex-start; max-width: 20ch; margin-top: .9em; font-size: clamp(28px, 3vw, 56px); }
.t-hero-text.at-diag .t-line { align-self: flex-start; }
/* CØ: the name stands on the planet's rim like a body rising over it, the promise beside it on the same line */
.t-hero-text.at-horizon { top: auto; bottom: 27vh; left: var(--gutter); right: var(--gutter); width: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4.4vw; align-items: end; }
.t-hero-text.at-horizon .t-title { grid-row: 1 / span 2; margin: 0; font-size: clamp(110px, 16vw, 300px); line-height: .78; letter-spacing: -.03em; }
.t-hero-text.at-horizon .t-statement { grid-column: 2; max-width: 20ch; margin: 0; font-size: clamp(28px, 2.9vw, 54px); }
.t-hero-text.at-horizon .t-line { grid-column: 2; max-width: 46ch; margin-top: 16px; }
[data-topic="constellation-zero"] .t-hero-text.at-horizon::before { left: 30%; right: -4%; top: -30%; bottom: -40%; }
@media (max-width: 760px) {
  .t-hero-text.at-diag { left: var(--gutter); right: var(--gutter); }
  .t-hero-text.at-diag .t-title { font-size: clamp(56px, 16vw, 84px); }
  .t-hero-text.at-horizon { display: block; bottom: 25vh; text-align: center; }
  .t-hero-text.at-horizon .t-title { font-size: clamp(120px, 40vw, 180px); }
  .t-hero-text.at-horizon .t-statement { margin: .5em auto 0; }
  .t-hero-text.at-horizon .t-line { margin-left: auto; margin-right: auto; }
  [data-topic="constellation-zero"] .t-hero-text.at-horizon::before { left: -8%; right: -8%; top: 20%; bottom: -20%; }
}

/* ---- DX Sidekick ---- */
/* the opening: the portal in one sentence, and under it the portal's own film, rising into place as it comes up */
.b-sk-open { padding: 22vh var(--gutter) 14vh; }
.b-sk-say { max-width: 980px; margin: 0 auto; text-align: center; }
.b-sk-say .b-lede { max-width: 24ch; font-size: clamp(32px, 3.4vw, 62px); line-height: 1.14; }
.b-sk-say .b-p { max-width: 50ch; margin: 4.5vh auto 0; }
.b-sk-window, .b-c0-window { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #e9edf2; box-shadow: 0 40px 90px -50px rgba(13, 17, 23, .55), 0 0 0 1px rgba(13, 17, 23, .06); }
.b-sk-window { width: min(1180px, 100%, 140vh); margin: 9vh auto 0; }
.b-c0-window { max-width: 1180px; margin: 0 auto; background: #04060b; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(236, 240, 244, .08); }
.b-sk-window video, .b-c0-window video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bodies-live :is(.b-sk-window, .b-c0-window) { transform-origin: 50% 70%; will-change: transform; }
/* the first visit, still by still */
.b-sk-walk { padding: 6vh var(--gutter) 8vh; }
.b-sk-frames { display: grid; gap: 6vh; max-width: 1180px; margin: 0 auto; }
.b-sk-frame { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.b-sk-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* as a scene on a wide screen the stills stand in one frame, one giving way to the next (the layout the script chose as
   the page loaded, .is-wide, so a phone turned on its side keeps its own) */
.bodies-live .b-sk.is-wide .b-sk-walk { height: 100vh; padding: 0; display: grid; place-items: center; }
.bodies-live .b-sk.is-wide .b-sk-frames { position: relative; display: block; width: min(1180px, 92vw, 152vh); aspect-ratio: 16 / 9; }
.bodies-live .b-sk.is-wide .b-sk-frame { position: absolute; inset: 0; border-radius: 0; will-change: opacity, transform; }
/* the app's rooms. Plainly, each name with what lives there; as a scene, the five names stand in one line like the app's
   own, the scroll walks through them, the one in hand lit with what lives there under it, and then none of them is lit:
   what never lives in any of them */
.b-sk-rooms { position: relative; max-width: 1320px; margin: 0 auto; padding: 16vh var(--gutter) 14vh; }
.b-sk-rooms > .b-h { max-width: none; font-size: clamp(44px, 5vw, 96px); text-align: left; }
.b-sk-map { margin-top: 7vh; }
.b-sk-room { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 72px); align-items: baseline; padding: 2.6vh 0; border-bottom: 1px solid rgba(13, 17, 23, .12); }
.b-sk-room dt { font: 200 clamp(36px, 3.6vw, 66px)/1.04 var(--sys-display); letter-spacing: -.02em; color: var(--sys-graphite); }
.b-sk-room dd { max-width: 40ch; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #3f4954; }
.b-sk-trust { max-width: 40ch; margin-top: 11vh; }
.b-sk-trust h3 { font: 200 clamp(34px, 3.3vw, 62px)/1.05 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-sk-trust .b-p { margin: 24px 0 0; text-align: left; }
.bodies-live .b-sk-rooms { display: flex; flex-direction: column; align-items: flex-start; height: 100vh; max-width: none; padding: max(15vh, 92px) var(--gutter) 0; }
.bodies-live .b-sk-rooms > .b-h { margin: 0; max-width: none; }
.bodies-live .b-sk-map { position: relative; align-self: stretch; display: flex; flex-wrap: wrap; column-gap: .4em; row-gap: .08em; margin: 16vh 0 0; font-size: clamp(46px, 4.6vw, 100px); }
.bodies-live .b-sk-room { display: contents; }
.bodies-live .b-sk-room dt { font-size: 1em; line-height: 1; letter-spacing: -.03em; }
.bodies-live .b-sk-room dd { position: absolute; top: calc(100% + 4.5vh); left: var(--x, 0px); width: min(36ch, 100%); max-width: none; font: 300 clamp(20px, 1.75vw, 30px)/1.32 var(--sys-display); letter-spacing: -.01em; color: #2a323c; }
.bodies-live .b-sk-trust { position: absolute; left: var(--gutter); top: var(--slot, 62vh); width: min(840px, calc(100% - 2 * var(--gutter))); max-width: none; margin: 0; }
.bodies-live .b-sk-trust .b-p { max-width: 46ch; }
@media (max-width: 760px) {
  .b-sk-open { padding: 15vh var(--gutter) 9vh; }
  .b-sk-say { text-align: left; }
  .b-sk-say .b-lede { margin: 0; font-size: clamp(28px, 8vw, 34px); }
  .b-sk-say .b-p { margin: 3vh 0 0; }
  .b-sk-window { margin-top: 5vh; border-radius: 10px; }
  .b-sk-walk { padding: 4vh 0 6vh; }
  .b-sk-frames { gap: 4vh; }
  .b-sk-frame { aspect-ratio: 1 / 1; border-radius: 0; }
  .b-sk-rooms { padding: 10vh var(--gutter) 10vh; }
  .b-sk-rooms > .b-h { font-size: clamp(36px, 10vw, 44px); }
  .b-sk-map { margin-top: 4vh; }
  .b-sk-room { grid-template-columns: 1fr; row-gap: 6px; padding: 1.8vh 0; }
  .b-sk-room dt { font-size: 30px; }
  .b-sk-room dd { font-size: 15px; }
  .b-sk-trust { margin-top: 7vh; }
  .b-sk-trust h3 { font-size: clamp(28px, 7.6vw, 32px); }
  .b-sk-trust .b-p { margin-top: 16px; font-size: 16px; }
  .bodies-live .b-sk-rooms { padding-top: max(13vh, 84px); }
  .bodies-live .b-sk-rooms > .b-h { font-size: clamp(34px, 9.4vw, 40px); }
  .bodies-live .b-sk-map { margin-top: 12vh; column-gap: .36em; font-size: clamp(34px, 10.2vw, 44px); }
  .bodies-live .b-sk-room dd { top: calc(100% + 3vh); left: 0; width: 100%; font-size: clamp(18px, 5.2vw, 21px); }
  .bodies-live .b-sk-trust { width: auto; right: var(--gutter); }
}
/* a short screen (a phone on its side): the rooms step down a size so what never lives here still fits under them */
@media (max-height: 500px) {
  .bodies-live .b-sk-rooms { padding-top: 76px; }
  .bodies-live .b-sk-rooms > .b-h { font-size: 34px; }
  .bodies-live .b-sk-map { margin-top: 5vh; font-size: 40px; }
  .bodies-live .b-sk-room dd { top: calc(100% + 3vh); font-size: 18px; }
  .bodies-live .b-sk-trust h3 { font-size: 28px; }
  .bodies-live .b-sk-trust .b-p { margin-top: 10px; font-size: 15px; line-height: 1.45; }
}
/* the close: the line on the left and the two ways on beside its foot */
.t-end > .b-sk-close { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-content: center; align-items: end; width: 100%; max-width: 1320px; margin: 0 auto; text-align: left; }
.t-end > .b-sk-close .b-h { max-width: 12ch; margin: 0; font-size: clamp(46px, 5.4vw, 104px); line-height: 1; letter-spacing: -.02em; }
.t-end > .b-sk-close .b-actions { justify-content: flex-start; gap: 18px 30px; margin: 0 0 .9vw; }
@media (max-width: 760px) {
  .t-end > .b-sk-close { display: flex; align-items: stretch; }
  .t-end > .b-sk-close .b-h { font-size: clamp(38px, 10.6vw, 46px); }
  .t-end > .b-sk-close .b-actions { margin: 3.5vh 0 0; }
}

/* ---- CØ: a case drawn as a constellation; the opening stands in the dark sky before the first star ---- */
[data-topic="constellation-zero"] .t-title { letter-spacing: -.02em; }
.b-c0-sky { position: relative; padding: 16vh var(--gutter) 10vh; text-align: center; }
.b-c0-map { display: none; }
.b-c0-beats { display: grid; gap: 9vh; max-width: 640px; margin: 0 auto; }
.b-c0-lead .b-lede { margin: 0 auto; }
.b-c0-lead .b-p { margin: 26px auto 0; color: #b4bcc4; }
.b-c0-beat h3 { font: 200 clamp(40px, 4.4vw, 80px)/1.02 var(--sys-display); letter-spacing: -.012em; }
.b-c0-beat p { max-width: 40ch; margin: 16px auto 0; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sys-body); color: #b4bcc4; }
.bodies-live .b-c0-sky { height: 100vh; padding: 0; }
.bodies-live .b-c0-map { display: block; position: absolute; left: 50%; top: 45%; width: min(1100px, 96vw, 150vh); transform: translate(-50%, -50%); overflow: visible; }
.b-c0-map line { stroke: rgba(214, 222, 230, .26); stroke-width: 1.1; }
.b-c0-map line.is-path { stroke: #e0707f; stroke-width: 2.2; }
.b-c0-map line.is-proposal { stroke: #e0707f; stroke-width: 1.6; }
.b-c0-map circle { fill: #dfe5eb; }
.b-c0-map circle.is-hub { fill: #ffffff; }
.b-c0-map circle.is-ring { fill: none; stroke: rgba(236, 240, 244, .4); stroke-width: 1; }
.b-c0-map circle.is-cite { fill: #9cc3e0; }
.b-c0-map circle.is-dust { fill: rgba(220, 228, 236, .5); }
.bodies-live .b-c0-beats { position: absolute; z-index: 1; left: 0; right: 0; bottom: 8vh; display: block; max-width: none; margin: 0; padding: 0 var(--gutter); }
.bodies-live .b-c0-beat { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter); }
.bodies-live .b-c0-beat.b-c0-lead { bottom: 30vh; }
.bodies-live .b-c0-lead .b-lede { max-width: 22ch; font-size: clamp(34px, 3.6vw, 66px); }
.bodies-live .b-c0-lead .b-p { max-width: 50ch; }
.bodies-live .b-c0-beat h3 { font-size: clamp(36px, 3.6vw, 64px); }
.bodies-live .b-c0-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42vh; pointer-events: none; background: linear-gradient(transparent, var(--b-bg) 82%); }
.b-c0-screen { padding: 4vh var(--gutter) 14vh; }
.b-c0-able { padding: 14vh var(--gutter) 6vh; text-align: center; }
.b-c0-list { display: grid; gap: 7vh; max-width: 680px; margin: 9vh auto 0; }
.b-c0-list h3 { font: 200 clamp(30px, 2.9vw, 50px)/1.06 var(--sys-display); letter-spacing: -.01em; }
.b-c0-list p { max-width: 40ch; margin: 12px auto 0; font: 400 clamp(16px, 1.25vw, 19px)/1.55 var(--sys-body); color: #b4bcc4; }
@media (max-width: 760px) {
  .bodies-live .b-c0-map { top: 38%; width: 150vw; }
  .bodies-live .b-c0-beat.b-c0-lead { bottom: 20vh; }
  .bodies-live .b-c0-lead .b-lede { font-size: clamp(30px, 8.6vw, 40px); }
}