/* === TOKENS (supplement to critical inline CSS) === */
/* @font-face, reset, :root, body base are in inline <style> for FOUC prevention */

body {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

body::-webkit-scrollbar {
    width: 4px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 2px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

::selection {
    background: var(--highlight-selection);
    color: var(--text-1);
}

/* === ACCESSIBILITY === */

/* Skip link (visible only on focus) */
.skip-link {
    position: fixed;
    top: 16px;
    left: 16px;
    /* Off-screen via transform, not top: layout properties never animate (audit DL-6). */
    transform: translateY(calc(-100% - 32px));
    transition: transform 0.2s var(--ease-quart);
    z-index: 999;
    padding: 8px 16px;
    background: var(--text-1);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Focus indicators for keyboard navigation */
:focus-visible {
    outline: 1px dashed var(--text-2);
    outline-offset: 3px;
}

/* === PAGE GRID === */

/* --- PAGE GRID (base, always visible) --- */
.page-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 1.5px at 0 0, rgba(255,255,255,0.08) 1.5px, transparent 1.5px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px);
    background-size: var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), 24px 24px, 24px 24px;
}

/* --- PAGE GRID GLOW (mouse-reactive brightness boost) ---
   Refactored from a fullscreen fixed element with mouse-tracked mask
   to a 600px translated div with a static centered mask. The grid
   background is offset by negative cursor coords so the bright lines
   stay aligned with the dim base .page-grid underneath. */
.page-grid-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 600px;
    height: 600px;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(calc(var(--mx, -9999px) - 300px), calc(var(--my, -9999px) - 300px), 0);
    background-image:
        radial-gradient(circle 1.5px at 0 0, rgba(255,255,255,0.2) 1.5px, transparent 1.5px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10) 1px, transparent 1px, transparent 24px);
    background-size: var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), 24px 24px, 24px 24px;
    /* Offset the grid by the inverse cursor position so lines register with the base grid. */
    background-position:
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px);
    -webkit-mask-image: radial-gradient(circle 300px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 300px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    transition: opacity 0.4s var(--ease-quart);
}

body.hero-hovered .page-grid-glow {
    width: 300px;
    height: 300px;
    transform: translate3d(calc(var(--mx, -9999px) - 150px), calc(var(--my, -9999px) - 150px), 0);
    background-position:
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px);
    -webkit-mask-image: radial-gradient(circle 150px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 150px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

@media not all and (hover: hover) {
    .page-grid-glow { display: none; }
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .page-grid, .page-grid-glow {
        background-image:
            radial-gradient(circle 1px at 0 0, rgba(255,255,255,0.06) 1px, transparent 1px),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 96px),
            repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 96px);
        background-size: 96px 96px, 96px 96px, 96px 96px;
    }
}

/* === LAYOUT === */

/* --- CURSOR 3D --- */
@media (hover: hover) and (min-width: 769px) {
    /* The OS cursor is the fail-safe. js/cursor-boot.js adds .cursor-ready only
       once a custom pointer is confirmed visible (3D first frame, or the SVG
       fallback). If WebGL init throws, the GLB 404s, the CDN is blocked, or the
       module stalls, this class never lands and the OS cursor stays. */
    html.cursor-ready *,
    html.cursor-ready *::before,
    html.cursor-ready *::after {
        cursor: none !important;
    }

    #cursor3d,
    #cursor3d-fallback {
        position: fixed;
        top: 0;
        left: 0;
        width: 120px;
        height: 120px;
        pointer-events: none;
        z-index: 10000;
        /* mix-blend-mode removed, caused cursor to vanish over dark overlays like cookie banner */
        transform: translate(calc(var(--mx, -100px) - 60px), calc(var(--my, -100px) - 60px));
    }

    #cursor3d-fallback {
        width: 48px;
        height: 48px;
        transform: translate(calc(var(--mx, -100px) - 24px), calc(var(--my, -100px) - 24px));
    }
}
@media not all and (hover: hover), (max-width: 768px) {
    #cursor3d,
    #cursor3d-fallback { display: none; }
}

/* --- MOBILE CURSOR MARK (audit D3-4) ---
   Where the WebGL cursor doesn't run, cursor-boot.js drops a 28px frame of
   assets/cursor-strip.svg into the page header (or the home hero). Scroll turns it
   by sliding the strip one frame at a time. Transform only. */
.cursor-mark {
    display: inline-block;
    flex: none;
    width: 28px;
    height: 28px;
    overflow: hidden;
    opacity: 0.7;
    pointer-events: none;
}
.cursor-mark img {
    display: block;
    width: auto;
    max-width: none;
    height: 28px;
    will-change: transform;
}
#hero > .cursor-mark {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
}
@media (hover: hover) and (min-width: 769px) {
    .cursor-mark { display: none; }
}

/* Firefox keeps the OS cursor: cursor-boot.js returns before marking ready, so
   .cursor-ready never lands and the rule above never applies. The old
   @-moz-document override is redundant now and was removed. */

/* --- VIEW TRANSITIONS (audit D3-7) ---
   A card cover morphs into the detail-page cover that shares its
   view-transition-name (js/cards.mjs coverTransitionName). Nothing else animates.
   Browsers without support just navigate. */
@view-transition {
    navigation: auto;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 0.5s;
    animation-timing-function: var(--ease-expo);
}

/* No page cross-fade (2026-09-30, user). The old page snapshot is dropped and the
   new one is static, so the page swaps at once and body's own pageIn fade is the
   only page fade, same as a plain navigation. */
::view-transition-old(root) {
    display: none;
}
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* --- LAYOUT --- */

.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

section {
    border-bottom: 1px solid var(--line);
    padding: 80px 0;
}

section:last-of-type {
    border-bottom: none;
}

/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .page {
        padding: 0 24px;
    }

    section {
        padding: 60px 0;
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .page {
        padding: 0 16px;
    }

    section {
        padding: 48px 0;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .page {
        padding: 0 12px;
    }
}

/* === SCROLL INDICATOR: DCC timeline (audit DL-10) ===
   A vertical timeline down the right edge. Sections are keyframes (diamonds on the
   rail), the ticks between them are frame marks, and a playhead rides the rail with
   scroll (transform only, js/scroll-tracking.js). The frame counter maps the page to
   a 240-frame shot (10s at 24fps). The rail runs through the centre of a 13px column. */

.scroll-indicator {
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    opacity: 0;
    animation: fadeIn 0.6s var(--ease-quart) 1.4s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Rail */
.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 55px;      /* first diamond centre: counter (33px) + half a 44px row */
    bottom: 22px;   /* last diamond centre */
    right: 6px;
    width: 1px;
    background: var(--line);
    pointer-events: none;
}

/* Frame counter, top of the timeline */
.scroll-frame {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    background: var(--bg);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 1px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.scroll-frame-value { color: var(--text-1); }

/* Keyframes */
.scroll-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
}

.scroll-section-label {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.25s var(--ease-quart);
}

.scroll-section.active .scroll-section-label {
    color: var(--text-1);
    opacity: 1;
}

.scroll-section:hover .scroll-section-label {
    opacity: 1;
}

/* The track element is now the keyframe diamond's 13px column */
.scroll-section-track {
    position: relative;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.scroll-section-track::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--text-3);
    background: var(--bg);
    transform: rotate(45deg) scale(0.85);
    transition: transform 0.3s var(--ease-expo);
}
.scroll-section.active .scroll-section-track::before {
    border-color: var(--text-1);
    background: var(--text-1);
    transform: rotate(45deg) scale(1);
}
.scroll-section:hover .scroll-section-track::before {
    transform: rotate(45deg) scale(1);
}

/* Frame marks between keyframes */
.scroll-ticks {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 0;
}

.scroll-tick {
    display: block;
    width: 13px;
    height: 1px;
    background: var(--line);
    transform-origin: center;
    transform: scaleX(0.4);
    transition: transform 0.3s var(--ease-expo);
}

/* Playhead: a hairline across the rail with a small head, moved by translateY */
.scroll-playhead {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 2;
    width: 21px;
    height: 1px;
    background: var(--text-1);
    pointer-events: none;
}
.scroll-playhead::before {
    content: '';
    position: absolute;
    right: -3px;
    top: -2px;
    width: 5px;
    height: 5px;
    background: var(--text-1);
}

/* --- Keyboard shortcut hint styles moved to command-palette.css --- */

/* --- Responsive --- */

@media (max-width: 768px) {
    .scroll-indicator {
        display: none;
    }
}

/* === REVEAL ANIMATION === */

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease-expo),
                transform 0.8s var(--ease-expo);
}

.reveal.reveal-ready { opacity: 0; transform: translateY(24px); }

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* === WAVE LOADER === */

.wave-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 0;
}

.wave-loader-bar {
    width: 2px;
    height: 20px;
    background: var(--text-3);
    opacity: 0.4;
    animation: waveScale 0.8s var(--ease-quart) infinite alternate;
}

.wave-loader-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-loader-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-loader-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-loader-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes waveScale {
    0%   { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

/* === HERO === */

#hero {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#hero > .page {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    z-index: 3;
}

.hero-name {
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 0.88;
    margin-bottom: 20px;
    position: relative;
}



.hero-role {
    font-family: var(--mono);
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    line-height: 1.3;
    color: var(--text-1);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    background: rgba(10, 10, 10, 0.275);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-expo) 0.6s forwards;
}

.hero-bio {
    margin-top: 16px;
    color: var(--text-1);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    max-width: 520px;
    position: relative;
    background: rgba(10, 10, 10, 0.275);
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-expo) 0.8s forwards;
}

.hero-bio strong {
    color: var(--text-1);
    font-weight: 700;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- HERO VIDEO BG --- */

.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000; /* backstop only; the poster stays opaque until the video covers it */
}

.hero-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    image-rendering: pixelated;
    opacity: 1;
    /* Deliberately NOT animated. The video above it is what fades; the poster stays
       fully opaque underneath and is only dropped once the video already covers it.
       Fading both at once looks like a fade through black: with poster opacity 1-t and
       video opacity t, the composite weights are t + (1-t)², which bottoms out at 0.75
       halfway across, letting a quarter of the black backdrop through. */
}
.hero-poster-img.faded { opacity: 0; }

.hero-video-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.12) 1px,
        rgba(0, 0, 0, 0.12) 2px
    );
}

.hero-video-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1;
    pointer-events: none;
}

/* DL-14: viewport-style timecode, driven by the dither loop's currentTime (hero.js) */
.hero-timecode {
    position: absolute;
    left: 32px;
    bottom: 24px;
    z-index: 3;
    pointer-events: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.hero-timecode-label {
    color: var(--text-3);
}

@media (max-width: 768px) {
    .hero-timecode { left: 16px; bottom: 16px; }
}

.hero-video-dither {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 350ms var(--ease-quart);
}
.hero-video-dither.visible { opacity: 1; }




.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hero-book-btn {
    text-decoration: none;
}

.showreel-btn {
    padding: 14px 32px;
    background: rgba(10, 10, 10, 0.275);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--text-1);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-expo) 1s forwards;
}

/* The resting link underline sits on the label only. As a UA underline on the
   <a>, it also ran under the space after the icon. */
.showreel-btn {
    text-decoration: none;
}

#showreelBtn .showreel-btn-text {
    text-decoration: underline;
}

.showreel-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--text-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-quint);
}

.showreel-btn-icon {
    display: inline-block;
    transition: transform 0.3s var(--ease-quart);
    font-size: 10px;
    animation: iconPulse 2.4s var(--ease-quart) 2s 3;
}

@keyframes iconPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.showreel-btn:hover .showreel-btn-icon {
    animation: none;
}

.showreel-btn:hover {
    background: rgba(10, 10, 10, 0.45);
    border-color: var(--text-1);
    color: var(--text-1);
}

.showreel-btn:hover .showreel-btn-icon {
    transform: scale(1.3);
}

.showreel-btn:hover::after,
.showreel-btn:focus-visible::after {
    transform: scaleX(1);
}

.showreel-btn:active {
    transform: scale(0.97);
}

.popup-video-container {
    position: relative;
    width: 100%;
}

.popup-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Responsive --- */

/* Mobile (<=768px) */
@media (max-width: 768px) {
    #hero {
        min-height: 70vh;
    }

    #hero > .page {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .hero-name {
        letter-spacing: -2px;
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .hero-role {
        letter-spacing: 1.5px;
        font-size: 0.6875rem;
    }

    .hero-bio {
        font-size: 15px;
        margin-top: 28px;
    }

    .hero-actions {
        margin-top: 28px;
    }

    .showreel-btn {
        padding: 14px 24px;
        font-size: 12px;
        min-height: 44px;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .hero-name {
        font-size: 3rem;
        letter-spacing: -1.5px;
    }
}

/* --- Inline Showreel Crossfade --- */

#hero > .page { transition: opacity 400ms var(--ease-quart); }
#hero > .page.is-hidden { opacity: 0; pointer-events: none; }
.hero-video-bg { transition: opacity 600ms var(--ease-quart); }
.hero-video-bg.is-hidden { opacity: 0; }

.hero-showreel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms var(--ease-quart);
}
.hero-showreel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hero-showreel-frame {
    position: relative;
    width: min(90vw, calc((100vh - 80px) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--line);
}
.hero-showreel-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: auto;
}

.hero-showreel-playbtn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid var(--line);
    color: var(--text-1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--ease-quart);
    z-index: 2;
}
.hero-showreel-playbtn svg { margin-left: 3px; }
.hero-showreel-frame.is-paused .hero-showreel-playbtn {
    opacity: 1;
    pointer-events: auto;
}
.hero-showreel-playbtn:hover { border-color: var(--text-1); }
.hero-showreel-playbtn:focus-visible {
    outline: 1px solid var(--text-1);
    outline-offset: 2px;
}

.hero-showreel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    /* 44px minimum touch target. */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-1);
    cursor: pointer;
}
.hero-showreel-close:hover { border-color: var(--text-1); }
.hero-showreel-close:focus-visible {
    outline: 1px solid var(--text-1);
    outline-offset: 2px;
}

/* Showreel chrome (audit REF-10): under the frame, mono caption left and an Esc
   key chip right (clear of YouTube's own controls). Decorative; the dialog is
   already labelled. */
.hero-showreel-esc {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 3px 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--line);
    pointer-events: none;
}
.hero-showreel-caption {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-2);
}
@media (hover: none) {
    .hero-showreel-esc { display: none; }
}

@media (max-width: 768px) {
    .hero-showreel-frame { width: 94vw; }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. */
.hero-showreel-playbtn {
    transition: transform 0.2s var(--ease-quart), opacity 300ms var(--ease-quart);
}
.hero-showreel-playbtn:hover,
.hero-showreel-playbtn:focus-visible {
    transform: translateY(-1px);
}
.hero-showreel-close {
    transition: transform 0.2s var(--ease-quart);
}
.hero-showreel-close:hover,
.hero-showreel-close:focus-visible {
    transform: translateY(-1px);
}

/* === BUILDING === */

#building {
    padding: 60px 0;
}

#communityCards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 380px; /* reserve space for two stacked async-loaded cards (CLS prevention) */
}

.section-header {
    font-family: var(--mono);
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 48px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.section-header-index {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-3);
    flex-shrink: 0;
    opacity: 0;
}

.reveal.visible .section-header-index {
    animation: indexFlicker 0.4s var(--ease-quart) 0.1s forwards;
}

@keyframes indexFlicker {
    0% { opacity: 0; }
    20% { opacity: 0.6; }
    40% { opacity: 0.15; }
    60% { opacity: 0.8; }
    80% { opacity: 0.3; }
    100% { opacity: 1; }
}

.section-header-text {
    font-size: 10px;
    letter-spacing: 4px;
}

.section-header-line {
    flex: 1;
    height: 1px;
    background: var(--line);
    min-width: 40px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--ease-quint) 0.3s;
}

.reveal.visible .section-header-line {
    transform: scaleX(1);
}

.community-feature {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    align-items: stretch;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    background: var(--bg);
    margin-bottom: 0;
    transition: transform 0.3s var(--ease-quart);
    position: relative;
    cursor: pointer;
}

.reveal.visible.community-feature,
.reveal.visible .community-feature {
    border-color: var(--line);
}

.community-feature--featured {
    margin-bottom: 0;
}

.community-feature:hover {
    border-color: var(--line-hover);
    transform: translateY(-2px);
    transition-delay: 0s;
}


.community-feature-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: none;
    overflow: hidden;
    background: var(--accent-community);
}

.community-feature-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.community-feature-content {
    position: relative;
    padding: 24px;
}

.community-feature-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.community-feature-title {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.community-feature-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-2);
    line-height: 1.4;
    max-width: 500px;
}

.community-feature-url {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 0.5px;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.community-feature:hover .community-feature-url {
    color: var(--text-2);
}

.community-feature-url .arrow {
    display: inline-block;
    transition: transform 0.3s var(--ease-expo);
}

.community-feature:hover .community-feature-url .arrow {
    transform: translate(3px, -3px);
}

[data-vibecode-trigger],
[data-float-id] {
    cursor: pointer;
}


/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .community-feature-content {
        padding: 32px;
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 32px;
    }

    #communityCards {
        grid-template-columns: 1fr;
        min-height: 380px; /* 2 cards (~168px each) + gap on mobile */
    }

    .community-feature {
        grid-template-columns: 100px 1fr;
    }

    .community-feature-content {
        padding: 16px;
    }

    .community-feature-title {
        font-size: 18px;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .community-feature-content {
        padding: 20px;
    }
}

/* === SHOWCASE TILES === */

.showcase-label {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-3);
    margin-bottom: 16px;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

/* Quiet route to the full portfolio. The only other paths to /work were the
   footer and a link inside a modal, so a rushed visitor never saw one. Reuses
   the .showcase-label type scale and the .page-meta-link underline treatment. */
.showcase-viewall {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: -16px 0 40px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-3);
    text-decoration: none;
}

.showcase-viewall-text {
    border-bottom: 1px solid var(--line-hover);
}

.showcase-viewall:hover,
.showcase-viewall:focus-visible {
    color: var(--text-1);
}

/* Underline draws in on hover (audit DL-12): a --text-1 hairline scales over
   the dim border, transform only. */
.showcase-viewall-text {
    position: relative;
}
.showcase-viewall-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--text-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-expo);
    pointer-events: none;
}
.showcase-viewall:hover .showcase-viewall-text::after,
.showcase-viewall:focus-visible .showcase-viewall-text::after {
    transform: scaleX(1);
}

.showcase-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 2px solid var(--line);
    overflow: hidden;
    transition: transform 0.3s var(--ease-quart);
}

.showcase-tile:hover,
.showcase-tile:focus-visible {
    border-color: var(--text-3);
    transform: translateY(-2px);
}

/* Split-click tiles (experiments): thumb and text are separate sibling anchors. */
.showcase-tile-thumb-link,
.showcase-tile-text-link {
    display: block;
    text-decoration: none;
    color: inherit;
    outline-offset: -2px;
}

.showcase-tile:has(.showcase-tile-thumb-link:focus-visible),
.showcase-tile:has(.showcase-tile-text-link:focus-visible) {
    border-color: var(--text-3);
    transform: translateY(-2px);
}

.showcase-tile-text-link:focus-visible .showcase-tile-name .arrow {
    transform: translate(2px, -2px);
}

.showcase-tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    overflow: hidden;
}

.showcase-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s var(--ease-quart);
}

.showcase-tile-thumb video {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s var(--ease-quart);
}

.showcase-tile-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.3s var(--ease-quart);
}

.showcase-tile-thumb.video-playing .showcase-tile-loader {
    opacity: 0;
    pointer-events: none;
}

.showcase-tile-thumb--svg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0176C3;
}

.showcase-tile-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 1.5px;
}

.showcase-tile-name {
    padding: 10px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.showcase-tile-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.showcase-tile-name .arrow {
    font-size: 14px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-expo);
}

.showcase-tile:hover .showcase-tile-name .arrow,
.showcase-tile:focus-visible .showcase-tile-name .arrow {
    transform: translate(2px, -2px);
}

.showcase-tile-info {
    padding: 2px 10px 0;
    font-size: 11px;
    font-family: var(--mono);
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 0.5px;
}

.showcase-tile-info:last-child {
    padding-bottom: 10px;
}

.showcase-tile-info2 {
    padding: 2px 10px 10px;
    font-size: 11px;
    font-family: var(--mono);
    line-height: 1.3;
    color: var(--text-3);
    opacity: 0.75;
    letter-spacing: 0.5px;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
    }

    #showcaseCommunity { display: none; }
}

@media (max-width: 400px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* === BRAND FLOAT CARD === */

.brand-float {
    position: fixed;
    z-index: 160;
    pointer-events: auto;
    opacity: 0;
    transform: perspective(600px) scale(0.92) translateY(8px) rotateX(-8deg);
    transform-origin: top center;
    transition: opacity 0.2s var(--ease-expo),
                transform 0.2s var(--ease-expo);
    background:
        /* Covers: scroll with content, hide fades at edges */
        linear-gradient(var(--surface) 30%, transparent) top / 100% 80px no-repeat local,
        linear-gradient(transparent, var(--surface) 70%) bottom / 100% 80px no-repeat local,
        /* Fades: stay fixed, revealed as content scrolls away from edge */
        linear-gradient(to bottom, var(--surface), transparent) top / 100% 48px no-repeat scroll,
        linear-gradient(to top, var(--surface), transparent) bottom / 100% 48px no-repeat scroll,
        var(--surface);
    border: 2px solid var(--text-3);
    padding: 20px;
    min-width: 200px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    overscroll-behavior: contain;
}

.brand-float.visible {
    opacity: 1;
    transform: perspective(600px) scale(1) translateY(0) rotateX(0);
}

.brand-float.exiting {
    opacity: 0;
    transform: perspective(600px) scale(0.96) translateY(4px) rotateX(-5deg);
    transition-duration: 0.12s;
    pointer-events: none;
}

@media (max-width: 480px) {
    .brand-float {
        min-width: 130px;
        padding: 14px;
    }
}

.brand-float-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.brand-float-title-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.brand-float-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
}

.brand-float-title-arrow {
    font-size: 0.78em;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.18s var(--ease-quart);
}

.brand-float-title-link:hover .brand-float-title-arrow,
.brand-float-title-link:focus-visible .brand-float-title-arrow {
    opacity: 0.75;
}

@media (hover: none) {
    .brand-float-title-arrow { opacity: 0.6; }
}

.brand-float-count {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 0.5px;
}

.brand-float-grid {
    display: grid;
    gap: 10px;
    /* columns set dynamically by JS */
}

.brand-float-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    overflow: hidden;
}

.brand-float-tile:hover,
.brand-float-tile:has(.brand-float-tile-thumb-link:focus-visible),
.brand-float-tile:has(.brand-float-tile-text-link:focus-visible) {
    border-color: var(--text-3);
}

/* Split popup tiles: thumb and text are separate sibling anchors. */
.brand-float-tile-thumb-link,
.brand-float-tile-text-link {
    display: block;
    text-decoration: none;
    color: inherit;
    outline-offset: -2px;
}

.brand-float-tile-text-link:focus-visible .brand-float-tile-name .arrow {
    transform: translate(2px, -2px);
}

.brand-float-tile-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    overflow: hidden;
}

.brand-float-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-float-tile-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 1.5px;
}

.brand-float-tile-name {
    padding: 10px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.brand-float-tile-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.brand-float-tile-name .arrow {
    font-size: 14px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-expo);
}

.brand-float-tile:hover .brand-float-tile-name .arrow {
    transform: translate(2px, -2px);
}

.brand-float-tile-brands {
    padding: 4px 10px 0;
    font-size: 10px;
    font-family: var(--mono);
    line-height: 1.3;
    color: var(--text-3);
    opacity: 0.6;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-float-tile-info {
    padding: 2px 10px 0;
    font-size: 10px;
    font-family: var(--mono);
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 0.5px;
}

.brand-float-tile-info:last-child {
    padding-bottom: 10px;
}

.brand-float-tile-info2 {
    padding: 2px 10px 10px;
    font-size: 10px;
    font-family: var(--mono);
    line-height: 1.3;
    color: var(--text-3);
    opacity: 0.75;
    letter-spacing: 0.5px;
}

/* --- Close button for touch devices --- */

.brand-float-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-3);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.3;
    font-family: var(--mono);
    z-index: 2;
}

.brand-float-close:hover {
    border-color: var(--text-2);
    color: var(--text-1);
}

.brand-float-close:focus-visible {
    border-color: var(--text-1);
    color: var(--text-1);
    outline: 1px dashed var(--text-1);
    outline-offset: 2px;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .brand-float-tile-thumb {
        aspect-ratio: 16 / 9;
    }

    .brand-float-tile-name {
        font-size: 13px;
        padding: 8px;
        padding-bottom: 0;
    }

    .brand-float-tile-info {
        padding: 2px 8px 8px;
        font-size: 10px;
    }
}

/* Touch device bottom sheet layout */
@media (hover: none) {
    .brand-float {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 60vh !important;
        padding: 20px;
        padding-top: 48px;
        transform: translateY(100%);
        transform-origin: bottom center;
        border: none;
        border-top: 2px solid var(--text-3);
    }

    .brand-float.visible {
        transform: translateY(0);
    }

    .brand-float.exiting {
        transform: translateY(100%);
    }

    .brand-float-close {
        display: flex;
    }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. */
.brand-float-tile {
    transition: transform 0.2s var(--ease-quart);
}
.brand-float-tile:hover,
.brand-float-tile:has(.brand-float-tile-thumb-link:focus-visible),
.brand-float-tile:has(.brand-float-tile-text-link:focus-visible) {
    transform: translateY(-2px);
}
.brand-float-close {
    transition: transform 0.2s var(--ease-quart);
}
.brand-float-close:hover,
.brand-float-close:focus-visible {
    transform: translateY(-1px);
}

/* === PROJECTS === */

#projects {
    padding: 60px 0;
    overflow: hidden;
}

/* work-section-header removed, using .section-header instead */

.clients-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}

.clients-sub-header h3 {
    font-size: 12px;
    font-family: var(--mono);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-3);
    font-weight: 400;
}

.logo-grid-wrap {
    position: relative;
}

.wip-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    pointer-events: none;
}

.wip-overlay span {
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-3);
    border: 1px solid var(--line);
    padding: 8px 20px;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.logo-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--text-3) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: translateX(-100%);
}

.logo-grid.scan::after {
    opacity: 1;
    animation: scanLine 0.8s var(--ease-quint) forwards;
}

@keyframes scanLine {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.logo-cell {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    aspect-ratio: 1.5;
    cursor: pointer;
    transition: transform 0.3s var(--ease-quart);
    position: relative;
}


.logo-cell:hover {
    background: var(--surface);
    z-index: 1;
    transform: scale(1.02);
}

.logo-cell img {
    max-width: 80px;
    max-height: 40px;
    opacity: 0.45;
    filter: grayscale(100%) brightness(2);
    transition: opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
}

.logo-cell--all {
    aspect-ratio: auto;
    flex-direction: column;
    gap: 8px;
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.logo-cell--all .logo-cell-all-icon {
    width: 13px;
    height: 13px;
    opacity: 0.55;
    transition: opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
}

.logo-cell--all .logo-cell-all-label {
    opacity: 0.7;
    transition: opacity 0.3s var(--ease-quart);
}

.logo-cell--all:hover .logo-cell-all-icon,
.logo-cell--all:hover .logo-cell-all-label {
    opacity: 1;
    color: var(--text-1);
}

/* --- Expand button --- */

.logo-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-top: none;
    background: var(--bg);
    color: var(--text-3);
    padding: 4px 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.logo-expand-btn:hover {
    background: var(--surface);
    color: var(--text-2);
}

.logo-expand-btn:focus-visible {
    outline: 1px dashed var(--text-1);
    outline-offset: -2px;
}

/* --- Inactive logo grid (accordion) --- */

.logo-grid--inactive {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    border: none;
    background: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.3s var(--ease-quart);
}

/* Height snaps open (no layout animation, audit DL-6); only opacity fades. */
.logo-grid--inactive.expanded {
    height: auto;
    opacity: 1;
    overflow: visible;
    border: 1px solid var(--line);
    border-top: none;
    background: var(--line);
}

.logo-cell--inactive {
    padding: 4px;
    aspect-ratio: 1.5;
    cursor: default;
}

.logo-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 4px 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--ease-quart), transform 0.15s var(--ease-quart);
    z-index: 9997;
    text-decoration: none;
}

.logo-tooltip--link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--text-3);
}

.logo-cell--inactive:hover .logo-tooltip,
.logo-cell--inactive:focus .logo-tooltip,
.logo-cell--inactive.tooltip-active .logo-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.logo-cell--inactive:hover,
.logo-cell--inactive:focus,
.logo-cell--inactive.tooltip-active {
    transform: none;
}

.logo-cell--inactive:focus-visible {
    outline: 1px dashed var(--text-1);
    outline-offset: -2px;
}

.logo-cell--inactive img {
    max-width: 64px;
    max-height: 32px;
}

.logo-cell:hover img {
    opacity: 0.7;
    transform: scale(1.04);
}

.hover-ants {
    position: fixed;
    pointer-events: none;
    z-index: 80;
    background:
        repeating-linear-gradient(90deg, var(--text-1) 0 4px, transparent 4px 8px) top / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, var(--text-1) 0 4px, transparent 4px 8px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(0deg, var(--text-1) 0 4px, transparent 4px 8px) left / 1px 100% no-repeat,
        repeating-linear-gradient(0deg, var(--text-1) 0 4px, transparent 4px 8px) right / 1px 100% no-repeat;
    animation: marching-ants 0.4s linear infinite;
    opacity: 0;
    transition: opacity 0.15s var(--ease-quart);
}

.hover-ants.search-highlight {
    transition: opacity 0.4s var(--ease-quart);
    animation: marching-ants 0.4s linear infinite, search-flicker 2s var(--ease-quart) forwards;
}

@keyframes search-flicker {
    0%   { opacity: 1; }
    15%  { opacity: 0.3; }
    30%  { opacity: 1; }
    50%  { opacity: 0.5; }
    70%  { opacity: 0.8; }
    100% { opacity: 0; }
}

.hover-ants.visible {
    opacity: 1;
}

.hover-ants-plus {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-1);
}

@keyframes marching-ants {
    to { background-position: 8px top, -8px bottom, left -8px, right 8px; }
}

/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .logo-cell {
        padding: 20px 12px;
    }

    .logo-cell img {
        max-width: 56px;
        max-height: 28px;
    }

    .logo-cell--all {
        order: -1;
        grid-column: 1 / -1 !important;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. */
.logo-expand-btn {
    transition: transform 0.2s var(--ease-quart);
}
.logo-expand-btn:hover,
.logo-expand-btn:focus-visible {
    transform: translateY(-1px);
}

/* Credits — IMDb film & TV. Home-page section (index.html is hand-authored, not block-driven).
   Posters are embedded media: full color, never filter: grayscale(). Borders + opacity only. */

.imdb-sub {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
    margin: 14px 0 28px;
    max-width: 56ch;
}

.imdb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 18px;
}

.imdb-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--text-1);
}
.imdb-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: 250px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: opacity 240ms var(--ease-quart);
}
.imdb-card:hover .imdb-poster { border-color: var(--line-hover); }

.imdb-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.imdb-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.imdb-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
    line-height: 1.25;
}
.imdb-card:hover .imdb-title { text-decoration: underline; }
.imdb-year {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
}
.imdb-role {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    line-height: 1.3;
}

.imdb-viewall {
    display: inline-block;
    margin-top: 30px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
    text-decoration: none;
}
.imdb-viewall:hover { color: var(--text-1); }

@media (max-width: 768px) {
    .imdb-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .imdb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. The frame lifts so the slate moves with it. */
.imdb-frame {
    position: relative;
    display: block;
    transition: transform 0.2s var(--ease-quart);
}
.imdb-card:hover .imdb-frame,
.imdb-card:focus-visible .imdb-frame {
    transform: translateY(-2px);
}

/* Slate (audit DL-16): mono clapperboard block over the poster foot on hover.
   Decorative copy of the meta below, so aria-hidden in markup. */
.imdb-slate {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 8px 8px;
    background: rgba(10, 10, 10, 0.92);
    border-top: 1px solid var(--text-3);
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-quart);
}
.imdb-slate-bar {
    display: block;
    height: 6px;
    margin: 0 -8px 5px;
    background: repeating-linear-gradient(-45deg, var(--text-1) 0 6px, transparent 6px 12px);
    opacity: 0.85;
}
.imdb-slate-row {
    display: flex;
    gap: 8px;
    min-width: 0;
}
.imdb-slate-key {
    flex: 0 0 3.2em;
    color: var(--text-3);
}
.imdb-slate-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.imdb-card:hover .imdb-slate,
.imdb-card:focus-visible .imdb-slate {
    opacity: 1;
}

/* === CONTACT / FOOTER === */

#contact {
    border-top: 1px solid var(--line);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: var(--bg);
}

.footer-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
}

.contact-body {
    text-align: center;
}

.contact-email {
    margin-bottom: 64px;
    position: relative;
}

.contact-email a {
    font-family: var(--mono);
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-2);
    text-decoration: none;
    letter-spacing: 2px;
}

.contact-email a:hover,
.contact-email a:focus-visible {
    color: var(--text-1);
}

.contact-email .email-copied {
    color: var(--text-1);
}

/* Separate copy action, so the mailto link can do what it says it does. */
.contact-email-copy {
    margin-left: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--line-hover);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

.contact-email-copy:hover,
.contact-email-copy:focus-visible {
    color: var(--text-1);
    border-color: var(--text-1);
}

.contact-email-copy[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-1);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 180ms var(--ease-quart), transform 180ms var(--ease-quart);
}

.contact-email-copy[data-tooltip]:hover::after,
.contact-email-copy[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.copy-confirm {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
}

.copy-confirm--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Body link to /services (audit SEO-10 / POS-4). Colour flips on hover, no transition. */
.contact-services {
    margin: -40px 0 40px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-services a {
    color: var(--text-2);
    border-bottom: 1px solid var(--line-hover);
    padding-bottom: 2px;
}

.contact-services a:hover,
.contact-services a:focus-visible {
    color: var(--text-1);
    border-color: var(--text-1);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    max-width: 100%;
    overflow: hidden;
}

.contact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 12px;
    background: var(--bg);
    color: var(--text-3);
    text-decoration: none;
    transition: transform 0.3s var(--ease-quart);
}

.contact-link:hover,
.contact-link:focus-visible {
    color: var(--text-1);
}

.contact-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s var(--ease-quart);
}

@media (hover: hover) and (min-width: 769px) {
    .contact-grid {
        perspective: 600px;
    }
    .contact-link:hover,
    .contact-link:focus-visible {
        transform: rotateX(-4deg) translateY(-2px);
    }
    .contact-link:hover .contact-icon,
    .contact-link:focus-visible .contact-icon {
        transform: scale(1.15);
    }
}

.contact-link span {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.contact-more-toggle {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.contact-more-toggle .contact-icon {
    transition: transform 0.5s var(--ease-expo) !important;
}

.contact-more-toggle[aria-expanded="true"] .contact-icon {
    transform: rotate(90deg) scale(1.15) !important;
}

.contact-more-content {
    visibility: hidden;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: none;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 0.35s var(--ease-quart) !important;
}

.contact-more-content .contact-link {
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.4s var(--ease-expo),
                opacity 0.3s var(--ease-quart) !important;
}

.contact-more-content.open .contact-link {
    transform: translateY(0);
    opacity: 1;
}

/* Height snaps open (no layout animation, audit DL-6); opacity and the link
   stagger carry the motion. */
.contact-more-content.open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

footer {
    padding: 0;
    background: var(--bg);
    position: relative;
    z-index: 1;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 0;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

@media (max-width: 480px) {
    .footer-bottom {
        gap: 8px;
        padding: 16px 12px;
    }
}

.footer-privacy-link {
    color: var(--text-3);
    text-decoration: none;
}

.footer-privacy-link:hover,
.footer-privacy-link:focus-visible {
    color: var(--text-2);
}

/* --- Responsive --- */

/* Mobile (<=768px) */
@media (max-width: 768px) {
    /* Four columns, not five: five compressed the labels across 401-768px. */
    .contact-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-more-content {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-email a {
        font-size: 16px;
        padding: 12px 16px;
        display: inline-block;
        overflow-wrap: break-word;
    }

    .contact-link {
        padding: 20px 8px;
    }

    .contact-link span {
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-more-content {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-email a {
        font-size: 13px;
        letter-spacing: 1px;
        padding: 12px 8px;
    }

    .contact-link {
        padding: 16px 6px;
    }

    .contact-link span {
        font-size: 11px;
    }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. */
.contact-email-copy {
    transition: transform 0.2s var(--ease-quart);
}
.contact-email-copy:hover,
.contact-email-copy:focus-visible {
    transform: translateY(-1px);
}

/* === COMMAND PALETTE === */

.cmd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--overlay-dark-heavy);
    opacity: 0;
    transition: opacity 0.15s var(--ease-quart);
    pointer-events: none;
}

.cmd-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.cmd-palette {
    position: fixed;
    z-index: 9999;
    top: min(20vh, 160px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.98);
    width: min(600px, calc(100vw - 32px));
    max-height: 60vh;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-quart), transform 0.15s var(--ease-quart);
}

.cmd-palette.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.cmd-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.cmd-input-icon {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    flex-shrink: 0;
}

.cmd-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-1);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 400;
}

.cmd-input::placeholder {
    color: var(--text-3);
}

.cmd-kbd {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    border: 1px solid var(--line);
    padding: 2px 6px;
    flex-shrink: 0;
}

.cmd-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.cmd-group-label {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-3);
    padding: 10px 16px 4px;
}

.cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
}

.cmd-item.active {
    background: var(--highlight-subtle);
}

.cmd-item-icon {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.cmd-item-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-1);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-item-sub {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    flex-shrink: 0;
}

/* Browse descriptors (REF-5): the sentence yields width before the label does */
.cmd-item--desc .cmd-item-label { flex: 0 0 auto; }
.cmd-item--desc .cmd-item-sub {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-item mark {
    background: var(--highlight-mark);
    color: var(--text-1);
}

.cmd-empty {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    text-align: center;
    padding: 32px 16px;
}

.cmd-footer {
    border-top: 1px solid var(--line);
    padding: 8px 16px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.cmd-hint {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cmd-hint kbd {
    border: 1px solid var(--line);
    padding: 1px 4px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .cmd-palette {
        top: min(12vh, 80px);
        max-height: 70vh;
    }

    .cmd-item {
        min-height: 44px;
        padding: 12px 16px;
    }

    .cmd-item-label {
        font-size: 14px;
    }

    .cmd-footer {
        display: none;
    }
}

@media (max-width: 400px) {
    .cmd-palette {
        width: calc(100vw - 16px);
        max-height: 75vh;
    }
}

/* --- Current page marker --- */

.cmd-item--current {
    opacity: 0.45;
}

.cmd-item--current.active {
    opacity: 0.7;
}

.cmd-item-here {
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 1.5px;
    color: var(--text-3);
    border: 1px solid var(--line);
    padding: 1px 5px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* --- Toast --- */

.cmd-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-quart), transform 0.3s var(--ease-quart);
    z-index: 10000;
    white-space: nowrap;
}

.cmd-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- Keyboard shortcut hint --- */

.kbd-hint {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 1;
    transition: opacity 0.4s var(--ease-quart);
}

.kbd-hint kbd {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    padding: 2px 4px;
    border: 1px solid var(--line);
    color: var(--text-3);
}

.kbd-divider {
    color: var(--line);
    margin: 0 4px;
    font-size: 10px;
}

@media (max-width: 768px) {
    .kbd-hint { display: none; }
}

/* --- Mobile search FAB (pages without page-header) --- */

.page-header-search { display: inline-flex; }

.mobile-search-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
}

.mobile-search-fab:hover,
.mobile-search-fab:focus-visible {
    color: var(--text-1);
    border-color: var(--text-3);
    outline: none;
}

@media (max-width: 768px) {
    .mobile-search-fab { display: inline-flex; }
    .page-header-search { display: none; }
    /* Scrolled to the end, the fixed FAB sits on the footer's last row;
       clear it (20px offset + 48px button + 20px). */
    footer .footer-bottom { padding-bottom: 88px; }
}

/* Hover lift (audit DL-13). Colour and border changes are instant; the only
   hover motion is a 1-2px transform. */
.mobile-search-fab {
    transition: transform 0.2s var(--ease-quart);
}
.mobile-search-fab:hover,
.mobile-search-fab:focus-visible {
    transform: translateY(-1px);
}

/* Hidden palette commands (audit D3-6). Typed exactly: wireframe, grid, specs. */
html.cmd-wireframe body *:not(#cursor3d):not(.page-grid):not(.page-grid-glow) {
    outline: 1px solid rgba(255, 255, 255, 0.16);
    outline-offset: -1px;
}
html.cmd-grid-dense { --grid-heartbeat: 24px; }

.cmd-specs {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9997;
    min-width: 220px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    opacity: 0;
    transition: opacity 0.2s var(--ease-quart);
}
.cmd-specs.show { opacity: 1; }
.cmd-specs-head,
.cmd-specs-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 3px 0;
}
.cmd-specs-head {
    color: var(--text-1);
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 6px;
}
.cmd-specs-row span:last-child { color: var(--text-1); }
.cmd-specs-close {
    font: inherit;
    color: var(--text-3);
    background: none;
    border: 1px solid var(--line);
    padding: 0 6px;
    cursor: pointer;
}
.cmd-specs-close:hover { color: var(--text-1); }

/* Keymap overlay (audit DL-18): `?` on any page. Blender-keymap style key caps.
   Flat: dim scrim, hairline panel, no blur or shadow. Opacity + 4px lift only. */
.keymap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 10, 10, 0.86);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-quart);
}
.keymap.open {
    opacity: 1;
    pointer-events: auto;
}
.keymap-panel {
    width: min(720px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--line);
    font-family: var(--mono);
    color: var(--text-2);
    transform: translateY(4px);
    transition: transform 0.3s var(--ease-quart);
}
.keymap.open .keymap-panel { transform: none; }
.keymap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.keymap-title {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-1);
}
.keymap-close {
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-2);
    background: none;
    border: 1px solid var(--line);
    padding: 2px 6px;
    cursor: pointer;
}
.keymap-close:hover,
.keymap-close:focus-visible { color: var(--text-1); }
.keymap-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.keymap-group { padding: 14px 16px 18px; }
.keymap-group + .keymap-group { border-left: 1px solid var(--line); }
.keymap-group-title {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}
.keymap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.keymap-row {
    display: grid;
    grid-template-columns: 13em 1fr;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}
.keymap-keys {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}
.keymap-cap {
    display: inline-block;
    min-width: 22px;
    padding: 3px 6px;
    border: 1px solid var(--text-3);
    border-bottom-width: 2px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: var(--text-1);
}
.keymap-plus,
.keymap-or {
    font-size: 9px;
    color: var(--text-3);
}
.keymap-or { padding: 0 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.keymap-word {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-1);
}
.keymap-label { color: var(--text-2); }

@media (max-width: 560px) {
    .keymap-cols { grid-template-columns: 1fr; }
    .keymap-group + .keymap-group { border-left: 0; border-top: 1px solid var(--line); }
}