/* Page-scoped additions for this article only. Linked from this page alone; the shared Unicorn CSS is untouched. */

/* C1: shorter opening on mobile, so slide 1's illustration starts on the first screen */
@media (max-width: 760px) {
  .blog_post-01 .overlay-post { padding-top: 24px; }
  .blog_post-01 .post-title { font-size: 28px !important; line-height: 1.18 !important; margin-bottom: 14px !important; }
  .blog_post-01 .post-body .nfx-standfirst { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
}

/* V6 item 7: tighter desktop opening (this page only), so slide 1's first illustration sits above the 900 px fold */
@media (min-width: 761px) {
  .blog_post-01 .overlay-post { padding-top: 72px; }
  .blog_post-01 .post-title { margin-bottom: 14px !important; }
  .blog_post-01 .date-modified { margin-bottom: 14px; }
  .blog_post-01 .post-body .nfx-standfirst { margin-bottom: 0 !important; }
}

/* C2: the carousel's anchored position clears the sticky site header */
.blog_post-01 netflix-carousel { scroll-margin-top: 80px; }

/* C3: the two body figures render in their own shadow roots (preview-assets/figures.css); only their spacing is set here */
.blog_post-01 .post-body .nfx-figure { display: block; margin: 36px 0 40px; }

/* C6: center the two related cards in the purple Read more band */
.blog_post-01 .read-more__more-posts { justify-content: center; gap: 32px; }

/* Sticky header: the template's 95% white let article text show through while scrolling. Solid white on this page only;
   stickiness, z-index and the Read more fade (opacity/visibility set by the original script) are unchanged. */
.nav-02.nav-02--sticky { background-color: #fff !important; }

/* Series label "UX News & Analysis" (owner chose option C): live dot, spaced purple capitals, short brand-gradient rule */
.blog_post-01 .nfx-series { display: flex !important; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .18em; font-size: 13px !important; color: #592f91 !important; }
.blog_post-01 .nfx-series::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #F90473; box-shadow: 0 0 0 4px rgba(249,4,115,.18); }
.blog_post-01 .nfx-series::after { content: ""; flex: 0 0 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #4ADDB4, #4D61FC 35%, #943bdc 65%, #F90473); }

/* Standfirst spans the title's width (owner), aligned with the title's left edge; this page only */
.blog_post-01 .post-body .nfx-standfirst { max-width: none !important; width: 100%; align-self: stretch; margin-left: 0 !important; margin-right: 0 !important; }