/* Home page, middle and bottom (owner: W3): "Start your adventure", the "Latest changelog" card and the
   illustrated download banner (partials/home/start.html, latest-changelog.html, banner.html).
   The panels, headings, eyebrow, link and download button are the shared classes of components.css
   (.parchment, .title, .eyebrow--soft, .link-more, .btn-download, .ios-note); the changelog entries
   inside the card are changelog.css's. This file lays the sections out and adds only what is
   particular to them. Colours, fonts and sizes come from tokens.css. */

/* ---------------------------------------------------------------- the two columns */

/* index.html: <div class="home-main container"> around start.html and latest-changelog.html. Side by
   side from 980 px, as in the design (start about 60 %, the card 40 %); stacked below that. */
.home-main {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
  margin-block: clamp(1rem, 2.2vw, 1.75rem);
}

@media (min-width: 61.25em) {
  .home-main {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1rem, 1.5vw, 1.375rem);
  }
}

@media (min-width: 75em) {
  .home-main {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- Start your adventure */

/* Its own padding (not .parchment's), so the picture can reach exactly to the frame. Beside a taller
   changelog card the panel stretches; the spare height then stays below its content. */
.home-start {
  --pad: clamp(1.5rem, 0.75rem + 2.5vw, 2.75rem);
  container: home-start / inline-size;
  padding: var(--pad);
}

@media (min-width: 61.25em) and (max-width: 74.99em) {
  .home-start {
    --pad: var(--space-5);
  }
}

.home-start__body {
  --art-max: 28.4375rem;               /* 455 px: never more than 1.3 times the 350 px artwork */
  --bleed: calc(var(--pad) - 0.5rem);  /* the picture stops 8 px inside the frame's gold line */
  --dot: 2.5rem;
  --step-fs: 1.25rem;
  --step-text: var(--fs-body);
  display: grid;
  grid-template-areas: "head" "steps" "art";
  row-gap: var(--space-5);
}

.home-start__head {
  grid-area: head;
}

.home-start__title {
  margin: 0;
}

.home-start__lead {
  margin-top: var(--space-2);
}

/* The steps: gold numbered circles on a thin gold line. */

.home-steps {
  grid-area: steps;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: home-step;
}

.home-step {
  position: relative;
  min-height: var(--dot);
  padding: 0 0 var(--space-5) calc(var(--dot) + var(--space-4));
  counter-increment: home-step;
}

.home-step:last-child {
  padding-bottom: 0;
}

/* A gold coin with white numerals. The gloss stays in the top third, above the digit, so the digit
   always sits on at least 3.4:1 (large bold text needs 3:1); the flat gold is 3.8:1. */
.home-step::before {
  content: counter(home-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 238 186 / 0.55) 0%, rgb(255 238 186 / 0) 42%), #b47622;
  box-shadow: inset 0 0 0 1px rgb(255 226 160 / 0.35), inset 0 -2px 4px rgb(90 50 5 / 0.3),
              0 1px 3px rgb(110 70 20 / 0.3);
  color: #fff;
  font-family: var(--font-heading);
  font-size: calc(var(--dot) * 0.5);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-shadow: 0 1px 1px rgb(90 50 5 / 0.5);
}

.home-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--dot) + var(--space-1));
  bottom: var(--space-1);
  left: calc(var(--dot) / 2 - 1px);
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(var(--c-gold-line), rgb(214 170 90 / 0.55));
}

.home-step__title {
  margin: 0;
  /* the first line sits centred on the circle */
  padding-top: max(0px, (var(--dot) - var(--step-fs) * var(--lh-heading)) / 2);
  font-size: var(--step-fs);
}

.home-step__text {
  margin-top: var(--space-1);
  color: var(--c-ink-soft);
  font-size: var(--step-text);
  line-height: var(--lh-snug);
}

/* The tablet and phone: the site's only device picture. It is a painted crop, not a cut-out, so its
   edges fade into the parchment. Stacked, it sits under the steps at its own size. */

.home-start__art {
  grid-area: art;
  justify-self: center;
  width: min(100%, 21.875rem);
}

.home-start__art img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
                      linear-gradient(to bottom, transparent, #000 14%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
              linear-gradient(to bottom, transparent, #000 14%, #000 92%, transparent);
  mask-composite: intersect;
}

/* Wide enough: the steps on the left and the picture beside them, level with the steps and reaching
   to the frame on the right, as in the design (its corner fades out before the frame's corner
   flourish). The steps are sized to the panel, and their column is just wide enough for "Download
   SyphonGo" on one line (10.6em of the title, plus the circle); the picture takes the rest, up to
   1.3 times its size. */
@container home-start (min-width: 29rem) {
  .home-start__body {
    --dot: clamp(2.25rem, 7cqi, 2.875rem);
    --step-fs: clamp(1.0625rem, 3.3cqi, 1.4375rem);
    --step-text: clamp(0.9375rem, 2.9cqi, 1.0625rem);
    --steps-min: calc(var(--step-fs) * 10.6 + var(--dot) + var(--space-4));
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 100% - var(--steps-min) - var(--space-2), var(--art-max));
    grid-template-areas: "head head" "steps art";
    column-gap: var(--space-2);
    row-gap: var(--space-4);
  }

  .home-steps {
    align-self: start;
  }

  /* Centred on the steps. When it is the taller of the two it reaches into the padding below, so in
     a panel of its own height it stands on the frame, as in the design. */
  .home-start__art {
    align-self: center;
    justify-self: end;
    width: calc(100% + var(--bleed));
    max-width: var(--art-max);
    margin: 0 calc(-1 * var(--bleed)) calc(-1 * var(--bleed)) 0;
  }

  .home-start__art img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 97%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 97%, transparent),
                        radial-gradient(circle at 100% 100%, transparent 1.75rem, #000 3.25rem);
    mask-image: linear-gradient(to right, transparent, #000 13%, #000 97%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 97%, transparent),
                radial-gradient(circle at 100% 100%, transparent 1.75rem, #000 3.25rem);
  }
}

/* ---------------------------------------------------------------- Latest changelog */

/* The entries and their rules are changelog.css's; this frames them: the heading, the version line
   (.eyebrow--soft) and the link (.link-more) at the foot. The heading is sized to the card, so the
   icon, the words and both sparkles stay on one line (its markup has no white space between the icon
   and the words, which would widen that line). */
.home-latest-changelog {
  container: home-changelog / inline-size;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem);
}

.home-latest-changelog__head,
.home-latest-changelog__entries,
.home-latest-changelog__more {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.home-latest-changelog__head {
  margin-bottom: var(--space-4);
  text-align: center;
}

.home-latest-changelog__title {
  margin: 0;
  font-size: clamp(1.5rem, 8.2cqi, 2.375rem);
}

.home-latest-changelog__icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
}

.home-latest-changelog__icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1.5px rgb(110 70 20 / 0.35));
}

.home-latest-changelog__sub {
  margin-top: var(--space-2);
}

/* The narrow card beside the steps (980 to 1199 px): less padding, and a version line a little
   smaller than .eyebrow--soft's, so the version and the date stay on one line. (Not in container
   units: Chrome can paint those stale on this inline-flex line, and QA saw it "move".) */
@media (min-width: 61.25em) and (max-width: 74.99em) {
  .home-latest-changelog {
    padding-block: var(--space-6);
  }

  .home-latest-changelog__sub {
    font-size: 1rem;
  }
}

.home-latest-changelog__entries {
  flex: 1 1 auto;
}

.home-latest-changelog__more {
  margin-top: var(--space-2);
  text-align: right;
}

/* ---------------------------------------------------------------- The download banner */

.home-banner {
  margin-block: clamp(1rem, 2.2vw, 1.75rem) var(--space-2);
}

/* A painted band in a gold frame: rings around it and an ogee notch with a diamond in each corner.
   It is the banner's art section (base.css, Layers): the backdrop and the treasure scene are at
   z-index 0, an .fx-layer a script appends to the band at 1, the corners at 1 after it, and the panel
   at 2. So the band must be position: relative but no stacking context (no isolation, filter or the
   like); its overflow and rounded corners still clip the art and the layer. */
.home-banner__band {
  --corner: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem);
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M0 0H40C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40Z' fill='%23fcf4e0'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23a8732a' stroke-width='2.6'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23f7dc91' stroke-width='1'/%3E%3Cpath d='M4.5 10 10 4.5 15.5 10 10 15.5Z' fill='%23e3a743' stroke='%23a96c18' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6 12.4 10 10 12.4 7.6 10Z' fill='%23fff4cf' opacity='.55'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix%28-1 0 0 1 48 0%29'%3E%3Cpath d='M0 0H40C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40Z' fill='%23fcf4e0'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23a8732a' stroke-width='2.6'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23f7dc91' stroke-width='1'/%3E%3Cpath d='M4.5 10 10 4.5 15.5 10 10 15.5Z' fill='%23e3a743' stroke='%23a96c18' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6 12.4 10 10 12.4 7.6 10Z' fill='%23fff4cf' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix%281 0 0 -1 0 48%29'%3E%3Cpath d='M0 0H40C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40Z' fill='%23fcf4e0'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23a8732a' stroke-width='2.6'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23f7dc91' stroke-width='1'/%3E%3Cpath d='M4.5 10 10 4.5 15.5 10 10 15.5Z' fill='%23e3a743' stroke='%23a96c18' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6 12.4 10 10 12.4 7.6 10Z' fill='%23fff4cf' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix%28-1 0 0 -1 48 48%29'%3E%3Cpath d='M0 0H40C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40Z' fill='%23fcf4e0'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23a8732a' stroke-width='2.6'/%3E%3Cpath d='M40 0C40 7.5 34.5 12 28 12C19 12 12 19 12 28C12 34.5 7.5 40 0 40' fill='none' stroke='%23f7dc91' stroke-width='1'/%3E%3Cpath d='M4.5 10 10 4.5 15.5 10 10 15.5Z' fill='%23e3a743' stroke='%23a96c18' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6 12.4 10 10 12.4 7.6 10Z' fill='%23fff4cf' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  display: grid;
  margin: 5px;   /* room for the rings */
  overflow: hidden;
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 1px var(--c-gold-deep), 0 0 0 4px var(--c-gold-light), 0 0 0 5px var(--c-gold-deep),
              var(--shadow-panel);
}

.home-banner__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    var(--corner-tl) left top / var(--corner) var(--corner) no-repeat,
    var(--corner-tr) right top / var(--corner) var(--corner) no-repeat,
    var(--corner-bl) left bottom / var(--corner) var(--corner) no-repeat,
    var(--corner-br) right bottom / var(--corner) var(--corner) no-repeat;
  pointer-events: none;
}

/* The painted world behind it all: the bottom of the hero artwork (flowers, a wall, a poring), so the
   band reads as one scene. Decorative. Its <picture> has the hero's sources and sizes, so the browser
   reuses the file the hero loaded. On a phone it only shows around the panel. */
.home-banner__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-banner__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* On a phone the picture spans the band, up to 1.15 times its size, and fades into the backdrop.
   Positioned, so it lies over the backdrop (the same z-index, later in the page). */
.home-banner__scene {
  position: relative;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  width: min(100%, 28.75rem);
}

.home-banner__scene img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
              linear-gradient(to bottom, #000 78%, transparent);
  mask-composite: intersect;
}

/* The panel is a size container, so its heading stays on one line at every width. On a phone it lies
   over the foot of the picture, with slim margins so the button's label fits on one line. */
.home-banner__panel {
  position: relative;
  z-index: 2;
  grid-row: 2;
  grid-column: 1;
  margin: calc(-1 * var(--space-7)) var(--space-2) var(--space-2);
  padding-inline: var(--space-4);
  container-type: inline-size;
  text-align: center;
}

.home-banner__title {
  margin: 0;
  font-size: min(var(--fs-h2), 9.6cqi);
}

.home-banner__text {
  margin: var(--space-2) 0 var(--space-4);
}

.home-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.home-banner__actions .btn-download {
  --btn-px: var(--space-4);
  max-width: 100%;
}

/* Tablets and small laptops: the picture fills the band's height (cropped at its left, never above
   1.3 times its size) and the panel takes the rest of the width. */
@media (min-width: 48em) {
  .home-banner__band {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    align-items: center;
    min-height: 18rem;
  }

  .home-banner__backdrop img {
    object-position: 100% 100%;
  }

  .home-banner__scene {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    justify-self: stretch;
    width: auto;
  }

  .home-banner__scene img {
    height: 100%;
    object-fit: cover;
    object-position: 72% 100%;
    -webkit-mask-image: linear-gradient(to right, #000 76%, transparent);
    mask-image: linear-gradient(to right, #000 76%, transparent);
  }

  .home-banner__panel {
    grid-row: 1;
    grid-column: 2;
    margin: clamp(0.9rem, 1.8vw, 1.5rem) var(--space-4) clamp(0.9rem, 1.8vw, 1.5rem) calc(-1 * var(--space-5));
    padding-inline: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  }

  .home-banner__actions .btn-download {
    --btn-px: clamp(1.25rem, 0.9rem + 1.3vw, 2rem);
  }
}

/* Desktop, as in the design: the picture at 1.15 times its size on the left, the panel, and a strip
   of the painted flowers on the right. */
@media (min-width: 75em) {
  .home-banner__band {
    grid-template-columns: minmax(0, 43fr) minmax(0, 45fr) minmax(0, 12fr);
    background: linear-gradient(180deg, #bcd7ef 0%, #e6edf0 38%, #f4ead2 72%);
  }

  /* The artwork at the hero's own scale (sizes="100vw"), anchored bottom right, so the strip on the
     right shows its flowers and poring. Its top fades into a soft sky, so the adventurers higher up
     never show cut off at the band's edge. */
  .home-banner__backdrop img {
    object-fit: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 42%);
    mask-image: linear-gradient(to bottom, transparent 6%, #000 42%);
  }

  .home-banner__scene {
    align-self: end;
    justify-self: start;
    width: min(100%, 28.75rem);   /* 460 px: never more than 1.15 times the 400 px artwork, which is
                                     only a crop of the mock-up: larger, it looks soft */
  }

  .home-banner__scene img {
    height: auto;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(to right, #000 74%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 74%, transparent),
                linear-gradient(to bottom, transparent, #000 12%);
    mask-composite: intersect;
  }

  .home-banner__panel {
    margin-right: 0;
  }
}