.blog-post-page{min-height:100vh;background:var(--cream)}.post-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--cream);gap:1rem}.post-loading-icon{width:2.5rem;height:2.5rem;color:var(--coral);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.post-loading p{color:var(--slate);font-size:.9375rem;font-family:var(--font-body)}.post-error{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--cream);gap:.75rem;text-align:center;padding:var(--space-4)}.post-error-icon{width:3rem;height:3rem;color:var(--coral);margin-bottom:.5rem}.post-error-title{color:var(--navy);font-family:var(--font-display);font-size:1.25rem;font-weight:600}.post-error-message{color:var(--slate);font-size:.875rem;max-width:400px}.breadcrumb-section{background:var(--navy);padding:var(--space-4) 0;border-bottom:1px solid rgba(255,255,255,.1)}.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.breadcrumb a{color:#ffffffb3;text-decoration:none;transition:color var(--transition-fast)}.breadcrumb a:hover{color:var(--coral)}.breadcrumb .separator{color:var(--khaki)}.breadcrumb .current{color:var(--white)}.article-header{background:var(--navy);padding:var(--space-8) 0 var(--space-12)}.back-link{display:inline-flex;align-items:center;gap:var(--space-2);color:#fffc;text-decoration:none;font-size:var(--text-sm);margin-bottom:var(--space-6);transition:color var(--transition-fast)}.back-link:hover{color:var(--coral)}.article-header-content{max-width:800px}.article-header h1{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--white);line-height:var(--leading-tight);margin:var(--space-4) 0 var(--space-5)}.article-description{font-size:var(--text-xl);color:#ffffffe6;line-height:var(--leading-normal);margin-bottom:var(--space-6)}.article-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}.meta-group{display:flex;gap:var(--space-5);flex-wrap:wrap}.meta-item{display:flex;align-items:center;gap:var(--space-2);color:#ffffffbf;font-size:var(--text-sm)}.share-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);color:var(--white);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base)}.share-btn:hover{background:#ffffff26;border-color:var(--coral)}.article-main{padding:var(--space-12) 0 var(--space-16);background:var(--cream)}.article-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--space-10)}.article-content{background:var(--white);border:1px solid var(--stone);border-radius:var(--radius-2xl);padding:var(--space-10);box-shadow:var(--shadow-card)}.article-hero{margin-bottom:var(--space-8)}.article-hero-image{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.08);background:var(--sand)}.article-content h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--navy);margin:var(--space-10) 0 var(--space-5);padding-top:var(--space-6);border-top:2px solid var(--stone)}.article-content h2:first-child{margin-top:0;padding-top:0;border-top:none}.article-content p{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--charcoal);margin-bottom:var(--space-5);max-width:65ch}.article-content p strong{color:var(--coral);font-weight:var(--font-semibold)}.article-content ul{margin:var(--space-6) 0;padding-left:var(--space-6)}.article-content li{font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--charcoal);margin-bottom:var(--space-3);position:relative}.article-content li::marker{color:var(--coral)}.article-content a{color:var(--coral);text-decoration:underline;text-underline-offset:2px;transition:all var(--transition-fast)}.article-content a:hover{color:var(--coral-dark)}.article-content p a,.article-content li a{color:var(--coral);font-weight:var(--font-medium)}.article-table-container{margin:var(--space-8) 0;overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--stone);-webkit-overflow-scrolling:touch}.article-table{width:100%;border-collapse:collapse;min-width:400px;background:var(--white)}.article-table th{background:var(--navy);color:var(--white);font-weight:var(--font-bold);text-align:left;padding:var(--space-4);font-size:var(--text-sm);white-space:nowrap}.article-table td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--stone);color:var(--charcoal);font-size:var(--text-sm);line-height:var(--leading-snug)}.article-table tr:hover{background:var(--sand)}@media(max-width:768px){.article-table{min-width:300px;font-size:var(--text-sm)}.article-table th,.article-table td{padding:var(--space-3);font-size:var(--text-sm)}}.article-image-container{margin:var(--space-8) 0}.article-image{width:100%;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.image-placeholder{display:flex;align-items:center;justify-content:center;background:var(--sand);border:2px dashed var(--stone);border-radius:var(--radius-xl);padding:var(--space-10);text-align:center;min-height:200px}.placeholder-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.placeholder-icon{font-size:var(--text-3xl);opacity:.5;color:var(--slate)}.image-placeholder p{margin:0;color:var(--slate);font-size:var(--text-sm)}.image-placeholder p.filename{font-family:monospace;color:var(--coral);background:var(--white);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);margin-top:var(--space-2);-webkit-user-select:all;user-select:all}.image-placeholder p.description{font-style:italic;color:var(--slate)}.image-caption{text-align:center;font-size:var(--text-sm);color:var(--slate);margin-top:var(--space-3);font-style:italic}.article-tags{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-8);margin-top:var(--space-8);border-top:1px solid var(--stone)}.article-tags svg{color:var(--coral);flex-shrink:0}.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tag{padding:var(--space-2) var(--space-3);background:var(--sand);border:1px solid var(--stone);border-radius:var(--radius-full);color:var(--charcoal);font-size:var(--text-sm);font-weight:var(--font-medium)}.article-sidebar{display:flex;flex-direction:column;gap:var(--space-6)}.sidebar-card{background:var(--white);border:1px solid var(--stone);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}.sidebar-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--navy);margin:0 0 var(--space-4)}.sidebar-card p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--charcoal);margin:0}.related-posts{display:flex;flex-direction:column;gap:var(--space-3)}.related-post{display:block;padding:var(--space-4);background:var(--sand);border:1px solid var(--stone);border-radius:var(--radius-lg);text-decoration:none;transition:all var(--transition-base)}.related-post:hover{background:var(--white);border-color:var(--coral);transform:translate(4px)}.related-post h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--navy);line-height:var(--leading-snug);margin:0 0 var(--space-2)}.related-meta{display:flex;align-items:center;gap:var(--space-2);color:var(--slate);font-size:var(--text-xs)}.post-not-found{min-height:60vh;display:flex;align-items:center;justify-content:center;background:var(--cream)}.post-not-found .container{text-align:center}.post-not-found h2{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--navy);margin-bottom:var(--space-4)}.post-not-found p{font-size:var(--text-lg);color:var(--charcoal);margin-bottom:var(--space-8)}.article-toc{background:var(--sand);border-left:4px solid var(--coral);padding:var(--space-6);border-radius:4px var(--radius-xl) var(--radius-xl) 4px;margin-bottom:var(--space-10)}.article-toc h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:1px}.article-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}.article-toc li a{color:var(--charcoal);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-fast)}.article-toc li a:hover{color:var(--coral)}.article-callout{display:flex;gap:var(--space-5);padding:var(--space-6);border-radius:var(--radius-xl);margin:var(--space-8) 0;background:var(--sand);border:1px solid var(--stone)}.callout--tip{border-left:4px solid var(--coral);background:#e85d4c0d}.callout--warning{border-left:4px solid var(--warning);background:var(--warning-light)}.callout--secret{border-left:4px solid var(--plum);background:#a855f70d}.callout--info{border-left:4px solid var(--ocean);background:#2563eb0d}.callout-icon{font-size:var(--text-2xl);flex-shrink:0}.callout-content h4{margin:0 0 var(--space-2) 0;font-size:var(--text-lg);color:var(--navy)}.callout-text{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--charcoal)}.article-highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin:var(--space-8) 0}.highlight-card{background:var(--sand);border:1px solid var(--stone);padding:var(--space-5);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-3);transition:transform var(--transition-base)}.highlight-card:hover{transform:translateY(-4px);background:var(--white);box-shadow:var(--shadow-md)}.highlight-icon{font-size:var(--text-2xl)}.highlight-content h4{margin:0 0 var(--space-1) 0;font-size:var(--text-base);color:var(--coral)}.highlight-content p{margin:0;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--charcoal)}.article-quote{position:relative;padding:var(--space-8) var(--space-12);margin:var(--space-10) 0;background:var(--sand);border-radius:var(--radius-xl);font-style:italic;border:1px solid var(--stone)}.article-quote:before{content:'"';position:absolute;top:10px;left:20px;font-size:60px;color:var(--coral);opacity:.2;font-family:Georgia,serif}.quote-content{font-size:var(--text-xl);line-height:var(--leading-normal);color:var(--navy);margin-bottom:var(--space-3)}.quote-author{display:block;font-size:var(--text-sm);color:var(--slate);text-transform:uppercase;letter-spacing:1px}.toc-sidebar{position:sticky;top:var(--space-6)}.toc-nav{display:flex;flex-direction:column;gap:var(--space-3)}.toc-link{font-size:var(--text-sm);color:var(--slate);text-decoration:none;transition:all var(--transition-fast);line-height:var(--leading-snug);padding-left:var(--space-3);border-left:2px solid transparent}.toc-link:hover{color:var(--coral);border-left-color:var(--coral);padding-left:var(--space-4)}@media(max-width:1024px){.article-layout{grid-template-columns:1fr;gap:var(--space-8)}.article-sidebar{display:none}.article-content{padding:var(--space-8)}}@media(max-width:768px){.article-header{padding:var(--space-6) 0 var(--space-8)}.article-header h1{font-size:var(--text-2xl)}.article-description{font-size:var(--text-base)}.article-main{padding:var(--space-8) 0 var(--space-12)}.article-content{padding:var(--space-5)}.article-content h2{font-size:var(--text-xl)}.article-content p,.article-content li{font-size:var(--text-base)}.article-meta{flex-direction:column;align-items:flex-start}.share-btn{width:100%;justify-content:center}.article-highlight-grid{grid-template-columns:1fr}}.auto-link{color:var(--coral);text-decoration:underline rgba(232,93,76,.3);text-underline-offset:3px;transition:all var(--transition-fast)}.auto-link:hover{color:var(--coral-dark);text-decoration-color:var(--coral)}