/* ==========================================================================
   Fork pages - /north-fork/, /middle-fork/, /south-fork/
   Loaded after site.css via $meta['page_css'] = 'fork'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The masthead scrim

   The three fork mastheads are photographs, and they are not equally kind to
   the type on them. Glacier Rim (North Fork) has lit water and open canopy
   behind the lede; the Bear Creek ridge (Middle Fork) has sky and a sun flare;
   Reservoir Road (South Fork) has a bright gravel bar. The shared .hero__scrim
   was tuned for the home hero, where the copy sits low in a fixed 680px frame.
   On a fork page the frame is 480px and on a phone it has no fixed height at
   all - it grows to fit its copy, so the WHOLE photograph, sky included, ends
   up behind the words. Measured against the brightest pixel under each element
   the shared scrim left the river name at 1.33:1 and the lede at 1.75:1.

   Still a gradient, so the photograph keeps its light and its depth: the top
   of the frame is barely touched and the falloff is eased across seven stops
   rather than being a slab. What changed is that the dark part now reaches far
   enough up the frame to cover every band that carries type.

   Verified with the photographs themselves - each hero composited through this
   gradient at its real object-fit: cover crop, then the worst (brightest)
   pixel inside each element's box scored against that element's colour, for
   all three forks at 390 / 640 / 820 / 1024 / 1440:

     h1 (34-58px, large text)   AA needs 3:1     worst 4.2:1
     lede (17.5px)              AA needs 4.5:1   worst 5.9:1
     eyebrow (11.5px, on pill)  AA needs 4.5:1   worst 5.2:1
     chips (10.5px, on pill)    AA needs 4.5:1   worst 12.6:1

   If a fork hero photo is ever swapped, re-check it: a brighter frame moves
   these numbers and nothing on the page will tell you it happened.
   -------------------------------------------------------------------------- */
.hero .hero__scrim--deep {
  background: linear-gradient(to top,
    rgba(8, 16, 13, .94) 0%,
    rgba(8, 16, 13, .78) 18%,
    rgba(8, 16, 13, .70) 34%,
    rgba(8, 16, 13, .66) 62%,
    rgba(8, 16, 13, .52) 76%,
    rgba(8, 16, 13, .33) 88%,
    rgba(8, 16, 13, .12) 100%);
}

/* The eyebrow and the chips carry their own pills, which is most of why they
   clear AA so comfortably. The title and the lede have nothing but the scrim,
   so give them a soft shadow as well. It buys nothing in the contrast maths
   (WCAG scores colour against colour) but it holds the letterforms apart from
   the foliage they sit on, which is the actual complaint. */
.hero--short .hero__title,
.hero--short .hero__lede {
  text-shadow: 0 1px 22px rgba(8, 16, 13, .55);
}