/* Design sandbox only: batch A. Loaded last; palette, copy and image files unchanged. */
:root {
  --cf-fs-body-read: 1.125rem;
  --cf-lh-read: 1.65;
  --cf-fs-micro: 0.875rem;
  --cf-fs-badge: 0.75rem;
  --cf-fw-light: 400;
  --design-prose-size: 18px;
}

/* Reading measure applies to text, never to its diagram/media wrapper. */
main :is(.prose-read, .prose-read p, .legal-block p, .legal-block ul,
  .legal-block ol, .card-list, .step-body, .cf-named__def,
  .cf-terms-strip .cf-named__def, .cf-name-story__body,
  .cf-districts .cf-districts__body, .cf-beat p, .cf-index-list__body,
  .cf-bubble__body, .cf-lab-seat__role, .section-intro, .page-lead,
  .follow-inner > p, p:not([class])) {
  max-width: min(608px, 65ch);
  font-size: var(--design-prose-size);
  font-weight: 400;
  line-height: 1.65;
}
main :is(.prose-read p, .legal-block p) { margin-block: 0 20px; }
main :is(.prose-read, .legal-block) > :last-child { margin-bottom: 0; }
.design-founder #status p, .cm-lane-science #status p {
  max-width: min(608px, 65ch);
  font-size: var(--design-prose-size);
  font-weight: 400;
  line-height: 1.65;
  margin-block: 0 20px;
}
.card-title, .step-title, .cf-card .card-title {
  font-family: var(--cf-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.cf-named__label, .cf-terms-strip .cf-named__label {
  font-family: var(--cf-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.hero-micro, .page-micro, .contact-note, .footer-disclaimer,
.footer-meta, .footer-lab-chip, .cf-card__status, .cf-bubble__note,
.follow-inner .follow-micro {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.cf-trust-strip, .cf-chip, .card-kicker, .cf-card__index,
.cf-badges li, .footer-nav a, .cf-lab-seat__inhouse {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.visually-hidden, .design-diagram-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1. Centered hero, restored live actions before the 640px video. */
.cm-lane-home .hero { padding: 80px 0; }
.hero .hero-badge { margin: 0 0 24px; }
.hero .hero-title {
  max-width: 800px;
  margin: 0 auto 24px;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero .hero-lead {
  max-width: 640px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
}
.hero .hero-stance {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}
.hero .hero-micro { max-width: 640px; margin: 24px auto 0; }
.hero .cf-trust-strip { max-width: 640px; margin: 24px auto 0; }
.hero .hero-actions { gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hero-actions :is(.button-primary, .button-secondary) {
  min-height: 48px;
  padding: 12px 20px;
  line-height: 1.4;
}
.hero .cf-hero-tv { width: 100%; max-width: 640px; margin: 32px auto 0; }
.hero .cf-hero-tv .media-caption { margin-top: 12px; font: 400 14px/1.5 var(--cf-font-body); }

/* Shorter Home chapter boundaries; science beats use the available desktop width. */
.cm-lane-home .cf-home-sec { padding-block: 56px 40px; }
.cm-lane-home #named { padding-block: 64px 48px; }
.cm-lane-home :is(#map, #districts) { padding-block: 32px 40px; }
.cm-lane-home #stance { padding-block: 64px 56px; }
.cm-lane-home #stance .cf-measure--read { font-size: var(--design-prose-size); line-height: 1.65; }
.cm-lane-home #stance :is(p, .card-list) { max-width: min(608px, 65ch); }
.cm-lane-home #stance p:not(.cf-stance-action) { margin-block: 0 20px; }
@media (min-width: 768px) {
  .cm-lane-home #beats .cf-measure--read {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
    max-width: 1120px;
  }
  .cm-lane-home #beats .cf-beat + .cf-beat { margin-top: 0; }
  .cm-lane-home #beats .cf-measure--read > p { grid-column: 1 / -1; margin: 0; }
}

/* 2. Live-label overview. Existing dim bronze is the essential outline/link color. */
.cm-lane-science #overview .cf-figure { padding: 24px; }
.design-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.design-overview__node {
  display: grid;
  place-content: center;
  min-width: 0;
  min-height: 100px;
  padding: 20px;
  border: 2px solid var(--cf-accent-dim);
  border-radius: 12px;
  color: var(--cf-text-soft);
  text-align: center;
  font: 500 16px/1.4 var(--cf-font-body);
  overflow-wrap: anywhere;
}
.design-overview__link { width: 24px; height: 2px; background: var(--cf-accent-dim); }
.cm-lane-science #overview figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; }
/* Match the earlier, more detailed bridge without changing its content or motion. */
.cm-lane-science #rite .cm-map__node,
.cm-lane-science #rite .cm-map__node.is-lit { border-color: var(--cf-accent-dim); }
.cm-lane-science #rite .cm-map__link,
.cm-lane-science #rite .cm-map__link.is-lit { color: var(--cf-accent-dim); }

/* 3. Founder chapters: narrative, unboxed chronology, ruled principles, paired tracks. */
.design-founder main > .cf-section { padding-block: 32px 40px; }
.design-founder main > :is(#story, #background, #principles, #paths, #lab-seats) {
  padding-block: 88px 48px;
}
.design-founder .cf-story .cf-story__body p { margin-block: 0 20px; }
.design-founder .cf-story .cf-story__body p.cf-spine-note { margin-block: 24px 0; }
.design-founder #background .cf-bio { max-width: 800px; gap: 0; }
.design-founder #background .card {
  display: grid;
  grid-template-columns: 160px minmax(0, 608px);
  column-gap: 32px;
  row-gap: 16px;
  padding: 32px 0;
  border: 0;
  border-top: 1px solid var(--cf-line-strong);
  border-radius: 0;
  background: none;
}
.design-founder #background .card > .card-kicker { grid-column: 1; margin: 0; }
.design-founder #background .card > :not(.card-kicker) { grid-column: 2; margin: 0; }
.design-founder #background .card p + p { margin-top: 4px; }
.design-founder #principles .cf-grid-3 { gap: 24px; }
.design-founder #principles .card {
  padding: 24px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--cf-line-strong);
  border-radius: 0;
}
.design-founder #quote .founder-quote {
  max-width: 608px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
}
.design-founder .cf-lab-seats { max-width: 960px; grid-template-columns: 1fr; gap: 0; }
.design-founder .cf-lab-seat {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 24px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--cf-line-strong);
  border-radius: 0;
}
.design-founder .cf-lab-seat__name, .design-founder .cf-lab-seat__tag { margin: 0; padding: 0; }
.design-founder :is(#background, #principles, #lab-seats) .cm-lift:hover {
  transform: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .design-founder #principles .cf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .design-founder #story .cf-container.cf-measure > * { max-width: 608px; }
}
@media (max-width: 767px) {
  .design-founder #background .card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .design-founder #background .card > :not(.card-kicker) { grid-column: 1; }
  .design-founder #principles .cf-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* 4. ELI5: source-order text groups alongside unchanged, undimmed original art. */
.design-eli5 .design-chapters { max-width: 1120px; }
.design-eli5 .cf-terms-strip { max-width: 896px; }
.design-eli5 .story-step { padding-block: 72px; }
.design-eli5 .story-copy { min-width: 0; max-width: 608px; }
.design-eli5 .story-step h2 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.design-eli5 .story-label { font-size: 14px; font-weight: 500; line-height: 1.4; }
.design-eli5 .story-step p { margin-block: 0 20px; }
.design-eli5 .story-copy > :last-child { margin-bottom: 0; }
.design-eli5 .story-art { width: 100%; max-width: 960px; margin: 24px 0 0; border-radius: 16px; }
.design-eli5 .story-art img { opacity: 1; }
.design-eli5 .story-art a { display: block; }
.design-eli5 .story-art:focus-within { outline: var(--cf-focus); outline-offset: var(--cf-focus-offset); }
.design-eli5 .design-chapters > :is(p, .model-note) { max-width: min(608px, 65ch); }
.design-eli5 .closing-actions { flex-wrap: wrap; gap: 12px; }
@media (min-width: 1024px) {
  .design-eli5 .story-step--middle {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 552px);
    align-items: center;
    gap: 48px;
  }
  .design-eli5 .story-step--middle .story-art { margin-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .design-eli5 .story-step { padding-block: 56px; }
}

@media (max-width: 639px) {
  :root { --cf-fs-body-read: 1.0625rem; --design-prose-size: 17px; }
  .cm-lane-home .hero { padding: 56px 0 64px; }
  .hero .hero-title { font-size: 38px; line-height: 1.08; }
  .hero .hero-lead { font-size: 18px; line-height: 1.55; }
  .cm-lane-home .cf-home-sec { padding-block: 40px 32px; }
  .cm-lane-home #named { padding-block: 48px 32px; }
  .cm-lane-home :is(#map, #districts) { padding-block: 24px 32px; }
  .cm-lane-home #stance { padding-block: 48px 40px; }
  .cm-lane-science #overview .cf-figure { padding: 16px; }
  .design-overview { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .design-overview__link { justify-self: center; width: 2px; height: 24px; }
  .design-founder main > .cf-section { padding-block: 24px 32px; }
  .design-founder main > :is(#story, #background, #principles, #paths, #lab-seats) {
    padding-block: 56px 24px;
  }
  .design-founder .cf-lab-seat { grid-template-columns: minmax(0, 1fr); }
  .design-founder #quote .founder-quote { font-size: 28px; }
  .design-eli5 .story-step { padding-block: 40px; }
  .design-eli5 .story-art { max-width: none; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .hero .hero-title { font-size: 48px; }
}
