/* One view: the logo centred in a band, then one rounded media tile (the headline, the product and the glass loops),
   with the downloads bar resting in the tile's lower edge. The product's bottom edge sits under the bar's middle.
   Every size below follows the display; the product takes what the view's height leaves. */
:root {
  --gutter: clamp(16px, 4vw, 96px);
  --tw: min(1680px, calc(100vw - 2 * var(--gutter)));
  --band: clamp(56px, 8svh, 88px);
  --logo: clamp(100px, 7.8vw, 152px);
  --head: clamp(24px, 2.3vw, 38px);
  --sub: clamp(14px, 1.05vw, 17px);
  --lead-top: clamp(20px, 3svh, 36px);
  --lead-bottom: clamp(14px, 2.2svh, 28px);
  --lead: calc(var(--lead-top) + var(--head) * 1.17 + 8px + var(--sub) * 1.4 + var(--lead-bottom));
  /* the bar's height, room for a caption that wraps to two lines in a narrow cell */
  --bar: 176px;
  --foot: 48px;
  /* the product's width: a share of the tile (at least 640px while the tile allows), or what the height budget
     allows at the capture's 1.445 aspect */
  --pw: min(max(calc(var(--tw) * .62), min(calc(var(--tw) - 64px), 640px)),
            calc((100svh - var(--band) - var(--lead) - var(--bar) / 2 - var(--foot) - 2px) * 1.445));
  /* the headline and the bar share one width, so the headline stays on one line */
  --bw: min(calc(var(--tw) - 48px), max(840px, calc(var(--pw) * 1.3)));
}

main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--tw) 1fr;
  grid-template-areas: ". band ." ". tile ." ". bar ." ". note .";
  /* spare height above and below, never between the parts */
  align-content: center;
}

h1 { grid-area: band; height: var(--band); display: grid; place-items: center; }
.lockup { width: var(--logo); }

.scene {
  grid-area: tile;
  position: relative;
  --tile-pad: calc(var(--bar) / 2);
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  padding-bottom: var(--tile-pad);
  overflow: hidden;
  border-radius: clamp(20px, 2.2vw, 32px);
  background:
    radial-gradient(45% 60% at 100% 30%, #CF98ED, rgba(207, 152, 237, 0)),
    radial-gradient(40% 50% at 60% 0%, #EAC4DA, rgba(234, 196, 218, 0)),
    radial-gradient(50% 50% at 40% 100%, #CFE8F0, rgba(207, 232, 240, 0)),
    #E8E4EC;
}

/* the headline block shares the bar's width; text, product and bar sit on one axis */
.lead { grid-row: 1; position: relative; z-index: 1; max-width: var(--bw); padding: var(--lead-top) 24px var(--lead-bottom); }
.statement { font-size: var(--head); line-height: 1.17; }
.audience { margin-top: 8px; font-size: var(--sub); line-height: 1.4; }

.scene picture { grid-row: 2; grid-column: 1; position: relative; z-index: 1; }
.product { width: var(--pw); }

/* the glass shares the product's row and reaches the tile's lower edge, so it starts exactly where the text ends,
   however the text wraps */
.art { grid-row: 2; grid-column: 1; justify-self: stretch; position: relative; margin-bottom: calc(var(--tile-pad) * -1); }
.vortex { width: 58%; right: -22%; top: 0; }
.ring { width: 44%; left: -14%; bottom: -46%; }

.downloads {
  grid-area: bar;
  position: relative;
  z-index: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: var(--bw);
  min-height: var(--bar);
  margin-top: calc(var(--bar) * -1);
}

.downloads li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 20px; }
.downloads h2 { font-size: 19px; line-height: 24px; }
.downloads .caption { margin-top: 4px; font-size: 14px; line-height: 19px; text-wrap: balance; }
.downloads .button { min-height: 48px; padding: 0 24px; font-size: 16px; }
.downloads li + li { border-left: 1px solid var(--divider); }

.elsewhere { grid-area: note; margin-top: 12px; }

footer { padding: 16px var(--gutter); }

/* Wide screens: every cell shares the bar's rows (space, title, caption, buttons, space), so titles and buttons line
   up across the cells even when one caption wraps. */
@media (min-width: 901px) {
  .downloads { grid-template-rows: 1fr auto auto auto 1fr; }
  .downloads li { display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: center; align-content: center; gap: 0; }
  .downloads .label { display: contents; }
  .downloads h2 { grid-row: 2; }
  .downloads .caption { grid-row: 3; align-self: start; }
  .downloads .actions { grid-row: 4; margin-top: 12px; }
}

/* Touch screens wide enough for the bar: the same bar without buttons, so it shrinks to its labels. */
@media (pointer: coarse) and (min-width: 901px) {
  :root { --bar: 116px; }
}

/* Phones and portrait tablets: the same order, stacked; the downloads become a list below the tile. */
@media (max-width: 900px) {
  :root {
    --band: 60px;
    --logo: 120px;
    --head: clamp(24px, 6.6vw, 30px);
    --sub: 14px;
    --lead-top: 16px;
    --lead-bottom: 12px;
    /* fits the view where it can; short views scroll rather than shrink the product below 240px */
    --pw: min(calc(var(--tw) - 32px), max(240px, calc((100svh - 552px) * 1.445)));
  }
  .scene { --tile-pad: 24px; }
  .vortex { width: 90%; right: -40%; top: 0; }
  .ring { display: none; }
  .downloads { width: 100%; margin-top: 16px; grid-template-columns: 1fr; text-align: start; }
  .downloads li { flex-direction: row; justify-content: space-between; padding: 14px 16px; }
  .downloads h2 { font-size: 17px; line-height: 22px; }
  .downloads li > * { margin-right: auto; }
  .downloads li + li { border-left: 0; border-top: 1px solid var(--divider); }
  footer { padding: 12px var(--gutter); }
}