#publications {
	isolation: isolate;
}
@media (min-width: 900px)	 { #publications { margin: 100px 0; } }
@media (max-width: 899.99px) { #publications { margin: 75px 0; } }

/*------------------------------------------------------------------------*/

#publications > header {
	display: grid;
	grid-auto-rows: auto;
	align-items: flex-end;
	column-gap: 25px;
	row-gap: 25px;
}
@media (min-width: 700px) {
	#publications > header {
		grid-template-areas: "content controls";
		grid-template-columns: 1fr 270px;
		margin-bottom: 65px;
	}
}
@media (max-width: 699.99px) {
	#publications > header {
		grid-template-areas:
			"content"
			"controls";
		grid-template-columns: 1fr;
		margin-bottom: 35px;
	}
}

/*------------------------------------------------------------------------*/

#publications > header > .content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	row-gap: 25px;
}
#publications > header > .content > * {
	max-width: 475px;
	margin: 0;
	
	text-wrap: balance;
	font-weight: 500;
}
#publications > header > .content > .title { line-height: 100%; }
#publications > header > .content > .description { line-height: 130%; }
@media (min-width: 900px) {
	#publications > header > .content > .title { font-size: 50px; }
	#publications > header > .content > .description { font-size: 20px; }
}
@media (max-width: 899.99px) {
	#publications > header > .content > .title { font-size: 36px; }
	#publications > header > .content > .description { font-size: 16px; }
}

/*------------------------------------------------------------------------*/

#publications > header > .controls {
	grid-area: controls;
	width: 100%; overflow: hidden;
	
	background-color: #FFF;
	border: solid 3px #FFF;
	border-radius: 24px;
	
	isolation: isolate;
}
#publications > header > .controls .control {
	display: flex; height: 40px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	background-color: transparent;
	border-radius: 20px;
	
	white-space: nowrap;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	color: #000;
	
	cursor: pointer;
	
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}
#publications > header > .controls .control:hover {
	background-color: #D5ED99;
	color: #000;
}
#publications > header > .controls .control.current {
	background-color: #364A67;
	color: #FFF;
}
@media (max-width: 420px) { #publications > header > .controls .control { width: 180px; } }

/*------------------------------------------------------------------------*/

#publications > .sections { border-bottom: solid 1px transparent; }