/* Release layout skeleton - scene agents append visuals below */

.release {
  min-height: 110vh;
  padding-block: var(--section-y);
}

.release-grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.release-stage {
  position: relative;
  width: 100%;
  height: min(70svh, 660px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

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

.release-copy {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

.release-copy h2 {
  font-size: var(--type-section);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  font-weight: 600;
}

.release-copy > p:not(.eyebrow) {
  color: var(--ink);
  font-size: var(--type-support);
  line-height: var(--lh-support);
}

.release-copy .pull {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--ink);
  border-left: 1px solid var(--accent);
  padding-left: 0.9rem;
}

@media (max-width: 999px) {
  .release {
    min-height: 0;
  }

  .release-grid {
    grid-template-columns: 1fr;
  }

  .release-stage {
    order: -1;
    height: 52svh;
  }

  .release-copy {
    max-width: none;
  }
}

@media (max-width: 639px) {
  .release-stage {
    height: 44svh;
  }
}

/* scene-owned rules below */

.release {
  /* Static section: normal height, no sticky scroll track. */
  min-height: 0;
  /* Keep the shared top rhythm; a slightly tighter bottom lands the
     release→roadmap ink joint under 200px once the stage is content-sized. */
  padding-bottom: clamp(64px, 6.5vw, 96px);
}

.release-grid {
  position: static;
  /* Top-align: shorter copy column ends early; no dead cell under the CTA. */
  align-items: start;
}

.release-stage {
  /* Content-sized stage: figure ink must fill ≥88% of this box. */
  height: clamp(300px, 26vw, 355px);
  max-height: 355px;
}

.release-stage [data-labels] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.rel-axis-label,
.rel-name,
.rel-stamp,
.rel-peak-label,
.rel-end-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
}

.rel-axis-label {
  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;
  text-align: left;
}

.rel-x-label {
  text-align: center;
  white-space: nowrap;
}

.rel-name {
  font-family: var(--sans);
  font-size: var(--type-mono);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.rel-name.is-best {
  color: var(--accent);
  font-weight: 600;
}

.rel-stamp {
  font-family: var(--mono);
  font-size: var(--type-mono);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
}

.rel-stamp.is-retained {
  color: var(--accent);
}

.rel-peak-label,
.rel-end-label {
  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;
}

.rel-peak-label {
  color: var(--accent);
}

.rel-end-label {
  color: var(--ink);
  white-space: normal;
  text-align: right;
  line-height: 1.25;
}

.release-copy .btn-primary {
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

@media (max-width: 999px) {
  .release {
    min-height: 0;
  }

  .release-grid {
    position: static;
    align-items: start;
  }

  .release-stage {
    height: clamp(280px, 48vw, 360px);
    max-height: 360px;
  }

  .rel-name {
    font-size: var(--type-mono);
  }
}

@media (max-width: 639px) {
  .release-stage {
    /* Stacked plot + list: still content-tall, not a viewport slab. */
    height: clamp(320px, 88vw, 420px);
    max-height: 420px;
  }

  .rel-name {
    font-size: var(--type-mono);
  }

  .rel-stamp {
    font-size: var(--type-mono);
  }

  .rel-peak-label,
  .rel-end-label,
  .rel-axis-label {
    font-size: var(--type-mono);
  }
}