/* VISUAL RHYTHMS — DISABLE EMPTY DROPDOWN */
    nav.menu li.nkc-visual-category > ul {
        display: none !important;
    }

    nav.menu li.nkc-visual-category {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    nav.menu li.nkc-visual-category > a {
        cursor: pointer;
    }

    nav.menu li.nkc-visual-category > a svg {
        display: none !important;
    }

    html, body {
        background: #000 !important;
    }

    html.nkc-on, html.nkc-on body {
        overflow: hidden !important;
        height: 100%;
    }

    html.nkc-on #content {
        visibility: hidden;
    }

    html.nkc-on footer.theme_footer {
        position: fixed;
        z-index: 3;
    }/* Menu: sections become the navigation; page-by-page links are hidden
         except for sections made of project pages */

    html.nkc-desk nav.menu li.category > ul {
        display: none !important;
    }

    html.nkc-desk nav.menu li.category.nkc-current.nkc-projects > ul {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
    }

    html.nkc-desk nav.menu li.category > a {
        cursor: pointer;
        transition: opacity 0.25s ease !important;
    }/* No arrow icons and no accordion open/close animation on desktop */

    html.nkc-desk nav.menu li.category > a svg {
        display: none !important;
    }

    html.nkc-desk nav.menu li.category, html.nkc-desk nav.menu li.category > ul {
        transition: none !important;
    }/* Keep section names evenly spaced (Format adds space around the open section) */

    html.nkc-desk nav.menu li.category:not(.nkc-projects) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html.nkc-desk nav.menu li.category:not(.nkc-current) > a {
        opacity: 0.55;
    }

    html.nkc-desk nav.menu li.category:not(.nkc-current) > a:hover {
        opacity: 1;
    }/* ---------- Phones: menu floats over the images, centred on the right; no hamburger ---------- */

    html.nkc-mob.nkc-nav header.sidebar a.menu-open, html.nkc-mob.nkc-nav header.sidebar a.menu-close, html.nkc-mob.nkc-nav nav.menu a.menu-close {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html.nkc-mob.nkc-nav header.sidebar {
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
        /* let drags pass through to the images */
    }

    html.nkc-mob.nkc-nav header.sidebar a, html.nkc-mob.nkc-nav header.sidebar nav {
        pointer-events: auto;
    }/* Name sits just above the menu, right-aligned, at the menu's text size (like desktop) */

    html.nkc-mob.nkc-nav header.sidebar .logo {
        position: fixed !important;
        top: calc(50% - var(--nkc-navh, 220px) / 2 - 30px) !important;
        right: 16px !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: translateY(-100%);
        text-align: right;
        z-index: 20;
    }

    html.nkc-mob.nkc-nav header.sidebar .logo a {
        font-size: 10px !important;
        line-height: 1.85 !important;
        letter-spacing: 0.02em;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    }

    html.nkc-mob.nkc-nav nav.menu {
        position: fixed !important;
        top: 50% !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: translateY(-50%) !important;
        transition: none !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right;
        z-index: 20;
    }

    html.nkc-mob.nkc-nav nav.menu ul {
        margin: 0 !important;
        padding: 0 !important;
    }/* Undo Format's slide-out drawer list (it's absolutely positioned and collapsed when closed) */

    html.nkc-mob.nkc-nav nav.menu > ul {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    html.nkc-mob.nkc-nav nav.menu li {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right;
        transform: none !important;
        opacity: 1 !important;
    }

    html.nkc-mob.nkc-nav nav.menu a {
        display: inline-block !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.85 !important;
        letter-spacing: 0.02em;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    }

    html.nkc-mob.nkc-nav nav.menu li.category > a svg {
        display: none !important;
    }

    html.nkc-mob.nkc-nav nav.menu li.category > ul {
        display: none !important;
        transition: none !important;
    }

    html.nkc-mob.nkc-nav nav.menu li.category.nkc-current.nkc-projects > ul {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
    }

    html.nkc-mob.nkc-nav nav.menu li.category > ul a {
        opacity: 0.75;
    }

    html.nkc-mob.nkc-nav nav.menu li.category:not(.nkc-current) > a {
        opacity: 0.55;
    }

    html.nkc-mob.nkc-nav nav.menu li.category + li.item {
        margin-top: 12px !important;
    }

    html.nkc-mob.nkc-nav nav.menu .social-links {
        position: static !important;
        display: flex !important;
        justify-content: flex-end;
        margin-top: 12px !important;
        padding: 0 !important;
    }

    html.nkc-mob.nkc-nav nav.menu .social-links svg {
        width: 14px;
        height: 14px;
    }/* Other pages on phones (projects, Contact, About, playlists, mixes): content keeps its full
         width and the menu floats above it (the header sits above the page content) */

    html.nkc-mob.nkc-nav header.sidebar {
        z-index: 1000 !important;
        transform: none !important;
        /* Format slides the header away on scroll; keep the menu put */
        transition: none !important;
    }

    .nkc-canvas {
        position: fixed;
        top: 0;
        right: 0;
        bottom: -240px;
        left: var(--nkc-left, 0px);
        z-index: 1;
        overflow: hidden;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease;
    }/* Desktop: canvas is full width; the name and menu float over it where they normally sit */

    html.nkc-desk.nkc-on header.sidebar {
        position: relative;
        z-index: 20;
        pointer-events: none;
        /* drags between the links reach the images */
    }

    html.nkc-desk.nkc-on header.sidebar a {
        pointer-events: auto;
    }/* Over the floating images (desktop and phones), and over page content on phones, the name,
         menu and copyright invert against whatever passes behind them, like duquejuan.com:
         white text with an "exclusion" blend */

    html.nkc-on header.sidebar, html.nkc-mob.nkc-nav header.sidebar, html.nkc-on footer.theme_footer {
        mix-blend-mode: exclusion;
        background: transparent !important;
    }

    html.nkc-on header.sidebar a, html.nkc-on header.sidebar .logo, html.nkc-mob.nkc-nav header.sidebar a, html.nkc-mob.nkc-nav header.sidebar .logo, html.nkc-on footer.theme_footer, html.nkc-on footer.theme_footer a {
        color: #fff !important;
        text-shadow: none !important;
        /* Slightly heavier strokes so the inverted text reads clearly, on black and over photos */
        -webkit-text-stroke: 0.35px #fff;
    }/* Other sections: brighter than before, so they hold up against the black background */

    html.nkc-on nav.menu li.category:not(.nkc-current) > a, html.nkc-mob.nkc-nav nav.menu li.category:not(.nkc-current) > a {
        opacity: 0.75 !important;
    }

    html.nkc-on nav.menu li.category:not(.nkc-current) > a:hover {
        opacity: 1 !important;
    }

    html.nkc-on nav.menu .social-links svg {
        color: #fff;
        fill: currentColor;
    }/* Project pages shown as a floating gallery (Visual Rhythms): the page's own text
         sits on top of the images, with the same inverting effect */

    .nkc-pagetext {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 15;
        width: min(460px, calc(100vw - 440px));
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 12px;
        line-height: 1.65;
        -webkit-text-stroke: 0.35px #fff;
        mix-blend-mode: exclusion;
        pointer-events: none;
    }

    html:not(.nkc-page) .nkc-pagetext {
        display: none;
    }

    .nkc-pagetext ._4ORMAT_content_page_row, .nkc-pagetext .twelvecol, .nkc-pagetext [data-editable-type] {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nkc-pagetext p {
        margin: 0 0 1em !important;
        color: #fff !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .nkc-pagetext a {
        pointer-events: auto;
        color: #fff !important;
        text-decoration: underline;
        word-break: break-all;
    }

    html.nkc-mob .nkc-pagetext {
        top: 24px;
        left: 16px;
        width: calc(100vw - var(--nkc-navw, 100px) - 56px);
        transform: none;
        font-size: 10px;
    }

    .nkc-canvas.is-ready {
        opacity: 1;
        pointer-events: auto;
    }

    html:not(.nkc-on) .nkc-canvas {
        display: none;
    }

    .nkc-canvas.is-dragging {
        cursor: grabbing;
    }

    .nkc-item {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        outline: none;
    }


    .nkc-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        /* pointing hand on hover */
        -webkit-user-drag: none;
        transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease, filter 0.45s ease;
    }

    .nkc-canvas.is-dragging .nkc-item img {
        cursor: grabbing;
    }/* Hover (mouse only, so taps on phones don't leave images dimmed) / keyboard focus:
         bring one image forward, let the rest recede */

    .nkc-item:focus-visible {
        z-index: 10;
    }

    .nkc-item:focus-visible img {
        transform: scale(1.07);
    }

    .nkc-canvas:has(.nkc-item:focus-visible) .nkc-item:not(:focus-visible) img {
        opacity: 0.3;
        filter: blur(1.5px);
    }

    @media (hover: hover) {
        .nkc-item:hover {
            z-index: 10;
        }

        .nkc-item:hover img {
            transform: scale(1.07);
        }

        .nkc-canvas:not(.is-dragging):has(.nkc-item:hover) .nkc-item:not(:hover) img {
            opacity: 0.3;
            filter: blur(1.5px);
        }
    }

    .nkc-hint {
        position: fixed;
        right: 28px;
        bottom: 24px;
        z-index: 3;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.55);
        pointer-events: none;
        transition: opacity 0.8s ease;
    }

    .nkc-hint.is-gone {
        opacity: 0;
    }/* Click: focused view */

        /* NK FOCUS NAV V1 — allow horizontal mobile swipes */
.nkc-focus {
    touch-action: pan-y;
}

        /* NK FOCUS NAV V2 — reliable interaction layer */
.nkc-focus.is-open {
    pointer-events: auto;
}

.nkc-focus::before {
    pointer-events: none;
}

.nkc-focus img {
    pointer-events: auto;
   cursor: default;
}
        
.nkc-focus img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
    .nkc-focus {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 4vmin;
        background: transparent;
        opacity: 0;
        cursor: pointer;
        transition: opacity 0.35s ease;
    }/* The dark dimming layer lives here, so it can extend under the Safari toolbar
       without affecting where the image sits */

    .nkc-focus::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -240px;
        background: rgba(0, 0, 0, 0.9);
        z-index: -1;
    }/* Desktop: treat the top of the music player as the bottom of the screen */

    @media (min-width: 750px) {
        .nkc-focus {
            padding-bottom: calc(4vmin + 70px);
        }
    }

    .nkc-focus[hidden] {
        display: none;
    }

    .nkc-focus.is-open {
        opacity: 1;
    }


.nkc-focus img {
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    transform: scale(0.98);
    opacity: 1;

    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        width 0.28s ease,
        height 0.28s ease;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.nkc-focus.is-open img {
    transform: scale(1);
}
    .nkc-focus img {
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transform: scale(0.94);
        transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
        }

    .nkc-focus.is-open img {
        transform: scale(1);
    }

    .nkc-focus a {
        flex: none;
        font-size: 12px;
        letter-spacing: 0.08em;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding-bottom: 2px;
        cursor: pointer;
    }

    .nkc-focus a:hover {
        border-bottom-color: #fff;
    }

    .nkc-focus a[hidden] {
        display: none;
    }

    html.nkc-locked, html.nkc-locked body {
        overflow: hidden;
    }/* ---------- Music players (Monthly Playlists, Live Mixes): dark, to match the site ---------- *//* Apple Music: its own dark theme (set on the player's address), aligned left with the text */

    iframe.nkc-apple {
        display: block;
        margin-left: 0 !important;
        margin-right: auto !important;
        /* Apple's dark theme uses dark-grey panels (up to about 20% grey); this maps that grey to
               pure black like the page and stretches everything above it back up to full white */
        filter: brightness(0.8333) contrast(1.5);
    }/* SoundCloud has no dark theme, so its player is inverted: white becomes black, dark text
         becomes white, and the orange stays orange. Its own cover art is switched off (so it is
         never inverted) and the real cover art is shown beside the player, untouched. */

    .nkc-sc {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        container-type: inline-size;
    }

    .nkc-sc-art {
        flex: none;
        display: block;
        width: 166px;
        /* the player's height, so the art and player line up */
        height: 166px;
        object-fit: cover;
    }/* Narrow spaces (phones): the player gets the full width, without the art */

    @container (max-width: 560px) {
        .nkc-sc-art {
            display: none;
        }
    }

    .nkc-sc-player {
        position: relative;
        flex: 1;
        min-width: 0;
        container-type: inline-size;
    }

    .nkc-sc-player iframe {
        display: block;
        width: 100%;
        /* ...then its near-black background and faint border (up to about 12% grey) become pure
               black like the page, with everything above stretched back up to full white */
        filter: invert(1) hue-rotate(180deg) brightness(0.8929) contrast(1.2727);
    }/* Time played (left) and time left (right), in matching labels at the two ends of the
         waveform. They sit over SoundCloud's own time boxes, which don't match each other. */

    .nkc-sc-time {
        position: absolute;
        top: 99px;
        display: none;
        height: 15px;
        min-width: 48px;
        padding: 0 3px;
        box-sizing: border-box;
        background: #000;
        color: #fff;
        font: 11px/15px -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
        letter-spacing: 0.02em;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
        /* clicks still reach the waveform underneath */
    }

    .nkc-sc-time.is-played {
        left: 5px;
        text-align: left;
    }

    .nkc-sc-time.is-left {
        right: 10px;
        text-align: right;
    }

    .nkc-sc.has-time .nkc-sc-time {
        display: block;
    }/* SoundCloud hides the waveform when its player is very narrow; the labels go with it */

    @container (max-width: 359px) {
        .nkc-sc.has-time .nkc-sc-time {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .nkc-canvas, .nkc-canvas.is-ready, .nkc-item img, .nkc-focus, .nkc-focus img {
            transition: none;
        }
    }

    html.nkc-on, html.nkc-on body {
        overscroll-behavior: none;
    }

    html.nkc-on header.sidebar {
        touch-action: none;
    }