/* ============================================================================
   Grand Tour flagship #46 - "Mono notes in the margin"
   costandprofitability.com  ·  Instrument voice (engineer's marginalia)
   CSS-ONLY. No markup change. Version 1.0 (20 Jul 2026)
   ----------------------------------------------------------------------------
   WHAT THIS DOES
   On WIDE desktop reading (method / regional profile pages, wrapper .cc-pf,
   template cnp-methods-profile-praxis), the EXISTING mono diagram caption
   (.cnp-diagram-fig > figcaption - already IBM Plex Mono, soft ink) is lifted
   out of its centred position UNDER the worked-example diagram and set as a
   calm left-hand margin-note BESIDE the diagram, with a thin hairline leader.
   Nothing is invented: only the caption that already exists is repositioned.

   WHY ONLY THIS ELEMENT (findings from live inspection, 20 Jul 2026)
   - The reading column .pf-narrow is a 2-col grid that engages above 920px:
       body .cc-pf .pf-sec .pf-narrow{grid-template-columns:clamp(200px,18vw,240px) minmax(0,1fr)}
     (from cnp-method-instrument.css). The LEFT column holds the
     position:sticky .pf-kicker, which travels the full section band. So the
     one WIDE margin is owned by the sticky kicker and cannot host a note there
     without collision.
   - The ONLY existing in-flow mono annotation on these pages is the diagram
     figcaption. It is a full descriptive sentence (~450px natural width) and
     it PROPS the shrink-wrapped figure's width - pulling it fully out of flow
     collapses the SVG (measured 454px -> 300px), so a naive float is unsafe.
   - The blog reading column (.article-content) carries NO in-flow mono
     caption / aside / pull-quote (plain prose + dropcaps). There is nothing
     genuine to reposition there, so this file INTENTIONALLY does nothing for
     the blog and nothing for any non-.cc-pf template.

   HOW IT STAYS SAFE (measured on channel-segment-profitability and
   cost-of-unused-capacity, incl. the figure-adjacent-to-kicker case)
   - The caption is placed in the reading column's own left strip, which we
     reserve deterministically (fixed 200px margin-left on the figure, figure
     width clamped to the remainder). This is independent of each diagram's
     natural width, so the SVG stays large & legible (~504px) and never
     collapses.
   - The note lives in grid COLUMN 2 (right of the 48px grid gap), ~56px clear
     of the sticky-kicker column (column 1). Because the separation is
     HORIZONTAL, the kicker can travel vertically all it likes and can never
     overlap the note. Collision is structurally impossible, not just avoided.
   - Everything is gated at min-width:1100px. At <=1099px the media query is
     inert: the caption reverts to its exact current centred, in-flow state and
     the mobile reading experience is untouched.
   - No overflow (figure stays within .pf-narrow; page scrollWidth unchanged).
     No animation, so prefers-reduced-motion is satisfied by construction.
   ============================================================================ */

@media (min-width: 1100px) {

  /* Reserve a fixed left margin strip and hold the diagram to the remainder,
     so the SVG keeps a stable, legible width once the caption leaves flow. */
  .cc-pf .pf-sec .cnp-diagram-fig {
    position: relative;
    margin-left: 200px;
    margin-right: auto;
    width: min(520px, calc(100% - 200px));
  }

  /* The existing mono caption, lifted into the reserved left strip as a
     calm engineer's margin-note. Kept inside grid column 2, clear of the
     sticky .pf-kicker column. */
  .cc-pf .pf-sec .cnp-diagram-fig > figcaption {
    position: absolute;
    top: 4px;
    right: 100%;            /* anchor to the figure's left edge ... */
    margin-right: 24px;     /* ... then a calm gutter before the diagram */
    width: 168px;
    margin-top: 0;
    padding-top: 13px;      /* room for the hairline leader */
    text-align: left;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: #6E6253;         /* Instrument soft-ink (no new colour) */
  }

  /* Thin hairline leader, echoing the .pf-kicker rule mark. */
  .cc-pf .pf-sec .cnp-diagram-fig > figcaption::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 1px;
    background: #6E6253;
    opacity: .55;
  }
}