/* =========================================================
   Field notes (blog) — a 3D pen writes the page title
   A real-looking pen appears and writes the heading in a
   handwriting script, nib tracking the ink, then lifts away.
   Reduced-motion safe (shows the handwritten title, no pen).
   ========================================================= */
.pw { position: relative; display: inline-block; margin: .15em 0 .45em; max-width: 100%; }
.pw__ink {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 700; font-size: clamp(2.6rem, 8.5vw, 6rem); line-height: 1.02;
  color: var(--ink); display: inline-block; white-space: nowrap; letter-spacing: .5px;
  /* revealed left→right as the pen writes */
  clip-path: inset(0 100% 0 0);
}
.pw.is-done .pw__ink, .pw.no-anim .pw__ink { clip-path: inset(0 0 0 0); }

.pw__pen {
  position: absolute; left: 0; top: 0; width: 46px; height: auto;
  transform-origin: 23px 150px;              /* the nib tip (scaled) */
  transform: translate(-999px, -999px);       /* parked off-screen until measured */
  opacity: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(3px 6px 6px rgba(11,31,51,.30));
}
.pw__pensvg { display: block; width: 100%; height: auto; }
.pw__nibink { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); opacity: 0; pointer-events: none; z-index: 2; transform: translate(-999px,-999px); }
.pw__shadow { position: absolute; left: 0; top: 0; width: 30px; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,31,51,.30), transparent); opacity: 0; pointer-events: none;
  transform: translate(-999px,-999px); z-index: 1; }

/* screen-reader heading kept for SEO/a11y while the pen version is decorative */
.pw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

@media (prefers-reduced-motion: reduce) {
  .pw__ink { clip-path: inset(0 0 0 0); }
  .pw__pen, .pw__nibink, .pw__shadow { display: none; }
}