/* HendiLife Brand System */
:root {
  /* Primary palette */
  --hl-purple: #783CC8;
  --hl-purple-deep: #5A22A8;
  --hl-purple-soft: #9B6FDB;
  --hl-purple-wash: #F1EAFB;
  --hl-yellow: #FFF014;
  --hl-yellow-deep: #F5D800;
  --hl-yellow-wash: #FFFBE0;

  /* Neutrals */
  --hl-ink: #1A0E2E;
  --hl-graphite: #3D2F52;
  --hl-slate: #6B5F7D;
  --hl-mist: #E8E3EF;
  --hl-paper: #FBFAFD;
  --hl-white: #FFFFFF;

  /* Accent (sparingly) */
  --hl-coral: #FF6B5B;
  --hl-mint: #6FDBB0;

  /* Type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }

.hl-body {
  font-family: var(--font-body);
  color: var(--hl-ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Organic blob shapes */
.hl-blob {
  position: absolute;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  filter: blur(0.5px);
  pointer-events: none;
}
.hl-blob-yellow { background: var(--hl-yellow); }
.hl-blob-purple { background: var(--hl-purple); }
.hl-blob-purple-soft { background: var(--hl-purple-soft); }

/* Squiggle underline */
.hl-squiggle {
  position: relative;
  display: inline-block;
}
.hl-squiggle::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: -6px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 6 Q 12 -2, 25 5 T 50 5 T 75 5 T 100 5' stroke='%23FFF014' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") repeat-x;
  background-size: 100px 10px;
}
.hl-squiggle-purple::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 6 Q 12 -2, 25 5 T 50 5 T 75 5 T 100 5' stroke='%23783CC8' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") repeat-x;
  background-size: 100px 10px;
}

/* Pill tag */
.hl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hl-pill-purple { background: var(--hl-purple); color: var(--hl-white); }
.hl-pill-yellow { background: var(--hl-yellow); color: var(--hl-ink); }
.hl-pill-outline { background: transparent; color: var(--hl-purple); border: 1.5px solid var(--hl-purple); }

/* Button */
.hl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hl-btn:hover { transform: translateY(-2px); }
.hl-btn-primary { background: var(--hl-purple); color: var(--hl-white); box-shadow: 0 8px 24px -8px rgba(120,60,200,0.5); }
.hl-btn-primary:hover { box-shadow: 0 12px 32px -8px rgba(120,60,200,0.6); }
.hl-btn-yellow { background: var(--hl-yellow); color: var(--hl-ink); box-shadow: 0 8px 24px -8px rgba(245,216,0,0.6); }
.hl-btn-ghost { background: transparent; color: var(--hl-ink); border: 1.5px solid var(--hl-ink); }

/* Arrow glyph */
.hl-arrow::after {
  content: '→';
  font-size: 1.1em;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE LAYOUT — viewport ≤ 720px
   Targeted overrides; the desktop design is otherwise untouched.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Page shell — let everything take full screen width */
  html, body { overflow-x: hidden; }
  #root { display: block !important; justify-content: flex-start !important; }
  #root > div {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  /* Sections — collapse 80px padding to ~22px */
  section, footer, nav { padding-left: 22px !important; padding-right: 22px !important; }
  section[style*="padding"] { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Hero & all 2-col grids → single column */
  section [style*="grid-template-columns"],
  section [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Display headings — scale down the giant Fraunces */
  h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(32px, 8.5vw, 48px) !important; line-height: 1.05 !important; }
  h3 { font-size: clamp(22px, 5.5vw, 30px) !important; }

  /* Hand-written accent text */
  [style*="font-hand"], [style*="var(--font-hand)"] {
    font-size: clamp(26px, 7vw, 36px) !important;
  }

  /* Body copy never below 16 */
  p { font-size: 16px !important; line-height: 1.55 !important; }

  /* Nav — stack & shrink */
  nav {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    gap: 12px !important;
  }
  nav img { height: 38px !important; width: auto !important; }
  nav > div[style*="gap: 32"],
  nav > div[style*="gap: 36"],
  nav > div[style*="gap:32"],
  nav > div[style*="gap:36"] {
    display: none !important;  /* hide center link list on mobile */
  }
  nav .hl-btn { padding: 10px 16px !important; font-size: 13px !important; }

  /* Buttons — full-width primary CTAs feel right on phones */
  .hl-btn { padding: 14px 22px !important; font-size: 15px !important; }
  section .hl-btn { width: 100%; justify-content: center; }
  section [style*="display: flex"][style*="gap"] .hl-btn,
  section [style*="display:flex"][style*="gap"] .hl-btn {
    width: auto;
  }

  /* Pills */
  .hl-pill { font-size: 11px !important; padding: 6px 12px !important; }

  /* Footer — stack logo above copyright */
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  footer img { height: 28px !important; }
  footer > div { font-size: 12px !important; }

  /* Decorative blobs — keep them but pull in so they don't dominate */
  .hl-blob { transform: scale(0.55); }

  /* Photo slots & cards — make sure heights aren't cropped */
  [style*="height: 580"],
  [style*="height:580"] { height: clamp(280px, 70vw, 420px) !important; }
  [style*="height: 420"],
  [style*="height:420"] { height: clamp(240px, 60vw, 360px) !important; }
  [style*="height: 280"],
  [style*="height:280"] { height: clamp(180px, 50vw, 260px) !important; }

  /* Cards inside catalog — full-width */
  [style*="grid-template-columns: repeat"],
  [style*="gridTemplateColumns: repeat"] {
    grid-template-columns: 1fr !important;
  }
}