/* =========================================================================
   shift-warm.css — B (grey hero) on the site's own warm greys.

   Layered over shift-x.css + shift-lift.css.

   The ground is set on a wrapper around the hero AND the section, because in
   B it is the hero that does the fading: the photo scrim and the panel both
   have to resolve to the same value the section sits on, or the bottom edge
   steps sideways — grey on the left, black on the right.

   THE GREYS are the ones site.css already uses, rather than new ones:

     w1  #2C2523   the ground under .site-hero
     w2  #332C2A   --ink: the site's main ground and its footer
     w3  #3A3433   one step lighter again; not currently in the palette

   DIM LEVELS. The before column and the idle tabs are dimmed cream, and
   dimmed cream loses contrast fast as the ground comes up. At .40 over
   black the before statements measured 3.48:1; the same .40 over #3A3433
   falls under 2.5:1, which is below the 3:1 floor for large text. So the
   dim levels are raised per ground — the before/after contrast is carried
   further by weight and position than by opacity alone here.
   ========================================================================= */

.lf-block{
  --lf-ground:#332C2A;
  --lf-ground-rgb:51,44,42;
  --lf-dim-line:.52;
  --lf-dim-tag:.53;
  --lf-dim-tab:.53;

  /* Wheat by default here, not the sky blue-grey. The sky accent was picked
     against a cool ground; on a warm one it reads as the only cool thing on
     the page and fights everything around it. */
  --lf-accent:var(--lf-wheat);
}
.lf-block.lf--sky{--lf-accent:var(--lf-sky)}
.lf-block.lf--clay{--lf-accent:var(--lf-clay)}

.lf-block.lf-w1{--lf-ground:#2C2523;--lf-ground-rgb:44,37,35;--lf-dim-line:.48;--lf-dim-tag:.51;--lf-dim-tab:.51}
.lf-block.lf-w2{--lf-ground:#332C2A;--lf-ground-rgb:51,44,42;--lf-dim-line:.52;--lf-dim-tag:.53;--lf-dim-tab:.53}
.lf-block.lf-w3{--lf-ground:#3A3433;--lf-ground-rgb:58,52,51;--lf-dim-line:.56;--lf-dim-tag:.56;--lf-dim-tab:.56}

/* ------------------------------- the hero ------------------------------- */

/* The photo scrim resolves to the ground instead of to black. It stays black
   through the middle of the fall so the dune keeps its depth, and only turns
   warm over the last stretch. */
.lf-block .n12-photo::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.12) 56%,
    rgba(0,0,0,.30) 72%,
    rgba(var(--lf-ground-rgb),.50) 86%,
    rgba(var(--lf-ground-rgb),.85) 95%,
    rgb(var(--lf-ground-rgb)) 100%);
}

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

/* ------------------------------ the section ----------------------------- */

/* No gradient: the hero has already arrived, so the section is the same
   surface continued. Two classes, so this outranks .lf's own background. */
.lf-block .hx{
  background-color:var(--lf-ground);
  background-image:none;
  border-top:0;
}

/* ------------------------------ dim levels ------------------------------ */

.lf-block .hx-side--b .hx-line{color:rgba(246,241,234,var(--lf-dim-line))}
.lf-block .hx-side--b .hx-tag{color:rgba(246,241,234,var(--lf-dim-tag))}
.lf-block .hx-tab{color:rgba(246,241,234,var(--lf-dim-tab))}
.lf-block .hx-tab:hover{color:rgba(246,241,234,.78)}
.lf-block .hx-tab.is-on{color:var(--lf-accent)}

/* The hairlines also have to come up off a lighter ground. */
.lf-block .hx-tabs{border-bottom-color:rgba(246,241,234,.2)}
.lf-block .hx-nudge{color:rgba(246,241,234,.42)}
.lf-block .hx-sub{color:rgba(246,241,234,.68)}
.lf-block .hx-arrow{color:rgba(246,241,234,.62)}