/* ─────────────────────────────────────────────────────────────────────────────
   Siduz Celebrations — public page stylesheet.

   Deliberately standalone: it does NOT use Tailwind. Two reasons.

   1. Correctness. Every celebration is themed at runtime, and the Tailwind build
      only emits classes it finds as literal strings while scanning views — so
      per-celebration colours composed at request time would be purged and the
      page would render unstyled. All theming here comes from the CSS custom
      properties that CelebrationThemeService emits, which nothing can purge.

   2. Weight. Most guests open this page on mobile data straight from a WhatsApp
      link. Loading the whole app stylesheet for a page with no nav, no admin UI
      and no marketplace widgets would be wasteful.

   Every colour, font and radius is a var(). Nothing is hardcoded, which is what
   lets a light theme (Ivory Classic) and a dark one (Midnight Gold) share this
   file without either fighting it. Tints use the "r,g,b" companion vars so they
   adapt too.

   Mobile-first: base styles target 360px, and breakpoints add from there.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────────────────────────── */

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

/* The page carries no framework reset, so the browser's own [hidden] rule is the
   only thing hiding elements the JS toggles — and any component rule that sets
   `display` beats it on equal specificity. That silently exposed the recorder's
   Stop/Discard buttons and its camera preview before recording had started.
   Everything that sets `hidden` relies on this staying authoritative. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cel-bg);
    color: var(--cel-text);
    font-family: var(--cel-body-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cel-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--cel-heading-font);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 3px solid var(--cel-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.cel-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.cel-narrow { max-width: 720px; margin: 0 auto; }

.cel-section { padding: 56px 0; position: relative; }
.cel-section + .cel-section { padding-top: 0; }
.cel-section:last-of-type { padding-bottom: 72px; }

/* Alternating tint so long pages don't read as one undifferentiated column. */
.cel-section--tint {
    background: rgba(var(--cel-primary-rgb), .04);
    padding-top: 56px;
    padding-bottom: 56px;
}

.cel-section__head { text-align: center; margin-bottom: 32px; }

.cel-section__title {
    font-size: 1.75rem;
    margin-bottom: .35em;
    color: var(--cel-text);
}

.cel-section__sub {
    color: var(--cel-muted);
    font-size: .975rem;
    max-width: 40ch;
    margin: 0 auto;
}

/* A small ornament under section headings; its shape follows the theme's decor. */
.cel-rule {
    width: 56px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--cel-secondary);
    border: 0;
    position: relative;
}
.cel-rule::before,
.cel-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cel-accent);
    transform: translateY(-50%);
}
.cel-rule::before { left: -12px; }
.cel-rule::after  { right: -12px; }

/* ── Cards, buttons, pills ────────────────────────────────────────────────── */

.cel-card {
    background: var(--cel-surface);
    border: 1px solid rgba(var(--cel-text-rgb), .09);
    border-radius: var(--cel-radius);
    padding: 24px;
    box-shadow: 0 1px 2px rgba(var(--cel-text-rgb), .04),
                0 12px 32px -20px rgba(var(--cel-text-rgb), .22);
}

.cel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;               /* comfortable tap target on mobile */
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: var(--cel-btn-radius);
    font-family: var(--cel-body-font);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cel-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cel-btn:active { transform: translateY(0); }
.cel-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.cel-btn--primary {
    background: var(--cel-primary);
    color: var(--cel-on-primary, #FFFFFF);
    box-shadow: 0 8px 22px -12px rgba(var(--cel-primary-rgb), .85);
}
.cel-btn--primary:hover { background: var(--cel-primary-dark); }

.cel-btn--ghost {
    background: transparent;
    color: var(--cel-text);
    border-color: rgba(var(--cel-text-rgb), .22);
}
.cel-btn--ghost:hover { border-color: var(--cel-primary); color: var(--cel-primary); }

.cel-btn--block { width: 100%; }

.cel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(var(--cel-primary-rgb), .10);
    color: var(--cel-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.cel-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 78vh;
    padding: 96px 20px 56px;
    text-align: center;
    overflow: hidden;
    background: var(--cel-primary-dark);
}

.cel-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cel-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Gradient from the theme, so text stays readable over any photo. */
.cel-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cel-hero-overlay);
}

.cel-hero__inner { position: relative; z-index: 1; max-width: 760px; }

.cel-hero__kicker {
    font-family: var(--cel-script-font);
    font-size: 1.6rem;
    color: var(--cel-secondary);
    margin-bottom: .2em;
    line-height: 1.2;
}

.cel-hero__title {
    font-size: clamp(2.1rem, 9vw, 4.25rem);
    color: #fff;
    margin-bottom: .25em;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .34);
}

.cel-hero__meta {
    color: rgba(255, 255, 255, .93);
    font-size: 1.02rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 0;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

.cel-hero__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* On a photo, the secondary action needs a light outline rather than the
   theme's text colour, which may be dark. */
.cel-hero__actions .cel-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(3px);
}
.cel-hero__actions .cel-btn--ghost:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* No cover photo: fall back to a themed gradient rather than an empty box. */
.cel-hero--plain {
    background:
        radial-gradient(circle at 20% 15%, rgba(var(--cel-secondary-rgb), .30), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(var(--cel-accent-rgb), .26), transparent 52%),
        var(--cel-primary-dark);
}

/* ── Countdown ────────────────────────────────────────────────────────────── */

.cel-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
}

.cel-countdown__unit {
    background: var(--cel-surface);
    border: 1px solid rgba(var(--cel-text-rgb), .09);
    border-radius: var(--cel-radius);
    padding: 16px 6px;
    text-align: center;
}

.cel-countdown__num {
    display: block;
    font-family: var(--cel-heading-font);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cel-primary);
    font-variant-numeric: tabular-nums;
}

.cel-countdown__label {
    display: block;
    margin-top: 6px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cel-muted);
}

.cel-countdown__done {
    text-align: center;
    font-family: var(--cel-script-font);
    font-size: 2rem;
    color: var(--cel-primary);
}

/* ── Schedule ─────────────────────────────────────────────────────────────── */

.cel-schedule { display: grid; gap: 16px; }

.cel-event {
    background: var(--cel-surface);
    border: 1px solid rgba(var(--cel-text-rgb), .09);
    border-left: 3px solid var(--cel-secondary);
    border-radius: var(--cel-radius);
    padding: 22px;
}

.cel-event__name {
    font-size: 1.2rem;
    margin-bottom: .3em;
    color: var(--cel-text);
}

.cel-event__when {
    color: var(--cel-primary);
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: .55em;
}

.cel-event__rows { display: grid; gap: 6px; margin-bottom: 0; }

.cel-event__row {
    display: flex;
    gap: 9px;
    align-items: baseline;
    color: var(--cel-muted);
    font-size: .93rem;
}
.cel-event__row b {
    color: var(--cel-text);
    font-weight: 600;
}
.cel-event__icon { flex: 0 0 auto; opacity: .8; }

.cel-event__note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--cel-text-rgb), .08);
    color: var(--cel-muted);
    font-size: .93rem;
    white-space: pre-line;
}

/* ── Venue ────────────────────────────────────────────────────────────────── */

.cel-venue { text-align: center; }
.cel-venue__name { font-size: 1.35rem; margin-bottom: .2em; }
.cel-venue__address { color: var(--cel-muted); margin-bottom: 20px; white-space: pre-line; }

/* ── Forms (RSVP + wishes) ────────────────────────────────────────────────── */

.cel-field { margin-bottom: 18px; }

.cel-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--cel-text);
}
.cel-label span { color: var(--cel-muted); font-weight: 400; }

.cel-input,
.cel-textarea,
.cel-select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(var(--cel-text-rgb), .20);
    border-radius: calc(var(--cel-radius) * .55);
    background: var(--cel-surface);
    color: var(--cel-text);
    font-family: var(--cel-body-font);
    font-size: 1rem;                /* 16px stops iOS zooming the page on focus */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cel-input:focus,
.cel-textarea:focus,
.cel-select:focus {
    outline: none;
    border-color: var(--cel-primary);
    box-shadow: 0 0 0 3px rgba(var(--cel-primary-rgb), .16);
}
.cel-textarea { resize: vertical; min-height: 104px; }

.cel-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.cel-choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 8px;
    border: 1.5px solid rgba(var(--cel-text-rgb), .18);
    border-radius: calc(var(--cel-radius) * .55);
    background: var(--cel-surface);
    color: var(--cel-text);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.cel-choice:hover { border-color: var(--cel-primary); }
.cel-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cel-choice--on {
    border-color: var(--cel-primary);
    background: rgba(var(--cel-primary-rgb), .10);
    color: var(--cel-primary);
}

.cel-checkline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 9px;
    font-size: .95rem;
    cursor: pointer;
}
.cel-checkline input { margin-top: 4px; flex: 0 0 auto; }

.cel-error {
    color: var(--cel-accent);
    font-size: .9rem;
    margin: 0 0 14px;
    font-weight: 500;
}

.cel-note { color: var(--cel-muted); font-size: .85rem; }

/* Success panel shown after an RSVP or wish is accepted. */
.cel-done { text-align: center; padding: 26px 12px; }
.cel-done__icon { font-size: 2.75rem; line-height: 1; margin-bottom: 10px; }
.cel-done__title { font-size: 1.3rem; margin-bottom: .3em; }
.cel-done__text { color: var(--cel-muted); margin: 0; }

.cel-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-bottom: 24px;
    color: var(--cel-muted);
    font-size: .9rem;
}
.cel-counts b { color: var(--cel-primary); font-weight: 700; }

.cel-closed {
    text-align: center;
    padding: 30px 22px;
    border: 1px dashed rgba(var(--cel-text-rgb), .22);
    border-radius: var(--cel-radius);
    color: var(--cel-muted);
    background: rgba(var(--cel-text-rgb), .02);
}
.cel-closed__icon { font-size: 2rem; margin-bottom: 8px; }

/* ── Gallery ──────────────────────────────────────────────────────────────── */

.cel-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.cel-gallery__item {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(var(--cel-text-rgb), .05);
    border-radius: calc(var(--cel-radius) * .6);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
}
.cel-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.cel-gallery__item:hover img { transform: scale(1.05); }

/* Lightbox */
.cel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .92);
}
.cel-lightbox[open],
.cel-lightbox.is-open { display: flex; }
.cel-lightbox img {
    max-width: 100%;
    max-height: 86vh;
    border-radius: 8px;
    object-fit: contain;
}
.cel-lightbox__close,
.cel-lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 0;
    border-radius: 999px;
    width: 46px; height: 46px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cel-lightbox__close { top: 16px; right: 16px; }
.cel-lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.cel-lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }
.cel-lightbox__cap {
    position: absolute;
    bottom: 18px; left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    padding: 0 20px;
}

/* ── Wishes ───────────────────────────────────────────────────────────────── */

.cel-wishes { display: grid; gap: 14px; margin-bottom: 30px; }

.cel-wish {
    background: var(--cel-surface);
    border: 1px solid rgba(var(--cel-text-rgb), .09);
    border-radius: var(--cel-radius);
    padding: 20px 22px;
    position: relative;
}
.cel-wish--featured {
    border-color: var(--cel-secondary);
    box-shadow: 0 0 0 1px var(--cel-secondary) inset;
}
.cel-wish__badge {
    position: absolute;
    top: -9px; right: 16px;
    background: var(--cel-secondary);
    color: var(--cel-primary-dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.cel-wish__body {
    margin: 0 0 12px;
    white-space: pre-line;
    overflow-wrap: anywhere;        /* a pasted URL must not widen the page */
}
.cel-wish__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--cel-muted);
}
.cel-wish__who { font-weight: 700; color: var(--cel-text); }

.cel-wish__initial {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--cel-primary-rgb), .12);
    color: var(--cel-primary);
    font-weight: 700;
    font-size: .9rem;
}

.cel-empty {
    text-align: center;
    color: var(--cel-muted);
    padding: 26px 16px;
}

/* ── Share ────────────────────────────────────────────────────────────────── */

.cel-share {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.cel-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: var(--cel-btn-radius);
    border: 1px solid rgba(var(--cel-text-rgb), .14);
    background: var(--cel-surface);
    color: var(--cel-text);
    font-family: var(--cel-body-font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.cel-share__btn:hover { text-decoration: none; border-color: var(--cel-primary); color: var(--cel-primary); }

/* WhatsApp is the primary route to guests, so it gets brand colour and the
   full row on small screens. */
.cel-share__btn--wa {
    grid-column: 1 / -1;
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.cel-share__btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: #fff; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.cel-footer {
    padding: 40px 20px 48px;
    text-align: center;
    border-top: 1px solid rgba(var(--cel-text-rgb), .08);
    color: var(--cel-muted);
    font-size: .88rem;
}
.cel-footer__script {
    font-family: var(--cel-script-font);
    font-size: 1.7rem;
    color: var(--cel-primary);
    margin-bottom: .3em;
}
.cel-footer__brand { margin-top: 18px; font-size: .8rem; opacity: .8; }

/* Preview banner, shown only to the owner on an unpublished page. */
.cel-preview-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--cel-text);
    color: var(--cel-bg);
    padding: 10px 20px;
    font-size: .86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
}
.cel-preview-bar a { color: var(--cel-bg); text-decoration: underline; font-weight: 600; }

/* ── Decor variants ───────────────────────────────────────────────────────── */
/* CSS-only ornaments driven by the theme's `decor` token, so no theme needs to
   ship image assets. Each sits behind content and never intercepts clicks. */

.cel-section::before { pointer-events: none; }

/* Botanical / floral: soft organic blooms in the section corners. */
[data-decor="botanical"] .cel-section--tint::before,
[data-decor="floral"] .cel-section--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 220px 150px at 0% 0%,   rgba(var(--cel-secondary-rgb), .22), transparent 70%),
        radial-gradient(ellipse 200px 140px at 100% 100%, rgba(var(--cel-accent-rgb), .16), transparent 70%);
    pointer-events: none;
}

/* Confetti: scattered dots for party themes. */
[data-decor="confetti"] .cel-section--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(var(--cel-accent-rgb), .38) 2.5px, transparent 3px),
        radial-gradient(circle, rgba(var(--cel-secondary-rgb), .36) 2px, transparent 2.5px);
    background-size: 74px 74px, 53px 53px;
    background-position: 0 0, 26px 33px;
    opacity: .7;
    pointer-events: none;
}

/* Stars: a fine sparkle field, at home on the dark themes. */
[data-decor="stars"] .cel-section--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(var(--cel-secondary-rgb), .55) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(var(--cel-secondary-rgb), .32) 1px, transparent 1.5px);
    background-size: 96px 96px, 61px 61px;
    background-position: 12px 20px, 48px 56px;
    pointer-events: none;
}

/* Geometric: a faint diagonal weave. */
[data-decor="geometric"] .cel-section--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(var(--cel-secondary-rgb), .13) 0 1px,
        transparent 1px 13px
    );
    pointer-events: none;
}

/* Minimal draws nothing — the restraint is the design. */

/* Keep ornament behind content. */
.cel-section > * { position: relative; z-index: 1; }

/* ── Entrance animation ───────────────────────────────────────────────────── */
/* JS adds .is-in as a section scrolls into view. Without JS the .cel-reveal
   class is never applied, so content is visible by default — the animation is
   an enhancement, never a prerequisite for reading the page. */

.cel-reveal { opacity: 0; }
[data-animation="fade"] .cel-reveal { transition: opacity .7s ease; }
[data-animation="rise"] .cel-reveal {
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
[data-animation="none"] .cel-reveal { opacity: 1; transform: none; transition: none; }

.cel-reveal.is-in { opacity: 1; transform: none; }

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

/* 390px+ — most modern phones. */
@media (min-width: 390px) {
    .cel-gallery { gap: 10px; }
    .cel-countdown { gap: 12px; }
}

/* 480px+ — large phones and small tablets in portrait. */
@media (min-width: 480px) {
    .cel-share { grid-template-columns: repeat(3, 1fr); }
    .cel-share__btn--wa { grid-column: 1 / -1; }
    .cel-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* 768px+ — tablets. */
@media (min-width: 768px) {
    body { font-size: 17px; }
    .cel-wrap { padding: 0 32px; }
    .cel-section { padding: 76px 0; }
    .cel-section--tint { padding: 76px 0; }
    .cel-section__title { font-size: 2.15rem; }
    .cel-hero { min-height: 82vh; align-items: center; }
    .cel-hero__kicker { font-size: 2.1rem; }
    .cel-countdown__num { font-size: 2.6rem; }
    .cel-countdown__unit { padding: 22px 10px; }
    .cel-schedule { grid-template-columns: repeat(2, 1fr); }
    .cel-wishes { grid-template-columns: repeat(2, 1fr); }
    .cel-card { padding: 32px; }
    .cel-share { grid-template-columns: repeat(5, 1fr); }
    .cel-share__btn--wa { grid-column: auto; }
}

/* 1024px+ — laptops. */
@media (min-width: 1024px) {
    .cel-gallery { grid-template-columns: repeat(4, 1fr); }
    .cel-wishes { grid-template-columns: repeat(3, 1fr); }
    .cel-section__title { font-size: 2.4rem; }
}

/* 1440px+ — keep line lengths readable instead of stretching them. */
@media (min-width: 1440px) {
    .cel-wrap { max-width: 1240px; }
    .cel-hero__title { font-size: 4.5rem; }
}

/* A single sub-event shouldn't sit in a half-width card looking orphaned. */
.cel-schedule--single { grid-template-columns: 1fr !important; max-width: 620px; margin: 0 auto; }

/* ── Print ────────────────────────────────────────────────────────────────── */
/* Hosts do print these — the schedule becomes a paper programme. */

@media print {
    .cel-hero { min-height: auto; padding: 20px 0; background: none; color: var(--cel-text); }
    .cel-hero__media, .cel-share, .cel-preview-bar, .cel-lightbox { display: none !important; }
    .cel-hero__title { color: var(--cel-text); text-shadow: none; }
    .cel-hero__meta { color: var(--cel-muted); text-shadow: none; }
    .cel-section { padding: 18px 0; page-break-inside: avoid; }
    .cel-reveal { opacity: 1 !important; transform: none !important; }
    .cel-card, .cel-event, .cel-wish { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — guest contributions, live wall, memory page, montage, passes

   Everything below reuses the same theme custom properties as the rest of the
   file, so a new theme styles these surfaces without a single addition here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card title (contribution page) ─────────────────────────────────────── */
.cel-card__title {
    font-family: var(--cel-heading-font);
    font-size: 19px;
    color: var(--cel-text);
    margin-bottom: 4px;
}

/* ── Guest messages ─────────────────────────────────────────────────────── */
.cel-msgs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.cel-msg {
    background: var(--cel-surface);
    border: 1px solid rgba(var(--cel-text-rgb), .09);
    border-radius: var(--cel-radius);
    padding: 16px;
    box-shadow: 0 1px 2px rgba(var(--cel-text-rgb), .04),
                0 12px 32px -20px rgba(var(--cel-text-rgb), .22);
}

.cel-msg--featured { border-color: rgba(var(--cel-primary-rgb), .38); }

/* A newly arrived card announces itself, then settles. */
.cel-msg--new,
.cel-wish--new { animation: cel-land .55s ease-out; }

@keyframes cel-land {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.cel-msg__video {
    width: 100%;
    border-radius: calc(var(--cel-radius) * .7);
    background: #000;
    display: block;
    margin-bottom: 10px;
}

.cel-msg__audio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cel-msg__wave {
    font-size: 20px;
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--cel-primary-rgb), .10);
}

.cel-msg__audio audio { width: 100%; min-width: 0; }

.cel-msg__body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--cel-text);
    margin-bottom: 10px;
}

.cel-msg__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--cel-muted);
}

.cel-msg__dur {
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* ── Recorder ───────────────────────────────────────────────────────────── */
.cel-rec {
    border: 1px dashed rgba(var(--cel-text-rgb), .20);
    border-radius: var(--cel-radius);
    padding: 16px;
    margin-bottom: 18px;
    text-align: center;
}

.cel-rec__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.cel-rec__status {
    font-size: 13px;
    color: var(--cel-muted);
    margin-top: 10px;
    min-height: 18px;
}

.cel-rec__preview,
.cel-rec__result {
    width: 100%;
    max-width: 320px;
    margin: 12px auto 0;
    border-radius: calc(var(--cel-radius) * .7);
    background: #000;
    display: block;
}

.cel-rec__result { background: transparent; }
.cel-rec__playback audio { width: 100%; max-width: 320px; margin-top: 12px; }

/* ── Upload progress ────────────────────────────────────────────────────── */
.cel-upload__progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--cel-text-rgb), .09);
    overflow: hidden;
    margin-bottom: 14px;
}

.cel-upload__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--cel-primary);
    transition: width .2s ease-out;
}

/* ── Gifts ──────────────────────────────────────────────────────────────── */
.cel-gift {
    border: 1px solid rgba(var(--cel-text-rgb), .10);
    border-radius: var(--cel-radius);
    padding: 18px 20px;
    background: var(--cel-surface);
    text-align: left;
    max-width: 380px;
    margin: 0 auto;
}

.cel-gift__label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cel-muted);
    margin-bottom: 12px;
}

.cel-gift__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(var(--cel-text-rgb), .06);
}

.cel-gift__row:last-child { border-bottom: 0; }
.cel-gift__row dt { font-size: 13px; color: var(--cel-muted); }
.cel-gift__row dd { font-size: 14px; font-weight: 600; text-align: right; }

.cel-gift__copy {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--cel-primary);
    margin-left: 8px;
    padding: 0;
}

/* ── Report flag + sheet ────────────────────────────────────────────────── */
.cel-report {
    margin-left: auto;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 4px;
    color: var(--cel-muted);
    opacity: .35;
    transition: opacity .15s ease;
}

.cel-report:hover,
.cel-report:focus-visible { opacity: 1; }

.cel-report-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(12, 10, 9, .55);
    padding: 0;
}

.cel-report-menu.is-open { display: flex; }

.cel-report-menu__panel {
    background: var(--cel-surface);
    width: 100%;
    max-width: 420px;
    border-radius: var(--cel-radius) var(--cel-radius) 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    animation: cel-sheet-up .24s ease-out;
}

@keyframes cel-sheet-up {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cel-report-menu__title {
    font-family: var(--cel-heading-font);
    font-size: 19px;
    margin-bottom: 3px;
}

.cel-report-menu__sub {
    font-size: 13px;
    color: var(--cel-muted);
    margin-bottom: 14px;
}

.cel-report-menu__opt {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(var(--cel-text-rgb), .10);
    border-radius: calc(var(--cel-radius) * .6);
    background: none;
    font: inherit;
    font-size: 14.5px;
    color: var(--cel-text);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.cel-report-menu__opt:hover {
    border-color: var(--cel-primary);
    background: rgba(var(--cel-primary-rgb), .05);
}

.cel-report-menu__note {
    font-size: 13px;
    color: var(--cel-primary);
    min-height: 18px;
    margin: 6px 0;
}

.cel-report-menu__close {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--cel-muted);
    padding: 12px;
    cursor: pointer;
}

@media (min-width: 640px) {
    .cel-report-menu { align-items: center; padding: 20px; }
    .cel-report-menu__panel { border-radius: var(--cel-radius); }
}

/* ── Gallery additions (video tiles, credit line) ───────────────────────── */
.cel-gallery__item--video {
    background: #000;
    display: block;
    position: relative;
}

.cel-gallery__item--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cel-gallery__cap,
.cel-gallery__by {
    display: block;
    font-size: 11.5px;
    color: var(--cel-muted);
    padding: 5px 2px 0;
}

/* ── Contribution page header ───────────────────────────────────────────── */
.cel-contrib__head {
    background-size: cover;
    background-position: center;
    background-color: var(--cel-primary-dark);
    color: #fff;
    padding: 46px 0 40px;
    text-align: center;
}

.cel-contrib__eyebrow {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .85;
}

.cel-contrib__title {
    font-family: var(--cel-heading-font);
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.12;
    margin: 8px 0 10px;
    color: #fff;
}

.cel-contrib__link { color: #fff; font-size: 14px; text-decoration: underline; opacity: .9; }

/* ── The live wall (projector) ──────────────────────────────────────────── */
.cel-wall-body { overflow: hidden; }

.cel-wall {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cel-bg);
}

.cel-wall__head { padding: 26px 40px 0; text-align: center; }

.cel-wall__eyebrow {
    font-size: clamp(12px, 1.4vw, 16px);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cel-muted);
}

.cel-wall__title {
    font-family: var(--cel-heading-font);
    font-size: clamp(26px, 3.6vw, 52px);
    color: var(--cel-primary-dark);
    margin-top: 4px;
}

.cel-wall__stage {
    flex: 1;
    position: relative;
    display: grid;
    place-items: center;
    padding: 20px 6vw;
    min-height: 0;
}

.cel-wall__card {
    position: absolute;
    max-width: 1100px;
    text-align: center;
    opacity: 0;
    transform: translateY(24px) scale(.985);
    transition: opacity .7s ease, transform .7s ease;
}

.cel-wall__card.is-in { opacity: 1; transform: none; }
.cel-wall__card.is-leaving { opacity: 0; transform: translateY(-20px) scale(.99); }

.cel-wall__body {
    font-family: var(--cel-heading-font);
    font-size: clamp(26px, 4.4vw, 60px);
    line-height: 1.28;
    color: var(--cel-text);
}

.cel-wall__author {
    font-size: clamp(15px, 1.8vw, 24px);
    color: var(--cel-muted);
    margin-top: 22px;
}

.cel-wall__meta { opacity: .7; font-size: .8em; }

.cel-wall__empty { text-align: center; color: var(--cel-muted); font-size: clamp(18px, 2.4vw, 28px); }
.cel-wall__empty-sub { font-size: .62em; margin-top: 10px; opacity: .8; }

.cel-wall__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 40px 26px;
    border-top: 1px solid rgba(var(--cel-text-rgb), .08);
}

.cel-wall__qr {
    width: clamp(72px, 7vw, 112px);
    height: clamp(72px, 7vw, 112px);
    border-radius: 10px;
    background: #fff;
    flex: none;
}

.cel-wall__cta {
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 600;
    color: var(--cel-text);
}

.cel-wall__url { font-size: clamp(12px, 1.2vw, 16px); color: var(--cel-muted); }

.cel-wall__full {
    margin-left: auto;
    border: 1px solid rgba(var(--cel-text-rgb), .14);
    background: none;
    border-radius: 10px;
    font-size: 18px;
    color: var(--cel-muted);
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex: none;
}

/* ── QR guest pass ──────────────────────────────────────────────────────── */
.cel-pass-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.cel-pass { width: 100%; max-width: 380px; text-align: center; }

.cel-pass__card {
    background: var(--cel-surface);
    border-radius: var(--cel-radius);
    padding: 28px 24px 24px;
    box-shadow: 0 24px 60px -30px rgba(var(--cel-text-rgb), .45);
    position: relative;
}

.cel-pass__eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cel-muted);
}

.cel-pass__name {
    font-family: var(--cel-heading-font);
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.12;
    color: var(--cel-primary-dark);
    margin: 8px 0 4px;
}

.cel-pass__party { font-size: 15px; font-weight: 600; }
.cel-pass__when,
.cel-pass__where { font-size: 14px; color: var(--cel-muted); margin-top: 3px; }

/* The notch-and-dashes that make a ticket read as a ticket. */
.cel-pass__perf {
    position: relative;
    height: 1px;
    margin: 22px -24px 20px;
    border-top: 2px dashed rgba(var(--cel-text-rgb), .16);
}

.cel-pass__perf::before,
.cel-pass__perf::after {
    content: '';
    position: absolute;
    top: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cel-bg);
}

.cel-pass__perf::before { left: -10px; }
.cel-pass__perf::after  { right: -10px; }

.cel-pass__qr { width: 168px; height: 168px; }

.cel-pass__status {
    font-size: 14px;
    font-weight: 600;
    margin-top: 14px;
    padding: 9px;
    border-radius: calc(var(--cel-radius) * .5);
}

.cel-pass__status.is-new    { background: rgba(16, 185, 129, .12); color: #047857; }
.cel-pass__status.is-repeat { background: rgba(var(--cel-text-rgb), .06); color: var(--cel-muted); }

.cel-pass__link { margin-top: 18px; font-size: 14px; }

/* ── Memory page ────────────────────────────────────────────────────────── */
.cel-hero--memory { min-height: 54vh; }

.cel-memstats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 50px;
}

.cel-memstat { text-align: center; }

.cel-memstat__n {
    display: block;
    font-family: var(--cel-heading-font);
    font-size: clamp(32px, 6vw, 52px);
    line-height: 1;
    color: var(--cel-primary-dark);
}

.cel-memstat__l {
    display: block;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cel-muted);
    margin-top: 6px;
}

.cel-prose {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--cel-text);
}

/* ── Montage ────────────────────────────────────────────────────────────── */
.cel-montage-body { background: #07060a; overflow: hidden; }

.cel-montage { position: fixed; inset: 0; }
.cel-montage__stage { position: absolute; inset: 0; }

.cel-montage__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.3s ease;
}

.cel-montage__slide.is-in { opacity: 1; }

.cel-montage__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The slow drift that does the work an encoder would have done. */
    animation: cel-kenburns 13s ease-out forwards;
}

.cel-montage__slide--alt img { animation-name: cel-kenburns-alt; }

@keyframes cel-kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

@keyframes cel-kenburns-alt {
    from { transform: scale(1.14) translate3d(1.5%, 1%, 0); }
    to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

.cel-montage__slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 88px;
    text-align: center;
    color: #fff;
    font-size: clamp(14px, 1.8vw, 20px);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
    padding: 0 8vw;
}

.cel-montage__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 32px 6vw;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .75);
    pointer-events: none;
}

.cel-montage__title {
    font-family: var(--cel-heading-font);
    font-size: clamp(24px, 3.4vw, 46px);
    line-height: 1.1;
    color: #fff;
}

.cel-montage__date { font-size: clamp(13px, 1.4vw, 18px); opacity: .88; margin-top: 4px; }

.cel-montage__controls {
    position: absolute;
    right: 5vw;
    bottom: 34px;
    display: flex;
    gap: 10px;
}

.cel-montage__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: background .15s ease;
}

.cel-montage__btn:hover { background: rgba(0, 0, 0, .68); }

.cel-montage__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .16);
}

.cel-montage__progress span {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
}

/* Respect a stated preference for less motion: the montage still advances,
   it simply stops drifting and sliding. */
@media (prefers-reduced-motion: reduce) {
    .cel-montage__slide img { animation: none; transform: scale(1.02); }
    .cel-wall__card,
    .cel-msg--new,
    .cel-wish--new { transition: none; animation: none; }
}

@media (max-width: 640px) {
    .cel-wall__head { padding: 18px 20px 0; }
    .cel-wall__foot { padding: 14px 20px 20px; gap: 12px; }
    .cel-memstats { gap: 22px 32px; }
}