.blockquote{
	width: 60%;
	margin: 0 auto;
	margin-bottom: var(--inner-item-vertical-padding);
}
.section .ph + .blockquote{
	margin-top: calc(var(--inner-item-vertical-padding) - var(--paragraph-vertical-padding));
}
blockquote{
	margin: 0;

}
blockquote p{
	font-family: var(--zapf);
	font-size: 42px;
	line-height: 1.07;
	position: relative;
	z-index: 2;
}


.section .blockquote{
	width: var(--medium-large-column);
	max-width: auto;
	margin: 0 auto;
	margin-bottom: var(--inner-item-vertical-padding);
}
.section blockquote p{
	font-family: var(--arial-narrow);
	font-size: 30px;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.quote{
	font-family: var(--arial-narrow);
	font-size: 18px;
	line-height: 1.22;
	position: relative;
	text-align: center;
	margin:0 auto;
	max-width: var(--medium-column);
	margin-top: calc(var(--paragraph-vertical-padding)/2);
}
.contributor{
	font-weight: 700;
}
.contributor.w-modal{
	border: 1px solid var(--color-black);
	border-radius: 10px;
	padding: 0 8px;
	cursor: pointer;
}
.contributor.w-modal:hover{
	background-color: var(--color-hover);
}
.attribute, .contributor{
	display: inline;
	/* margin: 0 auto; */
	/* width: calc(var(--mini-column)*1.15); */
}
.attribute *{
	font-family: var(--arial-narrow);
}
.attribute a{
	color: unset;
	text-decoration: underline;
}
.attribute p{
	display: inline;
}
.attribute a:hover{
	color: var(--color-hover);
	background-color: var(--color-black);
	text-decoration: underline;
}
.section .attribute a:hover{
	color: var(--color-red);
	background-color: transparent;
}
.modal-wrapper{
	position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}
.modal-wrapper.open .contributor{
	display: inline;
}
.modal-wrapper.open{
	opacity: 1;
	pointer-events: auto;
}

.modal-wrapper .modal{
	width: 75%;
	padding: 60px 4% 70px;
	font-family: var(--arial-narrow);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: left;
	background-color: var(--color-black);
	color: var(--color-white);
	position: relative;
}
.modal-wrapper .modal a{
	color: var(--color-white);
	text-decoration: underline;
}
.modal-wrapper .modal a:hover{
	color: var(--color-hover);
}
.modal-wrapper .modal a.bio-link{
	border: 1px solid var(--color-white);
	font-family: var(--arial-narrow);
	border-radius: 10px;
	text-decoration: none;
	font-size: 18px;
	line-height: 1.22;
	padding: 0 6px;
}
.modal-wrapper .modal a.bio-link:hover{
	background-color: var(--color-hover);
	color: var(--color-black);
}



.x{
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}
.x::before{
	content: " ";
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}
.x:hover path{
	fill: var(--color-hover);
}


@media screen and (max-width: 800px){
	.modal-wrapper .modal {
		height: calc(100vh - 260px);
		top: 0;
		overflow: scroll;
	}
	.quote{
		max-width: var(--large-column);
	}
	.section .blockquote{
		width: var(--medium-column);
	}
	.section blockquote p{
        font-size: 28px;
    }
}