/* @group Reset */

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,
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, i, b, mark, span, br,
ins, del,
img, iframe, embed, object, video, audio, canvas, map, area,
table, caption, colgroup, tbody, thead, tfoot, tr, td, th,
form, fieldset, legend, label, input, button, select, textarea,
details, summary, command, menu {
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}

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

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

input,
button,
textarea,
select {
  font: inherit;
}

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

body {
  min-height: 100vh;
}

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

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* @end */

/* @group Webfonts */



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

@font-face {
	font-family: 'Literata';
	src: url('/fonts/Literata-Italic-var.woff2') format('woff2');
	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');
	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');
	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');
	font-weight: 1 1000;
	font-stretch: 50% 200%;
	font-style: normal;
	font-display: fallback;
}

/* @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;
}
article h5, article 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 { /* no smallcaps in headings */	
	font-variant-caps: normal;
}

/* over-ride for Safari which synths small-caps with font-variant-caps when there is any character not defined as an opentype small cap glyph */

.isSafari article h5, .isSafari article h6,
.isSafari .c2sc,
.isSafari .smcp {
	font-variant-caps: normal;	
	--bodytext-smcp: "smcp" on;
    --bodytext-c2sc: "c2sc" on;
    font-feature-settings: var(--bodytext-c2sc), var(--bodytext-smcp);
}

.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 Colour */

body {
	color: #c8c3bb;
	background: rgb(67, 65, 63);

}

main {
	background: #dc423b;
	color: #fff;
}

article.post {
	background: #dcd9d4;
	color: #000;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,0.3);
	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: rgb(231, 25, 1);
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,0.6);
}

pre, code, var, samp, kbd {
	color: #555;
}

figure.pre {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: calc(var(--textgrid-body) / 2);
}

.code-block__header button, .code-block__alert {
	background: #fff;
	color: #555;
}

.code-block__header button:hover, .code-block__header button:focus {
	background: #555;
	color: #fff;
}

figcaption, caption, .meta, .tags a, .date, .group-with-aside aside {
	color: #555;
}

.archive h1 span {
	color: rgba(0,0,0,0.4);
}

header.global a, footer.global a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.2);
	opacity: 0.8;
}

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

a.icon {
	text-decoration: none;
}

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

/* @end */

/* @group Layout */

footer.global, .masthead {
	padding-left: 3px;
}

main {
	padding-left: max(3px,5%);
}

article.post h1, div.prose, .relatedposts, .next-prev, .home header {
	margin-left: 2.5%;
	margin-right: 2.5%;
}

.meta, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose blockquote, div.prose>p, .group-with-aside, article.post div.prose>ol, article.post div.prose>ul, article.post div.prose>dl, figure, .prose caption, .prose pre, .tags, .contactcard {
	margin-left: auto;
	margin-right: auto;
	max-width: calc(36 * var(--step-0));
}

@media all and (min-width: 92em) { /* desktop */
	article.post {
		max-width: calc(82.5 * var(--step-0));
		margin-left: auto;
		margin-right: 2em;
	}
	
}

figure.fullbleed {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

figure.inline {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
}

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

div.inline-holder {
	width: 11.5em;
	position: absolute;
	right: -13em;
}

.group-with-aside aside {
	width: 11.5em;
	position: absolute;
	right: -13em;
	top: 0;
	margin:0.375em 0;
}

.group-with-aside aside p {
	border-left: 2px solid #999;
	padding-left: 0.5em;
}

@media all and (max-width:78.5rem) {
	figure.inline {
		float: right;
		max-width: 11.5em;
		margin-top: 0.25em;
		margin-bottom: 0.5em;
		margin-left:2.5%;
		margin-right: 2.5%;
	}
	div.inline-holder {
		padding-top: 0;
		width: auto;
		position: static;
		right: auto;
	}
}

@media all and (max-width:41rem) {
	figure.inline {
		max-width: 47.5%;
	}
}

@media all and (max-width:72rem) {
	.group-with-aside aside {
		width: 8em;
		right: -9.5em;
	}
}

@media all and (max-width:64.5rem) {
	.group-with-aside aside {
		width: auto;
		position: static;
		right: auto;
		top: 0;
	}
}

.meta {
	display: flex;
	justify-content: space-between;
	width:95%;
	padding:0 2px;
}

.tags {
	width:95%;
}

@media all and (min-width: 38.125em) { /* 610px when prose hits max width */
	.relatedposts .articles  {
		display: flex;
	}
	
	.relatedposts .articles li {
		flex: 1;
		max-width:36em;
		padding-right: 0.75em;
		padding-left: 0.75em;
	}
	
	.relatedposts .articles li:first-of-type {
		padding-left: 0;
	}
	
	.relatedposts .articles li:last-of-type {
		padding-right: 0;
	}
}

@media all and (min-width: 25.875em) { /* 414px */
	.next-prev .articles {
		display: flex;
		column-gap: 1.5em;
		flex-direction: 	row-reverse;
		justify-content: space-between;
	}
	
	.next-prev li:first-of-type {
		text-align: right;
	}
	h5.newer::before {
		content:"←";
	}
	h5.older::after {
		content:"→";
	}
}

footer.global, .masthead {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: center;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

.copyright {
	order: 1;
	white-space: nowrap;
	padding-right: 1.5em;
}

.icons {
	order: 2;
	display: flex;
}

.colophon {
	order: 3;
	white-space: nowrap;
	padding-right: 1.5em;
}

@media all and (min-width: 36em) { /* when copyright fits nexts to colophon */
	.copyright {
		padding-right: 0;
	}
	.icons {
		order: 3;
	}
	
	.colophon {
		order: 2;
		padding-right: 0;
	}
}

.archive section {
	display: flex;
	flex-direction: column;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

.archive .listing {
	flex: 2;
}

.archive .articles {
	max-width: 36em;
	
}

.categorylist {
	flex: 1;
	min-width: 12em;
	padding-left: 0;
	margin-left: 0;
	border-top: 1px solid rgba(0,0,0,0.13);
}
 
 @media all and (min-width: 36em) { /* when listing articles become too narrow */
 	.archive section {
 		flex-direction: row;
 	}
 	.archive .categorylist {
 		margin-top: 0;
 		margin-left: 2.5%;
 		padding-left: 2.5%;
 		padding-top: 0;
 		border-top: 0;
 		border-left: 1px solid rgba(0,0,0,0.13);
 	}
 }
 
 .pagination {
 	display: flex;
 	justify-content: space-between;
 }

/* @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-tighter: 1.15em;

--textgrid-h2: 1.25em;

--textgrid-h3: 1.25em;

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

/* @end */

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

article.post {
	padding-bottom: calc(var(--textgrid-body) * 2);
}

#logo {
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	margin-top: calc(var(--textgrid-h2) / 2);
	margin-bottom: calc(var(--textgrid-h2) / 2);
}

h1 {
	font-size: calc(var(--step-8) + 1.75vh);
	line-height: 1;
}

h2 {
	font-size: var(--step-4);
	line-height: var(--textgrid-h2);
	margin-top: var(--textgrid-h2);
	margin-bottom: calc(var(--textgrid-h2) / 8);
}

h3 {
	font-size: var(--step-2);
	line-height: var(--textgrid-h3);
	margin-top: var(--textgrid-h3);
	margin-bottom: calc(var(--textgrid-h3) / 8);
}

h4, h5, h6 {
	font-size: var(--step-0);
	line-height: var(--textgrid-body);
	margin-top: calc(var(--textgrid-body) / 2);
}

/* @group Fix for automatic optical-size font styling regression in Safari 16 */

.isSafari16 body {
	font-variation-settings: "opsz" 25;
}

.isSafari16 h1 {
	font-variation-settings: "opsz" 60;
}

.isSafari16 h2 {
	font-variation-settings: "opsz" 35;
}

.isSafari16 h3 {
	font-variation-settings: "opsz" 30;
}

.isSafari16 blockquote footer, .isSafari16 footer.global {
	font-variation-settings: "opsz" 12;	
}

/* @end */

p, ul, ol, dl, dd, blockquote {
	margin-bottom: calc(var(--textgrid-body) / 2);
}

figure {
	margin-top: var(--textgrid-body);
	margin-bottom: var(--textgrid-body);
}

figure.fig-table {
	margin-bottom: calc(var(--textgrid-body) / 2);
}

table {
	margin-bottom: calc(var(--textgrid-body) / 2); /* leaves enough room for scrollbar */ 
}

li {
	margin-left: var(--textgrid-body);
}

blockquote {
	margin-top: calc(var(--textgrid-body) / 2);
}

blockquote p {
	margin-bottom: 0;
	padding-left: calc(var(--textgrid-body) / 2);
	margin-left: calc((var(--textgrid-body) / 2) - 2px);
}

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

aside p {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
}

figcaption, caption, blockquote footer {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);
	padding-top: calc((var(--textgrid-sm) - var(--step--1)) * 2);
}

figure.pre {
	padding: var(--textgrid-body);
	box-sizing: border-box;
}

pre {
	font-size: calc(var(--step-0));
	line-height: var(--textgrid-body);
}

th, td {
	font-size: calc(var(--step-0) * 20 / 21) ; /* make a bit smaller to closer match Literata */
	line-height: var(--textgrid-sm);
}

.meta {
	margin-bottom: var(--textgrid-body);
}

.published, .categories {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);
}

.tags {
	margin-top: calc(var(--textgrid-body) * 2);
	margin-bottom: calc(var(--textgrid-body) * 2);
}

.tags ul, .comment {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);	
}

.relatedposts {
	padding-top: calc(var(--textgrid-body) / 2);
}

.relatedposts article {
	margin-top: var(--textgrid-body);
	margin-bottom: var(--textgrid-body);
}

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

.articles .summary {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	margin-top: calc(var(--textgrid-sm-looser) / 4);
}

.date {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
	margin-top: calc(var(--textgrid-sm-looser) / 4);
}

.archive section {
	padding-top: var(--textgrid-body);
}

.listing li {
	margin-bottom: var(--textgrid-body);
}

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

.archive .articles .summary {
	font-size: var(--step-0);
	line-height: var(--textgrid-body);
	margin-top: calc(var(--textgrid-body) / 4);
}
.archive .date {
	margin-top: calc(var(--textgrid-body) / 4);
}
.categorylist {
	margin-top: var(--textgrid-body);
	padding-top: calc(var(--textgrid-body) / 2);
}

.categorylist ul {
	margin-top:  calc(var(--textgrid-body) / 2);
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);	
}

.categorylist li {
	margin-bottom: calc(var(--textgrid-sm-looser) / 4);	
}

.next-prev {
	padding-top: calc(var(--textgrid-body) / 2);
}

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

.masthead nav {
	font-size: var(--step--1);
	line-height: var(--textgrid-sm);		
}

form.search {
	margin-top: calc(var(--textgrid-body) * -1);	
	margin-bottom: var(--textgrid-body);
	font-size: var(--step-0);
}

.search input {
	line-height: var(--textgrid-body);
	font-size: inherit;
}

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

h2.home-latest-posts {
	margin-top: 0;
	margin-bottom: var(--textgrid-h2);
}

.elsewhere {
	margin-bottom: var(--textgrid-body);
}

.elsewhere p {
	margin-top: calc(var(--textgrid-sm)/2);	
	margin-bottom: var(--textgrid-body);
	font-size: var(--step--1);
	line-height: var(--textgrid-sm-looser);
}

.album_cover {
	height: calc(var(--textgrid-sm-looser) * 2);	
	margin-bottom: calc(var(--textgrid-sm-looser) / 2);
}

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

/* @end */


/* @group block element styling */

article {
	text-wrap:pretty;
	orphans: 2;
	widows: 2;
}

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

body {
	font-family: "Literata", "Cambria", "Roboto Slab", "Georgia", "Times New Roman", serif, ".PhoneFallback", "Arial Unicode MS";
}

h1 {
	font-family: "Literata", "Hoefler Text", "Cambria", "Roboto Slab", Georgia, "Times New Roman", serif;
	color: rgba(0,0,0,0.8);
	font-weight: 900;
	text-align: center;
	padding-top: 1.5em;
	margin: 0 0 2em 0;
}

.nometa h1 {
	margin-bottom: 1.5em;
}

h2, h3 {
	font-weight: 650;
}

h4 {
	font-weight: 600;
}

h5, h6 {
	font-weight:500;
}

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

h1, h2, h3, h4, h5, h6, caption, blockquote, blockquote footer, figcaption {
	text-wrap:balance;
}

blockquote {
	font-style: italic;
	margin-top: 1em;
	margin-bottom: 1em;
}

blockquote p, blockquote footer {
	border-left: 2px solid rgba(0,0,0,0.13);
}

blockquote footer {
	text-align: right;
	font-style: normal;
}

.quoted p, .quoted footer {
	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-left: -0.83ch;
}
.quoted p {
    hanging-punctuation: first last;
}
@supports(hanging-punctuation: first last) {
    .quoted p:first-of-type::before {
        margin-left: 0;
    }
}

ul {
	list-style-type: disc;
}

dt {
	font-weight: 650;
}

ol ol, ol ul, ul ul, ul ol {
    margin-top: 0;
    margin-bottom: 0;
}

pre {
	white-space: pre-wrap;
}

article.post section+section::before {
	content: "§";
	text-align: center;
	display: block;
	margin-bottom: 1.5em;
}

.contactcard p {
	margin-bottom: 0;
}

/* @end */

/* @group Inline element styling */

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

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

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

strong strong {
	text-decoration: underline;
}

pre, code, var, samp, kbd, .code-block__header button, .code-block__alert {
	font-family: "inconsolata", "consolas", "andale mono", "droid sans mono", monospace, "Lucida Grande", "Arial Unicode MS";
	-webkit-hyphens: manual;
	hyphens: manual;
	font-weight: 500; /* prefer a slightly bolder look, more like Consolas */
	font-style: normal;
}

code, var, samp, kbd {
	font-size: 1.06em; /* ~18px in 17px text to more closely match Literata */
}

pre code, pre var, pre samp, pre kbd, kbd kbd {
	font-size: 1em;
}

p code, p var, p samp, p kbd {
	font-stretch: 95%; /* condense slightly to fit in nicer with running text */
}

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

del {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: rgba(0,0,0,0.3);
	
}
/* @end */

/* @group images and figures */

figure {
	display: block;
	page-break-inside: avoid;
	text-align: center;
}

figure.pre {
	text-align: left;
	position: relative;
}

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

.code-block__header button, .code-block__alert {
  line-height: 1;
  font-size: var(--step--1);
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
 }
 
 .code-block__alert {
 	cursor: default;
 	position: absolute;
 	right: 0;
 	top: 0;
 	width: 17ch;
 }
 
 .code-block__alert, .code-block__header button {
  padding: .25em 1em;
  border-radius: 0 .5em;
  margin: 0;
}

figcaption, caption, .group-with-aside aside {
	font-family: "Plex Sans", "Avenir Next Condensed", "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
	font-style: normal;
	font-stretch: 85%;
}

figcaption, caption {
	text-align: center;
}

div.inline-holder, .inline figcaption {
	text-align: left;
}

.icon {
	display: inline-block;
	width: 1.5em;
	text-align: center;
}

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

.elsewhere.links img {
	vertical-align:top;
	margin-top: 0.125em;
}

/* @end */

/* @group Tables */

figure.fig-table {
	max-width: 95%;
	overflow-x: auto;
}

table {
	border-collapse: collapse;
	page-break-inside: avoid;
	margin-left: auto;
	margin-right: auto;
}

tbody {
	border-top: 2px solid rgba(0,0,0,0.13);
	border-bottom: 2px solid rgba(0,0,0,0.13);
}

tr {
	font-family: "Plex Sans", "Avenir Next", "PT Sans", "Segoe UI", "Roboto", sans-serif;
	font-stretch: 100%;
}

th {
	-webkit-hyphens: manual;
	hyphens: manual;
	font-weight: 600;
}

th, td {
	padding-right: .5em;
	padding-left: .5em;
	padding-top: .25em;
	padding-bottom: .5em;
	vertical-align: top;
	border-bottom: 1px solid rgba(0,0,0,0.13);
}

figure th, figure td {
	text-align: left;
}

th:first-child, td:first-child {
	padding-left: 0.25em;
}

th:last-child, td:last-child {
	padding-right: 0.25em;
}

td.nums, th.nums, tr.nums th, tr.nums td {
	text-align: right;
}

caption {
	caption-side: bottom;
}

/* @end */

/* @group Meta and Related */

.meta, .tags, .date {
	font-family: "Plex Sans", "Avenir Next Condensed", "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
	font-style: normal;
	font-stretch: 85%;
}

.meta {
	border-bottom: 1px solid rgba(0,0,0,0.13);
	padding-bottom: 0.333333em;
}

.meta ul, .meta p {
	margin-bottom: 0;
}

.meta p {
	padding-right: 1em;
}

.categories li {
	list-style: none;
	margin-left:0;
	display: inline-block;
}

.categories li:first-of-type::before {
	content: "§";
	color: #000;
	padding-right:0.15em;
	margin-left: -0.575em;
}
  
.categories li a {
	text-decoration: none;
}

.tags {
	color: #000;
}

.hash {
	font-size: 1.3em;
	margin-top: -0.2em;
	width: .666666667em;
	display: inline-block;
	float: left;
	padding-right: 0.15em;
}

.tags li {
	list-style: none;
	margin-left:0;
	padding-right: 0.25em;
	display: inline;
	-webkit-hyphens: manual;
	hyphens: manual;
	white-space: nowrap;
}
  
.tags li a:link {
  	text-decoration: none;
}

.comment {
	margin-bottom: 0;
}

.comment a {
  	text-decoration: none;	
}

.comment .icon {
	width: 1em;
	vertical-align:baseline;
}

.relatedposts {
	border-top: 2px solid rgba(0,0,0,0.13);
	border-bottom: 1px solid rgba(0,0,0,0.13);
}

.relatedposts h2 {
	margin-top: 0;
}

ul.articles {
	list-style: none;
}

.articles {
	margin-bottom: 0;
}

.articles li {
	margin-left: 0;
}

.articles h3 {
	-webkit-hyphens: manual;
	hyphens: manual;
	margin-top: 0;
}

.articles .summary {
	margin-bottom: 0;
}

/* @end */

/* @group Home page */

.introblock {
	margin-top: 10vmin;
	margin-bottom: 15vmin;
	margin-left:2.5%;
	margin-right:2.5%;
}

.home .hgroup {
	text-align: center;
	padding-top: 10vmin;
}

.home h2 {
	margin-top: 0;
}

.home h1 {
	padding-top: 0;
	margin: 0;
}

.home header p {
	max-width: 27em;
	margin-left:auto;
	margin-right: auto;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.elsewhere {
	overflow:auto;
}

.elsewhere h3 {
	margin-top: 0;
	clear:left;
}

.album_cover {
	float: left;	
	margin-right: 0.5em;
}

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

/* @end */

/* @group Archive & Search */

.archive section {
	border-top: 1px solid rgba(0,0,0,0.13);
	
}

.categorylist h2 {
	margin-top: 0;
}

.categorylist li {	
	font-family: "Plex Sans", "Avenir Next", "PT Sans", "Segoe UI", "Roboto", sans-serif;
	list-style: none;
	margin-left:0;
	font-stretch: 100%;
}

form.search {
	text-align: center;
}

.search input {
	font-family: "Plex Sans", "Avenir Next", "PT Sans", "Segoe UI", "Roboto", sans-serif;
	font-stretch: 100%;
}

/* @end */



/* @group Masthead */

#logo {
	font-family: "Literata", "Cambria", "Roboto Slab", Georgia, "Times New Roman", serif;
	font-weight: 850;
	font-variation-settings: "opsz" 52;
}

.searchlink-icon {
	border: 0;
	text-decoration: none;
}

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

.searchlink-text {
	margin-left: 0.125em;
}

.searchlink-text {
	display: none;
}

@media all and (min-width: 22em) {
	.searchlink-text {
		display: inline;
	}
}

/* @end */

/* @group Footer */

footer.global {
	padding-top: 1em;
	padding-bottom: 1em;
}

.global p {
	margin-bottom: 0;
}

footer.global .icons a {
	text-align: right;
}

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

/* @group Prism */

/* 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 */