/* Article Layout Styles - to be added to the previous CSS file */

/* Article Wrapper */
.blog .page .site-content main .view_content .wrapper {
    padding: 15px;
    min-height: calc(100vh - 90px);
  }
  
  .blog .page .site-content main .view_content .wrapper .article {
    max-width: calc(var(--spacing-base) * 100);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Article Header */
  .blog .page .site-content main .view_content .wrapper .article .article_header {
    margin-bottom: calc(var(--spacing-base) * 8);
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_header h1 {
    margin: 0 0 calc(var(--spacing-base) * 3) 0;
    font-size: calc(var(--font-size-base) * 2.44); /* Simplified from calc(calc(calc(calc(1rem* 1.25)* 1.25)* 1.25)* 1.25) */
    font-weight: 600;
    text-align: center;
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_header dl {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--spacing-base) * -2);
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 500;
    color: var(--color-text-light);
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_header dl dd {
    padding-right: calc(var(--spacing-base) * 2);
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_header dl dd.divider {
    color: #adb5bd;
  }
  
  /* Article Lead */
  .blog .page .site-content main .view_content .wrapper .article .lead {
    margin-bottom: calc(var(--spacing-base) * 8);
  }
  
  .blog .page .site-content main .view_content .wrapper .article .lead img {
    padding: 0;
    margin: 0;
    border: 0;
    display: block;
    width: 100%;
    border-radius: 10px;
  }
  
  /* Article Body */
  .blog .page .site-content main .view_content .wrapper .article .article_body {
    font-weight: 500;
    margin-bottom: calc(var(--spacing-base) * 5);
    font-size: calc(var(--font-size-base) * 1.125);
    line-height: 1.6;
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_body p {
    margin: 0 0 calc(var(--spacing-base) * 4) 0;
    white-space: pre-line;
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_body h2 {
    margin: 0 0 calc(var(--spacing-base) * 2) 0;
    font-weight: bold;
    font-size: calc(var(--font-size-base) * 1.56); /* Simplified from calc(calc(1rem* 1.25)* 1.25) */
    line-height: 1.3;
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_body img {
    width: 100%;
  }
  
  /* Article Divider */
  .blog .page .site-content main .view_content .wrapper .article .article_body .article_divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-base) * 4);
    font-size: calc(var(--font-size-base) * 1.25);
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_body .article_divider svg {
    width: 1.5em;
  }
  
  .blog .page .site-content main .view_content .wrapper .article .article_body .article_divider hr {
    border: none;
    margin: calc(var(--spacing-base) * -3) 0 0 0;
    padding: calc(var(--spacing-base) * 8);
    display: block;
    font-size: inherit;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-align: center;
  }
  
  /* Related Content */
  .related_divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: calc(var(--spacing-base) * 4);
    font-size: calc(var(--font-size-base) * 1.25);
  }
  
  .related {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .related ol {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.3;
  }
  
  .related ol > li {
    width: 100%;
    padding: 15px 0;
  }
  
  .related ol > li article {
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.125);
    border-radius: .5rem;
    background: var(--color-white);
    height: 100%;
  }
  
  .related ol > li article a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    height: 100%;
  }
  
  .related ol > li article a .article_content {
    flex: 1 0 auto;
    line-height: 0;
    padding: calc(var(--spacing-base) * 3);
    background: var(--color-white);
  }
  
  .related ol > li article a .article_content span.date {
    display: block;
    margin: 0 0 calc(var(--spacing-base) * 1.5) 0;
    color: var(--color-text-light);
    text-transform: uppercase;
    font-size: calc(var(--font-size-base) / 1.25);
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: .1em;
  }
  
  .related ol > li article a .article_content h2.title {
    margin: 0;
    font-size: calc(var(--font-size-base) * 1.56); /* Simplified from calc(calc(1rem* 1.25)* 1.25) */
    font-weight: bold;
    line-height: 1.3;
  }
  
  .related ol > li article a .article_content .description {
    margin: calc(var(--spacing-base) * 2) 0 0 0;
    color: var(--color-text);
    line-height: 1.6;
    white-space: pre-line;
  }
  
  .related ol > li article a .lead img {
    padding: 0;
    margin: 0;
    border: 0;
    display: block;
    width: 100%;
  }