/* ═══════════════════════════════════════════════════════════════════════════
   VideoForge — /work (endless field of finished renders)

   Loads AFTER landing.css and reuses its whole --k-* system (bar, type,
   grain). Only this page's two states live here:
     .wk-canvas / .wk-plane / .wk-tile  — the framer-motion field (JS on)
     .wk-fallback                       — server-rendered still grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The field ──────────────────────────────────────────────────────────── */
/* body.wk-on is set by the bundle at mount: the canvas owns every input,
   the document itself never scrolls. */
body.wk-on { overflow: hidden; height: 100svh; }

.wk-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}
.wk-canvas:active { cursor: grabbing; }
.wk-plane { position: absolute; inset: 0; will-change: transform; }
.wk-copy { position: absolute; left: 0; top: 0; }

.wk-tile {
    position: absolute;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--k-line);
    background: var(--k-surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.wk-tile img, .wk-tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}
.wk-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 12px 10px;
    background: linear-gradient(180deg, rgba(10, 11, 14, 0) 0%, rgba(10, 11, 14, 0.82) 100%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
}
.wk-tile:hover .wk-cap { opacity: 1; }
.wk-cap span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 500 12.5px/1.4 var(--k-bodyface);
    color: #FFFFFF;
}

.wk-hint {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

/* ── Still fallback (no JS / reduced motion) ────────────────────────────── */
.wk-fallback { padding: calc(62px + 6svh) var(--k-gutter) 80px; max-width: 1560px; margin-inline: auto; }
.wk-fb-head { margin-bottom: 42px; }
.wk-fb-head .k-h { margin-top: 16px; }
.wk-fb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px 18px;
}
.wk-fb-card { margin: 0; }
.wk-fb-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    border: 1px solid var(--k-line);
    background: var(--k-surface);
}
.wk-fb-card figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--k-dim); }