/* MealClue — waitlist landing page
   Aesthetic: warm paper journal. Cream paper, ink type, one terracotta accent.
   Mobile-first, one screen, no framework, one hosted display serif (Fraunces). */

:root {
  --paper:      #f6f1e7;   /* warm cream */
  --paper-lift: #fcf9f2;   /* raised surface / input fill */
  --ink:        #23201b;   /* near-black warm ink */
  --ink-soft:   #59524734; /* hairline rules (alpha) */
  --ink-muted:  #5c5449;   /* secondary text */
  --clay:       #a5482a;   /* terracotta accent */
  --clay-deep:  #863a20;   /* accent pressed */
  --clay-ring:  #a5482a3d; /* focus halo */
  --shadow:     18px 30px 60px -34px #3a2a1c40;
}

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

/* The UA's `[hidden] { display: none }` loses to any id/class rule that sets
   `display` — #waitlist is `display: flex`, so `form.hidden = true` alone left the
   form on screen under the success message. Caught in a live browser test
   2026-08-02. Keep this above the rules that set display. */
[hidden] { display: none !important; }

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

body {
  min-height: 100svh;
  background:
    radial-gradient(120% 80% at 82% -8%,  #fbe7cf88 0%, #fbe7cf00 46%),
    radial-gradient(110% 70% at -6% 106%, #e9e0cd80 0%, #e9e0cd00 52%),
    var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  overflow-x: hidden;
}

/* subtle paper grain — inline SVG feTurbulence, very low opacity */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.4rem, 5vw, 3rem);
}

.card {
  width: 100%;
  max-width: 34rem;
}

/* ── kicker ─────────────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink-soft);
  margin-bottom: 1.75rem;
}
.dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 4px #a5482a1f;
  flex: none;
}

/* ── headline ───────────────────────────────────────── */
#headline {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 460;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
  font-size: clamp(2.35rem, 8.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
  margin-bottom: 1.15rem;
}

/* ── subline ────────────────────────────────────────── */
#subline {
  font-size: clamp(1.02rem, 3.6vw, 1.16rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 30rem;
  text-wrap: pretty;
  margin-bottom: 2.15rem;
}

/* ── form ───────────────────────────────────────────── */
#waitlist {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

#waitlist input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 1rem 1.15rem;
  color: var(--ink);
  background: var(--paper-lift);
  border: 1.5px solid #cbbfa9;
  border-radius: 13px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#waitlist input[type="email"]::placeholder { color: #a79c88; }
#waitlist input[type="email"]:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-ring);
}

/* ── optional screener ──────────────────────────────── */
.screener {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.screener label {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.optional {
  display: inline-block;
  margin-left: .1rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a79c88;
  vertical-align: .06em;
}

#waitlist textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: .85rem 1.05rem;
  color: var(--ink);
  background: var(--paper-lift);
  border: 1.5px solid #cbbfa9;
  border-radius: 13px;
  resize: vertical;
  min-height: 5.2rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#waitlist textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-ring);
}

#cta {
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: #fdf3ea;
  background: var(--clay);
  border: none;
  border-radius: 13px;
  padding: 1rem 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .16s ease, background .18s ease;
}
#cta:hover  { background: var(--clay-deep); }
#cta:active { transform: translateY(1px); }
#cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--clay-ring), var(--shadow);
}

/* wider screens: the email row stretches; the button stays a full-width block
   below the optional screener */
@media (min-width: 30rem) {
  .field { flex-direction: row; }
  #waitlist input[type="email"] { flex: 1; }
  #cta { white-space: nowrap; }
}

/* ── submit status (success / failure, set by the fetch handler) ──────
   Success replaces the form; failure sits under it while the form stays. */
.formstatus {
  margin-top: 1.15rem;
  padding: .9rem 1.05rem;
  border-radius: 13px;
  font-size: .95rem;
  line-height: 1.5;
  max-width: 28rem;
}
.formstatus.ok {
  color: var(--ink);
  background: var(--paper-lift);
  box-shadow: inset 0 0 0 1px var(--ink-soft), var(--shadow);
}
.formstatus.err {
  color: var(--clay-deep);
  background: #a5482a0f;
  box-shadow: inset 0 0 0 1px var(--clay-ring);
}

/* ── support lines ──────────────────────────────────── */
.support {
  list-style: none;
  margin-top: 1.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.15rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.support li {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.support li::before {
  content: "";
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--clay);
  opacity: .55;
  flex: none;
}

/* ── fineprint ──────────────────────────────────────── */
.fineprint {
  margin-top: 1.5rem;
  font-size: .82rem;
  line-height: 1.55;
  color: #837a6c;
  max-width: 28rem;
}

/* ── entrance motion ────────────────────────────────── */
.kicker, #headline, #subline, #waitlist, .support, .fineprint {
  animation: rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
.kicker    { animation-delay: .02s; }
#headline  { animation-delay: .10s; }
#subline   { animation-delay: .20s; }
#waitlist  { animation-delay: .30s; }
.support   { animation-delay: .36s; }
.fineprint { animation-delay: .40s; }

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

@media (prefers-reduced-motion: reduce) {
  .kicker, #headline, #subline, #waitlist, .support, .fineprint {
    animation: none;
  }
}