:root { color-scheme: dark; --gold:#f0c57a; --mist:#d7e3ef; }

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

html, body {
  height: 100%;
  background: #081018;
  color: var(--mist);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
}

.wrap { position: relative; min-height: 100%; }

#river {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.copy {
  position: absolute;
  left: 20px;
  top: 20px;
  width: min(320px, calc(100% - 40px));
  pointer-events: none;
}

.copy button { pointer-events: auto; }

.kicker {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold);
}

h1 {
  margin-top: 8px;
  font-size: clamp(32px, 7vw, 54px);
  line-height: 0.9;
  font-weight: 500;
}

.lead { margin-top: 12px; line-height: 1.45; color: rgba(215,227,239,0.78); }

.hud {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

button {
  margin-top: 16px;
  border: 1px solid rgba(240,197,122,0.4);
  background: transparent;
  color: var(--gold);
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}