/* --- ALDUSLIBSFU ----- */


 :root {

/* Margins and widths */
--maxwidth: 36em;
--basemargins: 3rem; /* for everything */
--mainlm: 6rem; /* for everything in MAIN */
--articlelm: 6rem; /* for essays, blog posts, etc */
--textsize: 15.5pt;
--navtextsize: 18pt;

/* Alessandra's palette */
--darkblue: #162B63; /* 90% */
--azureblue: #4A5E92; /* 90% or 86% for thumbnails*/
--bgcolor: #F7F3ED;    /*  "parchment"  */
--textcolor: #222;     /* darkgrey for now */
--lighttext: #EFE2C2;   /* nav links */
--gold: #E8AB39;      /* nav focus links */
--lightgold: #D8C58A;   /* nav visited links???? */
--vividred: #FF0033;   /* nav hover links */
--burgundy: #A32028;   /* nav active links */
--linkcolor: #A32028;  /* main section links */
--vlinkcolor: #A8252D;

/* font-families */
--serifroman: ETbb-Regular, Palatino, Times;
--serifitalic: ETbb-Italic;
--sans: "EncodeSans";

} /* end root */

 @media only screen and (max-width: 600px) {
  :root {
    --basemargins: 1rem; 
    --mainlm: 1rem; 
    --articlelm: 1rem; 
    --textcolor: #222;
    --textsize: 14pt;
    --navtextsize: 13pt;
  }
}


*.* { margin: 0; padding: 0 }

/* ----------------- TYPOGRAPHY and FONTS ----------------- */

@font-face {
  font-family: "ETbb-Regular";
  font-weight: NUMERIC_RANGE_LOW_TO_HIGH;
  src: url("ETbb-Regular.otf") format('opentype');
}

@font-face {
  font-family: "ETbb-Italic";
  font-weight: NUMERIC_RANGE_LOW_TO_HIGH;
  src: url("ETbb-Italic.otf") format('opentype');
}


@font-face {
  font-family: "EncodeSans";
  font-weight: NUMERIC_RANGE_LOW_TO_HIGH;
  src: url("EncodeSans-Var.ttf") format('truetype');
}

@font-face {  /* GREEK */
  font-family: "Alegreya-Regular";
  font-weight: NUMERIC_RANGE_LOW_TO_HIGH;
  src: url("Alegreya-Regular.ttf") format('truetype');
}

/* BASICS */

body {   /* More under P below */
  background-color: var(--bgcolor);
	margin: 0 0rem; padding: 0;
	font-family: var(--serifroman);
	font-size: var(--textsize); 

	color: var(--textcolor);	
	font-weight: 400;
  font-optical-sizing: auto;	
	font-variant-numeric: proportional-nums oldstyle-nums;
}


/* ----------------- SITE HEADER  ----------------- */

header {
  background-color: var(--darkblue); opacity: 90%;
  color: var(--lighttext);
}

/* should these be nav instead of header? */
header a:link { color: var(--lighttext); }
header a:visited { color: var(--lighttext); }
header a:hover { color: var(--vividred); }


h1.site-title { /* 320% size */
  
  padding: 0 1em 0 var(--basemargins);
  float: left; margin-right: 1rem;
  margin-bottom: 0; margin-top: 0;
  font-size: 44pt; font-weight: 400; line-height: 100%;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.11em;
}

.red /* The @ in the title */
{ color: var(--vividred); 
  font-size: 65%; font-weight: 400; 
  vertical-align: 4%; padding: 2pt; }


@media only screen and (max-width: 600px) {
   /* MOBILE header treatment*/
  header {text-align: center; } 
  h1.site-title {
    float: none; margin-right: 0; padding: 0;
    /*font-size: 300%;font-weight: 300; line-height: 100%;*/
  }
  h2.site-subtitle {
    display: none;
  }
}

h2.site-subtitle {
  text-align: center;
  background-color: var(--azureblue);
  color: var(--lighttext);
  font-family: var(--serifitalic);
  font-size: 38pt;   /* less than site-header */
  margin: 0; padding: 2.2rem 0 2.2rem 0;  
}

body.book h2.site-subtitle {
    font-size: 22pt;   /* save vertical space */
    padding: 1rem 0 1rem 0;
}

/* -------------------NAV MENU --------------------------*/

nav {
  /*border: 1px pink solid; */
  font-size: var(--navtextsize);
}
nav ul {
  list-style-type: none;
  padding: 0; margin: 0;
  /*overflow: hidden;*/
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.13em;
}

nav ul li.nav-item {
  margin-top: .8em;
  float: left;
  margin-inline: 1%;
}

nav li a, .dropbtn {
  display: inline-block;
  text-align: left;
  padding: 4px 19px 4px 4px;  /* top right bottom left */
  text-decoration: none;
}

nav li.nav-item a.active { color: var(--vividred) }

nav li a:hover, .dropdown:hover .dropbtn { color: var(--vividred); }

nav li.dropdown { display: inline-block; }

.dropdown-content {
  display: none;  /* until hovered */
  position: absolute;
  /* no l/r shift here or it will only work for one menu */
  background-color: var(--azureblue);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  z-index: 99;
}

.dropdown-content a {
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* This  has to be down here to cascade properly */
.dropdown:hover .dropdown-content { display: block; }


p.subnav {
  font-family: var(--sans);
  color: var(--textcolor);
  font-size: 12pt; font-weight: 500;
}





/*  ----------- UNIVERSAL VIEWER  ---------- */
div#uv{
	margin: 0em 0;
  height: 75vh; width: 100vw; /* full width*/
}

#uv > div {  /* same as the loaded UV styesheet */
  width: 100%;
  height: 100%;
  background-color: #000;
}

div#pic img {
  margin: 0.5em var(--basemargins);
	height: 70vh;
}



/* ------- MAIN CONTENT ----- */



main {
  margin: 3rem var(--basemargins) 0 var(--basemargins);
}

main.frontpage {
  /*border: 1px green solid;*/
  margin: 0;
  padding: 0rem 12rem 0 14rem;
  max-width: var(--maxwidth);
  background:  no-repeat -100px top url("/images/anchor-cream-trans-small.png");
}

@media only screen and (max-width: 600px) {
  main.frontpage {
    margin: var(--basemargins);
    padding: 0rem; 
    background: none;
  }
}


main.posts {
  margin: 3rem var(--basemargins) 0 var(--mainlm);
  max-width: var(--maxwidth);
}

main.learn {
  margin: 3rem var(--basemargins) 0 var(--mainlm);
  max-width: var(--maxwidth);
}


main.flex {   /* Book ONLY */
  max-width: 100%;  /* room enough for two columns */
  margin: 1rem 2rem 1rem var(--basemargins);
}

div.bodycopy {
  margin: 0 var(--bodycopylm);
}


/* ----------- FOOTER ---------- */

footer {
  background-color: var(--darkblue);  color: var(--lighttext);
  display: flex;
  flex-flow: row wrap;
  /*justify-content: flex-end;*/
  align-content: flex-start;
  padding: 0 var(--basemargins);

  margin-top: 4em;
}

footer #footleft { 
  flex: 1; 
  margin-top: .3em;
  padding-right: 2em;
}

footer #footright { 
  font-family: var(--sans);
  flex: 2;
}

h1.site-title-footer {
  margin: 0;
  font-size: 44pt;font-weight: 400; 
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.11em;
}

footer nav {
  padding-top: .6em;
  padding-bottom: 0em;
  font-size: 90%;
}

footer #footertext {
  padding: 0em .5em;
  max-width: var(--maxwidth); 
}

#footertext p {
    font-size: 80%; line-height: 140%;
}

#footertext p.motto {
  text-align: center;
  font-family: var(--serifitalic); font-style: normal;
  font-size: 140%; color: var(--gold);
  margin-bottom: 0; padding-bottom: 1em;
}


/* --------- HIGHLIGHTS FEATURE ------------ */

#highlights {
  background-color: var(--darkblue); opacity: 90%;
  margin-top: 4em; 
  padding: 1.5em 0 0.1em 0;
}

#highlights > h3 {
  margin-top: 1em;
  text-align: center;
  font-size: 200%; 
  color: var(--gold);
  text-align: auto;
  font-optical-sizing: auto;  
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.13em;   font-kerning: normal;
  font-variant-numeric: proportional-nums oldstyle-nums;
}



/* FLEXBOX LAYOUT: */

#highlights #collection {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

#highlights .thumbnail {  
  display: inline-block;
  margin: 1em 1em;
  text-align: center; padding: 1em;
  font-optical-sizing: auto;  
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.13em;   font-kerning: normal;
  font-variant-numeric: proportional-nums oldstyle-nums;
  color: var(--lightgold);
  border: 1px var(--lightgold) solid;
  /*background-color: var(--azureblue); opacity: 100%;*/
}

#highlights .thumbnail .imageplaceholder {
	display: block;
	/* 0.633 ratio */
  width: 222px; height: 350px;
  /*background: var(--bgcolor);*/
  margin: 20px 30px; border: 0;
}






#highlights p.seemore {
  margin: 1em;
  text-align: right;
  font-size: 115%;
  color: var(--gold);
}


/* ---------POST-specific styles ------------- */

article.post {
  margin-left: var(--articlelm);
  max-width: var(--maxwidth);
}

div.post-list {
}
div.post-list-item {
	font-family: var(--sans); 
	font-weight: 500;
/*	border-top: 1px var(--linkcolor) solid; border-left: 1px var(--linkcolor) solid;*/
  margin-bottom: 0.5em; 
  padding: .2em 0em;
}

div.post-meta { border-bottom: 1px #bbb solid; }
span.post-title { font-size: 14pt; }
span.post-date { font-size: 12.5pt; }
div.post-list-item p {
	font-family: var(--serifroman);
	margin-top: 1em; 
	hyphens: none;
} 

div#metablock {
		font-family: var(--sans); font-size: 75%; 
		margin: 0 0 1em 0.4em;
}

/* ---------ESSAY-specific styles ------------- */

article.essay {
  margin-left: var(--articlelm);
  max-width: var(--maxwidth);
}

/* Took out the justified and indented version */
/*article.essay p {
	line-height: 140%;
  text-align: auto;
  text-justify: auto; 
  margin top: 1em; margin-bottom: 0;
}
article.essay p+p {
  text-indent: 1.25em;
  margin-top: 0; margin-bottom: 0;
}*/

h1.essaytitle {
	color: #971b20;
  font-family: var(--serifitalic); font-style: normal;	
  font-size: 26pt;
  margin-top: 2em;
}
div.essayauthor {
	font-size: 110%;
	text-align: auto;
	font-optical-sizing: auto;	
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.13em;   font-kerning: normal;
	font-variant-numeric: proportional-nums oldstyle-nums;
	margin: .75em 0;
}

div.essaydate {
  font-family: var(--serifitalic); font-style: normal;	
	font-size: 110%;
	margin-bottom: 2em;
}

article.essay figure {
  text-align: center;     /* IS THIS PROBLEMATIC? */
	margin: 1em 0;
}

div#refs p, div.refs p+p {
	margin-left: 2em;
	text-indent: -2em;
	margin-top: .75em;
}

/* ---------BOOK-specific styles ------------- */


#booklist {
  /*border: 1pt blue solid;*/
  max-width: 90%;
	margin: 0 var(--basemargins);
}

.book-list-item {
  font-family: var(--sans); font-size: 12pt; font-weight: 470;
  line-height: 21pt;
  padding-left: 3em ;
  text-indent: -3em ;
}  

.display_title_greek { font-family: Alegreya-Regular; font-size: 120%; }
.display_title_latin { font-family: var(--serifitalic); font-style: normal; font-size: 124%; }
.display_title_italian { font-family: var(--serifitalic); font-style: normal; font-size: 124%; }
.bookdisplay_title_greek { font-family: Alegreya-Regular;  }
.bookdisplay_title_latin { font-family: var(--serifitalic); font-style: normal; }
.bookdisplay_title_italian { font-family: var(--serifitalic); font-style: normal;}



/* BOOK DISPLAY */


article.book {
  /*border: 1px blue solid;*/
}


article.book img {max-height: 600px;}

article.book #booktitle {
  width: 100%;
  border-bottom: 1px #999 solid;
}

h1.booktitle {
  margin-bottom: 0;
}

article.book #twocolumns {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
    justify-content: flex-end;
}

div#bookdesc {
  flex: 2;
  max-width: 36em;
}

div#biblioblock  {
  flex: 1;
  margin-left: 3em; padding-top: 1.3em;
	font-family: var(--sans); font-weight: 500;
  font-size: 11pt; line-height: 18pt;
}

div#biblioblock h2 {
  font-size: 105%; line-height: 18pt;
  margin: 1.5em .5em 0 0; 
}

  dl {
  	/*margin-bottom: 2em;*/
    padding: 0em; margin: 0;
    /*line-height: 150%;*/
  }
  dt {
    float: left;
    clear: left;
    width: 100px; 
    text-align: right;
    color: var(--burgundy);
    margin: 0;
    padding: 1pt 0 1pt 0;
/*    border: 1pt grey solid;*/
  }
  dt::after {
    content: ":";
  }
  dd {
    margin: 0 0 0 7.5em; /*Hard-coded left margin!*/
    padding: 1pt 0 1pt 0;
/*    border: 1pt grey solid;*/
   white-space: pre-line;    

  }





/* ------------------ TYPOGRAPHIC GENERALITIES --------------------- */

a {text-decoration: none;}
a:link {color: var(--linkcolor);}
a:visited {color: var(--vlinkcolor);}
footer a:link {color: var(--lighttext);}
footer a:visited {color: var(--lightgold);}


h1, h2, h3 { /* need main to qulify these? */
	font-style: normal; font-weight: 500; 
  color: var(--textcolor);
}

.capitalize { text-transform:capitalize; }

main h1 {
  margin-top: 1em;
  font-size: 200%; line-height: 120%;
  font-family: var(--serifitalic);
  color: var(--burgundy);
}

main h2 {
  font-size: 110%; line-height: 120%; 
  margin-top: 1em  
	text-align: auto;
	font-optical-sizing: auto;	
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.13em;   font-kerning: normal;
	font-variant-numeric: proportional-nums oldstyle-nums;
}

main h3 {font-size: 100%; line-height: 120%;}


figure {max-width: 100%; margin: 0; margin-bottom: 0.5rem;}
img {
  max-width: 100%; border: 1px grey solid; 
}
figcaption {
  font-family: var(--sans); font-size: 70%;
  margin-left: .3rem; margin-top: -.3rem;
}

div.bioleft img {
  width: 200px; height: auto;
  margin-right: 0.5em; margin-top: 0.25em; margin-bottom: 0;
  float: left;
}
div.bioright img {
  width: 200px; height: auto;
  margin-left: 0.5em; margin-top: 0.25em; margin-bottom: 0;
  float: right;
}

hr { color: #999; border: 0;}

hr.break { color: #fff; border: 0; margin-top: 1em}





main p { 
  text-align: auto; 
  text-justify: auto; hyphens: auto;
  font-size: var(--textsize);
  word-spacing: -5%; /* should be in ch units */
  line-height: 140%;
	}

ol li { margin-left: -1em; margin-right: 1em; }

blockquote {font-style: normal; margin: 0 3em 0 1em;}

pre {margin-left: 2rem; line-height: 100%;}
code {font-size: 1rem; color: #050; }

i, em {font-family: var(--serifitalic); font-size: 100%; font-style: normal;} 
figcaption em {font-family: var(--sans); font-style: italic;}

strong, b {font-weight: 600;}

sup.footnote-ref {
	font-size: 60%;  font-family: var(--sans);font-style: normal;
	vertical-align: 50%; line-height: 100%; /*keep it from breaking leading*/
}

section.footnotes {
	max-width: calc(var(--maxwidth)*0.9);
	/*margin: 2rem 1rem; */
	border-top: 1px grey solid;
	font-size: 90%; line-height: 130%;
}
section.footnotes ol {
	margin-left: -0.5rem;  If all ol's are flush left why is this necessary 
}

.smallcaps, sc {
	font-variant: small-caps;
	font-size: 100%;
	text-transform: lowercase;
	letter-spacing: 0.1em;

}

.err {
  opacity: 0;  /* hides the red metadata errors! */
	color: red;
}