/* ==========================
|  Loading Fonts 
|========================= */

:root {
    --color-bg: #FFF;
    --color-bg-raised: #F2F2F2;
    --color-borders: #BDBDBD;
    --color-fg: #000;
    --color-fg-raised: #212121;
    --color-fg-grey: #626262;

    --color-chestnut: #91462D;
    --color-chestnut-fg: #FFF;
    --color-coffee: #60492F;
    --color-coffee-fg: #FFF;
    --color-avocado: #6E7C37;
    --color-avocado-fg: #FFF;
    --color-blue: #4AC1C4;
    --color-blue-fg: #FFF;
    --color-celadon: #97D2B8;
    --color-celadon-fg: #FFF;

    --def-border-radius: .2em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #000;
        --color-bg-raised: #212121;
        --color-fg: #FFF;
        --color-raised: #F2F2F2;
        --color-fg-grey: #AAA;
        --color-blue: #01579B;
        --color-borders: #424242;
    }
}

@font-face {
    font-family: B612;
    src: local('B612-Regular'), local('B612 Regular'),
         url(./B612/B612-Regular.woff2) format('woff2'),
         url(./B612/B612-Regular.ttf) format('truetype');
    font-display: swap;
}

* { box-sizing: border-box; z-index: 1; }
a { color: inherit; }
table { width: 100%; }
table th { text-align: left; }
table thead th { border-bottom: 2px solid var(--color-borders); }
table td { border-bottom: 1px solid var(--color-borders); }
table tbody tr { transition: background .2s; }
table tbody tr:hover { background: var(--color-bg-raised); }

.invisible { display: none !important; }

html { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-fg); }
body { display: block; padding: 0 2em; max-width: 100%;
    margin: 0; padding: 0 2em; font-family: B612; font-size: 1em; }
body > * { grid-column: 2; }

h1 { font-size: 2.2em; }
kbd { display: inline-block; background: var(--color-bg-raised);
    padding: 0 .5em;
    border-radius: var(--def-border-radius); }
figcaption { font-size: .85em; color: var(--color-fg-grey); }

a.p-category { display: inline-block; margin: 0 .25em; padding: .2em .3em;
    text-decoration: none;
    border-radius: var(--def-border-radius);
    background: var(--color-blue); color: var(--color-blue-fg);
    transition: background .2s, color .2s; }
a.p-category:focus { background: var(--color-chestnut); color: var(--color-chestnut-fg); }
a.p-category:hover { background: var(--color-coffee); color: var(--color-coffee-fg); }

/** Basic page layout */
nav { display: block; font-weight: bold; padding: 1em 0; }
nav a { text-decoration: none; }
nav img { display: inline-block; max-height: 1.5em; max-width: 1.5em; border-radius: 100%; }
#nav-about a { display: grid; grid-template-columns: 1fr 100fr; align-items: center; gap: .8em; }
#main-nav > a { margin: 0 .5em 0 0; padding: .2em .4em;
    border-radius: var(--def-border-radius);
    transition: background .2s, color .2s; }
#main-nav > a:hover,
#main-nav > a:focus { background: var(--color-celadon); color: var(--color-celadon-fg); }

body > aside { position: fixed; top: 0; right: 0; width: 350px; height: 100%;
    padding: 3em 1em;
    overflow-y: auto;
    box-shadow: 0px 0px 10px var(--color-borders);
    background: var(--color-bg); }
body > aside > h2:first-of-type { margin-top: 0; }

#page-meta { display: flex; background: var(--color-bg); position: sticky; top: 0; flex-wrap: wrap;
    gap: .2em .5em;
    margin-bottom: 2em;
    padding: 1em 0; z-index: 2; align-items: center; font-size: .85em; }
#page-meta > * { flex: auto; vertical-align: middle; }
#page-meta > .visibility-toggle { flex: 0; cursor: pointer; }
#page-meta a { text-decoration: none; }
#page-meta time { font-size: .95em; }
#page-meta > #breadcrumb { flex: 10; }
#page-meta .p-category { font-size: .9em; }
#breadcrumb .separator:before { content: " > "; }
#breadcrumb a { color: var(--color-fg-grey); }
#breadcrumb { display: block; min-width: 99%; }

.pagination { display: grid; grid-template-columns: auto auto 1fr auto auto;
    margin: 2em 0;
    justify-content: space-between; gap: 1em; }
.pagination a  { display: inline-block; padding: .2em .4em; width: auto;
    width: 3em; text-align: center;
      place-self: center;
    border-radius: var(--def-border-radius);
    background: var(--color-avocado); color: var(--color-avocado-fg);
    transition: background .2s, color .2s; }
.pagination a:focus { background: var(--color-chestnut); color: var(--color-chestnut-fg); }
.pagination a:hover { background: var(--color-coffee); color: var(--color-coffee-fg); }

.overview-tile { display: inline-block; width: 250px;
    border-radius: var(--def-border-radius);
    border: 1px solid var(--color-borders); }
.overview-tile img { width: 250px; height: 250px;
    border-radius: inherit inherit 0 0;
    border-bottom: inherit; }
.tile-title { font-size: 1em; }
.tile-summary { font-size: .8em; }

main p { line-height: 1.8em; }
#pageBanner img { object-fit: cover; }
main img { max-width: 100%; max-height: 60vh;}
main a { transition: background .2s, color .2s; border-radius: var(--def-border-radius); }
main a:hover { background: var(--color-avocado); color: var(--color-avocado-fg); }
main pre { max-width: 100%; overflow-x: auto; padding: .5em; }
main figure { margin: 3em 0; }
section.page-pdf { margin-top: 4em; }
object { max-width: inherit; width: 100%; height: 600px; max-height: 80vh; }

.footnote-definition-label { display: inline-block; font-weight: 900; float: left; padding: .2em; }

footer { margin: 2em 0 3em 0; }

#page-prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin: 2em 0; }
#page-prev-next .next { grid-column: 2; }
#page-prev-next > a { display: inline-block; font-size: .9em;
    padding: .5em; border: 1px solid var(--color-borders);
    text-decoration: none;
    border-radius: var(--def-border-radius); transition: background .2s, color .2s, box-shadow .2s; }
#page-prev-next > a:hover { background: var(--color-bg-raised); }
#page-prev-next > a > span:first-child { display: block; color: var(--color-avocado); font-size: .9em; font-weight: bold; }
#page-prev-next time { display: block; font-size: .9em; }
#page-prev-next .card-title { display: block; margin: .15em 0; }

.taxonomies__items a { display: block; }

/**  */
.posts article { padding: 1em 0; margin: 1em 0; }
.posts article:not(:last-child) { border-bottom: 1px dashed var(--color-borders); }
.posts article time { font-size: .9em; color: var(--color-fg-grey); }
.posts article h2 { font-size: 1.3em; }
.posts a.p-category { font-size: .8em; }


.list-three-columns { display: grid; grid-template-columns: 80px 1fr 1fr; gap: .3em 1.5em;
    margin-bottom: 2em; padding: .3em;
    align-items: center; border-radius: var(--def-border-radius);
    background: var(--color-bg-raised);
    border: 1px solid transparent;
    transition: border .2s; }
.list-three-columns:hover { border-color: var(--color-coffee); }
.list-three-columns .list-img { display: inline-block; grid-column: 1; grid-row: 1 / span 2; height: 80px; }
.list-three-columns .list-img img { display: inline-block; max-width: 80px; max-height: 80px; border-radius: var(--def-border-radius); }
.list-three-columns .list-title { font-size: 1.1em; font-weight: bold; grid-column: 2; grid-row: 1; text-decoration: none; }
.list-three-columns .list-summary { grid-column: 3; grid-row: 1; font-size: .8em; }
.list-three-columns .list-secondary-top { grid-column: 2; grid-row: 2; font-size: .7em; }
.list-three-columns .list-secondary-bottom { grid-column: 3; grid-row: 2; font-size: .7em; }

.note-box { display: block; font-size: .8em; border: 1px solid var(--color-borders); border-radius: var(--def-border-radius); padding: 0 1em; }

a.project-category { background: var(--color-chestnut); }
a.project-stack { background: var(--color-avocado); }
.list-secondary-specifier { display: block; font-size: .8em; margin-bottom: .5em;
    font-color: var(--color-fg-grey); font-weight: bold; }

.project-status { display: inline-block; background: var(--color-bg-raised); border-radius: var(--def-border-radius); padding: .2em; margin-right: .5em; border: 1px solid var(--color-fg); }

.footer-main { display: grid; grid-template-columns: 1fr 1fr; }
.footer-main a { margin: 0 .5em; text-decoration: none; }
.footer-right { text-align: right; }

/** Section list */
.pag-by-year { }
.pag-by-year > a,
main .pag-by-year > a { display: grid; width: 100%; grid-template-columns: auto 1fr;
    gap: .2em 1.5em;
    align-items: center;
    text-decoration: none; background: initial;
    color: var(--color-fg-grey); border-bottom: 1px dashed var(--color-borders); }
.pag-by-year > a,
main .pag-by-year > a { margin-bottom: .5em; padding-bottom: .5em; border-bottom: 1px dashed var(--color-borders); }
.pag-by-year h3 { grid-column: 2; grid-row: 1; font-size: 1em; margin: 0 0; padding: .3em 0; }
.pag-by-year time { grid-column: 1; grid-row: 1; margin-left: 0; font-size: .85em; }
.pag-by-year h3,
.pag-by-year time { display: inline-block; }
.pag-by-year a:hover { color: inherit; text-decoration: initial; }
.pag-by-year p { grid-column: 2; line-height: 1.15em; margin: 0 0; padding: 0 0; }

#startpage a { text-decoration: none; }
#startpage main picture { grid-row: 1; margin: 2em auto; }
#startpage main { display: grid; grid-template-columns: 1fr; }
#startpage main img { border-radius: 199%; }
#startpage nav img { visibility: hidden; }
#startpage section { margin: 3em 0; }

#startpage .citations-list a,
.citations-list a { text-decoration: underline; }
.citations-list li { padding-top: .5em; padding-bottom: .5em; }
.citations-list > li:not(:last-child) { border-bottom: 1px dashed var(--color-borders); }

/** Icons */

.icon:before { display: inline-block; content: " "; height: 1em; width: 1em; }
.icon-menu:before {
    background: url(/img/menu_FILL0_wght400_GRAD0_opsz24.svg) center center no-repeat; }

@media (min-width: 768px) {

    #startpage main { display: grid; grid-template-columns: 1fr 300px; gap: 0 2em; margin: 3em 0; align-items: center; }
    #startpage main h1, #startpage main p { grid-column: 1; }
    #startpage main picture { grid-column: 2; grid-row: 1 / span 2; }

    nav { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    #main-nav { text-align: right; }
    nav img { display: inline-block; max-height: 3em; max-width: 3em; border-radius: 100%; }
    #main-nav > a { margin: 0 0 0 .5em; }
    #page-meta .page-keywords { text-align: right; }
}

@media (min-width: 1024px) {
    body { display: grid; grid-template-columns: 1fr 1000px 1fr; width: 100%; font-size: 1.15em; }

    body main.page { padding: 0 80px; }
    .posts article { display: grid; grid-template-columns: auto 1fr; gap: 0 2em; }
    .posts article > * { grid-column: 2; }
    .posts article > h2 { margin-top: 0; }
    .posts article > h2 a { text-decoration: none; }
    .posts article time { grid-column: 1; padding-top: .4em; }



}

@media (prefers-color-scheme: dark) {
    .icon { filter: invert(1); }
}