:root{--ink:#33433b;--sage:#718276;--cream:#f7f3eb;--rose:#c99d8d;--line:#d9cbbb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream)}body{color:var(--ink);font-family:Georgia,"Times New Roman",serif}.page-shell{min-height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;padding:28px 22px 22px;isolation:isolate}.grain{position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;background-image:radial-gradient(#b8a894 .55px,transparent .6px);background-size:7px 7px;mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent)}.hero{width:min(100%,560px);min-height:calc(100svh - 50px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 8px 48px;border:1px solid var(--line);outline:1px solid color-mix(in srgb,var(--line) 60%,transparent);outline-offset:7px;position:relative}.eyebrow,.names-small,footer{text-transform:uppercase;letter-spacing:.22em;font-size:10px;color:var(--sage)}.eyebrow{margin:0 0 22px}.floral-mark{width:92px;height:70px;position:relative;margin-bottom:4px;color:var(--sage)}.ring{position:absolute;inset:17px 0 auto;font-size:37px;line-height:1;font-weight:400;color:var(--rose);transform:rotate(-8deg)}.stem{position:absolute;width:1px;height:53px;background:var(--sage);bottom:0;transform-origin:bottom;opacity:.9}.stem-left{left:31px;transform:rotate(27deg)}.stem-right{right:31px;transform:rotate(-27deg)}.leaf{position:absolute;width:14px;height:7px;border:1px solid var(--sage);border-radius:100% 0}.leaf-one{left:21px;bottom:23px;transform:rotate(24deg)}.leaf-two{right:21px;bottom:23px;transform:scaleX(-1) rotate(24deg)}.leaf-three{left:39px;bottom:5px;transform:rotate(5deg)}.names-small{margin:0 0 10px}.names-small span{color:var(--rose);padding:0 5px}h1{font-size:clamp(56px,16vw,92px);line-height:.82;letter-spacing:-.06em;font-weight:400;margin:0;color:var(--ink)}h1 em{color:var(--rose);font-style:italic;margin-left:28px}.divider{width:min(82%,300px);display:flex;align-items:center;gap:13px;margin:28px 0 25px;color:var(--rose)}.divider span{height:1px;flex:1;background:var(--line)}.divider b{font-size:12px;font-weight:400}.message{max-width:350px;margin:0;font-size:16px;line-height:1.65;color:#5d6a62}.signature{margin:28px 0 0;color:var(--rose);font-style:italic;font-size:18px}footer{position:absolute;bottom:15px;letter-spacing:.16em;font-size:9px}footer span{padding:0 7px;color:var(--rose)}.ornament{position:absolute;color:var(--rose);font-size:16px;opacity:.75}.ornament:before,.ornament:after{content:"";position:absolute;width:52px;height:1px;background:var(--line);top:50%}.ornament-top{top:29px;left:50%;transform:translateX(-50%)}.ornament-bottom{bottom:25px;left:50%;transform:translateX(-50%) rotate(180deg)}.ornament:before{right:24px}.ornament:after{left:24px}@media(min-width:600px){.page-shell{padding:48px}.hero{min-height:min(720px,calc(100svh - 96px))}}@media(prefers-reduced-motion:no-preference){.hero{animation:appear .9s ease-out both}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
 .wedding-icons{display:flex;align-items:end;justify-content:center;gap:24px;height:42px;margin:0 0 16px;color:var(--rose);font-size:22px;opacity:.78}.wedding-icons span{display:inline-block}.chapel{font-size:30px;line-height:1;transform:translateY(2px)}.rings{font-size:22px;letter-spacing:-8px;transform:rotate(-12deg)}.glasses{font-size:27px;letter-spacing:-8px;transform:rotate(8deg)}
 .page-shell{background-image:linear-gradient(rgba(247,243,235,.18),rgba(247,243,235,.18)),url('wedding-background.png');background-size:cover;background-position:center top;background-attachment:scroll}
@media (min-width: 700px){.page-shell{background-image:linear-gradient(rgba(247,243,235,.12),rgba(247,243,235,.12)),url('wedding-background-desktop.png')}}
 .rings-ornament{display:block;width:118px;height:78px;object-fit:cover;object-position:center;border-radius:50%;mix-blend-mode:multiply;margin:0 auto 2px}.ceremony-ornament{display:block;width:min(82vw,360px);height:78px;object-fit:cover;object-position:center;border-radius:45%;mix-blend-mode:multiply;margin:0 auto 15px}.names-small{font-size:14px}h1{font-size:clamp(52px,calc(16vw - 4px),88px)}

/* Laptop layout: keep decorative artwork at a restrained scale. */
@media (min-width: 700px) {
  .page-shell {
    background-size: min(1200px, 100vw) auto;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .hero {
    background: rgba(255, 252, 246, 0.72);
  }
}

/* Final laptop alignment and full-viewport artwork. */
@media (min-width: 700px) {
  .page-shell {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }
  h1 em {
    display: block;
    margin-left: 0;
    text-align: center;
  }
}

/* Keep the second headline line centered on every viewport. */
h1 em {
  display: block;
  margin-left: 0;
  text-align: center;
}

/* Preserve the artwork proportions on laptop and desktop screens. */
@media (min-width: 700px) {
  .page-shell {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}

/* Keep the ornament artwork crisp by preserving each source image ratio. */
.rings-ornament {
  width: 128px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.ceremony-ornament {
  width: min(82vw, 390px);
  height: auto;
  aspect-ratio: 1717 / 916;
  object-fit: contain;
  border-radius: 0;
}

/* Blend the supplied artwork into the paper background and keep the card compact. */
.rings-ornament {
  width: 118px;
  height: 78px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: .9;
}
.ceremony-ornament {
  width: min(82vw, 360px);
  height: 78px;
  object-fit: cover;
  object-position: center;
  border-radius: 45%;
  mix-blend-mode: multiply;
  opacity: .9;
}
@media (min-width: 700px) {
  .hero {
    min-height: min(720px, calc(100svh - 96px));
    padding-top: 24px;
    padding-bottom: 30px;
  }
  .rings-ornament {
    width: 108px;
    height: 68px;
    margin-bottom: 0;
  }
  .ceremony-ornament {
    width: 330px;
    height: 70px;
    margin-bottom: 10px;
  }
  .message {
    font-size: 15px;
    line-height: 1.5;
  }
  .signature {
    margin-top: 18px;
  }
}

/* Remove the two decorative card borders. */
.hero {
  border: 0;
  outline: 0;
}

/* Transparent cutout assets: no blending or background-box cropping needed. */
.rings-ornament {
  width: 118px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
}
.ceremony-ornament {
  width: min(82vw, 360px);
  height: auto;
  aspect-ratio: 1717 / 916;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
}
@media (min-width: 700px) {
  .rings-ornament { width: 108px; }
  .ceremony-ornament { width: 330px; }
}

/* Fit the complete invitation to one viewport on phone and laptop. */
html, body {
  height: 100%;
  overflow: hidden;
}
.page-shell {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}
.hero {
  min-height: 0;
  height: calc(100svh - 50px);
  overflow: hidden;
}
@media (max-width: 699px) {
  .page-shell { padding: 18px 14px 18px; }
  .hero { height: calc(100svh - 36px); padding: 22px 8px 34px; }
  .rings-ornament { width: 96px; height: auto; }
  .ceremony-ornament { width: min(78vw, 330px); }
  .divider { margin-top: 18px; margin-bottom: 16px; }
  .message { font-size: 14px; line-height: 1.45; }
  .signature { margin-top: 16px; }
}
@media (min-width: 700px) {
  .hero { height: calc(100svh - 96px); }
}

/* Compact desktop composition so the full invitation remains visible. */
@media (min-width: 700px) {
  .hero { padding: 14px 8px 20px; }
  .rings-ornament { width: 82px; }
  .names-small { margin-bottom: 6px; font-size: 12px; }
  h1 { font-size: 72px; }
  .divider { margin: 16px 0 12px; }
  .ceremony-ornament { width: 270px; margin-bottom: 8px; }
  .message { max-width: 330px; font-size: 13px; line-height: 1.35; }
  .signature { margin-top: 12px; font-size: 16px; }
}

.names-small { text-transform: none; }

/* Mobile: fit the longer message without changing the laptop layout. */
@media (max-width: 699px) {
  .message {
    max-width: 330px;
    font-size: 12px;
    line-height: 1.35;
  }
  .signature {
    margin-top: 10px;
    font-size: 15px;
  }
}

@media (max-width: 699px) {
  .ceremony-ornament {
    width: min(68vw, 280px);
  }
}

/* Desktop only: blend residual pale pixels into the invitation card. */
@media (min-width: 700px) {
  .rings-ornament,
  .ceremony-ornament {
    mix-blend-mode: multiply;
  }
}

/* Desktop: let the invitation artwork show through the card area. */
@media (min-width: 700px) {
  .hero { background: transparent; }
}

h1 { color: var(--sage); }
h1 em { color: var(--rose); }