/* Melinda's GF — Design Tokens */
:root {
  /* Surfaces */
  --color-cream: #FDF8F0;
  --color-parchment: #F5EDE0;
  --color-biscuit: #EAD9C4;
  --color-white-warm: #FFFDF9;

  /* Text */
  --color-espresso: #2C1A0E;
  --color-cocoa: #6B4A35;
  --color-stone: #9C7D67;

  /* Brand accent — Melinda's teal */
  --color-honey: #1AADBA;
  --color-honey-dark: #0E8A96;
  --color-honey-light: rgba(26,173,186,0.10);
  --color-peach: #5CC5CF;
  --color-teal-deep: #0B5A66;
  --color-warm-accent: #C4732A;

  /* Semantic */
  --color-sage: #5C8A5C;
  --color-sage-light: rgba(92,138,92,0.12);
  --color-amber: #D4901A;
  --color-amber-light: rgba(212,144,26,0.12);
  --color-rose: #C44040;
  --color-rose-light: rgba(196,64,64,0.10);

  /* Borders */
  --color-border: rgba(100,65,35,0.10);
  --color-border-hover: rgba(100,65,35,0.22);

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(11,90,102,0.06), 0 4px 16px rgba(11,90,102,0.10);
  --shadow-card-hover: 0 2px 0 rgba(11,90,102,0.08), 0 8px 32px rgba(11,90,102,0.16);
  --shadow-float: 0 16px 48px rgba(11,90,102,0.18);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
}

/* Font pair tweaks — handcrafted alternatives */
html[data-fontpair="editorial"] {
  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
}
html[data-fontpair="heritage"] {
  --display: "EB Garamond", "Source Serif 4", Georgia, serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
html[data-fontpair="original"] {
  --display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
}

/* Hero "isn't." accent — defaults to peach bold (Option B), tweakable to underline (Option C) */
.hero-accent {
  color: var(--color-peach);
  font-weight: 700;
  font-style: normal;
  position: relative;
  display: inline-block;
  font-size: 1.18em;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
html[data-hero-accent="underline"] .hero-accent {
  color: var(--color-cream);
}
html[data-hero-accent="underline"] .hero-accent::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.08em;
  height: 0.16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q55 -1 110 8 T216 6' stroke='%235CC5CF' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
html[data-hero-accent="plain"] .hero-accent {
  color: var(--color-cream);
  font-weight: 700;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--color-cream);
  color: var(--color-espresso);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.015em; color: var(--color-espresso); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== UI primitives ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 9999px;
  font-family: var(--body); font-weight: 700; font-size: 14.4px;
  transition: transform 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo), color 200ms;
  white-space: nowrap;
}
.btn-primary { background: var(--color-honey); color: var(--color-cream); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.btn-primary:hover { background: var(--color-honey-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(196,115,42,0.28); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: transparent; color: var(--color-espresso); border: 1.5px solid var(--color-border-hover); }
.btn-secondary:hover { border-color: var(--color-honey); background: var(--color-honey-light); }
.btn-ghost { background: transparent; color: var(--color-honey); padding: 10px 14px; }
.btn-ghost:hover { background: var(--color-honey-light); }
.btn-cream-outline { background: transparent; color: var(--color-cream); border: 1.5px solid rgba(253,248,240,0.4); }
.btn-cream-outline:hover { background: rgba(253,248,240,0.08); border-color: var(--color-cream); }
.btn-cream-solid { background: var(--color-cream); color: var(--color-teal-deep); }
.btn-cream-solid:hover { background: var(--color-white-warm); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.btn-disabled { opacity: 0.5; cursor: not-allowed !important; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

.section-label {
  font-family: var(--body); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-honey); display: inline-block;
}
.section-label.muted { color: var(--color-stone); }
.section-label.peach { color: var(--color-peach); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

.h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1.04; letter-spacing: -0.025em; }
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.2; }
.lead { font-size: 18px; color: var(--color-cocoa); line-height: 1.6; max-width: 56ch; }
.body { font-size: 16px; color: var(--color-cocoa); line-height: 1.7; max-width: 65ch; }
.italic-sub { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--color-cocoa); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

/* Tag pill */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 9999px;
  background: var(--color-biscuit); color: var(--color-cocoa);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.tag.honey { background: var(--color-honey-light); color: var(--color-honey); }
.tag.sage { background: var(--color-sage-light); color: var(--color-sage); }
.tag.amber { background: var(--color-amber-light); color: var(--color-amber); }
.tag.rose { background: var(--color-rose-light); color: var(--color-rose); }

/* Placeholder image (no real photos) */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(196,115,42,0.18), rgba(232,149,107,0.10) 40%, rgba(234,217,196,0.45) 100%),
    repeating-linear-gradient(135deg, rgba(100,65,35,0.05) 0px, rgba(100,65,35,0.05) 1px, transparent 1px, transparent 9px),
    var(--color-biscuit);
  color: var(--color-cocoa);
}
.ph .ph-label {
  position: absolute; left: 12px; bottom: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: rgba(44,26,14,0.55);
  background: rgba(253,248,240,0.82);
  padding: 4px 8px; border-radius: 4px;
  text-transform: lowercase;
}
.ph.warm { background:
  linear-gradient(135deg, rgba(212,144,26,0.25), rgba(196,115,42,0.18) 50%, rgba(232,149,107,0.20) 100%),
  repeating-linear-gradient(135deg, rgba(100,65,35,0.04) 0px, rgba(100,65,35,0.04) 1px, transparent 1px, transparent 11px),
  #E6BE89; }
.ph.cool { background:
  linear-gradient(135deg, rgba(92,138,92,0.18), rgba(196,115,42,0.10) 100%),
  repeating-linear-gradient(135deg, rgba(100,65,35,0.05) 0px, rgba(100,65,35,0.05) 1px, transparent 1px, transparent 10px),
  #D6CFB5; }
.ph.dark { background:
  linear-gradient(135deg, rgba(44,26,14,0.6), rgba(107,74,53,0.45) 100%),
  repeating-linear-gradient(135deg, rgba(253,248,240,0.04) 0px, rgba(253,248,240,0.04) 1px, transparent 1px, transparent 10px),
  #6B4A35; }
.ph.dark .ph-label { background: rgba(44,26,14,0.6); color: rgba(253,248,240,0.8); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Section spacing — natural content height on inner pages */
.section { padding: 80px 0; }
@media (min-width: 1024px) { .section { padding: 128px 0; } }
.section-tight { padding: 64px 0; }
@media (min-width: 1024px) { .section-tight { padding: 96px 0; } }

/* Home page only: every section fills the viewport with content vertically centered */
.home-page .section,
.home-page .section-tight {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: stretch;
}
.home-page .section > .container,
.home-page .section-tight > .container { width: 100%; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Hide scrollbar on horizontal scrollers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; gap: 48px; animation: marquee 50s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Dot pulse */
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.88); } }
.dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.dot.pulse { animation: dotPulse 2s var(--ease-out-expo) infinite; }

/* Toast */
.toast {
  position: fixed; right: 24px; bottom: 24px; max-width: 340px;
  background: var(--color-espresso); color: var(--color-cream);
  border-radius: 16px; padding: 16px 20px;
  box-shadow: var(--shadow-float);
  z-index: 100;
  display: flex; gap: 12px; align-items: flex-start;
  transform: translateY(8px); opacity: 0;
  transition: transform 300ms var(--ease-out-expo), opacity 300ms var(--ease-out-expo);
}
.toast.in { transform: translateY(0); opacity: 1; }

/* Mobile order bar */
.mobile-order-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(253,248,240,0.94); backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  z-index: 40; display: none;
}
@media (max-width: 768px) { .mobile-order-bar { display: block; } }

/* Underline link */
.ul-link { color: var(--color-honey); font-weight: 600; position: relative; }
.ul-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--color-honey); transform: scaleX(0); transform-origin: left;
  transition: transform 250ms var(--ease-out-expo);
}
.ul-link:hover::after { transform: scaleX(1); }