/*  
Theme Name: Meyerweb 2020
Theme URI: http://meyerweb.com/
Description: The meyerweb theme for 2020
Version: 1
Author: Eric A. Meyer
Author URI: http://meyerweb.com/
*/

/* --------------------------------------------------------------------------------- 
   “Thoughts From Eric” styles
   --------------------------------------------------------------------------------- */

.arch h1.pagetitle {
	font-size: 200%;
	margin-bottom: 1.25em;
	padding: 0.5em 0;
	background:
		linear-gradient(0deg, hsla(34deg,38%,99%,0), hsla(34deg,38%,99%,0.85), hsla(34deg,38%,99%,0.85), hsla(34deg,38%,99%,0)),
		url(prevnext-center.png) 50% 50% / contain no-repeat;
	;
}

@media (min-width: 30em) {
	.arch h1.pagetitle {font-size: 225%;}
}
@media (min-width: 40em) {
	.arch h1.pagetitle {font-size: 300%;}
}

/* sidebar panels */

.panel {
	color: hsla(33deg,50%,10%,0.75);
}

.panel h3, .panel h4, .panel h5, .panel h6 {
	font-family: IM Fell English, Georgia, serif;
	margin: 0;
}

.panel h3, .panel h4 {
	font-style: italic;
	font-weight: 500;
	margin: 0.5em 0;
}

.arch #monthly {
	grid-column: main;
	grid-row: -2;
	justify-self: center;
	width: auto;
	text-align: center;
	border-top: 1px solid;
	padding: 0 1em;
}

.arch #monthly ul {
	list-style-type: none;
}
.arch #monthly > ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.arch #monthly > ul > li {
	width: 5em;
	margin: 0.25em;
}

.arch #monthly ul[role="navigation"] > li > h5 {
	margin: 0;
	border: 1px solid rgba(0,0,0,0.125);
	border-radius: 1em;
	background: rgba(0,0,0,0.025);
}
.arch #monthly ul[role="navigation"] > li > h5::before,
.arch #monthly ul[role="navigation"] > li > h5::after {
	content: "•";
	margin: 0 0.25em;
}

.arch #monthly ul[role="navigation"] > li > h5 a {
	text-decoration: none;
}
.arch #monthly ul[role="navigation"] li a {
	text-decoration-color: rgba(32,0,64,0.25);
	text-underline-offset: 0.15em;
}

.arch #monthly ul[role="navigation"] > li {
	padding: 0 0 1em 0;
}
.arch #monthly ul[role="navigation"] > li > ul > li {
	padding-right: 0.75em;
}
.arch #monthly ul[role="navigation"] > li > ul a {
	display: block;
	padding-left: 0.5em;
}


.arch .panel {
	font-family: IM Fell English, Eczar, Georgia, serif;
	padding: 1em;
}
.arch .panel p {
	line-height: 1.3;
	margin: 0.33em 0;
}
.arch .panel p, .arch .panel li {
	font-size: 87.5%;
}
.arch .panel a {
	white-space: nowrap;
}

.arch #main {
	grid-column: main;
	grid-row: 2 / span 2;
}

.arch #related {
	grid-row: -2;
	grid-column: main;
}
.arch #related h4 {
	text-align: center;
}
.arch #related ul {
	margin: 0 0 1.33em 0.125em;
	padding: 0 0 1em;
	border-bottom: 1px solid silver;
	list-style: none;
	columns: 2;
}
.arch #related li {
	margin-bottom: 0.5em;
}
.arch #related a {
	white-space: normal;
}
.arch #related time {
	font-size: 90%;
	white-space: nowrap;
}
.arch #related time::before {
	content: " (";
}
.arch #related time::after {
	content: ")";
}

.arch #feeds {
	grid-row: -4;
	grid-column: main;
	text-align: center;
	text-wrap: balance;
}

.arch #categories {
	grid-column: main;
	grid-row: -3;
	border-top: 1px solid;
}
.arch #categories h4 {
	text-align: center;
}
.arch #categories ul {
	list-style: none;
}
.arch #categories > ul {
	font-size: 1.1em;
	columns: 2;
}
.arch #categories > ul ul {
	margin-left: 0.15em;
	margin-bottom: 0.5em;
	padding-left: 0.25em;
	border-left: 1px solid gray;
}
.arch #categories > ul li {
	margin: 0.25em 0;
}
.arch #categories .current-cat a {
	font-weight: 700;
}

@media (min-width: 30em) {
	.arch #categories > ul {
		columns: 3;
	}
}
@media (min-width: 40em) {
	.arch .panel {
		width: 90%;
		padding: 0;
		margin-bottom: 1em;
	}
}

@media (max-width: 64.999em) {
	.single > #thoughts {
		grid-column: left / right;
		padding-left: 3.125vw;
	}
}

@media (min-width: 65em) {
	.arch .panel {
		width: 75%;
		font-family: IM Fell English, Eczar, Georgia, serif;
	}
	.arch #related h4 {
		text-align: inherit;
	}
	.arch #related ul {
		columns: 1;
	}
	.arch #feeds {
		grid-column: left;
		grid-row: 2;
		align-self: end;
		padding-left: 1em;
		text-align: start;
		border-top: none;
	}
	.arch #related {
		grid-column: left;
		grid-row: 3;
		text-align: left;
		margin-top: 0;
		padding-left: 1em;
		padding-right: 0;
		justify-self: start;
	}
	.arch #monthly {
		grid-column: left;
		grid-row: 3 / span 3;
		justify-self: start;
		margin-left: 25%;
		padding: 0;
		border-top: none;
	}
	.arch #monthly > ul {
		flex-direction: column;
	}

	.arch #categories {
		grid-column: right;
		grid-row: 4;
		align-self: start;
		text-align: right;
		margin-left: auto;
		margin-right: 1em;
		border-top: none;
	}
	.arch #categories h4 {
		text-align: inherit;
	}
	.arch #categories > ul {
		columns: 1;
	}
	.arch #categories > ul > li {
		margin-bottom: 0.33em;
	}
	.arch #categories > ul ul {
		margin-top: 0.33em;
		margin-right: 0.15em;
		margin-bottom: 0.5em;
		padding-right: 0.25em;
		border-right: 1px solid gray;
		border-left: none;
	}
}

/* previous/next */

.prev-next {
	grid-row: -5;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	align-items: center;
	align-self: start;
	margin-top: 5em;
	font-family: IM Fell English, Eczar, Georgia, serif;
}
@media (min-width: 50em) {
	.prev-next {
		grid-column: main;
	}
}

.prev-next h4 {
	grid-row: 1;
	grid-column: 2;
	z-index: 10;
	margin: 0;
	padding: 1.5em 0.5em;
	font-family: inherit;
	line-height: 1;
	font-style: italic;
	text-align: center;
	background:
		radial-gradient(55% 55% at 50% 50%, hsla(34deg,38%,99%,0.8) 75%, transparent 100%),
		url(/ui/i/hamonshu/prevnext-center.png) center / contain no-repeat;
}
.prev-next p {
	margin: 0;
}
.prev-next .prev {
	grid-row: 1;
	grid-column: 1;
	text-align: right;
	padding-right: 2em;
	margin-right: -4px;
	background:
		linear-gradient(270deg, hsla(34deg,38%,99%,0.75), hsla(34deg,38%,99%,0) 3em),
		url(/ui/i/hamonshu/prevnext-left.png) 100% 50% / 4em auto no-repeat;
}
.prev-next .next {
	grid-row: 1;
	grid-column: 3;
	padding-left: 2em;
	margin-left: -4px;
	background:
		linear-gradient(90deg, hsla(34deg,38%,99%,0.75), hsla(34deg,38%,99%,0) 3em),
		url(/ui/i/hamonshu/prevnext-right.png) 0 50% / 4em auto no-repeat;
}
.prev-next a {
	display: block;
	font-style: italic;
	font-weight: normal;
}
.prev-next p a {
	padding: 2.5em;
}
@media (max-width: 30em) {
	.prev-next h4 {
		padding: 0.5em 0;
	}
	.prev-next .prev {
		padding-right: 1em;
		background-size: cover, 1em auto;
	}
	.prev-next .next {
		padding-left: 1em;
		background-size: cover, 1em auto;
	}
	.prev-next p a {
		padding: 2.5em 0;
	}
}


/* article styles */

#thoughts article p {
	margin: 0.05em 0;
	text-indent: 2em;
}

#thoughts p.note {
	text-indent: 0;
	margin: 2.5em 0 0;
}
#thoughts p.republished {
	margin-top: 2em;
	padding-top: 1em;
	text-indent: 0;
	text-align: center;
	font-style: italic;
	font-size: smaller;
}

#thoughts article hr {
	margin: 2em 1em;
	height: 2.33em;
	border-style: none;
	background:
		url(/ui/i/hamonshu/hr-disc.png) 50% 50% / auto 67% no-repeat,
		url(/ui/i/hamonshu/fountain-trumpet-right.png) calc(50% - 1em) 50% / auto 60% no-repeat,
		url(/ui/i/hamonshu/fountain-trumpet-left.png) calc(50% + 1em) 50% / auto 60% no-repeat,
		linear-gradient(90deg, rgba(64,0,0,0), rgba(64,0,0,0.5), rgba(64,0,0,0)) 50% 50% / 50% 3px no-repeat,
		linear-gradient(90deg, rgba(64,0,0,0.3), rgba(64,0,0,0.5), rgba(64,0,0,0.3)) 0% 50% / 100% 1px no-repeat
		;
	filter: grayscale(0.5) opacity(0.67);
}

#thoughts[role="main"] :is(ul, ol) {
	margin: 1.5em 0.5em 1.5em 1em;
	padding: 0 0 0 2em;
}

#thoughts[role="main"] :is(ul, ol) li {
	margin-block: 0.5em;
}

#thoughts article figure, #thoughts article img.pic {
	float: right;
	max-width: 40%;
	margin: 0.5em 0 1em 2em;
}

@media (min-width: 50em) {
	#thoughts article figure, #thoughts article img.pic {
		margin-right: -1em;
	}
}

#thoughts article aside {
	background: hsla(25deg,25%,25%,0.1);
	margin-block: 0.5em;
	padding: 1em;
	padding-inline: 2em;
	font-style: italic;
}

#thoughts article .standalone {
	float: none;
	max-width: 100%;
	margin: 2em auto;
	display: block;
}
#thoughts article .standalone img {
	display: block;
	margin: 0 auto;
}
#thoughts article figcaption {
	margin-bottom: 1.5em;
	padding-top: 0.33em;
	font-style: italic;
	text-align: center;
	font-size: 85%;
	line-height: 1.25;
}
#thoughts article figcaption cite {
	font-style: normal;
}
#thoughts article figcaption em {
	font-weight: 600;
}

#thoughts :is(h1, h2, h3, h4, h5, h6) + p,
#thoughts p:first-of-type,
#thoughts .standalone + p,
#thoughts .warning:first-child + p,
#thoughts hr + p,
#thoughts ul + p,
#thoughts ol + p,
#thoughts dl + p,
#thoughts xmp + p,
#thoughts pre + p,
#thoughts blockquote + p,
#thoughts table + p
{
	text-indent: 0;
}

#thoughts .entry {
	margin: 0;
}
#thoughts .entry + .entry {
	margin: 1em 0;
}
#thoughts .entry + .entry::before,
.single #thoughts article .text > *:last-child:after {
	content: "";
	display: block;
	height: 10em;
	margin: 8em -2em;
	background:
		url(/ui/i/hamonshu/separator-big-05.png) 50% 100% / contain no-repeat
		;
}

.single #thoughts article .text > *:last-child::after {
	margin: 5em -2em 2em;
}

#thoughts .entry:nth-of-type(2n+1)::before,
.single #thoughts article .text > *:nth-child(2n+1)::after {
	background-image: url(/ui/i/hamonshu/separator-big-02.png);
}
#thoughts .entry:nth-of-type(3n+1)::before,
.single #thoughts article .text > *:nth-child(3n+1)::after {
	background-image: url(/ui/i/hamonshu/separator-big-03.png);
}
#thoughts .entry:nth-of-type(4n+1)::before,
.single #thoughts article .text > *:nth-child(4n+1)::after {
	background-image: url(/ui/i/hamonshu/separator-big-04.png);
}
#thoughts .entry:nth-of-type(5n+1)::before,
.single #thoughts article .text > *:nth-child(5n+1)::after {
	background-image: url(/ui/i/hamonshu/separator-big-01.png);
}

@media (min-width: 50em) {
	#thoughts .entry:nth-of-type(2n):not(:has(.asidenote, aside-note)) {
		transform: translate(-1vw,0);
	}
	#thoughts .entry:nth-of-type(3n):not(:has(.asidenote, aside-note)) {
		transform: translate(3vw,0);
	}
}

@media (max-width: 40em) {
	#thoughts .entry + .entry::before,
	.single #thoughts article .text > *:last-child::after {
		margin: 3em 0.5em 5em;
	}
}

#thoughts .entry .title {
	font-size: 175%;
	font-family: Eczar, IM Fell English, Georgia, serif;
	line-height: 1.2;
	margin-top: 0.67em;
	margin-bottom: 0;
	margin-left: 0;
	hanging-punctuation: first allow-end;
}
#thoughts .entry .title a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-decoration-skip-ink: auto;
	padding: 0;
}
#thoughts .entry .pubtime {
	display: block;
	margin: 0 0 1.5em;
	font-family: IM Fell English SC, Eczar, Georgia, serif;
	font-style: normal;
	font-size: 115%;
}

#thoughts .entry ul.meta {
	background:
		linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.125), rgba(0,0,0,0.25)) no-repeat 50% 1em / 100% 1px;
	list-style: none;
	margin: 2em 0 0;
	padding: 1.5em 0 0;
	font-family: IM Fell English, Georgia, serif;
	font-size: 95%;
	line-height: 1.2;
	hyphens: auto;
	color: hsla(33deg,50%,10%,0.67);
}
#thoughts .entry ul.meta li {
	display: inline;
	margin-right: 0.5ch;
}
#thoughts .entry ul.meta li cite {
	font-size: 110%;
}

@media (min-width: 30em) {
	#thoughts .entry .title {
		font-size: 250%;
	}
}
@media (min-width: 40em) {
	#thoughts .entry .title {
		font-size: 267%;
	}
	#thoughts .entry ul.meta {
		margin: 2em 1em 0;
		padding: 2em 1.5em 0;
	}
	#thoughts .entry ul.meta a {
		white-space: nowrap;
	}
}

/* post comments */

#thoughts #comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
#thoughts #comments > h3 {
	margin: 2em 0 0;
	background:
		linear-gradient(90deg, #654, transparent) 0 100% / 100% 1px no-repeat;
	color: #654;
}
#thoughts #comments .response {
	padding: 2em 0 5em;
	position: relative;
}

@media (min-width: 50em) {
	#thoughts #comments {
		display: grid;
		grid-template-columns: min-content 1fr;
	}
	#thoughts #comments > h3 {
		margin: 2em 1em 0 0;
		padding-right: 0.25em;
		writing-mode: vertical-rl;
		background:
			linear-gradient(180deg, #654, transparent) 100% 0 / 1px 100% no-repeat;
	}
}
@media (min-width: 65em) {
	#thoughts #comments {
		margin-left: -5.5em;
	}
}

#thoughts #comments .response.comment {
	border-bottom: 0px solid silver;
	background:
		url(/ui/i/hamonshu/separator-low.png) no-repeat 50% 100% / 100% 1.5em;
}
#thoughts #comments li[class*="back"] + li[class*="back"] {
	border-top: 1px solid silver;
}

#thoughts #comments li[class*="back"] + .comment {
	padding-top: 4em;
	border-top: 0px solid silver;
	background:
		url(/ui/i/hamonshu/separator-low.png) no-repeat 50% 100% / 100% 1.5em,
		url(/ui/i/hamonshu/separator-low.png) no-repeat 50% 0% / 100% 1.5em
		;
}

#thoughts #comments .response.comment footer {
	font-family: IM Fell English;
	font-style: italic;
	font-size: 111%;
}
#thoughts #comments .response.comment footer time {
	font-size: 88%;
}

#thoughts #comments li[class*="back"] {
	position: relative;
	padding: 1em 0;
	margin: 0 3em 0 3em;
	font-style: italic;
	opacity: 0.5;
}
#thoughts #comments li[class*="back"]::before {
	content: '';
	position: absolute;
	height: 100%;
	right: 100%;
	top: 0;
	width: 2.5em;
	background: url(/ui/i/hamonshu/comment-pings.png) no-repeat 0 50% / 1.5em auto;
}
#thoughts #comments li[class*="back"] p {
	margin: 0;
}
#thoughts #comments li[class*="back"] div.text {
	margin-top: 0.5em;
	font-size: 90%;
}

a.comment-edit-link {
	opacity: 0;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -5em;
	padding: 2em;
	font-size: 2em;
	transition: opacity 111ms;
}
.response:hover a.comment-edit-link {
	opacity: 1;
}

/* commenting form */

#commentform {
	grid-column: 1 / -1;
	padding: 2em 1em 1em;
	margin-top: 5em;
	border-bottom: 1px solid;
}
#commentform > header {
	display: flex;
	align-items: flex-end;
	border-bottom: 1px solid;
	margin-bottom: 0.25em;
}
#commentform > header h3 {
	margin: 0;
}
#commentform > header ul#rss-tb {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	flex-grow: 2;
	margin: 0;
}
#commentform > header ul li {
	margin-left: 0.5em;
}
#commentform header a,
#commentform header a::before {
	content: '';
	display: inline-block;
	height: 1.67em;
	width: 1.67em;
	line-height: 2px;
	overflow: hidden;
	white-space: nowrap;
}
#commentform header a::before {
	box-sizing: border-box;
	background: #EEE;
	vertical-align: middle;
}
#commentform header #tb a::before {
	background: url(/ui/i/hamonshu/comment-trackback.png) center / contain no-repeat;
}

#commentform header li:not(#tb) a::before {
	background: url(/ui/i/hamonshu/comment-pings.png) center / contain no-repeat;
	transform: rotate(-30deg);
}

#commentform #fields {
	margin-bottom: 1em;
}
#commentform fieldset {
	padding: 0;
	margin: 0;
	border: none;
}

@media (min-width: 30em) {
	#commentform fieldset > div {
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-gap: 0 1.5em;
	}
}
#commentform fieldset label {
	display: block;
	font-family: Eczar, IM Fell English, Georgia, serif;
	font-weight: 500;
}
#commentform fieldset input[type="text"],
#commentform fieldset input[type="email"] {
	font-size: 95%;
	padding: 0.25em;
}
#commentform #form-info {
	margin-top: 1.25em;
	font-size: 95%;
}
#commentform #form-info > *:last-child {
	margin-bottom: 0;
}
#commentform section {
	grid-column: 1 / -1;
	margin-top: 1em;
}

@media (min-width: 40em) {
	#commentform section {
		margin-top: -1em;
	}
}

#commentform section textarea {
	padding: 0.5em;
	width: 100%;
	box-sizing: border-box;
}
#commentform section h4 {
	margin: 0;
	padding: 0.25em 0.5em;
	background: gray;
	color: #FFF;
	font-size: 1em;
}
#commentform section #comment_preview {
	border: 1px solid gray;
	border-top: none;
	margin-bottom: 2em;
	padding: 0.5em 1em;
	border: 1px solid #AAA;
	border-color: #AAA #CCB;
	background:
		linear-gradient(-1deg, rgba(0,0,0,0.02), 0.33em, transparent 1em),
		linear-gradient(181deg, rgba(0,0,0,0.03), 0.33em, transparent 1em);
}

#commentform input[type="submit"] {
	font-family: Eczar, IM Fell English, Georgia, serif;
	font-size: 100%;
	padding: 0.25em 0 0;
}

@media (min-width: 40em) {
	#thoughts #commentform {
		margin-right: -15vw;
		padding: 0;
	}
}

@media (min-width: 60em) {
	#thoughts #commentform section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0 1.5em;
	}
	#commentform section h4 {
		padding: 0.25em 0 0;
		background: transparent;
		color: inherit;
	}
	#commentform section #comment_preview {
		font-size: 90%;
	}
	#commentform section #comment_preview > :first-child {
		margin-top: 0;
	}
	#commentform section #comment_preview > :last-child {
		margin-bottom: 0;
	}
}

@media (min-width: 75em) {
	#thoughts ol + #commentform {
		margin-left: -10vw;
	}
}

#thoughts a.more-link, #thoughts p.warning {
	display: block;
	width: 50%;
	margin: 2em auto 0;
	padding: 1em 2.5em;
	font-family: Eczar, IM Fell English, Georgia, serif;
	text-align: center;
	text-indent: 0;
	background:
		url(/ui/i/hamonshu/endcap-right.png) 100% 50% / auto 100% no-repeat,
		url(/ui/i/hamonshu/endcap-left.png) 0% 50% / auto 100% no-repeat,
		linear-gradient(90deg, #4E4033AA, #4E4033BB) 0 0 / 100% 1px no-repeat,
		linear-gradient(90deg, #615040AA, #5B4A3BAA) 0 100% / 100% 1px no-repeat,
		#FED5
	;
	background-color: #FED5;
	border-radius: 1em / 50%;
	text-decoration-color: rgba(0,0,0,0.15);
}
#thoughts a.more-link:hover {
	background-color: #FED;
}
#thoughts p.warning {
	width: auto;
	max-width: 80%;
	text-wrap: balance;
	margin-block: 0 1.5em;
}

/* special styles: recipes */

article.recipe {
    padding: 0 2em 2em;
    margin: 2em 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: white;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    box-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.1);
}
article.recipe h3 {
    padding: 0.5em 0 0;
    margin: 0.5em 0 0;
    border-bottom: 2px solid;
    font-size: 2em;
}
article.recipe::after {
    content: "Source: " attr(data-url);
    display: list-item;
    list-style: square;
    margin-left: 1.5em;
    font-weight: normal;
}
article.recipe h4 {
    border-bottom: 1px solid;
}
.recipe ul.time-yield {
    display: flex;
    justify-content: space-between;
    margin: 0.125em 0 1.5em;
    padding: 0;
    font-style: italic;
}
.recipe ul.time-yield li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.recipe table {
    border-spacing: 0;
    width: 100%;
    line-height: 1.2;
}
.recipe tr:nth-child(odd) {
    background: #E0E0E0;
}
.recipe td {
    padding: 0.1em 0.5em 0.2em;
    vertical-align: top;
}
.recipe td[class^="x"] {
    white-space: nowrap;
}
.recipe .x4 {
    color: #050;
}
.recipe .x2 {
    color: #005;
}
.recipe .x1 {
    color: #200;
    font-weight: 600;
}
.recipe td: last-child {
    font-weight: 600;
}
.recipe ol.steps,
.recipe ul.notes {
    margin-left: 0;
    padding-left: 1.5em;
}
.recipe ol.steps li,
.recipe ul.notes li {
    margin-bottom: 0.5em;
}
.recipe ul.notes li {
    list-style: square;
}

/* special styles: various blockquotes */

#thoughts .lyric,
#thoughts .poem,
#thoughts .dialogue {
	background-image: none;
	padding: 1em;
}

#thoughts .lyric,
#thoughts .poem {
	white-space: pre-wrap;
}
#thoughts .lyric br,
#thoughts .poem br {
	display: none;
}

#thoughts .lyric p,
#thoughts .poem p,
#thoughts .dialogue p {
	text-indent: 0;
	margin: 0;
}
#thoughts .lyric :last-child {
	margin-bottom: 0;
}

#thoughts .poem {
	font-style: italic;
	margin-left: 1em;
}
#thoughts .poem p:first-child:not(:last-child) {
	margin-top: 1em;
}
#thoughts .poem p.attrib {
	margin: 1.5em 0 0 0.5em;
	font-size: smaller;
}