/* Mini Cravings LLC — one-page site.
   Palette is bound by fixtures/art-direction/mini-cravings.md:
   teal #008587 carries SURFACE (two full-width sections sit on it),
   pink #FF6FAE is CTA and highlight only, cream is the page ground,
   chocolate carries body text and the footer. */

:root {
  --teal: #008587;
  --teal-deep: #006d6f;
  --teal-tint: #d9eff0;
  --teal-tint-soft: #eaf7f7;
  --pink: #ff6fae;
  --pink-deep: #e84f93;
  --cream: #fff8f0;
  --cream-deep: #fdeede;
  --choc: #3b2317;
  --choc-soft: #5a3a2a;
  --white: #fffdfa;

  --shadow-card: 0 10px 30px rgba(59, 35, 23, 0.10);
  --shadow-lift: 0 18px 44px rgba(59, 35, 23, 0.16);
  --radius: 22px;

  --display: "Titan One", "Fredoka One", system-ui, sans-serif;
  --head: "Fredoka One", "Fredoka", system-ui, sans-serif;
  --script: "Dancing Script", cursive;
  --body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gap: clamp(28px, 5vw, 56px);
  --section-y: clamp(64px, 8vw, 108px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--choc);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. Every img here carries width/height attributes
   (they reserve layout space and stop the page jumping as images arrive). With
   only max-width constrained, the width shrinks to fit and the height stays at
   the ATTRIBUTE value, so the picture is stretched vertically. That skewed the
   footer logo, the hero jar and the story photo. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-deep); }

h1, h2, h3, h4 { font-family: var(--head); line-height: 1.12; margin: 0 0 0.5em; font-weight: 400; }

h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: clamp(20px, 2.4vw, 25px); }

p { margin: 0 0 1em; }

.container { width: min(1180px, 92vw); margin-inline: auto; }

.section { padding-block: var(--section-y); }

.section__head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px); }

.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--choc-soft); }

.kicker {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-tint);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.script { font-family: var(--script); font-weight: 700; }

/* The brush-stroke highlight from their flyers: a hand-painted edge, not a
   rectangle. One per section (art direction §6). */
.brush {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: 0.18em;
}
.brush::before {
  content: "";
  position: absolute;
  inset: 6% -0.3em -6%;
  background: var(--pink);
  border-radius: 62% 38% 55% 45% / 72% 62% 38% 28%;
  transform: rotate(-1.4deg);
  z-index: -1;
  opacity: 0.9;
}
.brush { color: var(--choc); }
.brush--teal { color: var(--choc); }
.brush--teal::before { background: var(--teal-tint); opacity: 1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Chocolate on the coral, never white: #FF6FAE under white text is about
   2.6:1, which fails AA outright and reads washed out at any size. Chocolate
   on the same coral is about 6.3:1 and is what their own flyers do. */
.btn--primary { background: var(--pink); color: var(--choc); box-shadow: 0 8px 22px rgba(255, 111, 174, 0.38); }
.btn--primary:hover { background: var(--pink-deep); color: var(--choc); box-shadow: 0 12px 28px rgba(255, 111, 174, 0.46); }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 8px 22px rgba(0, 133, 135, 0.32); }
.btn--teal:hover { background: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal); }
.btn--ghost:hover { background: var(--teal); color: #fff; }
.btn--on-teal { background: #fff; color: var(--teal-deep); }
.btn--on-teal:hover { background: var(--cream); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: 13px; }

/* ---------- Announcement + header ---------- */

.announce {
  background: var(--teal);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.announce__chip {
  background: var(--pink);
  color: var(--choc);
  border-radius: 999px;
  padding: 2px 12px;
  margin-left: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-deep);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 12px;
}
.brandmark { display: flex; align-items: center; flex: 0 0 auto; }
.brandmark img { width: clamp(132px, 15vw, 172px); height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  font-weight: 600;
  font-size: 15px;
  color: var(--choc);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--teal-deep); border-bottom-color: var(--pink); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--teal-tint);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--body);
  font-weight: 700;
  color: var(--teal-deep);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-deep);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 4vw 20px;
    box-shadow: var(--shadow-card);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--cream-deep); }
  .nav .btn { margin-top: 12px; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, var(--teal-tint) 0%, rgba(217, 239, 240, 0) 58%),
    var(--cream);
  padding-block: clamp(52px, 7vw, 86px) clamp(60px, 8vw, 96px);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap);
  align-items: center;
}
.hero__eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 14px;
}
.hero h1 { margin: 0 0 18px; }
.hero__small {
  display: block;
  font-family: var(--script);
  font-size: clamp(38px, 5.4vw, 62px);
  color: var(--teal);
  line-height: 1;
}
.hero__big {
  display: block;
  font-family: var(--display);
  font-size: clamp(46px, 8.2vw, 92px);
  color: var(--choc);
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}
.hero__sub { font-size: clamp(17px, 2vw, 20px); color: var(--choc-soft); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__note { margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--teal-deep); }

.hero__art { position: relative; display: grid; place-items: center; }
.hero__disc {
  position: absolute;
  width: min(86%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal-tint);
  box-shadow: inset 0 0 0 14px rgba(255, 255, 255, 0.6);
}
.hero__jar { position: relative; width: min(78%, 360px); filter: drop-shadow(0 24px 34px rgba(59, 35, 23, 0.22)); }
.hero__price {
  position: absolute;
  right: 4%;
  bottom: 8%;
  background: var(--pink);
  color: var(--choc);
  font-family: var(--head);
  font-size: 22px;
  line-height: 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 10px 24px rgba(255, 111, 174, 0.42);
  transform: rotate(-8deg);
}
.hero__price small { display: block; font-family: var(--body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
}

/* ---------- Badge strip: FULL-WIDTH BLUE GROUND #1 ---------- */

.badges { background: var(--teal); color: #fff; padding-block: clamp(38px, 5vw, 56px); }
.badges__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.badge { display: flex; align-items: center; gap: 14px; }
.badge__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
}
.badge__icon svg { width: 28px; height: 28px; }
.badge__title { font-family: var(--head); font-size: 17px; line-height: 1.2; margin: 0 0 2px; }
.badge__note { margin: 0; font-size: 14px; color: #fff; line-height: 1.4; }

@media (max-width: 880px) { .badges__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .badges__grid { grid-template-columns: 1fr; } }

/* ---------- Flavor grid ---------- */

.flavors { background: var(--cream); }

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
}

.flavor {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--teal-tint);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.flavor:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--teal); }

/* Every shot block is the SAME height across the grid. Auto-fit wraps the row
   and a card with a taller jar was stretching its whole row, which read as a
   broken layout rather than a product line. */
.flavor__shot {
  background: var(--teal-tint);
  padding: 20px 22px 0;
  display: grid;
  place-items: center;
  height: 244px;
  overflow: hidden;
}
/* The image fills its box and object-fit letterboxes inside it. Sizing the jar
   off the card WIDTH instead (a percentage max-width) makes it taller than the
   tint block on a wide card: it spilled over the flavor name, and clipping it
   only moved the damage to the lid. */
.flavor__shot img {
  width: 100%;
  /* An explicit pixel height, NOT height:100%. A percentage height on a
     centred grid item does not resolve here, so the jar fell back to its
     aspect ratio (421px tall in a 224px block) and spilled over the flavor
     name. 224 = the 244px block less its 20px top padding. */
  height: 224px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 18px rgba(59, 35, 23, 0.2));
}

.flavor__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--pink);
  color: var(--choc);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255, 111, 174, 0.4);
}

.flavor__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.flavor__name { font-family: var(--head); font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.flavor__note { font-size: 15px; color: var(--choc-soft); margin: 0 0 16px; flex: 1; }
.flavor__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flavor__price {
  font-family: var(--head);
  font-size: 21px;
  color: var(--pink-deep);
}

/* Flavors with no client photograph. Art direction forbids generating a jar,
   so these carry the tasting note on the blue tint instead of a picture. */
.flavor--text .flavor__shot {
  place-items: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(60% 46% at 50% 62%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    var(--teal-tint);
}
.flavor__wordmark {
  font-family: var(--script);
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.1;
  color: var(--teal-deep);
}
.flavor__wordmark::after {
  content: "Ask for it by name";
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 10px;
}

.flavors__foot {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
  background: var(--teal-tint-soft);
  border: 2px dashed var(--teal-tint);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 38px);
}
.flavors__foot h3 { margin-bottom: 8px; }
.flavors__foot p { max-width: 46em; margin-inline: auto; color: var(--choc-soft); }
.flavors__foot .btn { margin-top: 8px; }

/* ---------- Proof: FULL-WIDTH BLUE GROUND #2 ---------- */

.proof { background: var(--teal); color: #fff; }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.proof h2 { color: #fff; }
.proof h2 .script { color: var(--teal-tint); }
.proof__lede { color: #fff; font-size: clamp(17px, 1.9vw, 19px); }
.proof__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.proof__list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.proof__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.85);
}
.proof__media img { border-radius: var(--radius); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24); }

@media (max-width: 860px) { .proof__grid { grid-template-columns: 1fr; } }

/* The wave edge, used once on the page (art direction §6). */
.wave { display: block; width: 100%; height: clamp(38px, 5vw, 66px); }
.wave path { fill: var(--cream); }

/* ---------- Events ---------- */

.events__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--white);
  border: 2px solid var(--teal-tint);
}
.events__media { min-height: 260px; background: var(--teal-tint); }
.events__media img { width: 100%; height: 100%; object-fit: cover; }
.events__body { padding: clamp(26px, 4vw, 42px); }
.events__list { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 14px; }
.events__list li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; }
.events__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.events__value { font-weight: 600; }

@media (max-width: 780px) {
  .events__card { grid-template-columns: 1fr; }
  .events__list li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Story + words ---------- */

.story__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap); align-items: center; }
.story__media img { border-radius: var(--radius); box-shadow: var(--shadow-card); }
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } }

.words { background: var(--teal-tint-soft); }
.words__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.word {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
  border-top: 5px solid var(--pink);
}
.word p { margin: 0; color: var(--choc-soft); }
.word__hearts { color: var(--pink); letter-spacing: 3px; margin-bottom: 10px; font-size: 15px; }

/* ---------- Forms ---------- */

.order { background: var(--cream-deep); }
.order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 40px); align-items: start; }
@media (max-width: 940px) { .order__grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-card);
  border: 2px solid var(--teal-tint);
}
.form-card--bulk { border-color: var(--pink); }
.form-card h3 { margin-bottom: 6px; }
.form-card__intro { color: var(--choc-soft); font-size: 16px; margin-bottom: 22px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--choc);
  background: var(--cream);
  border: 2px solid var(--teal-tint);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 133, 135, 0.14);
}
.field textarea { resize: vertical; }
.field__hint { font-size: 13px; color: var(--choc-soft); }

.qty-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-column: 1 / -1; }
.qty-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 12px;
  align-items: center;
  background: var(--teal-tint-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.qty-row label { font-weight: 600; font-size: 15px; margin: 0; }
/* These sit outside .field, so without this they fall back to the browser's
   default black hairline box and read as a different form. */
.qty-row input {
  font-family: var(--body);
  font-size: 16px;
  color: var(--choc);
  padding: 9px 10px;
  background: #fff;
  border: 2px solid var(--teal-tint);
  border-radius: 10px;
  width: 100%;
  text-align: center;
}
.qty-row input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 133, 135, 0.14);
}

.form-note { font-size: 14px; color: var(--choc-soft); margin: 16px 0 0; }

@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

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

.site-footer { background: var(--choc); color: var(--cream); padding-block: clamp(48px, 6vw, 72px) 28px; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--pink); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); }
/* Their mark is drawn in dark linework, so on the chocolate footer it all but
   vanishes. Give it the cream plate rather than tinting somebody's logo. */
.footer__logo {
  width: 196px;
  height: auto;
  margin-bottom: 18px;
  background: var(--cream);
  border-radius: 16px;
  padding: 12px 18px;
}
.footer__tag { font-family: var(--script); font-size: 24px; color: var(--pink); margin: 0 0 10px; }
.footer__col-title { font-family: var(--head); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer__bar {
  margin-top: clamp(34px, 4vw, 50px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 248, 240, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
  color: rgba(255, 248, 240, 0.86);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a, .footer__attr a { text-decoration: none; border-bottom: 1px solid rgba(255, 248, 240, 0.3); }
.footer__legal a:hover, .footer__attr a:hover { border-bottom-color: var(--pink); }
.footer__attr { margin: 0; }

@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; } }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--pink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}