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

 body {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
     background-color: #ffffff;
     color: #1e2b37;
     line-height: 1.5;
     font-size: 1rem;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

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

 ul,
 li {
     list-style: none;
 }

 main {
     flex: 1;
 }

 .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
 }

 .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 }

 .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
 }

 .line-clamp-4 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
 }


 .site-header {
     background: rgba(255, 255, 255, 0.95);
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
     position: sticky;
     top: 0;
     z-index: 100;
     backdrop-filter: blur(4px);
     transition: background 0.3s ease, box-shadow 0.3s ease;
 }


 .site-header.scrolled {
     background: rgba(255, 255, 255, 0.98);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 70px;
 }

 .logo a {
     font-size: 1.8rem;
     font-weight: 600;
     letter-spacing: -0.5px;
     text-decoration: none;
     color: #0f2a3f;
 }

 .logo span {
     color: #c93e3e;
     font-weight: 500;
 }

 .main-nav ul {
     display: flex;
     gap: 2rem;
     list-style: none;
 }

 .main-nav a {
     text-decoration: none;
     color: #2d3f4e;
     font-weight: 500;
     font-size: 1.05rem;
     transition: color 0.2s, border-bottom 0.2s;
     padding-bottom: 4px;
     border-bottom: 2px solid transparent;
 }

 .main-nav a:hover,
 .main-nav a.active {
     color: #c93e3e;
     border-bottom-color: #c93e3e;
 }

 .hamburger {
     display: none;
     background: none;
     border: 1px solid #ddd;
     font-size: 1.4rem;
     cursor: pointer;
     padding: 4px 16px;
     border-radius: 8px;
     color: #2d3f4e;
 }

 /* --- top announcement --- */
 .top-announcement {
     background-color: #f6f8fa;
     padding: 12px 0;
     border-bottom: 1px solid #eaeef2;
     font-size: 0.95rem;
 }

 .top-announcement p {
     text-align: center;
 }

 .top-announcement a {
     color: #c93e3e;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
 }

 /* --- sections & cards general --- */
 .section {
     padding: 48px 0;
     border-bottom: 1px solid #f0f3f7;
 }

 .section-title {
     font-size: 2rem;
     font-weight: 600;
     margin-bottom: 36px;
     letter-spacing: -0.02em;
     border-left: 6px solid #c93e3e;
     padding-left: 20px;
     color: #102331;
 }

 /* horizontal card (featured) */
 .card-grid-horizontal {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .card-horizontal {
     display: flex;
     gap: 25px;
     background: #ffffff;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
     transition: all 0.3s ease;
     border: 1px solid #f0f0f0;
 }

 .card-horizontal:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.1);
     border-color: #dbe4ec;
 }

 .card-horizontal .card-img {
     flex: 0 0 280px;
     aspect-ratio: 4 / 3;
     overflow: hidden;
 }

 .card-horizontal .card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
 }

 .card-horizontal:hover .card-img img {
     transform: scale(1.03);
 }

 .card-horizontal .card-content {
     flex: 1;
     padding: 20px 20px 20px 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .card-tag {
     display: inline-block;
     background: #eef3f9;
     color: #c93e3e;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 4px 12px;
     border-radius: 30px;
     margin-bottom: 12px;
     width: fit-content;
 }

 .card-tag.special {
     background: #c93e3e;
     color: white;
 }

 .card-content h3 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 12px;
     line-height: 1.3;
 }

 .card-content h3 a {
     text-decoration: none;
     color: inherit;
     transition: color 0.2s;
 }

 .card-content h3 a:hover {
     color: #c93e3e;
 }

 .card-excerpt {
     color: #4a5b6a;
     margin-bottom: 16px;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .card-meta {
     font-size: 0.9rem;
     color: #6b7c8b;
 }


 .category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
     gap: 24px;
 }

 .category-item {
     background: #f9fbfd;
     border-radius: 24px;
     padding: 28px 16px;
     text-align: center;
     text-decoration: none;
     color: inherit;
     border: 1px solid #edf2f7;
     transition: all 0.3s;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .category-item:hover {
     background: #ffffff;
     transform: translateY(-5px);
     border-color: #c93e3e30;
     box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.15);
 }

 .cat-emoji {
     font-size: 2.6rem;
     margin-bottom: 12px;
     filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.05));
 }

 .category-item h4 {
     font-size: 1.3rem;
     font-weight: 600;
     margin-bottom: 6px;
 }

 .category-item p {
     font-size: 0.9rem;
     color: #607586;
     margin-bottom: 10px;
 }

 .cat-count {
     font-size: 0.8rem;
     background: #e5ecf3;
     padding: 3px 10px;
     border-radius: 50px;
     color: #2d4d6e;
 }

 /* vertical double (special reports) */
 .card-grid-vertical-double {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
 }

 .card-vertical {
     background: white;
     border-radius: 24px;
     overflow: hidden;
     border: 1px solid #eff3f8;
     transition: all 0.3s;
 }

 .card-vertical:hover {
     transform: scale(1.02);
     box-shadow: 0 25px 30px -15px rgba(0, 0, 0, 0.1);
 }

 .card-vertical .card-img {
     aspect-ratio: 4 / 3;
     overflow: hidden;
 }

 .card-vertical .card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
 }

 .card-vertical:hover .card-img img {
     transform: scale(1.05);
 }

 .card-vertical .card-content {
     padding: 24px 20px 28px;
 }

 .card-vertical .card-content h3 {
     font-size: 1.3rem;
     margin: 12px 0 10px;
 }

 /* latest news list */
 .news-list {
     background: #fafcfe;
     border-radius: 28px;
     padding: 16px 24px;
     border: 1px solid #e9eef3;
 }

 .list-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 0;
     border-bottom: 1px solid #e6edf3;
 }

 .list-item:last-child {
     border-bottom: none;
 }

 .list-item h4 {
     font-size: 1.15rem;
     font-weight: 500;
 }

 .list-item a {
     text-decoration: none;
     color: #1f3445;
     transition: color 0.2s;
 }

 .list-item a:hover {
     color: #c93e3e;
 }

 .list-meta {
     color: #6f889b;
     font-size: 0.85rem;
     white-space: nowrap;
     margin-left: 16px;
 }

 /* trending topics cloud */
 .topic-cloud {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
 }

 .topic {
     background: #f0f4fa;
     padding: 8px 22px;
     border-radius: 40px;
     font-size: 0.95rem;
     font-weight: 500;
     color: #1e364b;
     text-decoration: none;
     transition: background 0.2s, transform 0.2s;
     border: 1px solid transparent;
 }

 .topic:hover {
     background: #c93e3e;
     color: white;
     transform: translateY(-2px);
 }

 /* --- footer --- */
 .site-footer {
     background-color: #152b3c;
     color: #dfe9f0;
     margin-top: 60px;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1.5fr;
     gap: 30px;
     margin-bottom: 40px;
 }

 .footer-col .logo {
     font-size: 2rem;
     color: white;
     margin-bottom: 16px;
 }

 .footer-col .logo span {
     color: #fc7b7b;
 }

 .footer-col h4 {
     color: white;
     margin-bottom: 20px;
     font-size: 1.2rem;
 }

 .footer-col ul {
     list-style: none;
 }

 .footer-col ul li {
     margin-bottom: 12px;
 }

 .footer-col a {
     color: #b7d0e0;
     text-decoration: none;
     transition: color 0.2s;
 }

 .footer-col a:hover {
     color: #fc7b7b;
 }

 .social-links {
     display: flex;
     gap: 20px;
     font-size: 1.5rem;
 }

 .footer-bottom {
     padding: 20px 0;
     text-align: center;
     font-size: 0.9rem;
     color: #98b2c4;
 }

 .footer-bottom p {
     text-align: center;
     margin: 0;
 }

 .footer-bottom a {
     font-size: 0.9rem;
     color: #98b2c4;
 }

 /* --- back to top --- */
 .back-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     border-radius: 30px;
     background: #c93e3e;
     color: white;
     border: none;
     font-size: 1.8rem;
     cursor: pointer;
     box-shadow: 0 6px 14px rgba(201, 62, 62, 0.3);
     opacity: 0;
     visibility: hidden;
     transition: 0.2s;
     z-index: 99;
 }

 .back-to-top.visible {
     opacity: 1;
     visibility: visible;
 }

 /* ===== category page specifics ===== */
 .category-header {
     padding: 20px 0 20px;
 }

 .category-header h1 {
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 8px;
     color: #11212e;
 }

 .category-header p {
     font-size: 1.2rem;
     color: #4c6578;
     max-width: 700px;
 }

 /* Breadcrumbs */
 .breadcrumb-nav {
     padding: 20px 0 10px;
 }

 .breadcrumb-nav ol {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     background: #f6f9fc;
     padding: 10px 18px;
     border-radius: 50px;
     gap: 8px;
     font-size: 0.95rem;
 }

 .breadcrumb-nav li {
     display: flex;
     align-items: center;
 }

 .breadcrumb-nav li:not(:last-child)::after {
     content: "›";
     margin-left: 8px;
     color: #8fa6b9;
 }

 .breadcrumb-nav a {
     color: #c93e3e;
     text-decoration: none;
     font-weight: 500;
 }

 .breadcrumb-nav a:hover {
     text-decoration: underline;
 }

 .breadcrumb-nav li[aria-current="page"] {
     color: #2b4b6b;
     font-weight: 500;
 }

 /* Two column layout */
 .two-col-layout {
     display: grid;
     grid-template-columns: 70% 28%;
     gap: 40px;
     margin-top: 20px;
 }

 .main-content {
     min-width: 0;
 }

 .cards-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
     margin-bottom: 40px;
 }

 /* Pagination */
 .pagination {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     justify-content: center;
     margin: 40px 0 20px;
 }

 .page-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 40px;
     height: 40px;
     padding: 0 10px;
     border-radius: 40px;
     background: white;
     border: 1px solid #e0e8f0;
     color: #1f3b54;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.2s;
 }

 .page-link:hover {
     background: #f0f5fb;
     border-color: #c93e3e;
     color: #c93e3e;
 }

 .page-link.active {
     background: #c93e3e;
     color: white;
     border-color: #c93e3e;
 }

 .page-link.prev,
 .page-link.next {
     padding: 0 16px;
 }

 .page-link.dots {
     border: none;
     background: transparent;
     pointer-events: none;
 }

 /* Sidebar widgets (extended) */
 .sidebar-widget {
     background: #f8fbfe;
     border-radius: 24px;
     padding: 24px 20px;
     margin-bottom: 30px;
     border: 1px solid #e7edf5;
 }

 .sidebar-widget h4 {
     margin-bottom: 18px;
     font-size: 1.2rem;
     border-left: 3px solid #c93e3e;
     padding-left: 14px;
 }

 .author-card {
     text-align: center;
 }

 .author-avatar {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     margin: 0 auto 16px;
     border: 3px solid white;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
 }

 .author-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-card h4 {
     border-left: none;
     padding-left: 0;
     margin-bottom: 10px;
     font-size: 1.4rem;
 }

 .author-bio {
     color: #4e6d86;
     font-size: 0.95rem;
     line-height: 1.5;
 }

 /* Post list for related / latest */
 .post-list {
     list-style: none;
 }

 .post-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 0;
     border-bottom: 1px dashed #dae2ec;
 }

 .post-list li:last-child {
     border-bottom: none;
 }

 .post-list a {
     text-decoration: none;
     color: #1d3e5b;
     font-weight: 500;
     flex: 1;
     transition: color 0.2s;
 }

 .post-list a:hover {
     color: #c93e3e;
 }

 .post-date {
     font-size: 0.8rem;
     color: #7b95ad;
     white-space: nowrap;
     margin-left: 12px;
 }

 /* ===== Article page specific styles ===== */
 .article-main {
     padding: 0 0 40px;
 }

 .article-header {
     margin-bottom: 30px;
 }

 .article-header h1 {
     font-size: 3rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 16px;
     color: #0b2637;
 }

 .article-subhead {
     font-size: 1.3rem;
     color: #4b677e;
     margin-bottom: 24px;
     font-weight: 400;
 }

 .article-meta {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
     color: #607e99;
     font-size: 0.95rem;
 }

 .author-mini {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .author-mini-avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     object-fit: cover;
 }

 .author-mini-name {
     font-weight: 600;
     color: #1f3d5a;
 }

 .meta-separator {
     color: #b7ccdd;
 }

 .article-inline-img {
     aspect-ratio: 4 / 3;
     border-radius: 24px;
     overflow: hidden;
     margin: 30px 0;
 }

 .article-inline-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .article-body {
     font-size: 0.985rem;
     letter-spacing: 0.2px;
     color: #171717;
     line-height: 1.75;
     max-width: 800px;
     margin: 0 0 40px;
 }

 .article-body p {
     margin-bottom: 1.8rem;
 }

 .article-body img {
     margin: 0 auto;
 }

 .author-bio-block {
     display: flex;
     gap: 24px;
     background: #f1f7fd;
     border-radius: 28px;
     padding: 28px;
     margin: 40px 0;
     align-items: center;
 }

 .author-bio-avatar {
     flex-shrink: 0;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid white;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
 }

 .author-bio-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-bio-text h4 {
     font-size: 1.6rem;
     margin-bottom: 8px;
     color: #112b3f;
 }

 .author-bio-text p {
     color: #3e5d78;
     line-height: 1.6;
 }

 .share-block {
     background: #f5f9ff;
     border-radius: 48px;
     padding: 20px 30px;
     display: flex;
     align-items: center;
     gap: 25px;
     flex-wrap: wrap;
     margin: 50px 0 40px;
 }

 .share-label {
     font-weight: 600;
     color: #2b4c6b;
 }

 .share-buttons {
     display: flex;
     gap: 12px;
 }

 .share-btn {
     background: white;
     border: 1px solid #d0deec;
     width: 48px;
     height: 48px;
     border-radius: 48px;
     font-size: 1.4rem;
     cursor: pointer;
     transition: 0.2s;
     color: #25475f;
 }

 .share-btn:hover {
     background: #c93e3e;
     border-color: #c93e3e;
     color: white;
 }

 .comments-section {
     margin-top: 40px;
 }

 .comments-section h3 {
     font-size: 1.8rem;
     margin-bottom: 30px;
     border-left: 5px solid #c93e3e;
     padding-left: 18px;
 }

 .comment {
     display: flex;
     gap: 18px;
     margin-bottom: 25px;
     background: #f6fafd;
     padding: 20px;
     border-radius: 24px;
 }

 .comment-avatar {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     overflow: hidden;
 }

 .comment-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .comment-content {
     flex: 1;
 }

 .comment-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
     font-size: 1rem;
 }

 .comment-header strong {
     color: #1f3c58;
 }

 .comment-date {
     color: #7a98b2;
     font-size: 0.85rem;
 }

 .comment-content p {
     color: #2f4a64;
     line-height: 1.5;
 }

 .comment-form-static {
     background: #f1f7fc;
     border-radius: 28px;
     padding: 30px;
     margin-top: 40px;
 }

 .comment-form-static h4 {
     font-size: 1.3rem;
     margin-bottom: 20px;
 }

 .comment-form-static input,
 .comment-form-static textarea {
     width: 100%;
     padding: 14px 18px;
     border: 1px solid #d2e0ec;
     border-radius: 40px;
     margin-bottom: 20px;
     background: white;
     font-family: inherit;
 }

 .comment-form-static button {
     background: #c93e3e;
     color: white;
     border: none;
     padding: 12px 30px;
     border-radius: 40px;
     font-weight: 600;
     opacity: 0.7;
     cursor: default;
 }

 .form-note {
     font-size: 0.85rem;
     margin-top: 12px;
     color: #7e95ab;
 }

 .related-articles {
     margin-top: 60px;
 }

 .related-articles h3 {
     font-size: 1.8rem;
     margin-bottom: 30px;
     border-left: 5px solid #c93e3e;
     padding-left: 18px;
 }

 .related-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 /* ===== Author page specific styles ===== */
 .author-main {
     padding: 0 0 60px;
 }

 .author-full {
     max-width: 1000px;
     margin: 0 auto;
 }

 .author-header-card {
     display: flex;
     gap: 40px;
     background: #f8fcff;
     border-radius: 40px;
     padding: 40px;
     margin: 20px 0 40px;
     border: 1px solid #e5eef7;
     box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.05);
 }

 .author-header-avatar {
     flex-shrink: 0;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     overflow: hidden;
     border: 5px solid white;
     box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.15);
 }

 .author-header-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-header-info h1 {
     font-size: 2.6rem;
     font-weight: 700;
     margin-bottom: 8px;
     color: #112433;
 }

 .author-header-title {
     font-size: 1.3rem;
     color: #c93e3e;
     font-weight: 500;
     margin-bottom: 16px;
 }

 .author-header-meta {
     display: flex;
     gap: 25px;
     flex-wrap: wrap;
     margin-bottom: 20px;
     font-size: 0.95rem;
     color: #52738c;
 }

 .author-header-meta span {
     background: #eef4f9;
     padding: 4px 14px;
     border-radius: 30px;
 }

 .author-header-bio {
     font-size: 1.1rem;
     color: #2d4b67;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .author-header-social {
     display: flex;
     gap: 15px;
 }

 .social-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: white;
     border: 1px solid #d9e4ef;
     color: #25475f;
     font-size: 1.4rem;
     text-decoration: none;
     transition: all 0.2s;
 }

 .social-icon:hover {
     background: #c93e3e;
     border-color: #c93e3e;
     color: white;
     transform: translateY(-3px);
 }

 .author-detailed-bio {
     margin: 40px 0;
     background: #ffffff;
     border-radius: 32px;
     padding: 40px;
     border: 1px solid #edf3f9;
 }

 .author-detailed-bio h2 {
     font-size: 1.8rem;
     margin-bottom: 24px;
     border-left: 5px solid #c93e3e;
     padding-left: 18px;
 }

 .author-detailed-bio p {
     font-size: 1.1rem;
     color: #274e6b;
     line-height: 1.7;
     margin-bottom: 1.6rem;
 }

 .author-articles {
     margin-top: 40px;
 }

 .author-articles h2 {
     font-size: 1.8rem;
     margin-bottom: 30px;
     border-left: 5px solid #c93e3e;
     padding-left: 18px;
 }

 /* ===== Responsive adjustments ===== */
 @media (max-width: 900px) {
     .two-col-layout {
         grid-template-columns: 100%;
     }

     .card-grid-vertical-double {
         grid-template-columns: 1fr;
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr;
     }

     .cards-grid {
         grid-template-columns: 1fr;
     }

     .related-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .article-meta {
         font-size: 0.7rem;
         gap: 0.5rem;
     }

     .author-mini-avatar{
        display: none;
     }

     .site-header {
         position: relative;
     }

     .header-container {
         height: 54px;
     }

     .section {
         padding: 30px 0;
     }

     .category-header {
         padding: 0;
     }

     .category-header h1 {
         font-size: 1.4rem;
         margin: 0;
     }

     .hamburger {
         display: block;
     }

     .main-nav {
         position: absolute;
         top: 54px;
         left: 0;
         width: 100%;
         background: white;
         box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
         padding: 0 24px;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease-out;
     }

     .main-nav.active {
         max-height: 350px;
     }

     .main-nav ul {
         flex-direction: column;
         gap: 1rem;
         padding: 20px 0;
     }

     .card-horizontal {
         flex-direction: column;
     }

     .card-horizontal .card-img {
         flex: auto;
         width: 100%;
     }

     .card-horizontal .card-content {
         padding: 0 20px 20px;
     }

     .footer-grid {
         grid-template-columns: 1fr;
     }

     .article-header h1 {
         font-size: 1.4rem;
     }

     .author-bio-block {
         flex-direction: column;
         text-align: center;
     }

     .related-grid {
         grid-template-columns: 1fr;
     }

     .comment {
         flex-direction: column;
         align-items: flex-start;
     }

     .comment-avatar {
         width: 40px;
         height: 40px;
     }

     .share-block {
         flex-direction: column;
         align-items: flex-start;
     }

     .author-header-card {
         flex-direction: column;
         align-items: center;
         text-align: center;
         padding: 30px 20px;
     }

     .author-header-avatar {
         width: 140px;
         height: 140px;
     }

     .author-header-meta {
         justify-content: center;
     }

     .author-header-social {
         justify-content: center;
     }

     .author-detailed-bio {
         padding: 25px;
     }
 }