/* Global */

@font-face {
	font-family: Ginto;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ABCGinto-Regular.woff2") format("woff2");
}

@font-face {
	font-family: Ginto;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/ABCGinto-Bold.woff2") format("woff2");
}

:root {
	color-scheme: light dark;
	--colour: oklch(0.43 0.13 255);
	--paper: light-dark(oklch(from var(--colour) var(--paper-lightness, 0.975) var(--paper-chroma, 0.004) h), oklch(from var(--colour) var(--paper-lightness, 0.19) var(--paper-chroma, 0.012) h));
	--ink: light-dark(oklch(from var(--colour) var(--ink-lightness, 0.23) 0.012 h), oklch(from var(--colour) var(--ink-lightness, 0.93) 0.006 h));
	--accent: light-dark(oklch(from var(--colour) var(--accent-lightness, 0.43) 0.13 calc(h + var(--accent-shift, 0))), oklch(from var(--colour) var(--accent-lightness, 0.78) 0.09 calc(h - 10 + var(--accent-shift, 0))));
	--visited: light-dark(oklch(from var(--colour) var(--accent-lightness, 0.43) 0.1 calc(h + 40 + var(--accent-shift, 0))), oklch(from var(--colour) var(--accent-lightness, 0.78) 0.07 calc(h + 45 + var(--accent-shift, 0))));
	--muted: light-dark(color-mix(in oklab, var(--ink) 72%, var(--paper)), color-mix(in oklab, var(--ink) 78%, var(--paper)));
	--line: light-dark(color-mix(in oklab, var(--ink) 18%, var(--paper)), color-mix(in oklab, var(--ink) 40%, var(--paper)));
	--tint: light-dark(color-mix(in oklab, var(--ink) 6%, var(--paper)), color-mix(in oklab, var(--ink) 10%, var(--paper)));
	background: var(--paper);
	color: var(--ink);
	accent-color: var(--accent);
	font-size: 112.5%;
	line-height: 1.5;
	overflow-wrap: anywhere;
	hanging-punctuation: first;

	@media (prefers-contrast: more) {
		--muted: var(--ink);
		--line: var(--ink);
	}

	&[data-theme="light"] {
		color-scheme: light;
	}

	&[data-theme="dark"] {
		color-scheme: dark;
	}

}

body {
	display: grid;
	grid-template-columns: [full-start] minmax(0, 1fr) [text-start] minmax(0, 65ch) [text-end] minmax(0, 1fr) [full-end];
	gap: 3rem 0;
	margin: 0;
	padding: 1.5rem;

	& > * {
		grid-column: text;
	}

	@media (min-width: 60rem) {
		grid-template-columns:
			[full-start] minmax(auto, 0.5fr)
			[left-half] 0.5fr 3rem
			[text-start] minmax(30em, 1.618fr) [text-end]
			3rem 0.5fr [right-half]
			minmax(auto, 0.5fr) [full-end];
		padding: 3rem 2rem;

		position: relative;

		& > .index {
			grid-area: 1 / full-start / auto / span 2;
		}

		& > :is(.index, .preferences) {
			position: absolute;
			top: anchor(--kicker top, 0px);
		}
	}
}

a {
	color: var(--accent);

	&:visited {
		color: var(--visited);
	}
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

h1, h2, h3 {
	line-height: max(1rlh, round(1.2em, 1rlh));
	text-wrap-style: balance;
	margin-block: 2rlh 0;
}

h1 {
	margin-top: 0;
}

:is(h2, h3, h4) {
	position: relative;

	& > a[href^="#"] {
		position: absolute;
		right: 100%;
		margin-right: 0.3ch;
		font-weight: normal;
		color: var(--line);
		text-decoration: none;

		&:is(:hover, :focus-visible) {
			color: var(--accent);
		}
	}
}

p, li {
	text-wrap-style: pretty;
}

img, video {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0.25rem;
}

figure {
	margin: 1rlh 0;
}

figure:has(> img) {
	container-type: inline-size;
}

figure[style*="--ratio"] > img {
	height: round(up, min(100cqi, var(--width)) / var(--ratio), 1rlh);
	object-fit: contain;
	object-position: top left;
}

figure > img[src$=".svg"] {
	background: var(--tint);
}

figcaption {
	font-size: 0.875rem;
	line-height: 1rlh;
	color: var(--muted);
}

sup {
	line-height: 0;
}

h1, h2, h3, summary, .preferences, .skip, .index, .topics, main > header p, .articles, .prevnext, .mastodon-replies-list .cluster {
	font-family: Ginto, system-ui, sans-serif;
}

code, kbd, pre {
	font-family: monospace, monospace;
	font-size-adjust: 0.45;
}

:not(pre) > code, kbd {
	overflow-wrap: anywhere;
	background: var(--tint);
	padding: 0.1em 0.3em;
	border-radius: 0.25rem;
}

pre {
	overflow-x: auto;
	padding: 0.5rlh 1rem;
	line-height: 1rlh;
	border-radius: 0.375rem;
}

aside, blockquote {
	margin-inline: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--line);
}

summary, button {
	cursor: pointer;
}

::selection {
	background: color-mix(in oklab, var(--accent) 30%, var(--paper));
}

/* Composition */

.cluster > :not(ul), .cluster li {
	display: inline-block;
	max-width: 100%;
	margin-right: 0.5ch;
}

.cluster ul {
	display: inline;
}

.image-grid {
	display: flex;
	gap: 1rem;

	& figure {
		position: relative;
		min-width: 0;
		margin: 0;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 0.25rem;
			background: light-dark(var(--colour), oklch(from var(--colour) 0.78 0.09 h));
			mix-blend-mode: color;
			pointer-events: none;
		}
	}

	& img {
		width: 100%;
	}
}

/* Blocks */

.skip {
	position: fixed;
	inset: 0.5rem auto auto 0.5rem;
	background: var(--paper);
	line-height: normal;
	text-decoration: none;

	&:not(:focus) {
		clip-path: inset(50%);
	}
}

.preferences {
	align-self: start;

	& button {
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: var(--accent);
		text-decoration: underline dotted;
	}

	@media (min-width: 60rem) {
		grid-area: 1 / span 2 / auto / full-end;
		justify-self: end;
		text-align: end;
	}
}

.index, .topics, .preferences {
	& ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.index, .preferences {
	z-index: 1;
	overflow-wrap: normal;
	display: grid;
	align-content: start;
	gap: 1rlh;
}

.index {
	& address {
		font-style: normal;
	}

	& [data-mark]::after {
		content: "\202f" attr(data-mark) / attr(data-hint);
	}
}

.topics > span, main > header p > :not(a) {
	color: var(--muted);
}

main {
	grid-column: full;
	display: grid;
	grid-template-columns: subgrid;
	align-content: start;

	& > * {
		grid-column: text;
		min-width: 0;
		margin-block: 0;
	}

	& > * + * {
		margin-top: var(--flow-space, 1rlh);
	}

	& > :not(.mastodon-replies) > :first-child {
		margin-top: 0;
	}

	& > * > :last-child {
		margin-bottom: 0;
	}

	& > :is([class*="wide"], [class*="half"]) {
		contain: inline-size;
	}

	& > [class*="wide"] {
		grid-column: full;
	}

	& > figure:is([class*="wide"], [class*="half"]) {
		display: grid;
		grid-template-columns: subgrid;

		& > * {
			grid-column: 1 / -1;
			width: 100%;
			min-width: 0;
			max-width: var(--width, 100%);
		}

		& > figcaption {
			grid-column: text;
		}
	}

	& > figure.wide > :not(figcaption) {
		justify-self: center;
	}

	@media (min-width: 60rem) {
		grid-area: 1 / 1 / auto / -1;

		& > .wide-right {
			grid-column: text-start / full-end;
		}

		& > .wide-left {
			grid-column: full-start / text-end;
		}

		& > .wide {
			grid-column: full;
		}

		& > .half-right {
			grid-column: text-start / right-half;
		}

		& > .half-left {
			grid-column: left-half / text-end;
		}

		& > .half {
			grid-column: left-half / right-half;
		}
	}
}

:where(figure, main > header) + *, figure {
	--flow-space: 2rlh;
}

h2, h3 {
	--flow-space: 2rlh;
}

.mastodon-replies {
	--flow-space: 0;
}

.prevnext {
	--flow-space: 3rlh;
}

.articles {
	display: grid;
	gap: 0.75em;
	list-style: none;
	padding: 0;

	& li {
		display: flow-root;
		text-wrap-style: auto;
	}

	& time {
		float: right;
		font-variant-numeric: tabular-nums;
		margin-left: 1.5ch;
		color: var(--muted);
	}
}

main > header p {
	margin: 0;
}

main > header > h1 + * {
	anchor-name: --kicker;
}

.prevnext ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5ch;
	padding: 0;
	list-style: none;
}

.mastodon-replies-list {
	list-style: none;
	padding: 0;

	& li {
		padding-top: 1rlh;
	}

	& .cluster {
		margin: 0;
		color: var(--muted);
	}

	& .cluster img {
		width: 1.5em;
		vertical-align: top;
		border-radius: 50%;
	}

	& .nested {
		margin-left: 0.75rem;
		padding-left: 1rem;
		border-left: 1px solid var(--line);
	}
}

.footnotes-container {
	--flow-space: 1rlh;
	font-size: 0.875rem;
	line-height: 1rlh;
	color: var(--muted);

	&::before {
		content: "";
		display: block;
		height: 1rlh;
		background: linear-gradient(var(--line), var(--line)) left center / 8ch 1px no-repeat;
	}

	& ol {
		padding-left: 0;
	}

}

.mastodon-reply__content {
	& > * {
		margin-block: 0;
	}

	& .invisible {
		display: none;
	}

	& .ellipsis::after {
		content: "…";
	}
}

.guides {
	position: fixed;
	inset: 0;
	z-index: calc(infinity);
	display: grid;
	pointer-events: none;
	--guide-color: #84ffff;
	background: repeating-linear-gradient(color-mix(in srgb, var(--guide-color), transparent 40%) 0 1px, transparent 1px var(--row)) 0 var(--scroll) / 100% var(--row);

	&[hidden] {
		display: none;
	}

	&::after {
		content: attr(data-window-width);
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		color: var(--guide-color);
		font-size: 3rem;
	}

	& > div {
		outline: 1px solid var(--guide-color);
		background: color-mix(in srgb, var(--guide-color), transparent 75%);
	}
}

/* Exceptions */

a[aria-current], .preferences [aria-disabled="true"] {
	color: var(--ink);
	text-decoration: none;
}

li:has([rel="next"]) {
	margin-left: auto;
}