.article-header{position:relative;max-width:1600px;margin:0 auto;background:var(--color-background);border-radius:clamp(0.5rem,2vw,1rem);box-shadow:0 4px 12px rgba(0,105,148,0.15);overflow:hidden}.article-header-wave-bg{position:relative;background:linear-gradient(135deg,var(--color-background) 0%,var(--color-paper) 100%)}.article-header-wave-bg::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-primary-light);opacity:0.1;clip-path:polygon(0% 0%,100% 0%,100% 80%,80% 85%,60% 80%,40% 85%,20% 80%,0% 85%);z-index:1}.article-header-hero{position:relative;height:clamp(20rem,40vh,30rem);overflow:hidden}.article-header-image{width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}.article-header-hero:hover .article-header-image{transform:scale(1.05) translateY(-5px)}.article-header-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,105,148,0.9) 0%,rgba(0,105,148,0.3) 50%,rgba(0,105,148,0) 100%);padding:clamp(1rem,3vw,2rem);z-index:2}.article-header-title{font-family:var(--font-family-heading);font-size:clamp(var(--font-size-h1),5vw,3rem);line-height:var(--line-height-heading);color:var(--color-primary-contrast);margin:0 0 clamp(0.5rem,1vw,1rem) 0;text-shadow:0 2px 4px rgba(0,71,106,0.5);transform:translateY(20px);opacity:0;animation:slideUp 1s ease-out 0.2s forwards}.article-header-excerpt{font-family:var(--font-family-body);font-size:clamp(var(--font-size-h5),3vw,var(--font-size-h4));line-height:var(--line-height-body);color:var(--color-primary-contrast);margin:0;opacity:0.9;transform:translateY(20px);opacity:0;animation:slideUp 1s ease-out 0.4s forwards}.article-header-title-block{padding:clamp(2rem,5vw,4rem);text-align:center;background:var(--color-paper);clip-path:polygon(0% 0%,100% 0%,100% 90%,85% 95%,70% 90%,55% 95%,40% 90%,25% 95%,10% 90%,0% 95%)}.article-header-title-block .article-header-title{color:var(--color-text-primary);animation:slideUp 1s ease-out 0.2s forwards}.article-header-title-block .article-header-excerpt{color:var(--color-text-secondary);animation:slideUp 1s ease-out 0.4s forwards}.article-header-meta{padding:clamp(1rem,3vw,2rem);background:var(--color-background);border-top:1px solid var(--color-primary-light)}.article-header-meta-row{display:flex;flex-wrap:wrap;gap:clamp(0.5rem,2vw,1rem);margin-bottom:clamp(0.5rem,1vw,1rem);align-items:center}.article-header-date,.article-header-author,.article-header-reading-time{font-family:var(--font-family-body);font-size:var(--font-size-small);color:var(--color-text-secondary);padding:clamp(0.25rem,0.5vw,0.5rem);border-radius:clamp(0.25rem,0.5vw,0.5rem);background:rgba(0,105,148,0.1);transition:background 0.3s ease,transform 0.3s ease}.article-header-date:hover,.article-header-author:hover,.article-header-reading-time:hover{background:rgba(0,105,148,0.2);transform:translateY(-2px)}.article-header-categories{display:flex;flex-wrap:wrap;gap:clamp(0.5rem,1vw,1rem)}.article-header-category{font-family:var(--font-family-body);font-size:var(--font-size-small);color:var(--color-secondary);text-decoration:none;padding:clamp(0.25rem,0.5vw,0.5rem) clamp(0.5rem,1vw,1rem);border:1px solid var(--color-secondary);border-radius:clamp(0.25rem,0.5vw,0.5rem);background:rgba(46,139,87,0.1);transition:all 0.3s ease;position:relative;overflow:hidden}.article-header-category::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,rgba(46,139,87,0.2) 0%,rgba(46,139,87,0.4) 50%,rgba(46,139,87,0.2) 100%);transition:left 0.5s ease}.article-header-category:hover{color:var(--color-secondary-contrast);border-color:var(--color-secondary-dark);background:var(--color-secondary);transform:translateY(-2px)}.article-header-category:hover::before{left:100%}@keyframes slideUp{to{transform:translateY(0);opacity:1}}@media (max-width:768px){.article-header-meta-row{flex-direction:column;align-items:flex-start}.article-header-overlay{padding:clamp(0.5rem,2vw,1rem)}.article-header-title-block{padding:clamp(1rem,3vw,2rem)}}@media (max-width:480px){.article-header-wave-bg::before{clip-path:polygon(0% 0%,100% 0%,100% 85%,70% 90%,40% 85%,10% 90%,0% 95%)}.article-header-title-block{clip-path:polygon(0% 0%,100% 0%,100% 92%,80% 95%,60% 92%,40% 95%,20% 92%,0% 95%)}}.article-content-root{background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-body);line-height:var(--line-height-body);max-width:1600px;margin:0 auto;padding:clamp(1rem,4vw,2rem);border-radius:clamp(8px,2vw,16px);box-shadow:0 4px 16px rgba(0,105,148,0.1);position:relative;overflow:hidden}.article-content-root::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary),var(--color-accent));clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);opacity:0.8}.article-content-layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(1rem,4vw,2rem);align-items:start;position:relative;z-index:1}.article-content-body{background:var(--color-paper);border-radius:clamp(8px,2vw,16px);padding:clamp(1rem,3vw,2rem);box-shadow:inset 0 2px 8px rgba(0,105,148,0.05);position:relative;overflow:hidden}.article-content-body::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(to top,rgba(230,243,255,0.8),transparent);clip-path:ellipse(50% 100% at 50% 100%)}.article-content-richtext{font-size:clamp(1rem,2vw,1.125rem);line-height:var(--line-height-body)}.article-content-richtext h1,.article-content-richtext h2,.article-content-richtext h3,.article-content-richtext h4,.article-content-richtext h5,.article-content-richtext h6{font-family:var(--font-family-heading);line-height:var(--line-height-heading);margin-top:clamp(1.5rem,3vw,2rem);margin-bottom:clamp(0.5rem,1vw,1rem);position:relative}.article-content-richtext h1{font-size:clamp(1.75rem,4vw,2.5rem);color:var(--color-primary)}.article-content-richtext h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--color-secondary)}.article-content-richtext h3{font-size:clamp(1.25rem,2.5vw,1.75rem);color:var(--color-accent)}.article-content-richtext h4{font-size:clamp(1.125rem,2vw,1.5rem)}.article-content-richtext h5{font-size:clamp(1rem,1.5vw,1.25rem)}.article-content-richtext h6{font-size:clamp(0.875rem,1vw,1rem)}.article-content-richtext p{margin-bottom:clamp(0.75rem,2vw,1.5rem)}.article-content-sidebar{background:rgba(255,255,255,0.9);border-radius:clamp(8px,2vw,16px);padding:clamp(1rem,2vw,1.5rem);box-shadow:0 2px 12px rgba(0,105,148,0.15);position:sticky;top:clamp(1rem,4vw,2rem);transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.4s ease}.article-content-sidebar:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 4px 20px rgba(0,105,148,0.25)}.article-content-sidebar:focus-within{outline:2px solid var(--color-primary);outline-offset:4px}.article-content-toc-title{font-family:var(--font-family-heading);font-size:clamp(1.25rem,2vw,1.5rem);color:var(--color-primary);margin-bottom:clamp(0.75rem,1.5vw,1rem);position:relative;padding-left:24px}.article-content-toc-title::before{content:'⚓';position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:1.2em;color:var(--color-secondary)}.article-content-toc-list{font-size:clamp(0.875rem,1.5vw,1rem);color:var(--color-text-secondary)}li.toc-item{list-style:none}ul.toc-list{padding-left:0}.article-content-toc-list a{display:block;padding:clamp(0.25rem,0.5vw,0.5rem) 0;text-decoration:none;color:inherit;border-left:3px solid rgba(0,105,148,0.2);padding-left:12px;transition:border-left-color 0.3s ease,color 0.3s ease,transform 0.3s ease}.article-content-toc-list a:hover{border-left-color:var(--color-primary);color:var(--color-primary);transform:translateX(4px)}.article-content-toc-list a:focus{outline:2px solid var(--color-primary);outline-offset:2px}.article-content-toc-list a:active{transform:translateX(2px) scale(0.98)}@keyframes wave{0%{transform:translateX(0) rotate(0deg)}25%{transform:translateX(-2px) rotate(-1deg)}50%{transform:translateX(2px) rotate(1deg)}75%{transform:translateX(-1px) rotate(-0.5deg)}100%{transform:translateX(0) rotate(0deg)}}.article-content-sidebar:hover .article-content-toc-title{animation:wave 2s infinite}@media (max-width:1024px){.article-content-layout{grid-template-columns:1fr;gap:clamp(1.5rem,5vw,2.5rem)}.article-content-sidebar{position:static;order:2}}@media (max-width:768px){.article-content-root{padding:clamp(0.5rem,2vw,1rem)}.article-content-layout{gap:clamp(1rem,3vw,1.5rem)}.article-content-body,.article-content-sidebar{border-radius:clamp(6px,1.5vw,12px);padding:clamp(0.75rem,2vw,1.25rem)}}@media (max-width:480px){.article-content-richtext h1{font-size:clamp(1.5rem,5vw,2rem)}.article-content-richtext h2{font-size:clamp(1.25rem,4vw,1.75rem)}.article-content-sidebar{margin-top:clamp(1rem,3vw,1.5rem)}}.article-author-box-container{--_border-radius:clamp(8px,2vw,16px);--_padding:clamp(16px,4vw,32px);--_margin-bottom:clamp(8px,2vw,16px);--_shadow:0 4px 12px rgba(0,105,148,0.15);--_wave-offset:20px;max-width:1600px;margin:0 auto;background-color:var(--color-background-paper);border-radius:var(--_border-radius);padding:var(--_padding);box-shadow:var(--_shadow);position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 90%,95% 100%,5% 100%,0 90%);transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.6s ease}.article-author-box-container:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(0,105,148,0.25)}.article-author-box-header{margin-bottom:var(--_margin-bottom);position:relative}.article-author-box-title{font-family:var(--font-family-heading);font-size:clamp(1.25rem,3vw,1.75rem);line-height:var(--line-height-heading);color:var(--color-primary);margin:0;position:relative;display:inline-block}.article-author-box-title::before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--color-secondary);transition:width 0.4s ease}.article-author-box-container:hover .article-author-box-title::before{width:100%}.article-author-box-content{display:flex;align-items:center;gap:clamp(12px,3vw,24px);flex-direction:row}.article-author-box-avatar{flex-shrink:0;width:clamp(60px,15vw,120px);height:clamp(60px,15vw,120px);border-radius:50%;overflow:hidden;border:2px solid var(--color-primary-light);transition:transform 0.5s ease,border-color 0.5s ease}.article-author-box-container:hover .article-author-box-avatar{transform:rotate(5deg) scale(1.05);border-color:var(--color-accent)}.article-author-box-image{width:100%;height:100%;object-fit:cover;transition:filter 0.5s ease}.article-author-box-container:hover .article-author-box-image{filter:brightness(1.1) contrast(1.05)}.article-author-box-details{flex:1;min-width:0}.article-author-box-name{font-family:var(--font-family-heading);font-size:clamp(1rem,2.5vw,1.25rem);line-height:var(--line-height-heading);color:var(--color-text-primary);margin-bottom:var(--_margin-bottom);font-weight:600}.article-author-box-bio{font-family:var(--font-family-body);font-size:clamp(0.875rem,2vw,1rem);line-height:var(--line-height-body);color:var(--color-text-secondary);margin:0}@media (max-width:768px){.article-author-box-content{flex-direction:column;text-align:center}}@media (max-width:480px){.article-author-box-container{padding:clamp(12px,3vw,20px)}}.article-related-articles-container{max-width:1600px;margin:0 auto;padding:clamp(2rem,4vw,4rem) clamp(1rem,3vw,2rem);background:var(--color-background);position:relative;overflow:hidden}.article-related-articles-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(0,105,148,0.05) 50%,rgba(255,255,255,0.1) 100%);clip-path:ellipse(80% 60% at 50% 50%);z-index:-1}.article-related-articles-wave-pattern{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(280px,20vw,400px),1fr));gap:clamp(1.5rem,3vw,3rem);position:relative}.article-related-articles-card{background:var(--color-paper);border-radius:clamp(0.5rem,2vw,1.5rem);box-shadow:0 4px 12px rgba(0,0,0,0.1),0 2px 6px rgba(0,105,148,0.15);overflow:hidden;transform:translateY(0);transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.6s ease;position:relative}.article-related-articles-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary-light),var(--color-secondary-light),var(--color-accent-light));transform:scaleX(0);transition:transform 0.5s ease;z-index:1}.article-related-articles-card:hover{transform:translateY(-8px) rotateX(5deg);box-shadow:0 8px 24px rgba(0,0,0,0.15),0 4px 12px rgba(0,105,148,0.2)}.article-related-articles-card:hover::after{transform:scaleX(1)}.article-related-articles-link{display:block;text-decoration:none;color:inherit;transition:color 0.3s ease}.article-related-articles-link:focus{outline:2px solid var(--color-primary);outline-offset:4px}.article-related-articles-image-wrapper{position:relative;overflow:hidden;height:clamp(150px,25vw,250px)}.article-related-articles-image{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}.article-related-articles-card:hover .article-related-articles-image{transform:scale(1.05)}.article-related-articles-content{padding:clamp(1rem,2vw,1.5rem)}.article-related-articles-title{font-family:var(--font-family-heading);font-size:clamp(var(--font-size-h5),1.2rem,var(--font-size-h4));line-height:var(--line-height-heading);color:var(--color-text-primary);margin:0 0 clamp(0.5rem,1vw,1rem) 0;transition:color 0.3s ease}.article-related-articles-card:hover .article-related-articles-title{color:var(--color-primary)}.article-related-articles-excerpt{font-family:var(--font-family-body);font-size:clamp(var(--font-size-small),1rem,var(--font-size-base));line-height:var(--line-height-body);color:var(--color-text-secondary);margin:0}@media (max-width:768px){.article-related-articles-wave-pattern{grid-template-columns:1fr}}.article-comments-section-container{--_wave-border-radius:clamp(1rem,4vw,2rem);--_shadow-blur:clamp(0.5rem,2vw,1rem);--_padding-block:clamp(2rem,5vw,4rem);--_padding-inline:clamp(1rem,3vw,2rem);max-width:1600px;margin:0 auto;padding:var(--_padding-block) var(--_padding-inline);background:linear-gradient(135deg,var(--color-background-paper) 0%,rgba(173,216,230,0.6) 50%,var(--color-background-paper) 100%);border-radius:var(--_wave-border-radius);box-shadow:0 4px var(--_shadow-blur) rgba(0,105,148,0.2);clip-path:polygon(0% 0%,100% 0%,95% 20%,100% 40%,90% 60%,100% 80%,85% 100%,0% 100%,10% 80%,0% 60%,15% 40%,0% 20%);transition:box-shadow 0.5s cubic-bezier(0.25,0.46,0.45,0.94),clip-path 0.6s ease-in-out}.article-comments-section-container:hover{box-shadow:0 8px clamp(1rem,3vw,1.5rem) rgba(0,105,148,0.4);clip-path:polygon(0% 0%,100% 0%,98% 15%,100% 35%,95% 55%,100% 75%,90% 100%,0% 100%,8% 85%,0% 65%,12% 45%,0% 25%)}.article-comments-section-form-wrapper{display:flex;justify-content:center;align-items:center;min-height:clamp(10rem,20vw,15rem)}.article-comments-section-form{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);width:100%;max-width:clamp(20rem,50vw,30rem);padding:var(--_padding-block) var(--_padding-inline);background:var(--color-paper);border-radius:var(--_wave-border-radius);box-shadow:inset 0 2px var(--_shadow-blur) rgba(0,105,148,0.1);transition:box-shadow 0.4s ease}.article-comments-section-form:focus-within{box-shadow:inset 0 4px clamp(0.5rem,1.5vw,1rem) rgba(0,105,148,0.2)}.article-comments-section-submit-btn{--_btn-padding:clamp(0.75rem,2vw,1.25rem);--_btn-font-size:clamp(1rem,2.5vw,1.25rem);align-self:flex-end;padding:var(--_btn-padding);font-family:var(--font-family-heading);font-size:var(--_btn-font-size);line-height:var(--line-height-heading);color:var(--color-primary-contrast);background:linear-gradient(45deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border:2px solid var(--color-primary-dark);border-radius:var(--_wave-border-radius);cursor:pointer;transition:transform 0.3s cubic-bezier(0.68,-0.55,0.265,1.55),background 0.3s ease,box-shadow 0.3s ease;box-shadow:0 2px var(--_shadow-blur) rgba(0,0,0,0.1)}.article-comments-section-submit-btn:hover{transform:translateY(-2px) scale(1.05);background:linear-gradient(45deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);box-shadow:0 4px clamp(0.5rem,1.5vw,1rem) rgba(0,0,0,0.2)}.article-comments-section-submit-btn:focus{outline:2px solid var(--color-accent);outline-offset:2px}.article-comments-section-submit-btn:active{transform:translateY(0) scale(1)}@media (max-width:768px){.article-comments-section-container{padding:clamp(1.5rem,4vw,3rem) clamp(0.75rem,2vw,1.5rem)}.article-comments-section-form-wrapper{flex-direction:column}.article-comments-section-submit-btn{align-self:center}}@media (max-width:480px){.article-comments-section-container{clip-path:none;border-radius:clamp(0.5rem,2vw,1rem)}.article-comments-section-container:hover{clip-path:none}.article-comments-section-form{max-width:100%;padding:clamp(1rem,3vw,2rem) clamp(0.5rem,1.5vw,1rem)}}