/* Little Mother Goose — landing page */
@font-face {
  font-family: "Charter";
  src: url("fonts/charter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --rust: #8b451c;
  --brown: #573315;
  --ink: #1e1502;
  --cream: #efe3d3;
  --cream-light: #f3e9da;
  --placeholder: #a8865e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #ecd9bd;
  color: var(--brown);
  font-family: Charter, "Bitstream Charter", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Stage: the illustrated scene ---------- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3000 / 2081;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
}
.scene, .scene img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* ---------- Signup panel: desktop ---------- */
.signup {
  position: absolute;
  left: 20%;
  top: 51.61%;
  width: 60%;
  aspect-ratio: 1800 / 301;
  margin: 0;
  background: url("img/panel-desktop.webp") center / 100% 100% no-repeat;
  container-type: inline-size;
}
.signup__copy {
  position: absolute;
  left: 5.5%;
  top: 32%;
  width: 30%;
}
.signup__title {
  margin: 0;
  font-weight: 400;
  font-size: 3.25cqw;
  line-height: 1.1;
  color: var(--brown);
}
.signup__sub {
  margin: 0.2cqw 0 0;
  font-size: 2.08cqw;
  line-height: 1.25;
  color: var(--rust);
}
.signup__input {
  position: absolute;
  left: 37%;
  top: 28.9%;
  width: 41%;
  height: 42.5%;
  border-style: solid;
  border-width: 0.9cqw;
  border-image: url("img/input-desktop.webp") 26 fill / 0.9cqw stretch;
  border-radius: 0;
  padding: 0 2.6%;
  background: transparent;
  font: inherit;
  font-size: 2.08cqw;
  color: var(--brown);
  -webkit-appearance: none;
  appearance: none;
}
.signup__input::placeholder { color: var(--placeholder); opacity: 1; }
.signup__input:focus { outline: 3px solid var(--rust); outline-offset: 2px; }
.signup__button {
  position: absolute;
  left: 80%;
  top: 28.6%;
  width: 14.5%;
  height: 42.9%;
  border: 0;
  padding: 0;
  background: url("img/button-desktop.webp") center / 100% 100% no-repeat;
  cursor: pointer;
  font: inherit;
  font-size: 3.05cqw;
  letter-spacing: 0.02em;
  color: var(--cream-light);
  text-shadow: 0 2px 2px rgba(30, 21, 2, 0.55);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.signup__button:hover { filter: brightness(1.08); }
.signup__button:active { transform: translateY(1px); }
.signup__button:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }
.signup__button[disabled] { cursor: default; filter: saturate(0.6); }

/* status line replaces the subtitle while sending / after */
.signup__status { display: none; }
.signup.is-busy .signup__status,
.signup.is-done .signup__status,
.signup.is-error .signup__status { display: block; }
.signup.is-busy .signup__sub:not(.signup__status),
.signup.is-done .signup__sub:not(.signup__status),
.signup.is-error .signup__sub:not(.signup__status) { display: none; }
.signup.is-error .signup__status { color: #9a2a10; }

/* ---------- Footer ---------- */
.foot {
  padding: 18px 20px 26px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brown);
  background: #e8d4a8;
}
.foot p { margin: 0; }

/* ---------- Mobile / portrait ---------- */
@media (max-aspect-ratio: 4/5) {
  html, body { background: #ecd9bd; }
  @media (min-width: 561px) {
    body { background: transparent; }
    body::before {
      content: "";
      position: fixed; inset: -40px;
      z-index: -1;
      background: url("img/scene-mobile-800.webp") center / cover no-repeat;
      filter: blur(28px) saturate(0.9);
      opacity: 0.85;
    }
  }
  .stage {
    max-width: 560px;
    aspect-ratio: 1200 / 2480;
  }
  .signup {
    left: 3.85%;
    top: 48.59%;
    width: 92.3%;
    height: auto;
    aspect-ratio: 360 / 237;
    background-image: url("img/panel-mobile.webp");
    display: flex;
    flex-direction: column;
    gap: 2.56cqw;
    padding: 8.9% 10% 8.3%;
  }
  .signup__copy {
    position: static;
    width: auto;
    text-align: center;
  }
  .signup__title { font-size: 7.1cqw; line-height: 1.15; }
  .signup__sub { font-size: 4.55cqw; margin-top: 0.6cqw; line-height: 1.3; }
  .signup__input,
  .signup__button {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 288 / 48;
  }
  .signup__input {
    padding: 0 6.25%;
    border: 0;
    border-image: none;
    background: url("img/input-mobile.webp") center / 100% 100% no-repeat;
    font-size: max(16px, 4.8cqw); /* 16px+ prevents iOS zoom on focus */
  }
  .signup__button {
    background-image: url("img/button-mobile.webp");
    font-size: 6cqw;
    letter-spacing: 0.04em;
  }
  .foot { background: #e3c98f; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .signup__button { transition: none; }
}