@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter&family=Newsreader&family=Source+Serif+Pro&display=swap');

:root {
  --category-color-inclusion: rgba(255, 229, 91, 0.5);
  --category-color-sustainability: rgba(208, 255, 113, 0.5);
  --category-color-wellbeing: rgba(255, 108, 13, 0.3);
  --category-color-working: rgba(115, 241, 253, 0.4);
  --category-color-trust: rgba(161, 240, 230, 0.5);
  --category-color-publication: #F0F0F0;
  --highlight-color: white;
  --background-color: #ffffff;
  --font-serif: 'Source Serif Pro', serif;
	--font-sans: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

.highlight {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 32px;
}

.publication {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height:  18px;
}

.date,
.author,
.category {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

h1, h2 {
  font-family: var(--font-sans);
  font-size: 36px;
  letter-spacing: -0.01em;
}

.noblur {
  visibility: hidden;
}

.titledescription,
.about,
.close,
.selectedcategory {
  color: rgba(0, 0, 0, 0.9);
}

body {
  background-color: var(--background-color);
  color: rgba(0, 0, 0, 0.9);
  margin: 0px;
  padding: 0px;
  width: 100vw;
  z-index: 3;
}

.left, .title, .right {
    overflow: hidden;
}

header {
  grid-template-areas: 'left title right';
  max-height: 88px;
  display: grid;
  top: 0px;
  left: 0px;
  position: sticky;
  grid-template-rows: 88px;
  grid-template-columns: 48px 1fr 48px;
  z-index: 3;
}

.copied:hover,
.tocopy:hover {
  cursor: default;
}

/*.copied:hover {
  cursor: url('donebtn.svg'), auto;
} */

/* .tocopy:hover {
  cursor: url('copybtn.svg'), auto;
}

.copied:hover {
  cursor: url('donebtn.svg'), auto;
} */


.backgroundHeader {
  grid-column: 1 / span 3;
  grid-row: 1;
  z-index: -2;
}

.backgroundHeader,
.backgroundHeader.inclusionselected,
.backgroundHeader.sustainabilityselected,
.backgroundHeader.wellbeingselected,
.backgroundHeader.workingselected,
.backgroundHeader.aiselected,
.backgroundHeader.trustselected {
  position: absolute;
  width: 100vw;
  height: 80px;
  left: 0px;
  top: -85px;
  mix-blend-mode: multiply;
  filter: blur(44px);
  z-index: -2;
}

.backgroundHeader {
  background: rgba(255, 91, 229, 0.6);
}

.Inclusion,
.backgroundHeader.inclusionselected {
  background: var(--category-color-inclusion);
}

.Sustainability,
.backgroundHeader.sustainabilityselected {
  background: var(--category-color-sustainability);
}

.Wellbeing,
.backgroundHeader.wellbeingselected {
  background: var(--category-color-wellbeing);
}

.Working,
.backgroundHeader.workingselected {
  background: var(--category-color-working);
}

.AI,
.backgroundHeader.aiselected {
  background: var(--category-color-ai);
}

.Trust,
.backgroundHeader.trustselected {
  background: var(--category-color-trust);
}

.title {
  grid-column: 2 / span 1;
  grid-row: 1;
  z-index: -1;
}

h1 {
  padding: 19px 0px 17px 16px;
  display: inline;
  float: left;
}

h1.link {
  cursor: pointer;
}

h1.link:hover {
  text-decoration: underline;
}

.titledescription {
  float: left;
}

.about,
.close {
  float: right;
  padding: 20px 16px 17px 0px;
}

.aboutlink,
.close {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.35);
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.publication a {
  width: 100%;
	height: 100%;
	display: block;

}

.publication a:link,
.publication a:visited {
   border: none; 
}

.tag {
  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.item {
  position: sticky;
  position: -webkit-sticky;
  top: 88px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background-color: var(--background-color);

  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(600px, 1000px) minmax(200px, 1fr) 48px;
  grid-template-rows: auto 23px;
  grid-template-areas:
    'left category author date highlight publication right'
    'emptyleft category_bottom author_bottom highlight_bottom date_bottom publication_bottom emptyright';
  margin: 0px;
  align-items: center;
  z-index: 1;
}


.date,
.author,
.split_bottom,
.split_top,
.publication,
.one_category {
  color: rgba(0, 0, 0, 0.35);
  padding-top: 25px;
  padding-bottom: 23px;
  padding-left: 16px;
  padding-right: 24px;
}

.publication,
.category {
  grid-area: publication;
}

.author {
  grid-area: author;
}
.date {
  grid-area: date;
}

.category,
.split_bottom,
.split_top,
.one_category {
  color: rgba(0, 0, 0, 0.9);
  grid-area: category;
  cursor: pointer;
}

.highlight {
  padding-top: 18px;
  padding-bottom: 22px;
  padding-left: 16px;
  padding-right: 24px;
  grid-area: highlight;
  cursor: pointer;
}

/*  grid lines  */
.emptyright,
.author_bottom,
.highlight_bottom,
.date_bottom,
.publication_bottom,
.category_bottom {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.emptyleft {
  grid-area: emptyleft;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.emptyright {
  grid-area: emptyright;
}

.author_bottom {
  grid-area: author_bottom;
}

.highlight_bottom {
  grid-area: highlight_bottom;
}

.date_bottom {
  grid-area: date_bottom;
}

.publication_bottom {
  grid-area: publication_bottom;
}

.category_bottom {
  grid-area: category_bottom;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

.background,
.background_publication,
.background_category {
  grid-row: 1;
  z-index: -1;
  visibility: hidden;
  position: relative;
}

.background {
  grid-column: 5;
}

.background_publication {
  grid-column: 6;
}

.background_category {
  grid-column: 2;
}

.background_publication_blur,
.background_category_blur,
.background_blur {
  height: calc(100% - 16px);
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.background_publication_blur {
  background: var(--category-color-publication);
}

.background_blur {
  background: white;
}

.publication:hover + .background_publication,
.publication:active + .background_publication,
.split_top:hover + .background_category,
.split_top:active + .background_category,
.split_bottom:hover + .background_category,
.split_bottom:active + .background_category,
.category:hover + .background_category,
.category:active + .background_category {
  mix-blend-mode: multiply;
  filter: blur(22px);
  z-index: -1;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .highlight:hover + .background {
    mix-blend-mode: multiply;
    filter: blur(22px);
    z-index: -1;
    visibility: visible;
  }
}

.single {
  display: grid;
  grid-template-rows: auto;
  grid-template-areas: 'single';
  margin: 0px;
  padding: 0px;
}

.one_category {
  grid-area: single;
}

.split {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-template-areas:
    'top'
    'bottom';
  margin: 0px;
  padding: 0px;
}

.split_top {
  grid-area: top;
}

.split_bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  grid-area: bottom;
}

.split_bottom:hover + .background_bottom,
.split_top:hover + .background_top {
  padding: 100px 0px 100px 100px;
}

.background_top {
  grid-area: top;
  z-index: -1;
}

.background_bottom {
  grid-area: bottom;
  z-index: -1;
}

@media screen and (max-width: 1900px) {
  .item {
 			grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(400px, 750px) minmax(120px, 1fr) 48px;
  }
  .highlight {
      font-size: 19px;
  	line-height: 30px;
  }  
}

@media screen and (max-width: 1300px) {
  header,
  .item {
    grid-template-columns: 24px auto 24px;
  }
  .item {
    grid-template-rows: 48px 48px auto 48px 48px 24px;
    grid-template-areas:
      'left category right'
      'left author right'
      'left highlight right'
      'left date right'
      'left publication right'
      'emptyleft category_bottom emptyright';
  }
  .author,
  .date,
  .publication,
  .category {
    padding-top: 13px;
    padding-bottom: 12px;
  }
  .split {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    margin: 0px;
    padding: 0px;
  }
  .split_bottom {
    grid-area: 1/2/1/2;
    border-top: 0px;
  }
  .split_top {
    grid-area: 1/1/1/1;
  }

  .split_bottom:hover + .background_bottom {
    mix-blend-mode: multiply;
    background: rgba(255, 91, 229, 0.8);
    filter: blur(22px);
    z-index: -2;
    padding: 0px 0px 0px 50px;
  }

  .split_top:hover + .background_top {
    mix-blend-mode: multiply;
    background: rgba(255, 91, 229, 0.8);
    filter: blur(22px);
    z-index: -2;
    padding: 0px 50px 0px 0px;
  }

  .split {
    background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)) no-repeat center/1px 100%;
  }
  .one_category,
  .single,
  .split_bottom,
  .split_top,
  .split {
    height: 48px;
    padding: 7px 0px 0px 8px;
    margin: 0px;
  }
  .background_top {
    grid-area: 1/1/1/1;
    z-index: -1;
  }

  .background_bottom {
    grid-area: 1/2/1/2;
    z-index: -1;
  }

  .background {
    grid-column: 2;
    grid-row: 3;
    z-index: -1;
  }

  .background_publication {
    grid-column: 2;
    grid-row: 5;
  }

  .background_publication_blur {
    height: calc(100% - 26px);
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .author,
  .date,
  .publication {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
  .author {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
}

@media screen and (max-width: 700px) {
 
  header,
  .item {
    grid-template-columns: 0px 1fr 0px;
    position: relative;
    overflow-x: visible;
    overflow-y: visible;
    top: 0px;
  }
 
  .title {
    grid-column: 2;
  }

.backgroundHeader {
  grid-column: 2;
  grid-row: 1;
  z-index: -2;
}
  
  .highlight {
    font-size: 20px;
    line-height: 28px;
  }
  .aboutlink, 
  .left,
  .right,
  .emptyleft,
  .emptyright {
    visibility: hidden;
  }
  
  .tag {
  height: 100%;
  border-left: 0px;
}
}