/*=============================================================================
  File:         bluephrase.com/css/story.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Apr 13, 2019
  Contents:     Baseline CSS for div#story.medium
=============================================================================*/

/*--------------------------------- Typeface --------------------------------*/
div#story.medium {
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

#columns {
	background-color: var(--black);
}

/*-------------------------------- Fallbacks --------------------------------*/
div#story.medium  {
	text-rendering: optimizeLegibility;
	max-width: 720px; /*43rem;*/
	margin: 0 auto;
    padding-top: 0;
    padding-right: 16px;
    padding-bottom: 7rem;
    padding-left: 16px;
    color: var(--paragraph-color);
    box-sizing: border-box;
}

/*--------------------------------- Byline --------------------------------*/
div#story.medium address {
	margin: 0 0 2rem 0;
	display: flex;
	align-items: center;
	color: var(--gray);
    max-width: initial;
}
div#story.medium address img {
	width: 50px;
	margin-right: 1rem;
}
div#story.medium address a {
	margin-left: 0.25rem;
	margin-right: 1rem;
}
div#story.medium address a:link,
div#story.medium address a:visited {
	border-bottom: 1px dotted var(--gray);
	color: var(--gray);
}

/*--------------------------------- Headings --------------------------------*/
div#story.medium h1,
div#story.medium h2,
div#story.medium h3,
div#story.medium h4 {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
	margin: calc(1rem * 12 / 14) auto calc(1rem * 12 / 14) auto;
    font-style: normal;
    text-transform: initial;
    max-width: initial;
}

div#story.medium h1:first-of-type {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: calc(2.4rem * 12 / 14);
    font-weight: 400;
    line-height: 1.2;
    color: var(--title-color);
    margin: 0 auto 0.8rem auto;
}

div#story.medium h1,
div#story.medium h2 {
	font-size: calc(1.5rem * 12 / 14);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -1px;
    color: var(--header-color);
    margin: calc(0.8rem * 12 / 14) auto calc(2.0rem * 12 / 14) auto;
    border-top: none;
    padding: 0;
}
#making-of {
    max-width: 100%;
    background-color: var(--medium-black);
    margin-bottom: 2rem;
}
#making-of h2 {
	font-style: initial;
	font-size: calc(1.1rem * 12 / 14);
	color: var(--header-color);
    margin: calc(1.5rem * 12 / 14) auto 0 auto;
    padding-top: 0;
    padding-bottom: calc(1.5rem * 12 / 14);
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}
div#story.medium h2.subtitle {
    color: var(--header-color);
}
div#story.medium h3 {
	font-size: calc(1.5rem * 12 / 14);
    font-weight: 700;
}
div#story.medium h3 {
	font-size: calc(1.3rem * 12 / 14);
    letter-spacing: 0px;
    text-align: left;
    color: rgba(255,255,164,0.7);
}
/* kicker */
div#story.medium h4 {
	font-size: calc(0.9rem * 12 / 14);
    font-style: italic;
    letter-spacing: 1px;
    padding-bottom: 0.4rem;
}

/*-------------------------------- Paragraphs -------------------------------*/
div#story.medium p {
	font-size: calc(1.25rem * 12 / 14);
    font-weight: normal;
    line-height: 1.65;
    color: var(--paragraph-color);
    margin: 0 auto calc(1.65rem * 12 / 14) auto;
    max-width: initial;
}

div#story.medium pre {
	font-family: Menlo, Monaco, "Courier New", Courier, monospace;
	padding: calc(0.75rem * 12 / 14);
    background-color: var(--code-background);
	color: var(--pure-white);
    line-height: 1.45;
    overflow: auto;
    word-wrap: normal;
    padding: calc(1rem * 12 / 14) calc(1rem * 12 / 14) 0 calc(1rem * 12 / 14);
    white-space: pre-wrap;
    max-width: initial;
}

div#story.medium code {
	font-family: Menlo, Monaco, "Courier New", Courier, monospace;
	font-size: calc(1rem * 12 / 14);
    padding: calc(0.1rem * 12 / 14) calc(0.3rem * 12 / 14);
    background-color: var(--code-background);
}

div#story.medium blockquote {
    border-left: 3px solid var(--border-color);
    max-width: initial;
}

div#story.medium blockquote,
div#story.medium blockquote p {
    padding-left: 1.5rem;
    margin-left: -1.6rem;
    margin-right: -2rem;
	font-size: calc(1.25rem * 12 / 14);
    font-style: italic;
    letter-spacing: -0.5px;
    line-height: 2rem;
}
@media only screen and (max-width: 50rem) {
	blockquote,
	blockquote p {
    	padding-left: 0.75rem;
		margin-right: 0;
		margin-left: 0;
	}
}

div#story.medium hr {
	border: none;
    max-width: initial;
}
div#story.medium hr:before {
    content: '...';
    display: inline-block;
	font-size: calc(1.4rem * 12 / 14);
    letter-spacing: 1.6rem;
    color: var(--hr-color);
    position: relative;
    top: -1rem;
    text-align: center;
    width: 100%;
}

/*-------------------------------- Hyperlinks -------------------------------*/
div#story.medium :link,
div#story.medium :visited {
	text-decoration: none;
	border-bottom: 1px solid var(--paragraph-color);
	color: var(--paragraph-color);
}
div#story.medium :focus   { outline: thin dotted }


/*---------------------------------- Images ---------------------------------*/
div#story.medium figure:first-of-type,
div#story.medium figure#full-bleed {
    border: none;
	max-width: 100%;
	margin-top: 0rem;
	padding-top: 1rem;
	margin-right: 0;
	margin-bottom: 1.65rem;
	margin-left: 0;
    float: none;
    box-shadow: none;
}

div#story.medium figure {
    border: none;
    max-width: 75%;
	margin-top: 0;
	margin-right: 2rem;
	margin-bottom: 1.65rem;
	margin-left: -22%;
    float: left;
}

div#story.medium figure.example {
	display: block;
    width: var(--column-max-width);
    max-width: var(--column-max-width);
    box-sizing: border-box;
	margin: 1rem auto 2rem auto;
}
div#story.medium figure.example figcaption {
    max-width: var(--column-max-width);
    color: var(--yellow);
    margin-top: 0rem;
}

div#story.medium figure img {
    border: none;
	max-width: 100%;
	margin: 0;
}
div#story.medium figcaption {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
	font-size: calc(0.9rem * 12 / 14);
    color: var(--figcaption-color);
    text-align: center;
    margin-top: 0.5rem;
}

@media only screen and (max-width: 66rem) {
	div#story.medium figure:first-of-type,
	div#story.medium figure#full-bleed {
	}
}
@media only screen and (max-width: 55rem) {
	div#story.medium figure:first-of-type,
	div#story.medium figure#full-bleed {
	    width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
}
@media only screen and (max-width: 63rem) {
	div#story.medium figure {
	    float: none;
		margin-right: auto;
		margin-left: auto;
	}
}

/*---------------------------------- Lists ----------------------------------*/
div#story.medium ul,
div#story.medium ol {
	font-size: calc(1.25rem * 12 / 14);
    color: var(--paragraph-color);
    line-height: 1.65;
    padding-left: 1.5rem;
}
div#story.medium ul ul,
div#story.medium ul ol,
div#story.medium ol ol,
div#story.medium ol ul {
    margin-top: 0;
    margin-bottom: 0;
}
div#story.medium ul + p,
div#story.medium ol + p {
    margin-top: 1rem;
}
div#story.medium li {
    line-height: 1.65;
    word-wrap: break-word;
}
div#story.medium li > p {
    margin-top: 1rem;
}
div#story.medium li+li {
    margin-top: 1rem;
}
div#story.medium dl {
	font-size: calc(1.15rem * 12 / 14);
    padding:0;
}
div#story.medium dl dt {
    padding: 0;
    margin-top: 1rem;
	font-size: calc(1rem * 12 / 14);
    font-style: italic;
    font-weight: 600;
}
div#story.medium dl dd {
    padding: 0 1rem;
    margin-bottom: 1rem;
}