/* ===== Stacked, rounded sections =========================================
   The homepage reads as a deck of cards: each section has a big rounded top,
   is pulled up over the one before it, and drops a soft shadow onto it, so
   scrolling feels like sliding one sheet of paper off another. Every OTHER
   page was flat — 31 pages of square blocks butted edge to edge.

   This gives them the homepage's treatment. It is written here, against the
   structure, rather than as inline styles on 300-odd sections in
   design-source/, for three reasons: it is one rule instead of 300 hand
   edits, `src/legacy/body.html` and `public/legacy/design.css` are both
   GENERATED and would lose it on the next `npm run convert:design`, and a
   page added later picks the treatment up for free.

   The numbers are the homepage's own, read off #home-reviews and its
   neighbours: 72px radius, -72px overlap, and
   `0 -30px 60px rgba(34,48,30,.13)` for the shadow.

   WHAT IS DELIBERATELY LEFT ALONE
     - The homepage. It already carries all of this inline, and half its
       sections use a hand-drawn wave (clip-path) instead of a radius; a
       border-radius on those would fight the clip.
     - The first section on every page — the hero. There is nothing above it
       to overlap, and it sits under the fixed header.
     - THREE PAGES WHOSE SECTIONS ARE CARDS, NOT BANDS: /handbook, /privacy
       and /families/faq. This treatment says "a full-width sheet is lying on
       the sheet above it", and that only means anything when the section
       actually spans the page. Measured at 1440px, every non-first section on
       those three is inset — 1220px, 760px, 880px, 707px — so they are cards
       on a ground, and the band treatment gave them a 72px top curve with a
       square bottom edge and a shadow cast onto their own background: it read
       as a rendering fault rather than a design. On each of the three, EVERY
       non-first section is inset, so the page opts out as a whole rather than
       section by section.

       Two of those sections also carry the pack's own inline `border-radius`
       and `margin:0 -6vw`. An inline style beats a stylesheet, so they were
       already half-opting-out on their own — the radius held at 32px/36px
       while the shadow and the overlap still applied, which is how a card
       ends up rounded at one corner radius and overlapped like a band. The
       page-level exclusion settles it properly instead of fighting inline
       styles with !important.

     - The BOTTOM of the last section on every page. That block — the
       `-cta`/`-close` one on all 31 pages — now takes the rounded top and the
       raised edge like every other section, but nothing here touches its
       lower edge, so the footer keeps its scalloped clip-path and the -96px
       bite it takes out of that section. Everything below is the footer's.

   Ordering is left to the DOM. Every rounded section is `position:relative`
   with `z-index:auto`, and positioned siblings paint in tree order, so each
   one already lands on top of the one before it. The homepage numbers its
   sections 1..16 by hand; that is not needed here, and a fixed ladder would
   be wrong the moment a section is added or removed. */

/* THE RAISED EDGE.
   Four shadow layers and two hairlines, all offset UPWARD only. That
   direction is the whole safety argument for the last section: a radius of
   `72px 72px 0 0`, a negative `margin-top` and a shadow with a negative
   y-offset all act on the TOP of the box and cannot paint below it, so the
   footer keeps its own scalloped clip-path and its -96px bite untouched.

   Why four layers and not one bigger blur: a single wide blur reads as fog
   under the edge, not as a sheet lying on another sheet. Depth comes from a
   tight contact shadow at the seam plus a broad ambient one — the near layer
   says "these two surfaces touch here", the far one says "there is air
   between them".

   Why the hairlines are shadows and not a border or an outline: both of those
   ring all FOUR sides, including the bottom edge that the footer's wave cuts
   across, where a stray line would be visible against the scallop; a border
   also changes the box's size and would shift every section by 2px.
   `0 -1px 0` paints a 1px sliver along the top edge only and follows the
   border-radius exactly, and the inset pair does the same on the inside.

   Two hairlines because the sections are five different grounds. The dark
   line carries the edge on cream, sand and yellow; the light inset lip
   carries it on the dark green and sage ones, where a dark line would
   disappear. On any given section one of the two is doing the work. */
/* ONE FLUID MEASURE, used by the curve, the overlap and the spacer so the
   three can never drift apart.

   72px is the homepage's number and it is right on a laptop, where it is 5%
   of the width. On a 390px phone the same 72px is 18% of the screen — a curve
   so wide the two corners nearly meet, on sections that are themselves much
   shorter, so the overlap eats a far bigger share of each one. `clamp` keeps
   the desktop rendering identical to the homepage's (5vw hits exactly 72px at
   1440px) and eases it down to 40px on a phone. */
main.page:not(#page-home):not(#page-handbook):not(#page-privacy):not(#page-families-faq){
  --wps-lift:clamp(40px, 5vw, 72px);
}

main.page:not(#page-home):not(#page-handbook):not(#page-privacy):not(#page-families-faq) > section:not(:first-of-type){
  position:relative;
  border-radius:var(--wps-lift) var(--wps-lift) 0 0;
  margin-top:calc(-1 * var(--wps-lift));
  box-shadow:
    0 -1px 0 rgba(34,48,30,.17),
    0 -5px 10px rgba(34,48,30,.085),
    0 -14px 24px rgba(34,48,30,.075),
    0 -34px 52px rgba(34,48,30,.06),
    inset 0 1px 0 rgba(250,246,236,.28);
  overflow:hidden;
}

/* The homepage carries its own radius and a single flat shadow inline, so it
   would have ended up the only page in the site without the raised edge. Its
   rounded sections get the same treatment; the ones that use the hand-drawn
   wave instead are `clip-path`ped, and a clip-path clips an element's
   box-shadow away with everything else, so they are left exactly as they
   were rather than given a shadow that cannot render. */
#page-home > section[style*="border-radius:72px 72px 0 0"]{
  box-shadow:
    0 -1px 0 rgba(34,48,30,.17),
    0 -5px 10px rgba(34,48,30,.085),
    0 -14px 24px rgba(34,48,30,.075),
    0 -34px 52px rgba(34,48,30,.06),
    inset 0 1px 0 rgba(250,246,236,.28) !important;
}

/* THE SPACE THE OVERLAP EATS.
   A section pulled up by 72px covers the bottom 72px of the section above it.
   The homepage pays for that in the pack, where the covered sections carry
   `padding-bottom:calc(10vh + 100px)`; nothing else on the site does. Measured
   across all 31 pages, 136 sections end up covered and 18 of them have less
   than 72px of bottom padding — as little as 22px on the calendar hero — so
   without this the overlap would sit on their last line of type.

   The room is added as a spacer inside the covered section rather than as
   padding, because CSS cannot add to a value it cannot read: these paddings
   are inline on each section and every one is different.

   `flex-basis` and `grid-column` are here because twelve of the covered
   sections are heroes laid out as flex or grid, where a bare ::after would
   become a column beside the content instead of a strip beneath it.

   The selector is "every section except the last", because the last section
   is rounded too and so covers the one above it like any other. It was "every
   section except the last two" while the last section was left square. */
main.page:not(#page-home):not(#page-handbook):not(#page-privacy):not(#page-families-faq) > section:not(:last-of-type)::after{
  content:"";
  display:block;
  width:100%;
  height:var(--wps-lift, 72px);
  flex:0 0 100%;
  grid-column:1 / -1;
  pointer-events:none;
}

/* `overflow:hidden` on an ancestor stops `position:sticky` working in every
   descendant — the same class of bug as the mobile drawer, where the header's
   backdrop-filter captured a fixed child. These two sections each hold a
   sticky element (the calendar's year bar, the code of ethics' document rail),
   so they keep their rounded top and their shadow but not the clip. Nothing
   inside either one is painted outside its own box, so there is nothing for
   the clip to catch. */
main.page > section#calendar-year,
main.page > section#ethics-document{
  overflow:visible;
}

/* The homepage carries `border-radius:72px 72px 0 0` inline on each of its
   rounded sections, so it cannot take the fluid measure above without an
   override. Only the small-screen end is touched — at laptop width the
   homepage is already exactly what every other page now computes to, and this
   rule does not apply there at all. */
@media (max-width:900px){
  #page-home > section[style*="border-radius:72px 72px 0 0"]{
    border-radius:clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px) 0 0 !important;
  }
}