:root {
    color-scheme: light;
    --global-base-color: #36c;
    --global-bg-color: #fff;
    --global-footer-bg-color: #f8f9fa;
    --global-border-color: #c8ccd1;
    --global-dark-border-color: #a2a9b1;
    --global-code-background-color: #f8f9fa;
    --global-code-text-color: #202122;
    --global-fig-caption-color: #54595d;
    --global-link-color: #36c;
    --global-link-color-hover: #3056a9;
    --global-link-color-visited: #6a60b0;
    --global-masthead-link-color: #202122;
    --global-masthead-link-color-hover: #3056a9;
    --global-text-color: #202122;
    --global-text-color-light: #54595d;
    --global-thead-color: #eaecf0;
}

/* CSS Variables - Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --global-base-color: #36c;
        --global-bg-color: #101418;
        --global-footer-bg-color: #202122;
        --global-border-color: #54595d;
        --global-dark-border-color: #72777d;
        --global-code-background-color: #27292d;
        --global-code-text-color: #eaecf0;
        --global-fig-caption-color: #a2a9b1;
        --global-link-color: #88a3e8;
        --global-link-color-hover: #a6bbf5;
        --global-link-color-visited: #a799cd;
        --global-masthead-link-color: #f8f9fa;
        --global-masthead-link-color-hover: #a6bbf5;
        --global-text-color: #f8f9fa;
        --global-text-color-light: #a2a9b1;
        --global-thead-color: #27292d;
    }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { box-sizing: border-box; background-color: var(--global-bg-color); font-size: 16px; scroll-behavior: smooth; position: relative; min-height: 100%; scrollbar-gutter: stable; }
@media (min-width: 768px) { html { font-size: 18px; } }
body { margin: 0; color: var(--global-text-color); background-color: var(--global-bg-color); font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; line-height: 1.5; padding: 70px 0 0; display: flex; flex-direction: column; min-height: 100vh; }
body.overflow--hidden { overflow: hidden; }

::selection { color: #fff; background: #000; }
::-moz-selection { color: #fff; background: #000; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

/* Typography */
h1, h2, h3, h4, h5, h6 { margin: 2em 0 0.5em; line-height: 1.2; font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-weight: bold; }
h1 { margin-top: 0; font-size: 1.563em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1em; }
h4, h5, h6 { font-size: 0.75em; }
small, .small { font-size: 0.75em; }
p { margin-bottom: 1.3em; }
ul li, ol li { margin-bottom: 0.5em; }
li ul, li ol { margin-top: 0.5em; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

/* Links */
a { color: var(--global-link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { outline: thin dotted #f89406; }

/* Images */
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }

/* Code */
tt, code, kbd, samp, pre { font-family: Monaco, Consolas, "Lucida Console", monospace; }
pre { overflow-x: auto; }
a > code, li > code, p > code, td > code { color: var(--global-code-text-color); padding: 0.1rem 0.4rem; font-size: 0.75em; background: var(--global-code-background-color); border: 1px solid var(--global-thead-color); border-radius: 4px; }

/* HR */
hr { display: block; margin: 1em 0; border: 0; border-top: 1px solid var(--global-border-color); }

/* Nav */
nav ul { margin: 0; padding: 0; }
nav li { list-style: none; }
nav a { text-decoration: none; }
nav ul li, nav ol li { margin-bottom: 0; }
nav li ul, nav ol li { margin-top: 0; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 1.3em; }
th, td { padding: 0.5em 1em; text-align: left; border-bottom: 1px solid var(--global-border-color); }
th { font-weight: bold; background: var(--global-thead-color); }
thead { border-bottom: 2px solid var(--global-border-color); }

/* Buttons */
.btn { display: inline-block; margin-bottom: 0; padding: 0.5em 1em; font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 1.5; text-align: center; text-decoration: none; color: #fff; background: var(--global-base-color); border: 1px solid var(--global-base-color); border-radius: 4px; cursor: pointer; }
.btn:hover { background: var(--global-link-color-hover); border-color: var(--global-link-color-hover); text-decoration: none; color: #fff; }
.btn--inverse { background: transparent; border: 1px solid var(--global-border-color); color: var(--global-text-color-light); }
.btn--inverse:hover { background: var(--global-border-color); color: var(--global-text-color); }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead { position: fixed; top: 0; width: 100%; z-index: 20; background: var(--global-bg-color); border-bottom: 1px solid var(--global-border-color); }
.masthead__inner-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1em; }
.masthead__menu { display: flex; align-items: center; justify-content: space-between; height: 60px; }

/* Greedy Nav */
.greedy-nav { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.greedy-nav a { color: var(--global-masthead-link-color); text-decoration: none; }
.greedy-nav a:hover { color: var(--global-masthead-link-color-hover); }
.masthead__title { font-weight: 700; font-size: 1em; white-space: nowrap; }
.masthead__title.selected { color: var(--global-text-color); border-bottom: 2px solid var(--global-text-color); pointer-events: none; cursor: default; }
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-toggle-label { display: none; }

/* Desktop: inline links */
@media (min-width: 769px) {
    .greedy-nav .visible-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
    .greedy-nav .visible-links li { margin: 0; }
    .greedy-nav .visible-links li a { display: block; padding: 0.5rem 1rem; position: relative; }
    .greedy-nav .visible-links a::before { content: ""; position: absolute; left: 1rem; bottom: 0; height: 4px; background: var(--global-border-color); width: calc(100% - 2rem); transform: scaleX(0); transition: all 0.2s ease-in-out; }
    .greedy-nav .visible-links a:hover::before { transform: scaleX(1); }
}

/* Mobile: hamburger + dropdown */
@media (max-width: 768px) {
    .greedy-nav { justify-content: space-between; }
    .masthead__title { flex-shrink: 0; margin-right: auto; }
    .nav-toggle-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; }
    .navicon { display: block; width: 24px; height: 3px; background: var(--global-text-color); position: relative; }
    .navicon::before, .navicon::after { content: ""; display: block; width: 24px; height: 3px; background: var(--global-text-color); position: absolute; left: 0; }
    .navicon::before { top: -7px; }
    .navicon::after { top: 7px; }
    .greedy-nav .visible-links { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 10px; list-style: none; margin: 0; border: 1px solid var(--global-border-color); border-radius: 4px; background: var(--global-bg-color); z-index: 100; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
    .greedy-nav .visible-links::before { display: block; content: ""; position: absolute; top: -11px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-border-color) transparent; }
    .greedy-nav .visible-links::after { display: block; content: ""; position: absolute; top: -10px; right: 10px; width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-bg-color) transparent; }
    .greedy-nav .visible-links li { display: block; white-space: normal; }
    .greedy-nav .visible-links li a { display: block; padding: 4px 5px; margin-bottom: 5px; color: var(--global-masthead-link-color); border: none; font-size: 0.8em; }
    .greedy-nav .visible-links li a:hover { text-decoration: underline; }
    .greedy-nav .visible-links li:last-child a { margin-bottom: 0; }
    #nav-toggle:checked ~ .visible-links { display: block; }
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar { margin-bottom: 1em; }

.author__avatar { display: table-cell; vertical-align: top; width: 36px; }
.author__avatar img { max-width: 175px; border-radius: 50%; }
.author__content { display: table-cell; vertical-align: top; padding-left: 15px; padding-right: 25px; line-height: 1; }
.author__name { margin: 0; font-size: 0.9em; }
.author__bio { margin: 0; font-size: 0.75em; color: var(--global-text-color-light); }
.author__urls-wrapper { position: relative; display: table-cell; vertical-align: middle; z-index: 10; cursor: pointer; }
.author__urls-wrapper button { margin-bottom: 0; }
.author__urls-wrapper input { position: absolute; opacity: 0; width: 0; height: 0; }
.author__urls { display: none; position: absolute; right: 0; margin-top: 15px; padding: 10px; list-style-type: none; border: 1px solid var(--global-border-color); border-radius: 4px; background: var(--global-bg-color); z-index: 20; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); cursor: default; }
.author__urls::before { display: block; content: ""; position: absolute; top: -11px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-border-color) transparent; }
.author__urls::after { display: block; content: ""; position: absolute; top: -10px; left: calc(50% - 10px); width: 0; border-style: solid; border-width: 0 10px 10px; border-color: var(--global-bg-color) transparent; }
.author__urls li { white-space: nowrap; }
.author__urls a { display: block; margin-bottom: 5px; padding: 2px 5px; color: inherit; font-size: 0.8em; text-decoration: none; }
.author__urls a:hover { text-decoration: underline; }
.author__urls .icon-pad-right { margin-right: 0.5em; }
.author__desktop { display: none; }

#author-follow-toggle:checked ~ .author__urls { display: block; }

@media (min-width: 1024px) {
    .sidebar { display: none; }
}

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
#main { max-width: 1280px; margin: 2em auto; padding: 0 1em; animation: intro 0.3s both; animation-delay: 0.35s; flex: 1; width: 100%; }
@media (min-width: 768px) { #main { padding: 0 1em; } }
@media (min-width: 1024px) { .page { width: 100%; } }
.page__title { margin-top: 0; margin-bottom: 0; line-height: 1; }
.page__title p { margin: 0; }
.page__meta { margin-top: 2em; color: var(--global-text-color-light); font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; font-size: 0.75em; }
.page__meta p { margin: 0; }
.page__date { margin-top: 0.5em; }
.page__content h2 { padding-bottom: 0.5em; border-bottom: 1px solid var(--global-border-color); }
.page__content p { margin: 0 0 1.3em; }
.page__content > hr:first-child { margin-top: 1em; }
.page__content a { text-decoration: underline; }
.page__content a:hover { text-decoration: underline; }
.page__taxonomy { margin-top: 1em; }
.page__taxonomy-item { display: inline-block; margin-right: 5px; margin-bottom: 8px; padding: 5px 10px; text-decoration: none; border: 1px solid var(--global-border-color); border-radius: 4px; }
.page__taxonomy-item:hover { text-decoration: none; color: var(--global-link-color-hover); }

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.archive { margin-bottom: 2em; }
.archive__subtitle { margin: 1.414em 0 0; padding-bottom: 0.5em; font-size: 1em; color: var(--global-text-color-light); border-bottom: 1px solid var(--global-border-color); }
.archive__item-title { margin-bottom: 0.25em; font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; }
.archive__item-title a { color: var(--global-link-color); text-decoration: none; }
.archive__item-title a:hover { text-decoration: underline; }
.archive__item-excerpt { margin-top: 0; font-size: 0.75em; }
.archive a { text-decoration: underline; }
.archive a:hover { text-decoration: underline; }
.list__item { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--global-border-color); }
.list__item:last-child { border-bottom: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.page__footer { background-color: var(--global-footer-bg-color); color: var(--global-text-color-light); border-top: 1px solid var(--global-dark-border-color); position: relative; }
@media (min-width: 769px) {
    .page__footer { position: fixed; bottom: 0; width: 100%; }
    body { padding-bottom: 9em; }
}
.page__footer footer { max-width: 1280px; margin: 0 auto; padding: 1em; overflow: hidden; }
.page__footer a { color: inherit; text-decoration: none; }
.page__footer a:hover { text-decoration: underline; }
.page__footer-copyright { font-size: 0.6875em; }
.page__footer-follow { margin-bottom: 0.5em; }
.page__footer-follow ul { margin: 0; padding: 0; list-style-type: none; }
.page__footer-follow li { display: inline-block; padding: 5px 10px 5px 0; font-size: 0.75em; text-transform: uppercase; }
.page__footer-follow a { font-weight: bold; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes intro {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .masthead, .toc, .page__share, .page__related, .page__footer { display: none; }
    body { padding: 0; }
    #main { margin: 0; padding: 0; }
}