/* Blog post byline, author box and cleanup (CagetopiaEra). Byline and author box are built by js/cagetopia-blog.js from the post's Author link. */
.era-byline{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 6px;text-align:left}
.era-byline-photo{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 40%;box-shadow:0 0 0 3px #fff,0 0 0 4px #e4dbe9}
.era-byline-text{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.35;color:#6e6577}
.era-byline-name{font-weight:700;color:#312d3e}
.era-byline-name a{color:#312d3e;text-decoration:none;border-bottom:2px solid #e9c5d5}
.era-byline-name a:hover{color:#a14171;border-color:#a14171}
.era-byline-role{font-size:14px}
.era-byline-meta{font-size:14px;color:#857b8d}

/* Space between the header and the article */
.era-blog-header{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid #ebe2ef}

/* Hold the byline's height before the script runs, so the article doesn't jump down */
.era-blog-header .d-flex:has(#ctlBlog_hlAuthorLink){min-height:58px;margin:18px 0 6px;align-items:center}

/* The old author/date row is replaced by the byline above */
.era-blog-header .era-byline-old{display:none!important}

/* Old posts that set big inline font sizes on body text */
.BlogPostContent p>span[style*="font-size: 24px"],.BlogPostContent p>span[style*="font-size:24px"]{font-size:inherit!important}
.BlogPostContent>p:first-of-type{font-size:19px;line-height:1.55;color:#312d3e}

/* Author box under the post */
.era-author-box{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;max-width:800px;margin:44px auto 8px;padding:26px 28px;background:#f7f3f8;border:1px solid #ebe2ef;border-radius:18px}
.era-author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 40%}
.era-author-kicker{margin:0 0 2px;font:800 12px/1.4 "Era Source Sans 3",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a14171}
.era-author-name{margin:0 0 8px;font:800 22px/1.2 "Era Source Sans 3",Arial,sans-serif;color:#312d3e}
.era-author-name a{color:inherit;text-decoration:none}
.era-author-bio{margin:0 0 12px;font-size:16px;line-height:1.55;color:#4b4558}
.era-author-bio a{color:#312d3e;font-weight:600;text-decoration:none;border-bottom:1px solid #d9b8c8}
.era-author-bio a:hover{color:#a14171;border-color:#a14171}
.era-author-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:15px}
.era-author-links a{color:#a14171;font-weight:700;text-decoration:none}
.era-author-links a:hover{text-decoration:underline}

/* A post with no Post Image leaves an empty figure; don't let it add a gap */
.era-blog-lead:empty,.era-blog-lead:not(:has(img[src])){display:none}

/* Footer: hide the platform's "no categories" text */
.BlogPost-footer{font-size:0}
.BlogPost-footer>*{font-size:15px}

@media (max-width:600px){
  .era-byline{justify-content:flex-start}
  .era-author-box{grid-template-columns:64px 1fr;gap:16px;padding:20px}
  .era-author-box img{width:64px;height:64px}
  .era-author-name{font-size:19px}
}

/* Top of blog posts: breadcrumb sits above the white card, close under the header */
main:has(.era-blog-article){padding-top:0!important}
.LayoutMiddle:has(.era-blog-article){padding-top:52px!important}
.era-blog-article{position:relative;padding-top:40px!important}
.era-blog-header>.Breadcrumb{position:absolute;left:4px;top:-36px;margin:0!important}
.era-blog-header>.Breadcrumb .crumb-wrap,.era-blog-header>.Breadcrumb .crumb-inner{margin:0!important;padding:0!important}
.era-blog-header>.Breadcrumb .crumb-item{font-size:14px}
.era-blog-header .BlogPostTitle{margin-top:0!important}
@media (max-width:600px){
  .LayoutMiddle:has(.era-blog-article){padding-top:44px!important}
  .era-blog-article{padding-top:28px!important}
  .era-blog-header>.Breadcrumb{top:-31px}
  .era-blog-header>.Breadcrumb .crumb-item-current,.era-blog-header>.Breadcrumb .crumb-item i{display:none}
  .era-blog-header>.Breadcrumb .crumb-item-link a::before{content:"\2039  "}
}

/* Cagetopia Creations posts: compact header so the setup photo comes up fast */
.era-blog-header:has(.crumb-item-link a[href="/cagetopia-creations" i]){padding-bottom:0;margin-bottom:22px;border-bottom:0}
.era-blog-header:has(.crumb-item-link a[href="/cagetopia-creations" i]) .BlogPostTitle{margin-bottom:8px!important}
.era-blog-header:has(.crumb-item-link a[href="/cagetopia-creations" i]) .BlogPostTeaserDesc p{font-size:17px;margin:0}
.era-blog-header:has(.crumb-item-link a[href="/cagetopia-creations" i]) .d-flex:has(#ctlBlog_hlAuthorLink){min-height:22px;margin:10px 0 0}
.era-byline--compact{display:block;text-align:center;margin:10px 0 0;font-size:15px;color:#857b8d}
.era-byline--compact .era-byline-name{font-weight:600}
.era-byline--compact .era-byline-name a{color:#312d3e}

/* Guide pages: byline under the title, author box lined up with the text.
   style.css styles every p and li on these pages, so these selectors are deliberately specific. */
.era-byline--guide{margin:6px 0 26px}
body .LayoutContentInner.Control.ContactForm>.era-author-box{max-width:none;margin:48px 0 8px}
body .LayoutContentInner.Control.ContactForm .era-author-box p.era-author-kicker{font-size:12px!important;line-height:1.4!important;margin:0 0 2px!important}
body .LayoutContentInner.Control.ContactForm .era-author-box p.era-author-name{font-size:22px!important;line-height:1.2!important;margin:0 0 8px!important}
body .LayoutContentInner.Control.ContactForm .era-author-box p.era-author-bio{font-size:16px!important;line-height:1.55!important;margin:0 0 12px!important}
body .LayoutContentInner.Control.ContactForm .era-author-box .era-author-links li{padding:0!important;margin:0!important;list-style:none!important}
body .LayoutContentInner.Control.ContactForm .era-author-box .era-author-links li::before{content:none!important;display:none!important}