/*
Theme Name: AJB Minimal
Theme URI: https://alexjamesbrown.com
Author: Alex James Brown
Description: Ultra-minimal blog theme inspired by robdodson.me
Version: 1.16.0
Text Domain: ajb-minimal
*/

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #ffffff;
    --text: #111111;
    --text-muted: #555555;
    /* Dracula's cyan and green, darkened: both are pale enough that the
       originals are barely legible on white. */
    --link: #0e7490;
    --link-hover: #15803d;
    --border: #e5e5e5;
    --code-bg: #f5f5f5;
    --switch-track: #d6d6d6;
    --switch-track-hover: #c4c4c4;
    --switch-thumb: #ffffff;
    --switch-icon: #555555;
    --title-accent: #6b7079;
    --max-width: 1200px;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    /* Post body only. Lora is a display-leaning serif: fine hairlines and high
       stroke contrast, which reads thin at 22px. Literata was drawn for
       long-form screen reading (it is the Google Play Books face), so it holds
       a darker, steadier line at the same size while staying in the same warm
       editorial register as the Lora headings above it. */
    --font-reading: 'Literata', Georgia, 'Times New Roman', serif;
}

/* Pitched to sit with the Dracula code blocks rather than against them.
   Dracula's background is #282a36, a blue-leaning near-black, so the previous
   neutral #1a1a1a read as a colour clash beside it. Everything here is drawn
   from the same hue family (roughly 230 degrees), with the page set a few steps
   darker than #282a36 so a code block reads as a raised surface on top of it
   instead of a patch of a different colour. Accents are Dracula's own values. */
[data-theme="dark"] {
    --bg: #1e1f29;
    --text: #f0f0ea;
    --text-muted: #8a90ab;
    --link: #8be9fd;            /* Dracula cyan */
    --link-hover: #50fa7b;      /* Dracula green */
    --border: #343746;
    --code-bg: #282a36;         /* Dracula background: inline code matches blocks */
    --switch-track: #44475a;    /* Dracula selection */
    --switch-track-hover: #565b75;
    --switch-thumb: #21222c;
    --switch-icon: #f8f8f2;     /* Dracula foreground */
    --title-accent: #9aa0b5;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Layout */
.site-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
    flex: 1;
}

/* Header */
.site-header {
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.site-title {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.site-title a {
    color: var(--text);
    text-decoration: none;
}

/* With the words run together, alternate words are toned down so the name is
   still legible as three words. A tone rather than a hue: colour here competed
   with the Dracula code blocks further down the page. */
.site-title-word-accent {
    color: var(--title-accent);
}

.site-title-word {
    transition: color 0.15s ease;
}

.site-title a:hover .site-title-word {
    color: var(--text);
}

.site-title a:hover {
    opacity: 0.7;
}

/* Navigation */
.site-nav {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
}

/* Mono sets the nav apart from both the Lora site title above it and the
   Source Sans body below, so it reads as chrome rather than content. */
.site-nav a {
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    transition: color 0.15s ease;
}

.site-nav a:hover {
    color: var(--link-hover);
}

.site-nav a.active {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Theme switch */
.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    line-height: 0;
    border-radius: 999px;
    cursor: pointer;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
}

.theme-switch {
    display: block;
    position: relative;
    width: 3.25rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--switch-track);
    transition: background 0.2s ease;
}

.theme-toggle:hover .theme-switch {
    background: var(--switch-track-hover);
}

.theme-switch-thumb {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--switch-thumb);
    color: var(--switch-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* 52px track - 22px thumb - 3px of inset either side leaves 24px of travel */
[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(1.5rem);
}

.theme-switch-icon {
    display: none;
    width: 0.8125rem;
    height: 0.8125rem;
}

.icon-sun {
    display: block;
}

[data-theme="dark"] .icon-sun {
    display: none;
}

[data-theme="dark"] .icon-moon {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .theme-switch,
    .theme-switch-thumb {
        transition: none;
    }
}

/* Blog Layout with Sidebar */
.blog-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 5rem;
}

.blog-content {
    min-width: 0;
}

/* Sidebar */
.blog-sidebar {
    padding-top: 0.5rem;
}

.sidebar-section {
    margin-bottom: 2.5rem;
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.category-list {
    list-style: none;
}

/* No rule between rows. A line per category turned a short list into a ledger;
   the spacing alone is enough to separate them. */
.category-item {
    border-bottom: none;
}

.category-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.category-item a:hover {
    color: var(--link-hover);
}

.category-item.active a {
    color: var(--link);
    font-weight: 600;
}

.category-name {
    font-size: 0.95rem;
}

.category-count {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Tag Cloud */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    /* Fully rounded ends: large enough that the radius always resolves to a
       half-height cap whatever the pill's height works out to. */
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.tag-pill:hover {
    border-color: var(--text-muted);
    background: var(--code-bg);
    color: var(--link-hover);
}

.tag-pill.active {
    border-color: var(--link);
    color: var(--link);
    font-weight: 600;
}

/* Responsive sidebar */
@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Stacked below the posts: leading with categories and tags would push the
       post list off the first screen. */
    .blog-sidebar {
        border-top: 1px solid var(--border);
        padding-top: 2rem;
    }
}

/* Post List (Homepage) */
.post-list {
    list-style: none;
}

.post-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2.5rem;
}

.post-link {
    font-family: var(--font-heading);
    color: var(--text);
    text-decoration: none;

    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

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

.post-date {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Homepage post sample */
.home-posts {
    margin-top: 4rem;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
    border-top: 1px solid var(--border);
}

/* Mono, matching the nav: this is a section label, not content. */
.home-posts-title {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

/* Tighter than the blog listing, where the post list is the whole page */
.home-posts .post-list-item {
    margin-bottom: 1.5rem;
}

.home-posts .post-link {
    font-size: 1.25rem;
}

.home-posts-more {
    margin-top: 1rem;
}

/* Single Post / Page */

/* These templates have no sidebar. The measure is still capped for readability,
   but the column stays flush left so the text lines up with the site title and
   nav above it rather than floating in the middle of the wrapper. */
.entry {
    max-width: 64rem;
}

.entry-header {
    margin-bottom: 2rem;
}

.entry-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.entry-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.entry-content {
    font-family: var(--font-reading);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.78;
    color: var(--text);
}

@media (min-width: 768px) {
    .entry-content {
        font-size: 1.25rem;
        line-height: 1.8;
    }
}

@media (min-width: 1024px) {
    .entry-content {
        font-size: 1.375rem;
        line-height: 1.67;
    }
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content h2 {
    font-family: var(--font-heading);
    font-size: 2.19rem;
    font-weight: 600;
    margin: 2.5rem 0 1rem;
}

.entry-content h3 {
    font-family: var(--font-heading);
    font-size: 1.72rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
}

.entry-content a {
    color: var(--link);

}

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

.entry-content ul,
.entry-content ol {
    margin: 0 0 1.5rem 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content blockquote {
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-style: italic;
}

.entry-content pre {
    background: var(--code-bg);
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
}

.entry-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--code-bg);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    /* Without this, a wrapped inline code span loses its padding and rounding
       across the break, which is very visible inside a narrow table cell. */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    overflow-wrap: break-word;
}

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

.entry-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.entry-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* Code blocks
   Dracula palette, same as robdodson.me. Deliberately dark in both site themes:
   a code block reads as a distinct surface rather than part of the page, and
   the token colours were designed against this background. */
.code-block {
    --dracula-bg: #282a36;
    --dracula-fg: #f8f8f2;
    --dracula-comment: #6272a4;
    --dracula-cyan: #8be9fd;
    --dracula-green: #50fa7b;
    --dracula-orange: #ffb86c;
    --dracula-pink: #ff79c6;
    --dracula-purple: #bd93f9;
    --dracula-red: #ff5555;
    --dracula-yellow: #f1fa8c;
}

.entry-content pre.code-block {
    background: var(--dracula-bg);
    color: var(--dracula-fg);
    padding: 1.15rem 1.25rem;
    border-radius: 8px;
    margin: 2rem 0;
    /* Lines wrap (see below), so this only ever engages for content that cannot
       be broken at all, such as a wide preformatted table or ASCII diagram. */
    overflow-x: auto;
    font-size: 0.9375rem;
    line-height: 1.6;
    tab-size: 4;
}

.entry-content pre.code-block code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-family: var(--font-mono);
    font-size: inherit;

    /* Long lines wrap rather than scrolling sideways. A horizontal scrollbar
       hides the end of the line until the reader thinks to drag it, which on a
       blog post is usually the part that matters. break-word covers the case
       wrapping cannot help with on its own: a single unbroken token, such as a
       long URL or connection string, wider than the block. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Scrollbar on the block itself, so a wide line does not push the page sideways */
.entry-content pre.code-block::-webkit-scrollbar {
    height: 10px;
}

.entry-content pre.code-block::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 8px 8px;
}

.entry-content pre.code-block::-webkit-scrollbar-thumb {
    background: var(--dracula-comment);
    border-radius: 5px;
}

/* One block per logical line, so a wrapped continuation can be pulled in under
   the line it belongs to instead of starting at column 0 and reading as a new
   statement. Set up by code-lines.js. */
.code-block .code-line {
    display: block;
    padding-left: 2.5em;
    text-indent: -2.5em;
}

/* Blank lines still need to occupy a row */
.code-block .code-line:empty::before {
    content: " ";
}

/* Prism tokens */
.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.cdata {
    color: var(--dracula-comment);
}

.code-block .token.punctuation {
    color: var(--dracula-fg);
}

.code-block .token.keyword,
.code-block .token.tag,
.code-block .token.selector,
.code-block .token.important,
.code-block .token.atrule {
    color: var(--dracula-pink);
}

.code-block .token.string,
.code-block .token.char,
.code-block .token.attr-value,
.code-block .token.regex {
    color: var(--dracula-yellow);
}

.code-block .token.function,
.code-block .token.attr-name {
    color: var(--dracula-green);
}

.code-block .token.class-name,
.code-block .token.builtin,
.code-block .token.namespace {
    color: var(--dracula-cyan);
}

.code-block .token.number,
.code-block .token.boolean,
.code-block .token.constant,
.code-block .token.symbol {
    color: var(--dracula-purple);
}

.code-block .token.operator,
.code-block .token.entity,
.code-block .token.url {
    color: var(--dracula-cyan);
}

.code-block .token.property,
.code-block .token.variable {
    color: var(--dracula-orange);
}

.code-block .token.deleted {
    color: var(--dracula-red);
}

.code-block .token.inserted {
    color: var(--dracula-green);
}

.code-block .token.bold {
    font-weight: 700;
}

.code-block .token.italic {
    font-style: italic;
}

/* Tables
   Two kinds show up in this archive and they want opposite treatment. A table
   with a <th> is data, and gets rules and a header. A table without one is the
   old "table as layout" trick, images sat beside text, where borders and row
   rules would be actively wrong. :has() separates them; where it is
   unsupported everything falls back to the shared base below, which is
   harmless either way. */
.entry-content .table-scroll {
    overflow-x: auto;
    margin: 2rem 0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    /* Beats the legacy border/cellpadding/width attributes still sitting on
       tables written in the old editor. */
    border: none;
    font-size: 0.9em;
    line-height: 1.6;
}

.entry-content th,
.entry-content td {
    text-align: left;
    vertical-align: top;
}

.entry-content table img {
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* Data tables */
.entry-content table:has(th) th,
.entry-content table:has(th) td {
    padding: 0.7rem 1.25rem 0.7rem 0;
    border-bottom: 1px solid var(--border);
}

.entry-content table:has(th) th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    /* A touch stronger than the row rules, so the header reads as a header
       without needing a fill behind it. */
    border-bottom-color: var(--text-muted);
}

.entry-content table:has(th) tr:last-child td {
    border-bottom: none;
}

/* Layout tables: no furniture, just spacing */
.entry-content table:not(:has(th)) td {
    padding: 0 1.25rem 1rem 0;
}

@media (max-width: 600px) {
    .entry-content table:not(:has(th)),
    .entry-content table:not(:has(th)) tbody,
    .entry-content table:not(:has(th)) tr,
    .entry-content table:not(:has(th)) td {
        display: block;
        width: auto;
    }

    .entry-content table:not(:has(th)) td {
        padding-right: 0;
    }
}

/* Entry Tags */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Linktree Contact Page */
.linktree {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.linktree-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

.linktree-intro {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.linktree-intro p {
    margin-bottom: 0.75rem;
}

.linktree-intro a {
    color: var(--link);
}

.linktree-intro a:hover {
    color: var(--link-hover);
}

.linktree-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.linktree-link:hover {
    border-color: var(--text-muted);
    background: var(--code-bg);
}

.linktree-link:last-of-type {
    margin-bottom: 3rem;
}

.linktree-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Comments
   Disqus replaces all of this when active. These rules are for the native
   fallback, and for the Disqus container itself, which the plugin drops in as
   #disqus_thread with no styling of its own. */
.comments,
#disqus_thread {
    max-width: 44rem;
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

.comments-title {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

.comment-list,
.comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list .children {
    /* Replies indent, but only once: nesting several levels deep on a 44rem
       column leaves no room for the reply itself. */
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
}

.comment-list li.comment {
    margin-bottom: 2rem;
}

.comment-body {
    font-size: 0.95rem;
    line-height: 1.7;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.comment-author .fn {
    font-weight: 600;
    font-style: normal;
}

.comment-author img.avatar {
    border-radius: 50%;
    margin-right: 0.6rem;
    vertical-align: middle;
}

.comment-metadata,
.comment-metadata a {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
}

.comment-metadata a:hover {
    color: var(--link-hover);
}

.comment-content p {
    margin-bottom: 0.9rem;
}

.comment-reply-link {
    font-size: 0.8rem;
    color: var(--link);
    text-decoration: none;
}

.comment-reply-link:hover {
    color: var(--link-hover);
}

.comments-closed {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Comment form */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.comment-form label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--link);
}

.comment-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.comment-form .form-submit {
    margin: 0;
}

.comment-form input[type="submit"] {
    cursor: pointer;
    background: none;
    font-family: var(--font-sans);
}

.comment-notes,
.comment-form-cookies-consent label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-sans);
}

/* Post Navigation */
.post-nav {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

.post-nav a {
    color: var(--link);
    text-decoration: none;
}

.post-nav a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Footer */
.site-footer {
    margin-top: auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Blurb takes the space it needs, link groups sit at their natural width on the
   right. Wraps to a stack rather than squeezing the columns. */
.footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-about {
    flex: 1 1 20rem;
    max-width: 32rem;
}

.footer-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    text-transform: lowercase;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.footer-blurb {
    line-height: 1.7;
    max-width: 34ch;
}

.footer-nav {
    display: flex;
    gap: 4rem;
}

/* Mono, matching the nav and the homepage section label */
.footer-nav-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.9rem;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Sized off the label so the icons track the text, and dimmed a step so they
   read as marks beside the link rather than competing with it. */
.footer-icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.footer-nav a:hover .footer-icon {
    opacity: 1;
}

.footer-nav a:hover {
    color: var(--link-hover);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
}

.footer-colophon {
    color: var(--text-muted);
    opacity: 0.75;
}

@media (max-width: 600px) {
    .footer-nav {
        gap: 3rem;
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pagination-link:hover {
    border-color: var(--text-muted);
    background: var(--code-bg);
    color: var(--link-hover);
}

/* Keeps "Older" right-aligned on the first page, where it is the only link */
.pagination-next {
    margin-left: auto;
}

.pagination-arrow {
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.pagination-link:hover .pagination-arrow {
    color: var(--link-hover);
}

/* Responsive */
@media (max-width: 480px) {
    .post-list-item {
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 1.25rem;
    }

    .post-date {
        width: auto;
    }

    .entry-title {
        font-size: 1.5rem;
    }
}