/* Story 0 · my story. Cartoon scenes, one per era. */

.story0-hero {
  background:
    repeating-conic-gradient(from 0deg at 72% 50%, #F6C65B 0deg 7.5deg, transparent 7.5deg 15deg),
    var(--mustard);
}
.story0-hero .hero__art { width: min(100%, 440px); }
.story0-hero .bubble--hero { margin: 1.2em 0 0 -0.4rem; }

.art--scene {
  max-width: 600px;
  margin: 0 auto;
  border: 5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 8px 0 rgba(30, 34, 64, 0.3);
}
.page:nth-of-type(odd) .page__art .art--scene { transform: rotate(-1.2deg); }
.page:nth-of-type(even) .page__art .art--scene { transform: rotate(1deg); }
.story0-hero .art--scene, .art--wave-oguz { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(var(--shadow)); }
.art--wave-oguz { max-width: 380px; }

.page--plum .card h2 { color: var(--ink); }
.together {
  font: 900 clamp(2rem, 4vw, 3rem)/1.05 var(--font-display);
  color: var(--mustard);
  margin: 0.6em 0 0.2em;
  transform: rotate(-2deg);
}
.ctas { display: flex; flex-wrap: wrap; gap: 0.8em; }
.back--alt { background: var(--tomato); color: var(--paper); transform: rotate(1.5deg); }

@media (max-width: 820px) {
  .story0-hero .hero__art { width: 70%; justify-self: center; }
  .story0-hero .bubble--hero { margin-left: 0; }
  .art--scene { max-height: 34svh; width: auto; max-width: 100%; }
  .page--night .page__art { max-height: 30svh; }
  .art--wave-oguz { max-height: 26svh; }
}