/* The live blog's additions to the approved design (site.css stays as the design built it). */

/* Feed: Load More, loading tiles, and the notes shown for an empty or failed read. */
.feed-more { display: flex; justify-content: center; margin-top: 44px; }
.feed-more .cta { padding: 15px 34px; }
.feed-more .cta[disabled] { opacity: .6; cursor: progress; transform: none; }
.feed-note { font-size: 18px; color: var(--body); padding: 18px 0 8px; }
.post-skeleton figure, .post-skeleton .post-body { background: var(--sage); }
.post-skeleton .post-body { min-height: 150px; margin: 0; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.blog-filters .blog-filter:not([aria-current]) { border-bottom-color: transparent; }
.page-head .back-link { display: inline-block; margin-bottom: 18px; }
.page-head .lede { max-width: 640px; margin-top: 16px; }

/* Post page: categories eyebrow and tag labels, when the post has them. */
.post-cats { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.post-tags { max-width: 720px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags span { padding: 6px 14px; border-radius: 999px; background: var(--sage); font-size: 14px; font-weight: 600; }

/* The post body: the server-rendered HTML (first paint, and what search engines read) and the
   Wix rich-content viewer that replaces it share the approved .post-content typography. */
.post-content > div > * + *,
.post-content .ricos-content [data-hook="rcv-block-first"] ~ * { margin-top: 22px; }
.post-content .ricos-content { font-family: var(--text); color: var(--ink); }
.post-content .ricos-content p,
.post-content .ricos-content li,
.post-content .ricos-content span { font-family: var(--text) !important; color: var(--ink) !important; }
.post-content .ricos-content p,
.post-content .ricos-content li { font-size: 18.5px !important; line-height: 1.8 !important; }
.post-content .ricos-content h2,
.post-content .ricos-content h3,
.post-content .ricos-content h2 span,
.post-content .ricos-content h3 span { font-family: var(--head) !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.12 !important; }
.post-content .ricos-content h2 { font-size: clamp(32px, 3.4vw, 42px) !important; margin-top: 50px !important; }
.post-content .ricos-content h3 { font-size: 29px !important; margin-top: 38px !important; }
.post-content .ricos-content h4 { font-family: var(--text) !important; font-weight: 700 !important; font-size: 19px !important; margin-top: 30px !important; }
.post-content .ricos-content a { color: var(--green) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-content .ricos-content blockquote,
.post-content .ricos-content blockquote span { font-family: var(--head) !important; font-weight: 700 !important; font-size: 27px !important; line-height: 1.3 !important; color: var(--ink) !important; }
.post-content .ricos-content blockquote { border-left: 3px solid var(--irish) !important; padding: 6px 0 6px 24px !important; margin: 34px 0 !important; }
.post-content .ricos-content li::marker { color: var(--irish); }
.post-content .ricos-content img { border-radius: 8px; }
@media (max-width: 560px) {
  .post-content .ricos-content p, .post-content .ricos-content li { font-size: 17.5px !important; }
  .post-content .ricos-content blockquote, .post-content .ricos-content blockquote span { font-size: 23px !important; }
}