/* Base Template */
.article-page {
  background-color: var(--light-yellow);
}

.main-article {
  border-bottom: 1px solid var(--black);
  margin-bottom: 1rem;
}

.main-article .main-img-wrapper {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  max-height: 658px;
  overflow: hidden;
}

.main-article .main-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-article h1 {
  font-family: 'IBMPlexSerif', serif;
}

.main-article > h1 {
  padding-left: calc(100vw / 36);
  grid-row: 2 / 3;
  color: var(--cream);
}

.main-article aside {
  margin-top: 2rem;
}

.main-article aside h2 {
  font-size: 0.625rem;
}

.main-article > section:nth-of-type(1) {
  padding: 0;
}

.main-article > section:first-of-type {
  border: none;
  border-left: 1px solid currentColor;
  /*padding: 0 calc(100vw / 36);*/
}

.article-page .content-section {
  margin-top: 2rem;
}

.article-page .content-section > *:not(.image-section):not(.right-sidebar) {
  border-right: 1px solid currentColor;
  padding: 0 calc(100vw / 36);
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1em;
}

.article-page .content-section *:not(h1, h2, h3, h4) {
  font-family: 'IBMPlexSerif', serif;
  font-size: 0.75rem;
}

.main-article .content-section p > a {
  color: inherit;
}

@media (min-width: 768px) {
  p {
    font-size: calc(0.75rem + ((1vw - 0.48rem) * 0.5952));
    min-height: 0vw;
  }
}
@media (min-width: 1440px) {
  p {
    font-size: 1rem;
  }
}

@supports(font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 7.68px) * 2.0833)), 3rem)) {
  .article-page .content-section *:not(h1, h2, h3, h4) {
    font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 7.68px) * 0.5952)), 1rem);
    min-height: 0vw;
  }
}

.main-article .content-section p:not(.italic):last-of-type {
  padding-bottom: calc(100vw / 36);
}

.main-article .content-section p:last-of-type:not(.italic)::after {
  content: url(../img/article-end.svg);
  position: relative;
  left: 1ch;
}

.main-article .content-section p.italic::before {
  content: url(../img/attribution-dark.svg);
  fill: var(--cream);
  margin-right: 1ch;
}

.video .main-article .content-section p.italic::before {
  content: url(../img/attribution-light.svg);
  fill: var(--cream);
  margin-right: 1ch;
}

.article-page .right-sidebar {
  grid-row: 1 / -1;
  grid-column: 21 / span 9;
  align-content: start;
}

.related-articles {
  align-items: start;
}

.related-articles ul {
  list-style-type: none;
  padding: 0;
}

.related-articles .article-card h1 {
  margin-top: 0;
}

.right-sidebar .heading-3 {
  font-size: 0.625rem;
}

.right-sidebar audio {
  width: 100%;
}

.article-page aside {
  align-content: start;
}

.article-page aside > * {
  align-items: start;
  align-self: start;
}

aside .newsletter-cta.bg-yellow  {
  align-self: start;
}
aside .newsletter-cta.bg-yellow .signup-form {
  align-items: start;
}

.developments li:last-child:after {
  background-color: var(--light-yellow);
}

.attribution {
  border-top: 1px solid var(--black);
  padding-bottom: 0 !important;
}

/* Video Template */

.article-page.video {
  background-color: var(--deep-black);
}

.video .main-article {
  grid-template-rows: max-content;
  color: var(--cream);
}

.article-page.video .video-wrapper {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  margin-bottom: 2rem;
  max-height: 658px;
  position: relative;
  overflow: hidden;
}

.article-page.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-page.video .video-wrapper::before {
  content: '\f144';
  font-family: 'Font Awesome 5 Pro';
  display: block;
  position: absolute;
  font-size: 140px;
  color: var(--cream);
  z-index: 2;
  top: calc(50% - 70px);
  left: calc(50% - 70px);
  cursor: pointer;
}

.article-page.video .video-wrapper.no-before::before { display: none; }

.article-page .main-article {
  border-color: currentColor;
}

.video .main-article > h1 {
  grid-row: 2 / 3;
  padding-bottom: 0rem;
  padding-left: calc(100vw / 36);
}

.video .main-article aside,
.video .main-article > section {
  grid-row: 3 / 4;
}

.video .main-article > section:first-of-type {
  border-color: currentColor;
}

.video h1,
.video h2,
.video p {
  color: currentColor;
}

.video .cta + .related-articles {
  color: var(--cream);
}

.video footer a,
.video footer address,
.video footer p {
  color: var(--black);
}

.video .developments li::before {
  content: url(../img/white-middle-marker.svg);
}

.video .developments li:first-child::before {
  content: url(../img/white-first-marker.svg);
}

.video .developments li:last-child::before {
  content: url(../img/white-last-marker.svg);
}

.video .developments li:last-child:after {
  background-color: var(--deep-black);
}

.video aside,
.video .content-section {
  color: var(--cream);
}
.video .image-section .img-wrapper {
  border-right: 1px solid currentColor;
}

.video .attribution {
  border-top: 1px solid var(--cream);
  padding-bottom: 0;
}

/* Photo Template */
.article-page.photo {
  background-color: var(--cream);
}

.article-page.photo .content-section {
  align-content: start;
}

.article-page.photo .content-section p:not(.italic):first-of-type {
  padding-top: 1em;
}

/*.article-page.photo .content-section:after {*/
  /*content: '1';*/
  /*display: block;*/
  /*grid-row: 4 / 5;*/
  /*height: 100%;*/
/*}*/

.image-section {
  margin: 0;
}

.image-section .img-wrapper {
  padding: 1rem calc(100vw / 36);
  border-right: 1px solid var(--black);
}

.image-section .img-wrapper img {
  width: 100%;
}

.image-section figcaption {
  padding-top: 1rem;
  padding-left: calc(100vw / 36);
}

.image-section:hover {
  cursor: pointer;
}
.image-section:hover .img-wrapper img {
  filter: brightness(0.8);
}

.image-section:hover figcaption {
  color: var(--green);
}

/* Podcast Template */
.article-page.podcast {
  background-color: var(--purple);
}

.podcast .main-article > header {
  padding-left: calc(100vw / 36);
  padding-right: calc(100vw / 36);
  padding-bottom: 4rem;
  padding-top: 3em;
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);
  margin-top: 0;
  margin-bottom: 0;
  /*grid-row: 1 / 2;*/
}

.podcast .project-tag {
  justify-self: start;
  color: var(--cream);
  background-color: var(--black);
}

.podcast .project-tag a {
  text-decoration: none;
}

.podcast .project-tag a:hover,
.podcast .project-tag a:focus,
.podcast .project-tag a:active {
  text-decoration: underline;
}

.podcast .main-article > header h1 {
  color: var(--yellow);
  margin-top: 0.5em;
  padding-bottom: 1em;
  border-bottom: 4px solid var(--black);
}

.podcast .main-article > header audio {
  width: 100%;
}

.podcast .main-article aside {
  grid-row: 3 / 5;
}

.podcast .main-article > section {
  grid-row: 4 / 5;
  margin-top: 0;
}

.podcast .main-article .content-section p:last-of-type::after {
  content: url(../img/podcast-article-end.svg);
}

.podcast .action-call,
.podcast .read-more-link {
  color: var(--yellow);
}

.podcast .developments li:last-child:after {
  background-color: var(--purple);
}

/* Media Queries */
@media (min-width: 768px) {
  .right-sidebar .heading-3,
  .main-article aside h2 {
    font-size: calc(0.625rem + ((1vw - 7.68px) * 0.8929));
    min-height: 0vw;
  }
}
@media (min-width: 1440px) {
  .right-sidebar .heading-3,
  .main-article aside h2 {
    font-size: 1rem;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .right-sidebar .heading-3,
  .main-article aside h2 {
    font-size: clamp(0.625rem, calc(0.625rem + ((1vw - 7.68px) * 0.8929)), 1rem);
  }
}

@media(min-width: 768px) {
  aside .newsletter-cta {
    margin-top: 5rem;
  }

  aside .newsletter-cta h1 {
    padding-bottom: 0;
  }

  aside .newsletter-cta fieldset {
    border: none;
    padding: 0;
  }

  aside .newsletter-cta fieldset span {
    font-size: 0.625rem;
  }

  aside .newsletter-cta input[type="checkbox"] {
    vertical-align: middle;
  }

  aside .newsletter-cta button {
    font-size: 0.625rem;
    padding: 0.5em 1em;
    float: right;
  }
}

@media(max-width: 768px) {
  .main-article {
    grid-column: 1 / -1 !important;
    border-bottom: none;
    margin-bottom: 5rem;
  }

  .main-article > img {
    grid-column: 1 / -1 !important;
    min-height: 100vw;
    object-fit: cover;
  }

  .main-article h1[class*="col"] {
    grid-column: 2 / -2 !important;
    font-size: 1.5rem;
    margin-top: 1rem;
  }

  .main-article aside,
  .main-article .content-section {
    grid-column: 1 / -1 !important;
    border: none;
  }

  .article-page .content-section > *:not(.image-section):not(.right-sidebar) {
    border-right: none;
  }

  .main-article .content-section p { position: relative; }

  .main-article aside[class*="col"],
  .content-section > *:not(.image-section) {
    grid-column: 2 / -2 !important;
  }

  aside .newsletter-cta.bg-yellow { display: none; }
  aside .newsletter-cta.bg-black { display: none; }

  aside h2.heading-3 {
    margin-top: 2rem;
  }

  .article-page.video video {
    margin-bottom: 0;
  }

  .article-page .main-article .content-section {
    border: none;
    grid-row: 5 / 6;
  }

  .article-page .content-section p {
    border: none;
    padding: 0;
    margin-bottom: 1em;
  }

  .main-article .content-section p:last-of-type {
    margin-bottom: 4rem;
  }

  .main-article .right-sidebar {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: none;
    grid-row: 1 / 2;
  }

  /* Video Template */

  .video .main-article > h1 {
    padding-left: 0;
    padding-bottom: 1rem;
  }

  .video .main-article aside {
    grid-row: 4 / 5;
  }

  /* Photo Template */

  .photo .main-article {
    margin-bottom: 1rem;
  }

  .article-page.photo .content-section p:last-of-type {
    margin-bottom: 4rem;
  }

  .image-section .img-wrapper {
    border: none;
    padding: 0;
  }

  .image-section figcaption {
    padding-top: 0.625rem;
    padding-bottom: 2rem;
  }

  /* Podcast Template */
  .podcast .main-article > header {
    grid-row: 3 / 4;
  }

  .podcast .main-article > aside {
    grid-row: 4 / 5;
    margin-bottom: 2rem;
  }

  .podcast .main-article > section {
    grid-row-start: 6;
  }
}