/* Hero (text-only) + Thesis (comparison figure). Scene agents own rules below. */

.hero {
  min-height: 76svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Equal vertical padding so flex centering sits on the true mid of 76svh. */
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.hero > .shell {
  width: calc(100% - (var(--shell-gutter) * 2));
  max-width: none;
}

.hero-grid {
  display: block;
  min-height: auto;
  width: 100%;
}

.hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: none;
  width: 100%;
  min-width: 0;
  text-align: center;
  margin-inline: auto;
}

.hero-copy h1 {
  /* Spec §3 display: size / lh / tracking. Centred measure ~62–72% of shell. */
  font-size: clamp(2.75rem, 6.1vw, 5.5rem);
  line-height: 0.99;
  letter-spacing: -0.042em;
  font-weight: 600;
  max-width: min(16.5ch, 68%);
  text-wrap: pretty;
}

.hero-copy .lede {
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  /* ~54–60 characters; CSS ch runs wide on this face, so tighten. */
  max-width: 46ch;
  margin-inline: auto;
}

.hero-copy .actions {
  justify-content: center;
  flex-wrap: nowrap;
}

@media (max-width: 999px) {
  .hero {
    min-height: 76svh;
    padding-block: 2rem;
  }

  .hero-copy h1 {
    max-width: min(16ch, 92%);
  }
}

@media (max-width: 767px) {
  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-copy .actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 639px) {
  .hero-copy {
    gap: 1.25rem;
  }

  .hero-copy .lede {
    max-width: 36ch;
  }
}

/* Neutralize base `.thesis` display styles when used as a section class. */
section.thesis {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-wrap: initial;
  /* Slightly tighter top pad: hero's 76svh already supplies empty air below the copy. */
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: var(--section-y);
}

.thesis-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(420px, 1.22fr);
  /* Optical gap (text ink → canvas ink) lands in the 56–96px band at 1440. */
  column-gap: 28px;
  align-items: center;
}

.thesis-copy {
  justify-self: end;
  width: min(100%, 22rem);
  display: grid;
  gap: 1.05rem;
  min-width: 0;
  /* Nudge toward the figure so unused ragged margin does not inflate the
     optical gap; vertical offset matches canvas ink centre within 8px. */
  transform: translate(12px, -2%);
  padding-top: 0;
}

.thesis-copy .section-head {
  max-width: 18ch;
}

.thesis-copy .support {
  max-width: 34ch;
  margin: 0;
}

.hero-stage {
  position: relative;
  width: 100%;
  /*
   * Stage tracks the figure (ink + labels already ≥88% of this frame).
   * Canvas-only ratio is fixed by js/scenes/hero.js plot lanes; do not crop
   * or the settled labels clip.
   */
  height: min(52svh, 480px);
  min-height: min(52svh, 480px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.hero-stage [data-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 999px) {
  .thesis-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .thesis-copy {
    justify-self: stretch;
    width: 100%;
    order: 2;
    transform: none;
  }

  .hero-stage {
    order: 1;
    height: min(48svh, 420px);
    min-height: min(48svh, 420px);
  }

  .thesis-copy .section-head {
    max-width: none;
  }
}

@media (max-width: 639px) {
  .hero-stage {
    height: min(42svh, 340px);
    min-height: min(42svh, 340px);
  }
}

/* scene-owned rules below */

.hero-stage .scene-labels {
  overflow: visible;
}

.hero-stage .hero-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--type-mono);
  font-weight: 600;
  line-height: var(--lh-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(0, 0);
}

.hero-stage .hero-label-state {
  color: var(--ink);
  transition: opacity 200ms var(--ease-css);
}

.hero-stage .hero-label-bracket {
  color: var(--accent);
}

.hero-stage .hero-label-contract {
  color: var(--ink);
  max-width: 46%;
  white-space: normal;
  text-align: right;
  line-height: 1.25;
}

.hero-stage .hero-label-axis {
  color: var(--ink);
}

.hero-stage .hero-label-outcome {
  color: var(--ink);
}

.hero-stage .hero-label-before {
  color: var(--ink);
  letter-spacing: 0.08em;
}

@media (max-width: 639px) {
  .hero-stage .hero-label {
    letter-spacing: 0.06em;
  }

  .hero-stage .hero-label-bracket {
    max-width: 36%;
    white-space: nowrap;
  }

  .hero-stage .hero-label-contract {
    max-width: 58%;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
  }

  .hero-stage .hero-label-readout {
    max-width: 70%;
  }

  .hero-stage .hero-label-baseline-name {
    letter-spacing: 0.05em;
  }
}