@font-face {
  font-family: "Invitation Handwriting";
  src: url("assets/fonts/handwriting.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Invitation Moyun";
  src: url("assets/fonts/invitation-moyun.woff") format("woff");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Invitation Songti";
  src: url("assets/fonts/noto-serif-sc.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Invitation Songti";
  src: url("assets/fonts/noto-serif-sc-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --lishu: "Invitation Moyun", "ZCOOL XiaoWei", "Songti SC", "STSong", "Invitation Songti", serif;
  --serif: var(--lishu);
  --vintage-serif: var(--lishu);
  --handwriting: "Invitation Handwriting", "Snell Roundhand", cursive;
  --paper-grain: url("assets/ivory-folded-paper.jpg");
  --kraft-grain: url("assets/rose-kraft-paper.jpg");
  --script-ink: #813b40;
}

:root, [data-theme="champagne"] {
  --forest: #e9e5dc;
  --ink: #302c29;
  --paper: #fffefd;
  --muted: #6b625a;
  --line: #d8d0c5;
  --scene-center: #fffefa;
  --scene-edge: #f0ece3;
  --envelope-back: #e1dacf;
  --fold-left: #fffdf8;
  --fold-right: #eee9df;
  --fold-bottom: #fbf7ed;
  --flap-top: #fffdfa;
  --flap-end: #ede6d8;
  --seal-light: #a66f70;
  --seal-dark: #733f43;
  --seal-border: #b58984;
  --seal-ink: #f7eae0;
  --soft: #927967;
  --shadow: #65513d21;
  --music-bg: #fffdf6ec;
}

[data-theme="rose"] {
  --forest: #dec3c6;
  --paper: #f5e6e5;
  --ink: #33282a;
  --muted: #796266;
  --line: #d7b7b9;
  --scene-center: #f3e3e1;
  --scene-edge: #d9b9bd;
  --envelope-back: #bb8d91;
  --fold-left: #e1bfc1;
  --fold-right: #cda4a9;
  --fold-bottom: #dab4b8;
  --flap-top: #e9c8ca;
  --flap-end: #cda3a8;
  --seal-light: #b93636;
  --seal-dark: #781b25;
  --seal-border: #a92830;
  --seal-ink: #f5c2b9;
  --soft: #a0797d;
  --music-bg: #f6e8e5f2;
  --shadow: #62373f2b;
}

[data-theme="blue"] {
  --paper: #fcfeff;
  --ink: #303b42;
  --muted: #5c6d78;
  --scene-center: #f9fcfc;
  --scene-edge: #e0e6e9;
  --fold-left: #f7fafb;
  --fold-right: #dfe8ec;
  --fold-bottom: #eaf0f3;
  --flap-top: #fcfdfd;
  --flap-end: #d9e4ea;
}

.entry {
  background: linear-gradient(90deg, var(--scene-edge), var(--scene-center) 35%, var(--scene-center) 65%, var(--scene-edge));
}

.entry::before {
  background-image: var(--paper-grain);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .8;
}

.entry::after {
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}

.envelope {
  width: min(540px, 88vw);
  height: 346px;
  max-height: 56.4vw;
  min-height: 210px;
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 24px 25px #57493b42) drop-shadow(0 5px 6px #57493b2e);
}

.envelope:hover {transform: rotate(-.45deg) translateY(-4px);}

.envelope-back,
.inner-card,
.envelope-fold,
.envelope-bottom,
.envelope-flap {
  background-color: #e7dfd2;
  background-image:
    linear-gradient(135deg, #fff8 0%, transparent 38%, #8d765b12 100%),
    repeating-linear-gradient(90deg, #fff7 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, #7d6b5612 0 1px, transparent 1px 3px),
    var(--paper-grain);
  background-size: 100% 100%, 3px 3px, 3px 3px, 100% auto;
  background-position: center, center, center, center 30%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-blend-mode: soft-light, multiply, multiply, multiply;
}

.envelope-back {
  border-radius: 3px;
  border: 2px solid #9f8b708f;
  box-shadow:
    0 2px 0 #fff9 inset,
    0 -3px 5px #705b4138 inset,
    0 0 0 1px #fff7;
}

.inner-card {
  left: 5.5%;
  right: 5.5%;
  top: 7%;
  bottom: 7%;
  gap: 17px;
  opacity: 0;
  transform: translateY(13%);
  border-color: #cbbda8;
  box-shadow: 0 2px 5px #69584424;
  transition: transform 1.35s cubic-bezier(.18,.72,.2,1), opacity .55s ease;
}

.inner-card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  letter-spacing: 0;
}

.inner-card-title b {
  font-family: var(--lishu);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
}

.inner-card-title em {
  font-family: var(--handwriting);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--script-ink);
}

.envelope-fold {
  background-color: #e8e0d4;
  filter: none;
}

.fold-left {
  clip-path: polygon(0 0, 53% 57%, 0 100%);
  box-shadow: 2px 0 3px #65533f26 inset;
  filter: drop-shadow(3px 1px 2px #4f3d296b);
}

.fold-right {
  clip-path: polygon(100% 0, 47% 57%, 100% 100%);
  background-color: #e3dace;
  box-shadow: -2px 0 3px #65533f26 inset;
  filter: drop-shadow(-3px 1px 2px #4f3d2963);
}

.fold-left::after,
.fold-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, #6c58418f, #5a463071 76%, transparent);
  box-shadow: 0 1px 0 #fff9;
}

.fold-left::after {
  left: 0;
  transform: rotate(-29deg);
  transform-origin: left bottom;
}

.fold-right::after {
  right: 0;
  transform: rotate(29deg);
  transform-origin: right bottom;
  background: linear-gradient(270deg, #6c58418f, #5a463071 76%, transparent);
}

.envelope-bottom {
  clip-path: polygon(0 100%, 0 91%, 50% 47%, 100% 91%, 100% 100%);
  background-color: #ece4d8;
  filter: drop-shadow(0 -2px 1px #5f4c3845);
}

.envelope-bottom::before,
.envelope-bottom::after {
  content: "";
  position: absolute;
  bottom: 9%;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, #6a553e9c, #503b277d 78%, transparent);
  box-shadow: 0 1px 0 #fff;
}

.envelope-bottom::before {
  left: 0;
  transform: rotate(-29.5deg);
  transform-origin: left center;
}

.envelope-bottom::after {
  right: 0;
  transform: rotate(29.5deg);
  transform-origin: right center;
  background: linear-gradient(270deg, #6a553e9c, #503b277d 78%, transparent);
}

.envelope-flap {
  clip-path: polygon(0 0, 100% 0, 50% 61%);
  background-color: #e9e1d5;
  filter: drop-shadow(0 4px 2px #59463466);
  box-shadow: 0 1px 0 #fff9 inset;
  transition: transform 1.15s cubic-bezier(.35,.02,.2,1), z-index 0s .58s;
}

.envelope-flap::before,
.envelope-flap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, #6f59409e, #58432d85 72%, transparent);
  box-shadow: 0 1px 0 #fff;
}

.envelope-flap::before {
  left: 0;
  transform: rotate(38deg);
  transform-origin: left center;
}

.envelope-flap::after {
  right: 0;
  transform: rotate(-38deg);
  transform-origin: right center;
  background: linear-gradient(270deg, #6f59409e, #58432d85 72%, transparent);
}

[data-theme="rose"] .envelope-back,
[data-theme="rose"] .envelope-fold,
[data-theme="rose"] .envelope-bottom::before,
[data-theme="rose"] .envelope-flap::before {
  background-color: #cf9ca5;
  background-image: linear-gradient(#d7a7ae80, #d7a7ae80), var(--kraft-grain);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

[data-theme="rose"] .envelope-back {
  box-shadow: 0 3px 0 #b67f8952, 0 6px 12px #75454e24, inset 0 0 0 1px #8e596a33;
}

[data-theme="rose"] .fold-left {
  filter: drop-shadow(2px 1px 1px #70424c3d);
}

[data-theme="rose"] .fold-right {
  filter: drop-shadow(-2px 1px 1px #70424c3d);
}

[data-theme="rose"] .envelope-bottom,
[data-theme="rose"] .envelope-flap {
  clip-path: none;
  background: transparent;
}

[data-theme="rose"] .envelope-bottom::before,
[data-theme="rose"] .envelope-flap::before {
  content: "";
  position: absolute;
  inset: 0;
}

[data-theme="rose"] .envelope-bottom {filter: drop-shadow(0 -1px 1px #70424c4a);}
[data-theme="rose"] .envelope-bottom::before {
  clip-path: polygon(0 100%, 0 97%, 50% 40%, 100% 97%, 100% 100%);
}

[data-theme="rose"] .envelope-flap {filter: drop-shadow(0 3px 2px #70424c61);}
[data-theme="rose"] .envelope-flap::before {
  clip-path: polygon(0 0, 100% 0, 50% 57%);
  box-shadow: inset 0 1px 0 #f6dadd80;
}

.wax-seal {
  top: 59%;
  width: 104px;
  height: 104px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .65s ease, opacity .55s ease;
}

.wax-seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-7deg);
  filter: drop-shadow(1px 4px 3px #6224324d);
}

.envelope-addressee {
  bottom: 9.5%;
  font-family: var(--lishu);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .2em;
  color: #5f554b;
  text-shadow: 0 1px 0 #fff9;
}

.opening .inner-card {
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: .65s;
}

.opening .envelope {transform: rotate(0);}

.letter {
  padding: 0;
  background: transparent;
}

.entry,
.letter {
  font-family: var(--lishu);
  font-synthesis: weight;
  text-rendering: optimizeLegibility;
}

.entry-heading p {
  font-family: var(--lishu);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .16em;
  margin-top: 14px;
}

.inner-card > strong,
.entry-footer p {
  font-family: var(--lishu);
  font-weight: 500;
}

.inner-card > strong {
  font-size: 25px;
  line-height: 1.45;
  letter-spacing: .13em;
}

.entry-footer p {
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: .14em;
  margin-top: 20px;
}

.paper-page {
  position: relative;
  min-height: 1180px;
  padding: 30px 48px;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -1px 0 #8b77631f;
}

.paper-page + .paper-page {
  margin-top: 1px;
}

.handwritten,
.entry-heading .handwritten,
.letter-header .handwritten,
.personal-letter > .handwritten,
.wedding-day > .handwritten,
.letter-end .handwritten,
.occasion-label.handwritten {
  font-family: var(--handwriting);
  font-size: 34px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: .015em;
  color: var(--script-ink);
  text-transform: none;
}

.entry-heading .handwritten {font-size: 40px;}
.entry-heading p {color: var(--ink); font-weight: 500;}
.letter-header .handwritten {font-size: 43px; margin: 0 0 25px;}
.letter-header {padding: 34px 0 24px;}
.letter-header h1 {font-weight: 500; font-size: clamp(25px, 4.2vw, 30px); line-height: 1.95; letter-spacing: .1em; margin: 10px 0 20px;}
.scroll-note {margin-top: 16px;}
.hero-photo img {max-height: 760px; object-fit: cover; object-position: center 38%;}
.couple, .ending-names {font-weight: 600;}
.letter-date {color: var(--ink);}
.personal-letter h2, .wedding-day h2, .occasion-detail h3, .letter-end h2 {font-family: var(--vintage-serif); font-weight: 500;}
.personal-letter p, .date-intro, .venue, .gentle-note, .letter-end .ending-copy {font-family: var(--vintage-serif); font-weight: 400; letter-spacing: .065em;}
.personal-letter > .handwritten {display: block; margin-bottom: 10px;}
.personal-letter {max-width: 580px; margin: 0 auto; padding: 40px 20px 24px; text-align: center;}
.personal-letter h2 {font-size: 24px; line-height: 1.8; letter-spacing: .08em; margin: 12px 0 22px;}
.personal-letter p {font-size: 18px; line-height: 2.05; letter-spacing: .075em; color: var(--ink); margin-bottom: 20px;}
.personal-letter .signature {margin-top: 22px;}
.personal-letter .signature {text-align: center; font-size: 21px; line-height: 1.8; letter-spacing: .1em; font-weight: 500;}
.letter {font-family: var(--vintage-serif); font-weight: 400;}
.letter-header h1 {
  font-family: var(--vintage-serif);
  font-weight: 500;
  text-shadow: 0 1px 0 #fff8ed;
}

.couple,
.letter-date,
.date-intro,
.occasion-detail h3,
.venue,
.occasion-message,
.gentle-note,
.letter-end h2,
.letter-end .ending-copy,
.letter-end .ending-names,
.text-button {
  font-family: var(--lishu);
}
.personal-letter h2::before,
.personal-letter h2::after,
.wedding-day h2::before,
.wedding-day h2::after,
.letter-end h2::before,
.letter-end h2::after {
  content: "—";
  display: inline-block;
  margin: 0 .55em;
  color: var(--script-ink);
  font-family: Georgia, serif;
  font-size: .58em;
  font-weight: 400;
  vertical-align: .16em;
  opacity: .68;
}
.garden-photo {margin-top: 0; overflow: hidden;}
.garden-photo img {display: block; width: 100%; height: auto; aspect-ratio: 3889 / 4503; object-fit: contain;}
.champagne-illustration {
  display: block;
  width: 120px;
  height: auto;
  margin: 20px auto 0;
}
.inline-player {
  position: relative;
  isolation: isolate;
  width: min(580px, 100%);
  aspect-ratio: 1800 / 1327;
  margin: 18px auto 0;
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fffaf0;
  background: #615b54;
  border: 1px solid #cdbda4;
  border-radius: 5px;
  box-shadow: 0 20px 38px #4d403138, 0 4px 10px #4b3c2e26, 0 0 0 5px #fffdf45c;
  overflow: hidden;
}
.inline-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #17130f66 0%, transparent 36%, transparent 57%, #211b177d 100%);
}
.inline-player::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid #fffaf066;
  border-radius: 2px;
  box-shadow: inset 0 0 22px #21181024;
}
.inline-player-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vinyl-disc {
  position: absolute;
  top: 66px;
  left: 15px;
  z-index: 1;
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d1c8;
  box-shadow: 0 8px 24px #211a1659;
}
.vinyl-disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #fff6;
}
.inline-player.is-playing .vinyl-disc {animation: vinyl-spin 18s linear infinite;}
.turntable-arm {
  position: absolute;
  top: 70px;
  left: 105px;
  z-index: 3;
  width: 28px;
  height: 58px;
  border-right: 2px solid #eee9e1;
  border-bottom: 2px solid #eee9e1;
  border-radius: 0 0 18px 0;
  filter: drop-shadow(0 2px 3px #211a1666);
  transform: rotate(-11deg);
  transform-origin: top right;
  pointer-events: none;
}
.turntable-arm::before {
  content: "";
  position: absolute;
  top: -5px;
  right: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid #f8f4ed;
  border-radius: 50%;
  background: #a9a49e;
  box-shadow: 0 0 0 2px #30292261;
}
.turntable-arm::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -5px;
  width: 15px;
  height: 8px;
  border: 1px solid #fffaf0b3;
  border-radius: 5px 2px 2px 5px;
  background: #c7c0b7;
  box-shadow: 0 2px 5px #211a165c;
  transform: rotate(-13deg);
}
.inline-player-copy {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 5px 8px 4px;
  text-align: left;
  background: #211b174f;
  border: 1px solid #fffaf038;
  border-radius: 2px;
  box-shadow: 0 5px 16px #211a1638;
  backdrop-filter: blur(7px);
}
.inline-player-copy strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .15em;
  color: #fffdf7;
  text-shadow: 0 1px 4px #211b17;
}
.inline-player-copy span {
  display: block;
  margin-top: 2px;
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: .11em;
  color: #f1e8dc;
  text-shadow: 0 1px 4px #211b17;
}
.inline-player-controls {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  column-gap: 11px;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: auto auto 14px;
  padding: 0;
  color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 15px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.inline-player-controls > span {
  position: relative;
  width: 38px;
  height: 38px;
  margin: auto;
  display: grid;
  place-items: center;
  border: 1px solid #fffaf08f;
  border-radius: 50%;
  background: #fffaf02e;
  color: #fffdf6;
  box-shadow: 0 4px 12px #241c1738, inset 0 1px 0 #ffffff75;
  text-shadow: 0 1px 4px #211b17;
  backdrop-filter: blur(7px);
}
.inline-player-controls .skip-control::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.inline-player-controls .skip-control::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.inline-player-controls .skip-back::before {left: 10px; border-right: 8px solid currentColor;}
.inline-player-controls .skip-back::after {left: 9px;}
.inline-player-controls .skip-forward::before {right: 10px; border-left: 8px solid currentColor;}
.inline-player-controls .skip-forward::after {right: 9px;}
.inline-player-controls button {
  width: 38px;
  height: 38px;
  margin: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #fffaf0b5;
  border-radius: 50%;
  background: #fffaf044;
  color: #fffdf7;
  cursor: pointer;
  font: 16px/1 Arial, sans-serif;
  box-shadow: 0 5px 15px #241c1742, inset 0 1px 0 #ffffff8c;
  text-shadow: 0 1px 4px #211b17;
  backdrop-filter: blur(8px);
}
.inline-player-controls .player-glyph {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}
.inline-player-controls button[aria-pressed="false"] .player-glyph::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.inline-player-controls button[aria-pressed="true"] .player-glyph::before,
.inline-player-controls button[aria-pressed="true"] .player-glyph::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.inline-player-controls button[aria-pressed="true"] .player-glyph::before {left: 2px;}
.inline-player-controls button[aria-pressed="true"] .player-glyph::after {right: 2px;}
.inline-progress {height: 2px; margin: 0 10px; background: #fffaf059; overflow: hidden; box-shadow: 0 1px 3px #211b174d;}
.inline-progress span {display: block; width: 0; height: 100%; background: #f8eee0; transition: width .3s linear;}
.wedding-doodle {
  display: block;
  width: 156px;
  height: 156px;
  margin: -14px auto 8px;
  background: url("assets/wedding-doodles.png") left center / 200% 100% no-repeat;
}
.doodle-toast {background-position: right center; margin-top: -12px;}
.wedding-day {padding: 20px 20px 16px;}
.wedding-day > .handwritten {margin: 0; font-size: 28px;}
.wedding-day h2 {font-size: 24px; line-height: 1.7; letter-spacing: .1em; margin: 6px 0 20px;}
.wedding-doodle {width: 88px; height: 88px; margin-bottom: 0;}
.date-display {gap: 8px;}
.date-display strong {font-size: 50px;}
.date-intro {font-size: 17px; margin: 14px 0 18px; line-height: 1.9; letter-spacing: .08em;}
.occasion {padding: 15px 0;}
.occasion-label.handwritten {font-size: 22px; line-height: 1.4; margin: 0 0 2px;}
.occasion-detail h3 {font-size: 21px; line-height: 1.55; letter-spacing: .12em; margin: 2px 0 7px;}
.occasion-time {padding-top: 12px;}
.occasion-time time {font-size: 26px;}
.venue {font-size: 17px; line-height: 1.7; letter-spacing: .06em; margin-bottom: 5px;}
.occasion-message {font-size: 14px; line-height: 1.8; letter-spacing: .05em;}
.occasion:last-child {border-bottom: 0;}
.gentle-note {position: relative; z-index: 2; font-size: 15px; line-height: 2; letter-spacing: .07em; margin: 8px 0 12px;}
.letter-end .handwritten {font-size: 37px;}
.letter-end h2 {font-size: 25px; line-height: 1.75; letter-spacing: .12em;}
.letter-end .ending-copy {font-size: 17px; line-height: 2; letter-spacing: .09em;}
.letter-end .ending-names {font-family: var(--serif); font-size: 22px; letter-spacing: .12em; font-weight: 500;}
.envelope-addressee {font-weight: 500;}

.memories {padding: 26px 0 22px; overflow: hidden;}
.photo-collage {
  position: relative;
  width: min(100%, 520px);
  min-height: 650px;
  margin: 0 auto;
  padding: 12px 3px 12px;
}
.photo-collage figure {
  position: absolute;
  margin: 0;
  padding: 6px;
  background: #fffdf7;
  box-shadow: 0 10px 25px #4b3d3126, 0 0 0 1px #b9aa9829;
}
.photo-collage img {display: block; width: 100%; height: auto; object-fit: cover;}
.collage-closeup {top: 18px; left: 0; z-index: 4; width: 62%; transform: rotate(-.45deg);}
.collage-closeup img {object-position: 50% 45%;}
.collage-laughing {top: 330px; right: 0; z-index: 3; width: 44%; transform: rotate(.9deg);}
.letter-end {padding: 22px 0 28px;}
.letter-end h2 {margin: 18px 0 18px;}
.letter-end .ending-copy {margin-bottom: 22px;}
.letter-end .ending-date {margin-bottom: 24px;}

@media (max-width: 600px) {
  .wax-seal {width: 88px; height: 88px;}
  .paper-page {min-height: 920px; padding: 24px 33px;}
  .entry-heading .handwritten {font-size: 34px;}
  .entry-heading p {font-size: 15px; line-height: 1.8; letter-spacing: .09em; margin-top: 8px;}
  .inner-card-title b {font-size: 22px; letter-spacing: .11em;}
  .inner-card > strong {font-size: 20px; letter-spacing: .1em;}
  .entry-footer p {font-size: 21px;}
  .envelope-addressee {font-size: 15px; letter-spacing: .16em;}
  .letter-header .handwritten {font-size: 34px;}
  .letter-header h1 {font-size: 24px; line-height: 2; letter-spacing: .075em;}
  .handwritten {font-size: 30px;}
  .personal-letter > .handwritten, .wedding-day > .handwritten {font-size: 31px;}
  .personal-letter {padding: 32px 0 18px;}
  .personal-letter h2 {font-size: 22px;}
  .personal-letter p {font-size: 17px; line-height: 2; letter-spacing: .05em; margin-bottom: 17px;}
  .champagne-illustration {width: 104px; margin: 16px auto 0;}
  .inline-player {width: 100%; padding: 18px 18px 17px;}
  .vinyl-disc {top: 53px; left: 12px; width: 88px; height: 88px;}
  .turntable-arm {top: 56px; left: 82px; width: 23px; height: 46px;}
  .inline-player-copy {top: 12px; left: 12px; padding: 4px 7px 3px;}
  .inline-player-copy strong {font-size: 10.5px; letter-spacing: .12em;}
  .inline-player-copy span {font-size: 9px; letter-spacing: .09em;}
  .inline-player-controls {grid-template-columns: repeat(5, 36px); column-gap: 9px; width: max-content; margin: auto auto 10px; padding: 0;}
  .inline-player-controls > span,
  .inline-player-controls button {width: 36px; height: 36px;}
  .wedding-day {padding: 16px 0 12px;}
  .wedding-day > .handwritten {font-size: 25px;}
  .wedding-doodle {width: 74px; height: 74px;}
  .date-display strong {font-size: 44px;}
  .date-intro {font-size: 16px; margin: 11px 0 14px;}
  .occasion {grid-template-columns: 72px 1fr; gap: 14px; padding: 13px 0;}
  .occasion-time time {font-size: 23px;}
  .occasion-label.handwritten {font-size: 20px; letter-spacing: 0;}
  .occasion-detail h3 {font-size: 20px;}
  .venue {font-size: 16px;}
  .occasion-message {font-size: 13px;}
  .gentle-note {margin-top: 6px;}
  .photo-collage {width: 100%; min-height: 590px; padding-top: 8px;}
  .photo-collage figure {padding: 4px;}
  .collage-closeup {top: 10px; left: 0; width: 64%;}
  .collage-laughing {top: 315px; right: 0; width: 44%;}
  .letter-end .handwritten {font-size: 32px;}
  .letter-end h2 {font-size: 23px;}
  .letter-end .ending-copy {font-size: 16px;}
}

@keyframes vinyl-spin {to {transform: rotate(360deg);}}

@media (prefers-reduced-motion: reduce) {
  .inline-player.is-playing .vinyl-disc {animation: none;}
}

@media (max-width: 360px) {
  .paper-page {padding-left: 27px; padding-right: 27px;}
  .entry-heading .handwritten {font-size: 31px;}
  .letter-header .handwritten {font-size: 30px;}
  .letter-header h1 {font-size: 25px;}
  .personal-letter p {font-size: 16px;}
  .occasion-label.handwritten {font-size: 21px;}
}