/* @group Webfonts */

@font-face {
	font-family: 'Literata';
	src:	url('/fonts/Literata-var.woff2') format('woff2') tech(variations),
			url('/fonts/Literata-var.woff2') format('woff2-variations');
	font-weight: 1 1000;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Literata';
	src:	url('/fonts/Literata-Italic-var.woff2') format('woff2') tech(variations),
			url('/fonts/Literata-Italic-var.woff2') format('woff2-variations');
	font-weight: 1 1000;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plex Sans';
	src:	url('/fonts/Plex-Sans-var.woff2') format('woff2') tech(variations),
			url('/fonts/Plex-Sans-var.woff2') format('woff2-variations');
	font-weight: 1 1000;
	font-stretch: 50% 200%;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Plex Sans';
	src:	url('/fonts/Plex-Sans-Italic-var.woff2') format('woff2') tech(variations),
			url('/fonts/Plex-Sans-Italic-var.woff2') format('woff2-variations');
	font-weight: 1 1000;
	font-stretch: 50% 200%;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inconsolata';
	src:	url('/fonts/Inconsolata.woff2') format('woff2') tech(variations),
			url('/fonts/Inconsolata.woff2') format('woff2-variations');
	font-weight: 1 1000;
	font-stretch: 50% 200%;
	font-style: normal;
	font-display: fallback;
	size-adjust: 109%; /* tweak monospace to fit in nicer with body text */
}

:root {
	--font-body: "Literata", "Cambria", "Roboto Slab", "Georgia", "Times New Roman", serif, ".PhoneFallback", "Arial Unicode MS";
	--font-h1: "Literata", "Hoefler Text", "Cambria", "Roboto Slab", Georgia, "Times New Roman", serif;
	--font-sans: "Plex Sans", "Avenir Next", "PT Sans", "Segoe UI", "Roboto", sans-serif;
	--font-sans-cond: "Plex Sans", "Avenir Next Condensed", "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
	--font-mono: "Inconsolata", "Consolas", "Andale Mono", "Droid Sans Mono", monospace, "Lucida Grande", "Arial Unicode MS";
}

/* @end */

/* @group Reset */

@view-transition {
  navigation: auto;
}

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

:root {
	scroll-behavior: smooth;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
html, body, main, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, table, caption, form, fieldset, legend {
	margin-block: 0;
	margin-inline: 0;
	padding: 0;
}

/* Set core body defaults */
body {
	text-wrap: pretty;
	font-optical-sizing: auto;
	line-height: 1.5em;
}

pre {
	white-space: pre-wrap;
}

/* Balance text wrapping on main headings and captions */
h1, figcaption, caption {
	text-wrap: balance;
}

ul {
	list-style:none;
}

a, ins {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

mark {
	background-color: rgba(255,255,0,0.5);
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
	font: inherit;
}

fieldset {
	border:0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}

html:focus-within {
	scroll-behavior: smooth;
}

img, object, embed, svg, video {
	max-width: 100%;
	border: 0;
	display: inline-block;
	vertical-align:bottom;
	text-decoration: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* @end */

/* @group Colours */

:root {
	color-scheme: light dark;

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

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

	/* Light scheme */
	--color-l-headfoot: hsla(0, 0%, 100%, 0.6);
	--color-l-headfoot-link: hsl(0, 0%, 100%);
	--color-l-headfoot-bg: hsl(30, 3%, 26%);
	--color-l-headfoot-linkline: hsla(0, 0%, 100%, 0.2);
	--color-l-spine: hsl(0, 0%, 100%);
	--color-l-spine-bg: hsl(3, 70%, 55%);
	--color-l-page: hsl(0, 0%, 0%);
	--color-l-page-bg: hsl(37, 10%, 85%);
	--color-l-linkline: hsla(0, 0%, 0%, 0.3);
	--color-l-linkline-hover: hsla(0, 0%, 0%, 0.6);
	--color-l-link-hover: hsl(3, 99%, 46%);
	--color-l-h1: hsla(0, 0%, 0%, 0.8);
	--color-l-h1-span: hsla(0, 0%, 0%, 0.4);
	--color-l-monospace: hsl(0, 0%, 33%);
	--color-l-note: hsl(0, 0%, 33%);
	--color-l-codeblock: hsla(0, 0%, 100%, 0.5);
	--color-l-button: hsl(0, 0%, 33%);
	--color-l-button-hover: hsl(0, 0%, 100%);
	--color-l-button-bg: hsl(0, 0%, 100%);
	--color-l-button-bg-hover: hsl(0, 0%, 33%);
	--color-l-line-light: hsla(0, 0%, 0%, 0.13);

	/* Dark scheme */
	--color-d-headfoot: hsla(0, 0%, 100%, 0.6);
	--color-d-headfoot-link: hsl(0, 0%, 100%);
	--color-d-headfoot-bg: hsl(30, 3%, 8%);
	--color-d-headfoot-linkline: hsla(0, 0%, 100%, 0.2);
	--color-d-spine: hsl(0, 0%, 100%);
	--color-d-spine-bg: hsl(3, 60%, 30%);
	--color-d-page: hsl(37, 10%, 85%);
	--color-d-page-bg: hsl(30, 3%, 13%);
	--color-d-linkline: hsla(0, 0%, 100%, 0.3);
	--color-d-linkline-hover: hsla(0, 0%, 100%, 0.6);
	--color-d-link-hover: hsl(186, 99%, 46%);
	--color-d-h1: hsla(0, 0%, 100%, 0.8);
	--color-d-h1-span: hsla(0, 0%, 100%, 0.5);
	--color-d-monospace: hsl(0, 0%, 66%);
	--color-d-note: hsl(0, 0%, 66%);
	--color-d-codeblock: hsla(0, 0%, 0%, 0.3);
	--color-d-button: hsl(0, 0%, 100%);
	--color-d-button-hover: hsl(0, 0%, 33%);
	--color-d-button-bg: hsl(0, 0%, 33%);
	--color-d-button-bg-hover: hsl(0, 0%, 80%);
	--color-d-line-light: hsla(0, 0%, 100%, 0.18);

	/* set up colours for browsers not supporting light-dark() using light as default */
	--color-headfoot: var(--color-l-headfoot);
	--color-headfoot-link: var(--color-l-headfoot-link);
	--color-headfoot-bg: var(--color-l-headfoot-bg);
	--color-headfoot-linkline: var(--color-l-headfoot-linkline);
	--color-spine: var(--color-l-spine);
	--color-spine-bg: var(--color-l-spine-bg);
	--color-page: var(--color-l-page);
	--color-page-bg: var(--color-l-page-bg);
	--color-linkline: var(--color-l-linkline);
	--color-linkline-hover: var(--color-l-linkline-hover);
	--color-link-hover: var(--color-l-link-hover);
	--color-h1: var(--color-l-h1);
	--color-h1-span: var(--color-l-h1-span);
	--color-monospace: var(--color-l-monospace);
	--color-note: var(--color-l-note);
	--color-codeblock: var(--color-l-codeblock);
	--color-button: var(--color-l-button);
	--color-button-hover: var(--color-l-button-hover);
	--color-button-bg: var(--color-l-button-bg);
	--color-button-bg-hover: var(--color-l-button-bg-hover);
	--color-line-light: var(--color-l-line-light);

	/* Now redefine using light-dark() */

	--color-headfoot: light-dark(var(--color-l-headfoot), var(--color-d-headfoot));
	--color-headfoot-link: light-dark(var(--color-l-headfoot-link), var(--color-d-headfoot-link));
	--color-headfoot-bg: light-dark(var(--color-l-headfoot-bg), var(--color-d-headfoot-bg));
	--color-headfoot-linkline: light-dark(var(--color-l-headfoot-linkline), var(--color-d-headfoot-linkline));
	--color-spine: light-dark(var(--color-l-spine), var(--color-d-spine));
	--color-spine-bg: light-dark(var(--color-l-spine-bg), var(--color-d-spine-bg));
	--color-page: light-dark(var(--color-l-page), var(--color-d-page));
	--color-page-bg: light-dark(var(--color-l-page-bg), var(--color-d-page-bg));
	--color-linkline: light-dark(var(--color-l-linkline), var(--color-d-linkline));
	--color-linkline-hover: light-dark(var(--color-l-linkline-hover), var(--color-d-linkline-hover));
	--color-link-hover: light-dark(var(--color-l-link-hover), var(--color-d-link-hover));
	--color-h1: light-dark(var(--color-l-h1), var(--color-d-h1));
	--color-h1-span: light-dark(var(--color-l-h1-span), var(--color-d-h1-span));
	--color-monospace: light-dark(var(--color-l-monospace), var(--color-d-monospace));
	--color-note: light-dark(var(--color-l-note), var(--color-d-note));
	--color-codeblock: light-dark(var(--color-l-codeblock), var(--color-d-codeblock));
	--color-button: light-dark(var(--color-l-button), var(--color-d-button));
	--color-button-hover: light-dark(var(--color-l-button-hover), var(--color-d-button-hover));
	--color-button-bg: light-dark(var(--color-l-button-bg), var(--color-d-button-bg));
	--color-button-bg-hover: light-dark(var(--color-l-button-bg-hover), var(--color-d-button-bg-hover));
	--color-line-light: light-dark(var(--color-l-line-light), var(--color-d-line-light));

}

/* @end */

/* @group OpenType features */

/* Set custom properties for each layout feature */
:root {
	--bodytext-smcp: "smcp" off;
	--bodytext-c2sc: "c2sc" off;
}

body {
	font-variant-ligatures: common-ligatures;
	font-kerning: normal;
	font-variant-numeric: oldstyle-nums proportional-nums;
}
h1, h2, h3, h4, h5, h6, table, .lnum, pre code, figcaption, caption, .meta {
	font-variant-numeric: lining-nums;
}
table, .tnum {
	font-variant-numeric: tabular-nums;
}
h5, h6 {
	font-variant-caps: all-small-caps;
	font-variant-numeric: oldstyle-nums;
}
.c2sc {
	font-variant-caps: all-small-caps;
	font-variant-numeric: oldstyle-nums;
}

.smcp {
	font-variant-caps: all-small-caps;
	font-variant-numeric: oldstyle-nums;
}

h1 .c2sc, h2 .c2sc, h3 .c2sc, h4 .c2sc, th .c2sc,
figcaption .c2sc, caption .c2sc,
aside .c2sc,
kbd .c2sc, code .c2sc { /* no smallcaps in headings, captions, asides, monospace */
	font-variant-caps: normal;
}

.zero, math {
	font-variant-numeric: slashed-zero;
}

/* subscripts and superscripts */

/* subscripts */
sub {
	font-variant-position: sub;
}

@supports (font-variant-position: sub) {
	sub {
		 vertical-align: inherit;
  		font-size: inherit;
	}
}

/* superscripts */
sup {
	font-variant-position: super;
}

@supports (font-variant-position: super) {
	sup { vertical-align: inherit;
  		font-size: inherit; }
}

:root {
	--opentype-case: off;
	--opentype-sinf: off;
}
.case { --opentype-case: on; }
.sinf { --opentype-sinf: on; }

* {
	font-feature-settings: "case" var(--opentype-case, off), "sinf" var(--opentype-sinf, off);
}

/* @end */

/* @group Type scales */

/* Utopia type scaling */

/* @link https://utopia.fyi/type/calculator?c=320,16,1.067,1920,21,1.125,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1920;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
	(var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
  	(var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1920px) {
  :root {
	--fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --f--1-min: 15.00;
  --f--1-max: 18.67;
  --step--1: calc(
	((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
  	var(--fluid-bp)
  );

  --f-0-min: 16.00;
  --f-0-max: 21.00;
  --step-0: calc(
	((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
  	var(--fluid-bp)
  );

  --f-2-min: 18.22;
  --f-2-max: 26.58;
  --step-2: calc(
	((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
  	var(--fluid-bp)
  );

  --f-4-min: 20.74;
  --f-4-max: 33.64;
  --step-4: calc(
	((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
  	var(--fluid-bp)
  );

  --f-8-min: 26.88;
  --f-8-max: 53.88;
  --step-8: calc(
	((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min)) *
  	var(--fluid-bp)
  );
}

/* @group Text grid */

:root {
--textgrid-body: 1.5em;
--textgrid-body-flow: 0.75em;
--textgrid-body-flow: 0.5lh;
--textgrid-body-tighter: 1.15em;

--textgrid-h1: 1.04em; /* TnT */
--textgrid-h2: 1.25em;
--textgrid-h3: 1.25em;

--textgrid-sm: 1.25em;
--textgrid-sm-looser: 1.375em;
}

/* @end */

/* @end */

/* @group Layout primitives */

.stack > * + * {
	margin-block-start: var(--textgrid-body-flow);
}

.center {
	--article-measure: calc(36 * var(--step-0));
}

.center > * {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--article-measure);
  padding-inline: var(--textgrid-body-flow);
}

.sidebyside {
	display: flex;
	justify-content: space-between;
	gap: var(--textgrid-body);
}

.equal > * { /* used with sidebyside */
	flex-basis: 50%;
	flex-grow: 1;
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--textgrid-body);
	justify-content: space-between;
}

.with-sidebar {
	display: flex;
	flex-wrap: wrap;
	--sidebar-min-size: 12rem;
	--not-sidebar-min-size: 16rem;
}

.sidebar {
	flex-basis: 33.3%;
	flex-grow: 1;
	min-inline-size: var(--sidebar-min-size);
}

.not-sidebar {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: var(--not-sidebar-min-size);
}

.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--textgrid-body);
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc(( 36rem - 100%) * 999);
}

.switcher > :nth-last-child(n+ 4),
.switcher > :nth-last-child(n+ 4) ~ * {
	flex-basis: 100%;
}

:root {
	--bodypadding: 3%;
	--marginalia-width: clamp(7.875rem, -16.3977rem + 40.4545vw, 13.4375rem);
	/* @link https://utopia.fyi/clamp/calculator?a=960,1180,126—215&p=sidenote-width */
}

/* @end */

/* @group Block styling */

body {
	display: flex; /* in order to keep footer at bottom of short pages */
	flex-direction: column;
	min-block-size: 100vh;
	background: var(--color-page-bg);
	color: var(--color-page);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--textgrid-body);
}

header.global, footer.global {
	color: var(--color-headfoot);
	background: var(--color-headfoot-bg);
}

main {
	margin-block-end: auto;
	background: var(--color-spine-bg);
	color: var(--color-spine);
	flex-grow:999;
	/* @link https://utopia.fyi/clamp/calculator?a=1180,1920,12—192&p=spine */
	padding-left: clamp(1vw, -17.1892rem + 24.3243vw, 10vw);
	display: flex;
}

.page {
	background: var(--color-page-bg);
	color: var(--color-page);
	padding-top: calc(var(--textgrid-body) * 2);
	padding-bottom: calc(var(--textgrid-body) * 2);
	flex-grow:1;
	max-inline-size: 100%;
}

h1 {
	font-size: calc(var(--step-8) + 1.75vh);
	line-height: var(--textgrid-h1);
	color: var(--color-h1);
	text-align: center;
	margin-block-end: max(1.5em, 7vh);
	padding-inline-start: max(5%, var(--textgrid-body-flow));
	padding-inline-end: max(5%, var(--textgrid-body-flow));
	font-variant-ligatures: discretionary-ligatures;
}

h1 span {
	color: var(--color-h1-span);
}

h2 {
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	clear: right;
}

.stack * + h2 {
	margin-block-start: var(--textgrid-h2);
	margin-block-end: calc(var(--textgrid-h2) / 4);
}

h3 {
	font-size: var(--step-2);
	line-height: var(--textgrid-h3);
	clear: right;
}

.stack * + h3 {
	margin-block-start: var(--textgrid-h3);
	margin-block-end: calc(var(--textgrid-h3) / 4);
}

:root { /* Set default font weights */
	--weight-body: 400;
	--weight-h1: 900;
	--weight-h2: 700;
	--weight-h3: 650;
	--weight-h4: 600;
	--weight-h5: 550;
	--weight-h6: 500;
	--weight-mono: 500;
	--weight-factor: 1; /* default multiplier, used for light mode */
	--weight-darkmodefactor: 0.85; /* multiplier for dark mode (reduce by 15%) */
}

body { font-weight: calc(var(--weight-body) * var(--weight-factor)); }
h1 { font-weight: calc(var(--weight-h1) * var(--weight-factor)); }
h2 { font-weight: calc(var(--weight-h2) * var(--weight-factor)); }
h3, dt { font-weight: calc(var(--weight-h4) * var(--weight-factor)); }
h4, th { font-weight: calc(var(--weight-h4) * var(--weight-factor)); }
h5 { font-weight: calc(var(--weight-h5) * var(--weight-factor)); }
h6 { font-weight: calc(var(--weight-h6) * var(--weight-factor)); }
pre, code, var, samp, kbd { font-weight: calc(var(--weight-mono) * var(--weight-factor)); }

@media (prefers-color-scheme: dark) { /* Lighten weights for dark mode system default */
	:root {
		--weight-factor: var(--weight-darkmodefactor);
	}
}

:root[data-color-scheme="dark"] { /* repeat for dark mode toggle */
	--weight-factor: var(--weight-darkmodefactor);
}

h4, h5, h6 {
	font-size: var(--step-0);
	clear: right;
}

.center blockquote {
	max-inline-size: calc(var(--article-measure) - calc(var(--textgrid-body-flow) * 4));
}

blockquote {
	font-style: italic;
	border-left: 2px solid var(--color-line-light);
}

blockquote p+p {
	text-indent: var(--textgrid-body);
}

blockquote footer {
	text-align: right;
	font-style: normal;
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);
}

blockquote.quoted {
	border-left-color: transparent;
}

.quoted p {
	quotes: '“' '”' '‘' '’';
}
.quoted p:first-of-type::before {
	content: open-quote;
}
.quoted p:last-of-type::after  {
	content: close-quote;
}
.quoted p:first-of-type::before {
	margin-inline-start: -0.87ch;
}
.quoted p {
	hanging-punctuation: first last;
}
@supports(hanging-punctuation: first last) {
	.quoted p:first-of-type::before {
		margin-inline-start: 0;
	}
}

/* only lists in a post or writing */
section ul {
	list-style-type: disc;
}
section li {
	margin-inline-start: var(--textgrid-body);
}

li p {
	margin-block-end: var(--textgrid-body-flow);
}

dd {
	margin-block-end: var(--textgrid-body-flow);
}

/* @group Tables */

.fig-table { /* shadows on scrollable tables - https://codepen.io/huijing/details/XBGaNQ */
	background:
		linear-gradient(to right, var(--color-page-bg) 30%, rgba(255,255,255,0)),
		linear-gradient(to right, rgba(255,255,255,0), var(--color-page-bg) 70%) 0 100%,
		radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	  background-repeat: no-repeat;
	  background-color: var(--color-page-bg);
	  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	  background-position: 0 0, 100%, 0 0, 100%;
	  background-attachment: local, local, scroll, scroll;
}

[role][aria-labelledby][tabindex] { /* responsive tables */
	max-inline-size: 100%;
	overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
	outline: .1em solid rgba(0,0,0,.1);
	outline: .1em solid light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
}

table {
	font-family: var(--font-sans);
	margin-inline:auto;
}

tbody {
	border-top: 2px solid var(--color-line-light);
	border-bottom: 2px solid var(--color-line-light);
}

th, td {
	padding: 0.5em;
	border-bottom: 1px solid var(--color-line-light);
	text-align: left;
	font-size: calc(var(--step-0) * 20 / 21) ; /* make a bit smaller to closer match Literata */
	line-height: var(--textgrid-sm);
	vertical-align: top;
}

thead th {
	vertical-align: bottom;
}

caption {
	caption-side: bottom;
}

/* @end */

/* @end */

/* @group Inline styling */

a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--color-linkline);
	transition-property: border, text-decoration, text-decoration-color, color, opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease;
}

a:hover, a:active, a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-decoration-color: var(--color-linkline-hover);
}

pre, code, var, samp, kbd {
	font-family: var(--font-mono);
	-webkit-hyphens: manual;
	hyphens: manual;
	font-style: normal;
	color: var(--color-monospace);
	font-stretch: 95%;
}

kbd kbd {
	font-size: 1em;
}

cite, dfn, em, i {
	font-style: italic;
}

q {
	quotes: '‘' '’' '“' '”';
}

strong, b {
	font-weight: 600; /* not so bold */
}

strong strong {
	text-decoration: underline;
}

del {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--color-linkline);

}

input {
	font-size: inherit;
	font-family: var(--font-sans);
	padding: var(--textgrid-body-flow) var(--textgrid-body);
}

[type="text"] {
	background: inherit;
	inline-size: 20em;
	border-color: transparent;
	border-bottom: 3px solid var(--color-spine-bg);
	padding: var(--textgrid-body-flow);
}

[type="submit"] {
	font-weight: 600;
	color: var(--color-spine);
	background: var(--color-headfoot-bg);
	border-color: transparent;
	border-bottom: 3px solid var(--color-spine-bg);
}

/* @end */

.meta {
	font-family: var(--font-sans-cond);
	font-stretch: 85%;
	color: var(--color-note);
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	border-bottom: 1px solid var(--color-line-light);
	padding-bottom: 0.333333em;
	margin-block-end: var(--textgrid-body);
}

.categories {
	text-indent: 1.5ch hanging;
}

.categories::before {
	content: "§";
	color: var(--color-page);
	display: inline-block;
}

.categories li {
	display: inline-block;
}

.categories a {
	text-decoration: none;
}

.stack h2+p, .stack h3+p, .stack h4+p, .stack h5+p, .stack h6+p {
	margin-block-start: 0; /* prefer headings close to associated text */
}

.stack figure {
	margin-block-start: var(--textgrid-body);
	margin-block-end: var(--textgrid-body);
	text-align:center;
}

.center figure.fullbleed {
	max-inline-size: none;
	padding-inline: 0;
}

article section + section::before {
	content: "§";
	text-align: center;
	display: block;
	margin-block: var(--textgrid-body);
}

article p, article li, article tbody, article dl, article blockquote {
	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 3;
	-webkit-hyphenate-limit-chars: 7 4 3;
	-webkit-hyphenate-limit-lines: 2;
	-webkit-hyphenate-limit-zone: 8%;
	-webkit-hyphenate-limit-last: always;

	hyphens: auto;
	hyphenate-limit-chars: 7 4 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-zone: 8%;
	hyphenate-limit-last: always;
}

.stack .group-with-aside {
	position: relative;
}

.group-with-aside aside {
	font-family: var(--font-sans-cond);
	font-stretch: 85%;
	color: var(--color-note);
	margin-block: var(--textgrid-body);
}

.group-with-aside aside p {
	padding-left: 0.5em;
	border-left: 2px solid var(--color-line-light);
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
}

/* show sidenotes for widths greater than 60rem */

@media (min-width: 60rem) {

	.group-with-aside aside {
		position: absolute;
		top: 0;
		width: var(--marginalia-width);
		right: calc(var(--marginalia-width) * -1);
		margin-block-start: calc(var(--textgrid-body) / 4);
	}
}

figcaption, caption {
	font-family: var(--font-sans-cond);
	font-stretch: 85%;
	color: var(--color-note);
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);
	margin-block-start: calc(var(--textgrid-sm) / 3);
}

figcaption code, figcaption var, figcaption samp, figcaption kbd {
	font-stretch: 85%; /* compress to match caption text */
}

.inline {
	position: relative;
}

.stack .inline {
	margin-block-start: 0;
	margin-block-end: var(--textgrid-body-flow);
}

.inline-holder { /* small images floated on narrow screens */
	float: right;
	max-inline-size:50%;
	margin-inline-start: var(--textgrid-body-flow);
}

/* put inline images in margin for widths greater than 60rem */

@media (min-width: 60rem) {

	.inline-holder {
		float: none;
		max-inline-size: none;
		position: absolute;
		top: 0;
		width: var(--marginalia-width);
		right: calc(var(--marginalia-width) * -1);
		margin-block-start:0;
		text-align: left;
	}
}

aside.meta {
	clear: right;
	margin-block-start: var(--textgrid-body);
	padding-top: var(--textgrid-body);
	padding-bottom: 0;
	border: 0;
}

.categories.tags::before {
	content: "#";
	color: var(--color-page);
	display: block;
	font-size: 1.4em;
	inline-size: var(--step--1);
	float: left;
	padding-right: 0.8em;
}

.categories.tags {
	text-indent: 1.2em hanging;
}

.icon {
	--iconsize: 1.5cap;
}

.icon a, a.icon {
	display: grid;
	grid-template-columns: var(--iconsize, 1em) 1fr;
	align-items: center;
	gap:0.5em
}

.icon img, .icon svg {
	max-height: var(--iconsize, 1em);
	max-width: var(--iconsize, 1em);
	justify-self:center;
	translate: 0 calc(0.5ex - 0.5cap);
}

.comment a {
	text-decoration: none;
}

.comment a svg {
	color: var(--color-page);
}

.relatedposts {
	padding-left: var(--bodypadding);
	padding-right: var(--bodypadding);
}

.relatedposts h2 {
	margin-block-start: calc(var(--textgrid-body) * 2);
	margin-block-end: var(--textgrid-body);
	padding-top: var(--textgrid-body-flow);
	border-top: 2px solid var(--color-line-light);
}

ul.articles {
	list-style: none;
}

.articles h3 {
	text-wrap: auto;
	text-wrap: pretty;
}

.relatedposts h3 {
	font-size: var(--step-0);
	line-height: var(--textgrid-body-tighter);
}

.articles .summary {
	margin-block: calc(var(--textgrid-sm-looser) / 4);
}

.relatedposts .summary {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
}

.date {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	margin-block-start: calc(var(--textgrid-sm-looser) / 4);
	margin-block-end: 0;
	font-family: var(--font-sans-cond);
	font-stretch: 85%;
	color: var(--color-note);
}

.next-prev {
	padding-left: var(--bodypadding);
	padding-right: var(--bodypadding);
}

.next-prev ul {
	margin-block-start:var(--textgrid-body);
	border-top: 1px solid var(--color-line-light);
	padding-top:var(--textgrid-body);
}

.next-prev .articles li + li {
	margin-block-start: 0;
}

.newer {
	text-align: right;
}
.older h5::before {
	content:"←";
}
.newer h5::after {
	content:"→";
}

.intro {
	font-size: var(--step-2);
	line-height: var(--textgrid-h3);
}

.archive .not-sidebar {
	border-top: 1px solid var(--color-line-light);
	border-right: 1px solid var(--color-line-light);
	padding-block: var(--textgrid-body);
	padding-inline-end: 2.5%;
	margin-inline-start: 2.5%;
}

.archive .sidebar {
	border-top: 1px solid var(--color-line-light);
	padding-block: var(--textgrid-body);
	padding-inline-start: 2.5%;
	margin-inline-end: 2.5%;
}

.archive {
  container: archive / inline-size;
}

@container archive (width < 29.5rem) {
	.archive .not-sidebar {
		border-right: none;
		padding-inline-end: 0;
		margin-inline-end: 2.5%;
	}

	.archive .sidebar {
		margin-inline-start: 2.5%;
		padding-inline-start: 0;
	}
}

.archive .articles li + li h3 {
	margin-block-start: var(--textgrid-h3);
}

.sidebar li {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	font-family: var(--font-sans-cond);
	margin-block-end: calc(var(--textgrid-sm-looser) / 4);
}

nav.pagination {
	margin-block-start: var(--textgrid-body);

}

.search {
	text-align: center;
	margin-block-end: var(--textgrid-body);
}

.home h1 span {
	color: inherit;
	display:block;
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	font-weight: 650;
}

.home .intro {
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	margin-block-end: calc(var(--textgrid-body) * 2);
	max-inline-size: calc(36 * var(--step-2));
}

.home .sidebar * + h3 {
	margin-block-start: var(--textgrid-body);
}

.lastfm li {
	clear: left; /* yay! */
}

.lastfm img {
	height: calc(var(--textgrid-sm-looser) * 2);
	margin-bottom: calc(var(--textgrid-sm-looser) / 2);
	float: left;
	margin-right: calc(var(--textgrid-sm-looser) / 2);
}

.lastfm + ul {
	clear: left;
}

/* @group Header */

header.global, footer.global {
	padding-top: var(--textgrid-body-flow);
	padding-bottom: var(--textgrid-body-flow);
	padding-left: var(--bodypadding);
	padding-right: var(--bodypadding);
}

.masthead nav, #theme-switcher {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	display: flex;
	gap:0.25em;
	align-items: center;
}

header.global a {
	color: var(--color-headfoot-link);
	text-decoration: underline;
	text-decoration-color: var(--color-headfoot-linkline);
	opacity: 0.8;
}

header.global a:hover, header.global a:active, header.global a:focus {
	opacity: 1;
	text-decoration-color: var(--color-headfoot);
}

#theme-switcher {
	display: none; /* make available when JS loads... */
	color: var(--color-headfoot-link);
}

@supports(color:light-dark(#fff,#000)) {
	#theme-switcher.visible { /* ...but only if light-dark() is supported */
		display: flex;
	}
}

#theme-switcher legend {
	position: absolute;
	left: -100vw;
}

#theme-switcher label {
	position: relative;
	padding-inline: 0.125em;
	translate: 0 calc(0.5ex - 0.5cap);
}

input[name="color-theme"] { /* position input over SVG and hide it */
  opacity: 0;
  position: absolute;
  left:-0.05em;
  top:0.2em;
  height:1em;
  width:1em;
  cursor: pointer;
}

#theme-switcher label svg {
	opacity: 0.4;
	transition-property: color, opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	width: 1em;
	height: 1em;
	cursor: pointer;
}

#theme-switcher label:hover svg,
#theme-switcher input[name="color-theme"]:focus + svg  {
	opacity: 1;
}

#theme-switcher input[name="color-theme"]:checked + svg {
	opacity: 0.8;
}

#theme-switcher input[name="color-theme"]:checked,
#theme-switcher input[name="color-theme"]:checked + svg {
	cursor: auto;
}

.searchlink.icon {
	gap:0.25em;
}

.searchlink svg {
	translate: 0 calc(0.5cap - 0.5ex);
}

#logo {
	font-size: var(--step-4);
	font-family: var(--font-h1);
	font-weight: 850;
	font-variation-settings: "opsz" 52;
	line-height: 1;
	margin-block-end: 0.25em;
}

#logo a {
	opacity: 0.9;
	text-decoration: none;
}

#logo a:hover, #logo a:focus {
	text-shadow: 0px 0px 0.1em rgba(255, 255, 255, 0.5);
	opacity: 1;
}

@media all and (max-width: 28em) {
	.searchlink span {
		display:none;
	}
}

/* @end */

/* @group Footer */

footer.global {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	padding-bottom: var(--textgrid-body);
}

footer.global a {
	color: var(--color-headfoot-link);
	text-decoration: underline;
	text-decoration-color: var(--color-headfoot-linkline);
	opacity: 0.8;
}

footer.global a:hover, footer.global a:active, footer.global a:focus {
	opacity: 1;
	text-decoration-color: var(--color-headfoot);
}

footer .icons {
	display: flex;
	min-width: 4em;
}

footer .icon {
	margin-inline: 0.25em;
}

footer .icon img {
	height: var(--iconsize, 1em);
	max-width: none;
}

/* @end */

/* @group Code block */

figure.pre {
	text-align: left;
}

div[data-element="code-block"] {
	position: relative;
	padding: var(--textgrid-body) var(--textgrid-body-flow);
	box-sizing: border-box;
	background-color: var(--color-codeblock);
	border-radius: calc(var(--textgrid-body) / 2);
}

pre {
	font-size: calc(19/21 * var(--step-0));
	line-height: calc(21/19 * var(--textgrid-body-tighter));
}

pre code, pre var, pre samp, pre kbd {
	/* show code blocks full size */
	font-size: 1em;
	font-stretch: 100%;
}

.code-block__header {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  z-index: 1;
}

.code-block__header button, .code-block__alert {
	padding: .25em 1em;
	border-radius: 0 .5em;
	font-family: var(--font-mono);
	-webkit-hyphens: manual;
	hyphens: manual;
	font-weight: 500; /* prefer a slightly bolder look, more like Consolas */
	font-style: normal;
	line-height: 1;
	text-box-trim: both;
	text-box-edge: cap alphabetic;
	font-size: var(--step--1);
	border: 0;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-button);
	background: var(--color-button-bg);
 }

.code-block__header button:hover, .code-block__header button:focus {
	color: var(--color-button-hover);
	background: var(--color-button-bg-hover);
}

 .code-block__alert {
 	cursor: default;
 	position: absolute;
 	right: 0;
 	top: 0;
 	inline-size: 21ch;
 }

/* @end */


/* @group Pagination control fwiw */

body {
	orphans: 2;
	widows: 2;
}

h1, h2, h3, h4, h5, h6, caption, blockquote footer, figure, table {
	break-inside: avoid;
}

h1, h2, h3, h4, h5, h6 {
	break-after: avoid;
}

caption, blockquote footer {
	break-before:avoid;
}

/* @end */

/* @group Prism */

.token.comment {
	font-size: var(--step--1);
}

/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	text-align: left;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Code blocks */
pre[class*="language-"] {
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: light-dark(slategray, hsl(30, 20%, 50%));
}

.token.punctuation {
	color: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 40%));
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: light-dark(#905, hsl(350, 40%, 70%));
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: light-dark(#690, hsl(75, 70%, 60%));
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: light-dark(#9a6e3a, hsl(40, 90%, 60%));
	/*background: hsla(0, 0%, 100%, .5);*/
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: light-dark(#07a, hsl(350, 40%, 70%));
}

.token.function,
.token.class-name {
	color: light-dark(hsl(348, 68%, 58%), hsl(348, 68%, 58%));
}

.token.regex,
.token.important,
.token.variable {
	color: light-dark(#e90, #e90);
}

.token.important,
.token.bold {
	font-weight: 600;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/* @end */

/* @group Post-specific styling */

@font-face {
	font-family: 'Museo';
	src: url('/fonts/museo700.woff') format('woff');
	font-weight:700;
	}
h2.museo {
	font-family: "Museo", serif
}

/* @end */