.article-page-wrapper {
            /* PC Layout: Grid system */
            display: grid;
            /* Col 1: Empty spacer/margin
               Col 2: Sidebar (Title + TOC) 
               Col 3: Article Content (Nudged right)
               Col 4: Right margin 
            */
            grid-template-columns: 1fr 250px 600px 1fr; 
            gap: 40px;
            padding-top: 60px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* The Sidebar area (Title + Meta + TOC) */
        .article-sidebar {
            grid-column: 2;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .article-header {
            max-width: 85vw;
            margin: 15vh 10vw 0 10vw;
            text-align: left;
        }

        .article-main-title {
            font-size: 2.5rem;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .article-meta {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 40px;
        }

        /* The Sticky TOC */
        .toc-container {
            position: sticky;
            top: 100px; /* Stick below navbar */
            border-left: 2px solid #eee;
            padding-left: 20px;
        }

        .toc-title {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }

        .toc-list {
            list-style: none;
            font-weight: 600;
        }

        .toc-list li {
            margin-bottom: 8px;
        }

        .toc-list a {
            color: #c4c4c4; /* Light grey by default */
            text-decoration: none;
            transition: color 0.3s, transform 0.3s;
            display: block;
            font-size: 0.95rem;
        }

        .toc-list a:hover {
            color: rgb(93, 93, 93);
            transform: scale(1.05);
        }

        .toc-list a.active {
            color: rgb(31, 31, 31);
            font-weight: bold;
            transform: scale(1.1);
            border-left: 3px solid var(--col-menu);
            margin-left: -13px; /* Pull back to cover border */
            padding-left: 20px;
        }

        /* The Content Area */
        .article-content {
            grid-column: 3;
            /* Text alignment left */
            text-align: left; 
        }

        .legal p, .legal li {
            color: #525252f0;
        }


        .bold {
            color: #525252f0;
            font-weight: bold;
        }

        .article-content p {
            margin-bottom: 1.5em;
            font-size: 1.1rem;
        }

        .article-content ul {
            padding-left: 3vw;
        }

        .article-content h2, .article-content h3 {
            margin-top: 2em;
            margin-bottom: 0.5em;
        }

        /* Centering Media inside Article */
        .article-content img, 
        .article-content video, 
        .article-content .video-embed {
            margin-left: auto;
            margin-right: auto;
            display: block;
            max-width: 100%;
            max-height: 80vh;
            margin-bottom: 2em;
        }


/* --- 6. RESPONSIVE / MOBILE --- */
        @media (max-width: 900px) {
            
            /* Article Layout Shift */
            .article-page-wrapper {
                display: flex;
                flex-direction: column;
                padding: 20px;
            }

            /* On Mobile, TOC is after title, before content */
            .article-sidebar {
                order: 1;
                margin-bottom: 30px;
                border-bottom: 1px solid #eee;
                padding-bottom: 20px;
            }

            .article-header {
                max-width: 87vw;
                margin: 10vh 0 0 8vw;
            }

            .article-content img, 
            .article-content video, 
            .video-embed {
            max-height: 20vh;
            }

            .toc-container {
                position: static;
                border-left: none;
                padding-left: 0;
                margin-top: 20px;
                background: #f9f9f9;
                padding: 15px;
                border-radius: 8px;
            }

              .toc-list a {
                color: #444;
              }
            
              .toc-list a.active {
                border-left: none;
                margin-left: 0;
                padding-left: 0;
                transform: none;
                color: #444;
            }

            .article-content {
                order: 2;
                margin: 0 auto; /* Centered content area */
                max-width: 100%;
            }

            .article-content ul {
                padding: 0 6vw;
                max-width: 88%;
            }
            
            /* Ensure images take full width minus padding on mobile */
            .article-content img {
                width: 100%;
            }
        }