:root{
	--about-bg:#f5f5f2;
	--about-surface:#fcfcf9;
	--about-text:#151515;
	--about-muted:#656565;
	--about-line:rgba(21,21,21,.12);
	--about-line-strong:rgba(21,21,21,.2);
	--about-accent:#151515;
	--about-accent-soft:#e4e4e1;
	--about-font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--about-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,
body{
	margin:0;
	padding:0;
	background:
		radial-gradient(circle at top left, rgba(255,255,255,.86), transparent 22%),
		linear-gradient(180deg, #f8f8f6 0%, #f0f0ec 100%);
	color:var(--about-text);
	font-family:var(--about-font-serif);
}

body{
	min-height:100vh;
}

.about-shell,
.about-wrap{
	min-height:100vh;
}

.about-wrap{
	padding:0 3.25rem 4rem;
	background:rgba(252,252,249,.88);
}

.about-main{
	max-width:1280px;
	margin:0 auto;
	padding-top:1rem;
}

.about-kicker{
	display:inline-block;
	font-family:var(--about-font-mono);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#7a7a7a;
}

.about-hero{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(420px, .95fr);
	gap:3rem;
	align-items:center;
	padding:2.5rem 0 3rem;
}

.about-hero-copy{
	max-width:42rem;
}

.about-hero h1{
	margin:1rem 0 0;
	font-family:var(--about-font-serif);
	font-size:clamp(4rem, 7vw, 6.5rem);
	font-weight:600;
	line-height:.9;
	letter-spacing:-.08em;
	max-width:8ch;
}

.about-hero p{
	max-width:34rem;
	margin:1.5rem 0 0;
	font-size:1.08rem;
	line-height:1.85;
	color:var(--about-muted);
}

.about-hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin-top:2rem;
}

.about-primary-link,
.about-secondary-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:1rem 1.55rem;
	border-radius:999px;
	text-decoration:none;
	font-family:var(--about-font-mono);
	font-size:.92rem;
	font-weight:700;
	transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.about-primary-link{
	background:#151515;
	color:#ffffff;
}

.about-secondary-link{
	background:transparent;
	border:1px solid var(--about-line-strong);
	color:var(--about-text);
}

.about-primary-link:hover,
.about-secondary-link:hover{
	transform:translateY(-2px);
}

.about-hero-art{
	position:relative;
	min-height:520px;
	pointer-events:none;
}

.about-hero-brush{
	position:absolute;
	inset:auto 3rem 2.5rem 5rem;
	height:180px;
	background:
		linear-gradient(180deg, rgba(21,21,21,.05), rgba(21,21,21,.05)),
		linear-gradient(90deg, rgba(230,230,228,.9), rgba(240,240,238,.55));
	border-radius:120px;
	transform:rotate(-8deg);
}

.about-hero-frame{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1rem;
	pointer-events:none;
}

.about-hero-frame img{
	width:100%;
	max-width:560px;
	height:auto;
	max-height:480px;
	object-fit:cover;
	border-radius:2rem;
	box-shadow:0 18px 48px rgba(21,21,21,.08);
}

.about-strip{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:1.5rem;
	padding:1.5rem 0;
	border-top:1px solid var(--about-line);
	border-bottom:1px solid var(--about-line);
}

.about-strip-item span{
	display:block;
	font-family:var(--about-font-mono);
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#7f7f7f;
}

.about-strip-item strong{
	display:block;
	margin-top:.7rem;
	font-family:var(--about-font-mono);
	font-size:1.05rem;
	font-weight:600;
	line-height:1.55;
}

.about-intro{
	position:relative;
	max-width:900px;
	margin:0 auto;
	padding:5rem 0 3rem;
	text-align:center;
	isolation:isolate;
}

.about-storyflow{
	position:relative;
	margin-top:1rem;
	padding:0 0 2rem;
	isolation:isolate;
}

.about-storyflow-bg{
	position:absolute;
	inset:0 0 0 0;
	z-index:-2;
	pointer-events:none;
}

.about-storyflow-bg::before,
.about-storyflow-bg::after{
	content:"";
	position:absolute;
	pointer-events:none;
}

.about-storyflow-bg::before{
	left:50%;
	top:2.5rem;
	width:720px;
	height:calc(100% - 3rem);
	border-radius:48% 52% 42% 58% / 14% 18% 22% 18%;
	background:
		radial-gradient(circle at 50% 12%, rgba(255,255,255,.9), rgba(255,255,255,0) 24%),
		linear-gradient(180deg, rgba(234,234,230,.72), rgba(220,220,216,.28) 40%, rgba(245,245,243,0) 100%);
	box-shadow:
		0 40px 80px rgba(21,21,21,.05),
		inset 1px 1px 0 rgba(255,255,255,.85),
		inset -14px -18px 40px rgba(21,21,21,.05);
	transform:translateX(-50%);
	filter:blur(.2px);
}

.about-storyflow-bg::after{
	left:50%;
	top:12rem;
	width:420px;
	height:calc(100% - 11rem);
	border-radius:50%;
	background:radial-gradient(circle, rgba(230,230,227,.48) 0%, rgba(230,230,227,0) 70%);
	transform:translateX(-50%);
	z-index:-1;
}

.about-intro::before,
.about-intro::after{
	content:"";
	position:absolute;
	z-index:-1;
	pointer-events:none;
}

.about-intro::before{
	width:260px;
	height:260px;
	left:-5rem;
	top:1.25rem;
	border-radius:34% 66% 61% 39% / 42% 44% 56% 58%;
	background:
		linear-gradient(145deg, rgba(255,255,255,.95), rgba(224,224,221,.9));
	box-shadow:
		-22px 22px 48px rgba(21,21,21,.08),
		inset 1px 1px 0 rgba(255,255,255,.92),
		inset -10px -12px 22px rgba(21,21,21,.08);
	transform:rotate(-14deg);
	filter:blur(.2px);
}

.about-intro::after{
	width:190px;
	height:190px;
	right:-2.5rem;
	bottom:-1rem;
	border-radius:32px;
	background:
		linear-gradient(155deg, rgba(245,245,242,.95), rgba(214,214,210,.88));
	box-shadow:
		18px 24px 50px rgba(21,21,21,.08),
		inset 1px 1px 0 rgba(255,255,255,.9),
		inset -8px -10px 18px rgba(21,21,21,.08);
	transform:rotate(18deg);
}

.about-intro h2,
.about-closing h2{
	margin:1rem 0 0;
	font-family:var(--about-font-serif);
	font-size:clamp(2.4rem, 4.6vw, 4.3rem);
	font-weight:600;
	line-height:.96;
	letter-spacing:-.07em;
}

.about-timeline{
	position:relative;
	padding:2rem 0 1rem;
}

.about-timeline::before{
	content:"";
	position:absolute;
	left:50%;
	top:4rem;
	width:420px;
	height:420px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(229,229,226,.6) 0%, rgba(229,229,226,0) 68%);
	transform:translateX(-50%);
	pointer-events:none;
}

.about-timeline-line{
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width:2px;
	background:linear-gradient(180deg, rgba(21,21,21,.12), rgba(21,21,21,.26), rgba(21,21,21,.1));
	transform:translateX(-50%);
}

.about-point{
	position:relative;
	display:grid;
	grid-template-columns:1fr 56px 1fr;
	gap:1.5rem;
	align-items:start;
	margin:0;
	padding:2rem 0;
}

.about-point-left .about-point-label,
.about-point-left .about-point-body{
	grid-column:1;
	text-align:right;
	justify-self:end;
}

.about-point-left .about-point-dot{
	grid-column:2;
}

.about-point-right .about-point-label,
.about-point-right .about-point-body{
	grid-column:3;
	text-align:left;
	justify-self:start;
}

.about-point-right .about-point-dot{
	grid-column:2;
}

.about-point-label{
	align-self:end;
	margin-bottom:.5rem;
	font-family:var(--about-font-mono);
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#8b8b8b;
}

.about-point-dot{
	position:relative;
	z-index:1;
	width:24px;
	height:24px;
	margin:0 auto;
	border-radius:50%;
	background:#ffffff;
	border:3px solid #151515;
}

.about-point-dot.is-filled{
	background:#151515;
	border-color:#151515;
}

.about-point-dot.is-soft{
	border-color:#8d8d8d;
}

.about-point-body{
	max-width:360px;
}

.about-point-body h3{
	margin:0;
	font-family:var(--about-font-serif);
	font-size:2rem;
	font-weight:600;
	line-height:1.02;
	letter-spacing:-.05em;
}

.about-point-body p{
	margin:1rem 0 0;
	font-size:1rem;
	line-height:1.82;
	color:var(--about-muted);
}

.about-inline-link{
	display:inline-flex;
	margin-top:1rem;
	font-family:var(--about-font-mono);
	font-size:.82rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--about-accent);
	text-decoration:none;
}

.about-inline-link:hover{
	text-decoration:underline;
}

.about-closing{
	max-width:880px;
	margin:0 auto;
	padding:5rem 0 0;
	text-align:center;
}

.about-closing .about-primary-link{
	margin-top:2rem;
}

.about-reveal{
	opacity:0;
	transform:translateY(42px);
	transition:
		opacity .8s cubic-bezier(.22,1,.36,1),
		transform .8s cubic-bezier(.22,1,.36,1);
}

.about-reveal[data-reveal="left"]{
	transform:translateX(42px);
}

.about-reveal.is-visible{
	opacity:1;
	transform:none;
}

.about-footer{
	margin-top:1rem;
	padding:1.4rem 0 2rem;
	border-top:1px solid rgba(16,16,16,.08);
}

.about-footer .site-footer__inner{
	color:var(--about-muted);
}

.about-footer .site-footer__inner strong{
	color:var(--about-text);
}

@media (prefers-reduced-motion: reduce){
	.about-reveal,
	.about-primary-link,
	.about-secondary-link{
		transition:none;
	}

	.about-reveal{
		opacity:1;
		transform:none;
	}
}

@media (max-width:1199px){
	.about-wrap{
		padding:0 1.5rem 3rem;
	}

	.about-hero{
		grid-template-columns:1fr;
	}

	.about-hero-art{
		min-height:420px;
	}

	.about-strip{
		grid-template-columns:1fr 1fr;
	}
}

@media (max-width:767px){
	.about-wrap{
		padding:0 1.2rem 2.75rem;
	}

	.about-main{
		padding-top:.8rem;
	}

	.about-hero{
		gap:2rem;
		padding:1.75rem 0 2.5rem;
	}

	.about-hero h1{
		font-size:clamp(3rem, 15vw, 4.6rem);
	}

	.about-hero-art{
		min-height:280px;
	}

	.about-strip{
		grid-template-columns:1fr;
		gap:1rem;
	}

	.about-intro{
		padding:4rem 0 2.5rem;
	}

	.about-storyflow{
		padding-bottom:1rem;
	}

	.about-storyflow-bg::before{
		width:280px;
		height:calc(100% - 5rem);
		top:4rem;
		border-radius:50px;
	}

	.about-storyflow-bg::after{
		width:180px;
		height:calc(100% - 9rem);
		top:7rem;
	}

	.about-intro::before{
		width:150px;
		height:150px;
		left:-1rem;
		top:1.5rem;
	}

	.about-intro::after{
		width:110px;
		height:110px;
		right:-.5rem;
		bottom:.25rem;
		border-radius:22px;
	}

	.about-timeline{
		padding-top:1rem;
	}

	.about-timeline::before{
		width:220px;
		height:220px;
		top:3rem;
		left:2rem;
		transform:none;
	}

	.about-timeline-line{
		left:12px;
		transform:none;
	}

	.about-point{
		grid-template-columns:40px 1fr;
		gap:1rem;
		padding:1.5rem 0;
	}

	.about-point-left .about-point-label,
	.about-point-left .about-point-body,
	.about-point-right .about-point-label,
	.about-point-right .about-point-body{
		grid-column:2;
		text-align:left;
		justify-self:start;
	}

	.about-point-left .about-point-dot,
	.about-point-right .about-point-dot{
		grid-column:1;
	}

	.about-point-label{
		margin-bottom:.25rem;
	}

	.about-point-body{
		max-width:none;
	}

	.about-point-body h3{
		font-size:1.6rem;
	}

	.about-closing{
		padding-top:4rem;
	}
}