/* DASMA VIP — acrylic glass theme (theme.Acrylic, body.ac). Loaded after invite.css, only for this
   theme: the invitation opens as a film of a clear acrylic plaque in a dark room, the invitation is
   etched onto the glass once the camera settles, the camera moves into the glass and the page is laid
   out as glass on black velvet, in champagne gold. The film lives in /static/themes/<acrylic>/;
   invite-acrylic.js plays it and maps the card onto the plaque. */

.ac {
  --velvet: #0a0806;
  --foil: linear-gradient(174deg, #e9c983 0%, #fff1cb 28%, #d4a95c 52%, #f3da9c 76%, #b98c43 100%);
  --gild: linear-gradient(105deg, transparent 42%, rgba(255, 252, 240, .95) 50%, transparent 58%), linear-gradient(176deg, #f0d48f 0%, #fff4d4 26%, #deb266 50%, #f7e1a6 74%, #c69a4e 100%);
  --gold-ink: color-mix(in srgb, var(--accent) 82%, #fff4d8);
  --gold-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --frost-2: color-mix(in srgb, var(--text) 74%, transparent);
  --frost-3: color-mix(in srgb, var(--text) 58%, transparent);
  --hair: color-mix(in srgb, var(--text) 14%, transparent);
  --glass: linear-gradient(156deg, rgba(255, 249, 240, .085) 0%, rgba(255, 249, 240, .028) 36%, rgba(255, 249, 240, .02) 64%, rgba(255, 249, 240, .06) 100%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .24), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(255, 255, 255, .05);
  color-scheme: dark;
}

/* ---------- the opening ---------- */
.intro-acr { padding: 0; display: block; overflow: hidden; background: #0a0806; color: #f6f1ea; }
html:not(.js-ready) .intro-acr { display: none; }
.intro-acr::before { display: none; }
/* around a stage narrower than the screen, a blurred copy of the first frame continues the room */
.acr-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.12); }
@media (max-aspect-ratio: 9/16) { .acr-backdrop, .intro-acr::after { display: none; } }
/* and the room falls off into darkness towards the edges of a wide screen */
.intro-acr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 82% at 50% 46%, rgba(10, 8, 6, 0) 40%, rgba(10, 8, 6, .62) 78%, rgba(10, 8, 6, .94) 100%); }
.acr-stage { z-index: 1; }
/* The stage keeps the film's 9:16 frame: on a phone it fills the height and the sides of the room
   are cut (never the plaque), on a wider screen it fills the width and then stops, and the backdrop
   takes over. invite-acrylic.js maps the card in this box's pixels. */
.acr-stage { --sw: clamp(56.25vh, 100vw, 64vh); position: absolute; left: 50%; top: 50%; width: var(--sw); height: calc(var(--sw) * 16 / 9); transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@supports (height: 100dvh) { .acr-stage { --sw: clamp(56.25dvh, 100vw, 64dvh); } }
/* the camera: its origin is the plaque's centre in the film, so the push-in and the final move go
   into the glass */
.acr-cam { position: absolute; inset: 0; transform-origin: 48.4% 53.3%; }
@media (min-aspect-ratio: 16/25) {
  .acr-cam { -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
}
.acr-cam > img, .acr-cam > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* the film shows itself only once it really plays: its first frame is the poster underneath */
.acr-video { opacity: 0; }
html.acr-film .acr-video { opacity: 1; }
/* the last frame, as a still: under the veil while the card is etched, and the fallback for a film
   that could not play (it fades in over whatever frame the film stopped on) */
.acr-end { opacity: 0; }
html.acr-etch .acr-end.is-in, html.acr-static .acr-end.is-in { opacity: 1; }
html.acr-still .acr-end.is-in { opacity: 1; transition: opacity .6s ease; }
/* primed while the gate is up (invite-acrylic.js): the still and the card are drawn at 1%, invisible,
   so the browser has them decoded and rasterised before the moment they appear */
.acr-end.is-in.is-primed { opacity: .01; }

/* The card, laid out flat at 450 x 800 and mapped onto the plaque's inner frame by a matrix3d. All
   sizes in here are card pixels. */
.acr-quad { position: absolute; left: 0; top: 0; width: 450px; height: 800px; transform-origin: 0 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.acr-quad.is-ready.is-on, .acr-quad.is-ready.is-primed, html.acr-static .acr-end.is-in ~ .acr-quad.is-ready { visibility: visible; }
.acr-quad.is-primed:not(.is-on) .acr-tint, .acr-quad.is-primed:not(.is-on) .acr-words { opacity: .01; }
.acr-tint { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(110% 38% at 50% 18%, rgba(20, 13, 8, .55), rgba(20, 13, 8, 0) 100%), radial-gradient(120% 70% at 50% 46%, rgba(20, 13, 8, .36), rgba(20, 13, 8, .1) 100%); }
.acr-words { position: absolute; inset: 0; padding: 58px 38px 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; opacity: 0;
  font-family: var(--body); color: rgba(251, 247, 241, .95); text-shadow: 0 0 1px rgba(255, 255, 255, .55), 0 1px 10px rgba(10, 6, 3, .6); }
.acr-quad.is-on .acr-tint, .acr-quad.is-on .acr-words, html.acr-static .acr-tint, html.acr-static .acr-words { opacity: 1; }
.acr-quad.is-fade .acr-tint, .acr-quad.is-fade .acr-words { transition: opacity 1.4s ease; }
/* --k scales the whole card and --nk the names: invite-acrylic.js steps them down until long names
   and a long venue fit on the glass (the pieces never shrink by themselves, so an overflow shows) */
.acr-words { --k: 1; --nk: 1; }
.acr-words > * { flex-shrink: 0; }
.acr-words p { margin: 0; max-width: 100%; }
.acr-kicker { font-size: calc(16px * var(--k)); letter-spacing: .32em; text-transform: uppercase; margin-bottom: calc(24px * var(--k)) !important; padding-left: .32em; }
.acr-names { font-family: var(--display); font-style: italic; font-weight: 400; font-size: calc(76px * var(--k) * var(--nk)); line-height: .98; letter-spacing: -.01em; display: flex; flex-direction: column; align-items: center; font-variation-settings: 'opsz' 96; }
.acr-names > span { max-width: 100%; white-space: nowrap; }
.acr-names.is-wrap > span { white-space: normal; }
.acr-names.is-break > span { overflow-wrap: anywhere; }
.acr-amp { font-size: .56em; line-height: 1.2; }
.acr-req { font-size: calc(19px * var(--k)); line-height: 1.45; margin-top: calc(20px * var(--k)) !important; max-width: 330px !important; text-wrap: balance; }
.acr-rule { position: relative; flex: none; width: 84px; height: 1px; margin: calc(22px * var(--k)) 0; background: linear-gradient(90deg, transparent, #f0d28e 30%, #fff0c6 50%, #f0d28e 70%, transparent); box-shadow: 0 0 8px rgba(246, 206, 130, .45); }
.acr-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; transform: rotate(45deg); background: #f6dc9c; box-shadow: 0 0 6px rgba(246, 206, 130, .8); }
.acr-date { font-family: var(--display); font-style: italic; font-size: calc(32px * var(--k)); line-height: 1.2; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.acr-time { font-size: calc(18px * var(--k)); letter-spacing: .06em; margin-top: calc(6px * var(--k)) !important; }
.acr-venue { font-family: var(--display); font-size: calc(29px * var(--k)); line-height: 1.2; font-variation-settings: 'opsz' 48; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.acr-place { font-size: calc(16.5px * var(--k)); letter-spacing: .05em; margin-top: calc(4px * var(--k)) !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* gold leaf: a fixed foil (the light that crosses the card once it is etched is .acr-sweep) */
.acr-gild { color: transparent; text-shadow: none; padding: 0 .08em; background-image: var(--gild); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(24, 14, 4, .6)); }
.acr-sweep { position: absolute; top: -20%; bottom: -20%; left: 0; width: 60%; transform: translateX(-140%) skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 250, 242, .05) 35%, rgba(255, 250, 242, .15) 50%, rgba(255, 250, 242, .05) 65%, transparent); }
.acr-quad.is-done .acr-sweep { animation: acrSweep 2.2s cubic-bezier(.55, .1, .35, 1) both; }
@keyframes acrSweep { to { transform: translateX(260%) skewX(-16deg); } }
/* the breath's veil (a canvas over the card's box, drawn by invite-acrylic.js) */
.acr-veil { position: absolute; left: 0; top: 0; visibility: hidden; max-width: none; pointer-events: none; }
.acr-veil.is-on { visibility: visible; }

/* the gate: who the invitation is for, and the button */
.acr-gate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
  padding: 26vh 24px calc(env(safe-area-inset-bottom, 0px) + 4.5vh);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0) 0%, rgba(10, 8, 6, .5) 38%, rgba(10, 8, 6, .86) 100%); transition: opacity .7s ease, visibility 0s linear .7s; }
.acr-gate > * { pointer-events: auto; animation: acrGateIn 1.3s var(--ease-out) backwards; }
.acr-gate > :nth-child(1) { animation-delay: .35s; } .acr-gate > :nth-child(2) { animation-delay: .6s; } .acr-gate > :nth-child(3) { animation-delay: .85s; }
@keyframes acrGateIn { from { opacity: 0; transform: translateY(10px); } }
.acr-for { margin: 0; max-width: 22ch; font-family: var(--display); font-style: italic; font-size: clamp(26px, 7.2vw, 36px); line-height: 1.18; color: #f6f1ea; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); overflow-wrap: break-word; }
.acr-for span { display: block; margin-bottom: 8px; font-family: var(--body); font-style: normal; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(246, 241, 234, .72); }
.acr-for-long { font-size: clamp(23px, 6.2vw, 31px); }
.acr-for-xlong { max-width: 26ch; font-size: clamp(20px, 5.2vw, 26px); }
.acr-open { position: relative; overflow: hidden; margin-top: 22px; padding: 15px 30px; border-radius: 2px; cursor: pointer; font-family: var(--body); font-size: 15px; letter-spacing: .08em; color: #f6f1ea;
  background: linear-gradient(160deg, rgba(255, 249, 240, .16), rgba(255, 249, 240, .05)); border: 1px solid rgba(255, 246, 232, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px -10px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s, box-shadow .3s; }
.acr-open:hover { border-color: rgba(255, 238, 210, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 0 28px -6px rgba(243, 220, 180, .38), 0 10px 30px -10px rgba(0, 0, 0, .7); }
.acr-open:focus-visible { outline: 2px solid #f3dcb4; outline-offset: 3px; }
/* light runs across the button now and then: this is what to touch */
.acr-open::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-160%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 250, 240, .28), transparent); animation: acrCue 4.2s cubic-bezier(.55, .1, .35, 1) 2.4s infinite; }
@keyframes acrCue { 0% { transform: translateX(-160%) skewX(-18deg); } 30%, 100% { transform: translateX(330%) skewX(-18deg); } }
.acr-note { margin: 14px 0 0; font-family: var(--body); font-size: 13px; letter-spacing: .06em; color: rgba(246, 241, 234, .6); }

/* the tap: the gate fades, the film plays, the card is etched, then the camera moves in */
html.acr-play .acr-gate { opacity: 0; visibility: hidden; }
/* reduced motion: the invitation is already etched on the plaque, so the gate keeps to the bottom
   edge and does not repeat the couple's names over it */
html.acr-static .intro-acr.is-etched .acr-gate { padding-top: 9vh; background: linear-gradient(180deg, rgba(10, 8, 6, 0), rgba(10, 8, 6, .82) 60%); }
html.acr-static .intro-acr.is-etched .acr-for-couple { display: none; }
html.acr-play .acr-stage { cursor: default; }
html.acr-play .acr-cam { will-change: transform; }
html.acr-play .acr-open::after { animation: none; }
html.acr-etch .acr-cam { transform: scale(1.045); transition: transform 7s cubic-bezier(.3, .1, .3, 1); }
html.acr-zoom .acr-cam { transform: scale(2.2); transition: transform 1.3s cubic-bezier(.6, 0, .3, 1); }
html.acr-zoom .acr-backdrop { opacity: 0; transition: opacity .8s ease; }
/* the veil lifts while the camera is still moving: the page is what lies inside the glass. The page
   is revealed .25 s before the camera starts (invite-acrylic.js), so the veil waits for it, and it is
   gone before invite.js hides the opening altogether (intro-done, 1.25 s after the reveal) */
html.intro-open .intro-acr { transition: opacity .75s cubic-bezier(.4, 0, .2, 1) .42s, visibility 0s linear 1.17s; }
/* Failsafe: whatever happens to the script after the tap, the veil is gone 17.5 s later and the page
   scrolls again. !important beats the reduced-motion kill switch: this is not decoration. */
html.acr-play:not(.intro-open) .intro-acr { animation: introFailsafe 0s linear 17.5s forwards !important; }
html.acr-play.intro-lock:not(.intro-open) { animation: acrUnlock 0s linear 17.5s forwards !important; }
@keyframes acrUnlock { to { overflow: visible; } }

/* ---------- the page: glass on black velvet ---------- */
/* The room's light stays behind the page: a few soft glows from the chandelier and a velvet grain. */
body.ac::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .9  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(34vmax 34vmax at 6% 18%, rgba(243, 214, 168, .11), rgba(243, 214, 168, .035) 45%, transparent 70%),
    radial-gradient(28vmax 28vmax at 98% 46%, rgba(243, 214, 168, .09), rgba(243, 214, 168, .03) 45%, transparent 70%),
    radial-gradient(40vmax 40vmax at 50% 108%, rgba(243, 214, 168, .08), transparent 70%); }
.ac .inv { position: relative; }
.ac h1, .ac h2, .ac h3 { font-weight: 400; }

/* The concave-cornered frame etched into the plaque, drawn with gradients so it takes the theme's
   gold: four quarter rings, each centred on its corner, and four hairlines between them. */
.ac .inv:not(.layout-photo) .hero::after, .ac .place::after, .ac .rsvp-box::after {
  content: ""; position: absolute; inset: 11px; pointer-events: none; --fr: 18px; --fc: var(--gold-line);
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--fr) - .9px), var(--fc) calc(var(--fr) - .35px), var(--fc) calc(var(--fr) + .35px), transparent calc(var(--fr) + .9px)) 0 0 / var(--fr) var(--fr) no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--fr) - .9px), var(--fc) calc(var(--fr) - .35px), var(--fc) calc(var(--fr) + .35px), transparent calc(var(--fr) + .9px)) 100% 0 / var(--fr) var(--fr) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .9px), var(--fc) calc(var(--fr) - .35px), var(--fc) calc(var(--fr) + .35px), transparent calc(var(--fr) + .9px)) 0 100% / var(--fr) var(--fr) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .9px), var(--fc) calc(var(--fr) - .35px), var(--fc) calc(var(--fr) + .35px), transparent calc(var(--fr) + .9px)) 100% 100% / var(--fr) var(--fr) no-repeat,
    linear-gradient(var(--fc), var(--fc)) 50% 0 / calc(100% - 2 * var(--fr)) 1px no-repeat,
    linear-gradient(var(--fc), var(--fc)) 50% 100% / calc(100% - 2 * var(--fr)) 1px no-repeat,
    linear-gradient(var(--fc), var(--fc)) 0 50% / 1px calc(100% - 2 * var(--fr)) no-repeat,
    linear-gradient(var(--fc), var(--fc)) 100% 50% / 1px calc(100% - 2 * var(--fr)) no-repeat; }
.ac .inv:not(.layout-photo) .hero::after { inset: 13px; --fr: 24px; }
@media (max-width: 520px) { .ac .inv:not(.layout-photo) .hero::after { inset: 10px; --fr: 18px; } .ac .place::after, .ac .rsvp-box::after { inset: 8px; --fr: 14px; } }

/* The hero is the plaque the camera moved into: a slab of glass with its etched frame, a cold
   reflection across it, the names in gold leaf. */
.ac .inv:not(.layout-photo) .hero { margin-top: 14px; padding: clamp(50px, 12vw, 84px) clamp(24px, 7vw, 56px) clamp(46px, 11vw, 74px); border-radius: 4px; isolation: isolate; overflow: hidden;
  background: var(--glass); border: 1px solid rgba(255, 246, 232, .15); box-shadow: var(--glass-edge), 0 50px 90px -46px rgba(0, 0, 0, .95); }
/* the photograph keeps inside the slab's padding (its base width follows the viewport, not the box) */
.ac .inv:not(.layout-photo) .hero-photo { max-width: 100%; }
.ac .inv:not(.layout-photo) .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, .014) 53%, transparent 61%); }
.ac .inv-lang a { border-color: rgba(255, 246, 232, .2); color: var(--frost-2); background: rgba(255, 249, 240, .04); letter-spacing: .18em; }
.ac .layout-photo .inv-lang a { background: rgba(10, 8, 6, .45); color: #f6f1ea; border-color: rgba(255, 246, 232, .35); }
.ac .inv-lang a:hover { color: var(--text); border-color: var(--gold-line); }
.ac .hero .invite, .ac .hero-cover-text .invite { font-size: .7rem; letter-spacing: .32em; color: var(--frost-2); }

.ac .names { font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.01em; overflow-wrap: break-word; padding: .04em .1em; color: var(--gold-ink); }
.ac .names .amp { font-size: .52em; margin-block: 10px; color: var(--gold-ink); }
.ac .layout-editorial .names .amp { margin-block: 0; }
.ac .tagline { font-style: italic; color: var(--frost-2); font-size: 1.25rem; font-variation-settings: 'opsz' 28; }
/* gold leaf: painted on the heading, or, while invite-motion.js has the names wrapped for their
   entrance, on each moving piece (a clipped background does not follow a child on its own layer) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ac .names:not(:has(.ln, .nm)), .ac .names:has(.ln, .nm) :is(.ln-i, .nm, .amp), .ac .names .amp:not(:has(*)) {
    background-image: var(--gild); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}

.ac .ornament-line { width: 84px; height: 1px; background: linear-gradient(90deg, transparent, #f0d28e 30%, #fff0c6 50%, #f0d28e 70%, transparent); box-shadow: 0 0 8px rgba(246, 206, 130, .45); }
.ac .ornament-line::before { left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 0; transform: rotate(45deg); background: #f6dc9c; box-shadow: 0 0 6px rgba(246, 206, 130, .8); }
.ac .ornament-line::after { display: none; }
.ac .ornament-floral { color: var(--gold-ink); }
.ac .monogram { border-color: var(--gold-line); color: var(--gold-ink); font-style: italic; background: radial-gradient(circle at 35% 30%, rgba(255, 249, 240, .1), rgba(255, 249, 240, .02) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 34px -18px rgba(0, 0, 0, .8); }
.ac .monogram::after { border-color: rgba(255, 246, 232, .1); }

.ac .date-block .day, .ac .date-block .year { font-weight: 400; color: var(--gold-ink); text-shadow: 0 0 16px rgba(230, 190, 110, .2); }
.ac .date-block .day { font-style: italic; }
.ac .date-block .sep { background: var(--gold-line); }
.ac .date-block .month, .ac .date-block .weekday, .ac .weekday-line { letter-spacing: .24em; color: var(--frost-2); }
.ac .bigdate .d { font-style: italic; font-weight: 400; color: var(--gold-ink); text-shadow: 0 0 20px rgba(230, 190, 110, .22); }
.ac .bigdate .my { border-left-color: var(--gold-line); }
.ac .bigdate .my b { color: var(--gold-ink); font-weight: 500; }
/* the countdown as the film's candlelit numerals, parted by hairlines */
.ac .countdown { gap: 0; }
.ac .countdown div { position: relative; min-width: 70px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; }
.ac .countdown div + div::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 30%; width: 1px; background: linear-gradient(transparent, var(--hair), transparent); }
.ac .countdown b { font-weight: 400; font-size: 2.2rem; color: #f0d49a; text-shadow: 0 0 16px rgba(230, 190, 110, .26); }
.ac .countdown div > span { font-size: .66rem; letter-spacing: .16em; color: var(--frost-3); margin-top: 8px; }
.ac .countdown-msg { color: var(--gold-ink); }

/* photo layout: the couple's picture is the plaque, the names in gold leaf over its shadow */
.ac .hero-photo img, .ac .hero-cover img { object-position: 50% 28%; }
.ac .hero-cover { border-radius: 0 0 4px 4px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95); }
.ac .hero-cover::after { background: linear-gradient(to bottom, rgba(10, 8, 6, .05) 30%, rgba(10, 8, 6, .55) 62%, rgba(10, 8, 6, .92) 100%); }
.ac .layout-photo .music-btn { color: var(--gold-ink); }

/* ---------- sections ---------- */
.ac .inv .sec { border-top: 0; margin-top: 0; }
.ac .inv .sec::before { content: ""; display: block; width: 190px; height: 11px; margin: 0 auto 34px; background: var(--gold-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 11'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='190'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5.5h82M108 5.5h82' stroke='url(%23g)' stroke-width='.8'/%3E%3Cpath d='M95 1.5l4 4-4 4-4-4z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 11'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='190'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5.5h82M108 5.5h82' stroke='url(%23g)' stroke-width='.8'/%3E%3Cpath d='M95 1.5l4 4-4 4-4-4z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.ac .inv.layout-minimal .sec + .sec::before { width: 190px; height: 11px; margin: 0 auto 34px; background: var(--gold-ink); }
.ac .sec-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.3rem, 9vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; text-transform: none; color: var(--text); margin-bottom: 30px; text-shadow: 0 0 22px rgba(243, 220, 180, .16); }
.ac .text { font-style: italic; font-size: clamp(1.2rem, 3vw, 1.4rem); line-height: 1.6; color: var(--text); font-variation-settings: 'opsz' 24; }
.ac .family .lbl, .ac .place .lbl, .ac .ev-date span { font-weight: 500; font-size: .7rem; letter-spacing: .22em; color: var(--gold-ink); }
.ac .family .val { font-style: italic; font-size: 1.45rem; }
.ac .dress { font-style: italic; font-size: 1.35rem; color: var(--text); }
.ac .note { color: var(--frost-2); }
.ac .note a, .ac a { color: var(--gold-ink); }

/* cards are smaller panes of the same glass */
.ac .place, .ac .event, .ac .rsvp-box, .ac .wish, .ac .map { background: var(--glass); border: 1px solid rgba(255, 246, 232, .13); border-radius: 4px; box-shadow: var(--glass-edge), 0 40px 80px -48px rgba(0, 0, 0, .95); }
.ac .place, .ac .rsvp-box { position: relative; }
.ac .place { padding: 34px 26px; }
.ac .place h3 { font-style: italic; font-size: 1.75rem; line-height: 1.15; }
.ac .place .time, .ac .ev-date b { font-weight: 400; color: var(--gold-ink); }
.ac .place .addr { color: var(--frost-2); }
.ac .ev-date { border-right-color: var(--hair); }
.ac .event h3 { font-style: italic; font-size: 1.4rem; }
.ac .ev-meta .muted { color: var(--frost-3); }
.ac .wish p { font-size: 1.2rem; }
.ac .wish footer { color: var(--gold-ink); letter-spacing: .14em; font-size: .72rem; }
.ac .map-load span { background: rgba(10, 8, 6, .72); border-color: var(--gold-line); color: var(--gold-ink); }
.ac .map-load:hover span { background: var(--accent); color: #2a1b0a; }

/* buttons: glass, and gold for the one that matters */
.ac .btn { border-radius: 2px; font-weight: 400; letter-spacing: .06em; color: var(--text); background: linear-gradient(160deg, rgba(255, 249, 240, .13), rgba(255, 249, 240, .035)); border: 1px solid rgba(255, 246, 232, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 30px -12px rgba(0, 0, 0, .7); transition: border-color .3s, box-shadow .3s, transform .45s var(--ease-back); }
.ac .btn:hover { background: linear-gradient(160deg, rgba(255, 249, 240, .17), rgba(255, 249, 240, .05)); color: var(--text); border-color: rgba(255, 238, 210, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 28px -6px rgba(243, 220, 180, .35), 0 10px 30px -12px rgba(0, 0, 0, .7); }
.ac .btn svg { color: var(--gold-ink); }
.ac .btn-solid, .ac .actbar a.primary { color: #2a1b0a; border: 0; font-weight: 500; background: linear-gradient(178deg, #f8e7b8 0%, #e2c07a 45%, #c99d52 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), inset 0 -1px 0 rgba(90, 60, 20, .35), 0 14px 34px -14px rgba(226, 186, 110, .55); }
.ac .btn-solid:hover { color: #2a1b0a; background: linear-gradient(178deg, #f8e7b8 0%, #e2c07a 45%, #c99d52 100%); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), inset 0 -1px 0 rgba(90, 60, 20, .35), 0 16px 44px -12px rgba(226, 186, 110, .75); }
.ac .btn-solid svg, .ac .actbar a.primary svg { color: #2a1b0a; }
.ac .btn-wa::before { border-color: var(--gold-line); }

/* the day: gold dots that glow on a faint rail */
.ac .schedule li::before { border-color: transparent; background: radial-gradient(circle at 35% 35%, #fff6dc, #e6c47c 45%, #8f6a2c); box-shadow: 0 0 12px rgba(236, 196, 120, .6); }
.ac .schedule li:not(:last-child)::after { background: linear-gradient(var(--gold-line), var(--gold-line)) top / 100% calc(var(--seg, 1) * 100%) no-repeat color-mix(in srgb, var(--accent) 14%, transparent); }
.ac .schedule.is-drawn li:not(.is-lit)::before { background: var(--bg); box-shadow: 0 0 0 1px var(--gold-line); }
.ac .schedule .t { color: var(--gold-ink); font-size: 1.3rem; }
.ac .schedule .d { font-size: 1.02rem; }

/* the dress-code colours as polished glass beads */
.ac .swatches i { width: 40px; height: 40px; border: 0; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .28), inset 0 -6px 10px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 246, 232, .18), 0 10px 22px -8px rgba(0, 0, 0, .8); }

/* photographs sit in thin glass frames */
.ac .shot { border: 1px solid rgba(255, 246, 232, .14); border-radius: 3px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); background: #16100b; }
.ac .gallery.is-dealing .shot { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95); }

/* ---------- the reply ---------- */
.ac .rsvp-box { padding: clamp(40px, 9vw, 64px) clamp(24px, 6vw, 52px); }
.ac .rsvp-box h2 { font-style: italic; font-size: clamp(2.3rem, 9vw, 3rem); line-height: 1.08; text-shadow: 0 0 22px rgba(243, 220, 180, .16); }
.ac .rsvp-box .sub { color: var(--frost-2); }
.ac .rsvp-box .deadline, .ac .personal { font-weight: 500; font-size: .74rem; letter-spacing: .18em; color: var(--gold-ink); }
.ac .personal b { font-style: italic; font-size: 1.5rem; color: var(--text); }
.ac .f label { font-weight: 400; font-size: .86rem; letter-spacing: .05em; color: var(--frost-2); }
.ac .in { background-color: transparent; border: 0; border-bottom: 1px solid rgba(255, 246, 232, .26); border-radius: 0; padding: 10px 2px 12px; font-size: 17px; color: var(--text); transition: border-color .25s, box-shadow .25s; }
.ac .in::placeholder { color: rgba(246, 241, 234, .34); }
.ac .in:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent), 0 12px 18px -14px rgba(226, 186, 110, .55); }
.ac select.in { background-position: right 4px center; padding-right: 28px; }
.ac select.in option { background: #16100b; color: #f6f1ea; }
.ac textarea.in { min-height: 84px; }
.ac .seg span { border-radius: 3px; border-color: rgba(255, 246, 232, .16); background: rgba(255, 249, 240, .03); font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.15rem; padding: 14px 10px; transition: border-color .3s, background .3s, box-shadow .3s; }
.ac .seg label:hover span { border-color: rgba(255, 246, 232, .3); }
.ac .seg input:checked + span { color: var(--text); background: rgba(240, 210, 150, .08); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 240, 210, .16), 0 0 30px -12px rgba(226, 186, 110, .5); }
.ac .seg input:focus-visible + span { outline-color: #f3dcb4; }
.ac .check { border-radius: 3px; border-color: rgba(255, 246, 232, .16); background: rgba(255, 249, 240, .03); }
.ac details.more { border-top-color: var(--hair); }
.ac details.more summary { font-weight: 500; letter-spacing: .04em; color: var(--gold-ink); }
.ac .rsvp-box .btn-solid[type="submit"] { padding: 17px; letter-spacing: .08em; }
.ac .rsvp-note, .ac .f-hint, .ac .celebrate p { color: var(--frost-2); }
.ac .celebrate h2 { font-style: italic; font-size: 2.2rem; }
.ac .celebrate .check { background: var(--foil); color: #2a1b0a; box-shadow: 0 0 34px -6px rgba(226, 186, 110, .55); }
.ac .rsvp-change summary { color: var(--frost-2); }

/* ---------- the rest ---------- */
.ac .contact .name { font-style: italic; font-size: 1.6rem; }
.ac .contact .phone { color: var(--frost-2); }
.ac .inv-footer { border-top-color: var(--hair); color: var(--frost-3); }
.ac .inv-footer a { color: var(--frost-3); }
.ac .inv-footer a b { color: var(--gold-ink); }
.ac .actbar { background: rgba(22, 16, 11, .72); border-color: rgba(255, 246, 232, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -20px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.ac .actbar a { font-weight: 500; color: var(--frost-2); }
.ac .actbar a svg { color: var(--gold-ink); }
.ac .music-btn { background: rgba(22, 16, 11, .6); border-color: rgba(255, 246, 232, .18); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -14px rgba(0, 0, 0, .8); }
.ac .music-btn .bars { background: var(--accent); }
.ac .music-btn .bars b { background: #2a1b0a; }
.ac .lightbox { background: rgba(6, 5, 4, .95); }

/* ---------- a custom palette (the AI look) with an accent of its own ----------
   ac-tint is set by the server when the accent is not the theme's champagne gold: every gold on the
   page and on the glass is then mixed from that accent, so a silver or a green palette stays whole. */
.ac-tint {
  --foil: linear-gradient(174deg, color-mix(in srgb, var(--accent) 80%, #fff) 0%, color-mix(in srgb, var(--accent) 30%, #fff) 28%, var(--accent) 52%, color-mix(in srgb, var(--accent) 60%, #fff) 76%, color-mix(in srgb, var(--accent) 78%, #000) 100%);
  --gild: linear-gradient(105deg, transparent 42%, rgba(255, 252, 240, .95) 50%, transparent 58%), linear-gradient(176deg, color-mix(in srgb, var(--accent) 75%, #fff) 0%, color-mix(in srgb, var(--accent) 25%, #fff) 26%, var(--accent) 50%, color-mix(in srgb, var(--accent) 55%, #fff) 74%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
}
.ac-tint .countdown b, .ac-tint .countdown-msg { color: var(--gold-ink); }
.ac-tint .btn-solid, .ac-tint .btn-solid:hover, .ac-tint .actbar a.primary { color: color-mix(in srgb, var(--accent) 18%, #000);
  background: linear-gradient(178deg, color-mix(in srgb, var(--accent) 45%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 80%, #000) 100%); }
.ac-tint .btn-solid svg, .ac-tint .actbar a.primary svg { color: inherit; }
.ac-tint .ornament-line, .ac-tint .acr-rule { background: linear-gradient(90deg, transparent, var(--gold-ink) 30%, color-mix(in srgb, var(--accent) 35%, #fff) 50%, var(--gold-ink) 70%, transparent); }
.ac-tint .ornament-line::before, .ac-tint .acr-rule::after { background: var(--gold-ink); }
.ac-tint .schedule li::before { background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 25%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 55%, #000)); }