:root {
  color-scheme: dark;
  --navy: #14233f;
  --navy-deep: #101d32;
  --white: #f5f5f0;
  --mist: #c8d2e1;
  --muted: #a9bad0;
  --line: #b1c1d538;
  --page-pad: clamp(26px, 7cqi, 40px);
  --font-text: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-formal: "Songti SC", "STSong", "SimSun", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #0b1423; color: var(--white); font-family: var(--font-text); font-weight: 400; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
button:disabled { opacity: .45; cursor: default; }
::selection { color: var(--navy-deep); background: #d2dfed; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure, ul, ol { margin: 0; }
[hidden] { display: none !important; }
.site {
  position: relative; width: 100%; max-width: 520px; height: 100%; height: 100svh;
  margin: 0 auto; overflow-x: hidden; overflow-y: auto; container-type: inline-size;
  background: var(--navy); scroll-snap-type: y mandatory; scroll-behavior: smooth;
  overscroll-behavior-y: contain; touch-action: pan-y pinch-zoom; scrollbar-width: none;
}
.site::-webkit-scrollbar { display: none; }
.full-screen-slide {
  position: relative; isolation: isolate; width: 100%; min-height: 100%;
  padding: max(38px, env(safe-area-inset-top)) var(--page-pad) max(60px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always;
  background: linear-gradient(160deg, #14233f 5%, #263c5b 62%, #15263f);
}
.full-screen-slide:not(.cover):not(.closing-slide)::before { display: none; }
.slide-content { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.section-title {
  text-align: center; font-size: clamp(27px, 7.5cqi, 36px); font-family: var(--font-formal);
  font-weight: 400; line-height: 1.5; letter-spacing: 5px; margin: 0 0 clamp(28px, 5svh, 46px);
  text-wrap: balance;
}
.section-title::after { content: ""; display: block; width: 30px; height: 1px; background: #c8d2e180; margin: 18px auto 0; }

/* The image holds the scenery; all words and controls remain live HTML. */
.cover { height: 100%; min-height: 620px; padding: 0; overflow: hidden; background: #122544; }
.cover-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: -3; }
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #10203b33, transparent 43%, transparent 71%, #0d1c32bf 90%, #0d1c32 100%);
}
.cover-copy { width: 100%; padding: clamp(30px, 5.3svh, 55px) 8% 0; text-align: center; }
.cover-title { width: min(95%, 358px); margin: clamp(20px, 3svh, 32px) auto 22px; }
.cover-title img { width: 100%; height: auto; }
.cover-event { font-size: clamp(17px, 4.6cqi, 23px); line-height: 1.8; letter-spacing: 1.5px; color: #f5f5f2; text-wrap: balance; }
.cover-event span { display: block; }
.cover-date { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 16px; font-size: 13px; letter-spacing: 1.4px; color: #d8e1ec; }
.invitation-type { font-size: .9em; letter-spacing: 2px; }
.cover-date::before, .cover-date::after { content: ""; width: 24px; height: 1px; background: #c1cdd26b; }
.open-area { position: absolute; bottom: 9.4%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.seal { position: relative; display: grid; place-items: center; padding: 0; width: 54px; height: 54px; border: 1px solid #e9edf5a6; border-radius: 50%; background: #132540b8; color: var(--white); transition: background .2s ease, border-color .2s ease; }
.seal span { font-family: var(--font-formal); font-size: 25px; line-height: 1; }
.seal:hover { background: #2b4262; border-color: #fff; }
.seal.is-opening { animation: seal-open .45s cubic-bezier(.16, 1, .3, 1) both; }
.open-caption { font-size: 10px; color: #d5deeb; letter-spacing: 2px; }
.cover-host { position: absolute; bottom: 4.2%; left: 5%; right: 5%; text-align: center; font-size: clamp(11px, 3cqi, 14px); letter-spacing: 1px; line-height: 1.8; color: #d5deeb; }
@keyframes seal-open { to { transform: scale(1.15); filter: blur(3px); opacity: .15; } }
.open-flash .letter-heading { animation: letter-open .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes letter-open { from { filter: blur(3px); transform: translateY(12px); } to { filter: blur(0); transform: translateY(0); } }

.letter-heading { width: 65%; max-width: 270px; margin: 8px auto clamp(27px, 5svh, 44px); }
.letter-heading img { width: 100%; height: auto; }
.salute { margin: 0 0 19px; font-size: clamp(15px, 4cqi, 18px); line-height: 1.9; color: var(--white); }
.bodycopy { color: #e0e5ee; font-size: clamp(15px, 4cqi, 18px); line-height: 2.1; letter-spacing: .2px; text-align: justify; text-indent: 2em; overflow-wrap: break-word; line-break: strict; }
.letter-details { margin-top: 21px; }
.letter-landscape { position: relative; flex: 1; min-height: 56cqi; max-height: 330px; margin: 21px calc(-1 * var(--page-pad)) 16px; overflow: hidden; mask-image: linear-gradient(transparent, #000 16%, #000 81%, transparent); }
.letter-landscape img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 50% 70%; }
.signature { text-align: right; font-size: 13px; line-height: 1.9; color: var(--mist); margin-top: auto; padding-top: 10px; }

.organizer-group { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 15px; padding: 22px 0; }
.organizer-group + .organizer-group { border-top: 1px solid var(--line); }
.organizer-group h3 { color: #bdcde0; font-size: 12px; font-weight: 400; letter-spacing: 1px; line-height: 1.9; padding-top: 2px; }
.organizer-group ul { list-style: none; padding: 0; font-size: clamp(13px, 3.65cqi, 16px); line-height: 1.85; color: #e5e9f0; overflow-wrap: break-word; }
.organizer-group li + li { margin-top: 7px; }
.organization-sub { display: block; color: #b7c5d8; font-size: .86em; line-height: 1.8; margin-top: 3px; }
.guidance-group li + li { margin-top: 2px; }

.agenda ol { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.agenda li { display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 18px; padding: clamp(26px, 5svh, 43px) 0; }
.agenda li + li { border-top: 1px solid var(--line); }
.agenda time { font-size: clamp(19px, 5.3cqi, 27px); font-variant-numeric: tabular-nums; color: #d6e2f0; line-height: 1.5; letter-spacing: .3px; }
.agenda h3 { font-size: clamp(19px, 5.2cqi, 25px); line-height: 1.5; font-weight: 400; letter-spacing: 1px; margin-bottom: 9px; }
.agenda li p { font-size: 13px; color: #c1cee0; line-height: 1.9; }
.agenda-note { margin-top: 20px; text-align: center; font-size: 11px; letter-spacing: 1px; color: #b3c3d7; }

.location { flex: 1; display: flex; flex-direction: column; }
.venue-map { position: relative; width: 100%; height: clamp(240px, 44svh, 410px); flex: 0 0 auto; background: #20334f; overflow: hidden; border: 1px solid #c0d0e14d; }
#venueMap { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center; background: #20334f; color: #cfdae8; font-size: 14px; line-height: 1.9; }
.venue-address { font-size: clamp(15px, 4cqi, 18px); font-weight: 400; line-height: 1.95; color: #e1e8f1; text-align: center; margin: 25px 0; overflow-wrap: break-word; }
.outline { border: 1px solid #d4dfed99; color: var(--white); background: transparent; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font-size: 15px; letter-spacing: 2px; transition: background .2s ease; }
.outline:hover { background: #d2dfec14; }
.outline:active, .call-button:active { background: #d2dfec26; }
.map-navigation { width: 100%; margin-top: auto; }
.ui-icon { display: block; width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.venue-pin { display: flex; flex-direction: column; align-items: center; }
.venue-pin-label { padding: 9px 12px; white-space: nowrap; background: #14233f; color: #f5f5f0; font-size: 12px; line-height: 1.6; }
.venue-pin-dot { display: block; width: 30px; height: 39px; margin-top: 5px; }

.dress-notice { text-align: center; padding: clamp(24px, 4svh, 40px) 0 clamp(34px, 7svh, 63px); }
.dress-notice h3 { font-family: var(--font-formal); font-size: 24px; font-weight: 400; letter-spacing: 3px; margin-bottom: 24px; }
.dress-notice p { font-size: clamp(15px, 4cqi, 18px); line-height: 2.2; color: #d1dcea; }
.dress-emphasis { color: var(--white); font-weight: 500; white-space: nowrap; }
.contact-row { text-align: center; border-top: 1px solid var(--line); padding-top: clamp(35px, 6svh, 58px); margin-top: auto; }
.contact-label { font-size: 12px; letter-spacing: 2px; line-height: 1.8; color: #b9c9dc; margin-bottom: 15px; }
.contact-name { font-family: var(--font-formal); font-size: 23px; line-height: 1.8; letter-spacing: 3px; margin-bottom: 7px; }
.contact-phone { font-size: clamp(23px, 6.4cqi, 31px); font-variant-numeric: tabular-nums; letter-spacing: 1.5px; line-height: 1.8; }
.call-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; margin-top: 24px; padding: 12px 22px; background: transparent; border: 1px solid #bacce273; color: #e3ecf7; font-size: 13px; letter-spacing: 1px; transition: background .2s ease; }
.call-button:hover { background: #d2dfec14; }
.call-button .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }

.closing-slide { overflow: hidden; padding-top: 0; background: #13243d; }
.closing-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: -3; }
.closing-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#14233fe6, #14233fa6 48%, #101d32d9); z-index: -2; }
.closing-slide .slide-content { justify-content: center; align-items: center; text-align: center; }
.closing-slide h2 { font-family: var(--font-formal); font-size: clamp(35px, 10cqi, 49px); font-weight: 400; line-height: 1.6; letter-spacing: 8px; margin-top: -35px; }
.closing-rule { width: 35px; height: 1px; margin: 28px 0; background: #d0dbea9e; }
.closing-theme { font-size: 15px; letter-spacing: 3px; line-height: 1.8; color: #e0e7f0; }
.closing-date { font-size: 13px; letter-spacing: 2px; line-height: 1.8; margin-top: 19px; color: #c0cee0; }
.closing-host { position: absolute; bottom: 3%; left: 0; right: 0; font-size: 12px; line-height: 1.8; letter-spacing: 1px; color: #c6d2e1; }
.page-position { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 9px; color: #dce4ef; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: none; }
.page-rule { display: block; width: 28px; height: 1px; background: #bccce080; }
.toast { position: fixed; z-index: 20; bottom: 70px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(85vw, 440px); padding: 15px 20px; border: 1px solid #b8c8da80; background: #101d32f2; color: var(--white); font-size: 13px; line-height: 1.8; text-align: center; }

@media (min-height: 800px) { .organizers .slide-content { justify-content: center; } .organizers .section-title { margin-bottom: 26px; } }
@media (max-height: 740px) {
  .full-screen-slide { padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(50px, env(safe-area-inset-bottom)); }
  .cover { padding: 0; }
  .cover-copy { padding-top: 28px; }
  .cover-scene { object-position: 62% 83%; }
  .cover-title { max-width: 310px; margin-bottom: 17px; }
  .cover-event { font-size: 17px; line-height: 1.75; }
  .cover-date { margin-top: 12px; font-size: 12px; }
  .open-area { bottom: 10%; }
  .seal { width: 48px; height: 48px; }
  .section-title { margin-bottom: 25px; font-size: 28px; }
  .section-title::after { margin-top: 14px; }
  .letter-heading { max-width: 215px; margin-bottom: 25px; }
  .salute { margin-bottom: 13px; }
  .bodycopy { font-size: 15px; line-height: 2; }
  .letter-details { margin-top: 17px; }
  .letter-landscape { min-height: 56cqi; margin-top: 15px; margin-bottom: 10px; }
  .organizer-group { padding: 15px 0; grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; }
  .organizer-group ul { font-size: 13px; line-height: 1.8; }
  .organizer-group li + li { margin-top: 5px; }
  .guidance-group li + li { margin-top: 1px; }
  .agenda li { padding: 25px 0; }
  .agenda h3 { font-size: 19px; }
  .agenda li p { font-size: 12px; }
  .venue-map { height: 40svh; min-height: 220px; }
  .venue-address { margin: 21px 0; }
  .dress-notice { padding: 20px 0 32px; }
  .dress-notice h3 { font-size: 23px; margin-bottom: 19px; }
  .contact-row { padding-top: 30px; }
  .call-button { margin-top: 19px; }
}
@media (max-width: 350px) {
  :root { --page-pad: 23px; }
  .cover { min-height: 568px; }
  .cover-title { width: 97%; }
  .cover-event { font-size: 15px; letter-spacing: 1px; }
  .cover-date { font-size: 11px; }
  .cover-host { font-size: 10px; letter-spacing: .5px; }
  .organizer-group { grid-template-columns: 1fr; gap: 8px; padding: 13px 0; }
  .organizer-group h3 { font-size: 12px; }
  .organizer-group ul { font-size: 13px; }
  .guidance-group ul { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
  .guidance-group li + li { margin: 0; }
  .agenda li { grid-template-columns: 57px minmax(0, 1fr); gap: 13px; }
  .agenda h3 { font-size: 18px; }
  .bodycopy { font-size: 14px; }
}
@media (max-height: 600px) {
  .cover { height: auto; min-height: 620px; }
  .cover-title { max-width: 235px; }
  .cover-event { font-size: 16px; }
  .full-screen-slide:not(.cover) { min-height: max(100svh, 600px); }
  .organizer-group { padding-top: 11px; padding-bottom: 11px; }
  .agenda li { padding: 20px 0; }
  .letter-landscape { min-height: 56cqi; }
  .dress-notice { padding: 14px 0 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .site { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-height: 740px) {
  @container (min-width: 480px) {
    .cover-title { max-width: 250px; margin-top: 12px; margin-bottom: 16px; }
    .cover-event { font-size: 16px; line-height: 1.65; }
    .cover-date { margin-top: 10px; }
  }
}