/* =====================================================================
   LESTATE REAL — the value/time diagram and the page under it
   Loaded after css/story.css, which owns the chassis: the pinned
   runway, the rail, the copy column, the stacked canvas, the dark
   intro, the light closing claim and the reduced-motion skeleton.

   The page takes the chassis palette unchanged. Lestate Real is the
   operator that connects Realaize and Werkr, so it is drawn in the same
   blueprint blue they are: the three pages have to read as one system,
   and an accent of its own would have made this the odd one out. The
   two lockups that appear inside the drawing are the real ones, knocked
   out to white the way every wordmark on a dark surface is on this site.

   What is particular here is the drawing: one coordinate system, two
   trajectories, two levers and the arrow between them, built once in
   js/lestate-real.js and never replaced.
   ===================================================================== */

/* the headline runs to three lines here, and the chassis only staggers
   two of them */
.lr-page .st-h1 .line:nth-child(3)>span{animation-delay:.38s}

/* =====================================================================
   THE DIAGRAM
   ---------------------------------------------------------------------
   One layer, because there is one object. Everything below is either a
   draw-on (a dash offset, the single exception the site's performance
   contract makes) or a fade — nothing that forces layout animates.
   ===================================================================== */
.lr-l-plot{position:relative;opacity:var(--on,0)}
/* one layer, and its only child is absolutely positioned, so the
   implicit row would size to nothing without this */
.lr-page .st-canvas{grid-template-rows:minmax(0,1fr)}
.lr-draw{position:absolute;inset:0}
.lr-draw svg{width:100%;height:100%}

.lr-ln{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the coordinate system ---------- */
.lr-ax{stroke:rgba(var(--st-hue),.46);stroke-width:1.4}
/* the same two axes again, brighter, one lit while its lever is on */
.lr-hl{stroke:var(--st-blue);stroke-width:2.2}
.lr-hl-t{opacity:calc(var(--focusT,0) * .75)}
.lr-hl-v{opacity:calc(var(--focusV,0) * .75)}

/* ---------- trajectories ---------- */
.lr-g-std{opacity:calc(1 - var(--dim1,0) * .55)}
.lr-path{stroke:rgba(var(--st-hue),.36);stroke-width:1.3}
.lr-path-c{stroke:rgba(var(--st-hue),.15);stroke-width:.9}
.lr-path-hi{stroke:rgba(var(--st-hue-a),.9);stroke-width:1.7}
.lr-path-c-hi{stroke:rgba(var(--st-hue-a),.34);stroke-width:1}

/* what the two paths do not have in common */
.lr-gap{stroke:none;opacity:var(--gap,0)}

/* ---------- markers, ticks and leaders ---------- */
.lr-guide{stroke:rgba(var(--st-hue),.22);stroke-width:1}
.lr-guide-hi{stroke:rgba(var(--st-hue-a),.4)}
.lr-tick{stroke:rgba(var(--st-hue),.7);stroke-width:1.4}
.lr-dot{fill:#fff;stroke:none}
.lr-dot-hi{fill:var(--st-blue)}
.lr-halo{fill:rgba(var(--st-hue-a),.15);stroke:none}
.lr-halo-hi{fill:rgba(var(--st-hue-a),.26)}

/* ---------- the arrow that turns one path into the other ---------- */
.lr-arc{stroke:var(--st-blue);stroke-width:2.1}

/* ---------- the two levers ---------- */
.lr-lever{stroke-width:1.7}
.lr-lever-wk,.lr-tick-wk,.lr-lever-rz,.lr-tick-rz{stroke:var(--st-blue)}

/* ---------- type inside the drawing ---------- */
.lr-t{stroke:none;font-family:var(--font-sans);font-weight:700}
.lr-t-ax{fill:var(--st-print);font-size:10px;letter-spacing:2.2px}
.lr-t-pt{fill:#fff;font-size:10px;letter-spacing:-.1px}
.lr-t-cap{fill:var(--st-print);font-size:8.5px;letter-spacing:1.5px}
.lr-t-note{fill:rgba(230,241,255,.62);font-size:8.5px;font-weight:400;letter-spacing:.1px}

/* ---------- the three wordmarks ----------
     Real lockups, tinted flat through an SVG filter rather than
     redrawn as letterspaced text: the marks on this page have to be
     the marks used everywhere else on the site. --- */
.lr-mark{opacity:1}

/* ---------- reveal drivers ----------
     A path draws itself off its own window; anything that cannot be
     drawn — text, a dot, a wordmark — fades on the same one. Every
     drawn path is normalised to a length of 100 in the script, so one
     dash length serves all of them. --- */
.lr-d-ax,.lr-d-axh,.lr-d-p1,.lr-d-e1,.lr-d-wka,.lr-d-rza,.lr-d-p2,.lr-d-e2,
.lr-d-arc,.lr-d-arch{
  stroke-dasharray:100;
}
.lr-d-ax  {stroke-dashoffset:calc(100 * (1 - var(--ax,0)));opacity:clamp(0,calc(var(--ax,0) * 30),1);}
/* an arrowhead on a line that has not arrived yet reads as a stray
   chevron, so the two heads run on the last quarter of the axis window */
.lr-d-axh {--k:clamp(0,calc((var(--ax,0) - .74) * 3.9),1);
           stroke-dashoffset:calc(100 * (1 - var(--k)));opacity:clamp(0,calc(var(--k) * 30),1)}
.lr-d-p1  {stroke-dashoffset:calc(100 * (1 - var(--p1,0)));opacity:clamp(0,calc(var(--p1,0) * 30),1);}
.lr-d-e1  {stroke-dashoffset:calc(100 * (1 - var(--e1,0)));opacity:clamp(0,calc(var(--e1,0) * 30),1);}
.lr-d-wka {stroke-dashoffset:calc(100 * (1 - var(--wka,0)));opacity:clamp(0,calc(var(--wka,0) * 30),1);}
.lr-d-rza {stroke-dashoffset:calc(100 * (1 - var(--rza,0)));opacity:clamp(0,calc(var(--rza,0) * 30),1);}
.lr-d-p2  {stroke-dashoffset:calc(100 * (1 - var(--p2,0)));opacity:clamp(0,calc(var(--p2,0) * 30),1);}
.lr-d-e2  {stroke-dashoffset:calc(100 * (1 - var(--e2,0)));opacity:clamp(0,calc(var(--e2,0) * 30),1);}
.lr-d-arc {stroke-dashoffset:calc(100 * (1 - var(--arc,0)));opacity:clamp(0,calc(var(--arc,0) * 30),1);}
/* the head lands only once the line has reached it — same treatment the
   two axis arrowheads get, and for the same reason */
.lr-d-arch{--k:clamp(0,calc((var(--arc,0) - .82) * 5.6),1);
           stroke-dashoffset:calc(100 * (1 - var(--k)));opacity:clamp(0,calc(var(--k) * 30),1)}

.lr-f-ax   {opacity:var(--ax,0)}
.lr-f-start{opacity:var(--start,0)}
.lr-f-e1   {opacity:var(--e1,0)}
.lr-f-wk   {opacity:var(--wk,0)}
.lr-f-wka  {opacity:var(--wka,0)}
.lr-f-rz   {opacity:var(--rz,0)}
.lr-f-rza  {opacity:var(--rza,0)}
.lr-f-e2   {opacity:var(--e2,0)}
.lr-f-mark {opacity:var(--mark,0)}

/* the pale copy behind the intro: linework only. At a quarter opacity
   and three quarters scale the annotations are noise, not annotation. */
.st-intro-draw .lr-t,
.st-intro-draw .lr-mark,
.st-intro-draw .lr-hl{display:none}

/* =====================================================================
   THE PAGE UNDER THE STORY
   Back on the site's own warm near-white, with the same rhythm every
   other section pays.
   ===================================================================== */
.lr-sec{position:relative;padding:0 0 var(--sec-pad)}
.lr-band{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:32px 48px;align-items:start;
}
.lr-copy{display:flex;flex-direction:column;gap:14px}
.lr-copy p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:62ch}
/* A ruled column, not a filled card. The page already ends on one
   enclosed surface, and a second one halfway up turned a paragraph and
   its sidenote into two competing tiles. */
.lr-aside{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  padding:2px 0 2px 28px;border-left:1px solid var(--ink-5);
}
.lr-aside p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* --- the model, in three moves ---
   Acquire, transform, redeploy: three columns rather than the four the
   other two pillar pages carry, so the row is stated here instead of
   inheriting a four-track grid and leaving a hole in it. */
.lr-page .st-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Three short ruled columns hold their row further down than the four
   the other two pillar pages carry, so this one keeps three past the
   chassis breakpoint and then goes straight to one. Inheriting the
   chassis two-up would have left an orphan on the second line.

   Which means both of the chassis rows have to be undone here: above the
   breakpoint the two-up rules would take the divider off the third
   column and put a rule over it, and below it the divider has to go the
   same way it goes on the other two pages. */
@media (min-width:861px){
  .lr-page .st-benefits li+li{padding-left:30px}
  .lr-page .st-benefits li+li::before{content:""}
  .lr-page .st-benefits li::after{content:none}
}
@media (max-width:860px){
  .lr-page .st-benefits{grid-template-columns:minmax(0,1fr)}
  .lr-page .st-benefits li,.lr-page .st-benefits li+li{padding-left:0}
  .lr-page .st-benefits li::before,
  .lr-page .st-benefits li+li::before{content:none}
  .lr-page .st-benefits li+li::after{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);
  }
}

@media (max-width:960px){
  .lr-band{grid-template-columns:minmax(0,1fr);gap:26px}
  /* stacked, the rule belongs on top of the sidenote rather than beside it */
  .lr-aside{padding:24px 0 0;border-left:none;border-top:1px solid var(--ink-5)}
  .lr-copy p{font-size:15px}
  .lr-t-ax{font-size:11px}
  .lr-t-note{font-size:9px}
}

/* =====================================================================
   REDUCED MOTION
   The runway is unpinned by css/story.css. What is left to do is stand
   the diagram up finished — --on is the property the scroll runtime
   fades the layer in with, and it never runs here, so without it the
   whole drawing would be invisible.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .lr-l-plot{
    order:11;
    --on:1;--ax:1;--start:1;--p1:1;--e1:1;--wk:1;--wka:1;--rz:1;--rza:1;
    --p2:1;--e2:1;--gap:1;--arc:1;--mark:1;--dim1:1;--focusT:0;--focusV:0;
  }
}