/* ==========================================================================
   CogniPrism emphasis moments  —  v2
   Fourth companion file. Load after icons, surfaces, and cards.

   Changed from v1: the accent ramps moved to the section system, so the
   palette has one home. Slate carries body copy. Stat numerals moved from
   Navy to Slate. Headings moved to Cerulean. Base Robin Egg removed from
   light canvases. The stat block's primary surface moved from Navy to the
   Ivory-to-Champagne gradient.
   ========================================================================== */

/* Palette variables now live in cogniprism-surfaces.css:
     --cp-slate, --cp-magenta, --cp-magenta-mid, --cp-magenta-deep,
     --cp-robin-mid, --cp-robin-deep, the tints, and the canvases.
   Nothing is defined twice. */

/* --------------------------------------------------------------------------
   1. Stat blocks
   Primary surface is the Ivory-to-Champagne gradient with grain, which flows
   out of the section above it. Navy was the v1 recommendation and is now the
   accent, used on the pages assigned it and nowhere else.
   -------------------------------------------------------------------------- */

.cp-stats    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.cp-stats--2 { grid-template-columns: repeat(2, 1fr); gap: 44px; }

/* Cerulean at 3.43 on Champagne clears the 3:1 graphic threshold. */
.cp-stats__cat { border-top: 3px solid var(--cp-cerulean); padding-top: 18px; }

.cp-stats__label {
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--cp-baltic);
  margin: 0 0 20px;
}

/* Cerulean. A stat numeral exists to be noticed, so it cannot share a colour
   with body copy: it would then differentiate by size alone, which is the
   weakest signal available.

   At clamp(36px, 4vw, 50px) this is large text, so the threshold is 3:1.
   Cerulean measures 4.10 on Ivory and 3.43 on Champagne, clearing it across
   the whole Ivory-to-Champagne gradient.

   It also separates the collision numeral better than a neutral would.
   Cerulean against Magenta Deep is a hue difference. Slate against Magenta
   Deep would only be a value difference, and value is what a reader notices
   last. */
.cp-num {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .92;
  font-size: clamp(36px, 4vw, 50px);
  color: var(--cp-cerulean);
}

/* The collision stat. Deep on light at 4.51 Champagne / 5.40 Ivory.
   Base Magenta on any light canvas is 2.43 and fails outright. */
.cp-num--accent { color: var(--cp-magenta-deep); }

.cp-stat + .cp-stat { margin-top: 32px; }
.cp-stat__body { font-size: 17px; color: var(--cp-slate); margin: 10px 0 0; }
.cp-stat__sub  { font-size: 16px; color: var(--cp-slate); margin: 8px 0 0; max-width: 24ch; }

/* On accent sections, base Magenta and base Robin Egg come back. */
.cp-accent-navy .cp-num          { color: var(--cp-ivory); }
.cp-accent-navy .cp-num--accent  { color: var(--cp-magenta); }
.cp-accent-navy .cp-stats__cat   { border-top-color: var(--cp-robin); }
.cp-accent-navy .cp-stats__label { color: var(--cp-robin); }
.cp-accent-navy .cp-stat__body,
.cp-accent-navy .cp-stat__sub    { color: #C6DCE9; }

/* --------------------------------------------------------------------------
   2. The gap treatment
   One rule at two heights with nothing solid between: the same construction as
   the Standards Stress mark, at rule scale. The SVG stretches to any column.
   -------------------------------------------------------------------------- */

.cp-gap__step { display: block; width: 100%; height: 62px; margin: 10px 0 4px; }
.cp-gap__low  { text-align: right; margin-left: auto; }
.cp-gap__low .cp-stat__sub { margin-left: auto; }

.cp-gap__finding {
  font-size: 17px;
  font-weight: 600;
  color: var(--cp-slate);
  margin: 26px 0 0;
  max-width: 30ch;
}
.cp-accent-navy .cp-gap__finding { color: var(--cp-ivory); }

/* Stroke Cerulean (4.10 Ivory / 3.43 Champagne, clears the 3:1 graphic bar),
   node Magenta Deep. On an accent section, stroke Robin Egg and node base
   Magenta. */

/* --------------------------------------------------------------------------
   3. Citations
   Numbered, collected, top-down. Not inline and never on hover: hover does not
   exist on touch, cannot be copied, and the champion forwarding this to a COO
   is exactly who needs the source visible.
   -------------------------------------------------------------------------- */

.cp-footnote {
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-magenta-deep);     /* 5.40 on Ivory. Base Magenta is 2.90. */
  margin-left: 3px;
  vertical-align: super;
}
.cp-accent-navy .cp-footnote { color: var(--cp-robin); }

.cp-sources {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(66, 129, 164, .3);
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 420px;
}
.cp-sources p {
  font-size: 14px;
  color: var(--cp-baltic);
  margin: 0;
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.cp-sources span {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cp-magenta-deep);
  color: #fff;                       /* 5.63:1 on Magenta Deep */
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cp-accent-navy .cp-sources { border-top-color: rgba(251, 250, 249, .25); }
.cp-accent-navy .cp-sources p { color: #A9C4D6; }
.cp-accent-navy .cp-sources span { background: var(--cp-robin); color: var(--cp-navy); }

/* --------------------------------------------------------------------------
   4. Closing statement
   At body size it reads as a caption while carrying the section's conclusion.
   Scale and a narrower measure fix it. Do not add colour as well: it would
   then compete with the accented numeral above it.
   -------------------------------------------------------------------------- */

.cp-closing {
  margin: 36px 0 0;
  max-width: 34ch;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--cp-slate);
}
.cp-accent-navy .cp-closing { color: var(--cp-ivory); }

/* --------------------------------------------------------------------------
   5. Three-part bridge
   Each beat larger than the last, so the rhythm is drawn as well as written.
   The third clause is where the reader lands.
   -------------------------------------------------------------------------- */

.cp-bridge p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  max-width: 26ch;
  color: var(--cp-slate);
}
.cp-bridge p:nth-child(1) { font-size: clamp(19px, 2.2vw, 25px); opacity: .72; }
.cp-bridge p:nth-child(2) { font-size: clamp(21px, 2.5vw, 28px); opacity: .86; }
.cp-bridge p:nth-child(3) { font-size: clamp(23px, 2.9vw, 32px); font-weight: 600; opacity: 1; }

/* Deep Magenta on light at 4.51:1, which passes as body text and therefore
   passes at any size the third clause takes. Base Robin Egg on accent
   sections at 6.46:1. */
.cp-bridge p:nth-child(3)                 { color: var(--cp-magenta-deep); }
.cp-accent-navy .cp-bridge p              { color: var(--cp-ivory); }
.cp-accent-navy .cp-bridge p:nth-child(3) { color: var(--cp-robin); }

/* --------------------------------------------------------------------------
   6. Pull quote
   The glyph is Robin Egg MID, not Deep and not base.

   Base is 1.87:1 on Ivory and effectively invisible. Deep at 5.52 reads as a
   second piece of content competing with the quote. Mid at 3.63 is visible
   without asserting. A 96px decorative glyph needs far less contrast than an
   11px label to read, which is why this one element sits at Mid while the
   eyebrows and rules sit at Deep.
   -------------------------------------------------------------------------- */

.cp-quote { max-width: 640px; position: relative; padding-left: 56px; }

.cp-quote blockquote {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.36;
  letter-spacing: -.012em;
  color: var(--cp-slate);
}

.cp-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.16em;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--cp-robin-mid);
}

.cp-quote cite {
  display: block;
  font-style: normal;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  color: var(--cp-baltic);
  margin-top: 18px;
}

/* Alternate: centred on an accent section, beneath the logo grid. */
.cp-quote--center {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 0;
  text-align: center;
}
.cp-quote--center::before {
  content: "";
  position: static;
  display: block;
  width: 54px;
  height: 2px;
  background: var(--cp-robin-mid);
  margin: 0 auto 26px;
}
.cp-accent-navy .cp-quote blockquote { color: var(--cp-ivory); }
.cp-accent-navy .cp-quote cite       { color: #C6DCE9; }
.cp-accent-navy .cp-quote::before    { color: var(--cp-robin); background: var(--cp-robin); }

/* --------------------------------------------------------------------------
   7. Image frames
   The rule matters more than the shapes: organic holds people, geometric holds
   systems. Portraits, speaking shots and client faces take a frame from here.
   COST output, heatmaps, the model diagram and screenshots take a chamfer or a
   square, matching the card system.

   Every frame is aspect-specific. objectBoundingBox units stretch with the
   container, so a shape tuned at one ratio distorts at another.
   -------------------------------------------------------------------------- */

.cp-frame { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-frame--arch     { clip-path: url(#cp-frame-arch);     aspect-ratio: 3/4; }
.cp-frame--wave     { clip-path: url(#cp-frame-wave);     aspect-ratio: 1/1; }
.cp-frame--ridge    { clip-path: url(#cp-frame-ridge);    aspect-ratio: 3/2; }
.cp-frame--waveland { clip-path: url(#cp-frame-waveland); aspect-ratio: 3/2; }

/* The only frame not built as a path. Every side sums to exactly 100%, which
   leaves no straight edge anywhere and makes it a four-arc closed curve. That
   reads as a blob at 3:4 and as an oval at any other ratio. Portrait only. */
.cp-frame--soft {
  border-radius: 56% 44% 47% 53% / 48% 42% 58% 52%;
  aspect-ratio: 3/4;
}

@media (max-width: 700px) {
  .cp-stats, .cp-stats--2 { grid-template-columns: 1fr; gap: 38px; }
}