:root {
            --bg: #0a0a0a;
            --bg-soft: #141414;
            --bg-card: #1a1a1a;
            --text: #f5f5f5;
            --text-muted: #b5b5b5;
            --line: rgba(255, 255, 255, 0.14);
            --accent: #ffffff;
            --radius: 4px;
        }

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

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
            font-size: 18px;
            line-height: 1.75;
            letter-spacing: 0.01em;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        .page-wrap {
            position: relative;
            min-height: 100vh;
            background:
                radial-gradient(1200px 600px at 85% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
                radial-gradient(900px 500px at -10% 20%, rgba(255, 255, 255, 0.04), transparent 60%),
                var(--bg);
        }

        /* Hero / H1 */
        .hero {
            padding: 110px 24px 70px;
            border-bottom: 1px solid var(--line);
            text-align: left;
        }

        .container {
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
        }

        h1 {
            margin: 0;
            font-size: clamp(2.2rem, 6vw, 4.8rem);
            line-height: 1.05;
            font-weight: 300;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            hyphens: auto;
        }

        h1::after {
            content: "";
            display: block;
            width: 80px;
            height: 1px;
            margin-top: 34px;
            background: var(--accent);
        }

        /* Article */
        article {
            max-width: 820px;
            margin: 0 auto;
            padding: 70px 24px 30px;
        }

        article h2,
        article h3,
        article h4,
        article h5,
        article h6 {
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1.25;
            margin: 2.2em 0 0.8em;
        }

        article h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
        article h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
        article h4 { font-size: 1.2rem; }
        article h5, article h6 { font-size: 1.05rem; }

        article > :first-child {
            margin-top: 0;
        }

        article p {
            margin: 0 0 1.5em;
            color: var(--text-muted);
        }

        article ul,
        article ol {
            margin: 0 0 1.5em;
            padding-left: 1.4em;
            color: var(--text-muted);
        }

        article li {
            margin-bottom: 0.5em;
        }

        article a {
            color: var(--text);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 1px;
            transition: opacity 0.2s ease;
        }

        article a:hover {
            opacity: 0.7;
        }

        article blockquote {
            margin: 2em 0;
            padding: 0.4em 0 0.4em 1.6em;
            border-left: 1px solid var(--accent);
            color: var(--text);
            font-size: 1.15em;
            font-weight: 300;
        }

        article img,
        article table {
            max-width: 100%;
        }

        article table {
            border-collapse: collapse;
            width: 100%;
            display: block;
            overflow-x: auto;
        }

        article th,
        article td {
            border: 1px solid var(--line);
            padding: 10px 14px;
            text-align: left;
        }

        /* Transition paragraph */
        .transition {
            max-width: 820px;
            margin: 30px auto 0;
            padding: 40px 24px;
            border-top: 1px solid var(--line);
        }

        .transition p {
            margin: 0 0 1.4em;
            color: var(--text-muted);
            font-size: 1.05rem;
        }

        .transition p:last-child {
            margin-bottom: 0;
        }

        .transition a {
            color: var(--text);
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        /* Links block */
        .links-block {
            margin: 40px 0 0;
            padding: 70px 24px 90px;
            background: var(--bg-soft);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .links-block .container {
            max-width: 1080px;
        }

        .links-block h3 {
            margin: 56px 0 22px;
            padding-bottom: 14px;
            font-size: 1.15rem;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            border-bottom: 1px solid var(--line);
            color: var(--text);
            word-wrap: break-word;
            overflow-wrap: anywhere;
        }

        .links-block h3:first-child {
            margin-top: 0;
        }

        .links-block ul {
            list-style: none;
            margin: 0;
            padding: 0;
            columns: 2;
            column-gap: 60px;
            column-rule: 1px solid var(--line);
        }

        .links-block li {
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: anywhere;
        }

        .links-block a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 1rem;
            background-image: linear-gradient(var(--accent), var(--accent));
            background-size: 0% 1px;
            background-position: 0 100%;
            background-repeat: no-repeat;
            transition: color 0.25s ease, background-size 0.3s ease;
        }

        .links-block a:hover,
        .links-block a:focus {
            color: var(--accent);
            background-size: 100% 1px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            body {
                font-size: 17px;
            }

            .hero {
                padding: 80px 20px 50px;
            }

            article {
                padding: 50px 20px 20px;
            }

            .transition {
                padding: 32px 20px;
            }

            .links-block {
                padding: 50px 20px 60px;
            }

            .links-block ul {
                columns: 2;
                column-gap: 28px;
            }
        }

        @media (max-width: 520px) {
            body {
                font-size: 16px;
                line-height: 1.7;
            }

            .hero {
                padding: 64px 16px 40px;
            }

            h1::after {
                margin-top: 24px;
                width: 60px;
            }

            article {
                padding: 40px 16px 16px;
            }

            .transition {
                padding: 28px 16px;
            }

            .links-block {
                padding: 40px 16px 50px;
            }

            .links-block ul {
                column-gap: 18px;
            }

            .links-block a {
                font-size: 0.92rem;
            }
        }