@font-face { font-family: "Cassandra Hand"; src: url("./assets/fonts/Kalam-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .bubble-slot { min-height: 7.5rem; margin: 0 0 .5rem; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .sketch-bubble { position: relative; display: grid; place-items: center; min-height: 7.5rem; margin: 0; padding: 2rem 15% calc(2rem + 48px); text-align: center; font: clamp(.95rem, 2vw, 1.15rem)/1.5 "Cassandra Hand", cursive; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .sketch-bubble[data-active="false"] { visibility: hidden; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .sketch-bubble > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .sketch-bubble > span { position: relative; z-index: 1; overflow-wrap: break-word; text-wrap: balance; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .actor-name { display: block; color: var(--ink); font: 1.55rem/1.3 "Cassandra Hand", cursive; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .parody-note { display: block; margin-top: .2rem; color: var(--muted); font: .72rem/1.4 Arial, sans-serif; }
.teaser-page { max-width: 850px; }
.teaser-stage figure { container-type: inline-size; }
.teaser-stage [data-actor="jensen"] .bubble-slot { transform: translateY(29cqw); }
.teaser-stage :is([data-actor="cassandra"], [data-actor="robo-jcal"]) .bubble-slot { transform: translateY(16cqw); }
.teaser-stage .bubble-slot { position: relative; z-index: 2; }
.teaser-stage { gap: 1.2rem; margin-top: 1rem; }
.teaser-seek { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; font: .85rem Arial, sans-serif; }
.teaser-seek input { flex: 1; max-width: 420px; accent-color: var(--purple); }
.teaser-page .teaser-tagline { margin: 1.3rem 0; text-align: center; font: italic 1.7rem Georgia, serif; color: var(--purple); }
.teaser-page details { margin-top: 1rem; padding: .75rem 0; }
.teaser-page summary { cursor: pointer; }
@media (max-width: 560px) { .teaser-stage { gap: .5rem; } :where(.homepage-teaser, .teaser-page, #sample-stage) .sketch-bubble { min-height: 8rem; padding: 1.5rem 15% calc(1.5rem + 48px); font-size: .82rem; line-height: 1.4; } :where(.homepage-teaser, .teaser-page, #sample-stage) .actor-name { font-size: 1.2rem; } }

.teaser-stage [data-drawing] { aspect-ratio: 360 / 400; display: flex; justify-content: center; align-items: flex-end; }
.teaser-stage [data-actor="jensen"] [data-drawing] > svg { width: 80%; }
.teaser-stage :is([data-actor="cassandra"], [data-actor="robo-jcal"]) [data-drawing] > svg { width: 100%; }

:where(.homepage-teaser, .teaser-page, #sample-stage) .teaser-portrait { position: relative; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .teaser-portrait .claim-stamp { position: absolute; top: 75%; left: 50%; z-index: 3; padding: .12rem .35rem; border: 3px solid #9b483d; color: #9b483d; background: #fff6e8; font: bold clamp(1.3rem, 17cqw, 3.8rem)/1 "Cassandra Hand", cursive; transform: translate(-50%, -50%) rotate(-14deg); }
:where(.homepage-teaser, .teaser-page, #sample-stage) .claim-stamp[data-state="hidden"] { display: none; }
:where(.homepage-teaser, .teaser-page, #sample-stage) .teaser-portrait .claim-stamp[data-state="impact"] { transform: translate(-50%, -75%) rotate(-20deg); }

.teaser-stage .bubble-slot[data-reserved="true"] { flex: none; }
.teaser-stage .bubble-slot[data-reserved="true"] > .sketch-bubble { position: absolute; top: 0; width: 100%; }