/* =========================================================================
   shift-dark.css — darker warm grounds, and a much thinner fade.

   Layered over shift-warm.css.

   THE FADE was reaching far too high. The panel ran #000 -> ground from 70%
   of the hero's height, which at 100vh is 270px of gradient: warm was
   visibly climbing the right-hand side well above the CTA row, so the black
   panel stopped reading as black. The photo scrim started turning warm at
   72% for the same reason.

   Both are now driven by --lf-fade, the point where the hero begins to give
   up its black. Default 88% -- about 108px at a 900px hero, roughly a third
   of what it was -- with an even tighter 94% available. The hero stays black
   until near its own bottom edge and then resolves quickly.

   THE GROUNDS are all darker than the previous set. #231F20 is --ink-2,
   already in site.css.
   ========================================================================= */

.lf-block{--lf-fade:88%;--lf-hero:#000;--lf-hero-rgb:0,0,0}
.lf-block.lf-fade--xs{--lf-fade:94%}

/* The hero's own black. #262626 is neutral and a visible step up from black
   -- rgb(38,38,38) against rgb(0,0,0) -- so it reads as grey rather than as
   black. #0A0708 is what "almost black" actually measures as: rgb(10,7,8),
   near the floor, and carrying the same warm cast as the grounds (red
   highest, then blue, then green) instead of sitting neutral against them. */
.lf-block.lf-hero26{--lf-hero:#262626;--lf-hero-rgb:38,38,38}
.lf-block.lf-hero0a{--lf-hero:#0A0708;--lf-hero-rgb:10,7,8}
.lf-block.lf-hero16{--lf-hero:#161012;--lf-hero-rgb:22,16,18}
/* #161314 — same lightness as #161012 but far less chromatic: green sits 3
   below red rather than 6, so it reads closer to a true dark grey. Note it
   is LESS warm than the ground it hands to (#231E20, green 5 below red). */
.lf-block.lf-hero13{--lf-hero:#161314;--lf-hero-rgb:22,19,20}

/* NO FADE. The panel simply ends, which is clean -- a flat colour meeting a
   flat colour. The photo is the harder half: with no ground takeover the
   image itself runs to the boundary and stops, so whatever the dune happens
   to be doing at that row is what butts against the section. The depth scrim
   still darkens it on the way down; it just never resolves. */
.lf-block.lf-fade--none .n12-panel{background:var(--lf-hero)}
.lf-block.lf-fade--none .n12-photo::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.12) 58%,
    rgba(0,0,0,.34) 76%,
    rgba(0,0,0,.34) 100%);
}

.lf-block .n12-hero,
.lf-block .n12-photo{background-color:var(--lf-hero)}

/* #231E20 -- effectively --ink-2 (#231F20), one point off in green. */
.lf-block.lf-g23{--lf-ground:#231E20;--lf-ground-rgb:35,30,32;--lf-dim-line:.46;--lf-dim-tag:.5;--lf-dim-tab:.5}

/* ---------------------------- de-purpled ----------------------------
   The purple is blue sitting above green. #231E20 is rgb(35,30,32): blue
   runs 2 ABOVE green, which is what tips it mauve. #161314 does the same
   thing by 1. Warm greys want the opposite order -- red, then green, then
   blue -- so every value below puts blue BELOW green and the cast goes
   brown-grey instead of purple-grey.

   Ground #241F1C is rgb(36,31,28): blue 3 below green. */
.lf-block.lf-gw{--lf-ground:#241F1C;--lf-ground-rgb:36,31,28;--lf-dim-line:.46;--lf-dim-tag:.5;--lf-dim-tab:.5}

/* Three lifts toward that ground, none of them purple. */
.lf-block.lf-hw1{--lf-hero:#1A1715;--lf-hero-rgb:26,23,21}
.lf-block.lf-hw2{--lf-hero:#1E1A18;--lf-hero-rgb:30,26,24}
.lf-block.lf-hw3{--lf-hero:#211D1A;--lf-hero-rgb:33,29,26}

/* --------------------- neither purple nor olive ---------------------
   #241F1C overshot. Dropping blue 3 below green puts the hue at 24 deg
   with 22% saturation, which at this value reads olive rather than grey.
   And the clay accent sits at about 12 deg, so a ground 12-18 deg greener
   than it gets pushed greener still by contrast.

   The rule below holds red 3 above green and green just 1 above blue. That
   lands every value near 15 deg -- the clay's own family -- at 13-18%
   saturation instead of 22%, so it reads as a warm grey rather than as a
   colour. Purple needs blue ABOVE green and olive needs a wide green-blue
   gap; one step between them avoids both.

   Ground drops from rgb(36,31,28) to rgb(31,28,27), and all three heroes
   are darker than the old darkest (rgb(26,23,21)). */
.lf-block.lf-gn{--lf-ground:#1F1C1B;--lf-ground-rgb:31,28,27;--lf-dim-line:.46;--lf-dim-tag:.49;--lf-dim-tab:.49}

.lf-block.lf-hn1{--lf-hero:#171413;--lf-hero-rgb:23,20,19}
.lf-block.lf-hn2{--lf-hero:#13100F;--lf-hero-rgb:19,16,15}
.lf-block.lf-hn3{--lf-hero:#0F0D0C;--lf-hero-rgb:15,13,12}

/* Darker grounds under the settled #0F0D0C hero (L=13.4). Same rule as
   above -- red 3 above green, green 1 above blue, hue 15deg -- just lower.
   Below about rgb(23,20,19) the ground meets the hero and the boundary
   stops existing, so g3 is the floor rather than a midpoint. */
.lf-block.lf-gd1{--lf-ground:#1B1817;--lf-ground-rgb:27,24,23;--lf-dim-line:.46;--lf-dim-tag:.49;--lf-dim-tab:.49}
.lf-block.lf-gd2{--lf-ground:#191615;--lf-ground-rgb:25,22,21;--lf-dim-line:.45;--lf-dim-tag:.49;--lf-dim-tab:.49}
.lf-block.lf-gd3{--lf-ground:#171413;--lf-ground-rgb:23,20,19;--lf-dim-line:.44;--lf-dim-tag:.49;--lf-dim-tab:.49}

/* d1/d2/d3, darkest last. Dim levels come back down as the ground drops --
   there is more room to be dim again without falling under 3:1. */
.lf-block.lf-d1{--lf-ground:#262120;--lf-ground-rgb:38,33,32;--lf-dim-line:.48;--lf-dim-tag:.5;--lf-dim-tab:.5}
.lf-block.lf-d2{--lf-ground:#231F20;--lf-ground-rgb:35,31,32;--lf-dim-line:.46;--lf-dim-tag:.5;--lf-dim-tab:.5}
.lf-block.lf-d3{--lf-ground:#1C1917;--lf-ground-rgb:28,25,23;--lf-dim-line:.44;--lf-dim-tag:.49;--lf-dim-tab:.49}

/* ------------------------------- the fade ------------------------------- */

/* The photo holds its black through the fall and only warms over the last
   stretch, so the dune keeps the depth it had. */
/* TWO LAYERS, and they must stay separate.

   The single-gradient version put a heavy black stop just before the
   handover -- rgba(0,0,0,.70) at 82% -- and then resolved up to the ground.
   Since the ground is lighter than that stop, the photo was lighter above it
   and the ground lighter below it, leaving a minimum in between: a dark band
   across the bottom of the image. Measured on D2, luminance fell to 16.0 at
   y=740 and recovered to 31.9 at the bottom edge.

   So the depth scrim now CAPS and holds, and a separate ground layer ramps
   in over it. Nothing in the fall is ever darker than what it resolves to,
   which is what keeps the run monotonic and the band gone. */
.lf-block .n12-photo::after{
  background:
    /* ground takeover -- same depth as the panel's, so the two halves of the
       hero arrive together */
    linear-gradient(180deg,
      rgba(var(--lf-ground-rgb),0) var(--lf-fade),
      rgba(var(--lf-ground-rgb),.72) calc(var(--lf-fade) + 7%),
      rgb(var(--lf-ground-rgb)) 100%),
    /* depth scrim -- black, because its job is to darken the photograph, and
       it holds flat once it reaches its cap rather than spiking */
    linear-gradient(180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.12) 58%,
      rgba(0,0,0,.34) 76%,
      rgba(0,0,0,.34) 100%);
}

.lf-block .n12-panel{
  background:linear-gradient(180deg,
    var(--lf-hero) 0%,
    var(--lf-hero) var(--lf-fade),
    var(--lf-ground) 100%);
}