/* Final article layout cleanup.
   Loaded after community styles so article geometry stays consistent across
   standard, review, guide, and ranked-list templates. */

.work-bottom-sidebar .work-follow-card{display:none!important}

/* Keep long-form reading layouts compatible with sticky utilities. */
#article.work-article-page>.work-reading-grid,
#article.ranked-list-page>.work-reading-grid{
  overflow:visible!important;
  align-items:start!important;
}

/* Cross-page links to article sections should land below the sticky header. */
#article.work-article-page .article-body>section[id]{
  scroll-margin-top:132px;
}

#article.work-article-page .article-body>section.article-deep-link-target{
  animation:ncDeepLinkPulse 1.45s ease-out;
}

@keyframes ncDeepLinkPulse{
  0%{outline:2px solid rgba(85,231,255,.78);outline-offset:8px;box-shadow:0 0 0 8px rgba(85,231,255,.08)}
  100%{outline:2px solid transparent;outline-offset:18px;box-shadow:0 0 0 16px transparent}
}

/* The action rail should follow the reader through long articles. */
#article.work-article-page .work-react-rail.standard-react-rail{
  position:sticky!important;
  top:112px!important;
  align-self:start!important;
  height:max-content!important;
  z-index:3!important;
}

/* Keep the TOC / author column in sync with the reading position too. */
#article.work-article-page .work-article-sidebar{
  position:sticky!important;
  top:110px!important;
  align-self:start!important;
  height:max-content!important;
}

/* The duplicate lower sidebar is gone, but the discussion should not become
   a giant full-width slab. Give it a familiar publication discussion width. */
#article.work-article-page>.work-bottom-grid{
  display:block!important;
  width:min(980px,100%)!important;
  margin:60px auto 0!important;
}

#article.work-article-page>.work-bottom-grid>div{
  width:100%!important;
  min-width:0!important;
}

#article.work-article-page .work-bottom-sidebar{
  display:none!important;
}

#article.work-article-page #reader-thread{
  width:100%!important;
  max-width:none!important;
}

/* Keep the single newsletter CTA wider than the discussion so it acts as a
   deliberate full-width ending to the article. */
#article.work-article-page>.work-newsletter-band{
  width:min(1150px,100%)!important;
  margin:52px auto 0!important;
}

@media(max-width:900px){
  /* Below this breakpoint the action rail becomes the horizontal mobile row. */
  #article.work-article-page .work-react-rail.standard-react-rail{
    position:relative!important;
    top:auto!important;
    align-self:auto!important;
    height:auto!important;
    z-index:auto!important;
  }

  #article.work-article-page .work-article-sidebar{
    position:relative!important;
    top:auto!important;
    align-self:auto!important;
    height:auto!important;
  }

  #article.work-article-page .article-body>section[id]{
    scroll-margin-top:96px;
  }

  #article.work-article-page>.work-bottom-grid{
    width:100%!important;
    margin-top:48px!important;
  }

  #article.work-article-page>.work-newsletter-band{
    margin-top:42px!important;
  }
}

@media(max-width:620px){
  #article.work-article-page>.work-bottom-grid{
    margin-top:40px!important;
  }
}