/**
 * Blog + About — square grid background pages.
 */

html.iac-chrome-active:has(body.iac-chrome-blog),
html.iac-chrome-active body.iac-chrome-blog,
html.iac-chrome-active:has(body.iac-chrome-about),
html.iac-chrome-active body.iac-chrome-about {
	background-color: #020706 !important;
	background-image: none !important;
}

html.iac-chrome-active body.iac-chrome-blog #iac-root,
html.iac-chrome-active body.iac-chrome-about #iac-root,
body.iac-chrome-blog #iac-content,
body.iac-chrome-about #iac-content,
body.iac-chrome-blog .site-main,
body.iac-chrome-about .site-main,
body.iac-chrome-blog .page-content,
body.iac-chrome-about .page-content,
body.iac-chrome-blog .entry-content,
body.iac-chrome-about .entry-content,
body.iac-chrome-blog .iac-blog-page,
body.iac-chrome-about .iac-about-page,
body.iac-chrome-blog .iac-blog-page > .min-h-screen,
body.iac-chrome-about .iac-about-page > main,
body.iac-chrome-blog .iac-blog-post,
body.iac-chrome-blog .iac-blog-post > div[class*="from-background"],
body.iac-chrome-about [class*="bg-linear-to-b"][class*="from-background"],
body.iac-chrome-blog [class*="bg-linear-to-b"][class*="from-background"] {
	background: transparent !important;
	background-image: none !important;
}

body.iac-chrome-blog .iac-grid-bg,
body.iac-chrome-about .iac-grid-bg {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	overflow: hidden;
	background: #020706;
}

body.iac-chrome-blog .iac-grid-bg::before,
body.iac-chrome-about .iac-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/frame-square-bg0520.png");
	background-repeat: repeat;
	background-size: 944px 882px;
	background-attachment: fixed;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

body.iac-chrome-blog .iac-grid-bg::after,
body.iac-chrome-about .iac-grid-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at center, rgba(0, 255, 150, 0.08), transparent 45%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.85));
	pointer-events: none;
	z-index: 1;
}

body.iac-chrome-blog #iac-content,
body.iac-chrome-about #iac-content {
	position: relative;
	z-index: 1;
	padding-top: var(
		--header-frame-height,
		calc(var(--frame-inset, 3px) + max(10vw, 200px) * 52 / 324)
	) !important;
}

body.iac-chrome-blog #iac-root > header,
body.iac-chrome-about #iac-root > header {
	position: fixed !important;
	top: var(--frame-inset, 3px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--z-header, 120) !important;
}

body.iac-chrome-blog #iac-content > h1,
body.iac-chrome-blog #iac-content > .page-header,
body.iac-chrome-blog #iac-content > header.entry-header,
body.iac-chrome-blog #iac-content .entry-header:not(.iac-blog-page header):not(.iac-blog-post header),
body.iac-chrome-about #iac-content > h1,
body.iac-chrome-about #iac-content > .page-header,
body.iac-chrome-about #iac-content > header.entry-header {
	display: none !important;
}

.iac-blog-post .iac-article-footer {
	margin-top: 3.5rem;
}

@media (min-width: 768px) {
	.iac-blog-post .iac-article-footer {
		margin-top: 5rem;
	}
}

.iac-blog-page .iac-blog-grid {
	display: none;
}

@media (min-width: 768px) {
	.iac-blog-page .iac-blog-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 1.5rem;
		align-items: start !important;
		width: 100%;
	}

	.iac-blog-page .iac-blog-grid > .iac-blog-card-yc,
	.iac-blog-page .iac-blog-grid > .iac-blog-card-manifesto {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		min-width: 0;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		align-self: start !important;
		justify-self: stretch !important;
		height: auto !important;
		position: relative !important;
		text-decoration: none;
	}

	.iac-blog-page .iac-blog-mobile {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	.iac-blog-page .iac-blog-grid {
		display: none !important;
	}
}

.iac-blog-page .iac-blog-grid > * > .relative.border {
	flex-shrink: 0;
	width: 100%;
}

.iac-blog-page .iac-blog-grid .relative.aspect-\[4\/2\.8\] {
	width: 100%;
	flex-shrink: 0;
}

.iac-blog-page .iac-blog-grid > .iac-blog-card-yc > h3,
.iac-blog-page .iac-blog-grid > .iac-blog-card-manifesto > h3,
.iac-blog-page .iac-blog-grid > .iac-blog-card-yc > p,
.iac-blog-page .iac-blog-grid > .iac-blog-card-manifesto > p {
	margin: 0;
}

.iac-blog-page .iac-blog-grid > .iac-blog-card-yc > .group\/cta,
.iac-blog-page .iac-blog-grid > .iac-blog-card-manifesto > .group\/cta {
	margin-top: 0 !important;
	align-self: flex-start;
}