/* line-carries-colour: one layer inside the section, never wider than the section. The section keeps its
   own ground edge to edge. The stage is inset from all four sides by one even gutter (--mo-gap) and has the
   corners of a card, so it can neither sit flush against the section before or after, nor spill out of its
   own section. Inside the stage, the cover is the ground of the section before it, clipped from its foot by
   --mo-below, so it covers the stage from the top down to the line; the line is a hairline in the accent at
   --mo-cut. Once the line has reached the top (.is-open) the stage is taken off the screen. The words and
   pictures are made whole by the script (moment.js), not here: with no script nothing is hidden. At rest (a
   phone, reduced motion, no script) the stage does not exist. */
.mo-lc { --mo-cut: 100%; --mo-below: 0px; --mo-gap: clamp(8px, 1.2vw, 18px); position: relative; overflow: clip; }
.mo-lc > .mo-lc__stage { position: absolute; inset: var(--mo-gap); z-index: 20; pointer-events: none; overflow: clip; border-radius: var(--r-lg, 16px); }
.mo-lc__stage > .mo-lc__cover { position: absolute; inset: 0; background: var(--mo-from, var(--p-bg, var(--bg))); clip-path: inset(0 0 var(--mo-below) 0); will-change: clip-path; }
.mo-lc__stage > .mo-lc__line { position: absolute; left: 0; right: 0; top: var(--mo-cut); height: 1px; background: var(--accent); will-change: top; }
.mo-lc--surface { --mo-from: var(--p-surface, var(--surface)); }
.mo-lc--inverse { --mo-from: var(--p-inv-bg, var(--bg)); }
.mo-lc.is-open > .mo-lc__stage { display: none; }
@media (prefers-reduced-motion: reduce) { .mo-lc > .mo-lc__stage { display: none; } }