/* PCW article-only reading layout. Loaded only on /articles/ routes.
   Keep the hero, breadcrumb and long-form content aligned as one editorial column.
   This addresses the wide blank right-hand gutter seen on 1366px desktop. */
main .breadcrumbs,
main .hero:not(.home-hero),
main .prose,
main [data-page-outline],
main .action-worksheet[data-action-worksheet] {
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
main .prose {
  min-width: 0;
}
/* The first answer should paint immediately. The site's decorative entrance
   animation otherwise keeps article heading/intro text translucent for 360ms. */
main .hero:not(.home-hero) {
  animation: none;
}
/* Some legacy articles use .card.section.prose without the inset supplied
   by .content-card. Headings and photos must not touch the card border. */
main .card.section.prose {
  padding: clamp(18px, 2.7vw, 30px);
}
/* Legacy multi-card articles render photos as direct siblings of the prose cards.
   Center those figures as well; otherwise three real photos remain stuck at x=20px. */
main > .pcw-editorial-photo,
main .prose .pcw-editorial-photo {
  margin-left: auto;
  margin-right: auto;
}
/* Astro adds a scope attribute to the component's margin rule. Include the
   documentary marker so this rule wins even when bundled component CSS loads
   after this file. The previous selector lost in the rendered CI build. */
main .pcw-editorial-photo[data-editorial-photograph] {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
main .prose :where(img,svg) {
  max-width: 100%;
}
@media (max-width: 760px) {
  main .breadcrumbs,
  main .hero:not(.home-hero),
  main .prose,
  main [data-page-outline],
  main .action-worksheet[data-action-worksheet] {
    max-width: 100%;
  }
}