/* HUMAN CONTEXT - CONTEXT LAYER PAGE -----------------------------------
   The reading layout for a single layer under /context/<layer>. Scoped
   entirely to .page-layer and loaded after the shared sheets, so it can
   only affect a page that opts in.

   Built for /context/person first. Nothing here is Person-specific: the
   other five layers can adopt it by changing their markup alone. */

.page-layer {
  /* 70/30. The rail holds six rows of two lines plus a next-layer card,
     which needs about 300px to avoid every gloss wrapping to four lines;
     below 20rem it is cramped, so it is a minmax track rather than a
     flat percentage and the main column absorbs the remainder. */
  /* 32 rather than 30: the marks are larger now and the names are set
     in the display face, so the glosses beside them need the width. */
  --lx-rail: 32%;
  --lx-rail-min: 19rem;
  /* Spent twice - once as the grid's column gap, before the rule, and
     once as the rail's padding, after it - so the rule sits centred in
     twice this. At the old 3.75rem that was 120px of gutter at 1440 and
     the rail was paying for all of it. */
  --lx-gap: clamp(1.4rem, 2.4vw, 2.25rem);

  /* The method bridge sits on its own ground: 3.7% darker than --paper
     and warmer with it, blue falling further than red. Enough to read as
     a distinct band against #F5F1E8 without becoming a colour of its
     own. */
  --lx-band: #ECE6DA;
  --lx-rule: rgba(32, 51, 41, 0.13);
}

/* The same gutter the header pads by, so the copy starts under the
   masthead and ends under the search button, exactly as the homepage
   does. No max-width of its own: --page-gutter is what governs the
   measure at every width. */
.lx-shell {
  width: 100%;
  padding-inline: var(--page-gutter);
}

/* styles.css caps every paragraph in main at 40rem, which is narrower
   than this page's main column and would strand the two-up section. */
.page-layer main p { max-width: none; }

/* SHARED TYPE ----------------------------------------------------------
   One eyebrow, two weights of it. Rust is the section marker; the rail's
   own headings are deliberately neutral so the rail does not compete
   with the reading column. */

.page-layer .lx-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);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.page-layer .lx-eyebrow--quiet { color: var(--text-2); }

.page-layer .lx-h2 {
  font-family: var(--display);
  font-weight: 500;
  /* .growth-heading, the homepage's section heading. Its own narrow
     override is restated at the foot of this file. */
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  margin: 0 0 1rem;
  max-width: 34ch;
}
.page-layer .lx-h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 0.95vw, 2rem);
  line-height: 1.14;
  color: var(--ink-green);
  margin: 0 0 0.85rem;
  max-width: 22ch;
}
.page-layer .lx-body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 1rem;
  max-width: 38rem;
}
.page-layer .lx-body:last-child { margin-bottom: 0; }

/* HERO -----------------------------------------------------------------
   Title block left, artwork right. The artwork is a single image that
   carries the ring diagram and its labels; it is decorative, because the
   heading beside it and the rail below name everything in it.

   aspect-ratio plus object-fit: contain reserves the space without
   knowing the file's intrinsic size, so the band cannot shift as the
   image decodes and nothing is cropped whatever proportions it has. */

/* No padding: the artwork runs to the top and bottom of the band, with
   the header's rule above it and the reading rule below. The copy
   centres against whatever height the picture takes. */
/* The band carries the artwork's own paper rather than --paper, so the
   sky at the top of the picture and the ground the title sits on are one
   surface. Without it the picture reads as a rectangle dropped on the
   page; with it the scene simply stops being a picture somewhere above
   the clouds. The two differ by a single value, so nothing else on the
   page notices. */
.lx-hero { padding-block: 0; background: #F4F1E9; }
.lx-hero-grid {
  display: grid;
  /* The picture is the feature of this band, so it takes more of it -
     1.5 against the copy's 1, where it used to be 1.35 - and with the
     bleed below that is 809px of a 1440 viewport against 637 before.

     1.5 is the ceiling, and what sets it is one word. Relationships and
     Environment do not break, so the title column can never be narrower
     than the longer of them: at 1.55 Relationships runs 6px out of its
     column at 1600. Measured over all six layers at fourteen widths from
     961 up, 1.5 leaves every title and deck inside its column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
/* Stretched, the copy still reads from the middle of the band. */
.lx-hero-copy { display: flex; flex-direction: column; justify-content: center; }
.page-layer .lx-kicker {
  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 0.9rem;
}
.page-layer .lx-title {
  font-family: var(--display);
  font-weight: 500;
  /* The homepage hero's own scale. It is set in hero-watercolor.css,
     which only the homepage loads, so the values are restated here
     rather than inherited - .display-xl and --fs-hero are both a size
     smaller than what the homepage actually renders. The breakpoint
     below matches that file's. */
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.93;
  letter-spacing: -0.022em;
  color: var(--ink-green);
  margin: 0 0 0.75rem;
}
.page-layer .lx-deck {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  line-height: 1.2;
  color: var(--olive);
  margin: 0;
  max-width: 30ch;
}
/* The band is as tall as the taller of the two columns, and the picture
   fills whatever that turns out to be.

   aspect-ratio is the artwork's own, so the figure carries its natural
   height into the row sizing - that is what the band measures when the
   copy is shorter, and it reserves the space before the image decodes.
   When the copy is taller, align-self: stretch takes the figure past that
   height and the picture answers it with more sky rather than with a
   wider crop. The band stays flush either way. */
.lx-hero-art {
  margin: 0;
  /* Out through the page's right gutter to the edge of the viewport. The
     shell pads by exactly --page-gutter, so a column plus that value ends
     on the edge and not past it - no overflow at any width. Only the
     right: the left side is where the title is.

     A width rather than a negative margin, because the width has to be
     definite. Left to stretch, the box takes its width from the row's
     height through aspect-ratio below, and on the widths where the title
     wraps and the copy is the taller column that blew the picture 89px
     off the side of the page. */
  width: calc(100% + var(--page-gutter));
  position: relative;
  align-self: stretch;
  /* The picture's own proportions, so it fills the band exactly and there
     is no strip of paper over it. aspect-ratio rather than a padding-top
     percentage because the bleed makes this box wider than the column it
     sits in, and percentage padding would still be measured against the
     column. */
  aspect-ratio: 1788 / 636;
  overflow: hidden;
  /* Matching .lx-hero, for the case the band outgrows the picture. */
  background: #F4F1E9;
}
.lx-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover. cover filled the band by scale and paid for it in
     width, which cut the mountains on the left and the trees on the right
     off the scene. The band now carries the picture's own ratio, so
     contain fills it exactly and crops nothing in either direction. On
     the rare width where a two-line title outgrows it, the difference
     opens over the picture as paper the same colour as the sky. */
  object-fit: contain;
  /* Pinned to the bottom, so the water sits on the band's edge and the
     leftover height always opens at the top where the sky is. */
  object-position: center bottom;
  display: block;
}

/* THE TWO COLUMNS ------------------------------------------------------ */

.lx-main {
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--border);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
.lx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--lx-rail-min), var(--lx-rail));
  gap: var(--lx-gap);
  align-items: start;
}
/* A hairline between the column and the rail. The grid aligns its items
   to the start so the rail's content stays at the top, but the rail box
   itself stretches, otherwise the rule stopped under the last card and
   left the bottom third of the page divided by nothing. */
.lx-rail {
  padding-left: var(--lx-gap);
  border-left: 1px solid var(--border);
  align-self: stretch;
}

.lx-section + .lx-section { margin-top: clamp(2rem, 3.2vw, 3rem); }
/* A rule opens the section it belongs to, which puts one above This
   layer includes, one below it (opening the pair), and one above
   Questions worth asking. */
.lx-section--ruled {
  border-top: 1px solid var(--border);
  padding-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.lx-section--ruled + .lx-section--ruled { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); }

/* LISTS ---------------------------------------------------------------- */

.page-layer .lx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 38rem;
}
.page-layer .lx-list li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.page-layer .lx-list li:last-child { margin-bottom: 0; }
.page-layer .lx-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rust);
}

/* THE TWO-UP PAIR ------------------------------------------------------
   What to notice / What this does not mean. One rule between them, and
   only while they are genuinely side by side. */

/* A section that runs the column rather than sharing it. Biosphere's
   note on the name is the only one so far. */
.lx-note { max-width: 46rem; }
.page-layer .lx-note .lx-body { max-width: none; }
/* .lx-h3 is measured for a half-width column; running the full one it
   was breaking over four lines while its own paragraphs ran wide. */
.page-layer .lx-note .lx-h3 { max-width: 34ch; }

.lx-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}
.lx-pair > * + * { padding-left: clamp(1.5rem, 2.6vw, 2.5rem); border-left: 1px solid var(--border); }
.page-layer .lx-pair .lx-body { max-width: none; }

/* RIGHT RAIL: THE SIX LAYERS -------------------------------------------
   The same engraved marks the /context progression uses, at the same
   treatment: dark line art on transparent, knocked out to cream once the
   disc behind it fills. */

/* 600 rather than 500, which is why this page asks Google for the
   extra IBM Plex Mono weight - the shared request is 400;500 and a
   synthesised bold on a monospace face is poor. */
.page-layer .lx-rail-h {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 1rem;
}
.lx-layers { list-style: none; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); padding: 0; }
.lx-layer-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.5rem 0.7rem 0;
  text-decoration: none;
  color: inherit;
}
.lx-layer-mark {
  display: grid;
  place-items: center;
  width: clamp(2.9rem, 3.4vw, 3.4rem);
  height: clamp(2.9rem, 3.4vw, 3.4rem);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  flex: none;
  transition: background 200ms var(--ease, ease), border-color 200ms var(--ease, ease);
}
.lx-layer-mark img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
  transition: filter 200ms var(--ease, ease);
}
/* The layer's name is set like the page title it leads to - the display
   face, at the heading weight, never bold. Only the number stays mono. */
.page-layer .lx-layer-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.02rem + 0.32vw, 1.375rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink-green);
  margin: 0;
  transition: color 160ms var(--ease, ease);
}
.page-layer .lx-layer-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-2);
  margin-right: 0.5rem;
  transition: color 160ms var(--ease, ease);
}
.page-layer .lx-layer-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-2);
  margin: 0.15rem 0 0;
}
.lx-layer-arw {
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--rust);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 180ms var(--ease, ease), transform 180ms var(--ease, ease);
}
/* Hover moves the row into the state the current row is in, minus the
   permanence: the disc fills and knocks its mark out, the number and
   name go rust, the arrow arrives. No box behind any of it. */
.lx-layer-row:hover .lx-layer-mark,
.lx-layer-row:focus-visible .lx-layer-mark { background: var(--rust); border-color: var(--rust); }
.lx-layer-row:hover .lx-layer-mark img,
.lx-layer-row:focus-visible .lx-layer-mark img { filter: brightness(0) invert(1); }
.page-layer .lx-layer-row:hover .lx-layer-name,
.page-layer .lx-layer-row:hover .lx-layer-num,
.page-layer .lx-layer-row:focus-visible .lx-layer-name,
.page-layer .lx-layer-row:focus-visible .lx-layer-num { color: var(--rust); }
.lx-layer-row:hover .lx-layer-arw,
.lx-layer-row:focus-visible .lx-layer-arw { opacity: 1; transform: none; }
.lx-layer-row:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* The layer you are on. Rust disc with the mark knocked out of it and a
   rust name - and nothing else: no ground, no shadow, and no arrow,
   because this row is not going anywhere. */
.lx-layer-row--current { background: none; box-shadow: none; }
.lx-layer-row--current .lx-layer-mark {
  background: var(--rust);
  border-color: var(--rust);
}
.lx-layer-row--current .lx-layer-mark img { filter: brightness(0) invert(1); }
.page-layer .lx-layer-row--current .lx-layer-name,
.page-layer .lx-layer-row--current .lx-layer-num { color: var(--rust); }

/* NEXT LAYER ----------------------------------------------------------- */

/* Its label lives inside it, and it takes the same ground as the method
   bridge below, so the two read as one closing move. */
.lx-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.15rem, 1.9vw, 1.6rem);
  background: var(--lx-band);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms var(--ease, ease);
}
/* --text-2 clears AA on --paper at 4.82:1 but only reaches 4.37:1 on
   the card's darker ground, so the label inside it steps down to
   --olive, the same move the bridge copy makes. */
.page-layer .lx-next .lx-rail-h { margin-bottom: 0.65rem; color: var(--olive); }
.page-layer .lx-next-name {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  line-height: 1.1;
  color: var(--ink-green);
  margin: 0 0 0.4rem;
}
.page-layer .lx-next-note {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.35;
  color: var(--olive);
  margin: 0;
}
.lx-next-arw {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--rust);
  color: var(--rust);
  flex: none;
  transition: background 180ms var(--ease, ease), color 180ms var(--ease, ease);
}
.lx-next-arw svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lx-next:hover { border-color: var(--rust); }
.lx-next:hover .lx-next-arw { background: var(--rust); color: var(--paper-light); }
.lx-next:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* METHOD BRIDGE --------------------------------------------------------
   Its own ground, and deliberately generous vertical room: it is the
   last thing read before the newsletter band and was running straight
   into it. */

.lx-bridge {
  background: var(--lx-band);
  border-top: 1px solid var(--lx-rule);
  padding-block: clamp(1.75rem, 2.6vw, 2.75rem);
}
.page-layer .lx-bridge-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.08;
  color: var(--ink-green);
  margin: 0 0 1rem;
  max-width: 20ch;
}
.page-layer .lx-bridge-p {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  /* --text-2 measures 4.55:1 on --paper and 4.37:1 on this slightly
     darker ground, which is under AA for body text. --olive is the same
     family one step down and clears it at 4.96:1. */
  color: var(--olive);
  margin: 0;
  max-width: 44rem;
}
.page-layer .lx-bridge-p strong { color: var(--ink-green); font-weight: 600; }
.page-layer .lx-bridge-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease, ease);
}
.page-layer .lx-bridge-cta:hover { border-bottom-color: var(--rust); }
.page-layer .lx-bridge-cta .arw { transition: transform 200ms var(--ease, ease); }
.page-layer .lx-bridge-cta:hover .arw { transform: translateX(3px); }

/* RESPONSIVE -----------------------------------------------------------
   Three steps down. The rail leaves the side first, because it is the
   thing that gets cramped first; the hero stacks next; the pair splits
   last, since two short columns survive narrower than the rail does. */

@media (max-width: 1020px) {
  .lx-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 2.75rem); }
  .lx-rail {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: clamp(1.75rem, 3vw, 2.25rem);
  }
  /* With the full width to work in, the six rows read better as a grid
     than as one long column. */
  .lx-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; }
  .lx-next { max-width: 34rem; }
}

/* Matching hero-watercolor.css, which drops the homepage hero to a
   viewport-driven scale below 960.

   The hero stacks at the same point, for a related reason: below it the
   title block is taller than the artwork beside it, so the grid centred
   the picture and left a few pixels of band above and below - measured
   at 6px each at 861. Stacked, the picture spans the full width and is
   flush by construction. */
@media (max-width: 960px) {
  .page-layer .lx-title { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
  .lx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
  /* Stacked, the picture has the band to itself, so it bleeds both ways
     and runs the full width of the viewport. */
  .lx-hero-art {
    order: -1;
    align-self: auto;
    width: calc(100% + var(--page-gutter) * 2);
    margin-left: calc(var(--page-gutter) * -1);
  }
  /* Stacked, the picture is still flush to the top but the copy under it
     needs room before the reading rule. */
  .lx-hero { padding-bottom: clamp(1.5rem, 4vw, 2.25rem); }
  .page-layer .lx-deck { max-width: 28ch; }
}

/* mobile-fixes.css steps .growth-heading up on narrow screens; the core
   question follows it. */
@media (max-width: 620px) {
  .page-layer .lx-h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (max-width: 660px) {
  .lx-pair { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2rem); }
  .lx-pair > * + * { padding-left: 0; border-left: 0; padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--border); }
  .lx-layers { grid-template-columns: minmax(0, 1fr); }
  .lx-layer-row { padding-inline: 0.5rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-layer-row, .lx-layer-mark, .lx-layer-mark img, .lx-layer-arw,
  .lx-next, .lx-next-arw, .page-layer .lx-bridge-cta,
  .page-layer .lx-bridge-cta .arw { transition: none; }
}