/* @group Reset */

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

/* Prevent font size inflation see https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
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 {
	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 headings and captions */
h1, h2, h3, h4, h5, h6, 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;
}

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 {
	--colour-headfoot: rgba(255,255,255,0.6);
	--colour-headfoot-link: #fff;
	--colour-headfoot-bg: rgb(67, 65, 63);
	--colour-headfoot-linkline: rgba(255,255,255,0.2);
	--colour-spine: #fff;
	--colour-spine-bg: #dc423b;
	--colour-page: #000;
	--colour-page-bg: #dcd9d4;
	--colour-linkline: rgba(0,0,0,0.3);
	--colour-linkline-hover: rgba(0,0,0,0.6);
	--colour-link-hover: rgb(231, 25, 1);
	--colour-h1: rgba(0,0,0,0.8);
	--colour-h1-span: rgba(0,0,0,0.4);
	--colour-monospace: #555;
	--colour-note: #555;
	--colour-codeblock: rgba(255, 255, 255, 0.5);
	--colour-button: #555;
	--colour-button-hover: #fff;
	--colour-button-bg: #fff;
	--colour-button-bg-hover: #555;
	--colour-line-light: rgba(0,0,0,0.13);
} 

/* @end */

/* @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;
}

: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 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; }
}

/* @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-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(--colour-page-bg);
	color: var(--colour-page);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--textgrid-body);
}

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

main {
	margin-block-end: auto;
	background: var(--colour-spine-bg);
	color: var(--colour-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(--colour-page-bg);
	color: var(--colour-page);
	padding-top: calc(var(--textgrid-body) * 2);
	padding-bottom: calc(var(--textgrid-body) * 2);
	flex-grow:1;
}

h1 {
	font-size: calc(var(--step-8) + 1.75vh);
	line-height: var(--textgrid-h1);
	color: var(--colour-h1);
	font-weight: 900;
	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));
}

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

h2 {
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	font-weight: 650;
	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);
	font-weight: 650;
	clear: right;
}

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

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

h4 {
	font-weight: 600;
}

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

blockquote {
	font-style: italic;
	border-left: 2px solid var(--colour-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.83ch;
}
.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);	
}

dt {
	font-weight: 650;
}

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

/* @group Tables */

figure.fig-table {
	max-inline-size: 100%;
	overflow-x: auto;
}

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

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

th, td {
	padding: 0.5em;
	border-bottom: 1px solid var(--colour-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);
}

th {
	font-weight: 600;
	vertical-align: bottom;
}

td {
	vertical-align: top;
}

caption {
	caption-side: bottom;
}

/* @end */

/* @end */

/* @group Inline styling */

a {
	text-decoration: underline;
	text-decoration-color: var(--colour-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(--colour-link-hover);
	text-decoration: underline;
	text-decoration-color: var(--colour-linkline-hover);
}

pre, code, var, samp, kbd {
	font-family: var(--font-mono);
	-webkit-hyphens: manual;
	hyphens: manual;
	font-weight: 500; /* prefer a slightly bolder look, more like Consolas */
	font-style: normal;
	color: var(--colour-monospace);
	 /* tweak monospace to fit in nicer with body text */
	font-size: calc(1em * 18 / 17); 
	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(--colour-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(--colour-spine-bg);
	padding: var(--textgrid-body-flow);
}

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

/* @end */

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

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

.categories::before {
	content: "§";
	color: var(--colour-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 table, 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(--colour-note);
	margin-block: var(--textgrid-body);
}

.group-with-aside aside p {
	padding-left: 0.5em;
	border-left: 2px solid var(--colour-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(--colour-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(--colour-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;
}

.comment + .comment {
	margin-block-start:0;
}

.icon {
	display: inline-block;
	width: 1em;
	text-align: center;
	margin-inline-end: 0.25em;
}

.icon img, .icon svg {
	max-height: 0.9em;
	max-width: 1em;
	vertical-align: baseline;
}

.comment a {
	text-decoration: none;
}

.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(--colour-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(--colour-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(--colour-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(--colour-line-light);
	border-right: 1px solid var(--colour-line-light);
	padding-block: var(--textgrid-body);
	padding-inline-end: 2.5%;
	margin-inline-start: 2.5%;
}

.archive .sidebar {
	border-top: 1px solid var(--colour-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;
	}
}

.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 {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);	
	margin-block-start: 0.25em;
}

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

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

#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;
}

.searchlink svg {
	width: 1em;
	height: 1em;
}

@media all and (max-width: 22em) {
	.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(--colour-headfoot-link);
	text-decoration: underline;
	text-decoration-color: var(--colour-headfoot-linkline);
	opacity: 0.8;
}

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

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

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

/* @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(--colour-codeblock);
	border-radius: calc(var(--textgrid-body) / 2);
}

pre {
	font-size: var(--step-0);
	line-height: 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(--colour-button);
	background: var(--colour-button-bg);
 }

.code-block__header button:hover, .code-block__header button:focus {
	color: var(--colour-button-hover);
	background: var(--colour-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: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

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

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #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 */