/* mir0n.pro -- one stylesheet, no fonts, no scripts.
   Readable with JavaScript off, on a phone, and in either colour scheme. */

:root {
    --ink: #1a1a1a;
    --ink-soft: #55565a;
    --paper: #fdfdfc;
    --rule: #dedcd6;
    --accent: #7a1f1f;
    --quote: #f4f2ed;
    --code: #f1efe9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e6e4df;
        --ink-soft: #a6a49e;
        --paper: #16161a;
        --rule: #33333a;
        --accent: #e0a0a0;
        --quote: #1e1e24;
        --code: #1f1f26;
    }
}

* { box-sizing: border-box; }

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0 1.2rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    line-height: 1.62;
}

header.site {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.6rem 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

header.site a { color: var(--ink-soft); text-decoration: none; }
header.site a:hover { color: var(--accent); }

/* The wordmark, and only the wordmark. A monospace face so the 0 in MIR0N reads as a zero and not
   as a letter O -- most monospace fonts slash or dot it, and "zero" asks for the slashed form where
   the face has it. The body text is unaffected. */
.wordmark {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", Menlo,
                 "Liberation Mono", monospace;
    font-feature-settings: "zero" 1, "ss01" 1;
    font-variant-numeric: slashed-zero;
    text-transform: none;
}

header.site { text-transform: none; }
header.site .wordmark { letter-spacing: 0.02em; font-size: 0.92rem; }

h1.wordmark {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 2.4rem 0 1.8rem;
}

/* The name inside a sentence. Monospace caps run large and loose beside a serif, so it is set down
   a little and tightened. */
p .wordmark, li .wordmark, td .wordmark {
    font-size: 0.92em;
    letter-spacing: 0.04em;
}

main, aside.also, footer {
    max-width: 40rem;
    margin: 0 auto;
}

h1 {
    font-size: 2.05rem;
    line-height: 1.2;
    margin: 2.2rem 0 1.6rem;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.32rem;
    line-height: 1.3;
    margin: 2.6rem 0 0.9rem;
}

h3 {
    font-size: 1.08rem;
    margin: 2rem 0 0.7rem;
}

p { margin: 0 0 1.15rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.14em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
li { margin: 0 0 0.5rem; }

blockquote {
    margin: 1.6rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--quote);
    border-left: 3px solid var(--accent);
}

blockquote p { margin: 0; font-size: 1.05rem; }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.6rem 0;
}

code {
    font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.86em;
    background: var(--code);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

pre {
    background: var(--code);
    padding: 0.9rem 1rem;
    overflow-x: auto;
    border-radius: 4px;
    margin: 0 0 1.5rem;
}

pre code {
    background: none;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.table-wrap {
    overflow-x: auto;
    margin: 0 0 1.6rem;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.7rem 0.5rem 0;
    border-bottom: 1px solid var(--rule);
}

th {
    font-weight: 600;
    border-bottom: 2px solid var(--rule);
    white-space: nowrap;
}

figure {
    margin: 1.8rem 0;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rule);
}

figcaption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

figure.pending {
    border: 2px dashed var(--rule);
    padding: 1.6rem 1.1rem;
    text-align: center;
}

figure.pending .mark {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.4rem;
}

figure.pending figcaption { text-align: center; margin-top: 0; }

aside.also {
    margin-top: 3.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
}

aside.also h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
}

aside.also ul { list-style: none; padding: 0; margin: 0; }
aside.also li { margin: 0 0 0.4rem; }

ul.index { list-style: none; padding: 0; margin: 2.5rem 0 0; }

ul.index li {
    margin: 0 0 2.2rem;
}

ul.index h2 { margin: 0 0 0.4rem; font-size: 1.25rem; }
ul.index h2 a { text-decoration: none; }
ul.index h2 a:hover { text-decoration: underline; }
ul.index p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

footer {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

footer p { margin: 0; }
footer .colophon { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.8rem; }

@media (max-width: 34rem) {
    html { font-size: 16px; }
    h1 { font-size: 1.7rem; }
    table { font-size: 0.82rem; }
}