/* Homepage "It starts with them" (owner 2026-11-08, final): the original story card, with the child's
   question as a message bubble over the art. Same art, motion, badges and Read story as stories.css. */
.opt-starts{--opt-ink:var(--color-ink);--opt-muted:var(--color-warm-700)}
.opt-starts__head{display:grid;gap:12px;margin-bottom:48px;max-width:760px}
.opt-starts__head--center{margin-inline:auto;text-align:center;justify-items:center}
.opt-eyebrow{margin:0;font:500 14px/20px var(--font-body);letter-spacing:.01em;color:var(--opt-muted)}
.opt-starts__head h2{margin:0;font:650 clamp(40px,4.7vw,64px)/1.04 var(--font-body);letter-spacing:-.055em;color:var(--opt-ink);text-wrap:balance}
.opt-lead{margin:4px 0 0;max-width:520px;font:400 17px/1.55 var(--font-body);color:var(--opt-muted);text-wrap:pretty}

/* Owner 2026-11-08: "like a speech bubble (think iMessage text)" so it reads as something a child said.
   A received bubble: cream-50 fill, ink text, tail at the bottom left, Lamplight text-lg medium. */
.opt-card__ask{position:absolute;z-index:1;top:20px;left:22px;max-width:min(80%,300px);margin:0;padding:10px 16px 11px;border-radius:var(--radius-2xl);background:var(--color-cream-50);color:var(--color-ink);font:500 17px/24px var(--font-body);letter-spacing:-.1px;text-wrap:balance;filter:drop-shadow(0 1px 1px rgb(20 17 14 / .14)) drop-shadow(0 10px 18px rgb(20 17 14 / .28));transform-origin:0 100%}
.opt-card__ask::before{content:'';position:absolute;left:-7px;bottom:0;width:20px;height:20px;background:var(--color-cream-50);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 0v9c0 5-2.6 8.7-7 11 6 .6 10.6-.7 13.6-3.2L20 20V0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 0v9c0 5-2.6 8.7-7 11 6 .6 10.6-.7 13.6-3.2L20 20V0z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.opt-card__veil{display:none}
.opt-starts--cards .home-story-card{aspect-ratio:296/460}
.opt-starts--cards .home-story-content h3{font-size:20px;line-height:1.25;min-height:0;max-width:none}
.opt-became{display:block;margin-bottom:2px;font-size:12px;font-weight:500;line-height:18px;letter-spacing:.02em;opacity:.78}
.opt-starts--cards .home-story-content>p{min-height:0;opacity:.9}
.opt-starts--cards .opt-card__ask{transition:transform 520ms cubic-bezier(.22,1,.36,1)}
.opt-starts--cards .home-story-card:is(:hover,:focus-visible) .opt-card__ask{transform:translateY(-3px) scale(1.02)}
/* It arrives like a message as the card comes into view (st-enter is the site's own reveal). */
/* Matches once st-enter-pending is removed, so the animation starts as the card arrives. */
.opt-starts--cards .home-story-item:not(.st-enter-pending) .opt-card__ask{animation:opt-ask-in 520ms cubic-bezier(.22,1,.36,1) 260ms both}
@keyframes opt-ask-in{from{opacity:0;transform:translateY(8px) scale(.92)}}

@media(max-width:900px){
  .opt-starts__head{padding-inline:32px;margin-bottom:32px}
}
@media(max-width:600px){
  .opt-starts__head{padding-inline:20px}
  .opt-lead{font-size:17px}
  .opt-card__ask{top:16px;left:18px;font-size:17px;line-height:22px;padding:9px 14px 10px}
}
@media(prefers-reduced-motion:reduce){
  .opt-starts--cards .opt-card__ask{transition:none;animation:none!important}
}