/* ============================================================
   KN Constructions — Project Detail
   "Sculpted Edge": full-bleed photo, drawn S-curve notch,
   selector dock cradled in the notch, quiet editorial content.
   Uses the site's own tokens (paper / ink / brass). Does NOT
   redefine :root.
   ============================================================ */

.kn-detail-body {
    --d-paper: var(--kn-paper, #FAF7F2);
    --d-ink: var(--kn-ink, #0E0E10);
    --d-brass: var(--kn-brass, #B8934D);
    --d-mute: var(--kn-slate, #6b6e75);
    --d-line: rgba(14, 14, 16, 0.14);
    --d-serif: var(--kn-font-serif, 'Cormorant Garamond', Georgia, serif);
    --d-sans: var(--kn-font-sans, system-ui, -apple-system, 'Segoe UI', sans-serif);
    --d-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --d-gutter: max(24px, calc((100% - 1320px) / 2 + 40px));

    margin: 0;
    background: var(--d-paper);
    color: var(--d-ink);
    overflow-x: hidden;
}
.kn-detail-body.kn-lock { overflow: hidden; }
.kn-detail-main { position: relative; overflow-x: clip; }

/* ------------------------------------------------------------
   1. STAGE (photo)
   ------------------------------------------------------------ */
.kn-stage { position: relative; isolation: isolate; z-index: 2; }

.kn-stage-media {
    position: relative;
    height: min(84vh, 900px);
    min-height: 560px;
    overflow: hidden;
    background: #1a1c1b;
    cursor: zoom-in;
    touch-action: pan-y;
}

/* scroll parallax wrapper (no transition → follows scroll exactly) */
.kn-parallax {
    position: absolute;
    inset: -7% -2%;
    transform: translate3d(0, var(--sy, 0px), 0);
    will-change: transform;
}
/* pointer parallax wrapper (eased) */
.kn-pointer {
    position: absolute;
    inset: 0;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform 0.9s var(--d-ease);
}

.kn-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1s ease, transform 1.7s var(--d-ease);
    filter: saturate(1.04) contrast(1.03);
}
.kn-layer.is-active {
    opacity: 1;
    animation: kn-drift 20s ease-in-out infinite alternate;
}
@keyframes kn-drift { from { scale: 1; } to { scale: 1.05; } }

/* intro: photo settles in */
.kn-stage:not(.is-ready) .kn-pointer { opacity: 0; }
.kn-stage .kn-pointer { transition: transform 0.9s var(--d-ease), opacity 1.6s ease; }

.kn-stage-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(14, 14, 16, 0.42) 0%, rgba(14, 14, 16, 0) 26%),
        linear-gradient(0deg, rgba(14, 14, 16, 0.34) 0%, rgba(14, 14, 16, 0) 34%);
}

/* ------------------------------------------------------------
   2. HUD over the photo
   ------------------------------------------------------------ */
.kn-hud-cap {
    position: absolute;
    left: var(--d-gutter);
    bottom: 116px;
    z-index: 5;
    max-width: 440px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.9s ease 1.1s;
}
.kn-hud-count {
    font: 300 56px/1 var(--d-serif);
    letter-spacing: -0.02em;
}
.kn-hud-count small { font: 600 12px var(--d-sans); letter-spacing: 0.22em; opacity: 0.72; margin-left: 6px; }
.kn-hud-line { width: 56px; height: 1px; background: var(--d-brass); margin: 14px 0 12px; }
.kn-hud-text { font: italic 400 24px/1.25 var(--d-serif); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.kn-hud-text.is-in { animation: kn-cap 0.8s var(--d-ease) both; }
@keyframes kn-cap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kn-expand {
    position: absolute;
    right: var(--d-gutter);
    bottom: 116px;
    z-index: 5;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(14, 14, 16, 0.34);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.9s ease 1.2s, background 0.3s, transform 0.4s var(--d-ease);
}
.kn-expand:hover { background: var(--d-brass); transform: scale(1.06); }
.kn-expand svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.kn-stage.is-ready .kn-hud-cap,
.kn-stage.is-ready .kn-expand { opacity: 1; }

/* ------------------------------------------------------------
   3. THE SCULPTED EDGE  (drawn, not clipped)
   Shoulders are flat cream; the notch is a fixed-geometry SVG
   so the curves are identical at every viewport width.
   ------------------------------------------------------------ */
.kn-edge {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    z-index: 4;
    display: flex;
    pointer-events: none;
    filter: drop-shadow(0 -10px 16px rgba(14, 14, 16, 0.12));
}
.kn-edge-side {
    flex: 1;
    min-height: 100%;
    background: var(--d-paper);
    position: relative;
}
.kn-edge-side::before,
.kn-edge-side::after {
    content: "";
    position: absolute; left: 0; right: 0;
    background: var(--d-brass);
}
.kn-edge-side::before { top: 0; height: 1px; opacity: 0.8; }
.kn-edge-side::after  { top: -7px; height: 1px; opacity: 0.3; }

.kn-edge-svg {
    flex: 0 0 min(1100px, 100%);
    width: min(1100px, 100%);
    aspect-ratio: 1100 / 64;
    height: auto;
    display: block;
    overflow: visible;
}
.kn-edge-fill { fill: var(--d-paper); }
.kn-edge-line, .kn-edge-echo { fill: none; stroke: var(--d-brass); stroke-width: 1; }
.kn-edge-line { opacity: 0.8; }
.kn-edge-echo { opacity: 0.3; transform: translateY(-7px); }

/* contour draws itself on load */
.kn-edge-line, .kn-edge-echo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--d-ease) 0.5s; }
.kn-stage.is-ready .kn-edge-line,
.kn-stage.is-ready .kn-edge-echo { stroke-dashoffset: 0; }
.kn-edge-side::before, .kn-edge-side::after { transform: scaleX(0); transition: transform 1.8s var(--d-ease) 0.6s; }
.kn-edge-side:first-child::before, .kn-edge-side:first-child::after { transform-origin: right; }
.kn-edge-side:last-child::before,  .kn-edge-side:last-child::after  { transform-origin: left; }
.kn-stage.is-ready .kn-edge-side::before,
.kn-stage.is-ready .kn-edge-side::after { transform: scaleX(1); }

@media (max-width: 1100px) { .kn-edge-side { display: none; } }

/* ------------------------------------------------------------
   4. SELECTOR DOCK — below the large image, cradled in the notch
   ------------------------------------------------------------ */
.kn-dock {
    position: absolute;
    left: 50%;
    bottom: -58px;
    z-index: 6;
    width: calc(min(1100px, 100%) * 0.64);
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(184, 147, 77, 0.38);
    background: rgba(250, 247, 242, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 26px 50px -22px rgba(14, 14, 16, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translate(-50%, 28px);
    opacity: 0;
    transition: transform 1.1s var(--d-ease) 1s, opacity 0.9s ease 1s;
}
.kn-stage.is-ready .kn-dock { transform: translate(-50%, 0); opacity: 1; }

.kn-dock-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--d-line);
    background: transparent;
    color: var(--d-ink);
    display: grid; place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--d-ease);
}
.kn-dock-btn:hover { background: var(--d-ink); color: var(--d-paper); border-color: var(--d-ink); }
.kn-dock-btn:active { transform: scale(0.94); }
.kn-dock-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.kn-dock-list {
    display: flex;
    gap: 10px;
    justify-content: center;
    overflow-x: auto;
    padding: 8px 8px 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.kn-dock-list::-webkit-scrollbar { display: none; }

.kn-dock-thumb {
    position: relative;
    flex: 1 1 0;
    min-width: 66px;
    max-width: 112px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 11px;
    overflow: hidden;
    background: #d9d5cc;
    cursor: pointer;
    scroll-snap-align: center;
    opacity: 0.7;
    filter: grayscale(0.3);
    transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--d-ease), box-shadow 0.4s;
}
.kn-dock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--d-ease); }
.kn-dock-thumb:hover { opacity: 1; filter: none; transform: translateY(-3px); }
.kn-dock-thumb:hover img { transform: scale(1.08); }
.kn-dock-thumb.is-active {
    opacity: 1;
    filter: none;
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--d-paper), 0 0 0 3.5px var(--d-brass), 0 12px 22px -10px rgba(14, 14, 16, 0.5);
}
.kn-dock-thumb::before {   /* numeral */
    content: attr(data-n);
    position: absolute; left: 8px; bottom: 6px; z-index: 2;
    font: 600 10px/1 var(--d-sans);
    letter-spacing: 0.12em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s;
}
.kn-dock-thumb:hover::before, .kn-dock-thumb.is-active::before { opacity: 1; }

.kn-dock button:focus-visible, .kn-expand:focus-visible, .kn-cta:focus-visible, .kn-lb button:focus-visible {
    outline: 2px solid var(--d-brass);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   5. CONTENT  (editorial, scroll-driven)
   ------------------------------------------------------------ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.kn-project-content {
    position: relative;
    z-index: 1;
    padding: 190px var(--d-gutter) 150px;
    overflow: hidden;
}
.kn-ghost {
    position: absolute;
    right: -2vw; top: 60px;
    font: 300 clamp(260px, 38vw, 620px)/0.8 var(--d-serif);
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(184, 147, 77, 0.22);
    pointer-events: none; user-select: none;
    transform: translate3d(0, var(--gy, 0px), 0);
    will-change: transform;
}
.kn-pc-inner { position: relative; max-width: 1320px; margin: 0 auto; }

.kn-detail-cat {
    display: inline-flex; align-items: center; gap: 18px;
    font: 600 11px/1 var(--d-sans);
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--d-brass);
}
.kn-detail-cat::before { content: ""; width: 56px; height: 1px; background: var(--d-brass); }

.kn-detail-title {
    margin: 34px 0 0;
    max-width: 14ch;
    font: 300 clamp(54px, 8.2vw, 132px)/0.98 var(--d-serif);
    letter-spacing: -0.035em;
    color: var(--d-ink);
}
.kn-detail-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; }
.kn-detail-title .wi { display: inline-block; }
.kn-js [data-split]:not(.is-in) .wi { transform: translateY(112%) rotate(3deg); }
.kn-js [data-split] .wi { transition: transform 1.25s var(--d-ease); transition-delay: calc(var(--i) * 90ms); }
.kn-js [data-split].is-in .wi { transform: none; }

.kn-pc-body {
    display: grid;
    grid-template-columns: minmax(180px, 3fr) 9fr;
    gap: 40px;
    margin-top: 96px;
    align-items: start;
}
.kn-pc-label { display: flex; align-items: center; gap: 16px; padding-top: 14px; font: 600 11px/1 var(--d-sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--d-mute); }
.kn-pc-label i { width: 44px; height: 1px; background: var(--d-ink); display: block; }
.kn-detail-desc {
    margin: 0;
    max-width: 24em;
    font: 300 clamp(26px, 2.7vw, 42px)/1.38 var(--d-serif);
    letter-spacing: -0.012em;
    color: var(--d-ink);
}
.kn-detail-desc .sw { opacity: 0.16; transition: opacity 0.5s ease; }
.kn-detail-desc .sw.on { opacity: 1; }

.kn-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 48px;
    margin: 110px 0 0;
}
.kn-fact { position: relative; padding: 30px 0 0; }
.kn-fact-rule { position: absolute; left: 0; top: 0; right: 0; height: 1px; background: var(--d-ink); opacity: 0.85; transform-origin: left; display: block; }
.kn-fact dt { font: 600 10.5px/1 var(--d-sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--d-brass); }
.kn-fact dd { margin: 16px 0 0; font: 300 clamp(26px, 2.4vw, 38px)/1.15 var(--d-serif); letter-spacing: -0.01em; color: var(--d-ink); }

.kn-actions { margin-top: 120px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.kn-cta {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: 18px;
    padding: 22px 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #C9A45C, #A9803A);
    color: #fff;
    font: 600 12px/1 var(--d-sans);
    letter-spacing: 0.2em; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 18px 34px -18px rgba(169, 128, 58, 0.8);
    transition: transform 0.5s var(--d-ease), box-shadow 0.5s;
}
.kn-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--d-ink); transform: translateY(101%); transition: transform 0.6s var(--d-ease); border-radius: inherit; }
.kn-cta:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -18px rgba(14, 14, 16, 0.55); }
.kn-cta:hover::before { transform: none; }
.kn-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 0.4s var(--d-ease); }
.kn-cta:hover svg { transform: translateX(6px); }
.kn-link {
    position: relative; padding-bottom: 8px;
    font: 600 12px/1 var(--d-sans); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--d-ink); text-decoration: none;
}
.kn-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--d-brass); transform-origin: right; transition: transform 0.6s var(--d-ease); }
.kn-link:hover::after { transform: scaleX(0); }

/* reveal + line-draw (only when JS is present) */
.kn-js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s ease, transform 1.3s var(--d-ease); transition-delay: var(--rd, 0s); }
.kn-js [data-reveal].is-in { opacity: 1; transform: none; }
.kn-js [data-draw] { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--d-ease); transition-delay: calc(var(--rd, 0s) + 0.15s); }
.kn-js .is-in [data-draw], .kn-js [data-draw].is-in { transform: scaleX(1); }

/* ------------------------------------------------------------
   6. LIGHTBOX
   ------------------------------------------------------------ */
.kn-lb { position: fixed; inset: 0; z-index: 10000; background: rgba(14, 14, 16, 0.97); display: grid; place-items: center; }
.kn-lb[hidden] { display: none; }
.kn-lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); animation: kn-cap 0.6s var(--d-ease) both; }
.kn-lb-bar { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; color: #fff; font: italic 400 22px var(--d-serif); }
.kn-lb-bar small { display: block; margin-top: 8px; font: 600 11px var(--d-sans); letter-spacing: 0.24em; opacity: 0.6; font-style: normal; }
.kn-lb-btn {
    position: absolute; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.kn-lb-btn:hover { background: var(--d-brass); border-color: var(--d-brass); }
.kn-lb-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.kn-lb-close { top: 28px; right: 28px; }
.kn-lb-prev { left: 28px; top: 50%; margin-top: -26px; }
.kn-lb-next { right: 28px; top: 50%; margin-top: -26px; }

/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .kn-dock { width: calc(100% - 48px); }
    .kn-stage-media { height: min(74vh, 720px); min-height: 480px; }
}
@media (max-width: 768px) {
    .kn-hud-cap { bottom: 100px; max-width: 70%; }
    .kn-hud-count { font-size: 40px; }
    .kn-hud-text { font-size: 19px; }
    .kn-expand { bottom: 100px; width: 42px; height: 42px; }
    .kn-dock { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; bottom: -48px; }
    .kn-dock > .kn-dock-btn[data-prev], .kn-dock > .kn-dock-btn[data-next] { display: none; }
    .kn-dock-thumb { min-width: 58px; }
    .kn-project-content { padding: 120px 24px 100px; }
    .kn-detail-title { max-width: none; margin-top: 26px; }
    .kn-pc-body { grid-template-columns: 1fr; gap: 22px; margin-top: 60px; }
    .kn-detail-desc { font-size: 24px; }
    .kn-facts { margin-top: 70px; grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .kn-fact { padding-bottom: 26px; }
    .kn-actions { margin-top: 70px; gap: 28px; }
    .kn-cta { padding: 20px 30px; }
    .kn-lb-prev { left: 10px; } .kn-lb-next { right: 10px; } .kn-lb-close { top: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kn-layer, .kn-pointer, .kn-hud-cap, .kn-expand, .kn-dock, .kn-dock-thumb,
    .kn-edge-line, .kn-edge-echo, .kn-edge-side::before, .kn-edge-side::after, [data-reveal] { transition-duration: 0.01s !important; transition-delay: 0s !important; }
    .kn-layer.is-active, .kn-hud-text.is-in { animation: none !important; }
}