/* 
==========================================================================
   Normalise
==========================================================================
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }

/* 
==========================================================================
   Base
========================================================================== 
*/
body {
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", "TeX Gyre Pagella", "URW Palladio L", P052, serif;
  color: #333;
  font-size: 17px;
  line-height: 1.6;
  background: #FBF6EF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 1.25em 0; }
em, i { font-style: italic; }
b { font-weight: bold; }
strong { font-weight: 800; }

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: 800; margin: 1.5em 0 1em 0; line-height: 1em; }
h1 { font-size: 1.625em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; margin-bottom: 0; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.75em; }
h4,h5,h6 { text-transform: uppercase; letter-spacing: 1px; margin-top: 1.5em; }
h4 + p { margin-top: 0.5em; }
h4 + ul { margin-top: 1em; }
.title h1 { line-height: 1.2; }
.story h1 { margin-top: 0; }

/* Links */
a { color: #cc0000; transition: color 0.1s ease; text-decoration: none; font-weight: 800; }
a:hover { color: #333; }
a.visited { color: #cc0000; }
main p a, li a, footer .horizontal-links a { font-weight: 400; text-decoration: underline 1px; text-underline-offset: 3px; }
.read-more a { font-weight: 800; text-decoration: none; }
.read-more:before { content: '\203A\0020'; }
.newer:after { content: '\0020\203A'; }
.older:before { content: '\2039\0020'; }

/* Lists / definition lists */
ol li { list-style: decimal; margin-left: 1.25em; margin-bottom: 0.2em; }
ul li { list-style: disc; margin-left: 1.25em; margin-bottom: 0.2em; }
dt { font-weight: bold; }
dd { margin: 0 0; }
dd + dt { margin-top: 1.25em; }
dd > p { margin: 0; }
.footnotes ol { font-size: 1rem; }
.footnotes li { font-size: 0.9em; }
.footnote-ref { font-size: 0.8em; text-decoration: none; font-weight: 800; }
.footnote-backref { text-decoration: none; }

/* Rule */
hr { margin: 2em 0; border: 0; border-top: 3px dotted #E5DED4; }
.story hr { border-top: 0; margin: 0; }

/* Code */
pre, code { font-family: Consolas, "Liberation Mono", Menlo, monospace; border-radius: 3px; }
code { background: #f9f9f9; font-size: 0.9em; padding: 0.25em 0.5em; color: #9E525A; }
p code, li code { color: black; background-color: #E5DED4; font-size: 0.8em; padding: 2px; }
pre code { display: block; margin: 1em 0; padding: 0.75em 1em; color: inherit; background: #E5DED4; white-space: pre-wrap; font-size: 0.8em; }

/* Media / figures */
img, video { max-width: 100%; height: auto; border-radius: 3px; }
figure { width: 100%; margin: 1.5em 0; text-align: left; }
figcaption { text-align: left; font-size: 0.9em; color: #666; font-weight: bold; line-height: 1.2; }
figcaption p { margin: 0; }
div.about img { margin-top: -1em; }

/* Blockquote */
blockquote { padding-left: 1.25em; padding-right: 1.5em; border-left: .25em solid #E5DED4; color: #666; }

/* Tables */
table { margin-bottom: 1em; width: 100%; border: 0; font-size: 0.9em; }
thead { font-weight: 800; text-align: left; background: #E5DED4; }
td, th { vertical-align: middle; padding: .25rem .5rem; border: 0; font-size: 0.9em; }
th { font-weight: bold; }
tbody tr { border-bottom: 1px solid #E5DED4; }
tbody tr:nth-child(2n+1) td, tbody tr:nth-child(2n+1) th { background-color: #FBF6EF; }

/* Superscript / subscript */
sup, sub { font-size: 0.95em; vertical-align: baseline; position: relative; }
sup { bottom: 1ex; }
sub { top: 0.8ex; }

/* SVG */
svg { font-family: ui-monospace, Menlo, "Liberation Mono", Consolas, monospace; }

/* 
==========================================================================
   Layout
========================================================================== 
*/
main { max-width: 740px; padding: 0 20px; margin: 0 auto; }
main .about { margin-top: 2.3em; }
header { max-width: 740px; padding: 0 20px; margin: 0 auto; }
header h1 a { color: #cc0000 !important; }
header h1 a:hover { color: #333 !important; }
header h2 { margin: 0; font-size: 1.1em; padding-bottom: 1em; border-bottom: 2px solid #E5DED4; }
header h2 a { text-decoration: none; border: none; color: #cc0000 !important; }
header h2 a:hover { color: #333 !important; }
header h2 a:active { color: #2a2 !important; }
footer { margin-top: 3em; }
footer .content-container { background: #E5DED4; padding: 2em 0; }
footer .content-container .content { max-width: 740px; padding: 0 20px; margin: 0 auto; }

/* Nav */
.horizontal-links { width: 100%; margin-top: 0; margin-bottom: 0.25em; }
.horizontal-links a { border-right: 2px solid #E5DED4; padding-right: 0.5em; padding-left: 0.5em; margin-right: 0; }
.horizontal-links a:first-child { margin-left: 0; padding-left: 0; }
.horizontal-links a:last-child { border: none; }
.horizontal-links:last-child { margin-bottom: 1.25em; }
header .horizontal-links a { margin-left: -0.2em; }
footer .horizontal-links a { border-right: 2px solid #CCC6BD; }
p.horizontal-links { font-weight: 800; }

/* Title / pagination */
.combined-title-pagination { margin-top: 2.5em; }
.combined-title-pagination h1 { display: inline; }
.combined-title-pagination h1 a { text-decoration: none; border: none; }
.combined-title-pagination h3 { display: inline; margin-left: 0.2em; }
.title-group { margin-bottom: 1.5em; }
.title-group .title h1 { margin-bottom: 0.5em; }
.title-group .date h5 { color: #888; margin: 0; }
.date h5 { line-height: 1.3; }

/* Post list */
.post-list { padding-bottom: 1em; border-bottom: 2px solid #E5DED4; }
.post-list h1 a { text-decoration: none; border: none; color: #cc0000 !important; }
.post-list h1 a:hover { color: #333 !important; }
.post-list .read-more { margin-bottom: 1.25em; }
.short { margin-top: 2.6em; margin-bottom: 1.6em; }

/* Paginator */
.paginator { margin: 2em 0; font-weight: 800; font-size: 1em; }
.paginator .disabled { color: #aaa; }
.paginator .newer { float: right; clear: both; }
.current-page { color: #aaa; }

/* Photos */
.album .date, .album .date h5, .album .location, .album .location h5 { display: inline; }
.album .location { color: #888; border-left: solid 2px #ccc; padding-left: 1em; margin-left: 1em; }
.album .photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7em 0.7em; }
.album .photos a { display: grid; }
.album .photos a.full-size { grid-column-start: 1; grid-column-end: 3; }

/* Stories */
.story .subtitle h5 { color: #9A948A; }
.story p { margin-bottom: 0; }
.story p + p { margin-top: 0; text-indent: 1.2em; }
.story .content:first-letter { initial-letter: 2; -webkit-initial-letter: 2; padding-right: 2px; }

/* Misc  */
.small-caps { font-feature-settings: "smcp"; font-variant-caps: all-small-caps; font-weight: 800; letter-spacing: 1px; }
.warning { background-color: #cc0000; color: #FBF6EF; padding: 4px 4px 2px 4px; border-radius: 3px; }

/* 
==========================================================================
   Screens
========================================================================== 
*/
@media only screen and (max-width: 820px) {
  header, main, footer .content-container .content {
    margin-left: 10%;
    margin-right: 10%;
  }
}
@media only screen and (max-width: 600px) {
  header, main, footer .content-container .content {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 425px) {
  html {
    width: 100%;
    font-size: 15px;
  }
  ul, ol {
    font-size: 1rem;
  }
}
@media (max-width: 400px) {
  body { font-size: 14px; }
  .album .photos { grid-template-columns: 1fr; }
  .album .photos a { grid-column-start: 1; grid-column-end: 3; }
}