:root {
    /* Base Colors (System Default) */
    --color-bg: #ffffff;
    --color-text-main: #1c1c1c;
    --color-text-secondary: #738a94;
    --color-border: #e1e1e1;
    --color-bg-accents: #f9f9f9;
    --color-bg-card: #ffffff;
    --ghost-accent-color: #000000; /* Fallback */

    /* Calana Preset System Variables */
    /* Layout Preset Variables */
    --calana-navbar-position: top;
    --calana-navbar-style: shadow;
    --calana-navbar-shadow: 0 2px 20px rgba(0,0,0,0.08);
    --calana-navbar-border: none;
    --calana-navbar-backdrop: none;
    --calana-container-max-width: 1200px;
    --calana-content-padding: 30px;
    --calana-card-spacing: 25px;

    /* Color Preset Variables (Default to light theme) */
    --calana-primary: var(--ghost-accent-color, #000000);
    --calana-secondary: #333333;
    --calana-accent: var(--ghost-accent-color, #000000);
    --calana-background: #ffffff;
    --calana-surface: #f8f9fa;
    --calana-text-primary: #000000;
    --calana-text-secondary: #666666;
    --calana-border: #e1e5e9;

    /* Typography Preset Variables */
    --calana-primary-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --calana-secondary-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --calana-base-font-size: 16px;
    --calana-heading-weight: 600;
    --calana-body-weight: 400;
    --calana-line-height: 1.6;

    /* Card Style Variables */
    --calana-card-shadow: 0 4px 12px rgba(0,0,0,0.05);
    --calana-card-border: none;
    --calana-card-padding: 24px;
    --calana-card-radius: 8px;

    /* Legacy Layout Geometry */
    --shell-gap: 40px;
    --sidebar-width: 280px;
    --header-height: 80px;
    --max-width: var(--calana-container-max-width);

    /* Design Defaults (Using Calana Variables) */
    --border-radius: var(--calana-card-radius);
    --card-shadow: var(--calana-card-shadow);
}

/* Theme Mode Support */
body.theme-light,
body.theme-auto:not(.theme-system-dark),
body.theme-user-selectable.user-theme-light {
    --color-bg: var(--calana-background, #ffffff);
    --color-text-main: var(--calana-text-primary, #1c1c1c);
    --color-text-secondary: var(--calana-text-secondary, #738a94);
    --color-border: var(--calana-border, #e1e1e1);
    --color-bg-accents: var(--calana-surface, #f9f9f9);
    --color-bg-card: var(--calana-background, #ffffff);
}

body.theme-dark,
body.theme-auto.theme-system-dark,
body.theme-user-selectable.user-theme-dark {
    --color-bg: var(--calana-background, #0d1117);
    --color-text-main: var(--calana-text-primary, #ffffff);
    --color-text-secondary: var(--calana-text-secondary, #8b949e);
    --color-border: var(--calana-border, #30363d);
    --color-bg-accents: var(--calana-surface, #161b22);
    --color-bg-card: var(--calana-surface, #161b22);
}

body.theme-mid {
    --color-bg: var(--calana-background, #f7fafc);
    --color-text-main: var(--calana-text-primary, #2d3748);
    --color-text-secondary: var(--calana-text-secondary, #718096);
    --color-border: var(--calana-border, #e2e8f0);
    --color-bg-accents: var(--calana-surface, #edf2f7);
    --color-bg-card: var(--calana-background, #f7fafc);
}

/* Layout Features */
body.sticky-header header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(var(--calana-background), 0.9);
}

/* Feed Layout Variations */

/* 1. Magazine Feature - Overlay cards with background images like magazine covers */
body.feed-layout-magazine-grid .feed-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Magazine cover style cards with text overlay on images */
body.feed-layout-magazine-grid .post-card {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    background: linear-gradient(45deg, var(--ghost-accent-color), var(--ghost-accent-color)) !important;
    height: auto !important;
    cursor: pointer;
}

/* Make entire Magazine Feature card clickable */
body.feed-layout-magazine-grid .post-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Featured post spans multiple cells */
body.feed-layout-magazine-grid .post-card:first-child {
    grid-row: 1 / 3;
    min-height: 500px;
}

body.feed-layout-magazine-grid .post-card-image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

body.feed-layout-magazine-grid .post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stronger gradient overlay for Magazine Feature cards */
body.feed-layout-magazine-grid .post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.3) 50%, transparent 70%);
    z-index: 2;
}

/* Light mode gradient */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card::before {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
}

body.feed-layout-magazine-grid .post-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 160px;
}

/* Magazine Feature text styling - ensure titles are visible */
body.feed-layout-magazine-grid .post-card-title {
    font-size: 1.6em;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.feed-layout-magazine-grid .post-card-title a {
    color: #ffffff !important;
    text-decoration: none;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Light mode text styling */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card-title {
    color: #000000 !important;
    text-shadow: 2px 2px 6px rgba(255,255,255,0.9);
}

body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card-title a {
    color: #000000 !important;
}

/* Magazine Feature excerpt styling */
body.feed-layout-magazine-grid .post-card-excerpt,
body.feed-layout-magazine-grid .post-card-excerpt p {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Light mode excerpt styling */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card-excerpt,
body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card-excerpt p {
    color: #000000 !important;
    text-shadow: 2px 2px 6px rgba(255,255,255,0.9);
}

/* Hide metadata and author for Magazine Feature - titles only */
body.feed-layout-magazine-grid .post-card-meta,
body.feed-layout-magazine-grid .post-card-footer,
body.feed-layout-magazine-grid .post-card-author,
body.feed-layout-magazine-grid .author-list,
body.feed-layout-magazine-grid .author-name {
    display: none !important;
}

/* Light mode overrides */
body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-content {
    background: rgba(255,255,255,0.9) !important;
}

body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-title,
body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-title a {
    color: #000000 !important;
    text-shadow: 2px 2px 4px #ffffff !important;
}

body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-meta,
body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-date,
body:not(.scheme-dark):not(.scheme-system) .post-feed.feed-layout-magazine-grid .post-card .post-card-tag {
    color: #000000 !important;
}

body.feed-layout-magazine-grid .post-card:first-child .post-card-title {
    font-size: 2.8em !important;
    margin-bottom: 20px !important;
    font-family: 'Bonheur Royale', 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    font-style: normal !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
    z-index: 15 !important;
    position: relative !important;
}

body.feed-layout-magazine-grid .post-card-excerpt {
    display: none;
}

body.feed-layout-magazine-grid .post-card:first-child .post-card-excerpt {
    display: block;
    font-size: 1.4em;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 1;
    font-weight: 450;
}

body.feed-layout-magazine-grid .post-card-meta {
    font-size: 1.0em;
    opacity: 1;
    font-weight: 550;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Light mode meta text */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-magazine-grid .post-card-meta {
    color: #000000 !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.95);
}

body.feed-layout-magazine-grid .post-card-tag {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
}

@media (max-width: 1024px) {
    body.feed-layout-magazine-grid .feed-container {
        grid-template-columns: 1fr 1fr;
    }
    body.feed-layout-magazine-grid .post-card:first-child {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    body.feed-layout-magazine-grid .feed-container {
        grid-template-columns: 1fr;
    }
    body.feed-layout-magazine-grid .post-card:first-child {
        grid-column: auto;
    }
}

/* 2. Editorial Feed - Newspaper-style layout with typography focus */
body.feed-layout-editorial-list .feed-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
}

/* Newspaper-style cards with heavy borders and typography */
body.feed-layout-editorial-list .post-card {
    background: var(--color-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 25px !important;
    padding: 25px !important;
    position: relative !important;
    flex-direction: row !important;
    height: auto !important;
    transform: none !important;
}

/* Alternate layout direction - image always in SHORT column */
body.feed-layout-editorial-list .post-card:nth-child(even) {
    grid-template-columns: 1fr 250px !important;
}

body.feed-layout-editorial-list .post-card:nth-child(even) .post-card-image-link {
    order: 2;
}

body.feed-layout-editorial-list .post-card:nth-child(even) .post-card-content {
    order: 1;
    text-align: right;
}

body.feed-layout-editorial-list .post-card-image-link {
    height: 150px;
}

body.feed-layout-editorial-list .post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--color-text-main);
}

body.feed-layout-editorial-list .post-card-content {
    padding: 0;
}

body.feed-layout-editorial-list .post-card-title {
    font-family: Georgia, serif;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: -0.02em;
    border-bottom: 3px solid var(--color-text-main);
    padding-bottom: 8px;
    display: inline-block;
}

body.feed-layout-editorial-list .post-card:nth-child(1) .post-card-title {
    font-size: 2.5em;
    color: var(--ghost-accent-color);
    border-bottom-color: var(--ghost-accent-color);
}

body.feed-layout-editorial-list .post-card-excerpt {
    font-family: Georgia, serif;
    font-size: 1.1em;
    line-height: 1.65;
    margin: 12px 0;
    font-style: italic;
    opacity: 1;
    font-weight: 450;
}

body.feed-layout-editorial-list .post-card-meta {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 650;
    opacity: 0.9;
}

body.feed-layout-editorial-list .post-card-tag {
    background: var(--color-text-main);
    color: var(--color-bg);
    padding: 2px 8px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 8px;
}

body.feed-layout-editorial-list .post-card-date {
    font-weight: 700;
}

/* Remove bullets from author list in Editorial feed */
body.feed-layout-editorial-list .author-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.feed-layout-editorial-list .author-list-item {
    list-style: none;
}

/* Special styling for first post */
body.feed-layout-editorial-list .post-card:first-child {
    grid-template-columns: 250px 1fr;
    padding: 40px;
    background: var(--color-bg-accents);
    border: 3px solid var(--color-text-main);
}

body.feed-layout-editorial-list .post-card:first-child .post-card-image-link {
    height: 200px;
    order: 1;
}

body.feed-layout-editorial-list .post-card:first-child .post-card-content {
    order: 2;
}

@media (max-width: 1024px) {
    body.feed-layout-editorial-list .post-card,
    body.feed-layout-editorial-list .post-card:nth-child(even),
    body.feed-layout-editorial-list .post-card:first-child {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: left;
    }
    
    body.feed-layout-editorial-list .post-card-image-link {
        order: 1;
        height: 180px;
    }
    
    body.feed-layout-editorial-list .post-card-content {
        order: 2;
        text-align: left !important;
    }
}

/* 3. Newsletter Landing - Email-style promotional cards */
body.feed-layout-text-only .feed-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

/* Email newsletter-style cards with clean promotional design */
body.feed-layout-text-only .post-card {
    border: 2px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    display: block !important;
    flex-direction: column !important;
    height: auto !important;
    transform: none !important;
}

body.feed-layout-text-only .post-card-image-link {
    display: block;
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}

body.feed-layout-text-only .post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

body.feed-layout-text-only .post-card:hover .post-card-image {
    transform: scale(1.05);
}

/* Newsletter-style content box */
body.feed-layout-text-only .post-card-content {
    padding: 30px;
    background: linear-gradient(to right, var(--color-bg-accents) 0%, var(--color-bg-card) 100%);
    border-top: 4px solid var(--ghost-accent-color);
}

body.feed-layout-text-only .post-card-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--color-border);
}

body.feed-layout-text-only .post-card-title {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--color-text-main);
    font-family: Arial, sans-serif;
}

body.feed-layout-text-only .post-card-excerpt {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #555;
    font-family: Arial, sans-serif;
}

/* Newsletter-style meta with badges */
body.feed-layout-text-only .post-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    font-family: Arial, sans-serif;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

body.feed-layout-text-only .post-card-tag {
    background: var(--ghost-accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

body.feed-layout-text-only .post-card-date {
    color: #666;
    font-weight: 500;
}

/* Call-to-action style button */
body.feed-layout-text-only .post-card-title a::after {
    content: " →";
    color: var(--ghost-accent-color);
    font-weight: normal;
    transition: transform 0.2s ease;
}

body.feed-layout-text-only .post-card:hover .post-card-title a::after {
    transform: translateX(4px);
}

/* Alternating accent colors for variety */
body.feed-layout-text-only .post-card:nth-child(3n+2) .post-card-content {
    border-top-color: #28a745;
}

body.feed-layout-text-only .post-card:nth-child(3n+2) .post-card-tag {
    background: #28a745;
}

body.feed-layout-text-only .post-card:nth-child(3n+3) .post-card-content {
    border-top-color: #ffc107;
}

body.feed-layout-text-only .post-card:nth-child(3n+3) .post-card-tag {
    background: #ffc107;
    color: #000;
}

@media (max-width: 768px) {
    body.feed-layout-text-only .post-card-content {
        padding: 20px;
    }
    
    body.feed-layout-text-only .post-card-image-link {
        height: 200px;
    }
    
    body.feed-layout-text-only .post-card-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* 4. Visual Grid - Pinterest-style image-focused cards */
body.feed-layout-masonry .feed-container {
    columns: 4;
    column-gap: 15px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Pinterest-style cards - image dominant, minimal text overlay */
body.feed-layout-masonry .post-card {
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
    position: relative !important;
    background: transparent !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    break-inside: avoid !important;
    height: auto !important;
}

/* Make entire Visual Grid card clickable */
body.feed-layout-masonry .post-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

body.feed-layout-masonry .post-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Image takes full space like Pinterest pins */
body.feed-layout-masonry .post-card-image-link {
    display: block;
    width: 100%;
    position: relative;
}

body.feed-layout-masonry .post-card-image {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* Varying heights for visual interest */
body.feed-layout-masonry .post-card:nth-child(6n+1) .post-card-image,
body.feed-layout-masonry .post-card:nth-child(6n+4) .post-card-image {
    height: 320px;
}

body.feed-layout-masonry .post-card:nth-child(6n+2) .post-card-image,
body.feed-layout-masonry .post-card:nth-child(6n+5) .post-card-image {
    height: 280px;
}

body.feed-layout-masonry .post-card:nth-child(6n+3) .post-card-image,
body.feed-layout-masonry .post-card:nth-child(6n+6) .post-card-image {
    height: 240px;
}

/* Text overlay at bottom with stronger gradient */
body.feed-layout-masonry .post-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.95));
    color: white;
    padding: 40px 20px 20px;
    z-index: 3;
}

/* Light mode gets inverted gradient with dark text */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-masonry .post-card-content {
    background: linear-gradient(transparent, rgba(255,255,255,0.95));
    color: var(--color-text-main);
}

body.feed-layout-masonry .post-card-header {
    margin-bottom: 8px;
}

body.feed-layout-masonry .post-card-title {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Force Visual Grid header and title visibility */
body.feed-layout-masonry .post-card-header {
    display: block !important;
    visibility: visible !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Light mode text shadow for Visual Grid */
body:not(.scheme-dark):not(.scheme-system) .feed-layout-masonry .post-card-title {
    text-shadow: 2px 2px 6px rgba(255,255,255,0.9) !important;
    color: var(--color-text-main) !important;
}


/* Hide excerpt for clean Pinterest look */
body.feed-layout-masonry .post-card-excerpt {
    display: none;
}

body.feed-layout-masonry .post-card-meta {
    font-size: 0.9em;
    opacity: 1;
    font-weight: 550;
}

body.feed-layout-masonry .post-card-tag {
    background: rgba(255,255,255,0.25);
    color: white;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.7em;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(5px);
}

/* Some cards get special accent borders */
body.feed-layout-masonry .post-card:nth-child(7n+2) {
    border: 4px solid var(--ghost-accent-color);
    box-shadow: 0 6px 25px rgba(0,0,0,0.2);
}

body.feed-layout-masonry .post-card:nth-child(11n+3) {
    border: 4px solid #ff6b6b;
    box-shadow: 0 6px 25px rgba(255,107,107,0.3);
}

body.feed-layout-masonry .post-card:nth-child(13n+5) {
    border: 4px solid #4ecdc4;
    box-shadow: 0 6px 25px rgba(78,205,196,0.3);
}

@media (max-width: 1200px) {
    body.feed-layout-masonry .feed-container { columns: 3; }
}

@media (max-width: 768px) {
    body.feed-layout-masonry .feed-container { columns: 2; }
    body.feed-layout-masonry .post-card-content {
        padding: 20px 15px 15px;
    }
}

@media (max-width: 480px) {
    body.feed-layout-masonry .feed-container { columns: 1; }
}

/* 5. Minimal Reader - Pure text list like Hacker News */
body.feed-layout-minimal-reader .feed-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

/* Hacker News / Reddit style minimal cards */
body.feed-layout-minimal-reader .post-card {
    display: flex !important;
    flex-direction: row !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
    transition: background-color 0.15s ease !important;
    align-items: flex-start !important;
    gap: 15px !important;
    border-radius: 0 !important;
    height: auto !important;
    transform: none !important;
    box-shadow: none !important;
}

body.feed-layout-minimal-reader .post-card:hover {
    background: #f6f6f6;
}

body.feed-layout-minimal-reader .post-card:last-child {
    border-bottom: none;
}

/* Numbering like Hacker News */
body.feed-layout-minimal-reader .post-card::before {
    content: counter(post-counter) ".";
    counter-increment: post-counter;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    font-weight: 500;
    min-width: 25px;
    margin-top: 2px;
}

body.feed-layout-minimal-reader .feed-container {
    counter-reset: post-counter;
}

/* No images at all */
body.feed-layout-minimal-reader .post-card-image-link {
    display: none;
}

body.feed-layout-minimal-reader .post-card-content {
    flex: 1;
    padding: 0;
    line-height: 1.4;
}

body.feed-layout-minimal-reader .post-card-header {
    margin-bottom: 6px;
}

/* Clean minimal typography */
body.feed-layout-minimal-reader .post-card-title {
    font-size: 1.2em;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body.feed-layout-minimal-reader .post-card-title a {
    color: var(--color-text-main);
    text-decoration: none;
}

body.feed-layout-minimal-reader .post-card-title a:hover {
    text-decoration: underline;
}

body.feed-layout-minimal-reader .post-card-excerpt {
    font-size: 1.0em;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 4px 0;
    display: none; /* Hidden by default for clean look */
    font-weight: 450;
}

/* Inline meta like Hacker News */
body.feed-layout-minimal-reader .post-card-meta {
    font-size: 0.9em;
    color: #828282;
    font-weight: 500;
    display: flex;
    gap: 8px;
    align-items: center;
}

body.feed-layout-minimal-reader .post-card-meta > * {
    display: inline;
}

body.feed-layout-minimal-reader .post-card-tag {
    color: var(--ghost-accent-color);
    text-decoration: none;
    font-weight: 500;
}

body.feed-layout-minimal-reader .post-card-tag:hover {
    text-decoration: underline;
}

body.feed-layout-minimal-reader .post-card-date,
body.feed-layout-minimal-reader .post-card-reading-time {
    color: #828282;
}

body.feed-layout-minimal-reader .post-card-author {
    display: none; /* Even more minimal */
}

/* Pipe separators like HN */
body.feed-layout-minimal-reader .post-card-meta *:not(:last-child)::after {
    content: " | ";
    color: #ccc;
    font-weight: normal;
}

/* First few posts get slightly larger text */
body.feed-layout-minimal-reader .post-card:nth-child(-n+3) .post-card-title {
    font-size: 1.2em;
    font-weight: 500;
}

body.feed-layout-minimal-reader .post-card:first-child .post-card-title {
    font-size: 1.3em;
    font-weight: 600;
}

@media (max-width: 768px) {
    body.feed-layout-minimal-reader .post-card {
        padding: 12px 15px;
        gap: 10px;
    }
    
    body.feed-layout-minimal-reader .post-card::before {
        min-width: 20px;
        font-size: 0.8em;
    }
    
    body.feed-layout-minimal-reader .post-card-title {
        font-size: 1em;
    }
    
    body.feed-layout-minimal-reader .post-card:nth-child(-n+3) .post-card-title {
        font-size: 1.1em;
    }
    
    body.feed-layout-minimal-reader .post-card:first-child .post-card-title {
        font-size: 1.15em;
    }
}

/* Mobile-specific adjustments for all feed layouts */
@media (max-width: 768px) {
    body.feed-layout-magazine-grid .post-card:first-child .post-card-title {
        font-size: 1.5em;
    }
    
    body.feed-layout-editorial-list .post-card {
        padding: 25px 0;
        gap: 20px;
    }
    
    body.feed-layout-text-only .post-card {
        padding: 20px;
    }
    
    body.feed-layout-text-only .post-card-title {
        font-size: 1.3em;
    }
    
    body.feed-layout-minimal-reader .post-card {
        padding: 20px 0;
    }
    
    body.feed-layout-minimal-reader .post-card-title {
        font-size: 1.2em;
    }
}

/* Meta Information Visibility Controls */
body:not(.show-meta-author) .post-card-author {
    display: none;
}

body:not(.show-meta-tags) .post-card-tag {
    display: none;
}

body:not(.show-reading-time) .post-card-reading-time {
    display: none;
}

body:not(.show-excerpts) .post-card-excerpt {
    display: none;
}

/* Card Style Variations */
body.card-style-minimal .post-card {
    box-shadow: var(--calana-card-shadow, none);
    border: var(--calana-card-border, 1px solid var(--color-border));
    border-radius: var(--calana-card-radius, 8px);
    padding: var(--calana-card-padding, 24px);
}

body.card-style-shadow .post-card {
    box-shadow: var(--calana-card-shadow, 0 4px 20px rgba(0,0,0,0.08));
    border: var(--calana-card-border, none);
    border-radius: var(--calana-card-radius, 8px);
    padding: var(--calana-card-padding, 32px);
}

body.card-style-brutalist .post-card {
    box-shadow: var(--calana-card-shadow, 4px 4px 0px #000);
    border: var(--calana-card-border, 2px solid #000);
    border-radius: var(--calana-card-radius, 0px);
    padding: var(--calana-card-padding, 24px);
}

/* Typography Application */
body {
    font-family: var(--calana-primary-font);
    font-size: var(--calana-base-font-size);
    font-weight: var(--calana-body-weight);
    line-height: var(--calana-line-height);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--calana-primary-font);
    font-weight: var(--calana-heading-weight);
}

/* Legacy Design Toggles (Backward Compatibility) */
body.style-radius-Sharp\ \(0px\) { --border-radius: 0px; --calana-card-radius: 0px; }
body.style-radius-Soft\ \(8px\)  { --border-radius: 8px; --calana-card-radius: 8px; }
body.style-radius-Round\ \(20px\) { --border-radius: 20px; --calana-card-radius: 20px; }

body.style-card-Minimal { 
    --card-shadow: none; 
    --calana-card-shadow: none;
    --calana-card-border: 1px solid var(--color-border);
}
body.style-card-Card\ Shadow { 
    --card-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    --calana-card-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --calana-card-border: none;
}
body.style-card-Brutalist\ Border { 
    --card-shadow: 4px 4px 0px #000; 
    --calana-card-shadow: 4px 4px 0px #000;
    --calana-card-border: 2px solid #000;
    --border-radius: 0; 
    --calana-card-radius: 0;
}

/* Container and Layout Responsiveness */
.container, .site-main, .post-feed {
    max-width: var(--calana-container-max-width);
    padding: var(--calana-content-padding);
}

/* System Theme Preference Detection */
@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --color-bg: var(--calana-background, #0d1117);
        --color-text-main: var(--calana-text-primary, #ffffff);
        --color-text-secondary: var(--calana-text-secondary, #8b949e);
        --color-border: var(--calana-border, #30363d);
        --color-bg-accents: var(--calana-surface, #161b22);
        --color-bg-card: var(--calana-surface, #161b22);
    }
}

/* ==========================================================================
   POST PRESET STYLES - Distinct visual themes for each preset
   ========================================================================== */

/* 1. Immersive Story - Longform reading focused, no image emphasis */
body.post-preset-immersive-story .article-image-full,
body.post-preset-immersive-story .header-split-image {
    display: none !important; /* Hide feature image completely */
}

body.post-preset-immersive-story .article {
    background: var(--color-bg-accents);
    border: 2px solid var(--ghost-accent-color);
    border-radius: var(--border-radius);
    padding: 60px;
    margin: 0 auto 40px auto;
    max-width: 800px;
}

body.post-preset-immersive-story .article-header {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 40px 0;
    max-width: 100%;
    text-align: center;
}

body.post-preset-immersive-story .article-title {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-main);
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

body.post-preset-immersive-story .article-excerpt {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-style: italic;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

body.post-preset-immersive-story .post-content {
    font-size: 1.15rem;
    line-height: 1.9;
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
}

body.post-preset-immersive-story .post-content p {
    margin-bottom: 2rem;
}

body.post-preset-immersive-story .post-content h2 {
    font-size: 1.8rem;
    margin: 50px 0 30px 0;
    text-align: center;
    border-bottom: 2px solid var(--ghost-accent-color);
    padding-bottom: 15px;
}

/* 2. Editorial Article - Professional newspaper style, title above image */
body.post-preset-editorial-article .article-header {
    border-bottom: 3px solid var(--ghost-accent-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

body.post-preset-editorial-article .article-title {
    font-family: Georgia, serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-main);
    text-align: center;
    margin-bottom: 30px;
}

body.post-preset-editorial-article .article-excerpt {
    font-family: Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.5;
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: 30px;
}

body.post-preset-editorial-article .article-image-full,
body.post-preset-editorial-article .header-split-image {
    margin-bottom: 40px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

body.post-preset-editorial-article .post-content {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid var(--color-border);
}

body.post-preset-editorial-article .post-content h2 {
    column-span: all;
    border-bottom: 2px solid var(--ghost-accent-color);
    padding-bottom: 10px;
    margin: 40px 0 20px 0;
}

/* 3. Knowledge Layout - Dense text-heavy information layout */
body.post-preset-knowledge-layout .article-image-full,
body.post-preset-knowledge-layout .header-split-image {
    display: none !important; /* Hide feature image for text focus */
}

body.post-preset-knowledge-layout .article-header {
    background: var(--color-bg-accents);
    border: 3px solid var(--ghost-accent-color);
    border-radius: var(--border-radius);
    padding: 40px;
    margin-bottom: 40px;
}

body.post-preset-knowledge-layout .article-title {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}

body.post-preset-knowledge-layout .article-excerpt {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    padding: 15px 20px;
    background: var(--ghost-accent-color);
    color: white;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
}

body.post-preset-knowledge-layout .post-content {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 20px;
    background: var(--color-bg-accents);
    border: 1px solid var(--color-border);
    columns: 2;
    column-gap: 30px;
    column-rule: 1px solid var(--color-border);
    text-align: justify;
    hyphens: auto;
}

body.post-preset-knowledge-layout .post-content h2 {
    column-span: all;
    background: var(--ghost-accent-color);
    color: white;
    padding: 12px 20px;
    margin: 30px -20px 25px -20px;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0;
    text-align: center;
}

body.post-preset-knowledge-layout .post-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 20px 0 10px 0;
    color: var(--ghost-accent-color);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
}

body.post-preset-knowledge-layout .post-content p {
    margin-bottom: 1rem;
}

body.post-preset-knowledge-layout .post-content ul, 
body.post-preset-knowledge-layout .post-content ol {
    margin-bottom: 1rem;
    padding-left: 15px;
}

body.post-preset-knowledge-layout .post-content li {
    margin-bottom: 0.4rem;
}

body.post-preset-knowledge-layout .post-content > p:first-of-type {
    grid-column: 1;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

body.post-preset-knowledge-layout .post-content .knowledge-sidebar {
    grid-column: 2;
    background: var(--color-bg);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* 4. Big Image - Full width featured image, 600px height, cropped */
body.post-preset-big-image .article-image-full {
    width: 100vw !important;
    height: 600px !important;
    max-width: none !important;
    margin: 0 0 60px 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

body.post-preset-big-image .article-image-full img {
    width: 100% !important;
    height: 600px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.post-preset-big-image body,
body.post-preset-big-image html {
    overflow-x: hidden !important;
}

body.post-preset-big-image .calana-content-grid,
body.post-preset-big-image .article-content-wrapper {
    overflow-x: visible !important;
}

body.post-preset-big-image .article-header {
    margin-bottom: 60px;
    text-align: center;
}

body.post-preset-big-image .article-title {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    color: var(--color-text-main);
}

body.post-preset-big-image .article-excerpt {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto 60px auto;
    font-style: italic;
}

body.post-preset-big-image .post-content {
    font-size: 1.15rem;
    line-height: 1.75;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: var(--color-bg-accents);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

body.post-preset-big-image .post-content h2 {
    font-size: 2rem;
    margin: 50px 0 30px 0;
    color: var(--color-text-main);
    border-bottom: 2px solid var(--ghost-accent-color);
    padding-bottom: 15px;
}

body.post-preset-big-image .post-content p {
    margin-bottom: 1.8rem;
}

/* 5. Minimal Reading - Clean, distraction-free design, no image */
body.post-preset-minimal-reading .article-image-full,
body.post-preset-minimal-reading .header-split-image {
    display: none !important; /* Completely remove feature image */
}

body.post-preset-minimal-reading .article-header {
    text-align: center;
    padding: 60px 0;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

body.post-preset-minimal-reading .article-title {
    font-family: Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text-main);
    margin-bottom: 30px;
}

body.post-preset-minimal-reading .article-excerpt {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 40px;
}

body.post-preset-minimal-reading .post-content {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

body.post-preset-minimal-reading .post-content p {
    margin-bottom: 1.5rem;
}

body.post-preset-minimal-reading .post-content h2 {
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin: 50px 0 25px 0;
    text-align: center;
}

/* Mobile responsiveness for post presets */
@media (max-width: 1023px) {
    body.post-preset-immersive-story .article-header {
        padding: 40px 30px;
        margin: 0 auto 40px auto;
    }
    
    body.post-preset-immersive-story .post-content {
        padding: 40px 30px;
    }
    
    body.post-preset-editorial-article .post-content {
        column-count: 1;
    }
    
    body.post-preset-knowledge-layout .post-content {
        display: block;
        padding: 20px;
    }
    
    body.post-preset-knowledge-layout .post-content h2 {
        margin: 20px -20px 20px -20px;
    }
    
    body.post-preset-big-image .calana-shell {
        padding-top: 460px !important;
    }
    
    body.post-preset-big-image .article-image-full {
        height: 400px !important;
    }
    
    body.post-preset-big-image .article-image-full img {
        height: 400px !important;
    }
    
    
    body.post-preset-big-image .article-title {
        font-size: 2.8rem;
        line-height: 1.1;
    }
    
    body.post-preset-minimal-reading .article-header {
        padding: 40px 20px 30px 20px;
    }
}

/* Desktop override for Knowledge Layout 2-column */
@media screen and (min-width: 1024px) {
    body.post-preset-knowledge-layout .post-content {
        column-count: 2 !important;
        column-gap: 50px !important;
        column-rule: 2px solid var(--color-border) !important;
        padding: 40px !important;
        background: var(--color-bg-accents) !important;
        border: 1px solid var(--color-border) !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    body.post-preset-knowledge-layout .post-content h2 {
        margin: 30px -40px 25px -40px !important;
        column-span: all !important;
        background: var(--ghost-accent-color) !important;
        color: white !important;
    }
}