:root {
  --night: #14213d;
  --night-deep: #0d1730;
  --lapis: #2e4e9e;
  --gold: #d4af37;
  --gold-soft: #e9d48a;
  --marble: #f3f4f1;
  --stone: #5b6274;
  --pomegranate: #a3293c;
  --ink: #1a2238;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--marble);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--lapis); text-underline-offset: 0.18em; }
a:hover { color: var(--night); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Hero: the night sky over the mountain, with the wordmark from the wireframe */
.hero {
  position: relative;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 14%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 40%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 18%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 62%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 80%, #fff6 50%, transparent 51%),
    radial-gradient(ellipse at 50% 120%, var(--lapis) 0%, var(--night) 55%, var(--night-deep) 100%);
  color: var(--marble);
  text-align: center;
  padding: clamp(3.5rem, 10vw, 7rem) 1rem clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
}

.laurel {
  width: clamp(120px, 22vw, 200px);
  color: var(--gold);
  display: block;
  margin: 0 auto -0.5rem;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--gold-soft);
}

.wm-born,
.wm-olympus {
  font-size: clamp(3rem, 13vw, 8.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f6e7ad 0%, var(--gold) 70%, #a8862a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wm-of {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  letter-spacing: 0.3em;
  color: var(--marble);
  margin: 0.35em 0 0.2em;
  text-transform: lowercase;
}

.lede {
  max-width: 34ch;
  margin: 2rem auto 0;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 300;
  color: #dfe3ee;
}

/* Greek key band: the one decorative device, used once */
.meander {
  height: 22px;
  background-color: var(--night-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 19h40V3H8v12h24V7H16v4' fill='none' stroke='%23d4af37' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1rem 2rem;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2;
  color: var(--night);
  margin: 0 0 1rem;
}

.about p { margin: 0 0 1rem; }

.gains {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}

.gains li {
  border: 1.5px solid var(--night);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-weight: 400;
  font-size: 0.95rem;
}

.asl {
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
}

.asl strong { font-weight: 600; }

.join {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid #c9cdd6;
}

.join > p { margin: 0 0 1.5rem; }

form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.field {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  font-weight: 400;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--stone);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

input[type="email"]:focus-visible { outline-offset: 1px; }

button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--night);
  color: var(--gold-soft);
  cursor: pointer;
}

button:hover { background: var(--lapis); color: #fff; }
button[disabled] { opacity: 0.6; cursor: progress; }

.status {
  min-height: 1.6em;
  margin: 0.8rem 0 0;
  font-weight: 400;
}

.status.ok { color: #1f6b3a; }
.status.err { color: var(--pomegranate); }

/* Honeypot field hidden from people, visible to naive bots */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  color: var(--stone);
  font-size: 0.9rem;
}

footer p { margin: 0 0 0.3rem; }

@media (prefers-reduced-motion: no-preference) {
  .wordmark > span {
    animation: rise 900ms cubic-bezier(.2, .7, .2, 1) both;
  }
  .wm-of { animation-delay: 150ms; }
  .wm-olympus { animation-delay: 300ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 480px) {
  button { flex: 1 1 100%; }
}

/* Top links over the hero */
.sitenav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.25rem;
  padding: 0.9rem clamp(0.75rem, 3vw, 1.75rem);
  font-size: 0.95rem;
}

.sitenav a {
  color: #dfe3ee;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

.sitenav a:hover { color: var(--night); background: var(--gold-soft); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.hero-btn-gold { background: var(--gold); color: var(--night); }
.hero-btn-gold:hover { background: var(--gold-soft); color: var(--night); }
.hero-btn-ghost { color: var(--gold-soft); box-shadow: inset 0 0 0 1.5px #e9d48a99; }
.hero-btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

/* When the demo is switched off, the waitlist button is the only one left. */
.hero-btn-ghost:only-child { background: var(--gold); color: var(--night); box-shadow: none; }
.hero-btn-ghost:only-child:hover { background: var(--gold-soft); color: var(--night); }

/* "Take a look inside": a doorway into the demo */
.peek { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.peek-card {
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
  color: #dfe3ee;
  background:
    radial-gradient(1px 1px at 18% 20%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 12%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 30%, #fff8 50%, transparent 51%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 55%);
}

.peek-card:hover { color: #fff; }
.peek-card:hover .peek-go { text-decoration: underline; }

.peek-art { display: block; width: 100%; height: auto; }
.peek-mtn { fill: url(#peek-fade); }
.peek-trail { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.peek-dot { fill: var(--night-deep); stroke: #ffffff88; stroke-width: 2; }
.peek-dot-on { fill: var(--gold); stroke: var(--gold-soft); }

.peek-text {
  display: grid;
  gap: 0.5rem;
  padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.75rem);
}

.peek-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--gold-soft);
}

.peek-go { font-weight: 600; color: var(--gold); margin-top: 0.25rem; }

@media (max-width: 480px) {
  .sitenav { left: 0; justify-content: center; }
  .hero { padding-top: 4.5rem; }
  .hero-btn { flex: 1 1 100%; justify-content: center; }
}

@view-transition { navigation: auto; }