/* Copy of the Wix Coming Soon screen (https://aciaudo.wixsite.com/noble-code-design) in the site's colours and fonts (`--color-*` from styles/globals.css, kept in step by hand; this folder is deleted at go-live). Wix draws one portrait column, 536 wide on desktop and 277 of 390 on mobile; every size here is a share of that column width `--c`, measured on the Wix page. The column is capped at Wix's 536 and by the screen height, and sits in the middle of the screen, so it never scrolls. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/geist-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

/* Mobile column (Wix at 390: 277 wide, labels 18, isotype 86, 97 above and below it). The column is about 1.43 of its width high. */
:root {
  --color-graphite: #3d3d3d;
  --color-burgundy: #3a1816;
  --color-steel-blue: #a1afb2;
  --color-soft-beige: #d2ccbb;
  --c: min(71vw, calc((100svh - 3rem) / 1.43));
  --label: 0.065;
  --isotype: 0.31;
  --space-above: 0.35;
  --space-below: 0.35;
  --row-gap: 0.03;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

/* Desktop column (Wix at 1440 and 1920: 536 wide, labels 25, isotype 112, 156 above it and 195 below). About 1.31 of its width high. */
@media (width >= 48rem) {
  :root {
    --c: min(33.5rem, calc(100vw - 5rem), calc((100svh - 5rem) / 1.31));
    --label: 0.0466;
    --isotype: 0.209;
    --space-above: 0.29;
    --space-below: 0.364;
    --row-gap: 0.037;
  }
}

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

body {
  display: grid;
  place-items: center;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--color-burgundy);
  background: var(--color-steel-blue);
}

.poster {
  display: flex;
  flex-direction: column;
  width: var(--c);
}

h1,
p {
  margin: 0;
}

svg {
  display: block;
  height: auto;
}

h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: inherit;
}

.wordmark {
  width: 100%;
  aspect-ratio: 8 / 1;
}

/* "DESIGN" under the right end of the wordmark, as in the Wix logo. */
.design {
  margin-top: calc(var(--c) * 0.01);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(var(--c) * var(--label));
  line-height: 1.2;
  text-transform: uppercase;
}

.isotype {
  width: calc(var(--c) * var(--isotype));
  margin: calc(var(--c) * var(--space-above)) auto
    calc(var(--c) * var(--space-below));
}

.bottom {
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * var(--row-gap));
}

.row {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(var(--c) * var(--label));
  line-height: 1.32;
  color: var(--color-graphite);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.row .end {
  color: var(--color-soft-beige);
}

/* Geist Medium sized so the line runs the full column width, as Wix's statement does. */
.statement {
  font-size: calc(var(--c) * 0.0806);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}