:root {
  --cream: #fff9f2;
  --paper: #fffdf8;
  --pink: #cc0099;
  --magenta: #c5299b;
  --purple: #37194d;
  --lavender: #a656a2;
  --green: #77bc1f;
  --yellow: #fcbd1b;
  --orange: #ef7b10;
  --teal: #00a297;
  --grape: #52247f;
  --mint: #c9e6d3;
  --lime: #aebf38;
  --spring-pink: #f4d6e9;
  --ink: #37194d;
  --font-title: "DM Sans", system-ui, sans-serif;
  --font-heading: "Permanent Marker", "Arial Black", sans-serif;
  --font-subheading: "Kalam", cursive;
  --font-body: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { background: var(--cream); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-title);
}

main {
  width: min(100%, 630px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  box-shadow: none;
}

.hero {
  position: relative;
  padding: 0;
  text-align: center;
  aspect-ratio: 1200 / 636;
  overflow: hidden;
}

.hero-campaign { display: block; width: 100%; height: auto; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 2%;
  background: var(--cream);
  pointer-events: none;
}
.hero::before { top: 3%; width: 12%; height: 18%; }
.hero::after { top: 47%; width: 13%; height: 20%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.campaign-logo {
  display: block;
  width: min(300px, 68vw);
  margin: 0 auto 2px;
  mix-blend-mode: multiply;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .2em;
}

h1 {
  margin: 1px 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 10vw, 4.15rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.055em;
  transform: rotate(-1deg);
}

h1 span { color: var(--pink); }
h1 i { color: var(--pink); font-style: normal; }
h1::after {
  content: "";
  display: block;
  width: 38%;
  height: 8px;
  margin: 7px 29% 0;
  border-radius: 50%;
  border-top: 4px solid var(--spring-pink);
  transform: rotate(-3deg);
}

.intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.9rem, 2.7vw, 1.05rem);
  line-height: 1.28;
}

.side-note {
  position: absolute;
  z-index: 2;
  font-family: var(--font-subheading);
  font-size: clamp(.75rem, 1.8vw, 1rem);
  font-weight: 700;
  line-height: 1.05;
}
.side-note span { font-size: 1.65em; }
.note-left { top: 42px; left: 3%; color: var(--pink); transform: rotate(-8deg); }
.note-right { top: 67px; right: 3%; color: var(--purple); transform: rotate(8deg); }
.hero-sticker { position: absolute; z-index: 1; display: block; object-fit: contain; pointer-events: none; }
.hero-stars { left: 4%; top: 166px; width: 30px; transform: rotate(-11deg); }
.hero-accent { right: 3%; top: 170px; width: 38px; transform: rotate(8deg); }
.hero-heart { display: none; }

.action-zone { position: relative; padding: clamp(24px, 3vw, 32px) 0 4px; }
.action-list {
  display: grid;
  gap: 6px;
  width: min(420px, calc(100% - 28px));
  margin: 0 auto;
}

.action {
  min-height: 56px;
  display: grid;
  grid-template-columns: 45px 1fr 30px;
  align-items: center;
  padding: 6px 13px 6px 7px;
  border: 2px solid var(--paper);
  border-radius: 18px;
  color: white;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(60, 21, 95, .1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.action:nth-child(odd), .action:nth-child(even) { transform: none; }
.action:hover,
.action:focus-visible {
  transform: translateY(-3px) rotate(0deg) scale(1.008);
  box-shadow: 0 13px 24px rgba(60, 21, 95, .2);
  outline: none;
}
.action:active { transform: scale(.985); }
.purple { background: linear-gradient(110deg, #63308a, var(--purple)); }
.pink { background: linear-gradient(110deg, var(--magenta), #e40091); }
.orange { background: linear-gradient(110deg, var(--orange), #ff8d16); }
.teal { background: linear-gradient(110deg, var(--teal), #08b3aa); }
.grape { background: linear-gradient(110deg, #63308a, var(--purple)); }
.outline { color: white; background: linear-gradient(110deg, var(--magenta), #e40091); border-color: var(--paper); }
.learn { color: white; background: linear-gradient(110deg, var(--teal), #08b3aa); border: 2px solid var(--paper); }
.final-action { margin-top: 3px; text-align: center; }

.icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--paper);
  transform: rotate(-5deg);
  overflow: hidden;
}
.icon img { width: 88%; height: 88%; display: block; object-fit: contain; }
.pink .icon img { width: 77%; height: 77%; }
.orange .icon img { width: 94%; height: 94%; }
.teal .icon img { width: 92%; height: 92%; }
.grape .icon img { width: 96%; height: 96%; }
.dashed .icon { background: transparent; }
.outline .icon img { width: 94%; height: 94%; }
.dashed .icon img { width: 82%; height: 82%; }
.label { display: flex; min-width: 0; flex-direction: column; text-align: left; }
.label strong { font-family: var(--font-title); font-size: clamp(.79rem, 2.6vw, .91rem); font-weight: 900; line-height: 1.05; letter-spacing: .012em; }
.label small { margin-top: 2px; font-family: var(--font-body); font-size: clamp(.68rem, 2.15vw, .79rem); line-height: 1.08; }
.arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--purple);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 3px 8px rgba(55, 25, 77, .18);
  font-family: Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: .8;
  padding: 0 0 3px 1px;
  transform: none;
  transition: transform .18s ease;
}
.action:hover .arrow,
.action:focus-visible .arrow { transform: translateX(2px); }

.running-divider {
  margin: 0;
  padding: 2px 0 1px;
  color: var(--purple);
  font-family: var(--font-subheading);
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  transform: rotate(-1deg);
}

.margin-note {
  position: absolute;
  z-index: 2;
  width: 78px;
  font-family: var(--font-subheading);
  font-size: .68rem;
  font-weight: 700;
  line-height: .95;
  pointer-events: none;
}
.left-one { left: 7px; top: 84px; color: var(--pink); transform: rotate(-9deg); text-align: right; }
.right-one { right: 5px; top: 58px; color: var(--purple); transform: rotate(8deg); }
.left-two { left: 10px; bottom: 35px; color: var(--pink); transform: rotate(-7deg); text-align: right; }
.right-two { right: 6px; bottom: 85px; color: var(--purple); transform: rotate(8deg); }

.edge-doodle {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
  opacity: .96;
}
.doodle-heart-right { right: 5%; top: 20%; width: 42px; transform: translateY(-50%) rotate(5deg); }
.doodle-loop-left { left: 4%; top: 48%; width: 70px; transform: translateY(-50%) rotate(-3deg); }
.doodle-star-right { right: 6%; top: 76%; width: 30px; transform: translateY(-50%) rotate(8deg); }

.city-art { position: relative; width: 100%; aspect-ratio: 3 / 1; margin-top: 5px; overflow: hidden; }
.city-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 100%;
}

.values-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 10px 2px;
  color: var(--purple);
  font-size: clamp(.55rem, 1.8vw, .68rem);
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
.value-heart { font-size: 1rem; line-height: 1; letter-spacing: 0; }
.pink-heart { color: var(--pink); }
.orange-heart { color: var(--orange); }
.teal-heart { color: var(--teal); }

footer { padding: 10px 20px 18px; text-align: center; font-family: var(--font-body); font-size: .69rem; }
footer p { margin: 3px; }
.footer-name { font-weight: 700; font-size: .86rem; }
.social-links { display: flex; justify-content: center; gap: 9px; margin-top: 6px; }
.social-links a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--purple);
  text-decoration: none;
  transition: transform .16s ease, color .16s ease;
}
.social-links a:hover,
.social-links a:focus-visible { color: var(--pink); transform: translateY(-2px); outline: none; }
.social-links img { width: 29px; height: 29px; display: block; object-fit: contain; }

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 22px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  color: white;
  background: var(--purple);
  font-weight: 800;
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 24px rgba(60, 21, 95, .28);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 620px) {
  .hero { padding: 0; }
  .action-zone { padding-top: 18px; }
  .side-note { display: none; }
  .hero-stars { left: 1%; top: 164px; width: 26px; }
  .hero-accent { right: 0; top: 166px; width: 34px; }
  .hero-heart { display: none; }
  .eyebrow { font-size: .58rem; letter-spacing: .12em; }
  .action-list { width: min(420px, calc(100% - 34px)); gap: 6px; }
  .action { min-height: 54px; grid-template-columns: 43px 1fr 27px; padding: 6px 9px 6px 6px; border-radius: 17px; }
  .icon { width: 37px; height: 37px; border-radius: 11px; }
  .arrow { width: 25px; height: 25px; font-size: .92rem; }
  .margin-note { display: none; }
  .city-art { width: 100%; aspect-ratio: 3 / 1; }
  .values-strip { gap: 5px; padding-inline: 4px; font-size: clamp(.48rem, 2.1vw, .6rem); letter-spacing: .07em; }
  .value-heart { font-size: .85rem; }
}

@media (max-width: 520px) {
  .edge-doodle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action, .toast { transition: none; }
}