/* ============================================================================
   kHouse Dossier · Page-shell add-ons
   ----------------------------------------------------------------------------
   Section dividers, scroll-snap, planet stage, team grid, intel cards.
   These are layered on top of kd-sections.css for the homepage.
   ============================================================================ */

/* ============================== PAGE SHELL ============================== */
.kd-page {
    /* Sectioned scrolling — each .kd-chapter snaps to top of viewport */
    scroll-snap-type: y proximity;
    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
   - subtle scroll-snap so each one parks itself near the top
*/
.kd-chapter {
    position: relative;
    scroll-snap-align: start;
    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, color-mix(in srgb, var(--kd-bg) 92%, transparent), 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);
}

/* ============================== PLANET STAGE ============================ */
.kd-planet-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--kd-s-9);
    align-items: center;
}
@media (max-width: 960px) {
    .kd-planet-stage { grid-template-columns: 1fr; }
    .kd-planet-stage__visual { order: -1; }
}
.kd-planet-stage__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.kd-planet-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
/* Crosshairs around the planet for that command-center reading */
.kd-planet-stage__visual::before,
.kd-planet-stage__visual::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid var(--kd-fg-muted);
    opacity: 0.55;
    pointer-events: none;
}
.kd-planet-stage__visual::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.kd-planet-stage__visual::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* HUD readouts overlaid on planet visual */
.kd-planet-hud {
    position: absolute;
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    pointer-events: none;
    line-height: 1.5;
}
.kd-planet-hud--tl { top: 16px; left: 16px; }
.kd-planet-hud--tr { top: 16px; right: 16px; text-align: right; }
.kd-planet-hud--bl { bottom: 16px; left: 16px; }
.kd-planet-hud--br { bottom: 16px; right: 16px; text-align: right; }
.kd-planet-hud strong { color: var(--kd-fg); font-weight: var(--kd-w-semibold); display:block; font-size: 12px; }

/* ============================== TIMELINE ================================ */
.kd-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) {
    .kd-timeline { grid-template-columns: 1fr 1fr; }
}
.kd-timeline__cell {
    position: relative;
    padding: var(--kd-s-7) var(--kd-s-5) var(--kd-s-6);
    background: var(--kd-bg);
    transition: background var(--kd-dur) var(--kd-ease);
    display: flex;
    flex-direction: column;
}
.kd-timeline__cell::before {
    /* horizontal rail across the top of the card with a dot at the year tick */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background:
        linear-gradient(to right, var(--kd-accent) 0, var(--kd-accent) 28px, var(--kd-border) 28px, var(--kd-border) 100%);
}
.kd-timeline__cell::after {
    /* the dot on the rail */
    content: "";
    position: absolute;
    top: -4px;
    left: 24px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-bg);
}
.kd-timeline__cell:hover { background: var(--kd-bg-alt); }
.kd-timeline__year {
    font-family: var(--kd-font-mono);
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    color: var(--kd-fg);
    line-height: 1;
    margin: 8px 0 var(--kd-s-5);
    font-variant-numeric: tabular-nums;
}
.kd-timeline__title {
    font-size: var(--kd-text-3);
    font-weight: var(--kd-w-semibold);
    margin: 0 0 var(--kd-s-3);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kd-timeline__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

/* ============================== TEAM GRID =============================== */
.kd-team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) { .kd-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kd-team { grid-template-columns: 1fr; } }

.kd-team__member {
    background: var(--kd-bg);
    padding: var(--kd-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-3);
    transition: background var(--kd-dur) var(--kd-ease);
}
.kd-team__member:hover { background: var(--kd-bg-alt); }
.kd-team__avatar {
    width: 56px; height: 56px;
    background: var(--kd-bg-sunken);
    border: 1px solid var(--kd-border);
    display: grid; place-items: center;
    font-family: var(--kd-font-mono);
    font-size: 14px;
    font-weight: var(--kd-w-semibold);
    letter-spacing: 0.05em;
    color: var(--kd-fg-soft);
}
.kd-team__name {
    font-size: var(--kd-text-3);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.005em;
}
.kd-team__role {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-team__mail {
    margin-top: auto;
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    padding-block: 2px;
    transition: color var(--kd-dur) var(--kd-ease), border-color var(--kd-dur) var(--kd-ease);
}
.kd-team__mail:hover { color: var(--kd-accent); border-color: var(--kd-accent); }

/* "+ You? Always recruiting" card spans the leftover columns on its row
   so the grid never finishes with empty negative space. Higher specificity
   here so the .kd-team__member base doesn't shadow the span. */
.kd-team .kd-team__member--cta {
    grid-column: span 3;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.kd-team .kd-team__member--cta .kd-team__avatar {
    width: 64px;
    height: 64px;
    font-size: 22px;
}
.kd-team .kd-team__member--cta .kd-team__mail {
    align-self: center;
}
@media (max-width: 880px) {
    .kd-team .kd-team__member--cta { grid-column: span 1; }
}

/* ============================== PILLAR GRID (about) ===================== */
.kd-pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 1100px) { .kd-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kd-pillars { grid-template-columns: 1fr; } }
.kd-pillar {
    background: var(--kd-bg);
    padding: var(--kd-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-3);
    min-height: 220px;
}
.kd-pillar__num {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    color: var(--kd-fg-muted);
}
.kd-pillar__title {
    font-size: var(--kd-text-4);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
}
.kd-pillar__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.55;
}

/* ============================== INTEL ROW =============================== */
.kd-intel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kd-s-5);
}
@media (max-width: 960px) { .kd-intel-row { grid-template-columns: 1fr; } }
.kd-intel-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kd-border);
    background: var(--kd-bg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease);
}
.kd-intel-tile:hover { border-color: var(--kd-fg); transform: translateY(-2px); }
.kd-intel-tile__media {
    aspect-ratio: 16 / 10;
    background: var(--kd-bg-sunken);
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--kd-border);
}
.kd-intel-tile__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.85) contrast(1.05);
    transition: filter var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease);
}
.kd-intel-tile:hover .kd-intel-tile__media img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.kd-intel-tile__cat {
    position: absolute; top: 12px; left: 12px;
}
.kd-intel-tile__body {
    padding: var(--kd-s-5);
    display: flex; flex-direction: column; gap: var(--kd-s-3);
    flex: 1;
}
.kd-intel-tile__meta {
    display: flex; justify-content: space-between; align-items: center;
}
.kd-intel-tile__title {
    font-size: var(--kd-text-4);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: balance;
}
.kd-intel-tile__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.5;
}
.kd-intel-tile__more {
    margin-top: auto;
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-accent);
}

/* ============================== CONTACT BOX ============================= */
.kd-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) { .kd-contact-grid { grid-template-columns: 1fr; } }
.kd-contact-grid__primary,
.kd-contact-grid__secondary {
    padding: var(--kd-s-7);
}
.kd-contact-grid__primary {
    background: var(--kd-bg-alt);
    border-right: 1px solid var(--kd-border);
}
@media (max-width: 880px) {
    .kd-contact-grid__primary { border-right: 0; border-bottom: 1px solid var(--kd-border); }
}
.kd-contact-grid__heading {
    font-size: var(--kd-text-2);
    font-weight: var(--kd-w-semibold);
    margin-bottom: var(--kd-s-3);
    letter-spacing: -0.005em;
}
.kd-contact-grid__line {
    display: flex; align-items: center; gap: var(--kd-s-3);
    padding-block: 8px;
    border-bottom: 1px solid var(--kd-border);
    font-size: var(--kd-text-2);
}
.kd-contact-grid__line:last-child { border-bottom: 0; }
.kd-contact-grid__line a { color: var(--kd-fg); }
.kd-contact-grid__line a:hover { color: var(--kd-accent); }
.kd-contact-grid__line .kd-mono { width: 100px; flex-shrink: 0; }
.kd-contact-grid__line--stack { align-items: flex-start; }
.kd-contact-grid__line--stack .kd-mono { padding-top: 2px; }
.kd-contact-grid__line--stack .kd-soft { display: inline-block; margin-top: 2px; font-size: var(--kd-text-1); color: var(--kd-fg-muted); }

/* ============================== MAP TILE ================================ */
.kd-maptile {
    aspect-ratio: 16 / 9;
    background: var(--kd-bg-sunken);
    border: 1px solid var(--kd-border);
    position: relative;
    overflow: hidden;
}
.kd-maptile iframe {
    /* Soft desaturation — keeps OSM's roads, parks and water as muted color
       cues without blowing past the editorial palette. */
    filter: saturate(0.55) contrast(0.95) brightness(1.02);
    transition: filter var(--kd-dur) var(--kd-ease);
}
[data-theme="dark"] .kd-maptile iframe {
    filter: saturate(0.55) invert(0.92) contrast(0.9) hue-rotate(180deg);
}

.kd-maptile svg { display: block; width: 100%; height: 100%; }
.kd-maptile__pin {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    background: #e11d2a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, #e11d2a 35%, transparent),
        0 6px 14px rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.kd-maptile__pin-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kd-fg);
    background: var(--kd-bg);
    padding: 4px 8px;
    border: 1px solid var(--kd-border-strong);
    border-radius: var(--kd-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
@keyframes kd-heart-beat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25%      { transform: translate(-50%, -50%) scale(1.18); }
    40%      { transform: translate(-50%, -50%) scale(1.0); }
    60%      { transform: translate(-50%, -50%) scale(1.12); }
    75%      { transform: translate(-50%, -50%) scale(1.0); }
}
.kd-maptile__pin::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, #e11d2a 55%, transparent) 0%, transparent 70%);
    animation: kd-pin-glow 2.4s ease-in-out infinite;
}
.kd-maptile__pin::after {
    content: '';
    position: absolute;
    inset: -22px;
    border: 2px solid color-mix(in srgb, #e11d2a 60%, transparent);
    border-radius: 50%;
    animation: kd-pin-pulse 2.4s ease-out infinite;
}
.kd-maptile__pin::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, #e11d2a 55%, transparent) 0%, transparent 70%);
    animation: kd-pin-glow 2.4s ease-in-out infinite;
}
.kd-maptile__pin::after {
    content: '';
    position: absolute;
    inset: -22px;
    border: 2px solid color-mix(in srgb, #e11d2a 60%, transparent);
    border-radius: 50%;
    animation: kd-pin-pulse 2.4s ease-out infinite;
}
@keyframes kd-pin-pulse {
    0%   { transform: scale(0.4); opacity: 1; border-width: 2px; }
    100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}
@keyframes kd-pin-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.15); }
}
@keyframes kd-pin-pulse-old {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Always-visible action chips, bottom-right of the map tile */
.kd-maptile__actions {
    position: absolute;
    bottom: 38px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
    justify-content: flex-end;
    max-width: calc(100% - 24px);
}

/* Legacy hover overlay (unused, kept for safety) */
.kd-maptile__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: var(--kd-s-4);
    background: color-mix(in srgb, var(--kd-bg) 70%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kd-dur) var(--kd-ease);
    text-align: center;
}
.kd-maptile:hover .kd-maptile__hover,
.kd-maptile:focus-within .kd-maptile__hover {
    opacity: 1;
    pointer-events: auto;
}
.kd-maptile__hover-label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-maptile__hover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.kd-maptile__action {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 14px;
    background: var(--kd-bg);
    color: var(--kd-fg);
    border: 1px solid var(--kd-border-strong);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--kd-radius);
    transition: background var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease), border-color var(--kd-dur) var(--kd-ease);
}
.kd-maptile__action:hover {
    background: var(--kd-fg);
    color: var(--kd-bg);
    border-color: var(--kd-fg);
}

.kd-maptile__caption {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--kd-font-mono);
    font-size: 10px; letter-spacing: var(--kd-track-mono);
    text-transform: uppercase; color: var(--kd-fg-muted);
    padding: 4px 8px;
    background: color-mix(in srgb, var(--kd-bg) 90%, transparent);
    border: 1px solid var(--kd-border);
    text-decoration: none;
    z-index: 2;
}

/* Attribution bar covers OSM's footer (which contains the donation link the
   client doesn't want surfaced) while still satisfying OSM's ToS by crediting
   the data source. Pinned to the very bottom of the tile. */
.kd-maptile__attribution {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 12px;
    background: var(--kd-bg);
    border-top: 1px solid var(--kd-border);
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.kd-maptile__attribution a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--kd-border-strong);
}
.kd-maptile__attribution a:hover {
    color: var(--kd-fg);
}

/* ============================== HERO (stacked) ========================== */
/* The hero is a chapter, but we override its big padding so the title
   carries the page and a single horizontal facts strip anchors the bottom. */
.kd-chapter--hero {
    padding-block: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 44px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Gothenburg aerial backdrop with helicopters — sets the defense/maritime
   tone behind the copy. Opacity is meaningful so the image actually reads,
   and a strong vertical gradient on top guarantees the hero title and facts
   strip stay readable in any theme. */
.kd-chapter--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../assets/hero-aerial.jpg) center / cover no-repeat;
    opacity: 0.6;
    z-index: -2;
    pointer-events: none;
}
.kd-chapter--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Heavier bg-tinted veil — keeps the page reading as bright/white in
       light mode while letting the photo show through as a soft watermark. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kd-bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--kd-bg) 85%, transparent) 60%,
        var(--kd-bg) 100%);
    z-index: -1;
    pointer-events: none;
}
[data-theme="dark"] .kd-chapter--hero::before { opacity: 0.85; filter: saturate(0.85); }
[data-theme="gray"] .kd-chapter--hero::before { opacity: 0.55; filter: saturate(0.6); }
#ch-02 { padding-top: clamp(28px, 3vw, 48px); }
.kd-chapter--hero .kd-container > .kd-hero,
.kd-hero--stack {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vw, 56px);
    padding: 0;
    border: 0;
    background: none;
}
.kd-hero__copy { display: flex; flex-direction: column; max-width: 22ch; max-width: min(22ch, 100%); }
.kd-hero__copy { max-width: none; }
.kd-hero__copy .kd-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-5);
}
.kd-hero__title {
    font-size: clamp(38px, 5.2vw, 72px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.028em;
    line-height: 1.0;
    margin: 0 0 var(--kd-s-6);
    max-width: 18ch;
    text-wrap: balance;
}
.kd-hero__lede {
    font-size: var(--kd-text-4);
    line-height: 1.5;
    color: var(--kd-fg-soft);
    max-width: 62ch;
    margin: 0 0 var(--kd-s-7);
    text-wrap: pretty;
}
.kd-hero__cta {
    display: flex;
    gap: var(--kd-s-3);
    flex-wrap: wrap;
}

/* The facts strip — a single row of mono labels + bold values that runs the
   full content width, separated by hairlines, anchored to the same baseline
   as the hero copy. Reads as part of the hero, not a sidebar. */
.kd-hero__facts--strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--kd-border);
    border-bottom: 1px solid var(--kd-border);
}
.kd-hero__facts--strip .kd-fact {
    background: transparent;
    padding: var(--kd-s-5) var(--kd-s-5) var(--kd-s-5) 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--kd-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.kd-hero__facts--strip .kd-fact:first-child {
    border-left: 0;
    padding-left: 0;
}
.kd-hero__facts--strip .kd-fact:not(:first-child) {
    padding-left: var(--kd-s-5);
}
.kd-hero__facts--strip .kd-fact__label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    margin: 0;
}
.kd-hero__facts--strip .kd-fact__value {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--kd-fg);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .kd-hero__facts--strip { grid-template-columns: repeat(2, 1fr); }
    .kd-hero__facts--strip .kd-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .kd-hero__facts--strip .kd-fact:nth-child(n+3) { border-top: 1px solid var(--kd-border); padding-top: var(--kd-s-5); margin-top: -1px; }
}

/* Legacy 2x2 variant (kept for any other usage) */
.kd-hero__facts:not(.kd-hero__facts--strip) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
.kd-fact {
    background: var(--kd-bg);
    padding: var(--kd-s-5) var(--kd-s-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
    justify-content: space-between;
}
.kd-fact__label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-fact__value {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* ============================== 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; }
}

/* When a chapter rail enters, the body content beneath it should follow with
   a slight stagger — handled by the data-reveal-delay attribute on the block. */

/* ============================== INVERSE TWEAKS ========================== */
/* When chapter--inverse is in play, ensure cards inherit the dark tokens */
.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);
}


/* ============================== INTEL TILE BUTTON RESET ================== */
button.kd-intel-tile {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
}
button.kd-intel-tile:focus-visible {
    outline: 2px solid var(--kd-accent, var(--kd-fg));
    outline-offset: 2px;
}

/* News modal CSS removed: article tiles now navigate to /news/*.html
   See css/kd-chrome.css for the surviving overlay primitive (mobilenav). */


/* ============================== SIDE DOTS NAV =========================== */
/* Vertical scroll-spy rail pinned to the right edge. Each link is a tiny dot
   plus a label that animates in on hover or when active. Hidden on touch /
   small viewports where the top nav already covers chapter jumps. */
.kd-sidedots {
    position: fixed;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
    background: color-mix(in oklch, var(--kd-bg) 88%, transparent);
    border: 1px solid var(--kd-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.kd-sidedots a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--kd-fg-muted);
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    line-height: 1;
    transition: color var(--kd-dur) var(--kd-ease);
    white-space: nowrap;
}
.kd-sidedots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--kd-fg-muted);
    box-sizing: border-box;
    transition: background var(--kd-dur) var(--kd-ease),
                border-color var(--kd-dur) var(--kd-ease),
                transform var(--kd-dur) var(--kd-ease);
    flex-shrink: 0;
}
.kd-sidedots__label {
    /* hidden visually; kept in DOM for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.kd-sidedots a:hover { color: var(--kd-fg); }
.kd-sidedots a:hover .kd-sidedots__dot { border-color: var(--kd-fg); }
.kd-sidedots a.is-active {
    color: var(--kd-fg);
}
.kd-sidedots a.is-active .kd-sidedots__dot {
    background: var(--kd-accent, var(--kd-fg));
    border-color: var(--kd-accent, var(--kd-fg));
    transform: scale(1.25);
}
@media (max-width: 1100px) {
    .kd-sidedots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kd-sidedots a, .kd-sidedots__dot, .kd-sidedots__label { transition: none; }
}


/* ============================== 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); }
}