:root {
  --main-bg-color: #FCFCFC;
  --main-text-color: #262626;
  --light-gray-color: #CCCCCC;
  --dark-gray-color: #999999;
}

body{
  color: var(--main-text-color);
  background-color: var(--main-bg-color);

  font-size: 20px;

  margin: 0;
  padding: 20px;
  padding-top: 40px;
}

body, button{
  font-family: 'Inter', sans-serif;
}

img{
  display: block;
}

::selection{
  background-color: var(--dark-gray-color);
}

::marker{
  display: none;
}

figcaption{
  width: 100%;
  text-align: right;
  margin-top: 4px; 
  font-size: 9px;
  font-weight: 300;
  color: var(--dark-gray-color);
}

a {
  color: var(--main-text-color);
  transition: 0.2s;
  position: relative;
  text-decoration: none;
}

p a{
  /* border-bottom: 2px solid var(--dark-gray-color); */
  background-color: var(--light-gray-color);
}

p a:hover{
  background: var(--dark-gray-color);
}

#title a:hover {
  background: var(--dark-gray-color);
}

/* p a::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 2px;
  background: var(--dark-gray-color);
  transition: 0.0s;

} */

/* p a:hover::after {
  height: calc(80%);
} */

a img, a .workCaption{
  transition: 0.2s;
}

a:hover img{
  filter: brightness(70%);
}

a:hover .workCaption{
  background-color: var(--dark-gray-color);
}



h1, h2{
  font-size: 1.2em;
}

h3 {
  font-size: 1.1rem;
}

p {
  font-size: 1rem;
  line-height: 1.2rem;
}

blockquote {
  font-size: 30px;
}

blockquote footer {
  margin-top: 10px;
  text-align: right;
  font-size: 20px;
}

section#headline {
  display: flex;
}

section#headline p{
  font-size: 3rem;
  line-height: 3.7rem;
  /* max-width: 800px; */
  max-width: 700px;
  line-break: strict;

  width: 70%;
  margin-top: 12px;
  font-weight: 600;
}

section#headline #headline-img{
  width: 30%;
  height: auto;
}


section#headline #headline-img img{
  width: 100%;
  height: auto;
}

@media screen and (max-width:990px) {
  section#headline p{
    font-size: 2rem;
    line-height: 2.4rem;

    width: 100%;
  }

  section#headline #headline-img{
    display: none;

  }
}

hr{
  border: 1px solid;
}

h2.subtitle{
  font-weight: 400;
  margin-bottom: 0;
  max-width: 450px;
}

button{
  font-size: 20px;

  background-color: var(--main-text-color);
  /* background-color: var(--main-bg-color); */

  border-radius: 1px;
  border-style: solid;
  border-style: none;
  border-color: var(--main-text-color);
  border-width: 2px;
  padding: 4px 10px;
  cursor: pointer;

  transition: 0.2s;
}
button:hover{
  /* background-color: var(--main-bg-color); */
  /* background-color: var(--main-text-color); */
  background-color: var(--dark-gray-color);
}

button a{
  color: var(--main-bg-color);
  /* color: var(--main-text-color); */
  text-decoration: none;
}

button:hover a{
  /* color: var(--main-bg-color); */
  color: var(--main-text-color);
}

header, footer{
  width: 100%;
  /* height: 40px; */
}
footer{
  
  height: 24px;
  margin-top: 48px;
  font-size: 10px;
}

footer .light, footer .light a{
  color: var(--dark-gray-color);
}

footer a{
  background-color: var(--light-gray-color);
}
footer a:hover{
  background-color: var(--dark-gray-color);
  color: var(--light-gray-color);
}



section figure, section figure ul{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;

  /* column-gap: 20px; */
  /* padding-right: 20px; */

  /* row-gap: 40px; */
  /* padding-bottom: 40px; */

  list-style-type: none;
}
section figure ul li{
  width: 46%;
  flex-grow: 2;
  /* padding: 10px; */
  /* padding-right: 10px; */
  padding-bottom: 10px;
}

section figure ul li:nth-child(2){
  padding-left: 10px;
}



section figure ul li img{
  /* width: 100%; */
  object-fit: cover;
}
section figure img{
  width: 100%;
  height: 100%;
}

section .block-type-video figure{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
section .block-type-video figure iframe{
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


header a {
  text-decoration: none;

}

#title{
  font-weight: 600;
  padding-bottom: 20px;
}

#menu{
  display: flex;
  flex-wrap: wrap;
  /* column-gap: 50px;
  row-gap: 12px; */
}
#menu a{
  margin-right: 40px;
  margin-bottom: 20px;
}

#menu a.active{
  /* text-decoration: underline; */
  background: var(--light-gray-color);
}
#menu a:hover{
  /* text-decoration: underline; */
  background: var(--dark-gray-color);
}

#menu a.experiments{
  color: var(--light-gray-color);
}

#menu a.experiments.active{
  color: var(--light-gray-color);
  background: var(--dark-gray-color);
}

a.workImage{
  text-decoration: none;
  width: 100%;
  padding-bottom: 40px;
  display: block;
}
a.workImage .workCaption{
  max-width: 450px;
  padding: 4px;
}

a.workImage img{
  width: 100%;
  height: 66.6%;
}



a.workImage .title{
  font-weight: 600;
}

section{
  max-width: 900px;
  padding-top: 40px;
}


section.yearWorks{
  max-width: 100%;
  padding-top: 20px;
}

.workImageList{
  display: flex;
  /* column-gap: 50px; */
  /* padding-right: 50px; */
  flex-wrap: wrap;
}

.workImageList a.workImage{
  padding-bottom: 20px;
  padding-right: 50px;
}

section.yearWorks a.workImage, section.selectedWorks a.workImage{
  width: 312px;
}
section.yearWorks a.workImage img, section.selectedWorks a.workImage img{
  height: 208.13px;
  overflow: hidden;
  object-fit: cover;
}

section.selectedWorks a.workImage img.logo, section.yearWorks a.workImage img.logo {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 202px;
  top: 98.1px;
}

@media screen and (max-width:990px) {
  section figure ul li{
    width: 100%;
    padding-left: 0;
  }
  section figure ul li:nth-child(2){
    padding-left: 0;
  }
}