html {
    --body-font-family: "Crimson Pro", serif;
    --heading-font-family: "Overlock", sans-serif;
    --admin-font-family: "Work Sans", sans-serif;
    --mono-font-family: "JetBrains Mono", monospace;

    margin: 0;
    padding: 0;
    background-color: var(--main-bg);
    color: var(--plain-text);
    font-family: var(--body-font-family);
    font-size: 23px;
    line-height: 1.2;
    font-weight: 300;

    --content-width: 30rem;
}

html.light {
    --main-bg: #faf4ed;
    --alt-bg: #f2e9e1;
    --plain-text: #575279;
    --subdued-text: #9893a5;
    --content-heading-text: #908caa;
    --alt-text: #907aa9;
    --header-shadow-color: #fff;

    --link-normal: #d7827e;
    --link-visited: #56949f;
    --link-hover: #ea9d34;
    --link-header: var(--link-normal);
    --link-header-visited: var(--link-header);

    --code: #444;
    --separator-color: #ea9d34;
    --caption-bg: rgba(0, 0, 0, 0.05);
    --caption-border: rgba(0, 0, 0, 0.2);

    --input-bg: #fffaf3;
    --input-border: var(--subdued-text);
    --input-border-focus: var(--separator-color);
    --button-bg: #dfdad9;
    --button-bg-hover: #cecacd;
}

html.light .theme-selector-icon {
    /*
    background-image: url('/assets/bulb-icon.svg');
    */
}

html.dark {
    --main-bg: #232136;
    --alt-bg: #393552;
    --plain-text: #d5d3e6; /* standard rosé pine normal text is too bright */
    --subdued-text: #908caa;
    --content-heading-text: #e0def4;
    --alt-text: #c4a7e7;
    --header-shadow-color: #000;

    --link-normal: #ea9a97;
    --link-visited: #9ccfd8;
    --link-hover: #f6c177;
    --link-header: var(--link-normal);
    --link-index-visited: var(--link-header);

    --code: #444;
    --separator-color: #f6c177;
    --caption-bg: rgba(0, 0, 0, 0.4);
    --caption-border: rgba(0, 0, 0, 0.5);

    --input-bg: #2a283e;
    --input-border: var(--subdued-text);
    --input-border-focus: var(--separator-color);
    --button-bg: #44415a;
    --button-bg-hover: #56526a;
}

html.dark .theme-selector-icon {
    /*
    background-image: url('/assets/bulb-icon-dark.svg');
    */
}

html.nightsight {
    --main-bg: #000;
    --alt-bg: #200;
    --input-bg: #000;
    --plain-text: #b00;
    --subdued-text: #800;
    --alt-text: #d55;
    --header-shadow-color: #000;

    --link-normal: hsl(227, 40%, 30%);
    --link-visited: hsl(300, 20%, 30%);
    --link-hover: #26313e;
    --link-header: #414c72;
    --link-index-visited: #5c3868; /* slightly darker than normal links */

    --code: #844;
    --separator-color: rgba(255, 0, 0, 0.6);
    --caption-bg: rgba(80, 0, 0, 0.2);
    --caption-border: rgba(255, 0, 0, 0.2);

    --input-bg: #211;
    --input-border: var(--subdued-text);
    --input-border-focus: var(--alt-text);
    --button-bg: #211;
    --button-bg-hover: #333;
}

html.nightsight .theme-selector-icon {
    /*
    background-image: url('/assets/bulb-icon-red.svg');
    */
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0 0.5rem;
}

header,
footer {
    display: grid;
    background-color: var(--alt-bg);
    color: var(--alt-text);
    padding: 0.5em 0.5rem;
    border-style: dotted;
    border-color: var(--separator-color);
    border-width: 0;
}

header {
    color: var(--alt-text);
    grid-template-columns: 1fr var(--content-width) 1fr;
    grid-template-rows: auto auto;
    border-bottom-width: 6px;
    margin: 0 -0.5rem 1em;
    box-shadow:
        inset 0 -1px 0 0 var(--alt-bg),
        0 1px 0 0 var(--alt-bg),
        inset 0 -2px 0 0 var(--separator-color),
        0 2px 0 0 var(--separator-color);
}

.index header {
    grid-template-rows: auto auto;
}

.tag-index header {
    grid-template-rows: auto auto auto;
}

footer {
    grid-template-columns: 1fr 1fr;
    margin: 0 -0.5rem;
    border-top-width: 6px;
    box-shadow:
        inset 0 1px 0 0 var(--alt-bg),
        0 -1px 0 0 var(--alt-bg),
        inset 0 2px 0 0 var(--separator-color),
        0 -2px 0 0 var(--separator-color);
}

footer p {
    margin-top: 1em;
    grid-row: 1/2;
}

footer .info-link {
    grid-column: 1/2;
}
footer .feed-link {
    grid-column: 2/3;
    justify-self: end;
}

footer .feed-link img {
    vertical-align: middle;
}

.link-box {
    grid-row: 1/2;
}

.home.link-box {
    grid-column: 1/2;
}

.theme.link-box {
    grid-column: 1/4;
    grid-row: 1/2;
    text-align: right;
    justify-self: end;
    align-self: center;
}

.link-box a {
    white-space: pre;
}

#theme-selector-box {
    display: flex;
    align-items: center;
}

.theme-selector-icon {
    display: block;
    /*
    width: 19px;
    height: 20px;
    */
    margin: 0 0.2rem;
    padding-top: 2px;
}

.theme-selector-icon.dim {
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
    /*
    transform: scale(60%);
    */
}

.theme-selector-icon.bright {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 -1px 5px rgba(0, 0, 0, 0.3);
}

#theme-selector-box .joiner {
    display: block;
    line-height: 1;
}

#theme-selector-box label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    color: var(--alt-bg);
}

#theme-selector-box input {
    display: block;
    appearance: none;
    box-sizing: border-box;
    border: 2px solid var(--plain-text);
    border-radius: 50%;
    background-color: var(--alt-bg);
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

input#ts-nightsight {
    border-color: #c00;
}
.dark input#ts-nightsight {
    border-color: #c33;
}


#theme-selector-box input:checked {
    background-color: var(--link-normal);
    box-shadow: inset 0 0 0 3px var(--alt-bg);
}

#home-page-info {
    margin: 1em 0;
}

h1, h2, h3, h4, h5 {
    font-family: var(--heading-font-family);
    font-weight: 700;
}

article h1,
article h2,
article h3,
article h4,
article h5 {
    color: var(--content-heading-text);
}

h1 {
    margin: 0.2em 0 0.5em;
}

.tag-index h1 {
    margin-bottom: 0.2em;
}

header h1 {
    grid-row: 2/3;
    grid-column: 2/3;
    text-shadow: 0 1px 0 var(--header-shadow-color);
}

h2 {
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

@view-transition {
    navigation: auto;
}

.article-list h2 a {
    text-decoration: none;
    border-bottom: 3px dotted var(--link-normal);
}

.article-list h2 a:visited {
    border-color: var(--link-visited);
}

.article-list h2 a:hover {
    border-color: var(--link-hover);
}

.tag-index header h2 {
    grid-row: 3/4;
    grid-column: 2/4;
}

article > section {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
}

article > section > * {
    grid-column: 2/3;
}

h3 {
    margin: 0 0 0.3rem;
}

.article-list h3 {
    color: var(--subdued-text);
    font-size: 1rem;
}

p {
    margin: 0 0 1em;
}

p.content-preview {
    margin-bottom: 0.7rem;
}

a {
    color: var(--link-normal);
}

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

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

header a,
footer a {
    color: var(--link-header);
}

header a:visited,
footer a:visited {
    color: var(--link-header);
}

blockquote {
    color: var(--alt-text);
}

#article-body {
    border-bottom: 1px solid var(--separator-color);
    padding-bottom: 1em;
}

.tags-label {
    display: none;
}
ul.article-list,
ul.tags {
    list-style: none;
    padding: 0;
    font-weight: 400;
}

article .tags {
    margin: 0 0 1em;
}
.article-list .tags {
    margin: 0;
}

li {
    margin: 0;
    padding: 0;
}

ul.tags,
.article-comment_count {
    font-size: 0.8rem;
    font-family: var(--heading-font-family);
}

ul.tags::before {
    content: "Tags: ";
    color: var(--subdued-text);
}

ul.tags li {
    display: inline-block;
    margin-right: 0.3em;
    padding-bottom: 2px;
}
ul.tags li::after {
    content: ", ";
}
ul.tags li:last-child::after {
    content: "";
}
ul.tags li a {
    text-decoration: none;
}

.article-comment_count {
    margin-bottom: 1em;
    color: var(--subdued-text);
}

.article-comment_count span {
    color: var(--plain-text);
}

pre {
    overflow-x: auto;
    margin: 0 0 1em;
    padding: 0.5em;
    background-color: var(--alt-bg);
    line-height: 1;
    border-radius: 0.3em;
}

code {
    font-size: 13px;
    font-family: var(--mono-font-family);
}

p > code {
    background-color: var(--alt-bg);
    padding: 0.2em 0.3em;
    border-radius: 0.2em;
}

p.img {
    grid-column: 1/4;
    margin-bottom: 2em;
    padding-top: 1vh;
}

p.img figure {
    margin: 0;
    text-align: center;
}

p.img img {
    padding: 0;
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
    cursor: pointer;
    border-radius: 2px;
}

#article-body img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.nightsight #article-body img {
    filter: brightness(50%);
}

.nightsight #article-body img.focus {
    filter: brightness(100%);
}


#article-body figcaption,
#article-body img + em {
    text-align: center;
    font-size: 0.9rem;
    display: inline-block;
    padding: 0.3em 1em;
    line-height: 1.3;
    font-style: italic;
    box-shadow: 0 1px 3px 2px var(--caption-bg);
    border-width: 0 1px 1px 1px;
    border-color: var(--caption-border);
    border-style: solid;
    margin-bottom: 0.5em;
    background-color: var(--caption-bg);
    position: relative;
    z-index: 0;
}

.nightsight #article-body figcaption::after {
    content: "(Click/tap image to show it at full brightness.)";
    font-style: normal;
}

#exif-popover {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: #aaa;
    padding: 0.5em;
    font-size: 0.8rem;
    border-radius: 0.5em;
    text-shadow: 0 1px 0 #000;
    z-index: 2;
}

#exif-popover.active {
    display: block;
}

.exif-data {
    color: #eee;
}

.article p,
.article ul {
    overflow-x: auto;
    overflow-y: hidden;
}

hr {
    width: 80%;
    margin: 0 auto 1em;
    border-width: 1px 0 1px 0;
    border-color: var(--plain-text) transparent var(--separator-color);
    border-style: solid;
}

header + nav,
article + nav {
    display: grid;
    grid-template-columns: 1fr 6em 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 1.5em;
}

.article nav {
    grid-template-columns: 1fr 1em 1fr;
    grid-template-rows: auto auto auto;
}

.article nav.other-articles {
    grid-template-columns: 1fr;
    width: var(--content-width);
    margin: 0 auto;
}

.related-articles-header,
.related-articles {
    grid-column: 1/4;
    max-width: var(--content-width);
    margin: 0 auto;
}

.related-articles-header {
    margin-top: 1em;
}

nav .more-articles-text {
    text-align: center;
    grid-row: 1/2;
    grid-column: 1/4;
    margin: 0;
}

nav .nav-prev {
    justify-self: end;
    text-align: right;
}
nav .nav-sep {
    justify-self: center;
    text-align: center;
}
nav .nav-next {
    justify-self: start;
}
nav .footer-home-link-box {
    grid-row: 3/4;
    grid-column: 1/4;
    margin: 0;
    justify-self: center;
    align-self: end;
}

button,
input[type="button"],
input[type="submit"] {
    background-color: var(--button-bg);
    color: var(--plain-text);
    border: 1px solid var(--plain-text);
    font-family: var(--heading-font-family);
    font-size: 1em;
    padding: 0.2em 0.5em;
    border-radius: 0.1em;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: var(--button-bg-hover);
}

#comments {
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--separator-color);
}

#comments ul {
    padding: 0;
}

.comment-age {
    font-size: 0.8rem;
}
.comment-age::before {
    content: "→ ";
}

#comments label,
#comments input,
#comments textarea {
    display: block;
}

#comments label + br,
#comments input + br,
#comments textarea + br {
    display: none;
}

#comments input,
#comments textarea {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    box-sizing: border-box;
    margin: 0 0 0.5em;
    padding: 0.2em 0.5em;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--plain-text);
    border-radius: 2px;
}

#comments input:focus,
#comments textarea:focus {
    border-color: var(--input-border-focus);
    outline: 1px solid var(--input-border-focus);
    outline-offset: 2px;
}

#comments input {
    width: 50%;
}

#comments textarea {
    width: 100%;
    height: 10em;
}

@media (max-width: 47rem) {
    header {
        grid-template-columns: 1fr 0 2fr;
    }
    #theme-selector-box .joiner {
        letter-spacing: -0.5em;
    }
    header h1 {
        padding-left: 0.5rem;
        grid-column: 1/4;
    }
    .tag-index header h2 {
        grid-column: 1/4;
        padding-left: 0.5rem;
    }
    article > section {
        grid-template-columns: 0 auto 0;
    }
}