/* ============================================================================
   blackbox v2 — Ghost theme for security research & technical writing
   Dark terminal DNA, pro typography, Ghost 5/6 Koenig cards, members, Portal.
   ============================================================================ */

/* ---------- Reset / normalize (minimal) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;padding:0;line-height:1.65;font-family:var(--font-body);background:var(--bg);color:var(--text);transition:background-color .15s ease,color .15s ease}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
button{cursor:pointer;font:inherit;border:0;background:0 0;color:inherit;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none;transition:color .1s ease;text-underline-offset:.2em}
a:hover{text-decoration:underline}

/* ============================================================================
   CSS Variables — color schemes (set by root class on <html>)
   ============================================================================ */

:root{
    --font-body: var(--gh-font-body, 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    --font-title: var(--gh-font-heading, 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif);
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;

    --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem;
    --fs-lg: 1.3125rem; --fs-xl: 1.625rem; --fs-2xl: 2.0625rem; --fs-3xl: 2.5rem; --fs-hero: 3.25rem;

    --w-text: 42rem; --w-canvas: 60rem; --w-outer: 76rem;

    --radius: 6px; --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .08); --shadow-md: 0 6px 24px rgb(0 0 0 / .18);
}

/* Font family overrides from custom settings */
.title-sans  { --font-title: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; }
.title-serif { --font-title: 'Source Serif Pro', Georgia, serif; }
.title-mono  { --font-title: 'JetBrains Mono', ui-monospace, monospace; }
.body-sans   { --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.body-serif  { --font-body: 'Source Serif Pro', Georgia, serif; }
.body-mono   { --font-body: 'JetBrains Mono', ui-monospace, monospace; --fs-base: .95rem; }

/* TERMINAL (DNA, default) */
.color-scheme-terminal{
    --bg:#0a0e0f;--bg-alt:#10161a;--bg-elev:#141b20;--border:#1f2a30;--border-strong:#2a3942;
    --text:#d8dee4;--text-muted:#8795a0;--text-dim:#5c6975;
    --accent:#4ade80;--accent-hover:#86efac;--accent-bg:rgba(74,222,128,.08);--accent-contrast:#0a0e0f;
    --code-bg:#0d1217;--code-text:#e7f0e8;--selection:rgba(74,222,128,.25);
}
/* DARK (neutral) */
.color-scheme-dark{
    --bg:#0f1115;--bg-alt:#171a21;--bg-elev:#1e222b;--border:#262a35;--border-strong:#333945;
    --text:#e6e8ec;--text-muted:#949aa8;--text-dim:#6b7280;
    --accent:#60a5fa;--accent-hover:#93c5fd;--accent-bg:rgba(96,165,250,.1);--accent-contrast:#0f1115;
    --code-bg:#0e1116;--code-text:#e6e8ec;--selection:rgba(96,165,250,.3);
}
/* LIGHT */
.color-scheme-light{
    --bg:#fff;--bg-alt:#fafbfc;--bg-elev:#fff;--border:#e5e7eb;--border-strong:#d1d5db;
    --text:#1f2328;--text-muted:#57606a;--text-dim:#8c959f;
    --accent:#2563eb;--accent-hover:#1d4ed8;--accent-bg:rgba(37,99,235,.08);--accent-contrast:#fff;
    --code-bg:#f6f8fa;--code-text:#1f2328;--selection:rgba(37,99,235,.2);
}
/* AUTO (follows OS) */
.color-scheme-auto{color-scheme:light dark;
    --bg:#fff;--bg-alt:#fafbfc;--bg-elev:#fff;--border:#e5e7eb;--border-strong:#d1d5db;
    --text:#1f2328;--text-muted:#57606a;--text-dim:#8c959f;
    --accent:#2563eb;--accent-hover:#1d4ed8;--accent-bg:rgba(37,99,235,.08);--accent-contrast:#fff;
    --code-bg:#f6f8fa;--code-text:#1f2328;--selection:rgba(37,99,235,.2);
}
@media (prefers-color-scheme: dark){
    .color-scheme-auto{
        --bg:#0f1115;--bg-alt:#171a21;--bg-elev:#1e222b;--border:#262a35;--border-strong:#333945;
        --text:#e6e8ec;--text-muted:#949aa8;--text-dim:#6b7280;
        --accent:#60a5fa;--accent-hover:#93c5fd;--accent-bg:rgba(96,165,250,.1);--accent-contrast:#0f1115;
        --code-bg:#0e1116;--code-text:#e6e8ec;--selection:rgba(96,165,250,.3);
    }
}
.accent-green{--accent:#4ade80;--accent-hover:#86efac;--accent-bg:rgba(74,222,128,.1)}
.accent-blue{--accent:#60a5fa;--accent-hover:#93c5fd;--accent-bg:rgba(96,165,250,.1)}
.accent-cyan{--accent:#22d3ee;--accent-hover:#67e8f9;--accent-bg:rgba(34,211,238,.1)}
.accent-amber{--accent:#f59e0b;--accent-hover:#fbbf24;--accent-bg:rgba(245,158,11,.1)}
:root{--ghost-accent-color:var(--accent)}
::selection{background:var(--selection);color:var(--text)}

/* ============================================================================
   Typography
   ============================================================================ */
h1,h2,h3,h4,h5,h6{font-family:var(--font-title);line-height:1.2;margin:0 0 .6em;letter-spacing:-.015em;font-weight:600;color:var(--text)}
h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-xl)}h3{font-size:var(--fs-lg)}h4{font-size:var(--fs-md)}h5{font-size:var(--fs-base)}
h6{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}

p{margin:0 0 1.1em}
small{font-size:var(--fs-xs)}
strong,b{font-weight:600}
em,i{font-style:italic}
hr{border:none;height:1px;background:var(--border);margin:2em 0}
blockquote{margin:1.5em 0;padding:.1em 0 .1em 1.1em;border-left:3px solid var(--accent);color:var(--text-muted);font-style:italic}
blockquote p:last-child{margin-bottom:0}

code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9em}
:not(pre) > code{padding:.15em .4em;background:var(--code-bg);border:1px solid var(--border);border-radius:4px;color:var(--code-text);word-break:break-word}
pre{margin:1.4em 0;padding:1.1em 1.2em;background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow-x:auto;line-height:1.55;position:relative}
pre code{background:transparent;padding:0;border:0;color:var(--code-text)}

/* ============================================================================
   Layout containers
   ============================================================================ */
.wrap-outer{max-width:var(--w-outer);margin:0 auto;padding:0 1.5rem}
.wrap-canvas{max-width:var(--w-canvas);margin:0 auto;padding:0 1.5rem}
.wrap-text{max-width:var(--w-text);margin:0 auto;padding:0 1.5rem}

/* ============================================================================
   Site header
   ============================================================================ */
.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:color-mix(in oklab,var(--bg) 85%,transparent)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:4.1rem}
.site-header-brand{display:flex;align-items:baseline;gap:.65rem;font-family:var(--font-title);font-weight:600;font-size:1.1rem;color:var(--text)}
.site-header-brand:hover{text-decoration:none}
.site-header-brand .site-logo{height:1.6rem;width:auto}
.site-header-prompt{font-family:var(--font-mono);font-size:.9rem;color:var(--accent);display:none}
.show-terminal-prompt .site-header-prompt{display:inline}

.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav a{color:var(--text-muted);font-size:var(--fs-sm);font-weight:500}
.site-nav a:hover{color:var(--text);text-decoration:none}
.site-nav a.current-nav-item{color:var(--text)}

.site-actions{display:flex;align-items:center;gap:.8rem}
.btn-ghost{color:var(--text-muted);padding:.4rem .7rem;border-radius:var(--radius)}
.btn-ghost:hover{background:var(--bg-alt);color:var(--text);text-decoration:none}
.btn-primary{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:var(--accent);color:var(--accent-contrast);border-radius:var(--radius);font-weight:600;font-size:var(--fs-sm)}
.btn-primary:hover{background:var(--accent-hover);text-decoration:none;color:var(--accent-contrast)}

.site-nav-toggle{display:none;padding:.4rem;color:var(--text-muted)}
@media (max-width:720px){
    .site-nav,.site-actions{display:none}
    .site-nav-toggle{display:inline-flex}
    .site-nav.is-open,.site-actions.is-open{display:flex;position:fixed;inset:4.1rem 0 auto 0;background:var(--bg);border-bottom:1px solid var(--border);padding:1.5rem;flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   Hero (homepage)
   ============================================================================ */
.hero{padding:3.5rem 0 2rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
.hero-kicker{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.6em}
.hero-title{font-size:var(--fs-hero);line-height:1.08;margin:0 0 .3em}
.hero-desc{color:var(--text-muted);font-size:var(--fs-md);max-width:48rem;margin:0}
@media (max-width:720px){.hero-title{font-size:var(--fs-2xl)}}

/* ============================================================================
   Post feed
   ============================================================================ */
.post-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:2.2rem 1.6rem;padding:3rem 0}
.post-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.post-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.post-card a{color:inherit}
.post-card a:hover{text-decoration:none}
.post-card-image{aspect-ratio:16/9;background:var(--bg-alt);overflow:hidden}
.post-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-image img{transform:scale(1.03)}
.post-card-no-image{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-alt),var(--bg-elev));color:var(--text-dim);font-family:var(--font-mono);font-size:var(--fs-xl);padding:1.5rem;text-align:center}
.post-card-no-image span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-md);opacity:.7}
.post-card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post-card-meta{display:flex;gap:.6rem;align-items:center;font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.post-card-meta .dot{opacity:.4}
.post-card-tag{color:var(--accent);font-weight:600}
.post-card-title{font-size:var(--fs-lg);line-height:1.3;margin:0 0 .4rem;color:var(--text)}
.post-card:hover .post-card-title{color:var(--accent)}
.post-card-excerpt{color:var(--text-muted);font-size:var(--fs-sm);margin:0 0 1.1rem;flex:1}
.post-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--text-dim)}

/* ============================================================================
   Post page
   ============================================================================ */
.post-hero{margin:2rem auto 0;max-width:var(--w-canvas);padding:0 1.5rem}
.post-hero-image{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-alt)}

.post-header{padding:3rem 0 2rem;text-align:left}
.post-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:1.1rem}
.post-meta .dot{opacity:.4}
.post-meta .tag{color:var(--accent);font-weight:600}
.post-meta .reading-time{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim)}
.post-title{font-size:var(--fs-3xl);line-height:1.1;margin:0 0 .5em}
.post-excerpt{color:var(--text-muted);font-size:var(--fs-md);line-height:1.5;margin:0 0 1.5rem;max-width:40rem}
.post-authors{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-sm);color:var(--text-muted);margin-top:1rem}
.post-authors img.author-avatar{width:2rem;height:2rem;border-radius:999px;border:1px solid var(--border)}
@media (max-width:720px){.post-title{font-size:var(--fs-2xl)}}

/* ============================================================================
   gh-content — Koenig cards
   ============================================================================ */
.gh-content{padding:1rem 0}
.gh-content > *{max-width:var(--w-text);margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}
.gh-content > p,.gh-content > ul,.gh-content > ol,.gh-content > blockquote,.gh-content > h2,.gh-content > h3,.gh-content > h4,.gh-content > hr,.gh-content > dl,.gh-content > table{font-size:var(--fs-md);line-height:1.75}
.gh-content > h2{margin-top:1.8em;font-size:var(--fs-xl)}
.gh-content > h3{margin-top:1.6em}
.gh-content > ul,.gh-content > ol{padding-left:1.3em}
.gh-content > ul li,.gh-content > ol li{margin:.3em 0}
.gh-content a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);text-underline-offset:.25em;transition:text-decoration-color .1s ease}
.gh-content a:hover{text-decoration-color:var(--accent)}

.gh-content .kg-width-wide{max-width:var(--w-canvas);padding:0 1.5rem}
.gh-content .kg-width-full{max-width:100%;padding:0}
.gh-content .kg-image{border-radius:var(--radius);border:1px solid var(--border)}
.gh-content figure{margin:2em auto}
.gh-content figcaption{text-align:center;font-size:var(--fs-xs);color:var(--text-muted);margin-top:.6em;font-family:var(--font-mono)}

.gh-content .kg-callout-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-alt);padding:1.2em 1.4em}
.gh-content .kg-bookmark-card{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.gh-content .kg-bookmark-card:hover{border-color:var(--border-strong)}

.gh-content pre{position:relative}
.gh-content pre .copy-code-btn{position:absolute;top:.6rem;right:.6rem;padding:.2em .5em;background:var(--bg-elev);border:1px solid var(--border);border-radius:4px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);opacity:0;transition:opacity .15s ease}
.gh-content pre:hover .copy-code-btn{opacity:1}
.gh-content pre .copy-code-btn:hover{color:var(--text);border-color:var(--border-strong)}

/* Prism.js overrides */
pre[class*="language-"]{background:var(--code-bg) !important}
code[class*="language-"],pre[class*="language-"]{color:var(--code-text) !important;text-shadow:none !important}
.token.comment{color:var(--text-dim) !important;font-style:italic}
.token.keyword,.token.operator,.token.selector{color:var(--accent) !important}
.token.string,.token.number{color:#f0b429 !important}
.token.function,.token.class-name{color:#60a5fa !important}

/* ============================================================================
   Post navigation
   ============================================================================ */
.post-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;margin:3rem auto;padding:2rem 1.5rem 0;max-width:var(--w-canvas);border-top:1px solid var(--border)}
.post-nav-link{display:block;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius)}
.post-nav-link:hover{border-color:var(--border-strong);text-decoration:none}
.post-nav-link.next{text-align:right}
.post-nav-link .label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.3em}
.post-nav-link .title{font-weight:600;color:var(--text)}
.post-nav-link:hover .title{color:var(--accent)}
@media (max-width:720px){.post-nav{grid-template-columns:1fr}}

/* ============================================================================
   Archive (tag, author)
   ============================================================================ */
.archive-header{padding:3rem 0 2rem;border-bottom:1px solid var(--border)}
.archive-kicker{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.5em}
.archive-title{font-size:var(--fs-2xl);margin:0 0 .3em}
.archive-desc{color:var(--text-muted);max-width:36rem}

.author-avatar-lg{width:5rem;height:5rem;border-radius:999px;border:1px solid var(--border);margin-bottom:1rem}
.author-links{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-muted);margin-top:.6rem}

/* ============================================================================
   Pagination
   ============================================================================ */
.pagination{display:flex;justify-content:center;gap:1.5rem;align-items:center;padding:2rem 0;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-sm)}
.pagination a{padding:.5em 1em;border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.pagination a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ============================================================================
   Footer
   ============================================================================ */
.site-footer{border-top:1px solid var(--border);background:var(--bg-alt);margin-top:4rem;padding:3rem 0 2rem}
.site-footer-inner{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:start}
@media (max-width:720px){.site-footer-inner{grid-template-columns:1fr}}
.site-footer-brand{font-family:var(--font-title);font-weight:600;color:var(--text);font-size:1.15rem;margin-bottom:.4rem;display:inline-block}
.site-footer-tagline{color:var(--text-muted);font-size:var(--fs-sm);max-width:28rem;margin:0 0 .8em}
.site-footer-social{display:flex;gap:1rem;margin-top:.9rem;color:var(--text-muted)}
.site-footer-social a{color:inherit}
.site-footer-social a:hover{color:var(--accent)}
.site-footer-social svg{width:1.2rem;height:1.2rem}
.site-footer-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.site-footer-tags a{display:inline-block;padding:.2em .7em;border:1px solid var(--border);border-radius:999px;font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono)}
.site-footer-tags a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.site-footer-copyright{text-align:center;padding-top:2rem;margin-top:2rem;border-top:1px solid var(--border);color:var(--text-dim);font-size:var(--fs-xs);font-family:var(--font-mono)}

/* ============================================================================
   Error pages
   ============================================================================ */
.error-page{text-align:center;padding:5rem 1.5rem}
.error-code{font-family:var(--font-mono);font-size:5rem;color:var(--accent);line-height:1;margin:0 0 1rem}
.error-title{font-size:var(--fs-2xl);margin:0 0 1rem}
.error-link{display:inline-block;margin-top:1.5rem;color:var(--accent);font-family:var(--font-mono)}

/* ============================================================================
   Portal (Ghost members) tweaks
   ============================================================================ */
.gh-portal-triggerbtn-wrapper{z-index:40}