/* ==== HEADER ==== */
.tb {
	position:sticky;
	top:0;
	z-index:20;
	color:var(--color-text-inv);
	background:var(--color-stage);
	border-bottom:1px solid var(--color-stage-2);
}
.tb-in {
	display:flex;
	align-items:center;
	gap:var(--space-m);
	max-width:var(--width-page);
	height:72px;
	margin:0 auto;
	padding:0 var(--space-gutter);
}
.mk {
	display:inline-flex;
	align-items:center;
	gap:.6rem;
	min-height:44px;
	margin-right:auto;
	font-family:var(--font-head);
	font-size:1.45rem;
	font-weight:500;
	text-decoration:none;
}
.mk svg {
	width:30px;
	height:30px;
}
.nvl {
	display:flex;
	align-items:center;
	gap:.25rem;
}
.nvl a {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 .8rem;
	font-size:.95rem;
	text-decoration:none;
	color:var(--color-text-inv);
	transition:color .2s;
}
.nvl a:hover,
.nvl a[aria-current] {
	color:var(--color-plum-soft);
	text-decoration:underline;
	text-underline-offset:6px;
}
.tb-go {
	min-height:44px;
	padding:.5rem 1.1rem;
	font-size:.92rem;
}
.bgr {
	display:none;
	position:relative;
	width:48px;
	height:48px;
	padding:0;
	color:var(--color-text-inv);
	background:transparent;
	border:1.5px solid var(--color-muted);
	border-radius:var(--radius-soft);
}
.bgr span,
.bgr span::before,
.bgr span::after {
	position:absolute;
	left:12px;
	width:22px;
	height:2px;
	content:"";
	background:currentColor;
}
.bgr span {
	top:22px;
}
.bgr span::before {
	top:-7px;
	left:0;
}
.bgr span::after {
	top:7px;
	left:0;
}
/* ==== DRAWER ==== */
.drw {
	position:fixed;
	inset:0;
	z-index:50;
	display:flex;
	flex-direction:column;
	padding:var(--space-m) var(--space-gutter);
	color:var(--color-text-inv);
	background:var(--color-stage);
	visibility:hidden;
	transform:translateY(-12px);
	transition:transform .25s, visibility 0s .25s;
}
.drw.here {
	visibility:visible;
	transform:none;
	transition:transform .25s;
}
.drw-top {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:var(--space-l);
}
.drw-x {
	width:48px;
	height:48px;
	font-size:1.6rem;
	line-height:1;
	color:var(--color-text-inv);
	background:transparent;
	border:1.5px solid var(--color-muted);
	border-radius:var(--radius-soft);
}
.drw-ls a {
	display:flex;
	align-items:center;
	min-height:56px;
	font-family:var(--font-head);
	font-size:1.6rem;
	text-decoration:none;
	border-bottom:1px solid var(--color-stage-2);
}
.drw .bt {
	margin-top:var(--space-l);
}
html:not(.js) .drw {
	position:static;
	visibility:visible;
	transform:none;
}
html:not(.js) .drw-x {
	display:none;
}
@media (min-width:1021px) {
	html:not(.js) .drw {
		display:none;
	}
}
/* ==== BANDS ==== */
.bnd {
	position:relative;
	padding-top:var(--space-band);
	padding-bottom:var(--space-band);
}
.lt {
	color:var(--color-text);
	background:var(--color-light);
}
.dk {
	color:var(--color-text-inv);
	background:var(--grain-noise), var(--color-stage);
}
.cnt {
	max-width:var(--width-page);
	margin-left:auto;
	margin-right:auto;
	padding-left:var(--space-gutter);
	padding-right:var(--space-gutter);
}
.bnd-hd {
	max-width:760px;
	margin-bottom:var(--space-l);
}
.bnd-hd.mid {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
/* ==== HERO ==== */
.stg {
	position:relative;
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	min-height:min(58vh, 620px);
	isolation:isolate;
	color:var(--color-text-inv);
	background:var(--grain-noise), radial-gradient(ellipse 60% 70% at 22% 40%, var(--color-glow), var(--color-clear) 70%), radial-gradient(circle at 48% 90%, var(--color-glow-hot), var(--color-clear) 45%), var(--color-stage);
}
.stg-tx {
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:var(--space-l) var(--space-gutter);
	text-align:center;
}
.stg-tx h1 {
	max-width:15ch;
	font-size:clamp(2.6rem, 4.3vw, 4.4rem);
	line-height:1.02;
}
.stg-tx .ld {
	max-width:46ch;
	color:var(--color-text-inv);
}
.stg-tx .bt {
	margin-top:var(--space-l);
}
.stg-fx {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.5rem;
	margin-top:var(--space-m);
}
.stg-fx li {
	padding:.3rem .75rem;
	font-size:.85rem;
	color:var(--color-text-inv);
	background:var(--color-stage-2);
	border-radius:var(--radius-soft);
}
.stg-ph {
	position:relative;
	align-self:stretch;
	max-height:58vh;
	overflow:hidden;
}
.stg-ph img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% + 48px);
	object-fit:cover;
	will-change:transform;
}
.stg-ph::after,
.vgn::after {
	position:absolute;
	inset:0;
	content:"";
	background:radial-gradient(ellipse at center, var(--color-clear) 50%, var(--color-veil) 100%);
	pointer-events:none;
}
/* ==== PAGE HEAD ==== */
.phd {
	padding-top:var(--space-xl);
	padding-bottom:var(--space-xl);
}
.phd h1 {
	max-width:20ch;
	font-size:clamp(2.3rem, 4.4vw, 3.6rem);
	line-height:1.05;
}
.phd .ld {
	color:var(--color-text-inv);
}
.phd-fx {
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
	margin-top:var(--space-m);
}
.phd-fx li,
.phd-fx a {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:.3rem .9rem;
	font-size:.95rem;
	color:var(--color-text-inv);
	background:var(--color-stage-2);
	border-radius:var(--radius-soft);
}
/* ==== FOOTER ==== */
.ft {
	color:var(--color-text-inv);
	background:var(--color-stage);
	border-top:1px solid var(--color-stage-2);
}
.ft-row {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.25rem var(--space-m);
	max-width:var(--width-page);
	margin:0 auto;
	padding:var(--space-m) var(--space-gutter);
	font-size:.9rem;
}
.ft-row p {
	margin-right:auto;
	color:var(--color-muted);
}
.ft-row a {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	text-decoration:none;
}
.ft-row a:hover {
	text-decoration:underline;
}
/* ==== RESPONSIVE ==== */
@media (max-width:1020px) {
	.nvl,
	.tb-go {
		display:none;
	}
	.bgr {
		display:inline-block;
	}
}
@media (max-width:900px) {
	.stg {
		grid-template-columns:1fr;
	}
	.stg-tx {
		padding-top:var(--space-l);
		padding-bottom:var(--space-l);
	}
	.stg {
		min-height:0;
	}
	.stg-ph {
		width:100%;
		height:auto;
		max-height:56vh;
		aspect-ratio:5 / 4;
	}
	.stg-ph img {
		height:100%;
	}
}
@media (max-width:560px) {
	.tb-in {
		height:64px;
	}
	.phd {
		padding-top:var(--space-l);
		padding-bottom:var(--space-l);
	}
	.ft-row p {
		width:100%;
	}
}
