@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('fonts/agave/agave.css');

:root {
    --bold-weight: 600;
    --fg-color: #2c2c2c;
    --fg-color-rgb: 44, 44, 44;
    --text-fg-color: #1c1c1c;
    --text-fg-color-rgb: 28, 28, 28;
    --bg-color: #ffffff;
    --bg-color-rgb: 255, 255, 255;
    --code-font: "Agave", monospace;
    --text-font: "Cantarell", sans-serif;
    --title-font: "Atkinson Hyperlegible", sans-serif;
    --heading-font: "Cantarell", sans-serif;
    --prompt-font: "Space Mono", monospace;
    --paragraph-indent:    1.4em;
    --paragraph-gap:       0.4em;
    --quoted-vert-gap:     2em;
    --quoted-hori-gap:     0.8em;
    --heading-top-gap:     0.8em;
    --heading-bottom-gap:  0.08em;
    --context-line-height: 1.6;
    --dim-alpha: 0.75;
    --hr-alpha:  0.4;
}

*::selection { background-color: #0000000c; }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

q { quotes: "“" "”"; }
.context q.block {
    display: block;
    margin: var(--quoted-hori-gap) var(--quoted-vert-gap);
    text-indent: var(--paragraph-indent);
}
.context h1.title + q { margin-top: 0; }
.context q:last-child  { margin-bottom: 0; }

p { margin-bottom: var(--paragraph-gap); }
li p { margin-bottom: 0.75em !important; }

.title {
    position: relative;
    text-align: right;
    font-family: var(--title-font);
    font-weight: 600;
    margin-bottom: 0.3em;
    margin-top: 0.5em;
    font-size: 4em;
    line-height: 1.1;
}

.prompt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.prompt {
    margin: 0;
    font-size: 14em;
    font-family: var(--prompt-font);
    font-weight: 700;
    letter-spacing: -0.1em;
    line-height: 0.8em;
    margin-left: -0.05em;
    margin-bottom: 0.2em;
    cursor: default;
    user-select: none;
}
.cursor {
    display: inline-block;
    width: 0.5em;
    margin-left: 0.1em;
    border-bottom: 0.703em solid var(--fg-color);
    animation: blink 1s steps(1, end) infinite;
}

.posts li a { text-decoration: none; }
a, a:visited {
    color: var(--fg-color);
    text-decoration: underline;
    text-underline-offset: 0.1em;
    background-repeat: no-repeat;
    background-size: 0 100%;
}
a:hover {
    position: relative;
    color: var(--bg-color);
    text-decoration: none;
    background: var(--fg-color);
    padding: 0.1em 0.2em;
    margin: -0.1em -0.2em;
}
a:has(sup):hover { text-decoration: none; }

.home-link {
    position: relative;
    text-decoration: none;
    display: inline-block;
    height: 0.85em;
}
.home-link:hover {
    position: relative;
    color: var(--bg-color);
    text-decoration: none;
    background: var(--fg-color);
    padding: 0.05em 0.15em 0.05em 0.05em;
    margin: -0.05em -0.15em -0.05em -0.05em;
}
.blink {
    display: inline-block;
    animation: blink 1s steps(1, end) infinite;
    height: 0.8em;
    margin-left: 0.1em;
}

.footnotes { font-size: 0.9em; }
.footnotes ol { padding-left: 1.3em; }
.footnote-back {
    position: relative;
    left: 0.6em;
    font-size: 0.8em;
    text-decoration: none;
}
.footnote-back:hover:before { height: 115%; }

li::marker { color: rgba(var(--fg-color-rgb), var(--dim-alpha)); }
.footnote-ref { text-decoration: none; }
.footnotes li { padding: 0; }
.index ul { padding-left: 0.2em; }
.index .posts li {
    position: relative;
    list-style: none;
    margin-left: 6em;
}
.index .posts li:before {
    content: attr(date);
    position: absolute;
    margin-left: -6em;
    color: rgba(var(--fg-color-rgb), var(--dim-alpha));
}

body {
    background-color: var(--bg-color);
}

.context {
    width: 45em;
    margin: 100px auto;
    font-family: var(--text-font), sans-serif;
    color: var(--fg-color);
    hyphens: auto;
    text-align: justify;
    font-variant-ligatures: common-ligatures contextual;
    font-kerning: normal;
    orphans: 3;
    widows: 3;
    line-break: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    text-justify: inter-word;
    word-spacing: -0.05em;
    letter-spacing: 0.01em;
    hanging-punctuation: first last allow-end;
    font-variant-east-asian: proportional-width;
    line-height: var(--context-line-height);
    font-size: 14px;
}
:lang(zh), :lang(ja), :lang(ko) {
    letter-spacing: normal;
}
.context p { margin: 0 0 var(--paragraph-gap) 0; }
.context p:last-child { margin-bottom: 0; }
.context p + p { text-indent: var(--paragraph-indent); }
.context p:not(li p):not(.no-drop):first-of-type::first-letter {
    font-size: 3.2em;
    line-height: 0.8;
    padding-top: 0.1em;
    padding-right: 0.1em;
    float: left;
    font-weight: normal;
    font-style: normal;
}

code {
    font-family: var(--code-font);
}
pre {
    padding: var(--quoted-hori-gap) var(--quoted-vert-gap);
    line-height: 1.5;
}
pre code {
    display: block;
    hyphens: none;
    word-break: normal;
    white-space: pre;
}

table {
    margin: auto;
    margin-bottom: var(--paragraph-gap);
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--fg-color);
    font-size: inherit;
}
thead {
    background-color: #00000006;
    text-align: left;
}
td, th {
    padding-top: 0.3em;
    padding-bottom: 0.35em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    border: 1px solid #00000030;
}
th { font-weight: var(--bold-weight); }

h1, h2, h3, h4, h5, h6 {
    margin-top: var(--heading-top-gap);
    margin-bottom: var(--heading-bottom-gap);
    font-family: var(--heading-font);
    font-weight: normal;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.65em; }
h4 { font-size: 1.55em; }
h5 { font-size: 1.45em; }
h6 { font-size: 1.35em; }

strong { font-weight: var(--bold-weight); }

em {
    font-style: italic;
    font-variation-settings: "slnt" -10;
}

hr {
    border: none;
    height: 1px;
    background-color: #00000030;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}

@media print {
    .cursor, .blink { animation: none; }
    a::after { content: " (" attr(href) ")"; }
    .index a::after { content: ''; }
    a:has(sup)::after { content: ''; }
    .prompt a::after { content: ''; }
    a:has(sup) { text-decoration: none; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg-color: #f2f4f2;
        --fg-color-rgb: 242, 244, 242;
        --text-fg-color: #fcfcfc;
        --text-fg-color-rgb: 252, 252, 252;
        --bg-color: #1f1f1f;
        --bg-color-rgb: 31, 31, 31;
    }
    *::selection { background-color: #ffffff1a; }
    thead { background-color: #ffffff0a; }
    hr { background-color: rgba(var(--text-fg-color-rgb), var(--hr-alpha)); }
}