:where([data-theme-version="v2"]) {
    --theme-surface: #fffdf8;
    --theme-surface-muted: #f4efe6;
    --theme-text: #20231f;
    --theme-text-muted: #62685f;
    --theme-accent: #6f7d61;
    --theme-accent-contrast: #ffffff;
    --theme-focus: #1f6feb;
    --theme-font-display: Georgia, "Times New Roman", serif;
    --theme-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --theme-step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.88rem);
    --theme-step-0: clamp(0.94rem, 0.89rem + 0.22vw, 1.06rem);
    --theme-step-1: clamp(1.13rem, 1.03rem + 0.43vw, 1.38rem);
    --theme-step-2: clamp(1.35rem, 1.17rem + 0.78vw, 1.8rem);
    --theme-step-3: clamp(1.62rem, 1.31rem + 1.35vw, 2.4rem);
    --theme-step-4: clamp(1.94rem, 1.43rem + 2.2vw, 3.2rem);
    --theme-space-1: 0.25rem;
    --theme-space-2: 0.5rem;
    --theme-space-3: 0.75rem;
    --theme-space-4: 1rem;
    --theme-space-5: 1.5rem;
    --theme-space-6: 2rem;
    --theme-space-7: 3rem;
    --theme-radius-sm: 0.5rem;
    --theme-radius-md: 1rem;
    --theme-radius-lg: 1.75rem;
    --theme-shadow-sm: 0 0.5rem 1.5rem rgba(25, 29, 24, 0.1);
    --theme-shadow-lg: 0 1.5rem 4rem rgba(25, 29, 24, 0.16);
    --theme-motion-fast: 160ms;
    --theme-motion-normal: 320ms;
    color: var(--theme-text);
    font-family: var(--theme-font-body);
    overflow-wrap: anywhere;
    text-rendering: optimizeLegibility;
}

:where([data-theme-version="v2"] *, [data-theme-version="v2"] *::before, [data-theme-version="v2"] *::after) {
    box-sizing: border-box;
}

:where([data-theme-version="v2"] img, [data-theme-version="v2"] video, [data-theme-version="v2"] svg) {
    display: block;
    max-width: 100%;
}

:where([data-theme-version="v2"] img[data-theme-photo]) {
    border-radius: var(--theme-photo-radius, var(--theme-radius-md));
    box-shadow: var(--theme-photo-shadow, var(--theme-shadow-sm));
    object-fit: var(--theme-photo-fit, cover);
    object-position: var(--theme-photo-position, center);
}

:where([data-theme-version="v2"] button, [data-theme-version="v2"] input, [data-theme-version="v2"] select, [data-theme-version="v2"] textarea) {
    color: inherit;
    font: inherit;
}

:is(
    [data-theme-version="v2"] button,
    [data-theme-version="v2"] [role="button"],
    [data-theme-version="v2"] a[data-theme-action],
    [data-theme-version="v2"] [data-theme-audio-toggle],
    [data-theme-version="v2"] [data-copy-value]
) {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
}

[data-theme-version="v2"] :focus-visible {
    outline: 3px solid var(--theme-focus) !important;
    outline-offset: 3px !important;
}

body[data-theme-version="v2"] [data-theme-open][data-theme-open]:focus-visible {
    outline-color: var(--theme-focus) !important;
    outline-style: solid !important;
    outline-width: 3px !important;
    outline-offset: 3px !important;
}

:where([data-theme-version="v2"] [data-theme-section]) {
    position: relative;
    scroll-margin-block: var(--theme-space-6);
}

:where([data-theme-version="v2"] [data-theme-section]:not([data-theme-section="cover"])) {
    content-visibility: auto;
    contain-intrinsic-size: auto 44rem;
}

:where([data-theme-version="v2"] [data-theme-section][hidden]) {
    display: none !important;
}

:where([data-theme-version="v2"] [data-theme-copy-status]) {
    min-height: 1.5em;
}

:where([data-theme-version="v2"] [data-theme-content][aria-hidden="true"]) {
    visibility: hidden;
}

:where([data-theme-version="v2"][data-theme-state="open"] [data-theme-cover]) {
    pointer-events: none;
}

/* Reserve the document scrollbar before the cover paints, so unlocking scroll
   after the opening does not change the prepared invitation's layout width. */
html:has(> body[data-theme-version="v2"]:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
)) {
    scrollbar-gutter: stable;
}

/* THM21-30 coordinate artwork and introduction through one finite opening.
   Keep both scroll containers locked until the kernel completes the hand-off. */
body[data-theme-version="v2"][data-theme-opening][data-theme-opening-stage="active"] {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

body[data-theme-version="v2"][data-theme-opening][data-theme-opening-stage="active"]
    [data-theme-content-shell] {
    overflow: clip !important;
    overscroll-behavior: none;
    scroll-behavior: auto !important;
}

body[data-theme-version="v2"][data-theme-opening][data-theme-opening-stage="active"]
    [data-theme-cover] {
    visibility: visible !important;
    pointer-events: none;
    transition: none !important;
}

body[data-theme-version="v2"][data-theme-opening][data-theme-opening-stage="active"]
    [data-theme-opening-layer] {
    animation: none !important;
    transition: none !important;
}

/* Premium openings (premium-openings.js) cut and move copies of the cover on temporary panels.
   Once the copies stand in for it, the original artwork hides; only the layers a recipe animates stay. */
[data-theme-cover] > [data-theme-opening-panel] {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: clip;
    pointer-events: none;
}

[data-theme-opening-panel] * {
    animation: none !important;
    transition: none !important;
}

[data-theme-opening-panel] .theme-opening-copy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

[data-theme-opening-panel] .theme-opening-copy--bare {
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme-opening-panel] .theme-opening-copy--bare::before,
[data-theme-opening-panel] .theme-opening-copy--bare::after {
    display: none !important;
}

[data-theme-cover][data-theme-opening-split] {
    overflow: hidden !important;
}

[data-theme-cover][data-theme-opening-split="copies"] {
    background: transparent !important;
}

[data-theme-cover][data-theme-opening-split="copies"]::before,
[data-theme-cover][data-theme-opening-split="copies"]::after,
[data-theme-cover][data-theme-opening-split="copies"] > :not([data-theme-opening-panel]) {
    visibility: hidden !important;
}

[data-theme-cover][data-theme-opening-split="copies"] [data-theme-opening-layer] {
    visibility: visible !important;
}

/* Bali's gateway opens as two physical halves above the prepared invitation. */
body.theme-thm27 [data-theme-cover][data-theme-opening-split] {
    background: transparent;
}

body.theme-thm27 [data-theme-cover][data-theme-opening-split]::before,
body.theme-thm27 [data-theme-cover][data-theme-opening-split]
    > :is(.thm27-ornaments, .thm27-cover__border) {
    visibility: hidden;
}

body.theme-thm27 [data-theme-opening-panel] {
    position: absolute;
    z-index: 1;
    inset-block: 0;
    width: 50%;
    overflow: clip;
    pointer-events: none;
}

body.theme-thm27 [data-theme-opening-panel="left"] { left: 0; right: auto; }
body.theme-thm27 [data-theme-opening-panel="right"] { right: 0; left: auto; }

body.theme-thm27 .theme-opening-panel__artwork {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

body.theme-thm27 [data-theme-opening-panel="right"] .theme-opening-panel__artwork {
    left: -100%;
}

body.theme-thm27 [data-theme-opening-panel] * {
    animation: none !important;
    transition: none !important;
}

/* Legacy v2 adapters preserve customer markup, but their semantic wrappers
   still participate in the shared opening and progressive-render lifecycle. */
body.legacy-theme-v2:not([data-theme-state="open"])
    [data-theme-section="cover"] ~ [data-theme-section] {
    display: none !important;
}

body.legacy-theme-v2:not([data-theme-state="open"])
    :where(.btn-music, #btn-play, #btn-to-top, .gototop) {
    display: none !important;
}

body.legacy-theme-v2[data-theme-state="open"] [data-theme-section="cover"] {
    display: none !important;
}

body.legacy-theme-v2[data-theme-state="open"]
    [data-theme-section]:not([data-theme-section="cover"]) {
    contain-intrinsic-size: auto 44rem;
    content-visibility: auto;
    display: block !important;
}

/* THM 21-30 use the same compact, accessible wishes carousel while retaining
   each theme's own card colours, borders and typography. */
body[data-theme-version="v2"] .theme-wishes-carousel {
    position: relative;
    margin-block-end: 2.5rem;
}

body[data-theme-version="v2"] .theme-wishes-carousel__viewport {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3rem) / 3);
    gap: 1.5rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 1px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

body[data-theme-version="v2"] .theme-wishes-carousel__viewport::-webkit-scrollbar {
    display: none;
}

body[data-theme-version="v2"] .theme-wishes-carousel__card {
    min-width: 0;
    height: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body[data-theme-version="v2"] .theme-wishes-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: min(100%, 15rem);
    margin-block-start: 1rem;
    margin-inline: auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

body[data-theme-version="v2"] .theme-wishes-carousel__dots::-webkit-scrollbar {
    display: none;
}

body[data-theme-version="v2"] .theme-wishes-carousel__dots[hidden] {
    display: none !important;
}

body[data-theme-version="v2"] .theme-wishes-carousel__dot {
    display: inline-grid;
    flex: 0 0 2.75rem;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    appearance: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    box-shadow: none;
}

body[data-theme-version="v2"] .theme-wishes-carousel__dot::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
    opacity: 0.32;
    transition:
        width var(--theme-motion-normal),
        opacity var(--theme-motion-fast),
        transform var(--theme-motion-fast);
}

body[data-theme-version="v2"] .theme-wishes-carousel__dot:is(:hover, :focus-visible)::before {
    opacity: 0.68;
    transform: scale(1.12);
}

body[data-theme-version="v2"] .theme-wishes-carousel__dot[aria-current="true"]::before {
    width: 1.5rem;
    opacity: 0.9;
    transform: none;
}

/* Opening covers stay locked to a single viewport. Individual theme artwork
   is still positioned by the theme stylesheet, but can no longer create a
   second scrollable cover page. */
body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
) [data-theme-cover] {
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body:is(
    .theme-thm23, .theme-thm24, .theme-thm25, .theme-thm26, .theme-thm27,
    .theme-thm28, .theme-thm29, .theme-thm30
) [data-theme-cover] > :is(
    .thm23-cover__stage, .thm24-cover__stage, .thm25-cover__stage,
    .thm26-cover__stage, .thm27-cover__stage, .thm28-cover__stage,
    .thm29-cover__stage, .thm30-cover__stage
) {
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

@media (max-width: 1100px) {
    body[data-theme-version="v2"] .theme-wishes-carousel__viewport {
        grid-auto-columns: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 760px) {
    body[data-theme-version="v2"] .theme-wishes-carousel {
        margin-block-end: 2rem;
    }

    body[data-theme-version="v2"] .theme-wishes-carousel__viewport {
        grid-auto-columns: 100%;
        gap: 1rem;
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] {
        padding-block: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-bottom));
    }

    body:is(
        .theme-thm23, .theme-thm24, .theme-thm25, .theme-thm26, .theme-thm27,
        .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] > :is(
        .thm23-cover__stage, .thm24-cover__stage, .thm25-cover__stage,
        .thm26-cover__stage, .thm27-cover__stage, .thm28-cover__stage,
        .thm29-cover__stage, .thm30-cover__stage
    ) {
        padding-block: 0;
    }
}

@media (max-width: 760px) and (max-height: 700px) {
    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] :is(
        .thm14-divider, .thm15-divider, .thm21-divider, .thm22-divider, .thm23-divider, .thm24-divider,
        .thm25-divider, .thm26-divider, .thm27-divider, .thm28-divider,
        .thm29-divider, .thm30-divider
    ) {
        margin-block: 0.55rem;
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] :is(
        .thm14-cover__guest, .thm15-cover__guest, .thm21-cover__guest, .thm22-cover__guest, .thm23-cover__guest,
        .thm24-cover__guest, .thm25-cover__guest, .thm26-cover__guest,
        .thm27-cover__guest, .thm28-cover__guest, .thm29-cover__guest,
        .thm30-cover__guest
    ) {
        margin-block: 0.65rem;
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] h1 {
        font-size: clamp(2.55rem, 12vw, 3.35rem);
        margin-block-start: 0.5rem;
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover][class*="cover--long"] h1 {
        font-size: clamp(1.8rem, 8vw, 2.25rem);
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm28, .theme-thm29, .theme-thm30
    ) [data-theme-cover] [data-theme-open] {
        min-height: 2.75rem !important;
        padding-block: 0.6rem;
    }
}

@media (max-width: 359px) {
    :where([data-theme-version="v2"]) {
        --theme-space-6: 1.5rem;
        --theme-space-7: 2.25rem;
    }
}

/* Decorative edge artwork for THM21-27 and THM29 must stay inside a
   predictable edge lane. This keeps moving foliage clear of headings,
   countdowns, forms and other readable content at every breakpoint. */
body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) {
    --theme-edge-ornament-size: clamp(170px, 16vw, 230px);
    --theme-edge-ornament-inset: clamp(-150px, -10vw, -88px);
    --theme-edge-ornament-bottom: -48px;
}

body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) :is(
    .thm21-ornaments, .thm22-ornaments, .thm23-ornaments, .thm24-ornaments,
    .thm25-ornaments, .thm26-ornaments, .thm27-ornaments, .thm29-ornaments
) {
    contain: paint;
}

body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) :is(
    .thm21-sulur, .thm22-fern, .thm23-scrollwork, .thm24-scrollwork,
    .thm25-scrollwork, .thm26-scrollwork, .thm27-scrollwork, .thm29-scrollwork
) {
    width: var(--theme-edge-ornament-size);
    bottom: var(--theme-edge-ornament-bottom);
    opacity: 0.32;
}

body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) :is(
    .thm21-sulur--left, .thm22-fern--left, .thm23-scrollwork--left,
    .thm24-scrollwork--left, .thm25-scrollwork--left, .thm26-scrollwork--left,
    .thm27-scrollwork--left, .thm29-scrollwork--left
) {
    left: var(--theme-edge-ornament-inset);
}

body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) :is(
    .thm21-sulur--right, .thm22-fern--right, .thm23-scrollwork--right,
    .thm24-scrollwork--right, .thm25-scrollwork--right, .thm26-scrollwork--right,
    .thm27-scrollwork--right, .thm29-scrollwork--right
) {
    right: var(--theme-edge-ornament-inset);
}

body:is(
    .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
    .theme-thm26, .theme-thm27, .theme-thm29
) :is(
    .thm21-intro, .thm22-intro, .thm23-intro, .thm24-intro,
    .thm25-intro, .thm26-intro, .thm27-intro, .thm29-intro,
    .thm21-closing, .thm22-closing, .thm23-closing, .thm24-closing,
    .thm25-closing, .thm26-closing, .thm27-closing, .thm29-closing
) :is(
    .thm21-sulur, .thm22-fern, .thm23-scrollwork, .thm24-scrollwork,
    .thm25-scrollwork, .thm26-scrollwork, .thm27-scrollwork, .thm29-scrollwork
) {
    opacity: 0.18;
}

/* These quote sections already have an in-flow motif. Removing their corner
   background prevents a second ornament from sitting behind the quotation. */
body:is(
    .theme-thm23, .theme-thm24, .theme-thm25, .theme-thm26,
    .theme-thm27, .theme-thm29
) :is(
    .thm23-quote, .thm24-quote, .thm25-quote,
    .thm26-quote, .thm27-quote, .thm29-quote
) {
    background-image: none;
}

@media (max-width: 1100px) {
    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm29
    ) {
        --theme-edge-ornament-size: clamp(130px, 18vw, 170px);
        --theme-edge-ornament-inset: clamp(-125px, -13vw, -96px);
        --theme-edge-ornament-bottom: -32px;
    }
}

@media (max-width: 760px) {
    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm29
    ) {
        --theme-edge-ornament-size: 112px;
        --theme-edge-ornament-inset: -88px;
        --theme-edge-ornament-bottom: -24px;
    }

    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm29
    ) :is(
        .thm21-intro, .thm22-intro, .thm23-intro, .thm24-intro,
        .thm25-intro, .thm26-intro, .thm27-intro, .thm29-intro,
        .thm21-closing, .thm22-closing, .thm23-closing, .thm24-closing,
        .thm25-closing, .thm26-closing, .thm27-closing, .thm29-closing
    ) :is(
        .thm21-sulur, .thm22-fern, .thm23-scrollwork, .thm24-scrollwork,
        .thm25-scrollwork, .thm26-scrollwork, .thm27-scrollwork, .thm29-scrollwork
    ) {
        opacity: 0.14;
    }
}

@media (max-width: 359px) {
    body:is(
        .theme-thm14, .theme-thm15, .theme-thm21, .theme-thm22, .theme-thm23, .theme-thm24, .theme-thm25,
        .theme-thm26, .theme-thm27, .theme-thm29
    ) {
        --theme-edge-ornament-size: 100px;
        --theme-edge-ornament-inset: -82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where([data-theme-version="v2"], [data-theme-version="v2"] *, [data-theme-version="v2"] *::before, [data-theme-version="v2"] *::after) {
        scroll-behavior: auto !important;
        animation-delay: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Legacy themes create their mobile off-canvas menu from JavaScript. Keep the
   closed clone outside layout calculations on tablet as well as phone sizes. */
@media (max-width: 1023px) {
    body.legacy-theme-v2:not(.fh5co-offcanvas) #offcanvas-menu {
        display: none !important;
    }

    body.legacy-theme-v2.fh5co-offcanvas #offcanvas-menu {
        display: block !important;
        inset-inline-end: 0 !important;
        inline-size: min(240px, 100vw) !important;
        max-inline-size: 100vw !important;
    }
}

/* Participant sections inherit the palette and heading styles of themes 21-30. */
body[data-theme-version="v2"] .theme-participants {
    background: var(--theme-surface);
    color: var(--theme-text);
}

/* Cards wrap in centred rows, so an odd last card sits in the middle instead of leaving a hole. */
.theme-participants .theme-participants__grid {
    --theme-participants-gap: clamp(16px, 3vw, 32px);
    --theme-participants-columns: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--theme-participants-gap);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}

.theme-participants__grid > li {
    flex: 0 1 calc((100% - (var(--theme-participants-columns) - 1) * var(--theme-participants-gap)) / var(--theme-participants-columns));
    min-width: 0;
    overflow-wrap: anywhere;
}

.theme-participants__inviter {
    padding: 24px 16px;
    border-block: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent);
}

.theme-participants__vendor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 5%, var(--theme-surface));
}

body[data-theme-version="v2"] .theme-participants__name {
    max-width: 100%;
    font-family: var(--theme-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.3;
    color: inherit;
}

body[data-theme-version="v2"] .theme-participants__detail {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
}

.theme-participants__category {
    max-width: 100%;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.theme-participants__logo {
    display: grid;
    place-items: center;
    width: min(100%, 180px);
    height: 116px;
    flex-shrink: 0;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
}

.theme-participants__logo img {
    width: 100%;
    height: 96px;
    object-fit: contain;
}

body[data-theme-version="v2"] .theme-participants__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 10px 0;
    color: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (min-width: 600px) {
    .theme-participants .theme-participants__grid--inviters,
    .theme-participants .theme-participants__grid--vendors {
        --theme-participants-columns: 2;
    }
}

@media (min-width: 1024px) {
    .theme-participants .theme-participants__grid--vendors {
        --theme-participants-columns: 3;
    }
}

/* Read out by screen readers, never seen. */
.theme-v2-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Video section: one 16:9 frame per film, in the theme's palette. Until the guest presses play
   the frame shows a poster and a play button; the kernel then puts the player in its place.
   Themes restyle it through the --theme-video-* properties. */
.theme-video {
    --theme-video-gap: clamp(20px, 4vw, 36px);
    --theme-video-max: 880px;
    --theme-video-radius: 0;
    --theme-video-border: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    --theme-video-frame: color-mix(in srgb, var(--theme-text) 86%, var(--theme-accent));
    --theme-video-button: var(--theme-surface);
    --theme-video-button-text: var(--theme-text);
}

.theme-video .theme-video__list {
    display: grid;
    gap: var(--theme-video-gap);
    width: min(100%, var(--theme-video-max));
    margin-inline: auto;
}

/* Two or more films sit in pairs where the section is wide enough, an odd last one centred
   under them; a narrow column (phones, portrait companions) stacks them. The query names the
   shared stage, so a theme's own view inside another container keeps its own layout. */
.theme-video .theme-video__stage {
    container: theme-video-stage / inline-size;
}

.theme-video:not([data-video-count="1"]) .theme-video__list {
    --theme-video-max: 1100px;
}

@container theme-video-stage (min-width: 680px) {
    .theme-video:not([data-video-count="1"]) .theme-video__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .theme-video:not([data-video-count="1"]) .theme-video__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--theme-video-gap)) / 2);
    }
}

.theme-video .theme-video__item {
    min-width: 0;
    margin: 0;
}

.theme-video .theme-video__frame {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--theme-video-border);
    border-radius: var(--theme-video-radius);
    background: var(--theme-video-frame);
    isolation: isolate;
}

.theme-video .theme-video__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 45%, rgb(0 0 0 / 38%));
    pointer-events: none;
}

.theme-video .theme-video__frame[data-video-state="playing"]::after {
    display: none;
}

.theme-video .theme-video__poster,
.theme-video .theme-video__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.theme-video .theme-video__poster {
    z-index: -2;
    object-fit: cover;
}

.theme-video .theme-video__player {
    background: #000;
}

body[data-theme-version="v2"] .theme-video .theme-video__play,
body[data-theme-version="v2"] .theme-video .theme-video__frame--link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
}

body[data-theme-version="v2"] .theme-video .theme-video__frame--link {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
}

.theme-video .theme-video__play-icon {
    display: grid;
    place-items: center;
    width: clamp(60px, 11vw, 82px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-video-button) 92%, transparent);
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
    transition: transform .25s ease;
}

.theme-video .theme-video__play-icon::before {
    content: "";
    margin-left: 6px;
    border-block: 11px solid transparent;
    border-inline-start: 19px solid var(--theme-video-button-text);
}

.theme-video .theme-video__play:hover .theme-video__play-icon,
.theme-video .theme-video__play:focus-visible .theme-video__play-icon,
.theme-video .theme-video__frame--link:hover .theme-video__play-icon {
    transform: scale(1.06);
}

/* A pale poster (a white dress, a bright sky) would swallow white text with only a shadow. */
.theme-video .theme-video__play-label {
    padding: 3px 10px 3px calc(10px + .16em);
    border-radius: 999px;
    background: rgb(0 0 0 / 38%);
    text-shadow: 0 1px 10px rgb(0 0 0 / 55%);
}

body[data-theme-version="v2"] .theme-video .theme-video__caption {
    margin-top: 12px;
    font-family: var(--theme-font-display);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

[data-motion="reduce"] .theme-video .theme-video__play-icon {
    transition: none;
}

/* Kirim Kado: one card per address, centred in rows like the participant cards. */
.theme-gift-address .theme-gift-address__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 28px);
    width: min(100%, 1040px);
    margin-inline: auto;
}

.theme-gift-address .theme-gift-address__card {
    display: flex;
    flex: 0 1 min(100%, 440px);
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 6%, var(--theme-surface));
    color: var(--theme-text);
    text-align: center;
    overflow-wrap: anywhere;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__label {
    font-size: 11px;
    letter-spacing: .18em;
    opacity: .78;
    text-transform: uppercase;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__name {
    max-width: 100%;
    font-family: var(--theme-font-display);
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    line-height: 1.25;
    color: inherit;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__phone a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__address {
    max-width: 36ch;
    font-style: normal;
    line-height: 1.75;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__note {
    font-size: 14px;
    font-style: italic;
    opacity: .85;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 14px;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__copy--plain {
    padding: 10px 22px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__copy--plain:hover,
body[data-theme-version="v2"] .theme-gift-address .theme-gift-address__copy--plain:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

@media (forced-colors: active) {
    :where([data-theme-version="v2"] :focus-visible) {
        outline-color: Highlight;
    }
}

/* Copy confirmation that stays on screen whatever the theme does with its
   status region. Text and surface tokens give contrast on light and dark themes. */
.theme-v2-toast {
    position: fixed;
    z-index: 2147483000;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    max-width: min(92vw, 26rem);
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: var(--theme-text, #20231f);
    box-shadow: var(--theme-shadow-lg, 0 1.5rem 4rem rgba(25, 29, 24, 0.16));
    color: var(--theme-surface, #fffdf8);
    font: 600 0.95rem/1.35 var(--theme-font-body, system-ui, sans-serif);
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    text-transform: none;
    transform: translate(-50%, 12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.theme-v2-toast[data-visible="true"] {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .theme-v2-toast {
        transition: none;
    }
}

/* After the start time the digits give way to a single message. */
[data-theme-countdown][data-countdown-state="elapsed"] > :not([data-countdown-elapsed]) {
    display: none !important;
}

.theme-v2-countdown-elapsed {
    flex: 1 1 100%;
    grid-column: 1 / -1;
    margin: 0;
    color: inherit;
    font-family: var(--theme-font-display, Georgia, serif);
    font-size: clamp(1.1rem, 4.2vw, 1.45rem);
    font-style: italic;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
}

/* Floating controls share one dock: same size and shape, stacked on the
   right, shown only after opening. The kernel hides the dock while the guest
   scrolls down and switches it to the light variant over dark sections.
   Themes colour it through the --theme-dock-* tokens. */
.theme-v2-dock {
    --dock-bg: var(--theme-dock-bg, color-mix(in srgb, var(--theme-text, #20231f) 90%, transparent));
    --dock-fg: var(--theme-dock-fg, var(--theme-surface, #fffdf8));
    --dock-border: var(--theme-dock-border, color-mix(in srgb, var(--theme-surface, #fffdf8) 24%, transparent));
    position: fixed;
    z-index: var(--theme-dock-layer, 60);
    right: max(var(--theme-dock-inset, 14px), env(safe-area-inset-right, 0px));
    bottom: max(var(--theme-dock-inset, 14px), env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}

body[data-theme-version="v2"] .theme-v2-dock[data-dock-tone="dark"] {
    --dock-bg: var(--theme-dock-bg-on-dark, color-mix(in srgb, var(--theme-surface, #fffdf8) 94%, transparent));
    --dock-fg: var(--theme-dock-fg-on-dark, var(--theme-text, #20231f));
    --dock-border: var(--theme-dock-border-on-dark, color-mix(in srgb, var(--theme-text, #20231f) 16%, transparent));
}

:where([data-theme-version="v2"]):not([data-theme-state="open"]) .theme-v2-dock,
.theme-v2-dock[data-dock-hidden="true"] {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

body[data-theme-version="v2"] .theme-v2-dock > [data-theme-floating] {
    position: relative;
    inset: auto;
    display: grid;
    width: 44px;
    min-width: 0;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid var(--dock-border);
    border-radius: 50%;
    background: var(--dock-bg);
    box-shadow: 0 6px 18px rgb(0 0 0 / 16%);
    color: var(--dock-fg);
    font: 400 18px/1 var(--theme-font-body, system-ui, sans-serif);
    letter-spacing: normal;
    opacity: 1;
    pointer-events: auto;
    text-decoration: none;
    transform: none;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* A hidden dock must not catch taps or focus: its controls inherit visibility. */
body[data-theme-version="v2"] .theme-v2-dock[data-dock-hidden="true"] > [data-theme-floating],
body[data-theme-version="v2"]:not([data-theme-state="open"]) .theme-v2-dock > [data-theme-floating] {
    pointer-events: none;
}

body[data-theme-version="v2"] .theme-v2-dock > [data-theme-floating] > :is(span, i, svg) {
    animation: none;
}

body[data-theme-version="v2"] .theme-v2-dock > [data-theme-floating="top"]:not([data-floating-visible="true"]) {
    display: none;
}

/* Music shows its state: a slash while paused or muted. */
body[data-theme-version="v2"] .theme-v2-dock > [data-theme-audio-toggle]::after {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 0 0 2px var(--dock-bg);
    content: "";
    transform: rotate(-45deg);
    transition: opacity 160ms ease, transform 160ms ease;
}

body[data-theme-version="v2"] .theme-v2-dock > [data-theme-audio-toggle][aria-pressed="true"]::after {
    opacity: 0;
    transform: rotate(-45deg) scaleX(0.2);
}

body[data-theme-version="v2"] .theme-v2-dock > [data-theme-floating]:focus-visible {
    outline: 3px solid var(--theme-focus, #1f6feb);
    outline-offset: 3px;
}

/* The toast sits above the dock. */
.theme-v2-toast {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .theme-v2-dock,
    :where([data-theme-version="v2"]):not([data-theme-state="open"]) .theme-v2-dock,
    .theme-v2-dock[data-dock-hidden="true"] {
        transform: none;
        transition: opacity 1ms linear, visibility 0s;
    }
}

@media (forced-colors: active) {
    body[data-theme-version="v2"] .theme-v2-dock > [data-theme-floating] {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
}

/* Dates, times and amounts read best with lining figures; countdowns and
   account numbers also keep their columns steady. */
:where([data-theme-version="v2"]) {
    font-variant-numeric: lining-nums;
}

/* Theme rules often use the font shorthand, which resets numeric variants, so
   dates, countdown digits and account numbers state theirs explicitly. */
[data-theme-version="v2"] :is(time, time *, [data-theme-countdown], [data-theme-countdown] *, [data-theme-account-number]) {
    font-variant-numeric: lining-nums tabular-nums !important;
}

/* Copy buttons carry a copy icon until the kernel confirms the copy. */
[data-copy-value] > svg {
    flex: none;
    vertical-align: -0.15em;
}

/* One map control per event: the button opens the venue map in place, with a
   link to the maps app beneath it. The theme's own button class styles it. */
.theme-v2-map {
    min-width: 0;
    max-width: 100%;
}

/* Sized to its label, but free to wrap when text is enlarged. */
.theme-v2-map > summary {
    cursor: pointer;
    list-style: none;
    width: fit-content;
    max-width: 100%;
}

.theme-v2-map > summary::-webkit-details-marker {
    display: none;
}

.theme-v2-map > summary::marker {
    content: "";
}

.theme-v2-map__chevron {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-inline-start: 0.15em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.18em) rotate(45deg);
    transition: transform 0.2s ease;
}

.theme-v2-map[open] .theme-v2-map__chevron {
    transform: translateY(0.08em) rotate(225deg);
}

/* Open, the map takes the whole row of actions it sits in. */
.theme-v2-map[open] {
    flex: 1 1 100%;
    grid-column: 1 / -1;
}

.theme-v2-map__panel {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.85rem;
}

.theme-v2-map__panel iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 22rem;
    border: 0;
}

.theme-v2-map__open {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.35em;
    justify-self: start;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
    .theme-v2-map__chevron {
        transition: none;
    }
}

/* Gallery rows: App\Support\GalleryRows splits the photos into full rows and
   tells each photo the size of its row when rows hold at most two, three or
   four photos (data-gallery-r2, -r3, -r4). The gallery's own width picks the
   row width, so a companion column and a full desktop page both stay free of
   holes. A row with fewer photos keeps the row height with wider tiles, up to
   half again as wide. Sizes are in px because some themes shrink the root
   font size. Themes tune it with --theme-gallery-gap, -ar (tile
   width / height), -ar-wide (the wide photo that opens an odd set on phones),
   -single and -pair (caps for one or two photos), and -focus. */
.theme-v2-gallery {
    container: theme-gallery / inline-size;
}

.theme-v2-gallery .theme-v2-gallery__grid {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--theme-gallery-gap, 12px);
    align-items: start;
}

.theme-v2-gallery .theme-v2-gallery__item {
    grid-column: span 6;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: var(--theme-gallery-ar, 0.8);
}

.theme-v2-gallery .theme-v2-gallery__item[data-gallery-r2="1"] {
    grid-column: span 12;
    aspect-ratio: var(--theme-gallery-ar-wide, 1.25);
}

.theme-v2-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.theme-v2-gallery__item) img {
    object-position: var(--theme-gallery-focus, 50% 40%);
}

/* One or two photos stay a comfortable size instead of filling a desktop. */
.theme-v2-gallery[data-gallery-count="1"] .theme-v2-gallery__grid {
    max-width: min(100%, var(--theme-gallery-single, 480px));
    margin-inline: auto;
}

.theme-v2-gallery[data-gallery-count="1"] .theme-v2-gallery__item {
    aspect-ratio: var(--theme-gallery-ar, 0.8);
}

.theme-v2-gallery[data-gallery-count="2"] .theme-v2-gallery__grid,
.theme-v2-gallery[data-gallery-max="2"] .theme-v2-gallery__grid {
    max-width: min(100%, var(--theme-gallery-pair, 736px));
    margin-inline: auto;
}

@container theme-gallery (min-width: 544px) {
    .theme-v2-gallery:not([data-gallery-max="2"]) .theme-v2-gallery__item[data-gallery-r3="3"] {
        grid-column: span 4;
        aspect-ratio: var(--theme-gallery-ar, 0.8);
    }

    .theme-v2-gallery:not([data-gallery-max="2"]) .theme-v2-gallery__item[data-gallery-r3="2"] {
        grid-column: span 6;
        aspect-ratio: calc(var(--theme-gallery-ar, 0.8) * 1.5);
    }

    .theme-v2-gallery:not([data-gallery-max="2"]) .theme-v2-gallery__item[data-gallery-r3="1"] {
        grid-column: span 12;
    }

    /* A single row keeps the gallery's tile shape. */
    .theme-v2-gallery:not([data-gallery-max="2"]):is([data-gallery-count="2"], [data-gallery-count="3"]) .theme-v2-gallery__item {
        aspect-ratio: var(--theme-gallery-ar, 0.8);
    }
}

@container theme-gallery (min-width: 896px) {
    .theme-v2-gallery[data-gallery-max="4"] .theme-v2-gallery__item[data-gallery-r4="4"] {
        grid-column: span 3;
        aspect-ratio: var(--theme-gallery-ar, 0.8);
    }

    .theme-v2-gallery[data-gallery-max="4"] .theme-v2-gallery__item[data-gallery-r4="3"] {
        grid-column: span 4;
        aspect-ratio: calc(var(--theme-gallery-ar, 0.8) * 4 / 3);
    }

    .theme-v2-gallery[data-gallery-max="4"] .theme-v2-gallery__item[data-gallery-r4="2"] {
        grid-column: span 6;
        aspect-ratio: calc(var(--theme-gallery-ar, 0.8) * 1.5);
    }

    .theme-v2-gallery[data-gallery-max="4"] .theme-v2-gallery__item[data-gallery-r4="1"] {
        grid-column: span 12;
    }

    .theme-v2-gallery[data-gallery-max="4"]:is([data-gallery-count="2"], [data-gallery-count="3"], [data-gallery-count="4"]) .theme-v2-gallery__item {
        aspect-ratio: var(--theme-gallery-ar, 0.8);
    }

    .theme-v2-gallery[data-gallery-max="3"] .theme-v2-gallery__grid {
        max-width: min(100%, var(--theme-gallery-trio, 1056px));
        margin-inline: auto;
    }
}