/* ==========================================================
           PAGE: my-poison.html, two modes sharing one stage
           ========================================================== */
        [data-page="cinema"] {
            --cn-ink:  #F2EFE9;
            position: relative;
            height: 100%;
            overflow: hidden;
            background: #08080A;
            color: var(--cn-ink);
            font-family: 'SF Pro Rounded', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* ---- rotating backdrop: two layers crossfading ---- */
        [data-page="cinema"] .cn-stack { position: absolute; inset: 0; z-index: 0; }

        /* each mode is a full pane; the incoming one slides in over the outgoing */
        [data-page="cinema"] .cn-pane {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background: #08080A;
            transform: translateX(0);
            transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
            will-change: transform;
        }

        [data-page="cinema"] .cn-pane.enter { transform: translateX(100%); }

        [data-page="cinema"] .cn-stage { position: absolute; inset: 0; z-index: 0; }

        [data-page="cinema"] .cn-layer {
            position: absolute;
            inset: -8%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.6s ease;
            filter: blur(46px) saturate(150%) brightness(0.5);
            transform: scale(1.1);
            animation: cnDrift 22s ease-in-out infinite alternate;
        }

        [data-page="cinema"] .cn-layer.show { opacity: 0.85; }

        @keyframes cnDrift {
            from { transform: scale(1.04) translate(0, 0); }
            to   { transform: scale(1.12) translate(-1.2%, -1.4%); }
        }

        /* empty folder: a quiet gradient instead of a broken frame */
        [data-page="cinema"] .cn-fallback {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 68% 38%, #2a2036 0%, #12121a 52%, #08080A 100%);
        }

        [data-page="cinema"] .cn-scrim {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(100deg,
                        rgba(6, 6, 9, 0.94) 0%,
                        rgba(6, 6, 9, 0.80) 38%,
                        rgba(6, 6, 9, 0.38) 68%,
                        rgba(6, 6, 9, 0.62) 100%);
        }

        [data-page="cinema"] .cn-grain {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: 0.045;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* ---- copy ---- */
        [data-page="cinema"] .cn-main {
            position: relative;
            z-index: 3;
            height: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 4vw;
            padding: 0 clamp(112px, 11vw, 164px) 0 7vw;
        }

        /* The header is fixed; only the note breathes.
           This column used to be auto-height and centred, so every extra line
           of note re-centred the whole block: the kicker travelled 46px across
           the films and 88px across the music. Stretching the column to full
           height and starting it from the top anchors ON REPEAT / 33 RPM and
           NOW SHOWING / 24 FPS, and the note grows downward into the space
           reserved at the foot. Only .cn-content stretches, so the poster in
           the next column stays centred. */
        [data-page="cinema"] .cn-content {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-self: stretch;
            min-width: 0;
            padding-top: 96px;
            padding-bottom: 104px;   /* clearance for the pinned .cn-nav */
        }

        /* Fixed stage, image fitted inside it. The folders hold aspects from
           0.56 to 1.33, so contain-within-a-box keeps every poster whole and
           stops the frame jumping between slides. */
        [data-page="cinema"] .cn-poster {
            position: relative;
            width: clamp(200px, 26vw, 360px);
            height: min(74%, 600px);
            flex: none;
        }

        [data-page="cinema"] .cn-pl {
            position: absolute;
            inset: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 3px;
            opacity: 0;
            transition: opacity 1.2s ease;
            box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62),
                        0 0 0 1px rgba(255, 255, 255, 0.07);
        }

        [data-page="cinema"] .cn-pl.show { opacity: 1; }

        [data-page="cinema"] .cn-kicker {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            letter-spacing: 0.26em;
            color: rgba(242, 239, 233, 0.5);
            margin-bottom: 14px;
        }

        [data-page="cinema"] .cn-title {
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
            font-weight: 900;
            font-size: clamp(42px, 8.4vw, 124px);
            line-height: 0.84;
            letter-spacing: -0.05em;
            margin: 0 0 20px;
            text-transform: uppercase;
            transform: scaleX(0.94);
            transform-origin: left;
        }

        [data-page="cinema"] .cn-tagline {
            font-size: clamp(15px, 1.5vw, 20px);
            line-height: 1.7;
            color: rgba(242, 239, 233, 0.78);
            max-width: 560px;
            margin: 0;
            /* The name takes a line and the description one or two, so 24 FPS
               fills two lines and 33 RPM three. Holding three keeps the note
               starting at the same height in both, which is what stops the
               whole column shifting when the mode changes.
               5.1em is exactly 3 line boxes: 3 x line-height 1.7. */
            min-height: 5.1em;
        }

        [data-page="cinema"] .cn-tagline em {
            font-family: 'New York', ui-serif, Georgia, serif;
            font-style: italic;
            color: var(--cn-ink);
        }

        /* The name stands on its own line above the description. No margin:
           line-height 1.7 already separates them, and any extra would stop the
           block being a whole number of line boxes, which is what min-height
           above relies on to align the two modes. */
        [data-page="cinema"] .cn-tagname { display: block; }

        [data-page="cinema"] .cn-tagdesc { display: block; }

        /* per-item note: swaps with every poster */
        [data-page="cinema"] .cn-note {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid rgba(242, 239, 233, 0.16);
            max-width: 520px;
            opacity: 1;
            transition: opacity 0.45s ease;
        }

        [data-page="cinema"] .cn-note.fading { opacity: 0; }
        [data-page="cinema"] .cn-note.empty { display: none; }

        [data-page="cinema"] .cn-note-title {
            font-family: 'New York', ui-serif, 'Iowan Old Style', Georgia, serif;
            font-size: clamp(19px, 1.9vw, 26px);
            font-weight: 600;
            letter-spacing: -0.01em;
            margin-bottom: 9px;
        }

        [data-page="cinema"] .cn-note-body {
            font-size: clamp(13.5px, 1.25vw, 15.5px);
            line-height: 1.75;
            color: rgba(242, 239, 233, 0.66);
        }

        /* set its own direction so Arabic-script verse keeps its punctuation */
        [data-page="cinema"] .cn-note-quote {
            font-family: 'Noto Nastaliq Urdu', 'Geeza Pro', 'Baghdad', 'Al Bayan', serif;
            font-size: clamp(14px, 1.45vw, 19px);
            line-height: 2.1;
            white-space: pre-line;
            color: rgba(242, 239, 233, 0.92);
            margin-bottom: 14px;
            padding-right: 14px;
            border-right: 2px solid rgba(242, 239, 233, 0.28);
        }

        [data-page="cinema"] .cn-note-tracks {
            margin-top: 10px;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 12px;
            line-height: 1.8;
            letter-spacing: 0.02em;
            color: rgba(242, 239, 233, 0.72);
        }

        /* Pinned, not in the flow. These used to sit at the end of a centred
           column, so every change in the note's length moved them: measured at
           46px of travel across the ten films, which is further than the
           buttons are tall. */
        [data-page="cinema"] .cn-nav {
            position: absolute;
            left: 7vw;            /* matches .cn-main's left padding */
            bottom: 46px;
            z-index: 4;
            display: flex;
            align-items: center;
            gap: 18px;
        }

        [data-page="cinema"] .cn-arrow {
            position: relative;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(242, 239, 233, 0.26);
            background: rgba(242, 239, 233, 0.05);
            color: var(--cn-ink);
            font-size: 17px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        /* A static halo whose opacity breathes. Nothing re-blurs per frame. */
        [data-page="cinema"] .cn-arrow::after {
            content: '';
            position: absolute;
            inset: -7px;
            border-radius: 50%;
            background: radial-gradient(circle,
                        rgba(242, 239, 233, 0.30) 0%,
                        rgba(242, 239, 233, 0.14) 45%,
                        rgba(242, 239, 233, 0) 72%);
            pointer-events: none;
            animation: cnArrowGlow 2.4s ease-in-out infinite;
        }

        [data-page="cinema"] .cn-arrow:nth-of-type(2)::after { animation-delay: 0.3s; }

        @keyframes cnArrowGlow {
            0%, 100% { opacity: 0.25; }
            50%      { opacity: 1; }
        }

        [data-page="cinema"] .cn-arrow:hover {
            background: rgba(242, 239, 233, 0.15);
            border-color: rgba(242, 239, 233, 0.9);
            transform: scale(1.06);
            box-shadow: 0 0 16px rgba(242, 239, 233, 0.32);
        }

        [data-page="cinema"] .cn-arrow:hover::after { animation: none; opacity: 1; }

        [data-page="cinema"] .cn-counter {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 12px;
            letter-spacing: 0.14em;
            color: rgba(242, 239, 233, 0.55);
            min-width: 58px;
        }

        [data-page="cinema"] .cn-pips b { cursor: pointer; }
        [data-page="cinema"] .cn-pips b:hover { background: rgba(242, 239, 233, 0.6); }

        /* ---- the side switch ---- */
        [data-page="cinema"] .cn-switch {
            position: absolute;
            z-index: 4;
            right: 0;
            top: 0;
            bottom: 0;
            width: clamp(76px, 7vw, 104px);
            border: none;
            border-left: 1px solid rgba(242, 239, 233, 0.14);
            background: rgba(8, 8, 10, 0.42);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--cn-ink);
            cursor: pointer;
            font: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease, width 0.3s ease;
        }

        [data-page="cinema"] .cn-switch:hover { background: rgba(242, 239, 233, 0.1); }

        [data-page="cinema"] .cn-switch span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            font-weight: 900;
            font-size: clamp(15px, 1.4vw, 20px);
            letter-spacing: 0.22em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        [data-page="cinema"] .cn-switch i {
            position: absolute;
            bottom: 26px;
            font-style: normal;
            font-size: 17px;
            opacity: 0.62;
        }

        /* ---- progress pips ---- */
        [data-page="cinema"] .cn-pips {
            position: absolute;
            z-index: 4;
            left: 7vw;
            bottom: 34px;
            display: flex;
            gap: 7px;
        }

        [data-page="cinema"] .cn-pips b {
            width: 22px;
            height: 2px;
            border-radius: 2px;
            background: rgba(242, 239, 233, 0.22);
            transition: background 0.3s ease;
        }

        [data-page="cinema"] .cn-pips b.on { background: var(--cn-ink); }

        [data-page="cinema"] .cn-hint {
            position: absolute;
            z-index: 4;
            left: 7vw;
            bottom: 34px;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            letter-spacing: 0.08em;
            color: rgba(242, 239, 233, 0.4);
        }

        @media (max-width: 820px) {
            /* One column, read top to bottom: heading, poster, name, note.
               display:contents dissolves .cn-content so its children become
               flex items of .cn-main and the poster can sit between the
               tagline and the note, which markup order alone cannot do. */
            /* The pane is the scroller. .cn-main grows past the viewport, and
               the pane clips at 100% height, so without this the note and the
               arrows below the poster were simply cut off with no way to reach
               them. */
            [data-page="cinema"] .cn-pane {
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
            }

            /* pips and the drag hint duplicate the "01 / 10" counter that sits
               in the flow, and as absolute children they would scroll away from
               the bottom edge they are positioned against */
            [data-page="cinema"] .cn-pips,
            [data-page="cinema"] .cn-hint { display: none; }

            [data-page="cinema"] .cn-main {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                height: auto;
                min-height: 100%;
                overflow: visible;
                /* the switch is a bottom bar on mobile, so the clearance it
                   needs is at the foot, not the right edge */
                padding: 30px 22px 130px;
                gap: 18px;
            }

            /* display:contents dissolves the wrapper, so its padding goes with
               it; the nav rejoins the flow and the pinning is undone. */
            [data-page="cinema"] .cn-content { display: contents; }

            [data-page="cinema"] .cn-nav {
                position: static;
                margin-top: 4px;
            }

            /* stacked and scrolling on a phone: nothing needs holding open */
            [data-page="cinema"] .cn-tagline { min-height: 0; }

            [data-page="cinema"] .cn-kicker  { order: 1; }
            [data-page="cinema"] .cn-title   { order: 2; }
            [data-page="cinema"] .cn-tagline { order: 3; }
            [data-page="cinema"] .cn-poster  { order: 4; }
            [data-page="cinema"] .cn-note    { order: 5; }
            [data-page="cinema"] .cn-nav     { order: 6; }

            /* A viewport height, not a percentage: the old 34% resolved against
               an auto-height row and collapsed the poster to nothing. */
            [data-page="cinema"] .cn-poster {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 3;      /* the tallest poster in the set */
                max-height: 52vh;
                margin: 4px 0;
            }

            /* contain, so every aspect from 0.56 to 1.33 fits the same frame */
            [data-page="cinema"] .cn-pl {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

            /* The switch becomes a bar across the bottom. As a full-height rail
               it took 52px of a 375px screen and its label was set sideways,
               which is a poor tap target and a poor read on a phone. */
            [data-page="cinema"] .cn-switch {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                width: auto;
                height: 58px;
                border-left: none;
                border-top: 1px solid rgba(242, 239, 233, 0.14);
                gap: 10px;
            }

            [data-page="cinema"] .cn-switch span {
                writing-mode: horizontal-tb;
                text-orientation: initial;
                transform: none;
                font-size: 15px;
            }

            [data-page="cinema"] .cn-switch i {
                position: static;
                bottom: auto;
            }


        }


        /* ---- services + technologies (monochrome, from workexp.jpg) ---- */
        [data-page="skills"] .sk-tech { padding-top: 0; }

        [data-page="skills"] .sk-techgroup {
            display: grid;
            grid-template-columns: minmax(150px, 210px) 1fr;
            gap: 28px;
            padding: 26px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        }

        [data-page="skills"] .sk-techgroup:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.09); }

        [data-page="skills"] .sk-techname {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(242, 242, 242, 0.42);
            padding-top: 5px;
        }

        [data-page="skills"] .sk-chips { display: flex; flex-wrap: wrap; gap: 9px; }

        [data-page="skills"] .sk-chip {
            font-size: 13px;
            line-height: 1;
            padding: 9px 15px;
            border-radius: 2px;
            color: #C0C0C0;
            background: #181818;
            border: 1px solid #303030;
            transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        }

        [data-page="skills"] .sk-chip:hover {
            color: #000;
            background: #C0C0C0;
            border-color: #C0C0C0;
        }

        @media (max-width: 820px) {
            [data-page="skills"] .sk-techgroup { grid-template-columns: 1fr; gap: 12px; }
        }