/* !-------- Reset --- */

html,body {
	font-size: 12pt;
}
* {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
}


/* !-------- Layout setup --- */



.page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 20px;
	margin: auto;
 	max-width: 700px; /* Change the container width here. */
}

.page__header {
	display: flex;
	width: 100%;
	margin-bottom: 1rem;
	align-items: flex-end;
	justify-content: center;
}
.page__header h2 {
	min-width: 500px;
	height: 177px;
}
.page__header div {
	max-width: 300px;
	text-align: center;
}
.page__header a {
	display: block;
}
.page__footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-divider {
	max-width: 10px;
	max-height: 14px;
	padding: 0 1rem;
}

.comic-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.navlink {
	display: block;
	width: 104px;
	height: 45px;
}



/* Small screens */

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

	.navlink {
		width: 52px;
		height: 22px;
		background-size: inherit;
	}
	.page__header {
		align-items: center;
		height: auto;
	}
	.page__header div {
		max-width: 100%;
	}

	.page__secondary {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0;
		max-width: 100%;
		padding: 0;
	}
}

/* Wide screens */

@media screen and (min-width: 901px) {
	.page__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
	.page__content article header {
		display: flex;
		justify-content: space-between;
	}

	.page__content img {
		display: block;
	}
	.page__secondary {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
}


/* !-------- Main section’s columns --- */

@media screen and (max-width: 900px) {
	.page__header {
		flex-direction: column-reverse;
	}

	/* This h2 is the site title. */
	.page__header h2 {
		max-width: 100%;
		height: 177px;
	}
	.page__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 100%;
	}
}



/* !-------- Arrangement --- */

/* What’s this? Change the order in which sections
 * appear by changing the numbers below. For example,
 * if you want the blog to come before the share icons,
 * then change its order to 1, and share’s order to 2.
 */

/* MAJOR SECTIONS */
/* These are the broad regions inside of the
 * overall page container. */

.page__header {
	order: 1;
}
.page__content {
	order: 2;
}
.page__secondary {
	order: 3;
}
.page__footer {
	order: 4;
}

/* SUPPLEMENTAL SECTIONS */
/* These are the items inside of page__secondary. */

.secondary__share {
	order: 1;
	flex: 1;
}
.secondary__blog {
	order: 2;
	flex: 2;
	margin-right: 2rem;
}
.secondary__transcript {
	order: 3;
}
.secondary__follow {
	flex: 1;
	order: 4;
}
.secondary__follow a {
	display: block;
	padding: 0.4rem 0;
}
.follow-set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


/* !-------- Archive --- */

/* ----- Version 1.4+ archive structure */

/* Version 1.4 of the Grawlix CMS introduced 
 * a new HTML structure for archives. It’s more
 * of a hierarchy than the old way (see above) 
 * and allows for marker images.
 */

/* Everything in this structure is inside an 
 * unordered list (UL). This bit removes the 
 * default bullet points.
 */
.archive-content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Various types of layouts. */
.archive-layout--list {
	display: flex;
	flex-direction: column;
}
.archive-layout--grid {
	display: flex;
	flex-wrap: wrap;
}
.archive-layout--inline {
}


/* If you want a grid-based layout, how many 
 * columns do you want? Uncomment the appropriate 
 * sets below to divide the grid into two, three, 
 * four, or five markers across.
 */

/* Create a two-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 45%;
	margin-right: 5%;
}
*/

/* Create a three-up layout grid. */
.archive-layout--grid .archive-marker {
	width: 30%;
	margin-right: 3%;
}

/* Create a four-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 24%;
	margin-right: 1%;
}
*/

/* Create a five-up layout grid. */
/*
.archive-layout--grid .archive-marker {
	width: 19%;
	margin-right: 1%;
}
*/


/* Styles for various “ranks” of markers, such as volume, chapter, scene, etc */
.archive-level-1 {
	font-size: 1rem;
}
.archive-level-2 {
	font-size: 0.75rem;
}
.archive-level-3 {
	font-size: 0.5rem;
}

/* Add a little space between chapters/scenes/etc. */
.archive-marker {
	margin-bottom: 2rem;
}

/* Markers’ images typically need a little space too. */
.archive-marker header img {
	margin-bottom: 0.5rem;
}

/* Page items also often need some breathing room. */
.archive-page {
	padding: 0.25rem 0;
}

/* Make publication dates look a little less important — and distracting. */
.archive-page time {
	font-size: 0.75em;
	display: block;
}


/* !-------- Static content --- */

.cast-character {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: flex-start;
	margin-bottom: 30px;
}
@media screen and (max-width:500px){
	.cast-character {
		flex-direction: column;
	}
}
.cast-character header {
	display: block;
}
.cast-character h2 {
	color: #4a8ab7;
	margin: 0;
}
.static-metadata {
	padding: 0 30px;
	flex: 1;
}
.static-media {
	flex: 1;
}

/* Overall page layout: straight list vs. two-up grid */
.static-layout-list {
	 display: flex;
	 flex-direction: column;
}
.static-layout-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.static-layout-grid [class^='pattern'] {
	width: 49%;
	margin-bottom: 1rem;
}


/* !-------- Misc --- */


/* Static pages have different “patterns,” or
 * configurations of HTML. This section controls
 * how each pattern is laid out.
 */

.pattern-image-top {
	display: flex;
	flex-direction: column;
}
.pattern-image-top h3 {
}
.pattern-image-top .content {
}

.pattern-image-left {
	display: flex;
	flex-direction: row;
	margin-bottom: 1rem;
}
.pattern-image-left figure {
	max-width: 35%;
}
.pattern-image-left .content {
	max-width: 60%;
	margin-left: 1rem;
}

.pattern-image-right {
	display: flex;
	margin-bottom: 2rem;
}
.pattern-image-right h3 {
	margin-right: 1rem;
}
.pattern-image-right .content {
	width: 80%;
}

.pattern-no-image {
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.pattern-no-image h3 {
}
.pattern-no-image .content {
}


/*

Comic page structure, for reference

page
|
+-page__header
| |
| +-h2
| +-header__menu
|
+-page__content
| |
| +-article
| | |
| | +-h1
| | +-comic__nav-1
| | +-comic-images
| | +-publication-date
| | +-comic-images
| | +-comic__nav-2
|
+-page__secondary
| |
| +-secondary__share
| +-secondary__blog
| +-secondary__transcript
|
+-page__footer

*/

/* Static pages have different “patterns,” or
 * configurations of HTML. This section controls
 * how each pattern is laid out.
 */

.pattern-image-top {
	display: flex;
	flex-direction: column;
}
.pattern-image-top h3 {
}
.pattern-image-top .content {
}

.pattern-image-left {
	display: flex;
	flex-direction: row;
	margin-bottom: 1rem;
}
.pattern-image-left figure {
	max-width: 35%;
}
.pattern-image-left .content {
	max-width: 60%;
	margin-left: 1rem;
}

.pattern-image-right {
	display: flex;
	margin-bottom: 2rem;
}
.pattern-image-right h3 {
	margin-right: 1rem;
}
.pattern-image-right .content {
	width: 80%;
}

.pattern-no-image {
	display: flex;
	flex-direction: row;
	margin-bottom: 1rem;
}
.pattern-no-image figure {
	width: 35%;
}
.pattern-no-image .content {
	width: 60%;
	margin-left: 1rem;
}