.hero { border-top: 0; }
.lede { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; margin-bottom: 0.75em; }
.hero .stage { max-width: 520px; margin-inline: auto; }

/* a sticky note drawn in CSS, positioned like the art (its magnet is in core/notes.css) */
.stage-note {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); margin: 0;
  padding: 1.1rem 0.7rem 0.8rem; rotate: calc(var(--rot) * 1deg);
  font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.05; text-align: center;
  background: var(--paper); border: 3px solid var(--ink);
}
/* the software-only note sits in the free strip under Grandma and the cookie, hanging a little below the stage into the section's own padding */
.stage-note--sorry { top: auto; bottom: -1rem; padding: 1rem 0.6rem 0.65rem; font-size: clamp(0.9rem, 2.2vw, 1.25rem); line-height: 1.1; }