:root {
  --red: #C5004A;
  --darkred: #7F0036;
  --lightgray: #e0e0e0;
  --gray: #C0C0C0;
  --darkgray: #333;
  --navy: #17050F;
  --blue: #082840;
  --white: #fff;
  --theme-pink: #D94395;
  --theme-navy: #024059;
  --theme-teal: #025E73;
  --theme-mustard: #F2A922;
  --theme-orange: #F25A38;
  --theme-white: #fff;
}
* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  font-family: laca, system-ui, sans-serif;
  color: var(--white);
  background-color: var(--theme-navy);
}

html {
  border-top: 6px solid var(--theme-orange);
}

body {
  font-family: phoreuscherokee, serif;
  font-weight: 300;
  border-top:6px solid var(--theme-mustard);
}

header {
  border-top: 6px solid var(--theme-teal);
  padding: 1rem 2rem .5vh;
  font-family: laca, system-ui, sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  letter-spacing:2pt;
}

header:after {
  content: "";
  display: table;
  clear: both;
}

header h1 a {
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 32px;
  letter-spacing: 3pt;
  font-style: italic;
  color: var(--theme-mustard);
}
header h1 a:hover {
  text-decoration:none;
  color: var(--theme-white);
}

nav .nav {
  display:flex;
}

nav .nav li {
  flex-shrink: 0;
  flex-grow:1;
  padding: .7rem .5em 1em 0;
  font-style: normal;
}

nav .nav li a {
  padding: 1rem 0;
}
nav .nav li a:hover,
nav .nav li a:focus {
  color: var(--theme-orange);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4pt;
  font-style: italic;
  font-size: 1em;
  margin-top: 2em;
  color: var(--theme-mustard);
}

h1.home {
  font-size: 24px;
  color: var(--theme-mustard);
  margin-right: 40px;
}

h1 {
  font-size: 24px;
  color: var(--theme-orange);
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.2rem;
  letter-spacing: 3pt;
}
h4 {
  font-size: 1rem;
  letter-spacing: 2pt;
  color: var(--theme-pink);
}
h5 {
  letter-spacing: 1pt;
  font-size: 0.8rem;
}

ul li {
  margin-bottom: .5em;
}

.emoji {
  font-style: normal !important;
}



#homepage--introduction {
  font-size: 24px;
  padding-bottom: 1.5rem;
}

blockquote {
  padding: 0;
  margin: 1rem 1vw 2.5rem;
  font-style: italic;
  max-width:100%;
}
blockquote p {
  color: var(--lightgray);
}
blockquote cite {
  font-style: italic;
  color: var(--theme-orange);
}


footer {
  clear:both;
}

.tmpl-post small {
  text-transform: uppercase;
  text-decoration: none;
  font-style: italic;
  letter-spacing: 2pt;
  font-family: laca, sans-serif;
  font-weight: 600;
  color: var(--theme-mustard);
  font-size: .8rem;
}

.tmpl-post .meta {
  padding: 0 0 2rem;
  margin-top:3rem;
  clear:both;
  font-family: laca, sans-serif;
  font-weight: 300;
  font-size: 1rem;
}

.tmpl-post .meta img {
  padding:0 !important;
  border:0 !important;
  float:left;
  margin: 0 2rem 1rem 0 !important;
  max-width: 9rem;
  height:auto;
}

.tmpl-post {
  font-size: 1.1rem;
}

p:last-child {
  margin-bottom: 0;
}
p,
.tmpl-post li,
img,
h1,
hr {
  max-width: 37.5em; /* 600px /16 */
}
hr {
  margin:1.5em 0;
  display: block;
  clear: both;
  color: var(--theme-teal);
  border-style: solid;
}
p,
h1 {
  min-width: 310px;
}
p,
.tmpl-post li {
  line-height: 1.45;
}

.tmpl-post img {
  border: 8px solid var(--theme-teal);
  margin: 1rem 0 1rem 0;
  clear:both;
  padding:1rem;
  display: block;
  max-width:100%;
}

.tmpl-post iframe {
  border: 8px solid var(--theme-teal);
  margin: 1rem 0 1rem 0;
  clear: both;
  padding: 1rem;
  display: block;
  max-width: 100%;
}

.tmpl-post {display:block;}


a[href] {
  color: var(--white);
}
a[href]:visited {
  color: var(--lightgrey);
}
a[href]:hover,
a[href]:focus {
  color: var(--theme-mustard);
}

main {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  max-width:1500px;
}
main :first-child {
  margin-top: 0;
}

.col {
  /* flex-basis: 27.33%; */
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 0;
  padding-bottom: 3rem;
  min-width: 310px;
}

.col-wide {
  /* flex-basis: 54.66%; */
  flex-shrink: 1;
  flex-grow: 1;
  padding-bottom: 3rem;
  max-width: 600px;
  min-width: 310px;
}

.col-space {
  flex-basis: 5%;
  flex-shrink: 0;
  flex-grow: 1;
  max-width:5%;
}



/* Header */
.home {
  float: left;
  margin: 1rem; /* 16px /16 */
  font-size: 1em; /* 16px /16 */
}
.home :link:not(:hover) {
  text-decoration: none;
}

/* Nav */
.nav {
  padding: 0;
  list-style: none;
  float: left;
  margin-left: 1rem;
}
.nav-item {
  display: inline-block;
  margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
  text-decoration: none;
}
.nav-item-active a {
  color: var(--theme-orange) !important;
}

/* Posts list */
.postlist {
  list-style: none;
  padding: 0;
}
.postlist-item {
  counter-increment: start-from -1;
}
.postlist-item:before {
  display: inline-block;
  pointer-events: none;
  content: "" counter(start-from, decimal-leading-zero) ". ";
  line-height: 100%;
  text-align: right;
}
.postlist-date,
.postlist-item:before {
  font-size: 0.8125em; /* 13px /16 */
  color: var(--darkgray);
}
.postlist-date {
  word-spacing: -0.5px;
}
.postlist-link {
  display: inline-block;
  padding: 0.25em 0.1875em; /* 4px 3px /16 */
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}

.tmpl-home h1 {width:100%;}

.tmpl-home .postlist-link {
  font-size: 1.1875em; /* 19px /16 */
  font-weight: 700;
}


/* Tags */
.post-tag {
  display: inline-block;
  vertical-align: text-top;
  padding: 2px 6px 1px 8px;
  margin-right: 0.8em; /* 8px /10 */
  background-color: var(--theme-mustard);
  color: var(--theme-teal);
  border-radius: 0.25em; /* 3px /12 */
  font-size: .625rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2pt;
  font-family: laca, sans-serif;
  font-weight: 600;
}
a[href].post-tag,
a[href].post-tag:visited {
  color: var(--theme-teal);
}
a[href].post-tag:hover,
a[href].post-tag:focus {
  color: var(--theme-navy);
  background-color: var(--theme-orange);
}

/* Warning */
.warning {
  background-color: #ffc;
  padding: 1em 0.625em; /* 16px 10px /16 */
}
.warning ol:only-child {
  margin: 0;
}

/* Direct Links / Markdown Headers */
.direct-link {
  font-family: sans-serif;
  text-decoration: none;
  font-style: normal;
  margin-left: .1em;
  color: var(--theme-orange) !important;
  transition: opacity .15s;
}
a[href].direct-link,
a[href].direct-link:visited {
  /* color: transparent; */
  opacity: .1;
  margin-left: -1.5rem;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
  opacity: 1;
}

img[itemprop=image] {
  width:120px;
  height:auto;
  /* clip-path: circle(50% at center); */
}

ol li {
  line-height: 1.45;
  list-style: disc;
}


/* Colourful Block Background Links */
ul.block-links {
  margin: 0 2rem 0 0;
  padding: 0;
}

ul.block-links li {
  list-style:none;
  margin: 0 0 .75rem;
}

ul.block-links li a {
  border-left: 20px solid var(--theme-orange);
  display: block;
  padding: 1rem 1.5rem;
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4pt;
  font-style: italic;
  font-size: 1rem;
  text-decoration: none;
  min-width: 310px;
}

ul.block-links li a:hover,
ul.block-links li a:focus {
  background: var(--theme-mustard);
  color: var(--theme-teal);
}

ul.block-links li a {
  background: var(--theme-teal);
  color: var(--theme-mustard);
}

/* Writing page */

#archive--article-list ol li  {
  width: 100%;
}

#archive--article-list ol li a.post-tag:hover {
  background-color: var(--theme-white);
}

/* Project page */

#projectspage--details {
  /* width: 50.6%;
  float:left;
  min-width: 310px; */
}
#projectspage--details p.intro {
  font-size: 24px;
  max-width: 28em;
}

a.button,
a.button:visited {
  display:inline-block;
  font-size: 20px;
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-style: italic;
  margin-top: 1em;
  padding: .75em 1em;
  background: var(--theme-teal);
  text-decoration: none;
  color: var(--theme-mustard);
  border-radius: .5em;
}

a.button:hover,
a.button:focus {
  background-color: var(--theme-white);
  color: var(--theme-orange);
}


/* About page */

#aboutpage--calendly-widget {
  margin-bottom:2em;
  border-radius: 10px;
}

#aboutpage--details {
  /* width: 50.6%;
  float:left;
  min-width: 310px; */
}
#aboutpage--details p:first-child {
  font-size: 24px;
  max-width: 28em;
}

#aboutpage--photo {
  flex-shrink: 1;
  width: 310px;
  max-width:400px;
  /* float:left; */
  /* width:30.3%; */
  /* margin-right:6%; */
}
#aboutpage--photo img {
  width:100%;
  max-width: 500px;
  min-width: 310px;
  height:auto;
  padding:20px;
  border:8px solid var(--theme-teal);
}

/* Books page */

 ul.bookshelf {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   grid-gap: 20px;
   padding: 10px 0;
 }

 ul.bookshelf li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
   transition: 0.3s;
   list-style: none;
   padding: 1rem 1rem .5rem;
   margin: 0;
   background: var(--theme-white);
   border-radius: .15em;
   height: 12em;
   position: relative;
   overflow: hidden;
 }

 ul.bookshelf li h4 {
  font-family: phoreuscherokee, serif;
  color: var(--theme-orange);
  background-color: var(--theme-white);
  font-style: normal;
  letter-spacing: normal;
  font-weight: 300;
  text-transform: none;
  font-size: 1.2rem;
  margin:-1rem -1rem 1rem;
  padding: 1rem;
  border-bottom: .5px solid var(--theme-orange);
 }
 
 ul.bookshelf li,
  ul.bookshelf li a {
   color: #000;
 }

 ul.bookshelf img {
   width: 100%;
 }


 ul.bookshelf .author {
   padding: 10px 0;
   color: var(--theme-navy);
   display: block;
   font-size: 0.8rem;
 }

ul.bookshelf span.recommend {
  font-size: 0.7rem;
  color: var(--theme-orange);
}


/* Abbreviated list of links as cards */
#homepage--article-list .col {
  width:auto;
}

#homepage--article-list ol {
  margin:0;
  padding:0;
  min-width: 280px;
}
#homepage--article-list ol li {
  display: block;
  list-style:none;
  padding:1rem 20px 0.75rem;
  margin: 0 0 1.5rem;
  background: var(--theme-teal);
  position:relative;
}
#homepage--article-list ol li a.post-name {
  display:block;
  font-family: phoreuscherokee, serif;
  font-weight:400;
  font-size: 1.2rem;
  text-decoration: none;
  background: var(--theme-orange);
  color: var(--theme-white);
  padding: 2rem 20px 1rem;
  margin: -1rem -20px 1rem;
  border-bottom: 6px solid var(--theme-mustard);
}
#homepage--article-list ol li a.post-name:hover,
#homepage--article-list ol li a.post-name:focus {
  background: var(--theme-white);
  color: var(--theme-teal);
}


#homepage--article-list ol li time {
  display:block;
  position: absolute;
  top:.75rem;
  left:20px;
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-style: italic;
  font-size: 0.6rem;
  color: var(--theme-navy);
}

#calendars--list {
  list-style:none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  max-width:1500px;
}

/* Full archive list of links as cards */
.article-list ol {
  margin: 0;
  padding: 1rem 0;
  min-width: 280px;
}
.article-list ol li {
  display: block;
  list-style:none;
  padding:1rem 20px 0.75rem;
  margin: 0 0 1.5rem;
  background: var(--theme-orange);
  position:relative;
  margin-right: 1%;
}
.article-list ol li a.post-name {
  display:block;
  font-family: phoreuscherokee, serif;
  font-weight:400;
  font-size: 1.5rem;
  text-decoration: none;
  background: var(--theme-teal);
  color: var(--theme-white);
  padding: 2rem 20px 1rem;
  margin: -1rem -20px 1rem;
  border-bottom: 6px solid var(--theme-mustard);
}
.article-list ol li a.post-name:hover,
.article-list ol li a.post-name:focus {
  background: var(--theme-white);
  color: var(--theme-teal);
}
.article-list ol li time {
  display:block;
  position: absolute;
  top:.75rem;
  left:20px;
  font-family: laca, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-style: italic;
  font-size: 0.6rem;
  color: var(--theme-mustard);
}

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

ol.quote-list li {
  /* background: black; */
  padding: 1em 0;
  margin: 0 0 1em;
  list-style: none;
}

ol.quote-list li blockquote {
  font-size: 1.2rem;
  font-style: italic;
  color: white;
  margin: 0 0 1em;
}
ol.quote-list li blockquote p:last-child {
  font-size: .9rem;
}

ol.quote-list li p.noted {
  font-size: .8rem;
  color: var(--theme-mustard);
  border-top: 1px solid var(--theme-teal);
  padding: 1em 0 0;
}
ol.quote-list li p.noted a {
  color: var(--theme-mustard);
}


body > footer {
  clear:both;
  padding: .5rem 3rem 2rem;
}

body > footer small {
  font-family: laca, system-ui, sans-serif;
  padding: 3px 6px 3px 8px;
  letter-spacing: 2pt;
  opacity: 0.5;
}