/* default.css — the stylesheet used for most pages on my site */

@import "base.css";
@import "tweet.css";

/* Tunable parameters */

html {
    --column-width: 44rem;
    --quote-width: 40rem;
    --metadata-width: 24rem;
}

/* Fonts & Text */

h1, h2, h3, h4, h5, h6, legend {
    font-size: 1.125rem;
}

@media (min-width: 340px) {
    h1 {
        font-size: 1.875rem;
    }
    h2, legend {
        font-size: 1.625rem;
    }
    h3 {
        font-size: 1.375rem;
    }
    h4, h5, h6 {
        font-size: 1.125rem;
    }
}

legend {
    font-family: ui-rounded, sans-serif;
}
blockquote {
    font-family: ui-serif, serif;
}

blockquote {
    font-style: italic;
}

blockquote > p > cite,
blockquote > p > em,
blockquote > p > i {
    font-style: normal;
}

address {
    font-style: normal;
}

address, figure {
    text-align: center;
}

figure > img {
    width: 100%;
    height: auto;
}

dfn, legend {
    font-style: normal;
    font-weight: bold;
}

figcaption, h4, h5, h6 {
    font-weight: normal;
}

blockquote + p.source {
    text-align: right;
}

p.hello {
    line-height: 2;
}
@media (max-width: 400px) {
    p.hello span[lang] {
        display: block;
    }
}

/* Layout */

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}

body > * {
    max-width: var(--column-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

body > ol, body > ul {
    padding-left: 3rem;
}

dl dl, dl ol, dl ul,
ol dl, ol ol, ol ul,
ul dl, ul ol, ul ul {
    margin: 0;
}

aside {
    margin: -0.5rem auto;
    padding: 0.5rem 1ch;
}

aside > *:first-child {
    margin-top: 0;
}

aside > *:last-child {
    margin-bottom: 0;
}

blockquote, blockquote + p.source {
    margin: 0;
}

body > blockquote, body > blockquote + p.source {
    max-width: var(--quote-width);
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

blockquote {
    padding: 0.5rem 0;
}

blockquote > * {
    margin: 0.5rem 4ch;
}

blockquote + p.source {
    padding: 0.5rem 4ch 1rem;
}

/* Article metadata */

article.draft h1::before {
    content: "DRAFT: ";
}

dl.metadata {
    display: grid;
    grid-template-columns: auto auto;
    max-width: var(--metadata-width);
    padding: 0.5rem;
}

dl.metadata > dt {
    grid-column: 1;
    text-align: right;
}

dl.metadata > dd {
    grid-column: 2;
    margin-left: 1rem;
}

/* Site-wide header and footer */

body > header, body > footer {
    max-width: 100%;
    padding: 0;
}

body > header {
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

@media (max-width: 340px) {
    body > header {
        font-size: 0.75rem;
    }
}

body > header > * {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    flex: 1;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
legend {
    margin: 0 0 1rem 0;
    padding: 0;
}
input[type=search] {
    -webkit-appearance: textfield;
    max-width: 10rem;
}
input[type=search]::-webkit-search-decoration {
    display: none;
}
input, button {
    font-size: 1rem;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0 0.5ch;
}

.gallery {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 700px) {
    .gallery {
        display: grid;
        grid-template-columns: auto auto;
    }
    .multicol-toc {
        column-count: 3;
    }
}

@media (min-width: 1500px) {
    .gallery {
        grid-template-columns: auto auto auto auto;
    }
    body > .gallery {
        max-width: none;
    }
    .multicol-toc {
        column-count: 4;
    }
}

body > header > *:first-child {
    padding: 0 0 0 1rem;
}
body > header > *:last-child {
    padding: 0 1rem 0 0;
    text-align: right;
}
body > header > nav > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: end;
    justify-content: space-around;
}
body > header > nav li {
    margin: 0;
    padding: 0;
    flex: min-content;
}
@media (max-width: 650px) {
    body > header > nav li:nth-child(even) {
        display: none;
    }
}
body > .thing-before-footer {
    padding-bottom: 4rem;
    margin-bottom: 0;
}
body > footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 1rem 0 0 0;
    padding: 1rem 0 0 0;
    justify-content: space-around;
}
body > footer > small {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    text-align: center;
}
body > header :link,
body > header :visited,
body > footer :link,
body > footer :visited {
    text-decoration: none;
}

#herself {
    display: block;
    float: right;
}

.nobr {
    white-space: nowrap;
}

/* Images */

#herself img {
    clip-path: circle(50% at 50% 50%);
}

/* Colors */

html {
    background: white;
    color: black;
    color-scheme: light dark;
}

:link, :visited {
    color: blue;
}

blockquote, blockquote + p.source {
    background-color: #ffd;
    border-left: 0.5rem solid #eec;
}

aside {
    background-color: #ddf;
}

dl.metadata {
    background-color: #eef;
}

body > header {
    background: #fff;
    background: linear-gradient(0deg, #fff 0%, #ddf 100%);
}
body > footer {
    background: #fff;
    background: linear-gradient(0deg, #ddf 0%, #fff 100%);
}

input[type=search] {
    background-color: #eee;
    color: #000;
}

button {
    background-color: #ddd;
    color: #000;
}

@media (prefers-color-scheme: dark) {
    input[type=search] {
        background-color: #222;
        color: #fff;
    }

    button {
        background-color: #333;
        color: #fff;
    }

    html {
        background: #111;
        color: white;
    }
    :link, :visited {
        color: #ff6;
    }

    blockquote, blockquote + p.source {
        background-color: #333;
        border-left: 0.5rem solid #666;
    }

    aside {
        background-color: #333;
    }

    dl.metadata {
        background-color: #333;
    }

    body > header {
        background: #111;
        background: linear-gradient(0deg, #111 0%, #333 100%);
    }
    body > footer {
        background: #111;
        background: linear-gradient(0deg, #333 0%, #111 100%);
    }
}