/* =========================================================================
   shift-lift.css — the lift, as a fade rather than a step.

   Layered over shift-x.css.

   THE JOIN. No border. The section's ground starts at the hero's exact black
   so the boundary itself is invisible, then fades to grey over the first half
   of the section. The change still happens — it just happens as you scroll
   through it rather than at a line you cross. Nothing to notice, and by the
   time you reach the before/after pairs you are plainly on a different
   surface than the hero.

   THE GREY. Sampled from the hero sky, which measures rgb(95,98,103) — only
   about 7% saturated, but reliably cool (blue runs 7-8 points above red).
   The ground keeps that cast at a much lower value: rgb(28,30,34), blue 6
   above red. Grey rather than black, and cool rather than neutral, so it
   belongs to the photograph instead of merely being lighter than it.

   THE RULE under 01-04 runs the full width of the screen while the tabs
   themselves stay on the content inset — so the structure reads edge to
   edge and the content stays where the eye expects it.
   ========================================================================= */

:root{
  --lf-grey:#1C1E22;
  --lf-grey-rgb:28,30,34;

  /* Two muted accents, neither of them orange.
     sky   — the hero sky's hue lifted to a value that can actually read as
             "selected" on a dark ground. The sampled colour itself is a mid
             grey, darker than the cream it would have to outrank, so using
             it raw would make the active item the dimmest one on the row.
     wheat — a light yellow kept well off primary, close to the sand in the
             dune without becoming the sand. */
  --lf-sky:#A9B8C6;
  --lf-wheat:#E3CE97;
  /* clay — a muted dusty rose out of the dune's shadow side. Note this one
     is a hue statement rather than a brightness one: it sits much closer to
     the dimmed cream it has to outrank than wheat does. */
  --lf-clay:#B28479;
  --lf-accent:var(--lf-sky);
}
.lf--clay{--lf-accent:var(--lf-clay)}

/* ------------------------------ the ground ------------------------------ */

.lf{
  background-color:var(--lf-grey);
  background-image:linear-gradient(180deg,
    #000 0%,
    #000 6%,
    var(--lf-grey) 52%,
    var(--lf-grey) 100%);
  border-top:0;
}

/* Hero resolves to grey instead of black. Both halves, or the bottom edge
   steps sideways: photo grey on the left, panel black on the right. */
.lf-greyhero .n12-photo::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.12) 56%,
    rgba(0,0,0,.24) 72%,
    rgba(var(--lf-grey-rgb),.55) 85%,
    rgba(var(--lf-grey-rgb),.86) 94%,
    rgb(var(--lf-grey-rgb)) 100%);
}
.lf-greyhero .n12-panel{
  background:linear-gradient(180deg,
    #000 0%,
    #000 68%,
    var(--lf-grey) 100%);
}
/* The hero has already arrived at grey, so the section has nothing to fade
   from — it is simply the same surface, continued. */
.lf-greyhero + .lf,
.lf.lf--flat{background-image:none}

/* ------------------------------ the accent ------------------------------ */

.lf .hx-rule{background:var(--lf-accent)}
.lf .hx-tab.is-on{color:var(--lf-accent)}
.lf--wheat{--lf-accent:var(--lf-wheat)}

/* --------------------------- full-bleed rule ---------------------------
   The row under 01-04 spans the screen; the tabs sit on the content inset.
   The rule element is positioned against this box's left edge and the JS
   offsets it by each tab's own position, so it still lands under the tab. */

.lf .hx-tabs{
  margin-left:0;margin-right:0;
  padding:0 var(--hx-inset) 16px;
}

/* --------------------------- the statements ----------------------------
   Every pair is two lines. text-wrap:balance is what stops a line from
   ending in one orphaned word — it evens the lines instead of filling the
   first one and dropping the remainder. The max-width still caps the
   measure so nothing can run to three. */

.lf .hx-line{
  max-width:24ch;
  text-wrap:balance;
}

@supports not (text-wrap:balance){
  /* Older engines fill rather than balance, so tighten the measure to the
     point where the fill lands in roughly the same place. */
  .lf .hx-line{max-width:18ch}
}

@media(max-width:900px){
  .lf .hx-line{max-width:26ch}
}