/* The five finished treatments, plus the chrome that presents them.

   This is the shipped form of what the picker explores. The picker reads its
   values from sliders; here every page sets --bg, --pos and --strength once in
   its own <style> block and nothing changes at runtime.

   Prefixed hf-. The site owns .hero, .band, .shell, .field and .modes — all
   linked from the real styles.css, none of them redefined here. */

.hf-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--canvas)}
.hf-art{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat}

/* ------------------------------------------------------------
   The eased tail, shared by every treatment that reaches the
   floor of the hero.

   A `linear-gradient(#000, #0000)` fades at one constant rate
   and then stops dead. The value is continuous but its slope is
   not, and the eye finds that kink and draws a line on it —
   which is why a plain fade still reads as an edge. Smoothstep,
   `3t² − 2t³`, arrives at both ends with zero slope, so there is
   no kink anywhere for it to catch.

   CSS has no easing inside a gradient, so the curve is sampled
   at nine points and written out.
   ------------------------------------------------------------ */
:root{
  --tail:
    rgb(0 0 0 / 1)    82.0%, rgb(0 0 0 / .957) 84.2%, rgb(0 0 0 / .844) 86.5%,
    rgb(0 0 0 / .684) 88.8%, rgb(0 0 0 / .500) 91.0%, rgb(0 0 0 / .316) 93.3%,
    rgb(0 0 0 / .156) 95.5%, rgb(0 0 0 / .043) 97.8%, rgb(0 0 0 / 0)   100.0%;
  /* the same curve rising, for the sky end of the horizon treatment */
  --rise:
    rgb(0 0 0 / 0)    30.0%, rgb(0 0 0 / .043) 35.0%, rgb(0 0 0 / .156) 40.0%,
    rgb(0 0 0 / .316) 45.0%, rgb(0 0 0 / .500) 50.0%, rgb(0 0 0 / .684) 55.0%,
    rgb(0 0 0 / .844) 60.0%, rgb(0 0 0 / .957) 65.0%, rgb(0 0 0 / 1)    70.0%;
}

/* ---------- HORIZON ---------- */
/* Sky masked away, ground kept, both ends eased. */
.hf-horizon .hf-art{
  background-image:var(--bg);
  background-size:cover;
  background-position:center var(--pos);
  opacity:var(--strength);
  -webkit-mask-image:linear-gradient(var(--rise),var(--tail));
  mask-image:linear-gradient(var(--rise),var(--tail))}

/* The reassurance line is the one piece of the composition that can end up on
   the photograph rather than on paper — it is the lowest thing in the hero,
   and the ground is fully opaque by then. Measured there it was 3.97:1 on the
   meadow and 3.45:1 on the valley: real AA failures, not close calls.

   It takes --body rather than a scrim. --muted is a value chosen against a
   99%-luminance sheet; these treatments replace the sheet under that one line
   with sunlit ground at ~58%, so the tint has to follow the ground it is
   actually printed on. A white veil behind the line would have fixed the
   number by putting a soft rectangle in the middle of the landscape.

   Applied to the whole treatment rather than to the two that failed: any
   image put through it puts that line on the ground, so the rule belongs to
   the treatment. On the two that already passed it only widens the margin. */
.hf-horizon .hero-note .sub{color:var(--body)}

/* ---------- CUT-OUT ---------- */
/* Two keyed pieces in the bottom corners, nothing behind the type.
   They bleed off their own side rather than sitting inside the viewport: a
   cut-out with air on all four sides reads as a sticker. */
.hf-cutout .hf-l,
.hf-cutout .hf-r{position:absolute;bottom:0;display:block;
  background-repeat:no-repeat;background-size:contain;
  opacity:var(--strength);
  --cliff:
    rgb(0 0 0 / 1)    55.0%, rgb(0 0 0 / .957) 60.6%, rgb(0 0 0 / .844) 66.3%,
    rgb(0 0 0 / .684) 71.9%, rgb(0 0 0 / .500) 77.5%, rgb(0 0 0 / .316) 83.1%,
    rgb(0 0 0 / .156) 88.8%, rgb(0 0 0 / .043) 94.4%, rgb(0 0 0 / 0)   100.0%;
  -webkit-mask-image:linear-gradient(var(--cliff));
  mask-image:linear-gradient(var(--cliff))}
.hf-cutout .hf-l{left:0;width:clamp(13rem,22vw,26rem);height:38%;
  background-image:url(img/cliff-left.webp);background-position:bottom left;
  transform:translateX(-14%)}
.hf-cutout .hf-r{right:0;width:clamp(15rem,26vw,32rem);height:62%;
  background-image:url(img/cliff-right.webp);background-position:bottom right;
  transform:translateX(16%)}
/* Below 900px the two of them close in on the field and the control group is
   what matters, so they step aside rather than crowd it. */
@media (max-width:900px){ .hf-cutout .hf-l,.hf-cutout .hf-r{display:none} }

/* ---------- the seam ---------- */
.hf-next{padding-block:clamp(3rem,6vw,5rem)}
.hf-next h2{margin:0}
.hf-next-p{margin:.9rem 0 0;color:var(--muted);font-size:.9375rem;
  max-width:calc(40 * var(--ch))}

/* ---------- the study bar ---------- */
/* Fixed rather than in the flow: the hero is sized in svh and its whole point
   is landing on the fold, so a bar in the document would shorten the thing
   being judged. */
.hf-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem clamp(1rem,3vw,2rem);
  background:rgb(10 10 10 / .9);backdrop-filter:blur(12px);
  border-top:1px solid var(--ink-line);
  font-family:var(--mono);font-size:.75rem;color:var(--on-ink-soft)}
.hf-bar a{color:var(--on-ink);text-decoration:none;
  padding:.3rem .55rem;border-radius:var(--pill);
  border:1px solid var(--ink-line);background:rgb(255 255 255 / .06)}
.hf-bar a:hover{background:rgb(255 255 255 / .14);color:#fff}
.hf-bar-now{color:#fff}
.hf-bar-gap{flex:1}
@media (max-width:640px){ .hf-bar-now{display:none} }

/* ---------- the index ---------- */
.hf-index{background:var(--canvas)}
.hf-head{padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem)}
.hf-head h1{font-family:var(--sans-display);font-weight:600;
  font-size:clamp(2.2rem,5vw,3.5rem);letter-spacing:-.03em;line-height:1.05;
  margin:0 0 1rem}
.hf-head .lede{margin-inline:0}
.hf-meta{margin:1.25rem 0 0;color:var(--muted);font-size:.875rem;
  line-height:1.6;max-width:calc(46 * var(--ch))}

.hf-cards{list-style:none;margin:0;padding-block:0 clamp(3rem,7vw,6rem);
  display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){ .hf-cards{grid-template-columns:1fr 1fr} }
.hf-card > a{display:block;text-decoration:none;color:inherit}
.hf-card img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--white);
  transition:border-color .2s}
.hf-card > a:hover img{border-color:var(--ink)}
.hf-card h2{display:flex;align-items:baseline;gap:.6rem;
  font-size:1.25rem;letter-spacing:-.02em;margin:.9rem 0 .5rem}
/* The rank is a number in the text face at text size, not a display numeral:
   these are ranked, but the ranking is a note, not the headline. */
.hf-card h2 span{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.hf-card p{margin:0 0 .5rem;color:var(--body);line-height:1.6;
  max-width:calc(44 * var(--ch))}
.hf-why{color:var(--muted);font-size:.9375rem}
.hf-why b{color:var(--body);font-weight:600}