/* LAYOUT */

body { margin:0; display: flex; flex-direction: column; align-items: center; }
section { display: flex; flex-direction: row-reverse; justify-content: center; min-height: 0.63em; width: 100%; }
section h2 { width: 23em; margin: 0; padding: 0.5em 0; }

nav { width: 14em; margin-top: 0.5em; }
nav ul { padding: 0; display: flex; justify-content: space-between; width: 9em; margin-top: 0; }
nav li a { padding: 0 1em; }

article, section p, article > header { width: 60em;}
article > * { width: 40em; }
article > .banner { width: 960px; }

h1, h2, h3 { margin: 0.6em 0 0.3em;}
p, li, details { margin: 0 0 0.6em; }
header p { margin-bottom: 1.25em; }
article blockquote ol, article blockquote ul { padding-inline-start:1.25em; margin-top:0; }
article table { width: auto; border-collapse: collapse; margin: 1.5em 0; }
article th, article td { border-top: 1px solid; border-bottom: 1px solid; padding: 0.3em 0.5em; vertical-align: top; }
details { line-height: 1.2; margin-left:1em; }
summary { margin:0 0 0.6em -1em; }

.row { display: flex; width: 66em; }
.column { width: 19em; margin-right: 2em; }
.column-2 { width: 40em; margin-right: 4em; }
.column-3 { width: 22em; }
div h2:first-child { margin-top:0; }

.social { margin-top: 3em; }
.social img { margin-right: 32px; }
.speaking article .speakerdeck-embed-wrapper > * { width: 640px !important; height: 360px !important; }

footer { width: 80em; margin-top:4em; padding: 1.5em 0; border-top: 1px solid; }

@media all and (max-width: 1023px) {
  section h2 { width: 64%; }
  nav { width: 32%; }
  article, section p, article > header, article > *, footer { width: 96%;}
  article > ol { width: 89%;}
  article > * { max-width: 40em; }
}
@media all and (max-width: 799px) {
  section { flex-direction: column; align-items: center; }
  section h2, nav { width: 96%; }
  section h2 { padding: 0 0 0.5em; }
  nav ul { margin-bottom: 0; }
  nav li a { padding: 0 2em 0 0; }
  .row, .column, .column-2 { display: block; width: auto; margin-right: 0; }
}

span.photocredit, a.photocredit, a.license { padding:4px 6px; display:inline-block; border-radius:3px; }

/* Layout - blog */
body.writing  .tags a { border-radius:0.25em; padding: .2em .6em .3em; }
body.writing h3 { clear:right; }
body.writing h3.title { margin-bottom: 0; }
body.writing blockquote { width:80%; max-width:38em; border-left: 5px solid; padding:0.8em 1.3em 0.1em 1.3em; margin:0 0 0.6em; }
body.writing article img { max-width: 100%; height: auto; vertical-align: middle; margin: 0; }
body.writing article img.framed { float:right; margin:0 0 2em 1em}
body.writing blockquote.big { max-width: 26em; margin:1.5em 0; border-left:0; }
body.writing .related { margin-top:3em; }
body.writing pre { border: 1px solid; border-radius: 4px; padding:0.5em 0.8em; }

body.writing .cover { width:320px; float:right; margin:0 0 1em 1em; }
body.writing a.unsplash { padding:4px 6px; display:inline-block; border-radius:3px; }
body.writing a.unsplash span:first-child { display: inherit; padding: inherit; }
body.writing a.unsplash span { display:inline-block; padding:2px 3px; }
body.writing a.unsplash svg { height:12px; width:auto; position:relative; vertical-align:middle; top:-1px; }
body.writing code { padding: 0.1em 0.2em 0 0.2em; }

body.writing .series { float:right; margin:0 0 1em 1em; width:16em; padding:1em; border-radius:0.5em; }
body.writing .series li { margin-left:1.4em; }
body.writing .series:before { content:'This article appears in a series:'; display:block; margin-bottom:0.5em; }

@media all and (max-width: 799px) {
  body.writing blockquote { width:80%; max-width:31em }
  body.writing .series { float:none; width:87%; margin:1em 0; }
}

/* TEXT */

@font-face { font-family: "Source Sans Pro"; src: url(font/source-sans-pro/SourceSansPro-Light.ttf); font-weight: 300; font-style: normal; }
@font-face { font-family: "Source Sans Pro"; src: url(font/source-sans-pro/SourceSansPro-Regular.ttf); font-weight: 400; font-style: normal; }
@font-face { font-family: "Source Sans Pro"; src: url(font/source-sans-pro/SourceSansPro-Italic.ttf); font-weight: 400; font-style: italic; }
body { font-family: 'Source Sans Pro', sans-serif; line-height: 1.4; }
a { text-decoration: none; }

nav li { list-style: none; text-transform: uppercase; font-size: 0.9em; }
section nav a { text-transform: uppercase; text-decoration: none; }
section a:hover { text-decoration: underline; }
section h2 { font-size: 2em; }
section h2 a { text-decoration: none; }

h1, h2, h3 { line-height: 1.1; }
h1, h2 { font-weight: 300; }
h1 { font-size: 2.25em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.35em; font-weight:500; }
article table { font-size: 95%; }
article th { text-align:left; }
footer { font-size: 75%; }
footer a { text-decoration: underline; }

header p { font-size: 1.3em; }
article blockquote ul { font-size: 100%; }
code, tt { font-size:86%; }
a.unsplash { font-family: -apple-system, sans-serif; text-decoration: none; font-size: 12px; font-weight: bold; line-height: 1.2; }
body.music strong, body.speaking strong { font-weight: normal; }

span.photocredit, a.photocredit, a.license { text-decoration:none; font-family:-apple-system, sans-serif; font-size:12px; font-weight:bold; line-height:1.2; }
span.photocredit:before, a.photocredit:before { content:'📷 '; }
a.license:before { content:'📄 '; }

/* Text - blog */
body.writing .tags { line-height: 1.8em; }
body.writing .tags a { font-size:90%; }
body.writing blockquote.big p { font-size:1.9em; }

body.writing header em {font-style:normal; font-size:smaller; }
body.writing header em::before {content:'• '}
body.writing a.unsplash { text-decoration:none; font-family:-apple-system, sans-serif; font-size:12px; font-weight:bold; line-height:1.2;}
body.writing .related { font-style: italic; }


/* COLOUR */

section.main { background-color: #334D5C; }
section.development { background-color: #45B29D; }
section.writing { color: #334D5C; background-color: #EFC94C; }
section.speaking { background-color: #E27A3F; }
section.music { background-color: #DF5A49; }

section h2 a, section nav a { color: inherit; }

body { color: #222; background: white; }
a { color: #428bca; }
abbr { border-bottom: 2px dotted #428bca; }

section, section a { color: white; }
  

article header p, article h2, article h3, article th, details { color: #DF5A49; }
article th { font-weight:normal; }
article th, article td { border-color: #ddd; }

footer { color: #777; border-color: #ccc; }
footer a { color: inherit; }

blockquote.big { background-color: #334D5C; color: white; }
blockquote.big a { color: #D9EDFF; }
blockquote.big.solid-three a { color: #005199; }
.solid-one { background-color: #334D5C ! important; }
.solid-two { background-color: #3FA28E ! important; }
.solid-three { color: #334D5C ! important; background-color: #EFC94C ! important; }
.solid-four { background-color: #E17637 ! important; }
.solid-five { background-color: #DF5A49 ! important; }

a.unsplash { background-color:#ccc; color:white; }
a.unsplash:hover { background-color: #7FC4FF; }

.social img { filter: grayscale(100%) opacity(0.5); }
.social img:hover { filter: none; }

strong { font-weight:normal; color: #DF5A49; }

span.photocredit, a.photocredit, a.license { color:white; filter:grayscale(1) opacity(0.5); background-color: #7FC4FF; }
a.photocredit:hover, a.license:hover { filter:grayscale(0) opacity(1); }

/* Colour - blog */

body.writing .tags a { color:#fff; background-color:#777; }
body.writing .text-muted { color: #595959; }
body.writing blockquote { border-color:#eee; }
body.writing pre { border:none; background-color:#FCF9F1; }

body.writing header em {color:#595959}
body.writing header em::before {color:#999}
body.writing a.unsplash { color:white; background-color:#ccc; }
body.writing a.unsplash:hover { background-color: #7FC4FF; }
body.writing a.unsplash svg { fill:white; }
body.writing code { color: #A81200; background-color: #f5f5f5; }
body.writing pre code { color:inherit; background-color:inherit; }

body.writing .series {
   color: #DF5A49;
   background:white;
   border:1px solid #DF5A49;
}