/* ==========================================================================
   THE HOMEPAGE HEADER BAND — the history, and what is left of it here

   Loaded by templates/home.mjs only, so everything in here must be genuinely
   homepage-only. Almost nothing now is. The edge-wave rules that used to live
   here moved to waves.css, the hero confetti rule and .brushband moved to
   brand.css, and the markup that draws the band moved to heroedge.mjs — all
   three because they turned out to belong to every page rather than this one.

   The write-up below stays, because it is the reasoning behind what those
   files now do, and this is where it was worked out.

   Amy, September 21, 2026: "this header looks terrible still."

   Three separate mistakes, all visible at the bottom edge of the hero.

   1. IT WAS GENUINELY LOWER RESOLUTION THAN HIS.

      Amy: "why does it look lo-res on our version?" Because it was, and it is
      worth being exact about why, since nothing about it was obvious.

      Both sites use the same file. The copy in the bucket is 1920x663, and
      jumpgymnastics.com serves that file at its native size into a hero that
      renders 1989px wide — a 1.04x upscale, which nobody can see.

      jump.css asked the Netlify Image CDN for w=1400 and then stretched THAT
      across the same 1989px hero. A 1.42x upscale of an already-downscaled
      file, at JPEG q=75, on artwork made of crisp cartoon outlines, which is
      the worst case for JPEG ringing. Roughly 30% of the detail that was
      sitting in the bucket never reached the page.

      1920 is the ceiling: it is the whole file. On a display wider than that
      it will soften slightly, exactly as his does. A larger original would
      lift both.

   2. dots-02.jpg was being used as a texture. It is not one. 75% of the file
      is blank white — the artwork is a single row of confetti and frogs along
      the BOTTOM edge. It is a border graphic, drawn to sit at the bottom of a
      section.

      jump.css stretched it over the whole 674px hero with background-size
      cover, pinned to the TOP, at opacity .45 under a multiply blend. So the
      confetti landed somewhere in the middle of the header, and the .45
      washed the pinks and limes out into a grey-brown smudge on the cream.
      What Randy's own site does: same file, full opacity, no dimming, sitting
      where it was drawn to sit.

      Kept multiply rather than copying his normal blend, because his hero is
      white and ours is cream: multiply drops the file's white field out and
      leaves the cream showing, where normal would paint the whole header
      white. At opacity 1 over #FFF8EE the confetti colors are untouched.

   3. The sky brush was a stripe, not a band. One brush stroke, solid along
      its top edge — so the header went cream, HARD LINE, sky, brushed edge,
      a sliver of cream, HARD LINE, white. Two ruler-straight edges on a
      brush-stroke graphic.

      jumpgymnastics.com uses the brush TWICE, facing each other, with a solid
      sky strip between them (measured September 21: a flipped brush on the
      hero's bottom edge, a 30px sky section, then an upright brush at the top
      of what follows). That is what .brushband is for. The band is then
      brushed on both edges and has no straight line anywhere.

   RESOLVED, September 23: the note that used to sit here said the location,
   program and prose pages still had the old muted, downscaled confetti, plus
   a hard straight edge where the cream met the section below, and that Amy
   had not yet said whether the treatment should follow them. She has — "I
   feel like this treatment should also be on every page? it also looks weird
   and lowres on the other pages" — so all three of the above are now fixed
   for the whole site, from brand.css and heroedge.mjs, and this file no
   longer defines any of it.
   ========================================================================== */


/* ==========================================================================
   The Adventure Path photograph, homepage only.

   Amy: "he wants an image here." Randy commented on this section asking for
   one, and the right column did stop dead after the levels note, leaving a
   large empty field of navy under it.

   Cropped to 4:3 rather than run at the file's native 4:5. At full column
   width a portrait photograph is about 675px tall here, which would tower
   over the column beside it. The focus is set in the CMS, not here, so the
   framing survives a photo swap.

   THE TILT. Amy: "can we add a little tilt to this image to the right to make
   it more playful? similar to the headers but opposite direction."

   Worth noting for whoever reads this next: nothing on either site is
   actually tilted — the hero shots here and on jumpgymnastics.com both
   measure 0 degrees, so there was no existing angle to mirror. 3 degrees
   clockwise was chosen by eye against 2 and 4: enough to read as deliberate,
   small enough that it does not look like a broken layout.

   It uses the independent "rotate" property, NOT transform. The reveal
   animation owns transform on this element, and jump.css carries a failsafe
   that sets transform:none !important on every [data-anim] after four
   seconds — a rotate written into transform would be wiped by it. The two
   properties compose, so the photograph can rise into place and stay tilted.
   ========================================================================== */

.adventure__photo{
  margin:1.75rem 0 0;
  border-radius:var(--card-radius);
  overflow:hidden;
  line-height:0;
  aspect-ratio:4/3;
  rotate:3deg;
}
.adventure__photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Straighten up on a phone. The column is nearly full-bleed there, so a
   tilted photograph either overhangs the gutter or has to be scaled down to
   avoid it, and neither is worth the charm. */
@media (max-width:760px){
  .adventure__photo{rotate:none}
}