/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — MARKETS (/markets)
   Sections M1–M8. Everything structural comes from interior.css, which
   loads first: the split hero, the fact strip, the rail, the split rows,
   the spec lists, the so-what notes, the table and the closing band.

   This page adds almost nothing of its own, which is the point — it is the
   four homepage cards opened out into the shared interior furniture rather
   than a new layout. Keep it that way; anything that wants a bespoke
   component here probably belongs in interior.css instead.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── M6 · THE COMPUTE ILLUSTRATION ────────────────────────────────────────
   The only picture on the page that is drawn rather than photographed. An
   SVG under object-fit:cover would be cropped like a photograph, which
   throws away the diagram's margins and slices the satellite link. Contain
   it instead, and give it the schematic ground so the letterboxing reads as
   a drawing on a board rather than as a photo that failed to fill. */
.srow-pic img[src$=".svg"]{object-fit:contain;background:var(--schematic);
  padding:clamp(18px,3vw,44px)}

/* ── M2b · WHAT THE POWER BECOMES ─────────────────────────────────────────
   This section is text-only — no photograph to hold the right-hand side —
   so stacked in a single .wrap column it left most of a 1240px page empty
   next to a three-line d2. Split it instead: the argument on the left, the
   evidence for it on the right, both starting at the same baseline.

   The ratio is deliberately NOT 1:1. The left is a heading and one
   sentence, the right is a list plus a boxed paragraph, so the right needs
   the extra width or the list items start wrapping mid-phrase. Below
   980px it stacks and .sechead gets its normal bottom margin back. */
.psplit{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(30px,4.4vw,80px);align-items:start}
/* .sechead ships a 62ch measure for full-width use. In here the grid track
   IS the measure, so the cap has to come off or it holds the heading at
   ~304px and pushes the d2 onto a fourth line with 230px sitting empty
   beside it. Restored below 980px, where there is no track to do the job. */
.psplit .sechead{margin-bottom:0;max-width:none}

/* The lead-in to the list. It is a label for what follows, not a second
   lede, so it sits a step down from .sechead's — same colour, smaller.

   IT CARRIES THE SEPARATING GAP NOW. The column was reordered on
   28 Aug 2026 so the thing being built comes before the four being
   explored (see the note in markets.njk), which means .sowhat is the first
   child and must start level with the heading beside it — the gap that used
   to sit on top of .sowhat belongs above this paragraph instead. Same
   number, moved one element down the column. */
.psplit-body>.lede{color:var(--mist);font-size:clamp(.95rem,1.15vw,1.05rem);
  max-width:54ch;margin-top:clamp(26px,3.4vh,38px)}
.psplit-body .spec{margin-top:20px}

/* .sowhat was drawn for the narrow .srow-copy column, where it fills its
   parent. Here its parent is already the measure we want, so the rule only
   has to take the cap off — and keep its own top margin at zero, or the
   panel drops below the top of the heading in the other column. */
.psplit-body .sowhat{margin-top:0;max-width:none}
.psplit-body .sowhat p{max-width:none}

@media(max-width:980px){
  .psplit{grid-template-columns:1fr;gap:0}
  .psplit .sechead{margin-bottom:clamp(30px,5vh,48px);max-width:62ch}
}

/* ── M3–M6 · THE MARKET ROWS ──────────────────────────────────────────────
   .srow ships full-bleed and alternating: the picture runs to the viewport
   edge and swaps sides each row. Down four rows that alternation reads as a
   zig-zag rather than as a rhythm — the eye is thrown across the page at
   every section, and the edge-to-edge panels give the page no margin to sit
   in. Both are corrected here, for /markets only. /advantage, /careers and
   /contact still use the pattern as drawn.

   The markup carries pic-left on all four, so the picture and the 01–04
   numeral stay on one side and the argument builds down a single column.

   Contained, the row is a panel rather than a band, which means the copy's
   outer padding has to be reset: .srow's gutter rule pads the copy out to
   the .wrap edge (50vw - 620px) on the assumption there is no container
   doing that job. Here there is, and the unreset rule leaves the text
   floating a long way off its own panel's right edge. */
.srow.contained{
  /* min(1240px,90vw) is .wrap's own measure, restated rather than inherited
     because .srow is its own grid and cannot sit inside a .wrap without
     losing the stretch that makes the two panels equal height. Keep the two
     in step: if .wrap's measure moves in site.css, this has to move with it
     or the rows stop lining up with the sections above and below them. */
  max-width:min(1240px,90vw);
  margin:clamp(30px,4.6vh,58px) auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.srow.contained .srow-copy{padding:clamp(40px,6vh,80px) clamp(26px,3.2vw,52px)}
.srow.contained.pic-left .srow-copy{padding-right:clamp(26px,3.2vw,52px)}

/* ── M7 · ONE PRODUCT ─────────────────────────────────────────────────────
   #product borrows .psplit, but its right-hand column is the section's
   actual lede rather than M2b's label-above-a-list. The step-down .psplit
   applies there is wrong here, so the body's own size is restored — this is
   .page-dense .lede from site.css, matched deliberately so the sentence
   reads at the same weight as every other lede on the page. */
#product .psplit-body>.lede{font-size:clamp(1rem,1.5vw,1.2rem);max-width:60ch}

/* Even columns here, unlike M2b. That split is weighted to the right because
   the right side carries a list and a boxed paragraph; this one is a
   two-line heading against a single sentence, and the weighting just moved
   the empty space from one column to the other. */
@media(min-width:981px){
  #product.sec .psplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}