@font-face {
    font-family: 'charterregular';
    src: url('webfonts/charter_regular-webfont.eot');
    src: url('webfonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/charter_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@import "webfonts/berkeleymono.css";

/* smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* body resets */
body {
    padding: var(--space-lg);
    font-family: "Berkeley Mono", Menlo, Monaco, monospace;
    line-height: 1.5;
    color: var(--color-text-strong);
    background-color: var(--color-bg);
}
p { margin: 0 0 var(--space-lg); }
i, em, b, strong { padding-left: 0.1em; padding-right: 0.1em; }
b, strong { font-weight: bold; color: var(--color-text); }
ul, ol { padding: 0; }
code, pre {
    font-family: "Berkeley Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}
img {
    display: block;
    margin: var(--space-lg) 0;
    border-radius: 5px;
    transition: filter 200ms ease-out;
}
a {
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: color 200ms ease-out;
}
a:hover {
    text-decoration: underline;
}
#footnotes {
    border-top: 1px solid var(--footnote-border);
}
sup a:before { content: "["; }
sup a:after { content: "]"; }

/* design tokens */
:root {
    /* spacing scale */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.25rem;    /* 20px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */
    --space-4xl: 4rem;      /* 64px */
    --space-7xl: 7rem;      /* 112px */

    /* color palette - light mode */
    --color-bg: #fffff8;
    --color-text: #111;
    --color-text-strong: #000;
    --color-text-muted: #555;
    --color-text-subtle: #767676;

    --color-link: #3873ad;
    --color-link-hover: #2a5580;

    --color-border: #ddd;
    --color-border-strong: #b5b5b5;

    --color-surface-subtle: #f9f9f9;
    --color-surface-muted: #f3f3f3;

    /* component-specific */
    --table-text: var(--color-text);
    --table-border: var(--color-border);
    --table-header-bg: var(--color-surface-muted);
    --table-row-even-bg: #fafafa;

    --code-bg: #f9f9ff;
    --code-text: #222;
    --code-border: #e1e1e8;
    --code-inline-bg: #f0f0f5;
    --code-inline-text: #c7254e;
    --code-inline-border: #e5e5e5;

    --quote-border: #d0d0d0;
    --quote-bg: var(--color-surface-subtle);
    --quote-text: var(--color-text-muted);

    --footnote-margin-width: 220px;
    --footnote-margin-gap: var(--space-xl);
    --footnote-text: #444;
    --footnote-border: var(--color-border-strong);
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #2d2d2d;
        --color-text: #ddd;
        --color-text-strong: #eee;
        --color-text-muted: #bbb;
        --color-text-subtle: #999;

        --color-link: #d67a69;
        --color-link-hover: #e89b8d;

        --color-border: #444;
        --color-border-strong: #777;

        --color-surface-subtle: #2a2a2a;
        --color-surface-muted: #333;

        --table-text: var(--color-text);
        --table-border: var(--color-border);
        --table-header-bg: var(--color-surface-muted);
        --table-row-even-bg: var(--color-surface-subtle);

        --code-bg: #1e1e1e;
        --code-text: var(--color-text);
        --code-border: var(--color-border);
        --code-inline-bg: #252525;
        --code-inline-text: #e06c75;
        --code-inline-border: var(--color-surface-muted);

        --quote-border: var(--color-border);
        --quote-bg: var(--color-surface-subtle);
        --quote-text: var(--color-text-muted);

        --footnote-text: #d8d8d8;
        --footnote-border: var(--color-border-strong);
    }
}


/* table styling */
table {
    border-collapse: collapse;
    width: 100%;
    line-height: 1.4;
    margin: var(--space-lg) 0;
    color: var(--table-text);
}
table th,
table td {
    border: 1px solid var(--table-border);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    vertical-align: top;
}
table thead th {
    background-color: var(--table-header-bg);
    font-weight: bold;
}
table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

/* code blocks */
pre {
    background-color: var(--code-bg);
    color: var(--code-text);
    border: 1px solid var(--code-border);
    padding: var(--space-md);
    line-height: 1.45;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
    font-size: 13px;
    margin: var(--space-lg) 0;
}
code {
    background-color: var(--code-inline-bg);
    color: var(--code-inline-text);
    border: 1px solid var(--code-inline-border);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-size: 13px;
}
pre code {
    background: none;
    border: none;
    padding: 0;
}


/* blockquotes */
blockquote {
    border-left: 4px solid var(--quote-border);
    background-color: var(--quote-bg);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    color: var(--quote-text);
    font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

/******************************************************/
/* body / layout */
body {
    color: var(--color-text);
    word-wrap: break-word; /* for long words & urls */
    position: relative;
    max-width: 770px;
    width: 100%;
    margin: var(--space-7xl) auto;
    padding: 0 74px 0 222px;
}

.sidebar {
    width: 180px;
    position: absolute;
    left: 0;
    margin-left: var(--space-lg);
    text-align: right;
}
.sidebar ul { list-style: none; }
.sidebar h1:before { content: ""; }
.light { color: var(--color-text-subtle); }
.entry + .light { margin: var(--space-xl) 0; }
h1 + .light { margin-top: -1em; }
h1 + .light:empty { display: none; }
.sidebar h1 {
    font-weight: 400;
    margin-bottom: var(--space-md);
}
.sidebar h1, .sidebar a {
    font-size: 12px;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sidebar a {
    display: block;
    transition: color 200ms ease-out;
}
.sidebar ul a {
    color: var(--color-text-subtle);
}
.sidebar ul a:hover {
    color: var(--color-link);
}
#webring_icon {
    float: right;
    height: 14px;
    width: 14px;
    margin-left: 2px;
    background: url('data:image/svg+xml;base64,CjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIzMDAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyOCIgd2lkdGg9IjMwMCIgdmlld0JveD0iMjUgMjUgMjUwIDI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMDEuOTYyIDIxMGE2MCA2MCAwIDEwLTEwMy45MjQtNjBsLTUwIDg2LjYwMyIvPgogICAgPHBhdGggZD0iTTk4LjAzOCAyMTBhNjAgNjAgMCAxMDEwMy45MjQtNjBsLTUwLTg2LjYwMyIvPgogICAgPHBhdGggZD0iTTE1MCAxMjBhNjAgNjAgMCAxMDAgMTIwaDEwMCIvPgo8L3N2Zz4K') no-repeat center center;
    background-size: contain;
}
@media (prefers-color-scheme: dark) {
    #webring_icon { filter: invert(100%); }
}

@media screen and (min-width: 1320px) {
    body { padding-left: 240px; }
    .sidebar { margin-left: 0; }
}

/* post content */
.post {
    position: relative;
    font-family: 'charterregular', Georgia, serif;
}
.post h1, .post h2, .post h3 {
    color: var(--color-text);
    font-size: 18px;
    font-weight: bold;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}
.post h1:first-of-type {
    font-size: 28px;
    margin-top: 0;
}
.post img { max-width: 100%; }
.post li { list-style: none outside none; }
.post ul > li:before { content: "- "; }
.post ol { counter-reset: o-list; }
.post ol > li:before {
    content: counter(o-list) ") ";
    counter-increment: o-list;
}
.post li ul, .post li ol { padding-left: var(--space-md); }
.post a {
    color: var(--color-link);
    transition: color 200ms ease-out;
}
.post a:hover {
    color: var(--color-link-hover);
}

/* index */
.index a {
    color: var(--color-text-strong);
    transition: color 200ms ease-out;
}
.index a:hover {
    color: var(--color-link);
}
.index aside {
    float: right;
    margin: 0 var(--space-sm);
    color: var(--color-text-subtle);
}
.index ul > li::before { content: ""; }
.index .index-link { width: 90%; }

/* special for list items in pre */
.post pre li { list-style-type: decimal; }
.post pre li:before { display: none; }

/* table of content */
#table-of-contents { display: none; }

/* katex */
.katex-html { }

.post-meta {
    font-size: 12px;
    color: var(--color-text-subtle);
}
.post-meta a {
    font-size: 12px;
    color: var(--color-link);
    transition: color 200ms ease-out;
}
.post-meta a:hover {
    color: var(--color-link-hover);
}

/***********/
/* footer  */
/***********/
.footpara { margin: 0 0 var(--space-xs) 0; }

/* responsive */
@media screen and (max-width: 1000px) {
    body {
        padding: 0 var(--space-2xl);
        margin: var(--space-2xl) auto;
        width: auto;
    }
    .sidebar {
        position: relative;
        width: 100%;
        text-align: center;
        margin: 0 0 var(--space-3xl);
    }
    .sidebar a {
        display: inline-block;
        padding: var(--space-xs) var(--space-sm);
    }
    .sidebar .logo { margin: 0; display: block; text-align: center; }
    .margin, .margin.right, .margin.left {
        width: 30%;
        position: relative;
        display: block;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }
    .margin.right { float: right; }
    .margin.left { text-align: left; float: left; }
    .wide, .wide.left, .wide.right { width: 100%; margin: 0; }
    .index .index-link { width: 70%; }
    .sidebar ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: var(--space-lg);
        -moz-column-gap: var(--space-lg);
        column-gap: var(--space-lg);
    }
    .sidebar { margin-bottom: var(--space-xl); }
}
@media screen and (max-width: 600px) {
    .index .index-link { width: 60%; }
}

/* dark mode: visual adjustments */
@media (prefers-color-scheme: dark) {
    body {
        color: var(--color-text);
        background-color: var(--color-bg);
    }
    b, strong {
        color: var(--color-text-strong);
    }
    .post {
        color: var(--color-text);
    }
    .post h1, .post h2, .post h3 {
        color: var(--color-text);
    }
    img {
        filter: brightness(0.85);
    }
}


/* Footnote container */
#footnotes {
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--footnote-border);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--footnote-text);
}

/* Title */
#footnotes h2 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: var(--space-sm);
}

/* Wrap each number and paragraph on a single line */
#footnotes .footdef {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

/* Style the superscript number */
#footnotes .footdef sup {
    font-size: 0.8em;
    line-height: 1;
    margin: 0;
    color: var(--color-text-subtle);
}

/* Remove extra margin on the paragraph container */
#footnotes .footpara {
    margin: 0;
}

/* Inline code in footnotes */
#footnotes code {
    background-color: var(--code-inline-bg);
    color: var(--code-inline-text);
    border: 1px solid var(--code-inline-border);
    border-radius: 3px;
    padding: 0.05em 0.2em;
    font-size: 0.9em;
}

/* Margin footnotes: enabled by JS on wide layouts */
.footnotes-margin .post { position: relative; }
.footnotes-margin body {
    max-width: 820px;
    width: 100%;
    padding-left: 200px;
}
.footnotes-margin #footnotes { display: none; }
.footnotes-margin .footnote-margin {
    position: absolute;
    right: calc(-1 * (var(--footnote-margin-width) + var(--footnote-margin-gap)));
    width: var(--footnote-margin-width);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--footnote-text);
}
.footnotes-margin .footnote-margin sup {
    font-size: 0.8em;
    line-height: 1;
    margin: 0;
    color: var(--color-text-subtle);
}
.footnotes-margin .footnote-margin .footpara { margin: 0; }