/* PER-SECTION BACKGROUNDS. Brand compliance Round 2, items 2 to 7.

   WHAT THIS CHANGES ABOUT THE PAGE, stated up front because it is a change of
   model and not a set of colour tweaks.

   Until now no section on this page had a background at all. Every one was
   transparent over a single `linear-gradient` on `body` (see tokens.css):
   Sandstone at the top through Early Morning Sunlight to a warm cream at the
   foot. That is the Atlas's atmospheric-layers device, and atlas-ground.test.ts
   asserts it is PAGE-WIDE, with the note that half a page device is worse than
   none.

   Round 2 assigned a distinct ground to six named sections, and Round 3 A1 and
   A3 settled the two questions that held four of them back.

   THE CONTRAST STANDARD FOR THESE SECTIONS IS AA, NOT AAA, and that is a
   documented client decision rather than a slip. This project's own floor is
   7.0, because the audience is 65+; Round 3 A1 accepts 4.5 for these grounds in
   writing. Every figure below is recorded so the cost is visible rather than
   implied:

     Independent Living  Early Morning Sunlight  #FDF6EA   8.70   clears 7.0
     A Day in the Life   Pale Marigold           #F6DFA6   7.13   clears 7.0
     Community           Soft Ochre              #E8BF7A   5.41   AA
     Taking Shape        Warm Coral              #F4A78A   4.78   AA
     FAQ                 Sea Glass               #B7C7C6   5.34   AA
     Keep Exploring      Subtle Orange           #E67E4F   3.32   FAILS AA

   The last one is why the ink changes for that section only: see item 5 below.
   Round 4 item 2 then moved Keep Exploring onto Warm Coral and kept the orange
   only as a divider at its foot: see #invitation below.
   Every figure was recomputed independently and agreed with Round 3's table to
   the second decimal.

   WHY A GLOBAL FILE AND NOT THE COMPONENTS. Astro scopes a component <style>
   to a build-time attribute, and the same scoping already made a streamed
   assistant reply invisible once (HZN-132). More directly: these sections are
   full-bleed bands whose ground has to reach the viewport edge and butt against
   the section above and below, which is a page-level relationship rather than
   anything one component owns. Keeping all six in one file also means the next
   four land as four declarations rather than four component edits.

   THE COLOURS ARE TOKENS, NOT HEX. Every value below already existed in
   tokens.css under the name the Brand Atlas gives it; nothing new is
   introduced, and a token sweep can still see them. */

/*
 * THE SEAMS. Lisa, 10 September: "smooth the transitions between sections so
 * there are no random horizontal bands."
 *
 * Six discrete grounds butted against each other give six hard horizontal
 * edges, and against a page whose whole device is an atmospheric wash they read
 * as banding rather than as sections. Each ground now opens with a gradient
 * from the colour ABOVE it, fading to its own over the first 160px, so the
 * change happens across a band the eye reads as a transition.
 *
 * A BACKGROUND IMAGE, NOT A PSEUDO-ELEMENT, and the reason is load-bearing. A
 * `::before` would need `position: absolute` inside a `position: relative`
 * section, and #journey contains a pinned scroll stage: establishing a new
 * containing block on that section is exactly the class of change that cost
 * this project a day when a stale `will-change` did it by accident. A
 * background layer changes no geometry at all.
 *
 * `--horizon-ground-prev` is the colour above each section, declared per
 * section below. Where it is unset the gradient starts transparent and the seam
 * is simply the flat ground, which is the safe default.
 */
#understanding,
#journey,
#community,
#building,
#invitation,
#faq {
  background-image: linear-gradient(
    to bottom,
    var(--horizon-ground-prev, transparent) 0,
    transparent var(--horizon-ground-fade, 160px)
  );
  /* The ground reaches the full width of the viewport, so the colour reads as a
     band rather than as a card floating on the wash. */
  background-color: var(--horizon-ground, transparent);

  /* Space so the colour is a section and not a stripe behind the text. The page
     gradient needed none of this: it changed so gradually that the eye never
     read an edge. A discrete ground does. */
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Item 2. Early Morning Sunlight, the Atlas's secondary background. 8.70. */
#understanding {
  /* Above it: the hero, whose wash ends on Sandstone. */
  --horizon-ground-prev: var(--horizon-sandstone);
  --horizon-ground: var(--horizon-sunlight);
}

/* Item 3. Pale Marigold, Accent 1. 7.13. The section's content and interaction
   are untouched: Round 2 says so in terms. */
#journey {
  /* Above it: Independent Living. */
  --horizon-ground-prev: var(--horizon-sunlight);
  --horizon-ground: var(--horizon-marigold);
}

/* Item 4. Soft Ochre, Accent 2. 5.41. */
#community {
  /* Above it: A Day in the Life. */
  --horizon-ground-prev: var(--horizon-marigold);
  --horizon-ground: var(--horizon-ochre);
}

/* OCHRE ALL THE WAY DOWN, Round 6 item 7 (Jose, 6 October 2026): "The
   salmon-pink band below the rendering should not be there. Please continue the
   same ochre used in the section above the rendering straight down through
   'Keep Exploring.'" This was Warm Coral, Accent 3. */
#building {
  /* Above it: Community, on the same ground, so the seam is invisible. */
  --horizon-ground-prev: var(--horizon-ochre);
  --horizon-ground: var(--horizon-ochre);
}

/* Item 7. Sea Glass, the coastal neutral. 5.34. Round 2 notes this reads
   differently from earlier conversation and confirms Sea Glass is the call. */
#faq {
  /* Above it: Keep Exploring, which since Round 4 item 2 hands over on Subtle
     Orange (see #invitation below). The fade is shorter than the 160px every
     other seam uses because the orange is now a divider, not a ground: Jose
     asked for it to fade "quickly into the colour that follows". */
  --horizon-ground-prev: var(--horizon-highlight);
  --horizon-ground: var(--horizon-sea-glass);
  --horizon-ground-fade: 6rem;
}

/* "FEEL FREE TO ASK." ON THE BLUE, Round 6 item 9 (Jose, 6 October 2026): "move
   it down a little (a few pixels is enough) so it sits fully on the blue, with
   a bit more space above it". The fade above is 6rem; the heading now starts
   1rem below where it ends. */
#faq {
  padding-block-start: calc(var(--horizon-ground-fade) + 1rem);
}

/*
 * ITEM 5, AND IT IS THE ONE THAT NEEDED A SECOND DECISION.
 *
 * Subtle Orange is the Atlas's Call-to-Action accent and Round 3 A3 confirms
 * that using accent colours as full section grounds is intentional here, past
 * the Atlas's general "use sparingly, as marks" guidance, in service of the
 * brand's own identity. So the ground is as specified.
 *
 * THE INK IS NOT. Deep Horizon on Subtle Orange measures 3.32: it fails AAA,
 * fails AA at body size, and fails the 4.5 large-text bar too, clearing only
 * the 3.0 threshold for non-text boundaries. This section is nearly all text.
 *
 * Round 3 A2 answers it by going DARKER rather than lighter, having checked
 * that lightening moves the wrong way on a mid-luminance ground: Sunlight on it
 * is 2.62 and white 2.81. ALBIS navy measures 5.01 and passes AA.
 *
 * SCOPED WITH `color: inherit` RATHER THAN A LIST OF SELECTORS. Every element
 * in the section that does not set its own colour takes the navy from here. A
 * list would have to be kept in step with the markup and would miss the next
 * element added, which is exactly how a section ends up half-legible.
 */
/*
 * ROUND 4, ITEM 2 (Jose, 2 October 2026): SUBTLE ORANGE IS NOW A DIVIDER, NOT A
 * GROUND. As a full panel it put the section's last line, "Would you like to be
 * part of the conversation...", at 5.01 on the orange, the lowest figure on the
 * page, right where the eye leaves the section. Jose's direction: carry the
 * ground of the band above ("Life at The Horizon Begins Summer 2027", #building)
 * down through this section, and let the orange appear only as a quick fade at
 * the seam into the FAQ.
 *
 * So the ground is #building's Warm Coral, and the orange is a second
 * background layer confined to the section's bottom padding (the same clamp as
 * `padding-block` above), so no line of text ever sits on it. The FAQ's own
 * opening fade then takes it on to Sea Glass. The ALBIS navy ink stays: it was
 * chosen for the orange and on Warm Coral it measures 8.97, which clears even
 * the 7.0 floor.
 */
#invitation {
  /* Above it: The Horizon, on the same ground, so the top seam is invisible.
     Soft Ochre since Round 6 item 7 (was Warm Coral). ALBIS navy on it is
     8.17, still clear of the 7.0 floor. The Subtle Orange fade at the bottom
     stays: Lisa likes that accent. */
  --horizon-ground-prev: var(--horizon-ochre);
  --horizon-ground: var(--horizon-ochre);
  background-image: linear-gradient(
    to top,
    var(--horizon-highlight) 0,
    transparent clamp(2.5rem, 5vw, 4rem)
  );
  color: var(--horizon-albis-navy);
}

/*
 * ANYTHING INSIDE THAT PINS DEEP HORIZON HAS TO BE PULLED OVER TOO, or it keeps
 * the 3.32 while everything around it moves to 5.01. These are the elements the
 * invitation band sets a colour on directly.
 */
#invitation .band__heading,
#invitation .band__eyebrow,
#invitation .band__standfirst,
#invitation .pathway__label,
#invitation .pathway__body,
#invitation .closing {
  color: var(--horizon-albis-navy);
}

/*
 * THE FAQ OPENS ON KEEP EXPLORING'S ORANGE, SO ITS FIRST LINES TAKE A2's INK.
 *
 * #77's transitions start each ground with a 160px fade from the colour above.
 * Above the FAQ is Subtle Orange, and "Feel Free to Ask." and its intro sit in
 * that fade: Deep Horizon measured 3.69 to 4.25 there on the live page, under
 * even the AA floor Round 3 ruled for this ground. It is the situation Round 3
 * A2 already decided for Keep Exploring itself (Deep Horizon on Subtle Orange
 * 3.32; ALBIS navy 5.01), so it gets the same answer. The fade's darkest point
 * is the orange, so 5.01 holds across it, and Sea Glass below is lighter still.
 */
#faq .faq__heading,
#faq .faq__intro {
  color: var(--horizon-albis-navy);
}

/* THE SEAM. The rule this project draws above a section is the brand's horizon
   line, drawn by EditorialBand as `.band__rule`. Where a coloured ground begins
   under one, the rule would sit on the previous section's colour, so it is
   pulled onto the new ground with it. */
#understanding > .band__rule:first-child,
#journey > .band__rule:first-child,
#community > .band__rule:first-child,
#building > .band__rule:first-child,
#invitation > .band__rule:first-child,
#faq > .band__rule:first-child {
  margin-block-start: 0;
}