/*
 * Table of Contents
 * 1. Grid
 * 2. Navigation
 * 3. Footer
 * 4. Heading Style
 * 5. Article Card Preview
 * 6. Related Articles
 * 7. Generic CTA
 * 8. Podcast CTA
 * 8. Blog CTA
 * 10. Projects CTA
 * 11. Newsletter CTA
 * 12. Signup Form
 * 13. By Line
 * 14. Checkbox
 * 15. Button
 * 16. Developments
 * 17. Sidebar
 * 18. Project Components
 * 19. Annotation
 * 20. Newsletter Popup
 * 21. Rounded Date
 * 22. Blockquote
 */


/* 1. Grid */

.container {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
}

.col-1 { grid-column: auto/span 1; }
.col-2 { grid-column: auto/span 2; }
.col-3 { grid-column: auto/span 3; }
.col-4 { grid-column: auto/span 4; }
.col-5 { grid-column: auto/span 5; }
.col-6 { grid-column: auto/span 6; }
.col-7 { grid-column: auto/span 7; }
.col-8 { grid-column: auto/span 8; }
.col-9 { grid-column: auto/span 9; }
.col-10 { grid-column: auto/span 10; }
.col-11 { grid-column: auto/span 11; }
.col-12 { grid-column: auto/span 12; }
.col-13 { grid-column: auto/span 13; }
.col-14 { grid-column: auto/span 14; }
.col-15 { grid-column: auto/span 15; }
.col-16 { grid-column: auto/span 16; }
.col-17 { grid-column: auto/span 17; }
.col-18 { grid-column: auto/span 18; }
.col-19 { grid-column: auto/span 19; }
.col-20 { grid-column: auto/span 20; }
.col-21 { grid-column: auto/span 21; }
.col-22 { grid-column: auto/span 22; }
.col-23 { grid-column: auto/span 23; }
.col-24 { grid-column: auto/span 24; }
.col-25 { grid-column: auto/span 25; }
.col-26 { grid-column: auto/span 26; }
.col-27 { grid-column: auto/span 27; }
.col-28 { grid-column: auto/span 28; }
.col-29 { grid-column: auto/span 29; }
.col-30 { grid-column: auto/span 30; }
.col-31 { grid-column: auto/span 31; }
.col-32 { grid-column: auto/span 32; }
.col-33 { grid-column: auto/span 33; }
.col-34 { grid-column: auto/span 34; }
.col-35 { grid-column: auto/span 35; }
.col-36 { grid-column: auto/span 36; }
.col-offset-1 { grid-column-start: 1; }
.col-offset-2 { grid-column-start: 2; }
.col-offset-3 { grid-column-start: 3; }
.col-offset-4 { grid-column-start: 4; }
.col-offset-5 { grid-column-start: 5; }
.col-offset-6 { grid-column-start: 6; }
.col-offset-7 { grid-column-start: 7; }
.col-offset-8 { grid-column-start: 8; }
.col-offset-9 { grid-column-start: 9; }
.col-offset-10 { grid-column-start: 10; }
.col-offset-11 { grid-column-start: 11; }
.col-offset-12 { grid-column-start: 12; }
.col-offset-13 { grid-column-start: 13; }
.col-offset-14 { grid-column-start: 14; }
.col-offset-15 { grid-column-start: 15; }
.col-offset-16 { grid-column-start: 16; }
.col-offset-17 { grid-column-start: 17; }
.col-offset-18 { grid-column-start: 18; }
.col-offset-19 { grid-column-start: 19; }
.col-offset-20 { grid-column-start: 20; }
.col-offset-21 { grid-column-start: 21; }
.col-offset-22 { grid-column-start: 22; }
.col-offset-23 { grid-column-start: 23; }
.col-offset-24 { grid-column-start: 24; }
.col-offset-25 { grid-column-start: 25; }
.col-offset-26 { grid-column-start: 26; }
.col-offset-27 { grid-column-start: 27; }
.col-offset-28 { grid-column-start: 28; }
.col-offset-29 { grid-column-start: 29; }
.col-offset-30 { grid-column-start: 30; }
.col-offset-31 { grid-column-start: 31; }
.col-offset-32 { grid-column-start: 32; }
.col-offset-33 { grid-column-start: 33; }
.col-offset-34 { grid-column-start: 34; }
.col-offset-35 { grid-column-start: 35; }
.col-offset-36 { grid-column-start: 36; }
.sub-container-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.sub-container-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.sub-container-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.sub-container-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.sub-container-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
.sub-container-7 { display: grid; grid-template-columns: repeat(7, 1fr); }
.sub-container-8 { display: grid; grid-template-columns: repeat(8, 1fr); }
.sub-container-9 { display: grid; grid-template-columns: repeat(9, 1fr); }
.sub-container-10 { display: grid; grid-template-columns: repeat(10, 1fr); }
.sub-container-11 { display: grid; grid-template-columns: repeat(11, 1fr); }
.sub-container-12 { display: grid; grid-template-columns: repeat(12, 1fr); }
.sub-container-13 { display: grid; grid-template-columns: repeat(13, 1fr); }
.sub-container-14 { display: grid; grid-template-columns: repeat(14, 1fr); }
.sub-container-15 { display: grid; grid-template-columns: repeat(15, 1fr); }
.sub-container-16 { display: grid; grid-template-columns: repeat(16, 1fr); }
.sub-container-17 { display: grid; grid-template-columns: repeat(17, 1fr); }
.sub-container-18 { display: grid; grid-template-columns: repeat(18, 1fr); }
.sub-container-19 { display: grid; grid-template-columns: repeat(19, 1fr); }
.sub-container-20 { display: grid; grid-template-columns: repeat(20, 1fr); }
.sub-container-21 { display: grid; grid-template-columns: repeat(21, 1fr); }
.sub-container-22 { display: grid; grid-template-columns: repeat(22, 1fr); }
.sub-container-23 { display: grid; grid-template-columns: repeat(23, 1fr); }
.sub-container-24 { display: grid; grid-template-columns: repeat(24, 1fr); }
.sub-container-25 { display: grid; grid-template-columns: repeat(25, 1fr); }
.sub-container-26 { display: grid; grid-template-columns: repeat(26, 1fr); }
.sub-container-27 { display: grid; grid-template-columns: repeat(27, 1fr); }
.sub-container-28 { display: grid; grid-template-columns: repeat(28, 1fr); }
.sub-container-29 { display: grid; grid-template-columns: repeat(29, 1fr); }
.sub-container-30 { display: grid; grid-template-columns: repeat(30, 1fr); }
.sub-container-31 { display: grid; grid-template-columns: repeat(31, 1fr); }
.sub-container-32 { display: grid; grid-template-columns: repeat(32, 1fr); }
.sub-container-33 { display: grid; grid-template-columns: repeat(33, 1fr); }
.sub-container-34 { display: grid; grid-template-columns: repeat(34, 1fr); }
.sub-container-35 { display: grid; grid-template-columns: repeat(35, 1fr); }
.sub-container-36 { display: grid; grid-template-columns: repeat(36, 1fr); }

@media(max-width: 768px) {
  [class*="sub-container"] [class*="col-"] {
    grid-column: 1 / -1 !important;
  }

  [class^="col-"] {
    grid-column: 2 / span 34 !important;
  }

  [class^="sub-container-"] {
    grid-column: 2 / span 34 !important;
  }
}

/* 2. Navigation */
body {
  overflow-y: auto;
}

body.menu-open {
  overflow-y: hidden;
}

.logo-container svg {
  max-width: 100%;
}

#menu-toggle {
  position: fixed;
  top: 32px;
  left: 32px;
  background: none;
  border: 0;
  padding: 0;
  z-index: 4;
  cursor: pointer;
  transform: translateY(-110px);
  transition: transform cubic-bezier(0.79, -0.01, 0.93, 1.1) 0.3s;
  padding: 8px;
  transition-delay: 0.1s;
}

#menu-toggle.drop {
  transform: translateY(0);
}

#menu-toggle:focus svg path,
#menu-toggle:hover svg path,
#menu-toggle:active svg path {
  fill: var(--green);
}

.article-page.video #menu-toggle svg path,
.bg-deep-black #menu-toggle svg path {
  fill: var(--cream);
}

.article-page.video #menu-toggle:hover svg path,
.article-page.video #menu-toggle:active svg path,
.bg-deep-black #menu-toggle:hover svg path,
.bg-deep-black #menu-toggle:active svg path {
  fill: var(--light-black);
}

.bg-deep-black #menu-toggle:focus svg path,
.bg-deep-black #menu-toggle:hover svg path,
.bg-deep-black #menu-toggle:active svg path {
  fill: var(--light-black);
}

.topics-page #menu-toggle:hover svg path,
.topics-page #menu-toggle:focus svg path,
.topics-page #menu-toggle:active svg path {
  fill: var(--deep-yellow);
}

.podcasts-page #menu-toggle:hover svg path,
.podcasts-page #menu-toggle:focus svg path,
.podcasts-page #menu-toggle:active svg path {
  fill: var(--deep-purple);
}

.blog-page #menu-toggle:hover svg path,
.blog-page #menu-toggle:focus svg path,
.blog-page #menu-toggle:active svg path {
  fill: var(--deep-gray);
}

.search-page #menu-toggle:hover svg path,
.search-page #menu-toggle:focus svg path,
.search-page #menu-toggle:active svg path {
  fill: var(--deep-green);
}

.homepage #menu-toggle.drop {
  background-color: var(--light-yellow);
}

.bg-deep-black #menu-toggle.drop {
  background-color: var(--deep-black);
}

.topics-page #menu-toggle.drop {
  background-color: var(--yellow);
}

.podcasts-page #menu-toggle.drop {
  background-color: var(--purple);
}

.blog-page #menu-toggle.drop {
  background-color: var(--white);
}

.search-page #menu-toggle.drop {
  background-color: var(--green);
}

.article-page #menu-toggle.drop {
  background-color: var(--light-yellow);
}

.article-page.podcast #menu-toggle.drop {
  background-color: var(--purple);
}

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

.article-page.photo #menu-toggle.drop {
  background-color: var(--cream);
}

#menu-toggle.drop.no-bg {
  background-color: unset !important;
}

.site-header.desktop-header {
  position: fixed;
  top: 0;
  z-index: 10;
  transform: translateY(-100%) scaleY(0);
  transition: all 0.6s ease-out;
  grid-template-rows: calc(56px + 4rem) 1fr;
}

.site-header.desktop-header.open {
  transform: translateY(0) scaleY(1);
  transition: all 0.6s ease-in;
  min-height: 680px;
}

.site-header.desktop-header svg path,
.site-header.mobile-header svg path {
  fill: var(--light-green);
}

.site-header.desktop-header .main-nav a,
.site-header.desktop-header .main-nav p {
  color: var(--black);
  font-family: Rubrik, sans-serif;
  font-size: 1.125rem;
  text-decoration: none;
}

.site-header.desktop-header .main-nav a.active {
  color: var(--cream);
}

.site-header.desktop-header .main-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  grid-template-rows: repeat(5, 3.125rem);
}

.site-header.desktop-header .main-nav ul li {
  padding: 1em 0;
}

.site-header.desktop-header .main-nav ul li:first-child {
  padding-top: 0;
}

.site-header.desktop-header .heading-3 {
  font-size: 0.875rem;
  margin-top: 0;
}

.site-header.desktop-header .article-card .heading-3 {
  margin-top: 0.625em;
  margin-bottom: 0.625em;
}

.site-header.desktop-header .article-card p {
  font-size: 0.8125rem;
  margin: 0;
}

.site-header.desktop-header .related-articles ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.site-header.desktop-header .related-articles {
  display: none;
}

.site-header.desktop-header .related-articles.active {
  display: grid;
  grid-template-rows: min-content;
  color: var(--black);
}

.site-header.desktop-header .related-articles[data-key="#topics"] ul,
.site-header.desktop-header .related-articles[data-key="#podcasts"] ul,
.site-header.desktop-header .related-articles[data-key="#blog"] ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.site-header .related-articles .article-card .action-call {
  color: var(--white);
}

.site-header.desktop-header .related-articles[data-key="#projects"] .article-card {
  display: grid;
  grid-template-columns: 17fr 1fr 7fr;
  grid-template-rows: 340px;
}

.site-header.desktop-header .related-articles[data-key="#projects"] .article-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.site-header.desktop-header .related-articles[data-key="#projects"] .article-card .wrapper {
  grid-column: -1 / 3;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.site-header.desktop-header .related-articles[data-key="#projects"] .article-card p {
  flex-grow: 999;
}

.site-header.desktop-header .related-articles[data-key="#projects"] .article-card .read-more-link {
  justify-self: flex-end;
  color: var(--black);
}

.site-header.desktop-header .related-articles .read-more-link:hover,
.site-header.desktop-header .related-articles .read-more-link:focus,
.site-header.desktop-header .related-articles .read-more-link:active {
  text-decoration: underline;
  font-weight: 600;
}


.site-header.desktop-header .related-articles .related-links a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding: 0.5em 0;
  text-transform: uppercase;
}

.site-header.desktop-header .search {
  transform: translateY(-4px);
}

.site-header.desktop-header .search input {
  display: inline-block;
  width: calc(100% - 2rem);
  text-transform: none;
  outline: none;
}
.site-header .search input::placeholder {
  color: var(--black);
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  background: url(../img/times.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 1;
  pointer-events: none;
}

.site-header.desktop-header .search ~ nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: var(--deep-cream);
  font-size: 0.875rem;
  grid-row-gap: 8px;
}

.site-header.desktop-header .search ~ nav ul li a {
  text-decoration: none;
  color: inherit;
}

.site-header.desktop-header .related-articles .related-links a:hover,
.site-header.desktop-header .related-articles .related-links a:focus,
.site-header.desktop-header .related-articles .related-links a:active,
.site-header.desktop-header .search ~ nav ul li a:hover,
.site-header.desktop-header .search ~ nav ul li a:focus,
.site-header.desktop-header .search ~ nav ul li a:active {
  text-decoration: underline;
  font-weight: 600;
  color: inherit;
}

.site-header.desktop-header .third-container {
  grid-template-rows: min-content max-content;
}

.site-header.desktop-header .third-container li {
  text-transform: uppercase;
}

.site-header.desktop-header::after {
  content: '';
  display: block;
  background: url('../img/fractal.svg');
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.site-header.desktop-header > button {
  position: absolute;
  top: 32px;
  right: 32px;
  border: 0;
  padding: 0;
  background: none;
  font-size: 2rem;
  cursor: pointer;
}

.site-header.desktop-header > button:focus i,
.site-header.desktop-header > button:hover i,
.site-header.desktop-header > button:active i {
  color: var(--cream);
}

.site-header.mobile-header {
  position: fixed;
  z-index: 25;
  transform: translateX(-100%) scaleX(0);
  transition: all 0.6s ease-out;
  width: 100%;
}

.site-header.mobile-header.open {
  transform: translateX(0) scaleX(1);
  transition: all 0.6s ease-in;
  height: 100vh;
  overflow-y: scroll;
}

.site-header.mobile-header > button {
  position: absolute;
  top: 32px;
  right: 32px;
  border: 0;
  padding: 0;
  background: none;
  font-size: 2rem;
  cursor: pointer;
}

.details-container {
  display: flex;
  flex-direction: column;
}

.site-header.mobile-header details summary {
  list-style-type: none;
}

.site-header.mobile-header details summary .read-more-link {
  display: none;
}

.site-header.mobile-header details[open] summary .read-more-link {
  display: inline-block;
  float: right;
  color: var(--cream);
}

.site-header.mobile-header details[open] .article-card .read-more-link {
  float: left;
  color: var(--cream);
}

.site-header.mobile-header .read-more-link i {
  float: right;
}

.site-header.mobile-header > button:focus i,
.site-header.mobile-header > button:hover i,
.site-header.mobile-header > button:active i {
  color: var(--cream);
}

.site-header.mobile-header .article-card .img-wrapper {
  min-height: 56.25vw;
}

.site-header.mobile-header form input {
  width: calc(100% - 32px); padding: 8px 0;
}

.site-header.mobile-header .third-container {
  grid-column-start: 3 !important;
  padding-bottom: 2rem;
}

.site-header.mobile-header .share-links {
  grid-template-columns: min-content min-content;
  grid-column-gap: 16px;
}

.site-header.mobile-header .third-container nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: var(--deep-cream);
  font-size: 0.875rem;
  grid-row-gap: 8px;
}

.site-header.mobile-header .third-container li {
  text-transform: uppercase;
}

.site-header.mobile-header .third-container nav ul li a {
  text-decoration: none;
  color: inherit;
}

.site-header.mobile-header .third-container {
  grid-template-rows: min-content max-content;
}

@media(max-width: 900px) {
  .site-header.desktop-header {
    display: none;
  }
  #menu-toggle {
    left: 16px;
  }
}

@media(min-width: 901px) {
  .site-header.mobile-header {
    display: none;
  }
}


/* 3. Footer */

body > footer address,
body > footer a {
  color: var(--light-black);
  font-family: IBMPlexSans, Rubrik, sans-serif;
  display: block;
  font-size: 1.125rem;
}
body > footer address span {
  display: block;
  font-style: normal;
}

body > footer p {
}

body > footer > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body > footer svg {
  max-width: 100%;
}

.share-links {
  list-style-type: none;
  align-self: flex-end;
  padding: 0;
}
.share-links li a {
  font-size: 2rem;
  text-align: right;
  color: var(--deep-cream);
}

body > footer nav ul {
  list-style-type: none;
  padding: 0;
  grid-row-gap: 8px;
}

body > footer nav ul li:nth-child(odd){
  grid-column-start: 2;
}

body > footer nav ul li:nth-child(even){
  grid-column-start: -1;
}

@media(max-width: 900px) {
  .footer-section {
    grid-column: 4 / span 28;
    font-size: 1rem;
  }
  .share-links {
    margin-top: 4rem;
  }

  body > footer nav ul {
    grid-gap: 16px;
    grid-template-columns: repeat(28, 1fr);
  }

  body > footer nav ul li.col-5 {
    grid-column: auto / span 4;
  }

  body > footer nav ul li:nth-child(odd){
    grid-column-start: 1;
  }

  body > footer nav ul li:nth-child(even){
    grid-column-start: auto;
  }

  .share-links {
    align-self: flex-start;
  }

  .footer-section .size-2 {
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

/* 4. Heading Style */

.heading-3 {
  font-family: Rubrik, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--black);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
}

@media (min-width: 768px) {
  .heading-3 {
    font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.8681));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {
  .heading-3 {
    font-size: 1.5rem;
  }
}

@supports(font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.8681)), 1.5rem)) {
  .heading-3 {
    font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.8681)), 1.5rem);
    min-height: 0vw;
  }
}

/* 5. Article Card Preview */

.article-card {
  position: relative;
}

.article-card .img-wrapper {
  width: 100%;
  height: 14vw;
  object-fit: cover;
  position: relative;
  overflow: hidden;
}

.article-card img {
  width: 100%;
}

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

.article-card a {
  position: relative;
  z-index: 1;
}

.article-card h1 {
  font-size: 0.875rem;
  padding: 0.5em 0;
  margin-top: 0;
}

@media (min-width: 768px) {
  .article-card h1 {
    font-size: calc(0.875rem + ((1vw - 7.68px) * 0.5952));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {
  .article-card h1 {
    font-size: 1.125rem;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .article-card h1 {
    font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.5952)), 1.125rem);
    min-height: 0vw;
  }
}

.article-card h1 a {
  text-decoration: inherit;
  color: inherit;
  position: static;
}

.article-card h1 a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.podcast-card .img-wrapper:after {
  content: '\f025';
  font-family: 'Font Awesome 5 Pro';
  display: block;
  position: absolute;
  font-size: 4rem;
  color: var(--cream);
  z-index: 2;
  top: calc(50% - 34px);
  left: calc(50% - 32px);
}

.video-card .img-wrapper:after {
  content: '\f144';
  font-family: 'Font Awesome 5 Pro';
  display: block;
  position: absolute;
  font-size: 4rem;
  color: var(--cream);
  z-index: 2;
  top: calc(50% - 34px);
  left: calc(50% - 32px);
}

.article-card .action-call,
.article-card .read-more-link {
  color: var(--green);
}

/* TODO: link hover effects */

.article-card p {
  font-family: Rubrik, sans-serif;
}

.cta-card .img-wrapper {
  /*aspect-ratio: 1 / 1;*/
  position: relative;
}

.cta-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-card .card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-card .card-content h1 {
  margin: 0;
}

.article-card:hover {
  filter: brightness(0.7);
}

@media(max-width: 768px) {
  .article-card {
    padding-bottom: 2rem;
  }
  .article-card .img-wrapper {
    width: 100%;
    height: 63%;
  }
}

/* 6. Related Articles */

/* 7. Generic CTA Styles */

.cta { position: relative; }

.cta header {
  align-self: center;
  position: relative;
  z-index: 2;
}

.cta header h1 {
  font-size: 1.5rem;
  color: var(--cream);
}

@media (min-width: 768px) {
  .cta header h1 {
    font-size: calc(1.5rem + ((1vw - 7.68px) * 1.7857));
    min-height: 0vw;
  }
}
@media (min-width: 1440px) {
  .cta header h1 {
    font-size: 36px;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .cta header h1 {
    font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 1.7857)), 2.25rem);
    min-height: 0vw;
  }
}

.cta header h1 span {
  font-weight: 400;
}

.cta header p {
  font-family: Rubrik, sans-serif;
  color: var(--cream);
  font-weight: 400;
}

@media(max-width: 1300px) {
  .cta article {
    grid-column-start: 18;
  }
  aside .cta header h1 {
  font-size: clamp(0.5rem, calc(100vw/36), 1rem);
  }
}

@media(min-width: 1400px) {
  aside .cta header h1 {
    font-size: clamp(1rem, calc(100vw/36), 2rem);
  }
}

.cta:before {
  content: '';
  display: block;
  background: url('../img/fractal-cta-right.svg') no-repeat;
  width: 174px;
  height: 210px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  mix-blend-mode: multiply;
}

@media(max-width: 768px) {
  .cta > [class*="col"] {
    grid-column: 2 / 36 !important;
  }

  .cta .cta-card h1 {
    margin-top: 1rem;
  }
}

/* 8. Podcast CTA */

.podcast-cta:before {
  background: url('../img/fractal-cta-left.svg') no-repeat;
  left: 0;
  right: unset;
  width: 200px;
}

.podcast-cta .cta-card .action-call {
  color: var(--black);
}

.podcast-cta .cta-card h1,
.podcast-cta .cta-card p {
  color: var(--cream);
}

.podcast-cta .cta-card .read-more-link {
  color: var(--yellow);
}

.podcast-cta .cta-card {
  position: relative;
}

.podcast-cta .cta-card .img-wrapper:after {
  content: '\f025';
  font-family: 'Font Awesome 5 Pro';
  display: block;
  position: absolute;
  font-size: 4rem;
  color: var(--cream);
  z-index: 2;
  top: calc(50% - 34px);
  left: calc(50% - 32px);
}

/* 9. Blog CTA */

.blog-cta header h1,
.blog-cta header p {
  color: var(--black);
  font-weight: 400;
}

.blog-cta .cta-card h1,
.blog-cta .cta-card p {
  color: var(--black);
}

.blog-cta .read-more-link {
  color: var(--green);
}

/* 10. Projects CTA */

.podcast-cta:before {
  background: url('../img/fractal-cta-left.svg') no-repeat;
  left: 0;
  right: unset;
  width: 200px;
  mix-blend-mode: soft-light;
}

.projects-cta .cta-card .action-call {
  color: var(--black);
}

.projects-cta .cta-card h1,
.projects-cta .cta-card p {
  color: var(--cream);
}

.projects-cta .cta-card .read-more-link {
  color: var(--black);
}

.projects-cta .cta-card {
  position: relative;
}

.projects-cta .cta-card .img-wrapper:after {
  content: '\f144';
  font-family: 'Font Awesome 5 Pro';
  display: block;
  position: absolute;
  font-size: 4rem;
  color: var(--cream);
  z-index: 2;
  top: calc(50% - 34px);
  left: calc(50% - 32px);
}

/* 11. Newsletter CTA */

.newsletter-cta {
  min-height: 260px;
}

.newsletter-cta:before {
  background: url('../img/fractal-cta-left.svg') no-repeat;
  left: 0;
  right: unset;
  width: 200px;
  height: 210px;
  mix-blend-mode: soft-light;
}

.newsletter-cta header h1 {
  font-family: 'Rubrik', sans-serif;
  font-weight: 400;
}

@media(max-width: 768px) {
  .newsletter-cta header[class*="col-"] {
    grid-column-start: 6 !important;
    grid-column-end: span 24 !important;
  }
  .newsletter-cta h1 {
    margin-bottom: 0;
  }
  .newsletter-cta h1 + p {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .newsletter-cta > [class*="col"] {
    grid-column: 6 / 32 !important;
  }
  .newsletter-cta > .signup-form[class*="col"] {
    grid-column: 6 / 32 !important;
  }
}

/* 12. Signup Form */

.signup-form {
  grid-row-gap: 8px;
  color: var(--cream);
  align-self: center;
  position: relative;
  z-index: 2;
}

.signup-form input[type="email"] {
  align-self: end;
  padding: 1em;
  background-color: var(--light-purple);
  border: none;
  border-bottom: 1px solid var(--cream);
  color: var(--cream);
}

.signup-form input[type="email"]::placeholder {
  color: var(--cream);
  font-family: Rubrik;
}

.signup-form fieldset {
  border: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.signup-form label,
.signup-form button {
  color: var(--cream);
  font-family: Rubrik;
  text-transform: uppercase;
  flex: 1 0 auto;
}

.signup-form label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.signup-form label span {
  margin-left: 8px;
}

aside .signup-form label span {
  margin-left: 4px;
  font-size: 0.625rem;
}

@media (min-width: 48em) {
  .signup-form label span {
    font-size: calc(0.625rem + ((1vw - 0.48rem) * 0.5952));
    min-height: 0vw;
  }
}
@media (min-width: 90em) {
  .signup-form label span {
    font-size: 0.875rem;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .signup-form label span {
    font-size: clamp(0.625rem, calc(0.625rem + ((1vw - 7.68px) * 0.5952)), 0.875rem);
    min-height: 0vw;
  }
}

.signup-form button {
  align-self: start;
  background-color: var(--light-purple);
  border: none;
  padding: 1em;
  margin: 0.5em 0;
}

.signup-form input[type="checkbox"] {
  /*background-color: var(--purple);*/
  border: 2px solid var(--cream);
  color: var(--cream);
}

@media(max-width: 768px) {
  .signup-form[class*="col"] {
    grid-column-start: 8 !important;
    grid-column-end: span 20 !important;
  }
  .signup-form label[class*="col-"] {
    grid-column: 1 / span 4 !important;
  }
  .signup-form label[class*="col-"]:last-of-type {
    grid-column: 5 / span 5 !important;
  }
  .signup-form button[class*="col-"] {
    grid-column: 1 / span 6 !important;
  }
  .signup-form fieldset label {
    padding-top: 0.5rem;
  }
  .signup-form fieldset button {
    margin-top: 1rem;
    flex-grow: 0;
  }
}

.bg-green .signup-form input[type="email"] {
  background-color: var(--light-green);
}

.bg-green .signup-form button {
  background-color: var(--light-green);
}

.bg-yellow.cta:before {
  mix-blend-mode: screen;
}

.bg-yellow.cta header h1,
.bg-yellow.cta header p {
  color: var(--black);
}

.bg-yellow .signup-form input[type="email"] {
  background-color: var(--light-yellow);
  color: var(--black);
}

.bg-yellow .signup-form input[type="email"]::placeholder {
  color: var(--black);
}

.bg-yellow .signup-form label,
.bg-yellow .signup-form button {
  color: var(--black);
}

.bg-yellow .signup-form button {
  background-color: var(--light-yellow);
  color: var(--black);
}

.bg-black .signup-form input[type="email"] {
  background-color: var(--light-black);
}

.bg-black .signup-form button {
  background-color: var(--light-black);
}

@media(orientation: portrait) {
  .cta > * {
    /*grid-column: 2 / span 34 !Important;*/
  }
}
.col-6.bg-yellow.newsletter-cta > * {
  grid-column: 2 / span 4 !important;
}

.col-6.bg-yellow.newsletter-cta > header {
  margin-bottom: 4rem;
}

.col-6.bg-yellow.newsletter-cta > form {
  font-size: 0.825rem;
}

/* 13. By Line */

.by-line * {
  font-family: Rubrik, sans-serif;
  font-size: 0.625rem;
  line-height: 1.25;
  color: var(--black);
}

.by-line .author {
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  /*margin-bottom: 0;*/
}

.by-line .date {
  margin-top: 0;
}

@media (min-width: 768px) {
  .by-line * {
    font-size: calc(0.625rem + ((1vw - 7.68px) * 0.8929));
    min-height: 0vw;
  }
}
@media (min-width: 1440px) {
  .by-line * {
    font-size: 1rem;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .by-line * {
    font-size: clamp(0.625rem, calc(0.625rem + ((1vw - 7.68px) * 0.8929)), 1rem);
  }
}

/* 14. Checkbox */

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  outline: none;
  vertical-align: bottom;
  margin: 0;
  border-radius: 25%;
  border: 2px solid var(--black);
  position: relative;
  color: var(--black);
}

input[type="checkbox"].light {
  color: var(--cream);
  border: 2px solid currentColor;
}

input[type='checkbox']:after {
  border: 3px solid currentColor;
  border-top: none;
  border-left: none;
  position: absolute;
  content: '';
  display: block;
  width: 3px;
  height: 7px;
  left: 30%;
  opacity: 0;
  top: 4%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  -webkit-transition: opacity .3s, -webkit-transform .6s cubic-bezier(.2, .85, .32, 1.2);
  transition: opacity .3s, transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s, -webkit-transform .6s cubic-bezier(.2, .85, .32, 1.2);
}
/* Disabled */
input[type='checkbox']:disabled { opacity: 0.8; }
/* Focus */
input[type='checkbox']:focus {
  box-shadow: 0 0 0 2px rgba(157, 157, 157, 0.5);
  outline: 2px solid var(--black);
}
input[type='checkbox']:checked:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(1) rotate(45deg);
  opacity: 1;
}

/* 15. Button */

button {
  background-color: var(--cream);
  border: none;
  padding: 1em;
}

/* 16. Developments */

ul.developments {
  padding-left: 1em;
  margin: 0;
}

.developments li {
  position: relative;
  list-style-type: none;
  padding: 0.5em 1em;
  font-family: Rubrik, sans-serif;
  font-size: 0.625rem;
  border-left: 3px solid var(--black);
}

@media (min-width: 768px) {
  .developments li {
    font-size: calc(0.625rem + ((1vw - 7.68px) * 0.4464));
    min-height: 0vw;
  }
}
@media (min-width: 1440px) {
  .developments li {
    font-size: 0.8125rem;
  }
}

@supports(font-size: clamp(1rem, 2rem, 3rem)) {
  .developments li {
    font-size: clamp(0.625rem, calc(0.625rem + ((1vw - 0.48rem) * 0.4464)), 0.8125rem);
    min-height: 0vw;
  }
}

.developments li a {
  text-decoration: none;
  color: inherit;
}

.developments li a:hover {
  text-decoration: underline;
}

.developments li::before {
  content: url(../img/middle-marker.svg);
  display: inline-block;
  position: absolute;
  left: -10px;
  z-index: 3;
}

.developments li:nth-child(even)::before {
  top: 0%;
}

.developments li:nth-child(odd)::before {
  top: 0%;
}

.developments li:first-child {
  padding-top: 0;
}

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

.developments li:last-child {
  padding-bottom: 0;
}

.developments li:last-child::before {
  content: url(../img/last-marker.svg);
  top: -10px;
}

.developments li:last-child::after {
  content: '';
  display: block;
  position: absolute;
  left: -4px;
  top: 10px;
  width: 5px;
  height: calc(100% - 10px);
  background-color: var(--cream);
  z-index: 2;
}

.developments li:not(:last-child):not(:first-child)::before {
  top: -8px;
}

.light.developments li {
  border-left: 3px solid var(--cream);

}

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

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

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

.light.developments li:last-child::after {
  content: '';
  display: block;
  position: absolute;
  left: -4px;
  top: 10px;
  width: 5px;
  height: calc(100% - 9px);
  background-color: var(--black);
  z-index: 2;
}

/* 17. Sidebar */

.sidebar {
  align-content: start;
}

.sidebar fieldset {
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.sidebar fieldset h4 {
  font-weight: 400;
  margin: 0;
  margin-bottom: 1rem;
}

.sidebar .select-wrapper {
  position: relative;
}

.sidebar .select-wrapper:after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f107";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  position: absolute;
  right: 16px;
  top: 25%;
  z-index: 5;
}

.sidebar select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: var(--deep-yellow);
  padding: 0.625rem 1rem;
  border-radius: 16px;
  position: relative;
  width: 100%;
  text-transform: uppercase;
}

.sidebar select option {
  background-color: var(--cream);
  text-transform: uppercase;
}

/* 18. Project Components */

h1.project-header {
  font-family: Rubrik, sans-serif;
  font-size: 2.25rem;
  line-height: 1.25;
  color: var(--black);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
}

h2.project-subheader {
  font-size: 0.825rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 2px solid currentColor;
}

h2.project-subheader a {
  color: inherit;
  text-decoration: none;
}

h2.project-subheader:focus-within {
  color: var(--green);
}

h2.project-subheader a:focus,
h2.project-subheader a:hover,
h2.project-subheader a:active {
  color: var(--green);
}

.tag-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.project-tag {
  padding: 0.25rem 1rem;
  background-color: var(--green);
  color: var(--white);
  border-radius: 16px;
}

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

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

/* 19. Annotation */
mark {
  position: relative;
  background-color: var(--deep-yellow);
  font-family: IBMPlexSerif, serif;
}

mark[data-annotation].open::after,
mark[data-annotation]:hover::after {
  content: attr(data-annotation);
  position: absolute;
  display: inline-block;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 409px;
  background-color: var(--deep-cream);
  background: url(../img/annotation-bg.svg) no-repeat, var(--deep-cream);
  border: 2px solid var(--yellow);
  padding: 1em;
  padding-left: 3rem;
  font-style: italic;
  min-height: 3rem;
}

@media(max-width: 768px) {
  mark {
    position: unset;
  }

  mark[data-annotation].open::after,
  mark[data-annotation]:hover::after {
    left: 0;
    z-index: 1;
    width: calc(calc(100vw / 36) * 26);
    min-height: 3rem;
    transform: translateX(0) translateY(calc(calc(100vw / 36) * -1));
  }
}

.annotation {
  top: 50px;
  right: 50px;
  display: flex;
  width: 400px;
  border: 2px solid var(--yellow);
}

.annotation svg {
  flex: 0 0 auto;
  margin-top: 8px;
}

.annotation p {
  margin: 0;
  margin-left: 1rem;
}

/* 20. Newsletter Popup */

.newsletter-popup {
  width: calc(100vw * 0.59);
  padding-top: 5rem;
  padding-bottom: 5rem;
  margin: 0 auto;
  position: relative;
}

.newsletter-popup:before {
  content: '';
  display: block;
  position: absolute;
  background: url('../img/fractal-cta-left.svg') no-repeat;
  top: 0;
  left: 0;
  right: unset;
  width: 200px;
  height: 190px;
  mix-blend-mode: soft-light;
}

.newsletter-popup > * {
  width: 50%;
  margin: 0 auto;
}

.newsletter-popup header {
  text-align: center;
  margin-bottom: 4rem;
}

.newsletter-popup header h1 {
  font-size: 2rem;
  color: var(--cream);
  margin: 0;
  font-weight: 400;
  font-family: Rubrik, sans-serif;
}

.newsletter-popup header p {
  font-family: Rubrik, sans-serif;
  color: var(--cream);
  font-weight: 400;
}

.newsletter-popup button {
  font-size: 1rem;
}

/* 21. Rounded Date */

p.rounded-date {
  font-family: Rubrik;
  font-size: 0.875rem;
  border: 1px solid currentColor;
  padding: 1em;
  display: inline-block;
  border-radius: 100%;
}

/* 22. Blockquote */
blockquote {
  padding-left: 20px;
  border-left: 4px solid currentColor;
  position: relative;
  color: var(--yellow);
  font-family: IBMPlexSerif, serif;
}

blockquote::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  clip-path: circle(8px);
  position: absolute;
  top: -2px;
  left: -10px;
}

blockquote::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  clip-path: circle(8px);
  position: absolute;
  left: -10px;
  bottom: -2px;
}

blockquote cite {
  display: block;
  margin-top: 1em;
  text-transform: uppercase;
  font-style: normal;
}
blockquote cite::before {
  content: '-';
}