/*****************
 Text
/*****************/

body{
	font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;
	line-height:1.5;
	background:#000;
	color:#fff;
	padding-top:1em;
	
	font-size:0.875em;}
.inverted{
	background:yellow;
	color:#000;
}
a{
	color:#fff}
	
.article{
	margin:0.5em;
	max-width:20em}

.card__header--landscape{
	text-align:center}
.card__header--text{
	text-align:center}
/*
.card__media--landscape{
	margin-bottom:1em}
.card__media--portrait{
	height:120px;
	margin-right:20px}
.card__picture--landscape{
	margin:auto}
.card__picture--portrait{
	height:120px;
	width:auto}
*/
.card__subtitle{
	display:inline-block}
.card__subtitle--text{
	display:block}
.card__title{
	display:inline-block}
.card__title--text{
	display:block}
.card--inverted .card__text{
	color:#000}

.info{
	margin-bottom:4em}

.keywords__item{
	display:inline-block;
	margin-bottom:0.25em}
.keywords__item:before{
	content:", "}	
.keywords__item:first-child:before{
	content:""}


		
.masthead{
	transform: rotate(180deg);
    vertical-align: bottom;
    writing-mode: vertical-lr;
	font-weight:bold;
	color:yellow}
.masthead__author{
	display:block;
	font-weight:normal}
.inverted .masthead__author{
	display:none}
.inverted .masthead{
	color:#000}

.menu{
	transform: rotate(180deg);
    vertical-align: bottom;
    writing-mode: vertical-lr;
}
.menu__link{
	color:yellow}
.inverted .menu{
	display:none}


.ui--desktop{
	display:none}

@media screen and (max-width:30em) {
	.list__items{
		display:flex;
		flex-direction:column}
	.list__item--start{
		align-self:flex-start}
	.list__item--center{
		align-self:center}
	.list__item--end{
		align-self:flex-end}
}		
@media screen and (max-width:36em) {
	body{
		display:flex;
		flex-wrap:wrap}
	.footer{
		flex-basis:40%;
		align-self:flex-end;
		margin-bottom:2em}
	.header{
		flex-basis:15%;
		margin-bottom:2em}
	.main{
		flex-basis:100%;
		order:2}
}	
@media screen and (max-width:48em) {
	.card__link--portrait{
		display:flex;
		align-items:center}
	.card__media--portrait{
	flex:0 0 auto}

}