/* ==========================================================
           PAGE: experience.html  (monochrome, sampled from workexp.jpg)
           ========================================================== */
        [data-page="work"] {
            background: #000000;
            color: #C0C0C0;
            font-family: 'SF Pro Rounded', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
        }

        [data-page="work"] .wk-hero {
            position: relative;
            padding: 0;
            overflow: hidden;
        }

        /* The artwork is ~78% black with the subject on the right, so it drops
           straight onto the page ground with the copy sitting in the dark half. */
        [data-page="work"] .wk-heroimg {
            position: absolute;
            inset: 0;
            background: url('../../assets/img/workexp.jpg') right center / cover no-repeat;
            z-index: 0;
            pointer-events: none;
        }

        [data-page="work"] .wk-heroimg::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,0.72) 48%, rgba(0,0,0,0.12) 74%),
                linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, #000 100%);
        }

        [data-page="work"] .wk-heroinner {
            position: relative;
            z-index: 1;
            max-width: 1180px;
            margin: 0 auto;
            padding: 150px 56px 110px;
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        [data-page="work"] .wk-kicker {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            letter-spacing: 0.24em;
            color: #606060;
            margin-bottom: 26px;
        }

        [data-page="work"] .wk-title {
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 900;
            font-size: clamp(46px, 9vw, 132px);
            line-height: 0.88;
            letter-spacing: -0.045em;
            color: #EDEDED;
            margin: 0 0 30px;
            transform: scaleX(0.95);
            transform-origin: left;
        }

        [data-page="work"] .wk-intro {
            font-size: 17px;
            line-height: 1.75;
            color: #909090;
            max-width: 620px;
            margin: 0;
        }

        [data-page="work"] .wk-list {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 56px 130px;
        }

        [data-page="work"] .wk-role {
            display: grid;
            grid-template-columns: 78px 1fr;
            gap: 34px;
            padding: 46px 0;
            border-top: 1px solid #303030;
        }

        [data-page="work"] .wk-logo {
            width: 62px;
            height: 62px;
            border-radius: 9px;
            object-fit: cover;
            background: #181818;
            border: 1px solid #303030;
            filter: grayscale(1) contrast(1.05);
            opacity: 0.88;
        }

        [data-page="work"] .wk-logo.none {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 17px;
            color: #606060;
            filter: none;
        }

        [data-page="work"] .wk-co {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #787878;
            margin-bottom: 9px;
        }

        [data-page="work"] .wk-job {
            font-family: 'New York', ui-serif, 'Iowan Old Style', Georgia, serif;
            font-size: clamp(21px, 2.2vw, 29px);
            font-weight: 600;
            line-height: 1.22;
            letter-spacing: -0.012em;
            color: #EDEDED;
            margin: 0 0 16px;
        }

        [data-page="work"] .wk-body p {
            font-size: 15px;
            line-height: 1.8;
            color: #909090;
            margin: 0 0 14px;
            max-width: 780px;
        }

        [data-page="work"] .wk-sub {
            margin-top: 20px;
            display: grid;
            gap: 14px;
        }

        [data-page="work"] .wk-item {
            display: grid;
            grid-template-columns: 210px 1fr;
            gap: 22px;
            padding-top: 14px;
            border-top: 1px solid #181818;
        }

        [data-page="work"] .wk-item b {
            font-weight: 600;
            font-size: 13.5px;
            color: #C0C0C0;
        }

        [data-page="work"] .wk-item span {
            font-size: 14.5px;
            line-height: 1.75;
            color: #787878;
        }

        @media (max-width: 860px) {
            [data-page="work"] .wk-heroinner { padding: 90px 24px 60px; min-height: 42vh; }
            [data-page="work"] .wk-heroimg { background-position: 72% center; }
            [data-page="work"] .wk-list { padding: 0 24px 80px; }
            [data-page="work"] .wk-role { grid-template-columns: 1fr; gap: 18px; }
            [data-page="work"] .wk-item { grid-template-columns: 1fr; gap: 6px; }
        }