html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main.blog-page { flex: 1 0 auto; }
.blog-page { max-width: 900px; margin: 0 auto; padding: 6rem 2rem 3rem; }
.blog-list-section .section-title { margin-bottom: 1rem; }
.blog-list-section .blog-list { display: flex; flex-direction: column; gap: 1rem; }
.blog-list-section .blog-card {
  cursor: pointer; text-decoration: none; color: inherit; display: block;
  background: var(--parchment); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-list-section .blog-card:hover { border-color: var(--yellow); box-shadow: 0 4px 12px rgba(61, 44, 41, 0.08); }
.blog-article-section { padding-top: 5rem; }
.blog-back { display: inline-block; margin-bottom: 1.5rem; padding: 0.5rem 0; background: none; border: none; cursor: pointer; color: var(--brown-muted); font-family: var(--font-body); font-size: 1.05rem; }
.blog-back:hover { color: var(--yellow-bright); }
.blog-article-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.5rem; color: var(--brown); }
.blog-article-meta { font-size: 1.05rem; color: var(--brown-muted); margin-bottom: 1.5rem; }
.blog-article-content { font-size: 1.08rem; line-height: 1.65; color: var(--brown-light); white-space: pre-wrap; margin-bottom: 2rem; }
.blog-article-attachments { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.blog-article-attachments h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 1rem; color: var(--brown); }
.attachment-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.attachment-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
.attachment-images img:hover { border-color: var(--yellow); }
.attachment-files { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.attachment-file-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--parchment-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--brown); text-decoration: none; font-size: 1rem; }
.attachment-file-link:hover { background: var(--yellow); border-color: var(--yellow); }
.lightbox-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 95vw; max-height: 90vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border: none; background: rgba(255,255,255,0.2); color: var(--white); font-size: 1.5rem; border-radius: 50%; cursor: pointer; }
.viewer-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.viewer-overlay.is-open { opacity: 1; visibility: visible; }
.viewer-content { background: var(--paper); border-radius: 12px; padding: 1.5rem; max-width: 95vw; max-height: 90vh; overflow: auto; position: relative; }
.viewer-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 36px; height: 36px; border: none; background: var(--parchment-dark); color: var(--brown); font-size: 1.25rem; border-radius: 50%; cursor: pointer; }
.viewer-content embed, .viewer-content iframe, .viewer-content video { width: 100%; min-width: 300px; height: 75vh; min-height: 400px; border: none; border-radius: 8px; }
.viewer-content audio { width: 100%; max-width: 500px; margin-top: 1rem; }
.footer { flex-shrink: 0; }