@charset "UTF-8";

/* ======================== RESET ======================== */

*, *::before, *::after { margin:0; padding:0; border:none; box-sizing:border-box; outline:none; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display:block; }
::-moz-selection { background:#333; color:white; }
::selection { background:#333; color:white; }
html { background:white; color:#333; overflow-y:scroll; position:relative; min-height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:#333; }
ol, ul { list-style:none; }
[hidden] { display:none; }


/* ======================== DEFAULTS ======================== */

html, html button, html input, html select, html textarea { font:normal 400 18px sans-serif; line-height:1.4; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, pre { font-size:inherit; line-height:inherit; font-weight:normal; }

h1 { font-weight:bold; font-size:1.5rem; }

/* === Media, embeds === */

figure { padding:1rem 0; }
  img { display:block; max-width:100%; width:100%; height:auto; }
  figcaption { padding: 1rem 0; }


/* === Links === */

a { text-decoration:underline; color:#333; }


/* === A11y classes === */

.visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; }

.skiplink { position:absolute; top:0; left:-999px; height:1px; width:1px; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }
.skiplink:focus { position:fixed; top:0; left:0; height:auto; width:100%; clip:auto; z-index:999; text-decoration:none; background:#fff; text-align:center; padding:.25rem; }


/* ======================== LAYOUT ======================== */

header { margin:1rem; }
  header a { text-decoration:none; }

main { max-width:750px; margin:1rem auto 3rem; }
  article { margin:0 1rem; }

.frontmatter { }
  .frontmatter > * { margin-bottom:2rem; }
.template-blog .frontmatter { display:none; }

.feed { display:flex; flex-wrap:wrap; }
  .feed li { flex-basis:300px; flex-shrink:1; flex-grow:1; min-width:300px; position:relative; }
    .feed h2 { position:absolute; top:2rem; right:1rem; padding:.25rem .5rem; background:white; max-width:80%; }
    .feed figure { padding:1rem; }
      .feed figure > div { position:absolute; bottom:1rem; right:1rem; display:flex; flex-direction:row-reverse; width:100%; }
        .feed figure > div img { width:15%; height:auto; margin:.5rem .5rem .5rem 0; border:1px solid white; }