/* =========================================================
   Live at the Partridge — coming soon splash
   Palette pulled from the logo: muted sage green on charcoal.
   Tweak these tokens to re-skin the whole page.
   ========================================================= */
:root {
  --bg: #1b2420;
  --bg-deep: #131915;
  --ink: #dfe7e0;
  --ink-soft: #9aa89e;
  --accent: #6f8c79;
  --accent-bright: #a7c4ad;
  --logo: #f4f0dd; /* cream, from the original logo artwork */
  --line: rgba(167, 196, 173, 0.18);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Solid dark base so the iOS overscroll / rubber-band area and the safe-area
   insets (under the notch / home indicator) stay the background color.
   A flat color (not a gradient) lets the mobile theme-color match exactly —
   depth comes from the animated .glow blobs instead. */
html {
  background-color: var(--bg);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  /* Center content when it fits; allow vertical scroll when the embedded
     signup form makes the page taller than the viewport. Auto margins on
     .stage keep it reachable from the top (unlike justify-content: center).
     overflow-x stays hidden so the animated glow blobs never trigger a
     horizontal scrollbar. */
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* ---------- Ambient animated background ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.glow {
  /* Sized in vmin and pulled toward the center so the soft edges never reach
     the top/bottom toolbar zones (which would break the solid-color match).
     Positioned by their center via translate(-50%, -50%). */
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}

.glow--one {
  width: 40vmin;
  height: 40vmin;
  top: 42%;
  left: 40%;
  background: radial-gradient(circle, rgba(111, 140, 121, 0.55), transparent 62%);
  animation: drift-one 22s ease-in-out infinite alternate;
}

.glow--two {
  width: 34vmin;
  height: 34vmin;
  top: 56%;
  left: 60%;
  background: radial-gradient(circle, rgba(167, 196, 173, 0.35), transparent 62%);
  animation: drift-two 28s ease-in-out infinite alternate;
}

@keyframes drift-one {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-44%, -56%) scale(1.08); }
}

@keyframes drift-two {
  from { transform: translate(-50%, -50%) scale(1.05); }
  to   { transform: translate(-56%, -44%) scale(1); }
}

/* ---------- Layout ---------- */
.stage {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 100%;
  max-width: 640px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}

/* ---------- Logo ---------- */
.logo {
  width: min(400px, 72vw);
  /* gentle entrance + a slow, barely-there breathing glow */
  animation: rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.logo svg {
  width: 100%;
  height: auto;
  display: block;
  /* logo art uses fill="currentColor" — this controls its color */
  color: var(--logo);
  filter: drop-shadow(0 0 18px rgba(244, 240, 221, 0.14));
  animation: breathe 6s ease-in-out infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(244, 240, 221, 0.12)); }
  50%      { filter: drop-shadow(0 0 26px rgba(244, 240, 221, 0.26)); }
}

/* ---------- Tagline ---------- */
.tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  max-width: 30ch;
  animation: fade-in 1.1s ease 0.25s both;
}

/* ---------- Signup form ---------- */
.signup {
  width: 100%;
  max-width: 420px;
  animation: fade-in 1.1s ease 0.45s both;
}

.signup__label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.signup__row {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.signup__row:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(167, 196, 173, 0.12);
}

.signup__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.signup__input::placeholder { color: var(--ink-soft); transition: color 0.4s ease; }
/* Fade the placeholder out on focus (default browser behavior keeps it) */
.signup__input:focus::placeholder { color: transparent; }
.signup__input:focus { outline: none; }

.signup__button {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  background: var(--accent-bright);
  color: var(--bg-deep);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.signup__button:hover { background: #c0d8c5; }
.signup__button:active { transform: scale(0.97); }

.signup__message {
  min-height: 1.2em;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.signup__message.is-visible { opacity: 1; }
.signup__message.is-error { color: #e0a3a3; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  animation: fade-in 1.1s ease 0.65s both;
}

.footer .credit {
  font-size: 0.7rem;
  opacity: 0.65;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Constant Contact inline form
   The widget injects its own markup + stylesheet at runtime, so these
   rules are scoped under .ctct-inline-form (for specificity) and use
   !important on visual properties to reliably beat CC's own CSS, which
   loads after this file. Re-skins the form to match the splash palette.
   ========================================================= */
.ctct-inline-form {
  width: 100%;
  max-width: 420px;
  animation: fade-in 1.1s ease 0.45s both;
}

/* Strip CC's card chrome: no white box, borders, or padding. */
.ctct-inline-form .ctct-form-container,
.ctct-inline-form .ctct-form-defaults {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}

/* CC's title + description. The page already shows a heading above the
   form, so these are hidden by default. Delete this rule to show them. */
.ctct-inline-form .ctct-form-header,
.ctct-inline-form .ctct-form-defaults > .ctct-form-custom > .ctct-form-text {
  display: none !important;
}

/* If you'd rather keep them, remove the rule above and these take effect: */
.ctct-inline-form .ctct-form-header {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}
.ctct-inline-form .ctct-form-text {
  font-size: 0.9rem !important;
  color: var(--ink-soft) !important;
}

/* Field rows */
.ctct-inline-form .ctct-form-field {
  margin-bottom: 0.6rem !important;
  text-align: left;
}

.ctct-inline-form .ctct-form-label {
  display: block !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin-bottom: 0.5rem !important;
}

/* CC marks required fields with .ctct-form-required — tint the asterisk. */
.ctct-inline-form .ctct-form-required::after {
  color: var(--accent-bright) !important;
}

/* Text/email inputs */
.ctct-inline-form .ctct-form-element {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 0.7rem 1rem !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.ctct-inline-form .ctct-form-element::placeholder {
  color: var(--ink-soft) !important;
}

.ctct-inline-form .ctct-form-element:focus {
  outline: none !important;
  border-color: var(--accent-bright) !important;
  box-shadow: 0 0 0 3px rgba(167, 196, 173, 0.12) !important;
}

/* Submit button — sage pill, matching the original CTA. */
.ctct-inline-form .ctct-form-button {
  width: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.2rem !important;
  background: var(--accent-bright) !important;
  color: var(--bg-deep) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
}

.ctct-inline-form .ctct-form-button:hover {
  background: #c0d8c5 !important;
}
.ctct-inline-form .ctct-form-button:active {
  transform: scale(0.98) !important;
}

/* Validation + status messages */
.ctct-inline-form .ctct-form-errorMessage {
  color: #e0a3a3 !important;
  font-size: 0.85rem !important;
}

.ctct-inline-form .ctct-form-success .ctct-form-header {
  display: block !important;
  color: var(--accent-bright) !important;
}
.ctct-inline-form .ctct-form-success .ctct-form-text {
  color: var(--ink-soft) !important;
}

/* Fine print: GDPR consent + Constant Contact service link */
.ctct-inline-form .ctct-gdpr-text {
  font-size: 0.7rem !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
}
.ctct-inline-form .ctct-form-footer-link {
  color: var(--accent-bright) !important;
  text-decoration: underline !important;
}

/* Hide Google's reCAPTCHA badge. Positional offsets are unreliable here:
   the badge is injected inside the CC form, and the form's fade-in leaves
   a transform on it, so the badge's position: fixed resolves relative to
   the form (over its own content) rather than the viewport. visibility:
   hidden sidesteps that entirely. When the badge is hidden, Google's terms
   require showing the reCAPTCHA branding text instead — see .recaptcha-terms
   and the markup in index.html. */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Google's required reCAPTCHA disclosure, shown in place of the hidden
   badge (see .grecaptcha-badge above). */
.recaptcha-terms {
  margin: -0.5rem 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.recaptcha-terms a {
  color: var(--accent-bright);
  text-decoration: underline;
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .glow,
  .logo,
  .logo img,
  .tagline,
  .signup,
  .ctct-inline-form,
  .footer {
    animation: none !important;
  }
}