/*========= Blog Posts =========*/

article h3 {
    font-family: 'Zen Antique Soft', 'Times New Roman', serif;
    border: 1px solid var(--ink);
    border-width: 1px 0;
}

h2 {
    border-bottom: var(--ink) 2px solid;
    margin-bottom: 1rem;
}

header a {
    text-decoration: none;
    font-weight: 600;
}

.title h3 {
    border: 1px solid var(--ink);
    border-width: 1px 0;
    margin-bottom: 1rem;
}

img {
    border: 1px solid var(--ink);
    display: block;
    margin: 2rem auto;
    background: var(--ink);
}

p {
    text-align: justify;
}

p.caption {
    font: var(--mono);
    margin-bottom: 1.5rem;
    text-align: center;
}
img + p.caption {
    margin-top: -1.5rem;
}

.wrapper > div {
    display: flex;
}

aside {
    flex: 0 0 300px;
    max-width: 300px;
}

.pagination {
    margin-top: 1rem;
}

.page-buttons {
    font: var(--mono);
    border: 1px solid var(--ink);
    border-width: 1px 0;
    display: flex;
}
.page-buttons > div {
    width: calc( 50% - 1ch);
    flex: 1 1 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.page-buttons > *:first-child {
    border-right: 1px solid var(--ink);
}
.page-buttons > *:last-child {
    text-align: right;
}

.page-buttons a {
    padding: 0 6px;
    text-decoration: none;
}

.page-buttons::before {
    content: '⯇';
}
.page-buttons::after {
    content: '⯈';
}

.calendar-container {
    height: 280px;
}

/*== Notes ==*/

.note {
    font: var(--mono);
    font-weight: normal;
    padding: 1rem 0;
    margin-bottom: 1rem;
    position: relative;
    border-top: var(--ink) 2px solid;
}

h2 + .note {
    border: none;
}

.note-label { 
    margin-bottom: 1ch;
    font-weight: 600;
    position: relative;
}


.note-label a {
    position: absolute;
    right: 100%;
    margin-right: 1ch;
}
.note-label a:hover {
    color: var(--ink);
    background: var(--secondary);
    border-color: var(--secondary);
}

.note-label span { font-style: italic; }

.imgtxtpair {
    display: flex;
}

.imgtxtpair p { text-align: left }
.imgtxtpair > *:first-child {
    margin-right: 1ch;
    flex: 0 0 25%;
}
.imgtxtpair img {
    object-fit: contain;
    align-self: flex-start;
    margin: 0;
}

.note .imggroup {
    display: flex;
    align-items: flex-start;
}
article > .imggroup {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 1ch;
    margin: 2rem auto .5ch auto;
}

.note .imggroup > * {
    flex: 1 1 calc(100% - 1ch);
    margin: 0 .5ch;
}
.imggroup img {
    margin: 0;
}

.source {
    margin-top: 1ch;
    margin-bottom: 0;
    border-top: var(--ink) 1px solid;
}
.source, .note li {
    display: flex;
    justify-content: space-between;
}

.imgtxtpair + .source {
    margin-top: 1rem;
}

.footnote {
    font: var(--mono);
    text-decoration: none;
    position: relative;
    top: -1ch;
}



/*========= Media Query =========*/

@media screen and (max-width: 800px) {

    .wrapper > div {
        display: block;
    }
    
    aside, main, header {
        padding: 0 12px;
    }
    
        
    main {
        margin: 0;
    }
    
    aside {
        max-width: 100%;
        display: flex;
        margin-bottom: 2rem;
        padding: unset;
    }
    
    aside > * {
        flex-grow: 1;
        flex-shrink: 1;
    }
    
    .pagination {
        margin-left: 12px;
    }
    
    
    
}

@media screen and (max-width: 500px) {
    
    aside {
        display: block;
    }
    
    aside > * {
        width: unset;
    }
    
    .pagination {
        margin: 0;
    }
}