:root {
    --parchment: #F5E6D0;
    --umber: #2B1810;
    --terracotta: #C25B28;
    --gold: #D4A574;
    --cork: #C9A87C;
    --sage: #6B7F4A;
    --espresso: #3D2B1F;
    --ochre: #E8A63D;
    --bone: #FAF3E8;
    --ink: #2B1810;
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Technical motion: IntersectionObserver` to trigger JavaScript `requestAnimationFrame` loops that increment displayed numbers from 0 to target over ~1.5 seconds. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    background: var(--parchment);
    color: var(--espresso);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
}

h1, h2 {
    font-family: "Bungee Shade", "Archivo Black", sans-serif;
    color: #6B3A2A;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--gold);
    line-height: 0.95;
}

.kicker, b, small, .nav-badge, .radial-nav a, button, .mini-badge, .enamel, .wall-badge {
    font-family: "Lilita One", "Inter", sans-serif;
    letter-spacing: 0.02em;
}

.halftone-overlay::before, .enamel::after, .wall-badge::after, .comic-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #2B1810 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.08;
    pointer-events: none;
    transition: background-size 0.35s ease, opacity 0.35s ease;
}

.radial-nav {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 50;
    width: 70px;
    height: 70px;
}
.nav-badge {
    position: absolute;
    inset: 0;
    border: 4px solid var(--ink);
    border-radius: 50%;
    background: var(--terracotta);
    color: var(--bone);
    font-size: 2rem;
    box-shadow: 5px 6px 0 rgba(43, 24, 16, 0.35);
    cursor: pointer;
}
.radial-nav a {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid var(--ink);
    background: var(--bone);
    color: var(--ink);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0;
    transform: rotate(calc(var(--i) * 62deg - 188deg)) translateX(0) rotate(calc(var(--i) * -62deg + 188deg));
    transition: 0.35s var(--bounce);
}
.radial-nav:hover a, .radial-nav.open a {
    opacity: 1;
    transform: rotate(calc(var(--i) * 62deg - 188deg)) translateX(112px) rotate(calc(var(--i) * -62deg + 188deg));
}

.hero-panel {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, var(--parchment), var(--bone));
}
.cork-split {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    background-color: var(--cork);
    background-image:
        radial-gradient(circle at 25% 20%, rgba(43, 24, 16, 0.17) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 45%, rgba(250, 243, 232, 0.18) 0 1px, transparent 2px),
        linear-gradient(35deg, rgba(107, 58, 42, 0.22) 0 1px, transparent 1px);
    background-size: 38px 38px, 26px 26px, 11px 11px;
    border-bottom: 8px solid var(--ink);
    z-index: 1;
}
.badge-cloud { position: relative; width: min(980px, 95vw); height: 72vh; margin: 0 auto; }
.mini-badge {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 86px;
    min-height: 86px;
    padding: 0.7rem;
    background: var(--bone);
    border: 3px solid var(--ink);
    color: var(--ink);
    box-shadow: 8px 9px 0 rgba(43, 24, 16, 0.28);
    transform: rotate(var(--r));
}
.mini-badge:nth-child(1) { left: 3%; top: 13%; --r: -11deg; }
.mini-badge:nth-child(2) { left: 18%; top: 32%; --r: 6deg; }
.mini-badge:nth-child(3) { left: 36%; top: 10%; --r: -4deg; }
.mini-badge:nth-child(4) { left: 56%; top: 27%; --r: 9deg; }
.mini-badge:nth-child(5) { left: 76%; top: 8%; --r: -8deg; }
.mini-badge:nth-child(6) { left: 68%; top: 50%; --r: 5deg; }
.mini-badge:nth-child(7) { left: 44%; top: 47%; --r: -13deg; }
.mini-badge:nth-child(8) { left: 7%; top: 55%; --r: 10deg; }
.mini-badge:nth-child(9) { left: 84%; top: 35%; --r: 12deg; }
.mini-badge:nth-child(10) { left: 26%; top: 60%; --r: -7deg; }
.circle { border-radius: 50%; }
.shield { clip-path: polygon(50% 0, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%); }
.hex { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.pennant { clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%); }
.sage { background: var(--sage); color: var(--bone); }
.gold { background: var(--ochre); }
.rust { background: var(--terracotta); color: var(--bone); }
.pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--terracotta); border: 3px solid var(--ink); box-shadow: 2px 3px 0 rgba(43,24,16,.3); }
.p1 { left: 15%; top: 18%; } .p2 { left: 62%; top: 14%; } .p3 { left: 51%; top: 62%; }

.hero-copy {
    position: absolute;
    right: clamp(1rem, 7vw, 8rem);
    bottom: clamp(2rem, 8vh, 6rem);
    z-index: 2;
    width: min(780px, 92vw);
    padding: clamp(2rem, 5vw, 4rem);
    border: 5px solid var(--ink);
    background: rgba(250, 243, 232, 0.88);
    box-shadow: 12px 14px 0 var(--terracotta);
    transform: rotate(-2deg);
    position: absolute;
}
.hero-copy h1 { font-size: clamp(3rem, 8vw, 7rem); }
.hero-copy p { margin-top: 1rem; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.55rem); }
.down-star { color: var(--ochre); font-size: 3rem; animation: pulseStar 1.8s ease-in-out infinite; text-align: center; }

.showcase-ribbon {
    margin: -2rem 0 4rem;
    padding: 2.4rem 0;
    background: var(--terracotta);
    border-block: 5px solid var(--ink);
    transform: skewY(-5deg);
    overflow: hidden;
}
.ribbon-track {
    display: flex;
    gap: clamp(1rem, 3vw, 2rem);
    padding: 0 4vw;
    overflow-x: auto;
    transform: skewY(5deg);
}
.enamel {
    position: relative;
    flex: 0 0 170px;
    height: 170px;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--bone);
    border: 4px solid var(--ink);
    color: var(--ink);
    box-shadow: 7px 8px 0 rgba(43, 24, 16, 0.35);
    transition: transform 0.3s var(--bounce), box-shadow 0.3s ease;
    overflow: hidden;
}
.enamel span { font-family: "Archivo Black", sans-serif; font-size: 2.5rem; color: var(--terracotta); display: block; }
.enamel:hover, .wall-badge:hover { transform: scale(1.08) rotate(-2deg); box-shadow: 12px 14px 0 rgba(43, 24, 16, 0.35); }
.enamel:hover::after, .wall-badge:hover::after { background-size: 12px 12px; opacity: 0.16; }
.badge-round { border-radius: 50%; }
.badge-shield { clip-path: polygon(50% 0, 93% 18%, 83% 80%, 50% 100%, 17% 80%, 7% 18%); }
.badge-hex { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.badge-pennant { clip-path: polygon(0 0, 100% 0, 83% 50%, 100% 100%, 0 100%); }
.earned { background: var(--sage); color: var(--bone); }
.earned span { color: var(--ochre); }

.story-stack {
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem);
    background: linear-gradient(135deg, var(--parchment), var(--bone));
}
.comic-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 5rem);
    background: var(--bone);
    outline: 4px solid var(--ink);
    box-shadow: 13px 15px 0 var(--gold);
    transform: rotate(-2deg);
    overflow: visible;
}
.comic-panel.alt { transform: rotate(1.5deg); box-shadow: -13px 15px 0 var(--sage); }
.comic-panel::before { z-index: 0; }
.comic-panel > * { position: relative; z-index: 1; }
.illustrated-badge {
    grid-column: span 2;
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--terracotta);
    color: var(--bone);
    border: 5px solid var(--ink);
    box-shadow: 9px 11px 0 rgba(43, 24, 16, 0.3);
}
.illustrated-badge span { font-family: "Archivo Black", sans-serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; }
.illustrated-badge em { display: block; font-family: "Lilita One", sans-serif; font-style: normal; font-size: 1.4rem; text-transform: uppercase; }
.panel-text { grid-column: span 4; }
.panel-text h2, .wall-heading h2, .closing-bubble h2 { font-size: clamp(2rem, 5vw, 4rem); margin: 0.25rem 0 1rem; }
.kicker { color: var(--terracotta); text-transform: uppercase; font-size: clamp(1.2rem, 3vw, 2rem); }
.counter-line { display: flex; align-items: baseline; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }
.counter { font-family: "Archivo Black", sans-serif; font-size: clamp(2rem, 6vw, 5rem); color: var(--terracotta); line-height: 1; }
.counter-line small { color: var(--ink); font-size: clamp(1rem, 2vw, 1.5rem); }
.stars, .star-divider { color: var(--ochre); font-family: "Lilita One", sans-serif; letter-spacing: 0.35em; text-shadow: 2px 2px 0 var(--ink); }
.star-divider { text-align: center; font-size: 2rem; margin: 3.5rem 0; animation: twinkle 3.5s ease-in-out infinite; }
.round-badge { border-radius: 50%; background: var(--sage); }
.shield-badge { clip-path: polygon(50% 0, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%); }
.hex-badge { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: var(--ochre); color: var(--ink); }

.collection-wall {
    position: relative;
    padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem);
    background: var(--parchment);
    clip-path: polygon(0 7%, 100% 0, 100% 92%, 0 100%);
}
.wall-heading { max-width: 900px; margin: 0 auto 2rem; text-align: center; }
.wall-grid {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "a a b c c d"
        "e f f c c g"
        "e h h h g g";
    gap: 24px;
    min-height: 620px;
}
.wall-badge {
    position: relative;
    border: 4px solid var(--ink);
    background: var(--bone);
    color: var(--ink);
    min-height: 150px;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    box-shadow: 8px 10px 0 rgba(43, 24, 16, 0.25);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s var(--bounce), box-shadow 0.3s ease;
}
.wall-badge:nth-child(1) { grid-area: a; transform: rotate(-4deg); }
.wall-badge:nth-child(2) { grid-area: b; transform: rotate(3deg); }
.wall-badge:nth-child(3) { grid-area: c; transform: rotate(-1deg); background: var(--terracotta); color: var(--bone); }
.wall-badge:nth-child(4) { grid-area: d; transform: rotate(5deg); }
.wall-badge:nth-child(5) { grid-area: e; transform: rotate(2deg); }
.wall-badge:nth-child(6) { grid-area: f; transform: rotate(-3deg); }
.wall-badge:nth-child(7) { grid-area: g; transform: rotate(4deg); }
.wall-badge:nth-child(8) { grid-area: h; transform: rotate(-2deg); }
.wall-badge.gold { background: var(--ochre); }
.wall-badge.sage { background: var(--sage); color: var(--bone); }
.speech-tip {
    width: min(480px, 88vw);
    margin: 3rem auto 0;
    padding: 1rem 1.3rem;
    background: var(--bone);
    border: 2px solid var(--ink);
    border-radius: 24px;
    box-shadow: 5px 6px 0 var(--gold);
    font-style: italic;
    position: relative;
    text-align: center;
}
.speech-tip::after { content: ""; position: absolute; top: -18px; left: 50%; border: 10px solid transparent; border-bottom-color: var(--ink); }

.finale {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 6rem 1rem;
    background: var(--umber);
    color: var(--bone);
    overflow: hidden;
}
.constellation, .constellation::before, .constellation::after {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 20%, #E8A63D 0 3px, transparent 4px),
        radial-gradient(circle at 82% 16%, #E8A63D 0 2px, transparent 3px),
        radial-gradient(circle at 24% 74%, #E8A63D 0 2px, transparent 3px),
        radial-gradient(circle at 72% 65%, #E8A63D 0 3px, transparent 4px),
        radial-gradient(circle at 48% 35%, #E8A63D 0 2px, transparent 3px);
    animation: twinkle 4s ease-in-out infinite;
}
.constellation::before { content: ""; transform: translate(7%, 12%); animation-delay: 1.1s; }
.constellation::after { content: ""; transform: translate(-9%, -6%); animation-delay: 2.2s; }
.closing-bubble {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--bone);
    color: var(--espresso);
    border: 5px solid var(--ink);
    border-radius: 42px;
    text-align: center;
    box-shadow: 13px 15px 0 var(--terracotta);
}
.closing-bubble::after { content: ""; position: absolute; right: 16%; bottom: -38px; border: 20px solid transparent; border-top-color: var(--ink); }
.giant-star { color: var(--ochre); font-size: clamp(5rem, 14vw, 10rem); line-height: 0.9; text-shadow: 5px 5px 0 var(--ink); animation: pulseStar 2.2s ease-in-out infinite; }
.badge-form {
    margin: 2rem auto 0;
    width: min(420px, 100%);
    min-height: 190px;
    display: grid;
    place-items: center;
    gap: 0.8rem;
    border-radius: 50%;
    border: 4px solid var(--ink);
    background: var(--parchment);
    box-shadow: inset 0 0 0 10px var(--gold), 7px 8px 0 rgba(43,24,16,.25);
    padding: 2rem;
}
.badge-form input, .badge-form button {
    width: min(290px, 100%);
    border: 3px solid var(--ink);
    background: var(--bone);
    color: var(--ink);
    padding: 0.8rem 1rem;
    font: inherit;
    text-align: center;
}
.badge-form button { background: var(--terracotta); color: var(--bone); cursor: pointer; box-shadow: 4px 5px 0 var(--ink); }

.reveal { opacity: 0; transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.comic-panel.reveal:not(.alt) { transform: translate(-70px, 40px) rotate(-2deg); }
.comic-panel.alt.reveal { transform: translate(70px, 40px) rotate(1.5deg); }
.wall-heading.reveal, .closing-bubble.reveal { transform: translateY(55px); }
.wall-badge.reveal { transform: translate(40px, 40px) rotate(0); }
.reveal.is-visible { opacity: 1; }
.comic-panel.reveal.is-visible:not(.alt) { transform: rotate(-2deg); }
.comic-panel.alt.reveal.is-visible { transform: rotate(1.5deg); }
.wall-heading.reveal.is-visible, .closing-bubble.reveal.is-visible { transform: translateY(0); }
.wall-badge.reveal.is-visible:nth-child(1) { transform: rotate(-4deg); }
.wall-badge.reveal.is-visible:nth-child(2) { transform: rotate(3deg); }
.wall-badge.reveal.is-visible:nth-child(3) { transform: rotate(-1deg); }
.wall-badge.reveal.is-visible:nth-child(4) { transform: rotate(5deg); }
.wall-badge.reveal.is-visible:nth-child(5) { transform: rotate(2deg); }
.wall-badge.reveal.is-visible:nth-child(6) { transform: rotate(-3deg); }
.wall-badge.reveal.is-visible:nth-child(7) { transform: rotate(4deg); }
.wall-badge.reveal.is-visible:nth-child(8) { transform: rotate(-2deg); }

@keyframes twinkle { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes pulseStar { 0%,100% { transform: translateY(0) scale(1); opacity: 0.78; } 50% { transform: translateY(8px) scale(1.08); opacity: 1; } }

@media (max-width: 820px) {
    .hero-copy { right: 4vw; bottom: 6vh; }
    .comic-panel, .comic-panel.alt { grid-template-columns: 1fr; transform: none; }
    .comic-panel.reveal, .comic-panel.alt.reveal, .comic-panel.reveal.is-visible, .comic-panel.alt.reveal.is-visible { transform: none; }
    .illustrated-badge, .panel-text { grid-column: auto; }
    .wall-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; min-height: auto; }
    .wall-badge, .wall-badge:nth-child(n) { grid-area: auto; min-height: 140px; }
    .radial-nav:hover a, .radial-nav.open a { transform: rotate(calc(var(--i) * 50deg - 188deg)) translateX(82px) rotate(calc(var(--i) * -50deg + 188deg)); }
}

@media (max-width: 520px) {
    .badge-cloud { height: 60vh; }
    .mini-badge { min-width: 66px; min-height: 66px; font-size: 0.82rem; }
    .hero-copy { padding: 1.4rem; box-shadow: 7px 8px 0 var(--terracotta); }
    .ribbon-track { padding-inline: 1rem; }
    .enamel { flex-basis: 138px; height: 138px; }
    .wall-grid { grid-template-columns: 1fr; }
    .badge-form { border-radius: 34px; }
}