/* Live names sit behind a separate, non-interactive glass surface. */
.rain .rain-name-window{position:relative;isolation:isolate;margin:0 -18px;padding:28px 18px 24px;max-width:100%}
.rain .rain-name-window h1{position:relative;z-index:0}
.rain .rain-glass{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border:1px solid #8caa962e;border-radius:110px 110px 24px 24px;background:linear-gradient(120deg,#ffffff25,transparent 45%,#d5e4d018);box-shadow:inset 1px 0 1px #fff9,inset -1px 0 1px #c0cfb433}
.rain .rain-fog{position:absolute;inset:0;background:linear-gradient(125deg,#f1f3e5c9,#e5eddd66 60%,#ffffff88);opacity:0}
.rain .rain-drops{position:absolute;inset:0;pointer-events:none}
.rain .rain-drop{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*1.6);border-radius:65% 65% 58% 58%;opacity:0;background:radial-gradient(ellipse at 30% 25%,#ffffffed 0 10%,#ffffff40 20%,#b1c5b338 52%,#58745d8c 100%);box-shadow:inset 1px 1px 1px #ffffffba,inset -1px -1px 1px #4c6c5655,0 1px 2px #35533f26;transform:translateY(0);will-change:transform,opacity}
.rain .rain-drop:before{content:'';position:absolute;bottom:65%;left:42%;width:1px;height:var(--trail);background:linear-gradient(transparent,#ffffff50,#a1b8a36b);border-radius:50%}
.rain .art-stage{animation:none}
.rain .art-stage>.rain-drops{inset:7% 29% 15% 19%;z-index:2;border-radius:48% 48% 8% 8%;overflow:hidden}
.rain.rain-revealing .rain-name-window h1{animation:rain-names-clear 3.6s .25s both}
.rain.rain-revealing .rain-fog{animation:rain-fog-clear 4.5s both}
.rain.rain-revealing .rain-drop{animation:rain-droplet-slide var(--duration) var(--delay) cubic-bezier(.33,.06,.54,.92) both}
.rain .rain-name-window:focus-within h1{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
.rain .rain-name-window:focus-within .rain-glass{visibility:hidden}
@keyframes rain-names-clear{0%{opacity:.12;filter:blur(12px);transform:translateY(6px)}35%{opacity:.45;filter:blur(6px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes rain-fog-clear{0%{opacity:.95}35%{opacity:.7}100%{opacity:0}}
@keyframes rain-droplet-slide{0%{opacity:0;transform:translateY(0) scale(.85)}9%{opacity:.92}35%{transform:translateY(20px) scale(1)}72%{opacity:.85}100%{opacity:0;transform:translateY(var(--travel)) scale(.8,1.2)}}
@media(max-width:760px){.rain .rain-name-window{margin:0 auto;padding:25px 14px 22px;width:100%;max-width:440px}.rain .rain-glass{border-radius:90px 90px 20px 20px}}
@media(prefers-reduced-motion:reduce){.rain.rain-revealing .rain-name-window h1{animation:none;opacity:1;filter:none;transform:none}.rain .rain-fog,.rain .rain-drops{display:none}}

/* One continuous glass surface spans the whole opening scene. */
.rain .hero>.rain-hero-glass{inset:0;z-index:3;border:0;border-radius:0;background:linear-gradient(115deg,#ffffff0a,transparent 45%,#d5e4d00a);box-shadow:none}
.rain .rain-hero-glass .rain-drop{animation:rain-hero-droplet var(--duration) var(--delay) cubic-bezier(.35,.08,.55,.9) infinite both}
.rain .hero.rain-motion-paused .rain-drop{animation-play-state:paused}
.rain .hero:has(.rain-name-window:focus-within) .rain-fog{visibility:hidden}
@keyframes rain-hero-droplet{0%{opacity:0;transform:translateY(-35px) scale(.8)}12%{opacity:.72}48%{opacity:.72;transform:translateY(65px) scale(1)}85%{opacity:.6}100%{opacity:0;transform:translateY(var(--travel)) scale(.85,1.15)}}
@media(prefers-reduced-motion:reduce){.rain .rain-hero-glass .rain-drop{animation:none;display:none}}

/* The glass sculpture belongs to the personal greeting; the cover is typography. */
.rain .hero{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;min-height:calc(100svh - 70px)}
.rain .hero .hero-copy{width:100%;max-width:780px}
.rain .hero .subtitle,.rain .hero .rain-name-window{margin-inline:auto}
.rain .hero .hero-foot{left:25px;right:25px;text-align:center}
.rain .intro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:55px}
.rain .intro>.art-stage{grid-column:1;grid-row:1 / span 2;width:100%;max-width:430px;justify-self:center}
.rain .intro>.section-mark{grid-column:2;grid-row:1;align-self:end}
.rain .intro>div:not(.art-stage){grid-column:2;grid-row:2;align-self:start}
.rain .intro .art-stage img{max-height:520px}
@media(max-width:760px){.rain .hero{min-height:calc(100svh - 64px);padding-bottom:85px}.rain .intro{grid-template-columns:minmax(0,1fr);gap:26px}.rain .intro>.section-mark{grid-column:1;grid-row:1}.rain .intro>div:not(.art-stage){grid-column:1;grid-row:2}.rain .intro>.art-stage{grid-column:1;grid-row:3;width:min(100%,340px);margin:5px auto 0}.rain .intro .art-stage img{max-height:390px}}

/* A short programme title and a small rain accent replace the outlined leaf. */
.rain .program-heading:after{width:8px;height:13px;margin:28px 0 6px 6px;border:0;border-radius:75% 0 75% 75%;background:#688875;transform:rotate(-35deg);box-shadow:20px 12px 0 -1px #8da18b,38px -2px 0 -2px #b1bda6}
.rain .program-heading h2{max-width:560px;text-wrap:balance}
/* Quiet round timeline markers, aligned with the first text line. */
.rain .schedule-row:before{left:-14px;top:33px;width:7px;height:7px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);transform:none;box-shadow:none}

.rain .rain-closing-sprig{display:block;width:200px;height:130px;object-fit:contain;margin:0 auto 28px}
@media(max-width:760px){.rain .rain-closing-sprig{width:180px;height:120px;margin-bottom:24px}}

/* Rounded water lenses replace the small pointed drops and their long trails. */
.rain .rain-hero-glass .rain-drop{height:calc(var(--size)*1.22);border-radius:var(--shape);border:1px solid #6d89752e;background:radial-gradient(ellipse at 28% 20%,#ffffffd9 0 4%,#ffffff30 12%,transparent 40%),radial-gradient(ellipse at 65% 80%,#8ba49530,transparent 65%);box-shadow:inset 1px 1px 2px #ffffffc4,inset -1px -2px 2px #56725d45,0 2px 3px #34513b18;animation-name:rain-water-lens}
.rain .rain-hero-glass .rain-drop:before{display:none}
.rain .rain-hero-glass .rain-drop:after{content:'';position:absolute;inset:16% 18% 46% 19%;border-top:1px solid #fff;border-radius:50%;transform:rotate(-28deg);opacity:.85}
@keyframes rain-water-lens{0%{opacity:0;transform:translate(0,-25px) scale(.85)}12%{opacity:.65}40%{transform:translate(calc(var(--drift)*.35),35px) scale(1,1.04)}78%{opacity:.6}100%{opacity:0;transform:translate(var(--drift),var(--travel)) scale(.9,1.15)}}
/* A single parent animation keeps the caption, names, subtitle and date in sync. */
.rain.rain-revealing .rain-name-window h1{animation:none;opacity:1;filter:none;transform:none}
.rain.rain-revealing .hero-copy,.rain.rain-revealing .hero-foot{animation:rain-copy-clear 3.6s .25s both}
@keyframes rain-copy-clear{0%{opacity:0;filter:blur(11px);transform:translateY(6px)}35%{opacity:.4;filter:blur(5px)}100%{opacity:1;filter:blur(0);transform:none}}
.rain.editing.rain-revealing .hero-copy,.rain.editing.rain-revealing .hero-foot,.rain.rain-revealing .hero-copy:focus-within{animation:none;opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.rain.rain-revealing .hero-copy,.rain.rain-revealing .hero-foot{animation:none;opacity:1;filter:none;transform:none}.rain .rain-hero-glass .rain-drop{animation:none}}
.rain .program-heading:after{display:none;content:none}
/* All cover copy shares the same centre axis, including capped-width paragraphs. */
.rain .hero .hero-copy{margin-inline:auto;text-align:center}
.rain .hero .hero-copy>p,.rain .hero .hero-copy>.rain-name-window{margin-inline:auto;text-align:center}
.rain .hero .hero-copy h1{text-align:center}
.rain #photo-section{text-align:center}
.rain #add-photo-inline{justify-content:center;margin:24px auto 0}
.rain .rsvp>.eyebrow{margin-inline:auto;text-align:center}

/* The details family is one ordered group: details, dress code, gifts. */
.rain .details-subblock{max-width:740px;margin:40px auto 0;padding-top:32px;border-top:1px solid #8f9f8b66;text-align:center;overflow:visible}
.rain .details-subblock h3{font-family:Georgia,serif;font-size:32px;font-weight:400;line-height:1.25;letter-spacing:-.02em;margin:0 0 20px}
.rain .details-subblock p{font-size:19px;margin-inline:auto;line-height:1.65}
@media(max-width:760px){.rain .details-subblock{margin-top:32px;padding-top:28px}.rain .details-subblock h3{font-size:28px}.rain .details-subblock p{font-size:18px}}