/* =========================================================================
   The opening screen, framed

   The picture is held in a frame inset from the screen's edges, its
   corners rounded, with a notch cut down into the middle of its top edge
   and a smaller one up into its foot. The notches are cut, not painted,
   so the page's black shows in them: the HAAVN BLACK device sits in the
   top one, the day and night slider in the foot.

   Over the picture, centred in its upper half: the SOLUM name, the line
   on the series under it, and who drew it. Low in the picture, the date
   pre-orders open.

   The frame's outline is one shape (clip-path: shape()), drawn from a few
   measures below; each notch's walls slant in at a fixed pitch, and every
   corner is rounded along them.
   ========================================================================= */

.page {
  /* the frame's inset from the screen */
  --frame-x: 2vw;
  --frame-y: 1.4vw;
  /* the top notch: half its width at the edge, and its depth */
  --notch-half: 24%;
  --notch-d: 3.35vw;
  /* the foot's */
  --foot-half: 12.5%;
  --foot-d: 2.4vw;
}

/* Cut as the site's cards are (tokens.css, finish-card.css, the notch
   in my-solum.js), in their measures: the top corners chamfered 2.4% of
   the width, softened 0.4%; the foot's corners rounded 1.3%; each notch's
   walls running 0.55 across for every one down, turning in from the edge
   at 5px and into the floor at 11.5px (the tab's rounding and the gap
   round it, as the cards' notch has them), grown with the root size as
   theirs are. One shape, in shape(). */
.backdrop {
  inset: var(--frame-y) var(--frame-x);
  --W: calc(100vw - 2 * var(--frame-x));
  --c: calc(0.024 * var(--W));
  --cr: calc(0.004 * var(--W));
  --kk: calc(0.004 * var(--W) * 0.7071);
  --br: calc(0.013 * var(--W));
  --f: 0.3125rem;
  --fr: 0.721rem;
  /* (along each wall, a unit: 0.4819 across, 0.8762 down) */
  --L: calc(50% - var(--notch-half));
  --R: calc(50% + var(--notch-half));
  --N: calc(0.55 * var(--notch-d));
  --l: calc(50% - var(--foot-half));
  --rr: calc(50% + var(--foot-half));
  --n: calc(0.55 * var(--foot-d));
  clip-path: shape(from 0 calc(100% - var(--br)),
    line to 0 calc(var(--c) + var(--cr)),
    curve to var(--kk) calc(var(--c) - var(--kk)) with 0 var(--c),
    line to calc(var(--c) - var(--kk)) var(--kk),
    curve to calc(var(--c) + var(--cr)) 0 with var(--c) 0,
    line to calc(var(--L) - var(--f)) 0,
    curve to calc(var(--L) + 0.4819 * var(--f)) calc(0.8762 * var(--f)) with var(--L) 0,
    line to calc(var(--L) + var(--N) - 0.4819 * var(--fr)) calc(var(--notch-d) - 0.8762 * var(--fr)),
    curve to calc(var(--L) + var(--N) + var(--fr)) var(--notch-d) with calc(var(--L) + var(--N)) var(--notch-d),
    line to calc(var(--R) - var(--N) - var(--fr)) var(--notch-d),
    curve to calc(var(--R) - var(--N) + 0.4819 * var(--fr)) calc(var(--notch-d) - 0.8762 * var(--fr)) with calc(var(--R) - var(--N)) var(--notch-d),
    line to calc(var(--R) - 0.4819 * var(--f)) calc(0.8762 * var(--f)),
    curve to calc(var(--R) + var(--f)) 0 with var(--R) 0,
    line to calc(100% - var(--c) - var(--cr)) 0,
    curve to calc(100% - var(--c) + var(--kk)) var(--kk) with calc(100% - var(--c)) 0,
    line to calc(100% - var(--kk)) calc(var(--c) - var(--kk)),
    curve to 100% calc(var(--c) + var(--cr)) with 100% var(--c),
    line to 100% calc(100% - var(--br)),
    arc to calc(100% - var(--br)) 100% of var(--br) cw,
    line to calc(var(--rr) + var(--f)) 100%,
    curve to calc(var(--rr) - 0.4819 * var(--f)) calc(100% - 0.8762 * var(--f)) with var(--rr) 100%,
    line to calc(var(--rr) - var(--n) + 0.4819 * var(--fr)) calc(100% - var(--foot-d) + 0.8762 * var(--fr)),
    curve to calc(var(--rr) - var(--n) - var(--fr)) calc(100% - var(--foot-d)) with calc(var(--rr) - var(--n)) calc(100% - var(--foot-d)),
    line to calc(var(--l) + var(--n) + var(--fr)) calc(100% - var(--foot-d)),
    curve to calc(var(--l) + var(--n) - 0.4819 * var(--fr)) calc(100% - var(--foot-d) + 0.8762 * var(--fr)) with calc(var(--l) + var(--n)) calc(100% - var(--foot-d)),
    line to calc(var(--l) + 0.4819 * var(--f)) calc(100% - 0.8762 * var(--f)),
    curve to calc(var(--l) - var(--f)) 100% with var(--l) 100%,
    line to var(--br) 100%,
    arc to 0 calc(100% - var(--br)) of var(--br) cw,
    close);
}

/* ---- The header: only the device, in the top notch ---- */
.page > .site-header {
  position: absolute;
  top: var(--frame-y);
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--notch-d);
  justify-content: center;
}

/* The picture as it is, with no more shade than the words need: a little
   across the top, where they sit, and a little at the foot. (The scrim
   that faded the unframed picture into the page's black is not wanted.) */
.backdrop__scrim {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.28) 0%, transparent 34%),
    linear-gradient(0deg, rgb(0 0 0 / 0.3) 0%, transparent 24%);
}

.site-header .wordmark {
  display: grid;
  place-items: center;
  width: auto;
}

.frame__device {
  display: block;
  width: clamp(1.75rem, 2.3vw, 2.75rem);
  margin: 0;
  opacity: 0.9;
}

/* ---- Over the picture ---- */
.launch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.launch::before {
  display: none;    /* the rule the name stood on */
}

.launch__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(12.9vw - var(--gutter) * 0.8);
}

.launch .hero {
  --hero-width: 39vw;
  grid-area: auto;
  width: var(--hero-width);
  margin: 0;
}

.launch__line {
  margin: 2.6vw 0 0;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.43vw, 1.6rem);
  letter-spacing: 0.01em;
  color: #f4f6f7;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.35);
}

/* the series' name, in the headlines' silver */
.launch__line span {
  background: linear-gradient(100deg, #e4ebf1 0%, #b9c7d3 45%, #9fb0bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.launch__credit,
.launch__date {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.9vw, 1rem);
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}

.launch__credit {
  margin-top: 1.9vw;
}

/* the date, low in the picture */
.launch__date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10vw - var(--gutter) * 0.8 + var(--frame-y));
}

/* ---- The slider, across the foot's notch ---- */
.launch .daylight {
  --track: 20.1vw;
  --thumb: clamp(1.5rem, 1.7vw, 2rem);
  position: absolute;
  left: calc(50% - var(--track) / 2);
  top: auto;
  right: auto;
  /* its middle on the notch's: the reveal owns translate, so placed by its foot */
  bottom: calc(var(--frame-y) - var(--gutter) * 0.8 - var(--safe-bottom) + var(--foot-d) / 2 - var(--thumb) / 2);
  translate: none;
  display: block;
  padding: 0;
}

.launch .daylight__end {
  display: none;
}

.launch .daylight__track {
  width: var(--track);
  height: var(--thumb);
}

.launch .daylight__track::before {
  top: 50%;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
  translate: 0 -50%;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.22);
  box-shadow: none;
}

.launch .daylight__thumb {
  top: 0;
  left: calc(var(--v) * (100% - var(--thumb)));
  border-color: rgb(255 255 255 / 0.1);
  background: linear-gradient(180deg, rgb(120 126 133 / 0.9), rgb(70 75 80 / 0.92));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 12px -6px rgb(0 0 0 / 0.8);
  color: rgb(28 30 33);
}

.launch .daylight__thumb svg {
  width: 62%;
  height: 62%;
}

/* ---- On a wide screen, the words in the sky ----
   The wide render is cut to the frame's height there, so the roof's
   highest point is always 29.5% of the way down the frame. The name and
   the line are centred in the sky between the top notch's floor and
   that point, as much air over them as under, the name made smaller only where a short screen
   leaves the sky too shallow for it at its width. Who drew it goes to
   the frame's corner. */
@media (min-width: 64rem) {
  .page {
    --sky-top: calc(var(--frame-y) + var(--notch-d));
    --sky-bottom: calc(var(--frame-y) + 0.2954 * (100svh - 2 * var(--frame-y)));
    --sky-h: calc(var(--sky-bottom) - var(--sky-top));
  }

  .launch__title {
    position: absolute;
    left: 0;
    right: 0;
    /* (and set a touch low of centre, 0.83vw: about 3mm on a laptop) */
    top: calc(var(--sky-top) - var(--gutter) * 0.8 - var(--safe-top) + 0.83vw);
    height: var(--sky-h);
    margin: 0;
    justify-content: center;
  }

  /* centred in the sky, so the air over the name and under the line is
     the same; the name no larger than leaves at least 1.6vw of it at
     each end (the line and its gap are about 4vw) */
  .launch .hero {
    --hero-width: min(39vw, (var(--sky-h) - 4vw - 3.2vw) / 0.1193);
  }

  .launch__line {
    margin-top: 1.6vw;
  }

  /* Who drew it, set aside from the name: small and quiet in the frame's
     bottom-left corner, level with the slider in the notch, as a credit
     sits at the foot of a photograph. */
  .launch__credit {
    position: absolute;
    left: calc(var(--frame-x) + 1.6vw - var(--gutter) - var(--safe-left));
    bottom: calc(var(--frame-y) - var(--gutter) * 0.8 - var(--safe-bottom) + var(--foot-d) / 2 - 0.65em);
    margin: 0;
    font-size: clamp(0.72rem, 0.78vw, 0.9rem);
    color: rgb(255 255 255 / 0.62);
    text-align: left;
  }
}

/* ---- Phones: the frame tighter, the notches deeper for their marks ---- */
@media (max-width: 47.99rem) {
  .page {
    --frame-x: 2.5vw;
    --frame-y: 2.5vw;
    --notch-half: 22%;
    --notch-d: 11vw;
    --foot-half: 32%;
    --foot-d: 10vw;
  }

  .frame__device {
    width: 7vw;
  }

  .launch__title {
    margin-top: 22vw;
  }

  .launch .hero {
    --hero-width: 78vw;
  }

  .launch__line {
    margin-top: 6vw;
    font-size: 3.6vw;
  }

  .launch__credit {
    margin-top: 4vw;
    font-size: 3.2vw;
  }

  .launch__date {
    bottom: calc(22vw - var(--gutter) * 0.8 + var(--frame-y));
    font-size: 3.2vw;
  }

  .launch .daylight {
    --track: 52vw;
    --thumb: 7vw;
  }
}