:root {
	--ar-ease:   cubic-bezier(0.16, 1, 0.34, 1);
	--ar-t-fast: 190ms;
	--ar-t-mid:  440ms;
}
::selection { background: color-mix(in oklab, var(--olive) 82%, transparent); color: var(--paper); }
html { scrollbar-color: var(--olive) var(--paper); scrollbar-width: thin; }
:root { accent-color: var(--olive); }
.entry-content ul li::marker { color: var(--olive); }
.entry-content > p:first-of-type::first-letter {
	font-family: var(--serif); font-weight: 600; color: var(--olive);
	font-size: 3.4em; line-height: .82; float: left; margin: .06em .12em 0 0;
}
.entry-content img { box-shadow: 0 0 0 1px var(--olive-line), 6px 8px 22px -14px rgba(47,87,21,.5); }


.rule {
	position: relative; border: 0; height: 2px; margin-block: 0;
	background: linear-gradient(90deg, transparent 0, var(--olive-line) 12%,
		var(--olive) 50%, var(--olive-line) 88%, transparent 100%);
}
.rule::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
	border-radius: 50% 50% 50% 0; background: var(--olive);
	box-shadow: 0 1px 3px -1px rgba(47,87,21,.6);
}
@keyframes ar-bead {
	from { transform: translate(-50%, -140%) rotate(45deg) scale(.55); opacity: 0; }
	70%  { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); opacity: 1; }
	to   { transform: translate(-50%, -50%) rotate(45deg) scale(1); opacity: 1; }
}
@keyframes ar-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.rule::after {
			animation: ar-bead both; animation-timeline: view(); animation-range: entry 8% entry 46%;
		}
		
		.ar-unroll {
			animation: ar-wipe both; animation-timeline: view(); animation-range: entry 6% entry 52%;
		}
	}
}


.entry-content a, .notebook__item h3 a, .footer-col a {
	text-decoration: none; padding-bottom: 1px;
	background: linear-gradient(var(--olive), var(--olive)) no-repeat right 100% / 0% 2px;
	transition: background-size var(--ar-t-mid) var(--ar-ease);
}
.entry-content a:hover, .entry-content a:focus-visible,
.notebook__item h3 a:hover, .notebook__item h3 a:focus-visible,
.footer-col a:hover, .footer-col a:focus-visible {
	background-position: left 100%; background-size: 100% 2px;
}
.footer-col a { background-image: linear-gradient(#cdd7b6, #cdd7b6); }


.btn--ghost { position: relative; overflow: hidden; z-index: 0; transition: color var(--ar-t-fast) var(--ar-ease); }
.btn--ghost::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--olive);
	transform: translateX(-101%); transition: transform var(--ar-t-mid) var(--ar-ease);
}
.btn--ghost:hover { color: #fff; }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: none; }


.notebook__item { position: relative; }
.notebook__item::before {
	content: ""; position: absolute; top: -3px; right: 0; left: 0; height: 3px;
	background: var(--olive); transform: scaleX(0); transform-origin: left;
	transition: transform var(--ar-t-mid) var(--ar-ease);
}
.notebook__item:hover::before, .notebook__item:focus-within::before { transform: scaleX(1); }
.range__row { transition: background var(--ar-t-fast) var(--ar-ease); }
.range__row:hover { background: color-mix(in oklab, var(--olive) 5%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.btn--ghost, .btn--ghost::before, .notebook__item::before, .range__row,
	.entry-content a, .notebook__item h3 a, .footer-col a { transition: none; }
}