:root {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	color: #19251f;
	background: #e9f1ed;
	--hue: 165;
	--primary: #22b988;
	--page-bg: #e9f1ed;
	--card-bg: rgb(255 255 255 / 0.88);
	--card-bg-solid: #fff;
	--btn-bg: #e0f4ea;
	--btn-hover: #c0e9d6;
	--deep-text: #19251f;
	--muted-text: rgb(0 0 0 / 0.56);
	--faint-text: rgb(0 0 0 / 0.54);
	--line: rgb(0 0 0 / 0.08);
	--shadow: 0 8px 28px rgb(0 0 0 / 0.04);
	--radius: 1rem;
	--page-width: 72rem;
	--navbar-height: 4.5rem;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--hero-desktop-image: url("https://blog.fjayson.com/images/DesktopWallpaper/d2.avif");
	--hero-mobile-image: url("https://blog.fjayson.com/images/MobileWallpaper/m2.avif");
}

:root.dark {
	color: rgb(255 255 255 / 0.88);
	background: #080f0c;
	--page-bg: #080f0c;
	--card-bg: rgb(35 39 39 / 0.92);
	--card-bg-solid: #161f1b;
	--btn-bg: #243b31;
	--btn-hover: #2d493d;
	--deep-text: rgb(255 255 255 / 0.92);
	--muted-text: rgb(255 255 255 / 0.62);
	--faint-text: rgb(255 255 255 / 0.58);
	--line: rgb(255 255 255 / 0.1);
	--shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}

@supports (color: oklch(0% 0 0)) {
	:root {
		color: oklch(0.25 0.02 var(--hue));
		background: oklch(0.95 0.01 var(--hue));
		--primary: oklch(0.7 0.14 var(--hue));
		--page-bg: oklch(0.95 0.01 var(--hue));
		--btn-bg: oklch(0.95 0.025 var(--hue));
		--btn-hover: oklch(0.9 0.05 var(--hue));
		--deep-text: oklch(0.25 0.02 var(--hue));
	}
	:root.dark {
		background: oklch(0.16 0.014 var(--hue));
		--page-bg: oklch(0.16 0.014 var(--hue));
		--card-bg-solid: oklch(0.23 0.015 var(--hue));
		--btn-bg: oklch(0.33 0.035 var(--hue));
		--btn-hover: oklch(0.38 0.04 var(--hue));
	}
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
	min-width: 320px;
	margin: 0;
	background: var(--page-bg);
	color: var(--deep-text);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
body, button, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; color: inherit; background: transparent; }
img { display: block; max-width: 100%; }

.site-shell { min-height: 100vh; overflow-x: clip; }
.top-row {
	position: relative;
	z-index: 80;
	height: var(--navbar-height);
	width: min(92vw, var(--page-width));
	margin: 0 auto;
}
.navbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: calc(100% - 2rem);
	height: var(--navbar-height);
	margin: 0 1rem;
	padding: .45rem .6rem .45rem 1rem;
	border: 1px solid rgb(255 255 255 / .24);
	border-top: 0;
	border-radius: 0 0 .75rem .75rem;
	background: color-mix(in srgb, var(--card-bg) 62%, transparent);
	box-shadow: var(--shadow);
	backdrop-filter: blur(5px);
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: .58rem;
	min-width: 7.9rem;
	height: 3.25rem;
	padding: 0 .75rem;
	font-weight: 750;
	letter-spacing: .01em;
}
.brand img { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.icon-button {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .65rem;
	color: var(--muted-text);
	transition: background .16s, color .16s, transform .16s;
}
.icon-button:hover { background: var(--btn-bg); color: var(--primary); }
.icon-button:active { transform: scale(.94); }
.icon-button .moon { display: none; }
:root.dark .icon-button .sun { display: none; }
:root.dark .icon-button .moon { display: block; }

.hero {
	position: relative;
	height: min(48vh, 32rem);
	min-height: 22rem;
	margin-top: calc(var(--navbar-height) * -1);
	overflow: hidden;
	background: #152320;
}
.hero-image {
	position: absolute;
	inset: 0;
	background-image: var(--hero-desktop-image);
	background-position: center 35%;
	background-size: cover;
	background-repeat: no-repeat;
}
.hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / .18), rgb(0 0 0 / .25) 48%, color-mix(in srgb, var(--page-bg) 100%, transparent) 100%);
}
.hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-content: center;
	padding: 4rem 1rem 3rem;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 16px rgb(0 0 0 / .48);
}
.hero-content h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.12;
	font-weight: 680;
}
.hero-content p {
	margin: .75rem 0 0;
	font-size: clamp(1rem, 2vw, 1.24rem);
	color: rgb(255 255 255 / .88);
}
.hero-waves {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 3;
	height: 15vh;
	min-height: 3rem;
	color: var(--page-bg);
}
.hero-waves svg { display: block; width: 100%; height: 100%; }
.hero-waves path { fill: currentColor; opacity: .35; }
.hero-waves path + path { opacity: .52; transform: translateY(3px); }
.hero-waves path + path + path { opacity: .82; transform: translateY(6px); }

.page {
	position: relative;
	z-index: 30;
	width: min(92vw, var(--page-width));
	margin: -3.5rem auto 0;
	padding: 0 1rem 2rem;
}
.panel {
	padding: 1.5rem 1.65rem 1.8rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--card-bg);
	box-shadow: var(--shadow);
}
.page-lead {
	margin: 0 0 1.15rem;
	color: var(--muted-text);
	line-height: 1.7;
}
.group + .group { margin-top: 1.45rem; }
.group h2 {
	margin: 0 0 .35rem;
	color: var(--primary);
	font-size: .98rem;
}
.group p {
	margin: 0 0 .7rem;
	color: var(--faint-text);
	font-size: .76rem;
}
.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
}
.card {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	min-width: 0;
	padding: .9rem;
	border: 1px solid var(--line);
	border-radius: .8rem;
	color: var(--muted-text);
	transition: border-color .16s, background .16s, transform .16s;
}
.card:hover {
	border-color: color-mix(in srgb, var(--primary) 42%, transparent);
	background: var(--btn-bg);
	transform: translateY(-2px);
}
.card-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: .65rem;
	background: var(--primary);
	color: #fff;
}
.card-icon svg { width: 1.15rem; height: 1.15rem; }
.card div { flex: 1; min-width: 0; }
.card strong {
	display: block;
	color: var(--deep-text);
	font-size: .95rem;
}
.card small {
	display: block;
	margin-top: .22rem;
	overflow: hidden;
	color: var(--faint-text);
	font-size: .72rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.card em {
	display: block;
	margin-top: .18rem;
	color: var(--muted-text);
	font-size: .69rem;
	font-style: normal;
}
.card svg.arrow {
	flex: 0 0 auto;
	margin-top: .35rem;
	color: var(--faint-text);
}
.lock {
	display: inline-flex;
	align-items: center;
	gap: .22rem;
	margin-top: .28rem;
	color: var(--primary);
	font-size: .68rem;
	font-weight: 700;
}

.site-footer {
	position: relative;
	z-index: 30;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .85rem 1.5rem;
	width: min(92vw, var(--page-width));
	margin: 0 auto;
	padding: 1rem 0 2rem;
	color: var(--faint-text);
	font-size: .72rem;
}

@media (max-width: 767px) {
	.top-row { width: 100%; padding: 0 .65rem; }
	.navbar { margin: 0; padding-left: .7rem; }
	.brand span { font-size: .94rem; }
	.hero { height: 31vh; min-height: 15rem; }
	.hero-image { background-image: var(--hero-mobile-image); }
	.hero-content { padding-top: 4rem; }
	.hero-content h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
	.hero-content p { font-size: .95rem; }
	.hero-waves { height: 20%; }
	.page { width: 100%; margin-top: -2.2rem; padding: 0 .65rem 1.5rem; }
	.panel { padding: 1.1rem .95rem 1.35rem; }
	.cards { grid-template-columns: 1fr; }
	.site-footer { justify-content: flex-start; padding-left: .65rem; padding-right: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}