/*
 * LiveWall — the public landing page.
 *
 * What the open internet sees at the root. This is a PRODUCT page — LiveWall serves any kind
 * of event (weddings, company events, parties, conferences) — so it carries no single event's
 * name or monogram, only the LiveWall mark itself. Deliberately has nothing submittable on it:
 * the guest form is the only route that accepts guest-authored data, so it lives behind the QR
 * and this page stands in front of it.
 *
 * Tokens only. No value here is a raw hex — a per-event accent override still tints the mark
 * and rule, but never the page's identity.
 */

.lw-landing {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-9) var(--s-7);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--bg-warm) 0%, var(--bg) 60%);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: center;
}

.lw-landing__inner {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  margin-inline: auto;
}

/* A small accent glyph standing in for a mark — deliberately not any one event's monogram. */
.lw-landing__mark {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: var(--accent);
  line-height: 1;
}

.lw-landing__wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  color: var(--text);
}

.lw-landing__tagline {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* A hairline in the accent, the same gesture the wall uses above a greeting. */
.lw-landing__rule {
  width: 3.5rem;
  height: 1px;
  background: var(--accent);
  opacity: .7;
  border: 0;
  margin: var(--s-2) 0;
}

.lw-landing__lead {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
  max-width: 28rem;
}

.lw-landing__note {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-4);
  margin: 0;
  max-width: 26rem;
}

/* Shown when a guest link is invalid, expired, or missing. */
.lw-landing__notice {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-6) var(--s-7);
  margin: 0;
  max-width: 28rem;
  width: 100%;
}

.lw-landing__foot {
  font-size: .75rem;
  color: var(--text-5);
  margin: var(--s-6) 0 0;
}