/*
   Final presentation refinements.
   This layer is intentionally additive: the original stage artwork, scroll
   footsteps, microphone behavior, and platform styling remain unchanged. The
   audio module has only the requested reversible scroll-fade hook.
*/

/* Give the three editorial sections the same visual cadence on wide screens.
   A fixed row rhythm avoids the uneven gaps caused by content-driven grid
   sizing while still allowing the work section to grow when needed. */
.theater-descent .content {
  --heading-space: 1rem;
  --subsection-space: 2rem;
  grid-template-rows: none;
  row-gap: clamp(48px, 5vw, 96px);
  align-content: start;
  width: min(100%, 1280px);
  padding-inline: clamp(24px, 6vw, 96px);
}

.theater-descent .editorial {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: clamp(48px, 6vw, 96px);
  min-height: clamp(430px, 31vw, 600px);
  padding-block: clamp(72px, 6vw, 112px);
}

.theater-descent .editorial > div:first-child {
  padding-top: 4px;
}

.theater-descent .editorial .prose {
  max-width: 660px;
}

/* One gap for label/title pairs and heading/content pairs at every width. */
.theater-descent .editorial > div:first-child > .eyebrow {
  margin: 0 0 var(--heading-space);
}

.theater-descent .editorial h2 {
  margin: 0;
}

.theater-descent .editorial .prose > h3 {
  margin: 0 0 var(--heading-space);
}

.theater-descent .editorial .prose > h3:not(:first-child) {
  margin-top: var(--subsection-space);
}

.theater-descent .editorial .prose > h3 + p {
  margin-top: 0;
}

/* Keep the certificate-free iOS 27 pass section aligned with the site's
   existing editorial rhythm and gold interaction treatment. */
.tm-passes .tm-pass-download {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-block-size: 48px;
  margin: 12px 0 18px;
  padding: 13px 18px;
  border: 1px solid #d4a35c;
  color: #ffe0a8;
  background: #100b06cc;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}

.tm-passes .tm-pass-download:hover,
.tm-passes .tm-pass-download:focus-visible {
  background: #2a1a0dcc;
  text-decoration: none;
}

.tm-passes .tm-pass-note {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.65;
  color: #c8beb2;
}

.tm-passes .tm-pass-linktree {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid #d4a35c66;
}

.tm-passes .tm-pass-linktree h3 {
  margin-bottom: 10px;
}

.tm-passes .tm-pass-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tm-passes .tm-pass-actions .tm-pass-download {
  margin-block: 10px 14px;
}

.theater-descent .tm-podcast-links {
  margin-bottom: var(--subsection-space);
}

.theater-descent footer,
.theater-descent .music-credit {
  padding-inline: clamp(24px, 6vw, 96px);
}

/* Match the Podcasts & Conversations heading while keeping the lines close. */
.tm-podcast-links .tm-podcast-coming-eyebrow,
.tm-podcast-links .tm-podcast-coming-soon h3 {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #ffe0a8;
  text-shadow: inherit;
  animation: none;
  margin: 0 0 var(--heading-space);
}

/* Disclosures use a comfortable reading size rather than miniature print. */
.tm-podcast-links .tm-podcast-note,
.tm-podcast-links .tm-podcast-credit {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #f6ecd9;
  text-shadow: 0 2px 4px #000, 0 0 12px #000;
}

.tm-podcast-links .tm-podcast-credit {
  margin-top: 16px;
}

/* Give the listening invitation enough weight to function as the section's
   primary call to action while keeping the platform badges visually dominant. */
.tm-podcast-links .tm-podcast-description {
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.45;
  margin-bottom: var(--heading-space);
}

/* Start the photographic stage dark, then let the existing overhead beam and
   registered scene warm up together. The layout remains present during the
   transition, so there is no content shift. */
.grounded-stage:not(.tm-stage-ready) .stage-scene-image,
.grounded-stage:not(.tm-stage-ready) .stage-microphone-brass {
  opacity: 0 !important;
}

.grounded-stage:not(.tm-stage-ready) .stage-light {
  opacity: 0 !important;
}

.grounded-stage.tm-stage-ready .stage-scene-image,
.grounded-stage.tm-stage-ready .stage-microphone-brass {
  opacity: 1 !important;
  transition: opacity 4.2s ease-out;
}

.grounded-stage.tm-stage-ready .stage-light {
  opacity: calc(var(--stage-beam, .85) * var(--stage-scroll-light, 1)) !important;
  transition: opacity 4.2s ease-out;
}

@media (max-width: 700px) {
  .theater-descent .content {
    display: grid;
    grid-template-rows: none;
    row-gap: clamp(42px, 11vw, 72px);
    padding-inline: 7%;
  }

  .theater-descent .editorial {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    min-height: 0;
    padding-block: clamp(54px, 12vw, 78px);
  }

  .theater-descent .editorial > div:first-child {
    padding-top: 0;
  }
}

@media (max-width: 360px) {
  .theater-descent .editorial {
    padding-block: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grounded-stage.tm-stage-ready .stage-scene-image,
  .grounded-stage.tm-stage-ready .stage-microphone-brass,
  .grounded-stage.tm-stage-ready .stage-light {
    transition: none;
  }
}