/* ==========================================================================
   Water Tower — splash page
   Type-only lockup on a cream ground. No JS, no interactivity beyond the
   email link. Brand rule: WATER is always civic blue, TOWER always rust.
   ========================================================================== */

/* --- Fonts (client-licensed, supplied by Water Tower) --------------------- */

@font-face {
  font-family: 'Cut and Shave';
  src: url('fonts/OTRCutAndShave-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Old Sock';
  src: url('fonts/OTROldSockRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Big Bird';
  src: url('fonts/TAYBigBirdRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --cream: #f6efe2;
  --civic-blue: #274690;
  --rust-orange: #c2451e;
  --soft-ink: #1e1c19;

  --font-display: 'Cut and Shave', Georgia, serif;
  --font-label: 'Big Bird', Georgia, serif;
  --font-accent: 'Old Sock', Georgia, serif;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--soft-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.splash {
  min-height: 100vh;
  min-height: 100dvh; /* avoids the mobile URL-bar jump */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

/* --- Greeting ------------------------------------------------------------- */

.greeting {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 3px;
  text-indent: 3px; /* optically re-centers the tracked line */
  text-transform: uppercase;
  color: var(--rust-orange);
}

/* --- Wordmark ------------------------------------------------------------- */

.wordmark {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 160px);
  font-weight: 400;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 0.98;
  text-transform: uppercase;
}

.wordmark__water { color: var(--civic-blue); }
.wordmark__tower { color: var(--rust-orange); }

/* --- Tagline -------------------------------------------------------------- */

.tagline {
  margin: 32px 0 0;
  font-family: var(--font-label);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: 7px;
  text-indent: 7px;
  text-transform: uppercase;
  color: var(--soft-ink);
}

/* --- Divider -------------------------------------------------------------- */

.rule {
  width: 120px;
  height: 2px;
  margin: 40px 0;
  border: 0;
  background: var(--soft-ink);
}

/* --- Description ---------------------------------------------------------- */

.description {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-accent);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 2px;
  text-indent: 2px;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--soft-ink);
}

/* --- Email ---------------------------------------------------------------- */

.email {
  margin-top: 36px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 4px;
  text-indent: 4px;
  text-transform: uppercase;
  color: var(--rust-orange);
  text-decoration: none;
  transition: color 120ms ease;
}

.email:hover,
.email:focus-visible {
  color: var(--civic-blue);
}

@media (prefers-reduced-motion: reduce) {
  .email { transition: none; }
}