@charset "UTF-8";

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
   --bg: #fafafa;
   --fg: #1a1a1a;
   --gray: #6a6a6a;
   --light-gray: #d5d5d5; }

[data-theme="dark"] {
   --bg: #1a1a1a;
   --fg: #fafafa;
   --gray: #959595;
   --light-gray: #3a3a3a; }

html { font-size: 16px; }

body {
   font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
   margin-left: auto;
   margin-right: auto;
   color: var(--fg);
   background: var(--bg);
   line-height: 2rem;
   display: grid;
   grid-template-columns: 20% 80%;
   width: min(87.5%, 1440px);
   gap: 2rem;
   vertical-align: baseline;
   counter-reset: sidenote-counter;
   margin-inline: auto; }

a {
   color: var(--fg);
   opacity: 0.9;
   text-decoration: underline;
   text-decoration-thickness: 0.5px;
   text-underline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   line-height: 1; }

h1 {
   margin-top: 2rem;
   margin-bottom: 1.5rem;
   font-size: 3.2rem; }

h2 {
   font-style: italic;
   margin-top: 2.1rem;
   margin-bottom: 1.4rem;
   font-size: 2.2rem; }

h3 {
   font-style: italic;
   font-size: 1.7rem;
   margin-top: 2rem;
   margin-bottom: 1.4rem; }

.outline-sidebar {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: sticky;
   top: 2.5rem;
   height: calc(100vh - 4rem);
   line-height: 1.3rem;
   overflow-y: auto; }

.outline {
   display: flex;
   flex-direction: column;
   gap: 0.3rem; }

.outline a { text-decoration: none; }

.outline .h1 { padding-left: 0; font-size: 1.05rem; }
.outline .h2 { padding-left: 1rem; font-size: 0.95rem; }
.outline .h3 { padding-left: 1.5rem; font-size: 0.85rem; }

/* TODO: use verticle text (home, tags, rss, etc.) instead of svg icons
   H{sub ome} T{sub tags} R{sub ss} etc.  */
.outline-sidebar .bottom-nav {
   display: flex;
   flex-direction: row;
   margin-top: 2rem;
   justify-content: space-around;
   padding-top: 1rem; }

.outline-sidebar .bottom-nav a svg {
   width: 16px;
   height: 16px;
   stroke: currentColor; }

.metadata {
   color: var(--gray);
   font-size: 0.9rem; }

.metadata .date {
   margin-right: 0.3rem; }

.description {
   color: var(--gray); }

.blog-entry .date {
   color: var(--gray);
   font-size: 0.85rem; }

.blog-entry .description {
   margin-bottom: 0.3rem; }

.blog-entry .tags {
   font-size: 0.85rem;
   color: var(--gray); }

.footnote {
   font-size: 0.9rem; }

.footnote sup {
   margin-right: 0.25rem; }

.l1-list::before {
   content: "•";
   color: var(--gray);
   margin-right: 0.3rem;
   font-size: 0.9em;
   opacity: 0.6; }

.l2-list::before {
   content: "◦";
   color: var(--gray);
   margin-right: 0.3rem;
   margin-left: 1.5rem;
   font-size: 0.85em;
   opacity: 0.5; }

.l3-list::before {
   content: "▪";
   color: var(--gray);
   margin-right: 0.3rem;
   margin-left: 3rem;
   font-size: 0.8em;
   opacity: 0.4; }

blockquote.callout {
   padding: 0;
   margin-left: 1.4rem;
   padding-left: 0.7rem;
   border-left: 0.5px solid var(--light-gray);
   color: var(--gray);
   background: transparent; }

.highlight {
   padding: 0;
   font-weight: bold; }

.tag-cloud {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 2rem; }

.tag-cloud a {
   text-decoration: none; }

table {
   border-collapse: collapse;
   width: 100%;
   margin: 1rem 0;
   font-family: monospace;
   font-size: 0.85rem; }

img, svg {
   max-width: 100%;
   height: auto; }

.insert-container {
   width: 100%;
   margin: 1rem 0;
   overflow-x: auto; }

code.inlinecode {
   font-family: monospace;
   font-size: 0.95rem;
   color: var(--gray); }

pre {
   font-family: monospace;
   font-size: 0.95rem; }

pre code {
   color: inherit; }

pre.verbatim code {
   color: var(--fg); }

pre code .keyword {
   color: #000000;
   font-weight: bold; }

pre code .type {
   color: #303030;
   font-style: italic; }

pre code .function {
   color: #101010; }

pre code .string {
   color: #606060; }

pre code .comment {
   color: #a0a0a0;
   font-style: italic; }

pre code .variable {
   color: #404040; }

pre code .property {
   color: #505050; }

pre code .constant {
   color: #181818;
   font-weight: bold; }

pre code .operator {
   color: #707070; }

pre code .punctuation {
   color: #808080; }

pre code .number {
   color: #585858; }

pre code .module {
   color: #1a1a1a; }

pre code .constructor {
   color: #2a2a2a;
   font-weight: bold; }

pre code .punctuation.bracket {
   color: #707070; }

pre code .punctuation.delimiter {
   color: #909090; }

pre code .punctuation.special {
   color: #606060; }

pre code .string.special {
   color: #505050; }

pre code .tag {
   color: #0a0a0a; }

pre code .type.builtin {
   color: #383838;
   font-style: italic; }

pre code .function.builtin {
   color: #151515; }

pre code .constant.builtin {
   color: #0d0d0d;
   font-weight: bold; }

pre code .variable.builtin {
   color: #353535; }

pre code .variable.parameter {
   color: #484848; }

pre code .attribute {
   color: #656565; }

[data-theme="dark"] pre code .keyword {
   color: #ffffff;
   font-weight: bold; }

[data-theme="dark"] pre code .type {
   color: #d5d5d5;
   font-style: italic; }

[data-theme="dark"] pre code .function {
   color: #f5f5f5; }

[data-theme="dark"] pre code .string {
   color: #a0a0a0; }

[data-theme="dark"] pre code .comment {
   color: #606060;
   font-style: italic; }

[data-theme="dark"] pre code .variable {
   color: #c0c0c0; }

[data-theme="dark"] pre code .property {
   color: #b0b0b0; }

[data-theme="dark"] pre code .constant {
   color: #ebebeb;
   font-weight: bold; }

[data-theme="dark"] pre code .operator {
   color: #858585; }

[data-theme="dark"] pre code .punctuation {
   color: #757575; }

[data-theme="dark"] pre code .number {
   color: #a8a8a8; }

[data-theme="dark"] pre code .module {
   color: #e5e5e5; }

[data-theme="dark"] pre code .constructor {
   color: #d0d0d0;
   font-weight: bold; }

[data-theme="dark"] pre code .punctuation.bracket {
   color: #858585; }

[data-theme="dark"] pre code .punctuation.delimiter {
   color: #707070; }

[data-theme="dark"] pre code .punctuation.special {
   color: #9a9a9a; }

[data-theme="dark"] pre code .string.special {
   color: #b0b0b0; }

[data-theme="dark"] pre code .tag {
   color: #fafafa; }

[data-theme="dark"] pre code .type.builtin {
   color: #c8c8c8;
   font-style: italic; }

[data-theme="dark"] pre code .function.builtin {
   color: #efefef; }

[data-theme="dark"] pre code .constant.builtin {
   color: #f2f2f2;
   font-weight: bold; }

[data-theme="dark"] pre code .variable.builtin {
   color: #cacaca; }

[data-theme="dark"] pre code .variable.parameter {
   color: #b8b8b8; }

[data-theme="dark"] pre code .attribute {
   color: #959595; }