/* ============================================================================
   IMMERSED (IN WATER) · PART I — THE MOMENT WATER MEETS YOU
   Science of Water · AquaFit Sports

   Scoped entirely to .im1 / .im1-page so nothing here can reach the SOW cover
   or any other article (09_CLAUDE_BUILD_AND_QA rule 10).

   TYPE SCALE IS MEASURED, NOT GUESSED.
   Taken off VISUAL_REFERENCE/the-moment-water-meets-you-APPROVED-VISUAL-TRUTH.png
   by character-advance (cap-height reads were inflated by anti-aliasing), with
   the rendering's 627px content column mapped to a 1200px built column:

       eyebrow      14.1px        body        17.4px  (from 16px line pitch)
       hero title   73.0 / 74.4px h2          36.3px
       deck         20.2px        references  14.5px

   Two independent measurements of the hero title agreed (73.0 and 74.4), so the
   scale is anchored rather than eyeballed.

   Band tints sampled from the same rendering at the page margin:
       opening #FBF7F4 · section 02 #FBF8F5 · section 04 #F4F8F9
       reader voice #FBFAF8 · everything else white
   ============================================================================ */

/* Bodoni Moda — SIL OFL 1.1, self-hosted (05_TYPOGRAPHY_AND_FONT_MANIFEST:
   "Do not include a permanent Google Fonts production dependency").
   Montserrat / Cabin / Libre Baskerville are already declared in styles.css,
   so they are NOT redeclared here — that would double-download them. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.im1 {
  /* palette — 04_ART_DIRECTION */
  --navy:      #000033;
  --aqua:      #00AEEF;   /* graphics only — icons, rules, the illustration */
  /* Brand aqua measures 2.53:1 on white and 2.39:1 on the cream band, which
     fails AA for text at these sizes and breaks the package's own QA line
     "no inaccessible contrast". This is the lightest aqua that clears 4.5:1 on
     every ground the article uses (white 5.05, cream 4.77, mist 4.72), so small
     type keeps the aqua identity and stays legible. On the navy founder band
     pure --aqua already measures 7.92:1 and is used as-is. */
  --aqua-ink:  #0077A2;
  --orange:    #F7931F;   /* graphics only — the hero rule, the wonder bar */
  /* Same treatment as the aqua: brand orange is 2.30:1 on white, so the Part II
     eyebrow was unreadable. #A85B0B clears AA on white (5.04) and cream (4.76)
     and still reads as the brand orange beside the untouched rule above it. */
  --orange-ink: #A85B0B;
  --ink:       #16263C;   /* body copy: navy softened for long-form reading */
  --ink-soft:  #45546A;
  --paper:     #FFFFFF;
  --cream:     #FBF8F5;   /* measured: opening + section 02 */
  --mist:      #F4F8F9;   /* measured: section 04 */
  --voice:     #FBFAF8;   /* measured: reader voice */
  --hair:      rgba(0, 0, 51, .12);

  /* type roles */
  --f-display: 'Bodoni Moda', 'Libre Baskerville', Georgia, serif;
  --f-sans:    'Montserrat', system-ui, -apple-system, sans-serif;
  --f-founder: 'Cabin', system-ui, sans-serif;
  --f-quote:   'Libre Baskerville', Georgia, serif;

  /* the gutter that aligns hero copy with every .im1-wrap below it */
  --gut: max(24px, calc((100vw - 1200px) / 2));

  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  /* clip not hidden: `hidden` creates a scroll container and breaks sticky */
  overflow-x: clip;
}

.im1-wrap {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- type roles */
.im1-eyebrow {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 14px;              /* measured 14.1 */
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aqua-ink);
}

/* Display headings are set in title case in the HTML — the approved copy's own
   casing — and rendered uppercase here, which is how the rendering shows them.
   Visual treatment, not a copy change. */
.im1-h {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--navy);
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: clamp(28px, 3.02vw, 36px);   /* measured 36.3 at 1200 */
  line-height: 1.12;
}

.im1-num {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--aqua-ink);
}

/* keeps a phrase together so a label breaks at a chosen point, not a stray one */
.im1-nb { white-space: nowrap; }

.im1-rule {
  display: block;
  width: 92px;
  height: 3px;
  background: var(--orange);
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px);
  border-radius: 2px;
}

/* body copy — the manuscript is deliberately staccato, many one-line paragraphs.
   Spacing between them carries the pacing, so it is generous but not loose.

   Wrapped in :where() so this base rule carries ZERO specificity. `.im1 p` is
   (0,1,1) and was beating every single-class role above — the eyebrow rendered
   at body size in body ink instead of 14px aqua. Any role class now wins. */
:where(.im1) :where(p) {
  font-size: 17.4px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 .85em;
  max-width: 62ch;
}
:where(.im1) :where(p:last-child) { margin-bottom: 0; }
.im1 strong { font-weight: 700; color: var(--navy); }
.im1 em { font-style: italic; }

/* a line the manuscript sets alone for emphasis */
.im1-beat {
  margin-top: 1.15em;
  margin-bottom: 1.15em;
}
.im1-question {
  margin: 1.25em 0;
  font-size: 19px;
  color: var(--navy);
}

/* footnote markers */
.im1-fnref { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 2px; }
.im1-fnref a {
  color: var(--aqua-ink);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--f-sans);
  padding: 0 1px;
}
.im1-fnref a:hover,
.im1-fnref a:focus-visible { text-decoration: underline; }

/* the anchor a footnote returns to should not land under the sticky header */
.im1 [id] { scroll-margin-top: 96px; }

/* ============================================================ HERO */
.im1-hero {
  /* Full-width descent into Section 1's cream. This is what the photo's bottom
     feather dissolves INTO — without it the mask would reveal white and put a
     pale band between the hero and the cream band. It also carries the left
     (copy) side down, so both columns arrive at Section 1 together rather than
     only the photo blending. */
  background: linear-gradient(180deg,
      var(--paper) 0%, var(--paper) 68%,
      #FEFDFC 82%, #FDFAF8 92%, var(--cream) 100%);
  /* FLUSH to the nav — no top padding. Scanning x=690 down the rendering: nav
     ink at y=31, then white to y=56, photo from y=57. That white is the NAV
     BAR'S OWN BACKGROUND, not a gap; the photo butts straight up under it.
     I previously read those rows as hero padding and inset the photo by 42px.

     FLUSH AT THE BOTTOM TOO. Sampling x=500 and x=690: photo to y=400, cream
     band from y=401. No white between them. My earlier "11px gap" came from
     scanning the far-left margin (x=6), where the photo does not reach and the
     band edge is ambiguous — the wrong column to read it off. */
  padding-block: 0;
}

/* HERO GEOMETRY — measured on the rendering's text-free rows (348-396), so the
   headline ink could not contaminate the reading:
       photo spans x 300 -> 723 of 724   = 58.6% of the page, bleeding off right
       photo band  y  56 -> 400          = 424 x 345, aspect 1.229
       left edge feathers to white over x 300 -> 340 = the first 10% of the photo
   The source is 1402x1122 (1.25), so at 1.229 almost nothing is cropped — which
   is what stops the figure being sliced off at the right.

   Copy and photo share ONE grid cell and overlap, because in the rendering the
   title (x 49-316) runs past the photo's left edge (x 300) and sits inside the
   fade. Two side-by-side columns cannot reproduce that. */
.im1-hero__inner { display: grid; }
.im1-hero__copy,
.im1-hero__figure { grid-area: 1 / 1; }

/* 58.6% at EVERY width — the rendering's proportion, no cap.
   The vh cap I had here shrank the photo on wide screens, which pushed its left
   edge right and threw the scrim ~388px clear of the title on a 27" instead of
   ~98px. Because both the photo edge and the copy scale with the viewport, an
   uncapped width keeps the scrim the same distance from the title at any size. */
.im1-hero__figure {
  justify-self: end;
  align-self: stretch;      /* fill the row, whichever column is taller */
  width: 58.6%;
  /* THE FOLD CAP — this is what makes the hero smaller, not a width reduction.
     Narrowing the photo moved its left edge right and blew the scrim gap from
     90px to 225px; restoring it needed a 4-6% mask stop, which compressed the
     feather back into a visible edge. Height is the only dimension that can be
     taken here without disturbing the horizontal anchor. */
  max-height: calc(100vh - 80px);   /* nav measures 79px — 70 left it 9px over */
  /* the figure carries the aspect so it SETS the row height; if the copy ever
     runs taller the figure still stretches and the image fills it */
  aspect-ratio: 424 / 345;
}

.im1-hero__copy {
  align-self: center;
  position: relative;
  /* The copy carries its own vertical padding, NOT the section. The section is
     padding-block:0 so the photo stays flush to the nav and to the cream band;
     without this the copy had nothing holding it off those same edges. Harmless
     on desktop (the photo is far taller and drives the row) but essential where
     the copy is the taller column — at iPad portrait the deck was overhanging
     the hero by 6px into the cream. */
  padding-block: clamp(26px, 2.8vw, 46px) clamp(30px, 3.4vw, 56px);
  /* Was nudged 15px down off the nav, then raised 9px. Net +6px from centred.
     An offset rather than a margin, so it does not re-centre the block and
     cancel half of itself. */
  top: 6px;
  z-index: 1;
  padding-left: var(--gut);
  /* must stop before the fade finishes (41.4vw + 5.9vw), or type would sit on
     solid photo instead of on the feathered edge */
  width: max(320px, 47.3vw);
}
.im1-hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  font-size: clamp(40px, 6.1vw, 74px);   /* measured 73.0 / 74.4 at 1200 */
  line-height: 1.06;
  letter-spacing: .004em;
  max-width: 100%;
}
/* The rendering's title break, authored in the markup. Released below 720px so
   the title can find its own wrap on a phone. */
@media (max-width: 719px) {
  .im1-tbr { display: none; }
}
.im1-hero__deck {
  font-size: clamp(16.5px, 1.58vw, 19px);  /* eased from measured 20.2 — safe to
     shrink because the DECK does not set the scrim anchor; the title does */
  line-height: 1.6;
  color: var(--ink);
  max-width: 34ch;
  margin: 0;
}
/* the photo runs off the right edge of the page, as in the rendering */
.im1-hero__figure { margin: 0; }
.im1-hero__img {
  display: block;
  width: 100%;
  /* fills the figure box outright — height:auto left the section able to show a
     sub-pixel white line at the top or bottom edge */
  height: 100%;
  object-fit: cover;
  /* when the fold cap engages the box gets wider than 1.229 and trims top and
     bottom; biased up so the trim comes off the stone rather than her head */
  object-position: 50% 44%;
  border-radius: 0;
  /* The left edge dissolves into the page. A MASK, not a white scrim: there is
     no colour to match, so it stays correct if the band colour ever changes.

     The rendering's own ramp is short (40 of 424px = 9.4%), but reproducing it
     literally put visible water within ~29px of the headline — it read as
     touching the letters. This ramp is much longer and starts fully clear, so
     the photo is still invisible where the title ends (~3.5% in) and only
     gathers weight well right of the copy.

     ANCHORED TO A MEASURED POINT: "T" in the title is 49px at 74px Bodoni, and
     the title's right edge sits at 625. Two T-widths past it is x=723, which is
     15.9% into the photo — so the ramp is built to be clearly present (.38) at
     16%, not merely starting there. */
  /* THREE mask layers, intersected. A single 90deg gradient could not do this:
     it applies the same opacity to every row, but the IMAGE is not uniform —
     pale sky up top hides the feather, while the darker water lower down let
     the vertical edge show through in the middle of the section.

     1. horizontal feather — geometry UNCHANGED, still anchored to the measured
        point: "T" is 49px at 74px Bodoni, the title ends at 625, and two
        T-widths past that is 15.9% into the photo, where the ramp reads .38
     2. corner falloff — opaque across the top-right, easing toward the
        bottom-left, which is exactly where the edge was becoming visible
     3. bottom feather — dissolves the photo into Section 1 rather than ending
        on a hard cut */
  -webkit-mask-image:
      linear-gradient(90deg,
        transparent 0%, transparent 5%,
        rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .38) 16%,
        rgba(0, 0, 0, .70) 24%, #000 34%),
      radial-gradient(118% 104% at 100% 2%,
        #000 52%, rgba(0, 0, 0, .88) 74%, rgba(0, 0, 0, .58) 92%, rgba(0, 0, 0, .46) 100%),
      linear-gradient(180deg,
        #000 0%, #000 70%, rgba(0, 0, 0, .74) 84%,
        rgba(0, 0, 0, .30) 94%, transparent 100%);
  mask-image:
      linear-gradient(90deg,
        transparent 0%, transparent 5%,
        rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .38) 16%,
        rgba(0, 0, 0, .70) 24%, #000 34%),
      radial-gradient(118% 104% at 100% 2%,
        #000 52%, rgba(0, 0, 0, .88) 74%, rgba(0, 0, 0, .58) 92%, rgba(0, 0, 0, .46) 100%),
      linear-gradient(180deg,
        #000 0%, #000 70%, rgba(0, 0, 0, .74) 84%,
        rgba(0, 0, 0, .30) 94%, transparent 100%);
  -webkit-mask-composite: source-in, source-in, source-in;
          mask-composite: intersect, intersect, intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* ============================================================ OPENING BAND */
.im1-opening {
  /* Starts on EXACTLY --cream so the seam with the locked hero is invisible —
     the hero's descent already ends on this colour. The pale aqua veil then
     emerges just BELOW the seam and fades out by mid-section, so the hero's
     atmosphere settles into the warm field rather than stopping at a line. */
  background:
    linear-gradient(180deg,
      rgba(228, 242, 246, 0) 0%,
      rgba(228, 242, 246, .38) 14%,
      rgba(233, 243, 245, .20) 34%,
      rgba(233, 243, 245, 0) 62%),
    var(--cream);
  /* 176px of padding (92/84) was most of the leftover pale space. The section's
     height is set by the LEFT column (395px) and its type is locked, so padding
     is the only lever. Cut to ~97px total for a ~17% shorter section. */
  padding-block: clamp(38px, 3.9vw, 58px) clamp(30px, 2.9vw, 42px);
}

/* Asymmetric two-panel spread. 47/53 in favour of the statement so the right
   panel reads almost as an image, and deliberately not a mechanical 50/50. */
.im1-opening__inner {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}

/* base paragraph defaults for the section — :where() so every role class below
   still outranks them (the earlier `.im1-opening__copy p` was (0,1,1) and beat
   the lead and the emphasis, rendering both at plain body size) */
:where(.im1-opening) :where(p) { font-size: 17.4px; line-height: 1.75; max-width: none; }
:where(.im1-opening) :where(p + p) { margin-top: 1.05em; }

/* ---- LEFT PANEL ---- */
.im1-opening__copy { max-width: 560px; }

/* the editorial lead — larger than body, but NOT a heading */
.im1-opening__lead {
  font-size: clamp(20px, 1.78vw, 25px);
  line-height: 1.58;
  color: var(--ink);
}

/* quiet hand-off into the statement opposite */
/* Raised toward the statement opposite: it is the handoff from the left prose
   to the right realisation, so it sits close to the paragraph it follows rather
   than floating at the foot of the column. Stays in the LEFT column. */
.im1-opening__setup {
  margin-top: .5em;
  color: var(--ink-soft);
}

/* ---- RIGHT PANEL ---- */
.im1-opening__statement { max-width: 620px; }

/* The section's visual anchor. Serif, large, generous leading, no card, no box,
   no rule, no quote marks — the space around it does the work. */
/* Short orange rule as the pull quote's starting point — same --orange as the
   hero rule, so the two read as one system. Deliberately shorter and thinner
   than the hero's 92x3 so it reads as an editorial mark, not a repeat. */
.im1-opening__emph::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
  margin-bottom: clamp(18px, 1.9vw, 26px);
}
.im1-opening__emph {
  margin: 0 0 clamp(30px, 3.4vw, 52px);
  font-family: var(--f-quote);
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--navy);
  max-width: 15ch;
}
/* the contrast the reference shows: second half in italic */
.im1-opening__emph em { font-style: italic; }

/* bridge into THE BODY KNOWS — sans, small, clearly subordinate to the serif */
.im1-opening__close {
  font-size: 17.4px;
  line-height: 1.72;
  color: var(--ink);
  max-width: 46ch;
}
.im1-opening__close-emph { font-weight: 600; color: var(--navy); }

/* ============================================================ NUMBERED SECTIONS */
.im1-sec { background: var(--paper); padding-block: clamp(52px, 7vw, 104px); }
.im1-sec--tint { background: var(--cream); }
#temperature.im1-sec--tint { background: var(--mist); }

.im1-sec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* THE BODY KNOWS only — scoped by id, because .im1-sec__inner also governs
   sections 02, 03 and 04 and rebalancing it here would silently move all of
   them. 51/49 in favour of the copy: Stuart's 52-54 / 46-48 target lands the
   illustration at ~538px on this article's 1200px measure, under his own 560px
   floor, and the floor wins — it is what keeps the artwork's labels readable.
   Gap eased from 5vw so both columns gain room. */
#the-body-knows .im1-sec__inner {
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: clamp(28px, 3.6vw, 52px);
}
.im1-sec__copy { min-width: 0; }

/* Figures sit beside a much longer manuscript than the rendering's placeholder
   copy, so they hold position while the column scrolls. Keeps the pairing the
   rendering established without redesigning the page. */
@media (min-width: 1024px) {
  .im1-sec__inner > .im1-figure,
  .im1-sec__inner > .im1-illus,
  .im1-sec__inner > .im1-temp {
    position: sticky;
    top: 104px;
  }
}

.im1-figure { margin: 0; }
.im1-figure img,
.im1-figure picture { display: block; width: 100%; height: auto; }
.im1-figure img { border-radius: 14px; }

/* ============================================================ SECTION · THE
   WATER DOESN'T WAIT FOR YOU TO MOVE.

   Deliberately NOT the .im1-sec__inner two-column grid that THE BODY KNOWS
   still uses (and that this section's OLD build also used, with a small
   858x319 crop sitting in the second column) — that recipe has already run
   twice on this page (S2's illustration, S3's photo-and-quote). A wide
   establishing photograph above a single narrow reading column gives this
   section its own rhythm instead of a third side-by-side variant, and lets
   the new image's own width/openness carry real editorial weight rather than
   being squeezed into a half-column. Everything scoped to .im1-s4. */
/* FULL-BLEED HERO + SHALLOW EVIDENCE BAND (2026-09-04, second rebuild).
   .im1-s4__hero is a DIRECT CHILD of <section>, not of .im1-wrap — it is
   deliberately NOT inside the wrap, so it inherits no max-width from
   anywhere up the tree (.im1-sec/.im1/body all carry none) and needs no
   full-bleed "breakout" margin math: width:100% here already IS the true
   viewport width (scrollbar-adjusted), which is also more robust than a
   100vw+calc(50%-50vw) breakout — 100vw does not subtract the scrollbar and
   would overhang the right edge by its width.

   Image orientation unchanged from the previous pass (not flipped) — see
   that entry's reasoning and Stuart's confirmation, still valid here.

   Section's own top padding is removed (below) so the band sits flush
   against the Section 3 seam — the "cinematic interruption" the brief wants
   would be undercut by a white gap before it even starts.
   `.im1-sec` sets `padding-block` (same specificity, 0,1,0, on the same
   element) — this rule must stay LATER in the file to win the tie; see the
   S3/S4 specificity-trap notes elsewhere in this file for why order matters
   here and cannot be assumed. Bottom is also tightened, not just zeroed. */
.im1-s4 {
  padding-top: 0;
  /* 0 (was clamp(36-52px)) — 2026-09-04, closing the S4->S5 seam. That
     padding sat on --paper (#FFFFFF) directly above S5's own top padding on
     --mist (#F4F8F9, close enough to white to read as the same gap) — the
     two combined into one ~153px pale strip with no visible seam. The one
     explicitly authorized exception to "don't otherwise modify S4" this
     pass: both sides needed closing, not just S5's. See .im1-s5 below. */
  padding-bottom: 0;
}

/* No horizontal shift, checked rather than assumed: at this element's own
   aspect ratio (viewport-width : hero-height, e.g. 1425:655=2.176) versus
   the source's 1.777, the container is ALWAYS proportionally wider than the
   source at any height in the brief's target band — object-fit:cover is
   therefore always WIDTH-driven here, with zero horizontal crop (the full
   1672px source maps 1:1 across the full container width, nothing left to
   shift). The subject already sits at 21-43% of that width (measured, not
   assumed) with the rest open water — moving it further left would need an
   artificial horizontal crop that doesn't otherwise exist, discarding real
   width from an already-correctly-composed frame. Taking the height
   increase alone already grows the RIGHT-side open area in absolute terms
   (same 57%-of-width proportion, now over a taller band), which is what the
   brief's underlying goal ("retain generous open space on the right")
   actually asks for. */
.im1-s4__hero {
  margin: 0;
  position: relative;
  width: 100%;
  /* Explicit height, not aspect-ratio: a full-viewport-width band at the
     source's native 1.777 ratio would run 802px tall at 1440px wide (full
     section image, not a band). Raised from the previous pass's 420-475
     (446 at 1440) — measured too tight: at that height the visible window
     is only 55.6% of the 941px source. 600-680 (655 at 1440) shows ~81.5%
     of the source — head top (measured 6.7%) to the hand's far reach
     (measured 77.2%) plus real padding on both ends, still well short of
     showing the full frame (which would read as a section image, not a
     band). See object-position below for the vertical anchor. */
  height: clamp(600px, 45.5vw, 680px);
  overflow: clip;
}
.im1-s4__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vertical anchor — corrected. object-position's Y% is NOT "the window's
     centre point" (that was my wrong mental model when this read `center
     42%`): for object-fit:cover it is the fraction of the CROPPED EXCESS
     taken from the top. At height 655/width ~1425, the excess is 147px
     (scaled) = 172px in source pixels, so 42% put the window's top edge at
     7.7% of the source — PAST her measured 6.7% hairline, clipping into it
     by about 9px of source (-1.0% clearance). That is what "her head is
     cropped off" was actually seeing, not merely tight framing.
     Solved for the real target instead of assuming: with head-top at 6.7%
     and hand-reach at 77.2% (both measured — see .im1-s4__hero comment),
     P=5% gives window [0.92%, 82.59%] — 5.78% of source (~54px on screen)
     clear above her head, 5.39% (~50px) clear below her hand. Horizontal
     stays "center" (50%) — see the .im1-s4__hero comment on why no shift
     was needed there. No border-radius: a true bleed band has no card edge. */
  object-position: center 5%;
}

/* Soft white glow behind the text only — organic radial fade, no edge, no
   border, no shadow, so it reads as atmosphere rather than a panel. */
/* Widened and softened for the image-canvas pass: the overlay this rule sits
   behind grew from a 400px teaser column to a 620px field carrying the
   whole section, so the glow needed to widen to match — and the brief
   explicitly asked for MORE restraint this time ("very subtle... remain
   invisible as a device"), so peak opacity also came down from the previous
   pass's .85 to .60. */
.im1-s4__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 88% at 72% 50%,
      rgba(255, 255, 255, .60) 0%,
      rgba(255, 255, 255, .38) 45%,
      rgba(255, 255, 255, .14) 72%,
      rgba(255, 255, 255, 0) 92%);
  pointer-events: none;
}

/* IMAGE-CANVAS EXPERIMENT (2026-09-04): ALL section copy now lives inside
   the photograph — no below-image band. The overlay is deliberately much
   wider than the previous pass's 400px (now up to 620px) since it is
   carrying the section's full content, not a three-line teaser; a narrow
   column would have forced the research paragraph into an uncomfortably
   short, heavily-wrapped measure. Right edge still lines up with the
   article's own right margin below (the same --s3-half-gutter-style
   expression), keeping the one axis where a full-bleed band still meets the
   page's established column rhythm. */
.im1-s4 {
  --s4-gutter: calc((100% - min(1200px, 100% - 48px)) / 2);
}
/* The closing anchor is no longer part of this flow (see .im1-s4__anchor
   below) — with it gone the stack is short enough that centring it in the
   655px band would leave a large dead gap at the bottom. Anchored near the
   top instead ("move the upper composition slightly upward"), which also
   leaves the lower-right open for the anchor without the two fighting for
   the same vertical territory. */
.im1-s4__overlay {
  position: absolute;
  z-index: 1;
  top: clamp(48px, 8vw, 72px);
  right: calc(var(--s4-gutter) + 16px);
  width: min(620px, 46%);
}

/* TITLE — the brief's explicit ask: noticeably more substantial than the
   27px ceiling of the previous (short-teaser) pass, now that it is carrying
   real weight as the section's dominant element rather than a line above a
   three-sentence teaser. */
.im1-s4 .im1-h {
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.12;
  /* Tightened to 6px now that .im1-s4__deck sits directly below: title and
     deck should read as ONE cluster, not title-then-first-body-line. Margins
     collapse with the deck's own 4px margin-top (the browser takes the
     larger of the two adjoining margins, not their sum) to a real 6px gap —
     confirmed by measuring the two boxes directly, not assumed from the
     numbers alone, after an earlier reading was thrown off by measuring
     mid scroll-reveal transition (see memory). */
  margin-bottom: 6px;
}

/* 46ch (~476px) was well short of the 620px overlay it's inside — a leftover
   from the previous pass's narrower column. That unused width was forcing
   extra line-wraps for no reason, which pushed "No exercise was required."
   and the "in the water" line down into the extended hand's measured pixel
   bounds (x:850-1030, y:490-560 in this 1425x655 crop — sampled directly off
   a canvas render of the true post-crop image, not estimated). Widening to
   58ch (~580px, close to the full column) drops the research paragraph from
   6 lines to 5 and lets that whole pair clear the hand without needing to
   dodge it horizontally, which the available width doesn't comfortably
   allow. Tightened alongside: the title's margin-bottom and the inter-
   paragraph gap below, both by the same "close the vertical gap enough to
   clear the hand" logic, verified together against the same measured box. */
.im1-s4__overlay p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}
/* .3em was the hand-avoidance compression from the previous pass — same
   reasoning as the h2 margin-bottom above, same fix: the anchor moving out
   of this flow removes the reason for it. */
.im1-s4__overlay p + p { margin-top: .7em; }

/* "Pressure." + its sentence MERGED into one paragraph (2026-09-04) so they
   read as one row instead of a bold label stacked above its own line — the
   58ch/~600px reading-measure cap (sized for multi-line body paragraphs)
   left this single line ~15px short of fitting: forced it to "Pressure.
   The deeper you go, the more pressure the surrounding / water exerts."
   (2 lines, an orphaned trailing word). Verified live before choosing this
   fix: at max-width:none — i.e. the full 620px overlay column, still never
   exceeding the established text field — the merged line is 615.2px, one
   line, 4.8px of clearance. `.im1-s4__overlay .im1-beat` (0,2,0) needed to
   safely outrank `.im1-s4__overlay p`'s max-width:58ch (0,1,1). */
.im1-s4__overlay .im1-beat { max-width: none; }

/* Research paragraph — "readable, restrained, smaller than the title,
   comfortable line length": kept in the same family/weight as the concept
   sentences above it (so it doesn't read as a separate component pasted
   in), but a half-step smaller and in --ink-soft rather than --ink, the
   quieter of the two body inks already established elsewhere in this
   article — a slightly more muted register for the "evidence" beat within
   an otherwise voice-driven overlay. */
.im1-s4__proof {
  /* Font-size UNCHANGED per the brief ("do not reduce font size merely to
     make it fit") — line-height alone raised 1.62->1.78, the room for which
     came from the anchor's removal, not from shrinking type. */
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* "No exercise was required." — stronger emphasis, reuses .im1-question's
   exact weight (an approved, restrained emphasis step already established
   elsewhere in this article) under its own name since this is a statement,
   not a question. `p.im1-s4__mark`, not the bare class: `.im1-s4__overlay
   p` (class+element, specificity 0,1,1) otherwise beats a bare single-class
   selector (0,1,0) regardless of which is declared later in the file —
   confirmed the hard way twice already on this section, see memory. */
p.im1-s4__mark {
  font-size: 19px;
  color: var(--navy);
}

/* CLOSING PAIR AS ITS OWN UNIT (2026-09-04). Wrapping these two <p>s in a
   div breaks the `.im1-s4__overlay p + p` adjacency they relied on for
   their gap from the research paragraph above (that selector needs true
   p+p sibling adjacency; the div is now between them) — restored explicitly
   here rather than left to silently collapse to 0. text-align:right is the
   brief's own "first try"; measure before deciding whether it needs pulling
   back per the brief's own fallback instruction. */
.im1-s4__closing {
  margin-top: 18px;
  text-align: right;
  /* INSET from the column's own outer edge (2026-09-04) — flush-right at
     1296 (the previous pass) was technically "inside the column" but was
     farther right than any real content in the overlay ever reaches: the
     title's longest line ends at 1270, the research paragraph's widest
     line at 1268.7 — both measured, not assumed. 1296 was a boundary
     nothing else in the block actually touches, which is why the cluster
     still read as detached even once it stopped overflowing the column.
     27px inset lands the cluster's own right edge at ~1269, matching that
     real established text-field edge instead of the column's unused outer
     limit. */
  margin-right: 27px;
}
/* Tighter than the general .7em (~10.8px) inter-paragraph rhythm — reads as
   one closing CLUSTER rather than two more body paragraphs, same move as
   the title/deck's 6px collapse above. `.im1-s4__closing p + p` (0,2,1)
   outranks `.im1-s4__overlay p + p` (0,1,2) regardless of source order. */
.im1-s4__closing p + p {
  margin-top: 6px;
}
/* "The participants were simply in the water." is ~352px on one line —
   right-aligned at the column's own edge (1296) its ink starts at 944,
   inside the hand's measured x:[850,1030]. Rather than move the block
   (rejected this pass), authored a break so each resulting line is
   individually narrow enough to clear the hand from its own right-aligned
   position: tested every word boundary live (off-DOM, in the actual
   column) before picking one — "were simply" / "in the water." lines
   at 227px/101px, both comfortably under the 266px a line can be here
   before its left edge would reach into the hand's x:1030. Also tapers
   nicely against "No exercise was required." (245px) above it: 245 -> 227
   -> 101, and ends on the short "in the water." beat rather than a long
   line's tail. Hidden below 1024px isn't relevant here (desktop-only pass,
   and this break isn't styled to hide) but keeps the space-before-<br>
   convention used elsewhere in this article regardless. */
.im1-s4-cbr { display: inline; }
/* `.im1-s4__overlay p`'s max-width:58ch is computed per element's OWN
   font-size — 735px at the mark's 19px, but only 600px at this paragraph's
   15.5px, which is NARROWER than .im1-s4__closing's new 720px box. A
   max-width-capped auto-width block does not stretch to fill a wider
   parent, and text-align only right-aligns TEXT within whatever box it
   already has — so this line silently stayed left-anchored at its old
   position while .im1-s4__mark (uncapped in practice, its 735px ceiling
   exceeds the box) correctly followed. margin-left:auto pushes the capped
   BOX itself flush right, which is what actually moves the ink.
   `.im1-s4__overlay .im1-s4__closing p` (0,2,1) — needed to safely outrank
   `.im1-s4__overlay p`'s `margin:0` (0,1,1), which also sets margin-left. */
.im1-s4__overlay .im1-s4__closing p {
  margin-left: auto;
}

/* DECK, UNDER THE TITLE (2026-09-04, third treatment of this line). It has
   now been: the section's closing anchor in the main flow (collided with
   the hand, no fix fit); an independent lower-right block (collided with
   the hand from a different angle, then fixed but read as "detached" once
   corrected); now a deck directly under the title instead of a closing
   statement at all — Stuart's call, not a design dead-end forcing a third
   position for the OLD role. Wording is unchanged; only its editorial job
   changed, so the two other positions' hand/stack collision math is now
   moot — nothing here needs to dodge anything, it lives entirely inside
   the title's own row before any other content begins.

   19px / weight 600 measured at 567px on one line (tested 18-22px x
   500/600/700 off-DOM before committing) — comfortably under the title's
   own longest line (594px, "The Water Doesn't Wait"), so it satisfies
   "should not exceed the title block's visual width" without needing to
   shrink to match the SHORTER second line ("for You to Move", 417px) that
   the brief offered as an alternative, harder target. 600 sits between the
   body copy's 500 and the weight this line carried when it was the large
   lower quote (700) — "heavier than body, not as heavy as it was". */
/* `p.im1-s4__deck`, not the bare class: `.im1-s4__overlay p` (0,1,1) would
   otherwise beat a bare single-class selector (0,1,0) regardless of file
   order and silently hand this line the body paragraph's 15.5px/ink/58ch
   instead — the same specificity trap already hit on .im1-s4__mark and the
   old .im1-s4__anchor in this file. */
p.im1-s4__deck {
  /* 4px, tightened from 10px — collapses with .im1-h's 6px margin-bottom to
     a real 6px gap (the larger of the two), reading as part of the title
     cluster rather than the stack's first body line. */
  margin: 4px 0 0;
  font-family: var(--f-sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  white-space: nowrap;
}
/* Explicit, higher-specificity gap to the paragraph AFTER the deck — the
   general `.im1-s4__overlay p + p` rule (0,1,2) would otherwise win over a
   plain `.im1-s4__deck + p` (0,1,1) regardless of source order, so this is
   qualified with both classes to reliably outrank it. Deliberately much
   bigger than the 6px above it: the brief wants a CLEAR break between the
   title cluster and the body copy that follows, not a uniform rhythm. */
.im1-s4__overlay .im1-s4__deck + p {
  margin-top: 24px;
}

/* Approved Water + Skin rendering. NO card: the old flat diagram needed a
   bordered, tinted, padded container to hold together; this artwork carries its
   own composition, so a border and background would only fence it off from the
   white editorial field. Radius only, matching the article's other figures. */
.im1-illus {
  margin: 0;
  /* Top-aligned to the HEADING zone rather than the row top, so it starts with
     the editorial content instead of level with the "01". */
  padding-top: clamp(18px, 2.4vw, 34px);
}
.im1-illus__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ============================================================ SECTION · BEFORE
   YOU'RE EVEN ALL THE WAY IN.

   Deliberately NOT built on .im1-sec__inner: that grid governs the sections
   below as well, and this one needed its own rhythm — a wide landscape figure
   with a marginal research note under it, then a full-measure pull quote
   beneath both columns. Everything here is scoped to .im1-s3 so nothing leaks.
   ============================================================================ */

/* Warm ivory atmosphere. The section already sits on --cream between two white
   sections, so the boundaries are unchanged; only the middle warms, by
   (1,2,5) in RGB, plus a soft bloom behind the photo so the warm open-water
   image reads as embedded rather than pasted onto a cool ground. */
.im1-s3 {
  background:
    radial-gradient(76% 62% at 26% 42%, rgba(244, 231, 214, .40) 0%, rgba(244, 231, 214, 0) 68%),
    linear-gradient(180deg, var(--cream) 0%, #FAF6F0 46%, var(--cream) 100%);
  /* top is untouched (holds the locked image/quote relationship); bottom is
     independent now that the merged reflection sits closer to the narrative —
     the space after it was measured as trailing air, not breathing room */
  padding-top: clamp(44px, 5vw, 76px);
  padding-bottom: clamp(36px, 4vw, 56px);
  /* Desktop-only typesetting bleed for the right column (defined here so it is
     available to the min-width:1024 block below).
     NOT --gut: that variable is computed off 100vw, which excludes the
     vertical scrollbar's width, while an auto-centred block's real margin is
     computed off 100% (the scrollbar-adjusted containing block) — the two
     measured 7px apart on this page (120 vs 113 at 1440). Recomputed in %
     terms so it matches the OTHER sections' true rendered left edge exactly,
     and eats only the slack above the page's 24px minimum gutter.
     Cap raised 24->72 (2026-09-03) to clear the "immersion." orphan on the
     second study paragraph and let the research-beat note fit one line — the
     true wrap threshold measured 607px right-column width; 72px of bleed
     reaches 615px, an 8px margin above it.
     Still provably zero for the ENTIRE 1024-1248px range regardless of the
     cap's value: below 1248px .im1-wrap sits at its `100% - 48px` form (not
     yet at the 1200px ceiling), which makes --s3-half-gutter a flat, constant
     24px by construction, so `max(0, half-gutter - 24)` is 0 throughout that
     whole band — see [[project_sow_immersed_part1]] for the derivation. */
  --s3-half-gutter: calc((100% - min(1200px, 100% - 48px)) / 2);
  --s3-bleed: min(72px, max(0px, var(--s3-half-gutter) - 24px));
}

/* 54/46 in favour of the photograph — it is the section's opening statement and
   has to carry real weight, not sit in a picture box. Distinct from THE BODY
   KNOWS (51/49, copy-led) so the two don't scan as the same layout twice. */
/* Four DIRECT children — figure, prose, quote, closing — in that source order,
   which is the approved reading order. They are then PLACED, not reordered:
   the quote is lifted into column 1 row 2 (under the photo) while the prose
   spans both rows. Nesting the quote inside a left-column wrapper achieved the
   same desktop look but put it ahead of the prose in source order, so the phone
   stacked figure > quote > prose. Placement keeps the two independent. */
.im1-s3__top {
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(40px, 4vw, 64px);
  align-items: start;
}
.im1-s3__top > .im1-figure--s3 { grid-column: 1; grid-row: 1; }
.im1-s3__top > .im1-s3__copy   { grid-column: 2; grid-row: 1 / span 2; }
.im1-s3__top > .im1-s3__quote  { grid-column: 1; grid-row: 2; align-self: start; }
.im1-s3__top > .im1-s3__after  { grid-column: 2; grid-row: 3; }
.im1-s3__copy { min-width: 0; }

/* Desktop typesetting widen (1024px+ only — tablet/720-1023 keeps the fr-based
   rule above untouched). The photo's column is fixed in PX at exactly its
   measured 1440px-reference width (616.896, rounded) so it can never resize:
   fr-based columns split ALL freed space by ratio, which would have grown the
   image along with the text. Fixing column 1 and giving column 2 minmax(0,1fr)
   routes 100% of the freed space — from both the smaller gap and --s3-bleed —
   to the copy column only. Left edge of .im1-wrap is pinned at the standard
   `--gut`, same as every other section; only the right edge moves. */
@media (min-width: 1024px) {
  .im1-s3 .im1-wrap {
    width: calc(min(1200px, 100% - 48px) + var(--s3-bleed));
    margin-left: var(--s3-half-gutter);
    margin-right: auto;
  }
  .im1-s3__top {
    grid-template-columns: 617px minmax(0, 1fr);
    column-gap: clamp(32px, 2.8vw, 40px);
  }
  /* Authored 3-line break (im1-s3-qbr, hidden below this) replaces the old
     natural reflow at max-width:20ch — that cap would otherwise still wrap
     "The experience of water" a second time inside itself. Desktop only;
     tablet/mobile keep the untouched base rule's natural wrap at 20ch. */
  .im1-s3__quote p { max-width: none; }
  /* .im1-s3__after sits in grid-row:3, which starts wherever row 2 (the
     QUOTE's row, column 1) ends — NOT wherever the prose column's own last
     paragraph ends. Shortening the beat or growing the quote both widen that
     structural gap; they don't close it. A negative margin is the only lever
     that pulls the reflection to sit near the prose's real content end
     without re-plumbing the grid (out of scope this pass — see memory for
     the full derivation and the measured value this replaces).
     NOT `.im1-s3__after` (bare class) — the base rule below it in the file
     wins any equal-specificity tie regardless of media-query nesting, so
     that selector was silently overridden. `.im1-s3__top > .im1-s3__after`
     matches the (0,2,0) selector already used to grid-place this element,
     which reliably outranks the base rule instead of depending on order. */
  .im1-s3__top > .im1-s3__after { margin-top: -82px; }
  /* One-line research beat, desktop only. Figure and note sit side by side on
     a shared baseline; the hairline's height now tracks a single line instead
     of two stacked ones, shrinking on its own — nothing else needed to
     "adjust" it. The figure's old 5px bottom margin (needed for the stacked
     tablet layout) is cleared since there's no second line under it here. */
  .im1-s3__beat {
    display: flex;
    align-items: baseline;
    column-gap: 14px;
    flex-wrap: wrap;
  }
  /* .im1-s3 .im1-s3__beat-figure (not the bare class): the base rule below
     this block sets the same property and is LATER in the file, so it would
     otherwise win the equal-specificity tie regardless of media nesting —
     same trap as .im1-s3__after above. */
  .im1-s3 .im1-s3__beat-figure { margin: 0; }
}
.im1-s3-qbr { display: none; }
@media (min-width: 1024px) {
  .im1-s3-qbr { display: inline; }
}

/* The 296px the prose column ran longer than the photograph is now FILLED by the
   pull quote rather than bridged by a sticky figure. Sticky is therefore gone —
   with the quote in this column there is no longer a hole to travel through, and
   a sticky column containing the quote would drag the quote down the viewport. */

/* Optical alignment: the h2's cap-height starts below its em box, so matching
   the photo's top edge needs a small negative nudge rather than 0. */
.im1-s3__copy > .im1-h { margin-top: -.14em; }

/* The figure keeps its native 4:3 — no crop, no portrait box. */
.im1-figure--s3 img {
  aspect-ratio: 1448 / 1086;
  object-fit: cover;
  border-radius: 14px;
}

/* Research beat — the "20 seconds" finding. A marginal note, not a card and not
   a stat block: a single aqua hairline holds it off the prose column, directly
   below the sentence that reports it, so the eye catches the finding without
   the paragraph flow being broken by a box. */
/* Stacked block by default (tablet/mobile — unchanged this pass); the
   one-line desktop treatment lives in the min-width:1024 block below, so it
   cannot leak down and alter tablet, which the brief explicitly excluded. */
.im1-s3__beat {
  margin: clamp(16px, 1.7vw, 24px) 0;
  padding-left: clamp(14px, 1.3vw, 18px);
  border-left: 2px solid var(--aqua);
}
.im1-s3__beat-figure {
  margin: 0 0 5px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .14em;
  /* no text-transform: "20s" is a unit abbreviation, not a label — uppercase
     would render it "20S", which reads as a different unit. Everything else
     (family, weight, size, tracking, colour) is unchanged. */
  color: var(--aqua-ink);
}
.im1-s3__beat-note {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 14.5px;
  /* 500 -> 600: slightly heavier than the surrounding 500-weight body copy so
     it reads as part of the beat rather than a footnote, short of the 700
     the label itself carries so it stays a supporting line, not a headline */
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
  /* was 30ch (~240px) — far short of the 547px "Changes appeared in one
     sensory region." needs on one line; the column itself is now the only
     constraint, matching how .im1-s3__quote p / .im1-s3__after p already
     drop their ch-caps at narrower widths elsewhere in this file */
  max-width: none;
}

/* The section's intellectual anchor. It used to sit below BOTH columns, which
   put it 377px under the photograph and made it read as a separate lower band.
   It now closes the LEFT column directly beneath the image — the woman entering
   the water, then the line that states it — which raises it ~320px and fills the
   white the photo used to float above. It cannot be both raised and level with
   the closing lines: the prose column sets the row height, so anything level
   with it is pinned below it. Raised won. */
.im1-s3__quote {
  margin: clamp(34px, 3.6vw, 52px) 0 0;
}
.im1-s3__quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--aqua);
  border-radius: 1px;
  margin-bottom: clamp(20px, 2.1vw, 28px);
}
.im1-s3__quote p {
  margin: 0;
  font-family: var(--f-quote);
  font-weight: 400;
  /* Second modest bump (2026-09-03): 45->48px ceiling (+6.7%), same cadence
     as the prior +7.7% step. Weight already tested at 700 in the previous
     pass and read as a marketing headline at this scale — stays 400; size is
     the only lever for "more visual mass" that keeps the editorial register. */
  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--navy);
  max-width: 20ch;
}

/* The closing reflection now follows the prose in the RIGHT column, so it lands
   just below and to the right of the quote instead of a full band lower down. */
.im1-s3__after { margin-top: clamp(20px, 1.8vw, 26px); }
.im1-s3__after p {
  margin: 0;
  font-size: 17.4px;
  line-height: 1.72;
  /* 500 -> 600: reads as the narrative's closing statement rather than a
     footnote, short of 700 which would read as a headline */
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* cool / warm — two-sided temperature language.
   NO effect claim is attached to either side: 07_SCIENTIFIC_BOUNDARIES forbids
   "cold activates" / "warm restores". The two words are the manuscript's own.

   SOFTENED FROM A CARD INTO A FIELD 2026-09-04 — the previous pass's
   diagonal panel (28px radius, 1px hairline border, hard-ish 46/54% colour
   split) fixed the "small isolated pill" complaint but Stuart's read on
   THAT was "still too much like a contained UI/infographic component" —
   i.e. the border and the pronounced rounded-rect silhouette were
   themselves reading as "card," independent of what was inside it. Fix is
   the container language, not the concept: border removed outright,
   radius cut 28->10px (soft-eased corners, well short of "capsule"), and
   the two-tone transition widened from an 8%-wide band (46-54%) to a
   40%-wide one (30-70%) so it reads as an atmospheric wash rather than a
   graphic edge. Same two SVGs, unedited, per this pass's explicit hold —
   only their CONTAINER and POSITION changed. */
.im1-temp {
  margin: 0;
  position: relative;
  height: clamp(360px, 30vw, 460px);
  border-radius: 10px;
  overflow: hidden;
  /* 145deg — a genuine diagonal (135deg would be the exact corner-to-corner
     "slash" the brief explicitly ruled out) but still well short of it,
     chosen to correspond with the icons' own new upper-left/lower-right
     placement below rather than the previous pass's near-horizontal 165deg
     (appropriate when content was centred and symmetric; this pass's
     asymmetric placement reads better against an angle the eye can actually
     see as "corresponding" to it). */
  background: linear-gradient(145deg,
      #EAF4FA 0%, #EAF4FA 30%,
      #FCF1E6 70%, #FCF1E6 100%);
}
/* Content placement — ART-DIRECTED, not centred. Brief's explicit ask:
   "avoid perfect vertical symmetry... COOL slightly upper-left, WARM
   slightly lower-right... respond to the diagonal." Absolute positioning
   instead of the previous pass's flex halves (which forced each icon dead-
   centre in its own equal-height zone) — anchored by percentage of the
   panel's own box so it holds its relative position across the height
   clamp's range, not a fixed pixel offset. */
.im1-temp__half {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.im1-temp__half--cool { top: 20%; left: 16%; }
.im1-temp__half--warm { bottom: 20%; right: 16%; }
.im1-temp__icon svg { display: block; width: 42px; height: 42px; }
.im1-temp__label {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}

/* S5's own copy carries this section only — desktop only, per this pass.
   OLD rhythm relied on the shared :where(.im1) :where(p) staccato-manuscript
   style (17.4px/1.75, 0.85em margin after literally every line, including
   four one-word paragraphs for "Warm."/"Cool."/"Cold."/"Just right.") —
   correct for the rest of this article's long-form voice but reads as a
   teleprompter list at this density. Built as deliberate GROUPING instead:
   tight within a cluster (the two evidence lines, the closing pair), a
   uniform moderate gap between plain lines, and a bigger isolating gap
   around the two bold .im1-beat moments — so the eye reads "evidence" and
   "payoff" as units, not six more lines in the same staccato list.

   Every rule below is qualified `.im1-s5__copy p.im1-s5__ROLE` (or
   `.im1-s5__copy .im1-beat`) rather than the bare class — the bare class
   alone (0,1,0) loses to `.im1-s5__copy p` (0,1,1) regardless of order, the
   same specificity trap this file has hit on every section before this one
   (.im1-s4__mark, .im1-s3__beat, etc.) — pre-empted here instead of
   discovered after. */
.im1-s5__copy p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
}
.im1-s5__copy .im1-beat {
  margin: 16px 0;
  font-size: 18px;
  line-height: 1.4;
}
.im1-s5__copy p.im1-s5__temps {
  margin: 0 0 18px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  /* echoes .im1-temp__label's own treatment (uppercase/tracked/navy/700) so
     this line reads as the copy column's answer to the visual anchor beside
     it, not a coincidence of similar styling. */
}
.im1-s5__copy p.im1-s5__proof {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 48ch;
  /* max-width is a reading-measure guard for wide viewports, not a height
     lever — tested live at max-width:none (full 564px column) and the
     longer paragraph's line count didn't change (still ~6 lines at this
     font-size), so the section-height cut below comes entirely from
     tightening the gaps around this text, not from its own wrap width. */
}
/* the SECOND proof paragraph needs the bigger trailing gap (it's the one
   immediately before "You already know...") — targeted via its own
   adjacency to the first rather than a generic nth-child, so the rule
   reads as "the proof pair's own closing gap" if a third ever gets added. */
.im1-s5__copy p.im1-s5__proof + p.im1-s5__proof {
  margin-bottom: 18px;
}
/* The section's closing line (2026-09-04) — was a 2-line pair in a wrapper
   div ("Science reveals.../Your body recognizes..."), now Stuart's single
   stronger replacement line, so the div wrapper is gone and .im1-s5__anchor
   is the <p> itself. Sized up from the old pair's 19px to 20px — standing
   alone as the section's one closing statement, it can afford to be the
   single largest copy moment in the column rather than splitting weight
   across two lines. */
.im1-s5__copy p.im1-s5__anchor {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.44;
  color: var(--navy);
  max-width: none;
}
/* Tightened to match the rest of this section's rhythm — the shared base
   .im1-h rule's 26px (clamp(18,2vw,26)) was designed for the article's
   generous staccato voice; 18px reads as part of the same condensed system
   as the paragraph gaps below it rather than an outlier. */
.im1-s5 .im1-h { margin-bottom: 18px; }

/* 30/70 split (2026-09-04, was the shared 50/50) — Stuart's explicit ratio:
   "30% left = visual field, 70% right = copy". #temperature (id) safely
   outranks the shared .im1-sec__inner rule regardless of source order, same
   pattern as #the-body-knows's own ratio override above. Gap also tightened
   — the base clamp(32-76px) was sized for two roughly-equal 50/50 columns;
   against a narrower 30% field a 76px gap read as MORE distance between two
   unrelated objects, working against "one composition." */
#temperature .im1-sec__inner {
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: clamp(24px, 3.2vw, 48px);
}

/* This section's own padding — spacing-only pass, 2026-09-04. Top and
   bottom deliberately asymmetric, top the larger of the two: "more
   breathing room from the section above... more editorial/premium" up
   top, "modest" at the bottom. This does NOT reopen the old S4/S5
   white-strip problem — that was the SEAM itself (the photo's own
   trailing padding sitting on white, directly above S5's padding on
   near-white mist, with no colour boundary marking where one section
   ended and the next began). The seam is still a hard 0px colour cut
   (S4's padding-bottom stays 0, untouched here) — this padding is entirely
   INSIDE S5, after that cut, on S5's own --mist background, so it reads as
   this section's own internal air, not an ambiguous gap between two
   sections. Previously top(28-40) < bottom(40-64) — inverted from what a
   normal section wants — because top had to stay small specifically to
   help close that now-fixed seam; bottom had no such constraint and was
   left at a more ordinary size. Now that the seam is solved at the S4 side
   instead, top is free to be the larger of the two, as asked. */
.im1-s5 {
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(48px, 5.5vw, 72px);
}

/* The old sticky behaviour existed to let a short figure keep pace with a
   MUCH longer manuscript column (see .im1-sec__inner's own comment) — with
   the copy this condensed the two columns are close enough in height that
   sticky no longer does anything useful, and detaching the visual from the
   copy while scrolling works against this pass's explicit "one composition,
   not two unrelated objects" goal. #temperature (id) + two classes safely
   outranks the shared rule regardless of its own media-query nesting.
   `relative`, not `static` (2026-09-04 update) — .im1-temp is now the
   positioning context its own absolutely-positioned icon halves anchor to;
   `static` here would have silently sent them looking for the next
   positioned ancestor up the tree instead, since this ID-scoped rule
   otherwise wins over the plain `.im1-temp{position:relative}` base rule
   regardless of source order. Caught by checking this rule specifically
   before assuming the base rule alone would hold. */
#temperature .im1-sec__inner > .im1-temp {
  position: relative;
  top: auto;
  /* Centred against the copy column rather than top-aligned (the grid's own
     align-items:start) — the condensed copy is much taller than the pill
     (710 vs 237px), and top-aligning left all the leftover space stranded
     below the pill as empty mist. Centring reads as "the visual is this
     column's counterpart," not "anchored at the top with a gap trailing
     it." */
  align-self: center;
}

/* ============================================================ EDITORIAL BRIDGE */
.im1-bridge {
  background: var(--paper);
  padding-block: clamp(52px, 7vw, 104px);
}
/* 780->900px (2026-09-04 tightening pass) — tested live before choosing this
   number: the brain question ("If your body is already responding...") only
   drops from 3 lines to 2 at a container >=860px (780/820 still wrap to 3);
   900px clears that with margin AND happens to also push each recap column
   from 362px to 422px, which independently clears the 410px a column needs
   for "Buoyancy changes your relationship with gravity" and "Measurable
   nervous-system changes can begin" to each go from 2 lines to 1 — one
   change serving both of the brief's separate width complaints, confirmed
   together at 900px before committing (not assumed from the two thresholds
   in isolation). No page overflow at 1440 at this width. */
.im1-bridge__inner { max-width: 900px; margin-inline: auto; text-align: left; }
/* Raised ~2.9% (2026-09-04 opening refinement) — Stuart's original ask was
   8-12%, but tested live before committing to that range: at 900px this
   container is wide enough for the title's current text to grow only to
   35px (888.1px ink) before it wraps — 35.5px already breaks to 2 lines,
   with an orphaned single word on the awkward natural break point. No
   value in the requested 8-12% range (37-38px) fits on one line here.
   Surfaced the trade-off directly rather than guess at an interpretation
   of "the title's visual boundary" for a wrapped title — Stuart chose
   keeping the title on one line over the full requested increase, which
   also means the title's one-line width (888.1px) and the deck's own
   one-line width (866.5px, see .im1-s6__open p below) end up close enough
   that neither point 3 nor point 5 need a trade-off either. */
.im1-h--bridge { font-size: clamp(27px, 2.8vw, 35px); }
/* Widened to the title's own one-line boundary (2026-09-04 opening
   refinement) — was capped at the generic 62ch (719.56px) shared by every
   plain paragraph in this article.
   ⚠️ Corrected mid-pass: an early test of the deck's true unbroken width
   used a Range union-box measurement WITHOUT checking its own line count
   first — it was silently already 2-line-wrapped, so the "866.5px, fits
   on one line" reading was wrong. Re-measured properly with
   `white-space:nowrap` (which forces genuine single-line layout regardless
   of container width): the real number is 953.3px — wider than even the
   full 900px section container, let alone the title's 888.1px one-line
   boundary. No max-width alone gets this onto one line; the point 6
   fallback ("reduce the deck size very slightly") was actually needed.
   17.4px (the shared base paragraph size) -> 16px tested to fit at
   876.9px, ~11px inside the 888.1px boundary — 16.2px (887.9px) also
   technically fit but left only 0.2px of margin, too fragile to ship. */
/* Balanced under the title's own box via an explicit width + margin-left
   (2026-09-04 alignment refinement, revised) — NOT `text-align:center`
   (reverted): a deliberate placement, not a computed auto-centre. Deck's
   one-line content needs 876.9px min; width:878px gives a couple of px of
   safety. margin-left:5px shifts its left edge from 262.3 (the column's
   own left edge, where the title also starts) to 267.3, landing the
   block's centre within ~1px of the title's own measured centre (706.35)
   while keeping both edges inside the title's own span (262.3-1150.4).
   Title stays left-aligned and untouched — only the deck moved.
   ⚠️ `max-width:none` is required, not optional — the shared
   `:where(.im1) :where(p){max-width:62ch}` has zero specificity but still
   applies when nothing overrides it; ch is computed per this element's OWN
   font-size, so at 16px that's ~661.7px, not the 719.56px it was at the
   base 17.4px. Omitting max-width here let that old cap silently clamp
   the explicit width:878px back down to 661.7px and force a 2-line wrap —
   caught by re-measuring after the first attempt, not assumed correct. */
.im1-s6__open p { width: 878px; max-width: none; margin-left: 5px; font-size: 16px; }
/* Restructure pass (2026-09-04) tightened this section's own padding and
   the heading's trailing gap — measured the FULL rebuilt section at 1133px
   against a reconstructed pre-rebuild baseline of 1413px (only 20% shorter)
   before touching any of this: the restructure itself wasn't the whole
   story, the section's generous shared `.im1-bridge{padding-block:clamp(
   52,7vw,104)}` and the base `.im1-h` 26px trailing margin were both still
   sized for the OLD 17-line manuscript, not the new compact structure. */
/* Bottom cut further (2026-09-04) — the closing transition line is gone
   (the brain question is now the section's literal last element) and the
   brief explicitly asked to eliminate the "large white runway" before
   Founder Perspective, not just trim it. Top left alone — not in scope for
   this pass. */
/* Top raised again (2026-09-04 opening refinement, 40->56px at 1440) — the
   larger heading needs more room above it to breathe; bottom untouched,
   not part of this pass. */
.im1-s6 { padding-top: clamp(40px, 4.4vw, 56px); padding-bottom: clamp(16px, 1.8vw, 24px); }
/* Tightened again this pass (8->4px) — matches this article's S4/S5
   title-deck cluster gap (6px) even more closely now that the deck is
   centred under the title rather than left-aligned like body copy; "read
   as one unit" per this pass's explicit ask. */
.im1-s6 .im1-h--bridge { margin-bottom: 4px; }

/* THE PART II BRIDGE — the section's one dominant visual moment, 2026-09-04.
   Was a mist-tinted, rounded, left-bordered callout box (padding+background+
   border-radius) — read as a highlighted "box", which Stuart's brief
   explicitly ruled out ("no generic gray box... elegant editorial statement,
   not CTA"). Background/padding/border-radius all removed outright — the
   statement now sits directly on the section's own paper background, its
   only separator the existing `.im1-rule` element placed just above it in
   the HTML (REUSED as-is, not a new component: same 92x3px orange bar
   already used elsewhere in this article under eyebrows). Size raised
   19-24px -> 28-38px clamp: "large Libre Baskerville" per the brief, and
   consistent with this article's own established pull-quote scale rather
   than a size invented for this one instance. `strong{font-weight:400}`
   kept — the semantic <strong> stays for meaning, but Libre Baskerville at
   this size reads as an elegant statement in its own regular weight, not
   bold, same reasoning as when this rule was first written. */
.im1-wonder {
  /* Both margins cut again this pass — top (gap to the rule above) per
     "tighten the spacing between the orange rule and the question"; bottom
     because this is now the section's actual last element (the closing
     transition line was removed), so it also governs the runway into
     Founder Perspective alongside the section's own reduced bottom
     padding above. */
  margin: clamp(4px, .6vw, 8px) 0 clamp(16px, 2vw, 24px);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--f-quote);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.4;
  color: var(--navy);
  max-width: none;
}
.im1-wonder strong { font-weight: 400; }
/* Rule's own margins tightened JUST for this section — the shared
   `.im1-rule` class (30px/32px top/bottom) is used elsewhere under short
   eyebrow labels, where that spacing is correct; here it sits between two
   full paragraphs in an already-condensed section, so the tighter values
   read as part of the same rhythm rather than the shared default. */
/* Given more room again (2026-09-04, final refinement) — 8px read as
   "squeezed" between the nuance line and the large question. 24px on both
   sides is enough on its own (it's the larger value in both adjacent
   margin-collapses, against nuance's 8px-bottom and wonder's 8px-top), so
   neither of those two rules needed touching to get real breathing room
   on both sides of the rule. */
.im1-s6 .im1-rule { margin: 24px 0; }

/* TWO-COLUMN RECAP (2026-09-04) — replaces a 14-line staccato paragraph
   stack (one fact per line, including single-word lines like "Energy.")
   with a compact side-by-side accumulation. Explicit brief constraint: "do
   not style these as a UI checklist... no cards, no boxes, no oversized
   icons" — column labels reuse `.im1-eyebrow` as-is (this article's own
   established small-caps/tracked role) rather than a new label style, and
   list items get only a small low-contrast dot via ::before — no
   checkmarks, no numbering, no borders, no per-item background. */
.im1-s6__recap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(28px, 4.5vw, 56px);
  /* Top increased this pass (22->44px at 1440) — "increase the spacing
     between the deck and the two-column content below so the hierarchy is
     clearer," now that the title+deck read as a tighter cluster above it.
     Bottom (gap to the nuance line) left alone, not part of this ask. */
  margin: clamp(32px, 4vw, 44px) 0 clamp(8px, 1vw, 12px);
}
.im1-s6__recap .im1-eyebrow { margin-bottom: 8px; }
.im1-s6__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.im1-s6__list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.im1-s6__list li:last-child { margin-bottom: 0; }
.im1-s6__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aqua-ink);
}

/* THE NUANCE LINE — "visually quieter than the main recap" per the brief:
   smaller, softer ink, no bold/emphasis device of its own. */
/* Recentred across the full width and forced to one line (2026-09-04,
   final refinement pass) — was left-aligned and capped at 58ch, which sat
   it flush with the left recap column, reading as if it belonged there.
   `max-width:none` lets its box fill the full 900px `.im1-bridge__inner`
   (confirmed live first: even at the OLD 14.5px size the sentence already
   fits on one line at that width, 839.7px ink — the 58ch cap was the only
   thing forcing the wrap, not an actual space shortage), and
   `text-align:center` centers the ink within that full-width box, so it
   now relates back to the title/deck above rather than to either column. */
.im1-s6__nuance {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.65;
  font-style: italic;
  color: var(--ink-soft);
  max-width: none;
  text-align: center;
}

/* ============================================================ FOUNDER PERSPECTIVE
   REBUILT 2026-09-05 — the oversized navy rounded card is gone entirely.
   Stuart's framing this pass: "a Founder Note / editorial interlude, not
   part of the article sequence" — a soft aqua wash instead of a boxed
   card, so it reads as a distinct, calmer register than the article
   proper rather than a callout competing with it. Every text colour below
   changed accordingly (light-on-navy -> dark-on-pale-wash) — verified via
   direct contrast sampling after implementing, not assumed safe just
   because the site's own --ink/--navy tokens are used elsewhere. */
.im1-founder {
  /* FINAL BACKGROUND PASS (2026-09-05) — was a 135deg diagonal; changed to
     a strict 90deg left-to-right wash per an explicit final brief: "very
     pale aqua" on the left gradually becoming "slightly richer aqua-blue"
     toward the right, "atmospheric and editorial, not decorative." Same
     two stops as before (kept deliberately, "keep the current aqua
     wash") — a barely-tinted near-white through to a light, clearly-aqua
     tone. Neither stop is the site's full-saturation --aqua (#7FD1F0),
     which would read as loud/saturated across this much surface area; a
     plain two-stop gradient over a section this wide is inherently smooth
     (no banding, no visible split). */
  background: linear-gradient(90deg, #F3FBFC 0%, #D6EDF3 100%);
  padding-block: clamp(56px, 7vw, 96px);
}
.im1-founder__inner {
  /* was the navy card's own box (background/border-radius/padding) — all
     removed. .im1-wrap (inherited via the shared class on this same
     element) still centres and insets the content horizontally; no
     separate "inner" treatment is needed now that there's no card. */
}
.im1-founder__label {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* was var(--aqua) — the bright brand aqua reads fine on navy but is too
     light-on-light against this pale wash; --aqua-ink is the same WCAG-
     safe darker aqua this article already uses for every other eyebrow
     label on a light background (S3/S4/S5). */
  color: var(--aqua-ink);
}
/* THE VISIBLE TITLE — first made visible 2026-09-05 (was screen-reader-
   only), text replaced same day: "How My Clients Responded" (was "How
   They Responded to Being There.", which duplicated the body copy's own
   `.im1-founder__strong` line verbatim — the new title removes that exact
   repetition on its own, before any layout change). Deliberately NOT the
   shared `.im1-h` class this article's other section titles use (serif
   display face, uppercase transform) — Cabin + real title case instead,
   reinforcing "not part of the article sequence." Margin tightened
   36px->4px now that an optional deck sits directly beneath it — this
   article's own established title-deck cluster spacing (S4/S5/S6 all use
   a 4-8px gap for the same reason). */
.im1-h--founder {
  font-family: var(--f-founder);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 4px;
  text-transform: uppercase;
}
/* THE OPTIONAL DECK (2026-09-05) — "TO GETTING IN THE WATER", continuing
   the title's own sentence ("How My Clients Responded" + "To Getting in
   the Water"). Smaller and lighter than the title but still a deliberate
   second tier, not body copy — same family of treatment as this article's
   other title/deck pairs, just in Cabin instead of the shared sans. */
.im1-founder__deck {
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  font-family: var(--f-founder);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: var(--navy);
}
/* TWO-COLUMN COMPOSITION (2026-09-05) — "a tighter 2-column editorial
   composition... reduce repetition." Split at the most natural narrative
   break in the copy: everything through "And once we started moving..."
   (the observation itself) sits in column 1; "Those observations aren't
   scientific evidence..." (which explicitly refers back to all of column
   1 as "those observations") opens column 2, through the closing pair.
   Wording, grouping classes (.reason/.turn/.strong/.beat/.pivot/
   .strongest/.final) and their spacing all carry forward unchanged from
   the single-column build — only the container changed. */
.im1-founder__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  position: relative;
}
/* subtle vertical hairline in the gap — a brief hint (not an edge-to-edge
   rule) spanning roughly the 3rd line down to the 3rd line up from the
   bottom, guiding the eye down one column before crossing to the other */
.im1-founder__grid::before {
  content: "";
  position: absolute;
  top: 93px;
  bottom: 139px;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 51, .06);
  transform: translateX(-50%);
}
.im1-founder__copy { min-width: 0; }
/* RESTRUCTURED INTO EDITORIAL BEATS (2026-09-05) — was 20 flat <p>s sharing
   one uniform margin (the shared global .85em ~15.3px at this font-size),
   including four one-word-ish lines for "Enthusiasm./Energy./Relief./
   Curiosity." — reads as a teleprompter at that density. Wording,
   font-family (Cabin, var(--f-founder)) and the navy field/aqua eyebrow are
   all untouched per the brief — every change below is layout/hierarchy
   only, via new classes on the EXISTING <p>s (no text added or reworded).
   Base margin set explicitly (12px, "normal prose" tier) rather than left
   to inherit the shared staccato .85em — every more/less-tight group below
   overrides it deliberately, not by accident of specificity. */
.im1-founder__copy p {
  font-family: var(--f-founder);
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink);
  max-width: none;
  margin: 0 0 12px;
}
.im1-founder__copy p:last-child { margin-bottom: 0; }
.im1-founder__copy strong { color: var(--navy); font-weight: 700; }

/* VERTICAL RHYTHM PASS (2026-09-05) — "let the meaning control the
   whitespace, not uniform paragraph margins." Three explicit tiers now,
   reused consistently across both columns rather than one-off numbers per
   spot: FLOWING (4-8px, sentences that are one continuous thought),
   CLEAR PAUSE (36px, a real narrative turn), LARGEST PAUSE (48px, reserved
   for the one moment the whole section builds to). Layout/colours/copy/
   width all untouched — every change below is a margin, a weight, or a
   letter-spacing value. */

/* OPENING NARRATIVE — tightened again (6px->4px) so the six "why clients
   entered the water" lines read as one flowing thought rather than a
   list, per this pass's explicit ask. */
.im1-founder__copy p.im1-founder__reason { margin-bottom: 4px; }

/* THE TURN — now its OWN beat (beat 2 of 3: "what I began noticing"),
   standing alone between the reasons cluster (beat 1) and the "how they
   responded" cluster (beat 3). Both surrounding gaps are now the CLEAR
   PAUSE tier: top stays 36px (unchanged), bottom raised 8px->36px — the
   previous pass's "keep the next line visually close" instruction is
   superseded by this pass's explicit 3-beat structure, where the turn
   is its own separated moment, not glued to the strong line after it. */
.im1-founder__copy p.im1-founder__turn {
  margin-top: 36px;
  margin-bottom: 36px;
  font-weight: 700;
  color: var(--navy);
}
/* BEAT 3 ("how they responded") — the strong line, "There could be", and
   the response-word beat now read as ONE tight cluster: strong's own
   trailing margin cut 24px->8px (FLOWING tier) so "There could be" sits
   close beneath it. */
.im1-founder__copy p.im1-founder__strong {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 8px;
}
/* "There could be" — new short lead-in line before the response beat,
   FLOWING tier on both sides (tight to .im1-founder__strong above via
   margin collapse, tight to the beat below via its own 4px). */
.im1-founder__copy p.im1-founder__lead { margin-bottom: 4px; }

/* RESPONSE BEAT — wording updated this pass: "Energy." dropped,
   "Trepidation."/"Anticipation." added (5 words now, was 4) — Stuart
   supplied this exact replacement list. Still bold navy + slight tracking
   (kept from last pass — "one stronger rhythmic beat" still applies).
   `:last-child` here targets the DIV itself (this is now the left
   column's actual last child) — the shared `.im1-founder__copy
   p:last-child{margin-bottom:0}` rule only matches <p> elements, so
   without this the beat's own 24px trailing margin would have survived
   as unwanted extra height at the bottom of column 1 alone. */
.im1-founder__beat {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  margin: 0 0 24px;
}
.im1-founder__copy > .im1-founder__beat:last-child { margin-bottom: 0; }
.im1-founder__beat p {
  font-family: var(--f-founder);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.78;
  color: var(--navy);
  margin: 0;
}

/* LEFT/RIGHT SCALE BALANCE (2026-09-05) — "refine spacing and scale so the
   two columns feel visually balanced." Shortening the left column's copy
   this pass (2 lines trimmed, the beat's own lead-in split out) made it
   noticeably shorter than the right column even after the spacing changes
   above (430.1px vs 490.3px, a real 60px gap).
   ⚠️ First attempt used one ~1.08x scale on every left-column font-size at
   once and measured 491.9px — a seemingly perfect balance that was
   actually silently broken: at that scale "But I also began noticing..."
   (the column's longest line) had wrapped to two lines, which the brief
   explicitly forbids ("each line staying on ONE line"), and the extra
   wrapped line's own height was exactly what was inflating the total.
   Re-tested properly per element instead, holding the turn line fixed
   (see its own rule below) and checking each OTHER element's real
   one-line/one-row ceiling before choosing its size — the response beat
   has a hard ceiling around 22.5px before its flex row wraps to two rows
   (tested: 22.5px = 1 row, 22.8px = 2 rows). Final combination, confirmed
   live with zero wraps anywhere: reasons/lead 22px, strong 29px, beat
   22px — lands column 1 at 492.8px against column 2's 490.3px (2.5px
   apart). Right column untouched throughout — the balance came entirely
   from the left column's own scale. */
/* Both classes named in the first two selectors (not just the modifier
   alone) — `.im1-founder__copy--left p` alone would tie in specificity
   with the base `.im1-founder__copy p` (both 0,1,1) and only win by
   source order, the exact trap this file has documented repeatedly.
   Naming both classes reaches (0,2,1), an unambiguous win regardless of
   order. */
.im1-founder__copy.im1-founder__copy--left p { font-size: 22px; }
.im1-founder__copy.im1-founder__copy--left p.im1-founder__strong { font-size: 29px; }
.im1-founder__copy--left .im1-founder__beat p { font-size: 22px; }
/* The turn line ("I began noticing...") no longer needs its own font-size
   exception — Stuart shortened the wording (2026-09-05, was "But I also
   began noticing something that wasn't written on an intake form.") so it
   now fits on one line at the column's own 22px (540.6px ink, tested live,
   comfortably inside the 568px column). It inherits 22px from the general
   `.im1-founder__copy.im1-founder__copy--left p` rule above; the old
   18px override rule is removed rather than left dead. */

/* RIGHT COLUMN COMPACTION PASS (2026-09-05) — right column only, per an
   explicit brief: tighten line-height on the paragraphs that actually
   wrap to two lines (measured live first — exactly three do: .obs, the
   new .layer class below, and .explain; the other five right-column
   paragraphs are single-line and were left at the column's normal 1.78
   so their own box height stays consistent with the rest), and pull four
   named gaps in from 6px to 4px. The larger pause before "Is there more
   happening here than exercise?" (.strongest's 48px margin-top) and
   every left-column rule/the divider are untouched. */
.im1-founder__copy p.im1-founder__obs {
  margin-bottom: 4px;
  line-height: 1.6;
}
/* "And once we started moving..." — previously untagged; this class
   exists only to give the second wrapping sentence the same tightened
   line-height as .obs above, no wording touched. */
.im1-founder__copy p.im1-founder__layer { line-height: 1.6; }

/* THE SCIENCE PIVOT — same CLEAR PAUSE tier as the turn above (28px->
   36px) — these two moments are structurally parallel (a setup sentence
   interrupting the narrative), so they share the same pause size rather
   than each getting an independently-chosen number. Bottom margin (the
   tight connection to "They are simply...") pulled in further this pass,
   6px->4px. */
.im1-founder__copy p.im1-founder__pivot {
  margin-top: 36px;
  margin-bottom: 4px;
}
/* "Keep the following explanation and lead-in to the question closer
   together" — gap tightened further this pass, 6px->4px, and its own
   line-height tightened to 1.6 since it's one of the three that wraps to
   two lines. */
.im1-founder__copy p.im1-founder__explain {
  margin-bottom: 4px;
  line-height: 1.6;
}

/* THE CLOSING QUESTION — "give the LARGEST pause" before this line: 28px
   -> 48px, deliberately bigger than the 36px CLEAR PAUSE tier used for the
   turn/pivot above. This is the one moment the whole section builds
   toward, so it gets the section's own biggest gap, not just another
   "clear pause." */
.im1-founder__copy p.im1-founder__strongest {
  font-size: 30px;
  line-height: 1.4;
  margin-top: 48px;
  margin-bottom: 20px;
}
/* CLOSING THOUGHT — gap to "What it does give us..." pulled in further
   this pass, 6px->4px. */
.im1-founder__copy p.im1-founder__final { margin-bottom: 4px; }

/* ============================================================ READER VOICE
   RESHAPED (2026-09-05) — repositioned as a reader-perspective/participation
   moment, not another article section: much shorter (the long list of
   suggested feelings/questions is gone), centered, and built around the
   Reader Experience response graphics as the actual centerpiece rather
   than a small atmospheric row. Background/font-family/heading system all
   untouched — this is a composition change, not a new style language. */
/* PASS #3 (2026-09-05) — "the last two passes are still too loose... 20-25%
   shorter... do not vertically center inside an oversized section." Top
   padding cut, bottom cut harder still (32px/16px, asymmetric on purpose
   so the section doesn't read as centered inside dead space) — desktop-
   only fixed px, not the shared clamp() rhythm every other section uses,
   since this section specifically needed to break from that rhythm. */
/* PASS #5 (2026-09-05) — outer separation only, per an explicit "do not
   alter the internal layout or pebble geometry" brief. Pass #4's 40/45
   nudged up slightly more (56px top / 64px bottom) for a cleaner
   editorial arrival from Founder Perspective above and more finishing
   room before Part II Teaser below. Internal composition (title/copy/
   pebble scale/gaps) untouched — verified byte-identical below this
   rule. */
.im1-voice {
  background: var(--voice);
  padding-block: 56px 64px;
}
.im1-voice__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
/* `.im1-h.im1-h--voice` (both classes) rather than the modifier alone —
   `.im1-h--voice` by itself ties in specificity with the shared base
   `.im1-h` (both 0,1,0) and would only win by source order, the same trap
   documented throughout this file. */
/* FORCED 2-LINE BREAK (2026-09-05) — "HOW DOES GETTING INTO THE WATER /
   MAKE YOU FEEL?" exactly. Measured live at this section's actual 36px
   desktop font-size (Bodoni Moda, uppercase): the phrase up to and
   including "Water" renders at 698.1px; up to and including "Water Make"
   renders at 815.3px. 750px sits in between, so the line wraps after
   "Water" with real margin on both sides rather than a razor-thin
   threshold. Fixed px, not a responsive clamp/ch value — this is a
   desktop-only, viewport-specific break point, not a fluid rule. */
.im1-h.im1-h--voice {
  font-size: clamp(26px, 2.9vw, 36px);
  max-width: 750px;
  margin-inline: auto;
  margin-bottom: 6px;
}
.im1-voice__copy {
  max-width: 62ch;
  margin-inline: auto;
}
/* PASS #6 (2026-09-05) — "make the reader/body copy feel more
   substantial relative to the pebbles." Body text bumped 17.4px->19px
   (the shared article-wide `:where(.im1) :where(p)` rule is untouched —
   this is scoped to `.im1-voice__copy p` only). 19px also happens to
   match `.im1-question`'s own already-set size, so every line in this
   section now reads at one consistent scale rather than two. Line-height
   is the shared unitless 1.75, so it scales with the new font-size
   automatically — no separate override needed. Title size (36px,
   `.im1-h.im1-h--voice`) deliberately untouched. */
.im1-voice__copy p { font-size: 19px; }
/* PASS #3 — every gap cut again, all scoped to `.im1-voice__copy` (never
   the bare shared classes — `.im1-beat`/`.im1-question` are also used by
   S3-S5). `.im1-voice__intro` is new: the two plain opening lines ("Not
   after the workout."/"Not after the swim.") had no class to hook a
   tighter margin onto before now. `.im1-beat`'s margin-TOP is overridden
   here too (pass #2 left it inherited) since the intro-to-beat gap still
   needed to come down. */
.im1-voice__copy .im1-voice__intro { margin-bottom: 8px; }
.im1-voice__copy .im1-beat { margin-top: 8px; margin-bottom: 6px; }
/* opening title/deck block left as pass #3 built it, per this pass's own
   "keep close to current spacing" instruction — only the margin-bottom
   below (leading into the pebbles) changes here. */
.im1-voice__copy .im1-question { margin-top: 6px; margin-bottom: 10px; }

/* THE CENTERPIECE, PASS #4 — pebble artwork itself sized down ~18%
   (168px->138px tall; word glyphs are baked into the PNG/WEBP pixels, so
   they scale down WITH the shape — there's no way to hold the word at
   its old size independent of the shape without re-exporting the source
   art, which is out of scope here) chosen toward the gentle end of the
   requested 15-20% so the words read as close to their old size as this
   asset allows. Recovering height here (not from outer padding, which
   this pass restores) is what "compact center" means for this section.
   Rows pulled to margin-top:20px/margin-bottom:28px (asymmetric — more
   air leading in from "What do you notice?" and out to the closing
   copy, both at this pass's own low-end targets) and both internal gaps
   cut again (row-gap 4px->2px, column-gap 10px->6px) so the 5 pebbles
   read as one tucked constellation rather than two separate rows —
   still never touching (the organic blobs sit well inside their own
   image bounds, confirmed live). */
.im1-voice__words {
  list-style: none;
  margin: 20px auto 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
  column-gap: 6px;
  /* was 900px — at the smaller 128px-tall pebble width (213px), 900px
     was wide enough to fit 4 across, silently breaking the 3-over-2
     layout into 4-over-1. 700px sits comfortably above the width 3
     pebbles actually need (652px) and below what a 4th would need
     (871px), so the wrap is forced correctly regardless of exact pebble
     size going forward. */
  max-width: 700px;
}
/* Pebble artwork sized down again, ~7% (138px->128px tall), per this
   pass's own "reduce another 5-8% if needed to preserve balance" now
   that the body copy above is larger — same caveat as before: the word
   glyphs are baked into the PNG/WEBP pixels, so they scale down with the
   shape; chosen at the gentle end of the range to keep them reading as
   close to full-strength as this asset allows. */
.im1-voice__words img {
  display: block;
  height: 128px;
  width: auto;
}
.im1-voice__copy--close { margin-top: 10px; }
.im1-voice__copy--close p { margin-bottom: 10px; }

/* ============================================================ PART II TEASER */
.im1-next {
  background: var(--paper);
  padding-block: clamp(52px, 7vw, 104px);
}
.im1-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4.6vw, 72px);
  align-items: center;
}
.im1-eyebrow--next { color: var(--orange-ink); }
.im1-h--next { font-size: clamp(26px, 3vw, 38px); max-width: 16ch; }
.im1-next__deck {
  font-family: var(--f-quote);
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
}
.im1-figure--next img { aspect-ratio: 592 / 346; object-fit: cover; }
/* EDITORIAL PACING PASS (2026-09-05) — tighten just the middle sequence
   ("Part I established..." / "Part II follows... inward" / the closing
   question) so it reads as one connected handoff, not three separately-
   spaced lines. Eyebrow/title/deck and their own surrounding spacing are
   untouched — only scoped to the two new plain paragraphs and the
   question's own margin-top, both via `.im1-next__copy` so nothing
   leaks to `.im1-question`'s other uses elsewhere in the article. */
.im1-next__copy .im1-next__seq { margin-bottom: 8px; }
.im1-next__copy .im1-question { margin-top: 16px; }

/* ============================================================ SOURCES */
/* COMPACT EDITORIAL BACK MATTER (2026-09-05) — "the current basic sources
   section" turned into premium back matter: condensed citation list, a
   real "Cite This Article" block after it, and the old rounded
   "Scientific Boundary" card replaced by a full-bleed, low-profile
   "Editorial Standard" band below (own section, own background — not
   nested inside this white one, so it reads as a closing band, not
   another card floating in the list). Padding cut from the old
   clamp(48,6vw,92) — this is meant to feel like the back of a printed
   piece, not another full article section. */
.im1-sources {
  background: var(--paper);
  border-top: 1px solid var(--hair);
  padding-block: clamp(36px, 4.5vw, 60px);
}
.im1-sources__inner { max-width: 940px; margin-inline: auto; }
/* `.im1-h.im1-h--sources` (both classes) — `.im1-h--sources` alone ties
   in specificity with the shared base `.im1-h` (both 0,1,0), the same
   trap documented throughout this file. Reverted to the shared `.im1-h`
   margin-bottom (this pass removed the flex head row a prior pass added
   for a small inline utility — the heading is a standalone block again). */
.im1-h.im1-h--sources { font-size: clamp(24px, 2.5vw, 32px); }

/* BACK MATTER TOP BAND — pass #3 (2026-09-05): Editorial Standard and
   Cite This Article pulled OUT of the sources list entirely and placed
   ABOVE it as a peer 60/40 split, matching "the POW/MYG treatment."
   Restrained wash (`--mist`, the same pale aqua/gray token used
   elsewhere in this file — not new), a thin top hairline instead of a
   card, no border-radius. Column split via CSS Grid `3fr 2fr` (60/40);
   the vertical hairline reuses the exact technique from the Founder
   Perspective section (S7) earlier in this article — a `::before` on
   the grid container, centered on the real gap midpoint. Because a
   60/40 split's gutter does NOT sit at the container's 50% line, the
   `left` value below is the ACTUAL measured midpoint between the two
   columns at 1440px (not `left:50%`, which would land ~5px off-center
   at this ratio). */
/* PASS #4 (2026-09-05) — "premium-editorial, less administrative,"
   using MMH's back matter as structural inspiration only (not copied).
   Padding and column gap both opened up ("increase breathing room");
   divider shortened to float between the headings and the copy's end
   (same floating-hairline technique as the Founder Perspective section,
   not full-height) and lightened further for "shorter, subtler." */
.im1-backmatter {
  background: var(--mist);
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 4.6vw, 64px);
}
/* PASS #5 (2026-09-05) — small refinements only. Gutter (grid `gap`)
   pulled in slightly (72px->56px cap) to give both columns — the CITE
   column especially — more usable width without touching the 60/40
   ratio itself; the pseudo-element divider's `left` is re-measured
   below since the gutter's real midpoint shifts with the gap. */
.im1-backmatter__inner {
  max-width: 940px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(36px, 4.2vw, 56px);
  position: relative;
}
.im1-backmatter__inner::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 32px;
  left: 558px;
  width: 1px;
  background: rgba(0, 0, 51, .07);
}
.im1-backmatter__label {
  margin: 0 0 10px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
/* Editorial Standard — "visually important and easy to read": sized up
   from the previous pass's shared 14px so it doesn't get visually
   overpowered by the now-taller, more detailed stacked citation block
   beside it. */
.im1-backmatter__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: none;
}

/* CITE THIS ARTICLE — reformatted into a real stacked citation block
   ("clean stacked... not a dense paragraph") — each line its own row,
   modest space between them, the URL set apart with more room above it
   and put on its own line so it "reads cleanly without feeling
   cramped." Sized slightly smaller than Editorial Standard's prose
   (14px vs 15.5px) — a citation reads as reference material, not the
   editorial statement, even though both are peers in the layout. */
.im1-citeblock__line {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink-soft);
  max-width: none;
}
/* URL line: slightly smaller than the 14px citation text but heavier
   (the link itself goes to 600, up from 400) "so it stays intentional
   and readable" rather than reading as a stray fragment. */
.im1-citeblock__url {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.25;
  max-width: none;
}
/* The article title line measured 360.2px natural width against a
   347.2px column at 14px/normal tracking — wrapped to 2 lines with just
   the closing `I)"` orphaned. A small negative letter-spacing (measured
   live, not guessed) closes that ~13px gap without needing a visibly
   different font-size from the other stacked lines. */
.im1-citeblock__title { letter-spacing: -.035em; white-space: nowrap; }
.im1-cite__link {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  overflow-wrap: break-word;
}
.im1-cite__link:hover,
.im1-cite__link:focus-visible { color: var(--aqua-ink); border-bottom-color: var(--aqua-ink); }

/* Clean hanging-number list — a real hanging indent (custom counters,
   not the browser's native `<ol>` marker box) so wrapped lines align to
   the text, not the number, and the number can be styled on its own.
   Type condensed (14.5px->13px), line-height tightened (1.7->1.5), and
   spacing between citations cut (1.05em->.6em) per "more condensed."
   PubMed/NCBI links kept but quieted: weight 600->400, the saturated
   aqua-ink swapped for the same muted ink-soft as the citation text
   (still underlined, so still visibly a link) — "visible but visually
   quieter." */
.im1-refs {
  counter-reset: refnum;
  list-style: none;
  margin: 0;
  padding: 0;
}
.im1-refs li {
  counter-increment: refnum;
  position: relative;
  padding-left: 1.8em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: .6em;
}
.im1-refs li:last-child { margin-bottom: 0; }
.im1-refs li::before {
  content: counter(refnum) ".";
  position: absolute;
  left: 0;
  color: var(--aqua-ink);
  font-weight: 700;
}
.im1-refs em { color: var(--ink); font-style: italic; }
.im1-refs__link {
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.im1-refs__link:hover,
.im1-refs__link:focus-visible { color: var(--aqua-ink); border-bottom-color: var(--aqua-ink); }
.im1-refs__back {
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 4px;
  font-size: 1.05em;
}
.im1-refs__back:hover,
.im1-refs__back:focus-visible { color: var(--aqua-ink); text-decoration: underline; }

/* ============================================================================
   TABLET — preserve hierarchy and the meaningful crops rather than uniformly
   scaling the desktop page (09_CLAUDE_BUILD_AND_QA responsive priorities).
   ============================================================================ */
@media (max-width: 1023px) {
  /* the hero keeps its overlap construction here — the copy-width formula
     (47.3vw) already holds the title clear of the fade at this size */
  /* the hero label needs 461px at desktop settings but the copy column is only
     ~402px here, so it eases down just enough to hold one line further */
  .im1-hero__copy .im1-eyebrow { font-size: 12.5px; letter-spacing: .08em; }
  .im1-sec__inner,
  .im1-next__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 44px); }
  /* parity only — matches the gap the old markup inherited from .im1-sec__inner */
  .im1-s3__top { gap: clamp(26px, 4vw, 44px); }
  .im1-temp { max-width: none; }
}

/* ============================================================================
   IPAD PORTRAIT ONLY — 720-834px.
   Nothing here can reach desktop (>=1024), landscape tablet (1024/1194) or
   phone (<=719); the range is bounded at both ends on purpose.

   Measured before changing anything, at 834 (client 819):
       copy column 48.2% / 370px of text   deck wrapped to 4 lines
       eyebrow wrapped to 2 lines          title 50.9px
   The desktop split was being held too rigidly and the text side was starved.
   ============================================================================ */
/* Upper bound 850, not 834. At dpr 1.2 the media width lands fractionally above
   834, so `max-width:834px` measured FALSE at innerWidth 834 while 835 matched —
   an exact bound excludes the very device it targets (iPad Pro 11" portrait).
   850 clears it with margin and still cannot reach landscape tablet (1024+). */
@media (min-width: 720px) and (max-width: 850px) {
  /* Text field still gets the larger share, but 45/55 rather than 42/58.
     Reason: at 819px a 42% photo is only 344px wide, so its natural height is
     280px — every pixel of hero height beyond that was being paid for in
     horizontal crop. Three points of width buys height for free instead. */
  .im1-hero__copy { width: 55%; }
  .im1-hero__figure { width: 45%; }

  /* Eased again (44 -> 40) so the copy block is SHORTER, which lets the row sit
     near the photo's own 1.229 aspect instead of forcing a crop to reach height.
     Still 3 lines, still the authored THE MOMENT / WATER / MEETS YOU break. */
  .im1-hero__title { font-size: 40px; line-height: 1.08; }

  /* the deck's 34ch cap — not the column — was what forced four lines */
  .im1-hero__deck { max-width: none; font-size: 16px; }

  /* compression, not redesign */
  .im1-hero__copy .im1-eyebrow { margin-bottom: 12px; }
  .im1-rule { margin-block: 16px 18px; }

  /* Hero gaps set to the SAME value section 1 uses for its top padding, so the
     space under the deck and the space above the opening copy read as one
     rhythm across the boundary. Measured mismatch before: 53 vs 43.
     The 6px desktop nudge is dropped here — it made the two hero gaps unequal
     (51 top / 53 bottom) by pushing the block off centre. */
  .im1-hero__copy {
    padding-block: clamp(40px, 5.2vw, 76px);
    top: 0;
  }

  /* NO min-height. Forcing the row taller (400px, and 470px before that) is
     exactly what was cropping the photo — the box got further from 1.229 and
     the image had to be scaled up to fill it. Letting copy+padding set the row
     lets the image sit back down and show more of the frame. */

  /* what crop remains is taken off the empty water at the left, so she and the
     ladder stay whole — 01_BUILD_BRIEF protects both */
  .im1-hero__img { object-position: 65% 50%; }
}


/* ============================================================================
   MOBILE — recompose. Image leads the hero so the page opens on the threshold
   image the brief protects, then the title. Every pairing stacks image-first so
   the subject is never orphaned from its section.
   ============================================================================ */
@media (max-width: 719px) {
  .im1-hero { padding-block: 0 clamp(28px, 6vw, 40px); }
  /* the threshold image leads on a phone — 01_BUILD_BRIEF protects it as the
     first thing the reader meets. flex + order, because display:block would
     just follow source order and put the copy first. */
  /* stacked: the overlap and the fade both stop making sense once the photo is
     full-bleed with nothing beside it */
  .im1-hero__inner { display: flex; flex-direction: column; align-items: stretch; }
  .im1-hero__copy,
  .im1-hero__figure { grid-area: auto; }
  .im1-hero__figure {
    order: -1;
    width: 100%;
    aspect-ratio: 16 / 11;   /* the figure carries it here too, not the img */
    margin-bottom: clamp(22px, 5vw, 32px);
  }
  .im1-hero__img {
    object-position: 58% 50%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .im1-hero__copy { width: auto; padding-inline: 24px; top: 0; }
  .im1-hero__deck { max-width: none; }

  /* stacked: the rail becomes a single row above the copy, so a descending
     hairline has nothing to run alongside. Icon stays, hairline goes. */
  .im1-opening__inner { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); align-items: start; }
  :where(.im1-opening) :where(p) { font-size: 17px; }
  .im1-opening__lead { font-size: 18.5px; }
  .im1-opening__emph { font-size: 25px; max-width: none; }
  .im1-opening__close { max-width: none; }

  .im1-sec__inner,
  .im1-next__inner { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 34px); }
  /* figure first on every stacked pairing, whatever the source order */
  .im1-sec__inner > .im1-figure,
  .im1-sec__inner > .im1-illus,
  .im1-sec__inner > .im1-temp,
  .im1-next__inner > .im1-figure { order: -1; }
  /* These stay GRID. Switching them to a flex column turned align-items into a
     cross-axis (horizontal) rule, so the children stopped stretching: the Part
     II figure collapsed to 0x0 and the cool/warm graphic shrank to 165px. Grid
     honours `order` just as well and justify-items still defaults to stretch. */
  .im1-sec__inner, .im1-next__inner { align-items: start; }

  :where(.im1) :where(p) { font-size: 16.6px; line-height: 1.72; max-width: none; }
  .im1-question { font-size: 17.6px; }
  /* parity only — the desktop pass rebuilt this section's markup, so it needs
     its own stacking rule where .im1-sec__inner used to provide one */
  /* stacked: drop the desktop placement so the four children fall in source
     order — figure, prose, quote, closing reflection */
  .im1-s3__top { grid-template-columns: 1fr; grid-template-rows: none; gap: clamp(24px, 6vw, 34px); align-items: start; }
  .im1-s3__top > .im1-figure--s3,
  .im1-s3__top > .im1-s3__copy,
  .im1-s3__top > .im1-s3__quote,
  .im1-s3__top > .im1-s3__after { grid-column: auto; grid-row: auto; }
  .im1-s3__quote { margin-top: 0; }
  .im1-s3__after { margin-top: 0; }
  .im1-s3__quote p,
  .im1-s3__after p { max-width: none; }
  .im1-founder__inner { border-radius: 16px; }
  .im1-founder__copy p { font-size: 17px; }
  .im1-wonder { padding: 22px; font-size: 18px; }
  .im1-voice__words { gap: 10px; justify-content: center; }
  .im1-voice__words img { height: 42px; }
  .im1-refs li { font-size: 14.2px; }
  .im1-backmatter__text { font-size: 14.4px; }
}

@media (prefers-reduced-motion: reduce) {
  .im1 * { scroll-behavior: auto !important; }
}