/* 
  =====
  FONTS
  ===== 
*/

/* eb-garamond-regular - latin */
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/eb-garamond-v13-latin-regular.0f801fe09436.eot"); /* IE9 Compat Modes */
    src: local(''),
         url("../fonts/eb-garamond-v13-latin-regular.0f801fe09436.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/eb-garamond-v13-latin-regular.6fbb1cf13dfe.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-regular.b3d44d972778.woff") format('woff'), /* Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-regular.5b8dde3727b7.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/eb-garamond-v13-latin-regular.1af9063c962a.svg#EBGaramond") format('svg'); /* Legacy iOS */
  }
  
  /* eb-garamond-700 - latin */
  @font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/eb-garamond-v13-latin-700.383123d0c6a4.eot"); /* IE9 Compat Modes */
    src: local(''),
         url("../fonts/eb-garamond-v13-latin-700.383123d0c6a4.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/eb-garamond-v13-latin-700.feea1a1c1abc.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-700.5a3fd4b13da3.woff") format('woff'), /* Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-700.80d2aa651d03.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/eb-garamond-v13-latin-700.ba8a19b7e268.svg#EBGaramond") format('svg'); /* Legacy iOS */
  }
  
  /* eb-garamond-italic - latin */
  @font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/eb-garamond-v13-latin-italic.d464d2ff1e34.eot"); /* IE9 Compat Modes */
    src: local(''),
         url("../fonts/eb-garamond-v13-latin-italic.d464d2ff1e34.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/eb-garamond-v13-latin-italic.e8b94853f777.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-italic.d600209a6764.woff") format('woff'), /* Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-italic.633ea884cfad.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/eb-garamond-v13-latin-italic.147bff10f3cd.svg#EBGaramond") format('svg'); /* Legacy iOS */
  }
  
  /* eb-garamond-700italic - latin */
  @font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/eb-garamond-v13-latin-700italic.09ebe2b9a0e7.eot"); /* IE9 Compat Modes */
    src: local(''),
         url("../fonts/eb-garamond-v13-latin-700italic.09ebe2b9a0e7.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/eb-garamond-v13-latin-700italic.ffcf7ae33144.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-700italic.0e81fa35186c.woff") format('woff'), /* Modern Browsers */
         url("../fonts/eb-garamond-v13-latin-700italic.e5778d3fdb10.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/eb-garamond-v13-latin-700italic.b3bc4cf3b47b.svg#EBGaramond") format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans-v17-latin-regular.5f4d4bc11d64.eot"); /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url("../fonts/open-sans-v17-latin-regular.5f4d4bc11d64.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/open-sans-v17-latin-regular.33543c5cc5d8.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/open-sans-v17-latin-regular.de0869e32468.woff") format('woff'), /* Modern Browsers */
         url("../fonts/open-sans-v17-latin-regular.049a929c5d81.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/open-sans-v17-latin-regular.7aab4c136712.svg#OpenSans") format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/open-sans-v17-latin-700.fc0dbb2edfac.eot"); /* IE9 Compat Modes */
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url("../fonts/open-sans-v17-latin-700.fc0dbb2edfac.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("../fonts/open-sans-v17-latin-700.0edb76284a7a.woff2") format('woff2'), /* Super Modern Browsers */
         url("../fonts/open-sans-v17-latin-700.1f85e92d8ff4.woff") format('woff'), /* Modern Browsers */
         url("../fonts/open-sans-v17-latin-700.e5111caba5b8.ttf") format('truetype'), /* Safari, Android, iOS */
         url("../fonts/open-sans-v17-latin-700.2e00b2635b51.svg#OpenSans") format('svg'); /* Legacy iOS */
  }

/* 
  =====
  COLORS
  ===== 
*/
:root {
--primary-lighten: #FFD737; /* WCAG AAA against black */
--primary: #FFBC06; /* WCAG AAA against black */
--primary-darken-1: #E08E00; /* WCAG AAA against black */
--primary-darken-2: #C26700; /* WCAG AA against black */
--primary-darken-3: #A45200; /* WCAG AA against #FEFEFE */
--primary-darken-4: #883F00; /* WCAG AAA against #FEFEFE */
--primary-darken-5: #6D2C00; /* WCAG AAA against #FEFEFE */
--primary-darken-6: #552000; /* WCAG AAA against #FEFEFE */
--primary-darken-7: #410C00; /* WCAG AAA against #FEFEFE */
--primary-darken-8: #340000; /* WCAG AAA against #FEFEFE */

--darkBackground: #535353;
--light-foreground: #FEFEFE;
--light-midground: #E6E6E6;
--light-background: #CCC;

--light-text: #444;
--dark-text: #F5F5F5;

--font-root: 18px;
--font-base: 1em;
--font-1: 1em; /* 18/18 */
--font-2: 1.33em; /* 24/18 */
--font-3: 1.33em; /* 24/18 */
--font-4: 1.33em; /* 24/18 */
--font-5: 1.66em; /* 30/18 */
--font-6:  1.66em; /* 30/18 */
--font-small: 0.66em; /* 12/18 */

--space-1: 0.33em; /* 6/18 */
--space-2: 0.66em; /* 12/18 */
--space-3: 1em; /* 18/18 */
--space-4: 1.33em;
--space-5: 1.66em;
--space-6: 2em;
}

/* 
  =====
  BASE
  ===== 
*/
body {
    padding: var(--space-2);

    font-size: var(--font-root);
    line-height: 1.6;
    font-family: 'EB Garamond', serif;
    background: var(--light-foreground);
    color: var(--light-text);
    font-weight: normal;
}

h1,h2,h3,h4,h5,h6,
.display1, .display2, .display3, .display4, .display5, .display6 {
    font-weight: normal;
    line-height: 1;
    margin-top: var(--space-3);
    margin-bottom: 0;
}

h1, .display1 {
    font-size: var(--font-6);
}
h2, .display2 {
    font-size: var(--font-5);
}
h3, .display3 {
    font-size: var(--font-4);
}
h4, .display4 {
    font-size: var(--font-3);
}
h5, .display5 {
    font-size: var(--font-2);
}
h6, .display6 {
    font-size: var(--font-1);
}

a:link, a:visited, a:hover, a:active {
    color: var(--primary-darken-3);
    text-decoration: underline;

    &:hover, &:active {
      color: var(--primary);
    }
}

a.alt {
    &:link, &:visited, &:hover, &:active {
        color: inherit;
        font-weight: bold;
        border-bottom: 1px solid transparent;
        text-decoration: none;
    }

    &:hover, &:active {
        border-bottom-color: var(--light-text);
        text-decoration: none;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.display1,
.display2,
.display3,
.display4,
.display5,
.display6 {
    a.alt {
        &:link, &:visited, &:hover, &:active {
            font-weight: normal;
        }
    }
}

hr {
    margin: var(--space-3);
    opacity: 0.5;
}

/* code blocks */
pre code {
    border-radius: var(--space-2);
    background: #f3f3f3;
    color: #444;
    display: block;
    overflow-x: auto;
    padding: var(--space-3);
  }
  
  blockquote {
    margin-left: var(--space-3);
    border-left: var(--space-1) solid var(--primary);
    padding-left: var(--space-3);
  }

@media screen and (min-width: 410px) {
    body {
        font-size: 21px;
    }
}

@media screen and (min-width: 465px) {
    body {
        font-size: 24px;
    }
}


/* 
  =====
  PROFILE
  ===== 
*/

.profile {
    text-align: center;
}

.profile-image {
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.profile-bio, .profile-linkedprofilelist {
    font-size: var(--font-small);
}

.profile-link + .profile-name {
    margin-top: var(--space-1);
}

.profile-name + .profile-bio {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}
.profile-linkedprofilelist {
    margin: var(--space-2) 0 0 0;
    padding: 0;
    list-style: none;
}

.profile-bio {
    font-family: 'Open Sans', sans-serif;
}

.profile-linkedprofileitem {
    font-family: 'Open Sans', sans-serif;

    display: inline-block;
    margin-left: var(--space-2);

    &:first-child {
        margin-left: 0;
    }
}



/* 
  =====
  SITE
  ===== 
*/

.siteheader, .sitemain, .sitefooter {
    margin: 2em auto;
}

.siteheader {
    margin-top: 0;

    .profile + .sitenav {
        margin-top: var(--space-3);
    }
}

.sitenav {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

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

.sitenav-listitem {
    display: inline-block;
    margin-left:var(--space-2);

    &:first-child {
        margin-left: 0;
    }
}

.sitemain, .sitefooter {
    max-width: 28em;
}

.sitefooter {
    margin-bottom: 0;
    padding-left: 4em;
    box-sizing: border-box;
    background: url("../images/logo_361x294.83996afa0ee3.png") center left no-repeat;
    background-size: contain;
}

.sitefooter-content {
    font-size: var(--font-small);
}

.sitefooter-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitefooter-nav li {
    display: inline;
}




/* 
  =====
  FEED
  ===== 
*/

.feed-list {
    list-style:none;
    margin: var(--space-6) 0;
    padding: 0;
}

.feed-item {
    margin-top: var(--space-3);

    &:first-child {
        margin-top: 0;
    }
}

.feed-list {
    h1, .display1 {
        font-size: var(--font-5);
    }
    h2, .display2 {
        font-size: var(--font-4);
    }
    h3, .display3 {
        font-size: var(--font-3);
    }
    h4, .display4 {
        font-size: var(--font-2);
    }
    h5, .display5 {
        font-size: var(--font-1);
    }
    h6, .display6 {
        font-size: var(--font-base);
        text-transform: uppercase;
    }
}

.feed-nav {
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

.feed-nav-older {
    float: left;

    &::before {
        content: '← ';
    }
}

.feed-nav-newer {
    float: right;

    &::after {
        content: ' →';
    }
}



/* 
  =====
  ARTICLE
  ===== 
*/

.article .meta {
    font-size: var(--font-small);
    font-family: 'Open Sans', sans-serif;
}

.article {
    overflow-x: scroll;
}

.article img {
    max-width: 100%;
}

.article-header + .article-content {
    margin-top: var(--space-3);
}

.article-summary {
    display: none;
}

.article-content + .article-footer {
    margin-top: var(--space-3);
}

.article-content code {
    font-size: var(--font-small);
    font-weight: bold;
  }
  
  .article-readmore {
    font-family: 'Open Sans', sans-serif;
    display: block;
    margin: var(--space-3) 0;
    font-size: var(--font-small);
  }
  

.article .tags {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
    }

    li {
        display: inline;

        &::after {
            content: ',';
        }

        &:last-child::after {
            content: '';
        }
    }
}

.article.note .article-header,
.article.photo .article-header {
    margin-top: var(--space-3);
}

.article.note .article-content {
    font-size: var(--font-3);
}




/* 
  =====
  POSTS
  ===== 
*/

.postmeta-published-author img {
    display: none;
  }

.postmeta-tags, .commalist {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
    }

    li {
        display: inline;

        &::after {
            content: ',';
        }

        &:last-child::after {
            content: '';
        }
    }
}

ul.commalist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;

    li {
        display: inline;

        &::after {
            content: ',';
        }

        &:last-child::after {
            content: '';
        }
    }
}

.linklist {
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
  
.linklist-item {
    padding: var(--space-1) 0;
    width: 9em;
}





/* 
  =====
  EXERCISES
  ===== 
*/


.exercisemeta {
    margin: var(--space-3) 0;

    dt, dd {
        display: inline;
    }

    dt {
        font-weight: bold;

        &::after {
            content: ':';
        }
    }

    dd {
        margin-left: 0;
        margin-right: var(--space-3);
    }
}



/* 
  =====
  PHOTOS
  ===== 
*/

.photo .article-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }







/* 
  =====
  BOOKMARKS
  ===== 
*/

a.u-bookmark-of {
    position:relative;
}
  
a.u-bookmark-of::after {
    content: ' \1F517';
}

/* 
  =====
  WEBMENTIONS
  ===== 
*/

.webmentions section {
    margin: 2em 0;
  }
  
  /* .webmentions section + section {
    margin-top: 1em;
  } */
  
  .mentions-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  
  .replies-list-item {
    border-left: var(--space-1) solid #CC8400;
    padding-left: var(--space-3);
  }
  
  .replies-list-item + .replies-list-item {
    margin-top: var(--space-3);
  }
  
  .replies-list {
    border-left: 0 none;
  }
  
  .mentions-list-item {
    font-size: var(--font-small);
    font-family: 'Open Sans', sans-serif;
  }
  
  .mentions-list-item .mentions-content {
    margin: var(--space-3) 0;
  }
  
  .replies-list-item, .firstpartymentions-list-item {
    font-size: inherit;
    font-family: inherit;
  }
  
  .firstpartymentions-list-item {
    margin: var(--space-3) 0;
  }
  
  .firstpartymentions-list-item .h-card {
    display: none;
  }
  
  @media screen and (min-width: 360px) {
    .firstpartymentions-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    .firstpartymentions-list-item {
      box-sizing: border-box;
      width: 50%;
      margin-top: var(--space-2);
      margin-bottom: var(--space-2);
    }
  
    .firstpartymentions-list-item:nth-child(odd) {
      padding-right: var(--space-2);
    }
    .firstpartymentions-list-item:nth-child(even) {
      padding-left: var(--space-2);
    }
  }
  
  .firstpartymentions-list-item .mentions-content, 
  .firstpartymentions-list-item .mentions-content :first-child,
  .firstpartymentions-list-item .mentions-content-title + .mentions-content :first-child {
    margin-top: 0;
  }
  
  .firstpartymentions-list-item .mentions-content {
    margin-bottom: 0;
    line-height: 1.6;
  }
  
  .firstpartymentions-list-item .mentions-content-title {
    font-weight: bold;
  }