/* ==========================================================
           PAGE: projects.html
           Every page's CSS is scoped under its [data-page] attribute,
           so pages sharing this one stylesheet cannot collide.
           ========================================================== */
        .page-root { min-height: 100%; }

        [data-page="projects"] .pj-bg {
            position: fixed;
            inset: 52px 0 0 0;   /* clear the toolbar */
            z-index: 0;
            background: #0e0e10 url('../../assets/img/projectbg.jpg') center / cover no-repeat;
            image-rendering: pixelated;
        }

        [data-page="projects"] .pj-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(10, 10, 12, 0.76);
        }

        [data-page="projects"] .pj-hero,
        [data-page="projects"] .pj-gridhead,
        [data-page="projects"] .pj-grid { position: relative; z-index: 1; }

        [data-page="projects"] {
            background: #0e0e10;
            color: #EDEBE6;
            font-family: 'SF Pro Rounded', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
            padding-bottom: 90px;
        }

        /* ---- floating nav pill ---- */
        [data-page="projects"] .pj-nav {
            position: sticky;
            top: 18px;
            z-index: 20;
            width: fit-content;
            margin: 18px auto 0;
            display: flex;
            align-items: center;
            gap: 42px;
            padding: 7px 7px 7px 26px;
            background: rgba(28, 28, 31, 0.82);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 999px;
        }

        [data-page="projects"] .pj-logo {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: #EDEBE6;
        }

        [data-page="projects"] .pj-links { display: flex; gap: 28px; }

        [data-page="projects"] .pj-links a {
            font-size: 14px;
            color: rgba(237, 235, 230, 0.72);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        [data-page="projects"] .pj-links a:hover { color: #EDEBE6; }

        [data-page="projects"] .pj-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #EDEBE6;
            color: #141416;
            font-size: 14px;
            text-decoration: none;
            padding: 9px 18px;
            border-radius: 999px;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        [data-page="projects"] .pj-cta:hover { transform: translateX(2px); background: #fff; }

        /* ---- hero ---- */
        [data-page="projects"] .pj-hero {
            max-width: 1120px;
            margin: 0 auto;
            padding: 190px 60px 150px;
        }

        [data-page="projects"] .pj-eyebrow {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.09em;
            margin-bottom: 34px;
        }

        [data-page="projects"] .pj-eyebrow b { color: #9B8CFF; font-weight: 700; }
        [data-page="projects"] .pj-eyebrow i { color: #F5C451; font-style: normal; font-weight: 700; }
        [data-page="projects"] .pj-eyebrow s { color: rgba(237,235,230,0.5); text-decoration: none; }

        [data-page="projects"] .pj-headline {
            font-size: clamp(40px, 5.4vw, 82px);
            font-weight: 400;
            line-height: 1.06;
            letter-spacing: -0.035em;
            color: #EDEBE6;
            margin: 0 0 42px;
        }

        /* the eroded word from the reference: turbulence + displacement */
        [data-page="projects"] .pj-distort { filter: url(#pjDistortFilter); }

        [data-page="projects"] .pj-sub {
            font-size: 19px;
            line-height: 1.75;
            color: rgba(237, 235, 230, 0.66);
            max-width: 620px;
            margin: 0;
        }

        [data-page="projects"] .pj-scrollcue {
            margin-top: 96px;
            font-size: 11px;
            letter-spacing: 0.18em;
            color: rgba(237, 235, 230, 0.38);
        }

        /* ---- tile grid ---- */
        [data-page="projects"] .pj-gridhead {
            max-width: 1120px;
            margin: 0 auto 36px;
            padding: 0 60px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 34px;
        }

        [data-page="projects"] .pj-gridhead h2 {
            font-family: 'New York', ui-serif, Georgia, serif;
            font-size: 30px;
            font-weight: 600;
            margin: 0;
            letter-spacing: -0.01em;
        }

        [data-page="projects"] .pj-count {
            font-size: 12px;
            letter-spacing: 0.12em;
            color: rgba(237, 235, 230, 0.42);
        }

        [data-page="projects"] .pj-grid {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 60px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
            gap: 26px;
        }

        [data-page="projects"] .pj-tile {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            text-align: left;
            padding: 0;
            font: inherit;
            color: inherit;
            transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), border-color 0.28s ease, background 0.28s ease;
        }

        [data-page="projects"] .pj-tile:hover {
            transform: translateY(-5px);
            border-color: rgba(155, 140, 255, 0.5);
            background: rgba(255, 255, 255, 0.06);
        }

        [data-page="projects"] .pj-thumb {
            width: 100%;
            aspect-ratio: 3 / 2;
            overflow: hidden;
            background: #17171b;
        }

        [data-page="projects"] .pj-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 16px;
            box-sizing: border-box;
            display: block;
            transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
        }

        [data-page="projects"] .pj-tile:hover .pj-thumb img { transform: scale(1.05); }

        [data-page="projects"] .pj-tilebody { padding: 17px 19px 20px; }

        [data-page="projects"] .pj-tilename {
            font-family: 'New York', ui-serif, Georgia, serif;
            font-size: 17px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0 0 7px;
        }

        [data-page="projects"] .pj-tiletag {
            font-size: 11px;
            letter-spacing: 0.06em;
            color: rgba(237, 235, 230, 0.45);
        }

        /* ---- detail popup ---- */
        [data-page="projects"] .pj-modal {
            position: fixed;
            inset: 52px 0 0 0;   /* clear the toolbar */
            z-index: 40;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px;
            background: rgba(6, 6, 8, 0.72);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        [data-page="projects"] .pj-modal.open { display: flex; }

        [data-page="projects"] .pj-modalcard {
            position: relative;
            width: min(860px, 100%);
            max-height: 100%;
            overflow-y: auto;
            overscroll-behavior: contain;
            background: #15151a;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 40px 44px 46px;
            animation: pjPop 0.3s cubic-bezier(0.22,1,0.36,1);
        }

        @keyframes pjPop {
            from { opacity: 0; transform: translateY(14px) scale(0.985); }
            to   { opacity: 1; transform: none; }
        }

        [data-page="projects"] .pj-close {
            position: absolute;
            top: 18px;
            right: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.14);
            background: transparent;
            color: rgba(237,235,230,0.7);
            font-size: 15px;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }

        [data-page="projects"] .pj-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

        [data-page="projects"] .pj-modalcard h3 {
            font-family: 'New York', ui-serif, Georgia, serif;
            font-size: 29px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.015em;
            margin: 0 40px 18px 0;
        }

        [data-page="projects"] .pj-modalimg {
            width: 100%;
            aspect-ratio: 16 / 7;
            object-fit: contain;
            padding: 18px;
            box-sizing: border-box;
            border-radius: 10px;
            margin-bottom: 24px;
            background: #17171b;
        }

        [data-page="projects"] .pj-badge {
            display: inline-block;
            font-size: 11px;
            letter-spacing: 0.07em;
            color: #9B8CFF;
            border: 1px solid rgba(155, 140, 255, 0.35);
            border-radius: 999px;
            padding: 4px 12px;
            margin-bottom: 16px;
        }

        [data-page="projects"] .pj-intro {
            font-size: 16px;
            line-height: 1.75;
            color: rgba(237, 235, 230, 0.82);
            margin: 0 0 22px;
        }

        [data-page="projects"] .pj-modalcard h4 {
            font-family: 'New York', ui-serif, Georgia, serif;
            font-size: 16px;
            color: #9B8CFF;
            margin: 26px 0 10px;
        }

        [data-page="projects"] .pj-modalcard p {
            font-size: 14.5px;
            line-height: 1.8;
            color: rgba(237, 235, 230, 0.66);
            margin: 0 0 13px;
        }

        [data-page="projects"] .pj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

        [data-page="projects"] .pj-tags span {
            font-size: 11px;
            padding: 5px 12px;
            border-radius: 999px;
            background: rgba(155, 140, 255, 0.12);
            border: 1px solid rgba(155, 140, 255, 0.26);
            color: #b9aeff;
        }

        [data-page="projects"] .pj-link {
            display: inline-block;
            margin-top: 22px;
            font-size: 14px;
            color: #F5C451;
            text-decoration: none;
            border-bottom: 1px solid rgba(245, 196, 81, 0.4);
        }

        [data-page="projects"] .pj-link:hover { border-color: #F5C451; }

        @media (max-width: 820px) {
            [data-page="projects"] .pj-hero { padding: 130px 30px 90px; }
            [data-page="projects"] .pj-grid, [data-page="projects"] .pj-gridhead { padding: 0 30px; }
            [data-page="projects"] .pj-nav { gap: 18px; padding-left: 18px; }
            [data-page="projects"] .pj-links { display: none; }
            [data-page="projects"] .pj-modalcard { padding: 32px 24px 34px; }
        }