/* ════════════════════════════════════════════════════════════
   MOWER STRIPE — see js/mow.js
   Two copies of the heading stacked exactly; the top one is clipped in
   from the left as the pass sweeps across.
   Revert: remove this <link> and the mow <script>. The heading returns
   to plain text — nothing here changes layout.
   ════════════════════════════════════════════════════════════ */

.eh-mow {
  position: relative;
  display: inline-block;
  /* Both copies are the same markup at the same font, so the wrapper takes
     its size from the flow copy and the other is positioned on top of it.
     No width or height is ever set here — the heading wraps exactly as it
     did before this script touched it. */
}

.eh-mow__under {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The unmown state. Sits under the mown copy and is simply revealed by
     the mown copy not yet being there. */
}

.eh-mow__over {
  position: relative;
  display: inline;
  will-change: clip-path;
}

/* The stripes a mower leaves. Two soft bands at a shallow angle, laid in
   the wake of the pass — they read as a striped lawn rather than as a
   graphic because they are barely there. */
/* Stripes are LIGHT-SECTION ONLY. On the dark sections they rendered as a row
   of grey blocks behind the words — a mown stripe reads as a subtle sheen on
   turf, and there is no turf to catch the light on near-black. */
.eh-mow--dark .eh-mow__stripes { display: none; }

.eh-mow__stripes {
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: -0.12em;
  bottom: -0.28em;
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(
    97deg,
    var(--mow-stripe, rgba(32, 79, 45, 0.08)) 0 0.9em,
    transparent 0.9em 1.8em
  );
}

@media (max-width: 767px) {
  /* The stripe pitch is set in em, so it scales with the heading — but on a
     small heading two bands read as noise rather than as a mown lawn. */
  .eh-mow__stripes { display: none; }
}