:root {
    color-scheme: light dark;
}
html,body {
    background-color: light-dark(white, black);
    color: light-dark(black, white);
    line-height: 1.6;
}
article {
    max-width: 73ch;
    margin: 0 auto 0 0;
}
article img {
    max-width: 100%;
}

.youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure {
    margin: 0;
}
figure img {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
}

figcaption {
    padding: 0em 1em;
    font-size: 0.85em;
    color:#888;
}

#lightbox img {
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 95vh;
}

#cusdis_thread iframe {
    height: auto !important;
    min-height: 400px;
}

.site-header, .site-footer, .site-content {
    max-width: 110ch;
    margin: 0 auto;
}
.site-header {
    background: light-dark(#DDD,#222);
}
.site-header h1 {
    margin: 0;
}
.site-content {
    display: grid;
    grid-template-columns: 75ch 35ch;
}
.site-content main {
    container-type: inline-size;
}
.site-content aside {
    background: light-dark(#DDD,#222);
    container-type: inline-size;
    text-align: center;
}
.site-content aside img {
    max-width: 100%;
    height: auto;
}
.site-footer {
    background: light-dark(#DDD,#222);
    text-align: center;
}
.site-title {
    font-size: 11cqi;
    text-align: center;
}
.site-owner {
    font-size: 8cqi;
    text-align: center;
}
.site-owner-pronouns {
    font-size: 5cqi;
    text-align: center;
    line-height: 0.8;
}
.site-owner-desc {
    margin-top: 1em;
    text-align: center;
}
.socials {
    margin: 1em;
}
.socials ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.socials a {
    display: flex;
    text-decoration: none;
    align-items: center;
}
.socials a img {
    width: 1.5rem;
    height: auto;
}
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.post-list li + li {
    margin-top: 1em;
}
.post-list li {
    background: light-dark(#EEE, #111);
}
.post-list li a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25em 1em;
    align-items: start;
}
.post-list li a h2 {
    margin: 0;
    font-size: 1.1rem;
}
.post-list li a p {
    margin: 0;
    display: block;
}
.post-list li a time {
    display:block;
}
.post-list li a {
    text-decoration: none;
    color: inherit;
}
.post-list li a img {
    width: 12rem;
    height: 6.75rem;
    object-fit: contain;
    grid-row: 1/4;
}

.breadcrumb a {
    text-decoration: none;
    color: inherit;
}
.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.breadcrumb li + li::before {
    content: "/";
    padding: 0 0.3em;
}

.byline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1em 0.1em;
    align-items: start;
    background: light-dark(#EEE, #111);
}
.byline img {
    height: 3rem;
    width: 3rem;
    object-fit: contain;
    grid-column: 1;
    grid-row: 1/3;
}
.byline a, .byline time {
    grid-column: 2;
}
.byline time {
    grid-column: 2;
    margin-top: -0.4em;
}
.tagcloud {
    margin: 2em 0.5em 2em 0.5em;
    font-size: smaller;
    line-height: 1;
}
.tagcloud a {
    text-decoration: none;
    color: inherit;

}