/*
 * Marc-André Lemburg blog theme — 1:1 port of the original Tumblr design.
 *
 * Faithful adaptation of the original theme (Ashley v0.5 base, customised
 * by Marc-Andre Lemburg, 2015). Color palette, layout, fonts and dropdown
 * menu match the live Tumblr site.
 */

/* --- Self-hosted webfonts ----------------------------------------------
 * Bitter (titles), Mako (body), Oxygen Mono (code). All three are
 * served from `assets/fonts/` under the theme so the blog has no runtime
 * dependency on Google Fonts. WOFF2 only — every browser that runs
 * Ghost 5/6 supports it. Bitter is the variable-font flavour from
 * Google Fonts v40, so the same file serves both 400 and 700 weights.
 */

@font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/bitter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/bitter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Bitter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bitter-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: "Bitter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bitter-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Mako";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mako-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: "Mako";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mako-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Oxygen Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/oxygenmono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: "Oxygen Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/oxygenmono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ghost's custom-font picker (Settings -> Design -> Typography) injects
 * --gh-font-heading and --gh-font-body via ghost_head when active. The
 * original Tumblr theme used Bitter for titles and Mako for body — those
 * are the defaults; admin overrides flow in transparently. */

:root {
    --font-title: var(--gh-font-heading, "Bitter", Georgia, serif);
    --font-body:  var(--gh-font-body, "Mako", Georgia, serif);
}

/* --- Reset / normalize ----------------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; padding: 0; }

/* The original Tumblr CSS doesn't reset box-sizing globally; relying on the
 * default content-box is what makes `.wrap { max-width: 40em }` render at
 * 914px (800px content + 2 × 57px padding). A global border-box reset would
 * shrink the visible content area by ~114px. */

b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }

figure {
    margin: 1.5em auto;
    text-align: center;
}
figure img {
    box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.2),
                0 0.5em 0.75em rgba(0, 0, 0, 0.25);
}

table { border-collapse: collapse; border-spacing: 0; }

/* --- Blog theme ------------------------------------------------------ */

body {
    color: #2b2b2b;
    /* `#5d80b5` is sampled from the top of background.jpg so the colour
       shown before the image paints visually matches the image's sky
       region — avoids the steel-blue flash on reload. The original
       Tumblr theme used `#6b95b0` (greyer); see resources/assets/malemburg.css. */
    background-color: #5d80b5;
    /* The `background-image` itself is declared inline in default.hbs via
       the {{asset}} helper so the URL gets the per-build hash. That keeps
       it cache-busted in lockstep with the rest of the theme and lets the
       <link rel="preload"> in <head> reuse the exact same URL. */
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
}

.content {
    background: #fff;
    padding: 1% 4% 2%;
}

@media (min-width: 640px) {
    .content {
        border-radius: 1.75em;
    }
}

h1, h2, .h1, .h2 { line-height: 1.25; margin-top: 1em; }
h1, .h1 { font-weight: 400; font-size: 32px; }
h2, .h2 { font-weight: 550; font-size: 24px; }
h3, .h3 { font-weight: 550; font-size: 20px; margin-top: 1em; }

p, .p, ul, ol { font-size: 18px; }
p, ul, ol { margin-top: 1em; }

center, .center { text-align: center; }
small, .small { font-size: 14px; }
strong, .strong { font-weight: 700; }

.gap { padding-right: 0.5em; }

code, kbd, pre, samp {
    color: #363;
    font-family: "Oxygen Mono", monospace, serif;
    font-size: 0.9em;
}
p code { font-size: 0.9em; }
pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media screen and (min-width: 480px) {
    h1, .h1 { font-size: 48px; }
    h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 24px; }
    body, p, .p, ul, ol { font-size: 20px; }
    small, .small { font-size: 16px; }
}

@media screen and (min-width: 640px) {
    h1, .h1 { font-size: 64px; }
    h2, .h2 { font-size: 40px; }
    h3, .h3 { font-size: 28px; }
}

.wrap {
    width: 90%;
    max-width: 40em;
    margin: 0 auto;
    overflow: hidden;
}

a {
    color: #4444ff;
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Site header ----------------------------------------------------- */

.site-header {
    padding: 2em 5% 0;
    max-width: 40em;
    margin: 3em auto;
    color: #fff;
    overflow: hidden;
}
.site-header a { color: #fff; }

hgroup { overflow: hidden; }

.logo-link { display: block; float: left; margin-right: 2em; margin-bottom: 1em; }
.logo {
    border-radius: 25px;
    box-shadow: 3px 3px 3px #434c6d;
    height: 9em;
    display: block;
}

.title {
    font-family: var(--font-title);
    margin-top: auto;
    margin-bottom: auto;
}

/* The site title gets its own size ladder so a longer name (eg. "Marc-André
 * Lemburg" at 645px / 64px Bitter) still fits on one line beside the 180px
 * logo in the ~580px slot. Drops by ~12.5% vs the generic h1 scale. */
.title { font-size: 28px; }
@media screen and (min-width: 480px) { .title { font-size: 42px; } }
@media screen and (min-width: 640px) { .title { font-size: 56px; } }
.title a {
    color: #fff;
    /* Hard-edged 3px 3px shadow doubles the strokes visually; using the
     * lighter #434c6d keeps the title looking regular-weight. The live
     * malemburg.css has a `@media screen { … #333 }` override that's
     * masked there by an inline <style> block, so the visible shadow on
     * the original is also #434c6d. Don't reintroduce #333. */
    text-shadow: 3px 3px #434c6d;
}
.description { margin-top: 0.25em; }

@media (max-width: 640px) {
    .site-header { margin: 1em auto; }
    .logo { margin-right: 1.5em; height: 8em; }
    .description { clear: both; }
}

/* --- Post / article -------------------------------------------------- */

article { margin-bottom: 2em; }

article a:active, article a:hover {
    text-decoration: none;
    border-bottom: 1px solid #4444ff;
    padding-bottom: 0.05em;
}

.meta-title { font-family: "Bitter", Georgia, serif; }

a.post-title {
    font-family: var(--font-title);
    color: #2b2b2b;
    display: block;
}
a.post-title h2 { font-family: inherit; color: inherit; }
a.post-title:hover { color: #4444ff; }
a.post-title:hover h2 { color: #4444ff; }
a.post-title:hover, a.post-title:active {
    border-bottom: none;
}

ul li { margin-bottom: 1em; }

ul.pages { list-style: none; }
ul.pages li { display: inline-block; margin-right: 1em; }
ul.pages li a { display: block; height: 1em; line-height: 2em; }

.post img,
.photoset,
.photoset img,
.photoset_row { max-width: 100%; }

.post iframe, .video object { width: 100%; max-width: 100%; }

.post blockquote {
    padding-left: 1em;
    border-left: 1px solid #ddd;
}

.post ul, .post ol { margin-left: 2em; }
.post footer ul, .post footer ol { margin: 0; }

.quote blockquote {
    padding: 0;
    border: none;
    font-style: italic;
}
.quote .source { text-align: right; }

.post footer { margin-top: 1em; }

.permalink {
    padding: 0.5em;
    color: #aaa;
    font-style: italic;
}
.permalink a { color: #aaa; }
.permalink a:hover { color: #999; }
.permalink .source { float: right; margin-right: 0; }
.permalink li { display: inline-block; margin-right: 1em; }

.tags { margin-top: 1em; }

.posts .separator {
    border-bottom: 1px dotted #666;
    margin: 3em 10%;
}

.page-excerpt {
    color: #555;
    font-size: 1em;
    margin-top: 0.75em;
}

/* --- Pagination ------------------------------------------------------ */

.pagination {
    margin-top: 4em;
    text-align: center;
    line-height: 3em;
    overflow: hidden;
}
.pagination a {
    display: inline-block;
    height: 3em;
    padding: 0 1em;
    border-radius: 0.25em;
}
.pagination a:hover {
    background: #eee;
    text-decoration: none;
}
.pagination .previous { float: left; }
.pagination .next { float: right; }
.pagination .page-number { color: #666; }

/* --- Footer ---------------------------------------------------------- */

footer.wrap {
    padding-top: 2em;
    padding-bottom: 2em;
    color: #fff;
}
footer.wrap a { color: #fff; }
.copyright a { color: #2b2b2b; }
.content + footer.wrap .copyright a { color: #2b2b2b; }

/* --- Comments / Notes ------------------------------------------------ */

.comments .separator {
    border-top: 1px dotted #666;
    margin: 3em 10%;
}

/* --- Drop-down navigation menu --------------------------------------- */
/* Material CSS3 navigation: original by Cole Waldrip (codepen KpRwgQ, MIT),
   heavily modified by Marc-Andre Lemburg, 2015. Six-column top bar with
   two-column hover dropdowns on desktop, single-column on tablet, two-column
   inline on mobile. */

.nav-bar {
    width: 100%;
    height: 30px;
    clear: both;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 16px;
}

.site-header .nav-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}

@media print {
    .site-header .nav-bar { display: none; }
}

.nav-bar a, .nav-bar a:hover { text-decoration: none; }

.nav-bar > nav {
    max-width: 60em;
    margin: 0 auto;
}

.nav-bar > nav > div {
    float: left;
    /* Six top-level entries: About, Business, Projects, Community, spacer, Contact. */
    width: 16.6666%;
    height: 100%;
    position: relative;
}

.nav-bar > nav > div > a {
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    line-height: 30px;
    color: #333;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
}

.nav-bar > nav > div:hover > a {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.nav-bar > nav > div > div {
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    background-color: white;
    min-width: 330%;
    position: absolute;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    padding: 10px;
    transition: opacity 0.2s ease;
    z-index: 101;
}

.nav-bar > nav > div:not(:first-of-type):not(:last-of-type) > div {
    left: -110%;
    border-radius: 0 0 4px 4px;
}
.nav-bar > nav > div:first-of-type > div {
    left: 0;
    border-radius: 0 0 4px 0;
}
.nav-bar > nav > div:last-of-type > div {
    right: 0;
    border-radius: 0 0 0 4px;
}

.nav-bar > nav > div:hover > div {
    visibility: visible;
    opacity: 1;
}

.nav-bar > nav > div > div > a {
    display: block;
    float: left;
    padding: 1%;
    /* Two-column layout */
    min-width: 46%;
    margin: 0.25em 1%;
    text-align: left;
    text-indent: 0.25em;
    background-color: #eee;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.nav-bar > nav > div > div > a:nth-child(2n) { float: right; }
.nav-bar > nav > div > div > a:hover {
    background-color: #ffd768;
    cursor: pointer;
}

@media (max-width: 950px) {
    .nav-bar > nav > div > div { min-width: 175%; margin: 0 auto; }
    .nav-bar > nav > div:not(:first-of-type):not(:last-of-type) > div { left: -45%; }
    .nav-bar > nav > div > div > a {
        float: inherit;
        margin: 0.75em auto;
        padding: 0.25em;
        min-width: 75%;
    }
    .nav-bar > nav > div > div > a:nth-child(2n) { float: inherit; }
}

@media (max-width: 640px) {
    .site-header .nav-bar {
        position: relative;
        margin-top: 2em;
        background-color: #eee;
        height: auto;
        overflow: hidden;
    }
    .nav-bar > nav > div {
        width: 50%;
        overflow: hidden;
        border-bottom: 2px solid #fff;
    }
    .nav-bar > nav > div > div {
        display: none;
        min-width: 50%;
        position: relative;
        margin: 0 auto;
        visibility: visible;
        opacity: 1;
    }
    .nav-bar > nav > div:hover > div { display: block; }
    .nav-bar > nav > div:not(:first-of-type):not(:last-of-type) > div { left: inherit; }
    .nav-bar > nav > div > div > a {
        float: inherit;
        margin: 0.75em auto;
        padding: 0.25em;
        min-width: 75%;
    }
    .nav-bar > nav > div > div > a:nth-child(2n) { float: inherit; }
}

/* --- Koenig editor cards (Ghost block content) ----------------------- */

.kg-image-card,
.kg-embed-card,
.kg-gallery-card,
.kg-video-card,
.kg-audio-card,
.kg-file-card,
.kg-product-card,
.kg-bookmark-card,
.kg-callout-card,
.kg-toggle-card,
.kg-header-card {
    margin: 1.5em 0;
}
.kg-image-card img,
.kg-image {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}
.kg-image-card figcaption,
.kg-embed-card figcaption,
.kg-gallery-card figcaption,
.kg-video-card figcaption {
    text-align: center;
    color: #666;
    font-size: 0.85em;
    margin-top: 0.5em;
}
.kg-width-wide {
    position: relative;
    width: 110%;
    margin-left: -5%;
    max-width: none;
}
.kg-width-full {
    position: relative;
    width: 115%;
    margin-left: -7.5%;
    max-width: none;
}
.kg-width-wide img,
.kg-width-full img { width: 100%; }

.kg-bookmark-card { width: 100%; }
.kg-bookmark-container {
    display: flex;
    color: #2b2b2b;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.kg-bookmark-content { flex: 1 1 60%; padding: 1em; }
.kg-bookmark-title { font-weight: 600; }
.kg-bookmark-description { color: #666; font-size: 0.9em; margin-top: 0.5em; }
.kg-bookmark-metadata { display: flex; align-items: center; margin-top: 0.75em; font-size: 0.8em; color: #666; }
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 0.4em; }
.kg-bookmark-thumbnail { flex: 0 0 30%; background-size: cover; background-position: center; min-height: 7em; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.kg-callout-card {
    padding: 1em 1.25em;
    border-radius: 4px;
    background: #f7f3e7;
    border: 1px solid #e6dfc6;
    display: flex;
    gap: 0.75em;
}
.kg-callout-emoji { flex: 0 0 auto; }

.kg-button-card { text-align: center; }
.kg-btn {
    display: inline-block;
    padding: 0.6em 1.25em;
    background: #4444ff;
    color: #fff !important;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
}
.kg-btn:hover { background: #3333dd; text-decoration: none; }

/* --- Syntax highlighting (Python emphasis, matches the original) ----- */

.python .hljs-keyword   { color: #0001ff; }
.python .hljs-built_in  { color: #6061ff; }
.python .hljs-number    { color: #1a7469; }
.python .hljs-string    { color: #167216; }
.python .hljs-comment   { color: #0304ce; }
.python .hljs-decorator { color: #006da8; }
.python .hljs-title     { color: #cd0000; }
.python .hljs-params    { color: #ce5103; }