.about {
	row-gap: clamp(32px, 4vw, 56px);
}

.about__plate {
	grid-column: 1 / span 4;
	position: sticky;
	top: calc(var(--head-h) + 28px);
	align-self: start;
}

.about__plate .frame > img {
	object-position: top;
}

.about__text {
	grid-column: 6 / span 7;
	min-width: 0;
}

.about__text--wide {
	grid-column: 1 / -1;
}

div.entry-content.about__text blockquote {
	border-left-color: var(--line-2);
	color: var(--bone-2);
}

div.entry-content.about__text blockquote > * + * {
	margin-top: .55em;
}

.page-head--about {
	min-height: min(88svh, 820px);
}

.page-head--about .page-head__film {
	opacity: calc(var(--film-opacity) * .78);
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
}

.page-head--about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, var(--black) 0, color-mix(in srgb, var(--black) 55%, transparent) 42%, transparent 70%);
}

.page-head--about .page-head__title {
	max-width: 12ch;
}

.about__plate {
	position: relative;
}

.about__mark {
	position: absolute;
	right: -14px;
	top: -14px;
	width: 52px;
	height: 52px;
}

.about__text--letter > p:first-of-type::first-letter {
	float: left;
	font-family: var(--display);
	font-weight: 800;
	font-size: 4.6em;
	line-height: .78;
	padding: .06em .12em 0 0;
	color: var(--gold);
}

.subjects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.subjects__card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: clamp(200px, 24vw, 280px);
	border: 1px solid var(--line);
	background: var(--ink);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--mid) ease, transform var(--mid) var(--ease);
}

.subjects__card:hover,
.subjects__card:focus-visible {
	border-color: var(--gold);
	transform: translateY(-4px);
}

.subjects__art {
	display: block;
	height: clamp(110px, 12vw, 150px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.subjects__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .8;
	transition: transform var(--slow) var(--ease), opacity var(--mid) ease;
}

.subjects__card:hover .subjects__art img {
	transform: scale(1.06);
	opacity: 1;
}

.subjects__body {
	display: grid;
	align-content: end;
	gap: 6px;
	padding: 0 clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px);
}

.subjects__name {
	font-family: var(--display);
	font-stretch: 68%;
	font-weight: 800;
	font-size: clamp(1.3rem, 1.8vw, 1.7rem);
	line-height: 1;
	text-transform: uppercase;
}

.subjects__count {
	font-size: var(--t-small);
	color: var(--bone-3);
}

.subjects__go {
	position: absolute;
	right: 14px;
	top: 12px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--black);
	color: var(--gold);
	opacity: 0;
	transform: translate(4px, -4px);
	transition: opacity var(--mid) ease, transform var(--mid) var(--ease);
}

.subjects__card:hover .subjects__go,
.subjects__card:focus-visible .subjects__go {
	opacity: 1;
	transform: none;
}

.places {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.places__card {
	display: grid;
	gap: 8px;
	padding: clamp(18px, 2vw, 26px);
	border: 1px solid var(--line);
	text-decoration: none;
	transition: border-color var(--mid) ease, background-color var(--mid) ease;
}

.places__card:hover,
.places__card:focus-visible {
	border-color: var(--gold);
	background: var(--ink);
}

.places__icon {
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
	color: var(--gold);
}

.places__icon .icon {
	width: 100%;
	height: 100%;
	transition: transform var(--mid) var(--ease);
}

.places__card:hover .places__icon .icon {
	transform: rotate(-8deg) scale(1.08);
}

.places__name {
	font-family: var(--display);
	font-stretch: 68%;
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	text-transform: uppercase;
}

.places__host {
	font-size: var(--t-small);
	color: var(--bone-3);
}

@media (max-width: 900px) {
	.subjects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about__plate {
		position: relative;
		grid-column: 1 / span 7;
	}

	.about__mark {
		--ring: 52px;
		right: -6px;
		top: -10px;
	}

	.about__text {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.about__plate {
		grid-column: 1 / -1;
	}

	.subjects {
		grid-template-columns: 1fr;
	}

	.page-head--about::before {
		background: linear-gradient(to top, var(--black) 0, color-mix(in srgb, var(--black) 40%, transparent) 60%, transparent);
	}
}

.prose-photo {
	margin: 0 0 clamp(18px, 2vw, 28px);
	max-width: 300px;
}

.prose-photo .frame {
	display: block;
	border: 1px solid var(--line);
	background: var(--ink);
	box-shadow: 0 24px 44px -28px rgb(0 0 0 / .6);
}

.prose-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.prose-photo figcaption {
	margin-top: 8px;
	font-family: var(--sans);
	font-size: var(--t-small);
	line-height: 1.35;
	color: var(--bone-3);
}

@media (min-width: 760px) {
	.prose-photo {
		float: right;
		width: 300px;
		margin: 6px 0 clamp(16px, 1.8vw, 24px) clamp(22px, 2.6vw, 40px);
		shape-outside: margin-box;
	}

	.prose-photo--left {
		float: left;
		margin-inline: 0 clamp(22px, 2.6vw, 40px);
	}
}

@media (max-width: 759px) {
	.prose-photo {
		max-width: none;
		margin-inline: auto;
	}
}