:root {
  --color-red: #ff1d25; /* matches the logo */
  --color-text: #000000;
  --color-white: #ffffff;
  --color-bg: #f9f7f3;
  --font-display: "Helvetica Neue", Arial, sans-serif;
  --font-text: "Teko", var(--font-display);
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
}

/* Homepage: logo dead center on screen, text directly above and below it.
   Three rows: [equal space + headline] [logo] [subline + equal space] */
.coming-soon {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.coming-soon .headline {
  align-self: end;
}

.coming-soon .subline {
  align-self: start;
}

.coming-soon h1 {
  margin: 0;
}

.coming-soon img {
  display: block;
  width: min(80vw, 250px); /* 250x250, shrinks to fit small phones */
  height: auto;
}

/* "WE BACK." and "WINTER 2026" share the same look; only their sizes differ */
.headline,
.subline {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 700;
  font-style: italic; /* Teko has no italic version, so the browser slants it */
  letter-spacing: 0.02em;
  /* White letters with a black outline and a hard black drop shadow */
  color: var(--color-white);
  -webkit-text-stroke: 0.09em var(--color-text);
  paint-order: stroke fill; /* draw the outline behind the white so letters stay thick */
  /* Shadow of the whole outlined letter, so it sits an even distance away.
     Slightly more sideways than down to make up for the italic slant. */
  filter: drop-shadow(0.06em 0.045em 0 var(--color-text));
}

.headline {
  font-size: clamp(3rem, 16vw, 6.5rem);
}

.subline {
  font-size: clamp(2rem, 10vw, 3.5rem);
}