/* 
 * ---- credit to Attila theme by https://github.com/zutrinken/attila.git --------
 */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{font-family:serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background:0 0;text-decoration:none;}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}




@font-face {
font-family: AppleGaramondLight;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('/assets/font/AppleGaramond-Light.ttf') format('truetype');
}

@font-face {
font-family: equity_ot_b;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url('/assets/font/equity_ot_b_regular.woff2') format('woff2');
}

@font-face {
font-family: equity_ot_b;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: swap;
src: url('/assets/font/equity_ot_b_italic.woff2') format('woff2');
}

@font-face {
font-family: equity_ot_b;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: swap;
src: url('/assets/font/equity_ot_b_bold.woff2') format('woff2');
}

@font-face {
font-family: equity_ot_b;
font-style: italic;
font-weight: bold;
font-stretch: normal;
font-display: swap;
src: url('/assets/font/equity_ot_b_bold_italic.woff2') format('woff2');
}


.hljs{display:block;color:#66645c;-webkit-text-size-adjust:none}
.hljs-comment,.diff .hljs-header,.hljs-javadoc{color:#998;font-style:italic}
.hljs-keyword,.css .rule .hljs-keyword,.hljs-winutils,.nginx .hljs-title,.hljs-subst,.hljs-request,.hljs-status{color:#333;font-weight:bold}
.hljs-number,.hljs-hexcolor,.ruby .hljs-constant{color:#008080}
.hljs-string,.hljs-tag .hljs-value,.hljs-phpdoc,.hljs-dartdoc,.tex .hljs-formula{color:#d14}
.hljs-title,.hljs-id,.scss .hljs-preprocessor{color:#900;font-weight:bold}
.hljs-list .hljs-keyword,.hljs-subst{font-weight:normal}
.hljs-class .hljs-title,.hljs-type,.vhdl .hljs-literal,.tex .hljs-command{color:#458;font-weight:bold}
.hljs-tag,.hljs-tag .hljs-title,.hljs-rule .hljs-property,.django .hljs-tag .hljs-keyword{color:#000080;font-weight:normal}
.hljs-attribute,.hljs-variable,.lisp .hljs-body,.hljs-name{color:#008080}
.hljs-regexp{color:#009926}
.hljs-symbol,.ruby .hljs-symbol .hljs-string,.lisp .hljs-keyword,.clojure .hljs-keyword,.scheme .hljs-keyword,.tex .hljs-special,.hljs-prompt{color:#990073}
.hljs-built_in{color:#0086b3}
.hljs-preprocessor,.hljs-pragma,.hljs-pi,.hljs-doctype,.hljs-shebang,.hljs-cdata{color:#999;font-weight:bold}
.hljs-deletion{background:#fdd}
.hljs-addition{background:#dfd}
.diff .hljs-change{background:#0086b3}
.hljs-chunk{color:#aaa}




html{
	font-size:62.5%;
	overflow-x:hidden;
	--site-font: 'Open Sans', 'Lucida Grande', sans-serif;
	--heading-font: 'AppleGaramondLight', 'datw5', 'Times', 'Times New Roman', serif;
	--text-font: 'equity_ot_b', 'creamfont', 'Times', 'Times New Roman', serif;
	--page-colour: #f8f8ff;
	--page-colour: rgb(248,248,248,0.7);
	--page-inverted: #333;
	--page-colour2: #909499;
	--border-colour: #e1e3e6;
	--border-inverted: #3b3d40;
	--text-colour: #222426;
	--text-light: #fafafa;
	--text-dark: #222426;
	--text-green: #50C019;
	--text-orange: #ff7a29;
	--text-purple: #fa00f9;

}
	@media (prefers-color-scheme:dark){html{
		--page-colour: #333;
		--text-colour: #fafafa;
		--border-colour: #3b3d40;
		--border-inverted: #e1e3e6;

	}}
.menu-active body,html.menu-active{overflow-y:hidden}


body{
	min-width: 320px;
	font:500 1em / 1em 'Times', 'Times New Roman', serif;	/* [] fix line height */
	color:var(--text-colour);
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
	background:var(--page-colour);
}
	@media (prefers-color-scheme: dark){body{background:var(--page-colour);font-weight:400}}


button,input,select,textarea{transition:all ease-out 0.2s}




.avatar{
	position:relative;
	overflow:hidden;
	margin:0;
	border:2px solid var(--border-colour);
	background:var(--border-colour);
	box-sizing:border-box}
.avatar:after,.avatar:before{
	content:'';
	position:absolute;
	z-index:1;
	width:50%;
	height:50%;
	bottom:32.5%;
	left:25%;
	border-radius:100%;
	background:#f7f8fa;
	box-sizing:border-box}
	@media (prefers-color-scheme: dark){.avatar:after,.avatar:before{background:#333}}.avatar:after{width:80%;bottom:-25%;left:10%}
.avatar img{
	position:relative;
	z-index:2;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover
}




/* ------------------------
 * ---- ## HOME -------- 
 * ------------------------/
 
/* ---- ### blog header wrapper -------- */
.blog-header{
	position:relative;
	padding-top:calc(8rem + 4vw);
}
	@media only screen and (max-width: 640px){.blog-header{padding-top:calc(6rem + 4vw);}}


.blog-header.has-cover{
	padding-top:calc(24rem + 8vw);
	color:var(--text-light);
	background:#000;
	overflow:hidden;
	text-shadow:0 1px 2px rgba(0,0,0,0.1)
}
.blog-header.has-cover:after{
	display:none}
	
	
.blog-box{
	position:relative;
	/* z-index:10; */
	padding-bottom:calc(4rem + 2vw);
	border-bottom:1px solid var(--border-colour)
}
	
	
.blog-header.has-cover .blog-box{
	border:none;
	padding-bottom:calc(8rem + 4vw)
}


.blog-cover{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:5;
	background:no-repeat scroll center center / cover #000;
	animation:0.5s ease-in forwards fadein;
	display:flex;
	align-items:center
}
.blog-cover:after{
	content:'';
	position:absolute;
	width:100%;
	height:66.666%;
	left:0;
	bottom:0;z-index:8;
	background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.333) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.333) 100%)
}
.blog-cover img{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	margin:0;
	z-index:6;
	object-fit:cover
}


/* ---- ### blog header -------- */
.blog-name{
	/* width:fit-content; */		
	padding:0;
	margin:0.25em auto 0.25em auto;
	text-align:center;
	font-family:'Monoton';
	font-style:normal;
	font-weight:400;
	font-size:5.6rem;
	line-height: 1.5em;
	letter-spacing:0.07em;
}
	/* @media only screen and (max-width: 748px){.blog-name{font-size:5.6rem}} */	
	/* @media only screen and (min-width: 320px){.blog-name{font-size:calc(56px + (112 - 56) * ((100vw - 320px) / (1024 - 320)))}} */
	@media only screen and (min-width: 1024px){.blog-name{font-size:11.2rem}}
.blog-name a {
	display:block;
	-webkit-transform: translateZ(0);
	text-decoration: none;
	color: #FF1177;
	/* -webkit-transition: all 0.5s; */
	/* -moz-transition: all 0.5s; */
	/* transition: all 0.5s; */
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 70px #FF1177, 0 0 75px #fff, 0 0 80px #FF1177;
	/* -webkit-animation: neon1 1.5s ease-in-out infinite alternate; */
	/* -moz-animation: neon1 1.5s ease-in-out infinite alternate; */
	/* animation: neon1 1.5s ease-in-out infinite alternate; */
}
.blog-name a:hover {
	color:#FFF;
	text-shadow:none;
	/* -webkit-animation: none; */
	/* -moz-animation: none; */
	/* animation: none; */
}
	@media (prefers-color-scheme: light){
		.blog-name{opacity:0.9}
		.blog-name a:hover{color: var(--text-dark)}}

	
/* text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177 */
/* text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177 */
/* @-webkit-keyframes neon1 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 140px #FF1177;
	}
	to {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 70px #FF1177;
	}
}
@-moz-keyframes neon1 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 140px #FF1177;
	}
	to {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 70px #FF1177;
	}
}
@keyframes neon1 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 140px #FF1177;
	}
	to {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 70px #FF1177;
	}
} */
	
	
.has-cover .blog-name{
	color:var(--text-light)
}


.blog-description{
	text-align:center;
	font-family: 'AppleGaramondLight', 'Times', serif;
	display:block;
	margin:0;
	padding:0;
	font-size:2.9rem;
	line-height:1.2em;
	color:var(--page-colour2);
}
.has-cover .blog-description{
	color:var(--text-light)
}


/* ---- ### under construction badge -------- */
span.badge-nightly {
	position: absolute;
	background: rgba(255,122,41,0.1);
	border: 1px solid rgba(255,122,41,0.3);
	border-radius: 5px;
	font-size: 1.8rem;
	/* font-weight: 700; */
	line-height: 2.4rem;
	font-family:var(--site-font);
	letter-spacing:0.07em;
	padding: 0.3em 0.6em;
	-webkit-transform: rotate(-10deg) translateX(-35%) translateY(-80%);
	-ms-transform: rotate(-10deg) translateX(-35%) translateY(-80%);
	transform: rotate(-10deg) translateX(-35%) translateY(-80%);	/* 3 50 50, 5 30 60 */
}
	@media only screen and (max-width: 432px){
		span.badge-nightly{
			-webkit-transform: rotate(-10deg) translateX(-12vw) translateY(-80%);
			-ms-transform: rotate(-10deg) translateX(-12vw) translateY(-80%);
			transform: rotate(-10deg) translateX(-12vw) translateY(-80%);
		}
	} /* -12% */
.orange {
	color:var(--text-orange);
	font-weight: bold;
}




.archive{
	position:relative;
	z-index:10
}
.archive.archive-box{
	padding-bottom:calc(4rem + 2vw);
	border-bottom:1px solid var(--border-colour)}

.archive .archive-info{
	display:flex;margin-bottom:2rem;
	font-family:var(--site-font);
	font-size:2em;
	line-height:1em}


/* float whole archive-info to right, other dots. count follows idv dot */


.archive .archive-info .archive-type{color:var(--text-purple)}

.archive .archive-info .archive-count{position:relative;margin-left:3rem;color:var(--page-colour2)}

.archive .archive-info .archive-count:after{content:'';position:absolute;left:-2rem;top:50%;width:1rem;height:1px;background:#c4c7cc}

.archive .archive-title{
	font-family:var(--site-font);
	font-size:3.6rem;
	line-height:1em;
	margin:1rem 0;
	color:var(--text-green)}
	@media (prefers-color-scheme: dark){.archive .archive-title{color:var(--text-green)}}
	
.archive .archive-description{display:block;font-size:2em;line-height:1.5em;margin:1rem 0;font-family:'equity_ot_b',serif;color:var(--page-colour2)}
	@media (prefers-color-scheme: dark){.archive .archive-description{color:var(--page-colour2)}}
	
	
.archive .archive-links{display:block;font-size:2em;line-height:1.5em;margin-top:1rem}
.archive .archive-links a{color:#e05431;transition:color linear 0.1s}
.archive .archive-links a span{display:none}
.archive .archive-links a:focus,.archive .archive-links a:hover{color:#d13f21}
.archive.archive-search{border:0}
.archive.archive-author{padding-left:16rem}
	@media only screen and (max-width: 640px){.archive.archive-author{padding-left:0;padding-right:10rem}}
.archive.archive-author .archive-avatar{position:absolute;top:0;left:2rem;width:10rem;height:10rem;border-radius:8rem;overflow:hidden}
	@media only screen and (max-width: 640px){.archive.archive-author .archive-avatar{left:auto;right:0;top:2rem;width:8rem;height:8rem}}
.has-cover .archive.archive-box{border:none}
.has-cover .archive .archive-info span{color:var(--text-light)}
.has-cover .archive .archive-title{color:var(--text-light)}
.has-cover .archive .archive-description{color:rgba(255,255,255,0.8)}
.has-cover .archive .archive-links a{color:rgba(255,255,255,0.8)}
.has-cover .archive .archive-links a:focus,.has-cover .archive .archive-links a:hover{color:var(--text-light)}




/* ---- ### blog navigation <div> under body -------- */
.nav-header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:400;
	transition:all ease-out 0.3s
}
	@media only screen and (max-width: 640px){.nav-header{transform:translate3d(0, -100%, 0)}}
.menu-active .nav-header{
	transform:translate3d(0, 0, 0)
}

.nav-close{
	position:fixed;
	z-index:350;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.4;
	display:none
} /* bg when active, only mobile */
	@media (prefers-color-scheme: dark){.nav-close{opacity:0.7}}
	@media only screen and (max-width: 640px){.menu-active .nav-close{display:block}}
	
	
.nav-header .nav-wrapper-control{
	position:absolute;
	z-index:500;
	left:0;
	top:100%;
	width:100%;
	/* height: 40px; */
	cursor:pointer;
	display:none;
	color:var(--page-colour2);
	background-color: transparent;
	/* border-top:1px solid transparent; */
	box-sizing:border-box;
	transition:all linear 0.1s;
} /* green toggle wrapper */
	@media (prefers-color-scheme: dark){.nav-header .nav-wrapper-control{color:var(--page-colour2)}}
	@media only screen and (max-width: 640px){.nav-header .nav-wrapper-control{display:block;background-color: transparent;width:0;margin-top: 2.5%;margin-left:2%;}} /* for positioning red button */


.nav-header .nav-wrapper-control .inner{
	display:flex;
	justify-content:space-between;
}
.nav-header .nav-wrapper-control .button{
	position:relative;
	display:block;
	/* width:100%; */
	/* height: 100% */
	/* padding:2rem 0; */
	padding:0;
	/* font-size:2rem; */
	/* line-height:1em; */
	color:inherit;
	transition:all ease-out 0.1s;
}
.nav-header .nav-wrapper-control .button {
	position: absolute;
	/* top: 5px; */
	/* width: 20px; */
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 2rem;
	margin: 0;
}
.nav-header .nav-wrapper-control .button:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}

.nav-header .nav-wrapper-control .button:after {
	content: "";
	position: absolute;
	/* bottom: -12px */
	bottom: -7px;
	left: 0;
	width: 100%;
	/* height: 20px; */
	/* height: 10px; */
}


.nav-header .nav-wrapper-control .button i{
	display:inline-block;
	/* width:4rem; */
	width: 100%;
}


/* ---- #### mac green nav -------- */
.nav-header .nav-wrapper-control .button.green{
	background-color:#70BF3A;
	border:1px solid #063F07;
	border:1px solid #f3f3f3;
	/* box-shadow: 0 0px 1px #658961; */
	/* box-shadow: 0 0px 1px #373737; */
}
	@media (prefers-color-scheme: dark){.nav-header .nav-wrapper-control .button.green{border:1px solid #373737;}}
	
/* .nav-header .nav-wrapper-control .button.green:active, */
.nav-header .nav-wrapper-control .button.green:hover {
	border:0;
	box-shadow: 0 0px 1px #658961;
	box-shadow: 0 0px 1px #063F07;
	
}
.nav-header .nav-wrapper-control .button.green:after {
	/* background: radial-gradient(ellipse at center, #e2fbb6 0%, rgba(146, 215, 78, 0) 100%); */
	/* background: radial-gradient(ellipse at center, #e2fbb6 0%, rgba(146, 215, 78, 0) 100%); */
}



/* <div class="browser">
  <header>
	<button class="button red"></button>
	<button class="button yellow"></button>
	<button class="button green"></button> */
.browser {
	position: relative;
	width: 500px;
	height: 400px;
	margin: 40px auto;
	border-radius: 12px;
	background-color: #FFF;
	overflow: hidden;
	}
.browser header {
	top: 0;
	width: 100%;
	border-bottom: 2px solid #7F7F7F;
	background-color: #E8E8E8;
}
.browser header .button.red {
	left: 10px;
	background-color: #D2493F;
	border: 1px solid #7b1c1a;
	box-shadow: 0 1px 2px #401110;
}
.browser header .button.red:active {
	box-shadow: 0 1px 1px #401110;
}
.browser header .button.red:after {
	background: radial-gradient(ellipse at center, #fdc6c3 0%, rgba(221, 79, 67, 0) 100%);
}
.browser header .button.yellow {
	left: 37px;
	background-color: #F1B330;
	border: 1px solid #C66A34;
	box-shadow: 0 1px 2px #8A7663;
}
.browser header .button.yellow:active {
	box-shadow: 0 1px 1px #8A7663;
}
.browser header .button.yellow:after {
	background: radial-gradient(ellipse at center, #f8fa98 0%, rgba(247, 206, 64, 0) 100%);
}




.nav-header .nav-wrapper-control a.nav-search{
	width:auto;
	text-align:right
}


.nav-header .nav-wrapper-control button:focus,.nav-header .nav-wrapper-control button:hover{
	color:var(--text-dark)
}
	@media (prefers-color-scheme: dark){.nav-header .nav-wrapper-control button:focus,.nav-header .nav-wrapper-control button:hover{color:var(--border-inverted)}}
	
.cover-active .nav-header .nav-wrapper-control{
	color:var(--text-light)
}
.menu-active .nav-header .nav-wrapper-control{
	background:var(--text-dark);
	color:#909499;
	border-color:var(--border-inverted);
}
	@supports (-webkit-backdrop-filter: blur(2rem)){.menu-active .nav-header .nav-wrapper-control{background:rgba(34,36,38,0.9);-webkit-backdrop-filter:blur(2rem)}} /* red button issue */
	
.menu-active .nav-header .nav-wrapper-control a:focus,.menu-active .nav-header .nav-wrapper-control button:hover{
	color:var(--border-light) /* !! [] need always light */
}



.menu-active .nav-header .nav-wrapper-control .button{
	border:0;
	background-color:#D2493F;
	box-shadow: 0 0px 1px #063F07;
	} /* red button */
/* .menu-active .nav-header .nav-wrapper-control .button:hover {
	box-shadow:none;
	border: 1px solid #373737;
}*/	/* hover state stick with first touch from green */


.nav-header .nav-wrapper{
	display:flex;
	max-height:calc(100vh - 6rem);
	/* padding:2rem 4rem; */
	padding: 2% 5%;	/* not inner, not subject to ori 5% */
	overflow-y:auto;
}
	@media only screen and (max-width: 640px){.nav-header .nav-wrapper{background:var(--text-dark);flex-direction:column}
		@supports (-webkit-backdrop-filter: blur(2rem)){
			.nav-header .nav-wrapper{background:rgba(34,36,38,0.9);-webkit-backdrop-filter:blur(2rem)}
		}
	}
	
	
	
	
	
	
	
	
.nav-header .logo{
	margin-right:3.1rem;
	display:none;
} 
	@media only screen and (max-width: 640px){.nav-header .logo{display:none}}
	
.nav-header .logo a{
	display:block;
	height:4rem;
	padding:0
}
.nav-header .logo a img{
	display:block;
	width:auto;
	height:4rem;
}
.nav-header ul{
	position:relative;
	display:flex;
	/*width:100%;*/
	margin:auto;
	padding:0;
	list-style:none;
	font-family:var(--site-font);
	padding-top:2vw;
	padding-left:calc(2.5% + 2vw);
}
	@media only screen and (max-width: 640px){.nav-header ul{flex-direction:column;flex-shrink:0;padding:2rem 0 2rem calc(2.5% + 2vw)}}
	
.nav-header ul:last-child{
	justify-content:flex-end
}
	@media only screen and (max-width: 640px){.nav-header ul:last-child{display:none}}
	
.nav-header li{
	position:relative;
	margin-right:3.1rem;
}
.nav-header li.active a:before{
	position:absolute;
	content:'';
	width:100%;
	height:3px;
	left:0;
	top:0;
	padding:0 1rem;
	margin-left:-1rem;
	margin-top:-1rem;
	/* background:#e05431; */
	/* background:#ff7a29; */
	background:#fa00f9;
}
	@media only screen and (max-width: 640px){.nav-header li.active a:before{
		left:0;
		top:50%;
		width:7px;
		height:7px;
		margin-left:0.8em;
		margin-top:-1px;
		border-radius:2px;
		padding:0;
	}}
	
.nav-header li.active a{
	/* color:var(--border-inverted); */
	font-weight:700;
	opacity:0.6;
}
	@media (prefers-color-scheme: dark){.nav-header li.active a{color:var(--border-inverted)}}
	@media only screen and (max-width: 640px){.nav-header li.active a{color:var(--text-light)}}
	
.nav-header li a{
	display:block;
	padding:1rem 0;
	font-size:1.5em;
	line-height:2rem;
	color:#909499;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-decoration:none;
	font-weight:500;
	cursor:pointer;
	transition:color linear 0.1s;
}
	@media only screen and (max-width: 640px){
		.nav-header li a{
			font-size:2em;
			padding-left:2em;
		} 
		.nav-header li a:before{
			content:'';
			position:absolute;
			left:0;
			top:50%;
			width:0.5em;
			height:1px;
			margin-left:0.75em;
			margin-top:-1px;
			border-radius:2px;
			background:var(--border-inverted);}}
	@media only screen and (max-width: 640px) and (prefers-color-scheme: dark){.nav-header li a:before{background:var(--border-colour)}} /* make indicator colour always dark */
	
.nav-header li a:focus,.nav-header li a:hover{
	color:var(--border-inverted);
}
	@media only screen and (max-width: 640px){.nav-header li a:focus,.nav-header li a:hover{color:var(--border-colour)}}
	@media only screen and (max-width: 640px) and (prefers-color-scheme: dark){.nav-header li a:focus,.nav-header li a:hover{color:var(--border-inverted)}}
	
	
/* .nav-header li.nav-facebook,.nav-header li.nav-rss,.nav-header li.nav-search,.nav-header li.nav-subscribe,.nav-header li.nav-twitter{margin-right:1.5rem} */
/* .nav-header li.nav-facebook a,.nav-header li.nav-rss a,.nav-header li.nav-search a,.nav-header li.nav-subscribe a,.nav-header li.nav-twitter a{font-size:1.75em} */
/* .nav-header li.nav-facebook span,.nav-header li.nav-rss span,.nav-header li.nav-search span,.nav-header li.nav-subscribe span,.nav-header li.nav-twitter span{display:none} */
.nav-header li:last-child{
	margin-right:0;
}


.cover-active .nav-wrapper-control a{color:rgba(255,255,255,0.8)}
.cover-active .nav-wrapper-control a:focus,.cover-active .nav-wrapper-control a:hover{color:var(--text-light)}
	@media only screen and (min-width: 640px){.cover-active .nav-header li a{color:rgba(255,255,255,0.8)}}
	@media only screen and (min-width: 640px){.cover-active .nav-header li a:focus,.cover-active .nav-header li a:hover{color:var(--text-light)}}
	@media only screen and (min-width: 640px){.cover-active .nav-header li.active a{color:var(--text-light)}}









/* ---- ### blog footer -------- */
.nav-footer{
	position:relative;
	z-index:20;
	padding-top:calc(6.2rem + 4vw);
	padding-bottom:calc(3.1rem + 2vw);
	font-family:var(--site-font);
	font-weight: 400;
}
.nav-footer .inner{
	max-width:none;
	padding:0 8rem;
}
.nav-footer .nav-wrapper{
	/* display:flex; */
	/* padding:0 8rem; */
}
	@media only screen and (max-width: 640px){.nav-footer .nav-wrapper{flex-direction:column;text-align:center}}

.nav-footer ul{
	position:relative;
	/* display:flex; */
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}
	/* @media only screen and (max-width: 640px){.nav-footer ul{margin-bottom:3.1rem;justify-content:center}} */
.nav-footer ul:last-child{
	justify-content:flex-end
}

.nav-footer li{
	position:relative;
	/* display:flex; */
	font-size:1.4rem;
	line-height:3.1rem;
	margin-bottom:;
	text-align:center;
	color:rgba(250,250,250,0.3);
	color:var(--page-colour2);
	opacity: 0.9;
}
.nav-footer li:last-child{
	/* margin-right:0 */
}

.nav-footer li a{
	/* display:block; */
	white-space:nowrap;
	text-overflow:ellipsis;
	text-decoration:none;
	color:inherit;
	cursor:pointer;
}
.nav-footer li.active a{
	/* color:var(--border-inverted); */
}
.nav-footer li a:focus,.nav-footer li a:hover{
	color:var(--border-inverted);
}


/* ---- #### footer national delete -------- */
.nav-footer ul li s{
	position:relative;
	display:inline-block;
	text-decoration: none;
}
.nav-footer ul li s::before{
	content: '';
	position:absolute;
	border-bottom: 1px solid #fa0000;
	opacity:0.9;
	width: 110%;
	left:-5%;
	right: 0;
	top: 50%;
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	-o-transform:rotate(-10deg);
	transform:rotate(-10deg);
}


.nav-copy{
	/* display:block; */
	width:100%;
}
	/* @media only screen and (max-width: 640px){.nav-copy{margin-bottom:1rem}} */
	
	
.nav-credits{
	flex-shrink:0;
	/* display:block; */
}




/* ---- ### wrapper <section> under body -------- */
.page-wrapper{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	position:relative;
	padding-right:0;
}


/* ---- ### inner <div> under blog-header <header> in wrapper <section> at home -------- */
/* ---- ### inner <div> under post-header <header> in wrapper <section> in individual post -------- */
/* ---- ### inner <div> under post <article> in container <div> at home -------- */
/* ---- ### inner <div> under post <article> in content <main> in individual post -------- */
.inner{
	/* max-width:calc(64rem + 8vw); */
	/* max-width: 646px; */
	max-width: 680px;
	margin:0 auto;
	margin-left: 12.5%;
	margin-right: 12.5%;
	/* padding:0 6.4rem; */
}
	/* @media only screen and (max-width: 640px){.inner{margin:0 5%}} */
	@media only screen and (max-width: 748px){
		.inner{margin:0 4% 0 4%}/* [ ] wrong 5% for 680 */
	}


/* ---- ### blog containter <div> under wrapper <sec> at home. ignore id #search -------- */
.container{
	position:relative
}
/* post <article> inner <div> post-box <div> */
.container .post .post-box{
	padding-top:calc((3.2rem * 0.8) + 2vw);
	padding-bottom:calc((3.2rem * 0.6) + 2vw);
	border-bottom:1px solid var(--border-colour);
} /* padding 4rem seems too much to h2 bottom 0.8em */
	
	
.container #results .post .post-box{
	border-top:1px solid var(--border-colour)
}


/* .container .post.featured .post-title:after{
	position:absolute;
	width:4rem;
	height:4rem;
	left:-4rem;
	top:0;
	font-family:'icon';
	font-size:0.5em;
	font-style:normal;
	font-weight:normal;
	content:'\e800';
	color:#ffc336;
	text-align:center
} */


/* ---- ### post <article>, not incl. header in page -------- */
.post{
	position:relative;
	z-index:10;
}
.post.tag-hash-zh{letter-spacing:0.3px;}
.post.tag-hash-sm{text-align:right;}


/* ---- ### post title <h2> in post <article> at home -------- */
.post-title{
	position:relative;
	z-index:10;
	margin:0;	
	margin-bottom:0.8em; /* [] 20px bottom until meta date */
	/* margin-bottom:calc(0.7em + 1vw); */
	font-size:3.2rem;
	line-height:1.2em;
	font-family: var(--heading-font);
	font-style:normal;
	font-weight:700;
	text-indent:-1px;
	color:var(--text-dark);
	color:#333;
	letter-spacing:0;
}
	@media (prefers-color-scheme: dark){.post-title{color:var(--text-light)}}


.post-title a{
	text-decoration:none;
	color:inherit;
	font-weight:inherit;
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){.post-title{font-size:3.4rem;line-height:1.2em}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){.post-title{font-size:3.9rem;line-height:1.25em}}


/* ---- featured #ever post to be updated ---- */
.post.featured .post-title::after{
	content: "‘*,";
	position:absolute;
	font-family: 'Monoton';
	font-size:2.4rem;
	color:#F1B330;
	color:var(--text-purple);
	width:4rem;
	height:4rem;
	bottom:0;
	right:-4px;
	right:-2%;
}


/* ---- ### post meta <span> for date author primary tag at home. -------- */
.post-meta{
	margin: 0 0 0;	/* span has no top bottom margin. either rely header bottom or excerpt top */	/* post-meta in <div> in individual */
	font-size:1.4rem;
	line-height:1em;
	font-family:var(--site-font);
	font-weight:700;
	letter-spacing: 0.3px;
	color:var(--text-green);
}
	@media (prefers-color-scheme: dark){.post-meta{color:var(--text-green)}}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){.post-meta{font-size:1.5rem}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){.post-meta{font-size:1.6rem}}
.post-meta a{
	display:inline-block;
	text-decoration:none;
	color:inherit;
	transition:all ease-out 0.2s;
}
.post-meta a:focus,.post-meta a:hover{color:var(--text-purple);}




/* ---- ### post excerpt <div> in post <article> at home -------- */
.post-excerpt{
	font-size:2.0rem;	/* default usually 10px, at root 62.5%, just x10 https://engageinteractive.co.uk/blog/em-vs-rem-vs-px */
	line-height:1.55em;
	font-family: var(--text-font);
	opacity:0.8;
	/* color:inherit; */
}
	@media (prefers-color-scheme: dark) {
		.post-excerpt{font-size:1.9rem}}

.tag-hash-zh .post-excerpt{
	line-height:1.583em;
	font-size:2.0rem;
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){
		.post-excerpt{font-size:2.2rem; line-height:1.483em}
		.tag-hash-zh .post-excerpt{font-size:2.20rem; line-height:1.583em; letter-spacing:0.5px;}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){
		.post-excerpt{font-size:2.4rem; line-height:1.565em}
		.tag-hash-zh	 .post-excerpt{font-size:2.4rem; line-height:1.565em}}

.post-excerpt p{
	margin:0.6em 0 0;
}
.post-excerpt p:first-child{
	/* margin-top:calc(0.7em + 1vw); */
	margin:0.8em 0 0;
}
.post-excerpt .post-excerpt-more{
	font-family:var(--text-font);
	font-weight: 400;
	font-size: 1.4rem;
	opacity:;
}
.post-excerpt a{
	text-decoration: none;
	color: inherit;
}
.post-excerpt a:focus,.post-excerpt a:hover{
	opacity: 0.5
}













/* ---- 
 * ### blog pagination under container <div> at home -------- 
*/
.pagination{
	position:relative;
	margin:0;
	font-family:var(--site-font);
}

.pagination .pagination-box{
	padding-top:calc(2rem + 1vw);
	padding-bottom:calc(2rem + 1vw);
}
.pagination .pagination-box:after{
	clear:both;
	content:'';
	display:table
}

.pagination a{
	position:relative;
	display:block;
	padding:1rem 2rem;
	z-index:100;
	border:1px solid #c4c7cc;
	font-size:1.4rem;
	line-height:1em;
	font-weight:500;
	text-align:center;
	font-spacing:0.3px;
	text-decoration:none;
	color:var(--page-colour2);
	transition:all ease 0.3s;
	border-radius:1.2rem;
	box-sizing:border-box;
}
	@media (prefers-color-scheme: dark){.pagination a{border-color:var(--page-colour2)}}
	
.pagination a:focus,.pagination a:hover{
	/* color:#d13f21; */
	/*color:var(--text-orange);*/
	border-radius:0;
	border-color:var(--text-purple);
}
.pagination .pagination-prev{
	float:left;
	left: 2%;
	padding-right:1.5rem
}
.pagination .pagination-next{
	float:right;
	right: 2%;
	padding-left:1.5rem
}
.pagination .pagination-info{
	position:absolute;
	max-width: 680px;
	width:100%;
	font-size:1.4rem;
	line-height:4rem;
	height:4rem;
	left:0;
	right:0;
	z-index:50;
	display:block;
	margin-left: 12.5%; /*fix non-680 issue*/
	margin-right:auto;
	text-align:center;
	color:var(--page-colour2);
}


.extra-pagination{
	display:none
}
.paged .extra-pagination{
	display:block
}
.paged .extra-pagination .pagination-box{
	border-bottom:1px solid var(--border-colour)
}




/* ---- ### search -------- */	
/* 
#search{
	position:fixed;
	z-index:500;
	left:0;top:0;width:100%;height:100%;overflow-y:scroll;background:#f7f8fa;
	display:none
}
	@media (prefers-color-scheme: dark){#search{background:#333}}
	@media only screen and (max-width: 640px){#search{display:block;transition:all ease-out 0.3s;transform:translate3d(0, 100%, 0);border-top:1px solid var(--border-colour)}}

#search #results{
	padding-bottom:calc(12rem + 8vw)
}
.search-active{
	overflow-y:hidden}
.search-active #search{
	display:block}
	@media only screen and (max-width: 640px){.search-active #search{transform:translate3d(0, 0, 0)}}
.search{
	padding:2rem 0;
	display:flex
}
.search input[type="text"]{
	font-size:2em;
	width:100%;
	height:5rem;
	margin:-0.5rem 0;
	padding:0 2rem;
	border-radius:5rem;
	border:1px solid var(--border-colour);
	background:#f7f8fa;
	box-sizing:border-box;
	box-shadow:none !important;
	outline:0 !important
}
	@media (prefers-color-scheme: dark){.search input[type="text"]{background:#333}}
	
.search input[type="text"]:focus,.search input[type="text"]:hover{
	border-color:#d13f21}
.search input[type="submit"]{
	appeareance:none;background:none;border:0;display:none}
.search-close{
	position:fixed;
	z-index:600;
	top:0;
	right:0;
	width:4rem;
	height:4rem;
	margin:2rem;
	border:1px solid #c4c7cc;
	border-radius:4rem;
	box-sizing:border-box;
	cursor:pointer;
	transition:all ease-out 0.1s
}
	@media (prefers-color-scheme: dark){.search-close{border-color:#909499}}
.search-close:after,.search-close:before{
	content:'';
	position:absolute;
	top:50%;
	left:20%;
	width:60%;
	height:2px;
	margin-top:-1px;
	border-radius:2px;
	background:#909499;
	transition:all ease-out 0.1s
}
	@media (prefers-color-scheme: dark){.search-close:after,.search-close:before{background:#c4c7cc}}
.search-close:after{
	transform:rotate(45deg)
}
.search-close:before{
	transform:rotate(-45deg)}
.search-close:focus,.search-close:hover{
	border-color:#d13f21}
.search-close:focus:after,.search-close:focus:before,.search-close:hover:after,.search-close:hover:before{
	background:#d13f21} 
*/




/* ---- ## INDIVIDUAL POST 
 * ----------------------------------------------------------------
*/
/* ---- ### post <header> in individual post -------- */
.post-header{
	position:relative;
	padding:calc(8rem + 6vw) 0 calc(2rem + 2vw);
	/*margin-top:14px;*/
}
	/* @media only screen and (min-width: 1024px){.post-header{margin-top:28px}} */
	@media only screen and (max-width: 640px){.post-header{padding:calc(4rem + 4vw) 0 calc(2rem + 2vw);}}
	
	
.post-header.has-cover{
	padding:calc(8rem + 8vw) 0 calc(4rem + 6vw);
	margin-bottom:calc(4rem + 2vw);
	background:#000;
	overflow:hidden;
	text-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.post-cover{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:5;
	background:no-repeat scroll center center / cover #000;
	animation:0.5s ease-in forwards fadein;
	display:flex;
	align-items:center
}
.post-cover img{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	margin:0;
	z-index:6;
	object-fit:cover
}
.post-cover:after{
	content:'';
	position:absolute;
	width:100%;
	height:66.666%;
	left:0;
	bottom:0;
	z-index:8;
	background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.333) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.333) 100%)
}

	
/* ---- ### post title <h1> in individual post -------- */
.post-header .post-title{
	margin:0 0 0.8em;
	font-size:4.2rem;
	/* line-height:1.25em */
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){
		.post-header .post-title{line-height:1.1em}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){
		.post-header .post-title{text-align:center;line-height:1.1em}}
		
.has-cover .post-title{
	color:var(--text-light);
}


/* ---- ### top line for article classification and primary tag -------- */
.post-info{
	position:relative;
	z-index:10;
	display:flex;
	/* margin-bottom:2rem; */	/* unless show tag in post meta */
	font-size:2em;
	line-height:1em
}
.post-info .post-type{
	color:#e05431
}	/* cmmed out in post.hbs */
.post-info .post-count{
	position:relative;
	margin-left:3rem;
	color:var(--page-colour2)
}	/* count for primary tag */
.post-info .post-count:after{
	content:'';
	position:absolute;
	left:-2rem;
	top:50%;
	width:1rem;
	height:1px;
	background:#c4c7cc
}
.has-cover .post-info .post-type{
	color:var(--text-light)}
.has-cover .post-info .post-count{
	color:var(--text-light)
}
.has-cover .post-info .post-count:after{
	background:#FFF
}




/* ---- ### post-meta <div> in individual post -------- */
.post-header .post-meta{
	position:relative;
	/* padding-bottom:4rem; */
	z-index:10
}
.post-header .post-meta:after{
	clear:both;content:'';
	display:table
}
/* ---- separator after post meta -------- */
/* .post-header .post-meta:before{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:8rem;
	height:1px;
	background:var(--border-colour)
} */


/* ---- #### author in post meta -------- */	/* hidden */
.post-header .post-meta .post-meta-author{
	color:var(--text-dark);
	font-weight:500;
	margin:0;
}
	@media (prefers-color-scheme: dark){.post-header .post-meta .post-meta-author{color:var(--border-inverted)}}	/*dark font colour option for white */


/* ---- post meta with cover -------- */
.has-cover .post-meta{
	color:var(--text-light);
	padding:0
}


/* ---- #### avatars in post meta -------- */
/* .post-header .post-meta .post-meta-avatars{
	float:left;
	margin-right:1rem;
}
.post-header .post-meta .post-meta-avatars:after{
	clear:both;content:'';display:table
}
.post-header .post-meta .post-meta-avatars .post-meta-avatar{
	float:left;
	display:block;
	vertical-align:top;
	width:4rem;
	height:4rem;
	margin-right:-1rem;
	border-radius:100%
}
.post-header .post-meta .post-meta-avatars .post-meta-avatar:last-child{
	margin-right:0
}
.post-header .post-meta .post-meta-avatars .post-meta-avatar a{
	height:100%;
} */



/* ---- ### post progress -------- */
.progress-container{
	position:fixed;
	width:100%;
	height:4px;
	left:0;
	top:0;
	z-index:1000;
	background:transparent;
	transition:all ease-out 0.2s
}
.progress-container.complete{
	transform:translateY(-3px)
}
.progress-bar{
	display:block;
	width:0;
	height:2px;
	background:var(--text-orange);
}




/* ---- ### page-sm -------- */
.page-sm #page-sm-content{
	/*padding-bottom: calc(2rem + 2vw);*/
}




/* ---- ### post-content <sec> under inner <div> in post <article> in content <main> in wrapper <section> in individual post -------- */
.post-content{
	/* display:flex; */
	flex-direction:column;
	align-items:center;
	font-size:2.0rem;
	line-height:1.55em;
}	/* 2.3 1.565, 2.4 1.583 */	/* 1.55 + * ((100vw - 320px) / (428 - 320)) */
	@media (prefers-color-scheme: dark){
		.post-content{font-size:1.9rem;letter-spacing:0.1px;}}
.post-content p{
	font-family: var(--text-font);
	margin:0 0 1.55em;
	opacity: 0.8;
}
.post-content p:empty{
	height: 1em;
}
.tag-hash-zh .post-content{
	line-height:1.583em;
	font-size:2.0rem;
	margin-left: 0 !important;
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){
		.post-content{font-size:2.2rem;line-height:1.483em;}
		.post-content p{margin-bottom:1.4em;}
		.tag-hash-zh .post-content{font-size:2.2rem;line-height:1.583em;letter-spacing:0.5px;}
		.tag-hash-zh .post-content p{margin-bottom:1.583em;padding-right:12%;}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){
		.post-content{font-size:2.3rem;line-height:1.565em}
		.post-content p{margin-bottom:1.565em}
		.tag-hash-zh .post-content{font-size:2.3rem;letter-spacing:0.5px;}}


.post-content>*{
	/* min-width:100%; */
	/* max-width:100%; */
	box-sizing:border-box;
}
.post-content>*:last-child{
	margin-bottom:0
}
.post-content>*:first-child{
	margin-top:0
}

.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{
	line-height:1.25em;
	margin:0 0 0.8em;
	text-rendering:optimizeLegibility;
	color:var(--text-dark);
}
	@media (prefers-color-scheme: dark){.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{color:var(--text-light)}}

.post-content h1{
	font-size:2em;
	line-height:5.9rem;
	text-indent:-1px;
	margin-bottom: 0.8em;
}
.post-content h2{
	font-family: var(--heading-font);
	font-size:1.6em;
	text-indent:-1px;
	line-height: 1em;
	margin-top: 1.6em;
	margin-bottom: 0.8em;
}
.post-content h3{
	font-size:1.3em;
	line-height: 3.8rem;
	margin-top: 30px;
	margin-bottom: 12px;
}
.post-content h4{
	font-size: 1.1em;
	line-height: 30px;
	font-weight: normal:
}
.post-content h5,.post-content h6{
	font-size:2rem;
	font-weight:500;
}
.post-content h1 a,.post-content h2 a,.post-content h3 a,.post-content h4 a,.post-content h5 a,.post-content h6 a{font-weight:inherit;}

.post-content a{
	color:inherit;
	text-decoration:none;
	box-shadow:inset 0 -2px 0 var(--text-green);
	transition:all ease-out 0.2s;
}
.post-content a:focus,.post-content a:hover{
	box-shadow:inset 0 -1px 0 var(--text-orange);
}
	@media (prefers-color-scheme: dark){
		.post-content a{box-shadow:inset 0 -1px 0 var(--text-green);}
		.post-content a:focus,.post-content a:hover{box-shadow:inset 0 -2px 0 var(--text-orange);}}


.post-content ol,.post-content ul{
	font-family:var(--text-font);
	margin:0 0 0 1em;
	padding-left:2em;
	box-sizing:border-box;
}
.post-content ul{
	list-style:none
}
.post-content li{
	position:relative;
	/*margin-bottom: 1.2rem;*/
}
.post-content ol>li:before,.post-content ul>li:before{
	position:absolute;
	width:1.5em;
	margin-left:-2em;
	font-size:1em;
	/*line-height:1.5em;*/
	text-align:right;
	color:var(--text-colour);
	opacity:0.8;
	/* font-family:'Fira Sans', sans-serif; /*default*/
}
.post-content ul>li:before{
	margin-top:-1px;
	content:'+'
}
.post-content ol{
	list-style-type:none;
	counter-reset:item
}
.post-content ol>li:before{
	content:counter(item) ". " !important;
	counter-increment:item
}
.post-content ol ol,.post-content ol ul,.post-content ul ol,.post-content ul ul{
	padding-left:30px;margin:15px 0}


.post-content hr.footnotes-sep{
	display:block;
	height:1px;
	margin:4em 0 2em;
	padding:0;
	background:var(--border-colour);
	border:0
}


/* ---- ### post blockquote -------- */
.post-content blockquote{
	display:block !important;
	font-family:var(--text-font);
	font-size: 1.9rem;
	line-height:1.579em;
	font-weight:400;
	text-align:justify;
	opacity:0.9;
	margin:0 0 3.1rem 1.5em;
	padding:0.25em 5em 0.25em 1em;
	/* -moz-box-sizing:border-box; */
	/* box-sizing: content-box */
	border-left:0.25rem solid var(--text-purple);
	/* border-color: rgba(0,0,0,0.15); */
	/* border-width: 0 0 0 7px; */
	transform: skew(-4deg);
}
.post-content blockquote p{
	transform: skew(2deg);
}
	@media (prefers-color-scheme: dark){.post-content blockquote{font-size: 1.8rem;font-weight:300;opacity: 0.9;}}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){
		.post-content blockquote{
			font-size:2.0rem;
			line-height:1.55em;
			text-align:left;
			margin:0 0 3.1rem 3%;
			padding:0.25em 10% 0.2em 4%;}}
	@media only screen and (max-width:926px) and (max-height:428px) and (orientation:landscape){
		.post-content blockquote{
			font-size:2.2rem;
			line-height:1.571em;
			text-align:left;
			margin:0 0 3.1rem 3%;
			padding:0.25em 10% 0.2em 4%;}}

/* ### blockquote inline 
width: 40%; 
margin-left: 5px; 
padding: 0px 0px 0px 10px; 
float: right; 
display: inline; 
font-size: 22px; 
line-height: 29px;"><span>Make other <span class="stackname">Josefin Slab</span> text stand out! </span></blockquote> */

.post-content blockquote *{
	margin:0 0 1em;
	font-family:inherit;
	color:inherit;
}
.post-content blockquote *:first-child{
	margin-top:0
}
.post-content blockquote *:last-child{
	margin-bottom:0
}
.post-content em,.post-content i{
	font-style:italic;
	font-weight: 400;
}
.post-content b,.post-content strong{
	font-weight:700}
	@media (prefers-color-scheme: dark){.post-content b,.post-content strong{color:#c4c7cc}}  /*  */
.post-content small{
	font-size:0.9em}


.post-content img{
	display:block;
	max-width:66%;
	height:auto;
	margin:0 0 4rem;
	border-radius: 3px;
	border-style: solid;
	border-width: 3px 3px 3px 3px;
	border-image: url(button.svg) 3 3 3 3 stretch stretch;
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){
.post-content img{max-width:90%;}}
	
.post-content .fluid-width-video-wrapper{
	margin:0 0 4rem}

.post-content figure figcaption{
	position:relative;
	color:var(--page-colour2);
	max-width:calc(64rem + 8vw);
	margin:auto;
	font-family:var(--text-font);
	font-size:0.75em;
	line-height:1em;
	padding:2rem 0 2rem;
	text-align:center;
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){.post-content figure figcaption{margin-left:4vw !important;margin-right:3vw !important;}}

.post-content figure figcaption:after{
	content:'';
	position:absolute;
	left:50%;
	margin-left:-4rem;
	bottom:0;
	width:8rem;
	height:1px;
	background:var(--border-colour)
}
.post-content figure figcaption a{
	box-shadow:inset 0 -1px 0 var(--border-colour)
}
.post-content figure figcaption a:focus,.post-content figure figcaption a:hover{
	box-shadow:inset 0 -2px 0 var(--border-colour)
}


.post-content .kg-image-card{
	margin:0 0 4rem;
	max-width:none !important
}
.post-content .kg-image-card.kg-width-wide{
	max-width:calc(72rem + 24vw) !important;
	min-width:100%;
	width:calc(100vw - 4rem)
}
.post-content .kg-image-card.kg-width-full{
	max-width:none;
	width:100vw;
	margin-top:2em
}
.post-content .kg-image-card .kg-image{
	margin:0 auto
}
.post-content .kg-image-card .kg-image-full figcaption{
	margin-bottom:1.33334em
}
	
	
.post-content .kg-gallery-card{
	margin:0 0 4rem;
	max-width:calc(72rem + 24vw) !important;
	min-width:100%;
	width:calc(100vw - 4rem)
}
.post-content .kg-gallery-container{
	display:flex;
	flex-direction:column
}
.post-content .kg-gallery-row{
	display:flex;
	flex-direction:row;
	justify-content:center
}
.post-content .kg-gallery-image img{
	display:block;
	margin:0;
	width:100%;
	height:100%
}
.post-content .kg-gallery-row:not(:first-of-type){
	margin:0.75em 0 0
}
.post-content .kg-gallery-image:not(:first-of-type){
	margin:0 0 0 0.75em}
	
	
.post-content .kg-embed-card{
	margin:0 0 2em;
	width:100%;
	max-height:382.5px;
	height:50.625vw; /* set max to 16:9 56.25% of post width 680 , 382.5px   4:3 510px*/
}
	@media only screen and (max-width:428px) and (max-height:926px) and (orientation:portrait){.post-content .kg-embed-card{margin-left:-3vw !important;width:97vw;}}

.post-content .kg-embed-card>*{
	margin-left:auto;
	margin-right:auto;
}
.post-content .kg-embed-card iframe{
	width:100%;
	height:100%;
	border-radius: 3px;
	border-style: solid;
	border-width: 3px 3px 3px 3px;
	border-image: url(button.svg) 3 3 3 3 stretch stretch;
}

.post-content .kg-code-card{
	min-width:100%;
	margin:0 0 4rem;
}
.post-content .kg-code-card pre{margin:0}


.post-content .kg-bookmark-card{
	width:100%;
	margin:0 0 4rem;
	border-radius: 3px;
	border-style: solid;
	border-width: 3px 3px 3px 3px;
	border-image: url(button.svg) 3 3 3 3 stretch stretch;
}
.post-content .kg-bookmark-container{
	display:flex;
	text-decoration:none;
	min-height:8em;
	/*background:#f7f8fa;*/
	/*border:1px solid var(--border-colour);*/
	box-shadow:none !important;
	overflow:hidden
}
	@media (prefers-color-scheme: dark){.post-content .kg-bookmark-container{background:#333;}}
	
.post-content .kg-bookmark-content{
	text-rendering:optimizeLegibility;
	display:flex;
	flex-direction:column; so
	flex-grow:1;
	align-items:flex-start;
	justify-content:start;
	padding:1.5em;
	font-family:var(--text-font);
	color:var(--page-colour2);
}
	@media (prefers-color-scheme: dark){.post-content .kg-bookmark-content{color:var(--page-colour2)}}
	
.post-content .kg-bookmark-title{
	color:var(--text-dark);
	font-size:0.75em;
	line-height:1.66667em;
	font-weight:700;
	opacity: 0.8;
}
	@media (prefers-color-scheme: dark){.post-content .kg-bookmark-title{color:var(--border-inverted)}}
	
.post-content .kg-bookmark-description{
	display:-webkit-box;
	font-size:0.75em;
	line-height:1.66667em;
	font-weight:400;
	margin-top:0.33334em;
	max-height:3.33334em;
	overflow-y:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
	
.post-content .kg-bookmark-thumbnail{
	position:relative;
	min-width:33%;
	max-height:100%}
.post-content .kg-bookmark-thumbnail img{
	/*position:absolute; should be in desktop*/
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	object-fit:cover;
	border-radius:0;
	border-style:none;
	border-width:0;
	border-image:none;
	max-width:100%;
}
.post-content .kg-bookmark-metadata{
	text-rendering:optimizeLegibility;
	display:flex;
	align-items:center;
	font-size:0.75em;
	line-height:1.66667em;
	color:var(--text-dark);
	font-weight:400;
	margin-top:1em;
	flex-wrap:wrap}
	@media (prefers-color-scheme: dark){.post-content .kg-bookmark-metadata{color:var(--border-inverted)}}
.post-content .kg-bookmark-icon{
	width:1.33334em;
	margin:0 0.75em 0 0;
	border-radius:0;
	border-style:none;
	border-width:0;
	border-image:none;
	}
.post-content .kg-bookmark-author:after{content:"•";margin:0 0.33334em}
.post-content .kg-bookmark-publisher{color:#e05431}
	@media (max-width: 640px){
		.post-content .kg-bookmark-container{flex-direction:column}
		.post-content .kg-bookmark-thumbnail{order:1;width:100%;min-height:160px}
		.post-content .kg-bookmark-thumbnail img{border-radius:3px 3px 0 0}
		.post-content .kg-bookmark-content{order:2}}
		
.clear{clear:both}
.hidden{display:none}
	@keyframes fadein{0%{opacity:0.2}100%{opacity:0.9}}



.post-content mark{
	background-color:#ffc336
}


.post-content code,.post-content tt{
	position:relative;
	/* margin:0 1px; */
	padding:4px 8px;
	font-family:monospace, sans-serif;
	font-size:0.75em;
	/* font-size: 1.7rem; */
	background:#f7f8fa;
	border:1px solid var(--border-colour);
	top:-2px;
	white-space:pre-wrap
}
	@media (prefers-color-scheme: dark){.post-content code,.post-content tt{background:#333;}}
	
	
.post-content pre{
	position:relative;
	margin:0 0 4rem;
	padding:1.2rem;
	overflow:hidden;
	font-family:monospace, sans-serif;
	white-space:pre;
	background:#f7f8fa;
	border:1px solid var(--border-colour);
	box-sizing:border-box}
	@media (prefers-color-scheme: dark){.post-content pre{background:#333;}}
.post-content pre .lines{
	position:absolute;
	width:2.66667em;
	height:100%;
	left:0;
	top:0;
	padding:1.33334em 0;
	border-right:1px solid var(--border-colour);
	color:var(--page-colour2);
	font-size:0.75em;
	line-height:2em;
	text-align:right;
	box-sizing:border-box;
	background:#f7f8fa;
	user-select:none;
	-webkit-user-select:none
}
	@media (prefers-color-scheme: dark){.post-content pre .lines{background:#333;}}
.post-content pre .lines .line{
	display:block;padding-right:0.33334em
}
.post-content pre code,.post-content pre tt{
	display:block;
	position:static;
	top:auto;
	margin:-1.33334em -1.33334em -1.33334em 1.33334em;
	padding:1.33334em;
	overflow-x:auto;
	font-size:0.75em;
	line-height:2em;
	white-space:pre;
	background:transparent;
	border:none;
	vertical-align:inherit
}
.post-content pre code.language-text{
	margin-left:-1.33334em}
	
	
.post-content dl{
	font-family:'equity_ot_b',serif;margin:0 0 4rem;padding-left:30px}
.post-content dl dt{
	font-weight:500;font-size:0.75em;line-height:1.25em;font-weight:700;margin-bottom:0.33334em}
.post-content dl dt:before{
	content:'';position:absolute;width:1em;height:1px;margin-left:-30px;margin-top:0.5em;background:#c4c7cc}
.post-content dl dd{
	margin-left:0;margin-bottom:1em}
	
		
.post-content kbd{
	display:inline-block;
	margin-bottom:0.5em;
	padding:1px 8px;
	border:var(--border-colour) 1px solid;
	text-shadow:#FFF 0 1px 0;
	font-size:0.9em;
	font-weight:bold;
	background:#f7f8fa;
	border-radius:4px;
	box-shadow:0 1px 0 rgba(0,0,0,0.2),0 1px 0 0 #fff inset
}
	@media (prefers-color-scheme: dark){.post-content kbd{background:#333;}}
	
	
.post-content table{
	position:relative;width:100%;max-width:100%;margin:0 0 4rem;border:1px solid var(--border-colour);background:#f7f8fa}
	@media (prefers-color-scheme: dark){.post-content table{background:#333}}
	
.post-content table td,.post-content table th{
	position:relative;padding:1.5rem;font-size:0.75em;line-height:1.33334em;border:1px solid var(--border-colour)}

.post-content table th{
	text-align:left;font-weight:500;letter-spacing:1px;font-size:0.75em;line-height:1.33334em;color:var(--page-colour2)}
	
	
	
	
/* ---- #### strikethrough -------- */	/* ---- for all individual posts, otherwise .page-readme -------- */
.post-content p s{
	position:relative;
	display:inline-block;
	text-decoration: none;
}
.post-content p s::before{
	content: '';
	position:absolute;
	/* border-bottom: 2px solid red; */
	border-bottom: 2px solid #fa0000;
	opacity:0.9;
	width: 120%;
	left:-10%;
	right: 0;
	top: 45%;
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform:rotate(-15deg);
}





.post-footer{
	margin:12rem 0 6rem;
}
.post-footer:after{clear:both;content:'';display:table}


.post-tags{
	position:relative;
	max-width:66.66666%;
	float:left;
	display:flex;
	flex-wrap:wrap;
	font-size:1.4rem;
	line-height:1em;
	font-family:var(--site-font);
	letter-spacing: 0.3px;
	color:var(--text-green);
}
	@media only screen and (max-width: 640px){.post-tags{max-width:none;float:none;margin-bottom:2rem}}
	
.post-tags a{
	display:inline-block;
	margin-right:0.5em;
	margin-bottom:0.5em;
	padding:0 1.5rem;
	/*font-size:1.5em;*/
	font-weight:500;
	line-height:3.1rem;
	text-align:center;
	text-decoration:none;
	color:var(--text-green);
	border:1px solid var(--page-colour);
	border-radius:2em;
	transition:all ease 0.2s;
	box-sizing:border-box;
	white-space:nowrap;
}
.post-tags a:focus,.post-tags a:hover{
	/* background:#d13f21; */
	color:var(--text-purple);
	border-radius:0;
	border-color:var(--text-purple);
}

.post-info-label{ /* mark for tags */
	margin-right:0.5em;
	font-size:1.3rem;
	line-height:3.1rem;
	color:var(--page-colour2);
	bottom:-2px;
}




.post-nav{
	position:relative;
	margin-top:-1px;
	/* border-top:1px solid var(--border-colour); */
	border-bottom:1px solid var(--border-colour);
}
.post-nav:after{
	position:absolute;
	content:'';
	width:1px;
	height:100%;
	left:50%;top:0;
	background:var(--border-colour);
	z-index:2;
}
	@media only screen and (max-width: 640px){.post-nav:after{display:none}}
.post-nav-next,.post-nav-prev{
	text-decoration:none;
	color:inherit;
	display:block;
	width:50%;
}
	@media only screen and (max-width: 640px){.post-nav-next,.post-nav-prev{display:block;width:100%}}
.post-nav-next:focus,.post-nav-next:hover,.post-nav-prev:focus,.post-nav-prev:hover{
	color:inherit
}
.post-nav-next:focus i,.post-nav-next:hover i,.post-nav-prev:focus i,.post-nav-prev:hover i{
	color:#d13f21
}
.post-nav-next{
	float:left
}
.post-nav-next .post-nav-teaser{
	padding-right:3.1rem;
	padding-right:1.55rem;
}
	@media only screen and (max-width: 640px){.post-nav-next .post-nav-teaser{padding-right:0}}
.post-nav-prev{
	float:right
}
.post-nav-prev .post-nav-teaser{
	padding-left:3.1rem;
	padding-left:1.55rem;
}
	@media only screen and (max-width: 640px){.post-nav-prev .post-nav-teaser{padding-left:0}}
.post-nav-teaser{
	position:relative;
	padding:2rem 0;
	min-height:8rem;
}
	@media only screen and (max-width: 640px){.post-nav-teaser{min-height:4em;padding:2em 0}.post-nav-teaser:after{position:absolute;content:'';width:100%;height:1px;left:0;bottom:0;margin-bottom:-1px;background:var(--border-colour);z-index:2}}
	@media only screen and (max-width: 640px) and (prefers-color-scheme: dark){.post-nav-teaser:after{background:var(--border-colour)}}


.post-nav i{
	position:absolute;
	top:50%;
	width:4rem;
	height:4rem;
	margin-top:-2rem;
	font-size:4rem;
	line-height:4rem;
	text-align:center;
	transition:all ease-out 0.2s;
	color:var(--border-colour);
	color:var(--text-dark);
	opacity:0.8;
}
.post-nav i:before{
	margin:0;
	width:auto;
}
.post-nav-next i{
	left:0;
	margin-left:-4rem;
}
.post-nav-prev i{
	right:0;
	margin-right:-4rem;
}


.post-nav-title{
	margin:0 0 0.5rem;
	padding:0;
	font-family:	var(--heading-font);
	font-size:2em;
	line-height:3.1rem;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	/* color:#000; */
}
	@media (prefers-color-scheme: dark){.post-nav-title{color:var(--text-light)}} /* [] test using inherit */
	
	
.post-nav-excerpt{
	height:5rem;
	margin:0 0 1rem;
	font-family:var(--text-font);
	font-size:1.75em;
	line-height:2.5rem;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis
}
.post-nav-meta{
	/* font-size:1.5em; */
	/* line-height:2rem; */
	color:var(--page-colour2);
}




/* ---- ### post share -------- */
/* .post-share{position:relative;max-width:33.33333%;float:right;display:flex}
	@media only screen and (max-width: 640px){.post-share{max-width:none;float:none;margin-bottom:2rem}}
.post-share a{
	display:block;
	width:3rem;
	height:3rem;
	margin-right:0.5em;
	padding:0;
	font-size:1.5em;
	line-height:3.1rem;
	text-align:center;
	text-decoration:none;
	color:var(--text-light);
	border-radius:2em;
	transition:all ease 0.2s
}
	@media only screen and (max-width: 640px){.post-share a{margin-left:0;margin-right:0.66667em}}
.post-share a:focus,.post-share a:hover{background-color:var(--text-dark)}
	@media (prefers-color-scheme: dark){.post-share a:focus,.post-share a:hover{background-color:#d13f21}}
.post-share a:last-child{margin-right:0}
.post-share a i{color:inherit}
.post-share a i:before{width:auto;height:auto}
.post-share .twitter{background-color:#3ea9dd}
.post-share .facebook{background-color:#3c5a98}
.post-share .linkedin{background-color:#0e76a8}
.post-share .email{background-color:#2997ee} */




/* ----  ### post subscribe -------- */
/* .post-subscribe{
	position:relative;
	padding:4rem 0;
	margin:1em 0;
	text-align:center;
	background:var(--border-inverted);
	color:#c4c7cc;
	box-sizing:border-box;
	border-radius:2px
}
.post-subscribe p{
	max-width:13.33334em;
	margin:0 auto 1.33334em;
	font-size:1.2em;
	line-height:1.33334em
}
.post-subscribe .post-subscribe-form{
	display:flex;
	justify-content:center
}
.post-subscribe .post-subscribe-form .post-subscribe-input{
	width:100%;
	font-size:0.8em;
	height:2.5em;
	padding:0 0.25em 0 1.25em;
	border:0;
	border-right:none;
	appearance:none;
	outline:none;
	box-shadow:none;
	box-sizing:border-box;
	border-radius:4em 0 0 4em;
	color:var(--border-inverted)
}
.post-subscribe .post-subscribe-form .post-subscribe-button{
	display:inline-block;
	font-size:0.8em;
	height:2.5em;
	padding:0 1.25em 0 1em;
	font-weight:500;color:var(--text-light);
	background:#909499;
	border:0;
	appearance:none;
	outline:none;
	box-shadow:none;
	box-sizing:border-box;
	border-radius:0 4em 4em 0
}
.post-subscribe .post-subscribe-form .post-subscribe-button:focus,
.post-subscribe .post-subscribe-form .post-subscribe-button:hover{
	background:#d13f21} */




.grt .footnotes {
	font-size: 15px;
	line-height: 24px;
	padding-top: 19px;
	border-top: 1px dotted rgba(0,0,0,0.15);
}
.grt .footnotes p {
	margin-bottom: 19px;
}
.grt ul ul, .grt ul ol, .grt ol ul, .grt ol ol, .grt blockquote.right p, .grt blockquote.left p, .grt .alert :last-child, .grt .note :last-child, .grt .box :last-child, .grt .footnotes :last-child {
	margin-bottom: 0;
}
@media all and (min-width: 706px) {
	.grt {
		padding: 30px;
	}
}


.zh{
writing-mode:vertical rl;
text-orientation:upright;
} 

.test{
	
}

.littlefoot-footnote__button {
	margin:0 0.1em 0 0 !important;
	font-size:0.8em !important;
	top:-0.4em !important;
}
.littlefoot-footnote__content {
	background: rgb(248,248,255) !important; 
	color: var(--text-dark);
}