:root {
  --paper: #ede9e4;
  --ink: #191816;
  --font-display: "Amatic SC", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --font-closing: "URW Chancery L", "Apple Chancery", "Snell Roundhand", "Segoe Script", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.invitation {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(12px, 2.2vw, 24px) clamp(14px, 3.5vw, 30px) clamp(45px, 7vw, 78px);
  text-align: center;
}
.guest-greeting[hidden], .invitation-link-notice[hidden] { display: none; }
.guest-greeting {
  width: min(100%, 720px);
  margin: clamp(8px, 1.8vw, 16px) auto 0;
  padding-inline: 10px;
  text-align: center;
}
.guest-greeting__intro {
  margin: 0;
  font: italic 400 clamp(15px, 1.8vw, 18px)/1.5 "Bodoni Moda", "Noto Serif TC", "Bodoni MT", Didot, "Times New Roman", serif;
  letter-spacing: .045em;
  color: #5d544d;
}
.guest-greeting__names {
  margin: 4px auto 0;
  max-width: 100%;
  font: italic 400 clamp(40px, 5.5vw, 64px)/1.23 "Bodoni Moda", "Noto Serif TC", "Bodoni MT", Didot, "Times New Roman", serif;
  letter-spacing: -.025em;
  font-synthesis: none;
  overflow-wrap: break-word;
  color: var(--ink);
}
.invitation-link-notice {
  width: min(100%, 670px);
  margin: 10px auto 18px;
  color: #6d5851;
  font: 400 clamp(13px, 1.7vw, 16px)/1.5 system-ui, sans-serif;
  text-align: center;
}
@media (max-width: 480px) {
  .guest-greeting { margin-top: 2px; margin-bottom: 0; }
  .guest-greeting__names { font-size: clamp(36px, 9.8vw, 48px); }
}
.illustration {
  margin: 0 auto;
  width: min(100%, 800px);
}
/* The illustration has 104px of transparent top padding in its source PNG.
   Pull its box upward only when a guest greeting is present. This preserves
   the approved artwork byte-for-byte while reducing the visible gap. */
.guest-greeting:not([hidden]) ~ .illustration {
  margin-top: clamp(-40px, -4.7vw, -8px);
}
.illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.invitation__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 1.8vw, 18px) 0 0;
}
.invitation__eyebrow {
  margin: 0;
  font: 700 clamp(64px, 8vw, 80px)/1.1 var(--font-display);
  letter-spacing: 3px;
  text-indent: 3px;
  white-space: nowrap;
}
.invitation__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(50%, 290px);
  gap: 10px;
  margin: clamp(14px, 2.3vw, 22px) auto clamp(20px, 3.8vw, 38px);
}
.invitation__divider-line { flex: 1; height: 1px; background: var(--ink); opacity: .7; }
.invitation__heart { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.invitation__couple-image {
  display: block;
  width: min(100%, 830px);
  height: auto;
  margin-inline: auto;
}
.invitation__details-image {
  display: block;
  width: min(100%, 690px);
  height: auto;
  margin-top: clamp(16px, 2.2vw, 22px);
  margin-inline: auto;
}
.invitation__castle-image {
  display: block;
  width: min(100%, 72px);
  height: auto;
  margin-top: clamp(18px, 2.6vw, 24px);
  margin-inline: auto;
}
.invitation__closing {
  margin: clamp(18px, 2.8vw, 24px) 0 0;
  font: italic 400 clamp(21px, 3vw, 28px)/1.45 var(--font-closing);
  text-align: center;
}
@media (max-width: 480px) {
  .invitation { padding-inline: 10px; padding-top: 16px; }
  .illustration { width: calc(100% + 20px); margin-left: -10px; }
  .invitation__text { padding-top: 10px; }
  .invitation__details-image { margin-top: 18px; }
  .invitation__castle-image { width: min(100%, 66px); margin-top: 18px; }
}
@media (max-width: 345px) {
  .invitation__eyebrow { font-size: 56px; }
}