@import url(normalize.css);
@import url(fontello.css);
@import url(layout.css);
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@300;400&display=swap");
:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

.icon-infinity { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-infinity); }

.icon-twitter { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-twitter); }

.icon-linkedin { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-linkedin); }

.icon-github { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-github); }

.icon-wordpress { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-wordpress); }

.icon-writing { transition: color var(--transition-duration); color: var(--icon-colour); --icon-colour: var(--colour-writing); }

a i[class^="icon-"] { color: var(--link-colour); }

a:hover i[class^="icon-"] { color: var(--icon-colour); }

:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

:root { --dim-border-colour: #ccc; }

::selection { background: lightgreen; }

body { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--font-colour); }

.layout-left { display: flex; flex-direction: column; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: var(--font-colour-deemphasised); text-align: right; margin: 0 var(--broad-space); padding-right: calc(var(--broad-space) / 2); border-right: thin solid var(--dim-border-colour); }

@media (max-width: 1300px) { .layout-left { border: none; padding: 0; margin: 0 0 calc(var(--broad-space)) 0; text-align: unset; font-family: var(--font-body); } }

.layout-right { display: flex; flex-direction: column; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: var(--font-colour-deemphasised); text-align: left; margin: 0 calc(var(--broad-space) * 2) 0 var(--broad-space); padding-left: calc(var(--broad-space) / 2); border-left: thin solid var(--dim-border-colour); }

@media (max-width: 1300px) { .layout-right { border: none; padding: 0; margin: 0 0 calc(var(--broad-space)) 0; text-align: unset; font-family: var(--font-body); } }

.layout-center { margin: var(--broad-space) calc(var(--broad-space) * 2); }

@media (max-width: 1300px) { .layout-center { border: none; padding: 0; margin: 0 0 calc(var(--broad-space)) 0; text-align: unset; font-family: var(--font-body); } }

@media (max-width: 1300px) { .layout-heading { font-size: larger; margin-bottom: calc(var(--broad-space) / 2); font-weight: normal; font-family: var(--font-heading); color: var(--heading-colour); margin-left: -3px; line-height: 1.1em; } }

.layout-left h1, .layout-right h1 { font-size: 1.2rem; }

@media (min-width: 1300px) { .layout-left h1, .layout-right h1 { margin-left: 0; } }

.layout-left h1 + p, .layout-right h1 + p { margin-top: 0; }

.layout-left p, .layout-right p { margin: 0; }

.title { grid-area: title; margin: calc(var(--broad-space)) 0; }

.title h1 { font-size: 3em; margin-bottom: 0; }

.title h2 { font-weight: lighter; }

.title p { text-align: justify; margin-left: calc(var(--broad-space) / 2); }

@media (max-height: 600px) { .title { margin: 0; } .title h1 { margin: 0; } }

.title-description { grid-area: title-desc; }

.hero-fiction { grid-area: fiction; }

.fiction-description { grid-area: fiction-desc; }

.focus-fiction { grid-area: focus-fiction; }

.focus-fiction-description { grid-area: ff-desc; }

.about-me { grid-area: about-me; }

.about-me-description { grid-area: am-desc; }

.article-area { grid-area: articles; }

.article-description { grid-area: a-desc; }

.footer { grid-area: footer; }

.footer-desc { grid-area: footer-desc; }

footer { --link-colour: var(--font-colour-deemphasised); }

.dingbat-list { list-style-type: none; padding: 0 0 0 5px; box-sizing: border-box; }

.dingbat-list li::before { transition: color var(--transition-duration); font-family: fontello; font-size: 0.7em; content: '\e800'; color: var(--font-colour-deemphasised); margin-right: 4px; }

.dingbat-list:not(.dingbat-list--no-highlight) li:hover::before { transition-duration: var(--transition-duration-long); color: green; }

.dingbat-list a:not(:hover) { color: var(--font-colour); text-decoration: none; }

.dingbat-list--no-highlight { --link-colour: var(--font-colour-deemphasised); }

.dingbat-list--no-highlight a img { transition: filter var(--transition-duration); filter: grayscale(100); }

.dingbat-list--no-highlight a:hover img { filter: none; }

.dingbat-list.dingbat-list--inline { display: inline-block; width: 100%; text-align: center; }

.dingbat-list.dingbat-list--inline li { display: inline-block; }

.dingbat-list.dingbat-list--inline li:first-of-type::before { content: ''; }

.dingbat-list.dingbat-list--inline li::before { margin-left: 5px; }

.layout-left .dingbat-list a, .layout-right .dingbat-list a { color: var(--font-colour-deemphasised); }

@media (max-width: 800px) { .dingbat-list.dingbat-list--for-mobile { text-align: left; } .dingbat-list.dingbat-list--for-mobile li { display: block; } .dingbat-list.dingbat-list--for-mobile li:first-of-type::before { content: '\e800'; margin-left: 5px; margin-right: 4px; } }

.for-mobile { display: none; }

@media (max-width: 800px) { .for-mobile { display: inline-block; } }

.for-desktop { display: inline-block; }

@media (max-width: 800px) { .for-desktop { display: none; } }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: var(--font-heading); color: var(--heading-colour); margin-left: -3px; line-height: 1.1em; }

a, a:visited { transition: color var(--transition-duration); text-decoration: none; color: var(--link-colour); outline: none; }

a:hover, a:visited:hover { color: var(--link-colour-hover); }

:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

:root { --item-heading-size: 1.3rem; }

:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

.page > header { grid-area: header; }

.page > footer { grid-area: footer; }

.page > .page-content { grid-area: content; }

.page img { width: 100%; }

.page .post-title { margin-bottom: calc(var(--broad-space) * 3); }

:root { --broad-space: 40px; --font-body: 'EB Garamond', serif; --font-heading: 'Montserrat', sans-serif; --font-colour: #444; --font-colour-deemphasised: #888; --heading-colour: #111; --link-colour: #44a; --link-colour-hover: #5985ff; --colour-twitter: #1da1f2; --colour-linkedin: #0077B5; --colour-github: #000; --colour-infinity: green; --colour-wordpress: #00749c; --colour-writing: green; --transition-duration: 250ms; --transition-duration-long: 500ms; }

@keyframes toColour { from { filter: grayscale(90%) sepia(80%); }
  30% { filter: grayscale(80%); }
  to { filter: none; } }

.fiction-item { display: flex; outline: none; text-decoration: none; }

.fiction-item .plyr--audio .plyr__controls { padding: 0; }

@media (max-width: 800px) { .fiction-item { flex-direction: column; } }

.fiction-item .fiction-item__image { align-self: center; text-align: right; margin-right: calc(var(--broad-space) / 2); }

@media (max-width: 800px) { .fiction-item .fiction-item__image { margin-right: 0; margin-bottom: calc(var(--broad-space) / 2); } }

.fiction-item .fiction-item__image img { transition-property: filter, box-shadow, transform, border-radius; transition-duration: var(--transition-duration); transition-timing-function: cubic-bezier(0.49, 0.83, 0.54, 1.2); width: unset; max-width: 200px; max-height: 150px; border-radius: 4px; filter: grayscale(90%) sepia(80%); }

@media (max-width: 800px) { .fiction-item .fiction-item__image img { max-width: unset; width: 100%; text-align: center; } }

.fiction-item .fiction-item__details { display: flex; flex-direction: column; justify-content: center; transition: transform var(--transition-duration) cubic-bezier(0.49, 0.83, 0.54, 1.2); width: 100%; }

.fiction-item .fiction-item__details header { display: flex; align-items: baseline; }

.fiction-item .fiction-item__details header h1 { flex: 1; font-size: var(--item-heading-size); color: var(--heading-colour); margin: 0; min-width: 200px; }

.fiction-item .fiction-item__details header time { color: var(--font-colour-deemphasised); white-space: nowrap; font-size: 0.8rem; }

.fiction-item .fiction-item__details .fiction-item__description { transition: color var(--transition-duration); color: var(--font-colour-deemphasised); text-align: justify; }

.fiction-item .fiction-item__details .fiction-item__more { display: none; }

.fiction-item:hover img { transition-duration: var(--transition-duration-long); filter: none; border-radius: 2px; box-shadow: 5px 5px 4px #777; transform: scale(1.1); }

.fiction-item:hover .fiction-item__details { transition-duration: var(--transition-duration-long); }

@media (min-width: 800px) { .fiction-item:hover .fiction-item__details { transform: translateX(20px); } }

.fiction-item:hover .fiction-item__description { transition-duration: var(--transition-duration-long); --font-colour-deemphasised: var(--font-colour); }

@media (min-width: 800px) { .fiction-item:nth-of-type(even) .fiction-item__image { order: 2; text-align: left; margin-left: calc(var(--broad-space) / 2); margin-right: unset; } }

@media (min-width: 800px) and (min-width: 800px) { .fiction-item:nth-of-type(even):hover .fiction-item__details { transform: translateX(-20px); } }

.fiction-item + .fiction-item { margin-top: calc(var(--broad-space) * 2); }

@media (min-width: 800px) { .hero-fiction { margin: calc(var(--broad-space) * 2) 0; } }

.hero-fiction .fiction-item .fiction-item__image { max-height: unset; max-width: unset; min-width: unset; min-height: unset; }

.hero-fiction .fiction-item img { max-width: 400px; max-height: 400px; border-radius: 5px; filter: none; }

.hero-fiction .fiction-item .fiction-item__details { justify-content: start; margin: calc(var(--broad-space) / 2) 0; }

@media (max-width: 800px) { .hero-fiction .fiction-item .fiction-item__details { flex-direction: column; } }

.hero-fiction .fiction-item .fiction-item__details header { flex-direction: column; }

.hero-fiction .fiction-item .fiction-item__details header h1 { font-size: 2rem; margin-bottom: calc(var(--broad-space) / 4); margin-left: -3px; }

.hero-fiction .fiction-item .fiction-item__details header time { margin-right: 5px; }

.hero-fiction .fiction-item .fiction-item__details .fiction-item__description { color: var(--font-colour); }

.hero-fiction .fiction-item .fiction-item__details .fiction-item__description::first-line { font-variant: small-caps; }

.hero-fiction .fiction-item .fiction-item__details .fiction-item__more { margin-top: 0; transition: color var(--transition-duration); display: block; color: var(--font-colour-deemphasised); font-family: var(--font-heading); font-weight: lighter; font-size: 0.8rem; }

.hero-fiction .fiction-item:hover img { border-radius: 3px; }

.hero-fiction .fiction-item:hover .fiction-item__description::after { color: var(--link-colour-hover); }

.fiction-content img { animation-name: toColour; animation-duration: 15s; max-width: none; width: 120%; margin-left: -10%; border-radius: 2px; }

@media (max-width: 700px) { .fiction-content img { width: 100vw; margin-left: calc(var(--broad-space) * -1); margin-right: calc(var(--broad-space) * -1); } }

.fiction-content .unsplash { margin-left: -10%; background: darkgray !important; transition: background 250ms; }

@media (max-width: 700px) { .fiction-content .unsplash { margin-left: calc(var(--broad-space) * -1); } }

.fiction-content .unsplash:hover { background: gray !important; }

@media (min-width: 700px) { .fiction-content .left { float: left; max-width: 50%; padding-right: calc(var(--broad-space) / 4); } .fiction-content .left img { max-width: 100%; } .fiction-content .right { float: right; max-width: 50%; padding-left: calc(var(--broad-space) / 4); padding-right: 0; } .fiction-content .right img { max-width: 100%; margin-left: 10%; } .fiction-content .right .unsplash { margin-left: 0; margin-right: -10%; float: right; } }

.fiction h1.post-title { margin-bottom: calc(var(--broad-space) / 3); }

.fiction .meta { margin-bottom: var(--broad-space); }

.fiction .meta .dingbat-list { --font-colour: var(--font-colour-deemphasised); color: var(--font-colour); text-align: left; padding: 0; margin: 0; }

.fiction .meta .dingbat-list li:first-of-type::before { padding: 0; margin: 0; }

.fiction .meta .dingbat-list a:not(:hover) i[class^="icon"] { color: var(--font-colour); }

@media (max-width: 800px) { .fiction .dingbat-list.dingbat-list--inline li { display: block; } .fiction .dingbat-list.dingbat-list--inline li:first-of-type::before { content: '\e800'; margin-left: 5px; margin-right: 4px; } }

@media (min-width: 800px) { .fiction-index .hero-fiction { margin-left: -100px; margin-right: -100px; } }

.fiction-page { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr 70px; min-height: 100vh; grid-template-areas: "header" "content" "footer"; }

.fiction-page header { grid-area: header; margin: 0 auto; width: var(--content-width); }

.fiction-page footer { grid-area: footer; }

.fiction-page article { grid-area: content; }

.fiction-page .plyr { height: unset; }

.fiction-page .fiction-grid { grid-area: content; display: grid; grid-template-columns: 1fr var(--content-width) 1fr; grid-template-areas: "left content right"; }

.fiction-page .fiction-content { grid-area: content; }

.fiction-page .fiction-commentary { grid-area: right; margin-left: calc(var(--broad-space) * 3); margin-right: var(--broad-space); padding-left: calc(var(--broad-space) / 2); margin-top: calc(var(--broad-space) * 3); color: var(--font-colour-deemphasised); font-size: 0.9rem; border-left: thin solid var(--dim-border-colour); }

.fiction-page .fiction-commentary h1 { font-size: 1.2rem; }

@media (max-width: 1400px) { .fiction-page .fiction-grid { grid-template-areas: "small-left left small-right" "small-left content small-right" "small-left right small-right"; } .fiction-page .fiction-commentary { margin: 0; padding: 0; border: none; } .fiction-page .fiction-commentary::before { content: '\e800'; text-align: center; font-family: fontello; width: 100%; display: inline-block; } }

@media (max-width: 800px) { .fiction-page header { width: 100%; } .fiction-page .fiction-grid { grid-template-columns: minmax(var(--broad-space), 10vw) 1fr minmax(var(--broad-space), 10vw); } .fiction-page .post-header { margin: 0 var(--broad-space); width: calc(100% - 2 * var(--broad-space)); } }

.blog-item > a { grid-area: image; align-self: center; }

.blog-item > a img, .blog-item > a iframe { transition-property: filter, box-shadow, transform, border-radius; transition-duration: var(--transition-duration); transition-timing-function: cubic-bezier(0.49, 0.83, 0.54, 1.2); width: unset; max-width: 200px; max-height: 150px; border-radius: 4px; filter: grayscale(90%) sepia(80%); }

.blog-item:hover > a img, .blog-item:hover > a iframe { transition-duration: var(--transition-duration-long); filter: none; border-radius: 2px; box-shadow: 5px 5px 4px #777; transform: scale(1.1); }

.blog-item { cursor: pointer; }

@media (min-width: 801px) { .blog-item { display: grid; grid-template-areas: "image          title" "description    description"; grid-template-rows: auto auto 1fr; grid-template-columns: 200px 1fr; grid-column-gap: var(--broad-space); } }

@media (max-width: 800px) { .blog-item { display: flex; flex-direction: column; align-items: center; } .blog-item h1 { order: 1; } .blog-item img { order: 2; } .blog-item iframe { order: 2; } .blog-item p { order: 3; } }

.blog-item h1 { color: var(--heading-colour); font-size: var(--item-heading-size); }

.blog-item time { color: var(--font-colour-deemphasised); white-space: nowrap; font-size: 0.8rem; }

.blog-item .blog-item__description { grid-area: description; text-align: justify; transition: color var(--transition-duration); color: var(--font-colour-deemphasised); }

.blog-item .blog-highlight-item-title { grid-area: title; align-self: center; width: 100%; }

.blog-item .blog-highlight-item-title.no-image { grid-area: image; }

.blog-item:hover .blog-item__description { transition-duration: var(--transition-duration-long); color: var(--font-colour); }

.blog-item + .blog-item { margin-top: calc(var(--broad-space) / 2); }

/*# sourceMappingURL=main.css.map */