@font-face {
  font-family: "Baloo";
  src: url("assets/baloo-2-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #202448;
  --body: #50536d;
  --paper: #fff;
  --white: #fffdf7;
  --line: #e9dfcd;
  --purple: #6042c6;
  --green: #77ce92;
  --heading: "Baloo", ui-rounded, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #2458bb; outline-offset: 5px; border-radius: 6px; }
h1, h2, h3 { font: 800 1em/1 var(--heading); margin: 0; }
p, figure { margin: 0; }
.wrap { width: min(1200px, calc(100% - 100px)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: 1rem; z-index: 4; padding: .75rem 1rem; background: var(--white); transform: translateY(-180%); }
.skip:focus { transform: translateY(0); }

.site-header {
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #ebe6f7;
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font: 800 34px/1 var(--heading);
  letter-spacing: -.05em;
  text-decoration: none;
}
.brand > span > span { margin-left: .12em; color: var(--purple); }
.site-header nav { display: flex; align-items: center; gap: 34px; }
.site-header nav a, .site-footer > a:last-child { text-decoration: none; font-weight: 750; white-space: nowrap; }
.site-header nav a:hover, .site-footer > a:last-child:hover { text-decoration: underline; text-underline-offset: .3em; }
.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.header-cta:hover { background: #f1ebff; }
.header-cta svg { width: 19px; height: 19px; color: #be3129; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(22px, 4.4vw, 67px);
  padding-block: 62px 70px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -16px;
  background: url("assets/hero-pattern.svg") 0 8px / 320px auto repeat;
  mask-image: linear-gradient(#000, transparent 36% 63%, #000);
  pointer-events: none;
}
.hero-copy { padding-bottom: 24px; }
.hero-copy .eyebrow { color: #3e4a74; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow > span {
  width: 12px;
  height: 12px;
  background: var(--green);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  transform: rotate(-12deg);
  flex: 0 0 auto;
}
.hero h1 {
  color: #192848;
  font-size: clamp(58px, 7.8vw, 113px);
  line-height: .83;
  margin: 24px 0 22px;
  letter-spacing: -.06em;
}
.hero h1 em { font-style: normal; color: var(--purple); }
.hero-lead { color: #465473; max-width: 435px; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.6; }
.hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 55px;
  padding: 10px 20px;
  border-radius: 15px;
  border: 2px solid var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.button-primary { color: #fff; background: var(--purple); box-shadow: 0 4px var(--ink); }
.button-primary:hover { background: #4f32ac; transform: translateY(-2px); box-shadow: 0 6px var(--ink); }
.button-primary:active { transform: translateY(3px); box-shadow: 0 1px var(--ink); }
.button svg { width: 17px; height: 17px; }
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: end;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.text-link:hover { color: #a12d27; }
.text-link span { display: inline-block; text-decoration: none; }
.hero-actions .text-link { align-self: auto; color: #443191; }
.hero-actions .text-link:hover { color: #2d2066; }

.hero-art { min-width: 0; }
.hero-illustration {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.18;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 34px;
  background: #a2dcff url("assets/garden.svg") center bottom / cover no-repeat;
  box-shadow: 0 7px var(--ink);
}
.character { position: absolute; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 3px 0 #214a5140); }
.hero-dino { width: 61%; left: 16%; bottom: 8%; }
.hero-duck { width: 26%; left: 2%; bottom: 9%; transform: rotate(-6deg); }
.hero-cat { width: 27%; right: 3%; bottom: 7%; transform: rotate(6deg); }
.sticker {
  position: absolute;
  top: 8%;
  right: 6%;
  padding: 4px 15px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #ffdb69;
  box-shadow: 0 3px var(--ink);
  font: 800 clamp(17px, 2.2vw, 30px)/1.1 var(--heading);
  transform: rotate(8deg);
}
.note {
  position: absolute;
  font: 900 clamp(26px, 5vw, 61px)/1 system-ui, sans-serif;
  animation: bob 5s ease-in-out infinite;
}
.note-one { top: 18%; left: 14%; color: #994ebe; --tilt: -15deg; }
.note-two { top: 40%; right: 12%; color: #9b395e; --tilt: 14deg; animation-delay: -2s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-8px) rotate(var(--tilt)); }
}
.hero-art figcaption {
  margin: 19px 2px 0;
  color: var(--body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.song-section { padding-block: 62px 72px; border-block: 1px solid var(--line); background: #fffdf6; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 29px; }
.section-head .text-link { margin-bottom: 4px; }
h2 { font-size: clamp(40px, 5vw, 65px); letter-spacing: -.035em; margin: 10px 0 3px; }
.section-head p:last-child, .friends-copy > p:not(.eyebrow) { color: var(--body); }
.songs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.song-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 21px;
  background: var(--white);
}
.song-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #e4f3fa; border-bottom: 1px solid var(--line); }
.song-card > div { padding: 16px 18px 19px; }
.tag {
  display: inline-block;
  border-radius: 40px;
  padding: 4px 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.tag-coral { background: #ffcbbe; }
.tag-yellow { background: #ffe594; }
.tag-lilac { background: #e7d6ff; }
.tag-green { background: #cceecf; }
.tag-blue { background: #cce9ff; }
.tag-peach { background: #ffd8a8; }
.song-card h3 { font-size: clamp(24px, 2.4vw, 32px); margin-top: 8px; line-height: 1.06; }
.song-card h3 a { text-decoration: none; }
.song-card h3 a::after { position: absolute; inset: 0; content: ""; }
.song-card h3 span { font-family: system-ui, sans-serif; font-size: .58em; vertical-align: 2px; }
.song-card:hover h3 a { color: #a12d27; }
.song-card:focus-within { outline: 3px solid #2458bb; outline-offset: 3px; }
.song-card p { color: var(--body); font-size: 14px; margin-top: 5px; }

.friends { padding-block: 72px; }
.friends-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 26px;
  padding: clamp(25px, 5vw, 60px);
  border: 2px solid var(--ink);
  border-radius: 29px;
  box-shadow: 0 5px var(--ink);
  background: linear-gradient(117deg, #d7f6dd, #e0f6fc);
}
.friends-copy > p:not(.eyebrow) { max-width: 430px; margin: 12px 0 18px; }
.cast { display: flex; align-items: end; gap: 8px; }
.cast figure { flex: 1 1 0; min-width: 0; text-align: center; }
.cast figure:nth-child(2) { flex: 1.2 1 0; }
.cast img { width: 100%; height: clamp(71px, 14vw, 168px); object-fit: contain; object-position: center bottom; }
.cast figcaption { display: inline-block; margin-top: 8px; padding: 3px 12px; border: 1px solid var(--ink); border-radius: 30px; background: #fff8df; font: 800 19px/1 var(--heading); }

.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); min-height: 90px; }
.site-footer .brand { font-size: 25px; }
.site-footer p { color: var(--body); font-size: 13px; }

@media (max-width: 1010px) {
  .wrap { width: calc(100% - 64px); }
  .hero-actions { gap: 18px; }
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(58px, 8.5vw, 92px); }
  .hero-art figcaption { font-size: 9px; letter-spacing: .06em; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 42px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; gap: 12px; }
  .site-header nav { display: none; }
  .brand { font-size: 29px; gap: 6px; }
  .site-header .brand img { width: 38px; height: 38px; }
  .header-cta { padding-inline: 11px; min-height: 39px; font-size: 13px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 39px 47px; gap: 28px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(60px, 12vw, 95px); margin: 20px 0 15px; }
  .hero-actions { margin-top: 19px; gap: 16px 19px; }
  .hero-illustration { border-radius: 25px; }
  .hero-art figcaption { margin-top: 15px; }
  .song-section { padding-block: 44px 48px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 21px; }
  .section-head .text-link { align-self: start; margin: 0; }
  .songs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .song-card > div { padding: 13px 13px 16px; }
  .friends { padding-block: 47px; }
  .friends-card { grid-template-columns: minmax(0, 1fr); }
  .cast { max-width: 510px; }
  .cast img { height: clamp(82px, 19vw, 145px); }
}

@media (max-width: 440px) {
  .wrap { width: calc(100% - 36px); }
  .hero-actions { align-items: start; flex-direction: column; }
  .hero h1 { font-size: clamp(54px, 15vw, 66px); }
  .hero-art figcaption { display: none; }
  .songs { grid-template-columns: minmax(0, 1fr); }
  .song-card h3 { font-size: 28px; }
  .site-footer { flex-wrap: wrap; padding-block: 15px; }
  .site-footer p { order: 3; width: 100%; }
}

@media (max-width: 370px) {
  .site-header .brand { font-size: 23px; gap: 4px; }
  .site-header .brand img { width: 32px; height: 32px; }
  .header-cta { padding-inline: 8px; font-size: 12px; }
  .header-cta > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}