/* NEWD coming-soon page. Standalone: no build step, no JavaScript.
   Layout follows Sam's landing page (input/Landing Page/Web Landing Page-01.png).
   The page is always exactly one screen: everything is sized in a unit tied to both the width and the
   height of the window, so it scales down to fit instead of scrolling or pushing anything out of view. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jost-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jost-latin-italic-var.woff2') format('woff2');
}

:root {
  --walnut: #3b2b24;
  --ivory: #f4f0e8;
  /* Clarity City replaces Jost for the headline once its licence is in input/. */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body: 'Jost', system-ui, sans-serif;
  /* Portrait: 1 unit = 1px of a 390 × 844 phone, scaled to fit the window. */
  --min-h: 0px;
  --m: min(calc(100vw / 390), calc(100svh / 844));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* overflow set on <html> too: otherwise the browser applies body's overflow to the window, which
   mobile browsers don't reliably honour. The page is exactly one screen, so nothing scrolls, except
   below the safety-net minimum height (--min-h), where it scrolls instead of overlapping. */
html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
}
html,
body {
  margin: 0;
}

/* clip, not just hidden: a clipped box isn't a scroll container at all, so nothing can scroll it. */
body {
  position: relative;
  overflow: hidden;
  overflow: clip;
  height: max(100svh, var(--min-h));
  height: max(100dvh, var(--min-h));
  background: var(--ivory);
  color: var(--walnut);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Portrait (phones, portrait tablets) ---------- */

.brand {
  position: absolute;
  z-index: 1;
  top: calc(var(--m) * 26);
  left: calc(var(--m) * 22);
}
/* Floors on the logo and the headline keep the hierarchy intact on very small screens, where the
   scale unit would otherwise shrink them below the body text's 14–16px minimums. */
.brand__mark {
  display: block;
  width: max(5.5rem, calc(var(--m) * 104));
  height: auto;
  fill: var(--walnut);
}

.intro {
  position: absolute;
  z-index: 1;
  inset: calc(var(--m) * 232) calc(var(--m) * 20) calc(var(--m) * 290);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 calc(var(--m) * 14);
  font-size: max(0.875rem, calc(var(--m) * 13.5));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline: 0.75em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.2em;
}

h1 {
  margin: 0;
  max-width: 11ch;
  font-family: var(--font-display);
  font-size: max(2rem, calc(var(--m) * 42));
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.lede {
  margin: calc(var(--m) * 16) 0 0;
  max-width: 22em;
  font-size: max(0.9375rem, calc(var(--m) * 17));
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.tagline {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--m) * 250);
  text-align: center;
}
.tagline p {
  margin: 0;
  font-size: max(0.875rem, calc(var(--m) * 13));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tagline span,
.tagline em {
  display: inline-block;
}
.tagline em {
  font-style: italic;
}

/* Decorative shapes. Each SVG keeps its artwork's aspect ratio; the outline sits behind the photo, and
   the photo fills the whole shape. As in the mockup, the arc sits on the frame's top and right edges
   (its flat end, x 716 of 928.66, on the right edge) and the dot and curve run off the frame. */
.shape {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.shape__outline {
  fill: var(--walnut);
}
.shape--arc {
  top: 0;
  right: calc(var(--m) * -91.5);
  width: calc(var(--m) * 400);
}
/* Phones: dot low on the left, curve lower on the right, both large and running off the frame;
   staggered so they don't read as a pair side by side. */
.shape--dot {
  left: calc(var(--m) * -100);
  bottom: calc(var(--m) * -112);
  width: calc(var(--m) * 320);
}
/* Positioned so the curve's bar clears the dot; the visible part of the curve stays within the
   ~496 units its photo covers. */
.shape--curve {
  right: calc(var(--m) * -220);
  bottom: calc(var(--m) * -165);
  width: calc(var(--m) * 440);
}

/* ---------- Landscape (laptops, desktops, tablets and phones held sideways) ---------- */

/* Any landscape window, phones included: a landscape phone gets the desktop composition scaled down,
   not the portrait one squeezed into a short screen. */
@media (min-aspect-ratio: 1 / 1) {
  :root {
    /* 1 unit = 1px of the mockup's 1400 × 788 canvas, scaled to fit the window. */
    --min-h: 18.75rem;
    --u: min(calc(100vw / 1400), calc(max(100svh, var(--min-h)) / 788));
    /* Shape unit: the same as --u, except on short screens (below). */
    --s: var(--u);
  }
  .brand {
    top: calc(var(--u) * 62);
    left: calc(var(--u) * 94);
  }
  .brand__mark {
    width: max(5.5rem, calc(var(--u) * 182));
  }
  .intro {
    inset: calc(var(--u) * 120) 0 calc(var(--u) * 110);
    padding-inline: calc(var(--u) * 300);
  }
  .eyebrow {
    margin-bottom: calc(var(--u) * 22);
    font-size: max(0.875rem, calc(var(--u) * 17));
  }
  /* The title scales with the composition so it never grows into the shapes; 80px at the mockup's
     size (a touch under the mockup's 86). */
  h1 {
    max-width: calc(var(--u) * 820);
    font-size: max(2rem, calc(var(--u) * 80));
  }
  .lede {
    margin-top: calc(var(--u) * 26);
    /* On short screens the 16px floor makes the lines wider than the gap between the shapes; wrap instead. */
    max-width: max(16rem, calc(var(--u) * 560));
    font-size: max(1rem, calc(var(--u) * 20));
  }
  /* Kept inside the gap between the dot and the curve; when that gap gets narrower than the line,
     it breaks between the two sentences, as in the stacked logo lockup. */
  .tagline {
    left: 50%;
    right: auto;
    bottom: calc(var(--u) * 36);
    width: max(11rem, calc(var(--u) * 390));
    transform: translateX(-50%);
  }
  .tagline p {
    font-size: max(0.875rem, calc(var(--u) * 14));
  }
  /* Sizes and positions measured from the mockup; the frame cuts the dot and curve. */
  .shape--arc {
    right: calc(var(--s) * -154);
    width: calc(var(--s) * 676);
  }
  .shape--dot {
    left: calc(var(--s) * -78);
    bottom: calc(var(--s) * -131);
    width: calc(var(--s) * 518);
  }
  .shape--curve {
    right: calc(var(--s) * -171);
    bottom: calc(var(--s) * -258);
    width: calc(var(--s) * 693);
  }
}

/* Phones held sideways: the text can't shrink below its minimums, so the photos shrink instead to
   leave it room. Still one screen, no scrolling. */
@media (min-aspect-ratio: 1 / 1) and (max-height: 30rem) {
  :root {
    --s: calc(var(--u) * 0.8);
  }
}

/* Angle of the quarter circle's radial reveal during the intro (90deg = fully shown, the default). */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}

/* Intro (intro.js). Until it sets the opening frame, the page is hidden; without JavaScript, or with
   reduced motion, none of this applies and the finished page shows. */
.intro-pending body > * {
  opacity: 0;
}
.shape__cover {
  fill: var(--walnut);
  opacity: 0;
}