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

        :root {
            --bg: #FFFFFF;
            --text-primary: #1A1A1A;
            --text-secondary: #D1D1D1;
            --accent: #FF5C00;
            --sidebar-w: 300px;
            --font-main: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Inter", sans-serif;
            --font-serif: "Source Serif 4", serif;
        }

        body {
            background: var(--bg);
            color: var(--text-primary);
            font-family: var(--font-main);
            -webkit-font-smoothing: antialiased;
            overflow: hidden;
        }

        .layout-wrapper {
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        /* ─── MAIN CONTENT ─── */
        .scroll-container {
            flex: 1;
            margin-left: var(--sidebar-w);
            height: 100vh;
            overflow-y: auto;
            scroll-behavior: smooth;
        }

        main {
            display: flex;
            justify-content: center;
            padding: 64px 40px 120px 40px;
        }

        .article-wrapper {
            max-width: 540px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 48px;
        }

        .back-btn-circular {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            background: transparent;
            color: var(--text-primary);
            text-decoration: none;
            border: none;
            cursor: pointer;
        }

        .back-btn-circular:hover {
            background: transparent;
            color: var(--accent);
        }

        .back-btn-circular:active {
            transform: scale(0.97);
        }

        .back-btn-circular svg {
            width: 16px;
            height: 16px;
        }

        .article-header h1 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 4px;
            color: var(--text-primary);
        }

        .article-subtitle {
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .article-date {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .article-body {
            font-family: var(--font-serif);
            font-size: 16px;
            line-height: 1.7;
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            gap: 24px;
        }