/* About page editorial layout. */

body.ag-about-template {
	background:
		linear-gradient(180deg, #c9dde2 0%, #111b22 25rem, var(--ag-bg-deep) 52%, var(--ag-bg) 100%);
	color: var(--ag-text);
	font-family: var(--ag-font);
}

.ag-about-template .ag-site-header {
	background:
		linear-gradient(180deg, rgba(20, 31, 39, 0.68) 0%, rgba(9, 15, 20, 0.46) 64%, rgba(255, 255, 255, 0.045) 100%),
		rgba(8, 13, 18, 0.44);
	border-bottom-color: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(34px) saturate(1.45);
}

.ag-about-template .ag-site-header::after {
	background: linear-gradient(180deg, rgba(216, 191, 90, 0), rgba(216, 191, 90, 0.025));
}

.ag-about-template .ag-wordmark,
.ag-about-template .ag-desktop-nav a {
	color: var(--ag-text);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.ag-about-main {
	min-height: 70vh;
	padding-top: 0;
}

.ag-about-content {
	overflow: hidden;
}

.ag-about-content > * {
	margin-block-start: 0;
}

.ag-about-content p {
	color: rgba(245, 244, 239, 0.88);
	font-size: clamp(1rem, 2.8vw, 1.08rem);
	line-height: 1.78;
}

.ag-about-content a {
	color: var(--ag-gold);
	text-decoration: none;
}

.ag-about-content a:hover {
	color: var(--ag-gold-soft);
}

.ag-about-section,
.ag-about-recognition,
.ag-about-cta {
	width: var(--ag-shell);
	margin-inline: auto;
}

.ag-about-hero-block {
	position: relative;
	display: grid;
	overflow: hidden;
	width: 100%;
	margin-inline: auto;
	gap: 0;
	padding: 0;
	align-items: center;
	background:
		linear-gradient(90deg, #c7dce1 0%, #d7e7ea 42%, #cadfe4 100%);
	color: var(--ag-dark-text);
	border-bottom: 1px solid rgba(16, 24, 32, 0.14);
	isolation: isolate;
}

.ag-about-hero-block::before,
.ag-about-hero-block::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ag-about-hero-block::before {
	inset: -24px;
	z-index: 0;
	background: url("../img/about/andrew-grojean-berlin.jpg") center center / cover no-repeat;
	filter: blur(14px) saturate(1.16) contrast(1.06) brightness(1);
	opacity: 1;
	transform: scale(1.04);
}

.ag-about-hero-block::after {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(229, 241, 244, 0.28) 0%, rgba(221, 237, 240, 0.24) 58%, rgba(202, 224, 229, 0.14) 78%, rgba(190, 214, 221, 0.06) 100%),
		linear-gradient(90deg, rgba(248, 251, 251, 0.04), rgba(128, 165, 175, 0.02));
}

.ag-about-kicker,
.ag-about-section-label {
	margin: 0 0 16px;
	color: var(--ag-gold);
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ag-about-hero-copy h1 {
	max-width: 840px;
	margin: 0;
	color: var(--ag-dark-text);
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	font-weight: 860;
	letter-spacing: 0;
	line-height: 1.02;
	text-shadow: 0 1px 18px rgba(255, 255, 255, 0.34);
}

.ag-about-hero-copy h1 span {
	white-space: nowrap;
}

.ag-about-hero-copy {
	position: relative;
	z-index: 2;
	width: var(--ag-shell);
	margin-inline: auto;
	padding-block: 110px 36px;
}

.ag-about-content .ag-about-lede {
	max-width: 700px;
	margin: 20px 0 0;
	color: #25303a;
	font-size: clamp(1.08rem, 3.6vw, 1.28rem);
	line-height: 1.65;
	text-shadow: 0 1px 18px rgba(255, 255, 255, 0.42);
}

.ag-about-hero-media {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: end;
	justify-items: center;
	height: 230px;
	padding-top: 0;
	box-sizing: border-box;
	background: transparent;
}

.ag-about-hero-image,
.ag-about-section-image,
.ag-about-photo-grid figure {
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	background: var(--ag-surface);
}

.ag-about-hero-image img,
.ag-about-section-image img,
.ag-about-photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.98) contrast(1.02) brightness(0.96);
}

.ag-about-hero-image {
	aspect-ratio: auto;
	min-width: 0;
}

.ag-about-hero-photo {
	width: 100%;
	height: 100%;
	max-height: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	line-height: 0;
}

.ag-about-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-position: center 45%;
	object-fit: cover;
	filter: saturate(1) contrast(1.01) brightness(1);
}

.ag-about-recognition-wrap {
	padding-block: 66px 70px;
	background:
		radial-gradient(circle at 50% 0%, rgba(143, 164, 174, 0.2), transparent 28rem),
		linear-gradient(180deg, rgba(36, 52, 62, 0.96), rgba(18, 28, 35, 0.98));
	border-block: 1px solid var(--ag-border);
}

.ag-about-recognition {
	display: grid;
	gap: 28px;
	text-align: center;
}

.ag-about-recognition h2 {
	margin: 0;
	color: var(--ag-gold);
	font-size: clamp(1.05rem, 2.5vw, 1.3rem);
	font-weight: 850;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ag-about-recognition-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ag-about-recognition-list li {
	position: relative;
	overflow: hidden;
	padding: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--ag-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.18);
	color: rgba(245, 244, 239, 0.86);
	font-size: 0.98rem;
	line-height: 1.58;
}

.ag-about-recognition-list strong {
	display: block;
	margin-bottom: 8px;
	color: var(--ag-text);
	font-size: 1.08rem;
	font-weight: 820;
}

.ag-about-recognition-link {
	justify-content: center;
	margin-top: 2px;
}

.ag-about-section-wrap {
	border-bottom: 1px solid var(--ag-border);
}

.ag-about-section {
	display: grid;
	gap: 30px;
	padding-block: 44px;
	align-items: center;
}

.ag-about-section-copy h2 {
	margin: 0 0 20px;
	color: var(--ag-text);
	font-size: clamp(2rem, 8vw, 3.25rem);
	font-weight: 850;
	letter-spacing: 0;
	line-height: 1.04;
}

.ag-about-section-copy p {
	max-width: 680px;
	margin: 0 0 18px;
}

.ag-about-section-copy p:last-child {
	margin-bottom: 0;
}

.ag-about-section-image {
	aspect-ratio: 3 / 2;
}

.ag-about-section-image.is-square {
	aspect-ratio: 1;
}

.ag-about-section-image.is-art-market {
	aspect-ratio: 4 / 3;
}

.ag-about-section-image.is-art-market img {
	object-position: center;
}

.ag-about-section-image.is-portrait {
	aspect-ratio: 4 / 5;
}

.ag-about-section-image figcaption,
.ag-about-image-stack figcaption {
	padding: 10px 12px;
	color: var(--ag-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.ag-about-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.ag-about-photo-grid .ag-about-personal-image {
	aspect-ratio: 1;
}

.ag-about-photo-grid .ag-about-chess-image {
	aspect-ratio: 1;
}

.ag-about-chess-image img {
	object-position: center top;
}

.ag-about-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.ag-about-link-row .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 48px;
	padding: 13px 22px;
	background: rgba(8, 13, 17, 0.35) !important;
	border: 1px solid rgba(216, 191, 90, 0.78) !important;
	border-radius: 4px;
	color: var(--ag-text) !important;
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.14em;
	line-height: 1;
	isolation: isolate;
	text-transform: uppercase;
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ag-about-link-row .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -120%;
	width: 120%;
	z-index: 0;
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.24) 42%, transparent 68%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease, left 420ms ease;
}

.ag-about-link-row .is-style-outline .wp-block-button__link {
	background: rgba(8, 13, 17, 0.35) !important;
	border-color: rgba(216, 191, 90, 0.78) !important;
	color: var(--ag-text) !important;
}

.ag-about-link-row .wp-block-button__link:hover {
	background: rgba(216, 191, 90, 0.12) !important;
	border-color: rgba(216, 191, 90, 0.95) !important;
	color: var(--ag-text) !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}

.ag-about-link-row .wp-block-button__link:hover::before {
	opacity: 1;
	left: 120%;
}

.ag-about-link-row .is-style-outline .wp-block-button__link:hover {
	background: rgba(216, 191, 90, 0.12) !important;
	border-color: rgba(216, 191, 90, 0.95) !important;
	color: var(--ag-text) !important;
}

.ag-about-template .ag-footer-about .ag-text-link {
	display: none;
}

.ag-about-cta-wrap {
	padding-block: 58px 64px;
	background:
		radial-gradient(circle at 78% 34%, rgba(216, 191, 90, 0.08), transparent 20rem),
		linear-gradient(135deg, #0b1116 0%, #121c23 54%, #090e13 100%);
}

.ag-about-cta {
	display: grid;
	gap: 24px;
	align-items: center;
}

.ag-about-cta h2 {
	max-width: 720px;
	margin: 0;
	color: var(--ag-text);
	font-size: clamp(2rem, 9vw, 3.4rem);
	font-weight: 850;
	letter-spacing: 0;
	line-height: 1.04;
}

.ag-about-cta p {
	max-width: 680px;
	margin: 18px 0 0;
	line-height: 1.78;
}

@media (max-width: 767px) {
	.ag-about-hero-copy {
		padding-block: 102px 18px;
	}

	.ag-about-hero-media {
		height: 220px;
	}

	.ag-about-section {
		gap: 22px;
		padding-block: 36px;
	}

	.ag-about-recognition-wrap {
		padding-block: 42px 44px;
	}

	.ag-about-recognition {
		gap: 20px;
	}

	.ag-about-recognition-list {
		gap: 12px;
	}

	.ag-about-section-alt .ag-about-link-row,
	.ag-about-section-alt .wp-block-button,
	.ag-about-section-alt .wp-block-button__link {
		width: 100%;
	}

	.ag-about-section-alt .ag-about-link-row {
		justify-content: center;
	}

	.ag-about-recognition-link,
	.ag-about-recognition-link .wp-block-button,
	.ag-about-recognition-link .wp-block-button__link {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.ag-about-main {
		padding-top: 0;
	}

	.ag-about-hero-block {
		grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.86fr);
		gap: clamp(24px, 4vw, 56px);
		padding-inline: max(40px, calc((100vw - 1280px) / 2));
		justify-content: center;
	}

	.ag-about-hero-copy {
		width: auto;
		max-width: 760px;
		margin: 0;
		padding-block: 132px 58px;
	}

	.ag-about-hero-media {
		align-self: stretch;
		justify-items: end;
		height: auto;
		min-height: 560px;
		padding-top: 78px;
	}

	.ag-about-hero-photo {
		width: 100%;
		align-self: end;
	}

	.ag-about-recognition {
		gap: 24px;
	}

	.ag-about-recognition-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ag-about-recognition-link {
		margin-top: 0;
	}

	.ag-about-section {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
		gap: 54px;
		padding-block: 60px;
	}

	.ag-about-section-alt .ag-about-section {
		grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1fr);
	}

	.ag-about-section-alt .ag-about-section-copy {
		order: 2;
	}

	.ag-about-section-alt .ag-about-section-media {
		order: 1;
	}

	.ag-about-photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.ag-about-photo-grid .ag-about-personal-image {
		aspect-ratio: 4 / 5;
	}

	.ag-about-photo-grid .ag-about-chess-image {
		aspect-ratio: 1165 / 1354;
	}

	.ag-about-beyond-section {
		grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1fr);
		align-items: center;
	}

	.ag-about-beyond-section .ag-about-section-copy {
		max-width: 680px;
	}

	.ag-about-beyond-section .ag-about-section-media {
		width: 100%;
	}

	.ag-about-cta {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ag-about-cta .ag-about-link-row {
		justify-content: flex-end;
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.ag-about-hero-block {
		min-height: 0;
	}

	.ag-about-section {
		padding-block: 66px;
	}
}