/*
Theme Name: Khanafeer DeepTech
Theme URI: https://khanafeer.com/
Author: AbdElnaser Khanafeer
Author URI: https://khanafeer.com/
Description: A dark, deep-tech personal brand & blog theme for cybersecurity architects and founders. Animated particle-network hero, mono-accented typography, case studies, experience timeline, and a fast blog. Mood: Future. Tech. Deep.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khanafeer
Tags: portfolio, blog, dark-mode, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    --kh-bg:           #080B12;
    --kh-bg-2:         #0C1020;
    --kh-surface:      #10162A;
    --kh-surface-2:    #161E36;
    --kh-border:       rgba(120, 150, 210, 0.16);
    --kh-border-soft:  rgba(120, 150, 210, 0.09);
    --kh-text:         #E7ECF6;
    --kh-heading:      #F5F8FF;
    --kh-muted:        #97A5C2;
    --kh-faint:        #5E6C8C;

    /* Formal blue accent family */
    --kh-cyan:         #60A5FA;   /* bright accent (light blue) */
    --kh-blue:         #3B82F6;   /* primary blue */
    --kh-indigo:       #2563EB;   /* deep blue */
    --kh-accent:       #3B82F6;

    --kh-gradient:     linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
    --kh-gradient-soft:linear-gradient(135deg, rgba(96,165,250,.16), rgba(37,99,235,.16));

    --kh-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kh-font-display: "Space Grotesk", "Inter", sans-serif;
    --kh-font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;

    --kh-maxw:         1200px;
    --kh-radius:       16px;
    --kh-radius-lg:    24px;
    --kh-shadow:       0 24px 60px -20px rgba(2, 8, 23, 0.8);
    --kh-shadow-glow:  0 0 0 1px rgba(59,130,246,.28), 0 20px 60px -15px rgba(59,130,246,.28);
    --kh-ease:         cubic-bezier(0.22, 1, 0.36, 1);

    --kh-z-nav:        50;
    --kh-z-overlay:    60;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.kh-body {
    margin: 0;
    font-family: var(--kh-font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--kh-text);
    background-color: var(--kh-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Ambient page backdrop: deep grid + glow */
body.kh-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 600px at 80% -5%, rgba(37,99,235,.20), transparent 60%),
        radial-gradient(800px 500px at 0% 10%, rgba(96,165,250,.12), transparent 55%),
        var(--kh-bg);
}
body.kh-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(124,148,188,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,148,188,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 80%);
    pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--kh-accent); text-decoration: none; transition: color .2s var(--kh-ease); }
a:hover { color: var(--kh-cyan); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kh-font-display);
    color: var(--kh-heading);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 .6em;
}

p { margin: 0 0 1.2em; }

::selection { background: var(--kh-cyan); color: #05101f; }

:focus-visible {
    outline: 2px solid var(--kh-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

.kh-container { width: 100%; max-width: var(--kh-maxw); margin: 0 auto; padding: 0 24px; }
.kh-narrow { max-width: 820px; }

.kh-skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--kh-cyan); color: #05101f; padding: 10px 18px;
    font-family: var(--kh-font-mono); border-radius: 0 0 10px 0;
}
.kh-skip-link:focus { left: 0; }

/* mono eyebrow label */
.kh-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kh-font-mono);
    font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--kh-accent);
    margin: 0 0 16px;
}
.kh-eyebrow::before {
    content: ""; width: 26px; height: 1px;
    background: var(--kh-accent); opacity: .7;
}

.kh-gradient-text {
    background: var(--kh-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* =========================================================================
   3. BUTTONS
   ========================================================================= */
.kh-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--kh-font-mono);
    font-size: 14px; font-weight: 500; letter-spacing: .02em;
    padding: 14px 26px; border-radius: 999px;
    cursor: pointer; border: 1px solid transparent;
    transition: transform .25s var(--kh-ease), box-shadow .25s var(--kh-ease), background .25s var(--kh-ease), color .2s, border-color .2s;
    text-align: center;
}
.kh-btn svg { width: 18px; height: 18px; }
.kh-btn-primary {
    background: var(--kh-gradient); color: #05101f; font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(59,130,246,.55);
}
.kh-btn-primary:hover { transform: translateY(-2px); color: #05101f; box-shadow: 0 16px 40px -10px rgba(59,130,246,.7); }
.kh-btn-ghost {
    background: rgba(255,255,255,.02); color: var(--kh-text);
    border-color: var(--kh-border);
}
.kh-btn-ghost:hover { border-color: var(--kh-accent); color: var(--kh-heading); transform: translateY(-2px); }

/* =========================================================================
   4. HEADER / NAV
   ========================================================================= */
.kh-header {
    position: sticky; top: 0; z-index: var(--kh-z-nav);
    transition: background .3s var(--kh-ease), border-color .3s, backdrop-filter .3s;
    border-bottom: 1px solid transparent;
}
.kh-header.is-scrolled {
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--kh-border-soft);
}
.kh-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 76px;
}
.kh-logo a { display: inline-flex; align-items: center; line-height: 0; }
.kh-logo img, .kh-logo .custom-logo { max-height: 44px; width: auto; display: block; }
.kh-logo .kh-logo__text {
    font-family: var(--kh-font-display); font-weight: 700; font-size: 22px;
    color: var(--kh-heading); letter-spacing: -.02em;
}
.kh-logo .kh-logo__text span { color: var(--kh-accent); }

.kh-nav { display: flex; align-items: center; gap: 6px; }
.kh-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.kh-nav a {
    display: block; color: var(--kh-muted); font-size: 15px; font-weight: 500;
    padding: 9px 16px; border-radius: 999px;
    transition: color .2s, background .2s;
}
.kh-nav a:hover, .kh-nav .current-menu-item > a { color: var(--kh-heading); background: rgba(255,255,255,.04); }

.kh-header__actions { display: flex; align-items: center; gap: 14px; }

.kh-nav-toggle {
    display: none; background: none; border: 1px solid var(--kh-border);
    border-radius: 10px; width: 44px; height: 44px; color: var(--kh-text);
    cursor: pointer; align-items: center; justify-content: center;
}
.kh-nav-toggle svg { width: 22px; height: 22px; }

/* =========================================================================
   5. HERO  — full-bleed, giant glowing name over centred portrait
   ========================================================================= */
.kh-hero {
    position: relative; overflow: hidden;
    min-height: calc(100svh - 76px);
    display: flex; flex-direction: column;
    padding: clamp(20px, 4vw, 46px) 0 clamp(28px, 4vw, 48px);
}
.kh-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }

/* radial glow behind the portrait */
.kh-hero__glow {
    position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
    width: min(820px, 92vw); aspect-ratio: 1; z-index: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.5), rgba(37,99,235,.18) 38%, transparent 68%);
    filter: blur(14px); animation: kh-breathe 7s ease-in-out infinite;
}
@keyframes kh-breathe { 0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} }

/* eyebrow line: "Hey, 👋 I'm a <role>" */
.kh-hero__eyebrow {
    position: relative; z-index: 4;
    font-family: var(--kh-font-display); font-weight: 600;
    font-size: clamp(1.05rem, 2.2vw, 1.7rem); color: var(--kh-heading);
    margin: clamp(6px, 2vw, 22px) 0 clamp(2px, 1vw, 10px);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.kh-hero__wave { font-size: 1em; }
.kh-hero__role { color: var(--kh-cyan); }
.kh-hero__role .kh-cursor { color: var(--kh-cyan); animation: kh-blink 1s steps(2) infinite; font-weight: 400; }
@keyframes kh-blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* the giant name */
.kh-hero__name {
    position: relative; z-index: 2;
    font-family: var(--kh-font-display); font-weight: 700;
    font-size: clamp(2.4rem, min(12vw, 16vh), 11rem); line-height: .92; letter-spacing: -.03em;
    text-transform: uppercase; margin: 0;
    color: var(--kh-cyan);
    text-shadow: 0 0 36px rgba(59,130,246,.55), 0 0 90px rgba(37,99,235,.4);
    pointer-events: none;
}

/* centre stage holds the portrait + scroll cue */
.kh-hero__stage {
    position: relative; z-index: 3; flex: 1;
    min-height: clamp(180px, min(30vh, 34vw), 460px); margin-top: -.12em;
}
.kh-hero__photo {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: clamp(160px, min(44vw, 58vh), 600px); display: block; z-index: 3;
}
.kh-hero__photo img {
    width: 100%; height: auto; display: block;
    /* Fade the portrait's bottom edge to transparent so the real hero
       background shows through — no colour overlay, no mismatch.
       Radial ellipse centred at the bottom of the image: transparent at the
       centre-bottom (suit body), graduating to fully visible further up and
       toward the sides. The already-transparent PNG side-regions are
       unaffected because the mask there stays black (= show). */
    -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 100%, transparent 0%, rgba(0,0,0,.55) 71%, black 100%);
    mask-image:         radial-gradient(ellipse 80% 40% at 50% 100%, transparent 0%, rgba(0,0,0,.55) 71%, black 100%);
    
}
.kh-hero__photo--placeholder {
    aspect-ratio: 4/5; border-radius: 24px; background: var(--kh-gradient-soft);
    display: flex; align-items: center; justify-content: center; color: var(--kh-cyan);
    border: 1px solid var(--kh-border);
}

/* vertical scroll cue */
.kh-hero__scroll {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.kh-hero__scroll-line { width: 1px; height: 70px; background: linear-gradient(var(--kh-cyan), transparent); }
.kh-hero__scroll-label {
    font-family: var(--kh-font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--kh-muted); writing-mode: vertical-rl;
}

/* bottom-left details (description + contact + socials) */
.kh-hero__footer {
    position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
    align-items: end;
}
.kh-hero__contact { display: grid; gap: 8px; font-size: .96rem; color: var(--kh-text); align-content: end; }
.kh-hero__contact a { color: var(--kh-text); }
.kh-hero__contact a:hover { color: var(--kh-cyan); }
.kh-hero__contact span b { color: var(--kh-faint); font-weight: 600; margin-right: 8px; font-family: var(--kh-font-mono); font-size: .85em; }
.kh-hero__desc { max-width: 34ch; text-align: left; }
.kh-hero__lead { font-size: 1.02rem; color: var(--kh-muted); margin-bottom: 16px; }
.kh-hero__social { display: flex; flex-wrap: wrap; gap: 6px 4px; font-family: var(--kh-font-mono); font-size: .92rem; }
.kh-hero__social a { color: var(--kh-muted); padding: 2px 6px; }
.kh-hero__social a::before { content: "/ "; color: var(--kh-cyan); }
.kh-hero__social a:hover { color: var(--kh-cyan); }

/* ---- HERO: DESKTOP ≥75em (≥1200px) — full composed, footer anchored bottom-left ---- */
@media (min-width: 75em) {
    .kh-hero__footer {
        position: absolute; left: 0; bottom: clamp(16px, 3vh, 44px);
        grid-template-columns: 1fr; gap: 18px; max-width: min(27rem, 30vw);
    }
}

/* ---- HERO: LAPTOP 62.5em–74.9375em (1000px–1199px) — composed, narrower footer ---- */
@media (min-width: 62.5em) and (max-width: 74.9375em) {
    .kh-hero__footer {
        position: absolute; left: 0; bottom: clamp(14px, 2.5vh, 32px);
        grid-template-columns: 1fr; gap: 14px; max-width: min(22rem, 36vw);
    }
}

/* ---- HERO: TABLET 48em–62.4375em (768px–999px) — photo centered, footer in-flow 2-col ----
   Photo stays position:absolute centered in the stage. Stage gets an explicit height
   (flex:none + min-height) so it doesn't shrink. Footer drops below in 2 columns. */
@media (min-width: 48em) and (max-width: 62.4375em) {
    .kh-hero { min-height: auto; padding-bottom: 44px; }
    .kh-hero__scroll { display: none; }
    .kh-hero__name { font-size: clamp(2.4rem, min(10vw, 13vh), 7rem); }
    .kh-hero__stage { flex: none; min-height: clamp(280px, 44vw, 460px); }
    .kh-hero__footer {
        position: relative; margin-top: 20px;
        grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 8px;
    }
    .kh-hero__desc { max-width: 44ch; }
}

/* ---- HERO: MOBILE ≤47.9375em (≤767px) — photo centered, footer in-flow 1-col ---- */
@media (max-width: 47.9375em) {
    .kh-hero { min-height: auto; padding-bottom: 28px; }
    .kh-hero__scroll { display: none; }
    .kh-hero__name { font-size: clamp(1.8rem, 10vw, 3.5rem); }
    .kh-hero__stage { flex: none; min-height: clamp(200px, 58vw, 320px); }
    .kh-hero__photo { width: clamp(160px, 60vw, 260px); }
    .kh-hero__footer {
        position: relative; margin-top: 20px;
        grid-template-columns: 1fr; gap: 14px; padding-bottom: 12px;
    }
    .kh-hero__desc { max-width: none; }
}

/* =========================================================================
   6. SECTIONS
   ========================================================================= */
.kh-section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.kh-section-head { max-width: 720px; margin: 0 0 56px; }
.kh-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kh-section-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.kh-section-head p { color: var(--kh-muted); font-size: 1.08rem; margin-bottom: 0; }

/* card base */
.kh-card {
    position: relative; background: var(--kh-surface);
    border: 1px solid var(--kh-border); border-radius: var(--kh-radius);
    padding: 30px; overflow: hidden;
    transition: transform .35s var(--kh-ease), border-color .3s, box-shadow .35s;
}
.kh-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--kh-gradient-soft); opacity: 0; transition: opacity .35s; pointer-events: none;
}
.kh-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.4); box-shadow: var(--kh-shadow-glow); }
.kh-card:hover::before { opacity: 1; }
.kh-card > * { position: relative; z-index: 1; }
.kh-card__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
    background: var(--kh-gradient-soft); border: 1px solid var(--kh-border);
    color: var(--kh-cyan);
}
.kh-card__icon svg { width: 26px; height: 26px; }
.kh-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.kh-card p { color: var(--kh-muted); font-size: .98rem; margin-bottom: 0; }

.kh-grid { display: grid; gap: 24px; }
.kh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kh-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* expertise pill index */
.kh-expertise-num {
    font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-faint);
    margin-bottom: 18px; letter-spacing: .1em;
}

/* case study card */
.kh-case { display: flex; flex-direction: column; min-height: 230px; }
.kh-case__tag {
    font-family: var(--kh-font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kh-accent); margin-bottom: 16px;
}
.kh-case h3 { font-size: 1.35rem; }
.kh-case__link {
    margin-top: auto; font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-text);
    display: inline-flex; align-items: center; gap: 8px;
}
.kh-case:hover .kh-case__link { color: var(--kh-cyan); }
.kh-case__link svg { width: 16px; height: 16px; transition: transform .25s; }
.kh-case:hover .kh-case__link svg { transform: translateX(4px); }

/* =========================================================================
   7. PROFILE & ORIGIN  +  CAPABILITIES MATRIX (merged second section)
   ========================================================================= */
.kh-about-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 48px 72px; align-items: start; }

/* left · profile / origin */
.kh-origin__eyebrow {
    font-family: var(--kh-font-mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--kh-cyan); margin: 0 0 26px;
}
.kh-origin__eyebrow b { color: var(--kh-accent); font-weight: 600; }
.kh-origin__title {
    font-family: var(--kh-font-display); font-weight: 700; letter-spacing: -.02em;
    font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: 1.0; margin: 0 0 30px;
}
.kh-origin__title span { display: block; }
.kh-origin__title .is-muted { color: var(--kh-faint); }
.kh-origin__quote {
    border-left: 2px solid rgba(96,165,250,.45); padding-left: 20px; margin: 0 0 34px;
    color: var(--kh-muted); font-size: 1.02rem; max-width: 38ch;
}
.kh-origin__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.kh-origin__list li { display: flex; gap: 12px; color: var(--kh-text); font-size: .96rem; }
.kh-origin__list .n { font-family: var(--kh-font-mono); color: var(--kh-cyan); font-size: 13px; flex: none; padding-top: 1px; }
.kh-origin__more {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
    font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-accent);
}
.kh-origin__more svg { width: 15px; height: 15px; transition: transform .25s; }
.kh-origin__more:hover { color: var(--kh-cyan); }
.kh-origin__more:hover svg { transform: translateX(4px); }

/* right · capabilities matrix */
.kh-matrix__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    font-family: var(--kh-font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    padding-bottom: 2px;
}
.kh-matrix__head .label { color: var(--kh-heading); }
.kh-matrix__head .meta { color: var(--kh-faint); letter-spacing: .12em; }
.kh-matrix { border-bottom: 1px solid var(--kh-border); }
.kh-matrix__row {
    display: grid; grid-template-columns: 2.4rem 2.75rem 1fr; gap: 18px; align-items: start;
    padding: 26px 0; border-top: 1px solid var(--kh-border); transition: border-color .3s var(--kh-ease);
}
.kh-matrix__row:hover { border-top-color: rgba(96,165,250,.5); }
.kh-matrix__num { font-family: var(--kh-font-mono); font-size: 1.05rem; color: var(--kh-faint); line-height: 1.5; transition: color .25s; }
.kh-matrix__row:hover .kh-matrix__num { color: var(--kh-cyan); }
.kh-matrix__icon {
    width: 44px; height: 44px; border: 1px solid var(--kh-border); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: var(--kh-cyan); background: var(--kh-gradient-soft);
}
.kh-matrix__icon svg { width: 20px; height: 20px; }
.kh-matrix__title { font-family: var(--kh-font-display); font-weight: 600; font-size: 1.18rem; color: var(--kh-heading); margin: 2px 0 8px; }
.kh-matrix__desc { color: var(--kh-muted); font-size: .95rem; margin: 0; max-width: 46ch; }
/* Matrix narrow styles consolidated into mobile breakpoint (section 14) */

/* stats */
.kh-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.kh-stat {
    text-align: center; padding: 32px 18px; border-radius: var(--kh-radius);
    border: 1px solid var(--kh-border); background: var(--kh-surface);
}
.kh-stat__num { font-family: var(--kh-font-display); font-size: clamp(2.2rem,4vw,3.2rem); font-weight: 700; line-height: 1; }
.kh-stat__label { font-family: var(--kh-font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--kh-muted); margin-top: 10px; }

/* =========================================================================
   8. TIMELINE (About page)
   ========================================================================= */
.kh-timeline { position: relative; margin-left: 8px; padding-left: 34px; }
.kh-timeline::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, var(--kh-cyan), var(--kh-indigo), transparent);
}
.kh-tl-item { position: relative; padding-bottom: 44px; }
.kh-tl-item:last-child { padding-bottom: 0; }
.kh-tl-item::before {
    content: ""; position: absolute; left: -42px; top: 5px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--kh-bg); border: 2px solid var(--kh-cyan);
    box-shadow: 0 0 0 4px var(--kh-bg), 0 0 14px rgba(96,165,250,.5);
}
.kh-tl-item.is-founder::before { border-color: var(--kh-indigo); box-shadow: 0 0 0 4px var(--kh-bg), 0 0 14px rgba(37,99,235,.5); }
.kh-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.kh-tl-item h3 { font-size: 1.25rem; margin-bottom: 2px; }
.kh-tl-org { color: var(--kh-accent); font-weight: 500; }
.kh-tl-date {
    font-family: var(--kh-font-mono); font-size: 12px; color: var(--kh-muted);
    background: var(--kh-surface-2); border: 1px solid var(--kh-border);
    padding: 5px 12px; border-radius: 8px; white-space: nowrap;
}
.kh-tl-item ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kh-tl-item ul li { display: flex; gap: 10px; color: var(--kh-muted); font-size: .98rem; }
.kh-tl-item ul li svg { width: 16px; height: 16px; color: var(--kh-accent); flex: none; margin-top: 5px; }

/* =========================================================================
   9. BLOG
   ========================================================================= */
/* category filter bar */
.kh-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 44px; }
.kh-filter__chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-muted);
    padding: 9px 16px; border: 1px solid var(--kh-border); border-radius: 999px;
    transition: color .2s var(--kh-ease), background .25s var(--kh-ease), border-color .2s;
}
.kh-filter__chip:hover { color: var(--kh-heading); border-color: var(--kh-accent); }
.kh-filter__chip.is-active { color: #05101f; background: var(--kh-gradient); border-color: transparent; font-weight: 600; }
.kh-filter__count {
    font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 999px;
    background: rgba(255,255,255,.06); color: inherit;
}
.kh-filter__chip.is-active .kh-filter__count { background: rgba(5,16,31,.18); }

.kh-posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.kh-posts--2 { grid-template-columns: repeat(2,1fr); }
.kh-post-card {
    display: flex; flex-direction: column; background: var(--kh-surface);
    border: 1px solid var(--kh-border); border-radius: var(--kh-radius); overflow: hidden;
    transition: transform .35s var(--kh-ease), border-color .3s, box-shadow .35s;
}
.kh-post-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.4); box-shadow: var(--kh-shadow-glow); }
.kh-post-card__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--kh-surface-2); }
.kh-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kh-ease); }
.kh-post-card:hover .kh-post-card__thumb img { transform: scale(1.06); }
.kh-post-card__thumb--empty { display: flex; align-items: center; justify-content: center; background: var(--kh-gradient-soft); }
.kh-post-card__thumb--empty svg { width: 48px; height: 48px; color: var(--kh-accent); opacity: .6; }
.kh-post-card__cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-family: var(--kh-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(8,12,24,.8); border: 1px solid var(--kh-border); backdrop-filter: blur(8px);
    color: var(--kh-accent); padding: 5px 11px; border-radius: 999px;
}
.kh-post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.kh-post-card__meta { font-family: var(--kh-font-mono); font-size: 12px; color: var(--kh-faint); margin-bottom: 12px; display: flex; gap: 14px; }
.kh-post-card h3 { font-size: 1.22rem; margin-bottom: 12px; }
.kh-post-card h3 a { color: var(--kh-heading); }
.kh-post-card h3 a:hover { color: var(--kh-cyan); }
.kh-post-card p { color: var(--kh-muted); font-size: .96rem; margin-bottom: 18px; }
.kh-post-card__more { margin-top: auto; font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-accent); display: inline-flex; gap: 7px; align-items: center; }
.kh-post-card__more svg { width: 15px; height: 15px; transition: transform .25s; }
.kh-post-card:hover .kh-post-card__more svg { transform: translateX(4px); }

/* single post */
.kh-single { padding: clamp(48px,7vw,90px) 0; }
.kh-single__header { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.kh-single__header h1 { font-size: clamp(2rem,5vw,3.2rem); margin-bottom: 18px; }
.kh-single__meta { font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-muted); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.kh-single__feat { max-width: 1000px; margin: 0 auto 48px; border-radius: var(--kh-radius-lg); overflow: hidden; border: 1px solid var(--kh-border); aspect-ratio: 16 / 9; }
.kh-single__feat img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.kh-content { max-width: 760px; margin: 0 auto; font-size: 1.08rem; }
.kh-content > * { margin-bottom: 1.4em; }
.kh-content h2 { font-size: 1.8rem; margin-top: 1.6em; }
.kh-content h3 { font-size: 1.4rem; margin-top: 1.4em; }
.kh-content a { text-decoration: underline; text-underline-offset: 3px; }
.kh-content img, .kh-content figure { border-radius: var(--kh-radius); overflow: hidden; }
.kh-content blockquote {
    border-left: 3px solid var(--kh-cyan); margin: 1.6em 0; padding: 4px 0 4px 24px;
    color: var(--kh-heading); font-size: 1.2rem; font-style: italic;
}
.kh-content pre {
    background: #05080f; border: 1px solid var(--kh-border); border-radius: var(--kh-radius);
    padding: 22px; overflow-x: auto; font-family: var(--kh-font-mono); font-size: .9rem;
}
.kh-content code { font-family: var(--kh-font-mono); font-size: .9em; background: var(--kh-surface-2); padding: 2px 7px; border-radius: 6px; }
.kh-content pre code { background: none; padding: 0; }
.kh-content ul, .kh-content ol { padding-left: 1.3em; }
.kh-content li { margin-bottom: .5em; }
.kh-tags { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin: 40px auto 0; }
.kh-tags a {
    font-family: var(--kh-font-mono); font-size: 12.5px; color: var(--kh-muted);
    border: 1px solid var(--kh-border); padding: 7px 14px; border-radius: 999px;
}
.kh-tags a:hover { color: var(--kh-cyan); border-color: var(--kh-accent); }

/* archive header */
.kh-page-hero { padding: clamp(70px,10vw,130px) 0 clamp(40px,5vw,60px); text-align: center; }
.kh-page-hero h1 { font-size: clamp(2.4rem,5.5vw,4rem); }
.kh-page-hero p { color: var(--kh-muted); max-width: 600px; margin: 0 auto; font-size: 1.1rem; }

/* pagination */
.kh-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.kh-pagination .page-numbers {
    font-family: var(--kh-font-mono); font-size: 14px; min-width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 14px;
    border: 1px solid var(--kh-border); border-radius: 12px; color: var(--kh-muted);
    transition: all .2s;
}
.kh-pagination .page-numbers:hover, .kh-pagination .page-numbers.current {
    color: #05101f; background: var(--kh-gradient); border-color: transparent; font-weight: 600;
}

/* =========================================================================
   10. CTA / CONTACT
   ========================================================================= */
.kh-cta {
    position: relative; text-align: center; border-radius: var(--kh-radius-lg);
    padding: clamp(48px,7vw,88px) 28px; overflow: hidden;
    border: 1px solid var(--kh-border);
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(59,130,246,.18), transparent 70%),
        var(--kh-surface);
}
.kh-cta h2 { font-size: clamp(2rem,4.6vw,3.2rem); }
.kh-cta p { color: var(--kh-muted); max-width: 560px; margin: 0 auto 32px; font-size: 1.1rem; }
.kh-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.kh-cta__meta { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: center; margin-top: 34px; font-family: var(--kh-font-mono); font-size: 13px; color: var(--kh-muted); }
.kh-cta__meta span { display: inline-flex; align-items: center; gap: 8px; }
.kh-cta__meta svg { width: 16px; height: 16px; color: var(--kh-accent); }

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.kh-footer { border-top: 1px solid var(--kh-border-soft); padding: 72px 0 36px; margin-top: 40px; position: relative; }
.kh-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.kh-footer__brand p { color: var(--kh-muted); max-width: 32ch; font-size: .98rem; margin-top: 18px; }
.kh-footer h4 { font-family: var(--kh-font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kh-faint); margin-bottom: 18px; }
.kh-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kh-footer__links a { color: var(--kh-muted); font-size: .98rem; }
.kh-footer__links a:hover { color: var(--kh-cyan); }
.kh-footer__social { display: flex; gap: 12px; margin-top: 4px; }
.kh-footer__social a {
    width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kh-border); color: #ffffff; transition: all .25s var(--kh-ease);
}
.kh-footer__social a:hover { color: var(--kh-cyan); border-color: var(--kh-accent); transform: translateY(-3px); }
.kh-footer__social svg {filter: invert(1); width: 19px; height: 19px; }
.kh-footer__bottom {
    border-top: 1px solid var(--kh-border-soft); padding-top: 28px;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
    font-family: var(--kh-font-mono); font-size: 12.5px; color: var(--kh-faint);
}

/* =========================================================================
   12. SCROLL REVEAL
   ========================================================================= */
/* Hidden ONLY when JS is active (html.kh-js). Without JS, content stays visible. */
.kh-js .kh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--kh-ease), transform .7s var(--kh-ease); }
.kh-js .kh-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   13. WP CORE & COMMENTS
   ========================================================================= */
.kh-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.kh-content .alignright { float: right; margin: 0 0 1em 1.5em; }
.kh-content .aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .kh-content figcaption { font-size: .85rem; color: var(--kh-faint); text-align: center; margin-top: 8px; }
.sticky, .bypostauthor { display: block; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.kh-comments { max-width: 760px; margin: 64px auto 0; }
.kh-comments h3 { font-size: 1.6rem; margin-bottom: 26px; }
.kh-comments ol { list-style: none; padding: 0; }
.kh-comments .comment-body { padding: 20px; border: 1px solid var(--kh-border); border-radius: var(--kh-radius); margin-bottom: 18px; background: var(--kh-surface); }
.kh-comments .children { list-style: none; margin-left: 28px; padding: 0; }
.kh-comments .comment-author { font-weight: 600; color: var(--kh-heading); }
.kh-comments .comment-meta { font-family: var(--kh-font-mono); font-size: 12px; color: var(--kh-faint); margin-bottom: 10px; }
.kh-comment-form input[type=text], .kh-comment-form input[type=email], .kh-comment-form input[type=url], .kh-comment-form textarea {
    width: 100%; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: 12px;
    padding: 13px 16px; color: var(--kh-text); font-family: var(--kh-font-sans); font-size: 1rem; margin-bottom: 16px;
}
.kh-comment-form textarea:focus, .kh-comment-form input:focus { outline: none; border-color: var(--kh-accent); }
.kh-comment-form .submit, #submit {
    background: var(--kh-gradient); color: #05101f; border: 0; border-radius: 999px;
    padding: 13px 28px; font-family: var(--kh-font-mono); font-weight: 600; cursor: pointer;
}

/* 404 / no results */
.kh-empty { text-align: center; padding: clamp(80px,12vw,160px) 0; }
.kh-empty__code { font-family: var(--kh-font-mono); font-size: clamp(5rem,16vw,11rem); font-weight: 700; line-height: 1; margin-bottom: 8px; }
.kh-empty p { color: var(--kh-muted); max-width: 460px; margin: 0 auto 28px; }

/* search form */
.kh-search { display: flex; gap: 10px; max-width: 460px; margin: 24px auto 0; }
.kh-search input[type=search] {
    flex: 1; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: 999px;
    padding: 13px 22px; color: var(--kh-text); font-size: 1rem;
}
.kh-search input[type=search]:focus { outline: none; border-color: var(--kh-accent); }

/* =========================================================================
   14A. SKILLS TAGS — About page
   ========================================================================= */
.kh-skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.kh-skill-group {
    background: var(--kh-surface);
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius);
    padding: 26px;
    transition: border-color .3s var(--kh-ease);
}
.kh-skill-group:hover { border-color: rgba(59,130,246,.3); }
.kh-skill-group__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--kh-border-soft);
}
.kh-skill-group__icon {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--kh-gradient-soft); border: 1px solid var(--kh-border);
    color: var(--kh-cyan);
}
.kh-skill-group__icon svg { width: 17px; height: 17px; }
.kh-skill-group__label {
    font-family: var(--kh-font-mono); font-size: 11.5px;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--kh-faint); margin: 0; font-weight: 500;
}
.kh-skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-skill-tag {
    display: inline-block;
    font-family: var(--kh-font-mono); font-size: 12px; letter-spacing: .02em;
    color: var(--kh-muted); background: var(--kh-surface-2);
    border: 1px solid var(--kh-border); border-radius: 8px;
    padding: 5px 11px; line-height: 1.4;
    transition: color .2s var(--kh-ease), border-color .2s, background .2s;
    cursor: default;
}
.kh-skill-tag:hover {
    color: var(--kh-cyan);
    border-color: rgba(96,165,250,.4);
    background: rgba(96,165,250,.06);
}

/* =========================================================================
   14. RESPONSIVE — 3 device tiers, em-based (zoom-safe)
   Mobile:  320–767px  (≤47.9375em)
   Tablet:  768–1199px (48em – 74.9375em)
   Desktop: 1200px+    (≥75em) — defaults are desktop, no extra rules needed
   ========================================================================= */

/* ---- TABLET (48em – 74.9375em / ~768px–1199px) ---- */
@media (max-width: 74.9375em) {
    /* About grid: stack vertically */
    .kh-about-grid { grid-template-columns: 1fr; gap: 48px; }
    /* Content grids: 2 columns max */
    .kh-grid-3, .kh-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .kh-posts { grid-template-columns: repeat(2, 1fr); }
    .kh-posts--2 { grid-template-columns: repeat(2, 1fr); }
    .kh-stats { grid-template-columns: repeat(2, 1fr); }
    /* Footer: brand spans full width, 2-col nav + connect */
    .kh-footer__grid { grid-template-columns: 1fr 1fr; }
    .kh-footer__brand { grid-column: 1 / -1; }
}

/* ---- MOBILE (≤47.9375em / ~767px) ---- */
@media (max-width: 47.9375em) {
    body.kh-body { font-size: 16px; }

    /* Navigation: hide desktop nav, show hamburger */
    .kh-nav { display: none; }
    .kh-nav-toggle { display: inline-flex; }
    .kh-header.is-open .kh-nav {
        display: flex; position: absolute; top: 76px; left: 16px; right: 16px;
        flex-direction: column; align-items: stretch; padding: 14px;
        background: rgba(10,15,31,.97); border: 1px solid var(--kh-border); border-radius: var(--kh-radius);
        backdrop-filter: blur(16px); box-shadow: var(--kh-shadow);
    }
    .kh-header.is-open .kh-nav ul { flex-direction: column; gap: 4px; width: 100%; }
    .kh-header.is-open .kh-nav a { padding: 13px 16px; }

    /* All grids: single column */
    .kh-grid-2, .kh-grid-3, .kh-grid-4 { grid-template-columns: 1fr; }
    .kh-posts, .kh-posts--2 { grid-template-columns: 1fr; }
    /* Stats: keep 2-col on mobile for compactness */
    .kh-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Matrix: drop icon column on very narrow screens */
    .kh-matrix__row { grid-template-columns: 2rem 1fr; }
    .kh-matrix__icon { display: none; }

    /* Timeline: stack date below role on mobile */
    .kh-tl-head { flex-direction: column; }

    /* Footer: full single column */
    .kh-footer__grid { grid-template-columns: 1fr; }

    /* Buttons: full-width stacked CTAs */
    .kh-hero__cta { flex-direction: column; }
    .kh-hero__cta .kh-btn { width: 100%; justify-content: center; }

    /* Skills: single column on mobile */
    .kh-skills { grid-template-columns: 1fr; }
}

/* =========================================================================
   15. REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .kh-reveal { opacity: 1; transform: none; }
    .kh-portrait__scan { display: none; }
}