@import url("/assets/css/common.css");


/* TEXT ELEMENT SIZES */

.sitename {font-size:1.5rem;}

nav a {font-size:.55rem;}

.headline {font-size:1.3rem;}

article {font-size:.95rem;}

.deck {font-size:.9rem;}

.publine {font-size:.5rem;}
.clause {font-size:inherit;}

.standfirst {font-size:.84rem;}

/* these two seem backwords, but they're not */
.chapter h1 {font-size:.7rem;}
.chapter h2 {font-size:3rem;}

.dropcap:first-letter {font-size:3.4rem;}

.sig {font-size:2rem;}

.ye {font-size:1.2rem;}

table {font-size:.75rem;}

figcaption,
tfoot td {font-size:.65rem;}
	
aside q {font-size: 1.1rem;}
aside .sig {font-size:small;}

blockquote {font-size:.8rem;}

.fin {font-size:1rem;}

article sup {font-size:.55em;}

.endnotes ol,
.biblio {font-size:.8rem;}

.endnotes sup {font-size:small;}

code {font-size:.7rem;}

pre {}

pre code {
	line-height:1.1;
	text-align:left;
	white-space:normal;
	word-spacing:normal;
	word-break:normal;
	word-wrap:break-word;
	direction:ltr;
	hyphens:manual;
}

/*----------------------------------
          LA TÉTE OF PAGE
-----------------------------------*/

.tete {padding-top:0;}

.banner {
	padding-left:.5em;
	display:flex;
	align-content:flex-start;
	align-items:center;
  background-image:url(/assets/images/elemouse.png);
  background-repeat:no-repeat;
  background-position:97.5% 50%;
  background-size:contain;
}

.sitename {
	line-height:1.5;
  margin:0;
	width:auto;
}

.sitename a {
	color: inherit;
	text-decoration: none;
	text-shadow: none;
}

/* All instances of '\3002' is unicode for ideographic full stop. */
.sitename a::after {
  content: "\3002";
}

.sitename a:hover::after {
  content: "\3002";
  color: red;
}

/*---------------------------------------
     NAVIGATION: Superior & Inferior
----------------------------------------- */
.superior,
.inferior {
	border-top:3px double #9e9d93;
	border-bottom:3px double #9e9d93;
	background-color:#fdf8cb;
	color:#444;
}

.superior,
.inferior {
	line-height:1.5;
	padding-left:.5em;
}

.inferior {margin-top:3em;}

nav ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
  margin:0;
  padding-left:0;
  list-style:none;
}

nav a {
  color:inherit;
  text-decoration:none;
  display:block;
  padding:0;
	background:none;
	transition:all .3s ease-in-out;
}

nav a:hover {
  background:transparent; 
  color:#000;
	text-shadow:none;
}

nav a::after {
  content: "\3002";
  color:#fdf8cb; /* needs to be same as html bg color */
}

nav a:hover::after {
  content: "\3002";
  color:#e50000;
}

/*----------------------------------
         LE CORPS <article>
-----------------------------------*/
.bodywrap {padding-top:1em;}

.flexbox,
.paging { /*Finding .paging in templates and prefix with .flexbox, then remove from here.*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: space-between;
	margin: 2em auto;	
}

/* TEXT SELECTION SILLINESS */
article p::-moz-selection {color: #f6efa5; background: #54534b;} /* Code for Firefox */
article p::selection {color: #f6efa5; background: #54534b;}
article a::-moz-selection {color: #000; background: #f2de4f;} /* Code for Firefox */
article a::selection {color: #000; background: #f2de4f;}

article {line-height:1.6;}

article h2 {
	line-height: 1.1;
	margin-bottom: .3em;
}

/* HEADER.head CHILDREN */
/* Article Title */
.headline {
	line-height:1;
  font-weight:normal;
  margin:0 auto;
}

.headline,
.deck {line-height: 1.1;}

/* Article Subtitle */
.deck {
	margin:.5em auto 0 auto;
	padding: 0;
	color: #555;
	font-weight:normal;
	font-style:italic;
	text-align:left;
}

/* Author - Publish Date - Word Dount */
.publine {margin-top:1.5em;}

/* Formats parenthetical in publine about word counts */
.clause {font-size:.6rem; color:#666;}

/* Lead = Excerpt */
.standfirst {
	font-weight:600;
	line-height:1.6;
	margin:.5em auto;
	padding:0;
}

/* PRIMARY SECTION HEADERS */

.chapter {
	text-align:center;
	line-height:1;
}

.chapter {
	margin: 3em auto;
	padding:0;
}

.chapter h1 {text-transform: uppercase;}

.chapter h1::after {
	display:block;
	margin-top: -10px;
	margin-bottom: 1.3em;
	content: '⸐⸏⸏⸏⸑';
}

.chapter h2 {margin-top:0;}

#preface,
#postface {
	line-height:1;
	margin: 2em auto;
	font-variant: small-caps;
}

#postface {text-align:right;}

/*
#preface:before {content:'\27E3   ';}
#postface:after {content:'   \27E3';}
*/

#preface::after {
	content:'   \27E2';
	text-shadow:2px 1px black; /* h-shadow v-shadow color */
}

#postface::before {
	content:'\27E2   ';
	text-shadow:-2px -1px black;
}

#preface::before,
#preface::after {color:#ffd700;} /* gold */

#postface::before,
#postface::after {color:red;}


/*
.chapter::before, 
.chapter::after { display: block; }

.chapter::before { margin-bottom: 0; padding-bottom: 0; }

.chapter::before { content: url(/assets/images/goldleaf-top.png); margin-top: 2em; }
.chapter::after { content: url(/assets/images/goldleaf-bottom.png); margin-bottom: .2em; }
*/

/* EDITOR NOTES / COMMENTS */

.draftnote {
	border: 5px solid gold;
	padding:1.5em;
	background-color: beige;
	line-height:1.2;
}

.draftnote,
.editornote {
	color:black;
	font-size:.9rem;
}

.draftnote::before {
	content:'Editor note:  ';
	font-weight:700;
}
	
.editornote::before {
	content: '[\1D46C\1D485\1D48A\1D495\1D490\1D493 \0020 \1D48F\1D490\1D495\1D486:  ';
}

.editornote::after {
	content: ']';
}

/* DROP CAPS */
.dropcap::first-letter {
  color:#333;
  float:left;
  padding-top:4px;
  padding-right:8px;
	margin-top:.05em;
	line-height:.6;
	/* text-shadow:2px 1px black; /* h-shadow v-shadow color */
}

/* SMALL CAPS */	
.smallcaps {font-variant: small-caps;}

/* FP signature 
These next two items are obsolete with the new signature! */
.sig {text-align:center;}

.sig:hover {
	background-image:url(/assets/images/sinister-slash.png);
  background-repeat:no-repeat;
  background-position:49% 50%;
  background-size:contain;
}

/* QUOTATIONS: blockquote, q */

/* Single marks override browser defaults */
q::before {content:'\2018';}
q::after {content:'\2019';}

blockquote {
	width:80%;
	margin:1.5em auto;
}

/* FIGURES & ASIDES 
See common.css for common rules
*/
.hero {
	margin-top:2em;
	text-align:center;
}

.hero {
	width:auto;
	max-width:380px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

.capcenter {text-align:center;}

/* For spacing on floated figures.
   Eg: <txp::figure id="32" class="left fig" width="115px" />
*/
.fig {
	margin-top:1.5em;
	margin-bottom:1.5em;
}

figcaption {line-height:1.2;}

/* figcaption > span.source */
.source {display:block; margin-top:.7em;}
.source, .source a {color:#666;}
.source:before {content:'(Source: ';}
.source:after {content:')';}

/* Asides/Pullquotes rules
See: https://www.w3.org/TR/html/sections.html#the-aside-element
*/

aside {
	shape-outside: padding-box;
	padding: 2em;
	line-height: 1.3;
}

aside .sourcelink { 
	display: block;
	margin-top:3px;
}

/* 
Thumbnail grid used inside articles.
Marked up as a series of figures inside a <section>.
*/
.grid {width:auto;}

.grid > figure {
  width: 23%;
  margin: 0;
  padding: 0;
  vertical-align: top; /*may not be needed, or not correct*/
}

.grid > figure > figcaption {
  text-align:center;
	padding:.5em;
}

.grid > figure > a {
  display: block;
  border: 2px solid #e0e0e0;
}

.grid > figure > a:hover {
  border-color:#444; /* #fff6c3 is interesting too */
}

/*  LISTS  */

ul,ol {padding-left:0; list-style-position:inside;}

ul ul {padding-left:1em;}
ul ul ul {padding-left:1.5em;}

/* Special dl on textism article */
.award {width:80%;}

dl.bookaward {
	width:50%;
	padding-top:1.5em;
}

.bookaward dt {margin-bottom: 1em;}

figure.jacket {width:200px;}
.jacket img {border:1px solid black;}


/*  TABLES  */
table {
  width: 100%;
  margin: 2.5em 0;
  border-collapse: collapse; 
  line-height: 1.2;
	vertical-align: text-top;
}

tr {vertical-align:top;}

tr:nth-child(even) {background-color:#fff8cc;}

th, td { 
	padding:.4em .25em;
	vertical-align:inherit;
}

caption {
  font-weight:bold;
  margin-bottom:1em;
}

th,
caption {text-align:left;}

thead {border-bottom:2px solid #888;}

tbody tr {border-bottom:1px solid #e7e4ce;}

tfoot {border-top:2px solid #888;}

tfoot td {text-align:left;} /* Not used because Textile needs an inline override for now. */

tfoot ol {
	list-style-type:none;
	text-indent:-.75em;
	padding-left:.75em;	
}

tfoot li {margin:.15em 0;}

ol.refmarks {
	list-style-type:none;
	text-indent:-.75em;
	padding-left:.75em;	
}

.refmarks li:before {margin-right:.4em;}

.refmarks li:first-child:before {content:'\002a';} /* asterisk */
.refmarks li:nth-of-type(2):before {content:'\2020';} /* dagger */
.refmarks li:nth-of-type(3):before {content:'\2021';} /* double dagger */
.refmarks li:nth-of-type(4):before {content:'\00a7';} /* section */
.refmarks li:nth-of-type(5):before {content:'\00b6';} /* pilcrow */
.refmarks li:nth-of-type(6):before {content:'\2016';} /* parallel bars */
.refmarks li:nth-of-type(7):before {content:'\002a\002a';} /* parallel bars */


/*  HARD RULES  */
hr.startrule {
	margin-top:1em;
	margin-bottom:.5em;
}

hr.endrule {
	margin-top:.5em;
	margin-bottom:1em;
}

hr.asterism {
width: auto;
background: none;
margin:1em auto;
text-align: center;
overflow: visible;
}

hr.asterism:before { content: '\2042'; /* asterism unicode */ }

/* ENDNOTES
   All the stuff within section.endnotes at bottoms of articles */

/* Inline Numeration */
article sup {
	vertical-align: text-top;
	line-height: 1;
	margin-left: 2px;
	margin-right: 2px;
}

article sup a {
	border-radius: 3px;
	padding: 0 6px;
	background: #e1ddcb;
	border-bottom: 0;
	text-decoration: none;
}

article sup a:hover {
	color: #000;
	background: yellow;
	text-shadow:none;
}

/*                ENDNOTES & Bibliography
----------------------------------------------------------------*/

/* 'Fin' — After main text and before Notes */
.fin {
	margin:1em auto;
	text-align:center;
}

/* Inline Numbering of Notes */
article sup {
	line-height:1;
	margin-left:2px;
	margin-right:2px;
}

article sup a {
	border-radius: 3px;
	padding:2px 6px;
	background: #e1ddcb;
	border-bottom: 0;
	text-decoration: none;
}

article sup a:hover {
	color: #000;
	background: yellow;
}

/* Notes & Biblio Listings */

section.endnotes,
section.biblio {margin:3em auto 2em;}

.endnotes hr,
.biblio hr { width: 40%; margin-left: 0; margin-bottom: 0; }

.endnotes hr,
.biblio hr { background: linear-gradient(to right, #32312d, #32312d 50%, #fdf9dc); }

.endnotes h1,
.biblio h1 {
	text-align:left;
	margin-top: 0;
	margin-bottom:1.5em;
}

.biblio ol {
	list-style:none;
	margin-left:0;
	padding-left:0;
}

.endnotes ol {
	counter-reset:item;
	margin:0 auto;
	padding:0;
	list-style:none;
}

.biblio li,
.endnotes li {line-height:1.2;}

.biblio li {
	text-indent:-1.5em;
	padding-left:1.5em;
	margin-bottom:.75em;
}

.endnotes li {
	position:relative;
	display:block;
	margin-bottom:3em;
	padding:0;
}

.endnotes sup {
	position:absolute;	
	left:39%;
	top:-24px;
}

.endnotes li [id^="note"] {
	position:absolute;
	left:0;
	top:-26px;
}

.endnotes sup a {
	display:block;
	padding:4px 20px 4px 26px;
	color:#e1ddcb;
}

.endnotes sup a:hover {color:yellow;}

.endnotes sup a::before {
	content:counter(item) ".";
	counter-increment:item;
	color:#000;
}

/* Paging */
.paging { margin-bottom:0; }

/* Miscellaneous */

.indent {margin-left:1em;}



/* =====================================================
                  MEDIA QUERIES
=======================================================*/

/* Additional layout for screen media 576px and up */
@media only screen and (min-width:576) {
	
	nav a {font-size:.65rem;}
	
	article > p {font-size:.85rem;}
	
	.sitename {font-size:1.65rem;}

	.headline {
	font-size: 2.5rem; 
	padding: 0;
	margin: 0; 
	}
	
	.publine {
		font-size:.6em;
		text-align: center;
	}
	
	hr {
		margin-top:1.5em;
		margin-bottom:1.5em;
	}

	hr.asterism {
		margin-top:2em;
		margin-bottom:2em;
	}
	
	figcaption {font-size: .7rem;}
	
	blockquote {width:72%;}
	
	.fin {
		margin:1.5em auto;
		font-size:1.1rem;
	}
	
	.endnotes {
		margin-top:3em;
		margin-bottom:3em;
	}


}

/* Additional layout for screen media 864px and up */
@media only screen and (min-width:864px) {
	
	nav a {font-size:.75rem;}
	
	article {font-size:.85rem;}

	.tete div {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: baseline;
	}
	
	.banner {
	padding-left:0;
	background-position:100% 50%;
	}

	.sitename {
		font-size:1.5rem;
		padding-left: 0;
	}

	.tagline {
	flex-grow: 10;
	font-size: .75rem;
	display: block;
	padding: 0;
	margin: 0;
	}
	
	.superior,
	.inferior {padding-left:.75em;}
	
	.inferior {
	max-width:36em;
	margin-left:auto;
	margin-right:auto;
	}

	.head {margin:0 auto;}

	.headline {font-size:2.7rem;}

	.publine {
	font-size:.72rem;
  text-align:center;
	margin-top:2.5em;
	}

	.publine span {
	color: #000;
	padding:0 .4em;
	}
	
	.deck {
	width: 90%;
	font-size:1.2rem;
	margin-top:1em;
	margin-left:10%;
	}
	
	/* LE CORPS */
	.bodywrap {padding-top:2em;}
	
	.standfirst {font-size:.9rem;}
	
	article h2,
	article h3,
	article h4 {text-align:center;}
	
	.chapter {
	margin-top:6em; 
	margin-bottom:3em;
	}
	
	hr.asterism {margin:4em auto;}

	hr.startrule {margin-bottom:1.5em;}
	hr.endrule {margin-top:1.5em;}

	/* FIGURES & ASIDES */
	.left {
	float:left;
	margin-right:1.5em;
	text-align:right;
  }
	
	.right {
	float:right;
	margin-left:1.5em;
  }

  /*
	***** Figures only 
	*/
	figure {
	margin-top:2em;
	margin-bottom:2em;
	}
	
  .fig {
		margin-top:.5em;
		margin-bottom:1em;
	}
	
  /*
	***** Asides only 
	*/
	.left.micropost,
	.left.pullquote,
	.left.bio {margin-left:-6em;}
		
	.right.micropost,
	.right.pullquote,
	.right.bio {margin-right:-6em;}
	
	
	blockquote {width:76%;}
	
	hr.startrule {
	margin-top:2.5em;
	margin-bottom:1em;
	}

	hr.endrule {
	margin-top:1em;
	margin-bottom:2em;
	}

	hr.asterism {
	margin-top:3em;
	margin-bottom:3em;
	}
	
	.fin {
	margin:2em auto;
	font-size:1.3rem;
	}
	
	.endnotes {
	margin-top:3em;
	margin-bottom:5em;
	}
	
	.endnotes li {
	margin-bottom:.75em;
	padding-left:2.5em;
	}

	.endnotes sup {
	left:0;
	top:4px;
	}
	
	.endnotes li [id^="note"] {top:0;}
	
	.endnotes sup a {padding:4px 0 4px 6px;}
	

}