html {
	--color: black;
	--background: whitesmoke;
	--page-margin: 11.111111;
	--measure: 30;
	--link-color: blue;
	--link-visited: black;
	--link-hover: red;
	--highlight: lime;
	--lightness: 80%;
	scroll-behavior: smooth;
}
@media (prefers-color-scheme: dark) {
	html{
		--color: whitesmoke;
		--background: black;
		--link-color: lightskyblue;
		--link-visited: lavender;
		--link-hover: yellow;
		--highlight: darkred;
		--lightness: 80%;
	}
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
	navigation: auto;
  }
}

body {
	font-family: "Edge Sans 7", system-ui, sans-serif;
	font-size: 1.2em;
	display: block;
	justify-content: end;
	grid-template-columns: 1fr auto auto calc( var(--measure) * 1rem);
	margin: 
		clamp(1em, calc(var(--page-margin) * 1vh),100em) 
		clamp(1em, calc(var(--page-margin) * 1vw),100em) 
		clamp(1em, calc(var(--page-margin) * 2vh ),100em);
	background: var(--background);
	color: var(--color);
}

@media (width > calc(30em + 22.2222vmin)) {
	body {
		display: grid;
	}
}

a {
	color: var(--link-color);
}
a:visited {
	color: var(--link-visited);
}
a:hover {
	color: var(--link-hover);
}
a:focus {
	outline: transparent;
}
a:focus-visible {
	color: var(--link-hover);
	outline: 1px solid var(--link-hover);
	outline-offset: .2em;
}

body > * {
	max-width: calc(var(--measure) * 1em);
	grid-column-start: -2;
	grid-column-end: -1;
	margin: 0;
}

h1 {
	font-weight: 900;
	font-size: clamp(2em,6vw,5em);
	grid-column-start: -4;
	margin-block-start: 0;
	line-height: 1;
	position: relative;
	text-wrap: balance;
}
body p:first-child {
	grid-column-start: -4;
	margin: 0;
}
h2 {
	font-size: clamp(1.414em,4vw,1.999em);
	max-width: 30rem;
	line-height: 1;
	text-wrap: balance;
}
h3 {
	font-size: clamp(1em,3vw,1.414em);
	max-width: 30rem;
}
h2, h3 {
	margin: 1.414em 0 0;
	font-weight: 900;
}
p {
	text-wrap: pretty;
}

h1 + p {
	font-size: 1.414em;
	grid-column-start: -3;
	margin-block-start: 1em;
}
p + p {
	text-indent: 1em;
}
h1 + p + p {
	margin-block-start: 1em;
	text-indent: 0;
}
@media (width < calc(30em + 22.2222vmin)) {
	h1 + p {
		font-size: 1em;
		font-weight: 600;
	}
}
abbr {
	font-feature-settings: "smcp" 1;
	text-transform: lowercase;
}

sup {
	vertical-align: baseline;
	position: relative;
	font-feature-settings: "sups" 1;
}
sup a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	scale: 3 2;
}
code {
	font-family: "Greta Mono Condensed   2", monospace;
}
ins {
	text-decoration: none;
	font-style: italic;
}

ol {
	margin-block: 1em;
	margin-inline: 0;
	padding: 0;
}
ol:has(+ footer) {
	margin-block-end: 0;
	border-block-start: 1px solid;
	padding-block-start: 1em;
}
span:target {
	scroll-margin: 2em;
	animation-name: highlight;
	animation-duration: 1s;
}
@keyframes highlight {
	0%, 75% {
		background: var(--highlight);
	}
	100% {
		background: transparent;
	}
}

footer {
	margin-block-start: 3em;
	font-style: italic;
}
footer p::before {
	content: "☛ ";
	position: absolute;
	translate: -1.414em 0;
}

/* Homepage specific stuff */


article {
	display: flex;
	flex-direction: column;
}
article h2 {
	position: relative;
	align-self: start;
	margin-block-end: 0;
}
article h2 span,
h1 span {
	white-space: nowrap;
}
body > header {
	max-width: 100%;
	grid-column-start: -4;
}
article:nth-of-type(1) h2 {
	margin-block-start: 0;
}
@media (width > 42em) {
	@media (height > 42em) {
		header {
			width: auto;
			display: block;
			writing-mode: sideways-lr;
			position: fixed;
			right: calc( var(--page-margin) * 1vw + var(--measure) * 1rem );
			rotate: calc( var(--r) * 1deg );
		}
		header h1 {
			font-size: clamp(2em,6vh,5em);
		}
	}
}

article h2 a {
	color: var(--color);
	text-decoration: none;
}
article h2 a:hover,
article h2 a:focus,
body > p:first-child a:hover,
body > p:first-child a:focus {
	color: var(--color);
	outline: none;
}
article h2 + p {
	margin-block-start: 0;
}
body > p:first-child {
	display: flex;
	--w: 95%;
	--h: 150%;
	--l: 80;
	--hue: 187;
	--d: 13;
	--d1: 33;
}
body > p:first-child + h1 {
	pointer-events: none;
}
body > p:first-child a {
	position: relative;
	margin-inline-end: .2em;
}
article h2 a::before,
body > p:first-child a::before {
	content: '';
	position: absolute;
	background: oklch( calc(var(--l)/100) .28 var(--hue));
	width: var(--w);
	height: var(--h);
	animation: --shy-away,--tilt;
	animation-duration: 42s,49s;
	animation-delay: calc(var(--d) * -1s),calc(var(--d1) * -1s);
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
	mix-blend-mode: darken;
	transition: .3s;
}
@media (prefers-color-scheme: dark) {
	article h2 a::before,
	body > p:first-child a::before {
		--l1: calc( var(--l) - 30);
		background: oklch( calc(var(--l1)/100) .28 var(--hue));
		mix-blend-mode: lighten;
	}
}
article h2 a:hover::before,
article h2 a:focus::before,
body > p:first-child a:hover::before,
body > p:first-child a:focus::before {
	filter: hue-rotate(80deg);
	rotate: 0deg !important;
}
article h2 a:focus::before,
body > p:first-child a:hover::before,
body > p:first-child a:focus::before {
	outline: 2px dashed black;
}

article {
	--measure: 30rem;
}
@media (width < calc(30em + 22.2222vmin)) {
	article {
		--measure: 100%;
	}
}
@keyframes --shy-away {
	0% {
		translate: 1.414em 0;
	}
	100% {
		translate: -1em 0;
	}
}
@keyframes --tilt {
	0% {
		rotate: -3deg;
	}
	100% {
		rotate: 3deg;
	}
}