/* B06 · Superhero Academy: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bangers-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/nunito-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* sticker proportions (img/st-*.webp) */
:root { --ar-hero-sil: 360 / 339; --ar-shield: 220 / 231; --ar-clock: 160 / 161; }

/* B06 · Superhero Academy: comic-book sky blue, red and yellow, halftone dots, bursts and city skyline; emblem, clock and hero silhouette from the mockup. */
:root {
  --bg: #eaf5ff; --bg2: #d6eaff; --ink: #0f2a6e; --muted: #34508f; --accent: #e3262e; --accent2: #ffd23f;
  --line: rgb(15 42 110 / .2);
  --card: #fff; --card-line: #0f2a6e; --card-shadow: 5px 5px 0 #0f2a6e; --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f2393f, #cf1c24); --btn-ink: #fff; --btn-line: #0f2a6e; --btn-border: 3px solid #0f2a6e; --btn-shadow: 4px 4px 0 #0f2a6e;
  --btn-font: "Nunito", system-ui, sans-serif;
  --f-display: "Bangers", "Impact", system-ui, sans-serif; --f-body: "Nunito", system-ui, sans-serif; --f-head: "Bangers", "Impact", system-ui, sans-serif; --f-num: "Bangers", "Impact", system-ui, sans-serif;
  --name-size: 5.4rem; --name-weight: 400; --name-color: #ffd23f; --name-track: .03em;
  --name-shadow: 3px 0 0 #0f2a6e, -3px 0 0 #0f2a6e, 0 3px 0 #0f2a6e, 0 -3px 0 #0f2a6e, 2px 2px 0 #0f2a6e, -2px 2px 0 #0f2a6e, 2px -2px 0 #0f2a6e, -2px -2px 0 #0f2a6e, 6px 6px 0 #e3262e, 8px 8px 0 #0f2a6e;
  --head-size: 1.9rem; --head-weight: 400; --head-color: #0f2a6e; --head-ink: #fff; --head-track: .04em;
  --photo-radius: 18px; --photo-border: 4px solid #0f2a6e; --photo-shadow: 7px 7px 0 #e3262e, 10px 10px 0 #0f2a6e; --cover-ar: 1 / 1;
  --gate-bg: url(../img/b06-city.svg) bottom / 100% 90px no-repeat, url(../img/b06-dots.svg), linear-gradient(180deg, #74bdff 0, #bfe1ff 55%, #eaf5ff 100%); --gate-ink: #0f2a6e;
  --guest-bg: #fff; --guest-line: #0f2a6e;
  --cd-title: #ffd23f; --cd-num: #fff; --cd-label: #dbe6ff;
  --cd-tile: linear-gradient(180deg, #1f4fd0, #12318f); --cd-tile-border: 3px solid #ffd23f; --cd-tile-radius: 12px; --cd-tile-shadow: 3px 3px 0 #0f2a6e;
  --dt-ic: #e3262e; --dt-ic-bg: #fff1f1; --dt-label: #fff; --av-bg: #ffd23f; --av-ink: #0f2a6e;
  --field-line: #0f2a6e;
}
body { background: url(../img/b06-dots.svg), linear-gradient(180deg, #d9edff, #eef7ff 40%, #d9edff); }
.inv { background: transparent; }
.card, .dt, .wish, .wcomp, .note { border: 3px solid #0f2a6e; }

/* Comic title: red slanted banner, huge yellow name, yellow tag */
.ttl { gap: 8px; }
.ttl__kicker span { font: 400 1.5rem/1.05 var(--f-display); letter-spacing: .05em; color: #fff; background: #e3262e; padding: 7px 16px 5px; border: 3px solid #ffd23f;
  transform: rotate(-3deg) skewX(-6deg); box-shadow: 5px 5px 0 #0f2a6e; text-shadow: 2px 2px 0 #0f2a6e; }
.ttl__name { line-height: .95; margin: 6px 0 0; transform: rotate(-2deg); }
.ttl__age span { font: italic 400 1.9rem/1 var(--f-display); letter-spacing: .04em; color: #fff; background: #0f2a6e; padding: 6px 18px 4px; border-radius: 10px; transform: rotate(-2deg);
  box-shadow: 4px 4px 0 #e3262e; }
.ttl__age b { font-size: 1.6em; color: #ffd23f; vertical-align: -.12em; }
.ttl .lead { color: #0f2a6e; font-weight: 800; font-size: .98rem; background: #fff; border: 3px solid #0f2a6e; border-radius: 18px; padding: 12px 14px; box-shadow: 5px 5px 0 #0f2a6e; max-width: none; margin-top: 14px; }
.ttl__tag span { font: 400 1.35rem/1.05 var(--f-display); letter-spacing: .04em; color: #0f2a6e; background: #ffd23f; padding: 8px 16px 6px 44px; border: 3px solid #0f2a6e; border-radius: 6px;
  transform: rotate(-2deg); box-shadow: 4px 4px 0 #e3262e; position: relative; }
.ttl__tag span::before { content: "»"; position: absolute; left: 12px; top: 50%; transform: translateY(-54%); font-size: 1.6em; color: #e3262e; }
.ttl__tag { margin-top: 10px; }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 6px 16px; background: #fff; border: 3px solid #0f2a6e; border-radius: 10px; box-shadow: 4px 4px 0 #0f2a6e; font-weight: 900; }
.side__guest { display: inline-block; padding: 6px 14px; background: #fff; border: 3px solid #0f2a6e; border-radius: 10px; }
.guest { border-width: 3px; box-shadow: 5px 5px 0 #0f2a6e; }
.btn { text-transform: uppercase; font-weight: 900; letter-spacing: .02em; font-size: .88rem; }

/* Section headings: red or yellow slanted banners */
.h-sec__t { background: #e3262e; padding: 6px 18px 4px; border: 3px solid #0f2a6e; transform: rotate(-2deg) skewX(-6deg); box-shadow: 5px 5px 0 #0f2a6e; text-shadow: 2px 2px 0 #0f2a6e; }
.h-sec__ic { color: #ffd23f; filter: drop-shadow(1px 1px 0 #0f2a6e); }
.sec--gallery .h-sec__t, .sec--wishes .h-sec__t { background: #ffd23f; color: #0f2a6e; text-shadow: none; }
.sec--gallery .h-sec__ic, .sec--wishes .h-sec__ic { color: #e3262e; filter: none; }
.h-sec__sub, .lead { color: #0f2a6e; font-weight: 700; }

/* Hero */
.sec--hero { background: url(../img/b06-dots.svg), linear-gradient(180deg, #8ccaff, #d9edff); }
.photo--hero { width: min(68vw, 280px); }

/* Countdown on a red halftone band */
.sec--countdown { background: url(../img/b06-dots-red.svg), linear-gradient(180deg, #ea2e35, #c81c24); clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%); padding: 56px 18px 60px; }
.cd__t { font: 400 2rem/1 var(--f-display); letter-spacing: .05em; text-shadow: 3px 0 0 #0f2a6e, -3px 0 0 #0f2a6e, 0 3px 0 #0f2a6e, 0 -3px 0 #0f2a6e, 4px 4px 0 #0f2a6e; }
.cd__ic { color: #fff; width: 1em; height: 1em; filter: drop-shadow(2px 2px 0 #0f2a6e); }
.cd { gap: 14px; }
.cd__n { font-size: 2.4rem; letter-spacing: .04em; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -12px; top: 50%; transform: translateY(-58%); font: 400 1.8rem var(--f-display); color: #fff; }
.sec--countdown .link--cal { color: #fff; }

/* Details: comic cards with blue label tabs */
.dt { box-shadow: 5px 5px 0 #0f2a6e; }
.dt__l { display: inline-block; background: #1f4fd0; padding: 1px 10px; border-radius: 4px; transform: skewX(-8deg); margin-bottom: 4px; letter-spacing: .03em; }
.dt__ic { border: 2px solid #0f2a6e; border-radius: 50%; }
.dt__v strong { font-weight: 900; }
.btn--map { --map-bg: #fff; --map-ink: #1f4fd0; --map-line: #0f2a6e; border-width: 3px; box-shadow: 4px 4px 0 #0f2a6e; }
.link, .link--map, .link--cal { color: #1f4fd0; }
.note { box-shadow: 4px 4px 0 #0f2a6e; }
.gallery__item { border: 3px solid #0f2a6e; border-radius: 12px; box-shadow: 5px 5px 0 #e3262e; }
.btn--send { background: #1f4fd0; border-radius: 50%; width: 48px; height: 48px; padding: 0; box-shadow: 3px 3px 0 #0f2a6e; }
.btn--send span { display: none; }
.wcomp { box-shadow: 5px 5px 0 #0f2a6e; }
.wish { box-shadow: 4px 4px 0 #0f2a6e; }
.wish__av { border: 2px solid #0f2a6e; font-family: var(--f-display); font-size: 1.3rem; }

/* Closing: yellow words on a red burst, the hero on the rooftop */
.sec--closing { background: url(../img/b06-city.svg) bottom / 100% 110px no-repeat, url(../img/b06-dots.svg), linear-gradient(180deg, #d9edff, #9ccfff); padding-bottom: 230px; }
.closing__t { font-size: 2.3rem; line-height: 1.05; color: #ffd23f; letter-spacing: .04em;
  text-shadow: 3px 0 0 #0f2a6e, -3px 0 0 #0f2a6e, 0 3px 0 #0f2a6e, 0 -3px 0 #0f2a6e, 2px 2px 0 #0f2a6e, -2px 2px 0 #0f2a6e, 2px -2px 0 #0f2a6e, -2px -2px 0 #0f2a6e, 5px 5px 0 #e3262e;
  background: url(../img/b06-burst.svg) center / contain no-repeat; padding: 50px 30px; transform: rotate(-2deg); }
.closing__p, .closing__sign { color: #0f2a6e; font-weight: 700; }
.closing__name { font-size: 3.6rem; }
.made { color: #0f2a6e; }

/* ---------- Emblem, clock and hero silhouette from the mockup ---------- */
.gate__in .o1, .side__in .o1 { right: -6px; top: -6px; width: 74px; aspect-ratio: var(--ar-shield); background-image: url(../img/st-shield.webp); filter: drop-shadow(3px 3px 0 #0f2a6e); }
.gate__in .o2, .side__in .o2 { left: -8px; top: 220px; width: 52px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(-14deg); }
.gate__in .o3, .side__in .o3 { right: 2px; top: 236px; width: 40px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(16deg); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -4px; top: 14px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-shield); background-image: url(../img/st-shield.webp); filter: drop-shadow(3px 3px 0 #0f2a6e); }
.sec--hero .o2 { left: 4px; top: 250px; width: 13vw; max-width: 52px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(-14deg); }
.sec--countdown .o1 { left: -2px; top: 6px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-clock); background-image: url(../img/st-clock.webp); transform: rotate(-8deg); }
.sec--countdown .o2 { right: 10px; top: 22px; width: 10vw; max-width: 40px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(14deg); }
.sec--details .o1 { right: -6px; top: 6px; width: 11vw; max-width: 44px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(16deg); }
.sec--gallery .o1 { left: 0; top: 4px; width: 11vw; max-width: 44px; aspect-ratio: 26 / 40; background-image: url(../img/b06-bolt.svg); transform: rotate(-14deg); }
.sec--closing .o1 { left: -6px; bottom: 30px; width: 46vw; max-width: 190px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffe680 0, #ffd23f 55%, rgb(255 210 63 / 0) 70%); }
.sec--closing .o2 { left: 4px; bottom: 34px; width: 40vw; max-width: 166px; aspect-ratio: var(--ar-hero-sil); background-image: url(../img/st-hero-sil.webp); }

@media (min-width: 1024px) { .side__in .o1 { right: 40px; } .side__in .o2 { left: 40px; } .side__in .o3 { right: 40px; } }