<div class="div-rom-surface">
  <p class="div-rom-text">They had met, improbably, at a florist's shop on a Tuesday morning in November — he returning peonies that had died too quickly.</p>
  <div class="div-rom-v1" role="separator">
    <svg viewBox="0 0 476 32" fill="none" aria-hidden="true">
      <path class="div-rom-vine div-rom-lv" d="M238 16 C221 9 200 7 179 12 C158 17 137 12 116 16 C95 20 74 15 53 19 C36 22 20 19 0 22" stroke="#c4826a" stroke-width="1.2"/>
      <path class="div-rom-vine div-rom-rv" d="M238 16 C255 9 276 7 297 12 C318 17 339 12 360 16 C381 20 402 15 423 19 C440 22 456 19 476 22" stroke="#c4826a" stroke-width="1.2"/>
      <ellipse cx="179" cy="12" rx="3.5" ry="5.5" transform="rotate(-35 179 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.64s"/>
      <ellipse cx="116" cy="16" rx="3" ry="5" transform="rotate(-20 116 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.74s"/>
      <ellipse cx="53" cy="19" rx="2.8" ry="4.5" transform="rotate(-12 53 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.84s"/>
      <ellipse cx="297" cy="12" rx="3.5" ry="5.5" transform="rotate(35 297 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.68s"/>
      <ellipse cx="360" cy="16" rx="3" ry="5" transform="rotate(20 360 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.78s"/>
      <ellipse cx="423" cy="19" rx="2.8" ry="4.5" transform="rotate(12 423 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.88s"/>
      <circle cx="238" cy="16" r="4.5" fill="#c4826a" class="div-rom-lf" style="--ld:.1s"/>
      <circle cx="238" cy="16" r="7" fill="none" stroke="#c4826a" stroke-width=".8" opacity=".4" class="div-rom-lf" style="--ld:.22s"/>
    </svg>
  </div>
  <p class="div-rom-text">The invitation had arrived on heavy cream stock, hand-addressed in ink the colour of dried roses.</p>
  <div class="div-rom-v2" role="separator">
    <span class="div-rom-petal div-rom-p1">❀</span>
    <span class="div-rom-petal div-rom-p2">❦</span>
    <span class="div-rom-petal div-rom-p3">❀</span>
  </div>
  <p class="div-rom-text">In the old country, weddings lasted three days and left everyone changed — not just the couple but the witnesses too.</p>
  <div class="div-rom-v3" role="separator">
    <span class="div-rom-gems"><i></i><i></i><i></i></span>
  </div>
  <p class="div-rom-text">The flowers were white roses mixed with ranunculus and a single stem of something she couldn't name.</p>
</div>

@keyframes div-rom-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rom-leaf { to { opacity: 1; } }
@keyframes div-rom-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-rom-pop  { from { transform: scale(0); } 55% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-rom-gem  { from { transform: rotate(45deg) scale(0); } 65% { transform: rotate(45deg) scale(1.3); } to { transform: rotate(45deg) scale(1); } }
.div-rom-surface {
  background: #fdf5ed;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-rom-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.92;
  color: #4a3728;
  margin: 0;
}
/* v1 — flowering vine draws itself */
.div-rom-v1 { margin: 32px 0; }
.div-rom-v1 svg { display: block; width: 100%; height: 32px; }
.div-rom-vine {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: div-rom-draw 1.25s cubic-bezier(.16,1,.3,1) both;
}
.div-rom-rv { animation-delay: 0.05s; }
.div-rom-lf {
  opacity: 0;
  animation: div-rom-leaf 0.35s ease both;
  animation-delay: var(--ld, 0.65s);
}
/* v2 — petal ornament */
.div-rom-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 32px 0;
  position: relative;
}
.div-rom-v2::before,
.div-rom-v2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  height: 0.5px;
  animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-rom-v2::before { left: 0;  background: linear-gradient(to right, transparent, #c4826a); transform-origin: right; }
.div-rom-v2::after  { right: 0; background: linear-gradient(to left, transparent, #c4826a);  transform-origin: left; animation-delay: 0.47s; }
.div-rom-petal {
  color: #c4826a;
  animation: div-rom-pop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-p1 { font-size: 9px;  animation-delay: 0.08s; }
.div-rom-p2 { font-size: 15px; animation-delay: 0.17s; }
.div-rom-p3 { font-size: 9px;  animation-delay: 0.25s; }
/* v3 — three diamonds between blush rules */
.div-rom-v3 {
  display: flex;
  align-items: center;
  margin: 32px 0;
}
.div-rom-v3::before,
.div-rom-v3::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: #d4a898;
  animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-rom-v3::before { transform-origin: right; }
.div-rom-v3::after  { transform-origin: left; animation-delay: 0.45s; }
.div-rom-gems {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
}
.div-rom-gems i {
  display: block;
  width: 7px;
  height: 7px;
  background: #c4826a;
  animation: div-rom-gem 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-gems i:nth-child(1) { animation-delay: 0.17s; }
.div-rom-gems i:nth-child(2) { width: 11px; height: 11px; animation-delay: 0.08s; }
.div-rom-gems i:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .div-rom-vine { animation: none; stroke-dashoffset: 0; }
  .div-rom-lf { animation: none; opacity: 1; }
  .div-rom-v2::before, .div-rom-v2::after, .div-rom-petal,
  .div-rom-v3::before, .div-rom-v3::after { animation: none; }
  .div-rom-gems i { animation: none; transform: rotate(45deg); }
}