/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Exposure Italic';
  src: url('fonts/ExposureItalicVARVF.woff2') format('woff2-variations');
  font-weight: normal;
  font-display: block;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}

/* ---------- Base ---------- */

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

html {
  /* 1rem = 16px reference; all sizes below are px ÷ 16 */
  font-size: 100%;
}

body {
  background-color: #e8f7f7;
  margin: 2rem; /* 32px */
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Layout ---------- */

.page {
  min-height: calc(100dvh - 4rem); /* viewport minus the 32px body margins */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #2a7979;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

/* ---------- Type ---------- */

.heading {
  font-family: 'Exposure Italic', serif;
  font-variation-settings: 'EXPO' -30;
  font-weight: normal;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); /* 40px → 56px */
  line-height: 1.1429; /* 64/56 */
  letter-spacing: -0.02em; /* -2% */
  max-width: 57.5rem; /* 920px */
}

.subline {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  letter-spacing: 0.045rem; /* 0.72px */
  text-transform: uppercase;
  font-feature-settings: 'cpsp' 1, 'case' 1, 'zero' 1, 'calt' 0, 'liga' 0;
  max-width: 17.5rem; /* 280px */
}

/* ---------- Coming soon (pinned to the bottom) ---------- */

.comingsoon {
  position: fixed;
  left: 50%;
  bottom: 1rem; /* 16px from the bottom */
  transform: translateX(-50%);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  letter-spacing: 0.045rem; /* 0.72px */
  text-transform: uppercase;
  font-feature-settings: 'cpsp' 1, 'case' 1, 'zero' 1, 'calt' 0, 'liga' 0;
  color: #2a7979;
  white-space: nowrap;
}