<div class="div-sketch-surface">
  <p class="div-sketch-text">The notebook had been with her for nine years and four countries — its cover softened, its spine cracked, every page carrying some half-finished thought.</p>
  <div class="div-sketch-v1" role="separator">
    <svg viewBox="0 0 476 14" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-sketch-line" d="M2 8 C40 4 78 11 116 7 C154 3 192 10 230 6 C268 3 306 11 344 7 C382 4 420 10 458 7 C465 6 470 8 474 7" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-sketch-text">She wrote in pencil, always — not from caution but from a belief that ideas should remain provisional, should keep the option of being wrong.</p>
  <div class="div-sketch-v2" role="separator">
    <svg viewBox="0 0 476 18" fill="none" aria-hidden="true">
      <path class="div-sketch-arrow" d="M6 9 C90 5 180 13 270 8 C330 5 390 11 446 9" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
      <path class="div-sketch-head" d="M446 9 L434 3 M446 9 L434 15" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-sketch-text">The best pages were the messiest — arrows looping back on themselves, words crossed out and rewritten, a coffee ring framing one stubborn paragraph.</p>
  <div class="div-sketch-v3" role="separator"><span class="div-sketch-swipe">section two</span></div>
  <p class="div-sketch-text">When the notebook was full she did not buy a matching one. The next was different on purpose — a new object should not pretend to be the old.</p>
</div>

@keyframes div-sk-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-sk-swipe { from { background-size: 0% 62%; } to { background-size: 100% 62%; } }
@keyframes div-sk-fade  { from { opacity: 0; } to { opacity: 1; } }
.div-sketch-surface {
  background: #faf8f3;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-sketch-text {
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
  font-size: 14px;
  line-height: 1.85;
  color: #3a3a3a;
  margin: 0;
}
/* v1 — wobbly hand-drawn line */
.div-sketch-v1 { margin: 30px 0; }
.div-sketch-v1 svg { display: block; width: 100%; height: 14px; }
.div-sketch-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: div-sk-draw 0.95s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — doodled arrow */
.div-sketch-v2 { margin: 30px 0; }
.div-sketch-v2 svg { display: block; width: 100%; height: 18px; }
.div-sketch-arrow {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: div-sk-draw 0.85s cubic-bezier(.16,1,.3,1) both;
}
.div-sketch-head {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: div-sk-draw 0.25s ease 0.82s both;
}
/* v3 — highlighter swipe under a label */
.div-sketch-v3 {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.div-sketch-swipe {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 13px;
  color: #3a3a3a;
  padding: 2px 10px;
  background-image: linear-gradient(rgba(255,221,87,0.85), rgba(255,221,87,0.85));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 0% 62%;
  animation: div-sk-swipe 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-sketch-line, .div-sketch-arrow, .div-sketch-head { animation: none; stroke-dashoffset: 0; }
  .div-sketch-swipe { animation: none; background-size: 100% 62%; }
}