/* ========================================
   DESIGN SYSTEM - CSS Custom Properties
   "The Quiet Study" Identity
   ======================================== */
:root {
    /* Color Palette - Warm, aged paper tones */
    --color-bg-primary: #FAF8F5;
    --color-bg-secondary: #F5F1EB;
    --color-bg-tertiary: #EDE7DD;
    --color-paper: #FBF9F6;

    /* Text Colors - Slightly warmer blacks */
    --color-text-primary: #2C2416;
    --color-text-secondary: #4A4235;
    --color-text-muted: #6B6358;
    --color-text-light: #8A8278;

    /* Accent Colors - Warm Personal Touch */
    --color-accent: #5C2E0B;
    --color-accent-light: #8B5A2B;
    --color-accent-hover: #7A3D0F;

    /* Data Visualization Colors */
    --color-data-1: #2E5A3A;
    --color-data-2: #5B8A5F;
    --color-data-3: #8CB892;
    --color-data-4: #D4A574;
    --color-data-5: #E8C9A0;

    /* Category Colors */
    --color-category-energy: #2E5A3A;
    --color-category-tech: #5C2E0B;
    --color-category-sports: #B8860B;
    --color-category-books: #6B5344;

    /* Utility Colors */
    --color-border: rgba(44, 36, 22, 0.1);
    --color-border-strong: rgba(44, 36, 22, 0.18);
    --color-shadow: rgba(44, 36, 22, 0.06);
    --color-rule: rgba(44, 36, 22, 0.08);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Serif Pro', Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-accent: 'Caveat', cursive;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Layout */
    --max-width: 1200px;
    --max-width-narrow: 900px;
    --container-padding: 1.5rem;

    /* Borders & Shadows - Softer, more rounded */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(44, 36, 22, 0.06);
    --shadow-md: 0 4px 8px rgba(44, 36, 22, 0.06);
    --shadow-lg: 0 10px 20px rgba(44, 36, 22, 0.08);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ========================================
   PAPER TEXTURE & BACKGROUND
   ======================================== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background:
        /* Subtle paper grain */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
}

/* ========================================
   RESET & BASE
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
    /* Scale down from default 16px for less "zoomed in" feel */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul,
ol {
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

h1 {
    font-size: var(--text-4xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

p {
    margin: 0 0 1.5rem 0;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--text-sm);
}

/* Handwritten accent style */
.handwritten {
    font-family: var(--font-accent);
    font-size: 1.3em;
    color: var(--color-text-secondary);
}

/* Section ornament divider */
.section-ornament {
    text-align: center;
    margin: var(--space-8) 0;
    color: var(--color-text-light);
    font-size: var(--text-lg);
    letter-spacing: 0.5em;
}

.section-ornament::before {
    content: '~ * ~';
}

/* Simple horizontal rule with ornament */
hr.ornament {
    border: none;
    text-align: center;
    margin: var(--space-8) 0;
    height: auto;
}

hr.ornament::before {
    content: '***';
    color: var(--color-text-light);
    letter-spacing: 0.5em;
    font-size: var(--text-sm);
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-narrow {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-16) 0;
}

.section-alt {
    background-color: var(--color-bg-secondary);
}

/* ========================================
   SITE HEADER
   ======================================== */
.site-header {
    position: sticky;
    top: 0;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    text-decoration: none;
    display: block;
    line-height: 0;
    margin-left: -60px;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.logo-text:hover {
    color: var(--color-accent);
}

.main-nav {
    display: flex;
    gap: var(--space-8);
}

.nav-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    margin: 5px 0;
    transition: var(--transition-base);
}

/* ========================================
   HERO / FEATURED ARTICLE
   ======================================== */
.hero-section {
    padding: var(--space-12) 0;
}

.featured-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.featured-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    max-width: var(--max-width-narrow);
}

.featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.featured-content {
    padding: var(--space-4) 0;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.featured-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-4);
}

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

.featured-title a:hover {
    color: var(--color-accent);
}

.featured-excerpt {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.read-more-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.read-more-link::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.read-more-link:hover::after {
    transform: translateX(4px);
}

/* ========================================
   CATEGORY TAGS
   ======================================== */
.category-tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.category-tag-energy {
    background: rgba(46, 90, 58, 0.1);
    color: var(--color-category-energy);
}

.category-tag-tech {
    background: rgba(92, 46, 11, 0.1);
    color: var(--color-category-tech);
}

.category-tag-sports {
    background: rgba(184, 134, 11, 0.1);
    color: var(--color-category-sports);
}

.category-tag-books {
    background: rgba(74, 74, 74, 0.1);
    color: var(--color-category-books);
}

/* ========================================
   CONTENT GRID (Recent Posts + About)
   ======================================== */
.content-grid {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--color-border);
}

.grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
}

.section-title {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* Article List */
.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.article-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.article-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.article-card-image {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-secondary);
    aspect-ratio: 4/3;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.article-card-date {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--color-text-light);
}

.article-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0;
    line-height: var(--leading-snug);
}

.article-card-title a {
    color: var(--color-text-primary);
}

.article-card-title a:hover {
    color: var(--color-accent);
}

.article-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* Pagination */
.pagination-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.pagination-btn {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pagination-btn.disabled,
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-secondary);
}

.pagination-info {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* About Snippet */
.about-snippet {
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
}

.about-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.about-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
}

/* ========================================
   TOPICS BAR
   ======================================== */
.topics-section {
    background: var(--color-bg-secondary);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.topic-tags {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.topic-tag {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

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

.topic-tag.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* ========================================
   DATA SPOTLIGHT
   ======================================== */
.data-spotlight {
    padding: var(--space-12) 0;
}

.data-preview {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-8);
    align-items: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.chart-preview {
    padding: var(--space-6);
    background: var(--color-bg-primary);
}

.chart-preview img {
    border-radius: var(--radius-sm);
}

.data-info {
    padding: var(--space-8);
}

.data-info h3 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.data-info p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.data-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.data-link::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.data-link:hover::after {
    transform: translateX(4px);
}

/* ========================================
   UPDATES FEED
   ======================================== */
.updates-section {
    padding: var(--space-12) 0;
    background: var(--color-bg-secondary);
}

.updates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.section-switcher {
    display: flex;
    gap: var(--space-2);
}

.section-btn {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.section-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.section-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.update-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.update-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.update-item a {
    text-decoration: none;
}

.update-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.update-type {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.update-date {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--color-text-light);
}

.update-title {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.update-description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

/* ========================================
   SITE FOOTER
   ======================================== */
.site-footer {
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) 0;
}

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

.copyright {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.social-links {
    display: flex;
    gap: var(--space-6);
}

.social-links a {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.social-links a:hover {
    color: var(--color-accent);
}

/* ========================================
   ARTICLE PAGE
   ======================================== */
.article-page {
    padding-top: var(--space-8);
}

/* Breadcrumb */
.breadcrumb {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.breadcrumb a {
    color: var(--color-text-muted);
}

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

.breadcrumb .separator {
    margin: 0 var(--space-2);
    color: var(--color-text-light);
}

/* Article Header */
.article-header {
    margin-bottom: var(--space-8);
}

.article-meta-top {
    margin-bottom: var(--space-4);
}

.article-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.article-meta {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.article-meta .separator {
    color: var(--color-text-light);
}

/* Article Hero Image */
.article-hero {
    margin-bottom: var(--space-8);
    max-width: var(--max-width-narrow);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--container-padding);
}

.article-hero img {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Article Content */
.article-content {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
}

/* Drop Cap - First paragraph of article */
.article-content>p:first-of-type::first-letter,
.article-content .drop-cap::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    padding-top: 0.05em;
    color: var(--color-accent);
    font-weight: var(--font-bold);
}

.article-content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.article-content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.article-content p {
    margin-bottom: var(--space-6);
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-6);
}

.article-content li {
    margin-bottom: var(--space-2);
}

/* ========================================
   CODE BLOCKS
   Reusable across all blog pages.
   Uses Prism.js for syntax highlighting.
   Add class="language-python" (or other)
   to <code> elements to activate.
   ======================================== */

/* Block code — <pre><code> */
pre {
    background: #2E2820;
    /* dark warm-brown, echoes the site palette */
    color: #D9CFBE;
    /* warm off-white text */
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-6) 0;
    border-left: 3px solid var(--color-accent-light);
    box-shadow: var(--shadow-md);
    white-space: pre;
}

/* Let our pre styles win over Prism defaults */
pre[class*="language-"] {
    background: #2E2820;
    margin: var(--space-6) 0;
    padding: var(--space-6);
    border-radius: var(--radius-md);
}

pre code,
pre[class*="language-"] code[class*="language-"] {
    background: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    border-radius: 0;
    border: none;
    white-space: pre;
}

/* Inline code — <code> inside prose */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-tertiary);
    color: var(--color-accent);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
}

/* --------------------------------------------------
   SYNTAX HIGHLIGHTING TOKENS  (warm editorial theme)
   Designed to pair with Prism.js core.
   -------------------------------------------------- */

/* Keywords: for, in, if, return, def, class, import… */
.token.keyword {
    color: #D4916A;
    /* warm amber-terracotta */
    font-style: normal;
}

/* Strings and template literals */
.token.string,
.token.char {
    color: #8CB892;
    /* sage green — data-3 from palette */
}

/* Numbers, booleans */
.token.number,
.token.boolean {
    color: #7DB5C8;
    /* muted steel blue */
}

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6B6358;
    /* --color-text-muted equivalent */
    font-style: italic;
}

/* Built-in functions and class names */
.token.builtin,
.token.class-name {
    color: #C9A96E;
    /* warm gold */
}

/* Function names */
.token.function {
    color: #B8C9A8;
    /* light sage — differs from strings */
}

/* Operators, punctuation */
.token.operator,
.token.punctuation {
    color: #A89F93;
    /* warm mid-grey */
}

/* Variables and identifiers */
.token.variable {
    color: #D9CFBE;
    /* base text — no extra emphasis */
}

/* Decorators, annotations */
.token.decorator.annotation {
    color: #D4916A;
}

/* Namespace / module */
.token.namespace {
    opacity: 0.8;
}

/* Important / regex */
.token.important,
.token.regex {
    color: #E8A87C;
    /* soft orange */
}

/* Pull Quote - for emphasis in articles */
.pull-quote {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-style: italic;
    color: var(--color-text-secondary);
    text-align: center;
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
    position: relative;
}

.pull-quote-attribution {
    display: block;
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-style: normal;
    color: var(--color-text-muted);
    margin-top: var(--space-3);
}

/* Key Takeaways Box */
.article-summary {
    background: var(--color-bg-secondary);
    border-left: 4px solid var(--color-accent);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-summary h2 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin: 0 0 var(--space-4) 0;
}

.article-summary ul {
    margin: 0;
    padding-left: var(--space-6);
}

.article-summary li {
    font-family: var(--font-body);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

.article-summary li:last-child {
    margin-bottom: 0;
}

/* Data Highlight in Text */
.data-highlight {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
    background: var(--color-bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

/* Chart Containers */
.chart-figure {
    margin: var(--space-8) 0;
}

.chart-container {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    position: relative;
    min-height: 400px;
}

.chart-container canvas {
    width: 100% !important;
    height: auto !important;
}

.chart-figure figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-3);
}

/* Wide charts that break out of narrow container */
@media (min-width: 900px) {
    .chart-figure-wide {
        margin-left: -5rem;
        margin-right: -5rem;
    }
}

/* Article Figure — inline images with caption */
.article-figure {
    margin: var(--space-10) 0;
}

.article-figure img {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    display: block;
}

.article-figure figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-3);
    font-style: italic;
}

/* Side-by-side image grid */
.article-figure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .article-figure-grid {
        grid-template-columns: 1fr;
    }
}

/* Article Footer */
.article-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.tag {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
}

.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.nav-prev,
.nav-next {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.nav-prev:hover,
.nav-next:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
}

.nav-next {
    text-align: right;
}

.nav-label {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.nav-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

/* ========================================
   ABOUT PAGE
   ======================================== */
.about-page {
    padding: var(--space-12) 0;
}

.about-header-section {
    text-align: center;
    margin-bottom: var(--space-12);
}

.about-header-section h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.about-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.about-section {
    margin-bottom: var(--space-12);
}

.about-section h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.about-section p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.highlight {
    color: var(--color-accent);
    font-weight: var(--font-semibold);
}

/* Contact Section */
.contact-grid {
    display: grid;
    gap: var(--space-4);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.contact-label {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    min-width: 140px;
}

.contact-link {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--color-accent);
}

/* ========================================
   ENERGY VIZ PAGE
   ======================================== */
.viz-page {
    padding: var(--space-8) 0;
}

.viz-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.viz-header h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.viz-header p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.viz-section {
    margin-bottom: var(--space-12);
}

.viz-section h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}

.viz-container {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.viz-container img {
    width: 100%;
    border-radius: var(--radius-sm);
}

.viz-caption {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-3);
}

.data-insights {
    background: var(--color-bg-secondary);
    border-left: 4px solid var(--color-data-1);
    padding: var(--space-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: var(--space-4);
}

.data-insights p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* ========================================
   CONTENT-TYPE DIFFERENTIATION
   Personal/Journal vs Analytical content
   ======================================== */

/* Personal content - warmer, more journal-like */
.article-personal .article-content {
    background: linear-gradient(to bottom,
            var(--color-paper) 0%,
            var(--color-bg-primary) 100%);
    padding: var(--space-8);
    margin: 0 calc(-1 * var(--space-8));
    border-radius: var(--radius-md);
}

.article-personal .article-meta .author {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
}

.article-personal .pull-quote {
    font-family: var(--font-accent);
    font-size: var(--text-3xl);
    font-style: normal;
}

/* Analytical content - cleaner, more structured */
.article-analytical .article-summary {
    border-left-color: var(--color-data-1);
}

.article-analytical .data-highlight {
    background: rgba(46, 90, 58, 0.1);
    color: var(--color-data-1);
}

/* Subtle faint ruled lines for personal content */
.article-personal .article-content>p {
    background-image: linear-gradient(to bottom,
            transparent calc(var(--leading-relaxed) * 1em - 1px),
            var(--color-rule) calc(var(--leading-relaxed) * 1em));
    background-size: 100% calc(var(--leading-relaxed) * 1em);
}

/* ========================================
   AUTHOR BYLINE STYLING
   ======================================== */
.author-byline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.author-note {
    font-family: var(--font-accent);
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .featured-article {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .grid-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about-snippet {
        padding-left: 0;
        border-left: none;
        padding-top: var(--space-6);
        border-top: 1px solid var(--color-border);
    }

    .data-preview {
        grid-template-columns: 1fr;
    }

    .chart-preview {
        order: 2;
    }

    .data-info {
        order: 1;
    }
}

@media (max-width: 768px) {
    :root {
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-primary);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: var(--space-4);
        gap: var(--space-2);
    }

    .main-nav.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .article-card {
        grid-template-columns: 80px 1fr;
    }

    .article-nav {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .featured-title {
        font-size: var(--text-2xl);
    }

    .article-title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-4);
    }

    .topic-tags {
        justify-content: flex-start;
    }

    .section-switcher {
        flex-wrap: wrap;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .article-meta .separator {
        display: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

    .site-header,
    .site-footer,
    .article-nav,
    .section-switcher {
        display: none;
    }

    .article-content {
        font-size: 12pt;
        line-height: 1.5;
    }

    .chart-container {
        break-inside: avoid;
    }
}