/* ==========================================================================
   Edge waves — .section--waves — and the coloured band they wrap.

   Loaded by templates/home.mjs, templates/page.mjs and templates/prose.mjs.
   It is its own file because it is shared: band.css, where these rules
   started, also carries the homepage header treatment, and those hero rules
   must not reach the program pages. Splitting is cheaper than scoping.

   Amy: "can we emulate this shape and design better? something here is
   breaking." Then, on the first attempt: "this looks like the top and bottom
   are in the wrong spot — try to get closer to what's on the current site."

   She was right, and precisely right. Both dividers were VERTICALLY INVERTED.

   How that was settled, because eyeballing a wave is how you get this wrong
   twice: both shapes — his and ours — were rasterised into a canvas at their
   real rendered size, and the filled span was sampled down eleven columns.
   That gives a fill profile you can compare as numbers instead of as a
   feeling. His top edge reads 0-29, 0-57, 0-58 ... — solid from the TOP of
   the box down to a wavy lower edge. Ours read 70-99, 43-99, 42-99 ... —
   solid from the BOTTOM up. Mirror images.

   With the flips swapped, ours matches his digit for digit on both edges.
   The raw "wave" shape is solid along its TOP edge, so:

     - the divider on a section's TOP edge is UNFLIPPED (the colour above sits
       at the top of the box, with the wave falling away beneath it)
     - the divider on a section's BOTTOM edge is ROTATED 180 degrees

   Note "rotated", not "flipped vertically". Elementor uses
   matrix(-1, 0, 0, -1), which mirrors horizontally as well, and that second
   mirror is what puts the crest of the curve where his is rather than at the
   opposite end of the band.

   The rest, also measured off his live band on September 21, 2026:

     - the divider is a child OF the coloured section, absolutely positioned
       on its edge at top:-1px / bottom:-1px, so there is no seam to get wrong
     - it is TALL: 120px on the top edge, 205px on the bottom, against the
       52px this build started with
     - the SVG is drawn WIDER than the section and centred, with the overflow
       clipped — 150% on the top edge, 107% on the bottom. The two are not the
       same number, and using 150% for both is what made the bottom curve read
       as a stripe with a bulge in it rather than one long sweep.
     - one divider per boundary, never two.

   A DIVIDER IS FILLED IN THE COLOUR OF ITS NEIGHBOUR, not of the band. It is
   the neighbouring section reaching into this one. Get that backwards and the
   wave reads as a stripe of the wrong colour sitting on the edge. Each band
   therefore declares both fills, because a band between a cream hero and a
   grey section has two different neighbours.
   ========================================================================== */

.section--waves{
  /* Declared once, here, because the section's padding and the SVG's height
     have to agree: the dividers are out of flow, so the section has to
     reserve the space itself or the content sits under them. Both clamps hit
     his measured heights at a 1989px viewport. */
  --wave-t:clamp(56px,7.5vw,120px);
  --wave-b:clamp(92px,10.3vw,205px);

  position:relative;
  padding-top:calc(var(--section) + var(--wave-t));
  padding-bottom:calc(var(--section) + var(--wave-b));
}

/* jump.css zeroes the bottom padding of any section that ends in a divider,
   and gives that divider a top margin. Both are right for an in-flow divider
   and wrong for one that is absolutely positioned, so they are turned back
   off here — by specificity rather than by editing the general rule, which
   every other section on the site still depends on. */
.section.section--waves:has(> .divide:last-child){
  padding-bottom:calc(var(--section) + var(--wave-b));
}
.section.section--waves > .divide:last-child{margin-top:0}

.section--waves > .divide{
  position:absolute;
  left:0;right:0;
  z-index:2;
  margin:0;
  pointer-events:none;
  /* Clips the oversized SVG. This is the half of the trick that matters —
     without it the extra width would push a horizontal scrollbar onto the
     page instead of stretching the curve. */
  overflow:hidden;
}

/* -1px, not 0. Two adjacent fills that meet exactly on a pixel boundary show
   a hairline of whatever is behind them on fractional device pixel ratios. */
.section--waves > .divide:first-child{top:-1px}
.section--waves > .divide:last-child{bottom:-1px}

.section--waves > .divide svg{
  /* The global `img,svg,video{max-width:100%}` reset silently clamps these
     widths back to 100% otherwise, and the waves quietly stop being wide. */
  max-width:none;
}

.section--waves > .divide:first-child svg{
  height:var(--wave-t);
  width:150%;margin-left:-25%;
  transform:none;
}

.section--waves > .divide:last-child svg{
  height:var(--wave-b);
  width:107%;margin-left:-3.5%;
  /* Rotated, not mirrored vertically — see the note above. */
  transform:scale(-1,-1);
}


/* ==========================================================================
   The band, in a colour other than lime — .section--band

   Amy, September 23, 2026: "I want the green colorful treatment behind these
   sections of each page (but diff colors: pink, teal, orange)."

   The "green colorful treatment" is four things at once, only one of which is
   the colour: the lime fill, a near-black text palette that overrides the
   site's soft grey body colour, the gymnastics pattern tiled over the top at
   5% opacity, and the wave edges above. Three of those four should not change
   when the colour does, and all three are already attached to .section--lime
   in jump.css.

   So a coloured band keeps .section--lime and adds .section--band, and this
   one rule repaints it. Specificity does the work: .section--lime.section--band
   is (0,2,0) against .section--lime at (0,1,0), so the fill is replaced and
   the pattern, the text colours and the isolation stack are inherited
   untouched. Nothing in jump.css had to be edited to add three colours, and
   nothing else on the site can be affected by this file.

   Yes, the class list then reads "section--lime section--band" on a pink
   section, which looks wrong until you know that section--lime here means the
   BAND TREATMENT and --band means its colour. Renaming it properly means
   touching six rules in jump.css that every existing band depends on; that is
   a tidy-up for a quiet week, not for launch month.

   --band is set inline by the template from a map in page.mjs, so it is
   always one of the brand tokens and never a loose hex.

   CONTRAST IS THE REASON FOR THE SECOND RULE BELOW, and it is not a detail.
   The lime rules set headings to --black and body copy to --ink (#5E6365).
   Lime is a pale colour, so --ink clears the 4.5:1 floor on it at 5.1:1.
   These three are not pale. Computed against each fill, --ink gives 3.3:1 on
   orange (#F47920), 3.2:1 on teal (#00AAB0) and 2.7:1 on pink (#F9428C) —
   all three fail, and pink fails badly.

   So body copy on a recoloured band is promoted from --ink to --black, which
   measures 7.0:1 on orange, 6.9:1 on teal and 5.8:1 on pink. Headings were
   already --black and already passing. White was tested and is worse on all
   three: it never gets above 2.9:1.

   Lime keeps --ink, because lime passes and because every existing band on
   the site is lime and should not shift under us.
   ========================================================================== */
.section--lime.section--band{background:var(--band,var(--lime))}

.section--lime.section--band .lede,
.section--lime.section--band p{color:var(--black)}

/* The homepage Adventure Path only has a BOTTOM wave (BugHerd #181) - the
   lime band above already reaches into its top - so it keeps its normal top
   padding. */
.section--waves.adventure{padding-top:var(--section)}