*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html:not(.is-loaded) body {
	opacity: 0;
	transform: translateY(8px);
}

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-primary);
	font-size: 17px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	transition: opacity 420ms ease, transform 420ms ease;
}

body::before {
	position: fixed;
	z-index: 390;
	top: 0;
	left: 0;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 185, 0, 0.14), transparent 66%);
	opacity: 0;
	pointer-events: none;
	transform: translate(calc(var(--cursor-x, -999px) - 50%), calc(var(--cursor-y, -999px) - 50%));
	transition: opacity 220ms ease;
	content: "";
	mix-blend-mode: multiply;
}

body.has-cursor-glow::before {
	opacity: 1;
}

body.is-scrolling .ambient-field span {
	animation-duration: 10s;
}

.ambient-field {
	position: fixed;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	transform: translateY(calc(var(--ambient-shift, 0) * -42px));
}

.ambient-field span {
	position: absolute;
	width: clamp(90px, 9vw, 180px);
	height: clamp(90px, 9vw, 180px);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 185, 0, 0.12), transparent 68%);
	filter: blur(1px);
	animation: ctr-ambient-drift 16s ease-in-out infinite;
}

.ambient-field span:nth-child(1) {
	top: 12%;
	left: 6%;
}

.ambient-field span:nth-child(2) {
	top: 26%;
	right: 8%;
	animation-delay: -4s;
}

.ambient-field span:nth-child(3) {
	top: 58%;
	left: 18%;
	animation-delay: -7s;
}

.ambient-field span:nth-child(4) {
	right: 18%;
	bottom: 12%;
	animation-delay: -10s;
}

.ambient-field span:nth-child(5) {
	top: 74%;
	right: 42%;
	animation-delay: -13s;
}

.page-transition {
	position: fixed;
	z-index: 9998;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 185, 0, 0.48), transparent 28%),
		var(--color-white);
	opacity: 0;
	pointer-events: none;
	transform: scale(1.06);
	transition: opacity 220ms ease, transform 220ms ease;
}

.page-transition.is-active {
	opacity: 1;
	transform: scale(1);
}

.click-sparks {
	position: fixed;
	z-index: 9997;
	inset: 0;
	pointer-events: none;
}

.click-sparks span {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
	box-shadow: 0 0 18px rgba(255, 185, 0, 0.48);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.2);
	animation: ctr-click-spark 680ms ease-out forwards;
	animation-delay: var(--spark-delay, 0ms);
}

@keyframes ctr-click-spark {
	12% {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0);
	}
}

@keyframes ctr-ambient-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(18px, -28px, 0) scale(1.12);
	}
}

body.nav-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

.entry-content ul,
.entry-content ol,
.content-area ul,
.content-area ol {
	padding-left: 1.2em;
}

.list-motion {
	position: relative;
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--motion-index, 0) * 45ms);
}

.list-motion::marker {
	color: var(--color-brand);
}

.list-motion.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.entry-content a,
.content-area a,
.inner-editor-content a {
	background:
		linear-gradient(90deg, var(--color-brand), var(--color-brand)) 0 100% / 100% 2px no-repeat;
	font-weight: 800;
	transition: background-size var(--transition-base), color var(--transition-base);
}

.entry-content a:hover,
.content-area a:hover,
.inner-editor-content a:hover {
	background-size: 100% 100%;
	color: var(--color-text);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: 28px;
	font-size: clamp(2.6rem, 5.4vw, 4.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

h2 {
	margin-bottom: 22px;
	font-size: clamp(2.25rem, 4.8vw, 3.8rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

h3 {
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	font-weight: 800;
	line-height: 1.2;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.skip-link:focus {
	z-index: 1000;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: var(--color-black);
	color: var(--color-white);
}