/* ==========================================================================
   Marginalia — a modern Tufte theme for Ghost
   Main column + margin column; sidenotes, margin notes and captions sit in
   the margin above 900px and fold into the text below it.
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --bg: #FFFFF8;
    --text: #111111;
    --muted: #5E5D55;
    --rule: #DEDCCF;
    --tint: #F3F2E6;
    --accent: var(--accent-light, var(--ghost-accent-color, #B22D2A));
    --hl: var(--hl-colour, #FFF59A);

    /* the three columns */
    --mg-main: min(30rem, 56vw);
    --mg-gap: min(2.5rem, 4vw);
    --mg-margin: min(14rem, 24vw);

    /* typeface defaults (Alegreya Sans) */
    --font-body: 'Alegreya Sans', 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
    --font-meta: 'Alegreya Sans SC', 'Alegreya Sans', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --meta-case: lowercase;
    --meta-ls: 0.05em;
    --lh: 1.5;
    --side: 0.78rem;
    --h1w: 500;
    --h1ls: 0;
    --h2s: italic;
    --h2w: 400;
    --nt-font: var(--font-meta);
    --nt-case: lowercase;
    --nt-var: normal;
    --nt-ls: 0.04em;
    --nt-size: 1em;
    --nt-w: 500;

    /* highlight */
    --fade: 3.8em;
    --hl-pad: 0.9em;
    --hl-bg: linear-gradient(90deg, transparent 0, var(--hl) var(--fade), var(--hl) calc(100% - var(--fade)), transparent 100%);

    color-scheme: light;
    font-size: 137.5%;
}

[data-typeface="Source Sans 3"] {
    --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
    --font-meta: var(--font-body);
    --meta-case: uppercase;
    --meta-ls: 0.09em;
    --lh: 1.55;
    --side: 0.8rem;
    --h1w: 400;
    --h1ls: -0.005em;
    --nt-font: var(--font-body);
    --nt-case: none;
    --nt-var: small-caps;
    --nt-ls: 0.05em;
    --nt-w: 400;
    font-size: 125%;
}

[data-typeface="Inter"] {
    --font-body: 'Inter', system-ui, sans-serif;
    --font-meta: 'IBM Plex Mono', var(--font-mono);
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --meta-case: uppercase;
    --meta-ls: 0.03em;
    --lh: 1.62;
    --side: 0.8rem;
    --h1w: 600;
    --h1ls: -0.025em;
    --h2s: normal;
    --h2w: 600;
    --nt-font: var(--font-body);
    --nt-case: uppercase;
    --nt-ls: 0.06em;
    --nt-size: 0.8em;
    --nt-w: 600;
    font-size: 112.5%;
}

/* fade length, then highlight style (style wins on padding) */
[data-fade="Short"] { --fade: 1em; --hl-pad: 0.4em; }
[data-fade="Medium"] { --fade: 2em; --hl-pad: 0.8em; }
[data-hl="Band"] {
    --hl-bg: linear-gradient(180deg, transparent 48%, var(--hl) 48%, var(--hl) 90%, transparent 90%);
    --hl-pad: 0.08em;
}
[data-hl="Plain"] { --hl-bg: var(--hl); --hl-pad: 0.08em; }

/* dark */
[data-scheme="Dark"] {
    --bg: #161614;
    --text: #ECEAE0;
    --muted: #A9A79B;
    --rule: #3B3A35;
    --tint: #22221F;
    --accent: var(--accent-dark, color-mix(in srgb, var(--ghost-accent-color, #B22D2A) 62%, white));
    --hl: color-mix(in srgb, var(--hl-colour, #FFF59A) 22%, transparent);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    [data-scheme="Auto"] {
        --bg: #161614;
        --text: #ECEAE0;
        --muted: #A9A79B;
        --rule: #3B3A35;
        --tint: #22221F;
        --accent: var(--accent-dark, color-mix(in srgb, var(--ghost-accent-color, #B22D2A) 62%, white));
        --hl: color-mix(in srgb, var(--hl-colour, #FFF59A) 22%, transparent);
        color-scheme: dark;
    }
}

/* 2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--gh-font-body, var(--font-body));
    line-height: var(--lh);
    font-feature-settings: "kern", "liga", "onum";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    z-index: 100;
    padding: 0.5rem 0.8rem;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-size: 0.8rem;
}
.skip:focus { left: 1rem; }

.meta, .lab, .nav a, .nav-cta, .more {
    font-family: var(--font-meta);
    text-transform: var(--meta-case);
    letter-spacing: var(--meta-ls);
    font-size: 0.76rem;
    color: var(--muted);
}

/* 3. Grid
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns:
        [full-start] minmax(1rem, 1fr)
        [main-start] var(--mg-main) [main-end]
        var(--mg-gap)
        [margin-start] var(--mg-margin) [margin-end]
        minmax(1rem, 1fr) [full-end];
}
.grid > * { grid-column: main; }

/* 4. Header
   -------------------------------------------------------------------------- */

.site-header { padding-top: 1.8rem; }

.mast {
    grid-column: main-start / margin-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 3.2rem;
}

.site-title {
    font-family: var(--font-meta);
    text-transform: var(--meta-case);
    letter-spacing: var(--meta-ls);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}
.site-logo { display: block; max-height: 2.2rem; width: auto; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.1rem; }
.nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; display: inline-block; padding: 0.35rem 0; }
.nav a:hover, .nav a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }

.search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; min-width: 44px; min-height: 44px;
    margin: -0.3rem -0.6rem;
    background: none; border: 0; color: var(--muted); cursor: pointer;
}
.search-btn:hover { color: var(--text); }
.nav-cta { color: var(--accent); text-decoration: none; }

/* 5. Home, tag and author headers
   -------------------------------------------------------------------------- */

.intro { margin-bottom: 3rem; align-items: end; }
.intro-main { grid-column: main; }
.intro-side { grid-column: margin; font-size: var(--side); line-height: 1.45; color: var(--muted); }
.intro-title {
    font-family: var(--gh-font-heading, var(--font-body));
    font-weight: var(--h1w);
    letter-spacing: var(--h1ls);
    font-size: 3.1rem;
    line-height: 1.04;
    margin: 0 0 0.25em;
}
.intro-tag { font-style: italic; color: var(--muted); font-size: 1.22rem; line-height: 1.35; margin: 0; }
.intro .meta { margin: 0 0 0.6rem; }
.lab { display: block; margin: 0 0 0.5em; color: var(--text); font-weight: 500; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 0.1rem 0; }
.plain a { color: var(--muted); text-decoration-thickness: 1px; }
.plain a:hover { color: var(--text); }
.author-image { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }

/* 6. Post list
   -------------------------------------------------------------------------- */

.entry { padding-bottom: 1.4rem; }
.entry::before {
    content: "";
    grid-column: main-start / margin-end;
    border-top: 1px solid var(--rule);
    margin-bottom: 1.3rem;
}
.entry-main { grid-column: main; }
.entry-side { grid-column: margin; padding-top: 0.45rem; }
.entry-side .meta { display: block; margin-bottom: 0.3em; text-decoration: none; }
.entry-side .cat { color: var(--accent); }
.entry-side .cat:hover { text-decoration: underline; }
.entry-title {
    font-family: var(--gh-font-heading, var(--font-body));
    font-style: var(--h2s);
    font-weight: var(--h2w);
    letter-spacing: var(--h1ls);
    font-size: 1.55rem;
    line-height: 1.18;
    margin: 0 0 0.4em;
}
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.entry-excerpt { margin: 0 0 0.6em; }
.more { color: var(--accent); text-decoration: none; }
.more:hover { text-decoration: underline; }

.pagination { margin-top: 1.5rem; }
.pagination-inner {
    grid-column: main-start / margin-end;
    display: flex; justify-content: space-between; gap: 1rem;
    padding-top: 1rem; border-top: 1px solid var(--rule);
}
.pagination a { color: var(--accent); text-decoration: none; padding: 0.4rem 0; }
.pagination a:hover { text-decoration: underline; }

/* 7. Post header
   -------------------------------------------------------------------------- */

.post-header { margin-bottom: 2.2rem; }
.post-title {
    grid-column: main-start / margin-end;
    max-width: 80%;
    font-family: var(--gh-font-heading, var(--font-body));
    font-weight: var(--h1w);
    letter-spacing: var(--h1ls);
    font-size: 2.7rem;
    line-height: 1.06;
    margin: 0 0 0.3em;
}
.post-sub { font-style: italic; color: var(--muted); font-size: 1.22rem; line-height: 1.35; margin: 0 0 0.9em; }
.post-meta { margin: 0; }
.post-meta a { color: var(--accent); }

.post-image { margin: 0 0 2.6rem; }
.post-image > * { grid-column: main-start / margin-end; }
.post-image img { display: block; width: 100%; }
.post-image figcaption { margin-top: 0.6em; font-size: var(--side); line-height: 1.42; color: var(--muted); }

/* 8. Content
   -------------------------------------------------------------------------- */

.gh-content { margin-bottom: 3rem; }
.gh-content > * { margin-top: 0; margin-bottom: 1.15em; min-width: 0; }

.gh-content > h2, .gh-content > h3, .gh-content > h4 {
    font-family: var(--gh-font-heading, var(--font-body));
    letter-spacing: var(--h1ls);
    line-height: 1.2;
}
.gh-content > h2 { font-style: var(--h2s); font-weight: var(--h2w); font-size: 1.45rem; margin: 2.1em 0 0.7em; }
.gh-content > h3 { font-weight: 600; font-size: 1.12rem; margin: 1.8em 0 0.5em; }
.gh-content > h4 { font-weight: 600; font-size: 1rem; margin: 1.5em 0 0.4em; }

.gh-content > ul, .gh-content > ol { padding-left: 1.2em; }
.gh-content li + li { margin-top: 0.3em; }

.gh-content > hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }

.gh-content > blockquote:not(.kg-blockquote-alt) {
    margin: 1.8em 0;
    padding: 0 0 0 2.2em;
    border: 0;
    font-style: italic;
}
.gh-content > blockquote p { margin: 0 0 0.6em; }
.gh-content > blockquote p:last-child { margin: 0; }

/* the "alt" quote style, before theme.js moves it into the margin */
.gh-content > blockquote.kg-blockquote-alt {
    margin: 1.2em 0;
    padding: 0 0 0 2.2em;
    border: 0;
    font-size: var(--side);
    color: var(--muted);
    text-align: left;
    font-style: normal;
}

.gh-content pre {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    background: var(--tint);
    padding: 0.9em 1em;
    overflow-x: auto;
    border-radius: 3px;
}
.gh-content :not(pre) > code { font-family: var(--font-mono); font-size: 0.82em; background: var(--tint); padding: 0.05em 0.3em; border-radius: 2px; }

/* small-caps opening */
.nt {
    font-family: var(--nt-font);
    text-transform: var(--nt-case);
    font-variant-caps: var(--nt-var);
    letter-spacing: var(--nt-ls);
    font-size: var(--nt-size);
    font-weight: var(--nt-w);
}

/* highlight */
mark, .gh-content mark {
    color: inherit;
    background: var(--hl-bg);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 var(--hl-pad);
    margin: 0 calc(-1 * var(--hl-pad));
}

/* 9. Sidenotes and margin notes
   -------------------------------------------------------------------------- */

.sn-ref {
    font: inherit;
    font-size: 0.66em;
    font-weight: 600;
    line-height: 0;
    vertical-align: super;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0 0.08em 0 0.1em;
    cursor: default;
    font-feature-settings: "lnum";
}

.sidenote, .marginnote {
    float: right;
    clear: right;
    width: var(--mg-margin);
    margin-right: calc(-1 * (var(--mg-gap) + var(--mg-margin)));
    margin-top: 0.3em;
    margin-bottom: 1em;
    font-size: var(--side);
    line-height: 1.42;
    color: var(--muted);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-indent: 0;
}
.sidenote-num { color: var(--accent); font-weight: 600; margin-right: 0.4em; font-feature-settings: "lnum"; }
.sidenote a, .marginnote a { color: inherit; }

/* converted footnote sections are hidden; unconverted ones still read well */
.footnotes.is-converted, .footnotes-sep.is-converted { display: none; }
.gh-content > .footnotes { font-size: var(--side); color: var(--muted); }
.gh-content > .footnotes-sep { border: 0; border-top: 1px solid var(--rule); width: 30%; margin-left: 0; }

/* 10. Cards: images, galleries, embeds, tables
   -------------------------------------------------------------------------- */

.gh-content > figure, .gh-content > .kg-card { margin: 2.2em 0 2.4em; }
.gh-content img { display: block; }
.kg-image { margin: 0 auto; }

figcaption, .gh-content figcaption { font-size: var(--side); line-height: 1.42; color: var(--muted); margin-top: 0.6em; text-align: left; }

/* normal-width image: caption sits in the margin, level with the image foot */
.gh-content > .kg-image-card.kg-card-hascaption:not(.kg-width-wide):not(.kg-width-full) {
    grid-column: main-start / margin-end;
    display: grid;
    grid-template-columns: var(--mg-main) var(--mg-gap) var(--mg-margin);
    align-items: end;
}
.gh-content > .kg-image-card.kg-card-hascaption:not(.kg-width-wide):not(.kg-width-full) > * { grid-column: 1; }
.gh-content > .kg-image-card.kg-card-hascaption:not(.kg-width-wide):not(.kg-width-full) > figcaption { grid-column: 3; margin: 0; }

.gh-content > .kg-width-wide { grid-column: main-start / margin-end; }
.gh-content > .kg-width-full { grid-column: full; }
.gh-content > .kg-width-full img { width: 100%; }
.gh-content > .kg-width-full figcaption { padding: 0 1rem; max-width: calc(var(--mg-main) + var(--mg-gap) + var(--mg-margin)); margin-left: auto; margin-right: auto; }

/* tables (wrapped in a scroll box by theme.js) */
.gh-content > .table-wrap { grid-column: main-start / margin-end; max-width: 100%; overflow-x: auto; }
.gh-content table {
    border-collapse: collapse;
    font-size: 0.86rem;
    line-height: 1.4;
    border-top: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    margin: 0;
    min-width: min(100%, var(--mg-main));
}
.gh-content th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--text); padding: 0.55em 1.1em 0.45em 0; vertical-align: bottom; }
.gh-content td { padding: 0.45em 1.1em 0.45em 0; vertical-align: top; }
.gh-content tr + tr td { border-top: 1px solid var(--rule); }
.gh-content caption { caption-side: bottom; text-align: left; font-size: var(--side); color: var(--muted); padding-top: 0.6em; }

/* 11. Post footer, comments
   -------------------------------------------------------------------------- */

.post-footer-inner { grid-column: main-start / margin-end; border-top: 1px solid var(--rule); padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.post-footer .meta { margin: 0; }
.post-footer a { color: var(--accent); text-decoration: none; }
.post-footer a:hover { text-decoration: underline; }
.post-comments { margin-top: 3rem; }
.comments-inner { grid-column: main; }

/* 12. Footer and carbon badge
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: 5rem;
    padding-bottom: 4rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--muted);
}
.site-footer::before {
    content: "";
    grid-column: main-start / margin-end;
    border-top: 1px solid var(--rule);
    margin-bottom: 1.2rem;
}
.footer-main { grid-column: main; }
.footer-side { grid-column: margin; }
.site-footer p { margin: 0 0 0.6em; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.footer-links .nav a { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: inherit; padding: 0; text-decoration: underline; }

.carbon { display: flex; align-items: center; gap: 0.8rem; color: var(--text); text-decoration: none; }
.site-footer .carbon { color: var(--text); }
.carbon-grade {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.7em; height: 2.7em;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.05em;
    font-feature-settings: "lnum";
}
.carbon-text b { display: block; font-weight: 600; }
.carbon-text small { display: block; font-size: 1em; color: var(--muted); }
.carbon:hover b { text-decoration: underline; text-decoration-color: var(--accent); }
.carbon.is-failed .carbon-grade { border-style: dashed; color: var(--muted); }

/* 13. Narrow screens: one column, notes fold into the text
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
    :root { font-size: 118.75%; }
    [data-typeface="Source Sans 3"] { font-size: 112.5%; }
    [data-typeface="Inter"] { font-size: 103%; }

    .grid {
        grid-template-columns:
            [full-start] 1.1rem
            [main-start margin-start] minmax(0, 1fr) [main-end margin-end]
            1.1rem [full-end];
    }

    .mast { margin-bottom: 2rem; }
    .post-title { max-width: none; font-size: 2.05rem; }
    .intro-title { font-size: 2.4rem; }
    .intro-side { margin-top: 1.4rem; }
    .entry-side { order: -1; padding-top: 0; }
    .entry-side .meta { display: inline; margin-right: 0.8em; }
    .footer-side { margin-top: 1rem; }
    .nav a { padding: 0.6rem 0; }

    .sidenote, .marginnote {
        float: none;
        display: block;
        width: auto;
        margin: 0.5em 0 0.9em;
        padding: 0.65em 0.85em;
        background: var(--tint);
        border-radius: 3px;
    }
    .sidenote { display: none; }
    .sn.is-open .sidenote { display: block; }
    .sn-ref { cursor: pointer; padding: 0.9em 0.5em; margin: -0.9em -0.25em; }

    .gh-content > .kg-image-card.kg-card-hascaption:not(.kg-width-wide):not(.kg-width-full) { grid-template-columns: minmax(0, 1fr); }
    .gh-content > .kg-image-card.kg-card-hascaption:not(.kg-width-wide):not(.kg-width-full) > figcaption { grid-column: 1; margin-top: 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
    .site-header, .site-footer, .post-comments, .skip { display: none; }
    :root { --bg: #fff; --text: #000; }
}