/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

/* -------------------------------------------------------------------------
   Theme palette
   -------------------------------------------------------------------------
   Default = light, after the Ghost (Casper) theme the site used before,
   with accents from the logo: lime for highlights, blue for links. The
   light palette uses darker shades of both, since the logo's own are too
   pale to read on white. The dark palette kicks in either when the OS
   prefers dark mode (@media prefers-color-scheme), or when the user
   manually toggles the in-page <input id="theme-toggle"> (see further
   below). Both rules write to the same CSS custom properties, so every
   rule that references var(--color-*) updates automatically.

   The home page hero and the footer stay dark in both themes: the logo is
   drawn for a dark background (its lettering is gray).
   ------------------------------------------------------------------------- */
:root {
    --color-background: #ffffff;
    --color-text: #303a3e;
    --color-heading: #15171a;
    --color-text-light: #66757c;
    --color-border: #e5eff5;
    --color-surface: #f4f8fb;
    --color-accent: #6f7310;
    --color-link: #167199;
    --color-link-hover: #6f7310;

    --color-dark: #0a0b0c;
    --color-on-dark: #ffffff;
    --color-on-dark-dim: rgba(255, 255, 255, 0.7);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --font-mono: "SF Mono", "Fira Code", Menlo, Consolas, "Courier New", monospace;
}

/* Dark — applied when the OS prefers dark mode. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #1a1c20;
        --color-text: #c4c6c8;
        --color-heading: #ffffff;
        --color-text-light: #8e9aa0;
        --color-border: #2c3036;
        --color-surface: #23262b;
        --color-accent: #cbcf2f;
        --color-link: #76c7e4;
        --color-link-hover: #cbcf2f;
    }
}

/* Manual override: flip to the OPPOSITE of the current system preference.
   Two selectors so both code paths work:
     - html.theme-toggled  → set by a small inline script that mirrors the
       checkbox to localStorage so the choice persists across pages.
     - body:has(#theme-toggle:checked) → pure-CSS fallback when JS is
       disabled (Chromium 105+, Firefox 121+, Safari 15.4+). No
       persistence, but the toggle still works on the current page. */
html.theme-toggled,
body:has(#theme-toggle:checked) {
    --color-background: #1a1c20;
    --color-text: #c4c6c8;
    --color-heading: #ffffff;
    --color-text-light: #8e9aa0;
    --color-border: #2c3036;
    --color-surface: #23262b;
    --color-accent: #cbcf2f;
    --color-link: #76c7e4;
    --color-link-hover: #cbcf2f;
}

@media (prefers-color-scheme: dark) {
    html.theme-toggled,
    body:has(#theme-toggle:checked) {
        --color-background: #ffffff;
        --color-text: #303a3e;
        --color-heading: #15171a;
        --color-text-light: #66757c;
        --color-border: #e5eff5;
        --color-surface: #f4f8fb;
        --color-accent: #6f7310;
        --color-link: #167199;
        --color-link-hover: #6f7310;
    }
}

/* html carries the page background so the toggled palette (set on html by
   the script) paints the whole viewport, not just the body box. */
html.theme-toggled {
    background: var(--color-background);
}

/* Theme toggle widget — checkbox is visually hidden but remains focusable.
   The label in the nav shows a sun or moon depending on the current
   effective theme. Clicking the label toggles the checkbox. */
#theme-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.theme-toggle {
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    user-select: none;
}

/* Light mode default: show moon (click to go dark). */
.theme-toggle::before { content: "🌙"; }

/* OS dark: show sun (click to go light). */
@media (prefers-color-scheme: dark) {
    .theme-toggle::before { content: "🌞"; }
}

/* When toggled on, flip the icon to match the new effective theme.
   Same two-selector pattern as the palette overrides above. */
html.theme-toggled .theme-toggle::before,
body:has(#theme-toggle:checked) .theme-toggle::before { content: "🌞"; }
@media (prefers-color-scheme: dark) {
    html.theme-toggled .theme-toggle::before,
    body:has(#theme-toggle:checked) .theme-toggle::before { content: "🌙"; }
}

/* Keyboard focus ring on the label when the hidden checkbox is focused. */
#theme-toggle:focus-visible + .theme-toggle {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--color-heading);
    text-decoration: none;
}

/* Container */
.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 5vw;
    box-sizing: content-box;
}

/* -------------------------------------------------------------------------
   Home page hero: the cover image filling the first screen, with the logo
   and tagline centered on it.
   ------------------------------------------------------------------------- */
.site-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--color-on-dark);
    background: var(--color-dark) url("/img/blog-cover.jpg") no-repeat center / cover;
}

.site-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
}

.hero-nav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(1040px + 10vw);
    height: 64px;
}

.hero-nav a {
    display: inline-flex;
    color: var(--color-on-dark-dim);
    transition: color 0.2s ease;
}

.hero-nav a:hover {
    color: var(--color-on-dark);
}

.hero-nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.hero-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0 5vw 64px;
    text-align: center;
}

.hero-title {
    line-height: 0;
}

.hero-logo {
    /* 30vh tall, kept between 200px and the image's own 275px as on the
       old site, but sized by width so it scales down, unsquashed, on a
       screen too narrow for it. */
    width: calc(clamp(200px, 30vh, 275px) * 600 / 275);
    max-width: 100%;
    height: auto;
}

.hero-description {
    font-size: 21px;
    line-height: 1.4;
    opacity: 0.8;
}

/* -------------------------------------------------------------------------
   Header on every other page: the logo's triangles and the site name.
   ------------------------------------------------------------------------- */
.site-header {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 40px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    white-space: nowrap;
}

.site-brand img {
    width: 36px;
    height: 36px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-nav a {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
    transition: color 0.2s ease;
}

.main-nav a:hover,
.site-brand:hover {
    color: var(--color-accent);
}

/* Main Content */
.site-main {
    flex: 1;
    padding-bottom: 56px;
}

.site-hero + .site-main {
    padding-top: 56px;
}

.section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

/* Post feed — one compact row per post: date, title, read time. */
.feed-item {
    border-bottom: 1px solid var(--color-border);
}

.feed-item:last-child {
    border-bottom: none;
}

.feed-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    color: var(--color-text);
}

.feed-date {
    display: flex;
    gap: 4px;
    min-width: 96px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-accent);
}

.feed-month {
    text-transform: uppercase;
}

.feed-year {
    color: var(--color-text-light);
    font-weight: 600;
}

.feed-title {
    flex-grow: 1;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-heading);
}

.feed-link:hover .feed-title {
    color: var(--color-accent);
}

.feed-length {
    font-size: 14px;
    color: var(--color-text-light);
    white-space: nowrap;
}

.feed-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-light);
    transition: transform 0.2s ease, color 0.2s ease;
}

.feed-link:hover .feed-icon {
    color: var(--color-accent);
    transform: translateX(3px);
}

.archive-link {
    margin-top: 40px;
    font-size: 15px;
}

.archive-link a {
    color: var(--color-text-light);
}

.archive-link a:hover {
    color: var(--color-accent);
}

/* Page Title (tags, authors, archive, 404) */
.page-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-heading);
    margin-bottom: 40px;
}

/* Individual Post */
.post-header {
    max-width: 920px;
    margin: 16px auto 48px;
    text-align: center;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

.post-header .post-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-heading);
    word-break: break-word;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.tag:hover {
    background: var(--color-accent);
    color: var(--color-background);
}

.post-archive-notice {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 16px 0;
    text-align: center;
    font-style: italic;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Post body: a 720px reading column. */
.post-content {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    word-break: break-word;
}

.post-content > * + * {
    margin-top: 28px;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    color: var(--color-heading);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.post-content > h2,
.post-content > h3,
.post-content > h4 {
    margin-top: 48px;
}

.post-content h2 { font-size: 28px; font-weight: 800; }
.post-content h3 { font-size: 24px; font-weight: 700; }
.post-content h4 { font-size: 20px; font-weight: 700; }

.post-content a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.post-content a:hover {
    color: var(--color-link-hover);
}

.post-content ul,
.post-content ol {
    padding-left: 28px;
}

.post-content li + li {
    margin-top: 8px;
}

.post-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 20px;
    font-style: italic;
}

.post-content code {
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.post-content pre {
    background: var(--color-surface);
    padding: 20px;
    border-radius: 5px;
    overflow-x: auto;
    line-height: 1.4;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.post-content th,
.post-content td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

/* Figures: images with captions. */
.post-content figure {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.post-content > figure,
.post-content > img {
    margin-top: 40px;
    margin-bottom: 40px;
}

.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.post-content figcaption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Callout: <aside class="callout"><span class="callout-emoji">💡</span>
   <div class="callout-text">…</div></aside> */
.callout {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: var(--color-surface);
    border-radius: 6px;
    font-size: 17px;
    line-height: 1.6;
}

.callout-emoji {
    flex-shrink: 0;
    line-height: 1.6;
}

/* Tags Cloud */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag-cloud-item {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-surface);
    border-radius: 5px;
    transition: all 0.2s ease;
}

.tag-cloud-item:hover {
    background: var(--color-accent);
    color: var(--color-background);
}

.tag-count {
    color: var(--color-text-light);
    font-size: 14px;
}

.tag-cloud-item:hover .tag-count {
    color: inherit;
}

/* Plain pages (404): same reading column as posts. */
.page-content {
    max-width: 720px;
    margin: 0 auto;
}

.page-content .page-title {
    text-align: center;
}

/* Post footer: author and Markdown copy. */
.post-footer {
    max-width: 720px;
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-text-light);
}

.post-footer a {
    color: var(--color-heading);
    font-weight: 600;
}

.post-footer a:hover {
    color: var(--color-accent);
}

/* Footer: dark in both themes, as in the old theme. */
.site-footer {
    padding: 24px 0 56px;
    color: var(--color-on-dark-dim);
    background: var(--color-dark);
    font-size: 13px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--color-on-dark-dim);
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--color-on-dark);
}

.footer-nav {
    display: flex;
    gap: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .site-header {
        padding: 20px 0;
        margin-bottom: 24px;
    }

    .header-content {
        flex-direction: column;
        gap: 12px;
    }

    .hero-description {
        font-size: 18px;
    }

    .feed-link {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .feed-date {
        min-width: 0;
        width: 100%;
    }

    .feed-title {
        flex-basis: calc(100% - 30px);
    }

    .feed-length {
        order: 3;
    }

    .feed-icon {
        display: none;
    }

    .post-header .post-title {
        font-size: 30px;
    }

    .page-title {
        font-size: 28px;
    }

    .post-content {
        font-size: 17px;
    }

    .post-content h2 { font-size: 24px; }
    .post-content h3 { font-size: 21px; }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: #000;
    }

    .site-header,
    .site-footer,
    .post-footer,
    .hero-nav,
    .tag {
        display: none;
    }

    .site-hero {
        min-height: 0;
        padding: 40px 0;
    }

    .post-content a {
        color: #0066cc;
    }

    .post-content pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}