/*
 * Timeless Champagne: champagne & clockwork, quiet luxury.
 * Deep espresso sections (.tc-dark) alternate with warm ivory ones (.tc-light). True champagne gold as a metallic
 * gradient (.tc-metal); the watch is the identity: a Roman-numeral dial (cover, closing), a chronograph countdown,
 * a small clock divider whose hands turn once, a clock face per event, watch cases around the couple.
 * Guilloché engraving (img/guilloche-*.svg, generated) is used as CSS masks (.tc-rosette, .tc-band), so it takes the
 * variant's gold; champagne satin (img/satin-soft.webp, from the CC0 satin.webp) is laid over the deep panels without blend modes.
 * Colors from the variant: --inv-primary (espresso), --inv-accent (champagne gold), --inv-background (ivory),
 * --inv-text, --inv-surface, --inv-deep, --inv-shine (gold highlight), --inv-blush (bronze ink for labels on ivory).
 * All classes start with "tc-".
 */

:root {
    --inv-primary: #3a2618;
    --inv-accent: #c9a464;
    --inv-background: #f8f1e4;
    --inv-text: #2b1f16;
    --inv-surface: #fffbf3;
    --inv-deep: #1e140e;
    --inv-shine: #f4e2b4;
    --inv-blush: #8a6531;
    --inv-radius: 6px;

    --tc-w: 460px;
    /* distance from the viewport edge to the column (0 on phones) */
    --tc-edge: max(0px, calc((100vw - var(--tc-w)) / 2));
    --tc-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
    --tc-label: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --tc-sans: 'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --tc-gold-deep: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-deep));
    --tc-gold-solid: var(--inv-accent);
    --tc-enamel: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-deep));
    --tc-enamel-hi: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-accent));
    --tc-on-dark: color-mix(in srgb, var(--inv-shine) 28%, #fffaf0);
    --tc-on-dark-soft: color-mix(in srgb, var(--tc-on-dark) 86%, transparent);
    --tc-ink: var(--inv-blush);

    /* champagne gold for dark grounds: bright, with a highlight band */
    --tc-metal: linear-gradient(100deg, var(--inv-accent) 0%, var(--inv-shine) 24%, var(--inv-accent) 44%, color-mix(in srgb, var(--inv-shine) 70%, #fff) 58%, var(--inv-accent) 76%, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-deep)) 100%);
    /* bronze gold for ivory grounds: every stop stays dark enough to read */
    --tc-metal-ink: linear-gradient(100deg, var(--inv-blush) 0%, var(--tc-gold-deep) 30%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep)) 50%, var(--inv-blush) 70%, color-mix(in srgb, var(--inv-blush) 70%, var(--inv-deep)) 100%);
    /* gold leaf for bezels, buttons and tags */
    --tc-leaf: linear-gradient(125deg, var(--inv-shine), var(--inv-accent) 32%, color-mix(in srgb, var(--inv-shine) 75%, #fff) 52%, var(--tc-gold-deep) 82%, var(--inv-accent));

    --tc-dark-bg: linear-gradient(172deg, color-mix(in srgb, var(--inv-primary) 94%, var(--inv-accent)) 0%, var(--inv-primary) 40%, var(--inv-deep) 100%);
    --tc-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --tc-line-soft: color-mix(in srgb, var(--inv-accent) 35%, transparent);
}

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

html { background: var(--inv-deep); scroll-behavior: smooth; }

body.tc-body {
    margin: 0;
    background: var(--inv-deep);
    color: var(--inv-text);
    font: 400 1rem/1.7 var(--tc-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.tc-icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- engraving & satin ---------- */

.tc-rosette {
    display: block; aspect-ratio: 1; pointer-events: none;
    background: var(--tc-rosette-color, var(--inv-accent));
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
.tc-band {
    display: block; height: 14px; pointer-events: none;
    background: var(--tc-metal);
    -webkit-mask-size: 30px 100%; mask-size: 30px 100%;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.tc-satin {
    display: block; pointer-events: none;
    background-size: cover; background-position: center;
    /* satin-soft.webp is a transparent light-and-shade texture: no blend mode needed (iOS Safari mishandles them) */
}

/* decorations are children of revealed sections: keep their own opacity and position (no reveal transform) */
.tc-section > .tc-rosette, .tc-section > .tc-satin, .tc-section > .tc-band {
    position: absolute; z-index: 0;
    opacity: var(--tc-o, 1) !important; transform: none !important; transition: none !important;
}
.tc-dark__satin { inset: 0; --tc-o: .4; }

/* champagne gold text */
.tc-metal {
    background: var(--tc-metal) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
html.inv-anim .tc-metal { animation: tc-glint 2.6s cubic-bezier(.4, 0, .2, 1) 1.2s both; }
@keyframes tc-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- the column ---------- */

.tc-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(90% 70% at 50% 40%, var(--inv-primary), var(--inv-deep)); }
.tc-backdrop .tc-rosette { position: absolute; top: 50%; left: 50%; width: 140vmin; margin: -70vmin 0 0 -70vmin; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 9%, transparent); }

.tc-page {
    position: relative; z-index: 1;
    width: min(100%, var(--tc-w)); min-height: 100vh; margin: 0 auto;
    background: var(--inv-background);
    overflow-x: clip;
}
@media (min-width: 520px) {
    .tc-page { box-shadow: 0 0 0 1px var(--tc-line-soft), 0 40px 90px -30px rgb(0 0 0 / .6); }
}

.tc-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--tc-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-deep); color: var(--inv-shine);
    font: 500 .68rem/1.3 var(--tc-sans); text-align: center; letter-spacing: .03em;
}

/* ---------- type ---------- */

.tc-label { font: 600 .68rem/1.5 var(--tc-label); letter-spacing: .34em; text-transform: uppercase; color: var(--tc-ink); }
.tc-dark .tc-label, .tc-cover .tc-label, .tc-hero .tc-label { color: var(--inv-accent); }

.tc-heading { position: relative; z-index: 1; margin-bottom: 2rem; }
.tc-heading__title {
    margin-top: .3rem;
    font: 500 clamp(2.15rem, 9.8vw, 2.65rem)/1.14 var(--tc-display); letter-spacing: -.01em;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.tc-heading__title em {
    font-style: italic;
    background: var(--tc-metal-ink); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    padding-right: .06em;
}
.tc-dark .tc-heading__title { color: var(--tc-on-dark); }
.tc-dark .tc-heading__title em { background-image: var(--tc-metal); }

.tc-lead { position: relative; z-index: 1; max-width: 24rem; margin: -.6rem auto 1.8rem; color: var(--inv-text); }
.tc-dark .tc-lead { color: var(--tc-on-dark-soft); }

/* clock divider: the hands turn once to ten past ten when it is revealed */
.tc-divider { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .9rem auto 0; color: var(--tc-ink); }
.tc-dark .tc-divider, .tc-hero .tc-divider { color: var(--inv-accent); }
.tc-divider__line { width: 4.4rem; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.tc-divider__line--end { transform: scaleX(-1); }
.tc-divider__clock { width: 1.75rem; height: 1.75rem; overflow: visible; }
.tc-divider__hour { transform: rotate(-60deg); }
.tc-divider__minute { transform: rotate(60deg); }
html.inv-anim .is-revealed .tc-divider__hour, html.inv-anim .tc-hero .tc-divider__hour { animation: tc-hour 1.6s cubic-bezier(.3, .1, .2, 1) .3s both; }
html.inv-anim .is-revealed .tc-divider__minute, html.inv-anim .tc-hero .tc-divider__minute { animation: tc-minute 1.6s cubic-bezier(.3, .1, .2, 1) .3s both; }
@keyframes tc-hour { from { transform: rotate(-150deg); } to { transform: rotate(-60deg); } }
@keyframes tc-minute { from { transform: rotate(-300deg); } to { transform: rotate(60deg); } }

/* ---------- buttons (shared components) ---------- */

.inv-button {
    gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px;
    background: var(--tc-leaf); color: var(--inv-deep);
    font: 600 .72rem/1.2 var(--tc-sans); letter-spacing: .16em; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 1px color-mix(in srgb, var(--tc-gold-deep) 60%, transparent), 0 14px 26px -16px rgb(0 0 0 / .55);
}
.inv-button--outline {
    background: transparent; color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px var(--tc-gold-deep);
}
.inv-button--outline:hover { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }
.tc-dark .inv-button--outline { color: var(--tc-on-dark); box-shadow: inset 0 0 0 1px var(--inv-accent); }
.inv-button .tc-icon { width: 1.1rem; height: 1.1rem; }

.tc-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .75rem; padding: .45rem .95rem;
    border-radius: 999px; color: var(--inv-primary); text-decoration: none;
    background: var(--inv-surface);
    box-shadow: inset 0 0 0 1px var(--tc-gold-deep);
    font: 500 .78rem/1 var(--tc-sans); letter-spacing: .03em;
    transition: background .25s ease;
}
.tc-pill:hover { background: color-mix(in srgb, var(--inv-accent) 14%, var(--inv-surface)); }

/* ---------- the watch dial (cover, closing) ---------- */

.tc-dial { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.tc-dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); }
.tc-dial__numerals { font: 600 11px/1 var(--tc-label); letter-spacing: .02em; }
.tc-dial__window {
    position: absolute; left: 22.73%; top: 22.73%; width: 54.55%; height: 54.55%;
    border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 40% 30%, var(--tc-enamel-hi), var(--tc-enamel));
    box-shadow: inset 0 4px 14px rgb(0 0 0 / .5);
}
.tc-dial__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* the slim bezel: the window reaches the gold ring at r 75.6 of 110 */
.tc-dial--thin .tc-dial__window { left: 15.64%; top: 15.64%; width: 68.72%; height: 68.72%; }
.tc-dial--thin .tc-dial__numerals { font-size: 9px; }
.tc-dial__mono {
    display: flex; align-items: center; gap: 2.4cqw;
    font: italic 500 15cqw/1 var(--tc-display);
    background: var(--tc-metal); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.tc-dial__mono i { display: block; width: 1px; height: 16cqw; background: var(--inv-accent); transform: rotate(20deg); }

.tc-dial__trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.inv-anim .tc-dial--sweep .tc-dial__trace { animation: tc-trace 1.8s cubic-bezier(.45, 0, .25, 1) .15s both; }
html.inv-anim .tc-dial--sweep .tc-dial__hand { animation: tc-sweep 1.8s cubic-bezier(.45, 0, .25, 1) .15s both; }
html.inv-anim .tc-dial--sweep .tc-dial__photo { animation: tc-photo-in 1.6s ease-out .1s both; }
@keyframes tc-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tc-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tc-photo-in { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }

/* the monogram plaque at six o'clock */
.tc-plaque {
    display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .75rem .26rem;
    border-radius: 3px; background: var(--tc-leaf); color: var(--inv-deep);
    font: italic 600 .95rem/1 var(--tc-display); letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-deep) 30%, transparent), 0 6px 14px -6px rgb(0 0 0 / .6);
}
.tc-plaque i { display: block; width: 1px; height: .9rem; background: var(--inv-deep); opacity: .55; transform: rotate(20deg); }

/* ---------- cover ---------- */

.tc-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--tc-w)); margin: 0 auto;
    overflow-x: hidden; overflow-y: auto;
    color: var(--tc-on-dark);
    background: var(--tc-dark-bg);
}
.tc-cover__bg { position: absolute; inset: 0; pointer-events: none; }
.tc-cover--photo .tc-cover__bg {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 72%, transparent), color-mix(in srgb, var(--inv-primary) 84%, transparent) 42%, color-mix(in srgb, var(--inv-deep) 94%, transparent) 78%, var(--inv-deep)),
        var(--tc-photo) center 30% / cover no-repeat;
}
.tc-cover:not(.tc-cover--photo) .tc-cover__bg { background: radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%); }
.tc-cover__rosette {
    position: absolute; left: 50%; top: 4svh; width: min(150vw, 690px); margin-left: calc(min(150vw, 690px) / -2);
    --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 13%, transparent);
}
.tc-cover__frame, .tc-cover__frame::after {
    position: absolute; inset: 10px; z-index: 1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.tc-cover__frame::after { content: ''; inset: 4px; border-color: color-mix(in srgb, var(--inv-accent) 22%, transparent); }

.tc-cover__inner {
    position: relative; z-index: 2;
    min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; padding: 2.4rem 1.6rem 2rem; text-align: center;
}
.tc-cover__watch { position: relative; width: min(80vw, 330px); margin: .2rem 0 .4rem; }
.tc-cover__plaque { position: absolute; left: 50%; top: 83%; translate: -50% -50%; }

.tc-cover__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .32em;
    font: italic 500 clamp(2.6rem, 12.4vw, 3.3rem)/1.06 var(--tc-display);
    overflow-wrap: anywhere; padding: 0 .08em;
}
.tc-cover__amp { font-size: .6em; }
.tc-cover__date {
    display: flex; align-items: center; gap: .6rem;
    font: 600 .72rem/1.4 var(--tc-label); letter-spacing: .2em; text-transform: uppercase; color: var(--tc-on-dark);
}
.tc-cover__date::before, .tc-cover__date::after { content: ''; width: 1.4rem; height: 1px; background: var(--inv-accent); }
.tc-cover__quote {
    max-width: 21rem; font: italic 400 .95rem/1.55 var(--tc-display); color: var(--tc-on-dark-soft);
}

.tc-guest {
    position: relative; width: min(100%, 21rem); margin-top: .2rem; padding: .8rem 1rem .85rem;
    background: color-mix(in srgb, var(--inv-deep) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent);
    border-radius: 4px;
}
.tc-guest__label { font: 600 .62rem/1.4 var(--tc-label); letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent); }
.tc-guest__name { margin-top: .2rem; font: 600 1.2rem/1.3 var(--tc-display); color: var(--tc-on-dark); overflow-wrap: anywhere; }
.tc-guest__note { margin-top: .3rem; font: 400 .82rem/1.5 var(--tc-sans); color: var(--tc-on-dark-soft); }

.tc-open { margin-top: .3rem; }

/* opening: the cover lifts and fades */
.tc-cover--leave { transition: opacity .7s ease, transform .9s cubic-bezier(.5, 0, .2, 1); }
.tc-cover--gone { opacity: 0; transform: translateY(-4%); }

/* champagne bubbles: rise once after "Buka Undangan", then stop */
.tc-bubbles { position: fixed; z-index: 40; inset: 0; width: min(100%, var(--tc-w)); margin: 0 auto; overflow: hidden; pointer-events: none; }
.tc-bubbles i {
    position: absolute; bottom: -24px; left: var(--x); width: var(--s, 10px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / .95) 0 14%, color-mix(in srgb, var(--inv-shine) 45%, transparent) 38%, transparent 68%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 80%, transparent);
}
.tc-bubbles.is-go i { animation: tc-bubble var(--d, 3s) cubic-bezier(.3, .2, .4, 1) var(--delay, 0s) forwards; }
.tc-bubbles i:nth-child(1) { --x: 8%; --s: 9px; --d: 2.9s; --delay: .1s; --dx: 10px; }
.tc-bubbles i:nth-child(2) { --x: 17%; --s: 14px; --d: 3.4s; --delay: .45s; --dx: -8px; }
.tc-bubbles i:nth-child(3) { --x: 26%; --s: 7px; --d: 2.6s; --delay: .25s; --dx: 6px; }
.tc-bubbles i:nth-child(4) { --x: 35%; --s: 11px; --d: 3.1s; --delay: .7s; --dx: -12px; }
.tc-bubbles i:nth-child(5) { --x: 44%; --s: 6px; --d: 2.7s; --delay: .15s; --dx: 8px; }
.tc-bubbles i:nth-child(6) { --x: 52%; --s: 12px; --d: 3.3s; --delay: .55s; --dx: -6px; }
.tc-bubbles i:nth-child(7) { --x: 60%; --s: 8px; --d: 2.8s; --delay: .35s; --dx: 10px; }
.tc-bubbles i:nth-child(8) { --x: 68%; --s: 15px; --d: 3.5s; --delay: .8s; --dx: -10px; }
.tc-bubbles i:nth-child(9) { --x: 76%; --s: 7px; --d: 2.6s; --delay: .2s; --dx: 7px; }
.tc-bubbles i:nth-child(10) { --x: 83%; --s: 10px; --d: 3s; --delay: .6s; --dx: -7px; }
.tc-bubbles i:nth-child(11) { --x: 90%; --s: 6px; --d: 2.7s; --delay: .4s; --dx: 5px; }
.tc-bubbles i:nth-child(12) { --x: 95%; --s: 9px; --d: 3.2s; --delay: .9s; --dx: -9px; }
@keyframes tc-bubble {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: .95; }
    70% { opacity: .7; }
    100% { opacity: 0; transform: translate(var(--dx, 0), -78vh) scale(1); }
}

/* ---------- hero (top of the page after opening) ---------- */

.tc-hero {
    position: relative; overflow: hidden;
    min-height: min(100svh, 860px); padding: 4rem 1.5rem 7.2rem;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    text-align: center; color: var(--tc-on-dark);
    background: var(--inv-deep);
}
.tc-hero__photo { position: absolute; inset: 0 0 24% 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 99%); mask-image: linear-gradient(180deg, #000 55%, transparent 99%); }
.tc-hero__photo img { width: 100%; height: calc(100% + 40px); object-fit: cover; object-position: center 30%; }
.tc-hero__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 30%, transparent) 0%, transparent 22%, transparent 42%, color-mix(in srgb, var(--inv-primary) 70%, transparent) 70%, var(--inv-deep) 99%);
}
.tc-hero__rosette { position: absolute; left: 50%; top: 8%; width: 120%; margin-left: -60%; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 16%, transparent); }
.tc-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tc-hero__names {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .3em;
    font: italic 500 clamp(2.7rem, 13vw, 3.5rem)/1.08 var(--tc-display); overflow-wrap: anywhere; padding: 0 .08em;
    filter: drop-shadow(0 2px 10px rgb(0 0 0 / .45));
}
.tc-hero__amp { font-size: .58em; }
.tc-hero__date { margin-top: .5rem; font: 600 .74rem/1.4 var(--tc-label); letter-spacing: .22em; text-transform: uppercase; }
.tc-hero__roman { font: 500 .78rem/1.4 var(--tc-label); letter-spacing: .4em; color: var(--inv-accent); }

/* ---------- sections ---------- */

.tc-main { position: relative; }

.tc-section {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.6rem 1.4rem;
    text-align: center;
}
.tc-section > * { position: relative; z-index: 1; }
.tc-light {
    background:
        radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 70%),
        var(--inv-background);
    color: var(--inv-text);
}
.tc-dark { background: var(--tc-dark-bg); color: var(--tc-on-dark); }

/* a client photo under a strong espresso gradient */
.tc-section > .tc-bgphoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tc-bgphoto img { width: 100%; height: calc(100% + 40px); object-fit: cover; object-position: center 35%; }
.tc-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 90%, transparent) 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent) 45%, color-mix(in srgb, var(--inv-deep) 92%, transparent) 100%);
}

/* ---------- opening (ivory over a faint photo) ---------- */
.tc-section > .tc-opening__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tc-opening__bg { background: linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-shine) 40%, var(--inv-background))); }
.tc-opening__bg img { width: 100%; height: calc(100% + 40px); object-fit: cover; object-position: center 30%; opacity: .55; filter: sepia(.4) saturate(.85); }
.tc-opening__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--inv-background) 0%, color-mix(in srgb, var(--inv-background) 66%, transparent) 22%, color-mix(in srgb, var(--inv-background) 74%, transparent) 70%, var(--inv-background) 100%);
}
.tc-opening__rosette { top: 1.2rem; left: 50%; width: 300px; margin-left: -150px; --tc-rosette-color: color-mix(in srgb, var(--inv-blush) 16%, transparent); }
.tc-arabic { margin-top: 1.4rem; font: 400 1.8rem/1.8 'Amiri', serif; color: var(--inv-primary); }
.tc-opening > .tc-divider { margin: .2rem auto 1.3rem; }
.tc-opening__greeting { font: italic 500 1.35rem/1.45 var(--tc-display); color: var(--inv-primary); }
.tc-opening__message { max-width: 24rem; margin: .9rem auto 0; color: var(--inv-text); }

.tc-quote {
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 24rem; margin: 2.8rem auto 0; padding: 2.4rem 1.5rem 1.6rem;
    border-radius: 4px; background: var(--tc-dark-bg); color: var(--tc-on-dark);
    box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.tc-quote::after { content: ''; position: absolute; inset: 7px; z-index: 1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent); border-radius: 2px; }
.tc-quote > * { position: relative; z-index: 2; }
.tc-quote > .tc-quote__satin { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.tc-quote > .tc-quote__band { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 12px; }
.tc-quote__mark { display: block; height: 2rem; font: italic 600 4rem/1 var(--tc-display); color: var(--inv-accent); }
.tc-quote blockquote { margin: 0; font: italic 400 1.02rem/1.72 var(--tc-display); color: var(--tc-on-dark); }
.tc-quote figcaption { margin-top: .9rem; font: 600 .66rem/1.4 var(--tc-label); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent); }

/* ---------- couple: zig-zag, photos in watch cases on espresso satin blocks ---------- */
.tc-person {
    display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 1.1rem;
    text-align: left;
}
.tc-person--right { grid-template-columns: minmax(0, 1fr) 46%; text-align: right; }
.tc-person--right .tc-person__media { order: 2; }

.tc-person__media { position: relative; isolation: isolate; padding: 10% 0; }
.tc-person__block {
    position: absolute !important; z-index: -1; top: 0; bottom: 0; left: 18%; right: -6%;
    border-radius: 3px; background-color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.tc-person--right .tc-person__block { left: -6%; right: 18%; }

.tc-case { position: relative; width: 90%; aspect-ratio: 1; animation: tc-float 7s ease-in-out infinite alternate; }
.tc-person--right .tc-case { margin-left: auto; animation-delay: -3.5s; }
.tc-case__bezel {
    position: relative; display: block; width: 100%; height: 100%; padding: 8.5%; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--inv-shine), var(--inv-accent), var(--tc-gold-deep), var(--inv-accent), var(--inv-shine), var(--inv-accent), var(--tc-gold-deep), var(--inv-shine));
    box-shadow: 0 22px 34px -18px rgb(0 0 0 / .65), inset 0 0 0 1px color-mix(in srgb, var(--inv-deep) 30%, transparent);
}
/* minute ticks engraved in the bezel */
.tc-case__bezel::after {
    content: ''; position: absolute; inset: 2.5%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(color-mix(in srgb, var(--inv-deep) 55%, transparent) 0 .7deg, transparent .7deg 6deg);
    -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 87% 96%, transparent 97%);
    mask: radial-gradient(closest-side, transparent 86%, #000 87% 96%, transparent 97%);
}
.tc-case__crown {
    position: absolute; z-index: -1; right: -4%; top: 45%; width: 8%; height: 10%; border-radius: 2px;
    background: linear-gradient(90deg, var(--tc-gold-deep), var(--inv-shine), var(--inv-accent));
}
.tc-case__img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 25%; box-shadow: 0 0 0 2px var(--tc-enamel); }
.tc-case__empty {
    display: grid; place-items: center;
    font: italic 500 3rem/1 var(--tc-display); color: var(--inv-shine);
    background: radial-gradient(circle at 40% 30%, var(--tc-enamel-hi), var(--tc-enamel));
}
@keyframes tc-float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

.tc-person__role { font: 600 .6rem/1.4 var(--tc-label); letter-spacing: .26em; text-transform: uppercase; color: var(--tc-ink); }
.tc-person__nick {
    display: inline-block; margin-top: .1rem; padding-right: .08em;
    font: italic 500 2.35rem/1.12 var(--tc-display); overflow-wrap: anywhere;
    background: var(--tc-metal-ink); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.tc-person__name { margin-top: .15rem; font: 600 1.02rem/1.35 var(--tc-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.tc-person__parents { margin-top: .45rem; font-size: .86rem; line-height: 1.5; color: var(--inv-text); }
.tc-person__parents strong { font-weight: 600; color: var(--inv-primary); }

.tc-and { position: relative; display: grid; place-items: center; margin: 1.8rem 0; }
.tc-and__band { position: absolute; left: 12%; right: 12%; top: 50%; height: 12px; margin-top: -6px; }
.tc-and__mark {
    position: relative; padding: 0 .35em; background: var(--inv-background);
    font: italic 500 3.2rem/1 var(--tc-display); color: var(--inv-blush);
}

/* ---------- countdown: chronograph watch on espresso ---------- */
.tc-countdown__date {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 600 .72rem/1.4 var(--tc-label); letter-spacing: .16em; text-transform: uppercase; color: var(--tc-on-dark);
}
.tc-countdown__date .tc-icon { color: var(--inv-accent); width: 1.15rem; height: 1.15rem; }

.tc-watch { --tc-dial: min(80vw, 318px); position: relative; margin: 1.9rem auto 0; }
.tc-watch__dial, .tc-watch__hands {
    position: absolute; top: 0; left: calc(50% - var(--tc-dial) / 2); z-index: 0;
    width: var(--tc-dial); height: var(--tc-dial);
    overflow: visible; pointer-events: none;
}
.tc-watch__dial { filter: drop-shadow(0 26px 30px rgb(0 0 0 / .55)); }
.tc-watch__hands { z-index: 3; }
.tc-watch__guilloche, .tc-watch__gloss {
    position: absolute; z-index: 0; top: calc(var(--tc-dial) * .06); left: calc(50% - var(--tc-dial) * .44);
    width: calc(var(--tc-dial) * .88); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
}
.tc-watch__guilloche { --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.tc-watch__gloss { background: radial-gradient(circle at 34% 24%, rgb(255 255 255 / .14), transparent 55%); }
.tc-watch__numerals { font: 600 9px/1 var(--tc-label); }
.tc-watch__second {
    transform-box: view-box; transform-origin: 100px 100px;
    animation: tc-tick 60s steps(60) infinite;
}
@keyframes tc-tick { to { transform: rotate(360deg); } }

.tc-watch .inv-countdown-wrap { position: relative; z-index: 1; }
.tc-watch .inv-countdown-wrap > [x-data] { position: relative; width: var(--tc-dial); height: var(--tc-dial); margin: 0 auto; }
.tc-watch .inv-countdown { position: absolute; inset: 0; display: block; }
/* the four sub-dials at 12, 3, 6 and 9 o'clock */
.tc-watch .inv-countdown__item {
    position: absolute; width: 27%; aspect-ratio: 1; min-width: 0; max-width: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--inv-shine);
    background:
        radial-gradient(closest-side, var(--tc-enamel) 0 79%, transparent 80%),
        repeating-conic-gradient(color-mix(in srgb, var(--inv-shine) 75%, transparent) 0 1.4deg, transparent 1.4deg 30deg),
        var(--tc-enamel);
    box-shadow: 0 0 0 1.5px var(--inv-accent), inset 0 3px 8px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .35);
}
.tc-watch .inv-countdown__item:hover { transform: none; }
.tc-watch .inv-countdown__item:nth-child(1) { left: 36.5%; top: 13.5%; }
.tc-watch .inv-countdown__item:nth-child(2) { left: 59.5%; top: 36.5%; }
.tc-watch .inv-countdown__item:nth-child(3) { left: 36.5%; top: 59.5%; }
.tc-watch .inv-countdown__item:nth-child(4) { left: 13.5%; top: 36.5%; }
.tc-watch .inv-countdown__value { font: 600 calc(var(--tc-dial) * .088)/1 var(--tc-display); color: var(--inv-shine); font-variant-numeric: lining-nums tabular-nums; }
.tc-watch .inv-countdown__label { margin-top: .2rem; font: 600 max(.5rem, calc(var(--tc-dial) * .028))/1 var(--tc-label); letter-spacing: .14em; text-transform: uppercase; color: var(--inv-accent); opacity: 1; }
.tc-watch .inv-countdown__done {
    position: absolute; inset: 20%; z-index: 2; display: grid; place-items: center;
    font: italic 500 1rem/1.5 var(--tc-display); color: var(--inv-shine);
}
.inv-countdown__actions { margin-top: 2.2rem; }
.inv-countdown__actions .inv-button { padding: .7rem 1rem; font-size: .62rem; letter-spacing: .1em; }

/* ---------- events and love story: cards one under another ---------- */
.tc-deck { position: relative; }
.tc-track { position: relative; z-index: 1; display: grid; gap: 1.6rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.tc-slide { min-width: 0; }
/* the love story: a thin gold timeline behind the cards, a small gold diamond in each gap */
.tc-deck--story .tc-track { gap: 2.4rem; }
.tc-deck--story .tc-track::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: -1rem; bottom: -1rem; width: 1px;
    background: linear-gradient(180deg, transparent, var(--inv-accent) 6%, var(--inv-accent) 94%, transparent);
}
.tc-deck--story .tc-slide { position: relative; overflow: visible; }
.tc-deck--story .tc-slide + .tc-slide::before {
    content: ''; position: absolute; left: 50%; top: -1.55rem; width: .7rem; height: .7rem; translate: -50% 0; rotate: 45deg;
    background: var(--tc-metal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-primary) 85%, transparent);
}
.tc-deck--story .tc-moment { overflow: visible; }
.tc-deck--story .tc-moment__photo { border-radius: 6px 6px 0 0; }

/* the event cards: an espresso satin band with a clock set to the start time */
.tc-event {
    position: relative; overflow: hidden; text-align: left;
    padding: 0 0 1.25rem; border-radius: 6px;
    background: var(--inv-surface); color: var(--inv-text);
    box-shadow: inset 0 0 0 1px var(--tc-line), 0 22px 36px -24px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.tc-event__band {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem;
    background: var(--tc-dark-bg); color: var(--tc-on-dark);
    border-bottom: 2px solid var(--inv-accent);
}
.tc-event__band > .tc-event__satin { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.tc-event__clock { flex: none; width: 3.3rem; height: 3.3rem; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
.tc-event__head { min-width: 0; }
.tc-event__count { font: 600 .58rem/1.3 var(--tc-label); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.tc-event__name { font: italic 600 1.55rem/1.18 var(--tc-display); color: var(--tc-on-dark); overflow-wrap: anywhere; }
.tc-event__photo {
    aspect-ratio: 16 / 9; margin-bottom: 1rem;
    background: var(--tc-photo) center 30% / cover no-repeat;
}
.tc-event__facts { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0 1.1rem; list-style: none; }
.tc-event__photo + .tc-event__facts { margin-top: 0; }
.tc-event__facts li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.tc-event__facts li > span { min-width: 0; }
.tc-event__facts .tc-icon { margin-top: .18rem; color: var(--tc-ink); width: 1.05rem; height: 1.05rem; }
.tc-event__time { font-weight: 600; color: var(--inv-primary); }
.tc-event__venue { display: block; font: 600 1.04rem/1.35 var(--tc-display); color: var(--inv-primary); }
.tc-event__address { display: block; margin-top: .15rem; font-size: .86rem; color: var(--inv-text); }
.tc-event__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.15rem; padding: 0 1.1rem; }
.tc-event__actions .inv-button { gap: .35rem; padding: .75rem .3rem; font-size: .58rem; letter-spacing: .05em; white-space: nowrap; text-decoration: none; }
.tc-event__actions .inv-button .tc-icon { width: 1rem; height: 1rem; }

/* the love story (deep): ivory cards with a gold date tag */
.tc-story__rosette { top: -90px; right: -110px; width: 340px; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 16%, transparent); }
.tc-moment {
    display: flex; flex-direction: column; overflow: hidden; text-align: left;
    border-radius: 6px; background: var(--inv-surface); color: var(--inv-text);
    box-shadow: inset 0 0 0 1px var(--tc-line), 0 24px 40px -22px rgb(0 0 0 / .7);
}
.tc-moment__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid var(--inv-accent); }
.tc-moment__photo--empty {
    position: relative; display: grid; place-content: center; justify-items: center;
    background: radial-gradient(circle at 40% 30%, var(--tc-enamel-hi), var(--tc-enamel));
}
.tc-moment__rosette { position: absolute; inset: 6% 18%; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.tc-moment__mono { position: relative; display: flex; gap: .25rem; font: italic 500 2.2rem/1 var(--tc-display); color: var(--inv-shine); }
.tc-moment__body { padding: 1rem 1.1rem 1.3rem; }
.tc-moment__date {
    display: inline-block; padding: .25rem .6rem; border-radius: 2px; background: var(--tc-leaf);
    font: 600 .6rem/1.3 var(--tc-label); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-deep);
}
.tc-moment__title { margin-top: .5rem; font: italic 600 1.38rem/1.25 var(--tc-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.tc-moment__story { margin-top: .45rem; font-size: .9rem; line-height: 1.6; color: var(--inv-text); overflow-wrap: anywhere; }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .tc-deck--events .tc-slide, .tc-deck--story .tc-slide { animation: tc-fan linear both; animation-timeline: view(inline); }
    }
}
@keyframes tc-fan {
    0% { transform: rotate(3deg) scale(.94); opacity: .7; }
    35%, 65% { transform: none; opacity: 1; }
    100% { transform: rotate(-3deg) scale(.94); opacity: .7; }
}

/* ---------- gallery ---------- */
.tc-gallery__band { top: 0; left: 0; right: 0; }
.inv-gallery { gap: .65rem; }
.inv-gallery__item {
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--tc-gold-deep), 0 0 0 5px var(--inv-surface), 0 0 0 6px var(--tc-line), 0 18px 28px -18px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.tc-gallery .inv-gallery { gap: 1rem; padding: .4rem; }
.inv-gallery__item:first-child,
.inv-gallery__item:first-child ~ .inv-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.inv-gallery__play { background: color-mix(in srgb, var(--inv-deep) 70%, transparent); color: #fff; }

/* ---------- panels and paper cards ---------- */
.tc-card { position: relative; z-index: 1; max-width: 24rem; margin: 0 auto; }
.tc-panel {
    padding: 1.9rem 1.4rem; border-radius: 4px;
    background: color-mix(in srgb, var(--inv-deep) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-accent) 60%, transparent);
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7);
}
.tc-panel::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--inv-accent) 22%, transparent); border-radius: 2px; pointer-events: none; }
.tc-paper {
    border-radius: 6px; background: var(--inv-surface); color: var(--inv-text);
    box-shadow: inset 0 0 0 1px var(--tc-line), inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px var(--tc-line-soft), 0 26px 44px -26px rgb(0 0 0 / .55);
}

/* ---------- live streaming ---------- */
.tc-live__badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem;
    border-radius: 999px; background: var(--tc-leaf); color: var(--inv-deep);
    font: 600 .64rem/1 var(--tc-sans); letter-spacing: .22em;
}
.tc-live__badge span { width: .45rem; height: .45rem; border-radius: 50%; background: #b3261e; animation: tc-blink 1.4s ease-in-out infinite; }
@keyframes tc-blink { 50% { opacity: .25; } }
.tc-live__text { margin: 1rem 0 .5rem; color: var(--tc-on-dark); }
.tc-live__note { margin-bottom: 1rem; font: italic 600 1.02rem/1.5 var(--tc-display); color: var(--inv-shine); }
.tc-live .inv-button { margin-top: .5rem; }

/* ---------- gift: espresso cards engraved with gold guilloché, two per row ---------- */
.tc-gift__rosette { top: -70px; left: -120px; width: 320px; --tc-rosette-color: color-mix(in srgb, var(--inv-blush) 14%, transparent); }
.inv-gift { position: relative; z-index: 1; display: grid; gap: .9rem; max-width: 24rem; margin: 0 auto; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem;
    grid-template-areas: "chip bank" "number number" "holder holder" "button button";
    margin: 0; padding: .95rem .85rem 1rem;
    border-radius: 8px; text-align: left; color: var(--tc-on-dark);
    background:
        url('../img/guilloche-rosette-soft.svg') 120% 140% / 85% auto no-repeat,
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--inv-accent) 25%, transparent), transparent 55%),
        var(--tc-dark-bg);
    box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
/* the chip */
.inv-gift__account::before {
    content: ''; grid-area: chip; width: 1.7rem; height: 1.3rem; border-radius: .3rem;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .25) 31% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 69%, transparent 69%),
        linear-gradient(0deg, transparent 47%, rgb(0 0 0 / .25) 47% 53%, transparent 53%),
        var(--tc-leaf);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
/* the gold edge */
.inv-gift__account::after {
    content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: var(--tc-leaf);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.inv-gift__bank {
    grid-area: bank; justify-self: end; min-width: 0; max-width: 100%; margin: 0;
    font: 600 .64rem/1.2 var(--tc-sans); letter-spacing: .08em; text-transform: uppercase; text-align: right; overflow-wrap: anywhere;
    color: var(--inv-shine);
}
.inv-gift__logo { height: 1.5rem; max-width: 100%; padding: .2rem .45rem; border-radius: .35rem; background: #fff; }
.inv-gift__logo img { max-width: 4.6rem; }
.inv-gift__number {
    grid-area: number; margin: .85rem 0 .15rem;
    font: 600 .98rem/1.25 var(--tc-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--tc-on-dark);
    overflow-wrap: anywhere;
}
.inv-gift__holder { grid-area: holder; margin: 0; font: 600 .6rem/1.35 var(--tc-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tc-on-dark-soft); overflow-wrap: anywhere; }
.inv-gift__account:not(.inv-gift__address) .inv-button--outline { color: var(--tc-on-dark); box-shadow: inset 0 0 0 1px var(--inv-accent); }
.inv-gift__account .inv-button {
    grid-area: button; justify-self: start; margin-top: .7rem; padding: .4rem .8rem; border-radius: 999px;
    font-size: .58rem; letter-spacing: .08em;
}

/* the gift address: an ivory card with a gold edge */
.inv-gift__account.inv-gift__address { display: block; padding: 1.5rem 1.3rem; text-align: center; color: var(--inv-text); background: var(--inv-surface); }
.inv-gift__address::before { content: none; }
.inv-gift__address .inv-gift__bank { justify-self: auto; text-align: center; font: 600 .66rem/1.4 var(--tc-label); letter-spacing: .26em; color: var(--tc-ink); }
.inv-gift__address .inv-gift__holder { margin: .6rem 0 .2rem; font: 600 1.05rem/1.3 var(--tc-display); letter-spacing: .02em; text-transform: none; color: var(--inv-primary); }
.inv-gift__address p:not([class]) { color: var(--inv-text); }
.inv-gift__address .inv-button { margin-top: 1rem; }

/* ---------- rsvp & wishes forms ---------- */
.tc-form { padding: 1.5rem 1.25rem 1.6rem; text-align: left; }
.inv-form { gap: .9rem; }
.inv-form label, .inv-form__choices legend { font: 500 .82rem/1.4 var(--tc-sans); letter-spacing: .03em; color: var(--inv-text); }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    padding: .72rem .9rem; border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, var(--inv-deep));
    background: #fff; color: var(--inv-text);
    font: 400 1rem/1.4 var(--tc-sans);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--inv-text) 55%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 30%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-deep); }
.inv-form input[type=radio], .inv-form input[type=checkbox] { accent-color: var(--inv-primary); }
.inv-form__choices label { color: var(--inv-text); font-size: .92rem; }
.inv-form__notice { color: var(--inv-text); background: color-mix(in srgb, var(--inv-shine) 30%, var(--inv-surface)); border: 1px solid var(--tc-line-soft); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; }
.inv-rsvp__deadline { font-style: italic; color: var(--tc-ink); }

/* wishes: notes in a scroll box of about three */
.tc-wishes__rosette { top: -60px; right: -120px; width: 320px; --tc-rosette-color: color-mix(in srgb, var(--inv-blush) 14%, transparent); }
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .6rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .5rem; border-radius: 4px;
    background: color-mix(in srgb, var(--inv-background) 80%, transparent);
    box-shadow: inset 0 0 0 1px var(--tc-line-soft), inset 0 -14px 16px -14px color-mix(in srgb, var(--inv-deep) 30%, transparent);
    scrollbar-color: color-mix(in srgb, var(--inv-accent) 70%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; }
.inv-wish {
    padding: .65rem .8rem; border-radius: 3px;
    background: #fff; color: var(--inv-text);
    border: 1px solid var(--tc-line-soft); border-left: 3px solid var(--inv-accent);
}
.inv-wish__name { font: italic 600 .96rem/1.3 var(--tc-display); color: var(--inv-primary); }
.inv-wish__message { font-size: .94rem; line-height: 1.55; }
.inv-wish__time { margin-top: .25rem; font: 400 .7rem/1.3 var(--tc-sans); letter-spacing: .04em; color: color-mix(in srgb, var(--inv-text) 80%, transparent); }
.inv-wish__reply { margin-top: .5rem; padding: .45rem .65rem; background: color-mix(in srgb, var(--inv-shine) 35%, transparent); }
.inv-wish__reply-text { font-size: .92rem; }
.inv-wishes__page-button { color: var(--inv-primary); }

/* ---------- closing: a full photo melting into espresso ---------- */
.tc-closing { padding-top: 3.2rem; padding-bottom: 1.6rem; }
/* the room under the page (fixed menu, music buttons) continues the closing's dark ground */
.inv-music__space { background: var(--inv-deep); }
.tc-closing--photo { padding-top: 340px; }
.tc-section > .tc-closing__bg { position: absolute; top: 0; left: 0; right: 0; height: 470px; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.tc-closing__bg img { width: 100%; height: calc(100% + 40px); object-fit: cover; object-position: center 4%; }
.tc-closing__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 25%, transparent) 0%, transparent 18%, transparent 40%, color-mix(in srgb, var(--inv-primary) 72%, transparent) 66%, var(--inv-deep) 96%);
}
.tc-closing__rosette { bottom: -90px; left: 50%; width: 380px; margin-left: -190px; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.tc-closing:not(.tc-closing--photo) > .tc-closing__rosette { top: 1rem; bottom: auto; }
.tc-closing__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.tc-closing__dial { width: 5rem; margin-bottom: .6rem; }
.tc-closing__dial .tc-dial__svg { filter: drop-shadow(0 12px 18px rgb(0 0 0 / .55)); }
.tc-closing__thanks { margin-top: .1rem; font: 500 clamp(1.65rem, 7.4vw, 2rem)/1.12 var(--tc-display); color: var(--tc-on-dark); }
.tc-closing__thanks em {
    font-style: italic; padding-right: .06em;
    background: var(--tc-metal); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.tc-closing__message { max-width: 21rem; margin: .45rem auto 0; font-size: .82rem; line-height: 1.55; color: var(--tc-on-dark-soft); }
.tc-closing__body > .tc-divider { margin: .7rem auto 0; }
.tc-closing__sign { margin-top: .55rem; font: 600 .6rem/1.4 var(--tc-label); letter-spacing: .26em; text-transform: uppercase; color: var(--inv-accent); }
.tc-closing__names { display: inline-block; margin-top: .15rem; padding: 0 .08em; font: italic 500 clamp(1.8rem, 8.2vw, 2.2rem)/1.2 var(--tc-display); }
.tc-closing__names span { font-size: .6em; }
.tc-closing__band { width: 54%; margin-top: .7rem; }

/* ---------- shared components: nav, music, to-top, QR tab, branding ---------- */

body .tc-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 90%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--tc-on-dark) 78%, transparent);
    --inv-nav-active: var(--tc-leaf);
    border-color: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px -16px rgb(0 0 0 / .6);
    font-family: var(--tc-sans);
}
.tc-nav.inv-nav--icons .inv-nav__item.is-active { color: var(--inv-deep); box-shadow: 0 0 0 2px var(--inv-deep), 0 0 0 3px var(--inv-accent), 0 8px 18px -6px rgb(0 0 0 / .6); }

.inv-music { right: calc(var(--tc-edge) + 1rem); }
.inv-music__button { background: var(--tc-leaf); color: var(--inv-deep); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .6), 0 0 0 2px var(--inv-deep), 0 0 0 3px var(--inv-accent); }
.inv-autoscroll { color: var(--inv-deep); background: var(--inv-surface); border-color: var(--tc-gold-deep); font-family: var(--tc-sans); }
.inv-autoscroll--running { background: var(--inv-deep); color: var(--inv-shine); }

.inv-to-top {
    left: calc(var(--tc-edge) + 1rem); border-radius: 50%;
    background: var(--inv-deep); color: var(--inv-shine);
    box-shadow: inset 0 0 0 1px var(--inv-accent), 0 6px 16px -6px rgb(0 0 0 / .5);
}
.inv-qr-tab {
    right: var(--tc-edge); font-family: var(--tc-sans); color: var(--inv-shine);
    background: var(--inv-deep);
    border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.inv-qr-sheet .inv-checkin { font-family: var(--tc-sans); color: var(--inv-deep); }
.inv-checkin__title { color: var(--inv-primary); }

.tc-branding { position: relative; z-index: 1; background: var(--inv-deep); color: var(--tc-on-dark-soft); font-family: var(--tc-sans); }
.tc-branding a { color: var(--inv-accent); }

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tc-case, .tc-watch__second, .tc-hint .tc-icon, .tc-live__badge span, .tc-metal,
    .tc-dial__trace, .tc-dial__hand, .tc-dial__photo, .tc-divider__hour, .tc-divider__minute { animation: none !important; }
    .tc-bubbles { display: none; }
    .tc-cover--leave { transition: opacity .3s ease; }
    .tc-cover--gone { transform: none; }
}

/* ---------- fit: the whole cover on one phone screen; a proportionate page end ---------- */

@media (max-height: 760px) {
    .tc-cover__inner { gap: .55rem; padding: 1.8rem 1.4rem 1.5rem; }
    .tc-cover__watch { width: min(70vw, 270px); margin: .1rem 0 .3rem; }
    .tc-cover__names { font-size: clamp(2.4rem, 11.4vw, 3rem); }
    .tc-cover__quote { font-size: .88rem; line-height: 1.45; }
    .tc-guest { padding: .65rem .9rem .7rem; }
    .tc-guest__note { font-size: .78rem; line-height: 1.42; }
}
@media (max-height: 660px) {
    .tc-cover__inner { gap: .42rem; padding: 1.3rem 1.3rem 1.1rem; }
    .tc-cover__watch { width: min(60vw, 230px); }
    .tc-plaque { font-size: .82rem; padding: .18rem .6rem .2rem; }
    .tc-cover__names { font-size: clamp(2.2rem, 10.6vw, 2.6rem); line-height: 1.02; }
    .tc-cover__date { font-size: .66rem; }
    .tc-cover__quote { font-size: .82rem; line-height: 1.4; }
    .tc-guest { margin-top: 0; padding: .5rem .85rem .55rem; }
    .tc-guest__name { font-size: 1.08rem; }
    .tc-guest__note { font-size: .74rem; }
    .tc-open { margin-top: .1rem; }
}

@media (max-height: 600px) {
    .tc-cover__inner { padding-top: 2rem; }
    .tc-cover__watch { width: min(48vw, 27svh, 180px); }
}
.tc-cover__inner { justify-content: safe center; }

/* page end: the names close the page just above the bottom menu */
.tc-page { padding-bottom: 0; }

/* ---------- intro scene "Detik Sampanye" (scene.json + sections/_scene; the intro lives in <body>, outside .tc-page):
   the camera pulls out of a turning guilloché rosette, the watch drops in on its chain swing and its seconds pointer
   sweeps one turn, gold bands slide in along the edges, then the names on an engraved enamel plaque ---------- */
.tc-scene-ground { position: absolute; inset: 0; isolation: isolate;
    background: radial-gradient(70% 45% at 50% 24%, color-mix(in srgb, var(--inv-accent) 24%, transparent), transparent 72%), var(--tc-dark-bg); }
.tc-scene-ground .tc-satin { position: absolute; inset: 0; opacity: .42; }
.tc-scene-rosette--big { position: absolute; left: 50%; top: calc(9% + min(38vw, 20.5svh)); width: min(190vw, 120svh); translate: -50% -50%;
    --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 15%, transparent); }
.tc-scene-rosette--side { width: 100%; --tc-rosette-color: color-mix(in srgb, var(--inv-accent) 34%, transparent); }
.tc-scene-band { opacity: .85; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.tc-scene-frame, .tc-scene-frame::after { position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent); }
.tc-scene-frame::after { content: ''; inset: 4px; border-color: color-mix(in srgb, var(--inv-accent) 22%, transparent); }
.tc-scene-watch { position: relative; width: min(100%, 41svh); margin: 0 auto; }
/* the chain the watch hangs from, up to the top edge */
.tc-scene-watch::before { content: ''; position: absolute; left: 50%; bottom: 101.5%; width: 3px; height: 60svh; translate: -50% 0;
    background: repeating-linear-gradient(180deg, var(--inv-shine) 0 3px, var(--tc-gold-deep) 3px 5px, var(--inv-accent) 5px 7px);
    box-shadow: 0 0 6px color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.tc-scene-watch::after { content: ''; position: absolute; left: 50%; bottom: 93.5%; width: 9%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    border: 3px solid var(--inv-accent); background: transparent; box-shadow: inset 0 0 0 1px var(--inv-shine); }
.tc-scene-watch .tc-dial { container-type: inline-size; }
.tc-scene-photo { position: absolute; inset: 0; display: block; background: center 28% / cover no-repeat; }
.tc-scene-plaque { position: absolute; left: 50%; top: 83%; translate: -50% -50%; }
/* the dial's own opening moment, replayed when the intro plays: the photo comes in, the pointer sweeps one turn */
html.inv-anim .tc-scene-watch .tc-dial--sweep .tc-dial__trace,
html.inv-anim .tc-scene-watch .tc-dial--sweep .tc-dial__hand,
html.inv-anim .tc-scene-watch .tc-dial--sweep .tc-dial__photo { animation: none; }
.tc-scene-watch .tc-dial__trace { stroke-dashoffset: 1; }
.tc-scene-watch .tc-dial__photo { opacity: 0; }
html.inv-anim .inv-intro.is-playing .tc-scene-watch .tc-dial--sweep .tc-dial__photo { animation: tc-photo-in 1.6s ease-out 1.2s both; }
html.inv-anim .inv-intro.is-playing .tc-scene-watch .tc-dial--sweep .tc-dial__trace { animation: tc-trace 2.2s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
html.inv-anim .inv-intro.is-playing .tc-scene-watch .tc-dial--sweep .tc-dial__hand { animation: tc-sweep 2.2s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
.tc-scene-bubbles { position: absolute; inset: 0; overflow: hidden; }
.tc-scene-bubbles i { position: absolute; bottom: -20px; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / .9) 0 14%, color-mix(in srgb, var(--inv-shine) 40%, transparent) 38%, transparent 68%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 75%, transparent); }
.inv-intro.is-playing .tc-scene-bubbles i { animation: tc-scene-bubble var(--d) cubic-bezier(.3, .2, .4, 1) var(--w) infinite; }
.tc-scene-bubbles i:nth-child(1) { --x: 7%; --s: 8px; --d: 4.2s; --w: 2.6s; }
.tc-scene-bubbles i:nth-child(2) { --x: 16%; --s: 12px; --d: 5s; --w: 3.4s; }
.tc-scene-bubbles i:nth-child(3) { --x: 27%; --s: 6px; --d: 3.8s; --w: 4.6s; }
.tc-scene-bubbles i:nth-child(4) { --x: 70%; --s: 10px; --d: 4.6s; --w: 2.9s; }
.tc-scene-bubbles i:nth-child(5) { --x: 81%; --s: 7px; --d: 4s; --w: 3.8s; }
.tc-scene-bubbles i:nth-child(6) { --x: 91%; --s: 13px; --d: 5.2s; --w: 3.1s; }
.tc-scene-bubbles i:nth-child(7) { --x: 38%; --s: 5px; --d: 3.6s; --w: 5.4s; }
.tc-scene-bubbles i:nth-child(8) { --x: 60%; --s: 6px; --d: 3.9s; --w: 4.2s; }
.tc-scene-bubbles i:nth-child(9) { --x: 50%; --s: 9px; --d: 4.8s; --w: 6s; }
@keyframes tc-scene-bubble {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: .9; }
    75% { opacity: .55; }
    100% { opacity: 0; transform: translate(8px, -70vh) scale(1); }
}
/* the titles on an engraved enamel plaque with a gold-leaf edge instead of the frosted cloud */
body.tc-body .inv-intro--scene .inv-scene__card {
    top: 67%; aspect-ratio: auto; width: min(var(--scene-card-w, 74vw), 20rem); padding: 1.5rem 1.2rem 1.4rem; border-radius: 4px;
    background: radial-gradient(120% 90% at 50% 0%, var(--tc-enamel-hi), var(--tc-enamel) 70%, var(--inv-deep));
    -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none;
    border: 2px solid transparent; background-clip: padding-box;
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 3px color-mix(in srgb, var(--inv-shine) 60%, transparent), inset 0 0 0 5px var(--tc-enamel), inset 0 0 0 6px var(--tc-line),
        0 24px 50px -16px rgb(0 0 0 / .75);
}
body.tc-body .inv-scene__card .inv-intro__label { font: 600 .66rem/1.5 var(--tc-label); letter-spacing: .32em; color: var(--inv-accent); }
body.tc-body .inv-scene__card .inv-intro__names { font: italic 500 clamp(2rem, 9.4vw, 2.7rem)/1.1 var(--tc-display);
    background: var(--tc-metal) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
body.tc-body .inv-scene__card .inv-intro__rule { background: linear-gradient(90deg, transparent, var(--inv-accent), transparent); }
body.tc-body .inv-scene__card .inv-intro__date { font: 500 .76rem/1.4 var(--tc-label); letter-spacing: .14em; text-transform: uppercase; color: var(--tc-on-dark); }
/* short phones: the plaque sits a little lower and tighter, below the watch */
@media (min-aspect-ratio: 1 / 2) {
    body.tc-body .inv-intro--scene .inv-scene__card { top: 70%; padding: 1.1rem 1rem 1rem; width: min(var(--scene-card-w, 74vw), 19rem); }
    body.tc-body .inv-scene__card .inv-intro__names { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-scene-watch .tc-dial__trace { stroke-dashoffset: 0; }
    .tc-scene-watch .tc-dial__photo { opacity: 1; }
    .tc-scene-bubbles { display: none; }
}