/* ============================================================
   EDITORIAL CASE STUDY STYLESHEET
   Rupesh Chavan Portfolio

   A second, standalone layout system for case studies — it does
   not extend shared.css and must never be loaded alongside it.

   The old template put everything in equal-weight card grids:
   four challenge cards, three decision cards, four learning
   cards, four metric cards, all the same size, all the same
   density. That reads as a form someone filled in rather than
   an argument someone made, which is what made the pages feel
   generated.

   This one is built on contrast instead. Very small labels
   against very large headings, long stretches of air between
   blocks, and full-bleed light/dark alternation so the page has
   a rhythm you can feel while scrolling past at speed. Screens
   get big rounded panels and room to be looked at. Body copy is
   allowed to be long, but it is never set at the same weight as
   everything around it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Per-project accents are overridden in the page's own <style>. */
  --accent: #ccff00;
  --accent-ink: #0b0c0e;
  --accent-2: #ff6633;

  --paper: #ffffff;
  --paper-2: #f6f5f2;
  --chip: #eceae4;
  --ink: #0b0c0e;
  --ink-2: #151619;

  --on-paper: #0b0c0e;
  --on-paper-soft: #595854;
  --on-paper-faint: #a8a49c;
  --on-ink: #f7f6f3;
  --on-ink-soft: #8d8b85;
  --on-ink-faint: #4a4945;

  --rule-paper: rgba(11, 12, 14, 0.12);
  --rule-ink: rgba(255, 255, 255, 0.12);

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* One scale, used everywhere, so sections cannot drift apart. */
  --pad-x: clamp(1.25rem, 5vw, 6.5rem);
  --sec-y: clamp(4.5rem, 11vh, 9.5rem);
  --maxw: 1400px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Arriving from the home page ──────────────────────────────
   The project cards on the home page use the same image file as
   the hero here, so a cross-document view transition can carry
   the thumbnail into place instead of cutting to a new screen.
   Both documents have to opt in for it to fire, and the paired
   elements have to share a name: the home page assigns this one
   to the clicked card's image on the way out.

   Browsers without the API ignore all of it and navigate
   normally, so there is nothing to feature-detect. */
@view-transition { navigation: auto; }

/* Only 32 of the pages have a hero image and none has more than
   one, so this cannot collide: a view-transition-name has to be
   unique within the document. */
.ed-hero img { view-transition-name: project-hero; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ed-hero img { view-transition-name: none; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Nothing clips horizontally at the document level, on purpose.
   `overflow-x: hidden` on the body forces the other axis to compute as
   `auto`, which makes the body its own scroll container and stops the
   window emitting scroll events — every scroll-driven behaviour on the
   page then dies silently. Moving it to the root as `overflow-x: clip`
   is no better: root overflow propagates to the viewport, and a clipped
   viewport will not scroll at all.

   So sideways bleed is the responsibility of whichever element bleeds.
   The hero clips its own oversized wordmark, the marquee clips its own
   track, and no third thing is allowed to overhang. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--on-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto matters: the markup carries width/height attributes to
   reserve layout space, and without this the intrinsic height wins over
   the fluid width and every screenshot renders stretched. */
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ── Sections ───────────────────────────────────────────────── */

.ed-sec {
  padding: var(--sec-y) var(--pad-x);
  position: relative;
}
.ed-sec--ink { background: var(--ink); color: var(--on-ink); }
.ed-sec--paper { background: var(--paper); color: var(--on-paper); }
.ed-sec--paper2 { background: var(--paper-2); color: var(--on-paper); }
.ed-sec--tight { padding-top: clamp(2.5rem, 6vh, 5rem); }
.ed-sec--flush { padding-bottom: 0; }

/* The join between a light and a dark run gets a big radius, which is
   what stops the alternation reading as a stack of bands. The radius
   only reads if the incoming section sits ON TOP of the outgoing one,
   so it pulls up by its own radius and the corners let the previous
   background show through. */
.ed-sec--round-top {
  --r: clamp(20px, 3vw, 44px);
  position: relative;
  z-index: 1;
  border-radius: var(--r) var(--r) 0 0;
  margin-top: calc(var(--r) * -1);
  padding-top: calc(var(--sec-y) + var(--r));
}
.ed-sec--round-bottom { border-radius: 0 0 clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px); }

.ed-wrap { max-width: var(--maxw); margin: 0 auto; }

/* ── Vertical rhythm ────────────────────────────────────────
   One scale, owned here rather than by a margin on each block.
   Spacing used to come from inline styles written per block,
   which drifted between pages and made the gap between a
   heading and its first paragraph different on every page. */

:root {
  --gap-s: clamp(1rem, 2vw, 1.5rem);
  --gap-m: clamp(1.5rem, 3.5vw, 2.5rem);
  --gap-l: clamp(2.5rem, 6vw, 4rem);
}

.ed-wrap > * + * { margin-top: var(--gap-m); }

/* a block that follows the section head sits closer to it than
   two blocks sit to each other */
.ed-wrap > .ed-head + * { margin-top: var(--gap-m); }

/* consecutive paragraphs stay tight; a structural block after
   prose gets the full gap */
.ed-wrap > .ed-body + .ed-body,
.ed-wrap > .ed-lede + .ed-body { margin-top: var(--gap-s); }

.ed-wrap > * + :is(.ed-list, .ed-figs, .ed-notes, .ed-gallery,
                   .ed-swatches, .ed-marquee, .ed-meta, .ed-explore,
                   .cs-stories-wrap, .cs-comp-wrap, .cs-process-steps,
                   .cs-persona-grid, .cs-research-grid, .cs-toolkit-grid,
                   .cs-img-grid, .cs-flow-row, .cs-type-scale, .cs-quote) {
  margin-top: var(--gap-l);
}

/* the feature list manages its own row padding */
.ed-wrap > .ed-feature + .ed-feature { margin-top: 0; }

/* ── Labels ─────────────────────────────────────────────────── */

/* The filled chip: "UI Overview", "Benefits", "Pricing Options". */
.ed-chip {
  display: inline-block;
  padding: 0.42em 0.95em;
  border-radius: 999px;
  background: var(--chip);
  color: var(--on-paper);
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ed-chip--volt { background: var(--accent); color: var(--accent-ink); }
.ed-sec--ink .ed-chip { background: rgba(255, 255, 255, 0.1); color: var(--on-ink); }
.ed-sec--ink .ed-chip--volt { background: var(--accent); color: var(--accent-ink); }

/* The marker: a tiny bar over a quiet label. The reference uses this
   for structural section names and the chip for content sections. */
.ed-marker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.ed-marker::before {
  content: '';
  display: block;
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
.ed-marker span {
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 500;
  color: var(--on-paper-soft);
}
.ed-sec--ink .ed-marker span { color: var(--on-ink-soft); }
.ed-marker--end { align-items: flex-end; text-align: right; }

/* ── Type ───────────────────────────────────────────────────── */

/* The whole layout rests on this: very large, very tight, and never
   centred unless the section is a deliberate full stop. */
.ed-display {
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.ed-display--wide { max-width: 22ch; }
.ed-display--sm { font-size: clamp(1.7rem, 3.4vw, 2.9rem); max-width: 20ch; }
/* On ink the accent can simply be the text colour. On paper it cannot —
   Volt on white is unreadable — so it becomes a marker-pen highlight
   instead. A gradient rather than a background colour so it sits low
   behind the baseline, and box-decoration-break so a phrase that wraps
   gets one continuous mark instead of a broken underline per line. */
.ed-display em { font-style: normal; color: var(--accent); }
.ed-sec--paper .ed-display em,
.ed-sec--paper2 .ed-display em,
.ed-hero-title em {
  color: var(--accent-ink);
  background-image: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}

.ed-center { text-align: center; }
.ed-center .ed-display { max-width: 24ch; margin-inline: auto; }

/* The right-hand micro caption that sits opposite a big heading. */
.ed-aside {
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.5;
  color: var(--on-paper-soft);
  max-width: 24ch;
}
.ed-sec--ink .ed-aside { color: var(--on-ink-soft); }

/* Long copy with part of it dimmed, so a paragraph has a shape
   instead of being an undifferentiated block. */
.ed-lede {
  font-size: clamp(1.02rem, 1.45vw, 1.42rem);
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: -0.012em;
  max-width: 46ch;
}
.ed-lede .dim { color: var(--on-paper-faint); }
.ed-sec--ink .ed-lede .dim { color: var(--on-ink-faint); }

.ed-body {
  font-size: clamp(0.94rem, 1.05vw, 1.04rem);
  line-height: 1.68;
  color: var(--on-paper-soft);
  max-width: 62ch;
}
.ed-sec--ink .ed-body { color: var(--on-ink-soft); }
.ed-body strong { color: var(--on-paper); font-weight: 600; }
.ed-sec--ink .ed-body strong { color: var(--on-ink); }

code, .ed-code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.1em 0.38em;
  border-radius: 4px;
  background: rgba(11, 12, 14, 0.06);
}
.ed-sec--ink code, .ed-sec--ink .ed-code { background: rgba(255, 255, 255, 0.08); }

/* ── Head block: marker/chip left, heading left, caption right ── */

.ed-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.ed-head-main { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.2vw, 1.9rem); align-items: flex-start; }
@media (max-width: 880px) {
  .ed-head { grid-template-columns: 1fr; align-items: start; }
  .ed-head .ed-marker--end { align-items: flex-start; text-align: left; }
  .ed-aside { max-width: 40ch; }
}

/* ── Connector leaders ──────────────────────────────────────── */

/* The hairline-and-node motif. Decorative only: it carries no
   information, so it is aria-hidden and vanishes on small screens
   where it would just be a stray line. */
.ed-leader {
  position: absolute;
  pointer-events: none;
  color: var(--rule-paper);
}
.ed-sec--ink .ed-leader { color: var(--rule-ink); }
.ed-leader svg { overflow: visible; }
.ed-leader path { fill: none; stroke: currentColor; stroke-width: 1; }
.ed-leader circle { fill: var(--accent); }
@media (max-width: 1100px) { .ed-leader { display: none; } }

/* ── Hero ───────────────────────────────────────────────────── */

.ed-hero {
  position: relative;
  padding: clamp(6.5rem, 13vh, 9rem) var(--pad-x) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
.ed-hero-ghost {
  position: absolute;
  top: clamp(1rem, 4vh, 4rem);
  left: 50%;
  translate: -50% 0;
  font-size: clamp(9rem, 27vw, 24rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: rgba(11, 12, 14, 0.045);
  white-space: nowrap;
  user-select: none;
  z-index: -1;
}
.ed-hero-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* The reference hero is a wide laptop bleeding off the right edge. A
   portrait phone cannot do that without becoming 1800px tall, so the
   proportions are inverted: the type takes the wide column and the
   device is held to a believable handset width. */
.ed-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-top: clamp(2.5rem, 7vh, 5rem);
  max-width: var(--maxw);
  margin-inline: auto;
}
.ed-hero-title {
  font-size: clamp(2.3rem, 6.1vw, 5.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.ed-hero-title em { font-style: normal; }
.ed-hero-sub { margin-top: 1.6rem; }
.ed-hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1.35rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.ed-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.ed-btn--primary { background: var(--ink); color: var(--paper); }
.ed-btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
.ed-btn--ghost { border-color: var(--rule-paper); color: var(--on-paper); }
.ed-btn--ghost:hover { border-color: var(--ink); }
.ed-sec--ink .ed-btn--ghost { border-color: var(--rule-ink); color: var(--on-ink); }
.ed-sec--ink .ed-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.ed-btn--volt { background: var(--accent); color: var(--accent-ink); }
.ed-btn--volt:hover { transform: translateY(-2px); }

/* The hero device sits in its own column and is allowed to bleed. */
/* No negative margin here, deliberately. A negative bottom margin on a
   grid item shrinks the grid itself, so the hero reported a height
   smaller than its own content and the following section rode up over
   the buttons. The overlap effect comes from the next section pulling
   up by its corner radius instead, which cannot swallow anything. */
.ed-hero-shot {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 340px;
}
.ed-hero-shot img {
  width: 100%;
  border-radius: clamp(18px, 2vw, 30px);
  box-shadow: 0 50px 90px -40px rgba(11, 12, 14, 0.45), 0 0 0 1px rgba(11, 12, 14, 0.07);
}

/* A landscape screenshot cannot live in a handset-width slot, so a
   wide hero flips the column weighting and lets the shot run on. */
.ed-hero--wide .ed-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ed-hero-shot--wide { max-width: 820px; }
.ed-hero-shot--wide img { border-radius: clamp(12px, 1.4vw, 20px); }

@media (max-width: 900px) {
  .ed-hero-grid,
  .ed-hero--wide .ed-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .ed-hero-shot { justify-self: center; max-width: 420px; }
  .ed-hero-shot--wide { max-width: 100%; }
}

/* ── Meta strip ─────────────────────────────────────────────── */

.ed-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-ink);
}
.ed-sec--paper .ed-meta, .ed-sec--paper2 .ed-meta { border-top-color: var(--rule-paper); }
.ed-meta-k {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
  margin-bottom: 0.45rem;
}
.ed-sec--paper .ed-meta-k, .ed-sec--paper2 .ed-meta-k { color: var(--on-paper-faint); }
.ed-meta-v { font-size: 0.94rem; font-weight: 600; line-height: 1.45; }

/* ── Big figures ────────────────────────────────────────────── */

.ed-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
}
.ed-fig-n {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.ed-sec--paper .ed-fig-n, .ed-sec--paper2 .ed-fig-n { color: var(--accent-ink); }
.ed-fig-l {
  margin-top: 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}
.ed-fig-d { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.55; color: var(--on-ink-soft); }
.ed-sec--paper .ed-fig-d, .ed-sec--paper2 .ed-fig-d { color: var(--on-paper-soft); }

/* ── Numbered editorial list (challenges, learnings) ────────── */

.ed-list { border-top: 1px solid var(--rule-paper); }
.ed-sec--ink .ed-list { border-top-color: var(--rule-ink); }
/* fit-content, not a fixed width: most markers are just "01", but some
   carry a label ("02 · Trust Architecture"). A fixed 4.5rem column wrapped
   those onto three lines; fit-content sizes the column to the longest
   marker in that particular list and caps it before it can crowd the
   text out. */
.ed-item {
  display: grid;
  grid-template-columns: fit-content(11rem) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule-paper);
  align-items: start;
}
.ed-sec--ink .ed-item { border-bottom-color: var(--rule-ink); }
.ed-item-n { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); padding-top: 0.35rem; }
.ed-sec--paper .ed-item-n, .ed-sec--paper2 .ed-item-n { color: var(--on-paper-faint); }
.ed-item-t { font-size: clamp(1.05rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.ed-item-b { font-size: 0.94rem; line-height: 1.65; color: var(--on-paper-soft); }
.ed-sec--ink .ed-item-b { color: var(--on-ink-soft); }
@media (max-width: 820px) {
  .ed-item { grid-template-columns: 2.5rem 1fr; row-gap: 0.6rem; }
  .ed-item-b { grid-column: 2; }
}

/* ── Alternating feature rows ───────────────────────────────── */

.ed-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  padding: clamp(2.5rem, 7vh, 6rem) 0;
}
.ed-feature + .ed-feature { border-top: 1px solid var(--rule-paper); }
.ed-sec--ink .ed-feature + .ed-feature { border-top-color: var(--rule-ink); }
.ed-feature--flip .ed-feature-media { order: -1; }
.ed-feature-media img {
  width: 100%;
  border-radius: clamp(16px, 1.8vw, 26px);
  box-shadow: 0 40px 70px -35px rgba(11, 12, 14, 0.4), 0 0 0 1px rgba(11, 12, 14, 0.07);
}
.ed-sec--ink .ed-feature-media img { box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ed-feature-media--phone { max-width: 330px; margin-inline: auto; }
.ed-feature-body { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
@media (max-width: 860px) {
  .ed-feature { grid-template-columns: 1fr; }
  .ed-feature--flip .ed-feature-media { order: 0; }
}

/* Small label/value pairs under a feature — replaces the old
   four-cell meta grid that made every feature look identical. */
.ed-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem 1.75rem; margin-top: 0.6rem; width: 100%; }
.ed-pair-k { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.3rem; }
.ed-sec--ink .ed-pair-k { color: var(--accent); }
.ed-pair-v { font-size: 0.87rem; line-height: 1.6; color: var(--on-paper-soft); }
.ed-sec--ink .ed-pair-v { color: var(--on-ink-soft); }

/* ── Panels & galleries ─────────────────────────────────────── */

.ed-panel {
  border-radius: clamp(18px, 2.4vw, 34px);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 60px 100px -50px rgba(11, 12, 14, 0.5);
}
.ed-panel img { width: 100%; }

/* min() in the track keeps two columns on a phone. At a flat 215px a
   375px screen fits exactly one, and eight stacked full-width handset
   screenshots turn the gallery into several thousand pixels of scroll
   on the device least willing to do it. */
.ed-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 46%), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.ed-shot { cursor: pointer; }
.ed-shot img {
  width: 100%;
  border-radius: 16px;
  background: var(--ink-2);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 18px 34px -22px rgba(11, 12, 14, 0.5), 0 0 0 1px rgba(11, 12, 14, 0.08);
}
.ed-sec--ink .ed-shot img { box-shadow: 0 18px 34px -22px #000, 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ed-shot:hover img { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(11, 12, 14, 0.55), 0 0 0 1px var(--accent); }
.ed-shot-t { margin-top: 0.95rem; font-size: 0.9rem; font-weight: 600; }
.ed-shot-d { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.5; color: var(--on-paper-soft); }
.ed-sec--ink .ed-shot-d { color: var(--on-ink-soft); }

/* ── Swatches ───────────────────────────────────────────────── */

.ed-swatches { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.6vw, 1.4rem); }
.ed-sw { min-width: 104px; }
.ed-sw i { display: block; height: 76px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ed-sw b { display: block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; }
.ed-sw span { display: block; margin-top: 0.1rem; font-family: var(--mono); font-size: 0.72rem; color: var(--on-ink-faint); }
.ed-sec--paper .ed-sw span, .ed-sec--paper2 .ed-sw span { color: var(--on-paper-faint); }

/* ── Notes (design-system blocks, three-up) ─────────────────── */

.ed-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.ed-note-t { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.ed-note-b { font-size: 0.9rem; line-height: 1.65; color: var(--on-ink-soft); }
.ed-sec--paper .ed-note-b, .ed-sec--paper2 .ed-note-b { color: var(--on-paper-soft); }

/* ── Pull quote ─────────────────────────────────────────────── */

/* 24ch at this size made a long reflection several screens tall and
   one word wide. A pull quote wants to be read, not climbed. */
.ed-quote {
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.022em;
  max-width: 38ch;
}
.ed-quote-by { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.85rem; color: var(--on-ink-soft); }
.ed-sec--paper .ed-quote-by, .ed-sec--paper2 .ed-quote-by { color: var(--on-paper-soft); }

/* ── Nav & furniture ────────────────────────────────────────── */

.ed-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--pad-x);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule-paper);
}
.ed-nav a, .ed-nav span { font-size: 0.82rem; font-weight: 600; }
.ed-nav-back { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--on-paper); }
.ed-nav-back svg { width: 14px; height: 14px; }
.ed-nav-back:hover { color: var(--on-paper-soft); }
.ed-nav-title { color: var(--on-paper-faint); font-weight: 500; }
.ed-nav-links { display: flex; gap: clamp(0.8rem, 1.8vw, 1.6rem); }
.ed-nav-links a { color: var(--on-paper-soft); font-weight: 500; }
.ed-nav-links a:hover { color: var(--on-paper); }
@media (max-width: 900px) { .ed-nav-links, .ed-nav-title { display: none; } }

.ed-progress {
  position: fixed; top: 0; left: 0; z-index: 95;
  height: 2px; width: 0;
  background: var(--accent);
}

.ed-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ed-top.on { opacity: 1; pointer-events: auto; }
.ed-top:hover { transform: translateY(-3px); }
.ed-top svg { width: 17px; height: 17px; }

/* ── Explore footer ─────────────────────────────────────────── */

.ed-explore { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.ed-explore a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--rule-ink);
  border-radius: 14px;
  font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.ed-explore a svg { width: 13px; height: 13px; flex-shrink: 0; }
.ed-explore a:hover { border-color: var(--accent); color: var(--accent); }
.ed-explore a.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ed-explore a.is-primary:hover { color: var(--accent-ink); filter: brightness(1.06); }

/* ── Lightbox ───────────────────────────────────────────────── */

.ed-lb {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(6px);
}
.ed-lb.open { display: grid; }
.ed-lb img { max-width: min(100%, 520px); max-height: 88vh; width: auto; border-radius: 14px; }
.ed-lb-x, .ed-lb-nav {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: grid; place-items: center;
}
.ed-lb-x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.ed-lb-nav { top: 50%; translate: 0 -50%; }
.ed-lb-prev { left: clamp(0.5rem, 2vw, 2rem); }
.ed-lb-next { right: clamp(0.5rem, 2vw, 2rem); }
.ed-lb-x:hover, .ed-lb-nav:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ed-lb-count { position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; translate: -50% 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   MOTION

   Five behaviours, all of them lifted from the reference rather
   than invented: headings that build word by word, figures that
   roll up to their value, a specimen marquee, chips that drift,
   and a slow parallax on the device shots.

   Everything here is additive — the page is complete and legible
   with every one of them switched off, which is what the reduced
   motion block at the bottom actually does.
   ══════════════════════════════════════════════════════════════ */

.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ── Word-stagger reveal ────────────────────────────────────── */

/* Words rise out of a mask. The padding/negative-margin pair gives
   descenders somewhere to live — without it `overflow: hidden`
   slices the tail off every g, y and p. */
.ed-split { opacity: 1; transform: none; }
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.wi {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.ed-split.in .wi { transform: none; }

/* ── Specimen marquee ───────────────────────────────────────── */

.ed-marquee {
  --speed: 38s;
  position: relative;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--rule-ink);
  padding-block: clamp(0.9rem, 2vw, 1.5rem);
  /* fade the ends so the loop never shows a hard edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ed-sec--paper .ed-marquee, .ed-sec--paper2 .ed-marquee { border-block-color: var(--rule-paper); }
.ed-marquee-row {
  display: flex;
  flex-shrink: 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  animation: ed-slide var(--speed) linear infinite;
}
.ed-marquee:hover .ed-marquee-row { animation-play-state: paused; }
.ed-marquee-row span {
  font-size: clamp(1.9rem, 4.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-ink);
}
.ed-sec--paper .ed-marquee-row span, .ed-sec--paper2 .ed-marquee-row span { color: var(--on-paper); }
.ed-marquee-row span.hl { color: var(--accent); }
.ed-marquee-row span.out {
  color: transparent;
  -webkit-text-stroke: 1px var(--on-ink-faint);
}
.ed-sec--paper .ed-marquee-row span.out, .ed-sec--paper2 .ed-marquee-row span.out { -webkit-text-stroke-color: var(--on-paper-faint); }

@keyframes ed-slide { to { transform: translateX(-100%); } }

/* ── Drifting chips ─────────────────────────────────────────── */

/* Applied to a container; each child drifts on its own clock so the
   group never bobs in unison, which is what gives it away as an
   animation rather than as air. */
.ed-float,
.ed-drift > * { animation: ed-bob 7s ease-in-out infinite; }
.ed-drift > *:nth-child(2) { animation-duration: 9.5s; animation-delay: -3s; }
.ed-drift > *:nth-child(3) { animation-duration: 11s; animation-delay: -6s; }
.ed-drift > *:nth-child(4) { animation-duration: 8.5s; animation-delay: -1.5s; }
@keyframes ed-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}

/* ── Device parallax ────────────────────────────────────────── */

.ed-para { will-change: transform; }

/* ── Figures ────────────────────────────────────────────────── */

/* Rolling digits must not reflow the layout as they count, so the
   figure reserves its final width and the glyphs are tabular. */
.ed-fig-n { font-variant-numeric: tabular-nums; }

/* A rule wipes in under each figure as it lands, so a row of numbers
   arrives as a sequence rather than all at once. */
.ed-figs > * { position: relative; padding-top: 1.1rem; }
.ed-figs > *::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}
.ed-figs.in > *::before { width: 2.5rem; }

/* ── Staggered content ──────────────────────────────────────
   Any group of peers — figures, swatches, notes, steps, cards —
   arrives one after another instead of as a single block. The
   container stops fading itself, or the two would compound. */

.ed-stagger.rv { opacity: 1; transform: none; }
.ed-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.ed-stagger.in > * { opacity: 1; transform: none; }

/* ── Design process: a line that draws as you read down it ── */

.cs-process-steps { position: relative; padding-left: 1.6rem; }
.cs-process-steps::before,
.cs-process-steps::after {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: 0;
  width: 2px;
  border-radius: 2px;
}
.cs-process-steps::before { bottom: 0; background: var(--rule-paper); }
.ed-sec--ink .cs-process-steps::before { background: var(--rule-ink); }
.cs-process-steps::after {
  height: 0;
  background: var(--accent);
  transition: height 1.6s var(--ease) 0.15s;
}
.cs-process-steps.in::after { height: 100%; }

.cs-step { position: relative; }
/* the node on the line for each step */
.cs-step::before {
  content: '';
  position: absolute;
  left: -1.42rem;
  top: calc(clamp(1.25rem, 2.6vw, 1.9rem) + 0.45rem);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--accent);
  transform: scale(0);
  transition: transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + 300ms);
}
.ed-sec--ink .cs-step::before { background: var(--ink); }
.cs-process-steps.in .cs-step::before { transform: scale(1); }

/* ── Palette: swatches land in sequence, and copy on click ── */

.ed-sw, .cs-color-swatch { cursor: pointer; }
.ed-sw i, .cs-color-swatch {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ed-sw:hover i, .cs-color-swatch:hover { transform: translateY(-4px) scale(1.02); }
.ed-sw.copied i, .cs-color-swatch.copied {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px var(--accent);
}
.ed-sw.copied b::after {
  content: ' copied';
  color: var(--accent);
  font-weight: 500;
}

/* ── Type scale: each row slides in, and leans on hover ────── */

.cs-type-row { transition: background 0.3s var(--ease); }
.cs-type-row > :last-child {
  transition: transform 0.4s var(--ease);
  transform-origin: left center;
}
.cs-type-row:hover > :last-child { transform: translateX(6px); }
.cs-type-row:hover .cs-type-size { color: var(--accent); }

/* ── Components / notes: a rule grows under the title ──────── */

.ed-note-t { position: relative; display: inline-block; padding-bottom: 0.3rem; }
.ed-note-t::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width 0.55s var(--ease);
}
.ed-notes.in .ed-note-t::after { width: 100%; }
.ed-notes > *:hover .ed-note-t::after { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .wi { transform: none; transition: none; }
  .ed-marquee-row { animation: none; }
  .ed-float, .ed-drift > * { animation: none; }
  .ed-shot:hover img, .ed-btn:hover, .ed-top:hover { transform: none; }
  .cs-img-item:hover { transform: none; }
  .ed-stagger > * { opacity: 1; transform: none; transition: none; }
  .ed-figs > *::before { width: 2.5rem; transition: none; }
  .cs-process-steps::after { height: 100%; transition: none; }
  .cs-step::before { transform: scale(1); transition: none; }
  .ed-note-t::after { width: 100%; transition: none; }
  .ed-sw:hover i, .cs-color-swatch:hover,
  .cs-type-row:hover > :last-child { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   LEGACY BLOCK COMPATIBILITY

   The old template had a wide vocabulary of content blocks:
   tables, type scales, persona cards, process steps, image
   grids. Those were never the problem. What made the pages read
   as generated was the uniform card grids around them — four
   challenge cards, three decision cards, four learning cards,
   all the same size — and only those are rewritten into
   editorial rows.

   Everything else keeps its original markup and is re-dressed
   here. Restyling cannot drop content; rewriting markup can.
   ══════════════════════════════════════════════════════════════ */

/* ── Tables: user stories, competitor matrix ────────────────── */

.cs-stories-wrap, .cs-comp-wrap { overflow-x: auto; margin-top: clamp(2rem, 5vw, 3rem); }
.cs-stories-table, .cs-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 620px;
}
.cs-stories-table th, .cs-comp-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-paper-faint);
  padding: 0 1rem 0.9rem;
  border-bottom: 1px solid var(--rule-paper);
  white-space: nowrap;
}
.cs-stories-table td, .cs-comp-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--rule-paper);
  color: var(--on-paper-soft);
  line-height: 1.55;
  vertical-align: top;
}
.cs-stories-table tbody tr td:first-child,
.cs-comp-table tbody tr td:first-child { color: var(--on-paper); font-weight: 600; }
.ed-sec--ink :is(.cs-stories-table, .cs-comp-table) :is(th, td) { border-bottom-color: var(--rule-ink); }
.ed-sec--ink :is(.cs-stories-table, .cs-comp-table) th { color: var(--on-ink-faint); }
.ed-sec--ink :is(.cs-stories-table, .cs-comp-table) td { color: var(--on-ink-soft); }
.ed-sec--ink :is(.cs-stories-table, .cs-comp-table) tbody tr td:first-child { color: var(--on-ink); }
/* the project's own column in a competitor matrix */
.cs-comp-us { background: rgba(0, 0, 0, 0.045); color: var(--on-paper); font-weight: 600; }
.ed-sec--ink .cs-comp-us { background: rgba(255, 255, 255, 0.055); color: var(--on-ink); }
.cs-check { color: #15803d; font-weight: 700; }
.cs-cross { color: #b91c1c; font-weight: 700; }
.cs-partial { color: #b45309; font-weight: 700; }
.ed-sec--ink .cs-check { color: #4ade80; }
.ed-sec--ink .cs-cross { color: #f87171; }
.ed-sec--ink .cs-partial { color: #fbbf24; }

/* ── Type scale & spacing ramp ──────────────────────────────── */

.cs-type-scale { margin-top: clamp(1.5rem, 3vw, 2rem); }
.cs-type-row {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1rem 0; border-bottom: 1px solid var(--rule-paper);
}
.ed-sec--ink .cs-type-row { border-bottom-color: var(--rule-ink); }
.cs-type-size { flex: 0 0 4.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--accent-ink); }
.ed-sec--ink .cs-type-size { color: var(--accent); }
.cs-spacing-demo { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 1.5rem; }
.cs-sp { background: var(--accent); border-radius: 2px; }

/* ── Image blocks ───────────────────────────────────────────── */

.cs-img-hero, .cs-img-item {
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 30px 56px -34px rgba(11, 12, 14, 0.5), 0 0 0 1px rgba(11, 12, 14, 0.08);
}
.ed-sec--ink :is(.cs-img-hero, .cs-img-item) { box-shadow: 0 30px 56px -34px #000, 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cs-img-item { cursor: pointer; transition: transform 0.4s var(--ease); }
.cs-img-item:hover { transform: translateY(-5px); }
.cs-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.cs-img-caption { margin-top: 0.9rem; font-size: 0.82rem; color: var(--on-paper-soft); }
.ed-sec--ink .cs-img-caption { color: var(--on-ink-soft); }
.cs-img-chrome {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: rgba(11, 12, 14, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-img-dots { display: flex; gap: 0.3rem; }
.cs-img-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.cs-img-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 0.66rem; color: rgba(255, 255, 255, 0.4); }

/* ── Personas, research, tools, flow, steps ─────────────────── */

.cs-persona-grid, .cs-research-grid, .cs-toolkit-grid, .cs-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.cs-persona-card, .cs-research-card, .cs-tool, .cs-highlight-item { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-persona-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem;
}
.cs-persona-name, .cs-research-title, .cs-tool-name {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em;
}
.cs-persona-role, .cs-tool-role, .cs-research-tag {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink);
}
.ed-sec--ink :is(.cs-persona-role, .cs-tool-role, .cs-research-tag) { color: var(--accent); }
.cs-persona-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.cs-persona-list li {
  font-size: 0.88rem; line-height: 1.55; color: var(--on-paper-soft);
  padding-left: 1rem; position: relative;
}
.cs-persona-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.ed-sec--ink .cs-persona-list li { color: var(--on-ink-soft); }
.cs-persona-section-label {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--on-paper-faint); margin-top: 0.6rem;
}
.ed-sec--ink .cs-persona-section-label { color: var(--on-ink-faint); }
.cs-research-body, .cs-highlight-text { font-size: 0.9rem; line-height: 1.65; color: var(--on-paper-soft); }
.ed-sec--ink :is(.cs-research-body, .cs-highlight-text) { color: var(--on-ink-soft); }
.cs-research-stat { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-ink); }
.ed-sec--ink .cs-research-stat { color: var(--accent); }
/* Icons.
   font-size alone only sizes an emoji. Where the icon is an inline
   <svg> with a viewBox and no width, it stretches to fill its column:
   on emplora-web that rendered four 314px database glyphs above the
   fold. Everything decorative is pinned to an icon box instead. */
.cs-tool-icon, .cs-challenge-icon, .cs-highlight-icon,
.cs-persona-avatar, .cs-flow-step-num {
  font-size: 1.4rem;
  line-height: 1;
}
:is(.cs-tool-icon, .cs-challenge-icon, .cs-highlight-icon) {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  margin-bottom: 0.2rem;
}
.ed-sec--ink :is(.cs-tool-icon, .cs-challenge-icon, .cs-highlight-icon) { color: var(--accent); }
:is(.cs-tool-icon, .cs-challenge-icon, .cs-highlight-icon) > svg { width: 100%; height: 100%; }
/* a bare svg anywhere in the body copy can never run away either */
.ed-sec svg:not([width]):not([class]) { width: 1.25rem; height: 1.25rem; }
.ed-sec :is(.ed-btn, .ed-explore a, .ed-nav-back) svg { width: 13px; height: 13px; }

/* ── Label / value pairs ────────────────────────────────────
   Every project renamed these with its own prefix: feat-meta-*,
   cs-highlight-meta-*, dh-meta-*, ocfo-meta-*, cp-meta-* and six
   more. Matched on the suffix so all of them get the treatment
   instead of stacking as undifferentiated paragraphs. */

[class*="meta-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1rem 1.75rem;
  margin-top: 0.9rem;
}
[class*="meta-label"] {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 0.28rem;
}
.ed-sec--ink [class*="meta-label"] { color: var(--accent); }
[class*="meta-body"] {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--on-paper-soft);
}
.ed-sec--ink [class*="meta-body"] { color: var(--on-ink-soft); }

/* titles inside a passed-through block */
.ed-sec :is(.cs-highlight-text, .cs-tool, .cs-highlight-item) > h4,
.ed-sec .showcase-feature-text > h4 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
}

.cs-process-steps { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--rule-paper); }
.ed-sec--ink .cs-process-steps { border-top-color: var(--rule-ink); }
/* A step is a number plus however many blocks of prose follow it. They
   all belong in the second column: left to flow, the third child wraps
   back under the number and renders one word per line. */
.cs-step {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule-paper);
}
.cs-step > * { grid-column: 2; }
.cs-step > .cs-step-num { grid-column: 1; grid-row: 1; }
.cs-step > * + * { margin-top: 0.45rem; }
.ed-sec--ink .cs-step { border-bottom-color: var(--rule-ink); }
.cs-step-num { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-ink); padding-top: 0.3rem; }
.ed-sec--ink .cs-step-num { color: var(--accent); }
.cs-step-title { font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.cs-step-body, .cs-step-body-desc { font-size: 0.92rem; line-height: 1.65; color: var(--on-paper-soft); }
.ed-sec--ink :is(.cs-step-body, .cs-step-body-desc) { color: var(--on-ink-soft); }

.cs-flow-row { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 2.5rem); }
.cs-flow-step { flex: 1 1 150px; padding: 1.1rem 1.2rem; border: 1px solid var(--rule-paper); border-radius: 12px; }
.ed-sec--ink .cs-flow-step { border-color: var(--rule-ink); }
.cs-flow-step-num { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-ink); }
.ed-sec--ink .cs-flow-step-num { color: var(--accent); }
.cs-flow-step-label { display: block; font-weight: 700; font-size: 0.95rem; margin: 0.35rem 0 0.3rem; }
.cs-flow-step-body { font-size: 0.84rem; line-height: 1.55; color: var(--on-paper-soft); }
.ed-sec--ink .cs-flow-step-body { color: var(--on-ink-soft); }

/* ── Pull quotes, tags, swatches ────────────────────────────── */

.cs-quote { margin-top: clamp(2rem, 5vw, 3rem); }
.cs-quote-text {
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  font-weight: 600; line-height: 1.34; letter-spacing: -0.025em; max-width: 28ch;
}
.cs-quote-source { margin-top: 1.1rem; font-size: 0.84rem; color: var(--on-paper-soft); }
.ed-sec--ink .cs-quote-source { color: var(--on-ink-soft); }

.cs-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.cs-tag { padding: 0.38em 0.9em; border-radius: 999px; background: var(--chip); color: var(--on-paper); font-size: 0.74rem; font-weight: 600; }
.ed-sec--ink .cs-tag { background: rgba(255, 255, 255, 0.1); color: var(--on-ink); }
.cs-tag-accent, .ed-sec--ink .cs-tag-accent { background: var(--accent); color: var(--accent-ink); }

.cs-colors { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.6vw, 1.4rem); margin-top: 1.5rem; }
.cs-color-swatch { width: 54px; height: 54px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* Old wrappers must not reimpose their own widths inside ed-wrap. */
.cs-container, .cs-section, .cs-section-inner, .cs-showcase, .showcase-inner,
.cs-impact-inner, .cs-tmpl-inner { max-width: 100%; padding: 0; margin: 0; }

/* A section's first title is lifted into the editorial head; a second
   one stays where it was as a sub-heading, so it needs its own type. */
.cs-section-title {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.cs-section-title em { font-style: normal; color: var(--accent-ink); }
.ed-sec--ink .cs-section-title em { color: var(--accent); }
.cs-eyebrow {
  display: inline-block;
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
}
.ed-sec--ink .cs-eyebrow { color: var(--accent); }
.cs-body-text, .cs-tmpl-desc {
  font-size: 0.96rem; line-height: 1.7;
  color: var(--on-paper-soft); max-width: 62ch; margin-top: 1rem;
}
.ed-sec--ink :is(.cs-body-text, .cs-tmpl-desc) { color: var(--on-ink-soft); }
.cs-tmpl-header { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Loose paragraphs and headings that came through in a passthrough
   block still need to look like they belong to this system. */
.ed-sec p:not([class]) { font-size: 0.94rem; line-height: 1.68; color: var(--on-paper-soft); max-width: 62ch; }
.ed-sec--ink p:not([class]) { color: var(--on-ink-soft); }
.ed-sec :is(h3, h4):not([class]) { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; margin-top: 1.5rem; }