/* ============ The Cupcake Lassie — concept ============ */

:root{
  --cream:#FFF9F1;
  --blush:#FBE7EE;
  --pink:#D9488B;
  --pink-deep:#B23071;
  --gold:#C99A2E;
  --cocoa:#3B2530;
  --cocoa-soft:#6E5460;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--cream);
  color:var(--cocoa);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;
  background:rgba(255,249,241,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--blush);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.brand-name{
  font-family:var(--serif);font-style:italic;font-size:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wa-btn{
  flex:none;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:var(--pink);
  padding:9px 14px;border-radius:999px;
  text-decoration:none;
  box-shadow:0 2px 0 var(--pink-deep);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--pink-deep)}

/* ---------- shared bits ---------- */
section{padding:52px 20px;max-width:860px;margin:0 auto}
/* consistent rhythm: every section intro is centered.
   the only left-aligned text is list content (menu rows) */
section > .kicker, section > h2, section > .sub{text-align:center}
section > .sub{margin-left:auto;margin-right:auto}
.mrow,.mrow p,.mhead,.mhead h3,.mprice{text-align:left}
.kicker{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pink);margin-bottom:10px;
}
.kicker.gold{color:var(--gold)}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.12}
h1{font-size:clamp(34px,7.5vw,54px)}
h1 em{color:var(--pink)}
h2{font-size:clamp(26px,5vw,36px);margin-bottom:10px}
.sub{color:var(--cocoa-soft);max-width:56ch;margin-bottom:8px}
.sub.short{max-width:none}
.center{display:flex;justify-content:center}
.amp{font-family:var(--serif);font-style:italic}
.emoji{font-family:var(--sans)}

.dots{
  height:26px;margin:0 20px;
  background-image:radial-gradient(circle, var(--blush) 3px, transparent 3.5px);
  background-size:22px 22px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-size:15px;font-weight:700;
  color:#fff;background:var(--pink);
  padding:14px 24px;border-radius:999px;
  text-decoration:none;
  box-shadow:0 3px 0 var(--pink-deep);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--pink-deep)}
.btn.ghost{
  background:transparent;color:var(--pink-deep);
  box-shadow:0 3px 0 var(--blush);
  border:1.5px solid var(--pink);
}
.btn.big{font-size:17px;padding:16px 32px}
.wa-link{
  display:inline-block;margin-top:10px;
  font-size:13px;font-weight:700;color:var(--pink-deep);
  text-decoration:none;border-bottom:1.5px solid var(--blush);
  padding-bottom:2px;
}
.wa-link:hover{border-color:var(--pink)}

/* ---------- photo frames ---------- */
.ph{
  border-radius:16px;overflow:hidden;
  background:var(--blush);
  background-image:radial-gradient(circle, #fff 2px, transparent 2.5px);
  background-size:16px 16px;
  box-shadow:0 8px 24px rgba(59,37,48,.10);
}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- hero ---------- */
.hero{
  display:grid;gap:34px;
  padding-top:56px;padding-bottom:40px;
}
.hero-copy{text-align:center}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.badges{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cocoa-soft);
}
.hero-photos{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.hero-photos .ph{aspect-ratio:1/1}
.p1{transform:rotate(-1.5deg)}
.p2{transform:rotate(1.5deg)}

/* ---------- month band ---------- */
.month{
  text-align:center;
  background:var(--blush);
  background-image:radial-gradient(circle, #fff 2.5px, transparent 3px);
  background-size:20px 20px;
  border-radius:20px;
  padding:38px 20px;
}
.month h2{margin-bottom:6px}

/* ---------- menu list (real menu, dotted leaders) ---------- */
.menu-list{margin-top:28px;border-top:1.5px solid var(--blush)}
.mrow{
  padding:18px 4px 16px;
  border-bottom:1.5px solid var(--blush);
}
.mrow p{
  font-size:14px;color:var(--cocoa-soft);
  max-width:60ch;
}
.mhead{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:6px;
}
.mhead h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:20px;color:var(--cocoa);
  white-space:nowrap;
}
.lead{
  flex:1;min-width:16px;
  border-bottom:2px dotted var(--pink);
  opacity:.45;
  transform:translateY(-4px);
}
.mprice{
  font-size:13px;font-weight:700;color:var(--cocoa);
  white-space:nowrap;
}
.mrow.ask .lead{opacity:.25}
.tag{
  display:inline-block;
  font-family:var(--sans);font-style:normal;font-size:13px;font-weight:800;
  background:var(--blush);color:var(--pink-deep);
  padding:3px 10px;border-radius:999px;
}

/* ---------- bento ---------- */
.boxes{display:grid;gap:20px;margin-top:26px}
.boxes .ph{aspect-ratio:4/3}
.box-list{border-top:1.5px solid var(--blush)}
.box-list .mrow{padding:14px 4px}
.box-list .mhead h3{font-size:18px}

/* ---------- giant ---------- */
.giant{display:grid;gap:24px;align-items:center}
.giant-copy{text-align:center}
.giant .ph{aspect-ratio:1/1}
.giant-copy .price{
  font-family:var(--sans);font-size:.55em;font-weight:800;
  color:#fff;background:var(--gold);
  border-radius:999px;padding:4px 14px;vertical-align:middle;
}
.giant-copy .btn{margin-top:16px}

/* ---------- bespoke ---------- */
.trip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
.trip .ph{aspect-ratio:1/1}
.t1{transform:rotate(-1deg)}
.t3{transform:rotate(1deg)}

/* ---------- story ---------- */
.story{text-align:center}
.story blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,3.4vw,24px);line-height:1.45;
  color:var(--cocoa);
  max-width:34ch;margin:18px auto 24px;
}
.story .sub{margin:0 auto}

/* ---------- delivery ---------- */
.delivery{
  text-align:center;
  background:var(--cocoa);
  color:var(--cream);
  border-radius:20px;
}
.delivery h2{color:#fff}
.delivery .amp{color:var(--gold)}
.delivery .sub{color:rgba(255,249,241,.75);margin:0 auto 4px}
.delivery .sub.short{color:rgba(255,249,241,.55)}

/* ---------- reviews (ragged, no cards) ---------- */
.quotes{
  display:grid;grid-template-columns:1fr;gap:22px 34px;
  margin-top:26px;
}
.quote blockquote{
  font-family:var(--serif);font-style:italic;font-size:19px;
  line-height:1.4;color:var(--cocoa);
  text-align:center;
  margin-bottom:8px;
}
.quote blockquote::before{
  content:"";display:block;
  width:28px;height:3px;border-radius:2px;
  background:var(--pink);
  margin:0 auto 12px;
}
.quote:nth-child(2) blockquote{font-size:17px}
.quote:nth-child(2) blockquote::before{background:var(--gold)}
.quote:nth-child(3) blockquote{font-size:16px}
.quote figcaption{
  text-align:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cocoa-soft);
}

/* ---------- final cta ---------- */
.final-cta{text-align:center;padding-bottom:64px}
.final-cta .btn{margin-top:18px}

/* ---------- footer ---------- */
footer{
  text-align:center;
  padding:34px 20px 44px;
  font-size:13px;color:var(--cocoa-soft);
  border-top:1px solid var(--blush);
}
.f-brand{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--cocoa);margin-bottom:6px}
.f-small{margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- desktop ---------- */
@media (min-width:700px){
  .top{padding:12px 28px}
  section{padding:72px 28px}
  .hero{grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:72px}
  .hero-copy{text-align:left}
  .giant-copy{text-align:left}
  .boxes{grid-template-columns:1.1fr 1fr;align-items:start}
  .boxes .ph{aspect-ratio:1/1}
  .giant{grid-template-columns:1fr 1.1fr}
  .giant .ph{aspect-ratio:1/1}
  .giant-copy{padding:8px 28px}
  .quotes{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .quote:nth-child(even){margin-top:44px}
  .mhead h3{font-size:21px}
  .mrow p{font-size:14.5px}
}

/* ---------- calm it down ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}