/* ==========================================================================
   ethan.somers.family — splash page layout
   Ported from the Claude Design artboard "Website / Splash page"
   (ui_kits/splash/index.html in the Somers Design System export).
   Tokens and components come from /vendor/somers.css.
   ========================================================================== */

html, body { height: 100%; }

body {
  background: var(--green-800);
  color: var(--paper-50);
}

body a { color: var(--paper-50); }
body a:hover { color: var(--marigold-400); }

.splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--font-sans);
}

/* --- Header --------------------------------------------------------------- */

.splash__header { padding: 28px 36px; }

.splash__logo {
  width: 72px;
  height: auto;
  display: block;
}

/* --- Main ----------------------------------------------------------------- */

.splash__main {
  display: grid;
  place-items: center;
  padding: 0 24px;
  text-align: center;
}

.splash__inner { max-width: 640px; }

.splash__hello {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--paper-50);
  margin: 0 0 12px;
}

.splash__name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--green-100);
  margin: 0 0 8px;
}

.splash__rule {
  border-top-color: var(--marigold-500);
  margin: 24px auto;
}

.splash__lede {
  font-size: 18px;
  line-height: var(--leading-normal);
  color: var(--green-100);
  margin: 0 0 28px;
}

/* --- Footer --------------------------------------------------------------- */

.splash__footer {
  padding: 24px 36px;
  font-size: 13px;
  color: var(--green-200);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Note dialog ---------------------------------------------------------- */

body.is-noting { overflow: hidden; }

/* The dialog is a light surface inside a dark page: keep the page's inverted
   link and text colors from leaking into it. */
.dialog__panel { color: var(--text-body); }
.dialog__panel a { color: var(--text-link); }

.note-form {
  display: grid;
  gap: 14px;
}

.note-form__turnstile {
  min-height: 65px;
  display: flex;
  justify-content: center;
}

.note-form__status {
  margin: 0;
  min-height: 1.1rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.note-form__status--warn { color: var(--status-danger); }

.note-form__thanks { margin: 0; }

@media (max-width: 640px) {
  .splash__header { padding: 20px 24px; }
  .splash__footer {
    padding: 20px 24px;
    flex-direction: column;
    gap: 6px;
  }
  .dialog { padding: 16px; }
  .dialog__panel { padding: 22px; }
  .dialog__actions .btn { flex: 1 1 auto; }
}