/* Meech's Munchies: coming soon page.
   Palette sampled from the logo in Brand/. Deliberately light only. This is a
   warm cream brand and a dark inversion would fight it. */

/* Self-hosted latin subsets, copied from the @fontsource packages by
   `npm run fonts`. No third-party request, so no consent question and no
   render-blocking round trip to another origin. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Sampled directly from the logo artwork, then adjusted where text contrast
     required it. Ratios below are against --cream. */
  --sage:        #B9B69C;  /* the mixer body, exactly. Decorative only, 1.8:1 */
  --sage-soft:   #DEDCCB;  /* tint of the above, for card artwork */
  --green:       #656A4E;  /* secondary text, 4.99:1 */
  --green-deep:  #363A2A;  /* logo lettering: headings, body text, buttons, 10.35:1 */
  --cream:       #FAEFE8;  /* the logo background, so the mark blends edge to edge */
  --beige:       #EBDBC8;  /* the mixing bowl. Surfaces and borders */
  --coral:       #E28C71;  /* the hearts. Decorative fills only, too light for text */
  --coral-ink:   #A8503A;  /* the accent where contrast matters, 4.80:1 */
  --white:       #FFFFFF;
  --ink:         #1A1A1A;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 62ch;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(46, 58, 44, .05), 0 8px 28px rgba(46, 58, 44, .07);
  --gap-section: clamp(3rem, 8vw, 5.5rem);
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--green-deep);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0; }

a { color: var(--coral-ink); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--coral-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: 10;
  background: var(--green-deep);
  color: var(--cream);
  padding: .6rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

main {
  width: min(1080px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding-top: clamp(2rem, 6vw, 3.5rem);
}

.hero__logo {
  width: clamp(210px, 34vw, 320px);
  margin-inline: auto;
}

.eyebrow {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-ink);
}

.hero__title {
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  margin-top: .5rem;
}

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--green);
  margin-top: .75rem;
}

.hero__lede {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  text-wrap: pretty;
}

/* ---------- Scalloped divider, echoing the logo border ---------- */

.scallop {
  width: min(320px, 55%);
  height: 20px;
  margin: var(--gap-section) auto;
  background-image: radial-gradient(
    circle at 50% 100%,
    transparent 0 7.4px,
    var(--sage) 7.4px 8.6px,
    transparent 8.6px
  );
  background-size: 20px 20px;
  background-repeat: repeat-x;
  opacity: .9;
}

/* ---------- Email capture ---------- */

.signup { text-align: center; }

.signup__title { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }

.signup__note {
  margin-top: .6rem;
  color: var(--green);
  font-size: .95rem;
}

.form {
  max-width: 30rem;
  margin: 1.75rem auto 0;
}

.form__row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.form__input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--beige);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #75705F; }
.form__input:hover { border-color: var(--sage); }

.form__button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  color: var(--cream);
  background: var(--green-deep);
  padding: .85rem 1.6rem;
  border: 1.5px solid var(--green-deep);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.form__button:hover { background: #47503A; border-color: #47503A; }
.form__button:active { transform: translateY(1px); }
.form__button[disabled] { opacity: .6; cursor: progress; }

.form__message {
  margin-top: .9rem;
  min-height: 1.5rem;
  font-size: .95rem;
  text-align: left;
}
.form__message:empty { min-height: 0; }
.form__message[data-state="ok"] { color: var(--green-deep); font-weight: 500; }
.form__message[data-state="error"] { color: var(--coral-ink); }

/* ---------- What we bake ---------- */

.menu { text-align: center; }

.menu__title { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }

.menu__intro { margin-top: .6rem; color: var(--green); }

.cards {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Placeholder artwork until Michelle's photos land in /assets/photos/.
   Replace the div with an <img class="card__art"> of the same aspect ratio. */
.card__art {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--green-deep);
}
.card__art--cookies  { background: linear-gradient(140deg, var(--sage-soft), var(--beige)); }
.card__art--macarons { background: linear-gradient(140deg, #F6DCD5, var(--sage-soft)); }
.card__art--brownies { background: linear-gradient(140deg, var(--beige), #D9C7AE); }

.card__body { padding: 1.25rem 1.35rem 1.5rem; }

.card__title { font-size: 1.4rem; }

.card__blurb {
  margin-top: .4rem;
  font-size: .95rem;
  color: var(--green);
}

.flavors {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.flavors li {
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .82rem;
  color: var(--green-deep);
}

.allergens {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  font-size: .875rem;
  color: var(--green);
  text-wrap: pretty;
}

/* ---------- Follow ---------- */

.follow { text-align: center; }

.follow__title { font-size: clamp(1.5rem, 4vw, 2rem); }

.follow__note { margin-top: .6rem; color: var(--green); }

.follow__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.25rem;
  padding: .7rem 1.4rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
  background: var(--white);
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease;
}
.follow__link:hover { border-color: var(--sage); transform: translateY(-1px); }

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

.footer {
  margin-top: var(--gap-section);
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
  border-top: 1px solid var(--beige);
  font-size: .9rem;
}

.footer__fine { margin-top: .4rem; color: var(--green); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}