:root {
	--serif: 'IBM Plex Sans';
	--cjk: 'PingFang SC';
	--label: 'Barlow Semi Condensed';
	--data: 'IBM Plex Mono';
    --hello: 'Macintosh Skeletal';
	--scale: 1;
	--body-base: 23px;
	--body-size: calc(var(--body-base) * var(--scale));
	--leading: 1.32;
	--measure: 860px;
	--track: 0.05em;
	--label-base: 19px;
	--label-size: calc(var(--label-base) * var(--scale));
	--label-weight: 500;
	--label-style: italic;
	--grain-opacity: 0.14;
	
	color-scheme: light dark;
	--paper: light-dark(#FBF8F2, #16130F);
	--ink: light-dark(#262119, #EFE9DD);
	--body-ink: light-dark(#4E463A, #C9C1B2);
	--muted: light-dark(#988D7C, #756D5F);
	--hairline: light-dark(#E2DCCF, #2C2820);
	--link: light-dark(#ca1f1f, #F4CA45);
	--link-hover: light-dark(#16306E, #E5FFFB);
	--sel-bg: light-dark(#ca1f1f, #F4CA45);
	--sel-ink: light-dark(#142C5E, #16130F);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

@font-face {
    font-family: 'Macintosh Skeletal';
    src: url('https://kaijunzhu.com/MacintoshSkeletal-Hello.woff2') format('opentype');
    font-style: normal;
    font-weight: 270;
    font-display: swap;
}

body {
	font-family: var(--serif), var(--cjk, 'Songti SC'), 'Noto Serif CJK SC', serif;
	font-size: var(--body-size);
	line-height: var(--leading);
	font-weight: 400;
	color: var(--body-ink);
	background-color: var(--paper);
}

/* paper fiber */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--grain-opacity);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
	body::before { filter: invert(1); }
}
@media print {
	body::before { display: none; }
}

::selection { background: var(--sel-bg); color: var(--sel-ink); }

main {
	position: relative;
	z-index: 1;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 6.5rem 1.2rem 4rem 1.2rem;
}

/* ---- voices ---- */

.label {
	font-family: var(--label), sans-serif;
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--muted);
	font-style: var(--label-style, normal);
}

h2 {
	font-family: var(--label), sans-serif;
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	font-style: var(--label-style, normal);
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--muted);
	margin: 3.4rem 0 1rem 0;
	display: flex;
	align-items: center;
	gap: 0.9em;
}
h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hairline);
}

p { margin: 0 0 1.1em 0; }
b, strong { font-weight: 600; color: var(--ink); }

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }


.hello {
    font-family: var(--hello), var(--serif), sans-serif;
}

/* the muttering voice */
.aside {
	font-style: italic;
	color: var(--muted);
}

/* internet identifiers */
.handle {
	font-size: 0.9em;
	font-weight: bolder;
	font-family: 'IBM Plex Mono', monospace;
	font-style: italic;
}

/* inline data voice */
.data {
	font-family: var(--data), monospace;
	font-size: 0.78em;
	font-weight: var(--label-weight);
	letter-spacing: 0.03em;
	color: var(--ink);
}

sup {
	font-family: var(--data), monospace;
	font-size: 0.5em;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--muted);
	vertical-align: super;
	line-height: 0;
	padding-inline-start: 0.5em;
}

.banner {
	margin: 0 0 2.2rem 0;
}
.banner img {
	display: block;
	width: 100%;
	height: auto;
}

ul.things {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.things li {
	margin-bottom: 1.05em;
	padding-left: 1.4em;
	position: relative;
}
ul.things li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--muted);
}

footer {
	margin-top: 4.5rem;
	border-top: 1px solid var(--hairline);
	padding-top: 1.1rem;
}
footer .label { display: block; line-height: 1.55; font-size: calc(var(--label-size) * 0.72); }
.changelog { margin-bottom: 0.6em; }

.changelog summary {
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.changelog summary::-webkit-details-marker { display: none; }
.changelog summary:hover { color: var(--body-ink); }

@media (max-width: 620px) {
	:root { --scale: 0.75; }
	main { padding-top: 2.4rem; }
}

h1 img{
	width: 6rem;	
	border-radius: 3rem;
}