/* ==========================================================================
   lpen-about.css — /about/ (post 23) hero scrim only.

   Everything else on this page is built from Elementor controls and needs no
   CSS. This file exists for TWO reasons, both of which an Elementor gradient
   control cannot express:

   1. The stop has to be a calc(). The copy is CENTRED in a 1200px box, so its
      right edge sits at `50% + 22px` — x 711 on a 1440 screen, x 982 on a 1920
      one. A % stop is wrong on a phone (the copy runs nearly full width there,
      and white drops to 2.87:1); a px stop is wrong on a wide monitor (the copy
      starts further right, and white drops to 3.11:1). Only calc() moves with
      the box the copy lives in.

   2. The ramp needs more than two stops. A two-stop linear fade has a kink at
      each end — the derivative jumps where the hold stops and again where it
      flattens — and both read as visible edges. The nine stops below sample a
      SMOOTHSTEP (3t^2 - 2t^3), which is flat at both ends, so the fade has no
      start line and no finish line.

   The flat start is also what buys the copy its protection: the ramp begins at
   50% + 80px, but smoothstep is still at alpha 0.93 by 50% + 110px, which is
   where the copy ends at 1024. A linear ramp starting there would already be
   down to 0.88.

   ⚠️ Every selector must contain #lpen-about-hero. lpen-assets/ is enqueued
   site-wide (CLAUDE.md §18j), and an id anchor is a fact you can grep rather
   than a prefix transform you have to trust (§18k). The id beats Elementor's
   own (0,4,0) rule on its own, so no !important is needed anywhere here.

   The overlay is a ::before PSEUDO-ELEMENT on Elementor 4.x optimized DOM
   output, not a child div (§18q) — a rule written against
   .elementor-background-overlay would match nothing.

   Alpha is baked into the stops; Elementor's overlay opacity stays at 1, so
   the two never compound. The element tree still carries a plain
   0.94@700px -> 0.12 gradient, which is the fallback if this file fails to
   load: legible at every width, just less of a reveal and less smooth.

   Worst-case contrast in the text band, composited against the real pixels of
   the deployed WebP across 241 columns x 25 rows, at 1024 / 1280 / 1440 /
   1600 / 1920 / 2560:  white >= 13.77, navy-100 >= 9.83. The clear right runs
   from 5% of the width at 1024 to 32% at 2560. Re-run that check if the
   photograph is ever swapped: the numbers belong to this image, not to the
   gradient.
   ========================================================================== */

#lpen-about-hero::before {
	background-image: linear-gradient(
		90deg,
		rgba(1, 32, 50, 0.95) calc(50% + 80px),
		rgba(1, 32, 50, 0.911) calc(50% + 128px),
		rgba(1, 32, 50, 0.808) calc(50% + 175px),
		rgba(1, 32, 50, 0.662) calc(50% + 222px),
		rgba(1, 32, 50, 0.495) calc(50% + 270px),
		rgba(1, 32, 50, 0.328) calc(50% + 318px),
		rgba(1, 32, 50, 0.182) calc(50% + 365px),
		rgba(1, 32, 50, 0.079) calc(50% + 412px),
		rgba(1, 32, 50, 0.04) calc(50% + 460px)
	);
}

/* Below 1024 the copy runs the full width of the element, so there is no room
   to reveal anything without putting text on a bright sky. The hero goes to a
   near-flat scrim and the photograph reads as texture rather than as a view.
   1023px is this install's tablet breakpoint, read from the emitted CSS. */
@media (max-width: 1023px) {
	#lpen-about-hero::before {
		background-image: linear-gradient(
			90deg,
			rgba(1, 32, 50, 0.94),
			rgba(1, 32, 50, 0.9)
		);
	}
}