/* The pages studio/tools/site_pages.py makes: one per video (/episodes/<slug>), out or coming, /grown-ups and
   /friends; studio/site-art/pages/README.md. */

/* ---------- the head: a strip of Sprinky's wall, with the video's facts on pills ---------- */
.page-head .tags { justify-content: center; margin: 0 0 18px; }
.page-head .tags span { background: var(--paper); }
.page-head .tags .tag-out { background: var(--leaf-light); }
.page-head .tags .tag-soon { background: var(--berry-light); }
.page-head .tags .tag-kind { background: var(--marigold-light); }
.page-head .section-lead { max-width: 60ch; }

/* ---------- what it's about: the card picture beside the facts ---------- */
.story { padding: 70px clamp(16px, 5vw, 80px) 120px; background: var(--cream) url("/assets/sprinkles.svg") 0 0 / 260px 260px; }
.story-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 48px; grid-template-columns: 1.15fr 1fr; align-items: center; }
.still { margin: 0; overflow: hidden; background: var(--ink); border: 4px solid var(--ink); border-radius: 32px; box-shadow: 0 10px 0 var(--ink); transform: rotate(-1.4deg); }
.still img { display: block; width: 100%; height: auto; }
.story .section-lead { margin-left: 0; text-align: left; color: var(--ink); }
.facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { position: relative; padding-left: 40px; font-size: 19px; }
.facts li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 22px; height: 8px; border-radius: 6px; background: var(--r1); transform: rotate(-30deg); }
.facts li:nth-child(2)::before { background: var(--r3); transform: rotate(20deg); }
.facts li:nth-child(3)::before { background: var(--r4); transform: rotate(-12deg); }
.facts li:nth-child(4)::before { background: var(--r5); transform: rotate(35deg); }
.facts b { font-family: var(--font-display); font-weight: 600; }
.facts a { color: var(--teal-deep); font-weight: 700; }

/* ---------- on the couch: each question in a speech bubble, the answer folded underneath ---------- */
.couch { 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; }
.questions { list-style: none; max-width: 860px; margin: 48px auto 0; padding: 0; display: grid; gap: 30px; }
.question { padding: 24px 28px 22px; background: var(--paper); border: 4px solid var(--ink); border-radius: 30px; box-shadow: 0 8px 0 var(--ink); transform: rotate(-.8deg); }
.question:nth-child(even) { transform: rotate(.8deg); }
.question .who { margin: 0 0 8px; font: 600 16px/1.2 var(--font-display); color: var(--ink-soft); }
.question .q { margin: 0; font: 700 clamp(22px, 2.3vw, 29px)/1.25 var(--font-display); }
.question details { margin: 14px 0 0; }
.question summary { display: inline-block; cursor: pointer; font: 600 17px/1 var(--font-display); color: var(--ink); padding: 9px 15px; background: var(--marigold-light); border: 3px solid var(--ink); border-radius: 999px; }
.question summary::-webkit-details-marker { display: none; }
.question details p { margin: 12px 0 0; font-size: 19px; }

/* ---------- the grown-ups' questions ---------- */
.answers-wrap { padding: 70px clamp(16px, 5vw, 80px) 110px; background: var(--cream) url("/assets/sprinkles.svg") 0 0 / 260px 260px; }
.answers { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.answer { padding: 22px 28px; background: var(--paper); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); }
.answer h2 { margin: 0 0 8px; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--font-display); color: var(--ink); }
.answer p { margin: 0; font-size: 19px; }

/* ---------- the way on ---------- */
.more { padding: 64px clamp(16px, 5vw, 80px) 96px; background: var(--cream); text-align: center; }
.more .jump { margin: 0; }

/* ---------- /friends, the Meet everyone page (studio/site-art/pages/everyone.json) ---------- */
/* The friends: the home page's cards (styles.css), six of them in two rows of three from Nov 5. */
.cards-6 { max-width: 1000px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.card-tansy { --c: #E39A2E; --cl: #FFF0C8; }
.card-zig { --c: #3A3F4A; --cl: #EEF0F3; }
/* Bonnet is a friend (Mike, 2026-10-25: "bonnet is a friend. linda and tom are family"): five friends stand three and
   two, and seven from Nov 5 four and three, each row in the middle, every card a friend's width. */
.cards-5, .cards-7 { display: flex; flex-wrap: wrap; justify-content: center; }
.cards-5 > .card, .cards-7 > .card { flex: 0 1 284px; }
.cards-5 { max-width: 1000px; }
.card-gazelle { --c: var(--wood); --cl: #FBE3CC; }
/* Where a picture isn't drawn yet: a lettered disc, in a giraffe's or a zebra's coat for Tansy and Zig. */
.stand-in { display: grid; place-items: center; border-radius: 50%; background: var(--c); border: 4px solid var(--ink); font: 700 64px/1 var(--font-display); color: var(--paper); text-shadow: var(--outline); }
.stand-in > span { translate: 0 -.04em; }
.card-tansy .stand-in, .who-tansy .stand-in { background: radial-gradient(circle at 28% 30%, #B8691F 0 12%, transparent 13%), radial-gradient(circle at 70% 25%, #B8691F 0 9%, transparent 10%), radial-gradient(circle at 64% 72%, #B8691F 0 13%, transparent 14%), radial-gradient(circle at 25% 74%, #B8691F 0 8%, transparent 9%), #F2B544; }
.card-zig .stand-in, .who-zig .stand-in { background: repeating-linear-gradient(118deg, var(--paper) 0 13px, #3A3F4A 13px 23px); }
/* the letter on a plain disc of its own, so the spots and stripes don't hide it */
:is(.card-tansy, .who-tansy, .card-zig, .who-zig) .stand-in > span {
  display: grid; place-items: center; width: 64%; height: 64%; padding-bottom: .05em; box-sizing: border-box;
  border-radius: 50%; background: var(--c); border: 3px solid var(--ink); font-size: .64em; translate: none;
}
.card-pal .stand-in { width: 160px; height: 160px; margin-top: 82px; font-size: 92px; transform-origin: 50% 100%; }
.card-pal:hover .stand-in { animation: wiggle-pal .6s var(--pop); }
.card-pal.hop .stand-in { animation: hop .75s var(--pop); }

/* Everyone else, on strips of their own, each on a friend's card (styles.css .card). Mike, 2026-10-19, of the first
   ones, smaller cards with the picture shut inside its circle and the name in plain type: "do these look like the same
   styles? ... the character image overlaps the circle it's not stuck within the circle. the text should match the
   colors of the character". So: the same card and circle, the figure standing in front of the circle and out over it
   where a friend stands (`.card-fig`, the place of a friend's `.card-pal`), and the name lettered in the person's own
   colors and outline (everyone.json `name_colors`, `name_outline`; app.js). A family stands side by side, feet on one
   line, each as tall as they really are against the others (web_export.py). The rows are spaced as the friends' are,
   each card as wide as a friend's in a row of four (284px), and a row that isn't full stays in the middle. */
.everyone { padding: 70px clamp(16px, 5vw, 80px) 120px; }
.everyone-teal { background: var(--teal-light) radial-gradient(rgba(47, 111, 107, .16) 2px, transparent 2.5px) 0 0 / 28px 28px; }
.everyone-sky { background: linear-gradient(180deg, var(--sky-2), var(--lavender-light)); }
.people { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1220px; display: flex; flex-wrap: wrap; justify-content: center; gap: 150px 28px; }
.people > .card { flex: 0 1 284px; }
.card-fig { position: absolute; left: 50%; top: -156px; height: 250px; translate: -50% 0; display: flex; align-items: flex-end; justify-content: center; }
.card-fig img { flex: none; height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; }
.card-fig:hover img { animation: wiggle-pal .6s var(--pop); }
.card-fig.family img + img { margin-left: -6px; }
.card-fig .stand-in { width: 160px; height: 160px; margin-bottom: 2px; font-size: 92px; }
/* Everyone's figure is a button, as a friend's is: tap them and they hop and say hi, in their own voice with the sound
   on (Mike, 2026-10-25: "have the same effect for all the characters"; app.js greet). */
button.card-fig { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.card-fig.hop img { animation: hop .75s var(--pop); }
.card-fig .bubble { bottom: 86%; }
/* Papa, a giant (`portrait: giant`; Mike, 2026-10-19: "just use grumbles dads foot like in the episodes . foot and
   leg"). He stands in his circle the way everyone does, his foot on the same floor line, and his leg rises out over
   the top of the ring and on up out of sight (Mike, 2026-10-20, of the leg shut inside the ring: "his foot should be
   overlapping the top of the circle like the other character cards"). The picture is taller than the figure's box
   (--h) and stands on the box's floor, so the leg goes on above it, and his foot is bigger than the ring, stepping
   out past it on both sides (Mike's pick on d-443d6d5d: "Bigger than the circle"); the card cuts off only the far
   ends of his floor shadow, with a clip-path that clips the sides alone. Not overflow-x: clip: Safari on Mike's
   iPhone clipped the top as well, cutting the leg and the ring off at the card's edge (2026-10-21: "papa's foot looks
   great on pc but not on iphone"). The leg is whole up to --solid above the floor, a little higher than
   the ring, and gone by --gone, below the words over the cards (the card's 150px margin and the list's 40px). The
   fade is on the picture, so it moves with the wiggle. The picture takes no pointer (its clear top reaches over
   those words), and the foot wiggles when the card is hovered. */
.card.person-giant { -webkit-clip-path: inset(-2000px 0); clip-path: inset(-2000px 0); }
.card-fig.fig-giant { --h: 460px; --solid: 214px; --gone: 280px; pointer-events: none; }
.card-fig.fig-giant img {
  height: var(--h);
  -webkit-mask: linear-gradient(to top, #000 var(--solid), transparent var(--gone));
  mask: linear-gradient(to top, #000 var(--solid), transparent var(--gone));
}
.card.person-giant:hover .card-fig img { animation: wiggle-pal .6s var(--pop); }
/* his foot takes the tap his leg can't: a spot over the foot and the leg up to the ring (`fig-hit`) */
.card-fig.fig-giant .fig-hit { position: absolute; left: 0; right: 0; bottom: 0; height: var(--solid); pointer-events: auto; }
/* a long name lettered smaller, so it takes two lines at most: "Ms. Marigold", "Tansy's Mom and Dad" (9 to 19
   letters and spaces), and "Hoots's Mother and Father" (more) */
.card h3.name-long { font-size: 34px; }
.card h3.name-longer { font-size: 28px; }
/* a grown-up's first names are the name, and what the friends call them goes in a pill under it, in the card's light
   color (Mike, 2026-10-21, drawing on Papa's card: "the colorized papa should say "Magnus" and the green oval should
   say Grumble's Papa") */
.card p.called { margin: 10px 0 0; }
.card p.called span {
  display: inline-block; max-width: 100%; padding: 3px 14px 4px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--cl); font: 600 18px/1.2 var(--font-display); color: var(--ink);
}
/* one line on the narrowest card (229px on a desktop's row of three): "Luma's Mommy and Pop", "Hoots's Mother and Father" */
.card p.called.long span { font-size: 15px; }
.who-sprinky { --c: var(--r6); --cl: var(--lavender-light); }
.who-luma { --c: var(--marigold); --cl: var(--marigold-light); }
.who-grumble { --c: var(--leaf); --cl: var(--leaf-light); }
.who-hoots { --c: var(--coral); --cl: #FFE0D4; }
.who-tansy { --c: #E39A2E; --cl: #FFF0C8; }
.who-zig { --c: #3A3F4A; --cl: #EEF0F3; }
.who-marigold { --c: var(--berry); --cl: var(--berry-light); }
.who-gazelle { --c: var(--wood); --cl: #FBE3CC; }
.who-santa { --c: var(--mute-red); --cl: #FFE3E0; }
.who-kudu { --c: var(--coral-deep); --cl: #FFE0D4; }

@media (max-width: 860px) {
  .story-inner { grid-template-columns: 1fr; gap: 40px; }
  .story .section-title.small { text-align: left; }
}
/* on a phone, one card to a row, as wide as a friend's */
@media (max-width: 560px) {
  .people > .card, .cards-5 > .card, .cards-7 > .card { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .card-pal .stand-in { width: 150px; height: 150px; margin-top: 62px; font-size: 86px; }
  .card-fig { height: 220px; top: -136px; }
  .card-fig.fig-giant { --h: 450px; --solid: 204px; --gone: 270px; }
  .card-fig .stand-in { width: 150px; height: 150px; font-size: 86px; }
}