:root {
  --paper:#f5f0e6;
  --ink:#771e1b;
  --red:#8f1d18;
  --gold:#dbc59b;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  color-scheme:light;
  font-family:var(--serif);
  color:var(--ink);
  background:#e6e0d5;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button {
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px;
}
button:disabled {
  cursor:default;
}
button,a {
  touch-action:manipulation;
}
button {
  color:inherit;
}
p,h1,h2,h3 {
  margin:0;
}
button {
  border:0;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 20% 30%,#fff8ee88,transparent 70%);
  pointer-events:none;
}
.desktop-note {
  position:fixed;
  left:max(5vw,calc(50% - 560px));
  top:27%;
  color:#907c6b;
}
.desktop-note>span {
  font-size:10px;
  letter-spacing:3px;
}
.desktop-note p {
  font-size:36px;
  line-height:1.9;
  letter-spacing:8px;
  margin:30px 0;
}
.desktop-note small {
  font-size:12px;
  letter-spacing:3px;
}
.invitation {
  position:relative;
  width:100%;
  max-width:480px;
  height:100svh;
  height:100dvh;
  margin:auto;
  box-shadow:0 12px 75px #47312520;
  background:var(--paper);
  overflow:hidden;
}
.pages {
  height:100%;
  overflow:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.pages.unlocked {
  overflow-y:auto;
}
.pages::-webkit-scrollbar {
  display:none;
}
.page {
  position:relative;
  min-height:100%;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  background-color:var(--paper);
  background-image:url('./assets/paper.svg');
  display:flex;
  flex-direction:column;
}
.music-button {
  position:absolute;
  right:22px;
  top:calc(21px + env(safe-area-inset-top));
  z-index:10;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid currentColor;
  background:#f5f0e6c9;
  display:grid;
  place-items:center;
  transition:color .4s,background .4s;
}
.music-button span {
  font-family:Georgia,serif;
  font-size:23px;
  line-height:1;
}
.music-button:not(.playing)::after {
  content:"";
  position:absolute;
  width:22px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
}
.music-button.playing span {
  animation:music-turn 7s linear infinite;
}
.music-button.on-red {
  background:#751b17;
  color:var(--gold);
}
.cover-paper {
  position:absolute;
  inset:0 0 24%;
  z-index:2;
  display:flex;
  align-items:center;
  flex-direction:column;
  background:var(--paper) url('./assets/paper.svg');
  clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
  padding-top:calc(8vh + env(safe-area-inset-top));
  transition:transform 1.05s cubic-bezier(.65,0,.2,1),opacity .9s;
}
.double-happiness {
  font-size:39px;
  font-weight:500;
  line-height:1.2;
}
.eyebrow {
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:3.5px;
  margin-top:14px;
}
.vertical-title {
  display:flex;
  flex-direction:row;
  gap:18px;
  align-items:flex-start;
  margin:34px 0 25px;
}
.vertical-title h1 {
  writing-mode:vertical-rl;
  font-size:clamp(35px,5.7vh,52px);
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.15;
}
.vertical-title p {
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:3px;
  padding-top:7px;
}
.cover-names {
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  font-size:21px;
  letter-spacing:4px;
}
.cover-names i {
  font:italic 24px Georgia,serif;
  letter-spacing:0;
}
.cover-date {
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:3px;
  margin-top:17px;
}
.envelope-base {
  position:absolute;
  inset:0;
  background:#8b211c url('./assets/paper.svg');
}
.envelope-base::before,.envelope-base::after {
  content:"";
  position:absolute;
  bottom:-2px;
  width:100%;
  height:42%;
  background:#801b18;
  clip-path:polygon(0 0,100% 100%,0 100%);
  filter:drop-shadow(1px -2px 2px #420c1240);
}
.envelope-base::after {
  transform:scaleX(-1);
  background:#8f241e;
}
.open-invitation {
  position:absolute;
  top:calc(76% - 39px);
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  background:none;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:200px;
  padding:0;
  transition:opacity .4s;
}
.seal {
  display:grid;
  place-items:center;
  width:79px;
  height:79px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#b44a34,#7a1b15 75%);
  box-shadow:0 5px 9px #350b1355,inset 0 0 0 3px #b9674e,inset 0 0 0 5px #631712,inset 0 0 0 7px #a5422d;
  color:#e0ae83;
  text-shadow:0 2px #510f0c;
  font-size:45px;
  transition:transform .3s;
}
.open-invitation:hover .seal {
  transform:scale(1.06);
}
.open-label {
  font-size:13px;
  letter-spacing:3px;
  color:var(--gold);
  margin-top:30px;
}
.cover-foot {
  position:absolute;
  bottom:calc(62px + env(safe-area-inset-bottom));
  width:100%;
  text-align:center;
  color:#e0c59e;
  font-size:10px;
  letter-spacing:4px;
}
.cover.opening .cover-paper {
  transform:translateY(-105%);
  opacity:.2;
}
.cover.opening .open-invitation {
  opacity:0;
  pointer-events:none;
}
.page-dots {
  position:absolute;
  bottom:calc(17px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  z-index:10;
  color:var(--ink);
}
.page-dots button {
  height:28px;
  width:26px;
  background:none;
  display:grid;
  place-items:center;
  padding:0;
}
.page-dots button::before {
  content:"";
  height:5px;
  width:5px;
  border:1px solid currentColor;
  border-radius:50%;
  transition:background .3s,transform .3s;
}
.page-dots button[aria-current="page"]::before {
  background:currentColor;
  transform:scale(1.2);
}
.page-dots.on-red {
  color:var(--gold);
}
.chapter-heading {
  padding:calc(49px + env(safe-area-inset-top)) 30px 17px;
  flex-shrink:0;
}
.script-title {
  font:italic clamp(40px,6.3vh,60px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-2px;
}
.chapter-heading h2 {
  font-size:16px;
  font-weight:400;
  letter-spacing:3px;
  margin-top:8px;
  color:#473b2e;
}
.short-rule {
  display:block;
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.55;
  margin-top:16px;
}
.photo {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  min-height:0;
  flex:1;
  overflow:hidden;
  background:#d5c6b4;
}
.photo::after,.large-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--photo);
  background-size:200% auto;
  background-position:left center;
  background-repeat:no-repeat;
}
.chinese-photo::after {
  background-position:right center;
}
.photo.custom::after,.large-photo.custom::after {
  background-size:cover;
  background-position:center;
}
.photo-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:17px;
  letter-spacing:4px;
}
.photo-caption {
  padding:20px 30px 6px;
  flex-shrink:0;
}
.photo-caption>p:first-child {
  font-size:14px;
  line-height:1.9;
  color:#4c4338;
  letter-spacing:2px;
}
.signature {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  letter-spacing:3px;
  font-size:18px;
}
.photo-caption .signature {
  justify-content:flex-start;
  margin-top:17px;
  font-size:17px;
}
.signature i {
  font:italic 20px Georgia,serif;
  letter-spacing:0;
}
.next-page {
  align-self:center;
  background:none;
  font-size:10px;
  letter-spacing:2px;
  padding:12px 20px 54px;
  flex-shrink:0;
  opacity:.85;
}
.next-page span {
  margin-left:7px;
}
.chinese {
  background-color:#851e19;
  color:var(--gold);
}
.chinese::before {
  content:"";
  position:absolute;
  inset:12px;
  z-index:2;
  border:1px solid #d9b78c33;
  pointer-events:none;
}
.chinese-heading {
  text-align:center;
  padding:calc(56px + env(safe-area-inset-top)) 20px 23px;
  flex-shrink:0;
}
.chinese-heading .double-happiness {
  font-size:55px;
}
.chinese-heading h2 {
  font-size:17px;
  letter-spacing:3px;
  font-weight:400;
  margin-top:15px;
}
.chinese-heading .short-rule,.chinese-caption .short-rule {
  margin:16px auto 0;
}
.chinese-photo {
  background:#631511;
}
.chinese-caption {
  text-align:center;
  padding:24px 20px 3px;
  flex-shrink:0;
}
.chinese-caption p {
  font-size:18px;
  letter-spacing:3px;
}
.chinese-caption small {
  display:block;
  font-size:10px;
  letter-spacing:4px;
  margin-top:14px;
}
.details-content {
  margin:auto 0;
  padding:calc(65px + env(safe-area-inset-top)) 36px calc(65px + env(safe-area-inset-bottom));
  text-align:center;
}
.chinese-eyebrow {
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:6px;
  margin:0;
}
.centered {
  margin:15px auto;
}
.details h2 {
  font-size:clamp(27px,4vh,36px);
  font-weight:400;
  letter-spacing:3px;
  margin:25px 0;
}
.details .signature {
  font-size:17px;
}
.wedding-date {
  margin:36px 0 27px;
}
.wedding-date p {
  font:36px Georgia,serif;
  letter-spacing:1px;
}
.wedding-date span {
  display:block;
  font-size:15px;
  letter-spacing:3px;
  margin-top:11px;
}
.ornament {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin-bottom:25px;
}
.ornament::before,.ornament::after {
  content:"";
  height:1px;
  flex:1;
  background:#b989754f;
}
.details h3 {
  font-size:20px;
  font-weight:400;
  letter-spacing:2px;
  color:#42362b;
  overflow-wrap:anywhere;
}
.address {
  font-size:13px;
  line-height:1.8;
  margin:10px 0 20px;
  color:#716050;
  overflow-wrap:anywhere;
}
.timeline {
  list-style:none;
  text-align:left;
  padding:0 0 0 24px;
  margin:20px auto 27px;
  width:max-content;
  max-width:100%;
  color:#514335;
}
.timeline li {
  position:relative;
  padding:0 0 18px 20px;
  border-left:1px solid #c6a18b;
  font-size:13px;
  letter-spacing:2px;
  display:flex;
  gap:18px;
}
.timeline li:last-child {
  padding-bottom:0;
  border-color:transparent;
}
.timeline li::before {
  content:"";
  position:absolute;
  left:-4px;
  top:5px;
  background:var(--ink);
  width:7px;
  height:7px;
  border-radius:50%;
}
.timeline time {
  font-family:Georgia,serif;
  letter-spacing:1px;
}
.primary-button {
  background:var(--ink);
  color:var(--paper);
  width:100%;
  padding:15px 12px;
  border-radius:3px;
  letter-spacing:3px;
  font-size:16px;
  line-height:1.5;
  transition:background .2s;
}
.primary-button:hover {
  background:#951f19;
}
.primary-button span {
  float:right;
}
.text-button {
  background:none;
  padding:12px 20px;
  font-size:11px;
  letter-spacing:2px;
}
.ending {
  font-size:10px;
  color:#8a7662;
  letter-spacing:2px;
  margin-top:10px;
}
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s,transform .8s;
}
.active .reveal {
  opacity:1;
  transform:none;
}
.active .reveal:nth-child(2) {
  transition-delay:.1s;
}
.active .reveal:nth-child(3) {
  transition-delay:.2s;
}
.toast {
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translate(-50%,12px);
  z-index:40;
  max-width:min(85vw,370px);
  width:max-content;
  background:#30251fec;
  color:#fff7ed;
  padding:13px 19px;
  border-radius:4px;
  font:13px/1.6 system-ui,sans-serif;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}
dialog {
  border:0;
  background:var(--paper);
  color:var(--ink);
  padding:30px;
  max-width:calc(100vw - 32px);
  width:400px;
  border-radius:4px;
}
dialog::backdrop {
  background:#1e100de6;
}
.close-dialog {
  position:absolute;
  right:8px;
  top:7px;
  background:transparent;
  font:28px/1 Arial,sans-serif;
  z-index:3;
  width:44px;
  height:44px;
}
#photo-dialog {
  padding:0 0 22px;
  background:#211715;
  color:var(--paper);
  width:min(600px,95vw);
}
.large-photo {
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  max-height:80dvh;
  background:#40201a;
}
.large-photo.chinese-photo::after {
  background-position:right center;
}
.large-photo.custom.chinese-photo::after {
  background-position:center;
}
#photo-dialog p {
  font-size:11px;
  text-align:center;
  margin-top:18px;
  letter-spacing:2px;
}
#location-dialog h2 {
  font-size:25px;
  font-weight:400;
  margin:10px 0 20px;
}
#location-message {
  font-size:14px;
  line-height:1.9;
  margin-bottom:24px;
  overflow-wrap:anywhere;
}
.noscript {
  position:fixed;
  inset:0;
  background:var(--paper);
  padding:60px 30px;
  z-index:100;
}
@keyframes music-turn {
  to {
    transform:rotate(360deg);
  }
}
@media(min-width:800px) {
  .invitation {
    height:calc(100dvh - 48px);
    margin:24px auto;
    border-radius:4px;
  }
}
@media(max-width:1000px) {
  .desktop-note {
    display:none;
  }
}
@media(max-height:740px) {
  .cover-foot {
    display:none;
  }
  .cover-paper {
    padding-top:6vh;
  }
  .vertical-title {
    margin:23px 0 18px;
  }
  .vertical-title h1 {
    font-size:36px;
  }
  .cover-names {
    font-size:18px;
    gap:3px;
  }
  .cover-date {
    margin-top:10px;
  }
  .chapter-heading {
    padding-top:36px;
    padding-bottom:13px;
  }
  .script-title {
    font-size:42px;
  }
  .chinese-heading {
    padding-top:37px;
    padding-bottom:16px;
  }
  .chinese-heading .double-happiness {
    font-size:43px;
  }
  .chinese-heading h2 {
    margin-top:10px;
    font-size:15px;
  }
  .chinese-caption {
    padding-top:17px;
  }
  .photo-caption {
    padding-top:13px;
  }
  .photo-caption .signature {
    margin-top:10px;
  }
  .next-page {
    padding-top:9px;
    padding-bottom:47px;
  }
  .details-content {
    padding:54px 30px 50px;
  }
  .details h2 {
    margin:18px 0;
    font-size:28px;
  }
  .wedding-date {
    margin:23px 0 20px;
  }
  .wedding-date p {
    font-size:31px;
  }
  .ornament {
    margin-bottom:18px;
  }
  .timeline {
    margin:16px auto 20px;
  }
  .timeline li {
    padding-bottom:13px;
  }
  .ending {
    margin-top:2px;
  }
}
@media(max-height:600px) {
  .page {
    height:auto;
    min-height:100%;
  }
  .cover {
    height:100%;
    min-height:550px;
  }
  .western,.chinese {
    height:680px;
  }
  .details-content {
    padding-top:60px;
  }
  .pages {
    scroll-snap-type:y proximity;
  }
  .details {
    min-height:670px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .reveal {
    transform:none;
  }
  .cover.opening .cover-paper {
    opacity:0;
  }
}
/* 长地址和较大的系统字号可自然撑开最后一页。 */
.details {
  height:auto;
  min-height:100%;
}

/* 嵌入真实地图：未配置 Key 时保留诚实的加载/空状态，不绘制虚假道路。 */
.venue-map { position:relative; height:178px; margin:22px 0 16px; border:1px solid #d1b89d; border-radius:12px; overflow:hidden; background:#eee9df; }
.map-canvas { position:absolute; inset:0; }
.map-status { position:absolute; inset:0; display:grid; place-items:center; padding:24px 20px 65px; color:#76614f; font-size:12px; letter-spacing:1px; line-height:1.8; pointer-events:none; }
.map-status[hidden] { display:none; }
.map-open { position:absolute; inset:0 0 27px; width:100%; background:transparent; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:12px; text-align:left; }
.map-destination { background:var(--paper); padding:7px 11px; border-radius:3px; font-size:13px; max-width:65%; overflow-wrap:anywhere; box-shadow:0 2px 9px #39261918; }
.map-navigation { background:#168477; color:white; border-radius:24px; padding:11px 14px; white-space:nowrap; font:12px system-ui,sans-serif; box-shadow:0 3px 9px #194c3530; }
.map-navigation>span { font-size:20px; vertical-align:middle; margin-right:4px; }
.map-ready .map-canvas { pointer-events:none; }

.home-invitation { font-size:13px; line-height:1.9; color:#716050; letter-spacing:1px; margin:0 0 24px; }
.timeline time { min-width:7.5em; font-family:var(--serif); letter-spacing:0; }
.wedding-date span { line-height:1.8; letter-spacing:1px; }