/* Fiesta — birthday. Warm, bright, confetti. Reads as a party without shouting. */
.celebration--fiesta {
    --c-ink: #2a1a12;
    --c-muted: #7c6455;
    --c-bg: #fffbf5;
    --c-surface: #ffffff;
    --c-accent: #db2777;
    --c-accent-soft: #fce7f3;
    --c-line: rgba(42, 26, 18, .12);
    --c-on-accent: #ffffff;
    --font-display: "Trebuchet MS", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

/* Confetti is drawn in CSS rather than shipped as an image: it scales to any
   viewport, costs no request, and cannot be the thing that fails to load on a
   slow connection. Purely decorative, so it is aria-hidden in the markup. */
.celebration--fiesta .cb-confetti {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle, #fbbf24 2.5px, transparent 3px),
        radial-gradient(circle, #db2777 2px, transparent 2.5px),
        radial-gradient(circle, #38bdf8 2px, transparent 2.5px);
    background-size: 120px 120px, 170px 170px, 210px 210px;
    background-position: 0 0, 40px 60px, 90px 20px;
    opacity: .5;
}

.celebration--fiesta .cb-milestone {
    display: inline-block;
    margin-top: 1rem;
    padding: .35rem 1.1rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
    letter-spacing: .04em;
}