/*
 * tiniestblog — Brutalist Theme
 * Raw, bold, confrontational, punk.
 * No dark mode. No border-radius. Thick borders. Uppercase headings.
 *
 * Fonts loaded externally:
 *   Space Mono (everything)
 */

/* ━━━ Design Tokens ━━━ */
:root {
    --bg: #ffffff;
    --fg: #000000;
    --fg-muted: #666666;
    --border: #000000;
    --surface: #f0f0f0;
    --code-bg: #f0f0f0;
    --accent: #ff0000;
    --selection: #ff000030;

    --font-display: 'Space Mono', monospace;
    --font-body: 'Space Mono', monospace;
    --font-mono: 'Space Mono', monospace;

    --content-width: 38rem;
    --spacing: 1.5rem;

    color-scheme: light;
}

/* ━━━ Reset & Base ━━━ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--selection); }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--fg); background: var(--bg); }

/* ━━━ Layout ━━━ */
.blog-header, .blog-content, .blog-footer { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--spacing); }
.blog-content.blog-content-standard { max-width: 38rem; }
.blog-content.blog-content-wide { max-width: 48rem; }
.blog-content.blog-content-sidebar { max-width: 64rem; }
.blog-content.blog-content-longform { max-width: 42rem; }
.blog-content.blog-content-split { max-width: 48rem; }
.blog-content.blog-index-grid, .blog-content.blog-index-magazine, .blog-content.blog-index-masonry { max-width: 56rem; }
/* ━━━ Blog Header ━━━ */
.blog-header { padding-block: 3rem 2rem; border-bottom: 2px solid var(--border); margin-bottom: 3rem; }
.blog-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; }
.blog-title a { color: inherit; text-decoration: none; }
.blog-description { color: var(--fg-muted); font-size: 0.875rem; margin-top: 0.25rem; line-height: 1.5; }
.blog-nav { display: flex; gap: 1.5rem; margin-top: 1rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-nav a { color: var(--fg); text-decoration: none; font-weight: 700; transition: color 0.1s; }
.blog-nav a:hover { color: var(--accent); }

/* ━━━ Post List (Index Page) ━━━ */
.post-list { list-style: none; display: flex; flex-direction: column; gap: 2.5rem; }
.post-list-item { padding-bottom: 2.5rem; border-bottom: 2px solid var(--border); }
.post-list-item:last-child { border-bottom: none; }
.post-list-cover-link { display: block; margin-bottom: 0.75rem; }
.post-list-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; background: var(--surface); border: 2px solid var(--border); }
.post-list-date { font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; text-transform: uppercase; }
.post-list-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; margin-top: 0.375rem; text-transform: uppercase; }
.post-list-title a { color: inherit; text-decoration: none; }
.post-list-title a:hover { color: var(--accent); }
.post-list-excerpt { color: var(--fg-muted); margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.post-list-tags { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.post-list-tag { font-size: 0.75rem; color: var(--fg); border: 2px solid var(--border); padding: 0.125rem 0.5rem; border-radius: 0; text-decoration: none; text-transform: uppercase; font-weight: 700; transition: color 0.1s, background 0.1s; }
.post-list-tag:hover { color: #fff; background: var(--fg); }

/* ━━━ Reading Time ━━━ */
.post-reading-time { font-size: 0.75rem; color: var(--fg-muted); margin-left: 0.5rem; text-transform: uppercase; }
.post-list-reading-time { color: var(--fg-muted); }

/* ━━━ Single Post ━━━ */
.post-header { margin-bottom: 2.5rem; }
.post-date { font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; text-transform: uppercase; }
.post-title { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; margin-top: 0.5rem; text-transform: uppercase; }
.post-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.5rem; border-radius: 0; border: 2px solid var(--border); }

/* ━━━ Post Content (Prose) ━━━ */
.post-content { font-feature-settings: 'kern' 1, 'liga' 1; }
.post-content > * + * { margin-top: 1.5em; }
.post-content h1, .post-content h2, .post-content h3 { font-family: var(--font-display); letter-spacing: 0.02em; line-height: 1.25; text-transform: uppercase; }
.post-content h1 { font-size: 1.75rem; font-weight: 700; margin-top: 3rem; }
.post-content h2 { font-size: 1.375rem; font-weight: 700; margin-top: 2.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--border); }
.post-content h3 { font-size: 1.125rem; font-weight: 700; margin-top: 2rem; }
.post-content p { hanging-punctuation: first; }
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; font-weight: 700; }
.post-content a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.post-content a.auto-link { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; text-decoration-style: solid; font-weight: 700; }
.post-content a.auto-link:hover { background: var(--accent); color: #fff; text-decoration: none; }
.post-content strong { font-weight: 700; }
.post-content em { font-style: italic; }

/* Lists */
.post-content ul, .post-content ol { padding-left: 1.5em; }
.post-content ul { list-style-type: disc; }
.post-content ol { list-style-type: decimal; }
.post-content li + li { margin-top: 0.375em; }
.post-content li > ul, .post-content li > ol { margin-top: 0.375em; }

/* Blockquote */
.post-content blockquote { border-left: 4px solid var(--accent); padding-left: 1.25rem; font-style: italic; color: var(--fg-muted); }
.post-content blockquote strong { color: var(--fg); }

/* Code */
.post-content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--code-bg); padding: 0.125em 0.375em; border-radius: 0; border: 1px solid var(--border); }
.post-content pre { background: var(--code-bg); padding: 1.25rem 1.5rem; border-radius: 0; overflow-x: auto; font-size: 0.875rem; line-height: 1.6; border: 2px solid var(--border); }
.post-content pre code { background: none; padding: 0; font-size: inherit; border: none; }

/* Images */
.post-content img { max-width: 100%; height: auto; border-radius: 0; background: var(--surface); border: 2px solid var(--border); }
.post-content figure { margin-top: 2rem; margin-bottom: 2rem; overflow: hidden; }
.post-content figcaption { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.5rem; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }

/* Callout */
.post-content .callout { background: var(--surface); border: 2px solid var(--border); border-radius: 0; padding: 1rem 1.25rem; font-size: 0.875rem; }
.post-content .callout-icon { margin-right: 0.5rem; }

/* Divider */
.post-content hr { border: none; border-top: 2px solid var(--border); margin: 2.5rem 0; }

/* Table */
.post-content table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.post-content th, .post-content td { text-align: left; padding: 0.625rem 0.75rem; border: 1px solid var(--border); }
.post-content th { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg); background: var(--surface); }

/* To-do / Checkbox list */
.post-content .todo-list { list-style: none; padding-left: 0; }
.post-content .todo-item { display: flex; align-items: baseline; gap: 0.5rem; }
.post-content .todo-checkbox { flex-shrink: 0; width: 1em; height: 1em; border: 2px solid var(--fg); border-radius: 0; display: inline-block; }
.post-content .todo-checkbox.checked { background: var(--fg); border-color: var(--fg); }

/* Toggle / Details */
.post-content details { border: 2px solid var(--border); border-radius: 0; padding: 0.75rem 1rem; }
.post-content summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); text-transform: uppercase; }
.post-content details[open] summary { margin-bottom: 0.75rem; }

/* ━━━ Post Footer ━━━ */
.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--border); }
.post-tag { font-size: 0.75rem; color: var(--fg); border: 2px solid var(--border); padding: 0.125rem 0.5rem; border-radius: 0; text-decoration: none; text-transform: uppercase; font-weight: 700; transition: color 0.1s, background 0.1s; }
.post-tag:hover { color: #fff; background: var(--fg); }

/* ━━━ Pagination ━━━ */
.pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; margin-top: 2rem; border-top: 2px solid var(--border); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pagination a { color: var(--fg); text-decoration: none; font-weight: 700; }
.pagination a:hover { color: var(--accent); }
.pagination-disabled { color: var(--fg-muted); }

/* ━━━ Blog Footer ━━━ */
.blog-footer { padding-block: 3rem; margin-top: 3rem; border-top: 2px solid var(--border); font-size: 0.75rem; color: var(--fg-muted); display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-footer a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; font-weight: 700; }
.blog-footer a:hover { color: var(--accent); }

/* ━━━ Powered By ━━━ */
.powered-by { font-size: 0.75rem; color: var(--fg-muted); text-align: center; padding: 1rem; text-transform: uppercase; }
.powered-by a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* ━━━ Columns ━━━ */
.post-content .columns { display: flex; gap: 1.5rem; margin-top: 1.5em; margin-bottom: 1.5em; }
.post-content .column { flex: 1; min-width: 0; }
@media (max-width: 640px) { .post-content .columns { flex-direction: column; gap: 1rem; } }

/* ━━━ Table of Contents ━━━ */
.table-of-contents { border: 2px solid var(--border); border-radius: 0; padding: 1rem 1.25rem; margin: 1.5em 0; }
.table-of-contents ul { list-style: none; padding: 0; margin: 0; }
.table-of-contents li { margin: 0; }
.table-of-contents a { display: block; padding: 0.25rem 0; color: var(--fg-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.1s; text-transform: uppercase; letter-spacing: 0.02em; }
.table-of-contents a:hover { color: var(--accent); }

/* ━━━ Equation ━━━ */
.post-content .equation { display: block; text-align: center; font-family: var(--font-mono); font-size: 1.1rem; padding: 1.5rem 1rem; background: var(--surface); border-radius: 0; border: 2px solid var(--border); overflow-x: auto; }

/* ━━━ Embeds ━━━ */
.post-content .embed-wrapper { margin: 1.5em 0; }
.post-content .embed-wrapper iframe { width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--border); border-radius: 0; }
.post-content .embed-caption { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.5rem; text-align: center; text-transform: uppercase; }

/* ━━━ Index Grid Layout ━━━ */
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.index-grid-card { display: block; border: 2px solid var(--border); border-radius: 0; overflow: hidden; text-decoration: none; color: inherit; transition: background 0.1s; }
.index-grid-card:hover { background: var(--surface); }
.index-grid-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.index-grid-cover-placeholder { width: 100%; aspect-ratio: 16 / 9; background: var(--surface); }
.index-grid-body { padding: 1rem; }
.index-grid-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; text-transform: uppercase; }
.index-grid-meta { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.375rem; text-transform: uppercase; }
.index-grid-excerpt { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.5rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ━━━ Magazine Layout ━━━ */
.magazine-hero { margin-bottom: 2rem; }
.magazine-hero a { display: block; text-decoration: none; color: inherit; }
.magazine-hero-cover { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0; border: 2px solid var(--border); }
.magazine-hero-content { margin-top: 1rem; }
.magazine-hero-date { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.magazine-hero-title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; margin-top: 0.375rem; text-transform: uppercase; }
.magazine-hero-excerpt { font-size: 0.875rem; color: var(--fg-muted); margin-top: 0.5rem; line-height: 1.6; }

/* ━━━ Minimal Layout ━━━ */
.index-minimal { display: flex; flex-direction: column; }
.index-minimal-item { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.index-minimal-item:last-child { border-bottom: none; }
.index-minimal-date { font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; min-width: 3rem; flex-shrink: 0; }
.index-minimal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: inherit; text-decoration: none; text-transform: uppercase; }
.index-minimal-title:hover { color: var(--accent); }

/* ━━━ Wide Post Layout ━━━ */
.post-wide-hero { margin-bottom: 2rem; }
.post-wide-hero img { width: 100%; max-height: 60vh; object-fit: cover; border-radius: 0; }
.post-wide-content {
    max-width: 48rem;
    margin-inline: auto; max-width: 48rem; margin: 0 auto; }

/* ━━━ Sidebar Post Layout ━━━ */
.post-sidebar-layout { display: flex; gap: 3rem; }
.post-sidebar-main { flex: 1; min-width: 0; max-width: 38rem; }
.post-sidebar { width: 14rem; flex-shrink: 0; }
.post-sidebar-sticky { position: sticky; top: 2rem; }
.post-sidebar-section { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.post-sidebar-section:last-child { border-bottom: none; }
.post-sidebar-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0; font-weight: 700; }
.post-sidebar-value { font-size: 0.875rem; margin: 0.25rem 0 0; }
.post-sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }

@media (max-width: 768px) {
    .post-sidebar-layout { flex-direction: column; }
    .post-sidebar { width: 100%; order: -1; }
    .post-sidebar-sticky { position: static; }
    .post-wide-hero { margin: 0; }
}

/* ━━━ Newsletter Layout ━━━ */
.index-newsletter { display: flex; flex-direction: column; }
.newsletter-entry { padding: 2rem 0; border-bottom: 2px solid var(--border); }
.newsletter-entry:first-child { padding-top: 0; }
.newsletter-entry:last-child { border-bottom: none; }
.newsletter-entry-meta { font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.05em; }
.newsletter-entry-reading-time { color: var(--fg-muted); }
.newsletter-entry-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; margin-top: 0.375rem; text-transform: uppercase; }
.newsletter-entry-title a { color: inherit; text-decoration: none; }
.newsletter-entry-title a:hover { color: var(--accent); }
.newsletter-entry-excerpt { color: var(--fg-muted); margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; max-width: 36rem; }

/* ━━━ Masonry Layout ━━━ */
.index-masonry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; }
.masonry-card { display: block; border: 2px solid var(--border); border-radius: 0; overflow: hidden; text-decoration: none; color: inherit; transition: background 0.1s; }
.masonry-card:hover { background: var(--surface); }
.masonry-card-cover { width: 100%; height: auto; display: block; background: var(--surface); }
.masonry-card-body { padding: 1rem; }
.masonry-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; text-transform: uppercase; }
.masonry-card-meta { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.375rem; text-transform: uppercase; }
.masonry-card-excerpt { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.5rem; line-height: 1.5; }
@media (max-width: 640px) { .index-masonry { grid-template-columns: 1fr; } }

/* ━━━ Longform Post Layout ━━━ */
.post-longform { max-width: 42rem; margin-inline: auto; }
.post-longform-header { text-align: center; margin-bottom: 2rem; }
.post-longform-title { font-size: clamp(2.25rem, 6vw, 3.25rem); letter-spacing: 0.02em; text-transform: uppercase; }
.post-longform-subtitle { font-size: 1.125rem; color: var(--fg-muted); margin-top: 0.75rem; line-height: 1.5; }
.post-longform-cover { margin: 0 -2rem 2.5rem; overflow: hidden; }
.post-longform-cover img { width: 100%; height: auto; border-radius: 0; border: 2px solid var(--border); }
.post-longform-content { font-size: 1.0625rem; line-height: 1.75; }
.post-longform-content > p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.5em; float: left; line-height: 0.8; margin-right: 0.1em; margin-top: 0.05em; font-weight: 700; }

/* ━━━ Split Post Layout ━━━ */
.post-split-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.post-split-hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: 4 / 3; border: 2px solid var(--border); }
.post-split-hero-text { padding: 1rem 0; }
.post-split-subtitle { font-size: 0.875rem; color: var(--fg-muted); margin-top: 0.75rem; line-height: 1.6; }
@media (max-width: 768px) {
    .post-split-hero { grid-template-columns: 1fr; }
    .post-longform-cover { margin: 0 0 2rem; }
}

/* ━━━ Responsive ━━━ */
@media (max-width: 640px) {
    body { font-size: 0.875rem; }
    .blog-header { padding-block: 2rem 1.5rem; margin-bottom: 2rem; }
    .post-title { font-size: 1.5rem; }
    .post-list-title { font-size: 1.25rem; }
    .blog-footer { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ━━━ Print ━━━ */
@media print {
    body { font-size: 12pt; color: #000; background: #fff; }
    .blog-nav, .pagination, .powered-by, .blog-footer { display: none; }
    .post-content a::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #666; }
}