/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  :root {
    --bodyHeader: #1a1a1a;
    --bodyText: #737373;
  }
  /* The starter shipped a `body, html, *` reset here. Because blog.css loads
     after root.css, that `*` stripped padding from every element on blog pages
     — including the fixed nav — and its `font-size: 100%` undid the large-
     screen type scaling. root.css already handles the reset site-wide, so this
     is scoped to the blog wrapper only. */
  .blog-container,
  .blog-container * {
    box-sizing: border-box;
  }
  .blog-container {
    width: 94%;
    max-width: 70em;
    margin: auto;
  }
  .blog-link {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--bodyHeader);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    z-index: 1;
    transition: color 0.3s;
  }
  .blog-link:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 0.25rem;
    transition: opacity 0.3s;
    border: 1px solid var(--bodyHeader);
    z-index: -1;
  }
  .blog-link:hover {
    color: var(--bodyHeader);
  }
  .blog-link:hover:before {
    opacity: 1;
  }
}
/*-- -------------------------- -->
<---           Header           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #header {
    position: relative;
    z-index: 1;
  }
  #header .blog-container {
    padding: clamp(100px, 14vw, 200px) 0 clamp(50px, 11vw, 100px);
  }
  #header .blog-header {
    font-size: clamp(24px, 4vw, 48px);
    color: #fff;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    width: 100%;
    text-align: left;
  }
  #header .blog-bg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #header .blog-bg:before {
    /* color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #header .blog-bg img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/*-- -------------------------- -->
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* #int-hero is defined once in root.css so every sub-page banner matches.
   blog.css used to carry its own copy with different padding and overlay
   values, which made the blog banner a different height to the rest. */

/*-- -------------------------- -->
<---        Main Content        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  .blog-container {
    padding: clamp(60px, 7vw, 100px) 0;
  }
  .main-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 3.125em;
  }
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 3.125em;
    width: 100%;
  }
}
/* Tablet - 1024px */
@media only screen and (min-width: 64em) {
  .main-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 1.25em;
  }
}
/*-- -------------------------- -->
<---    Recent Blog Articles    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  .recent-articles {
    overflow: hidden;
    max-width: 49.6875em;
    flex: none;
    width: 100%;
  }
  .recent-articles .blog-mainImage {
    width: 100%;
    height: clamp(200px, 30vw, 400px);
    position: relative;
    display: block;
    border-radius: 0.5em 0.5em 0 0;
    overflow: hidden;
  }
  .recent-articles .blog-mainImage img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .recent-articles .article-group {
    padding: clamp(30px, 5vw, 50px);
    border: 1px solid #ebebeb;
    border-radius: 0 0 0.5em 0.5em;
  }
  .recent-articles .blog-author-img {
    width: 2em;
    height: 2em;
    position: relative;
    display: block;
    border-radius: 50%;
    overflow: hidden;
  }
  .recent-articles .blog-author-img img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .recent-articles .blog-authorGroup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  .recent-articles .blog-author,
  .recent-articles .blog-date {
    font-size: 0.875rem;
    color: var(--bodyText);
    line-height: 1.5em;
  }
  .recent-articles .blog-dot {
    width: 3px;
    height: 3px;
    background-color: var(--primary);
    border-radius: 50%;
    display: block;
  }
  .recent-articles .blog-h1 {
    font-size: clamp(20px, 5vw, 32px);
    line-height: 1.4em;
    font-weight: 700;
    margin: 1rem 0;
    color: var(--bodyHeader);
  }
  .recent-articles .blog-desc {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 1rem 0 2rem;
    color: var(--bodyText);
  }
  .recent-articles .blog-link {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--bodyHeader);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    z-index: 1;
    transition: color 0.3s;
  }
  .recent-articles .blog-link:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 0.25rem;
    transition: opacity 0.3s;
    border: 1px solid var(--bodyHeader);
    z-index: -1;
  }
  .recent-articles .blog-link:hover {
    color: var(--bodyHeader);
  }
  .recent-articles .blog-link:hover:before {
    opacity: 1;
  }
}
/* Mobile - 1024px */
@media only screen and (min-width: 64em) {
  .recent-articles .blog-h1 {
    max-width: 31.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode .recent-articles .blog-h1,
  body.dark-mode .recent-articles .blog-desc,
  body.dark-mode .recent-articles .blog-author,
  body.dark-mode .recent-articles .blog-date {
    color: #f7f7f7;
  }
  body.dark-mode .blog-sidebar .feature-h3,
  body.dark-mode .blog-sidebar .feature-date,
  body.dark-mode .blog-sidebar .blog-header {
    color: #f7f7f7;
  }
  body.dark-mode .blog-sidebar .blog-header:after {
    background: var(--primary);
  }
  body.dark-mode .blog-article .blog-h1,
  body.dark-mode .blog-article .blog-author,
  body.dark-mode .blog-article .blog-date {
    color: #f7f7f7;
  }
  body.dark-mode .blog-article #blog-content h2,
  body.dark-mode .blog-article #blog-content h3,
  body.dark-mode .blog-article #blog-content h4,
  body.dark-mode .blog-article #blog-content h5,
  body.dark-mode .blog-article #blog-content h6 {
    color: #f7f7f7;
  }
  body.dark-mode .blog-article #blog-content p,
  body.dark-mode .blog-article #blog-content li {
    color: #f7f7f7;
    opacity: 0.8;
  }
  body.dark-mode .blog-article #blog-content a {
    color: #9dafe5;
  }
}
/*-- -------------------------- -->
<---          Sidebar           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  .blog-sidebar {
    max-width: 49.6875em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    row-gap: 3.125em;
  }
  .blog-sidebar .blog-featured-group {
    padding: 2.1875em 1.875em;
    border: 1px solid #ebebeb;
    border-radius: 0.5em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
  .blog-sidebar .blog-header {
    display: block;
    font-size: 1.25em;
    color: var(--bodyHeader);
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 1.875rem;
  }
  .blog-sidebar .blog-header:after {
    content: "";
    position: relative;
    display: block;
    width: 3.125rem;
    height: 3px;
    background: var(--bodyHeader);
    border-radius: 0.25rem;
    margin: 1rem auto;
  }
  .blog-sidebar .blog-feature {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1.5em;
    width: 100%;
    text-decoration: none;
    padding: 1.25rem 0;
    border-bottom: 1px solid #ebebeb;
  }
  .blog-sidebar .blog-feature:nth-of-type(1) {
    padding-top: 0;
  }
  .blog-sidebar .blog-feature:last-of-type {
    padding-bottom: 0;
    border: none;
  }
  .blog-sidebar .blog-featureImage {
    display: block;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 3.75em;
    height: 3.75em;
    flex: none;
  }
  .blog-sidebar .blog-featureImage img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .blog-sidebar .feature-h3 {
    font-size: 0.9375rem;
    line-height: 1.5em;
    color: var(--bodyHeader);
    margin: 0;
    margin-bottom: 0.25rem;
    font-weight: 700;
    display: block;
    text-decoration: none;
  }
  .blog-sidebar .feature-date {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyText);
    display: block;
  }
}
/* Tablet - 1024px */
@media only screen and (min-width: 64em) {
  .blog-sidebar {
    max-width: 22.5em;
  }
}
/*-- -------------------------- -->
<---        Blog Articles       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  .blog-article {
    max-width: 49.6875em;
    width: 100%;
    display: block;
  }
  .blog-article .blog-mainImage {
    width: 100%;
    height: clamp(200px, 30vw, 400px);
    position: relative;
    display: block;
    border-radius: 0.5em;
    overflow: hidden;
    margin-bottom: 3.125em;
  }
  .blog-article .blog-mainImage img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .blog-article .blog-author-img {
    width: 2em;
    height: 2em;
    position: relative;
    display: block;
    border-radius: 50%;
    overflow: hidden;
  }
  .blog-article .blog-author-img img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .blog-article .blog-authorGroup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  .blog-article .blog-author,
  .blog-article .blog-date {
    font-size: 0.875rem;
    color: var(--bodyText);
    line-height: 1.5em;
  }
  .blog-article .blog-dot {
    width: 3px;
    height: 3px;
    background-color: #fe4f70;
    border-radius: 50%;
    display: block;
  }
  .blog-article .blog-h1 {
    font-size: clamp(20px, 5vw, 39px);
    line-height: 1.4em;
    font-weight: 700;
    margin: 1rem 0;
    max-width: 34.375rem;
    color: var(--bodyHeader);
  }
  .blog-article #blog-content {
    padding-top: 1.5625em;
    margin-top: 1em;
    border-top: 1px solid #ebebeb;
  }
  .blog-article #blog-content h2 {
    font-size: 1.75rem;
    line-height: 1.5em;
    color: var(--bodyHeader);
    font-weight: 700;
    margin-bottom: 1rem;
  }
  .blog-article #blog-content h3 {
    font-size: 1.5rem;
    line-height: 1.5em;
    color: var(--bodyHeader);
    font-weight: 700;
    margin-bottom: 1rem;
  }
  .blog-article #blog-content h4,
  .blog-article #blog-content h5,
  .blog-article #blog-content h6 {
    font-size: 1.25rem;
    line-height: 1.5em;
    color: var(--bodyHeader);
    font-weight: 700;
    margin-bottom: 1rem;
  }
  .blog-article #blog-content p {
    font-size: 1rem;
    line-height: 1.6em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--bodyText);
  }
  .blog-article #blog-content a {
    text-decoration: underline;
    font-size: inherit;
    color: #fe4f70;
  }
  .blog-article #blog-content ul,
  .blog-article #blog-content ol {
    padding-left: 2.5rem;
    margin: 0;
    margin: 1rem 0;
  }
  .blog-article #blog-content ul li,
  .blog-article #blog-content ol li {
    font-size: 1rem;
    line-height: 1.6em;
    margin-bottom: 1rem;
    color: var(--bodyText);
    list-style: circle;
  }
  .blog-article #blog-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
    border-radius: 0.5rem;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #cs-footer {
    font-family: "Roboto", "Arial", sans-serif;
    /* 60px - 100px top and bottom */
    padding: clamp(3.75em, 7.82vw, 6.25em) 1em;
    background-color: #1a1a1a;
  }
  #cs-footer .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
  }
  #cs-footer .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer .cs-logo {
    /* 210px - 240px */
    width: clamp(13.125em, 8vw, 15em);
    height: auto;
    display: block;
    /* 28px - 44px */
    margin-bottom: clamp(1.75em, 4.17vw, 2.75em);
  }
  #cs-footer .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 2.5rem;
    /* changes to 521px at desktop */
    max-width: 21.5rem;
    color: var(--bodyTextColorWhite);
  }
  #cs-footer .cs-nav {
    padding: 0;
    padding-left: 1em;
    margin: 0;
    /* 32px - 40px */
    margin-bottom: clamp(2em, 5.3vw, 2.5em);
  }
  #cs-footer .cs-nav-li {
    list-style: none;
    line-height: 1.5em;
  }
  #cs-footer .cs-nav-li:last-of-type {
    margin-bottom: 0;
  }
  #cs-footer .cs-header {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: block;
  }
  #cs-footer .cs-nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-footer .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    /* current color of the parent */
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer .cs-bottom {
    width: 100%;
    position: relative;
    padding-left: 1em;
  }
  #cs-footer .cs-copyright {
    font-size: 1rem;
    line-height: 1.5em;
    color: #b4b2c7;
    display: block;
  }
  #cs-footer .cs-social {
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.75em;
    position: absolute;
    right: 1em;
    bottom: 0;
  }
  #cs-footer .cs-social-link {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #4e4b66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition:
      transform 0.3s,
      background-color 0.3s;
  }
  #cs-footer .cs-social-link:hover {
    background-color: var(--primary);
    transform: translateY(-0.1875rem);
  }
  #cs-footer .cs-social-img {
    height: 0.8125rem;
    width: auto;
    display: block;
  }
}
/* Inbetween - 600px */
@media only screen and (min-width: 37.5em) {
  #cs-footer .cs-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    /* 48px - 60px */
    column-gap: clamp(3em, 5.9vw, 3.75em);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #cs-footer .cs-logo-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 20px - 60px */
    margin-bottom: clamp(1.25em, 4vw, 3.75em);
  }
  #cs-footer .cs-logo {
    margin: 0;
  }
  #cs-footer .cs-text {
    text-align: right;
    width: 50%;
    max-width: 32.5625rem;
    margin: 0;
  }
  #cs-footer .cs-nav {
    padding: 0;
  }
  #cs-footer .cs-bottom {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #cs-footer .cs-social {
    flex-direction: row;
    position: relative;
    /* reset these positions */
    bottom: auto;
    right: auto;
  }
}

/*-- -------------------------- -->
<---      Blog Restyle          -->
<--- -------------------------- -*/
/* The starter's blog CSS references --bodyText and --bodyHeader, which are not
   defined anywhere in root.css, so those colours silently fell back. This block
   maps everything onto the real tokens and brings the blog in line with the
   rest of the site (gold accents, card treatment, dark mode). */
@media only screen and (min-width: 0em) {
  /* Soft band behind the cards. On <main> with the CTA lifted above it —
     the CTA's background image is position:absolute at z-index:-2, so an
     opaque <main> would paint straight over it. */
  body.blog-page main {
    background-color: #f6f8fa;
  }
  body.blog-page #cta {
    isolation: isolate;
    background-color: #1a1a1a;
  }

  /* --- Listing cards --- */
  .recent-articles {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(16, 33, 60, 0.07);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  .recent-articles:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 14px 34px rgba(16, 33, 60, 0.12);
  }
  .recent-articles .article-group {
    border: none;
  }
  .recent-articles .blog-h1 {
    color: var(--headerColor);
    transition: color 0.3s;
  }
  .recent-articles:hover .blog-h1 {
    color: var(--primary);
  }
  .recent-articles .blog-desc,
  .recent-articles .blog-author,
  .recent-articles .blog-date {
    color: var(--bodyTextColor);
  }
  /* author avatar is a generic silhouette — a gold dot reads better */
  .recent-articles .blog-author-img,
  .blog-article .blog-author-img {
    display: none;
  }
  .recent-articles .blog-author,
  .blog-article .blog-author {
    font-weight: 700;
    color: var(--headerColor);
  }

  /* --- "Continue Reading" matches the site button --- */
  .recent-articles .blog-link {
    margin: 0;
    color: #1a1a1a;
    background-color: var(--primary);
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  .recent-articles .blog-link:before {
    display: none;
  }
  .recent-articles .blog-link:hover {
    color: #1a1a1a;
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }

  /* --- Sidebar --- */
  .blog-sidebar .blog-featured-group {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(16, 33, 60, 0.07);
    padding: clamp(1.5rem, 3vw, 2rem);
  }
  .blog-sidebar .blog-header {
    color: var(--headerColor);
  }
  .blog-sidebar .feature-h3 {
    color: var(--headerColor);
    transition: color 0.3s;
  }
  .blog-sidebar .blog-feature:hover .feature-h3 {
    color: var(--primary);
  }
  .blog-sidebar .feature-date {
    color: var(--bodyTextColor);
  }

  /* --- Article body: readable measure and real vertical rhythm --- */
  .blog-article {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(16, 33, 60, 0.07);
    overflow: hidden;
  }
  .blog-article .article-group {
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0;
  }
  .blog-article .blog-h1 {
    color: var(--headerColor);
  }
  #blog-content {
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
  }
  #blog-content h2 {
    /* 22px - 30px */
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    line-height: 1.3em;
    font-weight: 900;
    margin: 2.5rem 0 1rem;
    color: var(--headerColor);
  }
  #blog-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--headerColor);
  }
  #blog-content p {
    font-size: var(--bodyFontSize);
    line-height: 1.7em;
    margin: 0 0 1.25rem;
    color: var(--bodyTextColor);
  }
  #blog-content ul,
  #blog-content ol {
    margin: 0 0 1.5rem 1.25rem;
  }
  #blog-content li {
    font-size: var(--bodyFontSize);
    line-height: 1.7em;
    margin-bottom: 0.5rem;
    color: var(--bodyTextColor);
  }
  #blog-content strong {
    color: var(--headerColor);
  }
  #blog-content a {
    color: var(--primary);
    font-weight: 700;
  }
  /* the --- separator before each closing call to action */
  #blog-content hr {
    height: 1px;
    margin: 2.5rem 0;
    background-color: #e8e8e8;
    border: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode.blog-page main {
    background-color: #0b2a3f;
  }
  body.dark-mode .recent-articles,
  body.dark-mode .blog-article,
  body.dark-mode .blog-sidebar .blog-featured-group {
    background-color: var(--medium);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  body.dark-mode #blog-content p,
  body.dark-mode #blog-content li,
  body.dark-mode .recent-articles .blog-desc,
  body.dark-mode .recent-articles .blog-date,
  body.dark-mode .blog-sidebar .feature-date {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #blog-content h2,
  body.dark-mode #blog-content h3,
  body.dark-mode #blog-content strong,
  body.dark-mode .recent-articles .blog-author,
  body.dark-mode .blog-article .blog-author {
    color: #fff;
  }
  body.dark-mode #blog-content hr {
    background-color: rgba(255, 255, 255, 0.15);
  }
}