/* ===== CSS VARIABLES ===== */
    :root {
      --bg: #f8fafc;            /* slate-50 */
      --surface: #ffffff;        /* white */
      --text: #0f172a;           /* slate-900 */
      --muted: #475569;          /* slate-600 */
      --primary: #2563eb;        /* blue-600 */
      --primary-ink: #ffffff;
      --accent: #22c55e;         /* green-500 */
      --border: #e2e8f0;         /* slate-200 */
      --ring: rgba(37, 99, 235, .35);
      --shadow: 0 10px 25px rgba(2, 6, 23, .05);
      --radius: 16px;
      --container: 1100px;
      --space: clamp(16px, 2.5vw, 28px);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0b1220;          /* navy-ish */
        --surface: #0f172a;     /* slate-900 */
        --text: #e2e8f0;        /* slate-200 */
        --muted: #94a3b8;       /* slate-400 */
        --primary: #60a5fa;     /* blue-400 */
        --primary-ink: #0b1220;
        --accent: #34d399;      /* emerald-400 */
        --border: #1f2a44;      /* deep */
        --ring: rgba(96, 165, 250, .45);
        --shadow: 0 10px 25px rgba(0, 0, 0, .35);
      }
    }

    /* Manual theme override via [data-theme] */
    html[data-theme="light"] {
        color-scheme: light;
        --bg:#f8fafc; --surface:#fff; --text:#0f172a; --muted:#475569;
        --primary:#2563eb; --primary-ink:#fff; --accent:#22c55e;
        --border:#e2e8f0; --ring:rgba(37,99,235,.35);
        --shadow:0 10px 25px rgba(2,6,23,.05);
    }
    html[data-theme="dark"] {
        color-scheme: dark;
        --bg:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8;
        --primary:#60a5fa; --primary-ink:#0b1220; --accent:#34d399;
        --border:#1f2a44; --ring:rgba(96,165,250,.45);
        --shadow:0 10px 25px rgba(0,0,0,.35);
    }

    /* ===== RESET / BASE ===== */
    *, *::before, *::after { 
        box-sizing: border-box; 
    }
    html, body { 
        height: 100%; 
    }
    body {
      margin: 0; font: 16px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
      background: radial-gradient(1200px 800px at 10% -20%, rgba(99,102,241,.08), transparent 60%),
                  radial-gradient(800px 600px at 100% 0%, rgba(34,197,94,.08), transparent 50%),
                  var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    img { 
        max-width: 100%; 
        display: block; 
    }
    a { 
        color: var(--primary); 
        text-decoration: none; 
    }
    a:hover { 
        text-decoration: underline; 
    }
    :focus-visible { 
        outline: 2px solid var(--ring); 
        outline-offset: 2px; 
    }

    .container { 
        width: min(100% - 2*var(--space), var(--container)); 
        margin-inline: auto; 
    }
    .section { 
        padding: calc(var(--space) * 3) 0; 
    }

    /* ===== UTILS ===== */
    .btn { 
      display: inline-flex; align-items: center; gap: .6rem; 
      background: var(--primary); color: var(--primary-ink); border: 1px solid transparent; 
      padding: .85rem 1.1rem; border-radius: 999px; font-weight: 600; letter-spacing: .2px; 
      box-shadow: var(--shadow); transition: transform .08s ease, box-shadow .2s ease, background .2s ease; 
    }

    .btn:hover { 
        transform: translateY(-1px); 
        text-decoration: none; 
        box-shadow: 0 12px 30px rgba(2,6,23,.12); 
    }

    .btn.secondary { 
        background: transparent; 
        color: var(--text); 
        border-color: var(--border); 
    }

    .btn.ghost { 
        background: transparent; 
        color: var(--primary); 
        border-color: transparent; 
    }

    .badge { 
        display:inline-block; 
        padding:.35rem .6rem; 
        border-radius:999px; 
        background: rgba(2,6,23,.06); 
        border: 1px solid var(--border); 
        color: var(--muted); 
        font-size:.8rem; 
    }

    .card {
        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--surface); 
        border: 1px solid var(--border); 
        border-radius: var(--radius); 
        box-shadow: var(--shadow); 
    }

    .grid { 
        display: grid; 
        gap: 1.2rem; 
    }
    @media (min-width: 700px) {
        .grid.cols-2 { 
            grid-template-columns: repeat(2, 1fr); 
        } 
    }
    @media (min-width: 960px) {
        .grid.cols-3 { 
            grid-template-columns: repeat(3, 1fr); 
        } 
    }

    /* ===== SKIP LINK ===== */
    .skip-link { 
        position:absolute; 
        left:-999px; 
        top:0; 
        padding:.6rem 1rem; 
        background:var(--primary); 
        color:var(--primary-ink); 
        border-radius:999px; 
    }

    .skip-link:focus { 
        left: var(--space); 
        top: var(--space); 
        z-index: 1000; 
    }

    /* ===== HEADER / NAV ===== */
    header { 
        position: sticky; 
        top: 0; 
        z-index: 50; 
        backdrop-filter: saturate(1.2) blur(8px); 
        background: color-mix(in oklab, var(--bg) 78%, transparent); 
        border-bottom: 1px solid var(--border); 
    }
    .nav { 
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        padding: .9rem 0; 
    }
    .brand { 
        display:flex; 
        align-items:center; 
        gap:.7rem; 
        font-weight: 800; 
        letter-spacing:.2px; 
    }
    .brand-logo { 
        inline-size: 28px; 
        block-size: 28px; 
        border-radius: 8px; 
        background: conic-gradient(from 180deg, #818cf8, #34d399, #22d3ee, #f472b6, #818cf8); 
    }
    nav ul { 
        list-style: none; 
        display:flex; 
        gap:.8rem; 
        padding:0; 
        margin:0; 
        align-items:center; 
    }
    nav a { 
        padding:.55rem .8rem; 
        border-radius:999px; 
        color: var(--muted); 
    }
    nav a:hover { 
        background: rgba(2,6,23,.06); 
        text-decoration:none; 
        color: var(--text); 
    }
    .nav-actions { 
        display:flex; 
        align-items:center; 
        gap:.6rem; 
    }

    /* Mobile menu */
    .menu-toggle { 
        display: inline-flex; 
        padding:.6rem .75rem; 
        border:1px solid var(--border); 
        border-radius:999px; 
        background:transparent; 
    }
    @media (min-width: 860px){.menu-toggle { display:none;} }
    #mobileMenu { display:none; }
    #mobileMenu[data-open="true"] {
        display:block; 
        border-top:1px solid var(--border); 
        padding: .8rem 0 1rem; 
    }
    #mobileMenu a { 
        display:block; 
        padding:.6rem .8rem;
        border-radius: 10px; 
    }

    /* Theme toggle */
    .theme-toggle { 
        display:inline-flex; 
        align-items:center; 
        gap:.5rem; 
        padding:.5rem .7rem; 
        border-radius:999px; 
        border:1px solid var(--border); 
        background: transparent; 
    }

    /* ===== HERO ===== */
    .hero { 
        display:grid; 
        gap: 1.2rem; 
        align-items:center; 
        padding: calc(var(--space) * 3) 0 calc(var(--space) * 2); 
    }
    @media (min-width: 920px){ 
        .hero { 
            grid-template-columns: 1.2fr .8fr; 
            gap: 2rem; 
        } 
    }
    .hero h1 {
        font-size: clamp(2rem, 5vw, 3.2rem); 
        line-height:1.1; 
        margin: 0 0 .8rem 0; 
        letter-spacing: -.02em; 
    }
    .lead { 
        font-size: clamp(1rem, 1.8vw, 1.15rem); 
        color: var(--muted); 
        max-width: 60ch; 
    }
    .hero-cta { 
        display:flex;
        gap:.8rem;
        flex-wrap: wrap; 
        margin-top: .8rem; 
    }
    .hero-media { 
        aspect-ratio: 4/3; 
        border-radius: var(--radius); 
        border: 1px dashed var(--border); 
        display:grid; 
        place-items:center; 
        color: var(--muted); 
        font-weight:600; 
        background:
      linear-gradient(120deg, rgba(99,102,241,.12), transparent),
      linear-gradient(0deg, rgba(34,197,94,.12), transparent), var(--surface);
    }

    .chips { 
        display:flex; 
        gap:.5rem; 
        flex-wrap:wrap; 
        margin-top: .9rem; 
    }

    /* ===== ABOUT ===== */
    .about { 
        display:grid; 
        gap: 1.2rem; 
        align-items: start; 
    }
    @media (min-width: 840px){
         .about { 
            grid-template-columns: .9fr 1.1fr; 
            gap: 2rem; 
        } 
    }
    .avatar { 
        width: 160px;
        aspect-ratio: 1; 
        border-radius: 50%; 
        background: radial-gradient(circle at 30% 30%, #60a5fa, #34d399); 
        display:grid; 
        place-items:center;
        color:white; 
        font-weight: 800; 
        font-size: 2.2rem;
        box-shadow: var(--shadow);
        border: 3px solid color-mix(in oklab, var(--surface) 80%, transparent); 
    }

    /* ===== PROJECTS ===== */
    .project { 
        display:flex; 
        flex-direction: column; 
        overflow: clip; 
    }
    .project .thumb { 
        aspect-ratio: 16/10; 
        background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(34,197,94,.18)); 
        border-bottom: 1px solid var(--border); 
        display:grid;
        place-items:center; 
        color: var(--muted); 
    }
    .project .body { 
        padding: 1rem; 
        display:grid; 
        gap:.6rem; 
    }
    .project h3 { 
        margin: 0; 
        font-size: 1.05rem; 
    }
    .project .tags { 
        display:flex; 
        gap:.4rem; 
        flex-wrap: wrap; 
    }
    .project .actions { 
        display:flex; 
        gap:.5rem; 
        margin-top:.2rem; 
        flex-wrap: wrap; 
    }

    .projectPreview img {
        height: 300px;
        width: 100%;
    }

    .section-title { 
        font-size: clamp(1.4rem, 3vw, 2rem); 
        margin: 0 0 .6rem 0; 
    }
    .section-sub { 
        color: var(--muted);
        margin-bottom: 1rem; 
    }

    /* ===== SKILLS ===== */
    .skills { 
        display:flex; 
        gap:.6rem; 
        flex-wrap:wrap; 
    }
    .skill { 
        padding:.65rem .8rem; 
        border:1px solid var(--border); 
        border-radius: 12px; 
        background: var(--surface); 
        font-weight:600; 
    }

    /* ===== CONTACT ===== */
    .contact-grid { 
        display:grid; 
        gap: 1rem;
    }
    @media (min-width: 820px){
        .contact-grid { 
            grid-template-columns: .8fr 1.2fr; 
            gap: 2rem; 
        } 
    }
    .contact-card { 
        padding: 1rem; 
    }
    form { 
        display:grid; 
        gap:.8rem; 
    }
    label { 
        font-weight:600; 
    }
    input, textarea { 
        width:100%; 
        padding: .8rem .9rem; 
        border: 1px solid var(--border); 
        border-radius: 12px; 
        background: var(--surface);
        color: var(--text); 
    }
    textarea { 
        min-height: 130px; 
        resize: vertical; 
    }

    .note { 
        font-size:.9rem; 
        color: var(--muted); 
    }

    footer { 
        padding: 2rem 0; 
        color: var(--muted); 
        border-top:1px solid var(--border); 
    }
    .foot { 
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        gap:1rem; 
        flex-wrap:wrap; 
    }
    .social { 
        display:flex; 
        gap:.6rem;
    }
    .icon-btn { 
        display:inline-flex; 
        align-items:center;
        justify-content:center; 
        width:40px; 
        height:40px; 
        border-radius: 10px; 
        border:1px solid var(--border); 
        background: transparent; 
    }

    /* Subtle reveal */
    [data-reveal] { 
        opacity: 0; 
        transform: translateY(8px);
        transition: opacity .6s ease, transform .6s ease; 
    }
    [data-reveal].revealed {
        opacity: 1; 
        transform: translateY(0); 
    }

    /* * Project pages */
    .project-hero img,
    .post-hero img { width: 100%; height: auto; display: block; border-radius: 12px; }

    .project-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
    @media (max-width: 900px) { .project-grid { grid-template-columns: 1fr; } }

    .project-aside { position: sticky; top: 1.25rem; align-self: start; }
    .project-meta { display: grid; gap: 0.75rem; }
    .project-meta dt { font-weight: 600; color: var(--text-muted); }
    .project-meta dd { margin: 0; }

    .project-section { margin-block: 2rem; }
    .caption { font-size: 0.85rem; color: var(--text-muted); padding: 0.5rem 0.75rem; }

    .project-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

    .breadcrumbs { margin-bottom: 1rem; }

    /* Prose defaults (simple) */
    .prose h2 { margin-top: 1.5rem; }
    .prose pre { overflow: auto; padding: 1rem; border-radius: 10px; background: var(--surface-muted); }
    .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

    /* Lightbox */
    .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 2rem; z-index: 9999; }
    .lightbox img { max-width: min(1100px, 95vw); max-height: 85vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
    .lightbox-close { position: fixed; top: 1rem; right: 1rem; font-size: 1.25rem; background: var(--surface); border: 1px solid var(--border); padding: .5rem .75rem; border-radius: 8px; }
    .lightbox[hidden] { display: none; }

    /* Utility tweaks */
    .btn.small { padding: .35rem .6rem; font-size: .9rem; }

    /* list layout helpers */
.stack { display: grid; gap: 1rem; }

/* devlog controls reuse from earlier */
.devlog-controls { 
    display: grid;
    gap: 1rem; 
    grid-template-columns: 1fr auto auto; 
    align-items: center; 
    margin-top: 1rem; 
}
.devlog-search input { 
    width: 100%; 
    padding: .7rem .9rem; 
    border-radius: 10px; 
    border: 1px solid var(--border); 
    background: var(--surface); 
    color: var(--text); 
}
.devlog-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: .5rem; 
}
.devlog-tags .chip { 
    border: 1px solid var(--border); 
    background: var(--surface); 
    padding: .35rem .6rem; 
    border-radius: 999px; 
    font-size: .9rem; 
    cursor: pointer; 
}
.devlog-tags .chip[aria-pressed="true"] { 
    background: var(--surface-muted); 
}
.devlog-sort select { 
    padding: .6rem .8rem; 
    border-radius: 10px; 
    border: 1px solid var(--border); 
    background: var(--surface); 
    color: var(--text); 
}

/* project layout helpers from earlier */
.project-hero img, .post-hero img { 
    width: 100%; 
    height: auto;
    display: block; 
    border-radius: 12px; 
}
.project-grid { 
    display: grid; 
    grid-template-columns: 280px 1fr; 
    gap: 2rem; 
}
@media (max-width: 900px) { 
    .project-grid { 
        grid-template-columns: 1fr;
    } 
    .devlog-controls { 
        grid-template-columns: 1fr; 
    } 
}