<div class="div-editorial-surface">
  <p class="div-editorial-text">The light in August arrives differently than in other months — slanting through windows at an angle that makes dust particles visible.</p>
  <div class="div-editorial-v1" role="separator"><em>· · ·</em></div>
  <p class="div-editorial-text">She had learned to read weather the way her grandmother did — not from forecasts but from the quality of morning silence.</p>
  <div class="div-editorial-v2" role="separator"><i></i><i></i></div>
  <p class="div-editorial-text">Memory operates on its own calendar — a smell, a slant of afternoon light, and suddenly it is fifteen years ago.</p>
  <div class="div-editorial-v3" role="separator"><span>continued overleaf</span></div>
  <p class="div-editorial-text">The village had grown slowly, the way most things of permanence grow: without announcement, without knowing itself.</p>
</div>

@keyframes div-ed-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-ed-rot  { from { transform: scale(0) rotate(-210deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-ed-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-ed-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
.div-editorial-surface {
  background: #f4efe7;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-editorial-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #3c3830;
  margin: 0;
}
/* v1 — rules grow from centre, mark rotates in */
.div-editorial-v1 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0;
}
.div-editorial-v1::before,
.div-editorial-v1::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #b5ad9e;
  animation: div-ed-grow 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-editorial-v1::before { transform-origin: right; }
.div-editorial-v1::after  { transform-origin: left; animation-delay: 0.05s; }
.div-editorial-v1 em {
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.6em;
  color: #928878;
  padding-right: 0.4em;
  animation: div-ed-rot 0.7s cubic-bezier(.34,1.56,.64,1) 0.72s both;
}
/* v2 — bold rule slams in, hairline grows under it */
.div-editorial-v2 { margin: 32px 0; overflow: hidden; }
.div-editorial-v2 i:nth-child(1) {
  display: block;
  height: 4px;
  background: #2c2820;
  animation: div-ed-slam 0.65s cubic-bezier(.18,0,.05,1) 0.18s both;
}
.div-editorial-v2 i:nth-child(2) {
  display: block;
  height: 1px;
  margin-top: 4px;
  background: #c0b8a8;
  transform-origin: left;
  animation: div-ed-grow 0.7s cubic-bezier(.16,1,.3,1) 0.5s both;
}
/* v3 — rules grow from centre, label fades up */
.div-editorial-v3 {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 32px 0;
}
.div-editorial-v3::before,
.div-editorial-v3::after {
  content: '';
  flex: 1;
  height: 0.5px;
  animation: div-ed-grow 0.8s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-editorial-v3::before { background: linear-gradient(to right, transparent, #a09888); transform-origin: right; }
.div-editorial-v3::after  { background: linear-gradient(to left, transparent, #a09888); transform-origin: left; animation-delay: 0.35s; }
.div-editorial-v3 span {
  flex-shrink: 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #857b6e;
  white-space: nowrap;
  animation: div-ed-fade 0.5s ease 0.82s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-editorial-v1::before, .div-editorial-v1::after, .div-editorial-v1 em,
  .div-editorial-v2 i, .div-editorial-v3::before, .div-editorial-v3::after,
  .div-editorial-v3 span { animation: none; }
}