/* Homepage v2 — layout overrides only */

/* §02 — balanced headline wrapping */
#problem .tl-head > div:first-child {
  flex: 1;
  min-width: 0;
  max-width: 720px;
}

#problem .section-h {
  max-width: 720px;
  text-wrap: pretty;
}

/* §04 — readout anchored to evidence-rail inside .dna-sticky (position set in dna.js) */
body.home-v2 .dna-evidence-rail {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 1101px) {
  body.home-v2 .dna-readout {
    right: auto;
    width: 264px;
  }
}

/* ============================================================
   MOBILE IA RECONSTRUCTION
   All rules below apply only at narrow mobile widths.
   Desktop layouts (above the relevant breakpoints) are unchanged.
   ============================================================ */

/* §03+04 DNA — Increase canvas height so the helix and its side
   labels are fully visible. Add a visual separator between the
   two narrative beats. Both work within the existing 820px
   mobile-stack layout already in home.css. */
@media (max-width: 820px) {
  .dna-canvas { height: 280px !important; }
  #dnaCopyB {
    border-top: 1px solid var(--b1);
    padding-top: 32px;
    margin-top: 8px;
  }
}

/* §02 PROBLEM — LIQ stacked marker band height (fits-within-viewport timeline in home.css) */
@media (max-width: 820px) {
  #problem .tl-markers {
    min-height: 212px;
  }
}