/*
 * Template "Superhero Komik" (Ulang Tahun): a printed comic book about the birthday hero.
 * Cream newsprint with a fine grain, halftone dots, thick ink panel borders with hard offset shadows, white
 * gutters, yellow narration captions, speech bubbles and sound words. Bangers for the display type, Nunito
 * for the text. Mobile-first, one column of panels (~460px) on a sunburst backdrop on wide screens.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (hero red / green / orange / purple), --inv-secondary (blue / purple / blue / teal),
 *   --inv-accent (caption yellow), --inv-background (newsprint), --inv-text (ink).
 * White text only sits on the secondary color (contrast ≥ 4.5:1 in every variant); body text on the primary
 * color never appears (only Bangers display words with an ink outline).
 *
 * Every section is a panel: .superhero-komik-panel + the frame layer (sections/_frame) whose shape is a
 * clip-path polygon (--superhero-komik-shape) and whose fill is --superhero-komik-fill.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it every drawing is shown finished.
 *
 * Contents: 1 base · 2 shared pieces (panel, caption, bubble, heading, sfx, badge, chips) · 3 cover
 *           · 4 sections in page order · 5 forms (RSVP, wishes) · 6 shared components · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    --superhero-komik-display: 'Bangers', 'Impact', 'Arial Black', sans-serif;
    --superhero-komik-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --superhero-komik-ink: var(--inv-text);
    --superhero-komik-red: var(--inv-primary);
    --superhero-komik-blue: var(--inv-secondary, #1d4ed8);
    --superhero-komik-yellow: var(--inv-accent);
    --superhero-komik-white: #fffdf6;
    --superhero-komik-muted: color-mix(in srgb, var(--inv-text) 78%, var(--inv-background));
    --superhero-komik-red-soft: color-mix(in srgb, var(--inv-primary) 16%, #fffdf6);
    --superhero-komik-blue-soft: color-mix(in srgb, var(--inv-secondary, #1d4ed8) 12%, #fffdf6);
    --superhero-komik-yellow-soft: color-mix(in srgb, var(--inv-accent) 30%, #fffdf6);
    --superhero-komik-shadow: 5px 5px 0 var(--superhero-komik-ink);
    --superhero-komik-shadow-sm: 3px 3px 0 var(--superhero-komik-ink);
    /* halftone dots, as printed */
    --superhero-komik-dots-red: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 30%, transparent) 1.3px, transparent 1.7px) 0 0 / 8px 8px;
    --superhero-komik-dots-blue: radial-gradient(circle, color-mix(in srgb, var(--inv-secondary, #1d4ed8) 26%, transparent) 1.3px, transparent 1.7px) 0 0 / 8px 8px;
    --superhero-komik-dots-ink: radial-gradient(circle, rgb(17 17 17 / .14) 1.2px, transparent 1.6px) 0 0 / 7px 7px;
    --superhero-komik-dots-white: radial-gradient(circle, rgb(255 255 255 / .26) 1.7px, transparent 2.1px) 0 0 / 9px 9px;
    /* newsprint grain */
    --superhero-komik-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* colors of the shared components */
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-primary);
    --inv-nav-bg: #fffdf6;
    --inv-nav-text: var(--inv-text);
    --inv-nav-active: var(--inv-secondary, #1d4ed8);
    --inv-radius: 6px;
    --inv-font-display: var(--superhero-komik-display);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--superhero-komik-grain), var(--inv-background);
    color: var(--inv-text);
    font-family: var(--superhero-komik-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--superhero-komik-blue); }
h1, h2, h3 { font-weight: 400; }
.superhero-komik-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.superhero-komik-defs symbol { overflow: visible; }
.superhero-komik-defs path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.superhero-komik-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem; font-weight: 700; border-bottom: 2px solid #111;
}

/* the page of the comic: one column with white gutters between the panels */
.superhero-komik-main {
    max-width: 460px; margin: 0 auto; padding: 1.6rem 1rem 0 .9rem; overflow-x: clip;
    background: var(--superhero-komik-grain), var(--inv-background);
}
.superhero-komik-branding { max-width: 460px; margin: 0 auto; background: var(--inv-background); font-weight: 700; }
/* the page end: the last line ~125px above the document end, clear of the menu, the music button and the
   "Gulir" pill. The music player adds its own 72px spacer (.inv-music__space) when music or auto scroll is on. */
body.superhero-komik-body .superhero-komik-branding.inv-branding { padding-bottom: 3.4rem; }
body.superhero-komik-body:not(:has(.inv-music__space)) .superhero-komik-branding.inv-branding { padding-bottom: 7.9rem; }
/* no credit line (Eksklusif): the closing panel is the end of the page */
body.superhero-komik-body:not(:has(.inv-branding)) .superhero-komik-main { padding-bottom: 3.7rem; }
body.superhero-komik-body:not(:has(.inv-branding)):not(:has(.inv-music__space)) .superhero-komik-main { padding-bottom: 8.2rem; }

.superhero-komik-amp { display: inline-block; margin: 0 .3rem; font-family: var(--superhero-komik-display); font-size: 1.15em; color: var(--superhero-komik-red); -webkit-text-stroke: .6px var(--superhero-komik-ink); }

/* ---------- 2. shared pieces ---------- */

/* a panel: its frame layer draws the ink border, the fill and the hard shadow behind the content */
.superhero-komik-panel {
    --superhero-komik-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    --superhero-komik-fill: var(--superhero-komik-white);
    --superhero-komik-border: 3px;
    position: relative; isolation: isolate; margin: 0 0 1.75rem; padding: 2.3rem 1.25rem 2rem; text-align: center;
}
.superhero-komik-panel > p { margin-left: auto; margin-right: auto; }
.superhero-komik-frame {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    filter: drop-shadow(5px 5px 0 var(--superhero-komik-ink));
}
.superhero-komik-frame::before, .superhero-komik-frame::after { content: ''; position: absolute; clip-path: var(--superhero-komik-shape); }
.superhero-komik-frame::before { inset: 0; background: var(--superhero-komik-ink); }
.superhero-komik-frame::after { inset: var(--superhero-komik-border); background: var(--superhero-komik-fill); }

/* the yellow narration caption ("Sementara itu…") */
.superhero-komik-caption {
    display: inline-block; margin: 0; padding: .28rem .7rem .3rem; max-width: 100%;
    background: var(--superhero-komik-yellow); color: var(--superhero-komik-ink);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font: 900 .68rem/1.3 var(--superhero-komik-sans); letter-spacing: .12em; text-transform: uppercase;
    rotate: -1.5deg;
}
/* a narration box with a whole sentence in it */
.superhero-komik-caption--story {
    display: block; padding: .85rem 1rem .9rem; rotate: 0deg; text-align: left;
    font-size: .95rem; font-weight: 700; line-height: 1.6; letter-spacing: 0; text-transform: none;
}

/* a speech bubble with a tail at the bottom left */
.superhero-komik-bubble {
    position: relative; margin: 0 auto; padding: .9rem 1.15rem; max-width: 30rem;
    background: var(--superhero-komik-white); color: var(--superhero-komik-ink);
    border: 3px solid var(--superhero-komik-ink); border-radius: 1.5rem;
    font-weight: 700; line-height: 1.55; box-shadow: var(--superhero-komik-shadow-sm);
}
.superhero-komik-bubble::before, .superhero-komik-bubble::after { content: ''; position: absolute; left: 2.2rem; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.superhero-komik-bubble::before { bottom: -20px; width: 28px; height: 21px; background: var(--superhero-komik-ink); }
.superhero-komik-bubble::after { bottom: -12px; left: calc(2.2rem + 5px); width: 18px; height: 13px; background: var(--superhero-komik-white); }
/* a shouted bubble: round, in Bangers */
.superhero-komik-bubble--shout {
    display: inline-block; padding: 1.1rem 1.9rem 1rem; border-radius: 50%;
    font: 400 2.2rem/1.05 var(--superhero-komik-display); letter-spacing: .04em;
}
.superhero-komik-bubble--shout::before { left: 26%; }
.superhero-komik-bubble--shout::after { left: calc(26% + 5px); }

/* section heading: caption, a Bangers title with an ink outline and a bolt, speed lines under it */
.superhero-komik-heading { margin: 0 0 1.5rem; text-align: center; }
.superhero-komik-heading__caption { margin-bottom: .7rem; }
.superhero-komik-heading__title {
    display: block; margin: 0; text-wrap: balance;
    font: 400 2.3rem/1.02 var(--superhero-komik-display); letter-spacing: .045em;
    color: var(--superhero-komik-red); -webkit-text-stroke: 1.6px var(--superhero-komik-ink); paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--superhero-komik-ink); overflow-wrap: anywhere;
}
.superhero-komik-heading__bolt { display: inline-block; vertical-align: -.12em; margin-right: .35rem; width: 1.6rem; height: 1.6rem; fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 1.6px; overflow: visible; rotate: -8deg; }
.superhero-komik-heading__lines { display: flex; justify-content: center; gap: .35rem; margin-top: .65rem; }
.superhero-komik-heading__lines i { display: block; height: 4px; border-radius: 2px; background: var(--superhero-komik-ink); transform-origin: left; }
.superhero-komik-heading__lines i:nth-child(1) { width: 2.8rem; }
.superhero-komik-heading__lines i:nth-child(2) { width: 1.2rem; background: var(--superhero-komik-red); }
.superhero-komik-heading__lines i:nth-child(3) { width: .5rem; }

/* sound words ("POW!", "BOOM!"): decorative, on an uneven burst */
.superhero-komik-sfx { position: absolute; display: grid; place-items: center; width: 6.6rem; height: 4rem; pointer-events: none; }
.superhero-komik-sfx__burst { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 2.5px; overflow: visible; }
.superhero-komik-sfx__word {
    position: relative; font: 400 1.55rem/1 var(--superhero-komik-display); letter-spacing: .05em; color: var(--superhero-komik-red);
    -webkit-text-stroke: 1.2px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--superhero-komik-ink); rotate: -8deg;
}

/* the hero emblem: a shield on a starburst with the initial */
.superhero-komik-badge { --superhero-komik-badge: 5.5rem; position: relative; display: inline-block; width: var(--superhero-komik-badge); height: var(--superhero-komik-badge); flex: none; }
.superhero-komik-badge__art { display: block; width: 100%; height: 100%; overflow: visible; }
.superhero-komik-badge__burst { fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 2.5px; }
.superhero-komik-badge__shield { fill: var(--superhero-komik-ink); }
.superhero-komik-badge__inner { fill: var(--superhero-komik-red); }
.superhero-komik-badge__shine { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 4; stroke-linecap: round; }
.superhero-komik-badge__bolt { fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 1px; }
.superhero-komik-badge__letter {
    position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 9%;
    font: 400 calc(var(--superhero-komik-badge) * .34)/1 var(--superhero-komik-display); color: #fff;
    -webkit-text-stroke: calc(var(--superhero-komik-badge) * .012) var(--superhero-komik-ink); paint-order: stroke fill;
    text-shadow: calc(var(--superhero-komik-badge) * .022) calc(var(--superhero-komik-badge) * .022) 0 var(--superhero-komik-ink);
}

/* the age on a starburst */
.superhero-komik-age { --superhero-komik-age: 4.6rem; position: absolute; display: grid; place-items: center; align-content: center; width: var(--superhero-komik-age); height: var(--superhero-komik-age); }
.superhero-komik-age__burst { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--superhero-komik-red); stroke: var(--superhero-komik-ink); stroke-width: 2.5px; overflow: visible; }
.superhero-komik-age__small, .superhero-komik-age__number { position: relative; color: #fff; -webkit-text-stroke: 1px var(--superhero-komik-ink); paint-order: stroke fill; }
.superhero-komik-age__small { font: 400 calc(var(--superhero-komik-age) * .19)/1 var(--superhero-komik-display); letter-spacing: .06em; margin-bottom: -.05em; }
.superhero-komik-age__number { font: 400 calc(var(--superhero-komik-age) * .44)/.9 var(--superhero-komik-display); text-shadow: 2px 2px 0 var(--superhero-komik-ink); }
.superhero-komik-age__number--long { font-size: calc(var(--superhero-komik-age) * .32); }

/* chips (Instagram, TikTok) */
.superhero-komik-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 1.3rem 0 0 !important; }
.superhero-komik-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem 1rem;
    background: var(--superhero-komik-white); color: var(--superhero-komik-ink); text-decoration: none; font-size: .86rem; font-weight: 800;
    border: 2.5px solid var(--superhero-komik-ink); border-radius: 999px; box-shadow: var(--superhero-komik-shadow-sm);
}
.superhero-komik-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.superhero-komik-chip .superhero-komik-icon { width: 1.1rem; height: 1.1rem; }

/* the striped header of a file (profile, RSVP) */
.superhero-komik-file__band {
    position: absolute; top: 3px; left: 18px; right: 3px; display: flex; justify-content: space-between; gap: 1rem; margin: 0 !important;
    padding: .38rem .9rem .38rem 1rem; color: #fff; font: 900 .62rem/1.2 var(--superhero-komik-sans); letter-spacing: .18em; text-transform: uppercase;
    background: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(255 255 255 / .12) 7px 14px), var(--superhero-komik-blue);
    border-bottom: 3px solid var(--superhero-komik-ink);
}

/* ---------- 3. cover: a splash page in three panels ---------- */
.superhero-komik-cover {
    --superhero-komik-art: 31svh;
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.5rem 1.25rem 2.6rem; isolation: isolate; text-align: center; color: var(--superhero-komik-ink);
    transition: opacity .2s linear .9s;
}
.superhero-komik-cover__page { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.superhero-komik-cover__paper { position: absolute; inset: 0; background: var(--superhero-komik-grain), var(--superhero-komik-white); transition: opacity .3s ease .3s; }
.superhero-komik-cover__panel {
    position: absolute; inset: 8px; background: var(--superhero-komik-ink);
    transition: transform .72s cubic-bezier(.55, 0, .8, .35) .22s;
}
.superhero-komik-cover__panel::after { content: ''; position: absolute; inset: 4px; clip-path: inherit; }
.superhero-komik-cover__panel--1 { clip-path: polygon(0 0, 100% 0, 100% 19%, 0 26%); }
.superhero-komik-cover__panel--1::after { background: var(--superhero-komik-dots-white), var(--superhero-komik-red); }
.superhero-komik-cover__panel--2 { clip-path: polygon(0 calc(26% + 9px), 100% calc(19% + 9px), 100% 70%, 0 77%); }
.superhero-komik-cover__panel--2::after {
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, #fff 55%, transparent), transparent 46%),
        repeating-conic-gradient(from 0deg at 50% 46%, var(--superhero-komik-yellow) 0 8deg, color-mix(in srgb, var(--superhero-komik-yellow) 55%, #fff) 8deg 16deg);
}
.superhero-komik-cover__panel--3 { clip-path: polygon(0 calc(77% + 9px), 100% calc(70% + 9px), 100% 100%, 0 100%); }
.superhero-komik-cover__panel--3::after { background: var(--superhero-komik-dots-white), var(--superhero-komik-blue); }
.superhero-komik-cover__star { position: absolute; width: 1.5rem; fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 1.5px; overflow: visible; }
.superhero-komik-cover__star--1 { left: 9%; top: 6svh; }
.superhero-komik-cover__star--2 { right: 8%; top: 13svh; width: 1rem; }
.superhero-komik-cover__star--3 { right: 11%; bottom: 7svh; width: 1.2rem; }
.superhero-komik-cover__pow { left: 50%; top: 46%; width: 15rem; height: 9rem; margin: -4.5rem 0 0 -7.5rem; opacity: 0; z-index: 3; }
.superhero-komik-cover__pow .superhero-komik-sfx__word { font-size: 4.4rem; }

.superhero-komik-cover__inner {
    display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 26rem;
    transition: transform .42s cubic-bezier(.5, 0, .75, 0) .1s, opacity .3s ease .2s;
}
.superhero-komik-cover__title { position: relative; max-width: 88%; font-size: .74rem; padding: .35rem .85rem; }

.superhero-komik-cover__art { position: relative; margin-top: 1.6rem; }
.superhero-komik-cover__frame {
    width: calc(var(--superhero-komik-art) * .78); height: var(--superhero-komik-art); padding: 5px;
    background: var(--superhero-komik-white); border: 4px solid var(--superhero-komik-ink); box-shadow: 6px 6px 0 var(--superhero-komik-ink); rotate: -3deg;
}
.superhero-komik-cover__photo { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--superhero-komik-ink); }
.superhero-komik-cover__badge { --superhero-komik-badge: calc(var(--superhero-komik-art) * .4); position: absolute; left: calc(var(--superhero-komik-art) * -.2); bottom: calc(var(--superhero-komik-art) * -.1); rotate: -10deg; }
.superhero-komik-cover__boom { top: calc(var(--superhero-komik-art) * -.12); right: calc(var(--superhero-komik-art) * -.3); width: calc(var(--superhero-komik-art) * .52); height: calc(var(--superhero-komik-art) * .3); rotate: 10deg; }
.superhero-komik-cover__boom .superhero-komik-sfx__word { font-size: calc(var(--superhero-komik-art) * .1); }
.superhero-komik-cover__age { --superhero-komik-age: calc(var(--superhero-komik-art) * .32); right: calc(var(--superhero-komik-art) * -.2); bottom: calc(var(--superhero-komik-art) * .04); rotate: 8deg; }
/* no cover photo: the emblem is the splash */
.superhero-komik-cover--plain .superhero-komik-cover__art { width: calc(var(--superhero-komik-art) * .95); height: var(--superhero-komik-art); }
.superhero-komik-cover__badge--hero { --superhero-komik-badge: var(--superhero-komik-art); position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--superhero-komik-art) * -.5); rotate: -4deg; }
.superhero-komik-cover--plain .superhero-komik-cover__boom { right: calc(var(--superhero-komik-art) * -.22); }
.superhero-komik-cover--plain .superhero-komik-cover__age { right: calc(var(--superhero-komik-art) * -.12); bottom: 0; }

.superhero-komik-cover__name {
    margin: 1.15rem 0 0; max-width: 100%; font: 400 clamp(3.2rem, 9.6svh, 4.7rem)/.95 var(--superhero-komik-display); letter-spacing: .05em;
    color: #fff; -webkit-text-stroke: 3px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--superhero-komik-ink);
    overflow-wrap: anywhere;
}
.superhero-komik-cover__date {
    display: inline-flex; align-items: center; gap: .45rem; margin: .7rem 0 0; padding: .3rem .8rem;
    background: var(--superhero-komik-white); border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font-size: .86rem; font-weight: 900; rotate: 1.2deg;
}
.superhero-komik-cover__date .superhero-komik-icon { width: 1.05rem; height: 1.05rem; color: var(--superhero-komik-red); }
.superhero-komik-cover__quote { margin-top: 1.05rem; max-width: 20rem; padding: .6rem 1rem; font-size: .84rem; line-height: 1.45; }
/* the cover's bubble points up to the name */
.superhero-komik-cover__quote::before { bottom: auto; top: -20px; left: auto; right: 2.4rem; clip-path: polygon(92% 0, 100% 100%, 0 100%); }
.superhero-komik-cover__quote::after { bottom: auto; top: -12px; left: auto; right: calc(2.4rem + 5px); clip-path: polygon(92% 0, 100% 100%, 0 100%); }

.superhero-komik-cover__guest {
    position: relative; margin-top: 1.35rem; min-width: 14rem; max-width: 100%; padding: .95rem 1.2rem .55rem;
    background: var(--superhero-komik-white); border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink);
}
.superhero-komik-cover__guest-label {
    position: absolute; top: -.8rem; left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; padding: .12rem .6rem;
    background: var(--superhero-komik-yellow); border: 2px solid var(--superhero-komik-ink); font: 900 .62rem/1.3 var(--superhero-komik-sans); letter-spacing: .14em; text-transform: uppercase;
}
.superhero-komik-cover__guest-name { display: block; font: 400 1.5rem/1.15 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-ink); overflow-wrap: anywhere; }

.superhero-komik-cover__open.inv-button {
    margin-top: 1.25rem; min-height: 3.05rem; padding: .5rem 1.6rem .45rem; gap: .5rem;
    background: var(--superhero-komik-yellow); color: var(--superhero-komik-ink);
    border: 3px solid var(--superhero-komik-ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--superhero-komik-ink);
    font: 400 1.4rem/1 var(--superhero-komik-display); letter-spacing: .08em;
}
.superhero-komik-cover__open-bolt { width: 1.25rem; height: 1.25rem; fill: var(--superhero-komik-red); stroke: var(--superhero-komik-ink); stroke-width: 1.4px; overflow: visible; }
.superhero-komik-cover__open:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* opening: POW!, the content jumps at the reader, the three panels burst apart (never blocks: no taps from the start) */
.superhero-komik-cover--leave { pointer-events: none; }
.superhero-komik-cover--gone { opacity: 0; }
.superhero-komik-cover--gone .superhero-komik-cover__inner { transform: scale(1.22); opacity: 0; }
.superhero-komik-cover--gone .superhero-komik-cover__paper { opacity: 0; }
.superhero-komik-cover--gone .superhero-komik-cover__panel--1 { transform: translate(-6%, -104%) rotate(-9deg); }
.superhero-komik-cover--gone .superhero-komik-cover__panel--2 { transform: translate(112%, 3%) rotate(8deg); }
.superhero-komik-cover--gone .superhero-komik-cover__panel--3 { transform: translate(-5%, 108%) rotate(7deg); }
.superhero-komik-cover--gone .superhero-komik-cover__star { opacity: 0; transition: opacity .2s ease; }

/* ---------- 4. sections ---------- */

/* opening: halftone panel with a slanted bottom, a shout and the narration */
.superhero-komik-opening {
    --superhero-komik-shape: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
    --superhero-komik-fill: var(--superhero-komik-dots-blue), var(--superhero-komik-white);
    padding: 2rem 1.2rem 2.9rem;
}
.superhero-komik-opening__greeting { margin-bottom: 2rem; max-width: 92%; color: var(--superhero-komik-ink); }
.superhero-komik-opening__message { position: relative; }
.superhero-komik-opening__zap { right: -.6rem; top: -1.6rem; width: 5.6rem; height: 3.4rem; rotate: 12deg; }
.superhero-komik-opening__zap .superhero-komik-sfx__word { font-size: 1.35rem; color: var(--superhero-komik-blue); }

/* celebrant: the hero file card with cut corners */
.superhero-komik-celebrant {
    --superhero-komik-shape: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    padding-top: 3.6rem;
}
.superhero-komik-file__art { position: relative; display: grid; justify-items: center; margin: 0 auto 1.4rem; width: min(15rem, 74%); }
.superhero-komik-file__photo {
    margin: 0; width: 100%; aspect-ratio: 4 / 5; padding: 5px; background: var(--superhero-komik-white);
    border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow); rotate: 2.5deg; position: relative;
}
.superhero-komik-file__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--superhero-komik-ink); }
/* a halftone shade on the photo's corner, as printed */
.superhero-komik-file__photo::after, .superhero-komik-story__photo::after, .superhero-komik-closing__photo::after {
    content: ''; position: absolute; inset: 5px; pointer-events: none; background: var(--superhero-komik-dots-ink);
    -webkit-mask: linear-gradient(140deg, transparent 58%, #000 92%); mask: linear-gradient(140deg, transparent 58%, #000 92%);
}
.superhero-komik-file__badge { --superhero-komik-badge: 5.4rem; position: absolute; left: -2.4rem; bottom: 1.2rem; rotate: -12deg; }
.superhero-komik-file__empty {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow);
    background: repeating-conic-gradient(from 0deg at 50% 50%, var(--superhero-komik-yellow) 0 9deg, var(--superhero-komik-yellow-soft) 9deg 18deg);
}
.superhero-komik-file__badge--big { --superhero-komik-badge: 11rem; position: static; rotate: -6deg; }
.superhero-komik-file__nick {
    position: absolute; right: -1rem; bottom: -.9rem; padding: .15rem .8rem .05rem; background: var(--superhero-komik-yellow);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font: 400 1.5rem/1.1 var(--superhero-komik-display); letter-spacing: .06em; rotate: -4deg; max-width: 80%; overflow-wrap: anywhere;
}
.superhero-komik-file__title {
    display: inline-block; margin: .6rem auto .2rem !important; padding: .25rem 1rem .2rem; color: #fff;
    background: var(--superhero-komik-blue); border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font: 400 1.15rem/1.1 var(--superhero-komik-display); letter-spacing: .1em; transform: skewX(-10deg);
}
.superhero-komik-file__name { margin: .55rem 0 1.1rem; font: 400 2.2rem/1.05 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-ink); overflow-wrap: anywhere; }
.superhero-komik-file__facts { display: grid; gap: 0; margin: 0 auto; max-width: 22rem; text-align: left; border: 2.5px solid var(--superhero-komik-ink); background: #fff; }
.superhero-komik-file__facts > div { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: baseline; }
.superhero-komik-file__facts > div + div { border-top: 2px dashed color-mix(in srgb, var(--superhero-komik-ink) 40%, transparent); }
.superhero-komik-file__facts dt { align-self: stretch; padding: .55rem .7rem; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; background: var(--superhero-komik-yellow-soft); border-right: 2px solid var(--superhero-komik-ink); }
.superhero-komik-file__facts dd { margin: 0; padding: .45rem .75rem; font-weight: 800; overflow-wrap: anywhere; }
.superhero-komik-file__parents { grid-template-columns: 1fr !important; }
.superhero-komik-file__parents dt { border-right: 0; border-bottom: 2px solid var(--superhero-komik-ink); text-align: center; }
.superhero-komik-file__parents dd { text-align: center; padding: .6rem .75rem .7rem; }
.superhero-komik-file__parents dd span { display: inline; }

/* message: blue halftone panel with a slanted top, the hero speaks */
.superhero-komik-message {
    --superhero-komik-shape: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
    --superhero-komik-fill: var(--superhero-komik-dots-white), var(--superhero-komik-blue);
    padding-top: 2.9rem;
}
.superhero-komik-message .superhero-komik-heading__title { color: #fff; }
.superhero-komik-message .superhero-komik-heading__lines i { background: #fff; }
.superhero-komik-message .superhero-komik-heading__lines i:nth-child(2) { background: var(--superhero-komik-yellow); }
.superhero-komik-message__bubble { margin: 0 .2rem; padding: 1.15rem 1.25rem; font-size: 1.02rem; border-radius: 2rem 2rem 2rem 1rem; }
.superhero-komik-message__bubble p { margin: 0; }
.superhero-komik-message__from { display: flex; align-items: center; gap: .6rem; margin: 1.15rem 0 0 .4rem !important; }
.superhero-komik-message__badge { --superhero-komik-badge: 4rem; }
.superhero-komik-message__from cite {
    padding: .2rem .7rem .1rem; font: 400 1.35rem/1.15 var(--superhero-komik-display); font-style: normal; letter-spacing: .05em;
    background: var(--superhero-komik-yellow); border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm); rotate: -2deg; overflow-wrap: anywhere;
}

/* events: mission briefings */
.superhero-komik-events { margin: 0 0 .4rem; padding-top: .6rem; }
.superhero-komik-mission {
    --superhero-komik-shape: polygon(0 0, 100% 12px, 100% 100%, 0 calc(100% - 12px));
    --superhero-komik-fill: linear-gradient(205deg, transparent 0 16%, var(--superhero-komik-white) 42%), var(--superhero-komik-dots-red), var(--superhero-komik-white);
    padding: 2.3rem 1.2rem 1.8rem; text-align: left;
}
.superhero-komik-mission--alt { --superhero-komik-shape: polygon(0 12px, 100% 0, 100% calc(100% - 12px), 0 100%); }
.superhero-komik-mission__tag {
    position: absolute; top: -.75rem; right: 1rem; padding: .15rem .75rem .05rem; background: var(--superhero-komik-yellow);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font: 400 1.15rem/1.1 var(--superhero-komik-display); letter-spacing: .08em; rotate: 3deg;
}
.superhero-komik-mission--alt .superhero-komik-mission__tag { right: auto; left: 1rem; rotate: -3deg; }
.superhero-komik-mission__name { margin: 0 0 1rem; font: 400 2rem/1.05 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-ink); overflow-wrap: anywhere; }
.superhero-komik-mission__name::after { content: ''; display: block; width: 3.5rem; height: 5px; margin-top: .35rem; background: var(--superhero-komik-red); border: 1.5px solid var(--superhero-komik-ink); }
.superhero-komik-mission__photo { position: relative; margin: 0 0 1.2rem; aspect-ratio: 16 / 9; border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm); overflow: hidden; }
.superhero-komik-mission__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.superhero-komik-mission__rows { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.superhero-komik-mission__rows li { display: flex; align-items: flex-start; gap: .8rem; }
.superhero-komik-mission__icon {
    display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; background: var(--superhero-komik-yellow);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: 2px 2px 0 var(--superhero-komik-ink); rotate: -3deg; color: var(--superhero-komik-ink);
}
.superhero-komik-mission__rows li:nth-child(even) .superhero-komik-mission__icon { rotate: 3deg; }
.superhero-komik-mission__icon .superhero-komik-icon { width: 1.3rem; height: 1.3rem; stroke-width: 2.2; }
.superhero-komik-mission__rows small { display: block; font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--superhero-komik-blue); }
.superhero-komik-mission__rows strong { display: block; font-size: 1rem; font-weight: 900; line-height: 1.35; }
.superhero-komik-mission__address { display: block; margin-top: .15rem; font-size: .88rem; line-height: 1.5; color: var(--superhero-komik-muted); }
.superhero-komik-mission .inv-maps { margin-top: 1.3rem; }

/* countdown: sunburst panel with slanted edges, the numbers as a four-panel strip */
.superhero-komik-countdown {
    --superhero-komik-shape: polygon(0 16px, 100% 0, 100% calc(100% - 16px), 0 100%);
    --superhero-komik-fill: radial-gradient(circle at 50% 22%, rgb(255 255 255 / .55), transparent 55%), repeating-conic-gradient(from 0deg at 50% 22%, var(--superhero-komik-yellow) 0 8deg, var(--superhero-komik-yellow-soft) 8deg 16deg);
    padding: 3rem 1.1rem 2.6rem;
}
.superhero-komik-countdown .superhero-komik-heading__caption { background: var(--superhero-komik-white); }
.superhero-komik-countdown__tik { left: -.5rem; top: -1.2rem; width: 5rem; height: 3rem; rotate: -10deg; }
.superhero-komik-countdown__tok { right: -.6rem; top: 3.4rem; width: 5rem; height: 3rem; rotate: 9deg; }
.superhero-komik-countdown__tik .superhero-komik-sfx__burst, .superhero-komik-countdown__tok .superhero-komik-sfx__burst { fill: var(--superhero-komik-white); }
.superhero-komik-countdown__tik .superhero-komik-sfx__word, .superhero-komik-countdown__tok .superhero-komik-sfx__word { font-size: 1.2rem; }
.superhero-komik-countdown .inv-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.superhero-komik-countdown .inv-countdown__item {
    min-width: 0; padding: .7rem .15rem .55rem; border-radius: 0; rotate: -2deg;
    background: var(--superhero-komik-dots-white), var(--superhero-komik-red); border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
}
.superhero-komik-countdown .inv-countdown__item:nth-child(even) { rotate: 2deg; background: var(--superhero-komik-dots-white), var(--superhero-komik-blue); }
.superhero-komik-countdown .inv-countdown__value {
    font: 400 2.25rem/1 var(--superhero-komik-display); letter-spacing: .03em; color: #fff;
    -webkit-text-stroke: 1.4px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--superhero-komik-ink);
}
.superhero-komik-countdown .inv-countdown__label {
    margin: .45rem .2rem 0; padding: .12rem 0; opacity: 1; background: var(--superhero-komik-white); border: 2px solid var(--superhero-komik-ink);
    font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--superhero-komik-ink);
}
.superhero-komik-countdown .inv-countdown__done { padding: .8rem 1rem; background: var(--superhero-komik-white); border: 3px solid var(--superhero-komik-ink); font-weight: 800; }
.superhero-komik-countdown .inv-countdown__actions { margin-top: 1.5rem; gap: .65rem; }
.superhero-komik-countdown .inv-cal { margin-top: 2rem; }

/* party: the hero costume panel, tilted a little */
.superhero-komik-party {
    --superhero-komik-fill: var(--superhero-komik-dots-red), var(--superhero-komik-white);
    padding-top: 2.5rem;
}
.superhero-komik-party .superhero-komik-frame { rotate: -1deg; }
.superhero-komik-party__label { display: block; font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--superhero-komik-ink); }
.superhero-komik-party__theme { margin: 0 -.3rem 1.6rem; }
.superhero-komik-party__theme-name {
    display: inline-block; margin: .45rem 0 0; padding: .35rem 1.4rem .25rem; max-width: 100%; color: #fff;
    background: var(--superhero-komik-blue); border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow);
    font: 400 2rem/1.1 var(--superhero-komik-display); letter-spacing: .06em; transform: skewX(-12deg) rotate(-2deg);
    -webkit-text-stroke: 1px var(--superhero-komik-ink); paint-order: stroke fill; overflow-wrap: anywhere;
}
.superhero-komik-party__dress {
    --superhero-komik-pick: var(--superhero-komik-red);
    display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem;
    text-align: left; background: #fff; border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
}
.superhero-komik-party__costume { width: 100%; height: auto; overflow: visible; }
.superhero-komik-party__cape { fill: var(--superhero-komik-red); stroke: var(--superhero-komik-ink); stroke-width: 3; stroke-linejoin: round; }
.superhero-komik-party__shirt { fill: var(--superhero-komik-pick); stroke: var(--superhero-komik-ink); stroke-width: 3; stroke-linejoin: round; transition: fill .35s ease; }
.superhero-komik-party__collar { fill: none; stroke: var(--superhero-komik-ink); stroke-width: 3; }
.superhero-komik-party__bolt { fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 1.5px; }
.superhero-komik-party__dress-name { margin: .2rem 0 .3rem; font: 400 1.5rem/1.1 var(--superhero-komik-display); letter-spacing: .04em; overflow-wrap: anywhere; }
.superhero-komik-swatches { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .4rem; }
.superhero-komik-swatch {
    width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer; border-radius: 50%; background: var(--superhero-komik-swatch);
    border: 3px solid var(--superhero-komik-ink); box-shadow: 2px 2px 0 var(--superhero-komik-ink), inset -5px -6px 0 rgb(0 0 0 / .14), inset 4px 4px 0 rgb(255 255 255 / .35);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.superhero-komik-swatch[aria-pressed="true"] { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 3px var(--superhero-komik-yellow), 0 0 0 5.5px var(--superhero-komik-ink), inset -5px -6px 0 rgb(0 0 0 / .14), inset 4px 4px 0 rgb(255 255 255 / .35); }
.superhero-komik-swatch:focus-visible { outline: 3px solid var(--superhero-komik-blue); outline-offset: 4px; }
.superhero-komik-party__hint { margin: .55rem 0 0; font-size: .78rem; font-weight: 700; color: var(--superhero-komik-muted); }
.superhero-komik-party__note { margin-top: 1.5rem; margin-bottom: 1.6rem; text-align: left; font-size: .95rem; }
.superhero-komik-party__hashtag {
    display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .35rem .4rem .35rem .95rem; max-width: 100%;
    background: var(--superhero-komik-yellow); border: 3px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm); rotate: -1.5deg;
}
.superhero-komik-party__hashtag-text { font: 900 1.08rem/1.2 var(--superhero-komik-sans); letter-spacing: .01em; overflow-wrap: anywhere; }
.superhero-komik-party__copy {
    min-height: 2.5rem; padding: .3rem .85rem; cursor: pointer; font: 900 .74rem/1 var(--superhero-komik-sans); letter-spacing: .08em; text-transform: uppercase;
    background: var(--superhero-komik-ink); color: #fff; border: 0; border-radius: 4px;
}
.superhero-komik-party__copy:focus-visible { outline: 3px solid var(--superhero-komik-blue); outline-offset: 2px; }

/* rundown: a comic page grid of small panels */
.superhero-komik-rundown { margin: 0 0 1.9rem; padding-top: .4rem; }
.superhero-komik-rundown__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem .75rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.superhero-komik-rundown__item {
    position: relative; min-height: 7.6rem; padding: 2rem .8rem .85rem; text-align: left;
    background: var(--superhero-komik-white); border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink); rotate: -.6deg;
}
.superhero-komik-rundown__item:nth-child(4n + 2), .superhero-komik-rundown__item:nth-child(4n + 3) { background: var(--superhero-komik-dots-blue), var(--superhero-komik-white); rotate: .7deg; }
.superhero-komik-rundown__item:first-child, .superhero-komik-rundown__item:last-child:nth-child(even) { grid-column: 1 / -1; min-height: 0; background: var(--superhero-komik-dots-red), var(--superhero-komik-white); }
.superhero-komik-rundown__time {
    position: absolute; top: -.55rem; left: .55rem; padding: .1rem .5rem .05rem; background: var(--superhero-komik-yellow);
    border: 2.5px solid var(--superhero-komik-ink); font: 400 1.15rem/1.1 var(--superhero-komik-display); letter-spacing: .06em;
}
.superhero-komik-rundown__number {
    position: absolute; top: .3rem; right: .5rem; font: 400 1.6rem/1 var(--superhero-komik-display); color: var(--superhero-komik-red);
    -webkit-text-stroke: 1px var(--superhero-komik-ink); paint-order: stroke fill; opacity: .9;
}
.superhero-komik-rundown__item h3 { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.superhero-komik-rundown__item p { margin: .3rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--superhero-komik-muted); overflow-wrap: anywhere; }

/* story: the origin story, panels leaning in turn on a dashed speed line */
.superhero-komik-story { margin: 0 0 .6rem; padding-top: .4rem; }
.superhero-komik-story__list { position: relative; margin: 0; padding: .9rem 0 0; list-style: none; }
.superhero-komik-story__list::before {
    content: ''; position: absolute; top: 0; bottom: 1.5rem; left: 50%; width: 0; border-left: 4px dashed var(--superhero-komik-ink); transform-origin: top; z-index: -1;
}
.superhero-komik-story__item {
    --superhero-komik-shape: polygon(0 0, 100% 9px, 100% 100%, 0 calc(100% - 9px));
    --superhero-komik-fill: var(--superhero-komik-white);
    padding: 1.9rem 1.15rem 1.4rem; text-align: left; rotate: -.8deg; margin-bottom: 2rem;
}
.superhero-komik-story__item--alt { --superhero-komik-shape: polygon(0 9px, 100% 0, 100% calc(100% - 9px), 0 100%); rotate: .8deg; }
.superhero-komik-story__item:not(.superhero-komik-story__item--photo) { --superhero-komik-fill: var(--superhero-komik-dots-blue), var(--superhero-komik-white); }
.superhero-komik-story__chapter { position: absolute; top: -.7rem; left: .9rem; margin: 0; padding: .1rem .55rem; background: var(--superhero-komik-white); border: 2px solid var(--superhero-komik-ink); font: 900 .62rem/1.4 var(--superhero-komik-sans); letter-spacing: .16em; text-transform: uppercase; }
.superhero-komik-story__year {
    position: absolute; top: -1rem; right: .9rem; padding: .12rem .7rem .02rem; color: #fff; background: var(--superhero-komik-blue);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm);
    font: 400 1.45rem/1.1 var(--superhero-komik-display); letter-spacing: .06em; rotate: 4deg;
}
.superhero-komik-story__photo { position: relative; margin: .2rem 0 1rem; aspect-ratio: 4 / 3; padding: 4px; background: #fff; border: 3px solid var(--superhero-komik-ink); }
.superhero-komik-story__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.superhero-komik-story__photo::after { inset: 4px; }
.superhero-komik-story__title { margin: 0; font: 400 1.65rem/1.1 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-ink); overflow-wrap: anywhere; }
.superhero-komik-story__text {
    margin: .65rem 0 0; padding: .6rem .8rem; font-size: .92rem; font-weight: 600; line-height: 1.6;
    background: var(--superhero-komik-yellow-soft); border: 2px solid var(--superhero-komik-ink);
}

/* gallery: a comic page of photo panels */
.superhero-komik-gallery {
    --superhero-komik-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), 0 100%);
    --superhero-komik-fill: var(--superhero-komik-dots-ink), var(--superhero-komik-white);
    padding: 2.3rem 1rem 2.4rem;
}
.superhero-komik-gallery .inv-gallery { gap: .6rem; grid-auto-flow: dense; }
.superhero-komik-gallery .inv-gallery__item { border: 3px solid var(--superhero-komik-ink); border-radius: 0; box-shadow: var(--superhero-komik-shadow-sm); background: #fff; }
.superhero-komik-gallery .inv-gallery__item:nth-child(3n + 1),
.superhero-komik-gallery .inv-gallery__item:nth-child(3n + 2):last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.superhero-komik-gallery .inv-gallery__item:nth-child(3n + 2) { rotate: -1deg; }
.superhero-komik-gallery .inv-gallery__item:nth-child(3n) { rotate: 1deg; }

/* live streaming: the broadcast panel */
.superhero-komik-stream {
    --superhero-komik-fill: var(--superhero-komik-dots-white), var(--superhero-komik-blue);
    color: #fff;
}
.superhero-komik-stream__screen {
    position: relative; display: grid; place-items: center; width: 9rem; height: 6.2rem; margin: 0 auto 1rem;
    background: repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 5px), var(--superhero-komik-ink);
    border: 3px solid var(--superhero-komik-ink); border-radius: 14px; box-shadow: 0 0 0 4px #fff, 6px 6px 0 4px var(--superhero-komik-ink);
}
.superhero-komik-stream__burst { position: absolute; width: 5.2rem; fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 2px; overflow: visible; }
.superhero-komik-stream__play { position: relative; display: grid; color: var(--superhero-komik-ink); }
.superhero-komik-stream__play .superhero-komik-icon { width: 2rem; height: 2rem; stroke-width: 2.4; }
.superhero-komik-stream__live { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .3rem !important; font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.superhero-komik-stream__live i { width: .65rem; height: .65rem; border-radius: 50%; background: #ff4d4d; border: 2px solid #fff; }
.superhero-komik-stream__title { margin: 0 0 .4rem; font: 400 2.2rem/1 var(--superhero-komik-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 1.4px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--superhero-komik-ink); }
.superhero-komik-stream__text { max-width: 30ch; font-weight: 700; }
.superhero-komik-stream__note { margin: .2rem auto 1.2rem; }
.superhero-komik-stream .inv-button { background: var(--superhero-komik-yellow); color: var(--superhero-komik-ink); }

/* RSVP: the recruitment form */
.superhero-komik-rsvp {
    --superhero-komik-shape: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    --superhero-komik-fill: repeating-linear-gradient(to bottom, transparent 0 29px, color-mix(in srgb, var(--inv-secondary, #1d4ed8) 12%, transparent) 29px 30px), var(--superhero-komik-white);
    padding-top: 3.6rem;
}
.superhero-komik-rsvp .superhero-komik-file__band { left: 3px; right: 22px; }
.superhero-komik-rsvp__intro { max-width: 30ch; margin: -.3rem auto 1.3rem; font-weight: 700; color: var(--superhero-komik-muted); }
.superhero-komik-rsvp__sent { position: relative; display: grid; justify-items: center; gap: .3rem; margin: -.4rem 0 1.1rem; }
.superhero-komik-rsvp__stamp { position: relative; display: grid; place-items: center; width: 8.6rem; height: 8.6rem; rotate: -8deg; }
.superhero-komik-rsvp__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--superhero-komik-red); stroke: var(--superhero-komik-ink); stroke-width: 3px; overflow: visible; filter: drop-shadow(4px 4px 0 var(--superhero-komik-ink)); }
.superhero-komik-rsvp__stamp b {
    position: relative; font: 400 2.6rem/1 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-yellow);
    -webkit-text-stroke: 2px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--superhero-komik-ink);
}
.superhero-komik-rsvp__thanks { margin: .4rem 0 0; font: 400 1.75rem/1.1 var(--superhero-komik-display); letter-spacing: .04em; color: var(--superhero-komik-blue); }
.superhero-komik-rsvp__line { margin: 0 auto; max-width: 32ch; font-weight: 700; color: var(--superhero-komik-muted); }

/* gift: hero access cards */
.superhero-komik-gift {
    --superhero-komik-shape: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
    --superhero-komik-fill: var(--superhero-komik-dots-blue), var(--superhero-komik-white);
    padding-top: 2.7rem;
}
.superhero-komik-gift__intro { max-width: 32ch; margin-top: -.3rem !important; margin-bottom: 1.4rem !important; font-weight: 700; }

/* wishlist: the supply crates */
.superhero-komik-wishlist { --superhero-komik-fill: var(--superhero-komik-dots-red), var(--superhero-komik-white); }
.superhero-komik-wishlist .superhero-komik-frame { rotate: .8deg; }
.superhero-komik-wishlist__intro { max-width: 30ch; margin: -.3rem auto 1.3rem; font-weight: 700; }
.superhero-komik-wishlist__list { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.superhero-komik-wishlist__item { background: #fff; border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink); }
.superhero-komik-wishlist__head {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 3.6rem;
    padding: .55rem .75rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.superhero-komik-wishlist__head:focus-visible { outline: 3px solid var(--superhero-komik-blue); outline-offset: 2px; }
.superhero-komik-wishlist__crate { width: 3rem; height: 3rem; overflow: visible; }
.superhero-komik-wishlist__crate-base { fill: var(--superhero-komik-yellow); stroke: var(--superhero-komik-ink); stroke-width: 2.5; }
.superhero-komik-wishlist__crate-line { stroke: var(--superhero-komik-ink); stroke-width: 1.5; opacity: .35; }
.superhero-komik-wishlist__crate-lid { fill: var(--superhero-komik-red); stroke: var(--superhero-komik-ink); stroke-width: 2.5; }
.superhero-komik-wishlist__crate-mark { font: 400 17px var(--superhero-komik-display); fill: var(--superhero-komik-ink); }
.superhero-komik-wishlist__lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.is-open .superhero-komik-wishlist__lid { transform: translate(-2px, -5px) rotate(-24deg); }
.superhero-komik-wishlist__number { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--superhero-komik-blue); }
.superhero-komik-wishlist__name { display: block; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.superhero-komik-wishlist__toggle { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--superhero-komik-ink); border-radius: 50%; transition: transform .3s ease; }
.superhero-komik-wishlist__toggle .superhero-komik-icon { width: 1rem; height: 1rem; stroke-width: 2.6; }
.is-open .superhero-komik-wishlist__toggle { transform: rotate(180deg); background: var(--superhero-komik-yellow); }
.superhero-komik-wishlist__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.superhero-komik-wishlist__item.is-closed .superhero-komik-wishlist__body { grid-template-rows: 0fr; }
.superhero-komik-wishlist__inner { overflow: hidden; }
.superhero-komik-wishlist__inner > :first-child { margin-top: 0; }
.superhero-komik-wishlist__item .superhero-komik-wishlist__inner { padding: 0 .85rem; }
.superhero-komik-wishlist__item.is-open .superhero-komik-wishlist__inner, .superhero-komik-wishlist__item:not(.is-closed) .superhero-komik-wishlist__inner { padding-bottom: .9rem; }
.superhero-komik-wishlist__photo { display: block; width: 100%; max-height: 12rem; object-fit: cover; border: 2.5px solid var(--superhero-komik-ink); margin-bottom: .6rem; }
.superhero-komik-wishlist__note { margin: 0 0 .6rem; padding-top: .55rem; border-top: 2px dashed color-mix(in srgb, var(--superhero-komik-ink) 35%, transparent); font-size: .9rem; font-weight: 600; }
.superhero-komik-wishlist__shop.inv-button { min-height: 2.6rem; padding: .45rem 1rem; font-size: .78rem; }
.superhero-komik-wishlist__shop .superhero-komik-icon { width: 1rem; height: 1rem; }

/* co-hosts: the support team on little speech bubbles */
.superhero-komik-cohosts {
    --superhero-komik-shape: polygon(0 0, 100% 14px, 100% 100%, 0 100%);
    --superhero-komik-fill: var(--superhero-komik-dots-red), var(--superhero-komik-red-soft);
    padding-top: 2.4rem;
}
.superhero-komik-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem .7rem; margin: 0; padding: 0 0 .6rem; list-style: none; }
.superhero-komik-cohosts__list li {
    position: relative; padding: .5rem .95rem; background: #fff; border: 2.5px solid var(--superhero-komik-ink); border-radius: 1.2rem;
    font-weight: 900; font-size: .92rem; line-height: 1.3; box-shadow: 2px 2px 0 var(--superhero-komik-ink); rotate: -1.5deg; overflow-wrap: anywhere;
}
.superhero-komik-cohosts__list li:nth-child(even) { rotate: 1.5deg; }
.superhero-komik-cohosts__list li::before, .superhero-komik-cohosts__list li::after { content: ''; position: absolute; left: 1.1rem; clip-path: polygon(0 0, 100% 0, 15% 100%); }
.superhero-komik-cohosts__list li::before { bottom: -13px; width: 17px; height: 13px; background: var(--superhero-komik-ink); }
.superhero-komik-cohosts__list li::after { bottom: -7.5px; left: calc(1.1rem + 3.5px); width: 10px; height: 8px; background: #fff; }

/* contacts: communicator cards */
.superhero-komik-contacts__list { display: grid; gap: .9rem; text-align: left; }
.superhero-komik-contact {
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: .3rem .85rem; padding: .9rem;
    background: #fff; border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink);
}
.superhero-komik-contact__signal { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; }
.superhero-komik-contact__signal::before, .superhero-komik-contact__signal::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--superhero-komik-blue); opacity: .55; }
.superhero-komik-contact__signal::after { inset: -10px; opacity: .25; }
.superhero-komik-contact__signal span {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: var(--superhero-komik-blue);
    border: 3px solid var(--superhero-komik-ink); font: 400 1.6rem/1 var(--superhero-komik-display); -webkit-text-stroke: .8px var(--superhero-komik-ink);
}
.superhero-komik-contact__name { margin: 0; font-weight: 900; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.superhero-komik-contact__role, .superhero-komik-contact__phone { margin: .1rem 0 0; font-size: .84rem; font-weight: 700; color: var(--superhero-komik-muted); }
.superhero-komik-contact__button.inv-button { grid-column: 1 / -1; margin-top: .5rem; min-height: 2.75rem; background: #128c4a; }
.superhero-komik-contact__button .superhero-komik-icon { width: 1.15rem; height: 1.15rem; }

/* health protocol */
.superhero-komik-protocol__list { display: grid; gap: .6rem; margin: 0 auto; padding: 0; max-width: 22rem; list-style: none; text-align: left; }
.superhero-komik-protocol__list li { display: flex; align-items: center; gap: .7rem; font-weight: 800; }
.superhero-komik-protocol__tick { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; background: var(--superhero-komik-yellow); border: 2.5px solid var(--superhero-komik-ink); color: var(--superhero-komik-ink); }
.superhero-komik-protocol__tick .superhero-komik-icon { width: 1.1rem; height: 1.1rem; stroke-width: 3; }
.superhero-komik-protocol__note { margin-top: 1.2rem !important; text-transform: none; letter-spacing: .02em; font-size: .8rem; }

/* vendors: the credits */
.superhero-komik-vendors { --superhero-komik-fill: var(--superhero-komik-white); }
.superhero-komik-vendors__list { display: grid; gap: .75rem; margin: 0 auto; padding: 0; max-width: 24rem; list-style: none; }
.superhero-komik-vendor { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; align-items: baseline; gap: .55rem; text-align: left; }
.superhero-komik-vendor__role { font: 400 1.2rem/1.1 var(--superhero-komik-display); letter-spacing: .06em; color: var(--superhero-komik-red); -webkit-text-stroke: .6px var(--superhero-komik-ink); max-width: 9rem; overflow-wrap: anywhere; }
.superhero-komik-vendor__leader { border-bottom: 3px dotted var(--superhero-komik-ink); transform: translateY(-.25rem); transform-origin: left; }
.superhero-komik-vendor__who { display: grid; justify-items: end; text-align: right; max-width: 12rem; }
.superhero-komik-vendor__name { font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.superhero-komik-vendor__link { display: inline-flex; align-items: center; min-height: 1.8rem; font-size: .8rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }

/* closing: the last splash panel */
.superhero-komik-closing {
    --superhero-komik-shape: polygon(0 18px, 100% 0, 100% 100%, 0 100%);
    --superhero-komik-fill: radial-gradient(circle at 50% 30%, rgb(255 255 255 / .35), transparent 50%), repeating-conic-gradient(from 0deg at 50% 30%, var(--superhero-komik-red) 0 8deg, color-mix(in srgb, var(--superhero-komik-red) 78%, #fff) 8deg 16deg);
    margin-bottom: .6rem; padding: 3rem 1.2rem 3.2rem;
}
.superhero-komik-closing__art { position: relative; display: grid; justify-items: center; width: min(14rem, 66%); margin: 0 auto 1.8rem; }
.superhero-komik-closing__photo {
    position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; padding: 5px; background: #fff;
    border: 4px solid var(--superhero-komik-ink); box-shadow: 6px 6px 0 var(--superhero-komik-ink); rotate: -2.5deg;
}
.superhero-komik-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--superhero-komik-ink); }
.superhero-komik-closing__badge { --superhero-komik-badge: 5.4rem; position: absolute; right: -2.4rem; bottom: -1rem; rotate: 10deg; }
.superhero-komik-closing__art--plain { width: max-content; }
.superhero-komik-closing__badge--big { --superhero-komik-badge: 10rem; position: relative; right: auto; bottom: auto; }
.superhero-komik-closing__hore { left: -2.6rem; top: -1.4rem; width: 6rem; height: 3.6rem; rotate: -12deg; }
.superhero-komik-closing__art--plain .superhero-komik-closing__hore { left: auto; right: -4.4rem; top: .2rem; rotate: 10deg; }
.superhero-komik-closing__hore .superhero-komik-sfx__word { font-size: 1.4rem; color: var(--superhero-komik-blue); }
.superhero-komik-closing__message { max-width: 30rem; }
.superhero-komik-closing__signature {
    display: inline-block; margin: 1.6rem auto 0 !important; padding: .3rem .9rem; max-width: 100%; background: #fff;
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm); font-size: .9rem; font-weight: 900; rotate: -1deg; overflow-wrap: anywhere;
}
.superhero-komik-closing__name {
    margin: .7rem 0 0 !important; font: 400 3.6rem/1 var(--superhero-komik-display); letter-spacing: .05em; color: #fff;
    -webkit-text-stroke: 2.5px var(--superhero-komik-ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--superhero-komik-ink); overflow-wrap: anywhere;
}
.superhero-komik-closing__next {
    position: absolute; right: .8rem; bottom: -.9rem; margin: 0 !important; padding: .25rem .8rem; background: var(--superhero-komik-yellow);
    border: 2.5px solid var(--superhero-komik-ink); box-shadow: var(--superhero-komik-shadow-sm); font: 900 .7rem/1.3 var(--superhero-komik-sans); letter-spacing: .16em; text-transform: uppercase; rotate: -2deg;
}

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.superhero-komik-main .inv-form { gap: 1rem; }
.superhero-komik-main .inv-form label, .superhero-komik-main .inv-form__choices legend { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--superhero-komik-ink); }
.superhero-komik-main .inv-form input:not([type=radio]):not([type=checkbox]),
.superhero-komik-main .inv-form select,
.superhero-komik-main .inv-form textarea {
    width: 100%; min-height: 2.95rem; margin-top: .3rem; padding: .65rem .9rem; border: 2.5px solid var(--superhero-komik-ink); border-radius: 6px;
    font: 700 1rem/1.4 var(--superhero-komik-sans); letter-spacing: 0; text-transform: none; color: var(--superhero-komik-ink); background: #fff;
    box-shadow: inset 3px 3px 0 rgb(0 0 0 / .06); transition: box-shadow .2s ease;
}
.superhero-komik-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.superhero-komik-main .inv-form input:not([type=radio]):focus-visible,
.superhero-komik-main .inv-form select:focus-visible,
.superhero-komik-main .inv-form textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--superhero-komik-yellow), 0 0 0 5.5px var(--superhero-komik-ink); }
.superhero-komik-main .inv-form button[type=submit] { width: 100%; min-height: 3.2rem; font: 400 1.35rem/1 var(--superhero-komik-display); letter-spacing: .08em; text-transform: none; }
.superhero-komik-main .inv-form .inv-button--outline { width: 100%; min-height: 2.9rem; }
.superhero-komik-main .inv-form__notice { text-align: center; background: var(--superhero-komik-yellow-soft); border: 2.5px solid var(--superhero-komik-ink); border-radius: 0; font-weight: 700; }
.superhero-komik-main .inv-form__error { border: 2.5px solid #a12a1f; border-radius: 0; font-weight: 700; }

/* the three answers as comic buttons (the radio stays focusable over the whole card) */
.superhero-komik-rsvp .inv-form { text-align: left; }
.superhero-komik-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; border: 0; }
.superhero-komik-rsvp .inv-form__choices legend { margin-bottom: .55rem; padding: 0; }
.superhero-komik-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; min-height: 5.6rem; padding: .8rem .25rem .7rem;
    background: #fff; border: 3px solid var(--superhero-komik-ink); border-radius: 6px; box-shadow: var(--superhero-komik-shadow-sm); cursor: pointer;
    font: 400 1.05rem/1.05 var(--superhero-komik-display); letter-spacing: .05em; text-transform: none; text-align: center; color: var(--superhero-komik-ink);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background-color .2s ease;
}
.superhero-komik-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.superhero-komik-rsvp .inv-form__choices label::before {
    content: ''; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2.5px solid var(--superhero-komik-ink);
    background: var(--superhero-komik-yellow-soft); transition: background-color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.superhero-komik-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.33rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; pointer-events: none;
    background: var(--superhero-komik-ink); -webkit-mask: var(--superhero-komik-choice) center / contain no-repeat; mask: var(--superhero-komik-choice) center / contain no-repeat;
}
.superhero-komik-rsvp .inv-form__choices label:nth-of-type(1) { --superhero-komik-choice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.superhero-komik-rsvp .inv-form__choices label:nth-of-type(2) { --superhero-komik-choice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.superhero-komik-rsvp .inv-form__choices label:nth-of-type(3) { --superhero-komik-choice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E"); }
.superhero-komik-rsvp .inv-form__choices label:has(input:checked) { background: var(--superhero-komik-yellow); transform: translate(-2px, -3px) rotate(-1.5deg); box-shadow: 5px 6px 0 var(--superhero-komik-ink); }
.superhero-komik-rsvp .inv-form__choices label:has(input:checked)::before { background: #fff; transform: scale(1.1); }
.superhero-komik-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--superhero-komik-blue); outline-offset: 3px; }
.superhero-komik-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; text-align: center; font-size: .84rem; font-weight: 800; color: var(--superhero-komik-muted); }

/* wishes: the form in a yellow box, the wishes as speech bubbles */
.superhero-komik-wishes { --superhero-komik-fill: var(--superhero-komik-dots-ink), var(--superhero-komik-yellow-soft); }
.superhero-komik-wishes .inv-wishes { --inv-wishes-height: 22rem; }
.superhero-komik-wishes .inv-form { padding: 1.2rem 1rem 1.1rem; background: #fff; border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink); }
.superhero-komik-wishes .inv-wishes__list { gap: 1.25rem; margin-top: 1.5rem; padding: .3rem .35rem 1.2rem .2rem; }
.superhero-komik-wishes .inv-wish {
    position: relative; margin: 0 2rem 0 .3rem; padding: .7rem 1rem .6rem; background: #fff;
    border: 2.5px solid var(--superhero-komik-ink); border-radius: 1.3rem; box-shadow: 3px 3px 0 var(--superhero-komik-ink);
}
.superhero-komik-wishes .inv-wish:nth-child(even) { margin: 0 .3rem 0 2rem; background: var(--superhero-komik-blue-soft); }
.superhero-komik-wishes .inv-wish::before, .superhero-komik-wishes .inv-wish::after { content: ''; position: absolute; left: 1.4rem; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.superhero-komik-wishes .inv-wish::before { bottom: -16px; width: 21px; height: 16px; background: var(--superhero-komik-ink); }
.superhero-komik-wishes .inv-wish::after { bottom: -9.5px; left: calc(1.4rem + 4px); width: 13px; height: 10px; background: #fff; }
.superhero-komik-wishes .inv-wish:nth-child(even)::before, .superhero-komik-wishes .inv-wish:nth-child(even)::after { left: auto; right: 1.4rem; clip-path: polygon(0 0, 100% 0, 90% 100%); }
.superhero-komik-wishes .inv-wish:nth-child(even)::after { right: calc(1.4rem + 4px); background: var(--superhero-komik-blue-soft); }
.superhero-komik-wishes .inv-wish__name { font: 400 1.2rem/1.15 var(--superhero-komik-display); letter-spacing: .05em; color: var(--superhero-komik-blue); }
.superhero-komik-wishes .inv-wish__message { font-weight: 600; }
.superhero-komik-wishes .inv-wish__time { font-weight: 700; color: var(--superhero-komik-muted); opacity: 1; }
.superhero-komik-wishes .inv-wish__reply { border-left-color: var(--superhero-komik-red); background: var(--superhero-komik-yellow-soft); }
.superhero-komik-wishes .inv-wishes__empty { font-weight: 700; opacity: 1; color: var(--superhero-komik-muted); text-align: center; }
.superhero-komik-wishes__zap { position: absolute; top: -1.5rem; right: -.5rem; z-index: 2; opacity: 0; scale: .2; rotate: 14deg; pointer-events: none; transition: opacity .2s ease, scale .35s cubic-bezier(.34, 1.8, .64, 1); }
.superhero-komik-wishes > .superhero-komik-wishes__zap:not(.is-on) { opacity: 0; visibility: hidden; }
.superhero-komik-wishes__zap.is-on { opacity: 1; scale: 1; visibility: visible; }
.superhero-komik-wishes__zap .superhero-komik-sfx { position: relative; width: 6rem; height: 3.6rem; }
.superhero-komik-wishes__zap .superhero-komik-sfx__word { font-size: 1.5rem; color: var(--superhero-komik-blue); }

/* ---------- 6. shared components ---------- */
.superhero-komik-main .inv-button {
    min-height: 2.9rem; padding: .6rem 1.15rem; border: 3px solid var(--superhero-komik-ink); border-radius: 6px;
    background: var(--superhero-komik-blue); color: #fff; box-shadow: 4px 4px 0 var(--superhero-komik-ink);
    font: 900 .84rem/1.2 var(--superhero-komik-sans); letter-spacing: .04em;
}
.superhero-komik-main .inv-button:focus-visible { outline: 3px solid var(--superhero-komik-yellow); outline-offset: 3px; }
.superhero-komik-main .inv-button--outline { background: #fff; color: var(--superhero-komik-ink); box-shadow: 3px 3px 0 var(--superhero-komik-ink); }
html.inv-anim .superhero-komik-main .inv-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--superhero-komik-ink); }
.superhero-komik-main .inv-maps__frame { height: 200px; margin-top: 1rem; border: 3px solid var(--superhero-komik-ink); border-radius: 0; box-shadow: var(--superhero-komik-shadow-sm); }

/* calendar: its own small panel */
.superhero-komik-main .inv-cal {
    --inv-cal-bg: #fff; --inv-cal-text: var(--superhero-komik-ink); --inv-cal-mark: var(--superhero-komik-red);
    border: 3px solid var(--superhero-komik-ink); border-radius: 0; box-shadow: var(--superhero-komik-shadow);
}
.superhero-komik-main .inv-cal__head { border-bottom: 3px solid var(--superhero-komik-ink); }
.superhero-komik-main .inv-cal__month { font-size: 1.8rem; letter-spacing: .05em; color: var(--superhero-komik-red); -webkit-text-stroke: .8px var(--superhero-komik-ink); }
.superhero-komik-main .inv-cal__year { font-weight: 900; }
.superhero-komik-main .inv-cal__note { font-weight: 800; border-top: 2px dashed var(--superhero-komik-ink); }

/* gift accounts: access cards, two per row */
.superhero-komik-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.superhero-komik-gift .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 2.1rem .6rem .8rem; overflow: hidden;
    text-align: center; background: #fff; border: 3px solid var(--superhero-komik-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--superhero-komik-ink);
}
.superhero-komik-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.25rem; border-bottom: 2.5px solid var(--superhero-komik-ink);
    background: repeating-linear-gradient(-45deg, var(--superhero-komik-blue) 0 7px, color-mix(in srgb, var(--superhero-komik-blue) 72%, #fff) 7px 14px);
}
.superhero-komik-gift .inv-gift__accounts .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.superhero-komik-gift .inv-gift__bank { margin: 0 0 .35rem; font-weight: 900; font-size: .9rem; }
.superhero-komik-gift .inv-gift__logo { border: 2px solid var(--superhero-komik-ink); box-shadow: none; }
.superhero-komik-gift .inv-gift__number { margin: .2rem 0 .1rem; font-size: 1rem; font-weight: 900; letter-spacing: .03em; overflow-wrap: anywhere; }
.superhero-komik-gift .inv-gift__holder { margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; color: var(--superhero-komik-muted); overflow-wrap: anywhere; }
.superhero-komik-gift .inv-gift__account .inv-button { margin-top: auto; width: 100%; min-height: 2.6rem; padding: .45rem .4rem; font-size: .74rem; }
.superhero-komik-gift .inv-gift__address { margin-top: 1rem; padding-top: 2.1rem; }
.superhero-komik-gift .inv-gift__address::before { background: repeating-linear-gradient(-45deg, var(--superhero-komik-red) 0 7px, color-mix(in srgb, var(--superhero-komik-red) 70%, #fff) 7px 14px); }
.superhero-komik-gift .inv-gift__address p:not(.inv-gift__bank):not(.inv-gift__holder) { margin: 0 0 .8rem; font-weight: 700; }
.superhero-komik-gift .inv-gift__address .inv-button { width: auto; padding-inline: 1.2rem; }

/* bottom menu, music, check-in */
.inv-nav { border: 3px solid var(--superhero-komik-ink); box-shadow: 4px 4px 0 var(--superhero-komik-ink); font-family: var(--superhero-komik-sans); }
.inv-nav--icons { border-radius: 12px; }
.inv-nav--icons .inv-nav__item.is-active { border: 2px solid var(--superhero-komik-ink); box-shadow: 3px 3px 0 var(--superhero-komik-ink); }
.inv-music__button { background: var(--superhero-komik-red); border: 3px solid var(--superhero-komik-ink); box-shadow: 3px 3px 0 var(--superhero-komik-ink); color: #fff; }
.inv-autoscroll { border: 2.5px solid var(--superhero-komik-ink); color: var(--superhero-komik-ink); background: #fff; box-shadow: 2px 2px 0 var(--superhero-komik-ink); font-weight: 900; }
.inv-autoscroll--running { background: var(--superhero-komik-blue); color: #fff; border-color: var(--superhero-komik-ink); }
.inv-checkin { border: 3px solid var(--superhero-komik-ink); border-radius: 0; box-shadow: var(--superhero-komik-shadow); }
.inv-qr-tab { border: 2.5px solid var(--superhero-komik-ink); border-right: 0; background: var(--superhero-komik-yellow); color: var(--superhero-komik-ink); }

/* ---------- 7. screen sizes ---------- */

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .superhero-komik-cover { --superhero-komik-art: 27svh; padding-top: 1.2rem; padding-bottom: 2.3rem; }
    .superhero-komik-cover__art { margin-top: 1.25rem; }
    .superhero-komik-cover__name { margin-top: .95rem; font-size: clamp(3rem, 9svh, 4rem); }
    .superhero-komik-cover__quote { margin-top: .9rem; font-size: .8rem; line-height: 1.4; }
    .superhero-komik-cover__guest { margin-top: 1.2rem; padding-top: .85rem; }
    .superhero-komik-cover__guest-name { font-size: 1.35rem; }
    .superhero-komik-cover__open.inv-button { margin-top: 1.05rem; }
}
@media (max-height: 660px) {
    .superhero-komik-cover { --superhero-komik-art: 23.5svh; padding-top: .9rem; padding-bottom: 2.1rem; }
    .superhero-komik-cover__title { font-size: .66rem; padding: .25rem .7rem; }
    .superhero-komik-cover__art { margin-top: 1.05rem; }
    .superhero-komik-cover__name { margin-top: .8rem; font-size: 2.85rem; -webkit-text-stroke-width: 2.5px; text-shadow: 4px 4px 0 var(--superhero-komik-ink); }
    .superhero-komik-cover__date { margin-top: .55rem; font-size: .8rem; padding: .22rem .7rem; }
    .superhero-komik-cover__quote { margin-top: .85rem; padding: .45rem .85rem; font-size: .76rem; max-width: 18.5rem; }
    .superhero-komik-cover__guest { margin-top: 1.1rem; padding: .78rem 1rem .4rem; }
    .superhero-komik-cover__guest-name { font-size: 1.25rem; }
    .superhero-komik-cover__open.inv-button { margin-top: .95rem; min-height: 2.8rem; font-size: 1.25rem; }
}
/* narrow phones: the side ornaments of the cover art come in a little */
@media (max-width: 370px) {
    .superhero-komik-file__facts > div { grid-template-columns: 7.4rem minmax(0, 1fr); }
    .superhero-komik-file__facts dt { letter-spacing: .06em; }
    .superhero-komik-countdown .inv-countdown__value { font-size: 1.95rem; }
    .superhero-komik-heading__title { font-size: 2.1rem; }
}

/* wide screens: the page of the comic on a sunburst backdrop */
@media (min-width: 560px) {
    body.superhero-komik-body {
        background:
            radial-gradient(circle at 50% 30%, transparent 0 30%, rgb(0 0 0 / .18) 80%),
            var(--superhero-komik-dots-white),
            repeating-conic-gradient(from 0deg at 50% 30%, var(--superhero-komik-red) 0 6deg, color-mix(in srgb, var(--superhero-komik-red) 80%, #fff) 6deg 12deg);
        background-attachment: fixed;
    }
    .superhero-komik-main { margin-top: 2rem; border: 4px solid var(--superhero-komik-ink); border-bottom: 0; box-shadow: 10px 0 0 var(--superhero-komik-ink); padding: 2rem 1.2rem 0 1.1rem; }
    .superhero-komik-branding { border: 4px solid var(--superhero-komik-ink); border-top: 0; box-shadow: 10px 10px 0 var(--superhero-komik-ink); margin-bottom: 0; }
    .superhero-komik-cover__inner { max-width: 24rem; }
    body.superhero-komik-body:not(:has(.inv-branding)) .superhero-komik-main { border-bottom: 4px solid var(--superhero-komik-ink); box-shadow: 10px 10px 0 var(--superhero-komik-ink); margin-bottom: 2.5rem; }
}

/* ---------- 8. motion ---------- */
@keyframes superhero-komik-pow {
    0% { opacity: 0; scale: .2; rotate: -24deg; }
    22% { opacity: 1; scale: 1.25; rotate: -6deg; }
    40% { scale: 1; }
    75% { opacity: 1; scale: 1.05; }
    100% { opacity: 0; scale: 1.7; rotate: 4deg; }
}
@keyframes superhero-komik-nudge { 0%, 82%, 100% { rotate: 0deg; scale: 1; } 86% { rotate: -3deg; scale: 1.05; } 90% { rotate: 3deg; } 94% { rotate: -2deg; } 97% { rotate: 1deg; } }
@keyframes superhero-komik-wobble { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes superhero-komik-twinkle { 0%, 100% { opacity: .35; scale: .7; rotate: 0deg; } 50% { opacity: 1; scale: 1.1; rotate: 30deg; } }
@keyframes superhero-komik-spin { to { rotate: 360deg; } }
@keyframes superhero-komik-stamp { 0% { opacity: 0; scale: 2.4; rotate: -30deg; } 55% { opacity: 1; scale: .9; rotate: -6deg; } 75% { scale: 1.06; } 100% { opacity: 1; scale: 1; rotate: -8deg; } }
@keyframes superhero-komik-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 5px -3px; } 60% { translate: -4px 2px; } 80% { translate: 3px -1px; } }
@keyframes superhero-komik-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes superhero-komik-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes superhero-komik-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* cover: the POW of the opening, the button nudges now and then, the stars twinkle, the BOOM breathes */
html.inv-anim .superhero-komik-cover--leave .superhero-komik-cover__pow { animation: superhero-komik-pow .85s cubic-bezier(.3, 1.4, .6, 1) both; }
html.inv-anim .superhero-komik-cover__open.inv-enter {
    animation:
        inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0s) both,
        superhero-komik-nudge 3.2s ease-in-out 2.4s infinite;
}
html.inv-anim .superhero-komik-cover__star { animation: superhero-komik-twinkle 2.8s ease-in-out infinite; }
html.inv-anim .superhero-komik-cover__star--2 { animation-delay: -1s; }
html.inv-anim .superhero-komik-cover__star--3 { animation-delay: -1.9s; }
html.inv-anim .superhero-komik-cover__boom .superhero-komik-sfx__word { animation: superhero-komik-wobble 1.6s ease-in-out infinite; }
html.inv-anim .superhero-komik-cover__age .superhero-komik-age__burst { animation: superhero-komik-spin 18s linear infinite; }

/* RSVP: the POW! is stamped (and the panel shakes once) */
html.inv-anim .superhero-komik-rsvp__stamp { animation: superhero-komik-stamp .6s cubic-bezier(.3, 1.4, .6, 1) both; }
html.inv-anim .superhero-komik-rsvp:has(.superhero-komik-rsvp__sent:not([style*="none"])) .superhero-komik-frame { animation: superhero-komik-shake .4s ease .25s; }
html.inv-anim .superhero-komik-stream__live i { animation: superhero-komik-blink 1.2s steps(2, jump-none) infinite; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .superhero-komik-heading__lines i { animation: superhero-komik-line linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    html.inv-anim .superhero-komik-heading__lines i:nth-child(2) { animation-range: entry 35% entry 100%; }
    html.inv-anim .superhero-komik-heading__lines i:nth-child(3) { animation-range: entry 50% cover 30%; }
    html.inv-anim .superhero-komik-story__list::before { animation: superhero-komik-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 70%; }
    html.inv-anim .superhero-komik-vendor__leader { animation: superhero-komik-line linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
    html.inv-anim .superhero-komik-countdown .superhero-komik-sfx,
    html.inv-anim .superhero-komik-opening__zap,
    html.inv-anim .superhero-komik-closing__hore { animation: superhero-komik-drift linear both; animation-timeline: view(); }
    @keyframes superhero-komik-drift { from { translate: 0 22px; } to { translate: 0 -22px; } }
}

@media (prefers-reduced-motion: reduce) {
    .superhero-komik-cover, .superhero-komik-cover__inner, .superhero-komik-cover__panel, .superhero-komik-cover__paper,
    .superhero-komik-wishlist__lid, .superhero-komik-wishlist__body, .superhero-komik-wishlist__toggle, .superhero-komik-swatch,
    .superhero-komik-party__shirt, .superhero-komik-wishes__zap, .superhero-komik-rsvp .inv-form__choices label { transition: none; }
    .superhero-komik-cover__star, .superhero-komik-rsvp__stamp, .superhero-komik-stream__live i { animation: none; }
}