/* ================================================
   Champagne Eighteen — Digital Invitation Theme
   Rose-gold glam for an 18th in a festive hall: an arched portrait rimmed in
   foil, a foil script name, a champagne coupe with rising bubbles and a small
   balloon cluster, all on one flat blush-champagne ground. The foil is a CSS /
   SVG gradient derived from the "Accent Details" pick, so it recolours with it.
   All artwork is CSS/SVG — no photo assets beyond the host's own uploads.
   Fonts (Great Vibes / Cormorant Garamond / Montserrat) all ship Serbian Latin
   as served by Google Fonts, so no "Sr" glyph patch is needed.
   ================================================ */

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Three independently pickable seeds (see the "Button Color" / "Section
       Background" / "Accent Details" pickers in the event editor). Every tint
       is computed from its seed with color-mix(), so a new pick recolours every
       card / rule / foil sheen reading the matching variable. The tiny glint
       baked into the section-title data-URI does NOT follow the pickers (same
       known limitation as the other palette themes). */
    --btn-accent:       #B76E79;
    --btn-color:        var(--btn-accent);
    --btn-color-dark:   color-mix(in srgb, var(--btn-accent) 72%, black);

    --section-bg-accent: #E9C9B8;
    --paper:      color-mix(in srgb, var(--section-bg-accent) 28%, #FFFAF7);
    --paper-alt:  color-mix(in srgb, var(--section-bg-accent) 45%, #FFFAF7);
    --card:       color-mix(in srgb, var(--section-bg-accent) 10%, #FFFDFB);

    --accent-detail: #B76E79;
    --rg:         var(--accent-detail);
    --rg-soft:    color-mix(in srgb, var(--accent-detail) 45%, white);
    --rg-pale:    color-mix(in srgb, var(--accent-detail) 16%, white);
    --rg-deep:    color-mix(in srgb, var(--accent-detail) 62%, black);
    --accent-color: var(--accent-detail);

    /* Rose-gold foil: a dark → light → dark sheen built from the accent. Used as
       background-clip:text on the name / countdown digits and as the arch rim;
       the SVG #chp-foil-grad stops read the same three tones below. */
    --foil-deep:  color-mix(in srgb, var(--rg) 72%, #3A2A2C);
    --foil-mid:   var(--rg);
    --foil-light: color-mix(in srgb, var(--rg) 28%, #FFF4EC);
    --foil: linear-gradient(115deg,
        var(--foil-deep) 0%, var(--foil-mid) 24%, var(--foil-light) 46%,
        color-mix(in srgb, var(--rg) 80%, white) 60%, var(--foil-mid) 78%, var(--foil-deep) 100%);
    /* Text variant: deeper overall with a narrow light band, so short names
       (e.g. "Sara") never land mostly on the pale part and wash into the ground. */
    --foil-text: linear-gradient(115deg,
        var(--foil-deep) 0%, var(--foil-mid) 38%,
        color-mix(in srgb, var(--rg) 55%, white) 50%, var(--foil-mid) 62%, var(--foil-deep) 100%);

    --champagne:  #E7CFA6;
    --blush:      #E8B4B8;

    --white:  #FFFFFF;
    --ink:    #3A2A2C;
    --body:   #5E4A4C;
    --muted:  #957F80;
    --radius: 14px;
    --btn-radius: 999px;
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-script:  'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
    --ff-body:    'Montserrat', system-ui, -apple-system, sans-serif;

    /* Four-point glint used as the section-title accent mark. */
    --chp-glint-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath fill='%23B76E79' d='M20 0C20.8 6.6 23.4 9.2 30 10 23.4 10.8 20.8 13.4 20 20 19.2 13.4 16.6 10.8 10 10 16.6 9.2 19.2 6.6 20 0Z'/%3E%3Cpath fill='%23D9A99F' d='M5 6C5.3 8.6 6.4 9.7 9 10 6.4 10.3 5.3 11.4 5 14 4.7 11.4 3.6 10.3 1 10 3.6 9.7 4.7 8.6 5 6ZM35 6C35.3 8.6 36.4 9.7 39 10 36.4 10.3 35.3 11.4 35 14 34.7 11.4 33.6 10.3 31 10 33.6 9.7 34.7 8.6 35 6Z'/%3E%3C/svg%3E");
}

/* SVG foil gradient stops — follow the accent picker. */
.chp-stop--deep  { stop-color: var(--foil-deep); }
.chp-stop--mid   { stop-color: var(--foil-mid); }
.chp-stop--light { stop-color: var(--foil-light); }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    font-weight: 400;
    color: var(--body);
    background-color: var(--paper);
    line-height: 1.7;
}

img { max-width: 100%; display: block; }
a { color: var(--rg-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.chp-container         { max-width: 1080px; margin: 0 auto; }
.chp-container--narrow { max-width: 640px; }

/* Foil text: the gradient shows through the glyphs; plain accent colour is the
   fallback where background-clip:text isn't supported. */
.chp-foil-text,
.chp-hero__name,
.chp-countdown__number,
.chp-footer__name {
    color: var(--rg);
    background: var(--foil-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* a hairline ink lift under the glyphs (text-shadow would show through the
       transparent fill, drop-shadow sits behind it) */
    filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent));
}

/* Every section sits on the same flat ground; a boundary is just the slim foil
   rule below (::after), which survives any section being hidden by plan tier /
   visibility toggle / missing data (it's :not(:last-child) on whatever remains). */
.chp-alt-sections > * {
    position: relative;
    background-color: var(--paper);
    background-repeat: no-repeat;
}

.chp-poem::after,
.chp-alt-sections > *:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(60%, 420px);
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rg) 60%, transparent), transparent);
    z-index: 1;
    pointer-events: none;
}

.chp-section-title {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 4.4vw, 2.4rem);
    color: var(--rg-deep);
    text-align: center;
    margin-bottom: 1.75rem;
    padding-top: 2.4rem;
    line-height: 1.15;
    position: relative;
}
.chp-section-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 22px;
    background: no-repeat center / contain var(--chp-glint-img);
}

/* ---------- Motifs ---------- */
.chp-balloon--foil  { fill: url(#chp-foil-grad); color: var(--rg-deep); }
.chp-balloon--champ { fill: url(#chp-champ-balloon-grad); color: var(--rg-deep); }
.chp-balloon--blush { fill: url(#chp-blush-balloon-grad); color: var(--rg-deep); }

.chp-bubbles circle {
    fill: none;
    stroke: var(--rg);
    stroke-width: 1.6;
    opacity: .85;
    transform-box: fill-box;
    transform-origin: center;
    animation: chp-rise 4.2s ease-in-out infinite;
}
.chp-bubbles circle:nth-child(2) { animation-delay: -1.1s; }
.chp-bubbles circle:nth-child(3) { animation-delay: -2.3s; }
.chp-bubbles circle:nth-child(4) { animation-delay: -3.0s; }
.chp-bubbles circle:nth-child(5) { animation-delay: -.5s; }

@keyframes chp-rise {
    0%   { transform: translateY(6px); opacity: 0; }
    25%  { opacity: .9; }
    100% { transform: translateY(-14px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .chp-bubbles circle,
    .chp-stage__digit,
    .chp-hero.is-revealed .chp-stage__text > *,
    .chp-gate__bottle,
    .chp-gate__cta { animation: none; }
}

.chp-fx-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.chp-fx-balloon { position: absolute; opacity: .28; }
.chp-fx-balloon--a { width: 70px;  height: 108px; top: 3.5rem; left: 8%;  transform: rotate(-10deg); }
.chp-fx-balloon--b { width: 54px;  height: 84px;  top: 5rem;   right: 9%; transform: rotate(8deg); }
.chp-fx-glint { position: absolute; fill: var(--rg); opacity: .4; }
.chp-fx-glint--a { width: 18px; height: 18px; top: 3rem; right: 20%; }
.chp-fx-glint--b { width: 12px; height: 12px; top: 8.5rem; left: 18%; }

@media (max-width: 700px) {
    .chp-fx-balloon { display: none; }
}

/* ---------- Hero: concept A of the approved prototype ----------
   A phone-proportioned stage (320:700) filling the screen height, centred over
   a full-width ground on wider screens. Inside it everything is placed in % of
   the stage height and sized in cqw of its width, exactly as the prototype, so
   the composition is identical on every screen. */
.chp-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(70% 45% at 50% 28%, #FBE3DC 0%, transparent 70%),
        radial-gradient(90% 60% at 50% 110%, #F1D4C6 0%, transparent 70%),
        #F7E7E1;
}

.chp-stage {
    position: relative;
    width: min(100%, calc(100svh * 320 / 700));
    aspect-ratio: 320 / 700;
    max-height: 100svh;
    container-type: inline-size;
    color: var(--ink);
}

.chp-hero__glitter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.chp-stage__numbers {
    position: absolute;
    left: 0;
    right: 0;
    top: 7%;
    height: 56%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.chp-stage__digit { width: 52%; height: 100%; overflow: visible; }
.chp-stage__digit--1 { margin-right: -14%; animation: chp-float 5.6s ease-in-out infinite; }
.chp-stage__digit--8 { animation: chp-float 6.4s ease-in-out -2.1s infinite; }
@keyframes chp-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-3.5%) rotate(2deg); }
}
.chp-digit-glyph {
    font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 330px;
    fill: url(#chp-digit-grad);
}

.chp-stage__strings {
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    width: 100%;
    height: 22%;
    overflow: visible;
}
.chp-stage__strings path { fill: none; stroke: #B98A88; stroke-width: 1; }

.chp-stage__photo {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    width: 40%;
    aspect-ratio: 4 / 5;
    padding: 1.4cqw;
    border-radius: 999px 999px 3cqw 3cqw;
    background: linear-gradient(115deg, #7A4048, #B76E79 30%, #F4D3C8 50%, #B76E79 70%, #7A4048);
    box-shadow: 0 6cqw 10cqw -3cqw rgba(90, 50, 56, .45);
    z-index: 3;
}
.chp-stage__photo img,
.chp-stage__placeholder {
    width: 100%;
    height: 100%;
    border-radius: 999px 999px 2cqw 2cqw;
    display: block;
}
.chp-stage__photo img { object-fit: cover; }
.chp-stage__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12cqw;
    background: #F4DAD3;
}

.chp-stage__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4cqw;
    text-align: center;
    z-index: 4;
}
.chp-stage__eyebrow {
    font: 600 2.9cqw/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--rg-deep);
}
/* The prototype's foil name. The padding (cancelled by margins) keeps
   background-clip:text from slicing Great Vibes' tall capitals and tails. */
.chp-stage__name {
    font-family: var(--ff-script);
    font-weight: 400;
    font-size: calc(13.5cqw * var(--name-scale, 1));
    line-height: 1.15;
    margin: -.24em 0 -.32em;
    padding: .24em .16em .32em;
    max-width: 100%;
    text-wrap: balance;
    color: var(--rg);
    background: linear-gradient(115deg, #5E3A3E 0%, #B76E79 38%, #F2CFC4 50%, #B76E79 62%, #5E3A3E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.chp-stage__milestone {
    font: 500 3.6cqw/1 var(--ff-display);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #957F80;
}
.chp-stage__date {
    font: 600 3.8cqw/1 var(--ff-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rg-deep);
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* A floating bottom bar (the demo's preview controls, or a guest's tasks
   pill) would cover the date line, so lift the copy clear of it only then. */
body:has(.dpb-fabs) .chp-stage__text,
body:has(.gt-pill) .chp-stage__text { bottom: 11%; }
body:has(.dpb-fabs) .chp-stage__strings,
body:has(.gt-pill) .chp-stage__strings { height: 16%; }

/* the copy rises in, one line after another, as the gate opens (app.js adds
   .is-revealed); without the gate it simply stays put */
.chp-hero.is-revealed .chp-stage__text > * { animation: chp-rise .9s cubic-bezier(.2, .7, .3, 1) both; }
.chp-hero.is-revealed .chp-stage__text > :nth-child(2) { animation-delay: .15s; }
.chp-hero.is-revealed .chp-stage__text > :nth-child(3) { animation-delay: .3s; }
.chp-hero.is-revealed .chp-stage__text > :nth-child(4) { animation-delay: .45s; }
@keyframes chp-rise { from { opacity: .001; transform: translateY(3cqw); } }

/* ---------- Print-only hero pieces (print/portrait.blade.php) ----------
   The paper card's photo slot and name keep the arch + foil-name styles. */
.chp-hero__arch {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 6px;
    border-radius: 999px 999px 22px 22px;
    background: var(--foil);
    box-shadow: 0 26px 60px color-mix(in srgb, var(--rg-deep) 22%, transparent);
}
.chp-hero__arch-inner {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 17px 17px;
    overflow: hidden;
    background: var(--rg-pale);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--paper) 85%, transparent);
}

.chp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.chp-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
}

/* background-clip:text only paints inside the element's box, and Great Vibes'
   capitals and tails reach well past the line box — so the box gets generous
   padding (cancelled by equal negative margins, layout unchanged) to keep the
   foil from slicing glyphs off top and bottom. --name-scale (set in the hero
   from the name's length) shrinks long first + last names; text-wrap:balance
   splits any that still need two lines evenly. */
.chp-hero__name {
    font-family: var(--ff-script);
    font-weight: 400;
    font-size: calc(clamp(4rem, 9vw, 6.4rem) * var(--name-scale, 1));
    line-height: 1.12;
    padding: .24em .16em .32em;
    margin: -.24em -.16em calc(.2rem - .32em);
    text-wrap: balance;
    overflow-wrap: break-word;
}


/* ---------- Hero shape divider (partial) — rule · bubbles · rule ---------- */
.chp-shape {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(74%, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    z-index: 2;
}
.chp-shape-bottom { bottom: 24px; }
.chp-shape-top { top: 24px; }
.chp-shape__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule, var(--rg)), transparent);
}
.chp-shape__bubbles {
    flex: none;
    width: 30px;
    height: 22px;
}
.chp-shape__bubbles circle {
    fill: none;
    stroke: var(--rg);
    stroke-width: 1.2;
}

/* ---------- Intro gate: pop the champagne (partials/intro.blade.php) ----------
   Behaviour comes from the shared envelope JS via #theme-envelope (it adds
   body.env-has-envelope / env-scroll-lock and .is-open); the shared
   component's own CSS isn't on this page, so the two body rules live here. */
body.env-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.chp-gate {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6vh 6vw;
    cursor: pointer;
    background:
        radial-gradient(60% 40% at 50% 38%, #FFF3EE 0%, transparent 70%),
        linear-gradient(160deg, #F6DCD6 0%, #EBC2BE 55%, #DDA9AA 100%);
    transition: opacity .7s ease .55s, visibility 0s linear 1.3s;
}
.env-has-envelope .chp-gate { display: flex; }
.chp-gate:focus-visible { outline: 3px solid var(--rg); outline-offset: -8px; }
.chp-gate.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.chp-gate__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    animation: chp-gate-rise .8s ease both;
}
@keyframes chp-gate-rise { from { opacity: 0; transform: translateY(18px); } }

.chp-gate__kicker {
    font-family: var(--ff-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8A4E57;
}

.chp-gate__bottle {
    height: min(44vh, 360px);
    width: auto;
    overflow: visible;
    filter: drop-shadow(0 18px 26px rgba(110, 60, 66, .35));
    transform-origin: 50% 90%;
    animation: chp-wiggle 2.4s ease-in-out infinite;
}
@keyframes chp-wiggle {
    0%, 70%, 100% { transform: rotate(0); }
    76% { transform: rotate(-4deg); }
    82% { transform: rotate(4deg); }
    88% { transform: rotate(-2deg); }
}
.chp-gate__cork { transform-box: fill-box; transform-origin: center; }
.chp-gate__label-name { font-family: var(--ff-script); font-size: 22px; fill: #7A4048; }
.chp-gate__label-age {
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    fill: #A55E69;
}

.chp-gate__name {
    font-family: var(--ff-script);
    font-size: clamp(2.2rem, 8vw, 3rem);
    line-height: 1.15;
    color: #7A4048;
    padding: 0 .2em;
}

.chp-gate__cta {
    font-family: var(--ff-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    background: #A55E69;
    border-radius: 999px;
    padding: .95rem 1.7rem;
    animation: chp-pulse 2.2s ease-out infinite;
}
@keyframes chp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(165, 94, 105, .45); }
    100% { box-shadow: 0 0 0 18px rgba(165, 94, 105, 0); }
}

/* the pop: bottle stops, cork flies, the gate fades once the confetti is up */
.chp-gate.is-open .chp-gate__bottle { animation: none; }
.chp-gate.is-open .chp-gate__cork { animation: chp-cork-fly .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes chp-cork-fly { to { transform: translate(40%, -900%) rotate(540deg); opacity: 0; } }

/* confetti layer for the pop (app.js), above the gate while it fades */
.chp-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

/* ---------- Floating topbar ---------- */
.chp-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background .3s ease, backdrop-filter .3s ease;
}

@media (min-width: 601px) {
    .chp-topbar.scrolled {
        background: color-mix(in srgb, var(--paper) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.chp-topbar__links {
    display: flex;
    gap: 1.25rem;
}
.chp-topbar__links a {
    font-family: var(--ff-body);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--body);
    transition: color .2s;
}
.chp-topbar__links a:hover { color: var(--rg-deep); text-decoration: none; }

.chp-topbar__toggle { display: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, positioned here at opposite bottom
   corners at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

@media (max-width: 600px) {
    .chp-topbar { justify-content: flex-start; }
    .chp-topbar__toggle { order: -1; }

    .chp-topbar__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1.5px solid rgba(255, 255, 255, .45);
        border-radius: 50%;
        background: color-mix(in srgb, var(--rg-soft) 60%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .chp-topbar__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .chp-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .chp-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .chp-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .chp-topbar__links {
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: color-mix(in srgb, var(--paper) 97%, transparent);
        border: 1px solid color-mix(in srgb, var(--rg) 45%, transparent);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(58, 42, 44, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .chp-topbar__links.is-open {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .chp-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: var(--body);
        white-space: normal;
    }
    .chp-topbar__links a:hover {
        background: color-mix(in srgb, var(--rg) 12%, transparent);
        color: var(--rg-deep);
    }
}

/* ---------- Countdown ---------- */
.chp-countdown {
    padding: 5rem 1.25rem 6rem;
    text-align: center;
}
.chp-audio { padding: 5rem 1.25rem 6rem; text-align: center; }

.chp-countdown__intro {
    font-family: var(--ff-display);
    font-style: italic;
    color: var(--body);
    font-size: 1.2rem;
    max-width: 440px;
    margin: 0 auto;
}

.chp-countdown__timer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

/* Each unit is a small card with a foil top edge, like a gilded place card. */
.chp-countdown__unit {
    position: relative;
    min-width: 100px;
    padding: 1.5rem .6rem 1.05rem;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--rg) 22%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(58, 42, 44, .07);
    overflow: hidden;
}
.chp-countdown__unit::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--foil);
}

.chp-countdown__number {
    display: block;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 2.7rem;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.chp-countdown__label {
    display: block;
    font-family: var(--ff-body);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .62rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: .55rem;
}

/* ---------- Framed card (note) ---------- */
.chp-card {
    position: relative;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--rg) 26%, transparent);
    border-radius: var(--radius);
    padding: 3rem 2.25rem 2.75rem;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 16px 42px rgba(58, 42, 44, .08);
}
/* inner foil keyline, a printed-card touch */
.chp-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--rg) 20%, transparent);
    border-radius: calc(var(--radius) - 5px);
    pointer-events: none;
}
.chp-card__glint {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 1.1rem;
    fill: var(--rg);
}

.chp-poem {
    padding: 5rem 1.25rem 6rem;
    text-align: center;
    position: relative;
    background-color: var(--paper);
}
.chp-poem__text {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--ink);
    white-space: pre-line;
}

/* ---------- Gallery (generic <x-gallery-grid>) ---------- */
.chp-gallery { padding: 5rem 1.25rem 6rem; text-align: center; }
/* Tiles become small arched windows (4:5, semicircular top), echoing the
   hero portrait — the same shape, no added ornament. The component sizes each
   cell on .gg-item-wrap (the tile is absolutely inset in it), so the ratio goes
   there. Two classes so these beat the component's own pushed rules. */
.chp-gallery .gg-grid { max-width: 720px; margin-inline: auto; } /* 4 across on desktop */
.chp-gallery .gg-item-wrap { aspect-ratio: 4 / 5; }
.chp-gallery .gg-item {
    aspect-ratio: auto; /* the component's 1/1 would otherwise win over the inset height */
    height: 100%;
    border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
    border: 1px solid color-mix(in srgb, var(--rg) 30%, transparent);
    box-shadow: 0 8px 20px rgba(58, 42, 44, .08);
}

/* ---------- Growing Up (generic <x-story-timeline>) ----------
   Component styles are pushed after this sheet, so overrides use two classes. */
.chp-story { padding: 5rem 1.25rem 6rem; text-align: center; }
.chp-story .st-intro {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--body);
}
.chp-story .st-timeline { text-align: left; }
/* bubble markers: a hollow foil ring on the spine instead of a solid dot */
.chp-story .st-item::before {
    background: var(--paper);
    border: 2px solid var(--rg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rg) 12%, transparent);
}
.chp-story .st-item__card {
    background: var(--card);
    border-color: color-mix(in srgb, var(--rg) 24%, transparent);
    box-shadow: 0 12px 28px rgba(58, 42, 44, .07);
}
.chp-story .st-item__period {
    font-family: var(--ff-body);
    letter-spacing: .14em;
    color: var(--rg-deep);
}
.chp-story .st-item__title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
}
.chp-story .st-item__desc { color: var(--body); }
/* The caption leaves the photo: a small script line under it instead of the
   component's dark overlay bar, which was the heaviest thing on the page. */
.chp-story .st-item__photo { margin-bottom: .6rem; }
.chp-story .st-item__photo-caption {
    position: static;
    display: block;
    padding: .55rem .5rem 0;
    background: none;
    border-radius: 0;
    font-family: var(--ff-script);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--rg);
}

/* ---------- Celebration Timeline (Program) ---------- */
.chp-program {
    padding: 5rem 1.25rem 6rem;
    text-align: center;
}
.chp-program__list {
    max-width: 460px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.chp-program__line {
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.chp-program__line strong {
    font-weight: 600;
    color: var(--rg-deep);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.chp-program__sep { color: var(--rg-soft); }
.chp-program__where {
    font-family: var(--ff-body);
    font-size: .88rem;
    color: var(--muted);
    margin-top: .2rem;
}
.chp-program__where a { color: var(--rg-deep); margin-left: .4em; }

/* ---------- Dress Code / Good to Know ---------- */
.chp-dress-code   { padding: 5rem 1.25rem 6rem; text-align: center; }
.chp-good-to-know { padding: 5rem 1.25rem 6rem; text-align: center; }

/* ---------- Find the Party (Map) ---------- */
.chp-location { padding: 5rem 1.25rem 6rem; text-align: center; }
.chp-location__map { max-width: 560px; margin: 1rem auto 0; }
.chp-location__map iframe {
    width: 100%;
    height: 320px;
    display: block;
    border: 0;
    border-radius: var(--radius);
    box-shadow:
        0 0 0 4px var(--card),
        0 0 0 5px color-mix(in srgb, var(--rg) 40%, transparent),
        0 14px 34px rgba(58, 42, 44, .14);
}
.chp-location__info { margin-top: 2.25rem; }
.chp-location__name {
    font-family: var(--ff-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 1.2rem;
    color: var(--rg-deep);
    margin-bottom: .35rem;
}
.chp-location__address {
    font-family: var(--ff-body);
    color: var(--muted);
    margin-bottom: 1.4rem;
}

/* ---------- Accommodation ---------- */
.chp-accommodation { padding: 5rem 1.25rem 6rem; text-align: center; }

/* ---------- Album / Closing ---------- */
.chp-album { padding: 5rem 1.25rem; text-align: center; }
.chp-album__text { font-family: var(--ff-display); font-size: 1.15rem; opacity: .85; margin-bottom: 1.75rem; }

.chp-closing { padding: 2.75rem 1.25rem; text-align: center; }
.chp-closing p {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ink);
    opacity: .85;
    margin: 0;
}

/* ---------- Gallery upload / Guest Wall ---------- */
.chp-guest-wall     { padding: 5rem 1.25rem 6rem; text-align: center; }
/* Wishes slider (<x-guest-wall-slider>): one wish at a time on a framed card
   with the same inner foil keyline as the note card. */
.chp-guest-wall .gws-swiper {
    position: relative;
    max-width: 560px;
    padding-top: 2.25rem;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--rg) 26%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 16px 42px rgba(58, 42, 44, .08);
}
.chp-guest-wall .gws-swiper::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--rg) 20%, transparent);
    border-radius: calc(var(--radius) - 5px);
    pointer-events: none;
    z-index: 2;
}
.chp-guest-wall .gws-text { color: var(--ink); }
.chp-guest-wall .gws-name { font-family: var(--ff-body); color: var(--rg-deep); }
.chp-guest-wall .gws-slide { padding-bottom: 1.5rem; }
.chp-guest-wall .gws-swiper .swiper-pagination { padding-bottom: 1.4rem; }
.chp-gallery-upload { padding: 5rem 1.25rem 6rem; text-align: center; }
.chp-gallery-upload .gu-form {
    max-width: 620px;
    padding: 0 1.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- RSVP ---------- */
.chp-rsvp {
    position: relative;
    overflow: hidden;
    padding: 5rem 1.25rem 6rem;
}
.chp-rsvp .rsvp-deadline {
    background: transparent;
    margin-bottom: 10px;
}

/* The balloons sit behind the heading/form (z-index:0), so both need their own
   stacking context above it — a position:static title would otherwise paint
   underneath the decoration regardless of DOM order. */
.chp-rsvp .chp-section-title,
.chp-rsvp .rsvp-layout-wrap {
    position: relative;
    z-index: 2;
}

.rsvp-layout-wrap {
    max-width: 540px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--rg) 26%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 22px 54px rgba(58, 42, 44, .1);
    padding: 3.5rem 2.5rem;
}

@media (max-width: 500px) {
    .rsvp-layout-wrap { padding: 2.5rem 1.25rem; }
}

.chp-rsvp .form__group label {
    display: block;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: .72rem;
    color: var(--rg-deep);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.chp-rsvp .form__group input[type="text"],
.chp-rsvp .form__group input[type="email"],
.chp-rsvp .form__group input[type="tel"],
.chp-rsvp .form__group select,
.chp-rsvp .form__group textarea {
    width: 100%;
    padding: .9rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--rg) 30%, transparent);
    border-radius: 10px;
    font-family: var(--ff-body);
    font-size: .95rem;
    color: var(--ink);
    background-color: color-mix(in srgb, var(--white) 70%, var(--paper));
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.chp-rsvp .form__group .rsvp-stepper {
    background: color-mix(in srgb, var(--white) 70%, var(--paper));
}

.chp-rsvp .form__group input[type="text"]:focus,
.chp-rsvp .form__group input[type="email"]:focus,
.chp-rsvp .form__group input[type="tel"]:focus,
.chp-rsvp .form__group select:focus,
.chp-rsvp .form__group textarea:focus {
    border-color: var(--rg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg) 18%, transparent);
}

.chp-rsvp .form__error {
    display: block;
    color: var(--btn-color-dark);
    font-size: .82rem;
    margin-top: .3rem;
}

/* ---------- Buttons ---------- */
/* A soft diagonal sheen over the button colour reads as satin foil. */
.chp-btn {
    display: block;
    width: 100%;
    padding: .9rem 2rem;
    background:
        linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .26) 48%, transparent 70%),
        var(--btn-color);
    color: var(--white);
    font-family: var(--ff-body);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: .8rem;
    border: 1px solid var(--btn-color);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--btn-color) 30%, transparent);
    margin-top: .5rem;
}
.chp-btn:hover {
    background:
        linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .2) 48%, transparent 70%),
        var(--btn-color-dark);
    border-color: var(--btn-color-dark);
    color: var(--white);
    transform: translateY(-2px);
    text-decoration: none;
}
.chp-btn--outline {
    background: transparent;
    color: var(--rg-deep);
    border-color: var(--rg);
    box-shadow: none;
}
.chp-btn--outline:hover {
    background: var(--rg);
    border-color: var(--rg);
    color: var(--white);
}
.chp-location .chp-btn,
.chp-album .chp-btn { display: inline-block; width: auto; }

/* ---------- Footer ---------- */
.chp-footer {
    background-color: var(--paper-alt);
    color: var(--body);
    text-align: center;
    padding: 3rem 1.25rem 3.25rem;
    border-top: 1px solid color-mix(in srgb, var(--rg) 30%, transparent);
}
.chp-footer p { margin-bottom: .3rem; font-family: var(--ff-body); }
.chp-footer a { color: var(--rg-deep); }

.chp-footer__coupe {
    display: block;
    width: 52px;
    height: auto;
    margin: 0 auto .9rem;
    overflow: visible;
}

/* two classes: beats `.chp-footer p`'s body font */
.chp-footer .chp-footer__name {
    display: inline-block;
    max-width: 100%;
    font-family: var(--ff-script);
    font-size: 2.8rem;
    line-height: 1.15;
    /* same glyph-clipping guard as the hero name */
    padding: .24em .16em .32em;
    margin: -.24em 0 calc(.1rem - .32em);
    text-wrap: balance;
}
.chp-footer__signoff {
    max-width: 22rem;
    margin: .75rem auto 1.25rem !important;
    color: var(--muted);
}
.chp-footer__cal {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}
.chp-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 500px) {
    /* nowrap + scroll keeps all four units on one row down to ~360px instead of
       flex-wrap dropping them to a 2x2 block. */
    .chp-countdown__timer {
        gap: .5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .chp-countdown__timer::-webkit-scrollbar { display: none; }
    .chp-countdown__unit {
        min-width: 62px;
        padding: 1.1rem .45rem .8rem;
        flex-shrink: 0;
    }
    .chp-countdown__number { font-size: 2.2rem; }
}

/* Standardised horizontal gutter across every content section on mobile
   (padding-x: 1rem), matching the convention used across the app's other
   themes. Appended at the very end so equal-specificity source order guarantees
   this wins over each section's own base padding rule above. */
@media (max-width: 600px) {
    .chp-poem,
    .chp-countdown,
    .chp-audio,
    .chp-story,
    .chp-gallery,
    .chp-program,
    .chp-dress-code,
    .chp-good-to-know,
    .chp-location,
    .chp-accommodation,
    .chp-guest-wall,
    .chp-gallery-upload,
    .chp-album,
    .chp-closing,
    .chp-rsvp,
    .chp-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}