/*
 * THM01 — Classic romantic stationery
 * Native Theme System v2 implementation. The invitation is fully laid out
 * behind the opening cover so the first transition never exposes raw markup.
 */

:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body.theme-thm01 {
    --theme-surface: #fffaf6;
    --theme-surface-muted: #f3e6e4;
    --theme-text: #34242a;
    --theme-text-muted: #5a474d;
    --theme-accent: #955268;
    --theme-accent-deep: #6d3548;
    --theme-accent-soft: #ead3d8;
    --theme-accent-contrast: #fffaf6;
    --theme-gold: #b99a6c;
    --theme-line: rgba(88, 52, 63, 0.18);
    --theme-focus: #713047;
    /* The couple's own fonts (custom font add-on) take over when set; see x-theme-custom-fonts.
       The script face of the names follows the heading font. */
    --theme-font-display: var(--invie-font-heading, "Cormorant Garamond"), Georgia, serif;
    --theme-font-body: var(--invie-font-body, "Manrope"), "Segoe UI", sans-serif;
    --theme-font-script: var(--invie-font-heading, "Pinyon Script"), "Great Vibes", cursive;
    --theme-photo-radius: 0;
    --theme-photo-shadow: 0 1.4rem 3.6rem rgba(72, 37, 49, 0.16);
    --thm01-page-width: 1240px;
    --thm01-pad: clamp(1.25rem, 4.5vw, 5.5rem);
    min-width: 0;
    min-height: 100%;
    margin: 0;
    background: var(--theme-surface);
    color: var(--theme-text);
    font-family: var(--theme-font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

body.theme-thm01:not([data-theme-state="open"]) {
    overflow: hidden;
}

/* Keep the reset below component spacing rules in the cascade. */
:where(body.theme-thm01) :where(h1, h2, h3, p, figure, blockquote, dl, dd) {
    margin: 0;
}

body.theme-thm01 h1,
body.theme-thm01 h2,
body.theme-thm01 h3 {
    color: inherit;
    font-family: var(--theme-font-display);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
    text-wrap: balance;
}

body.theme-thm01 a {
    color: inherit;
    text-decoration: none;
}

body.theme-thm01 address {
    font-style: normal;
}

body.theme-thm01 button,
body.theme-thm01 input,
body.theme-thm01 select,
body.theme-thm01 textarea {
    border-radius: 0;
}

.thm01-page,
.thm01-invitation {
    min-width: 0;
    width: 100%;
}

.thm01-invitation {
    background: var(--theme-surface);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 320ms ease,
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 720ms;
    visibility: hidden;
}

body.theme-thm01[data-theme-state="open"] .thm01-invitation {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
    visibility: visible;
}

.thm01-eyebrow {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-body);
    font-size: clamp(0.75rem, 0.71rem + 0.14vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.thm01-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 1px solid currentColor;
    cursor: pointer;
    display: inline-flex;
    gap: 0.75rem;
    justify-content: center;
    min-height: 48px;
    padding: 0.78rem 1.35rem;
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    line-height: 1.25;
    text-transform: uppercase;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.thm01-button:hover {
    transform: translateY(-2px);
}

.thm01-button--primary {
    background: var(--theme-accent-deep);
    border-color: var(--theme-accent-deep);
    color: var(--theme-accent-contrast);
}

body.theme-thm01 a.thm01-button--primary {
    color: var(--theme-accent-contrast);
}

.thm01-button--primary:hover {
    background: #522637;
    border-color: #522637;
}

.thm01-button--outline {
    color: var(--theme-accent-deep);
}

.thm01-text-link {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    color: var(--theme-accent-deep);
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.35rem 0;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Opening stationery ----------------------------------------------------- */

.thm01-cover {
    align-items: center;
    display: grid;
    inset: 0;
    isolation: isolate;
    justify-items: center;
    min-height: 100svh;
    overflow: hidden;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    position: fixed;
    z-index: 1000;
    transition:
        transform 920ms cubic-bezier(0.76, 0, 0.24, 1),
        visibility 0s linear 940ms;
}

.thm01-cover__photo,
.thm01-cover__veil {
    inset: 0;
    position: absolute;
}

.thm01-cover__photo {
    background-image: var(--thm01-cover-image);
    background-position: center 38%;
    background-size: cover;
    filter: saturate(0.78) contrast(0.96);
    transform: scale(1.025);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -2;
}

.thm01-cover__veil {
    background:
        linear-gradient(90deg, rgba(31, 19, 23, 0.28), rgba(31, 19, 23, 0.05) 44%, rgba(31, 19, 23, 0.2)),
        linear-gradient(180deg, rgba(25, 13, 18, 0.12), transparent 35%, rgba(25, 13, 18, 0.28));
    z-index: -1;
}

.thm01-cover__stationery {
    align-items: center;
    background:
        linear-gradient(rgba(255, 251, 247, 0.94), rgba(255, 251, 247, 0.94)),
        radial-gradient(circle at 15% 10%, rgba(149, 82, 104, 0.12), transparent 35%);
    box-shadow: 0 2rem 6rem rgba(40, 20, 27, 0.28);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(76svh, 680px);
    padding: clamp(2.2rem, 6vh, 4.6rem) clamp(1.6rem, 4vw, 4rem);
    position: relative;
    text-align: center;
    width: min(92vw, 540px);
}

.thm01-cover__stationery::before,
.thm01-cover__stationery::after {
    border: 1px solid rgba(149, 82, 104, 0.34);
    content: "";
    inset: 12px;
    pointer-events: none;
    position: absolute;
}

.thm01-cover__stationery::after {
    border-color: rgba(185, 154, 108, 0.42);
    inset: 17px;
}

.thm01-cover__corner {
    height: 52px;
    pointer-events: none;
    position: absolute;
    width: 52px;
    z-index: 1;
}

.thm01-cover__corner::before,
.thm01-cover__corner::after {
    background: var(--theme-gold);
    content: "";
    left: 50%;
    opacity: 0.58;
    position: absolute;
    top: 50%;
    transform-origin: left center;
}

.thm01-cover__corner::before {
    height: 1px;
    transform: rotate(35deg);
    width: 38px;
}

.thm01-cover__corner::after {
    height: 1px;
    transform: rotate(145deg);
    width: 38px;
}

.thm01-cover__corner--top {
    left: 50%;
    top: 23px;
    transform: translateX(-50%);
}

.thm01-cover__corner--bottom {
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}

.thm01-monogram {
    align-items: center;
    border: 1px solid var(--theme-gold);
    border-radius: 50%;
    color: var(--theme-accent-deep);
    display: flex;
    font-family: var(--theme-font-display);
    font-size: 1.2rem;
    height: 56px;
    justify-content: center;
    letter-spacing: 0.08em;
    margin-bottom: 1.4rem;
    width: 56px;
}

.thm01-cover h1 {
    color: var(--theme-accent-deep);
    font-size: clamp(3.1rem, 7vw, 5.8rem);
    line-height: 0.82;
    margin: 1rem 0 0.9rem;
    max-width: 11ch;
}

.thm01-cover__date {
    color: var(--theme-text-muted);
    font-family: var(--theme-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.thm01-cover__guest {
    border-bottom: 1px solid var(--theme-line);
    border-top: 1px solid var(--theme-line);
    display: grid;
    gap: 0.15rem;
    margin: clamp(1.5rem, 4vh, 2.5rem) 0 1.35rem;
    padding: 0.9rem 1rem;
    width: min(100%, 340px);
}

.thm01-cover__guest span {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.thm01-cover__guest strong {
    font-family: var(--theme-font-display);
    font-size: 1.28rem;
    font-weight: 600;
}

.thm01-cover__guest small {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

body.theme-thm01[data-theme-state="open"] .thm01-cover {
    pointer-events: none;
    transform: translateY(-102%);
    visibility: hidden;
}

body.theme-thm01[data-theme-state="open"] .thm01-cover__photo {
    transform: scale(1.08);
}

/* Intro ------------------------------------------------------------------ */

.thm01-intro {
    background: #f5e9e8;
    min-height: 100svh;
    overflow: hidden;
}

.thm01-nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 1.25rem var(--thm01-pad);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}

.thm01-nav::after {
    background: linear-gradient(180deg, rgba(30, 17, 21, 0.32), transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.thm01-nav__brand {
    color: #fff;
    font-family: var(--theme-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.thm01-nav__brand span {
    color: #eed4db;
    font-family: var(--theme-font-script);
    font-size: 1.25em;
    margin: 0 0.18em;
}

.thm01-nav__links {
    display: flex;
    gap: clamp(1rem, 2vw, 2.2rem);
}

.thm01-nav__links a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    min-height: 44px;
    padding: 0.75rem 0;
    text-transform: uppercase;
}

.thm01-intro__spread {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
    min-height: 100svh;
}

.thm01-intro__photo {
    min-height: 100svh;
    overflow: hidden;
}

.thm01-intro__photo img {
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center 34%;
    width: 100%;
}

.thm01-intro__paper {
    align-items: center;
    align-self: stretch;
    background:
        radial-gradient(circle at 90% 10%, rgba(149, 82, 104, 0.09), transparent 32%),
        #fffaf6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(6rem, 10vh, 9rem) clamp(2.4rem, 6vw, 7rem) 4rem;
    position: relative;
    text-align: center;
}

.thm01-intro__paper::before {
    border: 1px solid rgba(149, 82, 104, 0.22);
    content: "";
    inset: clamp(1.2rem, 2.4vw, 2.5rem);
    pointer-events: none;
    position: absolute;
}

.thm01-intro h2 {
    color: var(--theme-accent-deep);
    font-size: clamp(4rem, 7vw, 7.8rem);
    margin: 1rem 0 1.3rem;
    max-width: 8ch;
}

.thm01-intro__date {
    font-family: var(--theme-font-display);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.thm01-intro__venue {
    color: var(--theme-text-muted);
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    max-width: 36ch;
}

.thm01-countdown {
    border-bottom: 1px solid var(--theme-line);
    border-top: 1px solid var(--theme-line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: clamp(1.5rem, 4vh, 2.7rem) 0 1.1rem;
    padding: 0.9rem 0;
    width: min(100%, 430px);
}

.thm01-countdown div {
    display: grid;
    gap: 0.1rem;
    position: relative;
}

.thm01-countdown div + div::before {
    background: var(--theme-line);
    content: "";
    height: 28px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}

.thm01-countdown strong {
    font-family: var(--theme-font-display);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1;
}

.thm01-countdown span {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Shared section composition ------------------------------------------- */

.thm01-section {
    padding: clamp(5.5rem, 10vw, 9rem) var(--thm01-pad);
}

.thm01-section-heading {
    margin: 0 auto clamp(2.8rem, 6vw, 5rem);
    max-width: 720px;
    text-align: center;
}

.thm01-section-heading--left {
    margin-left: 0;
    text-align: left;
}

.thm01-section-heading h2 {
    color: var(--theme-accent-deep);
    font-size: clamp(2.9rem, 6vw, 6rem);
    margin: 0.6rem 0 1.15rem;
}

.thm01-section-heading > p:last-child {
    color: var(--theme-text-muted);
    font-size: clamp(0.9375rem, 1vw, 1.0625rem);
    line-height: 1.85;
    margin-inline: auto;
    max-width: 62ch;
}

.thm01-section-heading--left > p:last-child {
    margin-left: 0;
}

/* Couple ----------------------------------------------------------------- */

.thm01-couple {
    background:
        linear-gradient(90deg, transparent 49.93%, rgba(149, 82, 104, 0.08) 50%, transparent 50.07%),
        var(--theme-surface);
}

.thm01-couple__grid {
    display: grid;
    gap: clamp(2.5rem, 7vw, 8rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: var(--thm01-page-width);
    position: relative;
}

.thm01-person {
    align-items: start;
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.5rem);
    grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr);
    min-width: 0;
}

.thm01-person__portrait {
    aspect-ratio: 3 / 4.2;
    background: var(--theme-surface-muted);
    overflow: hidden;
    position: relative;
}

.thm01-person__portrait::after {
    border: 1px solid rgba(255, 255, 255, 0.7);
    content: "";
    inset: 12px;
    pointer-events: none;
    position: absolute;
}

.thm01-person__portrait img,
.thm01-person__fallback {
    height: 100%;
    width: 100%;
}

.thm01-person__portrait img {
    object-fit: cover;
}

.thm01-person__fallback {
    align-items: center;
    background: linear-gradient(145deg, #ead7d9, #f9efeb);
    color: var(--theme-accent-deep);
    display: flex;
    font-family: var(--theme-font-display);
    font-size: clamp(4rem, 9vw, 8rem);
    justify-content: center;
}

.thm01-person__copy {
    align-self: start;
    padding-bottom: 1rem;
    padding-top: clamp(2.5rem, 5vw, 5.5rem);
}

.thm01-person__role {
    color: var(--theme-accent-deep);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.thm01-person h3 {
    color: var(--theme-accent-deep);
    font-size: clamp(2.2rem, 3.6vw, 3.8rem);
    hyphens: none;
    line-height: 0.98;
    margin: 0.65rem 0 1rem;
    overflow-wrap: anywhere;
    word-break: normal;
}

.thm01-person--name-medium h3 {
    font-size: clamp(2rem, 3.1vw, 3.35rem);
}

.thm01-person--name-long h3 {
    font-size: clamp(1.72rem, 2.55vw, 2.8rem);
    line-height: 1.02;
}

.thm01-person--name-xlong h3 {
    font-size: clamp(1.5rem, 2.2vw, 2.4rem);
    letter-spacing: -0.025em;
    line-height: 1.04;
}

.thm01-person__parents {
    color: var(--theme-text-muted);
    font-size: clamp(0.76rem, 0.9vw, 0.88rem);
    line-height: 1.8;
}

.thm01-person .thm01-text-link {
    margin-top: 1rem;
}

.thm01-couple__ampersand {
    color: rgba(149, 82, 104, 0.13);
    font-family: var(--theme-font-script);
    font-size: clamp(8rem, 18vw, 16rem);
    left: 50%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Events ----------------------------------------------------------------- */

.thm01-events {
    /* A screen tall; short content (one or two events on a tablet) sits in its middle instead
       of leaving an empty band of backdrop below the cards. */
    align-content: center;
    background: #2f2227;
    color: #fffaf6;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    /* Clip without becoming a scroll container, so the backdrop photograph can stay in view. */
    overflow: clip;
    padding-bottom: clamp(6rem, 11vw, 10rem);
    padding-top: clamp(6rem, 11vw, 10rem);
}

.thm01-events__backdrop {
    inset: 0;
    position: absolute;
    z-index: -2;
}

.thm01-events__backdrop::after {
    background:
        linear-gradient(90deg, rgba(35, 21, 27, 0.92), rgba(35, 21, 27, 0.66) 52%, rgba(35, 21, 27, 0.78)),
        linear-gradient(180deg, rgba(35, 21, 27, 0.15), rgba(35, 21, 27, 0.7));
    content: "";
    inset: 0;
    position: absolute;
}

/* The photograph keeps one screen's height and travels with the reader, so five or six cards
   stacked on a phone never stretch it into a blurred sliver. */
.thm01-events__backdrop img {
    filter: saturate(0.66);
    height: 100vh;
    height: 100svh;
    object-fit: cover;
    position: sticky;
    top: 0;
    width: 100%;
}

.thm01-events__content {
    margin: 0 auto;
    max-width: var(--thm01-page-width);
    width: 100%;
}

.thm01-section-heading--light h2,
.thm01-section-heading--light > p:last-child {
    color: #fffaf6;
}

.thm01-section-heading--light .thm01-eyebrow {
    color: #e2bcc6;
}

/* Rows follow the number of events: one card is centred at a reading width, two and four sit two
   by two, three, five and six three to a row on wide screens, and a short last row is centred. */
.thm01-events__grid {
    --thm01-event-gap: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--thm01-event-gap);
    justify-content: center;
}

.thm01-events__grid > .thm01-event-card {
    flex: 0 1 calc((100% - var(--thm01-event-gap)) / 2);
    min-width: 0;
}

.thm01-events__grid[data-event-count="1"] > .thm01-event-card {
    flex-basis: min(100%, 720px);
}

@media (min-width: 1101px) {
    .thm01-events__grid:is([data-event-count="3"], [data-event-count="5"], [data-event-count="6"]) > .thm01-event-card {
        flex-basis: calc((100% - 2 * var(--thm01-event-gap)) / 3);
    }

    .thm01-events__grid:is([data-event-count="3"], [data-event-count="5"], [data-event-count="6"]) .thm01-event-card h3 {
        font-size: clamp(2rem, 2.9vw, 2.65rem);
    }
}

.thm01-event-card {
    align-content: start;
    background: rgba(255, 250, 246, 0.96);
    color: var(--theme-text);
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    position: relative;
}

.thm01-event-card::after {
    border: 1px solid rgba(149, 82, 104, 0.24);
    content: "";
    inset: 8px;
    pointer-events: none;
    position: absolute;
}

.thm01-event-card__date {
    border-right: 1px solid var(--theme-line);
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
    text-align: center;
}

.thm01-event-card__date strong {
    /* A two-digit day never breaks across lines in the narrow phone column. */
    overflow-wrap: normal;
    white-space: nowrap;
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 0.85;
}

.thm01-event-card__date span {
    color: var(--theme-accent);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.18em;
    margin-top: 0.6rem;
}

.thm01-event-card__copy {
    min-width: 0;
    padding-left: 1.25rem;
}

.thm01-event-card__weekday {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.thm01-event-card h3 {
    color: var(--theme-accent-deep);
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin: 0.35rem 0 0.7rem;
}

.thm01-event-card__time,
.thm01-event-card__venue {
    font-family: var(--theme-font-display);
    font-size: 1.02rem;
    font-weight: 600;
}

.thm01-event-card address {
    color: var(--theme-text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
    margin-top: 0.45rem;
}

.thm01-event-card__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    margin-top: 1.4rem;
}

.thm01-event-card__actions .thm01-button {
    min-height: 44px;
    padding: 0.65rem 0.9rem;
}

.thm01-map .theme-v2-map__panel iframe {
    border: 1px solid var(--theme-line);
}

.thm01-map .theme-v2-map__open {
    color: var(--theme-accent-deep);
    font-size: 0.85rem;
}

/* Dress palette ---------------------------------------------------------- */

.thm01-dresscode {
    background: #fffaf6;
    padding: clamp(4.5rem, 9vw, 8rem) var(--thm01-pad);
}

.thm01-dresscode__paper {
    align-items: center;
    border: 1px solid rgba(149, 82, 104, 0.22);
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
    margin: 0 auto;
    max-width: 1040px;
    padding: clamp(2.4rem, 5vw, 5rem);
    position: relative;
}

.thm01-dresscode__paper::before {
    border: 1px solid rgba(185, 154, 108, 0.28);
    content: "";
    inset: 8px;
    pointer-events: none;
    position: absolute;
}

.thm01-dresscode h2 {
    color: var(--theme-accent-deep);
    font-size: clamp(2.8rem, 5vw, 5rem);
    margin-top: 0.5rem;
}

.thm01-dresscode__paper > p:not(.thm01-eyebrow) {
    color: var(--theme-text-muted);
    grid-column: 2;
    grid-row: 1 / span 2;
    line-height: 1.85;
    padding-left: clamp(2rem, 5vw, 5rem);
}

.thm01-dresscode__colors {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    grid-column: 1 / -1;
    justify-content: center;
    list-style: none;
    margin: clamp(2rem, 4vw, 3.5rem) 0 1.2rem;
    padding: 0;
    position: relative;
    z-index: 1;
}

.thm01-dresscode__colors li {
    align-items: center;
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.thm01-dresscode__colors span {
    background: var(--thm01-dress-color);
    border: 5px solid #fffaf6;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(109, 53, 72, 0.16);
    height: clamp(46px, 6vw, 68px);
    width: clamp(46px, 6vw, 68px);
}

.thm01-dresscode__colors small {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.thm01-dresscode__note {
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    grid-column: 1 / -1;
    text-align: center;
}

/* Livestream and quote --------------------------------------------------- */

.thm01-livestream {
    align-items: center;
    background: #f1dfdf;
    display: grid;
    gap: clamp(2rem, 6vw, 7rem);
    grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.3fr);
    margin: clamp(2rem, 5vw, 5rem) auto;
    max-width: min(calc(100% - (var(--thm01-pad) * 2)), 1040px);
    overflow: hidden;
}

.thm01-livestream::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.thm01-livestream__seal {
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(109, 53, 72, 0.35);
    border-radius: 50%;
    color: var(--theme-accent-deep);
    display: flex;
    font-family: var(--theme-font-display);
    font-size: clamp(2rem, 5vw, 4.5rem);
    justify-content: center;
    letter-spacing: 0.08em;
    margin: auto;
    max-width: 240px;
    position: relative;
    width: 100%;
}

.thm01-livestream__seal::after {
    border: 1px solid rgba(109, 53, 72, 0.2);
    border-radius: 50%;
    content: "";
    inset: 9px;
    position: absolute;
}

.thm01-livestream__copy {
    max-width: 640px;
    position: relative;
}

.thm01-livestream h2 {
    color: var(--theme-accent-deep);
    font-size: clamp(2.8rem, 5.5vw, 5.4rem);
    margin: 0.65rem 0 1rem;
}

.thm01-livestream__copy > p:not(.thm01-eyebrow) {
    color: var(--theme-text-muted);
    max-width: 55ch;
}

.thm01-livestream__credentials {
    display: flex;
    gap: 2rem;
    margin: 1.2rem 0;
}

.thm01-livestream__credentials div {
    display: grid;
}

.thm01-livestream__credentials dt {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.thm01-livestream__credentials dd {
    font-family: var(--theme-font-display);
    font-size: 1.2rem;
    font-weight: 600;
}

.thm01-livestream .thm01-button {
    margin-top: 1.3rem;
}

.thm01-quote {
    background: #fffaf6;
    padding: clamp(4.5rem, 9vw, 8rem) var(--thm01-pad);
    text-align: center;
}

body.theme-thm01 .thm01-quote blockquote {
    margin: 0 auto;
    max-width: 32ch;
    position: relative;
}

.thm01-quote blockquote::before {
    color: rgba(149, 82, 104, 0.22);
    content: "“";
    display: block;
    font-family: var(--theme-font-display);
    font-size: clamp(4.5rem, 8vw, 7rem);
    height: 0.5em;
    line-height: 1;
}

.thm01-quote blockquote p {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    line-height: 1.25;
    position: relative;
    text-wrap: balance;
}

.thm01-quote cite {
    color: var(--theme-text-muted);
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.16em;
    margin-top: 2rem;
    text-transform: uppercase;
}

/* The 32ch above is measured in the body font and only suits phones. From
   tablets up the verse sets its own measure in the display font, so it reads
   in four or five lines instead of a narrow column. */
@media (min-width: 721px) {
    body.theme-thm01 .thm01-quote blockquote {
        max-width: min(100%, 60rem);
    }

    .thm01-quote blockquote p {
        margin-inline: auto;
        max-width: 34ch;
    }
}

.thm01-quote__ornament {
    background: var(--theme-gold);
    height: 46px;
    margin: 0 auto 2.5rem;
    opacity: 0.75;
    width: 1px;
}

/* Story ------------------------------------------------------------------ */

.thm01-story {
    background: #f4e8e6;
}

.thm01-story > * {
    margin-inline: auto;
    max-width: var(--thm01-page-width);
}

.thm01-story .thm01-section-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--thm01-page-width);
}

.thm01-story__hint {
    display: none;
}

.thm01-story__list {
    display: grid;
    gap: clamp(1.3rem, 2.5vw, 2.4rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.thm01-story-card {
    align-items: stretch;
    background: #fffaf6;
    border: 1px solid rgba(149, 82, 104, 0.14);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.thm01-story-card:first-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

/* An even number of chapters closes on a mirrored spread, so four or six chapters read
   spread, pairs, spread instead of leaving a lone half-width card. Phones keep the swipe rail. */
@media (min-width: 721px) {
    .thm01-story-card:last-child:nth-child(even) {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
    }

    .thm01-story-card:last-child:nth-child(even) .thm01-story-card__media {
        order: 2;
    }

    .thm01-story-card:last-child:nth-child(even) .thm01-story-card__media::before {
        inset: 16px 16px -16px -16px;
    }

    .thm01-story-card:last-child:nth-child(even) .thm01-story-card__copy {
        justify-self: end;
    }
}

.thm01-story-card__media {
    aspect-ratio: 4 / 2.8;
    min-height: 260px;
    overflow: visible;
    position: relative;
}

.thm01-story-card__media::before {
    border: 1px solid rgba(149, 82, 104, 0.3);
    content: "";
    inset: 16px -16px -16px 16px;
    position: absolute;
}

.thm01-story-card__media img {
    height: 100%;
    object-fit: cover;
    position: relative;
    width: 100%;
}

.thm01-story-card__media span {
    bottom: -0.35em;
    color: #fffaf6;
    font-family: var(--theme-font-display);
    font-size: clamp(5rem, 11vw, 10rem);
    left: 0.14em;
    line-height: 1;
    position: absolute;
    text-shadow: 0 0.4rem 1.5rem rgba(50, 26, 34, 0.18);
}

.thm01-story-card__copy {
    max-width: 540px;
    padding: clamp(1.5rem, 3.5vw, 3.5rem);
}

.thm01-story-card__copy time {
    color: var(--theme-accent);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.thm01-story-card h3 {
    color: var(--theme-accent-deep);
    font-size: clamp(2.7rem, 5vw, 5rem);
    margin: 0.6rem 0 1.1rem;
}

.thm01-story-card__copy p {
    color: var(--theme-text-muted);
    line-height: 1.9;
    white-space: pre-line;
}

/* Gallery ---------------------------------------------------------------- */

/* Rows come from the shared gallery layout in theme-system.css. */
.thm01-gallery {
    --theme-gallery-gap: clamp(0.55rem, 1vw, 1rem);
    background: var(--theme-surface);
}

.thm01-gallery__grid {
    margin: 0 auto;
    max-width: var(--thm01-page-width);
}

.thm01-gallery__item {
    background: var(--theme-surface-muted);
    border: 0;
    cursor: zoom-in;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.thm01-gallery__item img {
    height: 100%;
    object-fit: cover;
    transition: filter 400ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.thm01-gallery__item:hover img {
    filter: saturate(0.88);
    transform: scale(1.025);
}

.thm01-gallery-dialog {
    background: var(--theme-surface);
    border: 1px solid var(--theme-line);
    color: var(--theme-text);
    height: min(90dvh, 860px);
    margin: auto;
    max-height: 90dvh;
    max-width: none;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.75rem);
    width: min(92vw, 1080px);
}

.thm01-gallery-dialog[open] {
    display: grid;
    gap: 1rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.thm01-gallery-dialog::backdrop {
    background: color-mix(in srgb, var(--theme-accent-deep) 85%, transparent);
    backdrop-filter: blur(6px);
}

.thm01-gallery-dialog[data-gallery-fallback] {
    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--theme-accent-deep) 85%, transparent);
}

.thm01-gallery-dialog__header,
.thm01-gallery-dialog__controls {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.thm01-gallery-dialog__header {
    border-bottom: 1px solid var(--theme-line);
    padding-bottom: 0.75rem;
}

.thm01-gallery-dialog .thm01-eyebrow {
    font-size: 0.75rem;
}

.thm01-gallery-dialog__title {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
    margin-top: 0.35rem;
}

.thm01-gallery-dialog button {
    background: transparent;
    border: 1px solid var(--theme-line);
    color: var(--theme-accent-deep);
    cursor: pointer;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
}

.thm01-gallery-dialog [data-theme-gallery-close] {
    font-size: 1.7rem;
    line-height: 1;
    min-width: 44px;
}

.thm01-gallery-dialog button:is(:hover, :focus-visible) {
    background: var(--theme-accent-deep);
    color: var(--theme-surface);
}

.thm01-gallery-dialog__frame {
    border: 1px solid var(--theme-line);
    display: grid;
    gap: 0.5rem;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    padding: clamp(0.5rem, 1vw, 0.9rem);
}

.thm01-gallery-dialog__frame img {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.thm01-gallery-dialog__frame figcaption {
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    max-height: 4rem;
    overflow-y: auto;
    text-align: center;
}

.thm01-gallery-dialog__controls {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.thm01-gallery-dialog__controls button {
    font-size: inherit;
}

@media (max-width: 480px) {
    .thm01-gallery-dialog {
        height: 94dvh;
        max-height: 94dvh;
        padding: 0.8rem;
        width: calc(100vw - 1rem);
    }

    .thm01-gallery-dialog__controls {
        gap: 0.4rem;
        letter-spacing: 0;
    }

    .thm01-gallery-dialog__controls button {
        padding-inline: 0.55rem;
    }
}

/* RSVP and forms --------------------------------------------------------- */

.thm01-rsvp {
    background: #302329;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    min-height: 100svh;
}

.thm01-rsvp__photo {
    min-height: 760px;
    overflow: hidden;
}

.thm01-rsvp__photo img {
    filter: saturate(0.74) contrast(0.95);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.thm01-rsvp__card {
    align-self: center;
    background: #fffaf6;
    margin: clamp(1.2rem, 4vw, 4rem);
    padding: clamp(2.2rem, 5vw, 5.5rem);
    position: relative;
}

.thm01-rsvp__card::after {
    border: 1px solid rgba(149, 82, 104, 0.25);
    content: "";
    inset: 12px;
    pointer-events: none;
    position: absolute;
}

.thm01-rsvp .thm01-section-heading {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.thm01-form {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    z-index: 1;
}

.thm01-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.thm01-field--wide {
    grid-column: 1 / -1;
}

.thm01-field label {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.thm01-field input,
.thm01-field select,
.thm01-field textarea {
    appearance: none;
    background: rgba(244, 232, 230, 0.45);
    border: 1px solid rgba(109, 53, 72, 0.22);
    color: var(--theme-text);
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    width: 100%;
}

.thm01-field textarea {
    min-height: 116px;
    resize: vertical;
}

/* appearance: none removes the native arrow; a drawn chevron keeps selects (attendance, bank
   choice) recognisable as dropdowns rather than filled-in text. */
.thm01-field select,
.thm01-field select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d3548' stroke-width='1.4' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 0.95rem center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    padding-right: 2.6rem;
}

.thm01-field input::placeholder,
.thm01-field textarea::placeholder {
    color: #9b888e;
}

.thm01-field input:focus,
.thm01-field select:focus,
.thm01-field textarea:focus {
    background: #fff;
    border-color: var(--theme-accent);
}

/* Wishes ----------------------------------------------------------------- */

.thm01-wishes {
    background:
        linear-gradient(90deg, transparent 49.95%, rgba(149, 82, 104, 0.08) 50%, transparent 50.05%),
        #f4e8e6;
}

.thm01-wishes__featured {
    margin: 0 auto clamp(3rem, 7vw, 6rem);
    max-width: var(--thm01-page-width);
}

.thm01-wishes__track {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--theme-accent) transparent;
    scrollbar-width: thin;
}

.thm01-wishes__slide {
    display: grid;
    flex: 0 0 100%;
    gap: 1rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.thm01-wishes__controls {
    align-items: center;
    border-top: 1px solid var(--theme-line);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.thm01-wishes__controls button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--theme-line);
    color: var(--theme-accent-deep);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--theme-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.75rem;
    justify-content: center;
    letter-spacing: 0.1em;
    min-height: 44px;
    min-width: 44px;
    padding: 0.65rem 1rem;
    text-transform: uppercase;
}

.thm01-wishes__controls button:not(:disabled):is(:hover, :focus-visible) {
    background: #fffaf6;
    border-color: var(--theme-accent);
}

.thm01-wishes__controls button:disabled {
    cursor: default;
    opacity: 0.4;
}

.thm01-wishes__counter {
    color: var(--theme-accent-deep);
    font-size: 0.8rem;
    white-space: nowrap;
}

.thm01-wish-card {
    background: #fffaf6;
    border: 1px solid rgba(149, 82, 104, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    min-height: 250px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: clamp(1.5rem, 3vw, 2.4rem);
}

.thm01-wish-card blockquote {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    line-height: 1.25;
    margin: 0;
}

.thm01-wish-card figcaption {
    align-items: center;
    border-top: 1px solid var(--theme-line);
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.thm01-wish-card figcaption img,
.thm01-wish-card__initial {
    border-radius: 50%;
    flex: none;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.thm01-wish-card__initial {
    align-items: center;
    background: #f4e3e6;
    box-shadow: inset 0 0 0 1px rgba(149, 82, 104, 0.24);
    color: var(--theme-accent-deep);
    display: inline-flex;
    font-family: var(--theme-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    justify-content: center;
}

.thm01-wish-card figcaption span {
    display: grid;
}

.thm01-wish-card figcaption strong {
    font-family: var(--theme-font-display);
    font-size: 1.1rem;
}

.thm01-wish-card figcaption small {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
}

.thm01-wishes__guestbook {
    display: grid;
    gap: clamp(2rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    margin: 0 auto;
    max-width: 1080px;
}

.thm01-wishes__guestbook > .thm01-form,
.thm01-wishes__messages {
    background: #fffaf6;
    border: 1px solid rgba(149, 82, 104, 0.16);
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* The form card matches the messages card's height; its rows stay at their own size instead of
   stretching the send button. */
.thm01-wishes__guestbook > .thm01-form {
    align-content: start;
}

.thm01-form__status {
    color: var(--theme-accent-deep);
    display: none;
    font-size: 0.75rem;
    grid-column: 1 / -1;
}

.thm01-wishes__messages-title {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.thm01-wishes__messages ul {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.thm01-wishes__messages li {
    border-bottom: 1px solid var(--theme-line);
    padding: 0.9rem 0;
}

.thm01-wishes__messages .thm01-text-link {
    margin-top: 1rem;
}

/* Gift ------------------------------------------------------------------- */

.thm01-gift {
    align-items: center;
    background: #fffaf6;
    display: grid;
    gap: clamp(2rem, 7vw, 8rem);
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
    overflow: hidden;
}

.thm01-gift__photo {
    align-self: stretch;
    min-height: 680px;
    overflow: hidden;
}

.thm01-gift__photo img {
    filter: saturate(0.72);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.thm01-gift__paper {
    background: #f4e8e6;
    margin-right: var(--thm01-pad);
    padding: clamp(2.4rem, 5vw, 5rem);
    position: relative;
}

.thm01-gift__paper::after {
    border: 1px solid rgba(149, 82, 104, 0.24);
    content: "";
    inset: 12px;
    pointer-events: none;
    position: absolute;
}

.thm01-gift__seal {
    align-items: center;
    background: var(--theme-accent-deep);
    border-radius: 50%;
    box-shadow: 0 0.6rem 1.5rem rgba(75, 33, 48, 0.2);
    color: #fff;
    display: flex;
    font-family: var(--theme-font-display);
    height: 62px;
    justify-content: center;
    left: 50%;
    letter-spacing: 0.08em;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 62px;
    z-index: 2;
}

.thm01-gift .thm01-section-heading {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.thm01-gift-card {
    background: #fffaf6;
    box-shadow: 0 1rem 3rem rgba(78, 39, 52, 0.1);
    padding: clamp(1.3rem, 3vw, 2rem);
    position: relative;
    z-index: 1;
}

.thm01-gift-card__select {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.thm01-gift-card__select img {
    height: 28px;
    object-fit: contain;
    width: 52px;
}

.thm01-gift-card__account {
    border-top: 1px solid var(--theme-line);
    display: grid;
    justify-items: center;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    text-align: center;
}

.thm01-gift-card__account > span,
.thm01-gift-card__account > small {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
}

.thm01-gift-card__account strong {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-display);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0.15rem 0;
    overflow-wrap: anywhere;
}

.thm01-gift-card__account .thm01-button {
    margin-top: 1rem;
}

/* Considerate health note ------------------------------------------------ */

.thm01-health {
    background: #35262c;
    color: #fffaf6;
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 0.7fr) minmax(360px, 1.2fr);
    padding: clamp(5rem, 10vw, 9rem) var(--thm01-pad);
}

.thm01-health .thm01-eyebrow {
    color: #ddb7c1;
}

.thm01-health h2 {
    color: #fffaf6;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    margin-top: 0.65rem;
}

.thm01-health__lead {
    align-self: center;
    color: rgba(255, 250, 246, 0.74);
    font-family: var(--theme-font-display);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.35;
}

.thm01-health__list {
    align-self: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.thm01-health__list li {
    align-items: center;
    border-bottom: 1px solid rgba(255, 250, 246, 0.16);
    display: grid;
    gap: 1rem;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 66px;
    padding: 0.8rem 0;
}

.thm01-health__list span {
    color: #ddb7c1;
    font-family: var(--theme-font-display);
    font-size: 1.4rem;
}

.thm01-health__list p {
    color: rgba(255, 250, 246, 0.86);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Closing --------------------------------------------------------------- */

.thm01-closing {
    align-items: center;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.72), transparent 30%),
        #ead6d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 86svh;
    overflow: hidden;
    padding: 6rem var(--thm01-pad) 3rem;
    text-align: center;
}

.thm01-closing__rose {
    background: linear-gradient(90deg, transparent, var(--theme-gold) 22% 78%, transparent);
    border: 0;
    border-radius: 0;
    height: 1px;
    margin-bottom: 1.5rem;
    position: relative;
    transform: none;
    width: 72px;
}

.thm01-closing__rose::before {
    background: #ead6d9;
    border: 1px solid rgba(109, 53, 72, 0.32);
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
}

.thm01-closing__thanks {
    color: var(--theme-accent-deep);
    font-family: var(--theme-font-script);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1;
    margin-top: 0.8rem;
}

.thm01-closing h2 {
    color: var(--theme-accent-deep);
    font-size: clamp(3.6rem, 9vw, 8.5rem);
    margin: 0.5rem 0 1rem;
}

.thm01-closing time {
    color: var(--theme-text-muted);
    font-family: var(--theme-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.thm01-closing__rule {
    background: rgba(109, 53, 72, 0.28);
    height: 1px;
    margin: 3rem 0 1.3rem;
    width: 72px;
}

.thm01-closing small {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.thm01-closing small a {
    border-bottom: 1px solid currentColor;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
    .thm01-person {
        grid-template-columns: 1fr;
    }

    .thm01-person__portrait {
        aspect-ratio: 3 / 3.7;
    }

    .thm01-person__copy {
        padding: 1.25rem 0.5rem 0;
    }

    .thm01-rsvp {
        grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
    }

    .thm01-gift {
        grid-template-columns: minmax(0, 0.8fr) minmax(380px, 1.2fr);
    }

    /* The three health columns' minimums no longer fit: let them share the width. */
    .thm01-health {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.75fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 900px) {
    .thm01-intro__spread {
        grid-template-columns: 1fr;
    }

    .thm01-intro__photo {
        min-height: 58svh;
    }

    .thm01-intro__photo img {
        min-height: 58svh;
    }

    .thm01-intro__paper {
        margin: -3rem 1rem 1rem;
        min-height: 56svh;
        padding: 5.5rem 2rem 3.5rem;
        z-index: 2;
    }

    .thm01-nav__links {
        display: none;
    }

    .thm01-couple__grid {
        gap: 3rem;
    }

    .thm01-dresscode__paper {
        /* minmax(0, …): a long heading word shrinks (text-fit.js) instead of widening the paper. */
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .thm01-dresscode__paper > p:not(.thm01-eyebrow) {
        grid-column: 1;
        grid-row: auto;
        margin-top: 1rem;
        padding-left: 0;
    }

    .thm01-story-card {
        gap: 3rem;
    }

    .thm01-rsvp {
        grid-template-columns: minmax(0, 1fr);
    }

    .thm01-rsvp__photo {
        min-height: 58svh;
    }

    .thm01-rsvp__card {
        margin: -5rem 1rem 1rem;
        z-index: 2;
    }

    .thm01-wishes__guestbook {
        grid-template-columns: 1fr;
    }

    .thm01-gift {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        padding: 0 0 clamp(5rem, 10vw, 8rem);
    }

    .thm01-gift__photo {
        min-height: 58svh;
    }

    .thm01-gift__paper {
        margin: -4rem 1rem 0;
        padding: 4rem clamp(1.7rem, 6vw, 4rem) 3rem;
    }

    .thm01-health {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thm01-health__list {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body.theme-thm01 {
        --thm01-pad: clamp(1.15rem, 5vw, 2rem);
        font-size: 15px;
    }

    /* The photograph gets its own row above the card, so the couple stays in view. */
    .thm01-cover {
        align-items: stretch;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .thm01-cover__photo,
    .thm01-cover__veil {
        grid-area: 1 / 1;
        inset: auto;
        justify-self: stretch;
        margin: calc(-1 * max(1rem, env(safe-area-inset-top))) calc(-1 * max(1rem, env(safe-area-inset-right))) -2.5rem calc(-1 * max(1rem, env(safe-area-inset-left)));
        position: relative;
    }

    .thm01-cover {
        background: #2b1d22;
    }

    .thm01-cover__photo {
        background-position: center 45%;
        transform: none;
    }

    .thm01-cover__veil {
        background: linear-gradient(180deg, rgba(43, 29, 34, 0.08) 0, rgba(43, 29, 34, 0) 45%, #2b1d22 100%);
    }

    .thm01-cover__stationery {
        grid-row: 2;
        min-height: 0;
        padding-block: clamp(2.2rem, 5svh, 3rem) clamp(2rem, 4.5svh, 2.6rem);
    }

    .thm01-cover .thm01-monogram {
        margin-bottom: 0.9rem;
    }

    /* The compact card has no room for the peak ornaments above and below. */
    .thm01-cover__corner {
        display: none;
    }

    .thm01-wishes__guestbook {
        gap: 1.25rem;
    }

    .thm01-wishes__messages ul {
        max-height: 320px;
    }

    .thm01-field textarea {
        min-height: 96px;
    }

    .thm01-cover h1 {
        font-size: clamp(3.2rem, 15vw, 5.2rem);
    }

    .thm01-nav {
        padding-top: max(1rem, env(safe-area-inset-top));
    }

    .thm01-intro h2 {
        font-size: clamp(3.5rem, 15vw, 5.4rem);
    }

    .thm01-section-heading h2 {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
    }

    .thm01-couple {
        background: var(--theme-surface);
    }

    .thm01-couple__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .thm01-person {
        gap: 1.6rem;
        grid-template-columns: minmax(0, 1.04fr) minmax(135px, 0.96fr);
    }

    .thm01-person__copy {
        padding-top: 0.5rem;
    }

    .thm01-person:nth-child(2) {
        padding-top: 2rem;
    }

    .thm01-person:nth-child(2) .thm01-person__portrait {
        order: 2;
    }

    .thm01-person:nth-child(2) .thm01-person__copy {
        text-align: right;
    }

    .thm01-couple__ampersand {
        font-size: 10rem;
        top: 50%;
    }

    .thm01-events__grid > .thm01-event-card,
    .thm01-events__grid[data-event-count="1"] > .thm01-event-card {
        flex-basis: 100%;
    }

    .thm01-event-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .thm01-livestream {
        grid-template-columns: minmax(0, 1fr);
        margin-inline: var(--thm01-pad);
        max-width: none;
        text-align: center;
    }

    .thm01-livestream__seal {
        max-width: 150px;
    }

    .thm01-livestream__copy > p:not(.thm01-eyebrow) {
        margin-inline: auto;
    }

    .thm01-livestream__credentials {
        justify-content: center;
    }

    .thm01-story__hint {
        color: var(--theme-accent);
        display: block;
        font-size: 0.75rem;
        font-weight: 750;
        letter-spacing: 0.11em;
        margin: -2rem 0 1.2rem;
        text-transform: uppercase;
    }

    .thm01-story__list {
        display: flex;
        gap: 0.9rem;
        margin-right: calc(var(--thm01-pad) * -1);
        max-width: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 0 12vw 1rem 0;
        scroll-padding-left: 0;
        scroll-snap-type: x mandatory;
        scrollbar-color: rgba(149, 82, 104, 0.4) transparent;
        scrollbar-width: thin;
    }

    .thm01-story-card,
    .thm01-story-card:first-child {
        display: flex;
        flex: 0 0 min(82vw, 360px);
        grid-template-columns: none;
        scroll-snap-align: start;
    }

    .thm01-story-card__media {
        aspect-ratio: 4 / 4.4;
        min-height: 0;
    }

    .thm01-rsvp__card {
        padding: 3.5rem 1.5rem 2.5rem;
    }

    .thm01-closing {
        min-height: 72svh;
        /* The credit line stays above the dock (two 44px controls), which shows at the page end
           and would otherwise sit beside a credit that a long organiser name widens. */
        padding-bottom: 7.5rem;
    }
}

@media (max-width: 639px) {
    .thm01-wishes__slide {
        grid-auto-rows: auto;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .thm01-wishes__button-label {
        display: none;
    }

    .thm01-cover {
        padding: 0.7rem;
    }

    .thm01-cover__photo,
    .thm01-cover__veil {
        margin: -0.7rem -0.7rem -2.5rem;
    }

    .thm01-cover__stationery {
        padding: 2.4rem 1.5rem 2.2rem;
        width: 100%;
    }

    .thm01-cover__guest {
        margin-top: 1.4rem;
    }

    .thm01-intro__paper {
        margin-inline: 0.65rem;
        padding-inline: 1.25rem;
    }

    .thm01-intro__paper::before {
        inset: 0.7rem;
    }

    .thm01-countdown {
        width: 100%;
    }

    .thm01-person {
        gap: 1.2rem;
        grid-template-columns: minmax(0, 1.04fr) minmax(125px, 0.96fr);
    }

    .thm01-person h3 {
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }

    .thm01-person--name-medium h3 {
        font-size: clamp(1.7rem, 8vw, 2.35rem);
    }

    .thm01-person--name-long h3,
    .thm01-person--name-xlong h3 {
        font-size: clamp(1.35rem, 6.3vw, 1.85rem);
        line-height: 1.08;
    }

    .thm01-person__parents {
        font-size: 0.9375rem;
    }

    .thm01-person .thm01-text-link {
        font-size: 0.75rem;
        letter-spacing: 0.025em;
    }

    .thm01-event-card {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 1.25rem 1.1rem;
    }

    .thm01-event-card__date strong {
        font-size: 2.45rem;
    }

    .thm01-event-card__copy {
        padding-left: 0.9rem;
    }

    .thm01-event-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .thm01-event-card__actions .thm01-button {
        width: 100%;
    }

    .thm01-dresscode__paper {
        padding: 2.8rem 1.5rem;
    }

    .thm01-dresscode__colors {
        flex-wrap: wrap;
        gap: 0.75rem 0.5rem;
    }

    /* Up to four colours share one row (labels may wrap); five or six sit three to a row, so no
       colour is left alone on a row of its own. */
    .thm01-dresscode__colors li {
        align-content: start;
        flex: 1 1 0;
        max-width: 5.5rem;
        min-width: 0;
        text-align: center;
    }

    .thm01-dresscode__colors:has(> li:nth-child(5)) li {
        flex-basis: 28%;
    }

    .thm01-quote blockquote p {
        font-size: clamp(1.4rem, 6vw, 1.75rem);
    }

    .thm01-story-card__media::before {
        inset: 9px -9px -9px 9px;
    }

    .thm01-form {
        grid-template-columns: 1fr;
    }

    .thm01-field,
    .thm01-field--wide {
        grid-column: 1;
    }

    .thm01-gift__paper {
        margin-inline: 0.65rem;
    }

    .thm01-health {
        gap: 1.7rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .thm01-health__lead,
    .thm01-health__list {
        grid-column: 1;
    }

}

@media (max-width: 374px) {
    .thm01-couple__grid {
        gap: 3rem;
        max-width: 270px;
    }

    .thm01-person {
        gap: 1.3rem;
        grid-template-columns: 1fr;
        margin-inline: auto;
        width: 100%;
    }

    .thm01-person:nth-child(2) {
        padding-top: 0;
    }

    .thm01-person__portrait,
    .thm01-person:nth-child(2) .thm01-person__portrait {
        aspect-ratio: 3 / 4.2;
        justify-self: center;
        order: 0;
        width: min(100%, 240px);
    }

    .thm01-person__copy,
    .thm01-person:nth-child(2) .thm01-person__copy {
        padding: 0 0.25rem;
        text-align: center;
    }

    .thm01-person h3 {
        font-size: clamp(2.05rem, 10vw, 2.45rem);
    }

    .thm01-person--name-medium h3 {
        font-size: clamp(1.8rem, 9vw, 2.15rem);
    }

    .thm01-person--name-long h3 {
        font-size: clamp(1.55rem, 8vw, 1.85rem);
        line-height: 1.05;
    }

    .thm01-person--name-xlong h3 {
        font-size: clamp(1.35rem, 7vw, 1.65rem);
        line-height: 1.08;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thm01-invitation,.thm01-cover,.thm01-cover__photo,.thm01-gallery__item img {
        transition: none !important;
    }

}

@media (forced-colors: active) {
    .thm01-cover__stationery,
    .thm01-event-card,
    .thm01-rsvp__card,
    .thm01-gift__paper {
        border: 2px solid CanvasText;
    }
}

/* Floating controls use the shared dock (theme-system.css), coloured for this theme. */
.thm01-dock {
    --theme-dock-bg: #6d3548;
    --theme-dock-fg: #fff;
    --theme-dock-border: rgba(255, 255, 255, 0.4);
    --theme-dock-bg-on-dark: rgba(255, 250, 246, 0.94);
    --theme-dock-fg-on-dark: #6d3548;
    --theme-dock-border-on-dark: rgba(109, 53, 72, 0.22);
}

/* On phones the countdown stays clear of the floating music control. */
@media (max-width: 480px) {
    .thm01-intro .thm01-countdown {
        width: min(100%, 17.5rem);
        margin-inline: auto;
    }
}

/* Revisions after the 2026-10-14 review ------------------------------------ */

/* Story chapter numbers sit inside the photograph, never half over the paper. */
.thm01-story-card__media span {
    bottom: 0.12em;
    left: 0.22em;
    font-size: clamp(3.6rem, 9vw, 7rem);
    text-shadow: 0 0.15rem 0.9rem rgba(50, 26, 34, 0.55);
}

/* Gallery viewer: photos rest on a deep matte, so letterboxing reads as framing. */
.thm01-gallery-dialog__frame {
    background: #2e1c23;
    border-color: transparent;
}

.thm01-gallery-dialog__frame figcaption {
    color: rgba(255, 250, 246, 0.82);
}

/* Copy feedback in the theme's own colours instead of the default green toast. */
body.theme-thm01 #toast-container > .toast {
    background-color: var(--theme-accent-deep);
    border-radius: 0;
    box-shadow: 0 0.8rem 2rem rgba(50, 26, 34, 0.25);
    font-family: var(--theme-font-body);
    opacity: 1;
}

body.theme-thm01 #toast-container > .toast:hover {
    box-shadow: 0 0.8rem 2rem rgba(50, 26, 34, 0.3);
}

@media (max-width: 480px) {
    /* Countdown narrow enough to stay clear of the floating music control. */
    .thm01-intro .thm01-countdown {
        width: min(100% - 3rem, 15rem);
    }

    /* Couple: portrait above the name, so names read in one or two lines. */
    .thm01-couple__grid {
        gap: 3.5rem;
        max-width: 340px;
        row-gap: 1.75rem;
    }

    /* The ampersand takes a zero-height row between the two people, so it sits centred in the
       gap instead of over the groom's Instagram link. */
    .thm01-couple__ampersand {
        font-size: 6rem;
        grid-row: 2;
        left: auto;
        margin-block: -3rem;
        position: relative;
        text-align: center;
        top: auto;
        transform: none;
    }

    .thm01-person:nth-child(2) {
        grid-row: 3;
    }

    .thm01-person,
    .thm01-person:nth-child(2) {
        gap: 1.3rem;
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .thm01-person__portrait,
    .thm01-person:nth-child(2) .thm01-person__portrait {
        justify-self: center;
        order: 0;
        width: min(100%, 250px);
    }

    .thm01-person__copy,
    .thm01-person:nth-child(2) .thm01-person__copy {
        padding: 0 0.25rem;
        text-align: center;
    }

    .thm01-person h3 {
        font-size: clamp(2rem, 9vw, 2.5rem);
    }

    .thm01-person--name-medium h3 {
        font-size: clamp(1.8rem, 8vw, 2.2rem);
    }
}

/* Tablet: the lead story photo keeps to its column instead of covering the text beside it. */
@media (min-width: 721px) and (max-width: 1100px) {
    .thm01-story-card__media {
        min-height: 0;
    }

    .thm01-story-card:first-child .thm01-story-card__media,
    .thm01-story-card:last-child:nth-child(even) .thm01-story-card__media {
        align-self: start;
    }
}

/* Names wrap only between words: a name shrinks to its line instead (the templates estimate --thm01-name-em). */
.thm01-cover h1,
.thm01-intro h2,
.thm01-closing h2 {
    width: 100%;
    container-type: inline-size;
}

.thm01-cover h1 > span,
.thm01-intro h2 > span,
.thm01-closing h2 > span {
    display: block;
    font-size: min(1em, max(1rem, 92cqi / var(--thm01-name-em, 3)));
    overflow-wrap: break-word;
}

/* Video ------------------------------------------------------------------ */

/* The films rest on blush paper between the gallery and the reply card. Each poster carries the
   offset hairline of the story photographs; rows follow the number of films like the events. */
.thm01-video {
    --theme-video-gap: clamp(1.6rem, 3vw, 2.6rem);
    --theme-video-radius: 0;
    --theme-video-border: rgba(149, 82, 104, 0.24);
    --theme-video-frame: #3a2a30;
    --theme-video-button: #fffaf6;
    --theme-video-button-text: var(--theme-accent-deep);
    background: #f4e8e6;
}

.thm01-video.theme-video .theme-video__list {
    --theme-video-max: var(--thm01-page-width);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.thm01-video.theme-video[data-video-count="1"] .theme-video__list {
    --theme-video-max: 920px;
}

.thm01-video.theme-video[data-video-count="4"] .theme-video__list {
    --theme-video-max: 1060px;
}

.thm01-video .theme-video__item {
    flex: 0 1 calc((100% - var(--theme-video-gap)) / 2);
    isolation: isolate;
    position: relative;
}

.thm01-video[data-video-count="1"] .theme-video__item {
    flex-basis: 100%;
}

.thm01-video .theme-video__item::before {
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(149, 82, 104, 0.32);
    content: "";
    left: 16px;
    pointer-events: none;
    position: absolute;
    right: -16px;
    top: 16px;
    z-index: -1;
}

body[data-theme-version="v2"] .thm01-video .theme-video__caption {
    color: var(--theme-accent-deep);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 500;
    margin-top: 1.6rem;
}

.thm01-video .theme-video__play {
    --theme-focus: #fffaf6;
}

.thm01-video .theme-video__play:focus-visible .theme-video__play-icon {
    box-shadow: 0 0 0 4px var(--theme-accent-deep), 0 12px 32px rgba(0, 0, 0, 0.28);
}

body[data-theme-version="v2"] .thm01-video .theme-video__play,
body[data-theme-version="v2"] .thm01-video .theme-video__frame--link {
    font-weight: 750;
    letter-spacing: 0.16em;
}

@media (min-width: 1101px) {
    .thm01-video:is([data-video-count="3"], [data-video-count="5"], [data-video-count="6"]) .theme-video__item {
        flex-basis: calc((100% - 2 * var(--theme-video-gap)) / 3);
    }
}

@media (max-width: 720px) {
    .thm01-video .theme-video__item {
        flex-basis: 100%;
    }

    .thm01-video .theme-video__item::before {
        left: 10px;
        right: -10px;
        top: 10px;
    }
}

/* Kirim Kado ------------------------------------------------------------- */

/* A second sheet after the love gift: the section itself is the blush paper (its transparent
   border keeps the page colour around it), with the hairline inset, a wax seal and the
   addresses on white cards like the transfer card. */
.thm01-gift-address {
    background: #f4e8e6 padding-box;
    border: solid transparent;
    border-width: clamp(5.5rem, 10vw, 9rem) var(--thm01-pad);
    margin-inline: auto;
    max-width: calc(880px + 2 * var(--thm01-pad));
    padding: clamp(3.8rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4.5rem) clamp(2.8rem, 5vw, 4.5rem);
    /* The seal rises above the paper, which deferred rendering would clip. */
    content-visibility: visible;
}

/* Straight after the love gift the paper starts where that section's spacing ends. */
.thm01-gift + .thm01-gift-address {
    border-top-width: 0;
}

.thm01-gift-address:has([data-address-count="2"]) {
    max-width: calc(1040px + 2 * var(--thm01-pad));
}

.thm01-gift-address:has([data-address-count="3"]) {
    max-width: calc(var(--thm01-page-width) + 2 * var(--thm01-pad));
}

.thm01-gift-address::before {
    background: var(--theme-accent-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffaf6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4' rx='.6'/%3E%3Cpath d='M5 12v8.5h14V12M12 8v12.5M12 8S10.6 3.6 8.1 4.3C6.3 4.8 6.7 7.5 8.6 8M12 8s1.4-4.4 3.9-3.7c1.8.5 1.4 3.2-.5 3.7'/%3E%3C/svg%3E") center / 28px no-repeat;
    border-radius: 50%;
    box-shadow: 0 0.6rem 1.5rem rgba(75, 33, 48, 0.2);
    content: "";
    height: 62px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 62px;
    z-index: 2;
}

.thm01-gift-address::after {
    border: 1px solid rgba(149, 82, 104, 0.24);
    content: "";
    inset: 12px;
    pointer-events: none;
    position: absolute;
}

.thm01-gift-address .thm01-section-heading {
    margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
    position: relative;
    z-index: 1;
}

.thm01-gift-address .thm01-section-heading h2 {
    font-size: clamp(2.8rem, 5vw, 4.6rem);
}

.thm01-gift-address .theme-gift-address__list {
    gap: clamp(1rem, 2vw, 1.5rem);
    position: relative;
    width: 100%;
    z-index: 1;
}

.thm01-gift-address .theme-gift-address__card {
    background: #fffaf6;
    border: 0;
    box-shadow: 0 1rem 3rem rgba(78, 39, 52, 0.1);
    color: var(--theme-text);
    flex: 1 1 290px;
    gap: 0.35rem;
    max-width: 480px;
    padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2rem);
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__label {
    color: var(--theme-accent);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    opacity: 1;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__name {
    color: var(--theme-accent-deep);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__phone a {
    color: var(--theme-accent-deep);
    display: inline-flex;
    font-weight: 700;
    min-height: 44px;
    align-items: center;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__address {
    color: var(--theme-text-muted);
    font-size: 0.9375rem;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__note {
    border-top: 1px solid var(--theme-line);
    color: var(--theme-text-muted);
    font-family: var(--theme-font-display);
    font-size: 1.05rem;
    margin-top: 0.6rem;
    padding-top: 0.8rem;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__copy {
    margin-top: auto;
}

body[data-theme-version="v2"] .thm01-gift-address .theme-gift-address__card > :nth-last-child(2) {
    margin-bottom: 1rem;
}

.thm01-gift-address .theme-gift-address__copy[data-copy-state="copied"],
.thm01-gift-card [data-copy-state="copied"] {
    background: var(--theme-accent-deep);
    border-color: var(--theme-accent-deep);
    color: var(--theme-accent-contrast);
}

@media (max-width: 480px) {
    .thm01-gift-address {
        border-left-width: 0.65rem;
        border-right-width: 0.65rem;
        /* The same inset as the love gift paper above, so both white cards keep one margin. */
        padding-inline: clamp(1.7rem, 6vw, 4rem);
    }

    .thm01-gift-address .theme-gift-address__card {
        flex-basis: 100%;
    }
}

@media (forced-colors: active) {
    .thm01-gift-address .theme-gift-address__card {
        border: 1px solid CanvasText;
    }
}

/* Teks & Font: a text the couple writes may hold one long word (Bapak/Ibu/Saudara/i). Body text
   breaks instead of pushing past its column (headings shrink first: text-fit.js). Zero
   specificity, so the theme's own wrapping rules win. */
:where(body.theme-thm01) :where(h4, p, small, li, blockquote, figcaption) {
    overflow-wrap: break-word;
}

/* The invitation never scrolls sideways: a long heading below the fold waits unshrunk until
   text-fit.js reaches it, and Kirim Kado (content-visibility: visible) does not clip it. */
.thm01-invitation {
    overflow-x: clip;
}

/* Section headings keep whole words (the shared body rule breaks anywhere), so text-fit.js can
   first shrink a long heading; it breaks the word only at its smallest size. */
:where(body.theme-thm01) :where(h2) {
    overflow-wrap: normal;
}