/* --- bla.stuff - Elegant & Colorful CSS --- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Libre_Baskerville/LibreBaskerville-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf') format('truetype');
}

:root {
    /* Color Palette */
    --dark-green: #004d40;
    --cherry-red: #c62828;
    --gold: #ffc107;
    --dark-gray: #212121;
    --light-gray: #f5f5f5;
    --white: #ffffff;

    /* Typography System */
    --font-primary: 'Libre Baskerville', 'Georgia', 'Times New Roman', serif;
    --font-secondary: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;

    /* Typographic Scale (1.25 ratio) */
    --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: 2;

    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-base: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b7280;
    --text-inverse: #f9fafb;

    /* Shadows */
    --shadow-light: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-strong: 0 4px 15px rgba(0,0,0,0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

/* Prevent horizontal scroll from full-bleed elements */
html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-secondary);
    background-color: #2B3A3F;
    color: var(--light-gray);
    line-height: var(--leading-relaxed);
    font-size: clamp(0.9rem, 2.5vw, var(--text-lg));
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
/* Removed body overlay to ensure background image is visible */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 40% visible (60% transparent) yersinia background on body */
/* body-wide background image overlay removed */

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    line-height: var(--leading-tight);
    font-weight: 600;
    margin-bottom: var(--space-lg);
    color: inherit;
}

h1 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: 700;
    margin-bottom: var(--space-xl);
    color: #AA8956;
}

h2 {
    font-size: clamp(var(--text-lg), 1.7vw, var(--text-xl));
    margin-top: calc(var(--space-base) * 1.728);
    margin-bottom: calc(var(--space-base) * 0.8);
}

h3 {
    font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
    margin-bottom: var(--space-base);
}

h4 {
    font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
    margin-bottom: var(--space-base);
}

h5 {
    font-size: clamp(var(--text-base), 2.5vw, var(--text-xl));
    margin-bottom: var(--space-sm);
}

h6 {
    font-size: clamp(var(--text-sm), 2vw, var(--text-lg));
    margin-bottom: var(--space-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Layout Components */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: transparent;
    max-width: 55rem;
    margin: 0 auto;
}

.site-header {
    position: relative;
    color: var(--gold);
    padding: var(--space-xl) var(--space-xl);
    z-index: 100;
    min-height: 32vh; /* mobile-first */
}

/* Full-bleed background for header spanning entire viewport width */
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url('../images/top-bg.png') no-repeat top center;
    background-size: cover;
    z-index: -1;
}

/* Responsive header heights */
@media (min-width: 768px) {
  .site-header { min-height: 42vh; }
}

@media (min-width: 1200px) {
  .site-header { min-height: 55vh; }
}

.site-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl);
    flex-grow: 1;
    background-color: #4F6C72;
    color: var(--light-gray);
    position: relative; /* enable pseudo-element layering */
}

/* Add background image inside main.site-content at 30% opacity (70% transparent) */
/* removed yersinia background from site-content */

/* Ensure content sits above the translucent background image */
.site-content > * {
    position: relative;
    z-index: 1;
}

/* Add subtle 15% visible background pattern to content cards as well */
.post-entry,
.post-list-container {
    position: relative;
    overflow: hidden;
}

/* removed yersinia background from post-entry and list containers */

.post-entry > *,
.post-list-container > * {
    position: relative;
    z-index: 1;
}

.site-footer {
    background-color: #333;
    color: var(--gold);
    text-align: center;
    padding: var(--space-base) var(--space-xl);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: static; /* ensure nav anchors to site-header, not header-content */
}

.site-title {
    font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    line-height: var(--leading-tight);
}

.site-title a {
    text-decoration: none;
    color: var(--gold);
    transition: color 0.3s ease;
}

.site-title a:hover,
.site-title a:focus {
    color: var(--white);
    outline: none;
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    margin-left: 0; /* avoid injecting large gaps before items */
    font-size: var(--text-lg);
    font-weight: 500;
    padding: 0; /* no intrinsic link padding; bar provides padding */
    box-shadow: none;
    transition: all 0.3s ease;
    position: relative;
    background-color: transparent;
    border: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Two-row navigation layout (desktop/tablet) */
.main-nav .nav-row {
    display: flex; /* block-level so rows stack */
    align-items: center;
    gap: 0; /* remove default spacing; we'll control top row explicitly */
}

.main-nav .nav-row + .nav-row {
    margin-top: calc(var(--space-base) * 0.24);
}

/* Top row spacing closer to example */
.main-nav .nav-row-top { gap: 0 !important; }

/* Make top row items render as |label| */
.main-nav .nav-row-top a { padding: 0; margin: 0; }
.main-nav .nav-row-top a::before {
    content: '|';
    color: #ffffff;
    opacity: 0.95;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}
.main-nav .nav-row-top a::after {
    content: '|';
    color: #ffffff;
    opacity: 0.95;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

/* Container without background; rows will render their own bars */
.main-nav {
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
    font-size: 80.5%; /* enlarged by ~15% from previous 70% */
}

/* Separate red bars for each row */
.main-nav .nav-row-top,
.main-nav .nav-row-bottom {
    background-color: #A2382B;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 0.5em 1.5em; /* 1.5em horizontal padding inside bars */
    width: max-content; /* content width only, while staying block-level */
    display: flex; /* keep rows block-level */
    margin-left: auto; /* align each bar's right edge within container */
}

/* Use gap for spacing; remove per-link left margin within rows */
.main-nav .nav-row > a { margin-left: 0; }

/* Enforce exact spacing between top-row items: 1.5em between pipes */
.main-nav .nav-row-top a + a { margin-left: 1.5em !important; }

/* Add 2em before each subsequent bottom-row item (not before the first) */
.main-nav .nav-row-bottom a + a { margin-left: 2em !important; }

/* Ensure links are transparent so the bar is uninterrupted */
.main-nav .nav-row a { background-color: transparent !important; border: none !important; }
.main-nav a { font-size: inherit !important; }
.main-nav .nav-row a:hover,
.main-nav .nav-row a:focus,
.main-nav .nav-row a:active { background-color: transparent !important; }

/* Remove per-row backgrounds; container provides the band */

/* Position navigation at the bottom-right of the TOP HEADER AREA (site-header) on desktop */
@media (min-width: 768px) {
    /* Ensure positioning context is the top area */
    .site-header { position: relative; }
    /* Anchor nav to the bottom-right of the site-header */
    .main-nav {
        position: absolute;
        right: var(--space-xl);
        bottom: var(--space-xl); /* keep at bottom, not top */
        margin-top: 0;
        display: block;
        width: auto; /* anchor to right only, inside content area */
    }
    .main-nav .nav-row { justify-content: flex-end; }
    .main-nav .nav-row-top,
    .main-nav .nav-row-bottom { transform: translate(3.15em, 3.15em); }
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active {
    color: var(--gold);
    box-shadow: none;
    outline: none;
    background-color: transparent;
}

/* Content Containers */
.post-entry,
.post-list-container {
    max-width: 46.75rem;
    margin: 0 auto var(--space-2xl);
    background-color: #ffffff;
    color: var(--text-primary); /* dark text on light bg */
    padding: var(--space-2xl);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
}

/* FORCE PARENT CONTAINERS TO NOT CENTER CHILDREN */
.post-entry,
.post-list-container,
.post-list-container .post-entry {
    text-align: left !important;
    display: block !important;
    /* Remove any flexbox or grid that might center children */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align-last: left !important;
}

.post-list-container .post-entry {
    /* Make list entries visually consistent with single post width */
    background-color: #ffffff;
    color: var(--text-primary);
    padding: var(--space-2xl);
    margin: 0 0 var(--space-2xl) 0;
    box-shadow: var(--shadow-light);
    border-radius: 8px;
}

.post-separator {
    border: 0;
    height: 2px;
    background-color: var(--text-primary);
    width: 16rem;
    margin: var(--space-2xl) auto;
    opacity: 0.3;
}

/* Post Typography */
.post-entry h1 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
    color: #AA8956;
    line-height: var(--leading-tight);
    max-width: 65ch; /* Match paragraph default max-width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.45rem; /* Match paragraph margin-bottom */
    text-align: left;
}

.post-entry h1 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.post-entry h1 a:hover,
.post-entry h1 a:focus {
    color: var(--cherry-red);
    outline: none;
}

.page-heading {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

/* DISABLED - CONFLICTING WITH MAIN post-meta RULE
.post-entry .post-meta {
    margin-bottom: var(--space-2xl) !important;
    max-width: 65ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}
*/

/* DISABLED - CONFLICTING WITH MAIN post-meta RULE
.post-meta {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-weight: 500;
    line-height: var(--leading-normal);
    max-width: 65ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}
*/

/* Content Typography */
.processed-content,
.post-preview-content {
    hyphens: auto;
    word-break: break-word;
}

/* Image containers match paragraph width and position */
.processed-content .image-container,
.post-preview-content .image-container {
    display: block;
    max-width: 65ch; /* Match paragraph default max-width */
    margin: var(--space-lg) auto;
    text-align: center;
}

/* WORKING SOLUTION: Use paragraph structure for post-meta */
.post-meta {
    /* Match paragraph behavior exactly */
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-weight: 500;
    line-height: var(--leading-normal);
    margin-bottom: 0.45rem;
    
    /* Perfect alignment achieved! */
    margin-left: 1px;
}

/* SIMPLE SOLUTION: Add extra space to first paragraph of each post */
.processed-content p:first-of-type,
.post-preview-content p:first-of-type {
    margin-top: calc(var(--space-lg) * 1.28) !important;
    padding-top: calc(var(--space-lg) * 0.64) !important;
}

/* Also target first paragraph after any content */
.processed-content > p:first-child,
.post-preview-content > p:first-child {
    margin-top: calc(var(--space-lg) * 1.28) !important;
    padding-top: calc(var(--space-lg) * 0.64) !important;
}

/* Force the span to behave exactly like paragraph text */
.post-meta span,
.post-entry .post-meta span,
.post-list-container .post-meta span,
.post-list-container .post-entry .post-meta span {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 5px !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    background-color: green !important;
    color: white !important;
    border: 2px solid orange !important;
}

.processed-content p,
.post-preview-content p {
    font-family: var(--font-primary);
    font-size: clamp(var(--text-sm), 2.2vw, var(--text-base));
    line-height: var(--leading-normal);
    margin-bottom: 0.45rem; /* Reduced from --space-sm */
    color: var(--text-primary);
    max-width: 65ch; /* Default max-width for smaller screens */
    margin-left: auto;
    margin-right: auto;
}

.processed-content p + p,
.post-preview-content p + p {
    text-indent: 0;
}

.processed-content .p-with-image {
    text-indent: 0;
}

.post-content {
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-preview-content {
    /* Truncate text to 14 lines with an ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 14;
    line-clamp: 14; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
    word-break: break-word;
}

/* For previews that START with an image, show the full content */
.preview-starts-with-image {
    display: block; /* Revert to a normal block display */
    -webkit-line-clamp: unset; /* Remove the line clamp */
    line-clamp: unset; /* Standard property for compatibility */
}

.read-more {
    display: block;
    margin-top: var(--space-base);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--dark-green);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.read-more:hover,
.read-more:focus {
    text-decoration: underline;
    color: var(--cherry-red);
    outline: none;
}

/* Media Elements */
.post-content img,
.gallery-item img,
.post-preview-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    box-shadow: var(--shadow-light);
}

.image-container {
    display: block;
    position: relative;
    margin: var(--space-lg) auto;
    margin-bottom: calc(var(--space-lg) * 6); /* DOUBLE extra spacing after image+prompt */
    padding-bottom: calc(var(--space-lg) * 3); /* Additional padding that can't be overridden */
    text-align: left;
    max-width: 65ch; /* Match paragraph default max-width */
    /* Ensure prompt can align with image */
    overflow: visible;
}

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

.image-container .enlarge-prompt {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-xs);
    margin-bottom: 0;
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Force alignment to right edge and prevent wrapping */
    white-space: nowrap;
    text-align: right;
}

/* Hover effect on images removed for a cleaner look - styles can be added here if needed */

.post-content iframe,
.post-content video {
    display: block;
    margin: var(--space-2xl) auto;
    max-width: 100%;
    height: auto;
}

.back-link {
    display: inline-block;
    margin-top: var(--space-xl);
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.back-link:hover,
.back-link:focus {
    text-decoration: underline;
    color: var(--white);
    outline: none;
}

/* Text Elements */
blockquote {
    font-family: var(--font-primary);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    border-left: 4px solid var(--gold);
    padding-left: var(--space-lg);
    color: var(--text-secondary);
    margin: var(--space-xl) auto;
    position: relative;
    max-width: 55ch;
}

blockquote::before {
    content: '"';
    font-size: var(--text-4xl);
    color: var(--gold);
    position: absolute;
    left: -0.25rem;
    top: -0.5rem;
    font-family: var(--font-primary);
    opacity: 0.5;
}

strong {
    font-weight: 700;
    color: var(--text-primary);
}

em {
    font-style: italic;
    font-family: var(--font-primary);
}

ul, ol {
    margin: var(--space-base) auto var(--space-base) auto;
    font-family: var(--font-primary);
    font-size: clamp(var(--text-sm), 2.2vw, var(--text-base));
    line-height: var(--leading-normal);
    max-width: 60ch;
    padding-left: var(--space-xl);
}

ul li, ol li {
    margin-bottom: var(--space-sm);
    padding-left: var(--space-xs);
}

code {
    font-family: var(--font-mono);
    background: #2d3748;
    color: #e2e8f0;
    padding: 0.125em 0.375em;
    border-radius: 4px;
    font-size: 0.875em;
    font-weight: 500;
}

pre {
    font-family: var(--font-mono);
    background: #2d3748;
    color: #e2e8f0;
    padding: var(--space-base);
    border-radius: 6px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* Focus Styles for Accessibility */
a:focus,
button:focus,
[tabindex]:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ===== RESPONSIVE DESIGN SYSTEM ===== */

/* Large Desktop Screens (1200px and up) */
@media (min-width: 1200px) {
    .site-container {
        max-width: 70rem;
        padding: 0 var(--space-base);
    }
    
    .site-content {
        max-width: 1200px;
        padding: var(--space-3xl);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .post-entry,
    .post-list-container {
        max-width: 55rem;
        padding: var(--space-3xl);
    }
    
    .header-content {
        max-width: 1200px;
        padding: 0 var(--space-lg);
    }
    
    /* Enhanced typography for large screens */
    h1 {
        font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
        margin-bottom: var(--space-lg);
        text-align: left;
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    .post-entry h1 {
        max-width: 60ch; /* Match paragraph max-width on large screens */
    }
    
    /* Image containers match paragraph width on large screens */
    .processed-content .image-container,
    .post-preview-content .image-container {
        max-width: 60ch;
    }
    
    .image-container {
        max-width: 60ch;
        margin-bottom: calc(var(--space-lg) * 6); /* DOUBLE extra spacing after image+prompt */
    }
    
    /* Force post-meta to match h1 width exactly on large screens */
    .post-meta,
    .post-entry .post-meta,
    .post-list-container .post-meta,
    .post-list-container .post-entry .post-meta {
        max-width: 60ch !important;
    }
    
    .site-title {
        font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
    }
    
    /* DISABLED - CONFLICTING WITH MAIN post-meta RULE
    .post-meta {
        font-size: var(--text-sm);
        margin-bottom: var(--space-lg);
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    
    .post-entry .post-meta {
        max-width: 60ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    */
    
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
        line-height: var(--leading-normal);
        margin-bottom: var(--space-sm);
        max-width: 60ch;
    }
    
    .post-separator {
        width: 20rem;
        margin: var(--space-3xl) auto;
    }
    
    /* Enhanced navigation for desktop */
    .main-nav a {
        font-size: var(--text-xl);
        margin-left: 0; /* keep tight spacing */
        padding: 0;
    }
    .main-nav .nav-row {
        gap: 0; /* keep bars hugging content */
    }
    /* Top row overrides: no extra spacing */
    .main-nav .nav-row-top { gap: 0 !important; }
    .main-nav .nav-row-top a { padding: 0 !important; margin: 0 !important; }
    
    /* Center images and videos on large screens */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-xl) auto;
        max-width: 90%;
    }
    
    .image-container {
        text-align: left;
        margin: var(--space-xl) auto;
        display: block;
        max-width: 60ch; /* Match paragraph width on large screens */
    }
}

/* Extra Large Desktop Screens (1400px and up) */
@media (min-width: 1400px) {
    .site-container {
        max-width: 80rem;
    }
    
    .site-content {
        max-width: 1400px;
        padding: var(--space-3xl) var(--space-2xl);
    }
    
    .post-entry,
    .post-list-container {
        max-width: 60rem;
        padding: var(--space-3xl) var(--space-2xl);
    }
    
    .header-content {
        max-width: 1400px;
        padding: 0 var(--space-xl);
    }
    
    /* Ultra-wide screen typography */
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
        line-height: var(--leading-normal);
        margin-bottom: var(--space-sm);
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    .post-entry h1 {
        font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
        text-align: left;
        margin-bottom: var(--space-lg);
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center images and videos on ultra-wide screens */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-xl) auto;
        max-width: 80%;
    }
}

/* Desktop Screens (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-content {
        max-width: 1100px;
        padding: var(--space-2xl);
    }
    
    .post-entry,
    .post-list-container {
        max-width: 48rem;
    }
    
    /* Center images and videos on regular desktop */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-xl) auto;
        max-width: 90%;
    }
    
    .image-container {
        text-align: left;
        margin: var(--space-xl) auto;
        display: block;
        max-width: 60ch; /* Match paragraph width on large screens */
    }
}

/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .site-container {
        max-width: 100%;
        padding: 0 var(--space-sm);
    }
    
    .site-content {
        max-width: 95%;
        padding: var(--space-xl) var(--space-lg);
    }
    
    .post-entry,
    .post-list-container {
        max-width: 45rem;
        padding: var(--space-xl);
        margin-bottom: var(--space-xl);
    }
    
    .header-content {
        max-width: 95%;
        padding: 0 var(--space-base);
        gap: var(--space-lg);
    }
    
    .main-nav a {
        margin-left: var(--space-lg);
        font-size: var(--text-lg);
        padding: var(--space-sm) var(--space-base);
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .main-nav a:hover,
    .main-nav a:focus,
    .main-nav a.active {
        background-color: rgba(255,193,7,0.1);
        transform: translateY(-1px);
    }
    
    /* Tablet-optimized typography */
    .post-entry h1 {
        font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
        margin-bottom: var(--space-lg);
        text-align: left;
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
        line-height: var(--leading-normal);
        margin-bottom: var(--space-sm);
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* DISABLED - CONFLICTING WITH MAIN post-meta RULE
    .post-meta {
        font-size: var(--text-sm);
        margin-bottom: var(--space-lg);
        max-width: 60ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
    
    .post-entry .post-meta {
        font-size: var(--text-sm);
        margin-bottom: var(--space-lg);
        max-width: 60ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
    */
    
    /* Better image handling on tablets */
    .image-container {
        margin: var(--space-xl) auto;
        margin-bottom: calc(var(--space-xl) * 6); /* DOUBLE extra spacing after image+prompt */
        text-align: left;
        display: inline-block;
    }
    
    .image-container img {
        max-width: 100%;
        height: auto;
        box-shadow: var(--shadow-strong);
        display: block;
    }
    
    /* Center videos and other media on tablets */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-xl) auto;
        max-width: 85%;
    }
}

/* Tablet Portrait & Small Laptop (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --space-base: 0.875rem;
        --space-lg: 1.25rem;
        --space-xl: 1.75rem;
        --space-2xl: 2.5rem;
    }

    
    .site-content {
        max-width: 100%;
        padding: var(--space-lg) var(--space-base);
    }
    
    .post-entry,
    .post-list-container {
        max-width: 100%;
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    .header-content {
        flex-direction: column;
        gap: var(--space-base);
        padding: 0 var(--space-base);
        text-align: center;
    }

    .main-nav {
        margin-top: var(--space-base);
        text-align: center;
        display: grid;
        grid-template-rows: auto auto;
        gap: var(--space-xs);
    }
    .main-nav .nav-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .main-nav a {
        margin: 0;
        font-size: var(--text-base);
        padding: var(--space-sm) var(--space-base);
        border-radius: 6px;
        background-color: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        transition: all 0.3s ease;
        min-width: 80px;
    }
    /* Make TOP row behave like bottom: no min-width/padding spacing */
    .main-nav .nav-row-top { display: flex !important; }
    .main-nav .nav-row-top a { min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
    
    .main-nav a:hover,
    .main-nav a:focus,
    .main-nav a.active {
        background-color: rgba(255,193,7,0.15);
        border-color: var(--gold);
        transform: translateY(-1px);
    }

    .site-header {
        padding: var(--space-lg) var(--space-base);
    }
    
    /* Tablet portrait typography */
    .site-title {
        font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
        margin-bottom: var(--space-sm);
    }
    
    .post-entry h1 {
        font-size: clamp(var(--text-lg), 3.8vw, var(--text-xl));
        text-align: left;
        margin-bottom: var(--space-base);
    }
    
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-sm), 2.5vw, var(--text-base));
        line-height: var(--leading-normal);
        text-align: left;
        margin-bottom: var(--space-sm);
        max-width: 60ch;
        margin-left: auto;
        margin-right: auto;
    }

    .processed-content p + p,
    .post-preview-content p + p {
        text-indent: 0;
    }
    
    /* Better spacing for tablet portrait */
    .post-separator {
        width: 14rem;
        margin: var(--space-xl) auto;
    }
    
    .image-container {
        margin: var(--space-lg) auto;
        margin-bottom: calc(var(--space-lg) * 6); /* DOUBLE extra spacing after image+prompt */
        text-align: left;
        display: block;
        max-width: 60ch; /* Match paragraph width */
    }
    
    /* Center videos on tablet portrait */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-lg) auto;
        max-width: 95%;
    }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    :root {
        --space-base: 0.75rem;
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
    }
    
    body {
        font-size: clamp(0.9rem, 2.8vw, 1rem);
        line-height: 1.6;
    }
    
    .site-content,
    .post-entry,
    .post-list-container {
        padding: var(--space-lg);
    }
    
    .site-header {
        padding: var(--space-base);
    }
    
    .header-content {
        flex-direction: column;
        gap: var(--space-sm);
        padding: 0;
        text-align: center;
    }
    
    .site-title {
        font-size: clamp(var(--text-lg), 4.5vw, var(--text-xl));
        margin-bottom: var(--space-xs);
    }
    
    .main-nav {
        margin-top: var(--space-sm);
        display: grid;
        grid-template-rows: auto auto;
        gap: var(--space-xs);
    }
    .main-nav .nav-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .main-nav a {
        margin: 0;
        font-size: var(--text-sm);
        padding: var(--space-xs) var(--space-sm);
        border-radius: 4px;
        background-color: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        min-width: 70px;
        text-align: center;
    }
    /* Make TOP row behave like bottom: no min-width/padding spacing */
    .main-nav .nav-row-top { display: flex !important; }
    .main-nav .nav-row-top a { min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
    
    .main-nav a:hover,
    .main-nav a:focus,
    .main-nav a.active {
        background-color: rgba(255,193,7,0.2);
        border-color: var(--gold);
    }
    
    /* Mobile Large Typography */
    .post-entry h1 {
        font-size: clamp(var(--text-lg), 4.2vw, var(--text-xl));
        margin-bottom: var(--space-base);
        text-align: left;
        line-height: var(--leading-tight);
    }
    
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-sm), 3.2vw, var(--text-base));
        line-height: 1.65;
        margin-bottom: var(--space-sm);
        text-align: left;
    }
    
    .processed-content p + p,
    .post-preview-content p + p {
        text-indent: var(--space-base);
    }
    
    /* DISABLED - CONFLICTING WITH MAIN post-meta RULE
    .post-meta {
        font-size: var(--text-xs);
        text-align: left !important;
        margin-bottom: var(--space-lg);
        max-width: 60ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    */
    
    .read-more {
        font-size: var(--text-xs);
        margin-top: var(--space-sm);
        display: block;
        text-align: center;
    }
    
    /* Center videos and images on mobile large */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-lg) auto;
        max-width: 100%;
    }
    
    .image-container {
        margin: var(--space-lg) auto;
        margin-bottom: calc(var(--space-lg) * 6); /* DOUBLE extra spacing after image+prompt */
        text-align: left;
        display: block;
        max-width: 60ch; /* Match paragraph width */
    }
}

/* Mobile Small (320px to 479px) */
@media (max-width: 479px) {
    :root {
        --space-base: 0.625rem;
        --space-lg: 0.875rem;
        --space-xl: 1.25rem;
        --space-2xl: 1.75rem;
    }
    
    body {
        font-size: clamp(0.875rem, 3vw, 1rem);
        line-height: 1.65;
        word-spacing: 0.1em;
    }

    .site-content,
    .post-entry,
    .post-list-container {
        padding: var(--space-base);
        margin: 0 auto var(--space-lg);
    }
    
    .site-header {
        padding: var(--space-base);
    }
    
    .header-content {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
        padding: 0 var(--space-xs);
    }
    
    .site-title {
        font-size: clamp(var(--text-lg), 5.5vw, var(--text-xl));
        line-height: var(--leading-tight);
        margin-bottom: var(--space-xs);
    }
    
    .main-nav {
        margin-top: var(--space-xs);
        display: grid;
        grid-template-rows: auto auto;
        gap: var(--space-xs);
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .main-nav .nav-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }
    /* Force TOP row to flex with no min-width to avoid wide gaps */
    .main-nav .nav-row-top { display: flex !important; grid-template-columns: none !important; }
    .main-nav .nav-row-top a { min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
    
    .main-nav a {
        margin: 0;
        font-size: clamp(var(--text-xs), 2.8vw, var(--text-sm));
        padding: var(--space-sm) var(--space-xs);
        text-align: center;
        border-radius: 6px;
        background-color: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.25);
        line-height: 1.2;
        font-weight: 500;
    }
    
    .main-nav a:hover,
    .main-nav a:focus,
    .main-nav a.active {
        background-color: rgba(255,193,7,0.25);
        border-color: var(--gold);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    /* Enhanced mobile typography */
    .post-entry h1 {
        font-size: clamp(var(--text-lg), 5vw, var(--text-xl));
        margin-bottom: var(--space-base);
        text-align: left;
        line-height: var(--leading-tight);
        word-break: break-word;
        hyphens: auto;
    }
    
    /* DISABLED - CONFLICTING WITH MAIN post-meta RULE
    .post-meta {
        font-size: clamp(var(--text-xs), 2.5vw, var(--text-sm));
        text-align: left !important;
        margin-bottom: var(--space-lg);
        color: var(--text-muted);
        max-width: 60ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    */
    
    /* Optimized content typography for mobile */
    .processed-content p,
    .post-preview-content p {
        font-size: clamp(var(--text-sm), 3.5vw, var(--text-base));
        line-height: 1.7;
        margin-bottom: var(--space-sm);
        text-align: left;
        word-spacing: 0.05em;
        hyphens: auto;
        word-break: break-word;
    }
    
    .processed-content p + p,
    .post-preview-content p + p {
        text-indent: 0;
        margin-top: var(--space-sm);
    }
    
    /* Better list typography on mobile */
    ul, ol {
        font-size: clamp(var(--text-sm), 3.2vw, var(--text-base));
        line-height: 1.6;
        margin: var(--space-base) 0 var(--space-base) var(--space-lg);
    }
    
    ul li, ol li {
        margin-bottom: var(--space-xs);
        padding-left: var(--space-xs);
    }
    
    /* Enhanced blockquote for mobile */
    blockquote {
        font-size: clamp(var(--text-sm), 3.2vw, var(--text-base));
        padding-left: var(--space-base);
        margin: var(--space-lg) 0;
        border-left-width: 3px;
    }
    
    .read-more {
        font-size: clamp(var(--text-xs), 2.8vw, var(--text-sm));
        margin-top: var(--space-base);
        display: block;
        text-align: center;
        padding: var(--space-xs) var(--space-sm);
        border-radius: 4px;
        background-color: rgba(255,255,255,0.08);
    }
    
    .post-separator {
        width: 10rem;
        margin: var(--space-xl) auto;
        height: 1px;
    }
    
    /* Better image handling on very small screens */
    .image-container {
        margin: var(--space-base) auto;
        margin-bottom: calc(var(--space-base) * 8); /* DOUBLE extra spacing after image+prompt */
        text-align: left;
        display: inline-block;
    }
    
    .image-container img {
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        display: block;
        max-width: 100%;
    }
    
    .enlarge-prompt {
        font-size: clamp(var(--text-xs), 2.2vw, var(--text-sm));
        margin-top: var(--space-xs);
        width: 100%;
        text-align: right;
    }
    
    /* Center videos and media on mobile small */
    .processed-content iframe,
    .post-preview-content iframe,
    .processed-content video,
    .post-preview-content video {
        display: block;
        margin: var(--space-base) auto;
        max-width: 100%;
        height: auto;
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .site-header {
        padding: var(--space-sm) var(--space-base);
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .main-nav {
        margin-top: 0;
        display: flex;
        gap: var(--space-xs);
    }
    
    .main-nav a {
        font-size: var(--text-xs);
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ===== HAMBURGER MENU STYLES ===== */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--space-xs);
    background: none;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.hamburger:hover {
    background-color: rgba(255,255,255,0.1);
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--white);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Hamburger animation when active */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile navigation hidden state */
.main-nav.mobile-hidden {
    display: none !important;
}

/* Show hamburger on smaller screens */
@media (max-width: 767px) {
    .hamburger {
        display: flex;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #444;
        padding: var(--space-base);
        box-shadow: var(--shadow-strong);
        z-index: 1000;
    }
    
    .header-content {
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .main-nav.mobile-visible {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: 0;
    }
    
    .main-nav.mobile-visible a {
        padding: var(--space-sm) var(--space-base);
        margin: 0;
        text-align: center;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.1);
        background-color: rgba(255,255,255,0.05);
    }
}

/* ===== CONTAINER IMPROVEMENTS ===== */
.site-container {
    min-width: 320px; /* Prevent horizontal scroll on very small devices */
}

/* Removed global fixed bottom-right nav. Nav is positioned within header on desktop via the media query above. */

/* Better image container responsiveness */
.image-container {
    display: block;
    position: relative;
    margin: var(--space-lg) auto;
    margin-bottom: calc(var(--space-lg) * 3); /* Extra spacing after image+prompt */
    text-align: left;
    max-width: 65ch; /* Match paragraph default max-width */
}

.image-container img {
    transition: transform 0.3s ease;
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hamburger span {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .main-nav a {
        border: 2px solid currentColor;
    }
    
    .hamburger span {
        background-color: currentColor;
    }
}

/* ===== PRINT OPTIMIZATIONS ===== */
@media print {
    .hamburger,
    .main-nav {
        display: none !important;
    }
}

/* Utility Classes for Better Typography */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lightbox Styles */
.sl-overlay {
    background: #222;
}

.enlarge-prompt {
    display: flex;
    justify-content: flex-end;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    margin-bottom: 0; /* Remove margin since first paragraph handles spacing */
    font-family: var(--font-secondary);
    line-height: 1;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Force alignment to right edge and prevent wrapping */
    white-space: nowrap;
    text-align: right;
}

/* Override for Simple Lightbox Close Button Color */
.sl-wrapper .sl-close {
    color: #999 !important;
}

/* Admin Table Styles */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-lg);
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.admin-table th,
.admin-table td {
    padding: var(--space-base);
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.admin-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
}

.admin-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Column width adjustments */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
    width: 35%; /* Reduced title column */
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
    width: 15%; /* Created date */
}

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
    width: 15%; /* Updated date */
}

.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
    width: 12%; /* Visibility status */
    text-align: center;
}

.admin-table th:nth-child(5),
.admin-table td:nth-child(5) {
    width: 23%; /* Actions - increased width */
    white-space: nowrap;
}

/* Action links styling */
.admin-table .actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: nowrap;
}

.admin-table .actions a {
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-table .actions a:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Color classes for actions */
.text-success {
    color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.1);
}

.text-warning {
    color: #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.1);
}

.text-danger {
    color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
}

.text-muted {
    color: #6c757d !important;
}

/* Visibility status styling */
.visibility-status {
    text-align: center;
    font-weight: 500;
}

/* Button styling */
.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--dark-green);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn:hover,
.btn:focus {
    background-color: var(--cherry-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    outline: none;
}

/* Print Styles */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: #000;
    }

    blockquote {
        border-left: 4px solid #000;
        color: #000;
    }

    code, pre {
        background: #f5f5f5;
        color: #000;
        border: 1px solid #ddd;
    }

    .site-header,
    .site-footer,
    .main-nav,
    .back-link {
        display: none;
    }
}