#hero { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); gap: 32px; }
#hero > * { min-width: 0; }
.hero-secondary { border-left: 1px solid var(--line); padding-left: 32px; }
#hero .hero-magazine { width: calc(100% - 4px); height: auto; aspect-ratio: 3 / 2; margin: 0 4px 0 0; }
.hero-magazine :is(.leaf-stack, .leaf-edge, .cover-sheet) { width: 100%; height: 100%; }
.hero-magazine .cover-sheet { position: absolute; inset: 0; }
.hero-magazine .article-lettering { width: 46%; left: 27%; }
.hero-magazine .cover-sheet::before { content: ''; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 12px; background: linear-gradient(90deg, #0000000d, #00000021 3px, #ffffff2e 4px, transparent 10px); pointer-events: none; }
#hero .caption { margin-top: 24px; }
#hero .title { font-family: AppstarInter, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: normal; }
#hero .hero-title { font-family: AppstarHeading, Haas, Arial, sans-serif; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; }
.hero-kicker { display: block; margin-bottom: 8px; font: 500 12px/18px AppstarInter, Arial, sans-serif; color: var(--muted); }
.hero-description { display: block; max-width: 38em; margin-top: 14px; font: 400 16px/1.5 AppstarInter, Arial, sans-serif; color: var(--muted); }
#hero-video .appstar-visual { aspect-ratio: 16 / 9; }
#hero-video .podcast-card, #hero-video .podcast-card::before { background: transparent; }
#hero-video .appstar-caption { margin-top: 12px; }
#hero-video .podcast-card:active { transform: none; }
.hero-stories { margin-top: 24px; }
.hero-story { padding: 22px 0; border-top: 1px solid var(--line); }
.hero-story:last-child { padding-bottom: 0; }
.hero-story:hover .title, .hero-story:focus-visible .title { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) {
  #hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-secondary { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  #hero .hero-title { font-size: clamp(30px, 6vw, 44px); }
  #hero .title:not(.hero-title) { font-size: 20px; }
}

/* Overlap the playlist cards to reserve the tallest caption before playback. */
#hero-video { display: grid; }
#hero-video > .podcast-card { grid-area: 1 / 1; }
#hero-video > .podcast-card[hidden] { display: block; visibility: hidden; pointer-events: none; }

:root[data-hero-visible="false"] #hero,
:root[data-hero-visible="false"] #hero + .section-divider { display: none; }