@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@200;300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');


:root {
	--body: #2A3141;
	--heading: #333;
	--logobrite: #eee;
	--logodark: #aaa;
	--logop: #777;
	--linkp: #888;
	--pale: #aaa;
	--xpale: #f0f0f0;
	--mid: #9a9a9a;
	--access: #595959;
	--white: #fff;
}


html, body {
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-family: Geologica;
	font-weight: 300;
	color: var(--body);
	font-size: 14px;
	font-stretch: semi-condensed;
}

a, a:visited {
	color: var(--logop);
	text-decoration: none;
}
a:active, a:hover {
	color: var(--heading);
	text-decoration: underline;
}

h1 {
	margin: 0 0 1em 0;
	font-weight: 400;
	font-size: 40px;
}


header {
	margin: 0 0 2em 24px;
	padding: 0;
	
	
	display: grid;
	column-gap: 48px;
	grid-template-columns: auto 140px;
	grid-template-rows: auto;
	grid-template-areas:
		"leadin logo"
		"intro logo"
		"follow logo";
}


header div.leadin {
	grid-area: leadin;
	margin-right: 24px;
}
header div.intro {
	grid-area: intro;
	margin-right: 24px;

}
header div.follow {
	grid-area: follow;
	margin-right: 24px;

}
header div.follow p {
	font-size: 0.9em;
}

header div.lcont {
	grid-area: logo;
	align-self: start;
	justify-self: end;
}


header div.lcont {
	width: 140px;
	xflex: 0 0 auto;
}


header p {
	margin: 1em 0 0 0;
}

header h1 {
	margin: 24px 0 0 0;
	flex: 1 1 auto;
	color: var(--heading);
	font-size: 1.8em;
	font-weight: 400;
}
header h1 span {
	font-weight: 700;
	font-size: 1.4em;
	color: var(--logodark);
}

.logoelement {
	fill: var(--logobrite);
}


/* --- article --- */



article section {
	margin: 0 0 48px 0;
	padding: 0 0 48px 0;
	max-width: 780px;
	border-bottom: 1px solid var(--xpale);
}

article h1 {
	margin: 0 0 18px 0;
	font-size: 2.2em;
	font-weight: 500;
	color: var(--heading);
}
article h1 strong {
	font-weight: 700;
	font-size: 1.1em;
}

strong {
	padding: 0 0.2em;
	background-color: var(--logobrite);
	font-weight: inherit;
}

article p {
	font-size: 1.2em;
	line-height: 1.5;
}
article ul {
	margin: 0;
	padding: 0 0 1em 0;
	list-style-type: none;
}
article li {
	margin: 0 0 1em 0;
	padding: 0 0 0 18px;
	font-size: 1.2em;
	background-image: url(../b/bullet.svg);
	background-repeat: no-repeat;
	background-size: 9px 9px;
	background-position: 0 0.3em;
}

article h2 {
	margin: 1.5em 0 1em 0;
	font-size: 1.4em;
	color: var(--heading);
}

article h2.min {
	font-size: 1.2em;
	font-weight: normal;
}

p.byline {
	font-size: 0.9em;
	text-align: right
}



article section.references {
	border-bottom: 0;
}
article section.references h3 {
	margin: 2em 0 1em 0;
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	
}
article section.references p {
	margin: 1em 0 1em 0;	
	font-size: 0.9em;
}

article section.references ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
article section.references li {
	margin: 0 0 0.3em 0;
	padding: 0;
	background: none;
	font-size: 0.9em;
	
}
article section.references li::before {
	content: '\2014 ';
}
article section.references a {
	color: var(--access);
}
article section.references a:hover {
	color: var(--logop);
}
/* --- footer content --- */

footer {
	margin: 0;
	padding-bottom: 1vh;
}

footer h2 {
	margin: 0 0 18px 0;
	padding: 0;

	font-size: 1.2em;
	font-weight: 400;
	color: #fff;


	border-bottom: 1px dashed var(--pale);
}

footer h2 span {
	margin-bottom: -1px;
	display: inline-block;
	padding: 0.5em 24px 0.5em 24px;
	background-color: var(--pale);
}

footer div.items {
	margin: 0 24px 0 24px;
	display: flex;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
footer div.item {
	grid-column: auto;
}


footer h3 {
	margin: 0 0 0.5em 0;
	font-weight: 300;
	font-size: 1.2em;
}
footer p {
	margin: 0 0 0.5em 0;
}


p.nocookies {
	margin: 0 18px 18px 0;
	float: left;
	padding: 0;
	width: 60px;
	height: 60px;
	background-color: #ffd23e;
	border-radius: 100%;
	rotate: -45deg;
}

p.nocookies>span {
	display: block;
	margin: 0;
	padding: 0;
	padding-top: 10px;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
}
p.nocookies span span {
font-size: 14px;
}

a.social {
	display: inline-block;
	padding: 0 18px 0 18px;
	background-repeat: no-repeat;
	background-size: contain;
	font-weight: 400;
	line-height: 1;

}
a.twitter {
	background-image: url(../b/twitter.svg);
}
a.xt {
	background-image: url(../b/x.svg);
}
a.insta {
	background-image: url(../b/insta.svg);
}





/* --- some labels styling --- */


.label {
	padding: 0.3em 1.2em;
	display: inline-block;
	border: 1px solid var(--logodark);
	border-radius: 0.3em;
	background-image: linear-gradient(135deg, var(--logobrite), var(--white));
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.8em;
}

a.label {
	text-decoration: none;
}

p.labelblock {
	margin: 0;
	padding: 0 0 0.8em 0;
	gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
}


/* --- ARTICLE STYLES --- */

article.one {
	margin: 5% auto 20% auto;
	text-align: center;
}
article.one section {
	margin: 0 auto 0 auto;
}

article.one h1 {
	font-size: 20px;
	color: #1C2A4B;		
}

article.one p {
	font-size: 16px;
	color: #1C2A4B;	
}

article.two {
	margin: 5% auto 2em auto;
}

article.two section {
	margin: 0 auto 0 auto;
	text-align: left;
}

article.two h1 {
	font-size: 20px;
	color: #1C2A4B;		
}

article.two p {
	font-size: 14px;
	font-weight: 300;
	color: #1C2A4B;	
}

nav.nextprev {
	margin: 1em auto 0 auto;
	text-align: center;
	max-width: 780px;
}
nav.nextprev p {
	margin: 0 auto 0 auto;
	text-align: left;
}
}

p.msg {
	font-family: "Source Code Pro";
}




/* --- mobile variants --- */


@media only screen and (max-width: 600px) {
	body {
		font-weight: 400;
	}
	header div.lcont {
		width: 25vw;
	}
	header h1 {
		font-size: 1.1em;
	}
	article h1 {
		font-size: 1.5em;
	}


	header {
		grid-template-columns: auto 25vw;
		grid-template-areas:
			"leadin logo"
			"intro intro"
			"follow follow"
	}
	header div.leadin {
		align-self: center;
	}
	article.one, article.two {
		margin-left: 1em;
		margin-right: 1em;
	}
}



@media only screen and (max-width: 780px) {


	p.labelblock {
		padding-bottom: 2em;
		justify-content: flex-end;
	}


	article section {
		margin: 0 0 2em 0;
		padding: 0 0 0 0;
	}

}