/* ============================================================================
   kHouse Dossier · Page shell
   ----------------------------------------------------------------------------
   Top-level page layout primitives only:
     - .kd-page          (snap container)
     - .kd-chapter       (heavyweight section + variants: --alt, --sunken,
                          --inverse, --hero is in kd-hero.css)
     - .kd-chapter__rail / __num / __eyebrow / __title / __lede
     - .kd-chapter__ribbon (optional dossier-style top strip)
     - data-reveal scroll-fade primitive (paired with js/kd-reveal.js)
     - inverse-chapter overrides for cards from kd-blocks.css
     - per-chapter responsive tweaks for the #ch-03 capabilities grid

   Block-level styling lives in:
     - kd-blocks.css     (timeline, team grid, pillars, intel-row)
     - kd-hero.css       (hero + planet stage + facts strip)
     - kd-contact.css    (contact grid + map tile)
     - kd-sidedots.css   (right-edge scroll-spy rail)
   ============================================================================ */

/* ============================== PAGE SHELL ============================== */
.kd-page {
    /* scroll-padding stays for header offset on hash navigation, but the
       scroll-snap that used to live here was REMOVED: Safari 15.6's snap
       implementation pulls every wheel event back to the nearest chapter
       boundary, which manifests as "scroll feels stolen". Confirmed via
       the trace beacon (sy=234 → snap-back to sy=157). */
    scroll-padding-top: 64px;
}

/* ============================== CHAPTER ================================== */
/* A "chapter" is a heavyweight section with its own identity:
   - mono chapter number + title in a left rail
   - generous vertical padding
   (No scroll-snap-align — see note in .kd-page above.)
*/
.kd-chapter {
    position: relative;
    border-bottom: var(--kd-border-w) solid var(--kd-border);
    padding-block: clamp(56px, 6vw, 96px);
    overflow: hidden;
}
.kd-chapter--alt    { background: var(--kd-bg-alt); }
.kd-chapter--sunken { background: var(--kd-bg-sunken); }
.kd-chapter--inverse {
    background: #0a0c10;
    color: #f5f6f8;
    --kd-fg: #f5f6f8;
    --kd-fg-soft: #c8ccd4;
    --kd-fg-muted: #8a92a0;
    --kd-bg: #0a0c10;
    --kd-bg-alt: #11141a;
    --kd-bg-sunken: #06080b;
    --kd-border: #232831;
    --kd-border-strong: #353b46;
}

.kd-chapter__rail {
    display: block;
    margin-bottom: var(--kd-s-9);
}
.kd-chapter__num {
    display: none; /* removed — content now rests at container edge */
}
.kd-chapter__eyebrow {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    margin-bottom: var(--kd-s-3);
    display: block;
}
.kd-chapter__title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: var(--kd-s-4);
    text-wrap: balance;
}
.kd-chapter__lede {
    font-size: var(--kd-text-4);
    line-height: 1.5;
    color: var(--kd-fg-soft);
    max-width: 56ch;
    text-wrap: pretty;
}

/* ============================== CHAPTER MARKERS ========================== */
/* Tiny mono ribbon at the very top of a chapter — feels like film leader */
.kd-chapter__ribbon {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    border-bottom: 1px solid var(--kd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--kd-s-5);
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    background: linear-gradient(to bottom, rgba(var(--kd-bg-rgb), 0.92), transparent);
    pointer-events: none;
    z-index: 2;
}
.kd-chapter__ribbon span:nth-child(2) {
    display: flex; align-items: center; gap: var(--kd-s-3);
}
.kd-chapter__ribbon-tick {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--kd-c-ok);
}

/* ============================== SCROLL REVEAL =========================== */
/* Add data-reveal to any block. Optional data-reveal-delay (ms).
   The IntersectionObserver in kd-reveal.js adds .is-in.
   IMPORTANT: opacity:0 only applies under html.js — when JS is disabled (or
   the page is rendered by a crawler/archive.org bot that doesn't run scripts),
   content stays fully visible and indexable. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================== INVERSE TWEAKS ========================== */
/* When chapter--inverse is in play, ensure cards from kd-blocks.css inherit
   the dark tokens. Single rule covers every kind of card-y block. */
.kd-chapter--inverse .kd-card,
.kd-chapter--inverse .kd-block,
.kd-chapter--inverse .kd-pillar,
.kd-chapter--inverse .kd-team__member,
.kd-chapter--inverse .kd-intel-tile {
    background: var(--kd-bg-alt);
}

/* ============================== CAPABILITIES GRID RESPONSIVE ============= */
/* The 8-card grid in #ch-03 was looking awkward at narrow widths because
   the icon block + heavy card padding left a lot of dead space when the grid
   collapsed. Fix it with smarter breakpoints + tighter mobile cards. */
@media (max-width: 1024px) and (min-width: 721px) {
    #ch-03 .kd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) and (min-width: 481px) {
    #ch-03 .kd-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    #ch-03 .kd-grid-4 .kd-card {
        padding: 18px 16px;
    }
    #ch-03 .kd-grid-4 .kd-directive__icon {
        width: 32px; height: 32px;
        margin-bottom: 10px !important;
    }
    #ch-03 .kd-grid-4 .kd-directive__icon svg {
        width: 18px; height: 18px;
    }
    #ch-03 .kd-grid-4 .kd-card h4 { font-size: 16px; }
    #ch-03 .kd-grid-4 .kd-card .kd-small { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 480px) {
    #ch-03 .kd-grid-4 { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--kd-border); border-bottom: 1px solid var(--kd-border); }
    #ch-03 .kd-grid-4 .kd-card {
        border: 0;
        border-bottom: 1px solid var(--kd-border);
        border-radius: 0;
        padding: 18px 0;
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
    }
    #ch-03 .kd-grid-4 .kd-card:last-child { border-bottom: 0; }
    #ch-03 .kd-grid-4 .kd-card .kd-mono {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 2px !important;
    }
    #ch-03 .kd-grid-4 .kd-directive__icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 36px; height: 36px;
        margin: 0 !important;
    }
    #ch-03 .kd-grid-4 .kd-directive__icon svg {
        width: 18px; height: 18px;
    }
    #ch-03 .kd-grid-4 .kd-card h4 {
        grid-column: 2;
        grid-row: 2;
        font-size: 16px;
        margin: 0 !important;
    }
    #ch-03 .kd-grid-4 .kd-card .kd-small {
        grid-column: 2;
        grid-row: 3;
        font-size: 13px;
        line-height: 1.5;
        color: var(--kd-fg-muted);
    }
    #ch-03 .kd-grid-4 .kd-card:hover { border-color: var(--kd-border); background: var(--kd-bg-alt); }
}