/*
Base CSS from https://github.com/hcarvalhoalves/org-mode-site-template/
Inspired by https://edwardtufte.github.io/tufte-css/
*/

/* Typography */
body { font-family: Charter, Georgia, serif; hyphens: auto; }
pre,code,tt { font-family: "PT Mono", monospace; font-size: 0.9em; }
a,a:visited { text-underline-offset: 0.15rem; }
h1 { font-size: 1.3rem; }
h2,h3,h4,h5,h6 { font-size: 1.1rem; }
p,figure,ul,ol,dl,table,hr { font-size: 1; line-height: 1.45rem; }
figcaption { font-size: 0.83rem; }
table, .sans { font-family: ui-sans-serif; font-size: 0.9rem; }
@counter-style circled-numbers { system: numeric; suffix: " "; symbols: ⓪ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩; }
@counter-style fancy-arrow { system: cyclic; suffix: " "; symbols: ➯; }

/* Base layout */
p,figure,ul,ol,dl,table,hr { margin: 0 0 2rem; }
figure img { display: block; margin: auto; max-width: 100%; max-height: 100vh; }
figcaption { text-align: center; margin: 1rem 0; }
hr { border: none; text-align: center; }
hr::after { content: "⁂"; }
table { border-collapse: collapse; width: 100%; }
th { border-bottom: 1px solid; line-height: 1.5rem; font-weight: inherit; text-transform: uppercase; }
th, td { vertical-align: top; padding-right: 1rem; }
header { text-align: center; margin: 4rem auto; }

/* Org-mode specific selectors */
.org-left { text-align: left; }
.org-right { text-align: right; }
.org-ul { list-style-type: fancy-arrow; }
.org-ol { list-style-type: circled-numbers; }
.subtitle { margin-top: -0.9rem; font-size: 0.9rem; font-style: italic; }
.figure-number { display: none; }
#postamble { clear: both; margin: 4rem auto; }
#topnav + .content header { margin-top: 2.65rem }
#topnav ul { list-style: none; padding: 0; }
#topnav li { display: inline-block; margin-right: 1rem; }
#topnav a { text-decoration: none; }
#table-of-contents ul { list-style-type: fancy-arrow; }

@media (min-width: 800px) {
    html { font-size: 18px; }
    body { max-width: 800px; margin: 0 auto; }
}

@media (min-width: 1400px) {
    figure { position: relative; }
    figure:has(.full) { margin-left: -25%; margin-right: -25%; }
    /* figure:not(:has(.full)) figcaption { position: absolute; bottom: 50%; right: calc(-35% - 1rem); width: 35%; text-align: left; } */
    /* figure:has(.small) img { max-height: 100vh; } */
}

@media (prefers-color-scheme: light) {
    body, a { color: #333; }
    body { background-color: #fafafa; }
}

@media (prefers-color-scheme: dark) {
    body, a { color: #fafafa; }
    body { background-color: rgb(58,68,75); }
    .svg { filter: invert(1) hue-rotate(180deg); }
}