@charset "UTF-8";
:root {
  --paper: #faf6e9;
  --cream: #fffaf0;
  --ink: #504c60;
  --muted: #8c8396;
  --accent: #7b779c;
  --accent-dark: #585677;
  --frame: #a6a0b9;
  --frame-dark: #77748e;
  --gold: #d8bc86;
  --line: #ded6df;
  --red: #c77a8c;
  --sans: "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px dashed var(--accent); outline-offset: 6px; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; width: 100%; object-fit: cover; }
.header { max-width: 1440px; margin: auto; height: 94px; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 17px; color: var(--accent-dark); font-size: 21px; font-weight: 700; letter-spacing: 3px; line-height: 1.4; }
.brand small { display: block; font: 8px/1.8 var(--mono); letter-spacing: 1.5px; color: var(--muted); }
.desktop-nav { display: flex; gap: 31px; font-size: 12px; letter-spacing: 1px; }
.desktop-nav a:hover { color: var(--accent); }
.music-button { background: #f1e7cb; border: 1px solid #d8c7a1; display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.music-disc { font-size: 19px; color: var(--accent); line-height: 1; }
.music-button[aria-pressed="true"] { background: #e8e2f0; border-color: #b0a4c9; }
.hero { position: relative; overflow: hidden; isolation: isolate; background: #d8d9ec; min-height: 680px; border-top: 3px solid #c8c4db; border-bottom: 5px solid #b1abc6; }
.hero-content { max-width: 1160px; margin: auto; display: grid; grid-template-columns: 1.12fr 1fr; gap: 105px; padding: 69px 40px 110px; align-items: center; }
.pixel-panel { background: var(--cream); border: 4px solid var(--frame-dark); box-shadow: 0 0 0 4px #bbb1cc, 0 0 0 7px var(--frame-dark), 7px 10px 0 2px #68647c26, inset 0 0 0 3px #e3d2b1; }
.hero-copy { position: relative; padding: 32px 32px 34px; }
.hero-copy:before, .hero-copy:after { content: ""; width: 5px; height: 5px; background: var(--frame-dark); position: absolute; top: 9px; left: 9px; }
.hero-copy:after { left: auto; right: 9px; }
.eyebrow { font: 10px/1.8 var(--mono); letter-spacing: 1.8px; color: var(--muted); }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; }
.hero h1 { font-size: clamp(30px, 3.6vw, 49px); color: var(--accent-dark); font-weight: 800; line-height: 1.35; letter-spacing: 2px; margin-top: 22px; white-space: nowrap; }
.hero h1>span { display: block; font-size: 14px; line-height: 1.8; font-weight: 400; letter-spacing: 4px; margin-top: 10px; color: var(--muted); }
.couple { display: flex; align-items: center; gap: 23px; margin-top: 26px; font-size: 20px; font-weight: 500; letter-spacing: 3px; }
.pixel-heart, .tiny-heart { display: inline-block; position: relative; width: 23px; height: 20px; flex-shrink: 0; }
.pixel-heart:before, .tiny-heart:before { content: ""; width: 4px; height: 4px; position: absolute; left: 2px; top: 1px; background: var(--red); box-shadow: 4px 0 var(--red), 12px 0 var(--red), 16px 0 var(--red), -4px 4px var(--red), 0 4px #db7f65, 4px 4px #db7f65, 8px 4px var(--red), 12px 4px var(--red), 16px 4px var(--red), 20px 4px var(--red), 0 8px var(--red), 4px 8px var(--red), 8px 8px var(--red), 12px 8px var(--red), 16px 8px var(--red), 4px 12px var(--red), 8px 12px var(--red), 12px 12px var(--red), 8px 16px var(--red); }
.tiny-heart { transform: scale(.65); width: 17px; margin-left: -3px; }
.hero-description { color: var(--muted); margin-top: 18px; font-size: 12px; line-height: 1.9; letter-spacing: 1px; }
.hero-date { display: flex; gap: 15px; align-items: center; border-top: 1px dashed #cdbb92; padding-top: 17px; margin-top: 22px; font-family: var(--mono); letter-spacing: 1px; font-size: 17px; }
.hero-date .date-weekday { font: 11px var(--sans); color: var(--muted); border-left: 1px solid #d6c29b; padding-left: 15px; letter-spacing: 1px; }
.hero-place { font-size: 11px; color: var(--muted); margin-top: 5px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 2px solid #57516f; background: var(--accent); box-shadow: inset 0 2px 0 #a8a3c1, inset 0 -3px 0 #625b80, 3px 3px 0 #644b2d28; padding: 12px 22px; color: #fff6dc; font-size: 12px; letter-spacing: 1px; transition: transform .15s, background .15s; }
.primary-button:hover { background: #8e87aa; transform: translateY(-2px); }
.primary-button:active { transform: translateY(2px); }
.primary-button>span { font-size: 17px; line-height: 1; }
.hero .primary-button { margin-top: 23px; }
.hero-memory { background: #fff7df; padding: 12px 12px 20px; transform: rotate(3deg); position: relative; border: 3px solid #8b819a; box-shadow: 5px 6px 0 #74688130; max-width: 360px; width: 100%; margin: 0 auto; }
.hero-photo { display: block; padding: 0; background: #b4b3a0; width: 100%; overflow: hidden; aspect-ratio: .88; }
.hero-photo img { width: 100%; height: 100%; object-position: 50% 35%; transition: transform .6s; }
.hero-photo:hover img { transform: scale(1.035); }
.photo-caption { font-size: 11px; text-align: center; color: #948395; margin-top: 15px; letter-spacing: 1px; }
.small-heart { color: var(--red); margin-left: 12px; }
.photo-pin { width: 30px; height: 22px; background: #b95644; position: absolute; left: 48%; top: -17px; border: 3px solid #733d30; z-index: 2; box-shadow: 2px 2px 0 #57352230; }
.photo-pin:before { content: ""; display: block; width: 7px; height: 4px; background: #e4a270; margin: 3px; }
.memory-stamp { position: absolute; right: -25px; bottom: -21px; width: 75px; height: 75px; border: 2px dashed #a29ab5; border-radius: 50%; background: #f4e9d4; display: grid; place-content: center; text-align: center; font: 10px/1.6 var(--mono); transform: rotate(-16deg); color: var(--accent); }
.hero-bottom { position: absolute; bottom: 0; left: 0; width: 100%; background: #8e88accf; padding: 13px 7%; display: flex; justify-content: space-between; color: #f9efd3; font: 9px/1.8 var(--mono); letter-spacing: 1.6px; }
.hero-bottom span+span { font: 11px/1.8 var(--sans); letter-spacing: 2px; }
.section { max-width: 1160px; margin: auto; padding: 90px 40px; }
h2 { color: var(--accent-dark); font-size: 29px; font-weight: 700; line-height: 1.5; letter-spacing: 2px; }
.invitation { position: relative; padding-top: 90px; padding-bottom: 75px; }
.letter-paper { max-width: 690px; margin: auto; background: #fffaf0; padding: 30px 58px 42px; border: 1px solid #d9cbaa; box-shadow: 4px 5px 0 #e8ddbe, 5px 6px 0 #d9cbaa; position: relative; }
.letter-top { display: flex; align-items: center; justify-content: space-between; font: 9px var(--mono); color: #b7a57f; border-bottom: 1px dashed #ddcfac; padding-bottom: 16px; margin-bottom: 30px; letter-spacing: 1.5px; }
.letter-heart { font-size: 19px; color: #bc7b63; }
.letter-paper h2 { margin-top: 6px; font-size: 26px; }
.invitation-lines { font-size: 13px; line-height: 2.3; letter-spacing: .8px; color: #7c6b50; margin-top: 24px; }
.invitation-lines p:first-child { margin-bottom: 15px; color: var(--ink); }
.signature { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; font-size: 16px; color: var(--accent); }
.signature span:nth-child(2) { font-family: var(--mono); font-size: 15px; color: var(--muted); }
.signature small { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.letter-postmark { position: absolute; bottom: 37px; right: 35px; border: 2px solid #c17b5d; color: #b26952; padding: 6px 8px; font-size: 13px; line-height: 1.3; transform: rotate(-13deg); opacity: .7; }
.letter-decoration { position: absolute; left: 8%; top: 45%; transform: rotate(-10deg); }
.letter-decoration .pixel-star+span { margin: 35px 0 0 25px; }
.moments { padding-top: 25px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-heading h2 { margin-top: 7px; }
.section-note { font-size: 11px; color: var(--muted); line-height: 1.9; letter-spacing: 1px; text-align: right; }
.album-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 29px 0 30px; }
.album-filters button { padding: 9px 17px; border: 1px solid #d8c7a0; background: #f1e8cf; font-size: 11px; letter-spacing: 1px; box-shadow: 0 2px 0 #e2d2af; }
.album-filters button[aria-pressed="true"] { color: #fff7df; background: var(--accent); border-color: var(--accent-dark); box-shadow: 0 2px 0 var(--accent-dark); }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.album-photo { padding: 8px 8px 13px; background: #fffaf0; border: 1px solid #d8c7a4; box-shadow: 3px 4px 0 #dfd0ac66; min-width: 0; }
.album-photo:nth-child(4n+1) { transform: rotate(-1.4deg); }
.album-photo:nth-child(4n) { transform: rotate(1.4deg); }
.album-photo button { padding: 0; background: #c9c8ad; display: block; width: 100%; aspect-ratio: .93; overflow: hidden; position: relative; }
.album-photo img { height: 100%; transition: transform .5s; }
.album-photo button:hover img { transform: scale(1.045); }
.photo-expand { position: absolute; bottom: 7px; right: 7px; color: #fff; background: #443d3066; width: 23px; height: 23px; font-size: 17px; display: grid; place-items: center; }
.album-photo figcaption { font-size: 10px; letter-spacing: .3px; margin: 11px 4px 0; color: #7b694e; line-height: 1.8; }
.album-photo figcaption>span { display: block; color: #b29b73; font: 8px/1.8 var(--mono); margin-top: 4px; letter-spacing: 1px; }
.album-tip { text-align: center; color: #a28c63; font-size: 10px; letter-spacing: 1px; margin-top: 30px; }
.wedding-day { background: #e6e1ef; border-top: 2px solid #d0c6df; border-bottom: 2px solid #d0c6df; position: relative; }
.wedding-day:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: repeating-linear-gradient(90deg,#c8bdd9 0 6px,transparent 6px 14px); opacity: .4; }
.day-inner { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 90px; padding-top: 83px; padding-bottom: 83px; }
.day-intro { position: relative; }
.day-intro h2 { margin-top: 12px; }
.day-intro>p:not(.eyebrow) { font-size: 13px; color: #8c829e; margin-top: 24px; letter-spacing: 1px; line-height: 2; }
.day-intro .countdown { display: inline-block; font-size: 11px; padding: 7px 13px; background: #f8f0df; border: 1px dashed #b2a5c7; margin-top: 25px; }
.day-star { position: absolute; right: 10px; bottom: 22px; transform: scale(2); }
.calendar { padding: 23px 25px 29px; position: relative; }
.calendar:before, .calendar:after { content: ""; width: 8px; height: 22px; position: absolute; top: -13px; background: #6c6042; border: 2px solid #473d2b; left: 25px; }
.calendar:after { left: auto; right: 25px; }
.calendar-heading { display: flex; justify-content: space-between; font: bold 13px var(--mono); color: var(--frame); border-bottom: 1px dashed #cdb996; padding-bottom: 17px; }
.calendar-date { position: relative; text-align: center; padding: 21px 0 14px; }
.calendar-date strong { font: 86px/.95 var(--mono); color: var(--accent-dark); }
.calendar-date>.date-weekday { display: block; font-size: 11px; color: var(--muted); margin-top: 14px; letter-spacing: 2px; }
.calendar-circle { position: absolute; top: 12px; left: calc(50% - 65px); width: 130px; height: 111px; border: 2px solid #b5684c; border-radius: 47% 55% 45% 53%; transform: rotate(-13deg); opacity: .6; }
.calendar-label { text-align: center; color: var(--red); font-size: 11px; letter-spacing: 2px; margin-top: 9px; }
.schedule { margin-top: 24px; padding-top: 5px; border-top: 1px dashed #d7c6a1; }
.schedule-item { display: grid; grid-template-columns: 53px 80px 1fr; gap: 9px; align-items: center; padding: 12px 0 5px; }
.schedule-item time { font: 15px var(--mono); color: var(--accent); }
.schedule-item h3 { font-size: 11px; font-weight: 500; letter-spacing: 1px; }
.schedule-item p { font-size: 9px; color: #a38e69; }
.venue { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.venue h2 { margin: 9px 0 30px; font-size: 27px; }
.venue h3 { font-size: 20px; font-weight: 500; letter-spacing: 1px; }
.venue-hall { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin: 10px 0 19px; }
.address { font-size: 11px; color: var(--muted); }
.venue-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 23px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; border: 0; border-bottom: 1px dashed #b6a584; padding: 4px 0; background: none; }
.text-link span { font-size: 17px; }
.venue-note { margin-top: 24px; font-size: 11px; color: #9f8d6c; line-height: 2; letter-spacing: .8px; }
.map-preview { position: relative; height: 310px; border: 5px solid #a17b4c; outline: 2px solid var(--frame-dark); box-shadow: 5px 5px 0 #ccb99166, inset 0 0 0 3px #d9b378; background: #dfe4bc; overflow: hidden; isolation: isolate; }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(#6f945111 1px,transparent 1px),linear-gradient(90deg,#6f945111 1px,transparent 1px); background-size: 18px 18px; }
.map-lake { position: absolute; width: 75%; height: 130%; top: 29%; right: -27%; background: #acd2ce; border: 4px solid #c0dfd5; transform: rotate(-19deg); }
.map-lake span { position: absolute; top: 30%; left: 23%; color: #6f9b8d; font-size: 17px; letter-spacing: 9px; transform: rotate(19deg); }
.map-park { position: absolute; width: 58%; height: 54%; left: -20%; top: -10%; background: #b9ce9e; border: 4px solid #c7d9ad; }
.map-road { position: absolute; width: 130%; height: 15px; background: #fcf1ce; border: 2px solid #cfbf93; left: -15%; z-index: 1; }
.road-one { top: 35%; transform: rotate(-22deg); }
.road-two { top: 59%; transform: rotate(30deg); }
.road-three { top: 20%; transform: rotate(74deg); }
.map-street { position: absolute; top: 28%; left: 29%; font-size: 10px; color: #9b946a; z-index: 2; transform: rotate(-22deg); }
.map-area { position: absolute; bottom: 15%; left: 8%; color: #8c9e6b; font-size: 11px; }
.map-marker { position: absolute; top: 33%; left: 14%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.map-marker>span { display: grid; place-items: center; width: 35px; height: 34px; font-size: 23px; color: var(--red); background: var(--cream); border: 2px solid var(--frame-dark); box-shadow: 2px 2px #96794b44; }
.map-marker strong { background: var(--cream); font-size: 10px; font-weight: 400; padding: 6px 10px; border: 1px solid #b8a574; }
.map-tag { position: absolute; bottom: 9px; right: 9px; font-size: 9px; color: #7f805b; background: #fff8dbea; padding: 5px 7px; z-index: 3; }
.closing { padding: 53px 25px 30px; text-align: center; background: #e8e4ef; border-top: 2px solid #d4c9df; }
.closing h2 { margin-top: 10px; font-size: 27px; }
.closing>p:not(.eyebrow) { font-size: 12px; color: #9b8fa5; margin-top: 13px; }
.closing .primary-button { margin-top: 27px; }
.closing-bottom { font: 9px var(--mono); letter-spacing: 1.5px; color: #a498b0; margin-top: 39px; }
.closing-date { margin-left: 22px; }
.closing .demo-note { font-size: 9px !important; letter-spacing: .5px; margin-top: 17px !important; }
.mobile-nav { display: none; }
.skip-link { position: fixed; top: -100px; left: 20px; background: var(--cream); z-index: 60; padding: 15px; }
.skip-link:focus { top: 10px; }
.toast { position: fixed; bottom: 85px; left: 50%; transform: translate(-50%,20px); background: #625b7cf5; color: var(--cream); padding: 12px 22px; width: max-content; max-width: 88vw; z-index: 80; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
dialog { padding: 0; border: 0; }
dialog::backdrop { background: #3d3854d9; }
.dialog-close { position: absolute; right: 10px; top: 9px; background: transparent; display: grid; place-items: center; width: 39px; height: 39px; font-size: 29px; line-height: 1; z-index: 2; }
.photo-dialog { background: #292536; color: var(--cream); width: 100vw; height: 100dvh; max-width: none; max-height: none; }
.photo-dialog[open] { display: flex; align-items: center; justify-content: center; }
.photo-dialog figure { max-width: 85vw; }
.photo-dialog img { max-height: 79dvh; max-width: 85vw; object-fit: contain; width: auto; margin: auto; border: 4px solid #f4eacb; }
.photo-dialog figcaption { text-align: center; font-size: 13px; letter-spacing: 1px; margin-top: 21px; }
.photo-arrow { position: absolute; top: 44%; background: #ffffff15; color: var(--cream); width: 42px; height: 60px; font-size: 35px; }
.prev { left: 10px; }
.next { right: 10px; }
.photo-count { position: absolute; bottom: 24px; left: 0; width: 100%; text-align: center; font: 11px var(--mono); letter-spacing: 3px; color: #c2b7d7; }
.share-dialog, .secret-dialog { width: min(430px,85vw); background: var(--cream); color: var(--ink); padding: 45px 30px 30px; text-align: center; overflow: visible; }
.share-dialog>.pixel-heart { margin: 4px auto 16px; }
.share-dialog h2, .secret-dialog h2 { font-size: 23px; letter-spacing: 1px; }
.share-dialog p, .secret-dialog>p:not(.eyebrow) { font-size: 12px; color: var(--muted); line-height: 2; margin-top: 20px; }
.share-dialog .primary-button { width: 100%; margin-top: 24px; }
.share-dialog .local-share-note { font-size: 10px; }
.secret-dialog img { aspect-ratio: 4/3; margin-top: 23px; border: 3px solid #d4bc89; }
.secret-dialog .primary-button { margin-top: 20px; }
.secret-dialog .eyebrow { margin-bottom: 8px; font-size: 9px; }
.noscript { padding: 20px; text-align: center; color: var(--red); }
@media (max-width: 1050px) {
  .desktop-nav { gap: 20px; font-size: 11px; }
  .hero-content { gap: 65px; padding-left: 6%; padding-right: 6%; }
  .hero-copy { padding: 30px 23px; }
  .hero h1 { font-size: 37px; }
  .section { padding-left: 6%; padding-right: 6%; }
  .day-inner, .venue { gap: 50px; }
  .photo-grid { gap: 16px; }
  .day-intro h2, .venue h2 { font-size: 25px; }
}
@media (max-width: 760px) {
  .desktop-nav { display: none; }
  .header { height: 79px; }
  .brand { font-size: 18px; gap: 14px; }
  .brand small { font-size: 7px; letter-spacing: 1px; }
  .music-button { font-size: 10px; padding: 7px 9px; }
  .hero { min-height: auto; }
  .hero-content { gap: 36px; padding: 58px 7% 130px; }
  .hero h1 { font-size: 29px; letter-spacing: 1px; }
  .hero h1>span { font-size: 10px; letter-spacing: 2px; }
  .hero-copy { padding: 24px 18px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .8px; gap: 6px; }
  .couple { font-size: 16px; gap: 16px; letter-spacing: 1px; }
  .hero-description { font-size: 10px; }
  .hero-date { font-size: 13px; gap: 9px; }
  .hero-date .date-weekday { font-size: 9px; padding-left: 9px; }
  .hero-place { font-size: 9px; }
  .hero .primary-button { padding: 10px 16px; font-size: 10px; gap: 15px; }
  .hero-memory { padding: 8px 8px 14px; }
  .photo-caption { font-size: 9px; letter-spacing: 0; }
  .small-heart { margin-left: 4px; }
  .memory-stamp { width: 58px; height: 58px; font-size: 8px; right: -13px; }
  .section { padding-top: 70px; padding-bottom: 70px; }
  .letter-paper { padding: 26px 35px 35px; }
  .letter-decoration { display: none; }
  .letter-postmark { right: 25px; bottom: 27px; }
  .signature small { flex-basis: 100%; margin-top: -9px; }
  .moments { padding-top: 0; }
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  h2 { font-size: 26px; }
  .section-note { font-size: 10px; }
  .day-inner { gap: 35px; }
  .day-intro h2 { font-size: 23px; letter-spacing: 1px; }
  .day-intro .eyebrow { font-size: 8px; }
  .day-intro>p:not(.eyebrow) { font-size: 11px; }
  .day-intro .countdown { font-size: 10px!important; }
  .calendar { padding: 20px 16px 25px; }
  .schedule-item { grid-template-columns: 45px 1fr; gap: 5px; }
  .schedule-item p { display: none; }
  .venue { gap: 35px; }
  .venue h2 { font-size: 23px; }
  .venue h3 { font-size: 17px; }
  .map-preview { height: 310px; }
  .venue-actions { gap: 16px; }
  .venue-actions .primary-button { padding: 11px 15px; font-size: 10px; gap: 14px; }
}
@media (max-width: 540px) {
  html { scroll-padding-top: 24px; }
  .header { height: 73px; padding: 0 6%; gap: 12px; }
  .brand { font-size: 17px; letter-spacing: 2px; }
  .brand small { font-size: 6px; }
  .music-disc { font-size: 17px; }
  .hero-content { display: flex; flex-direction: column; gap: 40px; padding: 43px 10% 138px; }
  .hero-copy { width: 100%; max-width: 375px; padding: 26px 26px 28px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .hero h1 { font-size: clamp(29px,8.7vw,43px); letter-spacing: 1px; margin-top: 17px; }
  .hero h1>span { font-size: 12px; letter-spacing: 2px; margin-top: 8px; }
  .couple { font-size: 19px; gap: 20px; margin-top: 23px; letter-spacing: 1px; }
  .hero-description { font-size: 12px; margin-top: 16px; }
  .hero-date { font-size: 16px; gap: 13px; margin-top: 17px; padding-top: 16px; }
  .hero-date .date-weekday { font-size: 10px; padding-left: 13px; }
  .hero-place { font-size: 10px; }
  .hero .primary-button { margin-top: 20px; padding: 11px 20px; font-size: 11px; }
  .hero-memory { max-width: 255px; padding: 9px 9px 16px; transform: rotate(3deg); }
  .hero-photo { aspect-ratio: .94; }
  .photo-caption { font-size: 10px; margin-top: 12px; }
  .memory-stamp { width: 61px; height: 61px; right: -20px; bottom: -22px; }
  .hero-bottom { padding: 12px 6%; }
  .hero-bottom span:first-child { font-size: 7px; letter-spacing: .5px; }
  .hero-bottom span+span { font-size: 8px; letter-spacing: .7px; }
  .section { padding: 62px 7%; }
  .invitation { padding-top: 57px; padding-bottom: 55px; }
  .letter-paper { padding: 22px 23px 31px; }
  .letter-top { font-size: 8px; letter-spacing: .7px; padding-bottom: 12px; margin-bottom: 23px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .letter-paper h2 { font-size: 22px; letter-spacing: 1px; }
  .invitation-lines { font-size: 13px; letter-spacing: 0; line-height: 2.1; margin-top: 19px; }
  .signature { font-size: 14px; gap: 11px; margin-top: 24px; }
  .signature small { font-size: 9px; }
  .letter-postmark { right: 20px; bottom: 28px; font-size: 12px; }
  .moments { padding-top: 0; padding-bottom: 58px; }
  .section-heading { gap: 10px; align-items: end; }
  .section-heading h2 { font-size: 23px; letter-spacing: .5px; }
  .section-note { font-size: 8px; letter-spacing: 0; line-height: 2; }
  .album-filters { gap: 6px; margin: 24px 0; }
  .album-filters button { padding: 7px 10px; font-size: 10px; letter-spacing: .3px; flex: 1; white-space: nowrap; }
  .photo-grid { gap: 18px 14px; }
  .album-photo { padding: 6px 6px 10px; }
  .album-photo button { aspect-ratio: .88; }
  .album-photo figcaption { font-size: 9px; margin: 9px 2px 0; letter-spacing: 0; }
  .album-photo figcaption>span { font-size: 6px; letter-spacing: .6px; }
  .album-tip { font-size: 9px; letter-spacing: 0; margin-top: 25px; }
  .day-inner { display: block; padding: 55px 10% 63px; }
  .day-intro h2 { font-size: 25px; margin-top: 9px; }
  .day-intro>p:not(.eyebrow) { margin-top: 17px; font-size: 12px; }
  .day-intro .countdown { margin-top: 17px!important; }
  .day-star { right: 12px; bottom: 15px; }
  .calendar { margin-top: 38px; padding: 21px 21px 27px; }
  .calendar-date strong { font-size: 83px; }
  .schedule-item { grid-template-columns: 49px 70px 1fr; gap: 6px; padding-top: 13px; }
  .schedule-item time { font-size: 14px; }
  .schedule-item h3 { font-size: 10px; }
  .schedule-item p { display: block; font-size: 8px; line-height: 1.6; }
  .venue { display: flex; flex-direction: column; align-items: stretch; gap: 33px; padding-top: 59px; padding-bottom: 59px; }
  .venue h2 { font-size: 25px; margin-bottom: 25px; }
  .venue h3 { font-size: 19px; }
  .venue-hall { font-size: 11px; margin-top: 7px; margin-bottom: 17px; }
  .venue-actions { gap: 24px; margin-top: 21px; }
  .venue-actions .primary-button { font-size: 11px; padding: 12px 18px; }
  .venue-note { font-size: 10px; margin-top: 21px; }
  .map-preview { height: 275px; }
  .map-marker { left: 10%; }
  .closing { padding: 45px 20px calc(95px + env(safe-area-inset-bottom)); }
  .closing h2 { font-size: 25px; }
  .closing>p:not(.eyebrow) { font-size: 11px; }
  .closing-bottom { font-size: 8px; margin-top: 33px; }
  .closing-date { display: block; margin: 9px 0 0; }
  .closing .demo-note { font-size: 8px!important; }
  .mobile-nav { display: flex; justify-content: space-around; position: fixed; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 10px env(safe-area-inset-bottom); z-index: 20; background: #fffaf0f5; border-top: 2px solid #c6b7ce; box-shadow: 0 -3px 0 #eee4e6; backdrop-filter: blur(12px); }
  .mobile-nav a { display: flex; flex-direction: column; gap: 0; justify-content: center; align-items: center; width: 25%; font-size: 10px; color: #9f91a8; position: relative; line-height: 1.8; }
  .mobile-nav a>span { font-size: 20px; line-height: 1.2; font-family: var(--mono); }
  .mobile-nav a.active { color: var(--accent); }
  .mobile-nav a.active:before { content: ""; position: absolute; top: -2px; width: 24px; height: 3px; background: var(--accent); }
  .photo-dialog figure { max-width: 100vw; }
  .photo-dialog img { max-width: 100vw; max-height: 77dvh; border-width: 3px; }
  .photo-dialog figcaption { font-size: 12px; margin-top: 18px; }
  .photo-arrow { width: 31px; height: 47px; font-size: 28px; }
  .prev { left: 0; }
  .next { right: 0; }
  .share-dialog, .secret-dialog { padding: 40px 23px 25px; }
  .share-dialog h2, .secret-dialog h2 { font-size: 21px; }
  .secret-dialog { max-height: 85dvh; overflow: auto; }
}
@media (max-width: 350px) {
  .hero-copy { padding-left: 20px; padding-right: 20px; }
  .couple { font-size: 17px; gap: 15px; }
  .hero-date { font-size: 14px; gap: 9px; }
  .hero-date .date-weekday { padding-left: 9px; }
  .hero h1>span { font-size: 10px; }
  .hero-bottom span:first-child { font-size: 6px; }
  .section-note { display: none; }
  .album-filters button { padding: 7px 7px; font-size: 9px; }
  .schedule-item { grid-template-columns: 43px 1fr; }
  .schedule-item p { display: none; }
  .letter-paper { padding-left: 19px; padding-right: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none!important; transition: none!important; }
}

/* Illustrated cosmic landscape and the couple's small encounter. */
.pixel-orbit {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.pixel-orbit:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #c4b4cf;
  border: 3px solid #8e86a7;
  top: 5px;
  left: 5px;
  box-shadow: inset 4px 0 #dfcedd;
}
.pixel-orbit:after {
  content: "";
  position: absolute;
  width: 33px;
  height: 8px;
  border: 2px solid #b6a9c3;
  top: 10px;
  left: -2px;
  transform: rotate(-22deg);
}
.pixel-star {
  display: block;
  position: relative;
  width: 5px;
  height: 5px;
  background: #e6c88d;
  box-shadow: 0 -5px #e6c88d, 0 5px #e6c88d, -5px 0 #e6c88d, 5px 0 #e6c88d;
}
.pixel-star:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  top: 1px;
  left: 1px;
  background: #fff3cd;
}
.hero-content { padding-bottom: 14px; }
.hero { border-top-width: 2px; border-bottom-width: 3px; }
.hero-bottom { padding-top: 10px; padding-bottom: 10px; }
.hero h1>span { letter-spacing: 2px; }
.encounter-stage {
  position: relative;
  width: 350px;
  max-width: 88%;
  height: 159px;
  margin: 0 auto 52px;
  isolation: isolate;
}
.sprite {
  position: absolute;
  left: calc(50% - 56px);
  top: 0;
  width: 112px;
  height: 112px;
  background-image: url('assets/couple-sprites.png');
  background-repeat: no-repeat;
  background-size: 400% 200%;
  image-rendering: pixelated;
  will-change: transform;
  filter: drop-shadow(1px 3px 0 #77718d18);
}
.sprite-groom { background-position-y: 0%; z-index: 2; }
.sprite-bride { background-position-y: 100%; z-index: 3; }
.encounter-hearts {
  position: absolute;
  top: -4px;
  left: calc(50% - 31px);
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c17c95;
  opacity: 0;
  font: 11px var(--mono);
  pointer-events: none;
}
.encounter-hearts span:nth-child(2) { margin-top: -15px; color: #f6e4bd; }
.encounter-controls {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 13px;
}
.encounter-controls button {
  min-width: 44px;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 9px;
  color: #807793;
  background: #f8f1e5bb;
  border: 1px solid #b4a7c24d;
}
.sky-secret {
  position: absolute;
  bottom: 61px;
  right: 7%;
  padding: 8px 12px;
  background: #f9f2e4d9;
  border: 1px solid #a99fbd;
  box-shadow: 2px 2px #9489aa33;
  color: #8a7d9c;
  font-size: 10px;
  transform: rotate(-2deg);
}
.tiny-telescope { font-size: 18px; vertical-align: middle; margin-right: 5px; }
.album-secret {
  display: block;
  margin: 13px auto 0;
  padding: 7px 11px;
  background: transparent;
  border-bottom: 1px dashed #c3b4ca;
  font-size: 10px;
  color: #a18ca3;
}
.album-secret span { margin-left: 7px; }
.wedding-day:after { background: repeating-linear-gradient(90deg,#c7bdd7 0 6px,transparent 6px 14px); }
.sky-dialog {
  width: min(440px,86vw);
  background: var(--cream);
  color: var(--ink);
  padding: 39px 25px 30px;
  text-align: center;
  overflow: visible;
}
.sky-dialog h2 { font-size: 21px; letter-spacing: 1px; }
.sky-dialog>p:last-child { margin-top: 15px; font-size: 12px; color: var(--muted); }
.comet-view {
  width: 144px;
  height: 144px;
  margin: 24px auto 26px;
  border-radius: 50%;
  background-image: url('assets/reference/maru-comet.png');
  background-position: 0 -240px;
  background-size: 512px 383px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #d4c3d6, 0 0 0 7px #f2e6dd;
}
@media (max-width: 760px) {
  .hero-content { padding-bottom: 20px; }
  .encounter-stage { margin-bottom: 55px; }
  .sky-secret { right: 5%; bottom: 52px; font-size: 9px; }
}
@media (max-width: 540px) {
  .hero-content { padding-bottom: 23px; }
  .encounter-stage { height: 159px; margin-top: 7px; margin-bottom: 79px; }
  .sky-secret { right: 9%; bottom: 49px; padding: 6px 10px; }
  .hero-bottom span:first-child { font-size: 7px; letter-spacing: .7px; }
  .hero-bottom span+span { font-size: 8px; letter-spacing: .2px; }
  .hero h1>span { font-size: 11px; letter-spacing: 1px; }
  .sky-dialog h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-controls { display: none; }
  .sprite { will-change: auto; }
}

.universe-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.universe-backdrop img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.encounter-stage { margin-bottom: 30px; }
.sprite { filter: drop-shadow(0 2px 1px #5d4c773d); }
.encounter-controls button { background: #fff5e5df; color: #756383; }
.sky-secret { background: #fff5e5e8; color: #7a688d; }
.encounter-hearts { color: #e6a0b3; text-shadow: 0 1px 2px #72547799; }
@media (max-width: 540px) {
  .universe-backdrop img { object-position: center bottom; }
  .encounter-stage { margin-bottom: 65px; }
}

/* Small celestial accents let the interior pages keep their quiet spacing. */
.space-sticker {
  display: block;
  width: 72px;
  height: 72px;
  background-image: url('assets/cosmic-stickers.png');
  background-size: 300% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.sticker-saturn { background-position: 0 0; }
.sticker-earth { background-position: 50% 0; }
.sticker-moon { background-position: 100% 0; }
.letter-planet {
  position: absolute;
  right: 21px;
  top: 11px;
  width: 76px;
  height: 76px;
  opacity: .88;
}
.game-ufo {
  display: inline-block;
  width: 36px;
  height: 18px;
  margin-left: 12px;
  vertical-align: middle;
  background-image: url('assets/ufo-sticker.png');
  background-size: 120px 60px;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.game-robot {
  display: block;
  width: 56px;
  height: 67.2px;
  background-image: url('assets/reference/maru-robot.png');
  background-size: 224px 201.6px;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.calendar-robot { position: absolute; right: 22px; top: 78px; opacity: .86; }
.venue-copy { position: relative; }
.venue-planet { position: absolute; right: -3px; top: -7px; opacity: .82; }
.closing-moon { margin: 0 auto 20px; width: 74px; height: 74px; opacity: .9; }
.closing .music-credit { margin-top: 16px; font: 9px/1.8 var(--mono); letter-spacing: .2px; color: #9c8da7; }
.day-star { position: absolute; right: 14px; bottom: 18px; }
@media (max-width: 760px) {
  .venue-planet { width: 58px; height: 58px; right: 0; top: -10px; }
  .calendar-robot { width: 42px; height: 50.4px; background-size: 168px 151.2px; right: 12px; top: 77px; }
}
@media (max-width: 540px) {
  .letter-planet { width: 62px; height: 62px; top: 8px; right: 11px; }
  .game-ufo { margin-left: 7px; }
  .calendar-robot { top: 79px; }
  .venue-planet { width: 58px; height: 58px; right: -1px; top: -5px; }
  .closing-moon { width: 67px; height: 67px; margin-bottom: 17px; }
  .closing .music-credit { font-size: 8px; }
}