/* FONT FACES!!! */

@font-face {
  font-family: 'Eczar';
  font-weight: 400;
  font-display: swap;
  src: local('Eczar Regular'), local('Eczar-Regular'), url(/ui/f/Eczar/Eczar-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Eczar';
  font-weight: 500;
  font-display: swap;
  src: local('Eczar Medium'), local('Eczar-Medium'), url(/ui/f/Eczar/Eczar-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Eczar';
  font-weight: 600;
  font-display: swap;
  src: local('Eczar SemiBold'), local('Eczar-SemiBold'), url(/ui/f/Eczar/Eczar-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Eczar';
  font-weight: 700;
  font-display: swap;
  src: local('Eczar Bold'), local('Eczar-Bold'), url(/ui/f/Eczar/Eczar-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Eczar';
  font-weight: 800;
  font-display: swap;
  src: local('Eczar ExtraBold'), local('Eczar-ExtraBold'), url(/ui/f/Eczar/Eczar-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-display: swap;
  src: local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url(/ui/f/IMFell/IM_FELL_English_Roman.woff2) format('woff2');
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-display: swap;
  src: local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url(/ui/f/IMFell/IM_FELL_English_Italic.woff2) format('woff2');
}
@font-face {
  font-family: 'IM Fell English SC';
  font-style: normal;
  font-display: swap;
  src: local('IM FELL English SC'), local('IM_FELL_English_SC'), url(/ui/f/IMFell/IM_FELL_English_SC.woff2) format('woff2');
}

/* --------------------------------------------------------------------------------- 
   Generic styles
   --------------------------------------------------------------------------------- */

html, body {
	margin: 0;
	padding: 0;
	font-family: Georgia Pro, Georgia, serif;
	line-height: 1.2;
	min-height: 100vh;
}
html {
	background: #FFF; /* hack to force the body background to stay on body and not be hoisted to the canvas, thus allowing Chrome to composite things onto the body background */
}
@media (prefers-color-scheme: dark) {
	html {filter: invert(1);}
	/* the following really should be managed by a cascade layer */
	html img, 
	html video, 
	html iframe, 
	html img.book.cover, 
	html img.book.cover.big, 
	html #archipelago a:hover img {filter: invert(1);}
	html #thoughts figure.standalone img {
	  box-shadow: 0.25em 0.25em 0.67em #FFF8;
	}
}

body {
	font-size: 102.5%;
	background:
		linear-gradient(180deg, rgba(255,128,0,0.033), 3em, rgba(255,216,0,0) 33em),
		linear-gradient(
			90deg,
			hsla(34deg,0%,96%,0.98) 5%, 10%,
			hsla(34deg,38%,99%,0.95) 25%, 33%,
			hsla(34deg,38%,99%,1) 50%, 67%,
			hsla(34deg,38%,99%,0.975) 75%, 90%,
			hsla(34deg,0%,96%,0.98) 95%
			) 0 0 / 100% 100% no-repeat,
		linear-gradient(179deg, hsla(34deg,38%,99%,1) 11em, hsla(34deg,38%,99%,0) 13em),
		linear-gradient(0deg, hsla(34deg,38%,99%,1) 23em, hsla(34deg,38%,99%,0) 42em),
		hsla(34deg,38%,99%,1)
	;
	color: hsl(33deg,50%,10%);
}

@media (max-width: 40em) {
	body {
		hyphens: auto;
	}
}
@media (min-width: 40em) {
	body {
		background:
			linear-gradient(180deg, rgba(255,128,0,0.033), 3em, rgba(255,216,0,0) 33em),
			linear-gradient(
				90deg,
				hsla(34deg,0%,96%,0.98) 5%, 10%,
				hsla(34deg,38%,99%,0.95) 25%, 33%,
				hsla(34deg,38%,99%,1) 50%, 67%,
				hsla(34deg,38%,99%,0.975) 75%, 90%,
				hsla(34deg,0%,96%,0.98) 95%
				) 0 0 / 100% 100% no-repeat,
			linear-gradient(179deg, hsla(34deg,38%,99%,1) 11em, hsla(34deg,38%,99%,0) 13em),
			linear-gradient(0deg, hsla(34deg,38%,99%,1) 23em, hsla(34deg,38%,99%,0) 42em),
			url(i/hamonshu/bg-waves.png) 0 0,
			url(i/hamonshu/bg-waves.png) 250px -50px,
			hsla(34deg,38%,99%,1)
		;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: Eczar, IM Fell English, Georgia, serif;
	font-weight: 500;
	line-height: 1.2;
	margin: 1.5em 0 0.5em;
}
h2 {font-size: 200%;}
h3 {font-size: 167%;}
h4 {font-size: 133%;}
h5 {font-size: 115%;}
h6 {font-size: 100%;}

h1 {
	font-family: IM Fell English, Eczar, Georgia, serif;
	font-variant-numeric: lining-nums;
	font-size: 400%;
	line-height: 1.1;
	hanging-punctuation: first allow-end;
	margin: 0.67em 0 0.67em -0.1em;
}

@media (max-width: 40em) {
	h1 {font-size: 300%;}
}
@media (max-width: 30em) {
	h1 {font-size: 250%;}
}

#main > h1 + p::first-line,
#main > h2 + p::first-line,
#main > h3 + p::first-line {
	font-size: 110%;
	line-height: 1.33;
}
p.note {
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
}
p.signature {
	font-family: IM Fell English SC, Eczar, Georgia, serif;
	font-style: italic;
	font-size: 120%;
}
p.signature::before {
	content: "— ";
}

.title a[href] {
	text-underline-offset: 0.15em;
}

a[href] {
	text-decoration-thickness: 0.03875em;
	text-underline-offset: 0.2em;
	text-decoration-color: hsl(13deg,13%,67%);
	color: hsl(13deg,33%,42%);
}
a[href]:hover {
	text-decoration-thickness: 0.125em;
	text-underline-offset: 0.15em;
	text-decoration-color: currentColor;
}
@supports (text-decoration-thickness: 1px) {
	a[href]:hover {
		color: hsl(33deg,99%,33%);
	}
}

h1 a[href], h2 a[href], h3 a[href] {
	text-decoration-color: currentColor;
}

img, video {
	max-width: 100%;
	height: auto;
}

code, kbd, tt, pre, xmp {
	font-family: Consolas, monospace;
	font-size: 0.933em;
	hyphens: none;
}
code {
	color: hsl(25deg,75%,25%);
}
kbd {
	color: hsl(145deg,75%,25%);
}
tt {
	color: hsl(25deg,15%,40%);
}

pre > code {
	margin: 1em 0;
	line-height: 1.2;
}
:not(pre) > code, :not(pre) > kbd {
	background: hsla(25deg,75%,25%,0.1);
	padding: 0.15em 0.33em 0.1em;
	border: solid #FFF8;
	border-width: 2px 0;
}
:not(pre) > kbd {
	background-image: linear-gradient(135deg, transparent,rgba(255,255,255,0.1),transparent);
	background-color: hsla(25deg,0%,0%,0.1);
}

pre, xmp {
	margin: 1.5em 0.25ch;
	border-radius: 0.25em;
	padding: 1em;
	background:
		linear-gradient(to right, hsla(25deg,0%,33%,0.1), 67%, hsla(25deg,0%,33%,0.075));
	white-space: pre-wrap;
	overflow-wrap: break-word;
	tab-size: 2.5;
}
pre + pre, xmp + xmp {
	margin-top: -0.5em;
}
pre[class], xmp[class] {
	background:
		linear-gradient(to right, hsla(25deg,75%,25%,0.1), 67%, hsla(25deg,75%,25%,0.075));
}

pre[class]::before, xmp[class]::before {
	display: block;
	padding: 0.125ch;
	margin: -1em -1em 1em;
	border-radius: 0.25em 0 0 0.25em;
	content: attr(class);
	text-align: center;
	text-transform: uppercase;
	font: 600 90% Eczar, serif;
	background: hsla(25deg,75%,31%,0.075);
	color: hsla(33deg,50%,10%,0.75);
}

@media (min-width: 40em) {
	pre[class], xmp[class] {
		display: grid;
		grid-template-columns: 1fr min-content;
		margin-right: -1.75em;
		padding: 0 0 0 1em;
	}
	pre[class]::before, xmp[class]::before {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0 0 0 1em;
		padding-left: 0.05ch;
		writing-mode: vertical-lr;
	}
}

del {
	opacity: 0.4;
	text-decoration-thickness: 0.2em;
	text-decoration-color: rgba(0,0,0,0.4);
	text-decoration-skip-ink: all;
}
pre code del {
	text-decoration-thickness: 0.15em;
}
ins {
	background: rgba(255,255,0,0.5);
	border: solid #FFF8;
	border-width: 2px 0;
	text-decoration: none;
}
pre code ins {
	border-width: 1px;
	padding-block: 1px;
	
}

div:not(#main) ul, div:not(#main) ol {
	margin: 0;
	padding: 0;
}

#main > dl dt {
	text-align: left;
	margin: 1.5em 0 0;
	padding: 0;
	border-right: none;
	font-weight: 600;
}
#main > dl dd {
	margin: 0.5em 0;
	padding: 0 0 0 1em;
	max-width: 75ch;
}

@media (min-width: 45em) {
	#main > dl.compact {
		display: grid;
		grid-template-columns: 16ch 1fr;
		align-items: baseline;
	}
	#main > dl.compact dt {
		text-align: right;
		margin: 0.5em 0;
		padding: 0 0.5em 0 0;
		border-right: 0.125em solid rgba(0,0,0,0.5);
	}
	#main > dl.compact dd {
		margin: 0.5em 0;
		padding: 0 0.5em;
		max-width: 75ch;
	}
}

blockquote {
	color: hsl(33deg,5%,33%);
	margin: 1.5em 1em;
	padding: 1em 2em;
	font-style: italic;
	background-image:
		url(i/hamonshu/quote-open.png),
		url(i/hamonshu/quote-close.png),
		linear-gradient(90deg, transparent 1.25em, currentColor 2.5em, transparent),
		linear-gradient(90deg, transparent, currentColor calc(100% - 2.5em), transparent calc(100% - 1.25em))
	;
	background-repeat: no-repeat;
	background-size: auto 1em, auto 1em, 100% 1px, 100% 1px;
	background-position: 0% 0%, 100% 100%, 50% 0%, 50% 100%;
}
blockquote > *:first-child {
	margin-top: 0;
}
blockquote > *:last-child {
	margin-bottom: 0;
}
blockquote p.attrib,
blockquote + p.attrib {
	font-size: 90%;
	font-style: normal;
}


.framed {
	border: 3px double currentColor;
}
img.border {
	border: 2px solid currentColor;
}

img.book {
	border: 1px solid rgba(0,0,0,0.1);
}
img.book.cover {
	filter:
		drop-shadow(0.33em 0.33em 0.125em rgba(0,0,0,0.125))
		drop-shadow(0.25em 0.25em 0.125em rgba(0,0,0,0.33))
		drop-shadow(0.1em 0.1em 0.125em rgba(0,0,0,0.25))
		drop-shadow(0 0 0.2em rgba(0,0,0,0.1))
	;
}
img.book.cover.big {
	filter:
		drop-shadow(0.1em 0.1em 0.125em rgba(0,0,0,0.25))
		drop-shadow(0.15em 0.15em 0.15em rgba(0,0,0,0.25))
		drop-shadow(0.33em 0.33em 0.15em rgba(0,0,0,0.15))
		drop-shadow(0.5em 0.5em 0.2em rgba(0,0,0,0.2))
		drop-shadow(0.67em 0.67em 0.25em rgba(0,0,0,0.25))
		drop-shadow(1.33em 1.33em 0.33em rgba(0,0,0,0.3))
		drop-shadow(0 0 0.2em rgba(0,0,0,0.1))
	;
}

table {
	margin: 1em;
	border-collapse: separate;
	border-spacing: 1px;
}

table caption {
	font-style: italic;
	font-size: 90%;
	line-height: 1.2;
	margin-top: 0.15em;
	caption-side: bottom;
}

table th, table td {
	padding: 0.2em 0.25em 0.1em;
}

table.data {
	margin: 1.5em 0;
	min-width: 50%;
}

table.data :not(caption) {
	font: 1em Source Sans Pro, Open Sans, Helvetica, sans-serif;
}

table.data th {
	padding: 0.5ch 1ch 0.25ch;
	font-weight: 550;
}

table.data td {
	padding: 0.25ch 1ch 0.15ch;
}

table.data thead th {
	background: hsla(30,50%,50%,0.5);
}

table.data tbody tr:nth-child(odd) > * {
	background: hsla(30,50%,50%,0.13);
}

table.data tbody tr:nth-child(even) > * {
	background: hsla(30,50%,50%,0.25);
}

table.data :not(thead) + tbody tr:first-child > * {
	border-top: 2px solid hsla(30,50%,50%,0.5);
}

table.data tbody tr:last-child > * {
	border-bottom: 2px solid hsla(30,50%,50%,0.5);
}

table.chart {
	margin: 1.5em 0;
	border-collapse: separate;
	border-spacing: 0;
}
table.chart th, table.chart td {
	padding: 0.75em 0.5em;
	text-align: left;
	vertical-align: top;
}
table.chart tbody tr td {
	border-top: 1px solid rgba(0,0,0,0.25);
}
table.chart td > :only-child {
	margin: 0;
}

hr.fallback {
	display: none;
}



/* --------------------------------------------------------------------------------- 
   Structural styles
   --------------------------------------------------------------------------------- */

body > #main, body > #thoughts {
		padding-top: 2em;
		padding-left: 1em;
		padding-right: 1em;
		line-height: 1.45;
}

@media (min-width: 40em) {
	body, body.arch {
		display: grid;
		grid-template-columns: [left] minmax(1em,1fr) [main] minmax(10em,40em) [right] minmax(10em,1fr);
		grid-template-rows: repeat(7,min-content) auto repeat(2,min-content);
		grid-gap: 0 2em;
	}
	body.arch {
		grid-template-columns: [left] minmax(7em,1fr) [main] minmax(10em,40em) [right] minmax(10em,1fr);
	}
	body > * {
		grid-column: 1 / -1;
	}
	body > #main, body > #thoughts {
		grid-column: main;
		grid-row: 2 / -3;
		padding: 3em 0 0;
	}
}

/* Masthead */

#sitemast {
	grid-column: 1 / -1;
	grid-row: 1;
	background:
		url(i/hamonshu/header-left.png) 0 100% / auto 50% no-repeat
	;
	min-height: 13em;
	position: relative;
	mix-blend-mode: darken;
}
#sitemast #skiplinks {
	position: absolute;
	bottom: 1.5vh;
	left: -51em;
	width: 10em;
}
#sitemast #skiplinks a {
	display: block;
	background: black;
	color: white;
	margin: 3px;
	padding: 0.25em;
	transition: 150ms;
}
#sitemast #skiplinks a:focus {
	background: #060;
}
#sitemast #skiplinks a:focus,
#sitemast #skiplinks a:focus ~ a {
	transform: translate(52em);
}
#sitemast #skiplinks:focus-within a {
	transform: translate(52em);
}
@media (max-height: 42em) {
	#sitemast #skiplinks {width: auto;}
	#sitemast #skiplinks a {display: inline-block;}
}

#sitemast h1 {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
#sitemast a[href="/"] {
	box-sizing: border-box;
	position: absolute;
	height: 97%;
	width: 100%;
	padding: 0;
	padding-right: 0.1em;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-family: IM Fell English, Eczar, Georgia, serif;
	font-style: italic;
	font-size: 2rem;
	font-weight: 100;
	text-decoration: none;
	color: inherit;
	line-height: 1;
	opacity: 0.75;
}

@media (min-width: 30em) {
	#sitemast {
		background:
			url(i/hamonshu/header-left.png) 0 100% / 45% auto no-repeat,
			url(i/hamonshu/header-right.png) 100% 100% / 45% auto no-repeat
		;
		min-height: 9em;
	}
	@supports (mix-blend-mode: darken) {
		#sitemast {
			background:
				url(i/hamonshu/header-left.png) 0 100% / 45% auto no-repeat,
				url(i/hamonshu/header-right.png) 100% 100% / 45% auto no-repeat,
				linear-gradient(hsla(34deg,38%,99%,0.5), hsla(34deg,38%,99%,0.8)),
				url(i/hamonshu/header-left.png) -9% calc(100% - 4.2vw) / 29% auto no-repeat
			;
		}
	}
	#sitemast h1 {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 50%;
		top: 0;
		left: 50%;
		position: absolute;
	}
}
@media (min-width: 40em) {
	#sitemast {
		min-height: 16vw;
	}
	#sitemast a[href="/"] {
		font-size: 5vw;
		height: 100%;
	}
}

/* Navlinks */

#navigate {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 42;
	font-size: 1.125em;
}
#navlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em 1em 0;
	margin: 0;
	list-style: none;
	font-family: IM Fell English, Georgia, serif;
}
#navlinks li {
	text-align: center;
	padding: 0.25em 0.5em;
}
#navlinks a[href] {
	display: block;
	padding: 0;
	color: hsla(33deg,50%,10%,0.75);
}
body.arch #navigate #navlinks #archLink,
body.css #navigate #navlinks #cssLink,
body.tools #navigate #navlinks #toolsLink,
body.write #navigate #navlinks #writeLink,
body.speak #navigate #navlinks #speakLink,
body.other #navigate #navlinks #otherLink,
body.feeds #navigate #navlinks #feedsLink,
body.about #navigate #navlinks #aboutsite {
	font-weight: 600;
	font-style: italic;
}

@media (min-width: 40em) {
	#navigate {
		position: sticky;
		grid-column: right;
		grid-row: 2;
		background: radial-gradient(ellipse 100% 100% at 75% 50%, hsla(34deg,38%,98%,1) 25%, hsla(34deg,38%,98%,0) 75%);
	}
	#navlinks {
		display: block;
		padding: 0;
		margin-bottom: 2.5em;
	}
	#navlinks li {
		text-align: right;
		padding: 0.25em 1em;
	}
	body.arch #navigate #navlinks #archLink,
	body.css #navigate #navlinks #cssLink,
	body.tools #navigate #navlinks #toolsLink,
	body.write #navigate #navlinks #writeLink,
	body.speak #navigate #navlinks #speakLink,
	body.other #navigate #navlinks #otherLink,
	body.feeds #navigate #navlinks #feedsLink,
	body.about #navigate #navlinks #aboutsite {
		font-weight: 500;
		font-size: 110%;
		background:
			url(i/hamonshu/urhere.png) 100% 50% / 1em auto no-repeat
		;
		padding-right: 1.33em;
	}
	#main {
		grid-column: 1 / - 1;
		grid-row: 3 / span 3;
	}
}

/* global footer */

footer#global::before {
	content: "";
	display: block;
	height: 6.5em;
	background:
		url(i/hamonshu/footer-curl.png) -10px 0 / auto 100% no-repeat,
		url(i/hamonshu/footer-wave.png) 0 100% / auto 2em repeat-x,
		url(i/hamonshu/footer-wave.png) 0 95% / auto 1.5em repeat-x
	;
	mix-blend-mode: darken;
}

@supports (mix-blend-mode: darken) {
	footer#global::before {
		background:
			url(i/hamonshu/footer-curl.png) -10px 0 / auto 100% no-repeat,
			url(i/hamonshu/footer-wave.png) 0 100% / auto 2em repeat-x,
			url(i/hamonshu/footer-wave.png) 0 95% / auto 1.5em repeat-x,
			linear-gradient(179.5deg, hsla(34deg,38%,99%,1), hsl(25deg,0%,97%)) 0 0 / 100% 100%
		;
	}
}

.cp_embed_wrapper {
	margin-block: 2em;
}

footer#global {
	grid-column: 1 / -1;
	grid-row: -2;
	clear: both;
	margin-top: 1em;
	padding: 0;
	font-family: Eczar, IM Fell English, Georgia, serif;
	font-size: 95%;
}
footer#global > div {
	background:
		url(i/heart/663399love.png) 50% 99% / 4em auto no-repeat,
		linear-gradient(-1deg, rgba(0,0,0,0.2), 33%, transparent 90%),
		#EFECEE;
	padding: 3em 3em 4em;
	padding-top: 2em;
}

#archipelago {
	grid-column: 2;
	grid-row: 1/ -1;
}
.sosumi {
	grid-column: 3;
	grid-row: 1;
}
#wordpress.credits {
	grid-column: 3;
	grid-row: 2;
	align-self: start;
}
#design.credits {
	grid-column: 1;
	grid-row: 2;
}
footer#global > div div {
	margin: 1em 0;
}

footer#global strong {
	font-weight: 600;
}

@media (min-width: 50em) {
	footer#global > div {
		display: grid;
		grid-template-columns: 1fr 9em 1fr;
		grid-template-rows: repeat(2,min-content);
		grid-gap: 1em 2.5em;
		padding-right: 4em;
		background-position: 100% 40%, center;
	}
	#excuse, #design {
		text-align: right;
	}
	#excuse, .sosumi {
		align-self: end;
	}
	footer#global > div div {
		margin: 0;
	}
	footer#global strong, footer#global a[href] {
		white-space: nowrap;
	}
}

#archipelago h4 {
	text-align: center;
	margin: 0 0 0.75em;
	font-family: IM Fell English, Eczar, Georgia, serif;
	font-style: italic;
	line-height: 1.1;
}
#archipelago ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}
#archipelago ul a {
	margin: 0 1ch;
}
#archipelago a img {
	max-height: 2.25em;
	filter: grayscale(1) drop-shadow(0 0 0 rgba(0,0,0,0.25));
	transition-duration: 100ms;
}
#archipelago a:hover img {
	filter: grayscale(0) drop-shadow(0.25em 0.25em 0.125em rgba(0,0,0,0.25));
	transform: translate(-0.125em,-0.125em);
}

#excuse {
	color: inherit;
}
#excuse > * {
	display: inline;
	font-size: 1em;
	margin: 0;
}
#excuse > h4 {
	font-size: 111%;
}
#excuse > h4::before {
	content: "Be it known to all assembled! ";
}
#excuse > h4::after {
	content: ": ";
}
#excuse > p {
	white-space: nowrap;
}
#excuse > p::after {
	content: ".";
}