:root {
            --bg-color: #121212;
            --text-color: #fdfaf1;
            --accent-color: #ff8820;
            --secondary-text: #c0beb4;
            --font-main: 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
            --card: rgba(255, 136, 32, 0.06);
            --border: rgba(255, 136, 32, 0.2);
        }
        html { background-color: var(--bg-color); color-scheme: dark; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: transparent; color: var(--text-color); font-family: var(--font-main); line-height: 1.7; min-height: 100vh; min-height: 100svh; }
        #vanta-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background-color: var(--bg-color); }
        #vanta-bg canvas { display: block; width: 100% !important; height: 100% !important; }
        .wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }

        .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 999; padding: 0.6rem 1rem; border-radius: 4px; background: var(--accent-color); color: #121212; font-family: var(--font-mono); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease; }
        .skip-link:focus { transform: translateY(0); outline: 3px solid #121212; outline-offset: 2px; }
        .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

        nav.main-nav { margin-bottom: 4rem; }
        nav.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
        nav.main-nav a { display: inline-block; padding: 0.45rem 0.25rem; text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; transition: var(--transition); opacity: 0.78; }
        nav.main-nav a:hover, nav.main-nav a[aria-current] { opacity: 1; color: var(--accent-color); }
        nav.main-nav a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; border-radius: 2px; }

        h1 { font-family: var(--font-mono); font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; text-wrap: balance; }
        .lede { font-family: var(--font-mono); color: var(--accent-color); font-size: 1.05rem; font-weight: 500; margin-bottom: 3rem; text-wrap: balance; }

        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
        .card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; }
        .card:hover, .card:focus-within { border-color: var(--accent-color); transform: translateY(-3px); }
        .card-media { display: block; background: #0d0d0d; }
        .card-media img { display: block; width: 100%; height: 220px; object-fit: cover; }
        .card-body { padding: 1.25rem 1.35rem 1.4rem; }
        .card h2 { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; margin-bottom: 0.35rem; }
        .card h2 a { color: var(--text-color); text-decoration: none; }
        .card h2 a:hover, .card h2 a:focus-visible { color: var(--accent-color); }
        .card h2 a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
        .card p { color: var(--secondary-text); font-size: 0.92rem; }
        .meta { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-color); margin-top: 0.75rem; }

        .archive { border-top: 1px solid var(--border); padding-top: 1.5rem; }
        .archive h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: var(--accent-color); margin-bottom: 0.75rem; }
        .archive ul { list-style: none; }
        .archive a { display: inline-block; padding: 0.35rem 0; color: var(--text-color); text-decoration: none; border-bottom: 1px solid transparent; }
        .archive a:hover, .archive a:focus-visible { color: var(--accent-color); border-bottom-color: var(--accent-color); }
        .archive a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
        .archive .meta { display: inline; margin: 0 0 0 0.5rem; color: var(--secondary-text); }

        footer { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 1.5rem 3rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--secondary-text); text-align: center; }
        footer a { color: var(--secondary-text); }
        footer a:hover, footer a:focus-visible { color: var(--accent-color); }

        @media (max-width: 600px) {
            .wrap { padding: 2rem 1.25rem 3rem; }
            nav.main-nav { margin-bottom: 3rem; }
            nav.main-nav ul { gap: 0.25rem 1rem; }
            .card-media img { height: 190px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
        }