/* Peony pink, moon white and agate grey: local editorial refinement. */
:root {
  --peony:#EBA0B3;
  --moon:#C0C4C3;
  --agate:#CFCCC9;
  --paper:#F8F4F3;
  --ink:#443C40;
  --muted:#71676B;
  --gold:#9B5368;
  --line:#CFC4C7;
}
body { background:var(--agate); }
body:before {
  background:radial-gradient(ellipse at 12% 25%,#eba0b352,transparent 65%),
    radial-gradient(ellipse at 100% 100%,#c0c4c3cc,transparent 60%);
}
main { background:var(--paper);background-image:none;box-shadow:0 0 80px #443c4010;padding-bottom:0; }
.desktop-note { color:var(--ink); }
.desktop-note i,.names i,.footer-names i,.fine-cross,.witness-line,.hero-lunar { color:var(--gold); }
.body-copy,.section-intro,address { color:var(--muted); }
.hero { background:#F3DCE2; }
.hero-swipe { color:#654651;text-shadow:none;font-size:10px; }
.poster-cover { padding-top:116px;padding-bottom:85px; }
.scripture { background:linear-gradient(165deg,#F5E7EB,var(--paper) 70%); }
.couple-intro { border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px; }
.couple-intro .hero-caption { margin:0 0 8px; }
.scripture .hero-title { margin-bottom:9px; }
.scripture .date { color:var(--ink); }
.scripture .hero-lunar { color:#87586A;margin-bottom:6px; }
.icon-btn { background:#f8f4f3dc;color:var(--ink); }
.record { border-color:#383236;background:repeating-radial-gradient(circle,#292529 0px,#292529 2px,#5A4D53 3px,#292529 4px); }
.record-center { background:var(--gold); }
.journey-rail { background:var(--moon); }
.journey-fill { background:var(--peony); }
.journey-heart { color:var(--gold); }
.journey-status { color:#6E5C64; }
.music-tip { background:#f8f4f3ed;color:var(--ink);border-color:var(--line); }
.photo-slide { padding:119px 0 118px;background:#F4E4E9; }
.photo-slide.chapter-0 { background:linear-gradient(180deg,#F2D7DF,#F7F3F3 54%,#E8E6E4); }
.photo-slide.chapter-1 { background:linear-gradient(180deg,#E6E1DB,#F1EDE7 54%,#CFCCC9); }
.photo-slide.chapter-2 { background:linear-gradient(180deg,#F4DCE4,#F6EBEF); }
.photo-slide.chapter-3 { background:linear-gradient(180deg,#DCE0DE,#F0EFEC 54%,#CFCCC9); }
.photo-slide.chapter-4 { background:linear-gradient(180deg,#F2E2E7,#E3E5E4); }
.photo-slide .photo-tile { border:0; }
.slide-heading { display:none; }
.slide-caption { bottom:74px;left:23px;right:23px;gap:14px;font-size:11px;line-height:1.8;color:#604E56; }
.slide-caption p { margin:0; }
.slide-caption span { white-space:nowrap;color:#76686E; }
.covenant-page { background:#F0D5DE;color:var(--ink); }
.covenant-page .eyebrow,.covenant-page .body-copy,.covenant-page .tie-preamble { color:#69424F; }
.covenant-page .promise-rings { stroke:#875266; }
.covenant-page .tie-names i { color:#78475A; }
.covenant-page:before { background:linear-gradient(transparent,#9B5368); }
.celebration { background:linear-gradient(155deg,#F6E6EB,#F9F5F4); }
.date-card { border-color:#BA919E;background:#fff9fb6e; }
.date-card:before { border-color:#D8BBC5; }
.date-card>strong { color:#98536A; }
.date-line,.time-info { border-color:#CDB8BF; }
.location { background:linear-gradient(180deg,#E8E8E5,#F6E9ED 75%); }
.venue { border-color:#BEB4B8;background:#fff9fb52; }
.map-preview { background:var(--moon); }
.map-preview>span { background:#51434CE8; }
.primary-btn { background:#8C5064;color:#FFF9FB; }
footer { background:#F0D5DE; }
footer>svg { color:#9B7D89; }
.bottom-nav { background:#f8f4f3f0;border-color:#D8C6CE;color:#5A4751; }
.toast { background:#4D3D47F2; }
dialog[open],dialog::backdrop { background:#2E272DFB; }
.landscape-scene {
  display:grid;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);
  align-content:center;gap:12px;padding-top:125px;padding-bottom:123px;
}
.photo-slide.landscape-scene .photo-tile { width:100%;height:100%;min-height:0; }
.photo-slide.landscape-scene .photo-tile img { width:100%;height:100%;object-fit:contain; }
.photo-passage { align-self:center;text-align:center;padding:8px 24px 0; }
.photo-passage blockquote { margin:0 0 14px;font-size:19px;line-height:1.9;letter-spacing:2px; }
.photo-passage em { display:block;font-size:24px;font-style:normal;color:#8C5064;margin-top:8px;letter-spacing:4px; }
.photo-passage cite { font-size:10px;letter-spacing:1.5px;color:#76636D; }
#photo-14 { grid-template-rows:minmax(0,1fr) minmax(0,1.25fr); }
#photo-14 .photo-passage { grid-row:1; }
#photo-14 .photo-tile { grid-row:2; }
@media(max-height:760px) {
  .photo-slide { padding-top:115px;padding-bottom:112px; }
  .slide-caption { bottom:69px;font-size:10px;left:18px;right:18px; }
  .landscape-scene { padding-top:116px;padding-bottom:112px;gap:7px; }
  .photo-passage { padding-top:0; }
  .photo-passage blockquote { font-size:16px;margin-bottom:8px;line-height:1.8; }
  .photo-passage em { font-size:21px;margin-top:5px; }
  .photo-passage cite { font-size:9px; }
  .couple-intro { padding-bottom:10px;margin-bottom:14px; }
}
@media(max-width:370px) {
  .slide-caption { font-size:10px;letter-spacing:0; }
  .photo-passage blockquote { font-size:16px; }
  .photo-passage em { font-size:21px; }
}
/* Paired portraits and the three-photo seaside spread keep each composition intact. */
.photo-slide.layout-portraits {
  --portrait-offset:36px;
  display:grid;grid-template-rows:minmax(0,auto) auto;align-content:center;gap:18px;
  padding-top:122px;padding-bottom:123px;
}
.photo-collage { width:100%;min-height:0; }
.layout-portraits .photo-collage {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-self:center;
  height:min(calc(min(100vw,540px)*.75 + var(--portrait-offset)),calc(100svh - 325px));
  align-items:start;padding-bottom:var(--portrait-offset);
}
.photo-slide.layout-portraits .photo-tile {
  width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;
}
.layout-portraits .photo-tile:nth-child(2) { transform:translateY(36px); }
.photo-slide.layout-portraits .photo-tile img { width:100%;height:100%;object-fit:contain; }
.paired-passage { padding:0 14px; }
.paired-passage p { margin:0;font-size:16px;line-height:1.8;letter-spacing:1px;text-align:center;color:var(--ink); }
.paired-passage p+p { margin-top:6px; }
.paired-passage blockquote { font-size:17px;line-height:1.8;letter-spacing:1px;margin:0 0 10px; }
.paired-passage cite { font-size:10px; }
.photo-slide.layout-seaside { display:block;padding-top:121px;padding-bottom:121px; }
.layout-seaside .photo-collage {
  height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1.14fr) minmax(0,1fr);gap:10px 0;
}
.photo-slide.layout-seaside .photo-tile { width:100%;height:100%;min-height:0;aspect-ratio:auto; }
.layout-seaside .photo-tile:last-child { grid-column:1/-1; }
.photo-slide.layout-seaside .photo-tile img { width:100%;height:100%;object-fit:contain; }
.photo-slide.layout-together { display:flex; }
.covenant-page blockquote { font-size:20px;line-height:2;letter-spacing:2px;margin:12px 0 16px; }
.covenant-page blockquote em { display:block;font-style:normal;font-size:26px;letter-spacing:4px;color:#8C5064;margin-top:14px; }
.covenant-page cite { font-size:11px; }
.covenant-page .promise-rings { height:105px;margin:12px 0 10px; }
#promise { padding-bottom:65px; }
#promise .promise-passage { width:max-content;max-width:100%;text-align:left; }
#promise .promise-passage h2 { font-size:22px;margin:0 0 18px;letter-spacing:2px; }
#promise .promise-passage blockquote { font-size:21px;margin:0 0 12px;letter-spacing:2px;text-align:left; }
#promise .promise-passage cite { display:block;text-align:left;font-size:11px; }
#promise .witness-line { font-size:18px;letter-spacing:3px;margin-top:14px; }
.slide-caption { font-size:12px;letter-spacing:.5px; }
@media(max-height:760px) {
  .photo-slide.layout-portraits { --portrait-offset:26px;gap:14px;padding-top:112px;padding-bottom:110px; }
  .paired-passage p { font-size:15px;line-height:1.75; }
  .layout-portraits .photo-collage { padding-bottom:26px; }
  .layout-portraits .photo-tile:nth-child(2) { transform:translateY(26px); }
  .paired-passage blockquote { font-size:15px;line-height:1.65;margin-bottom:7px; }
  .photo-slide.layout-seaside { padding-top:113px;padding-bottom:109px; }
  .covenant-page .tie-preamble { margin:10px 0 20px; }
  .covenant-page blockquote { font-size:18px; }
  #promise .promise-passage h2 { font-size:20px;margin-bottom:12px; }
  #promise .promise-passage blockquote { font-size:18px;margin-bottom:9px; }
  #promise .witness-line { font-size:16px; }
  .slide-caption { font-size:11px; }
}
/* All compact reading/date scenes occupy one screen, including short phones. */
#promise,#celebration { height:100svh;min-height:100svh;box-sizing:border-box; }
#celebration { padding-top:118px;padding-bottom:76px; }
@media(max-height:820px) {
  #promise { padding:112px 24px 76px; }
  #promise .couple-intro { padding-bottom:9px;margin-bottom:12px; }
  #promise .hero-caption,#promise .hero-title,#promise>.eyebrow,#promise>.fine-cross { display:none; }
  #promise .names { font-size:22px;line-height:1.4; }
  #promise .date { margin:7px 0 5px;font-size:16px; }
  #promise .hero-lunar { margin-bottom:0;font-size:14px;line-height:1.5; }
  #promise .promise-passage h2 { font-size:20px;margin-bottom:11px; }
  #promise .promise-passage blockquote { font-size:18px;line-height:1.8;margin-bottom:0; }
  #promise .divider { margin:11px 0; }
  #promise .body-copy { font-size:12px;line-height:1.8; }
  #promise .invitation { margin-top:10px; }
  #promise .witness-line { font-size:16px;margin-top:11px;line-height:1.6; }
  #celebration { padding:111px 24px 75px; }
  #celebration>.eyebrow { display:none; }
  #celebration h2 { font-size:21px;line-height:1.5; }
  #celebration .date-card { width:245px;margin:10px auto 5px;padding:12px 20px 0; }
  #celebration .date-card>strong { font-size:51px;margin:5px 0 7px; }
  #celebration .date-line { padding:7px 0;font-size:10px; }
  #celebration .lunar-important { font-size:10px;margin:10px 0; }
  #celebration .lunar-important strong { font-size:22px;margin:3px 0; }
  #celebration .time-info { padding:9px 0;font-size:12px; }
  #celebration .countdown-title { margin:11px 0 9px;font-size:11px; }
  #celebration .countdown strong { font-size:29px; }
  #celebration .countdown span { margin-top:5px; }
  #celebration .countdown-note { margin:11px 0 0;font-size:9px; }
  .covenant-page { height:100svh;min-height:100svh; }
}
/* The invitation and venue share the final screen. */
footer.closing-page {
  height:100svh;min-height:100svh;box-sizing:border-box;
  padding:116px 24px 78px;gap:14px;
}
.closing-page .closing-intro { width:100%; }
.closing-page .footer-script { font-size:18px;line-height:1.35;margin:0 0 7px; }
.closing-page h2 { font-size:21px;line-height:1.4;margin:0 0 9px; }
.closing-page .footer-names { font-size:16px;line-height:1.4; }
.closing-page .footer-names i { font-size:21px;margin:0 9px; }
.closing-page .closing-date { font-size:10px;line-height:1.5;letter-spacing:2px;margin:7px 0 0; }
.closing-page .venue { width:100%;max-width:410px;margin:0;padding:16px 16px 14px; }
.closing-page .venue-heading { display:flex;justify-content:center;align-items:baseline;gap:9px; }
.closing-page .venue h3 { font-size:22px;line-height:1.4;letter-spacing:2px;margin:0; }
.closing-page .venue-sub { font-size:11px;line-height:1.5;letter-spacing:1px;margin:0; }
.closing-page address { font-size:12px;line-height:1.7;letter-spacing:.6px;margin-top:8px; }
.closing-page .map-preview { height:clamp(110px,20svh,180px);margin:12px 0 0; }
.closing-page .map-preview>span { font-size:10px;padding:8px; }
.closing-page .venue-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px; }
.closing-page .primary-btn,.closing-page .text-btn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:8px 5px;font-size:11px;line-height:1.5;letter-spacing:1px;
}
.closing-page .text-btn { border:1px solid var(--line);text-decoration:none;color:var(--ink); }
.closing-page .closing-blessing { font-size:10px;line-height:1.5;letter-spacing:2px; }
@media(max-height:700px) {
  footer.closing-page { padding:110px 22px 74px;gap:10px; }
  .closing-page .footer-script { font-size:17px;margin-bottom:5px; }
  .closing-page h2 { font-size:20px;margin-bottom:6px; }
  .closing-page .closing-date { margin-top:5px; }
  .closing-page .venue { padding:12px 14px; }
  .closing-page .map-preview { height:clamp(100px,19svh,133px);margin-top:10px; }
}
@media(max-width:370px) {
  .closing-page .venue h3 { font-size:20px; }
  .closing-page .venue-sub { font-size:10px; }
}