/* ─────────────────────────────────────────────────────────
   Kate Nowlan · Kawaii Site · shared styles
   Chunky pink, hearts & sparkles, hard drop shadows.
   To change copy, edit the .html files directly.
   ───────────────────────────────────────────────────────── */

:root {
  --ink: #1d1a16;
  --bg: #ffe9ef;
  --bg-dot: #ff8aa3;
  --pink: #ff8aa3;
  --pink-deep: #f56a86;
  --rose: #5a2a3a;
  --yellow: #ffd54d;
  --yellow-soft: #fff8b0;
  --mint: #c5e8d5;
  --white: #fff;
  --shadow: #1d1a16;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Patrick Hand', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  /* dotted background pattern */
  background-image: radial-gradient(var(--bg-dot) 1.2px, transparent 1.8px);
  background-size: 26px 26px;
  background-position: 0 0;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--pink-deep); text-decoration: none; }

.display { font-family: 'Cherry Bomb One', cursive; font-weight: 400; }
.hand    { font-family: 'Caveat', cursive; font-weight: 600; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: 540px; margin: 0 auto; padding: 0 22px; }
@media (min-width: 720px) { .wrap { max-width: 720px; padding: 0 32px; } }

/* ── Top bar ────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: transparent;
  transition: background .25s ease, border-color .25s ease;
  border-bottom: 1.5px solid transparent;
}
.topbar.scrolled {
  background: rgba(255,233,239,.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--ink);
}
.lockup { display: flex; align-items: center; gap: 10px; }
.lockup .logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.lockup .logo img { width: 100%; height: 100%; object-fit: cover; }
.lockup .wordmark {
  font-family: 'Cherry Bomb One', cursive;
  font-size: 20px; line-height: 1; color: var(--rose);
}

/* hamburger: chunky shadowed pink button */
.hamburger {
  width: 46px; height: 40px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  display: grid; gap: 5px; padding: 10px 11px; align-content: center;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--ink);
  transition: opacity .25s ease, transform .12s ease, box-shadow .12s ease;
}
.hamburger i { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.hamburger:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); }
.hamburger:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
body.home .hamburger { opacity: 0; pointer-events: none; }
body.home.scrolled .hamburger { opacity: 1; pointer-events: auto; }

.book-mini {
  display: none;
  align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--pink); color: #fff;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-family: 'Cherry Bomb One'; font-size: 14px;
  box-shadow: 2px 3px 0 var(--ink);
}
@media (min-width: 640px) {
  body:not(.home) .book-mini { display: inline-flex; }
}

/* ── Hero (home) ────────────────────────────────────────── */
.hero {
  padding: 18px 0 32px;
  position: relative;
}
.hero-row {
  display: flex; align-items: center; gap: 18px;
}
.hero .big-logo {
  width: clamp(100px, 28vw, 150px);
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  transform: rotate(-3deg);
  flex-shrink: 0;
}
.hero .big-logo img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 {
  font-family: 'Cherry Bomb One', cursive;
  font-weight: 400;
  font-size: clamp(40px, 11vw, 72px);
  line-height: .92;
  color: var(--rose);
  margin: 0;
  text-shadow: 2px 2px 0 rgba(255,138,163,.35);
}
.hero h1 .accent { color: var(--pink-deep); }

.hero .lede {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.2;
  margin: 22px 0 0;
  max-width: 30ch;
  color: var(--ink);
}

/* scattered sparkles */
.spark {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* ── CTA buttons (chunky shadow pills) ──────────────────── */
.cta-stack {
  display: flex; flex-direction: column; gap: 16px;
  margin: 32px 0 0;
}
.cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--rose);
  font-family: 'Cherry Bomb One', cursive;
  font-size: 19px;
  text-decoration: none;
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  letter-spacing: .3px;
}
.cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 var(--ink); }
.cta:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.cta.primary { background: var(--pink); color: #fff; }
.cta.yellow  { background: var(--yellow-soft); }
.cta.ink     { background: var(--ink); color: #fff; }
.cta svg { flex-shrink: 0; }

/* ── Sticker row ────────────────────────────────────────── */
.stickers {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px;
  padding: 0 6px;
}
.stickers > * {
  filter: drop-shadow(2px 2px 0 var(--ink));
}

/* ── Section heads ──────────────────────────────────────── */
.section-head { padding: 28px 0 12px; }
.section-head .eyebrow {
  font-family: 'Cherry Bomb One', cursive;
  font-size: 11px; letter-spacing: 4px;
  color: var(--pink-deep);
  text-transform: uppercase;
}
.section-head h1 {
  font-family: 'Cherry Bomb One', cursive;
  font-weight: 400;
  font-size: clamp(46px, 11vw, 72px);
  line-height: .95;
  color: var(--rose);
  margin: 6px 0 0;
  text-shadow: 2px 2px 0 rgba(255,138,163,.35);
}
.section-head h1 .accent { color: var(--pink-deep); }
.section-head .sub {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin-top: 10px;
}

/* ── Chunky cards (aftercare) ───────────────────────────── */
.cards { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.card {
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: var(--white);
  padding: 18px 20px 20px;
  box-shadow: 4px 5px 0 var(--ink);
  position: relative;
}
.card.pink   { background: var(--pink); color: #fff; }
.card.yellow { background: var(--yellow-soft); }
.card.mint   { background: var(--mint); }
.card .hd {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cherry Bomb One', cursive;
  font-size: 22px;
  color: var(--rose);
  margin-bottom: 6px;
}
.card.pink .hd { color: #fff; }
.card .body {
  font-family: 'Patrick Hand'; font-size: 17px; line-height: 1.5;
}
.card .body p { margin: .4em 0; }

/* ── Work grid ──────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 24px;
}
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }
.tile {
  position: relative;
  aspect-ratio: 3/4;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 4px 5px 0 var(--ink);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--pink-deep);
  font-family: 'Cherry Bomb One', cursive; font-size: 28px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .deco {
  position: absolute;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
}
.tile .deco.tl { top: -10px; left: -8px; }
.tile .deco.tr { top: -10px; right: -8px; }
.tile .deco.br { bottom: -10px; right: -8px; }
.tile .deco.bl { bottom: -10px; left: -8px; }

/* ── Marquee ────────────────────────────────────────────── */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  background: var(--pink);
  color: #fff;
  padding: 10px 0;
  margin-top: 56px;
}
.marquee-track {
  display: inline-block;
  font-family: 'Cherry Bomb One', cursive;
  font-size: 22px;
  letter-spacing: 1px;
  animation: marquee 28s linear infinite;
  padding-left: 100%;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ── Footer ─────────────────────────────────────────────── */
.foot {
  padding: 32px 0 40px;
  text-align: center;
  font-family: 'Patrick Hand'; font-size: 14px;
  color: var(--rose);
}
.foot a { color: var(--pink-deep); }
.foot .hand-big {
  display: block; font-family: 'Caveat'; font-size: 28px;
  color: var(--pink-deep); margin-bottom: 6px;
}

/* ── Menu overlay ───────────────────────────────────────── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--pink);
  background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 2px);
  background-size: 28px 28px;
  display: none;
  flex-direction: column;
  padding: 18px 24px 28px;
  overflow-y: auto;
}
.menu-overlay.open { display: flex; animation: menuIn .22s ease both; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-overlay .menu-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.menu-overlay .menu-top .wordmark { color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.menu-overlay .menu-close {
  width: 46px; height: 40px;
  border: 2px solid var(--ink); border-radius: 12px;
  background: var(--white);
  display: grid; place-items: center; cursor: pointer;
  font-family: 'Cherry Bomb One'; font-size: 22px;
  box-shadow: 2px 3px 0 var(--ink);
}
.menu-overlay h2 {
  font-family: 'Cherry Bomb One'; font-size: 44px;
  color: #fff; text-shadow: 3px 3px 0 var(--ink);
  margin: 4px 0 14px;
}
.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.menu-list li a {
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 20px;
  background: var(--white);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-family: 'Cherry Bomb One'; font-size: 20px;
  color: var(--rose); text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.menu-list li a:hover { transform: translate(-2px,-2px); box-shadow: 5px 6px 0 var(--ink); }
.menu-cta { margin-top: 18px; }
.menu-cta .cta { background: var(--ink); color: #fff; }
.menu-foot {
  margin-top: auto;
  padding-top: 24px;
  font-family: 'Patrick Hand'; font-size: 15px;
  color: #fff;
}
.menu-foot a { color: #fff; text-decoration: underline; display: block; }