/* Sprinklehorn: "come over to Sprinky's house".
   Palette from studio/style/sprinklehorn-2d.style.json; candy buttons, speech bubbles and confetti from the kids-edu Mission Board. */
:root {
  --wall: #F5B970; --wall-light: #FCD195; --wall-deep: #EEA75E;
  --cream: #FFF6E6; --paper: #FFFDF8;
  --ink: #233A5A; --ink-soft: #4C6081;
  --teal: #62A6A2; --teal-light: #CDEDE4; --teal-deep: #2F6F6B;
  --coral: #F7845F; --coral-deep: #EE5530;
  --marigold: #FAC23C; --marigold-light: #FFE7AE;
  --berry: #E25B8E; --berry-light: #FFD6E5; --mute-red: #E0322F;
  --lavender: #AF88C8; --lavender-light: #EEE3FB;
  --leaf: #8FC066; --leaf-light: #DDF2CF;
  --sky-1: #8FD3F5; --sky-2: #DDF4FB;
  --wood: #EBA866; --wood-dark: #C27E4E; --wood-light: #F3BE7E;
  --r1: #FA5E2C; --r2: #FB8F36; --r3: #FBD54E; --r4: #8FC066; --r5: #439DDF; --r6: #AF88C8;
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Andika", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Wide screens keep the 1440px layout centered; backgrounds stay full width.
     --side is the empty margin on each side, resolved against the element's containing block. */
  --page: 1440px;
  --side: max(0px, (100% - var(--page)) / 2);
  --outline: 0 .06em 0 var(--ink), .045em .045em 0 var(--ink), -.045em .045em 0 var(--ink), .045em -.045em 0 var(--ink), -.045em -.045em 0 var(--ink),
             .06em 0 0 var(--ink), -.06em 0 0 var(--ink), 0 -.06em 0 var(--ink), 0 .15em 0 rgba(47, 64, 86, .2);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 18px/1.5 var(--font-body); overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 4px dashed var(--berry); outline-offset: 4px; border-radius: 14px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--paper); padding: 10px 16px; border: 3px solid var(--ink); border-radius: 999px; }
.skip:focus { left: 12px; }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- top bar: nav + bunting ---------- */
.topbar { position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 20; pointer-events: none; }
.bunting { position: absolute; inset: 0 0 auto 0; width: 100%; height: 190px; overflow: visible; }
.bunting-string { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.flags { position: absolute; inset: 0; }
.flag { position: absolute; width: 46px; height: 56px; margin-left: -23px; transform-origin: 50% 0; animation: sway 3.6s ease-in-out infinite; }
.flag svg { width: 100%; height: 100%; overflow: visible; }
@keyframes sway { 0%, 100% { transform: rotate(var(--tilt, 0deg)); } 50% { transform: rotate(calc(var(--tilt, 0deg) + 6deg)); } }

.nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px calc(var(--side) + clamp(14px, 4vw, 48px)); pointer-events: auto; }
.nav a, .sound {
  font: 600 16px/1 var(--font-display); color: var(--ink); text-decoration: none; background: var(--paper);
  padding: 9px 15px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease); cursor: pointer;
}
.nav a:hover, .sound:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.nav a:active, .sound:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.nav a[aria-current="page"] { background: var(--marigold-light); }
.nav a { white-space: nowrap; }
.nav .nav-mark { flex: none; padding: 2px; margin-right: auto; border-radius: 50%; background: var(--paper); }
.nav-mark img { width: 40px; height: 40px; border-radius: 50%; }
/* Sounds: a round speaker the size of the logo mark, slashed in red while sounds are off (the default). */
.nav .sound { display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; flex: none; }
.sound-icon { width: 32px; height: 32px; overflow: visible; }
.sound-speaker { fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sound-waves { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.sound-gap { stroke: var(--paper); stroke-width: 6; stroke-linecap: round; }
.sound-slash { stroke: var(--mute-red); stroke-width: 3.2; stroke-linecap: round; }
.sound:not([aria-pressed="true"]) .sound-waves, .sound[aria-pressed="true"] .sound-gap, .sound[aria-pressed="true"] .sound-slash { display: none; }
.sound:not([aria-pressed="true"]) .sound-icon { translate: 3px 0; } /* centered without the waves */
.sound[aria-pressed="true"] { background: var(--marigold-light); }

/* ---------- hero: Sprinky's house ---------- */
.hero {
  position: relative; min-height: clamp(760px, 100svh, 1000px); overflow: hidden; isolation: isolate;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, .22) 34% 46%, transparent 46% 100%),
    linear-gradient(180deg, var(--wall-light) 0%, var(--wall) 46%, var(--wall-deep) 78%);
}
.hero::after, .page-head::after { /* wooden floor */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; z-index: -1;
  border-top: 6px solid var(--wood-dark); box-shadow: 0 -14px 0 var(--teal), 0 -17px 0 var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 136px, var(--wood-dark) 136px 139px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 70%, var(--wood-dark));
}
.window {
  position: absolute; z-index: -1; right: calc(var(--side) + clamp(16px, 7vw, 100px)); top: 150px;
  width: clamp(190px, 25vw, 360px); aspect-ratio: 1; border-radius: 50%;
  border: clamp(12px, 1.3vw, 18px) solid var(--teal);
  box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--ink), 0 16px 0 rgba(47, 64, 86, .14);
  overflow: hidden; animation: window-in .9s var(--pop) .15s both;
}
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); }
.rainbow {
  position: absolute; left: -10%; right: -10%; bottom: -46%; height: 100%;
  background: radial-gradient(circle at 50% 100%, transparent 44%, var(--r6) 44% 48.5%, var(--r5) 48.5% 53%, var(--r4) 53% 57.5%, var(--r3) 57.5% 62%, var(--r2) 62% 66.5%, var(--r1) 66.5% 71%, transparent 71%);
  opacity: .9; animation: rainbow-in 1.6s var(--ease) .9s both;
}
.cloud { position: absolute; height: 26%; aspect-ratio: 2.1; background: #fff; border: 3px solid var(--ink); border-radius: 999px; animation: drift 26s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border: 3px solid var(--ink); border-bottom-color: transparent; border-radius: 50%; }
.cloud::before { width: 52%; aspect-ratio: 1; left: 14%; top: -42%; }
.cloud::after { width: 38%; aspect-ratio: 1; left: 48%; top: -28%; }
.c1 { top: 18%; left: 8%; }
.c2 { top: 52%; left: 52%; height: 18%; animation-duration: 34s; animation-delay: -12s; }
.c3 { top: 8%; left: 70%; height: 15%; animation-duration: 30s; animation-delay: -22s; }
.bar { position: absolute; background: var(--teal); border: 3px solid var(--ink); }
.bar-v { left: 50%; top: -4%; bottom: -4%; width: 7%; transform: translateX(-50%); }
.bar-h { top: 50%; left: -4%; right: -4%; height: 7%; transform: translateY(-50%); }
@keyframes drift { from { translate: -60% 0; } to { translate: 420% 0; } }
@keyframes window-in { from { transform: scale(.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rainbow-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the friends' drawings taped to the wall, as in every room of the house (sets/2d/sprinky-living) */
.drawings { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.drawing { position: absolute; display: block; padding: 4px; background: var(--paper); border: 2px solid rgba(47, 64, 86, .35);
  box-shadow: 0 3px 0 rgba(47, 64, 86, .14); rotate: var(--r, 0deg); animation: fade-up .8s var(--ease) var(--d, 1.6s) both; }
.drawing img { display: block; width: 100%; height: auto; }
.drawing::before, .drawing::after { /* tape */
  content: ""; position: absolute; top: -9px; width: 30%; height: 16px; background: rgba(255, 246, 214, .78);
  border: 1px solid rgba(47, 64, 86, .12); }
.drawing::before { left: -6%; rotate: -24deg; } .drawing::after { right: -6%; rotate: 22deg; }
.d-friends { left: calc(var(--side) + min(100%, var(--page)) * .555); top: 168px; width: clamp(110px, 10.5vw, 150px); --r: -4deg; --d: 1.7s; }
.d-sun { left: calc(var(--side) + min(100%, var(--page)) * .6); top: 296px; width: clamp(66px, 6.2vw, 90px); --r: 6deg; --d: 1.85s; }
.d-rainbow { right: calc(var(--side) + min(100%, var(--page)) * .015); top: 158px; width: clamp(60px, 5.6vw, 82px); --r: 7deg; --d: 2s; }
.twinkle { position: absolute; z-index: -1; color: #fff; font-size: 26px; text-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: twinkle 2.6s ease-in-out infinite; }
.t1 { top: 210px; left: calc(var(--side) + min(100%, var(--page)) * .52); }
.t2 { top: 420px; right: calc(var(--side) + min(100%, var(--page)) * .36); font-size: 18px; animation-delay: -.9s; }
.t3 { top: 130px; right: calc(var(--side) + min(100%, var(--page)) * .34); font-size: 20px; animation-delay: -1.7s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

.hero-copy { position: relative; z-index: 3; max-width: calc(var(--side) + min(560px, 40vw) + clamp(18px, 6vw, 86px)); padding: 196px 0 0 calc(var(--side) + clamp(18px, 6vw, 86px)); }
.logo { margin: 0; font: 700 min(8.4vw, 121px)/.92 var(--font-display); letter-spacing: -.01em; }
.logo-word { display: block; white-space: nowrap; }
.ltr { display: inline-block; color: var(--c); text-shadow: var(--outline); animation: drop .9s var(--pop) calc(.25s + var(--i) * 65ms) both, bob 3.4s ease-in-out calc(1.8s + var(--i) * 120ms) infinite; cursor: default; }
.ltr.wiggle { animation: wiggle .6s var(--pop); }
@keyframes drop { 0% { transform: translateY(-1.3em) rotate(-14deg); opacity: 0; } 60% { transform: translateY(.07em) rotate(3deg); opacity: 1; } 80% { transform: translateY(-.04em) rotate(-1deg); } 100% { transform: none; opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.045em); } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: translateY(-.18em) rotate(-10deg) scale(1.08); } 60% { transform: translateY(.03em) rotate(6deg); } }
.tagline { margin: 22px 0 6px; font: 600 clamp(21px, 2.2vw, 29px)/1.25 var(--font-display); max-width: 30ch; animation: fade-up .8s var(--ease) 1.35s both; }
.sub { margin: 0 0 26px; color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 19px); animation: fade-up .8s var(--ease) 1.45s both; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; animation: fade-up .8s var(--ease) 1.55s both; }
.soon { margin: 14px 0 0; font: 600 16px/1.3 var(--font-display); color: var(--ink-soft); }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- page head (/episodes): a strip of Sprinky's wall and floor ---------- */
.page-head {
  position: relative; isolation: isolate; overflow: hidden; padding: 196px clamp(16px, 5vw, 80px) 128px; text-align: center;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, .22) 34% 46%, transparent 46% 100%),
    linear-gradient(180deg, var(--wall-light) 0%, var(--wall) 55%, var(--wall-deep) 100%);
}
.page-head::after { height: 84px; }
.page-head .section-lead { color: var(--ink); }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 30px 0 0; }

/* ---------- candy buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; padding: .74em 1.35em; min-height: 56px;
  font: 700 clamp(18px, 1.5vw, 21px)/1 var(--font-display); color: #fff; text-decoration: none; cursor: pointer;
  background: var(--coral-deep); border: 4px solid var(--ink); border-radius: 999px; box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-small { min-height: 48px; padding: .6em 1.15em; font-size: 18px; }
.play { position: relative; width: 1.35em; height: 1.35em; border-radius: 50%; background: #fff; flex: none; }
.play::after { content: ""; position: absolute; left: 52%; top: 50%; translate: -42% -50%; border-left: .46em solid var(--coral-deep); border-top: .3em solid transparent; border-bottom: .3em solid transparent; }
.btn.is-soon { background: var(--marigold); color: var(--ink); cursor: default; }
.btn.is-soon .play::after { border-left-color: var(--marigold); }
.btn.is-soon:hover { transform: rotate(-1deg); }

/* ---------- the stage: four friends on the rug ---------- */
.stage {
  position: absolute; z-index: 4; right: calc(var(--side) + clamp(8px, 3vw, 43px)); bottom: 6%;
  /* The four poses side by side are about 1.9x as wide as the stage is tall, so the
     height follows the width; max-height keeps them modest on short screens. */
  width: min(54vw, 778px); aspect-ratio: 1.9; max-height: clamp(260px, 47vh, 500px);
  display: flex; justify-content: center; align-items: flex-end;
}
.rug {
  position: absolute; left: 4%; right: 4%; bottom: -5%; height: 20%; border-radius: 50%; z-index: -1;
  background: #FB8463; border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 10px #FFB59C, inset 0 0 0 14px var(--ink), 0 8px 0 rgba(47, 64, 86, .18);
}
.pal { position: relative; flex: none; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; animation: rise .9s var(--pop) both; }
.pal + .pal { margin-left: -3%; } /* friends huddle, arms overlapping */
/* Never squeeze a pose: no flex shrinking and no global max-width on these images. */
.pal img { height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; user-select: none; -webkit-user-drag: none; }
.pal-luma { height: 98%; animation-delay: .55s; } .pal-luma img { animation: sway-dance 2.4s ease-in-out infinite; }
.pal-sprinky { height: 90%; margin-bottom: 5%; animation-delay: .75s; } .pal-sprinky img { animation: hop-idle 1.9s ease-in-out infinite; }
.pal-grumble { height: 84%; animation-delay: .95s; } .pal-grumble img { animation: wobble 3.1s ease-in-out infinite; }
.pal-hoots { height: 72%; animation-delay: 1.15s; } .pal-hoots img { animation: wave 2.7s ease-in-out infinite; }
.pal.hop img { animation: hop .75s var(--pop); }
@keyframes rise { from { transform: translateY(45%) scale(.55); opacity: 0; } 70% { transform: translateY(-5%) scale(1.04); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sway-dance { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2%); } }
@keyframes hop-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-5%) scale(.98, 1.02); } 70% { transform: translateY(0) scale(1.03, .97); } }
@keyframes wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes wave { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-2%); } }
@keyframes hop { 0% { transform: scale(1.1, .86); } 35% { transform: translateY(-18%) scale(.94, 1.08) rotate(-3deg); } 65% { transform: translateY(0) scale(1.08, .9); } 100% { transform: none; } }

.bubble {
  position: absolute; left: 50%; bottom: 96%; z-index: 6; min-width: 9ch; max-width: 240px; padding: .5em .85em;
  font: 600 clamp(15px, 1.3vw, 19px)/1.2 var(--font-display); color: var(--ink); text-align: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink);
  transform: translateX(-50%) scale(0); transform-origin: 50% 120%; opacity: 0; pointer-events: none;
  transition: transform .28s var(--pop), opacity .18s;
}
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 16px; height: 16px; background: var(--paper); border: 3px solid var(--ink); border-top: 0; border-left: 0; transform: translate(-50%, -55%) rotate(45deg); }
.bubble.show { transform: translateX(-50%) scale(1); opacity: 1; }
.tap-hint {
  position: absolute; z-index: 5; left: -4%; top: 6%;
  margin: 0; font: 600 18px/1 var(--font-display); color: var(--ink); background: var(--paper);
  padding: 10px 14px; border: 3px solid var(--ink); border-radius: 16px; transform: rotate(-6deg);
  box-shadow: 0 4px 0 var(--ink); animation: fade-up .6s var(--ease) 2.6s both, nudge 2s ease-in-out 3.4s infinite; transition: opacity .3s;
}
.tap-hint.gone { animation: none; opacity: 0; }
/* Over 1100 px the stage's top-left corner lands in the words, so there the hint sits under "Meet the friends"
   instead, clear of the words and of Luma's raised hand (Mike, 2026-10-25); under 1100 px the stage's own stays. */
.tap-hint-wide { position: relative; left: auto; top: auto; width: max-content; margin: 16px 80px 0 auto; }
.stage .tap-hint { display: none; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 8px -4px; } }

/* ---------- scalloped edges (Luma's wool) ---------- */
.scallop { position: relative; z-index: 5; height: 34px; margin-top: -33px; background: radial-gradient(circle at 24px 0, transparent 23px, var(--bg) 24.5px) 0 0 / 48px 34px repeat-x; }
.scallop-cream { --bg: var(--cream); }
.scallop-teal { --bg: var(--teal-light); }
.scallop-sky { --bg: var(--sky-2); }
.scallop-cream2 { --bg: var(--cream); }

/* ---------- sections ---------- */
section { position: relative; }
/* Titles are lettered like the logo: one bright color per title, the same navy outline, a little tilt. */
.section-title {
  margin: 0; text-align: center; font: 700 clamp(42px, 6vw, 80px)/1.1 var(--font-display); letter-spacing: .015em;
  color: var(--tc, var(--coral)); text-shadow: var(--outline); rotate: -2deg;
}
.section-title.small { text-align: left; font-size: clamp(36px, 4.4vw, 58px); transform-origin: left center; }
.title-berry { --tc: var(--berry); }
.title-coral { --tc: var(--r1); }
.title-blue { --tc: var(--r5); }
.title-marigold { --tc: var(--r3); }
.title-paper { --tc: var(--paper); }
.section-title .word, .section-title .hop { display: inline-block; }
.section-title .word { white-space: nowrap; }
.section-title.hopping .hop { animation: hop .7s var(--pop) calc(var(--i) * 45ms) both; }
@keyframes hop { 0%, 100% { transform: none; } 35% { transform: translateY(-.18em) rotate(-7deg); } 65% { transform: translateY(.02em) rotate(3deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.section-lead { max-width: 52ch; margin: 18px auto 0; text-align: center; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); }

.friends, .coming { padding: 70px clamp(16px, 5vw, 80px) 120px; background: var(--cream) url("/assets/sprinkles.svg") 0 0 / 260px 260px; }
.cards { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1220px; display: grid; gap: 150px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  --c: var(--berry); --cl: var(--berry-light);
  position: relative; margin-top: 150px; padding: 108px 24px 26px; text-align: center;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 10px 0 var(--ink);
  transform: rotate(-1.4deg); transition: transform .3s var(--pop);
}
.card:nth-child(even) { transform: rotate(1.4deg); }
.card:hover { transform: rotate(0) translateY(-6px); }
.card::before { content: ""; position: absolute; left: 50%; top: -86px; width: 190px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--cl); border: 4px solid var(--ink); }
.card-luma { --c: var(--marigold); --cl: var(--marigold-light); }
.card-grumble { --c: var(--leaf); --cl: var(--leaf-light); }
.card-hoots { --c: var(--coral); --cl: #FFE0D4; }
.card-sprinky { --c: var(--r6); --cl: var(--lavender-light); }
.card-pal { position: absolute; left: 50%; top: -156px; height: 250px; translate: -50% 0; padding: 0; border: 0; background: none; cursor: pointer; }
/* max-width: none: the absolutely positioned button is only as wide as half the card, so the global
   img max-width squeezed the widest friends (Grumble, Hoots) sideways. */
.card-pal img { height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; }
.card-pal:hover img { animation: wiggle-pal .6s var(--pop); }
.card-pal.hop img { animation: hop .75s var(--pop); }
.card-pal .bubble { bottom: 86%; }
@keyframes wiggle-pal { 0%, 100% { transform: none; } 30% { transform: rotate(-5deg) translateY(-4%); } 60% { transform: rotate(4deg); } }
.card h3 { margin: 0; font: 700 36px/1.1 var(--font-display); text-decoration: underline wavy var(--c) 3px; text-underline-offset: 10px; }
/* With JavaScript, each name is lettered in its character's colors and outline color (app.js). */
.card h3.name { font-size: 42px; text-decoration: none; letter-spacing: .02em; padding-bottom: .12em; }
.nl { display: inline-block; color: var(--c); text-shadow: 0 .06em 0 var(--o), .045em .045em 0 var(--o), -.045em .045em 0 var(--o), .045em -.045em 0 var(--o), -.045em -.045em 0 var(--o), .06em 0 0 var(--o), -.06em 0 0 var(--o), 0 -.06em 0 var(--o), 0 .13em 0 var(--o); cursor: default; }
.nl.wiggle { animation: wiggle .6s var(--pop); }
.nw { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card p { margin: 14px 0 0; font-size: 18px; }
.loves { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.loves span { font: 600 14px/1 var(--font-display); padding: 6px 12px; background: var(--cl); border: 2px solid var(--ink); border-radius: 999px; }
/* Under the four friends, the way to /friends, the Meet everyone page (Mike, 2026-10-18: "maybe at the bottom of the
   "meet the friends" section it says "Meet everyone else!""). */
.everyone-jump { margin-top: 64px; }
.btn-everyone { background: var(--berry); }
.go { position: relative; width: 1.35em; height: 1.35em; border-radius: 50%; background: #fff; flex: none; }
.go::after { content: ""; position: absolute; left: 50%; top: 50%; width: .4em; height: .4em; border: solid var(--berry); border-width: .16em .16em 0 0; translate: -68% -50%; rotate: 45deg; }

.episodes { padding: 70px clamp(16px, 5vw, 80px) 120px; background: var(--teal-light) radial-gradient(rgba(47, 111, 107, .16) 2px, transparent 2.5px) 0 0 / 28px 28px; }
/* min(100%, 300px): a card never forces a sideways scroll on the narrowest phones. */
.shows { max-width: 1220px; margin: 54px auto 0; display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.section-lead + .shows { margin-top: 44px; }
.shows-one { max-width: 600px; }
/* /episodes: up to three cards a row and none wider than 380px (3 x 380 + 2 gaps = 1208px); a list of
   one or two stays that narrow and centered (app.js sets --count to the number of cards). */
.shows-all { max-width: min(1208px, var(--count, 3) * 414px - 34px); }
.shows-empty { grid-column: 1 / -1; margin: 0; text-align: center; font: 600 clamp(20px, 2vw, 24px)/1.3 var(--font-display); color: var(--ink-soft); }
/* The card doesn't clip (overflow stays visible) so its badges can stick out past the corners; the picture rounds its own top corners. */
.episode { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 10px 0 var(--ink); transition: transform .3s var(--pop); }
.episode:hover { transform: translateY(-6px) rotate(-.6deg); }
/* A 16:9 box from its own width (padding-top), with the picture laid over it: Safari let a flex item with aspect-ratio grow to
   the picture's natural width, past the card's right border, once the card stopped clipping (Mike's iPhone, 2026-10-11). */
.frame { position: relative; flex: none; height: 0; padding-top: 56.25%; background: var(--ink); border-bottom: 4px solid var(--ink); border-radius: 28px 28px 0 0; }
.frame img, .frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 28px 28px 0 0; }
/* Badges sit on the card's top corners, sticking out past its edge (Mike, 2026-10-11), so they cover as little as possible of the
   drawn thumbnails, whose faces and hero object fill the top. "New!" stays inside the right edge, so it never meets the next card's badge. */
.badge { position: absolute; z-index: 2; left: -18px; top: -18px; padding: 7px 14px; font: 700 18px/1 var(--font-display); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-6deg); }
.badge-episode { background: var(--teal-deep); color: #fff; }
.badge-short { background: var(--marigold); color: var(--ink); }
.badge-new { left: auto; right: 16px; transform: rotate(6deg); background: var(--berry); color: #fff; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
/* The Watch button sits at the bottom, so buttons line up across a row of cards. */
.episode-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 26px 30px; }
.episode-body .btn { margin-top: auto; }
.episode h3 { margin: 6px 0 8px; font: 700 clamp(28px, 2.6vw, 36px)/1.1 var(--font-display); }
/* A title links to the video's own page, /episodes/<slug>, and the link covers the whole card (Mike, 2026-10-17: "i should be
   able to click anywhere on the video card"), out or coming. Only a Watch button that goes to YouTube sits above it; a "Coming"
   button and the badges let a click through to the page. */
.episode h3 a { color: inherit; text-decoration: none; }
.episode h3 a:hover { text-decoration: underline wavy var(--coral-deep) 3px; text-underline-offset: 8px; }
.episode h3 a::after { content: ""; position: absolute; inset: -4px; border-radius: 32px; }
.episode h3 a:focus-visible { outline: none; }
.episode h3 a:focus-visible::after { outline: 4px dashed var(--berry); outline-offset: 6px; }
.episode .btn:not(.is-soon) { position: relative; z-index: 3; }
.episode .badge { pointer-events: none; }
.episode p { margin: 0 0 20px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tags span { font: 600 14px/1 var(--font-display); padding: 6px 12px; background: var(--teal-light); border: 2px solid var(--ink); border-radius: 999px; }
.tags .tag-soon { background: var(--marigold-light); }
.tags .tag-out { background: var(--leaf-light); }
.episode .tags { margin: 0; }
.see-all { margin: 56px 0 0; text-align: center; }

/* /episodes: the cards hang on a clothesline, like the runway on SprinkleOps' Today (Mike, 2026-10-17): a string, a pin at the
   top of each card, a little tilt that straightens when the mouse or a finger finds it. One line that scrolls sideways (his
   pick on d-b2357051), each card the size of the home page's. */
.line .episode { --tilt: -1deg; --lift: 0px; transform-origin: 50% -14px; transform: translateY(var(--lift)) rotate(var(--tilt));
  transition: opacity .7s var(--ease), translate .8s var(--pop), transform .45s var(--pop); }
.line .episode:nth-child(even) { --tilt: 1.2deg; }
.line .episode:nth-child(3n) { --tilt: -.5deg; }
.line .episode:hover, .line .episode:focus-within { --tilt: 0deg; --lift: -6px; }
.line .episode::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -26px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--coral); border: 4px solid var(--ink); }
/* A tilted card's box turns past the line's ends at its bottom corner (nothing is drawn there): the sections clip it, so the
   page never scrolls sideways. */
.coming, .episodes { overflow-x: clip; }
/* The line runs edge to edge of the screen: its first cards sit where the home page's do, at their size (two when two fit, else
   one), the next one peeks in at the edge, and app.js puts arrows under it. The inset is the section's padding, or more on a
   screen wider than the home page's 1220px. Its string is the strip's background, level with the pins, whatever the scroll. */
.shows-all.line-scroll { --gutter: clamp(16px, 5vw, 80px); display: flex; gap: 34px; max-width: none; container-type: inline-size;
  margin-inline: calc(-1 * var(--gutter)); padding: 36px max(var(--gutter), calc(50% + var(--gutter) - 610px)) 38px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc(50% - 610px)); scrollbar-width: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 20px / 100% 4px no-repeat; }
.shows-all.line-scroll::-webkit-scrollbar { display: none; }
.line-scroll .episode { flex: none; width: 100%; scroll-snap-align: start; }
@container (min-width: 634px) { .line-scroll .episode { width: calc(50% - 17px); } }
.line-nav { display: flex; justify-content: center; gap: 20px; margin: 4px 0 0; }
.line-nav[hidden] { display: none; }
.line-nav button { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 4px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .2s var(--pop); }
.line-nav button::before { content: ""; width: 15px; height: 15px; margin-left: 6px; border: solid var(--ink); border-width: 0 0 5px 5px; border-radius: 2px; transform: rotate(45deg); }
.line-nav .line-next::before { margin: 0 6px 0 0; transform: rotate(-135deg); }
.line-nav button:hover { transform: translateY(-3px); }
.line-nav button:disabled { opacity: .35; cursor: default; transform: none; }

.wonder { padding: 90px clamp(16px, 5vw, 80px) 140px; background: linear-gradient(180deg, var(--sky-2), var(--lavender-light)); overflow: hidden; }
.thought {
  position: relative; max-width: 780px; margin: 0 auto; padding: 54px clamp(22px, 5vw, 64px) 46px; text-align: center;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 64px; box-shadow: 0 12px 0 var(--ink);
}
.thought::before, .thought::after { content: ""; position: absolute; background: var(--paper); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 0 6px 0 var(--ink); }
.thought::before { width: 46px; height: 46px; left: 9%; bottom: -66px; }
.thought::after { width: 26px; height: 26px; left: 5%; bottom: -104px; }
.wonder-kicker {
  display: inline-block; margin: 0 0 18px; padding: 8px 18px; font: 700 22px/1 var(--font-display); color: #fff;
  background: var(--berry); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-4deg);
}
.wonder-q { margin: 0 auto; max-width: 24ch; font: 600 clamp(26px, 3.3vw, 40px)/1.2 var(--font-display); min-height: 2.4em; }
.think { display: none; position: relative; width: 140px; height: 140px; margin: 22px auto 6px; }
.think.on { display: block; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: var(--marigold-light); stroke: var(--ink); stroke-width: 4; }
.ring-fill { fill: none; stroke: var(--berry); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; }
.think.on .ring-fill { animation: countdown 5s linear forwards; }
@keyframes countdown { to { stroke-dashoffset: 327; } }
.ring-count { position: absolute; inset: 0; display: grid; place-items: center; font: 700 54px/1 var(--font-display); }
.think-label { position: absolute; left: 50%; top: 100%; translate: -50% 6px; white-space: nowrap; font: 600 18px/1 var(--font-display); color: var(--ink-soft); }
.wonder-a { margin: 22px auto 0; max-width: 44ch; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; min-height: 1em; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--pop); }
.wonder-a.show { opacity: 1; transform: none; }
.wonder-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn-think { background: var(--teal-deep); }

.grownups { padding: 80px clamp(16px, 5vw, 80px) 110px; background: var(--cream); }
.grownups-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 40px; grid-template-columns: 1.5fr 1fr; align-items: center; }
.points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 40px; font-size: 19px; }
.points li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 22px; height: 8px; border-radius: 6px; background: var(--r1); transform: rotate(-30deg); }
.points li:nth-child(2)::before { background: var(--r3); transform: rotate(20deg); }
.points li:nth-child(3)::before { background: var(--r4); transform: rotate(-12deg); }
.points li:nth-child(4)::before { background: var(--r5); transform: rotate(35deg); }
.points li:nth-child(5)::before { background: var(--r6); transform: rotate(-24deg); }
.grownups .jump { justify-content: flex-start; }
.promise { padding: 34px 30px; text-align: center; background: var(--lavender-light); border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 10px 0 var(--ink); transform: rotate(2deg); }
.promise-icon { font-size: 46px; }
.promise h3 { margin: 6px 0 6px; font: 700 32px/1.1 var(--font-display); }
.promise p { margin: 0; font-size: 19px; }

.floor {
  position: relative; padding: 70px 20px 36px; text-align: center; border-top: 6px solid var(--wood-dark);
  background: repeating-linear-gradient(90deg, transparent 0 136px, var(--wood-dark) 136px 139px), linear-gradient(180deg, var(--wood-light), var(--wood));
}
.floor-rug { position: absolute; left: 50%; top: 18px; width: min(560px, 80vw); height: 46px; translate: -50% 0; border-radius: 50%; background: var(--coral); border: 4px solid var(--ink); box-shadow: inset 0 0 0 8px #FFD2C2, inset 0 0 0 12px var(--ink); }
.footer-line { position: relative; margin: 0; font: 600 16px/1.4 var(--font-display); color: var(--paper); text-shadow: 0 2px 0 rgba(47, 64, 86, .6); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; translate: 0 34px; transition: opacity .7s var(--ease), translate .8s var(--pop); }
.reveal.in { opacity: 1; translate: 0 0; }

/* ---------- SURPRISE! banner ---------- */
.banner { position: fixed; left: 0; right: 0; top: 42%; z-index: 70; pointer-events: none; text-align: center; translate: 0 -50%; scale: 0; opacity: 0; }
.banner > span { display: block; white-space: nowrap; font: 700 clamp(56px, 11vw, 150px)/1 var(--font-display); letter-spacing: .02em; }
.banner .ltr { animation: none; }
.banner.show { animation: banner 1.9s var(--pop) both; }
@keyframes banner { 0% { scale: 0; opacity: 0; rotate: -12deg; } 22% { scale: 1.12; opacity: 1; rotate: 3deg; } 34% { scale: 1; rotate: 0deg; } 78% { scale: 1; opacity: 1; } 100% { scale: 1.3; opacity: 0; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .hero { min-height: 0; padding-bottom: 28px; }
  .hero::after { height: clamp(110px, 18vw, 170px); }
  .hero-copy { max-width: none; padding: 190px 22px 0; text-align: center; }
  .logo { font-size: min(12.4vw, 122px); }
  .tagline { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .window { top: 120px; right: -50px; width: clamp(160px, 24vw, 240px); opacity: .6; }
  .twinkle, .drawings { display: none; }
  .stage { position: relative; right: auto; bottom: auto; width: min(100%, 780px); max-height: 430px; margin: 54px auto 0; }
  .tap-hint { left: 50%; top: -40px; translate: -50% 0; }
  .stage .tap-hint { display: block; }
  .tap-hint-wide { display: none; }
}
@media (max-width: 860px) {
  /* Phones keep the logo, the pages (nav-keep: every tab is a page since 2026-10-18) and the sound button. */
  .nav a:not(.nav-mark):not(.nav-keep) { display: none; }
  .topbar { height: 160px; }
  .hero-copy { padding-top: 170px; }
  .page-head { padding-top: 170px; }
  .grownups-inner { grid-template-columns: 1fr; }
  .section-title.small { text-align: center; }
  .tap-hint { font-size: 15px; }
}
@media (max-width: 600px) {
  .window { display: none; }
  .stage { width: calc(100% - 20px); }
}
@media (max-width: 480px) {
  .nav { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .nav a:not(.nav-mark) { padding: 9px 13px; font-size: 15px; }
  .bubble { max-width: 170px; font-size: 14px; }
  .card-pal { height: 220px; top: -136px; }
  .btn { font-size: 17px; }
}
/* Three tabs, the logo and the speaker in one row on the narrowest phones (every tab shows on phones since 2026-10-18). */
@media (max-width: 420px) {
  .nav { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .nav a:not(.nav-mark) { padding: 9px; font-size: 14px; }
  .nav-mark img { width: 34px; height: 34px; }
  .nav .sound { width: 44px; height: 44px; }
}
@media (max-width: 370px) {
  .nav { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .nav a:not(.nav-mark) { padding: 8px; font-size: 13px; }
}
@media (max-width: 340px) {
  .nav { gap: 3px; padding-left: 6px; padding-right: 6px; }
  .nav a:not(.nav-mark) { padding: 7px 6px; font-size: 12px; }
  .nav-mark img { width: 30px; height: 30px; }
  .nav .sound { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: 0 0; }
}