/* 
*
*	dumbtype.com-2.0
*	news page styles
*
*/

/* --------------------------------- */
/* contents layout */
/* --------------------------------- */
[data-title='BIOGRAPHY'] a { color: #900; }

/* Biography main > h1 and #bio-index (main > nav) are fixed position, so we need to offset the position and sizes. */
main > h1 {
	position: fixed;
	width: calc(100% - 400px);
	min-width: 700px;
	background-color: white;
	z-index: 1;
	
	/* h1 should be offset because of position fixed  */
	top:0px;
	padding-top: 20px;
	height:calc(100px + 20px);
}
/* In biography, cancel margin-bottom default. */
main > article p { margin-bottom: inherit; }

#bio-index { 
	position: fixed;
	font-family: "Helvetica", "Arial", sans-serif;
	width: calc(100% - 400px);
	min-width: 700px;
	background-color: white;
	border-bottom: 1px solid gray;

	/* bio-index should be offset because of position fixed  */
	top:calc(100px + 20px);
}
#bio-index li { 
	display: inline-block; 
	padding-right: 0.75em; 
	font-size: 1.0rem; 
	line-height: 1.2em; 
	margin-bottom:0.2em; 
	cursor: pointer;
}

/* the contents container, padding-top is offset the heights of header, submenu with 2rem margin. */
#bio-list { 
	padding-top: calc(20px + 100px + 100px + 2rem); 
}

/* article that is each content in the container. */
main > article {
	font-family: "Helvetica", "Arial", sans-serif;
	padding-bottom: 4em;
	padding-bottom: 30dvh;
}
main > article time { display: inline-block; margin-top: 2em; }
main > article time:nth-of-type(1) { display: inline-block; margin-top: 0em; }
main > article h2:not([data-primary]) { margin-top: 1em; }

[data-mu-autoscroll-button] { opacity: 0.5; }
[data-mu-autoscroll-button]:hover { opacity: 1.0; }
[data-mu-autoscroll-button][data-mu-autoscroll-selected] { opacity: 1.0; }

/* --------------------------------- */
/* Responsive
/* --------------------------------- */
@media screen and (max-width: 960px) 
{
	/*  */
	main > h1 {
		 width:calc(100% - 2rem); 
		 min-width:inherit;
		 padding-top: 2rem;
		 height:calc(2rem + 100px);
	}
	
	#bio-index-mobile {
		position: fixed;
		width: calc(100% - 2rem);
		padding-top: calc(20px + 100px + 100px - 2.1em);
		background-color: white;
		border-bottom: 1px solid #aaa;
	}
	#bio-index-mobile > div { display:flex; width:100%; height:100%; justify-content:space-between; align-items:end; }
	#bio-index-mobile > div > h3 { display:block; padding:4px 0px; font-size:1.2rem; }
	#bio-index-mobile button { display:block; padding:4px 12px; background-color:white; font-family: "corporate-a", serif; border:1px solid #aaa; opacity:0.5; cursor:pointer; }
	#bio-index-mobile button:hover { opacity:1.0; }

	/* Year selection container. */
	#year-selection { width: 100%; }
	/* #year-selection-button { font-family: "corporate-a", serif; opacity: 0.5; } */
	#year-selection-button { text-align:right; }
	#year-selection-button button { display:inline-block; padding:4px 12px; background-color:white; font-family: "corporate-a", serif; border:1px solid #aaa; opacity:0.5; cursor:pointer; }
	#year-selection-button button:hover { opacity:1.0; }

	/* Year container layout as column-base by using flex-flow and column-count. */
	#year-selection-container { 
		width: 70vw;
		font-size: 1.25rem;
		min-width: calc(4em * 3); 
		height: 100dvh; 
		padding: 2rem; 
		/* padding-top: calc(2rem + 100px + 100px - 3.5rem - 8px);  */
		padding-top: calc(2rem + 100px + 100px - 8rem - 8px);
		background-color: white; top: 0px; 
		margin:auto; 
	}
	#year-selection-container > h3 { 
		font-weight: normal;
		padding-bottom: 1rem;
		opacity: 0.5;
	}
	#year-selection-container > ul {
		display: flex;
		align-content:flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		width: 100%;
		height: calc(100% - 4rem);
		text-align: left;
	}
	#year-selection-container li { 
		display: inline-block; 
		width: 30%;
		padding: 5px 0px; 
		padding-right: 1em;
		font-size:1.2rem;
		cursor: pointer; 
	}

	/* the contents container, padding-top is offset the heights of header, submenu with 2rem margin. */
	#bio-list { 
		padding-top: calc(20px + 100px + 100px + 2rem); 
		padding-bottom:4rem;
	}

}