:root {
  -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  background: #ecf0f1; color: #34495e;
  font-size: calc(14px + 4 * ((100vw - 600px) / 800)); /* https://github.com/seaneking/postcss-responsive-type */
}
body { word-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column; }
pre { white-space: pre; }
pre code { white-space: -moz-pre-wrap; white-space: pre-wrap; }
code { word-wrap: normal; white-space: pre; font-family: monospace; }
input, abbr, acronym, blockquote, code, kbd, q, samp, var { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
img { max-width: 100%; }
.icon { height: 1em; width: 1em; margin: 0 0.1em 0 0.01em; vertical-align: -0.16em; shape-rendering: geometricprecision; }
indie-action .icon { margin-right: 0.3em; }
.icon-ref-reason { padding: 0.1rem; border-radius: 2px; color: white; width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.icon-ref-reply { background: rgb(151, 226, 246); }
.icon-ref-repost, .icon-ref-quotation { background: rgb(53, 237, 146); }
.icon-ref-like { background: rgb(249, 93, 181); }
.icon-ref-bookmark { background: rgb(81, 93, 249); }
ul, ol { list-style: inside; }
ul { list-style-type: square; }
small { font-size: 70%; }
abbr { -webkit-font-variant: small-caps; -moz-font-variant: small-caps; -ms-font-variant: small-caps; font-variant: small-caps; font-weight: 600; text-transform: lowercase; color: gray; }
abbr[title] { text-decoration: none; border-bottom: dashed 1px; }
abbr[title]:hover { cursor: help; }
sub, sup { font-size: 70%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
table { border-collapse: collapse; }
h1, h2, h3, h4, h5, h6 { color: #333; }
[fragmention] { background: rgba(246, 242, 195, 153); }
fragmention-exact { background: #FFF8A7; }
blockquote { border-left: #77a 3px solid; padding: 0.2em 0 0.2em 0.5em; }
blockquote p:last-of-type { margin-bottom: 0; }
a, body .ref-context-meta a { display: inline-block; color: #504aaa; transition: ease 0.3s color; }
a[data-synd], a[href*="brid.gy/publish"] { display: none; }
a:hover, a:focus, a:active, body .ref-context-meta a:hover, body .ref-context-meta a:focus, body .ref-context-meta a:active { color: #706aca; text-decoration: underline; }
.e-content a, .e-note a { color: #408acc; }
.e-content a:hover, .e-content a:focus, .e-content a:active, .e-note a:hover, .e-note a:focus, .e-note a:active { color: #60aaec; }
.pronouns { font-size: 0.75em; font-weight: normal; }
.emoji { padding: 0 0.15em; }
.emoji:first-child { padding-left: 0; }

.site-header, .site-content, .site-footer { margin: 1rem auto; width: 96%; }

/* # Header */
.site-header h1 { font-size: 1.2em; margin-top: 2rem; }
#author-link { opacity: 0; }
#author-link:focus { opacity: 1; }


/* # Content */
.site-content { flex: 1; }
.site-main, .site-author { margin: 1rem auto; min-width: 0 /* https://bugzilla.mozilla.org/show_bug.cgi?id=1139931 */; }

/* ## Main */
.main-nav { font-size: 1.1em; margin-bottom: 1rem; }
.main-nav > * { padding: 0 0.4rem; }
.main-nav > *:first-child { padding-left: 0; }
.entry { background: #fefefe; border: #e3e3e3 1px solid; border-radius: 5px; margin-bottom: 1rem; }
.entry-footer { padding: 1rem; }
.entry-core { padding: 0 1rem; }
.entry-core > :first-child, .entry-core > a + p:first-of-type /* skip bridgy links */ { margin-top: 1rem; }
.ref-context .entry-core { padding: 0; }
.ref-context .entry-core > :first-child, .ref-context .entry-core > a + p:first-of-type { margin-top: 0; }
.entry-core :last-child { margin-bottom: 0; }
.entry-core h1 { font-size: 1.3em; }
.entry-core h2 { font-size: 1.15em; }
.entry-core h3 { font-size: 1.05em; }
p, .entry-core blockquote, .entry-core ul, .entry-core ol, .entry-core table, .entry-core pre { margin: auto auto 1em; }
.entry-footer { font-size: 0.8em; color: #777; }
.entry-footer a { color: #77a; }
.entry-footer a:hover, .entry-footer a:focus, .entry-footer a:active { color: #99c; }
.entry-actions indie-action a { padding: 0.35rem 1rem 0.35rem 0; display: inline-block; }
.entry-actions indie-action:last-child a { padding-right: 0; }
.entry-photo { display: block; }
.entry-facepile { margin: 0.5rem 0.5rem 0.5rem 0; display: inline-block; }
.entry-facepile a { text-decoration: none; }
.facepile-avatar { display: inline-block; margin-right: 0.1rem; width: 32px; height: 32px; min-width: 32px /* chrome */; border-radius: 5px; font-size: 0.7em /* for the alt */; }
.ref-context { background: #f0f0f0; border-bottom: #e3e3e3 1px solid; }
.ref-context-reason { padding: 0.6rem 0 0.6rem 2rem; font-size: 0.8em; color: #777; }
.ref-context-core { display: flex; align-items: flex-start; padding: 0.6rem; margin-top: -0.6rem; }
.ref-context-avatar { display: block; margin-right: 0.6rem; width: 32px; height: 32px; border-radius: 5px; background: #ccc; }
.ref-context-meta { margin: -0.3rem 0 0; }
.ref-context-authors { font-weight: 500; }
.ref-context-date { font-size: 0.85em; }
.ref-context-authors::after { content: ' \2022 '; color: #777; }
.ref-context-content { flex: 1 1 auto; min-width: 0 /* https://bugzilla.mozilla.org/show_bug.cgi?id=1139931 */; }
.ref-context-content blockquote { border-left: none; padding-left: 0; }
.ref-context-thread-down { border-left: 0.5rem solid #cecece; }

/* # Footer */
.site-footer { font-size: 0.95em; }

@media screen and (min-width: 400px) {
  .ref-context-avatar { width: 48px; height: 48px; min-width: 48px /* chrome */; }
}
@media screen and (max-width: 600px) {
  :root { font-size: 14px; }
}
@media screen and (min-width: 600px) {
  .site-header, .site-content, .site-footer { width: 90%; }
  .index-main .entry-photo { max-height: 60vh; }
}
@media screen and (max-width: 900px) {
  .site-author, .site-footer { margin-top: 5rem; }
  .main-nav > * { display: block; padding: 0.4rem 0; }
}
@media screen and (min-width: 900px) {
  .site-content { display: flex; margin-top: -1rem; }
  .site-main { order: 2; flex: 3 1 auto; min-width: 0; }
  .site-author { margin-right: 2rem; min-width: 290px; width: 290px; }
}
@media screen and (min-width: 1100px) {
  .site-header, .site-content, .site-footer { width: 85%; }
}
@media screen and (min-width: 1400px) {
  :root { font-size: 18px; }
  .site-header, .site-content, .site-footer { width: 75%; }
}