/* ============================================
   PALETTE: WARM STONE
   ============================================ */

/* ============================================
   TYPOGRAPHY
   ============================================ */

:root {
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-reading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'DM Mono', monospace;
    --font-reading-size: 1.1875rem;
    --font-reading-line-height: 2rem;
    --font-reading-weight: 350;
}

body {
    font-family: var(--font-ui);
    font-weight: var(--font-reading-weight);
}

/* Serif body text for prose / article content */
.prose {
    font-family: var(--font-reading);
    font-size: var(--font-reading-size);
    line-height: var(--font-reading-line-height);
    font-weight: var(--font-reading-weight);
    color: var(--color-text);
    font-feature-settings: "pnum" on, "lnum" on, "liga" on;
}

.prose h2 {
    font-family: var(--font-reading);
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    color: var(--color-text);
}

.prose h3 {
    font-family: var(--font-reading);
    font-size: 1.375rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.625rem;
    line-height: 1.35;
    color: var(--color-text);
}

.prose h4 {
    font-family: var(--font-reading);
    font-size: 1.1875rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.prose p {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.prose ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose ul li {
    margin-bottom: 0.75rem;
    line-height: 1.75;
}

.prose ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose ol li {
    margin-bottom: 0.75rem;
    line-height: 1.75;
}

.prose code {
    font-family: var(--font-mono);
    background-color: var(--color-card);
    color: var(--color-accent);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.prose pre {
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
}

.prose pre code {
    border: none;
    padding: 0;
    background: none;
}

.prose strong {
    color: var(--color-text);
    font-weight: 600;
}

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

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.prose th {
    font-family: var(--font-ui);
    background-color: var(--color-card);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
}

.prose td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.prose tr:hover td {
    background-color: var(--color-surface);
}

.prose figure {
    margin: 2rem auto;
}

.prose figure img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
}

.prose figcaption {
    font-family: var(--font-reading);
    font-style: italic;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-faint);
    margin-top: 0.75rem;
    line-height: 1.4;
}

.prose hr {
    border-color: var(--color-border);
    margin: 3rem 0;
}

.prose img {
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
}

.prose a {
    color: #8a6a4a;
    text-decoration: none;
}

.prose a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
}

/* UI elements stay sans-serif */
nav, footer, .tags, [class*="tag"] {
    font-family: var(--font-ui);
}

/* Text selection highlight */
::selection {
    background: rgba(200, 140, 60, 0.22);
    color: var(--color-text);
}
::-moz-selection {
    background: rgba(200, 140, 60, 0.22);
    color: var(--color-text);
}
[data-theme="dark"] ::selection {
    background: rgba(160, 158, 150, 0.35);
    color: var(--color-text);
}
[data-theme="dark"] ::-moz-selection {
    background: rgba(160, 158, 150, 0.35);
    color: var(--color-text);
}

/* Code block override for light mode readability */
.prose pre code.hljs {
    background: var(--color-card) !important;
    color: var(--color-text) !important;
}

/* Keep BibTeX/code tokens monochrome for readability */
.prose pre code.hljs * {
    color: var(--color-text) !important;
}

/* Page headings use serif */
h1 {
    font-family: var(--font-reading);
}

/* Section headings on listing pages */
main > section > h2,
main > h1 {
    font-family: var(--font-reading);
}

/* Serif headings in main content areas */
main h3,
main h4 {
    font-family: var(--font-reading);
}

/* Apply serif body style to non-prose main content pages (except text-sm card previews) */
main p:not(.text-sm),
main li {
    font-family: var(--font-reading);
    font-size: var(--font-reading-size);
    line-height: var(--font-reading-line-height);
    font-weight: var(--font-reading-weight);
}

/* Works metadata rows (Repository / Platform / Stack) */
main dt,
main dd {
    font-family: var(--font-reading);
    font-size: var(--font-reading-size);
    line-height: var(--font-reading-line-height);
}

main dt {
    font-weight: 700;
}

main dd {
    font-weight: var(--font-reading-weight);
    font-size: 1.05rem;
    line-height: 1.6rem;
}

main dd a {
    font-family: inherit;
}

/* Keep card copy typography consistent */
main a.bg-theme-card h3,
main a.bg-theme-card p,
main a.bg-theme-card > div > span.text-sm {
    font-family: var(--font-reading);
}

/* Bio timeline */
.bio-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bio-entry {
    font-family: var(--font-reading);
    font-size: var(--font-reading-size);
    line-height: 1.75rem;
    font-weight: var(--font-reading-weight);
}

.bio-year {
    font-family: var(--font-reading);
    font-size: var(--font-reading-size);
    line-height: 1.75rem;
    font-weight: 700;
}

/* ============================================
   POST HEADER: vertical rule accent style
   ============================================ */

.post-header-ruled {
    border-left: 3px solid var(--color-text);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

/* Lead paragraph — larger opening sentence */
.prose .lead {
    font-size: 1.25rem;
    line-height: 1.85rem;
    font-weight: 350;
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .post-header-ruled {
        padding-left: 1rem;
    }
    .prose .lead {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* Reference section styling on posts */
.post-references {
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.post-references h2 {
    font-family: var(--font-reading);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.post-references ol {
    margin-left: 1.5rem;
}

.post-references li {
    font-family: var(--font-reading);
    font-size: 1.05rem;
    line-height: 1.6rem;
    color: var(--color-text-secondary);
}

.post-references li + li {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--color-border);
}

/* Citation card heading alignment */
.post-citation h2 {
    font-family: var(--font-reading);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Citation / BibTeX block readability */
.citation-bibtex {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.citation-bibtex code,
.citation-bibtex code *,
.prose .citation-bibtex code.hljs,
.prose .citation-bibtex code.hljs * {
    color: var(--color-text-muted) !important;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Light mode (default) */
:root,
[data-theme="light"] {
    --color-bg: #f5f4f0;
    --color-card: #eceae3;
    --color-text: #111110;
    --color-text-secondary: #1e1e1c;
    --color-text-muted: #444440;
    --color-text-faint: #8a8980;
    --color-accent: #2a2a28;
    --color-accent-hover: #1c1c1a;
    --color-border: #d2d0c6;
    --color-border-light: #e2e0d6;
    --color-surface: #eceae3;
    --color-highlight: rgba(42, 42, 40, 0.08);
}

/* Dark mode */
[data-theme="dark"] {
    --color-bg: #2e2d2b;
    --color-card: #1f1e1d;
    --color-text: #faf9f6;
    --color-text-secondary: #e8e7e1;
    --color-text-muted: #b0afa8;
    --color-text-faint: #5c5b57;
    --color-accent: #dddcd6;
    --color-accent-hover: #efeee9;
    --color-border: #393936;
    --color-border-light: #2c2c2a;
    --color-surface: #201f1e;
    --color-highlight: rgba(221, 220, 214, 0.1);
}

/* Toggle icon visibility */
[data-theme="dark"] .prose a {
    color: #c49a6c;
}

[data-theme="dark"] .prose figcaption {
    color: #95948e;
}

[data-theme="dark"] .prose .citation-bibtex code.hljs,
[data-theme="dark"] .prose .citation-bibtex code.hljs * {
    color: var(--color-text-secondary) !important;
}

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

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

[data-theme="light"] .icon-sun,
:root:not([data-theme]) .icon-sun {
    display: none;
}

[data-theme="light"] .icon-moon,
:root:not([data-theme]) .icon-moon {
    display: block;
}

/* Active nav indicator (scoped to nav links, not the site name) */
nav .flex.gap-6 a.text-theme-accent {
    position: relative;
}

nav .flex.gap-6 a.text-theme-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 1px;
}

/* Smooth transitions */
body,
nav,
footer,
main,
article {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 768px) {
    :root {
        --font-reading-weight: 450;
    }
}