/* SIX LAYERS (/context) ------------------------------------------------
   Loaded after hc-progression.css and scoped to .page-context. The
   explorer's behaviour is untouched: hc-progression.js works off ids and
   the [data-hcp-stage] / [data-hcp-panel] attributes, so this file only
   moves the pieces around and restyles them.

   Same band system as /about, /method and /method/seed: full-width
   sections, one inner container inset by --page-gutter and no max-width,
   so the wordmark, the H1, every band edge, the footer wordmark and the
   copyright rule share one left and right line at any width. */

.page-context {
  --cx-pad-y: clamp(1.75rem, 2.8vw, 3rem);
  --cx-measure: 44rem;
  --cx-sage: #E8EEE3;
  /* The controls and the two columns are one composed block. It starts
     on the page's own left gutter, with the heading and the footer
     wordmark, and ends where a 66rem block centred in the band used to
     end - so the right edge is exactly where it was and all the width
     it gains comes off the left indent. */
  --cx-explorer: 66rem;
  --cx-right: max(0px, (100% - var(--cx-explorer)) / 2);
  /* The explanation card, about 15% wider than the half column it used
     to take. It is a fixed track at the end of the grid, so it keeps
     the block's right edge at every width while the diagram column
     absorbs whatever is left. */
  --cx-card: min(36.5rem, 55%);
  /* Set per layout band further down, from measurement rather than
     judgement. Zero here, which is what the stacked layout uses: see the
     note above the two-column values. */
  --cx-card-min: 0px;
}

/* BANDS ---------------------------------------------------------------- */

.page-context main { background: var(--paper); }

.cx-sec { padding-block: var(--cx-pad-y); }
.cx-shell { width: 100%; padding-inline: var(--page-gutter); }

.cx-sec--paper { background: var(--paper); }
.cx-sec--sage { background: var(--cx-sage); }
.cx-sec--ink { background: var(--ink-green); }

/* The explorer's own wrapper adds nothing now that the band supplies the
   padding and the ground. */
.page-context .hcp { padding: 0; }

/* TYPE ----------------------------------------------------------------
   H1 and H2 use the homepage's own declarations, so the first heading
   matches the homepage's first and the section headings match its
   section headings. Each sits at (0,2,1) while `.page-context main p`
   is (0,1,2), so the paragraph rule cannot reach them. */

.page-context main .cx-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s3);
  max-width: none;
  line-height: 1.6;
}

.page-context main .cx-h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.008em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
  max-width: none;
}

.page-context main .cx-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
  max-width: 30ch;
}

.page-context main p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--forest);
  max-width: var(--cx-measure);
  margin: 0 0 var(--s3);
}
.page-context main p:last-child { margin-bottom: 0; }

.page-context main .cx-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--olive);
  max-width: 52rem;
}

.page-context main .cx-link {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rust-on-dark);
  /* Transparent at rest and coloured on hover, the same as .link-arrow,
     .crumbs a and .mt-link. It was the only underlined-at-rest link on
     the page. */
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-context main .cx-link:hover { border-bottom-color: var(--rust-on-dark); }
.page-context main .cx-link .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-context main .cx-link:hover .arw { transform: translateX(3px); }

/* THE EXPLORER --------------------------------------------------------
   The question used to sit in a 22fr column beside the diagram, which
   left it two or three words to a line. It now runs full width above the
   controls, and the diagram and the selected layer take a generous half
   of the band each. */

.cx-ask { margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); }
.page-context main .cx-ask p { margin-bottom: var(--s1); }
.page-context main .cx-hint { color: var(--text-2); margin-bottom: 0; }

/* Six visible controls in a row, each one a labelled target rather than
   a rail entry, with the selected layer filled in ink green. */
.page-context .hcp-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.8vw, 0.75rem);
  width: 100%;
  margin-inline: 0;
  padding-right: var(--cx-right);
  /* No gap under the controls: the drawing and the card both start on
     the line the labels end on. */
  margin-bottom: 0;
}
/* About 17% shorter than they were - 111px to 92px at 1440. Most of it
   comes off the padding and the gap rather than the artwork, so the
   marks stay the size that made them readable. min-height holds the
   44px touch target that the base rule sets. */
.page-context .hcp-layer {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.5rem 0.4rem;
  text-align: center;
  border-radius: 8px;
  min-height: 44px;
}
.page-context .hcp-layer-mark {
  width: clamp(2.75rem, 3.8vw, 3.6rem);
  height: clamp(2.75rem, 3.8vw, 3.6rem);
}
.page-context .hcp-layer-name { font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem); line-height: 1.2; }
.page-context .hcp-layer[aria-pressed="true"] {
  background: var(--ink-green);
  color: var(--paper-light);
  box-shadow: none;
}
.page-context .hcp-layer[aria-pressed="true"] .hcp-layer-mark { background: transparent; }
.page-context .hcp-layer[aria-pressed="true"] .hcp-layer-mark img { filter: brightness(0) invert(1); }
.page-context .hcp-layer:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* hc-progression.css places these with grid-area: center / rail / detail
   for its own four-area layout. Those names do not exist here, so they
   would auto-place into implicit tracks and drop the diagram out of the
   two-column grid entirely. Reset them. */
.page-context .hcp-center,
.page-context .hcp-rail,
.page-context .hcp-detail,
.page-context .hcp-intro { grid-area: auto; }

.cx-grid {
  display: grid;
  /* Below 1300 the block gains no width - there was no left indent to
     reclaim there - so the columns stay even and the diagram keeps the
     size it had. The wider card is switched on further down, where the
     extra width it takes is width the left indent gave back. */
  /* Below 1300 the block gains no width - there was no left indent to
     reclaim there - so the columns stay even. Past 1300 the card becomes
     a fixed track and the left column absorbs what is left. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  /* Start, not stretch: the card is no longer padded out to the
     diagram's height. */
  align-items: start;
  width: 100%;
  margin-inline: 0;
  padding-right: var(--cx-right);
}

/* The column starts on the page's gutter and now takes the whole track,
   so the slider under the drawing runs the column's full width - it used
   to stop 189px short of the card at 2000px, because the cap that sizes
   the drawing was sizing the slider with it. */
.page-context .hcp-center {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
/* The cap lives here now, on the drawing alone. Same size it was; it
   centres over the slider rather than sitting on its left end. */
.page-context .hcp-stage { max-width: 34rem; margin-inline: auto; }
/* The progression is drawn centred in a fixed 510x480 viewBox, so every
   stage carries a band of empty canvas above and below the ink - 26px
   over Biosphere and 69px over Person on a 544px canvas. That band
   scales with the canvas, so the pull has to be a percentage of its
   width rather than a fixed number. The fullest stage leaves 4.8%;
   pulling 4% closes the gap to the controls and keeps a few pixels of
   clearance there. Nothing inside the SVG changes. */
.page-context .hcp-svg {
  margin-top: -4%;
  /* The pull lifts the canvas box over the bottom edge of the control
     row and the slider's box rises into it from below. Nothing in the
     progression listens for pointer events - the buttons and the range
     input carry the whole interaction - so the canvas is taken out of
     hit-testing and cannot swallow a click meant for either. */
  pointer-events: none;
}
/* The slider is the illustration's own control, not a separate band. The
   band under the ink is the same size as the one above it, so the pull
   is the same shape. */
.page-context .hcp-scrub { margin-top: -2.2%; }
/* Endpoint labels for the slider. The range input already carries its
   own aria-label and aria-valuetext, so these are decorative. */
.cx-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* The selected layer reads as a panel rather than a hairline-ruled
   column, which is what made it feel like an afterthought. */
.page-context .hcp-detail {
  border-left: 0;
  padding: clamp(1.25rem, 2vw, 1.625rem);
  max-width: none;
  background: var(--paper-light);
  border: 1px solid var(--border);
  /* Plain flow: label, the one visible layer, then the link directly
     under its list. The card sizes to what is actually on it.

     The six panels used to be stacked in one grid row with the hidden
     ones held open by visibility, so the row was always as tall as the
     longest layer and every layer paid for Institutions. That bought a
     fixed card height at the cost of 130px of empty cream on most
     layers, and the card was stretched to the diagram's height on top
     of that. --cx-card-min does the same job for a fraction of the
     space: it is the tallest of the six panels, measured, so no switch
     can shrink the card, and only the shortest layers leave any slack
     at all. */
  align-self: start;
  min-height: var(--cx-card-min);
}
/* The controls sit directly on the drawing, but the card wants a little
   air under them so its top edge is not welded to the button row. This
   is on the card alone: the drawing, the slider and the controls do not
   move, and below 861px the card is already well clear of the controls
   in the stacked order, so it is scoped to the two-column layout. */
@media (min-width: 861px) {
  .page-context .hcp-detail { margin-top: clamp(1.25rem, 1.8vw, 1.75rem); }
}
/* Hidden panels leave the layout entirely - this is the UA's own
   [hidden] { display: none } doing the work, so there is nothing here
   to override it. */
.page-context .hcp-detail > .hcp-cta { margin-top: var(--s3); }
.page-context main .cx-card-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s2);
  max-width: none;
}
.page-context .hcp-panel h3 {
  text-transform: none;
  letter-spacing: -0.004em;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  color: var(--ink-green);
  margin: 0 0 var(--s2);
}
.page-context .hcp-q { font-size: 1.0625rem; line-height: 1.55; color: var(--forest); }
.page-context .hcp-includes { font-size: 1rem; color: var(--text-2); }
.page-context .hcp-list { font-size: 1rem; line-height: 1.6; }
.page-context .hcp-cta { font-size: 1rem; }

/* CLOSING BAND --------------------------------------------------------
   The invitation shares the ink ground the About and SEED pages use for
   their closing statements. Every piece of text on it is warm off-white,
   the eyebrow included, since the inherited rust measures 2.1:1 there. */

.cx-close { color: var(--paper-on-dark); }
.page-context main .cx-close .cx-eyebrow { color: var(--paper-on-dark); }
.page-context main .cx-close .cx-h2 { color: var(--paper-light); max-width: none; }
.page-context main .cx-close p { color: var(--paper-on-dark); max-width: 52rem; }

/* RESPONSIVE ----------------------------------------------------------- */

/* CARD MIN-HEIGHT ------------------------------------------------------
   The six panels differ by list length and by how their question wraps,
   so the card's natural height moves as the card gets narrower. Measured
   across the six layers at each width, the spread is 27px from 1000px
   up, and 76-78px between 861 and 999 where the two columns first split
   and the card is only 343-379px wide.

   Each value below is the tallest of the six at that band, so no switch
   can shrink the card and only the shortest layer leaves any slack.

   Stacked layouts deliberately get none. There the card is the full
   width of the band - 641px at 768 - and its spread is 26px; pinning it
   to the tallest layer would put back exactly the empty cream this
   change is removing, and a height change in a single scrolling column
   reads as reflow rather than a jump.

   Re-measured after the column split was reverted: the card's width
   comes from a different track now, so the old values no longer matched
   the content. Past 1301 the card sits on the fixed 36.5rem track, wide
   enough that all six questions wrap to two lines and all six lists run
   one item per line - the natural spread there is 0, so the value is the
   measured height itself and exists only to stop a future shorter layer
   shrinking the card. */
@media (min-width: 861px)  { .page-context { --cx-card-min: 525px; } }
@media (min-width: 1000px) { .page-context { --cx-card-min: 465px; } }
@media (min-width: 1301px) { .page-context { --cx-card-min: 445px; } }

/* Past 1300 the block starts reclaiming the old left indent, so the card
   becomes a fixed track anchored to the block's right edge and the left
   column absorbs everything else.

   A 59/41 fractional split was tried here and reverted. The progression
   SVG has a fixed 510x480 viewBox and the drawing inside it only fills
   that box at the last stage, so widening the column does not enlarge
   the artwork at Person or Relationships - it enlarges the empty canvas
   around it, and takes the full-width slider with it. The cap below is
   what actually governs the drawing's size, and the column is free to be
   wider than it. */
@media (min-width: 1301px) {
  .cx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--cx-card)); }
}

@media (max-width: 960px) {
  .page-context main .cx-h1 { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
}

@media (max-width: 860px) {
  /* Controls first, then the compact diagram, then the explanation. */
  .cx-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .page-context .hcp-rail,
  .cx-grid { padding-right: 0; }
  .page-context .hcp-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Stacked, so the column cap goes and the diagram takes its own. */
  .page-context .hcp-center { max-width: none; }
  .page-context .hcp-stage { max-width: 20rem; margin-inline: auto; }

  .page-context main p { font-size: 1rem; }
  .page-context main .cx-lead { font-size: 1.0625rem; max-width: none; }
  .page-context main .cx-h2 { max-width: none; }
}

@media (max-width: 620px) {
  .page-context main .cx-h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .page-context .hcp-layer { padding: 0.45rem 0.35rem 0.4rem; }
  .page-context .hcp-layer-mark { width: 2.5rem; height: 2.5rem; }
  .page-context .hcp-stage { max-width: 17rem; }
}