:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #f4f2e9;
  background: #090a0c;
  font-synthesis: none;
  color-scheme: dark;
  --night: #090a0c;
  --ivory: #f4f2e9;
  --muted: #c7c6c1;
  --photo-scale: 1;
  --photo-lift: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body, h1, h2, p, figure, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #dedbd1; outline-offset: 5px; }
::selection { background: #dedbd1; color: #090a0c; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 50; background: var(--ivory); color: var(--night); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; color: var(--ivory); background: #090a0cdb; border-bottom: 1px solid #e4e9d917; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.nav-inner { width: min(1120px,90%); min-height: 62px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.wordmark { font-size: 1.3rem; font-weight: 600; letter-spacing: -.05em; white-space: nowrap; }
.wordmark span { font-size: .75em; color: var(--muted); margin: 0 .2rem; }
.nav-links { display: flex; gap: 2rem; align-items: center; font-size: .875rem; }
.nav-links>a:first-child { color: #d6d5d0; }
.nav-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; background: var(--ivory); color: var(--night); padding: .45rem 1.15rem; border-radius: 99px; }
.opening {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  min-height: 800px; padding: 84px max(5vw,calc((100vw - 1260px)/2)) 74px;
  text-align: left; align-items: center; color: var(--ivory); background: var(--night);
}
.atmosphere { position: absolute; inset: 0; z-index: -2; background: var(--night); pointer-events: none; }
.hero-content { position: relative; justify-self: start; z-index: 6; max-width: 100%; }
.names { font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; margin-bottom: 1.6rem; }
.names span { font-size: 1rem; color: var(--muted); margin: 0 .65rem; }
h1 { font-size: clamp(4.8rem,7.8vw,7rem); font-weight: 600; letter-spacing: -.065em; line-height: 1.09; margin: 0 0 1.7rem; }
h1>span { color: var(--muted); }
.hero-message { font-size: 1.15rem; line-height: 1.7; letter-spacing: .025em; color: #d5d4cf; }
.hero-date { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: .8rem; font-size: .9375rem; color: #c3c2bd; line-height: 1.8; margin-top: .8rem; }
.hero-date>span { padding-left: .8rem; border-left: 1px solid #c3c2bd3d; }
.primary-button { display: inline-flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1.75rem; padding: .85rem 1.5rem; background: var(--ivory); color: var(--night); min-height: 48px; border-radius: 99px; font-size: .9375rem; transition: transform .2s,background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #dce2cf; }
.portrait-stage { position: relative; justify-self: center; width: 100%; height: min(760px,85svh); min-height: 600px; margin: 0; z-index: 1; }
.floral-portrait {
  display: block; width: 100%; height: 100%; object-fit: contain;
  opacity: 1; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(transparent,#000 5%,#000 94%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image: linear-gradient(transparent,#000 5%,#000 94%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.scroll-cue { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .8125rem; letter-spacing: .05em; color: #b9b8b2; z-index: 6; white-space: nowrap; }
/* Each layer occupies the scene separately so distant petals pass behind the portrait. */
#blossom-field { position: fixed; inset: 0; z-index: 8; display: block; overflow: hidden; pointer-events: none; }
.portrait-stage { mix-blend-mode: lighten; }
.petal-depth { position: absolute; inset: 0; pointer-events: none; transition: transform .55s ease-out; }
.petal-depth-far { z-index: 0; transform: translate3d(var(--far-x,0px),calc(var(--far-y,0px) + var(--far-scroll,0px)),0); }
.petal-depth-middle { z-index: 3; transform: translate3d(var(--middle-x,0px),calc(var(--middle-y,0px) + var(--middle-scroll,0px)),0); }
.petal-depth-near { z-index: 5; transform: translate3d(var(--near-x,0px),calc(var(--near-y,0px) + var(--near-scroll,0px)),0); }
.petal-flight { position: absolute; left: var(--start-x); top: var(--start-y); width: var(--size); height: var(--size); opacity: 0; filter: blur(var(--blur)); animation: petal-fall var(--duration) linear var(--delay) infinite; animation-play-state: paused; will-change: transform,opacity; }
.petal-sway { display: block; width: 100%; height: 100%; animation: petal-sway var(--sway-duration) ease-in-out var(--sway-delay) infinite alternate; animation-play-state: paused; }
.petal-image { display: block; width: 100%; height: 100%; object-fit: contain; animation: petal-turn var(--turn-duration) ease-in-out var(--turn-delay) infinite alternate; animation-play-state: paused; }
:root[data-motion="playing"] .petal-flight, :root[data-motion="playing"] .petal-sway, :root[data-motion="playing"] .petal-image { animation-play-state: running; }
@keyframes petal-fall {
  0% { transform: translate3d(0,0,0) scale(.9); opacity: 0; }
  12% { opacity: var(--opacity); }
  82% { opacity: var(--opacity); }
  100% { transform: translate3d(var(--drift-x),var(--fall-y),0) scale(1.05); opacity: 0; }
}
@keyframes petal-sway {
  from { transform: translateX(calc(-1 * var(--sway))) rotate(-8deg); }
  to { transform: translateX(var(--sway)) rotate(8deg); }
}
@keyframes petal-turn {
  from { transform: rotateZ(var(--rotation)) rotateY(-35deg); }
  to { transform: rotateZ(calc(var(--rotation) + var(--turn))) rotateY(65deg); }
}
.together { position: relative; background: var(--night); padding: 0 0 100px; color: var(--ivory); }
.feature-photo { position: relative; width: min(1180px,90%); margin: 0 auto; border-radius: 26px; overflow: hidden; line-height: 0; box-shadow: 0 24px 100px #0003; transform: translateY(var(--photo-lift)) scale(var(--photo-scale)); transform-origin: center top; }
.feature-photo img { display: block; width: 100%; height: auto; }
.photo-caption { text-align: center; font-size: clamp(1.5rem,3vw,2.5rem); font-weight: 550; letter-spacing: -.04em; line-height: 1.4; margin: 3.5rem 24px 0; }
.photo-caption span { color: var(--muted); margin-left: .25em; }
.section-shell { width: min(1120px,90%); margin: auto; }
.invitation-section { background: #f1f0e8; padding: 120px 0; color: #24362e; text-align: center; color-scheme: light; }
.eyebrow { font-size: .8125rem; font-weight: 550; letter-spacing: .09em; line-height: 1.7; color: #65705c; }
.invitation-section h2 { font-size: clamp(2.75rem,5.6vw,5rem); font-weight: 600; line-height: 1.13; letter-spacing: -.06em; margin: 1rem 0 1.8rem; }
.invitation-section h2 span { color: #78846a; }
.invitation-message { font-size: 1.125rem; color: #606a5c; line-height: 1.9; }
.details-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; margin-top: 3.5rem; text-align: left; }
.detail-card { background: #fbfbf6; min-height: 248px; padding: 30px; border-radius: 24px; }
.detail-card dt { font-size: 1rem; color: #606a5c; }
.detail-card dd { margin-top: 1.8rem; }
.date-card { background: #e2e7d9; }
.date-large { font-size: 4.2rem; font-weight: 600; letter-spacing: -.055em; line-height: 1.1; }
.pending { display: block; font-size: 2.6rem; font-weight: 550; letter-spacing: -.04em; line-height: 1.7; }
.detail-note { display: block; font-size: .9375rem; line-height: 1.7; color: #66715f; margin-top: .6rem; }
.photos-section { background: #fbfbf6; color: #24362e; padding: 110px 0 120px; color-scheme: light; }
.photos-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.8rem; }
.photos-heading h2 { font-size: clamp(2rem,3.7vw,3.6rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.35; margin-top: .65rem; }
.photos-heading h2 span { color: #78846a; }
.photos-heading>p { color: #66715f; font-size: 1rem; line-height: 1.7; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.photo-grid figure { border-radius: 24px; overflow: hidden; background: #e2e7d9; }
.photo-grid img { display: block; width: 100%; height: auto; }
footer { background: var(--night); color: var(--ivory); padding: 85px 24px 120px; text-align: center; }
footer .eyebrow { color: #b9b8b2; }
.closing { font-size: clamp(3.5rem,7vw,6rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.3; margin: 1.2rem 0; }
.footer-signature { font-size: 1rem; color: #d5d4cf; line-height: 1.8; }
.footer-signature span { display: block; color: #b9b8b2; font-size: .9375rem; margin-top: .5rem; }
.motion-toggle { position: fixed; right: 20px; bottom: max(20px,env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .65rem 1rem; background: #090a0cdc; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid #d8e0cc38; border-radius: 99px; color: var(--ivory); font-family: inherit; font-size: .875rem; font-weight: 400; line-height: 1.4; cursor: pointer; box-shadow: 0 3px 18px #0002; }
.motion-toggle[hidden], .play-icon, .motion-toggle.is-paused .pause-icon { display: none; }
.motion-toggle.is-paused .play-icon { display: block; }
.motion-toggle:hover { background: #284037; }
@media(max-width:900px) {
  .opening { display: flex; flex-direction: column; min-height: 0; padding: 86px 18px 72px; text-align: center; }
  .hero-content { display: contents; }
  .opening .names { position: relative; z-index: 6; order: 0; margin: 0 0 .1rem; font-size: 1.1rem; }
  .portrait-stage { order: 1; width: min(540px,100%); height: clamp(400px,56svh,610px); min-height: 0; margin: 0 0 .25rem; }
  .opening h1 { position: relative; z-index: 6; order: 2; font-size: clamp(2.65rem,8vw,4rem); line-height: 1.15; margin: 0 0 .8rem; letter-spacing: -.065em; }
  .opening h1 br { display: none; }
  .hero-message { position: relative; z-index: 6; order: 3; font-size: 1.1rem; }
  .hero-date { position: relative; z-index: 6; order: 4; justify-content: center; margin-top: .6rem; }
  .primary-button { position: relative; z-index: 6; order: 5; margin-top: 1.1rem; }
  .scroll-cue { order: 6; position: relative; left: auto; bottom: auto; transform: none; margin-top: 1.6rem; gap: .2rem; }
  .details-grid { grid-template-columns: 1fr 1fr; }
  .date-card { grid-column: 1/-1; min-height: 200px; }
  .date-card dd { margin-top: 1rem; }
  .photos-heading { display: block; }
  .photos-heading>p { margin-top: 1rem; }
  .detail-card { min-height: 220px; }
  .together { padding-bottom: 80px; }
}
@media(max-width:700px) {
  html { scroll-padding-top: 78px; }
  .nav-inner { min-height: 58px; }
  .nav-links { gap: 1rem; font-size: .8125rem; }
  .nav-pill { padding: .4rem .9rem; }
  .wordmark { font-size: 1.2rem; }
  .hero-date { font-size: .9375rem; gap: .6rem; }
  .hero-date>span { padding-left: .6rem; }
  .primary-button { font-size: .9375rem; padding: .85rem 1.4rem; }
  .feature-photo { width: 94%; border-radius: 20px; }
  .photo-caption { margin-top: 2rem; font-size: 1.5rem; line-height: 1.55; }
  .photo-caption span { display: block; margin: 0; }
  .together { padding-bottom: 64px; }
  .invitation-section { padding: 78px 0; }
  .invitation-section h2 { font-size: 3rem; line-height: 1.18; margin-bottom: 1.5rem; }
  .invitation-message { font-size: 1rem; line-height: 1.9; }
  .details-grid { gap: 14px; margin-top: 2.5rem; }
  .detail-card { padding: 22px 18px; min-height: 205px; border-radius: 20px; }
  .detail-card dt { font-size: .9375rem; }
  .detail-card dd { margin-top: 1.4rem; }
  .date-card { min-height: 196px; }
  .date-card dd { margin-top: 1rem; }
  .date-large { font-size: 3.9rem; }
  .pending { font-size: 2rem; }
  .detail-note { font-size: .875rem; }
  .photos-section { padding: 72px 0 78px; }
  .photos-heading { margin-bottom: 2rem; }
  .photos-heading h2 { font-size: 2.1rem; }
  .photo-grid { grid-template-columns: 1fr; gap: 20px; }
  .photo-grid figure { border-radius: 20px; }
  footer { padding: 65px 24px 112px; }
  .closing { font-size: 3.75rem; }
  .motion-toggle { right: 14px; bottom: max(14px,env(safe-area-inset-bottom)); font-size: .8125rem; padding: .65rem .9rem; }
}
@media(max-width:380px) {
  .opening { padding-top: 82px; }
  .portrait-stage { height: 350px; }
  .opening h1 { font-size: 2.65rem; }
  .hero-date { font-size: .875rem; }
}
@media(max-width:360px) {
  .details-grid { grid-template-columns: 1fr; }
  .date-card { grid-column: auto; }
  .detail-card { min-height: 175px; }
  .nav-links { gap: .75rem; }
  .nav-links>a:first-child { font-size: .75rem; }
  .invitation-section h2 { font-size: 2.7rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .petal-depth { transform: none; transition: none; }
  .feature-photo { transform: none !important; }
  .primary-button { transition: none; }
}

/* Neutral glass surfaces over a black canvas. */
.topbar{background:#101113b3;border-bottom-color:#ffffff1c;box-shadow:inset 0 1px #ffffff0d;backdrop-filter:blur(24px) saturate(115%);-webkit-backdrop-filter:blur(24px) saturate(115%)}
.nav-pill,.primary-button{color:var(--ivory);background:linear-gradient(145deg,#ffffff20,#ffffff0a);border:1px solid #ffffff2b;box-shadow:inset 0 1px #ffffff21,0 8px 24px #0003;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.primary-button:hover,.nav-pill:hover{background:#ffffff24;border-color:#ffffff42}
.invitation-section{color:var(--ivory);color-scheme:dark;background:radial-gradient(ellipse at 25% 45%,#b7bbc013,transparent 50%),radial-gradient(ellipse at 85% 100%,#d5d5d50b,transparent 40%),var(--night)}
.eyebrow,.detail-card dt,.detail-note,.photos-heading>p{color:#b9b8b2}
.invitation-section h2 span,.photos-heading h2 span{color:#aeadab}
.invitation-message{color:#c3c2bd}
.detail-card,.date-card{background:linear-gradient(145deg,#ffffff10,#ffffff04);border:1px solid #ffffff1c;box-shadow:inset 0 1px #ffffff14,0 18px 50px #0003;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.date-card{background:linear-gradient(145deg,#ffffff19,#ffffff06);border-color:#ffffff28}
.photos-section{color:var(--ivory);color-scheme:dark;background:var(--night)}
.photo-grid figure,.feature-photo{padding:7px;background:#ffffff07;border:1px solid #ffffff1c;box-shadow:inset 0 1px #ffffff0d,0 20px 60px #0004}
.photo-grid img,.feature-photo img{border-radius:18px}
.motion-toggle{background:#17181a9c;border-color:#ffffff26;box-shadow:inset 0 1px #ffffff12,0 8px 25px #0003}
.motion-toggle:hover{background:#ffffff21}
footer{background:var(--night)}
.portrait-stage{height:auto;min-height:0;aspect-ratio:1.24;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%)}
.floral-portrait{width:100%;height:auto;object-fit:initial;transform:translateY(-5%)}
.portrait-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portrait-ready .floral-portrait{opacity:0}
@media(max-width:900px){.portrait-stage{width:min(540px,100%);height:auto;min-height:0;aspect-ratio:1.18;margin:1rem 0 .5rem}.opening{padding-bottom:62px}}