/* ============================================================
   THE ORIENTATION BLOCK, WITHOUT THE ICONS

   What was here: icon, bold 14px label, two lines of grey, three
   times, in three equal boxes of --surface. The SaaS three-up. It
   is the one construction on this page that could be lifted whole
   into any B2B marketing site, and that is the problem: the rest of
   the page is Fraunces on cream with hairlines and stacked sheets,
   and this block belonged to a different website.

   Three replacements live here, switched by data-ctx-variant on the
   aside. All three delete the icons, keep the copy exactly as
   written, and use type, rule and space instead of boxes.

     terms     the three facts as a definition list (DEFAULT)
     numerals  three columns under large Fraunces numerals
     weighted  the two orientation facts paired, the nine-brand
               fact given the room the argument later needs

   SCOPING. This file is loaded only by /raf. /factor-plus uses the
   same .cs-context.is-wide panel and the same .cs-ctx-card markup
   and must not move, so nothing here touches the shared component:
   every selector is gated on [data-ctx-variant], which exists on
   exactly one aside in the site.

   The panel's own geometry — the radius, the negative bottom margin
   that lets the corners cut into the dark band, the z-index — is not
   touched. Only what is inside .cs-context-inner changes.
   ============================================================ */

.cs-context.is-wide[data-ctx-variant] .cs-ctx-defs {
  margin: 0;
  /* the numerals variant counts these; harmless elsewhere */
  counter-reset: ctx;
}

.cs-context.is-wide[data-ctx-variant] .cs-ctx-def {
  counter-increment: ctx;
  min-width: 0;
}

/* Fraunces for the term, sans for the definition. The term is the
   thing being named, so it takes the display face the page uses for
   every other thing it names; the definition is reading text and
   stays in the sans at the body's own size. Hierarchy comes from
   the face change and the size step, not from a weight of 600 on a
   14px label. */
.cs-context.is-wide[data-ctx-variant] .cs-ctx-def dt {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.cs-context.is-wide[data-ctx-variant] .cs-ctx-def dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.002em;
  color: var(--text-muted);
}


/* ============================================================
   A. TERMS — the block is a glossary, so it is set as one

   The hero directly above this already speaks in dt/dd: Role, Team,
   Scope, Markets, Timeline, Status. This section asks a question in
   its title and answers it three times, which is the same grammar.
   Setting it as a definition list makes the two read as one page
   rather than a page with a component dropped into it.

   Term left, definition right, a hairline between entries and one
   closing the set. No box, no icon, nothing to align icons to.
   ============================================================ */

.cs-context.is-wide[data-ctx-variant="terms"] .cs-context-inner {
  max-width: 1080px;
}

.cs-context.is-wide[data-ctx-variant="terms"] .cs-ctx-defs {
  border-bottom: 1px solid var(--rule-soft);
}

.cs-context.is-wide[data-ctx-variant="terms"] .cs-ctx-def {
  display: grid;
  /* the term column is fixed enough that all three terms start on
     the same line; the definition takes the rest */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding-block: clamp(24px, 2.6vw, 38px);
  border-top: 1px solid var(--rule-soft);
}

.cs-context.is-wide[data-ctx-variant="terms"] .cs-ctx-def dt {
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  /* the term sits on the definition's first baseline, not above it */
  padding-top: 0.12em;
}

.cs-context.is-wide[data-ctx-variant="terms"] .cs-ctx-def dd {
  max-width: 54ch;
}


/* ============================================================
   B. NUMERALS — the ornament is the count, not a picture

   Three columns still, but the boxes are gone and the mark at the
   top of each is a number set large enough to be structure. The
   page removed small 01/02 numerals elsewhere because at 11px they
   are garnish; at 5vw they are the grid.
   ============================================================ */

.cs-context.is-wide[data-ctx-variant="numerals"] .cs-ctx-defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(26px, 3.4vw, 64px);
}

.cs-context.is-wide[data-ctx-variant="numerals"] .cs-ctx-def {
  border-top: 1px solid var(--rule);
  padding-top: clamp(14px, 1.4vw, 20px);
}

.cs-context.is-wide[data-ctx-variant="numerals"] .cs-ctx-def::before {
  content: counter(ctx, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  /* light, because at this size a 500 numeral is a headline and
     would out-shout the term underneath it */
  font-weight: 300;
  font-size: clamp(46px, 5.2vw, 82px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-primary);
  margin-bottom: clamp(18px, 2vw, 32px);
}

.cs-context.is-wide[data-ctx-variant="numerals"] .cs-ctx-def dt {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  margin-bottom: 10px;
}


/* ============================================================
   C. WEIGHTED — the third fact is the one the argument needs

   One and two orient. Three is the constraint the case study leans
   on forty screens later, and three equal columns say all three
   matter equally. Here the first two share a row at reading size
   and the third takes the full measure with its term at display
   size, so the shape of the block matches the shape of the point.

   The title goes left in this variant. Centring it over a
   deliberately lopsided grid would be arguing with the layout.
   ============================================================ */

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-context-title {
  text-align: left;
  margin-inline: 0;
  max-width: 17ch;
}

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 76px);
}

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def {
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(16px, 1.6vw, 22px);
}

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def dt {
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* the third entry: full measure, its own darker rule, term set as a
   display line with the sentence beside it */
.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) {
  grid-column: 1 / -1;
  margin-top: clamp(34px, 4vw, 64px);
  border-top-color: var(--rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 76px);
  align-items: start;
  padding-top: clamp(22px, 2.4vw, 34px);
}

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) dt {
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: 0;
  max-width: 11ch;
}

.cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) dd {
  font-size: clamp(16px, 1.2vw, 18px);
  max-width: 46ch;
  padding-top: 0.35em;
}


/* ============================================================
   PHONE — 900 and down

   Every variant is one column here. The three-column and the
   asymmetric grids have nothing to say at 390; what survives is the
   rule between entries and the face change between term and
   definition, which is the whole idea in all three anyway.
   ============================================================ */

@media (max-width: 900px) {
  .cs-context.is-wide[data-ctx-variant] .cs-ctx-defs {
    display: block;
  }

  .cs-context.is-wide[data-ctx-variant] .cs-ctx-def {
    display: block;
    grid-template-columns: none;
    padding-top: clamp(16px, 4vw, 22px);
    padding-bottom: clamp(20px, 5vw, 26px);
    border-top: 1px solid var(--rule-soft);
    margin-top: 0;
  }

  .cs-context.is-wide[data-ctx-variant] .cs-ctx-def dt {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding-top: 0;
    margin-bottom: 8px;
    max-width: none;
  }

  .cs-context.is-wide[data-ctx-variant] .cs-ctx-def dd {
    font-size: 15px;
    max-width: none;
    padding-top: 0;
  }

  /* stacked, a full-height numeral above every entry is three big
     digits in a column and nothing else; keep them, at label scale,
     sitting on the rule as a marker rather than as the structure */
  .cs-context.is-wide[data-ctx-variant="numerals"] .cs-ctx-def::before {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
  }

  .cs-context.is-wide[data-ctx-variant="weighted"] .cs-context-title {
    max-width: none;
  }

  /* the third entry's own two-column grid is more specific than the
     block rule above, so it has to be unset by name. At 390 a 46ch
     paragraph in half a phone is eight short lines beside an empty
     square; the entry keeps its extra weight through the larger term
     and the darker rule instead. */
  .cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) {
    display: block;
    margin-top: 0;
    padding-top: clamp(20px, 5vw, 28px);
  }

  .cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) dt {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.1;
    margin-bottom: 12px;
  }

  .cs-context.is-wide[data-ctx-variant="weighted"] .cs-ctx-def:nth-child(3) dd {
    font-size: 16px;
  }
}